/* ================= GWEN arena: one screen per round, every round its own toy.
   Animations use transform/opacity only; html[data-motion=off] turns them all off. */
:root{--m:#5ddcff;--m2:#7a5cff;--glide:1.5s;--gold:#ffd877;--ink:#f1f5ff;--soft:#a9b2d6;--line:#9aa3cf3d}

/* ---------- One-screen frame ---------- */
html[data-scene=game],html[data-scene=finale]{overflow:hidden}
html[data-scene=game] main,html[data-scene=finale] main{padding-top:6px;padding-bottom:6px}
html[data-scene=game] footer,html[data-scene=finale] footer{display:none}
.game.arena{max-width:1180px;min-height:0;box-sizing:border-box;padding:12px 22px;height:calc(100svh - var(--arena-top,146px) - 8px);display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;gap:6px}
.arena .game-top .back{background:none;color:var(--soft);padding:8px 4px;font-size:13px}
.arena .game-top .back:hover{color:var(--ink)}

/* Progress: one stitch per round, sewn in the colours you choose */
.arena .steps{position:static!important;width:auto;height:auto;margin:2px 0 0;overflow:visible;clip-path:none;gap:6px}
.arena .steps li{height:6px;background:#1b1f45;position:relative;overflow:hidden;border-radius:3px}
.arena .steps li:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--m),var(--m2));transform:scaleX(0);transform-origin:right;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
html[dir=ltr] .arena .steps li:before{transform-origin:left}
.arena .steps li.done:before{transform:scaleX(1)}
.arena .steps li.current:before{transform:scaleX(.5);animation:stitch-run 1.2s ease-in-out infinite alternate}
.arena .steps li.skip{background:repeating-linear-gradient(90deg,#3b3f6b 0 5px,transparent 5px 9px)}
.arena .steps li.current:after{display:none}
@keyframes stitch-run{to{transform:scaleX(.85)}}

/* Gwen speaks: the logo hops, the bubble pops */
.gwen-say{display:flex;align-items:center;gap:12px;justify-content:center;min-height:52px}
.gwen-badge{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#1d2366,#0a0d2a);border:2px dashed color-mix(in srgb,var(--m) 65%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--m) 30%,transparent)}
.gwen-badge img{width:40px;height:40px}
.gwen-badge.hop{animation:badge-hop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes badge-hop{40%{transform:translateY(-9px) rotate(-8deg) scale(1.08)}}
#bubble{margin:0;max-width:640px;padding:9px 16px;border-radius:14px;background:#11163dcc;border:1px solid var(--line);font-size:13px;line-height:1.7;color:#e3e8ff;position:relative}
#bubble.say{animation:bubble-pop .38s cubic-bezier(.3,1.5,.5,1)}
@keyframes bubble-pop{from{transform:scale(.85) translateY(6px)}}

.arena .round-head{margin:0}
.round-kicker{font:11px Hanken,Tahoma;letter-spacing:2px;color:var(--m)}
.arena .round-head h1{font-size:clamp(22px,3vw,34px);margin:2px 0;line-height:1.35;outline:0}
.arena .round-head p{margin:0 auto;font-size:12.5px;line-height:1.6}
.arena.enter .round-head h1{animation:headline-in .45s cubic-bezier(.2,.9,.2,1) both}
@keyframes headline-in{from{opacity:0;transform:translateY(14px) scale(.96)}}

.stage{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative}
.actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;min-height:48px}
.actions:empty{min-height:0}
.actions .primary:disabled{opacity:.4;cursor:not-allowed}

/* ---------- Shared card language ---------- */
.deck{display:flex;justify-content:center;gap:14px;width:100%;perspective:1100px}
.deck .choice{flex:1;min-width:0;max-width:230px;padding:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transform-style:preserve-3d}
.deck .choice h2{font-size:15px;margin:4px 0 0;line-height:1.4}
.deck .choice p{margin:0;font-size:11.5px;color:var(--soft);line-height:1.5}
.deck .choice .number{position:absolute;top:10px;inset-inline-start:12px;z-index:2}
.deck .choice:hover{transform:translateY(-8px) rotateX(6deg);border-color:var(--m);box-shadow:0 18px 40px -18px var(--m)}
.deck .choice.selected{border-color:var(--m);background:linear-gradient(160deg,color-mix(in srgb,var(--m) 22%,#101436),#080b22);box-shadow:0 0 0 2px var(--m),0 0 34px -6px var(--m)}
.deal{animation:deal-in .6s cubic-bezier(.18,.9,.25,1.15) backwards;animation-delay:calc(var(--i,0)*80ms)}
@keyframes deal-in{from{opacity:0;transform:translateY(-120px) rotate(calc((var(--i,0) - 2)*9deg)) scale(.6)}}
.charge{animation:charge .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes charge{35%{transform:scale(1.07) rotate(-1.5deg)}70%{transform:scale(.98)}}
.float-pop{position:fixed;z-index:60;transform:translate(-50%,0);font:bold 15px Hanken,Tahoma;color:var(--ink);text-shadow:0 0 12px var(--m),0 2px 0 #000;white-space:nowrap;pointer-events:none;animation:float-pop .9s ease-out forwards}
@keyframes float-pop{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%,-6px) scale(1.12)}100%{opacity:0;transform:translate(-50%,-60px) scale(1)}}
.stage img{height:auto}

/* ---------- 1 World: a fan of real covers ---------- */
.deck.fan{align-items:flex-end;padding-top:14px}
.world-card{transform:rotate(calc((var(--i) - 2)*3deg)) translateY(calc(var(--d,0)*1px))}
.world-card:nth-child(1),.world-card:nth-child(5){--d:14}.world-card:nth-child(2),.world-card:nth-child(4){--d:4}
.world-card .card-cover{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:6px;display:block}
.world-card .symbol{height:46px!important;margin-top:-30px;position:relative;z-index:1;filter:drop-shadow(0 4px 8px #000)}
.world-card .symbol svg{width:52px!important;height:52px!important}
.deck.fan .world-card:hover{transform:rotate(0) translateY(-14px) scale(1.04)}
.deck.fan .world-card.selected{transform:rotate(0) translateY(-18px) scale(1.06)}
.sub{width:100%;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.sub:empty{display:none}
.sub.enter{animation:sub-rise .4s ease-out both}
@keyframes sub-rise{from{opacity:0;transform:translateY(20px)}}
.deck.badges .badge{max-width:150px;padding:8px}
.deck.badges .badge img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.deck.badges .badge h2{font-size:13px}
html[data-round=world] .stage:has(.sub:not(:empty)) .fan .world-card:not(.selected){opacity:.45;transform:scale(.9)}
html[data-round=world] .stage:has(.sub:not(:empty)) .fan{transform:scale(.82);transform-origin:bottom}

/* Chips (occasions and limits) */
.chip{padding:10px 16px;border:1px dashed #5b6196;border-radius:30px;background:#10143a;color:#dfe5ff;font-size:13px;transition:transform .15s,background .2s,border-color .2s}
.chip small{color:var(--soft)}
.chip:hover{transform:translateY(-3px);border-color:var(--m)}
.chip[aria-pressed=true]{background:color-mix(in srgb,var(--m) 25%,#10143a);border:1px solid var(--m);color:#fff;box-shadow:0 0 18px -4px var(--m)}

/* ---------- 2 Feel: thread cards and a live braid ---------- */
.braid{width:min(420px,80%);height:56px;opacity:.35;transition:opacity .3s}
.braid.on{opacity:1}
.braid svg{width:100%;height:100%;overflow:visible}
.braid .ply{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:14 7}
.braid .ply-a{stroke:var(--m)}
.braid .ply-b{stroke:var(--m2);opacity:.35}
.braid.mixed .ply-b{opacity:1}
.braid.on .ply{animation:ply-run var(--glide) linear infinite}
.braid .ply-b{animation-direction:reverse!important}
@keyframes ply-run{to{stroke-dashoffset:-42}}
.deck.threads .thread-card{--m:var(--c);max-width:190px;padding-top:22px}
.thread-card .spool-dot{width:34px;height:34px;border-radius:50%;background:repeating-linear-gradient(0deg,var(--c) 0 3px,color-mix(in srgb,var(--c) 55%,#000) 3px 5px);box-shadow:0 0 0 4px #ffffff14,0 0 18px var(--c)}
.thread-card .symbol{height:58px!important}.thread-card .symbol svg{width:50px!important;height:50px!important}
.thread-card .role{min-height:18px;font:bold 10px Hanken,Tahoma;letter-spacing:2px;color:var(--c)}
.thread-card.selected .spool-dot{animation:spool-spin calc(var(--glide)/1.5) linear infinite}
@keyframes spool-spin{to{transform:rotate(360deg)}}

/* ---------- 3 Rhythm: music boxes ---------- */
.mbox{max-width:220px!important;padding:14px!important}
.mbox .box{width:100%;height:120px;border-radius:10px;background:linear-gradient(180deg,#1b2160,#0b0e2c);border:1px solid var(--line);position:relative;overflow:hidden;display:block;padding:0}
.mbox .lid{position:absolute;inset:0 0 auto;height:16px;background:linear-gradient(90deg,var(--m),var(--m2));opacity:.75;transform-origin:top;transition:transform .3s}
.mbox.playing .lid{transform:rotateX(70deg)}
.mbox .bars{position:absolute;inset:26px 14px 12px;display:flex;align-items:flex-end;gap:5px}
.mbox .bars i{flex:1;height:100%;border-radius:3px 3px 0 0;background:linear-gradient(0deg,var(--m),var(--m2));transform-origin:bottom;transform:scaleY(.18);opacity:.8}
.mbox .bars i:nth-child(odd){animation-delay:calc(var(--beat,.5s)/-2)!important}
.mbox:hover .bars i,.mbox.playing .bars i{animation:bar-dance var(--beat,.5s) ease-in-out infinite alternate}
.mbox:nth-child(1) .bars i{animation-duration:.45s}.mbox:nth-child(2) .bars i{animation-duration:.85s}.mbox:nth-child(3) .bars i{animation-duration:.5s}
.mbox.playing .bars i{animation-duration:var(--beat)!important}
.mbox .bars i:nth-child(2){--h:.7}.mbox .bars i:nth-child(3){--h:.45}.mbox .bars i:nth-child(4){--h:.95}.mbox .bars i:nth-child(5){--h:.6}.mbox .bars i:nth-child(6){--h:.8}.mbox .bars i:nth-child(7){--h:.4}
@keyframes bar-dance{to{transform:scaleY(var(--h,.85))}}
.mbox .key{position:absolute;inset:auto auto 8px 8px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#0008;font-size:12px;color:#fff}
.mbox.playing .key{color:var(--m)}
.mbox.playing{box-shadow:0 0 0 2px var(--m),0 0 40px -6px var(--m)}
.mbox .pick-beat{margin-top:6px;width:100%}

/* ---------- 4 Shot: face-down cards ---------- */
.deck.flips{gap:24px}
.flip{position:relative;flex:1;max-width:400px;aspect-ratio:16/10.5;perspective:1200px}
.flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,1.3,.5,1)}
.flip.open .flip-inner{transform:rotateY(180deg)}
.flip-back,.flip-front{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;overflow:hidden;border:1px solid #3b3f78}
.flip-back{display:grid;place-items:center;align-content:center;gap:8px;background:repeating-linear-gradient(45deg,#121650 0 12px,#0c1040 12px 24px);box-shadow:inset 0 0 0 8px #0a0d33,inset 0 0 0 9px #5ddcff55}
.flip:not(.open):hover .flip-inner{transform:rotateY(14deg) translateY(-6px)}
.flip-front{transform:rotateY(180deg);background:#0b0e2c}
.flip-front img{width:100%;height:100%!important;object-fit:cover;display:block}
.flip-front b{position:absolute;inset:auto 0 0;padding:26px 12px 10px;background:linear-gradient(0deg,#05071cee,transparent);font:15px Cinzel,Georgia;text-align:start}
.flip .heart{position:absolute;top:10px;inset-inline-end:12px;font-size:30px;color:#ff6fa8;opacity:0;transform:scale(.3);transition:transform .35s cubic-bezier(.3,1.8,.5,1),opacity .2s;text-shadow:0 0 16px #ff6fa8}
.flip.liked .heart{opacity:1;transform:scale(1)}
.flip.liked .flip-front{border:2px solid #ff6fa8;box-shadow:0 0 30px -6px #ff6fa8}
.flip-hit{position:absolute;inset:0;background:none;padding:0;border-radius:12px;z-index:2}
.flip-hit:focus-visible{outline:3px solid var(--m);outline-offset:3px}
.flip .preview-trigger{position:absolute;bottom:12px;inset-inline-start:12px;border-radius:25px;border:1px solid #a7d8ff5c;background:#080b22ed;padding:8px 13px;font:12px Tahoma,Hanken;color:#e6f6ff;z-index:3;opacity:0;pointer-events:none;transition:opacity .3s}
.flip.open .preview-trigger{opacity:1;pointer-events:auto}

/* ---------- 5 Editing: tiny screens that cut ---------- */
.reel{max-width:280px!important}
.reel .screen{display:block;width:100%;aspect-ratio:16/9;position:relative;overflow:hidden;border-radius:8px;background:#000;border:3px solid #22275c}
.reel .screen img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover;opacity:0}
.reel .rec{position:absolute;top:6px;inset-inline-end:8px;font:bold 9px Hanken;color:#ff5d7a;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.demo-fast img{animation:cut-hard 1.2s steps(1) infinite}
.demo-fast img:nth-child(2){animation-delay:.4s}.demo-fast img:nth-child(3){animation-delay:.8s}
@keyframes cut-hard{0%{opacity:1;transform:scale(1.25)}33.3%{opacity:0}}
.demo-smooth img{animation:cut-soft 6s ease-in-out infinite}
.demo-smooth img:nth-child(2){animation-delay:2s}.demo-smooth img:nth-child(3){animation-delay:4s}
@keyframes cut-soft{0%{opacity:0;transform:scale(1)}12%,33%{opacity:1}45%,100%{opacity:0;transform:scale(1.12)}}
.demo-any img{animation:cut-mid 3s ease-in-out infinite}
.demo-any img:nth-child(2){animation-delay:1s}.demo-any img:nth-child(3){animation-delay:2s}
@keyframes cut-mid{0%{opacity:0;transform:translateX(8%)}8%,30%{opacity:1;transform:none}36%,100%{opacity:0}}

/* ---------- 6 Presence: a test stream ---------- */
.stream{width:min(560px,92%);aspect-ratio:16/8.4;position:relative;overflow:hidden;border-radius:12px;border:3px solid #22275c;background:#0a0d2a;flex:0 1 auto;max-height:52%}
.stream>span{position:absolute;display:block}
.stream .sky{inset:0;background:linear-gradient(180deg,#2b2f7a,#5a4aa2 60%,#e58bff)}
.stream .hills{inset:auto -10% 0;height:42%;background:radial-gradient(60% 100% at 30% 100%,#1b6b5d 98%,transparent),radial-gradient(50% 90% at 80% 100%,#13504a 98%,transparent);animation:hills 9s linear infinite}
@keyframes hills{to{transform:translateX(-10%)}}
.stream .runner{bottom:22%;inset-inline-start:22%;width:22px;height:30px;border-radius:6px 6px 3px 3px;background:#ffd877;box-shadow:0 0 0 3px #000;animation:hop .55s ease-in-out infinite alternate}
@keyframes hop{to{transform:translateY(-14px)}}
.stream .hp{top:8px;inset-inline-start:8px;width:90px;height:8px;background:#0007;border-radius:4px;overflow:hidden}
.stream .hp i{display:block;height:100%;width:70%;background:#7dff9b}
.stream .chat{top:28px;inset-inline-end:8px;width:28%;display:grid;gap:5px}
.stream .chat i{height:8px;border-radius:4px;background:#ffffff38}
.stream .chat i:nth-child(2){width:70%}
.stream .live{top:8px;inset-inline-end:8px;padding:2px 6px;border-radius:3px;background:#ff3d5f;font:bold 9px Hanken;color:#fff}
.stream .demo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.stream .demo .full-cover{position:absolute;inset:0;width:100%;height:100%!important;object-fit:cover}
.stream .demo .float-logo{width:30%;height:auto;filter:drop-shadow(0 0 20px var(--m))}
.stream .demo .ribbon{position:absolute;bottom:12%;padding:5px 14px;background:linear-gradient(90deg,var(--m),var(--m2));color:#09091a;font:bold 13px Hanken,Tahoma;border-radius:4px}
.stream .demo.go .full-cover{animation:full-in 2.4s ease-out both}
.stream .demo.go .float-logo{animation:logo-in 2.4s cubic-bezier(.3,1.5,.5,1) both}
.stream .demo.go .ribbon{animation:ribbon-in 2.4s ease-out both}
@keyframes full-in{0%{opacity:0;transform:scale(1.2)}12%,80%{opacity:1;transform:none}100%{opacity:0}}
@keyframes logo-in{0%{opacity:0;transform:scale(0) rotate(-30deg)}18%,80%{opacity:1;transform:none}100%{opacity:0;transform:scale(.8)}}
@keyframes ribbon-in{0%,15%{opacity:0;transform:translateY(20px)}25%,80%{opacity:1;transform:none}100%{opacity:0}}
.choices-row .pick-card{max-width:220px;padding:14px}

/* ---------- 7 Limits: the toolbag ---------- */
.live-count{display:grid;justify-items:center;gap:2px}
.live-count b{font:bold 54px/1 Hanken,Georgia;color:var(--ink);text-shadow:0 0 24px var(--m)}
.live-count b.bump{animation:bump .4s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{40%{transform:scale(1.35)}}
.live-count span{font-size:12px;color:var(--soft)}
.live-count .gauge{width:220px;height:6px;border-radius:3px;background:#1b1f45;overflow:hidden;display:block}
.live-count .gauge i{display:block;height:100%;background:linear-gradient(90deg,var(--m),var(--m2));transform-origin:right;transition:transform .4s}
html[dir=ltr] .live-count .gauge i{transform-origin:left}
.live-count.empty b{color:#ff8fa5;text-shadow:0 0 24px #ff5d7a}
.toolbag{width:min(760px,100%);display:grid;gap:8px;padding:14px 16px;border-radius:14px;border:2px dashed #4a5090;background:linear-gradient(160deg,#141a52,#090c28)}
.tools-row{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.tools-row legend{float:inline-start;padding:0;margin-inline-end:8px;font-size:12px;color:var(--soft);min-width:120px}
.tools-row small{flex-basis:100%;font-size:11px;color:#8d95bd;line-height:1.5}
.conflict{max-width:700px;margin:0;padding:8px 14px;border-radius:10px;background:#3a102a;border:1px solid #ff5d7a66;color:#ffd4dd;font-size:12.5px;line-height:1.6;text-align:center;animation:sub-rise .3s ease-out}

/* ---------- 8 Face-off ---------- */
.versus{display:flex;align-items:center;justify-content:center;gap:18px;width:100%}
.fighter{flex:1;max-width:400px;padding:12px;border-radius:12px;border:1px solid #3b3f78;background:linear-gradient(160deg,#141a52,#080b22);text-align:center;display:grid;gap:4px;animation:clash-in .6s cubic-bezier(.2,.9,.3,1.2) backwards;transition:transform .5s,opacity .5s,filter .5s}
.fighter:first-child{--from:-160px}.fighter:last-child{--from:160px}
html[dir=rtl] .fighter:first-child{--from:160px}html[dir=rtl] .fighter:last-child{--from:-160px}
@keyframes clash-in{from{opacity:0;transform:translateX(var(--from)) rotate(calc(var(--from)/-20))}}
.fighter .poster{position:relative}
.fighter .poster img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;display:block}
.fighter h2{font:17px Cinzel,Georgia;margin:4px 0 0}
.fighter .price{margin:0;font-size:12px;color:var(--soft)}
.price s{opacity:.6;margin-inline-end:3px}
.vs{font:900 44px Hanken,Georgia;color:#fff;text-shadow:0 0 18px var(--m),0 0 40px var(--m2);animation:vs-slam .5s .35s cubic-bezier(.3,1.8,.5,1) backwards}
@keyframes vs-slam{from{opacity:0;transform:scale(3) rotate(-20deg)}}
.fighter.win{transform:scale(1.06);border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 50px -6px var(--gold)}
.fighter.lose{transform:translateY(70px) rotate(8deg);opacity:0;filter:grayscale(1)}
.fighter.out{transform:scale(.6);opacity:0}
.versus.single .fighter{max-width:440px}
.stage .empty{color:var(--soft);font-size:14px;text-align:center}

/* ---------- Finale: snip in the ring ---------- */
.game.finale{max-width:900px;min-height:0;box-sizing:border-box;padding:12px 22px;height:calc(100svh - var(--arena-top,146px) - 8px);display:grid;align-content:center;justify-items:center;gap:12px;text-align:center}
.finale h1{font-size:clamp(24px,3.4vw,38px);margin:0;outline:0}
.finale p{margin:0;color:var(--soft);font-size:13px}
.cut-zone{position:relative;width:min(720px,94%);height:200px;cursor:crosshair;overflow:visible}
.cz-thread{position:absolute;top:50%;height:8px;width:50%;margin-top:-4px;background:repeating-linear-gradient(90deg,var(--m) 0 14px,var(--m2) 14px 22px);border-radius:4px;box-shadow:0 0 16px var(--m);transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.cz-a{inset-inline-start:0;transform-origin:left}.cz-b{inset-inline-end:0;transform-origin:right}
html[dir=rtl] .cz-a{transform-origin:right}html[dir=rtl] .cz-b{transform-origin:left}
.cut-zone.threaded .cz-thread{transform:scaleX(1)}
.cz-target{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;border:3px dashed var(--gold);opacity:0;transition:opacity .4s}
.cut-zone.aiming .cz-target{opacity:1;animation:ring-spin 4s linear infinite}
@keyframes ring-spin{to{transform:rotate(360deg)}}
.cz-glint{position:absolute;inset:0;pointer-events:none;opacity:0}
.cz-glint:before{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:34px;color:#fff;text-shadow:0 0 14px #fff,0 0 30px var(--m)}
.cut-zone.aiming .cz-glint{opacity:1;animation:glint-run 1.5s ease-in-out infinite alternate}
@keyframes glint-run{from{transform:translateX(-46%)}to{transform:translateX(46%)}}
.cut-zone.snipping .cz-glint,.cut-zone.snipped .cz-glint{opacity:1}
.cz-scissors{position:absolute;left:50%;top:-30px;width:80px;height:110px;margin-left:-40px;opacity:0;transform:translateY(-60px);transition:opacity .2s,transform .26s cubic-bezier(.5,0,.8,.5)}
.cz-scissors svg{width:100%;height:100%;transform:rotate(90deg)}
.cut-zone.snipping .cz-scissors,.cut-zone.snipped .cz-scissors{opacity:1;transform:translateY(40px)}
.cut-zone.snipped .cz-scissors svg>g:first-of-type{animation:blade-close .25s ease-in}
.cut-zone.snipped .cz-a{transform:translate(-40px,60px) rotate(-14deg);transition:transform .8s cubic-bezier(.4,0,.6,1)}
.cut-zone.snipped .cz-b{transform:translate(40px,60px) rotate(14deg);transition:transform .8s cubic-bezier(.4,0,.6,1)}
@keyframes blade-close{from{transform:rotate(-18deg)}}
.cz-verdict{position:absolute;inset:auto 0 4px;font:900 30px Hanken,Tahoma;color:var(--gold);text-shadow:0 0 20px var(--gold);opacity:0}
.cz-verdict.show{animation:verdict 1s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes verdict{0%{opacity:0;transform:scale(2.4)}30%,100%{opacity:1;transform:scale(1)}}
.cut-button{min-width:200px;font-size:16px}
.cut-button:not(:disabled){animation:start-pulse 1.2s ease-in-out infinite}
@keyframes start-pulse{50%{transform:scale(1.06);box-shadow:0 0 30px var(--m)}}

/* ---------- Results: loot cards ---------- */
.result-card.loot{animation:none;background:none;border:0;padding:0;box-shadow:none;perspective:1400px;opacity:0;transform:translateY(-200px) rotate(-12deg) scale(.6);transition:transform .7s cubic-bezier(.2,.9,.3,1.2),opacity .3s}
.result-card.loot.in{opacity:1;transform:none}
.result-card.loot:before{display:none}
.loot-inner{position:relative;display:grid;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.5,1);height:100%}
.loot.turned .loot-inner{transform:rotateY(180deg)}
.loot-back,.loot-front{grid-area:1/1;backface-visibility:hidden;border-radius:12px;border:1px solid #3b3f78}
.loot-back{display:grid;place-items:center;align-content:center;gap:10px;background:repeating-linear-gradient(45deg,#121650 0 12px,#0c1040 12px 24px);box-shadow:inset 0 0 0 8px #0a0d33,inset 0 0 0 9px #5ddcff55}
.loot-front{transform:rotateY(180deg);background:linear-gradient(160deg,#141a52,#080b22);padding:12px;position:relative;display:flex;flex-direction:column;gap:4px}
.loot.gold .loot-front{border:2px solid var(--gold);box-shadow:0 0 0 1px #000,0 0 46px -8px var(--gold)}
.loot.gold .loot-back{box-shadow:inset 0 0 0 8px #0a0d33,inset 0 0 0 9px #ffd87788}
.loot.gold.turned .loot-front:after{content:"";position:absolute;inset:0;border-radius:12px;background:linear-gradient(115deg,transparent 35%,#fff3 50%,transparent 65%);transform:translateX(-120%);animation:shine 2.6s 1s ease-in-out infinite;pointer-events:none}
@keyframes shine{40%,100%{transform:translateX(120%)}}
.loot.gold .rank{background:var(--gold)!important;color:#1a1300;font-weight:bold;border:0!important}
.loot .poster{position:relative}
.loot .poster img{width:100%;aspect-ratio:16/9;object-fit:cover!important;border-radius:6px;display:block}
.loot .rank{z-index:2}
.loot h2{margin:8px 2px 0!important}
.loot .price{margin:0 2px!important;min-height:0!important}
.loot .why{margin:4px 0;padding-inline-start:18px;font-size:12px;line-height:1.7;color:#c9d2ee;flex:1}
.result-buttons{display:flex;gap:8px;flex-wrap:wrap}
.result-buttons .primary{flex:1;min-height:44px;padding:10px 14px}
.result-buttons .secondary{flex:1}
.result-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.edit-menu{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.results .empty{color:var(--soft);font-size:14px}

/* ---------- Phones ---------- */
@media (max-width:760px){
 .game.arena{gap:4px}
 .gwen-say{min-height:40px;gap:8px}.gwen-badge{width:40px;height:40px}.gwen-badge img{width:30px;height:30px}
 #bubble{font-size:12px;padding:6px 10px;line-height:1.55}
 .arena .round-head h1{font-size:20px}.arena .round-head p{font-size:11px}
 .deck{gap:8px;flex-wrap:wrap}
 .deck .choice{padding:8px;flex:1 1 calc(33% - 8px)}
 .deck .choice h2{font-size:12.5px}.deck .choice p{display:none}
 .deck .choice .number{display:none}
 .deck.fan{padding-top:4px}
 .world-card{transform:none!important;flex:1 1 calc(33% - 8px)!important;max-width:none!important}
 .world-card .symbol{display:none!important}
 .world-card .card-cover{aspect-ratio:16/9}
 html[data-round=world] .stage:has(.sub:not(:empty)) .fan{display:none}
 .deck.threads .thread-card{padding-top:10px}.thread-card .symbol{display:none!important}
 .deck.boxes .mbox{flex:1 1 calc(33% - 8px)}.mbox .box{height:84px}.mbox .pick-beat{padding:8px 4px;font-size:11px}
 .deck.flips{gap:10px;flex-wrap:nowrap}.flip{aspect-ratio:3/4}
 .flip-front b{font-size:12px}
 .reel{flex:1 1 100%!important;max-width:none!important;flex-direction:row!important;padding:6px!important}
 .reel .screen{width:42%;flex:none}
 .deck.reels{flex-direction:column}
 .stream{max-height:40%}
 .choices-row .pick-card{flex:1 1 calc(33% - 8px)}
 .live-count b{font-size:40px}
 .toolbag{padding:10px;gap:6px}.tools-row{gap:5px}.tools-row legend{min-width:0;flex-basis:100%;margin-bottom:2px}
 .chip{padding:7px 11px;font-size:12px}
 .tools-row small{display:none}
 .versus{gap:6px}.fighter{padding:6px}.fighter h2{font-size:12px}.vs{font-size:24px}
 .fighter .primary{min-height:40px;padding:8px;font-size:12px}
 .cut-zone{height:150px}
 .result-card.loot{max-width:400px;width:100%}
}
@media (max-height:700px) and (min-width:761px){
 .world-card .symbol{display:none!important}.deck .choice p{display:none}
 .mbox .box{height:90px}.stream{max-height:44%}.live-count b{font-size:40px}
}

/* ---------- Less motion ---------- */
html[data-motion=off] .arena *,html[data-motion=off] .finale *,html[data-motion=off] .results *,html[data-motion=off] .float-pop{animation:none!important;transition:none!important}
html[data-motion=off] .result-card.loot{opacity:1;transform:none}
html[data-motion=off] .cut-zone .cz-glint{opacity:0}
@media (prefers-reduced-motion:reduce){.deal,.charge,.fighter,.vs,.result-card.loot{animation:none!important}}

/* Face-off fits the stage height: the poster shrinks before anything leaves the screen. */
.versus{max-height:100%}
.fighter{max-width:380px;gap:3px;padding:10px}
.fighter .number{font:10px Hanken;letter-spacing:2px;color:#9aa3cf}
.fighter .poster img{width:auto!important;max-width:100%;height:clamp(96px,calc(100svh - 600px),214px)!important;margin:auto}
.fighter h2{font-size:15px}
.fighter .primary{min-height:42px;padding:9px 16px}

/* The card's face sets its height; the back only covers it. */
.result-card.loot{height:auto;max-height:none;aspect-ratio:auto}
.loot-inner{display:block;height:auto}
.loot-back{position:absolute;inset:0}
@media (max-width:760px){.fighter .poster img{width:100%!important;height:auto!important;aspect-ratio:16/9}}
@media (max-width:760px){
 .deck.reels{display:grid;grid-template-columns:1fr;gap:8px;max-width:420px}
 .deck.reels .reel{flex:none!important;width:100%;display:grid!important;grid-template-columns:46% 1fr;align-items:center;gap:12px;text-align:start;max-width:none!important}
 .deck.reels .reel .screen{width:100%}
 .deck.reels .reel h2{font-size:14px}
}