:root{color-scheme:dark;--bg: #0f172a;--bg-2: #0b1220;--panel: #1e293b;--panel-2: #334155;--line: #334155;--text: #e2e8f0;--muted: #94a3b8;--up: #fb923c;--down: #38bdf8;--accent: #a3e635;--success: #22c55e;--danger: #fb7185;accent-color:var(--accent);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100dvh;background:radial-gradient(130% 100% at 50% 0%,#172033 0%,var(--bg) 55%);color:var(--text);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}.app-root{min-height:100dvh;display:flex;justify-content:center}.screen{width:100%;max-width:30rem;min-height:100dvh;margin:0 auto;padding:1.1rem 1rem calc(1.2rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:.85rem}.brand{text-align:center;margin:1rem 0 .5rem}.brand h1,.handoff__name,.gameover__inner.is-won .gameover__title{font-weight:800;letter-spacing:-.03em;background:linear-gradient(90deg,var(--up),var(--accent),var(--down));-webkit-background-clip:text;background-clip:text;color:transparent}.brand h1{margin:0;font-size:clamp(2.6rem,13vw,3.6rem)}.brand__sub{margin:.15rem 0 0;color:var(--muted)}.btn{border:none;border-radius:.7rem;padding:.7rem 1.1rem;font-weight:700;color:var(--text);background:var(--panel-2);transition:transform .08s ease,filter .15s ease,opacity .15s ease}.btn:active{transform:translateY(1px)}.btn--primary{background:linear-gradient(180deg,var(--accent),#86c516);color:#14210a}.btn--primary:hover{filter:brightness(1.05)}.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--text)}.btn--big{padding:.95rem 1.2rem;font-size:1.05rem;width:100%}.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}.hint{text-align:center;color:var(--muted);font-size:.85rem;margin:0}.card-panel{background:var(--panel);border:1px solid var(--line);border-radius:1rem;padding:1.1rem;display:flex;flex-direction:column;gap:.6rem}.panel-title{margin:.3rem 0 .1rem;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.count-picker{display:flex;gap:.4rem}.count-picker__btn{flex:1;padding:.7rem 0;border-radius:.6rem;border:1px solid var(--line);background:var(--bg-2);color:var(--text);font-weight:700;font-size:1.05rem}.count-picker__btn.is-active{background:var(--accent);border-color:var(--accent);color:#14210a}.name-inputs{display:flex;flex-direction:column;gap:.5rem}.name-inputs__row{display:flex;align-items:center;gap:.6rem}.name-inputs__badge{flex:0 0 1.6rem;height:1.6rem;display:grid;place-items:center;border-radius:50%;background:var(--panel-2);color:var(--muted);font-size:.8rem;font-weight:700}.name-inputs input{flex:1;min-width:0;padding:.6rem .75rem;border-radius:.6rem;border:1px solid var(--line);background:var(--bg-2);color:var(--text);font-size:1rem}.name-inputs input:focus{outline:none;border-color:var(--accent)}.game__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.turn-badge{display:flex;align-items:baseline;gap:.4rem;min-width:0}.turn-badge__dot{align-self:center;width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);box-shadow:0 0 #a3e63599;animation:pulse 1.8s infinite}.turn-badge__name{font-weight:800;font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.turn-badge__label{color:var(--muted);font-size:.85rem}.game__stats{display:flex;gap:.7rem;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}.progress{position:relative;height:1.35rem;border-radius:.7rem;background:var(--panel);border:1px solid var(--line);overflow:hidden}.progress__bar{height:100%;background:linear-gradient(90deg,var(--up),var(--accent));transition:width .3s ease}.progress__text{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:.72rem;font-weight:600;color:var(--text);text-shadow:0 1px 2px rgba(0,0,0,.5)}.opponents{display:flex;flex-wrap:wrap;gap:.4rem}.opponents__chip{background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.2rem .65rem;font-size:.8rem;color:var(--muted)}.table{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;width:100%;min-height:0}.deck{display:flex;flex-direction:column;align-items:center;gap:.35rem}.deck__card{display:grid;place-items:center;width:3.1rem;aspect-ratio:3 / 4;border-radius:.55rem;color:var(--text);font-weight:800;font-size:1.25rem;font-variant-numeric:tabular-nums;border:1px solid var(--panel-2);background:repeating-linear-gradient(45deg,rgba(148,163,184,.09) 0 6px,transparent 6px 12px),linear-gradient(180deg,#0b1220,#131c2e);box-shadow:2px 2px 0 -1px var(--panel-2),4px 4px 0 -2px var(--panel),0 6px 14px #0006}.deck__num{animation:pop .25s ease}.deck__label{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}.deck--empty .deck__card{box-shadow:none;opacity:.45}.board{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;width:100%}.pile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;aspect-ratio:3 / 4;border-radius:.7rem;background:var(--bg-2);border:2px solid var(--panel-2);color:var(--text);transition:transform .1s ease,box-shadow .15s ease,opacity .15s ease,border-color .15s ease}.pile:disabled{cursor:default}.pile--up{border-color:color-mix(in srgb,var(--up) 45%,var(--panel-2))}.pile--down{border-color:color-mix(in srgb,var(--down) 45%,var(--panel-2))}.pile__arrow{font-size:.8rem;line-height:1}.pile--up .pile__arrow{color:var(--up)}.pile--down .pile__arrow{color:var(--down)}.pile__top{font-size:1.75rem;font-weight:800;font-variant-numeric:tabular-nums;line-height:1;animation:pop .28s ease}.pile__count{font-size:.65rem;color:var(--muted)}.pile--legal{border-color:var(--success);box-shadow:0 0 0 2px #22c55e59,0 0 18px #22c55e40;transform:translateY(-2px)}.pile--illegal{opacity:.32}.pile--trick{border-color:var(--accent);box-shadow:0 0 0 2px #a3e63566,0 0 20px #a3e6354d}.pile__trick{position:absolute;top:-.55rem;right:-.35rem;background:var(--accent);color:#14210a;font-size:.62rem;font-weight:800;padding:.08rem .35rem;border-radius:999px;box-shadow:0 2px 6px #0006}.turn-status{margin:0;text-align:center;color:var(--muted);font-size:.92rem;min-height:1.2em}.turn-status strong{color:var(--text)}.hand{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;padding-top:.2rem}.card{min-width:3rem;aspect-ratio:3 / 4;padding:.3rem .5rem;border-radius:.55rem;border:1px solid #cbd5e1;background:linear-gradient(180deg,#fff,#e9eef5);color:#0f172a;font-size:1.5rem;font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 3px 8px #00000059;transition:transform .1s ease,box-shadow .15s ease,opacity .15s ease,outline-color .1s ease}.card:hover{transform:translateY(-3px)}.card--selected{outline:3px solid var(--accent);outline-offset:1px;transform:translateY(-9px);box-shadow:0 10px 18px #00000073}.card--dead{opacity:.4}.actions{display:flex;gap:.6rem}.actions .btn{flex:1}.screen.handoff,.screen.gameover{justify-content:center;align-items:center;text-align:center}.handoff__inner,.gameover__inner{display:flex;flex-direction:column;align-items:center;gap:.7rem;width:100%}.handoff__pass{margin:0;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--muted)}.handoff__name{margin:0;font-size:clamp(2.2rem,11vw,3rem)}.handoff__hint{margin:0 0 .6rem;color:var(--muted);font-size:.9rem;max-width:22rem}.handoff .btn,.gameover__actions .btn{max-width:22rem}.gameover__emoji{font-size:3.5rem;line-height:1}.gameover__title{margin:0;font-size:clamp(2.2rem,11vw,3rem);font-weight:800}.gameover__inner.is-lost .gameover__title{color:var(--danger)}.gameover__msg{margin:0 0 .6rem;color:var(--muted);max-width:24rem}.gameover__msg strong{color:var(--text)}.gameover__actions{display:flex;flex-direction:column;gap:.5rem;width:100%;align-items:center}.gameover__actions .btn{width:100%}.back-link{align-self:flex-start;background:none;border:none;color:var(--muted);padding:.2rem 0;font-size:.85rem}.back-link:hover{color:var(--text)}.field{display:flex;flex-direction:column;gap:.35rem}.field__label{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.field input,.join-row__code{width:100%;padding:.65rem .8rem;border-radius:.6rem;border:1px solid var(--line);background:var(--bg-2);color:var(--text);font-size:1rem}.field input:focus,.join-row__code:focus{outline:none;border-color:var(--accent)}.divider{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:.8rem}.divider:before,.divider:after{content:"";flex:1;height:1px;background:var(--line)}.join-row{display:flex;gap:.5rem}.join-row__code{flex:1;min-width:0;text-align:center;text-transform:uppercase;letter-spacing:.25em;font-weight:800;font-size:1.1rem}.join-row .btn{flex:0 0 auto}.lobby__code-panel{align-items:center;text-align:center}.room-code{width:100%;padding:.5rem;border-radius:.8rem;border:1px dashed var(--line);background:var(--bg-2);color:var(--text);font-size:2.4rem;font-weight:800;letter-spacing:.3em;text-indent:.3em;font-variant-numeric:tabular-nums}.btn--sm{padding:.45rem .8rem;font-size:.85rem}.seat-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}.seat{display:flex;align-items:center;gap:.6rem;background:var(--bg-2);border-radius:.6rem;padding:.55rem .75rem}.seat__dot{width:.6rem;height:.6rem;border-radius:50%;flex:0 0 auto}.seat__dot.is-on{background:var(--success)}.seat__dot.is-off{background:var(--muted)}.seat__name{font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.seat__tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--panel-2);padding:.12rem .45rem;border-radius:999px}.seat__tag--host{background:var(--accent);color:#14210a}.waiting{color:var(--muted);text-align:center;margin:.2rem 0}.screen.center{justify-content:center;align-items:center}.joining{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--muted);text-align:center}.spinner{width:2.5rem;height:2.5rem;border:3px solid var(--panel-2);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}.error-text{color:var(--danger)}.conn-banner{position:fixed;top:0;left:0;right:0;background:var(--danger);color:#2a0a12;text-align:center;padding:.4rem;font-size:.85rem;font-weight:600;z-index:20}.toast-error{position:fixed;bottom:calc(1rem + env(safe-area-inset-bottom));left:50%;transform:translate(-50%);background:var(--panel);border:1px solid var(--danger);color:var(--text);padding:.5rem .9rem;border-radius:.6rem;font-size:.85rem;max-width:90%;box-shadow:0 8px 20px #0006;z-index:20}.turn-badge__dot.is-idle{background:var(--muted);animation:none;box-shadow:none}.opponents__chip.is-current{border-color:var(--accent);color:var(--text)}.opponents__chip.is-off{opacity:.5}.screen.gameover{position:relative;overflow:hidden}.gameover__inner{position:relative;z-index:1}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.confetti__bit{position:absolute;top:-8%;width:.55rem;height:.85rem;border-radius:2px;opacity:.9;animation:fall linear infinite}.confetti__bit--0{background:var(--up)}.confetti__bit--1{background:var(--down)}.confetti__bit--2{background:var(--accent)}.confetti__bit--3{background:#f472b6}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pop{0%{transform:scale(1.35);opacity:.35}to{transform:scale(1);opacity:1}}@keyframes fall{0%{transform:translateY(-10%) rotate(0)}to{transform:translateY(115vh) rotate(540deg)}}@keyframes pulse{0%{box-shadow:0 0 #a3e63580}70%{box-shadow:0 0 0 .5rem #a3e63500}to{box-shadow:0 0 #a3e63500}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}