/* Round 9: presentation rebuild for Limbo, Towers, Coin flip and Baccarat. Visual only. */
:root{--dr-stage:#0a070d;--dr-panel:#100c15;--dr-line:#2a2033;--dr-purple:#8b45e6;--dr-green:#57efa1;--dr-red:#ff7187;--dr-gold:#f5c451;--dr-mono:"Geist Mono",var(--game-mono,ui-monospace),monospace;--dr-ease:cubic-bezier(.16,1,.3,1);--dr-spring:cubic-bezier(.2,1.4,.4,1)}
.game-limbo #arena,.game-towers #arena,.game-coin-flip #arena,.game-baccarat #arena{background:var(--dr-stage);border-color:var(--dr-line)}

/* ---------- Limbo ---------- */
/* Top strip pinned to the very top of the arena, same placement as the React games' strip. */
.game-limbo #arena>.history-strip.top-strip{position:absolute;z-index:6;top:16px;left:18px;right:18px;margin:0;padding:0}
.game-limbo #arena>.limbo-stage{flex:1;width:100%;box-sizing:border-box;padding-top:56px}
.limbo-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,#57efa155,#57efa118 32%,transparent 62%)}
.limbo-stage.limbo-win::before{animation:dr-burst .9s var(--dr-ease)}
.limbo-stage.limbo-loss #limboValue{animation:dr-shake .38s ease-out}
.limbo-stage.limbo-loss::before{background:radial-gradient(circle at 50% 42%,#ff718733,transparent 55%);animation:dr-burst .6s ease-out}
#limboValue{--heat:0;font-family:var(--dr-mono);font-weight:800;color:color-mix(in srgb,#f2e8ff calc(100% - var(--heat) * 100%),#c79bff);transition:color .12s linear;text-shadow:0 0 calc(18px + var(--heat) * 30px) color-mix(in srgb,var(--dr-purple) calc(var(--heat) * 70%),transparent)}
#limboValue.over-target,#limboValue.over-target>span{color:var(--dr-green);text-shadow:0 0 34px #57efa166}
.limbo-stage.limbo-win #limboValue{animation:dr-pop .5s var(--dr-spring)}
#limboValue.loss,#limboValue.loss>span{color:var(--dr-red);text-shadow:0 0 28px #ff718744}
.limbo-meter-labels strong,.limbo-meter-labels span{font-family:var(--dr-mono)}
.limbo-meter-track{background:var(--dr-panel);border-color:var(--dr-line)}
.limbo-meter-track>span{background:linear-gradient(90deg,#5b2aa8,var(--dr-purple),#c79bff);transition:width .05s linear}
.limbo-meter-track>i{width:2px;top:-9px;height:25px;background:var(--dr-gold);box-shadow:0 0 10px #f5c45199}
.limbo-meter-track>i::after{content:"TARGET";position:absolute;top:-15px;right:-14px;font:700 8px/1 var(--dr-mono);letter-spacing:.12em;color:var(--dr-gold)}
.limbo-meter-track.reached>span{background:linear-gradient(90deg,#1f8a5c,var(--dr-green));box-shadow:0 0 18px #57efa155}
.limbo-meter-track.reached>i{background:var(--dr-green);box-shadow:0 0 12px #57efa1}

/* ---------- Towers ---------- */
.game-towers .segmented{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.game-towers .segmented button{font-size:12px;font-weight:700;padding:8px 4px;letter-spacing:0;white-space:nowrap;overflow:visible;text-overflow:clip;min-width:0;min-height:36px;border-radius:6px}
@container (max-width:300px){.game-towers .segmented{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){.game-towers .segmented{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tower-stage{position:relative;isolation:isolate}
.tower-row>span{font-family:var(--dr-mono)}
.tower-row button{background:linear-gradient(180deg,#181220,var(--dr-panel));border:1px solid var(--dr-line);box-shadow:inset 0 1px #ffffff08,0 3px 0 #06040a;transition:transform .16s var(--dr-ease),border-color .16s,box-shadow .16s;backface-visibility:hidden;transform-style:preserve-3d}
.tower-row.current{animation:dr-row-glow 1.8s ease-in-out infinite}
.tower-row.current button:not(:disabled){border-color:#8b45e680}
.tower-row.current button:not(:disabled):hover{transform:translateY(-3px);border-color:var(--dr-purple);box-shadow:0 6px 18px #8b45e640,0 3px 0 #06040a}
.tower-row button.safe{background:linear-gradient(180deg,#123526,#0c2119);border-color:#57efa155;color:var(--dr-green)}
.tower-row button.trap{background:linear-gradient(180deg,#3a141d,#220c12);border-color:#ff718755;color:var(--dr-red)}
.tower-row button.chosen.safe{position:relative;border-color:var(--dr-green);box-shadow:0 0 18px #57efa144,inset 0 0 12px #57efa122;text-shadow:0 0 10px #57efa1}
.tower-row button.chosen.safe::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--dr-green);opacity:0;animation:dr-ring .55s ease-out .2s}
.tower-row button.chosen.trap{border-color:var(--dr-red);box-shadow:0 0 22px #ff718766}
.tower-stage.is-bust #towerGrid{animation:dr-shake .45s ease-out}
.tower-stage.is-bust::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#ff718744,transparent 60%);animation:dr-burst .7s ease-out}
.tower-stage.is-bust .chosen.trap{animation:dr-explode .5s var(--dr-ease)}
.tower-stage.is-cashed::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#f5c45140,#57efa11a 40%,transparent 65%);animation:dr-burst 1.1s var(--dr-ease)}
.tower-stage.is-cashed .tower-row button.safe{animation:dr-cash .7s var(--dr-ease) both}

/* ---------- Coin flip ---------- */
.coin-stage{perspective:900px}
.coin3d{filter:drop-shadow(0 10px 18px #0009)}
.coin3d .coin-face{box-shadow:inset 0 0 0 3px #ffffff22,inset 0 -6px 14px #0005,inset 0 6px 14px #ffffff26}
.coin-stage.landed{animation:dr-land .5s var(--dr-spring)}
.coin-stage.landed .coin-shadow{animation:dr-shadow .5s ease-out}
.battle-players>div{border:1px solid var(--dr-line);background:var(--dr-panel);border-radius:12px;transition:border-color .3s,box-shadow .3s}
.battle-players>div span:last-child{font-family:var(--dr-mono)}
.battle-players .winner{border-color:var(--dr-green);box-shadow:0 0 0 1px #57efa155,0 0 28px #57efa133;background:linear-gradient(180deg,#57efa114,var(--dr-panel))}
.battle-status .win{color:var(--dr-green)}
.rooms{display:grid;gap:18px}
.room-category h2{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9c8cae}
.room-category h2 span{font:700 10px/1 var(--dr-mono);padding:3px 7px;border-radius:20px;background:var(--dr-panel);border:1px solid var(--dr-line);color:#cdbfe0}
.room-row{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:6px;background:var(--dr-panel);border:1px solid var(--dr-line);border-radius:10px;transition:border-color .15s,transform .15s}
.room-row:hover{border-color:#8b45e680;transform:translateY(-1px)}
.room-row .room-players{flex:1;min-width:0;display:flex;align-items:center;gap:8px;overflow:hidden}
.room-row .player-identity{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-row>strong{font-family:var(--dr-mono);color:var(--dr-gold);white-space:nowrap}
.room-row .battle-status{color:var(--dr-purple);font-size:11px;animation:dr-blink 1s ease-in-out infinite}

/* ---------- Baccarat ---------- */
.baccarat-table .card{animation:dr-deal .55s var(--dr-ease) both;transform-origin:50% 50%;box-shadow:0 10px 24px #0007}
.baccarat-table .card::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(45deg,#5b2aa8 0 6px,#4a2190 6px 12px);border:3px solid #f2e8ff;box-sizing:border-box;animation:dr-back .55s steps(1,end) both}
.baccarat-table .card{position:relative}
.baccarat-table .card:nth-child(2),.baccarat-table .card:nth-child(2)::before{animation-delay:.12s}
.baccarat-table .card:nth-child(3),.baccarat-table .card:nth-child(3)::before{animation-delay:.24s}
.hand header b{display:inline-block;font-family:var(--dr-mono);min-width:1.6em;text-align:center;padding:2px 6px;border-radius:6px;background:var(--dr-panel);border:1px solid var(--dr-line)}
.hand header b.bumped{animation:dr-pop .4s var(--dr-spring)}
.hand{border-radius:14px;transition:box-shadow .4s,background .4s}
.player-hand.is-winner,.banker-hand.is-winner{box-shadow:0 0 0 1px var(--dr-gold),0 0 36px #f5c45133;background:radial-gradient(ellipse at 50% 60%,#f5c4511a,transparent 70%)}
.hand.is-winner header b{border-color:var(--dr-gold);color:var(--dr-gold)}

/* ---------- Keyframes ---------- */
@keyframes dr-burst{0%{opacity:0;transform:scale(.6)}30%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@keyframes dr-shake{0%,100%{translate:0}20%{translate:-8px 0}40%{translate:7px 0}60%{translate:-5px 0}80%{translate:3px 0}}
@keyframes dr-pop{0%{scale:1}40%{scale:1.14}100%{scale:1}}
@keyframes dr-ring{0%{opacity:.9;scale:1}100%{opacity:0;scale:1.35}}
@keyframes dr-explode{0%{scale:1;filter:brightness(2.4)}35%{scale:1.22}100%{scale:1;filter:brightness(1)}}
@keyframes dr-cash{0%{filter:brightness(1)}40%{filter:brightness(1.8);box-shadow:0 0 20px #f5c45166}100%{filter:brightness(1)}}
@keyframes dr-row-glow{0%,100%{filter:drop-shadow(0 0 4px #8b45e622)}50%{filter:drop-shadow(0 0 12px #8b45e655)}}
@keyframes dr-land{0%{translate:0 0}30%{translate:0 6px}55%{translate:0 -4px}80%{translate:0 1px}100%{translate:0 0}}
@keyframes dr-shadow{30%{scale:1.15}100%{scale:1}}
@keyframes dr-blink{50%{opacity:.45}}
@keyframes dr-deal{0%{opacity:0;translate:180px -120px;rotate:y 180deg}55%{opacity:1;translate:0 0;rotate:y 180deg}100%{opacity:1;translate:0 0;rotate:y 0deg}}
@keyframes dr-back{0%{opacity:1}75%{opacity:0}100%{opacity:0}}

@media(max-width:600px){.game-limbo #arena>.history-strip.top-strip{top:12px;left:12px;right:12px}.game-limbo #arena>.limbo-stage{padding-top:48px}}
@media(prefers-reduced-motion:reduce){
  .limbo-stage::before,.limbo-stage.limbo-win #limboValue,.limbo-stage.limbo-loss #limboValue,.tower-row.current,.tower-row button.chosen.safe::after,.tower-stage.is-bust #towerGrid,.tower-stage.is-bust::after,.tower-stage.is-bust .chosen.trap,.tower-stage.is-cashed::after,.tower-stage.is-cashed .tower-row button.safe,.coin-stage.landed,.coin-stage.landed .coin-shadow,.room-row .battle-status,.baccarat-table .card,.hand header b.bumped{animation:none!important}
  .baccarat-table .card::before{display:none}
  #limboValue,.limbo-meter-track>span{transition:none}
}

/* ---------- Round 10: Coinflip coin, battle and lobby polish ---------- */
/* A filter on a preserve-3d element flattens it, which hid the tails face. Shadow comes from .coin-shadow instead. */
.coin3d{filter:none}
.coin3d .coin-face{box-shadow:inset 0 0 0 4px #ffe7a6aa,inset 0 0 0 7px #7a4a1866,inset 0 -10px 22px #0006,inset 0 10px 22px #fff3;transition:box-shadow .35s}
.coin3d .coin-face::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 32% 24%,#ffffff40,transparent 38%)}
.coin3d.won-heads .coin-face.heads,.coin3d.won-tails .coin-face.tails{box-shadow:inset 0 0 0 5px #57efa1,inset 0 0 26px #57efa166,0 0 34px #57efa199;animation:dr-coin-win 1.4s ease-in-out infinite}
.coin-stage{perspective:1100px}
.coin-stage::before{background:radial-gradient(ellipse,#b89bc333,#75608018 58%,transparent 72%)}
.coin-stage:has(.won-heads,.won-tails)::after{content:"";position:absolute;inset:10% 20%;pointer-events:none;background:radial-gradient(circle,#57efa126,transparent 62%);animation:dr-burst 1s var(--dr-ease)}
@keyframes dr-coin-win{50%{box-shadow:inset 0 0 0 5px #8dffc4,inset 0 0 34px #57efa188,0 0 48px #57efa1cc}}
.battle-players{gap:28px;padding-top:28px}
.battle-players>div{max-width:280px;min-width:200px;padding:16px 18px;gap:12px}
.battle-players b,.battle-players .player-identity{font-size:16px;font-weight:700;color:#f1e7ff}
.battle-players>div>span:last-child{font-size:15px;color:var(--dr-gold)}
.battle-players .mini-coin{width:36px;height:36px}
.battle-players .versus{font:800 14px/1 var(--dr-mono);letter-spacing:.12em;color:#9c8cae}
.battle-players .player-head,.room-row .player-head{width:32px;height:32px;flex-basis:32px;border-radius:6px}
.player-head.bot-head{image-rendering:auto;object-fit:contain;background:#2a1b3a;padding:2px;box-sizing:border-box}
.bot-label{font-size:10px;font-weight:700;letter-spacing:.08em;padding:3px 6px;border-radius:4px;color:#d9c6ff;border-color:#8b45e666;background:#8b45e622}
.battle-status{font-size:16px;min-height:30px}
.battle-status .win{font-size:20px;font-weight:800}
.battle-actions>button{padding:12px 28px;font-size:14px}
.rooms{gap:26px}
.room-category h2{font-size:12px;margin-bottom:12px}
.room-row{gap:16px;padding:14px 18px;margin-bottom:8px;border-radius:12px;font-size:15px}
.room-row .mini-coin{width:34px;height:34px}
.room-row .player-identity{font-size:15px;font-weight:700;color:#efe4ff}
.room-row .versus{font:700 11px/1 var(--dr-mono);letter-spacing:.1em;color:#7f6f91;text-transform:uppercase}
.room-row>strong{font-size:16px;min-width:90px;text-align:right}
.room-row>button{min-width:112px;padding:10px 16px;font-size:14px;border-radius:9px}
.rooms .empty{border:1px dashed var(--dr-line);border-radius:12px;text-align:center}
@media(max-width:600px){.battle-players>div{min-width:0;padding:10px}.battle-players b,.battle-players .player-identity{font-size:13px}.battle-players>div>span:last-child{font-size:13px}.room-row{flex-wrap:wrap;padding:12px}.room-row .room-players{flex-basis:100%}.room-row>strong{text-align:left}.room-row>button{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.coin3d.won-heads .coin-face.heads,.coin3d.won-tails .coin-face.tails,.coin-stage::after{animation:none!important}}

/* ---------- Round 10: Limbo ---------- */
.limbo-meter-track>i{display:none}
.limbo-stage.limbo-win #limboValue{color:#76e8af}
#resultText.limbo-pill{display:inline-flex;align-self:center;align-items:center;justify-content:center;height:auto;line-height:1;margin:14px auto 0;padding:8px 18px;border-radius:999px;background:#57efa11c;border:1px solid #57efa166;box-shadow:0 0 22px #57efa122;color:#7ff5b6;font:800 18px/1 var(--dr-mono);letter-spacing:.01em;font-variant-numeric:tabular-nums;width:auto;animation:dr-pop .45s var(--dr-spring)}

/* ---------- Coin faces (r12): clean coins with a big H / T. Heads gold, tails purple ---------- */
.coin-face.heads,.coin-preview .coin-face.heads:hover:not(:disabled){background:radial-gradient(circle at 35% 30%,#fff3c4 0,#f5c451 38%,#c98a1c 78%,#8a5a10 100%)!important;box-shadow:inset 0 0 0 6px #e6ad3a,inset 0 0 0 9px #8a5a10,inset 0 6px 14px #fff8,inset 0 -8px 16px #6b4208}
.coin-face.tails,.coin-preview .coin-face.tails:hover:not(:disabled){background:radial-gradient(circle at 35% 30%,#e3c8ff 0,#a45cf0 38%,#6528c4 78%,#3c1680 100%)!important;box-shadow:inset 0 0 0 6px #b67cff,inset 0 0 0 9px #3c1680,inset 0 6px 14px #fff6,inset 0 -8px 16px #24104f}
.coin-face.heads::after,.coin-face.tails::after{position:absolute;inset:0;display:grid;place-items:center;font:900 clamp(28px,42cqi,96px)/1 var(--font-geist-mono,ui-monospace),monospace;letter-spacing:-.04em;pointer-events:none}
.coin-face.heads::after{content:"H";color:#7a4a08;text-shadow:0 2px 0 #ffe9a8,0 -1px 0 #5a3405}
.coin-face.tails::after{content:"T";color:#f3e8ff;text-shadow:0 2px 0 #2a0e5c,0 -1px 0 #e3c8ff}
.coin-face{container-type:inline-size}
.coin-preview .coin-face{position:relative;overflow:hidden}
.mini-coin.heads{background:radial-gradient(circle at 35% 30%,#fff3c4,#f5c451 45%,#c98a1c)!important;color:#5a3409}
.mini-coin.tails{background:radial-gradient(circle at 35% 30%,#e3c8ff,#a45cf0 45%,#6528c4)!important;color:#fff}