:root{--bg:#0f1221;--card:#1b1f36;--fg:#e8e9f3;--muted:#9aa0c0;--accent:#6c8cff;--error:#ff6b6b;font-family:system-ui,sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{background:var(--bg);color:var(--fg);-webkit-tap-highlight-color:transparent;margin:0;overflow-x:hidden}.screen{max-width:960px;margin:0 auto;padding:1.5rem}h1{font-size:1.5rem}h2{margin:.5rem 0;font-size:1.1rem}.row{align-items:center;gap:.5rem;display:flex}.row.between{justify-content:space-between}.columns{grid-template-columns:1fr 1fr;align-items:start;gap:1rem;display:grid}.card{background:var(--card);border-radius:10px;margin-bottom:1rem;padding:1rem}label{color:var(--muted);margin:.5rem 0;font-size:.9rem;display:block}input,select{width:100%;color:var(--fg);background:#11142a;border:1px solid #313761;border-radius:6px;margin-top:.25rem;padding:.5rem;font-size:16px;display:block}button{cursor:pointer;color:var(--fg);background:#232845;border:1px solid #313761;border-radius:6px;padding:.5rem .9rem}button:hover{border-color:var(--accent)}button.active,button.primary{background:var(--accent);color:#0b0d1a;border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}button.link{color:var(--accent);background:0 0;border:none;padding:0;text-decoration:underline}.tabs{gap:.5rem;margin:1rem 0;display:flex}.rooms,.friends ul,.waiting ul{margin:.5rem 0;padding:0;list-style:none}.rooms li,.friends li,.waiting li{border-bottom:1px solid #262b4d;padding:.4rem 0}.error{color:var(--error);cursor:pointer}.notice{color:var(--accent,#2e7d32);cursor:pointer;font-weight:600}.lang-toggle{gap:.25rem;display:inline-flex}.face,.pile-count,.timer,.equation,.opponent .counts,.invite{direction:ltr;unicode-bidi:isolate}[dir=rtl] .equation{text-align:right}.turnbar{margin:.5rem 0}.turn{color:var(--muted);font-weight:600}.turn.you{color:var(--accent)}.timer{font-variant-numeric:tabular-nums;color:var(--muted)}.grace{color:var(--error);font-weight:600}.opponents{flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;display:flex}.opponent{background:var(--card);border:1px solid #262b4d;border-radius:8px;min-width:9rem;padding:.5rem .75rem}.opponent.active{border-color:var(--accent)}.opponent .name{font-weight:600;display:block}.counts{color:var(--muted);font-size:.85rem}.board{flex-wrap:wrap;gap:1rem;margin:1rem 0}.pile{background:var(--card);flex-direction:column;align-items:center;gap:.4rem;min-width:5.5rem;min-height:6rem;padding:.75rem;display:flex}.pile-label{color:var(--muted);font-size:.85rem}.pile-count{font-size:1.4rem;font-weight:700}.pile .pcard{pointer-events:none}.pcard{background:#11142a;border:1px solid #313761;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;width:3.2rem;height:4.4rem;padding:0;font-size:1.5rem;font-weight:700;display:inline-flex}.pcard.num{color:#cfe0ff;background:#16243f;border-color:#2f4a7a}.pcard.op{color:#c6f0cf;background:#1c3326;border-color:#3a6b45}.pcard.joker{color:#f1d27a;border-color:#d4af37}.pcard.selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.pcard:disabled{opacity:1}.pcard .sub{color:var(--muted);font-size:.7rem;font-weight:500}.myhand{margin-top:1rem}.hand{flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1rem;display:flex}.hand-card{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:8px;transition:transform .12s,box-shadow .12s}.hand-card.discardable{cursor:pointer}.hand-card.dragging{cursor:grabbing;z-index:5;position:relative;transform:translateY(-14px)scale(1.08);box-shadow:0 12px 20px #00000080}.hand-card.dragging .pcard{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.hand-card .pcard{pointer-events:none}.hand-card.drawn .pcard{background:#4a2f12;border-color:#f0a020;box-shadow:0 0 0 2px #f0a020}.hint{color:var(--accent)}.hint.subtle{color:var(--muted);margin:.25rem 0;font-size:.8rem}.overlay{z-index:10;background:#080a16bf;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.panel{background:var(--bg);border:1px solid #313761;border-radius:12px;width:100%;max-width:720px;max-height:90vh;padding:1.25rem;overflow:auto}.panel.over{text-align:center;max-width:360px}.slots,.pool{flex-wrap:wrap;gap:.4rem;min-height:4.6rem;margin:.25rem 0 .75rem;display:flex}.slot{justify-content:center;align-items:center;display:flex}.slot .empty{width:3.2rem;height:4.4rem;color:var(--muted);border:1px dashed #3a416e;border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.slots.chain{align-items:center}.slot .empty.op{width:1.8rem}.pool{border-top:1px solid #262b4d;padding-top:.5rem}.slot.drop-over{outline:2px solid var(--accent);border-radius:8px}.slot.drop-over .empty{border-color:var(--accent);color:var(--accent);border-style:solid}.jokers .row{margin:.4rem 0}.equation{font-variant-numeric:tabular-nums;font-size:1.1rem}.valid{color:#5fd08a;font-weight:600}.screen.single{max-width:760px;margin:0 auto}.sp-controls{flex-wrap:wrap;gap:.75rem}.sp-tray{margin:.75rem 0}.sp-result{text-align:center;margin-top:1rem}.sp-result .row{justify-content:center}.muted{color:var(--muted)}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-main{flex:1}.app-header{background:var(--card);border-bottom:1px solid #262b4d;align-items:center;gap:1rem;padding:.6rem 1.25rem;display:flex}.brand{color:var(--fg);background:0 0;border:none;padding:0;font-size:1.2rem;font-weight:700}.brand:hover{color:var(--accent);border:none}.brand-mark{color:#d4af37}.hamburger{margin-inline-start:auto;font-size:1.2rem;line-height:1;display:none}.mainnav{align-items:center;gap:.5rem;margin-inline-start:auto;display:flex}.nav-controls{align-items:center;gap:.75rem;margin-inline-start:.75rem;display:flex}.auth-control{align-items:center;gap:.5rem;display:flex}.auth-name{color:var(--muted);font-size:.9rem}.nav-link{color:var(--fg);background:0 0;border:none;padding:.4rem .5rem}.nav-link:hover{color:var(--accent);border:none}.nav-link.active{color:var(--accent);background:0 0;font-weight:600}.app-footer{color:var(--muted);border-top:1px solid #262b4d;flex-wrap:wrap;align-items:center;gap:.75rem;padding:1rem 1.25rem;font-size:.85rem;display:flex}.account{position:relative}.account-trigger{color:var(--fg);background:0 0;border:1px solid #262b4d}.account-menu{top:100%;background:var(--card);z-index:30;border:1px solid #262b4d;border-radius:10px;flex-direction:column;align-items:stretch;gap:.15rem;min-width:12rem;margin-top:.35rem;padding:.4rem;display:none;position:absolute;inset-inline-end:0}.account-menu.open{display:flex}.account-menu .nav-link{text-align:start;border-radius:6px;padding:.5rem .6rem}.account-menu .nav-link:hover{background:#232845}.danger-text{color:var(--error)}.badge{color:var(--muted);font-size:.75em}button.danger{background:var(--error);border-color:var(--error);color:#0b0d1a}.icon-btn{background:0 0;border:1px solid #262b4d;line-height:1}.home .hero{text-align:center;flex-direction:column;align-items:center;gap:1rem;max-width:42rem;margin:0 auto;padding:2.5rem 1rem;display:flex}.hero-title{margin:0;font-size:2.4rem}.hero-tagline{color:var(--muted);margin:0;font-size:1.1rem}.hero-blurb{margin:0;line-height:1.6}.hero-cta{flex-wrap:wrap;justify-content:center;gap:.75rem;margin-top:.5rem;display:flex}.hero-cta button{min-width:7rem}.howto-cards{flex-wrap:wrap;align-items:center;gap:1rem;margin:.5rem 0;display:flex}.howto-cards p{flex:12rem;margin:0}.howto-example{margin-top:.5rem}.stat-cards{grid-template-columns:repeat(4,1fr);gap:.75rem;margin-bottom:1rem;display:grid}.streak-callout .stat-cards{grid-template-columns:repeat(2,1fr);margin-bottom:0}.stat-card{background:var(--card);border:1px solid #262b4d;border-radius:10px;flex-direction:column;align-items:center;gap:.25rem;padding:.9rem .5rem;display:flex}.stat-value{color:var(--accent);font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate;font-size:1.6rem;font-weight:700}.streak-callout .stat-value{color:#d4af37}.stat-label{color:var(--muted);text-align:center;font-size:.8rem}.stats-table{border-collapse:collapse;width:100%;margin-top:.5rem}.stats-table th,.stats-table td{text-align:start;border-bottom:1px solid #262b4d;padding:.45rem .5rem}.stats-table th{color:var(--muted);font-size:.85rem;font-weight:600}.stats-table td{font-variant-numeric:tabular-nums}@media (width<=720px){.hamburger{display:inline-flex}.mainnav{background:var(--card);z-index:20;top:100%;border:1px solid #262b4d;border-radius:0 0 10px 10px;flex-direction:column;align-items:stretch;gap:.25rem;min-width:12rem;margin:0;padding:.5rem;display:none;position:absolute;inset-inline-end:0}.mainnav.open{display:flex}.app-header{flex-wrap:wrap;position:relative}.nav-controls{border-top:1px solid #262b4d;flex-direction:column;align-items:stretch;gap:.5rem;margin:.5rem 0 0;padding-top:.5rem}.auth-control{justify-content:space-between}.account-menu{min-width:0;margin-top:.25rem;position:static}.hero-title{font-size:1.8rem}.screen{padding:1rem .75rem}.columns{grid-template-columns:1fr}.stat-cards{grid-template-columns:repeat(2,1fr)}.row.between,.tabs{flex-wrap:wrap}h1{font-size:1.25rem}button{min-height:44px;padding:.6rem .9rem}button.link{min-height:0;padding:0}.board.row{grid-template-columns:1fr 1fr;display:grid}.pile{min-width:0}.opponent{flex:100%}.overlay{padding:0}.panel{border-radius:0;max-width:none;min-height:100vh;max-height:100vh}.panel.over{border-radius:12px;min-height:auto;max-height:90vh;margin:auto}}@media (width<=380px){.pcard{width:3rem;height:4.1rem;font-size:1.35rem}}