/* Roulette Battle 0.12 · "Vida" presentation layer.
   Loaded last. Visual only: layout of existing controls is kept, new pieces are additive. */
:root{--v12-gold:#f6cf6d;--v12-gold-2:#ffe7a4;--v12-red:#ff4a5f;--v12-blue:#39c2ff;--v12-green:#4fe0a0;--v12-ink:#07101c}

/* ------------------------------------------------------------------ chips on the 2D cloth */
.marker{--mk:translate(-50%,-50%) skewX(5deg);animation:v12-chip-drop .46s cubic-bezier(.25,1.35,.45,1) both}
@media(max-width:1100px){.marker{--mk:translate(-50%,-50%)}}
@keyframes v12-chip-drop{0%{transform:var(--mk) translateY(-95%) scale(1.7);opacity:0;filter:drop-shadow(0 18px 10px #0006)}55%{transform:var(--mk) translateY(7%) scale(.93);opacity:1}78%{transform:var(--mk) translateY(-3%) scale(1.03)}100%{transform:var(--mk);filter:drop-shadow(0 3px 3px #0008)}}
.cell{transition:box-shadow .15s,filter .15s,transform .12s}
.v12-selecting .cell:not(:disabled):active{transform:scale(.95)}
@media(hover:hover){
  .v12-selecting .cell:not(:disabled):not(.selected):hover::before{content:'';position:absolute;left:50%;top:50%;width:2.2cqw;aspect-ratio:1;transform:translate(-50%,-50%) skewX(5deg);background:url('/roulette-battle/kit/ui/chip_red.png') center/contain no-repeat;opacity:.38;pointer-events:none;filter:drop-shadow(0 0 6px #ffcf6b88)}
  .four-player.v12-selecting .cell:not(:disabled):not(.selected):hover::before{width:1.45cqw;left:30%;top:32%}
}
.cell.selected{box-shadow:inset 0 0 0 2px #f5cc69,0 0 14px #f5cc6955}
.cell.winning{animation:v12-win-cell 1.35s ease-in-out infinite;z-index:3}
.cell.winning::before{content:'';position:absolute;left:50%;top:50%;width:1.45cqw;min-width:18px;aspect-ratio:1;border-radius:50%;background:url('/roulette-battle/kit/wheel/roulette_ball.png') center/contain no-repeat;transform:translate(-50%,-50%);z-index:3;pointer-events:none;animation:v12-ball-drop .95s cubic-bezier(.3,1.5,.5,1) both;filter:drop-shadow(0 4px 4px #000a)}
@keyframes v12-win-cell{0%,100%{box-shadow:0 0 16px #ffd86d,inset 0 0 0 3px #fff4bb}50%{box-shadow:0 0 34px 6px #ffd86dcc,inset 0 0 0 3px #fffbe6}}
@keyframes v12-ball-drop{0%{transform:translate(-50%,-420%) scale(.6);opacity:0}45%{transform:translate(-50%,-50%) scale(1);opacity:1}62%{transform:translate(-50%,-120%)}78%{transform:translate(-50%,-50%)}88%{transform:translate(-50%,-72%)}100%{transform:translate(-50%,-50%)}}

/* ------------------------------------------------------------------------ quick picks */
.quick-picks{position:absolute;z-index:6;left:21%;width:63%;top:71.4%;height:4.6%;display:flex;align-items:center}
.quick-picks[hidden]{display:none}
/* 3D desktop: quick picks open as a panel from the tray, so they never cover the 3D cloth. */
.mode3d .quick-picks{display:none;left:16%;width:55%;top:auto;bottom:19.5%;height:auto;padding:.8cqw;border-radius:1.1cqw;background:linear-gradient(#142638f7,#070f1bf7);border:1px solid #c9a95c88;box-shadow:0 -10px 30px #000c;z-index:30}
.mode3d .quick-picks.open{display:block;animation:v12-sheet .3s cubic-bezier(.2,1.3,.4,1)}
.mode3d .qp-list{flex-wrap:wrap;overflow:visible;mask-image:none}
.mode3d .qp-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.4cqw;flex:none;width:16%;height:85%;border-radius:1cqw;border:1px solid #f6cf6d;background:linear-gradient(#233246,#0a121d);color:#ffe7a4;font-weight:800;font-size:max(11px,.9cqw);padding:.3cqw}
.mode3d .qp-toggle[aria-expanded=true]{background:linear-gradient(#fff0b6,#d79a2c);color:#1f1403}
.mode3d .action-tray .secondary-button{width:14%}
@keyframes v12-sheet{from{transform:translateY(14px);opacity:0}}
.qp-list{display:flex;gap:.45cqw;align-items:center;overflow-x:auto;scrollbar-width:none;width:100%;padding:.2cqw .3cqw;mask-image:linear-gradient(90deg,#000 92%,transparent)}
.qp-list::-webkit-scrollbar{display:none}
.qp-chip{flex:none;display:inline-flex;align-items:center;gap:.35cqw;height:2.35cqw;min-height:30px;padding:0 .95cqw;border-radius:99px;border:1px solid #c9a95c88;background:linear-gradient(#1c2c3ef2,#0b1522f2);color:#f7e7c4;font:700 max(11px,.78cqw) inherit;letter-spacing:.02em;cursor:pointer;box-shadow:0 4px 12px #0007,inset 0 1px #ffffff14;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.qp-chip small{font-size:.9em;padding:.05cqw .35cqw;border-radius:9px;background:#ffffff14;color:#cbd8e4;font-weight:600}
.qp-chip:hover{transform:translateY(-2px);border-color:var(--v12-gold);box-shadow:0 8px 16px #0009,0 0 12px #f6cf6d33}
.qp-chip:active{transform:translateY(1px) scale(.97)}
.qp-chip.qp-primary{background:linear-gradient(#fff0b6,#f2c65a 45%,#d79a2c);color:#241603;border-color:#ffe9a6}
.qp-chip.qp-red{background:linear-gradient(#e94257,#8d1225);border-color:#ff9aa5}
.qp-chip.qp-black{background:linear-gradient(#34414f,#0b1119);border-color:#8595a6}
.qp-chip.qp-green{background:linear-gradient(#18a88c,#07614e);border-color:#7ef0cf}
.qp-chip.qp-active{outline:2px solid var(--v12-gold-2);outline-offset:2px}
.qp-toggle{display:none}
.qp-toggle[hidden]{display:none!important}

/* ------------------------------------------------------------------- tray & meter */
.number-count{position:relative}
.pick-meter{margin:.35cqw auto 0;width:86%;display:grid;gap:.25cqw;justify-items:center}
.pick-meter-bar{display:block;width:100%;height:.36cqw;min-height:4px;border-radius:9px;background:#ffffff1a;overflow:hidden}
.pick-meter-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff5d6e,#ffcf6b);transform-origin:left;transform:scaleX(0);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.pick-meter.full .pick-meter-bar i{background:linear-gradient(90deg,#ffcf6b,#fff3c4);box-shadow:0 0 10px #ffd978}
.pick-meter-text{font-size:max(9px,.62cqw);color:#b8c7d6;letter-spacing:.02em;white-space:nowrap}
#ready-button{position:relative;overflow:hidden;isolation:isolate}
#ready-button:not(:disabled)::after{content:'';position:absolute;inset:-40% auto -40% -30%;width:22%;background:linear-gradient(100deg,transparent,#fffbe9cc,transparent);transform:skewX(-20deg);animation:v12-sheen 2.8s ease-in-out infinite;pointer-events:none;z-index:-1}
#ready-button:not(:disabled){box-shadow:inset 0 0 0 2px #fff1b755,0 5px 0 #03080a,0 0 22px #f6cf6d44}
@keyframes v12-sheen{0%,55%{left:-30%}100%{left:130%}}
#ready-button.locked-in{animation:v12-lock .6s cubic-bezier(.2,1.5,.4,1)}
@keyframes v12-lock{0%{transform:scale(1)}35%{transform:scale(1.05);filter:brightness(1.35)}100%{transform:scale(1)}}
.value-bump{animation:v12-bump .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes v12-bump{0%{transform:scale(1)}40%{transform:scale(1.14);color:#fff6cf;text-shadow:0 0 14px #ffd76e}100%{transform:scale(1)}}
#selected-count,#balance,#lobby-balance,#pot,#online-count{display:inline-block}

/* ----------------------------------------------------------------------- timer ring */
.timer{--progress:1;display:grid!important;place-items:center;aspect-ratio:1;width:4.9cqw!important;border-radius:50%;background:radial-gradient(circle,#0e2032f2 58%,#050b14f2 70%);box-shadow:0 8px 20px #000a,inset 0 0 0 1px #ffffff12}
.timer>*{grid-area:1/1}
.timer-ring{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.timer-track{fill:none;stroke:#ffffff17;stroke-width:3.2}
.timer-fill{fill:none;stroke:var(--v12-gold);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc((1 - var(--progress)) * 100);transition:stroke-dashoffset .25s linear,stroke .3s;filter:drop-shadow(0 0 3px #f6cf6d99)}
.timer strong{position:relative;z-index:1;margin-top:-.5cqw}
.timer small{position:relative;z-index:1;margin-top:2.2cqw;font-size:max(6px,.42cqw)!important;letter-spacing:.08em}
.timer.warn .timer-fill{stroke:#ffa53a;filter:drop-shadow(0 0 4px #ffa53a)}
.timer.danger .timer-fill{stroke:var(--v12-red);filter:drop-shadow(0 0 6px #ff4a5f)}
.timer.danger{animation:v12-danger 1s ease-in-out infinite}
.timer.danger strong{color:#ffd1d6}
.timer.idle .timer-fill{opacity:.35}
.timer.beat strong{animation:v12-beat .4s ease-out}
@keyframes v12-danger{0%,100%{box-shadow:0 8px 20px #000a,0 0 0 0 #ff4a5f00}50%{box-shadow:0 8px 20px #000a,0 0 0 .5cqw #ff4a5f33}}
@keyframes v12-beat{0%{transform:scale(1.35)}100%{transform:scale(1)}}
@media(min-width:1101px){.timer{left:60.9%!important;top:31.4%!important}
  body:not(.mode3d) .quick-picks{width:52.5%}.mode3d .timer{left:90%!important;top:19%!important}
  .mode3d #camera-controls{left:auto!important;right:1.4%;top:34%!important;flex-direction:column;align-items:stretch;gap:6px}
  .mode3d #camera-controls button{background:#0b1726e6}}

/* ------------------------------------------------------------------- seats & statuses */
.seat-meter{display:flex;align-items:center;gap:.3cqw;margin-top:.25cqw}
.seat-meter[hidden]{display:none}
.seat-meter i{flex:1;height:.28cqw;min-height:3px;border-radius:9px;background:linear-gradient(90deg,#52d9ff,#b9f2ff);transform-origin:left;transition:transform .35s ease}
.my-seat .seat-meter i{background:linear-gradient(90deg,#ff6374,#ffc3c9)}
.seat-meter b{font-size:max(8px,.55cqw);color:#dfe8f1;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.seat.is-ready .seat-meter b{color:var(--v12-green)}
.seat.is-ready .seat-meter i{background:linear-gradient(90deg,#3bd98f,#b8ffd9)}
.seat .portrait{transition:box-shadow .35s}
.seat.is-ready .portrait{box-shadow:0 0 0 3px #4fe0a0,0 0 26px #4fe0a088!important}
.seat.is-thinking .portrait{animation:v12-think 1.8s ease-in-out infinite}
@keyframes v12-think{0%,100%{filter:brightness(1)}50%{filter:brightness(1.18) drop-shadow(0 0 10px #52d9ff66)}}
.ready-badge:not([hidden]){animation:v12-stamp .55s cubic-bezier(.2,1.7,.4,1) both;background:linear-gradient(#5ff0ad,#1d9d63)!important;color:#03140c!important;font-weight:800;box-shadow:0 4px 12px #0008}
@keyframes v12-stamp{0%{transform:scale(2.4) rotate(-14deg);opacity:0}60%{transform:scale(.9) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(-4deg)}}

/* ------------------------------------------------------------------------ phase heading */
.table-heading.phase-swap h1{animation:v12-phase .55s cubic-bezier(.2,.9,.3,1.1)}
@keyframes v12-phase{0%{opacity:0;transform:translateY(8px);letter-spacing:.3em}100%{opacity:1;transform:none}}
.table-heading h1{text-shadow:0 0 18px #ffcf6b55,0 2px 0 #000}

/* ------------------------------------------------------------------------------- feed */
.battle-feed{position:fixed;left:50%;top:15vh;transform:translateX(-50%);z-index:120;display:grid;gap:8px;justify-items:center;pointer-events:none}
.feed-item{display:flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:99px;background:linear-gradient(#152638f2,#08111ef2);border:1px solid #c9a95c99;color:#fff2d6;font-size:14px;font-weight:650;box-shadow:0 10px 30px #000a;animation:v12-feed-in .45s cubic-bezier(.2,1.4,.4,1) both;white-space:nowrap}
.feed-item img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:top;background:#0b1a2a;border:1px solid #ffffff33}
.feed-item.ready{border-color:#4fe0a0}
.feed-item.ready span::after{content:' ✓';color:var(--v12-green)}
.feed-item.leaving{animation:v12-feed-out .45s ease-in both}
@keyframes v12-feed-in{0%{opacity:0;transform:translateY(-16px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes v12-feed-out{to{opacity:0;transform:translateY(-10px) scale(.96)}}
.in-lobby .battle-feed,.celebrating .battle-feed{display:none}

/* ---------------------------------------------------------------------- VS introduction */
.vs-lineup{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 max(3vw,24px);pointer-events:none}
.vs-card{display:grid;justify-items:center;gap:6px;width:min(26vw,300px);text-align:center;opacity:0}
.vs-card small{font-size:12px;letter-spacing:.3em;font-weight:800;color:#ff8a96}
.vs-card.rival small{color:#8fe3ff}
.vs-card strong{font-size:clamp(18px,2.3vw,34px);color:#fff4da;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 3px 12px #000}
.vs-portrait{width:min(20vw,220px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#3a1622,#0c0f1b 70%);box-shadow:0 0 0 4px #ff4a5f,0 0 45px #ff4a5f88,inset 0 -30px 40px #0009}
.vs-card.rival .vs-portrait{box-shadow:0 0 0 4px #39c2ff,0 0 45px #39c2ff88,inset 0 -30px 40px #0009;background:radial-gradient(circle at 50% 35%,#0d3350,#0c0f1b 70%)}
.vs-portrait img{width:100%;height:118%;object-fit:cover;object-position:top}
.vs-badge{position:absolute;left:50%;top:calc(50% + min(170px,34vh));transform:translateX(-50%);display:grid;justify-items:center;gap:4px;opacity:0}
.vs-badge b{font-size:clamp(34px,5vw,64px);line-height:1;font-style:italic;letter-spacing:.02em;background:linear-gradient(#fff6c9,#f6cf6d 55%,#b8781f);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #5b3a12)}
.vs-badge span{font-size:12px;letter-spacing:.24em;color:#ffe4a1;background:#0a1320d9;border:1px solid #c9a95c;border-radius:99px;padding:5px 14px}
.vs-lineup[data-size="4"]{flex-wrap:wrap;align-content:center}
.vs-lineup[data-size="4"] .vs-card{width:min(20vw,200px)}
.vs-lineup[data-size="4"] .vs-portrait{width:min(12vw,130px)}
.vs-lineup[data-size="4"] .vs-card.rival-2{position:absolute;left:50%;top:5vh;transform:translateX(-50%)}
.vs-lineup[data-size="4"] .vs-card.rival-3{position:absolute;right:max(3vw,24px);top:auto;bottom:6vh}
.vs-lineup[data-size="4"] .vs-card.rival-1{align-self:flex-start;margin-top:18vh}
.start-countdown.intro-play{background:radial-gradient(ellipse at center,#06111bdd,transparent 60%),linear-gradient(90deg,#4a0715cc,#0b0d17aa 35%,#0b0d17aa 65%,#04284acc)}
.intro-play .vs-card.me{animation:v12-in-left .75s cubic-bezier(.2,1,.25,1.15) .05s both}
.intro-play .vs-card.rival{animation:v12-in-right .75s cubic-bezier(.2,1,.25,1.15) calc(.12s + var(--i,1) * .08s) both}
.intro-play .vs-badge{animation:v12-vs-slam .6s cubic-bezier(.2,1.8,.4,1) .45s both}
.intro-play .countdown-ring{animation:v12-ring-in .6s cubic-bezier(.2,1.4,.4,1) both}
@keyframes v12-in-left{0%{opacity:0;transform:translateX(-60vw) skewX(12deg)}100%{opacity:1;transform:none}}
@keyframes v12-in-right{0%{opacity:0;transform:translateX(60vw) skewX(-12deg)}100%{opacity:1;transform:none}}
@keyframes v12-vs-slam{0%{opacity:0;transform:translateX(-50%) scale(3)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes v12-ring-in{0%{transform:scale(.4) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
.vs-lineup[data-size="4"] .vs-card.rival-2{animation-name:v12-drop-top}
@keyframes v12-drop-top{0%{opacity:0;transform:translate(-50%,-40vh)}100%{opacity:1;transform:translateX(-50%)}}

/* -------------------------------------------------------------------- spin broadcast */
.spin-cinema #cinema-hud::before,.spin-cinema #cinema-hud::after{content:'';position:absolute;left:0;right:0;height:5.5vh;background:#000;z-index:-1;animation:v12-bars .6s cubic-bezier(.2,.9,.3,1) both}
.spin-cinema #cinema-hud::before{top:0}
.spin-cinema #cinema-hud::after{bottom:0;animation-name:v12-bars-bottom}
@keyframes v12-bars{from{transform:translateY(-100%)}}
@keyframes v12-bars-bottom{from{transform:translateY(100%)}}
.cinema-players{position:absolute;left:50%;bottom:8.5vh;transform:translateX(-50%);display:flex;gap:10px;pointer-events:none}
.cinema-player{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:9px;align-items:center;padding:6px 14px 6px 6px;border-radius:99px;background:#07111ecc;border:1px solid #ffffff26;transition:transform .35s,border-color .35s,box-shadow .35s}
.cinema-player img{grid-row:1/3;width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:top;border:2px solid #39c2ff}
.cinema-player.me img{border-color:#ff4a5f}
.cinema-player strong{font-size:13px;color:#fff3da;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cinema-player small{font-size:11px;color:#b9c9d8}
.cinema-player.hit{transform:translateY(-6px) scale(1.08);border-color:var(--v12-gold);box-shadow:0 0 26px #f6cf6d88}
.cinema-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:#ffffff14;overflow:hidden}
.cinema-progress i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,#ff4a5f,#f6cf6d 50%,#39c2ff)}
.cinema-progress.run i{animation:v12-progress var(--spin-ms,7200ms) linear var(--spin-delay,0ms) both}
@keyframes v12-progress{to{transform:scaleX(1)}}
.cinema-verdict{position:absolute;left:50%;top:58%;transform:translate(-50%,16px) scale(.9);opacity:0;display:flex;align-items:center;gap:14px;padding:10px 22px 10px 10px;border-radius:99px;background:#060d18e6;border:1px solid #c9a95c;box-shadow:0 18px 40px #000b;transition:opacity .35s,transform .45s cubic-bezier(.2,1.5,.4,1)}
.cinema-verdict.show{opacity:1;transform:translate(-50%,0) scale(1)}
.cinema-verdict span{font-size:clamp(16px,2vw,26px);font-weight:800;color:#fff3d6;white-space:nowrap}
.cinema-verdict.good{border-color:var(--v12-gold);box-shadow:0 0 50px #f6cf6d66}
.cinema-verdict.bad span{color:#cfe6ff}
.verdict-number{display:grid;place-items:center;width:clamp(44px,5vw,64px);aspect-ratio:1;border-radius:50%;font-size:clamp(20px,2.4vw,32px);font-weight:900;color:#fff;border:2px solid #ffe7a4;background:radial-gradient(circle at 35% 25%,#ff6c7d,#a3122a 70%)}
.verdict-number.black{background:radial-gradient(circle at 35% 25%,#5a6d80,#0c141f 70%)}
.verdict-number.green{background:radial-gradient(circle at 35% 25%,#3fe0a8,#04674a 70%)}
body.ball-landed #scene3d canvas{animation:v12-land .8s ease-out}
@keyframes v12-land{0%{filter:brightness(1.9) saturate(1.3);transform:scale(1.02)}25%{transform:translate(-3px,2px) scale(1.015)}45%{transform:translate(3px,-2px) scale(1.01)}100%{filter:none;transform:none}}
.cinematic-settled #cinema-title{animation:v12-title-pop .6s cubic-bezier(.2,1.6,.4,1)}
/* Keep "Volver a la mesa" clear of the fixed Salir button. */
@media(min-width:1101px){#cinema-hud #skip-cinema{right:136px;bottom:14px}}
@keyframes v12-title-pop{0%{transform:scale(1.5);opacity:0}100%{transform:none;opacity:1}}

/* ----------------------------------------------------------------------- celebration */
.celebration-coins{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.celebration-body,.celebration-top{position:relative;z-index:3}
.winner-block{position:relative}
.winner-prize.rolling{visibility:hidden}
.prize-roll{position:absolute;display:block;text-align:center;font-weight:800;font-size:clamp(23px,3vw,38px);color:#ffd36e;font-variant-numeric:tabular-nums;text-shadow:0 0 18px #ffcf6b88;pointer-events:none}
.outcome-orbit{overflow:visible}
.orbit-ball{position:absolute;inset:-7%;border-radius:50%;pointer-events:none;animation:v12-orbit 2.1s cubic-bezier(.15,.65,.25,1) .1s both}
.orbit-ball::before{content:'';position:absolute;left:50%;top:0;width:9%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:url('/roulette-battle/kit/wheel/roulette_ball.png') center/contain no-repeat;filter:drop-shadow(0 0 8px #fff8)}
@keyframes v12-orbit{0%{transform:rotate(-900deg);opacity:0}10%{opacity:1}100%{transform:rotate(0deg);opacity:1}}
#celebration.v12-win .celebration-title{filter:drop-shadow(0 4px 0 #68421d) drop-shadow(0 0 28px #ffcf6b88)}
#celebration.v12-win::after{content:'';position:fixed;left:50%;top:38%;width:170vmax;height:170vmax;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;background:repeating-conic-gradient(from 0deg,#ffd66a1c 0deg 7deg,transparent 7deg 20deg);mask-image:radial-gradient(circle,#000 10%,transparent 55%);animation:v12-rays 26s linear infinite}
@keyframes v12-rays{to{transform:translate(-50%,-50%) rotate(360deg)}}
#celebration.v12-loss{background:radial-gradient(ellipse at 50% 35%,#1c3552cc,transparent 60%),linear-gradient(125deg,#0c1424,#06101c 45%,#03182c)}
#celebration.v12-loss .celebration-title{background:linear-gradient(#f4fbff 18%,#a8d8ff 60%,#4d86b8);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #0c2946)}
#celebration.v12-loss .winner-portrait{filter:drop-shadow(0 0 22px #39c2ff88)}
#celebration.v12-loss #celebration-effects{opacity:.28;filter:saturate(.4) hue-rotate(160deg)}
#celebration.v12-tie .celebration-title,#celebration.v12-qualified .celebration-title{filter:drop-shadow(0 4px 0 #68421d) drop-shadow(0 0 22px #4fe0a055)}
#celebration.v12-qualified::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,#4fe0a01f,transparent 55%)}

/* --------------------------------------------------------------------------- lobby */
#lobby .room-option{transition:transform .2s cubic-bezier(.2,1.4,.4,1),border-color .2s,box-shadow .2s,background .2s}
#lobby .room-option:hover{transform:translateY(-3px);border-color:#d6b367;box-shadow:0 14px 26px #0008,0 0 0 1px #d6b36744}
#lobby .room-option[aria-pressed=true]{box-shadow:0 0 0 1px #f6cf6d,0 0 30px #f6cf6d2e}
#lobby .room-option>img{transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
#lobby .room-option:hover>img,#lobby .room-option[aria-pressed=true]>img{transform:rotate(-8deg) scale(1.07)}
#lobby .room-card-action{background:linear-gradient(#fff0b3,#f3c55a 50%,#d59628);color:#1f1403;font-weight:800;border-color:#fff3c2;box-shadow:0 3px 0 #6b4913,inset 0 1px #fff}
#lobby .room-option[aria-pressed=true] .room-card-action{background:linear-gradient(#b9ffd9,#46d08c);border-color:#d3ffe8;color:#032012;box-shadow:0 3px 0 #145336}
#lobby .lobby-hero::before{content:'';position:absolute;inset:-20% auto -20% -40%;width:28%;z-index:0;pointer-events:none;background:linear-gradient(100deg,transparent,#fff5d625,transparent);transform:skewX(-18deg);animation:v12-hero-sheen 6.5s ease-in-out infinite}
@keyframes v12-hero-sheen{0%,62%{left:-40%}100%{left:130%}}
#lobby .lobby-hero-art img{animation:v12-float 5.5s ease-in-out infinite}
@keyframes v12-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(2deg)}}
#hero-match:not(:disabled){animation:v12-cta 2.6s ease-in-out infinite}
@keyframes v12-cta{0%,100%{box-shadow:0 3px 0 #77572455,inset 0 1px #ffffffe0,0 0 0 0 #f6cf6d55}50%{box-shadow:0 3px 0 #77572455,inset 0 1px #ffffffe0,0 0 0 10px #f6cf6d00,0 0 26px #f6cf6d66}}
.online-pill i,.hero-tag i{animation:v12-live 1.6s ease-in-out infinite}
@keyframes v12-live{0%,100%{box-shadow:0 0 0 0 #72efaf88}50%{box-shadow:0 0 0 6px #72efaf00}}
.capacity-options button{transition:transform .2s,border-color .2s,box-shadow .2s}
.capacity-options button:hover{transform:translateY(-2px)}
.capacity-options button[aria-pressed=true]{box-shadow:0 0 0 1px #f6cf6d,0 0 26px #f6cf6d26}

/* ------------------------------------------------------------------ searching screen */
.search-radar{overflow:visible}
.radar-sweep{position:absolute;inset:6px;border-radius:50%;background:conic-gradient(from 0deg,#f6cf6d55,#f6cf6d10 16%,transparent 26%);animation:v12-sweep 2.4s linear infinite;pointer-events:none}
@keyframes v12-sweep{to{transform:rotate(360deg)}}
.search-finished .radar-sweep{display:none}
.search-seat.filled{animation:v12-seat .55s cubic-bezier(.2,1.5,.4,1) both;box-shadow:0 0 24px #f6cf6d22}
@keyframes v12-seat{0%{transform:scale(.85);opacity:.4}100%{transform:none;opacity:1}}
.search-tip{max-width:520px;margin:12px auto 0;padding:10px 14px;border-radius:12px;background:#0d1b2cc7;border:1px solid #2d4560;color:#bcd0e2;font-size:13px;line-height:1.55;text-align:center}
.search-tip.tip-in{animation:v12-tip .5s ease-out}
@keyframes v12-tip{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}

/* ---------------------------------------------------------------- phones, landscape */
@media(max-width:1100px) and (orientation:landscape){
  .quick-picks{left:2%;width:71.5%;top:auto;bottom:21.5%;height:auto;max-height:46%;display:none;padding:8px;border-radius:12px;background:linear-gradient(#142638f7,#070f1bf7);border:1px solid #c9a95c88;box-shadow:0 -10px 30px #000c;z-index:30}
  .quick-picks.open{display:block;animation:v12-sheet .3s cubic-bezier(.2,1.3,.4,1)}
  .mode3d .quick-picks{left:2%;width:71.5%;top:auto;bottom:21%;height:auto;padding:8px;border-radius:12px}
  .mode3d .qp-toggle{width:13%;height:100%;border-radius:8px;font-size:11px;padding:2px}
  .mode3d .action-tray .secondary-button{width:14%!important}
  .qp-list{flex-wrap:wrap;overflow:visible;mask-image:none;gap:6px}
  .qp-chip{height:34px;min-height:34px;padding:0 11px;font-size:12px}
  .qp-toggle{display:inline-flex;align-items:center;justify-content:center;gap:4px;flex:none;width:13%;height:100%;border-radius:8px;border:1px solid #f6cf6d;background:linear-gradient(#233246,#0a121d);color:#ffe7a4;font-weight:800;font-size:11px;padding:2px}
  .qp-toggle[aria-expanded=true]{background:linear-gradient(#fff0b6,#d79a2c);color:#1f1403}
  .qp-toggle-label{display:none}
  .qp-bolt{font-size:18px}
  .action-tray .secondary-button{width:14%!important}
  .pick-meter-text{display:none}
  .pick-meter{margin-top:3px}
  .timer{width:40px!important;height:40px;min-width:40px;top:23.5%!important}
  .mode3d .timer{top:22%!important}
  .timer strong{font-size:14px!important;margin:0}
  .timer small{display:none!important}
  .seat-meter{margin-top:2px}
  .seat-meter b{font-size:8px}
  .table-heading h1{display:inline-block;padding:3px 10px;border-radius:99px;background:#07111ecc;border:1px solid #c9a95c66}
  .exit-game{top:32px!important;bottom:auto!important;right:auto!important;left:13%!important;min-height:30px!important;padding:4px 10px!important;font-size:12px}
  .battle-feed{top:25dvh}
  .feed-item{font-size:12px;padding:5px 12px 5px 5px}
  .feed-item img{width:24px;height:24px}
  .cinema-players{bottom:9vh;gap:6px}
  .cinema-player{padding:4px 10px 4px 4px}
  .cinema-player img{width:28px;height:28px}
  .cinema-player strong{font-size:11px;max-width:80px}
  .cinema-player small{font-size:9px}
  .cinema-verdict{top:52%;padding:6px 14px 6px 6px}
  .vs-portrait{width:min(19vh,120px)}
  .vs-card strong{font-size:15px}
  .vs-card small{font-size:9px}
  .vs-badge{top:calc(50% + 118px)}
  .vs-badge b{font-size:30px}
  .vs-badge span{font-size:9px;padding:3px 10px}
  .vs-lineup[data-size="4"] .vs-portrait{width:min(14vh,80px)}
  .vs-lineup[data-size="4"] .vs-card.rival-2{top:2vh}
}
@media(max-width:1100px) and (orientation:landscape) and (max-height:430px){.countdown-ring{width:190px;height:190px}.countdown-ring strong{font-size:70px}.vs-badge{top:calc(50% + 100px)}}
@media(max-width:600px){.search-tip{font-size:12px}}
/* Tablets in portrait use the stacked grid layout: the strip joins the flow above the tray. */
@media(max-width:1100px) and (orientation:portrait){
  .quick-picks,.mode3d .quick-picks{position:relative;display:flex;left:auto;top:auto;bottom:auto;width:auto;height:auto;padding:0;background:none;border:0;box-shadow:none;grid-column:1/-1;order:6}
  .quick-picks[hidden]{display:none}
  .qp-toggle,.mode3d .qp-toggle{display:none!important}
  .qp-chip{height:36px}
}

/* ----------------------------------------------------------------- reduced motion */
@media(prefers-reduced-motion:reduce){
  .marker,.cell.winning,.cell.winning::before,.timer.danger,.seat.is-thinking .portrait,.ready-badge:not([hidden]),.feed-item,.vs-card,.vs-badge,.countdown-ring,.orbit-ball,#celebration.v12-win::after,#lobby .lobby-hero::before,#lobby .lobby-hero-art img,#hero-match,.radar-sweep,.search-seat.filled,.value-bump,#ready-button::after,.cinema-progress i,body.ball-landed #scene3d canvas{animation:none!important}
  .vs-card,.vs-badge{opacity:1}
}