:root{color-scheme:light dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;--bg: light-dark(#d9e4ef, #0b1118);--fg: light-dark(#1a232e, #e8edf2);--panel: light-dark(#f9fbff, #18212b);--border: light-dark(#9aa9ba, #465667);--accent: light-dark(#2563eb, #3b82f6);--num: light-dark(#1457d9, #7dd3fc);--mod: light-dark(#d97706, #fbbf24);--act: light-dark(#d81b60, #fb7185);--ink: light-dark(#101a73, #07112b);--card-paper: #fff7bd;--card-shadow: light-dark(rgba(16, 26, 115, .42), rgba(0, 0, 0, .72))}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 18% 12%,light-dark(rgba(20,87,217,.18),rgba(125,211,252,.08)),transparent 22rem),linear-gradient(145deg,var(--bg),light-dark(#c7d5e4,#111923));color:var(--fg)}button{font:inherit;padding:.6rem 1rem;border-radius:.5rem;border:1px solid var(--border);background:var(--panel);color:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}input{font:inherit;padding:.6rem 1rem;border-radius:.5rem;border:1px solid var(--border);background:var(--panel);color:inherit}.home,.lobby{max-width:26rem;margin:0 auto;padding:3rem 1.5rem;text-align:center}.home h1,.lobby h1{font-size:3rem;margin:0 0 .25rem}.home .tagline{opacity:.75;margin-bottom:2rem}.home form{display:grid;gap:.75rem}.home .join-row{display:grid;grid-template-columns:1fr auto;gap:.75rem}.home button,.lobby .start{font-weight:600;background:var(--accent);border-color:transparent;color:#fff}.home .resume{width:100%;margin-bottom:1.25rem;background:light-dark(#059669,#10b981)}.lobby-code{font-size:3rem;font-weight:800;letter-spacing:.35em;padding:.5rem 0 .5rem .35em;margin:.5rem 0;background:var(--panel);border:2px dashed var(--border);border-radius:.75rem}.lobby-code.small{font-size:.9rem;font-weight:700;letter-spacing:.2em;padding:.2rem .4rem .2rem .6rem;margin:0;border-width:1px}.copy-link{margin-bottom:1rem}.invite-qr{display:grid;justify-items:center;gap:.45rem;width:fit-content;margin:0 auto 1.1rem;padding:.75rem;background:#fffbea;border:3px solid var(--ink);border-radius:.75rem;box-shadow:0 .24rem 0 light-dark(rgba(16,26,115,.4),rgba(0,0,0,.62)),0 .5rem 1rem light-dark(rgba(16,26,115,.2),rgba(0,0,0,.38));color:var(--ink)}.invite-qr img,.qr-loading{width:9.5rem;aspect-ratio:1;display:block;border-radius:.25rem}.qr-loading{background:linear-gradient(90deg,#101a731f,#101a733d,#101a731f);animation:pulse 1s infinite}.invite-qr span{font-size:.82rem;font-weight:900;text-transform:uppercase}.roster{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.4rem;text-align:left}.roster li{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--panel);border:1px solid var(--border);border-radius:.5rem}.lobby .start{width:100%;margin:.5rem 0}.lobby .leave,.waiting{opacity:.7}.dot{width:.6rem;height:.6rem;border-radius:50%;display:inline-block;flex:none}.dot.on{background:#22c55e}.dot.off{background:#9ca3af}.chip{font-size:.7rem;font-weight:700;text-transform:uppercase;padding:.1rem .45rem;border-radius:999px;background:var(--border)}.chip.you{background:var(--accent);color:#fff}.chip.chase7{background:#f59e0b;color:#1a1a1a}.chip.status-busted{background:var(--act);color:#fff}.chip.status-frozen{background:#38bdf8;color:#082f49}.chip.status-stayed{background:#22c55e;color:#052e16}.game-board{display:grid;grid-template-areas:"head head" "players log" "controls log";grid-template-columns:1fr 20rem;grid-template-rows:auto 1fr auto;gap:.75rem;height:100vh;padding:.75rem}.game-head{grid-area:head;display:flex;align-items:center;gap:1rem;padding:.5rem .75rem;background:var(--panel);border:1px solid var(--border);border-radius:.6rem;font-size:.9rem;flex-wrap:wrap}.game-head .brand{font-weight:800}.game-head .spacer{flex:1}.game-head .icon{padding:.25rem .5rem}.players{grid-area:players;overflow-y:auto;display:grid;gap:.6rem;align-content:start}.player{padding:.6rem .75rem;background:light-dark(#ffffff,#202c38);border:2px solid var(--border);border-radius:.75rem;box-shadow:0 .25rem .7rem light-dark(rgba(35,54,84,.12),rgba(0,0,0,.32));transition:border-color .2s}.player.active-turn{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}.player.is-busted{opacity:.75}.player-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;flex-wrap:wrap}.player-head .total{margin-left:auto;font-weight:700}.hand{display:grid;gap:.45rem}.card-row{display:flex;gap:.58rem;flex-wrap:wrap;min-height:5.65rem}.card{--card-main: var(--num);--card-side: #14b8a6;--card-warm: #ffe04f;--card-hot: #f43f5e;position:relative;isolation:isolate;width:4.05rem;height:5.45rem;border-radius:.5rem;display:grid;place-items:center;overflow:hidden;font-weight:900;font-size:1.05rem;line-height:1;color:var(--ink);border:3px solid var(--ink);background:linear-gradient(135deg,transparent 0 .42rem,var(--ink) 0 .56rem,transparent 0) top left / 1.25rem 1.25rem no-repeat,linear-gradient(225deg,transparent 0 .42rem,var(--ink) 0 .56rem,transparent 0) top right / 1.25rem 1.25rem no-repeat,linear-gradient(45deg,transparent 0 .42rem,var(--ink) 0 .56rem,transparent 0) bottom left / 1.25rem 1.25rem no-repeat,linear-gradient(315deg,transparent 0 .42rem,var(--ink) 0 .56rem,transparent 0) bottom right / 1.25rem 1.25rem no-repeat,radial-gradient(circle at 25% 20%,rgba(255,255,255,.68),transparent .34rem),linear-gradient(150deg,#fff9cf 0,#fff9cf 54%,color-mix(in srgb,var(--card-main) 32%,white) 55%);animation:flip-in .35s ease-out;box-shadow:0 .28rem 0 var(--card-shadow),0 .45rem .9rem light-dark(rgba(16,26,115,.24),rgba(0,0,0,.58));-webkit-user-select:none;user-select:none;text-transform:uppercase}.card:before{content:"";position:absolute;top:.3rem;right:.3rem;bottom:.3rem;left:.3rem;z-index:-1;border:2.5px solid color-mix(in srgb,var(--card-main) 82%,var(--ink));border-radius:.34rem;background:linear-gradient(110deg,transparent 0 35%,var(--card-warm) 36% 45%,transparent 46%),linear-gradient(68deg,transparent 0 52%,var(--card-hot) 53% 61%,transparent 62%),repeating-linear-gradient(-22deg,color-mix(in srgb,var(--card-side) 28%,transparent) 0 .14rem,transparent .14rem .36rem)}.card:after{content:"";position:absolute;top:.68rem;right:.52rem;bottom:.68rem;left:.52rem;z-index:-1;border-radius:999px;border:2.5px solid var(--ink);background:#fffbea}@keyframes flip-in{0%{transform:rotateY(90deg) scale(.8);opacity:0}to{transform:rotateY(0) scale(1);opacity:1}}.card.num{--card-main: var(--num);--card-side: #14b8a6}.card.mod{--card-main: var(--mod);--card-side: #f97316;--card-paper: #ffbd31;--card-warm: #fff176;--card-hot: #ef4444}.card.act{--card-main: var(--act);--card-side: #22c1c3;--card-paper: #fdf6cf;--card-warm: #e6ff3d;--card-hot: #ef4444;text-align:center}.card[data-kind=Freeze]{--card-main: #06a6d7;--card-side: #67e8f9;--card-hot: #2563eb}.card[data-kind=ChaseThree]{--card-main: #facc15;--card-side: #06b6d4;--card-hot: #ef4444}.card[data-kind=SecondChance]{--card-main: #ef4444;--card-side: #f9a8d4;--card-hot: #2563eb}.card-center{position:relative;z-index:1;display:grid;place-items:center;max-width:90%;min-width:2.5rem;min-height:2.5rem;padding:.12rem;color:var(--card-main);font-size:3.05rem;font-weight:950;letter-spacing:0;text-align:center;text-shadow:-.09rem -.09rem 0 var(--ink),.09rem -.09rem 0 var(--ink),-.09rem .09rem 0 var(--ink),.09rem .09rem 0 var(--ink),.16rem .16rem 0 var(--card-warm)}.card.num[data-value="10"] .card-center,.card.num[data-value="11"] .card-center,.card.num[data-value="12"] .card-center{font-size:2.58rem;transform:scaleX(.9)}.card.mod .card-center{color:#fffbe6;font-size:1.88rem;text-shadow:-.085rem -.085rem 0 var(--ink),.085rem -.085rem 0 var(--ink),-.085rem .085rem 0 var(--ink),.085rem .085rem 0 var(--ink)}.card.act .card-center{min-width:2.95rem;color:#fff;font-size:.68rem;line-height:.92;overflow-wrap:anywhere;text-shadow:-.055rem -.055rem 0 var(--ink),.055rem -.055rem 0 var(--ink),-.055rem .055rem 0 var(--ink),.055rem .055rem 0 var(--ink),0 0 .18rem var(--ink)}.card-corner{position:absolute;z-index:2;left:.4rem;max-width:1.48rem;color:var(--ink);font-size:.5rem;font-weight:950;line-height:.9;text-align:center}.card-corner.top{top:.4rem}.card-corner.bottom{right:.4rem;bottom:.4rem;left:auto;transform:rotate(180deg)}.card.empty{border:2px dashed var(--border);background:transparent;animation:none;box-shadow:none}.card.empty:before,.card.empty:after{content:none}.hand.busted .card-row{animation:bust-shake .5s}.hand.busted .card{filter:grayscale(.8)}@keyframes bust-shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-5px)}40%,80%{transform:translate(5px)}}.controls{grid-area:controls;display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;background:var(--panel);border:1px solid var(--border);border-radius:.75rem;min-height:3.6rem}.controls .hit,.controls .stay{font-size:1.1rem;font-weight:800;padding:.6rem 2rem;color:#fff;border:none}.controls .hit{background:var(--act)}.controls .stay{background:light-dark(#059669,#10b981)}.countdown{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;opacity:.8}.countdown.urgent{color:var(--act);animation:pulse 1s infinite}@keyframes pulse{50%{opacity:.4}}.log-panel{grid-area:log;display:grid;grid-template-rows:1fr auto;gap:.5rem;background:var(--panel);border:1px solid var(--border);border-radius:.75rem;padding:.6rem;min-height:0}.log{overflow-y:auto;font-size:.82rem;display:flex;flex-direction:column;gap:.15rem}.log-line.marker{font-weight:700;margin:.25rem 0}.log-line.chat-line{color:var(--accent)}.log-panel input{width:100%}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:grid;place-items:center;z-index:10}.target-modal{background:var(--panel);border:1px solid var(--border);border-radius:1rem;padding:1.5rem;max-width:22rem;text-align:center}.target-modal .targets{display:grid;gap:.5rem}.target-modal .targets button{font-weight:700}.toast{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);padding:.6rem 1.2rem;border-radius:.6rem;color:#fff;z-index:20;animation:flip-in .2s}.toast.error{background:var(--act)}.toast.reconnect{background:#b45309}.spectating,.controls .waiting{opacity:.7;margin:0}@media(max-width:720px){.game-board{grid-template-areas:"head" "players" "controls" "log";grid-template-columns:1fr;grid-template-rows:auto 1fr auto 11rem;height:100dvh;padding:.5rem}.card{width:3.2rem;height:4.3rem;font-size:.95rem}.card-center{font-size:2.24rem}.card.num[data-value="10"] .card-center,.card.num[data-value="11"] .card-center,.card.num[data-value="12"] .card-center{font-size:1.9rem}.card.mod .card-center{font-size:1.38rem}.card.act .card-center{font-size:.5rem}.game-head{gap:.5rem;font-size:.8rem}}
