/* PlayZone - colourful, animated, stylish. Dark glass UI with neon gradients. */
:root{
  --bg:#150c36; --ink:#fff; --mute:#c3b9ee; --line:rgba(255,255,255,.14); --glass:rgba(255,255,255,.09); --glass2:rgba(255,255,255,.16);
  --p1:#6d4bff; --p2:#c84bff; --p3:#ff4fa3; --y:#ffd23f;
  --grad:linear-gradient(100deg,#6d4bff 0%,#c84bff 50%,#ff4fa3 100%);
  --yellow:linear-gradient(135deg,#ffe07a,#ffa62b);
  --shadow:0 12px 30px rgba(8,2,40,.45);
  --ga:#6d4bff; --gb:#c84bff;
  --font:"Plus Jakarta Sans","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100vh;min-height:100dvh;color:var(--ink);font:500 16px/1.5 var(--font);-webkit-font-smoothing:antialiased;padding:env(safe-area-inset-top) 0 0;
  background:linear-gradient(135deg,#150c36,#2a0f5e 40%,#10265f 75%,#150c36);background-size:300% 300%;animation:bgshift 22s ease infinite}
@keyframes bgshift{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
h1,h2,h3{letter-spacing:-.02em;line-height:1.2}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--y);outline-offset:2px}
main{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:16px 16px calc(120px + env(safe-area-inset-bottom))}
.muted{color:var(--mute);font-size:15px;margin-top:4px}
.ctr{text-align:center}

/* floating colour orbs behind everything */
.bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.bg i{position:absolute;width:46vmax;height:46vmax;border-radius:50%;filter:blur(70px);opacity:.42;animation:float 18s ease-in-out infinite alternate}
.bg i:nth-child(1){background:#ff4fa3;left:-14vmax;top:-12vmax}
.bg i:nth-child(2){background:#2fd6ff;right:-16vmax;top:8vmax;animation-delay:-4s;animation-duration:23s}
.bg i:nth-child(3){background:#ffd23f;left:10vmax;bottom:-20vmax;animation-delay:-8s;opacity:.28}
.bg i:nth-child(4){background:#6d4bff;right:-10vmax;bottom:-14vmax;animation-delay:-2s;animation-duration:26s}
.bg i:nth-child(5){background:#19e39a;left:36vw;top:30vh;width:24vmax;height:24vmax;opacity:.2;animation-duration:30s}
@keyframes float{0%{transform:translate(0,0) scale(1)}100%{transform:translate(6vmax,5vmax) scale(1.18)}}
#confetti{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
#confetti i{position:absolute;top:-16px;width:10px;height:16px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg)}}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(21,12,54,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.top-in{max-width:980px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:10px 16px}
.logo{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--ink);text-decoration:none}
.logo-tile{width:40px;height:40px;border-radius:13px;background:var(--grad);background-size:200% 200%;animation:bgshift 6s linear infinite;color:#fff;display:grid;place-items:center;font-weight:800;font-size:21px;box-shadow:0 0 18px rgba(200,75,255,.7)}
.logo-txt{font-weight:800;font-size:21px;letter-spacing:-.03em;background:linear-gradient(90deg,#fff,#ffd6f6);-webkit-background-clip:text;background-clip:text;color:transparent}
.conn{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mute);font-weight:600}
.conn .dot{width:8px;height:8px;border-radius:50%;background:#ff5d73}
.conn.on .dot{background:#19e39a;box-shadow:0 0 8px #19e39a}
.chip{background:var(--yellow);border:0;border-radius:999px;padding:8px 14px;font-weight:800;font-size:14px;max-width:120px;color:#3d2a00;box-shadow:0 6px 16px rgba(255,166,43,.4)}
.chip span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iconbtn{width:40px;height:40px;border-radius:14px;border:1px solid var(--line);background:var(--glass);display:grid;place-items:center;color:var(--ink);transition:transform .1s,background .15s}
.iconbtn:hover{background:var(--glass2)}.iconbtn:active{transform:scale(.9)}
.iconbtn.off .vemoji{filter:grayscale(1);opacity:.45}
@media(max-width:420px){.conn b{display:none}}

/* buttons */
.btn{display:block;width:100%;border:0;border-radius:999px;padding:15px 20px;font-weight:800;font-size:16px;margin-top:14px;transition:transform .08s,box-shadow .15s,filter .15s}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--grad);background-size:200% 100%;color:#fff;box-shadow:0 10px 26px rgba(200,75,255,.45)}
.btn.primary:hover{filter:brightness(1.1)}
.btn.soft{background:var(--glass2);color:#fff;border:1px solid var(--line)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.back{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--mute);padding:6px 0;font-weight:700}
.back:hover{color:#fff}

/* home */
.greet{color:var(--mute);margin:6px 2px 10px}
.greet b{color:#fff;font-weight:800}
.hero{position:relative;overflow:hidden;color:#fff;border-radius:30px;padding:26px 22px;background:linear-gradient(120deg,#ff4fa3,#7a3dff,#1fb8ff,#19e39a,#ff4fa3);background-size:300% 300%;animation:bgshift 9s ease infinite;box-shadow:0 20px 44px rgba(122,61,255,.45)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 10%,rgba(255,255,255,.28),transparent 45%);pointer-events:none}
.hero-sub{font-weight:800;font-size:13px;opacity:.95;position:relative;z-index:1}
.hero h1{font-size:clamp(28px,7vw,42px);font-weight:800;margin:8px 0 10px;position:relative;z-index:1;text-shadow:0 3px 18px rgba(0,0,0,.25)}
.rainbow{background:linear-gradient(90deg,#fff6a8,#fff,#ffe0f3,#fff6a8);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bgshift 4s linear infinite}
.hero-p{opacity:.95;max-width:32em;position:relative;z-index:1}
.hero-btns{display:flex;gap:10px;margin-top:20px;position:relative;z-index:1}
.hbtn{flex:1;border-radius:999px;padding:14px 10px;font-weight:800;font-size:16px;border:0;transition:transform .1s}
.hbtn:active{transform:scale(.96)}
.hbtn.solid{background:#fff;color:#5b21d9;box-shadow:0 8px 20px rgba(0,0,0,.25)}
.hbtn.line{background:rgba(255,255,255,.18);color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.hero-watermark{position:absolute;right:10px;top:6px;font-size:86px;opacity:.22;animation:bob 4s ease-in-out infinite;pointer-events:none}
.hero-watermark.w2{right:96px;top:70px;font-size:58px;animation-delay:-1.3s}
.hero-watermark.w3{right:6px;top:104px;font-size:60px;animation-delay:-2.4s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-12px) rotate(8deg)}}
.ticker{margin:16px -16px 0;overflow:hidden;white-space:nowrap;background:var(--glass);border-block:1px solid var(--line)}
.ticker-in{display:inline-block;padding:9px 0;animation:tick 24s linear infinite}
.ticker-in span{display:inline-block;margin:0 22px;font-weight:800;font-size:14px;color:#ffe9a8}
@keyframes tick{to{transform:translateX(-50%)}}
.sec{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:800;margin:28px 0 14px}
.sec i{width:7px;height:26px;border-radius:4px;background:linear-gradient(180deg,#ffd23f,#ff4fa3)}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(min-width:720px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.gcard{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;min-height:190px;border:0;border-radius:28px;padding:18px;color:#fff;text-align:left;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.35);transition:transform .15s,box-shadow .2s;animation:pop .5s both;animation-delay:calc(var(--i,0)*90ms)}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.94)}}
.gcard::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,rgba(255,255,255,.35),transparent 55%);pointer-events:none}
.gcard:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 20px 40px rgba(0,0,0,.45)}
.gcard:active{transform:scale(.96)}
.gemoji{position:absolute;top:14px;left:16px;font-size:56px;line-height:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.3));animation:bob 5s ease-in-out infinite}
.gcard h3{font-size:21px;font-weight:800;position:relative}
.gcard .meta{font-size:13px;font-weight:700;opacity:.92;position:relative}
.gcard .play{margin-top:6px;background:rgba(255,255,255,.26);border-radius:999px;padding:5px 14px;font-size:13px;font-weight:800;position:relative}
.g-blue{background:linear-gradient(145deg,#5b6dff,#18b8ff);--ga:#5b6dff;--gb:#18b8ff}
.g-orange{background:linear-gradient(145deg,#ffb11a,#ff3f6c);--ga:#ffb11a;--gb:#ff3f6c}
.g-purple{background:linear-gradient(145deg,#a54dff,#ff3fa4);--ga:#a54dff;--gb:#ff3fa4}
.g-teal{background:linear-gradient(145deg,#0fc5b0,#7be33d);--ga:#0fc5b0;--gb:#7be33d}
.ad{margin-top:24px;background:var(--glass);border-radius:24px;padding:18px;text-align:center;color:var(--mute);border:1px dashed rgba(255,255,255,.3)}
.pill{display:inline-block;background:rgba(255,210,63,.2);color:#ffd23f;font-size:12px;font-weight:800;border-radius:999px;padding:4px 12px;margin-bottom:6px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media(min-width:720px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.tcard{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:26px;padding:18px;text-align:center;backdrop-filter:blur(8px)}
.ticon{display:grid;place-items:center;width:62px;height:62px;border-radius:20px;margin:0 auto 10px}
.t-pink{background:rgba(255,79,163,.22);color:#ff8cc6}.t-blue{background:rgba(24,184,255,.22);color:#7fd8ff}.t-green{background:rgba(25,227,154,.22);color:#7ef2c4}
.tcard h3{font-size:17px;font-weight:800}
.tcard p{font-size:14px;color:var(--mute);margin-top:2px}
.tag18{position:absolute;top:14px;right:14px;font-style:normal;font-weight:800;font-size:12px;background:#ffd23f;color:#3d2a00;border-radius:999px;padding:3px 9px}
footer{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:34px;font-size:14px;color:var(--mute)}
footer a{color:var(--mute);text-decoration:none}

/* cards, lobby */
.card{background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:26px;padding:20px;margin:14px 0;box-shadow:var(--shadow)}
.card h2{font-size:20px;font-weight:800}
.card.flat{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
@media(min-width:760px){#view-lobby{max-width:560px}}
.lobby-head{display:flex;align-items:center;gap:16px;border-radius:28px;padding:18px;margin:10px 0 0;color:#fff;background:linear-gradient(145deg,var(--ga),var(--gb));box-shadow:0 16px 34px rgba(0,0,0,.4)}
.lobby-head.g-blue{background:linear-gradient(145deg,#5b6dff,#18b8ff)}.lobby-head.g-orange{background:linear-gradient(145deg,#ffb11a,#ff3f6c)}.lobby-head.g-purple{background:linear-gradient(145deg,#a54dff,#ff3fa4)}.lobby-head.g-teal{background:linear-gradient(145deg,#0fc5b0,#7be33d)}
.ltile{display:grid;place-items:center;width:68px;height:68px;border-radius:22px;background:rgba(255,255,255,.25);flex:none;font-size:38px;animation:bob 4s ease-in-out infinite}
.lobby-head h1{font-size:27px;font-weight:800}
.lobby-head p{opacity:.95;font-weight:700;font-size:14px}
.howto{background:var(--glass);border:1px solid var(--line);border-radius:18px;padding:14px 16px;margin:14px 0;color:#e9e3ff;font-size:15px;border-left:5px solid var(--y)}
.or{display:flex;align-items:center;gap:10px;margin:18px 0 4px;color:var(--mute);font-size:13px;font-weight:600}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.row{display:flex;gap:10px;align-items:stretch;margin-top:10px}
.row .btn{width:auto;margin:0;padding:14px 26px}
.codeinput{flex:1;min-width:0;background:rgba(0,0,0,.25);border:1.5px solid var(--line);border-radius:18px;padding:12px;font-size:20px;font-weight:800;letter-spacing:.3em;text-transform:uppercase;text-align:center;color:#fff}
.codeinput::placeholder{color:rgba(255,255,255,.3)}
.codeinput:focus{border-color:var(--y);outline:none}
.searching{display:flex;align-items:center;gap:12px;margin:16px 0 4px}
.spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--y);animation:sp 1s linear infinite;flex:none}
@keyframes sp{to{transform:rotate(360deg)}}
.offer{background:rgba(0,0,0,.22);border-radius:18px;padding:14px;margin-top:10px}

/* room */
.room-bar{display:grid;grid-template-columns:1fr auto;grid-template-areas:"back code" "title title";gap:2px 12px;align-items:center}
.room-bar .back{grid-area:back;justify-self:start}
.room-bar h1{grid-area:title;font-size:27px;font-weight:800;background:linear-gradient(90deg,var(--ga),var(--gb),#fff);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:bgshift 6s linear infinite}
.codechip{grid-area:code;display:flex;align-items:center;gap:8px;background:var(--glass2);border:1px solid var(--line);border-radius:14px;padding:9px 14px;color:#fff}
.codechip span{font-weight:800;letter-spacing:.2em}
.notice{background:rgba(255,210,63,.18);border:1px solid rgba(255,210,63,.4);border-radius:14px;padding:12px 14px;margin:12px 0;font-size:14px;font-weight:600;color:#ffe9a8}
.room-grid{display:grid;gap:16px;margin-top:12px}
@media(min-width:800px){.room-grid{grid-template-columns:minmax(0,1fr) 340px;align-items:start}.room-bar{grid-template-columns:auto 1fr auto;grid-template-areas:"back title code"}.room-bar h1{text-align:center}}
.side-col{display:flex;flex-direction:column}
.stage-col{min-width:0}
.wait{text-align:center}
.bigcode{font-size:42px;font-weight:800;letter-spacing:.25em;margin:14px 0 4px;padding-left:.25em;background:linear-gradient(90deg,#ffd23f,#ff4fa3,#6dd5ff);-webkit-background-clip:text;background-clip:text;color:transparent}

/* seats */
.seats{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.seat{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--glass);border:2px solid var(--line);border-radius:20px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}
.seat.turn{border-color:var(--y);box-shadow:0 0 0 3px rgba(255,210,63,.18),0 0 24px rgba(255,210,63,.3)}
.mark{flex:none;width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.16);display:grid;place-items:center;font-weight:800;font-size:20px}
.mark.gm{font-size:22px}
.mark.x{color:#8fa0ff}.mark.o{color:#ff8cc0}
.seat .who{display:flex;flex-direction:column;margin-right:auto;min-width:0}
.seat .nm{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seat .sub{font-size:12px;color:var(--mute);font-weight:600}
.score-n{font-weight:800;font-size:24px;min-width:26px;text-align:right}
.tag{font-size:11px;font-weight:800;border-radius:999px;padding:3px 9px;background:rgba(255,255,255,.18);color:#fff}
.tag.bot{background:rgba(255,210,63,.25);color:#ffe28a}.tag.off{background:rgba(255,93,115,.3);color:#ffb3be}.tag.mic{background:rgba(25,227,154,.25);color:#7ef2c4}
.ctl{flex-basis:100%;display:flex;gap:10px;align-items:center;padding-top:10px;border-top:1px solid var(--line)}
.mini{background:var(--glass2);border:0;color:#fff;border-radius:999px;padding:6px 14px;font-weight:700;font-size:13px}
input.vol{flex:1;min-width:0;accent-color:var(--p2)}

/* game stage */
.status{text-align:center;font-weight:800;font-size:17px;border-radius:20px;padding:13px 14px;margin-bottom:14px;background:var(--glass);border:1px solid var(--line);color:#e9e3ff}
.status.mine{background:var(--grad);color:#fff;border-color:transparent;animation:glow 1.6s ease-in-out infinite alternate}
@keyframes glow{from{box-shadow:0 0 0 rgba(200,75,255,0)}to{box-shadow:0 0 26px rgba(200,75,255,.7)}}
.status.win{background:linear-gradient(100deg,#12b886,#7be33d);color:#fff;border-color:transparent}
.status.lose{background:rgba(255,93,115,.25);color:#ffc2cb}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:380px;margin:0 auto;padding:14px;background:var(--glass);border:1px solid var(--line);border-radius:28px}
.cell{aspect-ratio:1;border:0;border-radius:20px;background:rgba(255,255,255,.12);font-size:clamp(40px,12vw,62px);font-weight:800;line-height:1;transition:background .12s,transform .08s;color:#fff}
.cell:not(:disabled):hover{background:rgba(255,255,255,.24)}
.cell:not(:disabled):active{transform:scale(.93)}
.cell:disabled{cursor:default}
.cell.x{color:#8fa0ff;text-shadow:0 0 14px rgba(143,160,255,.8)}.cell.o{color:#ff8cc0;text-shadow:0 0 14px rgba(255,140,192,.8)}
.cell.win{background:var(--yellow);color:#3d2a00;text-shadow:none}
.stage-col .btn{max-width:380px;margin:18px auto 0}

/* ---- Ludo */
.ludo-wrap{max-width:540px;margin:0 auto;border-radius:26px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.12);background:#fff}
.ludo-svg{display:block;width:100%;height:auto;background:#fff;touch-action:manipulation}
.tok{transition:transform .34s cubic-bezier(.3,.85,.3,1)}
.tk{transform-box:fill-box;transform-origin:center;transition:transform .2s}
.tok.can .tb{animation:ring .7s ease-in-out infinite alternate;stroke:#111}
@keyframes ring{from{stroke-width:.07}to{stroke-width:.2;stroke:#ffd23f}}
.dice-row{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px auto 0}
.dice{--dc:#ff4d6d;width:76px;height:76px;border-radius:20px;border:4px solid var(--dc);background:#fff;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:10px;gap:3px;box-shadow:0 10px 22px rgba(0,0,0,.4);transition:transform .1s}
.dice .pip{border-radius:50%;background:transparent;align-self:center;justify-self:center;width:15px;height:15px}
.dice .pip.on{background:#1a1030;box-shadow:inset -2px -2px 3px rgba(255,255,255,.3)}
.dice.q .pip:nth-child(5){background:#ddd}
.dice.active{animation:dicePulse .8s ease-in-out infinite alternate;cursor:pointer}
@keyframes dicePulse{from{transform:scale(1);box-shadow:0 0 0 rgba(255,210,63,0)}to{transform:scale(1.1);box-shadow:0 0 30px var(--dc)}}
.dice.shake{animation:shake .6s}
@keyframes shake{0%,100%{transform:rotate(0)}15%{transform:rotate(-24deg) scale(1.08)}35%{transform:rotate(22deg)}55%{transform:rotate(-16deg) scale(1.08)}75%{transform:rotate(12deg)}}
.dice-lbl{font-weight:800;font-size:15px;color:#e9e3ff}

/* ---- Call Break */
.cb-table{position:relative;max-width:560px;margin:0 auto;aspect-ratio:1/.86;border-radius:32px;background:radial-gradient(circle at 50% 45%,#1f9d62,#0d5c3a 70%);box-shadow:inset 0 0 0 6px #6b3c14,inset 0 0 40px rgba(0,0,0,.5),0 16px 34px rgba(0,0,0,.45)}
.cb-info{position:absolute;left:14px;top:10px;font-size:12px;font-weight:800;color:#d9ffe9;display:flex;gap:8px;align-items:center}
.cb-info span{background:rgba(0,0,0,.3);border-radius:999px;padding:2px 9px}
.cb-opp{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;padding:6px 10px;border-radius:16px;background:rgba(0,0,0,.28);border:2px solid transparent;color:#fff;max-width:36%}
.cb-opp b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cb-opp small{font-size:11px;opacity:.9;font-weight:700}
.cb-opp.turn,.cb-me.turn{border-color:var(--y);box-shadow:0 0 18px rgba(255,210,63,.6)}
.cb-opp.pos-2{top:26px;left:50%;transform:translateX(-50%)}
.cb-opp.pos-1{left:8px;top:50%;transform:translateY(-50%)}
.cb-opp.pos-3{right:8px;top:50%;transform:translateY(-50%)}
.backs{display:flex;height:26px;margin-top:2px}
.backs i{width:14px;height:22px;border-radius:4px;background:repeating-linear-gradient(45deg,#6d4bff,#6d4bff 3px,#c84bff 3px,#c84bff 6px);border:1px solid #fff;margin-left:-7px}
.backs i:first-child{margin-left:0}
.backs u{font-size:11px;text-decoration:none;margin-left:4px;align-self:center}
.cb-mid{position:absolute;inset:0;pointer-events:none}
.cb-mid .slot{position:absolute}
.cb-mid .slot.pos-0{left:50%;bottom:16%;transform:translateX(-50%)}
.cb-mid .slot.pos-2{left:50%;top:27%;transform:translateX(-50%)}
.cb-mid .slot.pos-1{left:26%;top:50%;transform:translateY(-50%)}
.cb-mid .slot.pos-3{right:26%;top:50%;transform:translateY(-50%)}
.card-c{position:relative;flex:none;width:54px;height:78px;border-radius:9px;border:1px solid #cfc8e6;background:#fff;display:block;padding:0;box-shadow:0 4px 10px rgba(0,0,0,.35);transition:transform .12s,box-shadow .12s;animation:deal .3s both}
@keyframes deal{from{opacity:0;transform:translateY(-14px) scale(.9)}}
.card-c b{position:absolute;left:6px;top:4px;font-size:17px;font-weight:800;line-height:1}
.card-c span{position:absolute;left:6px;top:22px;font-size:15px;line-height:1}
.card-c em{position:absolute;right:6px;bottom:2px;font-style:normal;font-size:28px;line-height:1}
.card-c.red{color:#e11d48}.card-c.blk{color:#17102e}
.card-c.sm{width:46px;height:66px}
.card-c.win{box-shadow:0 0 0 3px var(--y),0 0 22px var(--y)}
.card-c.dim{opacity:.4;filter:grayscale(.6)}
.hand .card-c:not(:disabled):hover{transform:translateY(-10px)}
.hand .card-c:not(:disabled){box-shadow:0 6px 14px rgba(0,0,0,.4),0 0 0 2px rgba(255,210,63,.8)}
.card-c:disabled{cursor:default}
.cb-me{display:flex;gap:10px;align-items:center;justify-content:center;margin:12px auto 0;padding:6px 14px;border-radius:999px;background:var(--glass);border:2px solid transparent;width:max-content;max-width:100%}
.cb-me small{color:var(--mute);font-weight:700}
.hand{display:flex;gap:0;justify-content:center;flex-wrap:wrap;margin:14px auto 0;max-width:560px;row-gap:8px}
.hand .card-c{margin-left:-14px}
.hand .card-c:first-child{margin-left:0}
@media(min-width:520px){.hand .card-c{margin-left:-8px}}
.bids{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;max-width:420px;margin:8px auto 0}
.bidbtn{border:0;border-radius:14px;padding:12px 0;font-weight:800;font-size:17px;background:var(--grad);color:#fff;box-shadow:0 6px 14px rgba(200,75,255,.4)}
.bidbtn:active{transform:scale(.9)}
.cb-score{width:100%;max-width:560px;margin:16px auto 0;border-collapse:collapse;background:var(--glass);border-radius:18px;overflow:hidden;font-size:14px}
.cb-score th,.cb-score td{padding:9px 8px;text-align:center;border-bottom:1px solid var(--line)}
.cb-score th{color:var(--mute);font-size:12px}
.cb-score td:first-child{text-align:left;font-weight:700}
.cb-score tr.me{background:rgba(255,210,63,.14)}
.cb-score .pos{color:#7ef2c4;font-weight:800}.cb-score .neg{color:#ff9aa9;font-weight:800}

/* ---- Carrom */
.carrom-wrap{max-width:540px;margin:0 auto;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 0 6px rgba(255,255,255,.12);line-height:0}
.carrom-cv{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair}
.slide-row{display:flex;align-items:center;gap:10px;max-width:540px;margin:14px auto 0;font-weight:800;color:var(--y)}
.xslider{flex:1;height:34px;accent-color:var(--y)}
.hint{color:var(--mute);font-size:13px;margin-top:12px}

/* tabs, chat, sounds */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:rgba(0,0,0,.28);border-radius:999px;padding:5px;margin-bottom:12px}
.tab{position:relative;background:transparent;border:0;border-radius:999px;padding:10px 4px;font-weight:800;font-size:14px;color:var(--mute)}
.tab.on{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(200,75,255,.45)}
.card.flat{border-radius:26px;margin-top:0}
.live{position:absolute;top:8px;right:10px;width:9px;height:9px;border-radius:50%;background:#19e39a;box-shadow:0 0 8px #19e39a}
.live.pulse{background:#ff4fa3;box-shadow:0 0 8px #ff4fa3;animation:glow 1s infinite alternate}
.chatlog{height:210px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.msg{align-self:flex-start;max-width:86%;background:var(--glass2);border-radius:16px 16px 16px 4px;padding:7px 12px;font-size:14px;word-break:break-word}
.msg b{display:block;font-size:11px;color:#ffd6f6;margin-bottom:1px}
.msg.me{align-self:flex-end;background:linear-gradient(135deg,#6d4bff,#c84bff);border-radius:16px 16px 4px 16px}
.msg.me b{color:#ffe9a8}
.quick{display:flex;gap:6px;overflow-x:auto;padding:10px 0 4px;scrollbar-width:none}
.qchip{flex:none;border:1px solid var(--line);background:var(--glass);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:#fff}
.chatform{display:flex;gap:8px;margin-top:8px}
.chatform input{flex:1;min-width:0;background:rgba(0,0,0,.25);border:1.5px solid var(--line);border-radius:999px;padding:11px 16px;color:#fff}
.chatform input:focus{border-color:var(--y);outline:none}
.chatform .btn{width:auto;margin:0;padding:11px 18px}
.soundboard{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:340px;overflow-y:auto}
.snd{background:var(--glass2);border:1px solid var(--line);border-radius:16px;padding:9px 2px;font-size:12px;font-weight:700;color:#fff;transition:transform .1s,background .15s}
.snd:hover{background:rgba(255,255,255,.26)}
.snd:active{transform:scale(.92)}
.snd span{display:block;font-size:26px;line-height:1.3}

/* bottom nav */
.nav{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom));z-index:25;width:min(calc(100% - 24px),520px);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:rgba(30,16,80,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:28px;padding:8px;box-shadow:0 12px 32px rgba(0,0,0,.5);border:1px solid var(--line)}
.nav-i{display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;border:0;border-radius:20px;padding:8px 4px;font-size:12px;font-weight:700;color:var(--mute)}
.nav-i.on{background:var(--grad);color:#fff;box-shadow:0 4px 14px rgba(200,75,255,.5)}

/* dialog + toast */
dialog{border:1px solid var(--line);border-radius:26px;background:#231257;color:#fff;padding:22px;width:min(92vw,380px);box-shadow:0 24px 60px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(10,4,34,.7);backdrop-filter:blur(4px)}
dialog h2{font-size:20px;font-weight:800}
dialog .field{width:100%;margin-top:14px;background:rgba(0,0,0,.3);border:1.5px solid var(--line);border-radius:16px;padding:13px;font-size:17px;font-weight:600;color:#fff}
dialog .field:focus{border-color:var(--y);outline:none}
dialog label.opt{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);font-weight:700}
dialog label.opt input{accent-color:var(--p2);width:18px;height:18px}
dialog .acts{display:flex;gap:10px;margin-top:18px}
dialog .acts .btn{margin:0;padding:13px}
.toast{position:fixed;left:50%;bottom:calc(104px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#fff;color:#1a1030;padding:12px 18px;border-radius:16px;z-index:40;max-width:90%;font-size:15px;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.4)}
body.in-room .toast{bottom:calc(24px + env(safe-area-inset-bottom))}
body.in-room main{padding-bottom:40px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* mobile polish: no 300ms tap delay, no accidental text selection / pull-to-refresh while playing */
button,a,input,select,label{touch-action:manipulation}
body.in-room{overscroll-behavior-y:contain}
.gcard,.cell,.snd,.qchip,.btn{-webkit-user-select:none;user-select:none}