:root{--blue:#38c6ff;--orange:#ff4a3a;--gold:#ffd54a;--ink:#1a1222;--rock:#2a2033;--rock2:#3b2d46;
 font-family:ui-rounded,"Trebuchet MS",system-ui,-apple-system,"Segoe UI",sans-serif;color:#fff4dc;background:#120c1a}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#120c1a;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation}
button:disabled{cursor:default;opacity:.4}
.hidden{display:none!important}
#stage{position:fixed;inset:0;overflow:hidden;background:var(--art-gameBg,radial-gradient(ellipse at 50% 20%,#4a2f5e 0%,#251838 45%,#0e0816 100%)) center/cover no-repeat}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center}

/* embers floating up behind everything */
.embers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.embers i{position:absolute;bottom:-12px;width:6px;height:6px;border-radius:50%;background:#ffb43a;box-shadow:0 0 10px 3px #ff7a1a99;opacity:0;animation:ember 9s linear infinite}
@keyframes ember{0%{transform:translate(0,0) scale(1);opacity:0}10%{opacity:.9}100%{transform:translate(var(--dx),-105vh) scale(.3);opacity:0}}

.icon-btn{width:42px;height:42px;border-radius:12px;background:#ffffff14;border:1px solid #ffffff2a;font-size:20px;display:grid;place-items:center}
.icon-btn:hover{background:#ffffff26}
.small-btn{min-width:40px;height:34px;padding:0 12px;border-radius:10px;background:#ffffff16;border:1px solid #ffffff30;font-weight:800;font-size:15px}
.small-btn:hover:not(:disabled){background:#ffffff2a}

/* ---------- LOBBY ---------- */
#lobby{justify-content:space-evenly;padding:max(10px,env(safe-area-inset-top)) 14px 14px;background:var(--art-lobbyBg,none) center/cover no-repeat}
.corner{position:absolute;right:12px;top:10px}
.logo{margin:0;font-size:clamp(3rem,11vw,7.5rem);line-height:.9;font-weight:1000;letter-spacing:-.04em;text-align:center;font-style:italic;transform:rotate(-3deg);
 color:#ffd54a;-webkit-text-stroke:3px #6a2a12;paint-order:stroke fill;text-shadow:0 6px 0 #b0431a,0 12px 0 #5a1f0e,0 22px 34px #000b,0 0 40px #ff7a1a66;animation:logoPulse 3.2s ease-in-out infinite}
.logo b{color:#ff4a2a;display:inline-block;transform:rotate(12deg) scale(1.15);margin-left:.04em}
.logo img{max-width:min(80vw,560px);max-height:36vh;width:auto;height:auto;display:block}
@keyframes logoPulse{50%{filter:brightness(1.15) drop-shadow(0 0 18px #ff9a2a88)}}
.duel{position:relative;width:min(92vw,720px);height:clamp(110px,24vh,230px);display:flex;justify-content:space-between;align-items:center}
.duel .cr{width:clamp(100px,21vh,210px);aspect-ratio:1}
.duel .cr svg,.duel .cr img{width:100%;height:100%;filter:drop-shadow(0 12px 14px #000a)}
.duel .cr.l{animation:lunge1 2.4s ease-in-out infinite}.duel .cr.r{animation:lunge2 2.4s ease-in-out infinite;transform:scaleX(-1)}
@keyframes lunge1{0%,100%{transform:translateX(0)}50%{transform:translateX(24px) rotate(6deg)}}
@keyframes lunge2{0%,100%{transform:scaleX(-1) translateX(0)}50%{transform:scaleX(-1) translateX(24px) rotate(6deg)}}
.duel-spark{position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px 0 0 -45px;background:radial-gradient(circle,#fff 0,#ffe14d 30%,#ff7a1a00 70%);animation:sparkle 1.2s ease-in-out infinite;border-radius:50%}
.duel-spark::before,.duel-spark::after{content:"";position:absolute;inset:-30px 38px;background:linear-gradient(#fff0,#ffe14d,#fff0);border-radius:6px;transform:rotate(30deg)}
.duel-spark::after{transform:rotate(-40deg)}
@keyframes sparkle{0%,100%{transform:scale(.5);opacity:.5}50%{transform:scale(1.1);opacity:1}}
.picker{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap}
.big-opt{width:clamp(78px,17vw,118px);aspect-ratio:1;border-radius:20px;background:linear-gradient(#3d2d4d,#271b34);border:3px solid #ffffff22;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 6px 0 #0007;transition:transform .12s}
.big-opt i{font-style:normal;font-size:clamp(30px,6vw,48px)}.big-opt small{font-size:11px;font-weight:800;opacity:.8;letter-spacing:.05em}
.big-opt:hover{transform:translateY(-3px)}
.big-opt.on{border-color:var(--gold);background:linear-gradient(#6a4a2a,#43291a);box-shadow:0 6px 0 #0007,0 0 24px #ffb02e88;transform:translateY(-4px) scale(1.05)}
.small-row{gap:22px}
.sizes,.levels,.dirtpick{display:flex;gap:8px;align-items:center}
.sizes button{width:54px;height:54px;border-radius:12px;background:#ffffff10;border:2px solid #ffffff22;display:grid;place-items:center;position:relative}
.sizes button.on,.levels button.on,.dirtpick button.on{border-color:var(--gold);background:#ffb02e30;box-shadow:0 0 14px #ffb02e77}
.sizes .mini{display:grid;gap:1px;width:32px;height:32px}.sizes .mini i{background:#d9c08a;opacity:.85;border-radius:1px}.sizes .mini i:nth-child(odd){background:#a8895a}
.sizes button b{position:absolute;right:3px;bottom:0;font-size:11px;text-shadow:0 1px 2px #000}
.levels button,.dirtpick button{height:44px;padding:0 10px;border-radius:12px;background:#ffffff10;border:2px solid #ffffff22;font-size:15px}
.dirtpick button s{display:none}
.play-btn{width:clamp(78px,14vh,104px);height:clamp(78px,14vh,104px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe98a,#ffb02e 55%,#d9631a);box-shadow:0 8px 0 #7a3410,0 0 40px #ff9a2a99;font-size:clamp(36px,7vh,52px);color:#5a1f0e;display:grid;place-items:center;animation:playPulse 1.6s ease-in-out infinite}
.play-btn span{margin-left:6px}.play-btn:active{transform:translateY(5px);box-shadow:0 3px 0 #7a3410}
@keyframes playPulse{50%{transform:scale(1.08)}}

/* ---------- COIN ---------- */
#coinScreen{justify-content:center;gap:28px;background:radial-gradient(circle at 50% 40%,#0000,#000a)}
.coin-wrap{perspective:900px;width:min(46vw,220px);aspect-ratio:1}
.coin{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:coinFlip 1.5s cubic-bezier(.2,.7,.3,1) forwards}
.coin .face{position:absolute;inset:0;border-radius:50%;backface-visibility:hidden;border:8px solid #ffd54a;box-shadow:inset 0 0 0 6px #b97a10,0 14px 30px #000a;display:grid;place-items:center}
.coin .face svg{width:78%;height:78%}.coin .f0{background:radial-gradient(circle,#1a5a86,#0b2a45)}.coin .f1{background:radial-gradient(circle,#8a1a14,#3e0806);transform:rotateY(180deg)}
.coin.end0{--end:1800deg}.coin.end1{--end:1980deg}
@keyframes coinFlip{0%{transform:translateY(60px) rotateY(0) scale(.6)}35%{transform:translateY(-120px) rotateY(calc(var(--end) * .5)) scale(1.1)}100%{transform:translateY(0) rotateY(var(--end)) scale(1)}}
.coin-text{font-size:clamp(28px,6vw,52px);font-weight:1000;font-style:italic;text-shadow:0 4px 0 #0008;min-height:1.2em}
.coin-text.pop{animation:slamIn .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes slamIn{0%{transform:scale(3);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---------- GAME ---------- */
#game{padding:0 0 max(8px,env(safe-area-inset-bottom))}
.gtop{width:100%;flex:none;display:flex;align-items:center;justify-content:space-between;padding:8px 12px 4px calc(var(--zb-home-space,0px) + 8px);height:50px}
.mini-logo{font-weight:1000;font-style:italic;font-size:26px;color:var(--gold);-webkit-text-stroke:1.5px #6a2a12;paint-order:stroke fill;text-shadow:0 3px 0 #b0431a,0 6px 10px #0009;transform:rotate(-2deg)}
.mini-logo b{color:#ff4a2a}
.gtools{display:flex;gap:8px}.gtools .icon-btn{width:36px;height:36px;font-size:17px}
.arena{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(6px,1.4vw,22px);padding:0 10px}
.holder{flex:1;min-width:0;min-height:0;align-self:stretch;display:flex;align-items:center;justify-content:center}
#boardWrap{position:relative;border-radius:18px;padding:var(--frame,14px);background:var(--art-boardFrame,linear-gradient(145deg,#6b4a33,#3a2616 60%,#59391f));box-shadow:0 18px 50px #000d,inset 0 0 0 3px #00000055,inset 0 3px 0 #ffffff33;will-change:transform}
#boardWrap::before{content:"";position:absolute;inset:6px;border-radius:13px;border:2px dashed #ffffff22;pointer-events:none}
#board{position:relative;width:100%;height:100%;background:var(--art-board,#2b1d12);overflow:visible;border-radius:6px}
#grid{position:absolute;inset:0;display:grid}
.cell{position:relative;display:grid;place-items:center;user-select:none;-webkit-user-select:none;cursor:pointer;
 background:var(--art-cell,linear-gradient(145deg,#ead7ae,#d4b886));box-shadow:inset 0 0 0 1px #5a3d2455,inset 0 2px 0 #fff7,inset 0 -3px 5px #6a4a2a55}
.cell.alt{background:var(--art-cellAlt,linear-gradient(145deg,#cfb083,#b6935f))}
.cell .num{font-weight:1000;font-size:calc(var(--cs) * .46);color:#5a3a1c;text-shadow:0 1px 0 #fff9,0 -1px 1px #3a220e99,0 0 calc(var(--cs)*.2) #fff3;font-style:italic;pointer-events:none}
.cell.trail{animation:trail .35s ease-out}
@keyframes trail{0%{filter:brightness(1.7);box-shadow:inset 0 0 14px 2px #fff}100%{filter:none}}
.cell.sel{z-index:3;box-shadow:inset 0 0 0 3px #29f0ff,inset 0 0 calc(var(--cs)*.35) #29f0ffcc,0 0 calc(var(--cs)*.4) #29f0ffaa;animation:selPulse .9s ease-in-out infinite}
@keyframes selPulse{50%{filter:brightness(1.25)}}
.cell.coach-hi{animation:coachHi .8s ease-in-out infinite}
@keyframes coachHi{50%{box-shadow:inset 0 0 0 3px #ffe14d,0 0 18px #ffe14d}}
.cell.scorch{background:radial-gradient(circle,#1a1210 0,#3a2a1e 45%,#b6935f 100%)}
.cell.bad{z-index:4;animation:badFlash .28s steps(2) infinite;box-shadow:inset 0 0 0 4px #ff2a2a,0 0 20px #ff2a2a}
@keyframes badFlash{50%{background:#ff6a5a}}
.dirt{position:absolute;inset:-6%;z-index:2;pointer-events:none;display:grid;place-items:center;transform-origin:50% 90%}
.dirt svg,.dirt img{width:100%;height:100%;filter:drop-shadow(0 4px 3px #0008)}
.dirt.drop{animation:dirtDrop .42s cubic-bezier(.5,0,.9,.5) both}
@keyframes dirtDrop{0%{transform:translateY(-240%) scale(.5);opacity:0}25%{opacity:1}78%{transform:translateY(0) scale(1.05,.9)}88%{transform:translateY(0) scale(1.18,.78)}100%{transform:translateY(0) scale(1)}}
.dirt.still{animation:none}

#pieces{position:absolute;inset:0;pointer-events:none}
.piece{position:absolute;left:0;top:0;z-index:10;will-change:transform}
.piece .pi{position:absolute;inset:-4%;transform-origin:50% 90%;filter:drop-shadow(0 6px 5px #000a)}
.piece .pi svg,.piece .pi img{width:100%;height:100%}
.piece .pnum{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);min-width:34%;padding:0 3px;border-radius:99px;background:#150c20;border:2px solid #ffe9a8;color:#ffe9a8;font-style:normal;font-weight:1000;font-size:calc(var(--cs)*.3);line-height:1.15;text-align:center;box-shadow:0 2px 4px #000a}
.piece.blue .pi{animation:idle 2s ease-in-out infinite}.piece.orange .pi{animation:idle 2.3s ease-in-out infinite}
.piece.blue::before,.piece.orange::before{content:"";position:absolute;inset:-14%;border-radius:50%;z-index:-1;opacity:0;transition:opacity .25s}
.piece.blue::before{background:radial-gradient(circle,#38c6ff77,#0000 70%)}.piece.orange::before{background:radial-gradient(circle,#ff3a2a88,#0000 70%)}
.piece.active::before{opacity:1;animation:aura 1.3s ease-in-out infinite}
@keyframes aura{50%{transform:scale(1.18)}}
@keyframes idle{50%{transform:scale(1.03,.97) translateY(1%)}}
.piece.crouch .pi{animation:crouch .1s ease-out forwards}
@keyframes crouch{to{transform:scale(1.15,.72)}}
.piece.moving .pi{animation:none;transform:scale(.92,1.1)}
.piece.land .pi{animation:land .32s ease-out}
@keyframes land{0%{transform:scale(1.3,.7)}45%{transform:scale(.9,1.15) translateY(-8%)}100%{transform:none}}
.piece.fuse .pi{animation:fuse .09s linear infinite}
@keyframes fuse{0%{transform:translate(-3%,0) scale(1.03)}50%{transform:translate(3%,-2%) scale(1.08)}100%{transform:translate(-2%,2%) scale(1.03)}}
.piece.fuse .pi{filter:drop-shadow(0 0 12px #ff3a1a) brightness(1.3) saturate(1.5)}
.piece.victim .pi{animation:smash .38s ease-out forwards}
@keyframes smash{0%{transform:none}30%{transform:scale(1.7,.2);filter:brightness(2)}100%{transform:scale(1.7,.2)}}
.piece.flying{transition:transform 1.1s cubic-bezier(.2,.6,.4,1),opacity 1.1s}
.piece.cheer .pi{animation:cheer .5s ease-in-out 3}
@keyframes cheer{50%{transform:translateY(-22%) scale(.95,1.15) rotate(-6deg)}}
.piece.gone{display:none}
.piece.shiver .pi{animation:fuse .07s linear infinite}
.piece.pop .pi{animation:popIn .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes popIn{0%{transform:scale(0)}100%{transform:none}}
.piece.white .pi{filter:grayscale(1) brightness(1.3);opacity:.7;transition:all .8s}

.cage{position:absolute;z-index:14;pointer-events:none;inset:-6%;display:flex;justify-content:space-around;animation:cageDrop .35s cubic-bezier(.6,0,1,.6) both}
.cage i{width:12%;height:100%;border-radius:4px;background:linear-gradient(90deg,#555,#e3e3e8 40%,#4a4a52);box-shadow:0 0 6px #000a}
.cage::before,.cage::after{content:"";position:absolute;left:0;right:0;height:11%;background:linear-gradient(#e3e3e8,#4a4a52);border-radius:4px;box-shadow:0 0 6px #000a}
.cage::before{top:0}.cage::after{bottom:0}
@keyframes cageDrop{0%{transform:translateY(-300%)}85%{transform:translateY(4%)}100%{transform:none}}

#overlay{position:absolute;inset:0;width:100%;height:100%;z-index:30;pointer-events:none;overflow:visible}
#fx{position:absolute;inset:-30% ;width:160%;height:160%;left:-30%;top:-30%;z-index:40;pointer-events:none}
.xmark{font-size:calc(var(--cs)*.9);position:absolute;z-index:31;animation:slamIn .35s cubic-bezier(.2,1.6,.4,1)}

/* player cards */
.pcard{flex:none;width:clamp(110px,15vw,190px);border-radius:18px;padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;
 background:linear-gradient(#3a2b48,#241a30);border:3px solid #ffffff1c;box-shadow:0 8px 24px #0008;transition:box-shadow .3s,border-color .3s,transform .3s}
.pcard::before{content:"";position:absolute;inset:0;border-radius:15px;background:var(--art-cardL,none) center/cover;opacity:.9;pointer-events:none}
#card1::before{background:var(--art-cardR,none) center/cover}
.pcard .pc-pic{width:78%;aspect-ratio:1;position:relative}.pcard .pc-pic svg,.pcard .pc-pic img{width:100%;height:100%;filter:drop-shadow(0 6px 6px #000a)}
.pcard .pc-name{font-weight:1000;font-size:clamp(14px,2vw,20px);letter-spacing:.04em;text-transform:uppercase;position:relative}
.pcard .pc-wins{font-weight:900;font-size:14px;opacity:.85;position:relative}
.pcard .pc-turn{position:absolute;top:-12px;padding:3px 12px;border-radius:99px;font-size:12px;font-weight:1000;letter-spacing:.1em;background:var(--gold);color:#4a1f0a;opacity:0;transform:translateY(6px);transition:all .25s}
.pcard.c0{border-color:#38c6ff44}.pcard.c1{border-color:#ff4a3a44}
.pcard.on{transform:scale(1.05)}.pcard.on .pc-turn{opacity:1;transform:none}
.pcard.c0.on{border-color:var(--blue);box-shadow:0 0 34px #38c6ffaa,0 8px 24px #0008}
.pcard.c1.on{border-color:var(--orange);box-shadow:0 0 34px #ff3a2aaa,0 8px 24px #0008}
.pcard.on .pc-pic{animation:idle 1.4s ease-in-out infinite}
.pcard.think .pc-name::after{content:" …";animation:blink .8s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.controls{flex:none;display:flex;gap:12px;align-items:center;justify-content:center;height:50px}
.lock-btn{height:40px;padding:0 24px;border-radius:12px;font-weight:1000;letter-spacing:.07em;font-size:15px;background:linear-gradient(#ffd54a,#e8892a);color:#4a1f0a;box-shadow:0 4px 0 #8a4410;display:flex;gap:8px;align-items:center}
.lock-btn:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #8a4410}
.lock-btn:not(:disabled){animation:lockReady 1.2s ease-in-out infinite}
@keyframes lockReady{50%{filter:brightness(1.15);box-shadow:0 4px 0 #8a4410,0 0 22px #ffb02eaa}}

/* big full-screen effects */
#vignette{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:0;background:radial-gradient(ellipse at center,#0000 45%,#ff1a1acc 100%)}
#vignette.pulse{animation:vig 1.1s ease-in-out 2}
#vignette.hold{opacity:1;background:radial-gradient(ellipse at center,#0000 35%,#d4101099 100%);animation:vig 1s ease-in-out infinite alternate}
@keyframes vig{0%{opacity:0}50%{opacity:1}100%{opacity:.1}}
#flash{position:fixed;inset:0;pointer-events:none;z-index:65;background:#fff;opacity:0}
#flash.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.95}100%{opacity:0}}
#banner{position:fixed;left:0;right:0;top:50%;z-index:70;text-align:center;pointer-events:none;font-weight:1000;font-style:italic;font-size:clamp(54px,15vw,170px);line-height:1;letter-spacing:-.02em;
 color:#ffe14d;-webkit-text-stroke:4px #5a1f0e;paint-order:stroke fill;text-shadow:0 8px 0 #b0431a,0 14px 30px #000c;opacity:0;transform:translateY(-50%)}
#banner.show{animation:banner 1.9s cubic-bezier(.2,1.4,.4,1) forwards}
#banner.red{color:#ff5a3a;-webkit-text-stroke-color:#3a0a04}
@keyframes banner{0%{opacity:0;transform:translateY(-50%) scale(4) rotate(-8deg)}14%{opacity:1;transform:translateY(-50%) scale(1) rotate(-4deg)}80%{opacity:1;transform:translateY(-50%) scale(1.05) rotate(-4deg)}100%{opacity:0;transform:translateY(-50%) scale(1.3) rotate(-4deg)}}
.reason{position:absolute;z-index:50;left:50%;bottom:3%;transform:translate(-50%,0);padding:8px 22px;border-radius:14px;background:#1a0a10f0;border:3px solid #ff4a3a;font-weight:1000;font-size:clamp(16px,3vw,28px);letter-spacing:.04em;white-space:nowrap;box-shadow:0 8px 30px #000c;animation:slamIn .4s cubic-bezier(.2,1.6,.4,1)}
.reason em{font-style:normal;color:#ffe14d}

.overlay{position:fixed;inset:0;z-index:80;background:#06020ccc;display:grid;place-items:center;padding:16px;animation:fadeIn .3s}
@keyframes fadeIn{from{opacity:0}}
.overlay.peek{opacity:0;pointer-events:none}
.modal{width:min(420px,100%);padding:22px;border-radius:22px;text-align:center;background:linear-gradient(#3a2b48,#241a30);border:3px solid #ffffff30;box-shadow:0 30px 80px #000}
.modal h2{margin:0 0 6px;font-size:28px;font-weight:1000;font-style:italic;color:var(--gold)}.modal p{margin:0 0 16px;font-weight:700;opacity:.85;min-height:1em}
.modal.result h2{font-size:clamp(40px,10vw,60px);line-height:1;animation:slamIn .5s cubic-bezier(.2,1.6,.4,1)}
.modal.win h2{color:#7dff9a;text-shadow:0 0 30px #3aff7a88}.modal.lose h2{color:#ff6a4a;text-shadow:0 0 30px #ff3a1a88}
.mbtns{display:flex;gap:10px;justify-content:center;align-items:center}
.again-btn{height:46px;padding:0 26px;border-radius:14px;font-size:20px;font-weight:1000;background:linear-gradient(#ffd54a,#e8892a);color:#4a1f0a;box-shadow:0 4px 0 #8a4410}
.mbtns .small-btn{height:46px}
.mbtns .yes{background:linear-gradient(#ff7a5a,#c8341a);border-color:#ffb0a0}

/* guided coach */
.coach{position:absolute;left:50%;bottom:62px;transform:translateX(-50%);z-index:50;width:min(560px,94vw);display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:18px;background:#fff4dcf2;color:#3a220e;border:3px solid #e8892a;box-shadow:0 10px 30px #000b;font-weight:800;font-size:clamp(14px,2.4vw,18px);animation:coachIn .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes coachIn{from{transform:translate(-50%,40px) scale(.8);opacity:0}}
.coach-face{font-size:34px;flex:none}.coach-face img{width:48px;height:48px}.coach-text b{color:#c8341a}

/* phones / narrow: player cards become slim strips above and below */
@media(max-width:820px){
 .arena{flex-direction:column;padding:0 6px;gap:6px}
 .pcard{width:min(92vw,420px);flex-direction:row;padding:6px 14px;gap:12px;justify-content:flex-start}
 .pcard .pc-pic{width:46px}.pcard .pc-wins{margin-left:auto}
 .pcard .pc-turn{top:-11px;right:12px}
 #card0{order:3}.holder{order:2}#card1{order:1}
 .lock-btn{height:36px}
 .controls{height:44px}
}
@media(max-height:560px){.logo{font-size:3rem}.duel{height:90px}.big-opt{width:64px}.sizes button{width:44px;height:44px}.sizes .mini{width:26px;height:26px}.play-btn{width:62px;height:62px;font-size:28px}}
@media(prefers-reduced-motion:reduce){.logo,.play-btn,.duel .cr,.duel-spark,.embers i{animation:none}}

.mini-logo img{height:44px;display:block;filter:drop-shadow(0 3px 4px #000a)}
.logo img{filter:drop-shadow(0 10px 20px #000b) drop-shadow(0 0 24px #ff7a1a66)}

/* ---- real artwork ---- */
.corner2{position:absolute;right:62px;top:10px}
.vol{display:flex;align-items:center;gap:10px;margin:12px 0;font-weight:800}.vol input{flex:1}
.art-ui .big-opt{background:none;border:0;box-shadow:none;width:clamp(86px,19vw,138px);aspect-ratio:auto;position:relative;padding:0;transition:transform .12s,filter .2s}
.art-ui .big-opt img{width:100%;display:block;filter:drop-shadow(0 6px 4px #000a) saturate(.6) brightness(.8)}
.art-ui .big-opt small{display:none}
.art-ui .big-opt.on{background:none;box-shadow:none;transform:translateY(-4px) scale(1.12)}
.art-ui .big-opt.on img{filter:drop-shadow(0 0 16px #ffb02e) drop-shadow(0 6px 4px #000a)}
.art-ui .picker{margin-bottom:6px}
.art-ui .play-btn{width:clamp(120px,22vh,190px);height:auto;border-radius:0;background:none;box-shadow:none;animation:playPulse 1.6s ease-in-out infinite}
.art-ui .play-btn img{width:100%;display:block;filter:drop-shadow(0 8px 6px #000a) drop-shadow(0 0 22px #ff9a2a88)}
.art-ui .play-btn span{display:none}
.art-ui .corner,.art-ui .corner2{background:none;border:0}
.art-ui .corner img,.art-ui .corner2 img{width:46px;display:block}
.art-tiles #board{background:radial-gradient(circle,#2e2634,#17111d)}
.art-tiles .cell,.art-tiles .cell.alt{background:var(--art-cell) center/100% 100% no-repeat}
.art-tiles .cell.crack,.art-tiles .cell.alt.crack{background-image:var(--art-tileCracked)}
.art-tiles .cell:not(.sel):not(.bad){box-shadow:none}
.art-tiles .cell .num{color:#ffc928;font-style:italic;-webkit-text-stroke:calc(var(--cs)*.07) #1a0e08;paint-order:stroke fill;text-shadow:0 calc(var(--cs)*.035) 0 #1a0e08,0 0 calc(var(--cs)*.16) #ff9a2a66;filter:drop-shadow(0 calc(var(--cs)*.02) 0 #c2570a)}
.art-tiles .cell.sel{filter:drop-shadow(0 0 calc(var(--cs)*.12) #29f0ff) brightness(1.2);box-shadow:inset 0 0 0 calc(var(--cs)*.05) #29f0ff}
.art-tiles .cell.scorch{background-image:var(--art-cell);filter:brightness(.35) sepia(1)}
.art-tiles .dirt{inset:-6% -4% 2% -4%}
.piece .pi img{filter:none}
.art-pieces .piece .pi{inset:-10%}
.art-pieces .piece .pnum{background:#150c20e0;border-color:#ffc928;color:#ffc928;bottom:-2%}
.fxpic{position:absolute;z-index:45;pointer-events:none;transform:translate(-50%,-50%) scale(0);opacity:0}
.fxpic.boom{animation:boomPic 1.1s ease-out forwards}.fxpic.cap{animation:capPic 1s ease-out forwards}
@keyframes boomPic{0%{transform:translate(-50%,-50%) scale(.2) rotate(-8deg);opacity:1}25%{transform:translate(-50%,-50%) scale(1.15) rotate(3deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5) rotate(6deg);opacity:0}}
@keyframes capPic{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}20%{transform:translate(-50%,-50%) scale(1.15);opacity:1}70%{transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.2);opacity:0}}

.sizes button,.levels button,.dirtpick button{background:#140d1cd9;backdrop-filter:blur(2px)}
.sizes button.on,.levels button.on,.dirtpick button.on{background:#4a2c10e6}

/* ---- frames, coins, picture banners ---- */
.art-frame #boardWrap{background:none;box-shadow:none;padding:0;border-radius:0}
.art-frame #boardWrap::before{display:none}
.art-frame #board{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.board-frame{position:absolute;inset:0;width:100%;height:100%;z-index:60;pointer-events:none;filter:drop-shadow(0 14px 24px #000c)}
.art-sel .cell.sel{filter:none;box-shadow:none;animation:none}
.art-sel .cell.sel::after{content:"";position:absolute;inset:-24%;z-index:5;background:var(--art-selFrame) center/100% 100% no-repeat;pointer-events:none;animation:selPop .9s ease-in-out infinite}
@keyframes selPop{50%{transform:scale(1.07);filter:brightness(1.2)}}
.art-coins .coin .face{border:0;background:none;box-shadow:none;backface-visibility:hidden}
.art-coins .coin .face img{width:100%;height:100%;filter:drop-shadow(0 12px 18px #000c)}
.art-coins .coin .f1{transform:rotateY(180deg)}
#banner.pic{font-size:0}
#banner.pic img{width:min(62vw,520px);max-height:42vh;object-fit:contain;filter:drop-shadow(0 14px 26px #000c);display:inline-block}
#banner.pic.show{animation:bannerPic 1.9s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes bannerPic{0%{opacity:0;transform:translateY(-50%) scale(3.4) rotate(-6deg)}14%{opacity:1;transform:translateY(-50%) scale(1) rotate(-2deg)}80%{opacity:1;transform:translateY(-50%) scale(1.04) rotate(-2deg)}100%{opacity:0;transform:translateY(-50%) scale(1.25) rotate(-2deg)}}
.art-frame .reason{bottom:6%}

/* ---------- win / lose screen with real artwork ---------- */
.modal.result.art-res{container-type:inline-size;position:relative;width:min(94vw,104vh,1100px);aspect-ratio:1448/1086;padding:0;background:url(/trapped/art/res-frame.webp?v=1) center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;overflow:visible;display:block}
.art-res .res-fx{position:absolute;left:50%;top:46%;width:150%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.art-res .res-fx img{width:100%;display:block;animation:resPulse 2.4s ease-in-out infinite}
.modal.lose.art-res .res-fx{width:120%}.modal.lose.art-res .res-fx img{animation:resPop .6s ease-out both}
@keyframes resPulse{0%,100%{transform:scale(.94);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes resPop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:.45}}
.art-res .res-emblem{position:absolute;left:50%;top:-17%;width:27%;transform:translateX(-50%);z-index:3;pointer-events:none;filter:drop-shadow(0 6px 10px #000a)}
.art-res .res-emblem img{width:100%;display:block;animation:slamIn .55s cubic-bezier(.2,1.6,.4,1) .15s both}
.art-res .res-card{position:absolute;inset:16% 11% 14%;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2cqw}
.art-res h2{margin:0;font-size:12cqw;line-height:1}
.art-res.pic-title h2 img{width:76cqw;display:block;animation:slamIn .5s cubic-bezier(.2,1.6,.4,1)}
.art-res p{margin:0;font-size:3.6cqw;color:#fff;text-shadow:0 2px 6px #000}
.art-res .mbtns{gap:3cqw;margin-top:1cqw}
.art-res .again-btn,.art-res .small-btn{background:none;border:0;box-shadow:none;padding:0;height:auto;min-width:0;border-radius:0}
.art-res .again-btn img{width:34cqw;display:block}.art-res .small-btn img{width:10.5cqw;display:block}
.art-res .again-btn:hover img,.art-res .small-btn:hover img{filter:brightness(1.15)}
.art-res .again-btn:active img,.art-res .small-btn:active img{transform:scale(.96)}

/* ---------- online play ---------- */
.mode-online .play-btn{display:none}
.online-panel{width:min(760px,94vw);margin-top:8px;color:#fff}
.online-panel.hidden{display:none}
.on-note{text-align:center;font-weight:700;padding:12px 16px;border-radius:14px;background:#1a0f26cc;border:2px solid #ffffff22}
.on-note a{color:var(--gold)}
.on-who{text-align:center;font-weight:800;margin-bottom:6px;font-size:14px}.on-who span{opacity:.7}
.on-boxes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.on-box{flex:1 1 280px;max-width:370px;padding:10px 14px;border-radius:16px;background:#1a0f26d8;border:2px solid #ffffff26;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.on-box h3{margin:0;font-size:17px;color:var(--gold)}.on-box p{margin:0;font-size:12px;opacity:.75}
.on-btn{height:36px;padding:0 16px;border-radius:12px;font-weight:900;font-size:14px;background:#ffffff1c;border:2px solid #ffffff30;color:#fff}
.on-btn.go{background:linear-gradient(#ffd54a,#e8892a);color:#4a1f0a;border-color:#ffe9a0;box-shadow:0 3px 0 #8a4410}
.on-btn:disabled{opacity:.45;box-shadow:none}
.on-join{display:flex;gap:8px;align-items:center}
.on-join input{width:96px;height:36px;border-radius:10px;border:2px solid #ffffff40;background:#0c0614;color:#fff;font-weight:900;font-size:18px;letter-spacing:.2em;text-align:center;text-transform:uppercase}
.on-code{display:flex;flex-direction:column;gap:2px;align-items:center;font-weight:700;font-size:13px}.on-code b{font-size:34px;letter-spacing:.25em;color:var(--gold)}
.on-status{min-height:1.2em;font-size:12px;font-weight:700;color:#ffd9a0}
.art-res #resSub{font-size:3.2cqw;color:#ffe9a0;min-height:1em}
#again:disabled{opacity:.4;pointer-events:none}
.net-bar{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:70;display:flex;gap:10px;align-items:center;padding:8px 14px;border-radius:14px;background:#2a1016f2;border:2px solid #ff8a5a;font-weight:800;font-size:14px}
.net-bar.hidden,.chat-menu.hidden,#gChat.hidden{display:none}
.chat-menu{position:fixed;top:52px;right:10px;z-index:75;width:min(260px,70vw);display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px;border-radius:14px;background:#1a0f26f2;border:2px solid #ffffff30}
.chat-menu button{font-weight:800;font-size:12px;padding:8px;border-radius:10px;background:#ffffff1c;border:1px solid #ffffff30;color:#fff;text-align:left}
.chat-bubble{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:90;padding:9px 18px;border-radius:999px;background:#241a30;border:2px solid var(--gold);font-weight:900;opacity:0;pointer-events:none;transition:opacity .2s}
.chat-bubble.show{opacity:1}
.mode-online .duel,.mode-online .small-row{display:none}
.mode-online .logo img{max-height:42vh;max-width:min(82vw,700px);width:auto}
@media(max-height:700px){.mode-online .logo img{max-height:28vh}}
.on-opts{display:flex;gap:12px;font-size:12px;font-weight:800}.on-opts select{height:28px;border-radius:8px;background:#0c0614;color:#fff;border:2px solid #ffffff40;font-weight:800}
.on-box{padding:8px 12px;gap:5px}
.on-code[hidden],.on-btn[hidden],.on-body[hidden],.on-note[hidden]{display:none!important}
.on-box{flex:1 1 250px;max-width:360px}
.online-panel{width:min(780px,96vw)}

/* ---------- token store, hats, glows ---------- */
.icon-btn.corner3{position:absolute;top:10px;right:112px;z-index:5;width:auto;min-width:44px;padding:0 10px;display:flex;gap:4px;align-items:center}
.icon-btn.corner3 b{font-size:14px;color:var(--gold)}
.piece .aura{position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,var(--aura) 0,transparent 68%);opacity:.75;pointer-events:none;animation:auraPulse 1.8s ease-in-out infinite}
@keyframes auraPulse{0%,100%{transform:scale(.9);opacity:.55}50%{transform:scale(1.1);opacity:.9}}
.piece .hat{position:absolute;left:50%;top:-26%;transform:translateX(-50%) rotate(-8deg);font-style:normal;font-size:calc(var(--cs)*.62);line-height:1;pointer-events:none;filter:drop-shadow(0 2px 2px #000a);z-index:4}
.modal.store{width:min(640px,96vw);max-height:94vh;overflow:auto;position:relative;padding:16px}
.st-close{position:absolute;top:10px;right:10px}
.st-bal{font-size:22px;font-weight:1000;color:var(--gold);margin-bottom:8px}
.st-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:10px;flex-wrap:wrap}.st-tabs .small-btn.on{background:var(--gold);color:#3a1a05}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.st-item{display:flex;flex-direction:column;gap:6px;align-items:center;padding:10px 6px;border-radius:14px;background:#ffffff12;border:2px solid #ffffff22;font-size:13px}.st-item.on{border-color:var(--gold)}
.st-prev{height:62px;display:flex;align-items:center;justify-content:center}
.st-hat{font-size:44px}.st-orb{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,var(--aura),transparent 70%)}
.st-prev.theme img{width:54px;height:50px;object-fit:fill}
.st-item .on-btn{font-size:12px;height:30px;padding:0 10px}
.st-note{margin:10px 0 0;font-size:12px;opacity:.8}
#resTokens{font-weight:1000;font-size:20px;color:var(--gold);min-height:1.2em;margin:0}
.art-res #resTokens{font-size:4.6cqw;text-shadow:0 2px 6px #000}
#resRating{margin:0;font-weight:1000;font-size:18px;min-height:1.2em;color:#cfe6ff}#resRating.up{color:#7dff9a}#resRating.down{color:#ff8a6a}
.art-res #resRating{font-size:4.2cqw;text-shadow:0 2px 6px #000}
.peek-bar{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:85;display:flex;gap:10px;padding:8px 12px;border-radius:16px;background:#1a0f26ee;border:2px solid var(--gold);box-shadow:0 8px 24px #000a}
.peek-bar.hidden{display:none}.peek-bar .small-btn{height:40px;font-size:15px;font-weight:900;color:#fff}

/* result titles (BLUE WINS!, RED WINS!, DEFEAT): chunky game lettering with an outline, not plain text */
.modal.result.art-res h2{text-shadow:none;-webkit-text-stroke:0;font-family:Bungee,"Bangers",Impact,sans-serif;font-style:normal;font-weight:400;letter-spacing:.02em;font-size:9.5cqw;line-height:1.05;text-align:center;text-transform:uppercase;
 background:linear-gradient(#fff8c8 0%,#ffd84a 38%,#ff9a1f 70%,#d9531a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
 filter:drop-shadow(1.2cqw 0 0 #2a0e05) drop-shadow(-1.2cqw 0 0 #2a0e05) drop-shadow(0 1.2cqw 0 #2a0e05) drop-shadow(0 -1.2cqw 0 #2a0e05) drop-shadow(0 1.8cqw 1cqw #000c)}
.modal.result.art-res.who-blue h2{background-image:linear-gradient(#e6fbff 0%,#6fe3ff 40%,#1f9bff 72%,#1448c8 100%);filter:drop-shadow(1.2cqw 0 0 #07163a) drop-shadow(-1.2cqw 0 0 #07163a) drop-shadow(0 1.2cqw 0 #07163a) drop-shadow(0 -1.2cqw 0 #07163a) drop-shadow(0 0 2.4cqw #29b4ff) drop-shadow(0 1.8cqw 1cqw #000c)}
.modal.result.art-res.who-red h2{background-image:linear-gradient(#fff1e6 0%,#ff9a6f 40%,#ff3a2a 72%,#a00f12 100%);filter:drop-shadow(1.2cqw 0 0 #320508) drop-shadow(-1.2cqw 0 0 #320508) drop-shadow(0 1.2cqw 0 #320508) drop-shadow(0 -1.2cqw 0 #320508) drop-shadow(0 0 2.4cqw #ff4a2a) drop-shadow(0 1.8cqw 1cqw #000c)}
.modal.result.art-res.lose h2{background-image:linear-gradient(#ffe0d0 0%,#ff7a5a 45%,#d01e12 75%,#6a0a0a 100%);-webkit-text-stroke:0;paint-order:normal;font-size:10.5cqw;filter:drop-shadow(1.2cqw 0 0 #2a0505) drop-shadow(-1.2cqw 0 0 #2a0505) drop-shadow(0 1.2cqw 0 #2a0505) drop-shadow(0 -1.2cqw 0 #2a0505) drop-shadow(0 1.8cqw 1cqw #000c)}

/* obvious music on/off switch in the lobby */
.music-btn{position:absolute;left:12px;top:58px;z-index:6;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 12px;border-radius:22px;font-weight:1000;font-size:16px;color:#fff;background:linear-gradient(#3aa85a,#1f6e38);border:3px solid #b8ffd0;box-shadow:0 4px 0 #0d3a1c,0 0 18px #3aff7a66}
.music-btn .mi{font-size:22px}
.music-btn.off{background:linear-gradient(#8a3a3a,#5a1d1d);border-color:#ffb0a0;box-shadow:0 4px 0 #2a0a0a;color:#ffe0d8}
.music-btn:active{transform:translateY(3px);box-shadow:none}

/* How to Play tutorial */
.how-btn{top:108px;background:linear-gradient(#ffd54a,#e8892a);border-color:#fff0b0;color:#4a1f0a;box-shadow:0 4px 0 #8a4410,0 0 18px #ffb02e66}
.modal.howto{width:min(560px,96vw);max-height:94vh;overflow:auto;position:relative;padding:18px 18px 14px}
.howto h2{font-size:clamp(24px,4.6vw,34px);margin:0 0 8px}
.howto p{font-size:clamp(14px,2.2vw,17px);line-height:1.35;margin:10px 0 12px;opacity:1}
.ht-pic{display:flex;flex-direction:column;align-items:center;gap:6px;min-height:170px;justify-content:center}
.ht-board{display:grid;gap:3px;width:min(230px,62vw);padding:6px;border-radius:12px;background:#17111d;border:3px solid #6a4a2a}
.ht-c{aspect-ratio:1;display:grid;place-items:center;border-radius:6px;font-style:normal;font-weight:1000;font-size:clamp(13px,3.2vw,20px);color:#ffc928;background:#4a3a58}
.ht-c.alt{background:#40324e}.ht-c.me{background:#1d5a8c;color:#fff}.ht-c.foe{background:#8c2a1d;color:#fff}
.ht-c.ray,.ht-c.ok{background:#3b8a4a;box-shadow:0 0 10px #7dff9a88 inset}.ht-c.bad{background:#a02a2a;color:#fff;box-shadow:0 0 10px #ff6a4a88 inset}.ht-c.bad::after{content:"✖";position:absolute}
.ht-c.dirt{background:#5a3a1e}
.ht-c{position:relative}
.ht-cap{font-size:13px;font-weight:800;color:#ffe9a0;text-align:center}
.ht-boom{font-size:84px;line-height:1;animation:slamIn .5s cubic-bezier(.2,1.6,.4,1)}
.ht-dots{display:flex;gap:7px;justify-content:center;margin:6px 0 10px}.ht-dots i{width:9px;height:9px;border-radius:50%;background:#ffffff40}.ht-dots i.on{background:var(--gold)}
.howto .mbtns{flex-wrap:wrap}
.howto .st-close{position:absolute;top:10px;right:10px}
@media(max-height:700px){.how-btn{top:104px}}

.board-btn{top:158px;background:linear-gradient(#7a5ad8,#3f2a8c);border-color:#d8c8ff;box-shadow:0 4px 0 #1d1250,0 0 18px #8a6aff66}
.lb-list{display:flex;flex-direction:column;gap:5px;margin:8px 0;max-height:58vh;overflow:auto}
.lb-row{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;background:#ffffff12;border:2px solid #ffffff1c;font-weight:800;font-size:15px;text-align:left}
.lb-row.me{border-color:var(--gold);background:#ffb02e22}.lb-n{width:28px;font-weight:1000;color:var(--gold)}.lb-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-rank{opacity:.85;font-size:13px}
@media(max-height:700px){.board-btn{top:154px}}
.on-lock{background:#2a1a3acc;border-color:#ffd54a88;font-size:15px;line-height:1.4}
.on-body-wrap[hidden],.on-note[hidden]{display:none!important}
.big-opt.online{position:relative}
.pro-ribbon{position:absolute;top:-6px;right:-8px;z-index:4;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,#ffd75e,#f5a623);color:#5a3500;font:900 12px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.06em;box-shadow:0 2px 6px #000a;border:2px solid #fff3c0;pointer-events:none}
.pro-ribbon[hidden]{display:none}
.on-pro{display:inline-block;padding:2px 9px;border-radius:999px;background:linear-gradient(135deg,#ffd75e,#f5a623);color:#5a3500;font:900 12px/1.3 Arial,sans-serif;letter-spacing:.06em;margin-right:4px}

/* ---------- Survival (4 players) ---------- */
.side{display:contents}
.piece.green .pi{animation:idle 2.1s ease-in-out infinite}.piece.yellow .pi{animation:idle 2.4s ease-in-out infinite}
.pcard.c2{border-color:#3aff7a44}.pcard.c3{border-color:#ffd54a44}
.pcard.c2.on{border-color:#3aff7a;box-shadow:0 0 34px #3aff7aaa,0 8px 24px #0008}.pcard.c3.on{border-color:#ffd54a;box-shadow:0 0 34px #ffd54aaa,0 8px 24px #0008}
.pcard.out{opacity:.35;filter:grayscale(1)}
@media(min-width:701px){
 body.survival .side{display:flex;flex-direction:column;gap:clamp(8px,2vh,22px);align-self:center;flex:none}
 body.survival .pcard{width:clamp(100px,13vw,170px);padding:8px 6px;gap:4px}
 body.survival .pcard .pc-pic{width:62%}
 body.survival .pcard .pc-name{font-size:clamp(12px,1.6vw,17px)}
}
@media(max-width:700px){ body.survival #card2{order:0}body.survival #card3{order:1} }

/* Survival: four floating player heads in the lobby (blue, green, yellow, red) */
.duel .cr.g,.duel .cr.y{display:none}
body.mode-survival .duel{justify-content:center;gap:clamp(4px,2vw,26px)}
body.mode-survival .duel .cr{width:clamp(78px,17vh,170px)}
body.mode-survival .duel .cr.g,body.mode-survival .duel .cr.y{display:block}
body.mode-survival .duel .cr.l{order:1;animation:floatHead 2.6s ease-in-out infinite}
body.mode-survival .duel .cr.g{order:2;animation:floatHead 2.9s ease-in-out -.9s infinite}
body.mode-survival .duel .cr.y{order:3;transform:scaleX(-1);animation:floatHeadR 3.1s ease-in-out -1.7s infinite}
body.mode-survival .duel .cr.r{order:4;animation:floatHeadR 2.7s ease-in-out -.4s infinite}
body.mode-survival .duel-spark{display:none}
@keyframes floatHead{0%,100%{transform:translateY(8px) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes floatHeadR{0%,100%{transform:scaleX(-1) translateY(8px) rotate(-3deg)}50%{transform:scaleX(-1) translateY(-14px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){body.mode-survival .duel .cr{animation:none}}

/* online Survival box in the online panel */
.on-box.surv{flex:1 1 300px;max-width:390px}
.on-box.surv .on-join{margin:0}
.online-panel{width:min(1100px,98vw)}

/* Class Survival: join button and the student waiting screen */
.class-btn{top:208px;background:linear-gradient(#4aa8ff,#1f5fc8);border-color:#cfe6ff;color:#fff;box-shadow:0 4px 0 #0d2f6a,0 0 18px #4aa8ff66}
@media(max-height:700px){.class-btn{top:204px}}
#classScreen{justify-content:center}
.cls-wrap{width:min(900px,96vw);padding:18px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.cls-wrap h2{margin:0;font-size:clamp(24px,4vw,40px);color:var(--gold)}.cls-wrap h2 small{font-size:.5em;color:#fff}.cls-wrap h2 b{letter-spacing:.2em}
.cls-status{font-weight:900;font-size:clamp(18px,3vw,28px);color:#ffe9a0;min-height:1.3em}
.cls-me{display:flex;gap:clamp(10px,3vw,30px)}.cls-me div{display:flex;flex-direction:column;padding:8px 16px;border-radius:14px;background:#ffffff14;border:2px solid #ffffff22;min-width:80px}.cls-me b{font-size:clamp(26px,4vw,44px);color:var(--gold)}.cls-me span{font-size:12px;opacity:.8;font-weight:800}
.cls-cols{display:flex;gap:16px;width:100%;flex-wrap:wrap;justify-content:center}.cls-cols>div{flex:1 1 300px;max-width:420px;text-align:left}.cls-cols h3{margin:0 0 6px;color:var(--gold)}
.cls-row{display:flex;gap:10px;align-items:center;padding:6px 12px;border-radius:10px;background:#ffffff10;margin-bottom:4px;font-weight:800}.cls-row.me{border:2px solid var(--gold);background:#ffb02e22}.cls-row span{width:22px;color:var(--gold);font-weight:1000}.cls-row b{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cls-feed{padding:6px 12px;border-radius:10px;background:#ffffff0c;margin-bottom:4px;font-weight:700;font-size:14px}
.cls-note{min-height:1em;color:#ffb0a0;font-weight:700}
#classCodeIn{width:150px;height:44px;border-radius:12px;border:2px solid #ffffff40;background:#0c0614;color:#fff;font-weight:900;font-size:24px;letter-spacing:.25em;text-align:center;text-transform:uppercase;margin:6px 0}