:root{--bg: #070a12;--panel: #172033;--panel-2: #223047;--text: #e9edf6;--muted: #93a3bb;--accent: #6ee7b7;--gold: #fbbf24;--hot: #f87171;--reserve: calc(72px + env(safe-area-inset-bottom)) ;color-scheme:dark}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-tap-highlight-color:transparent;overflow:hidden}.game{height:100%;max-width:1400px;margin-inline:auto;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:8px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.hud{display:flex;align-items:center;justify-content:space-between;gap:8px}.hud-stats{display:flex;gap:8px;min-width:0}.hud-actions{display:flex;gap:8px;flex:none}.stat{display:flex;align-items:center;gap:7px;min-width:0;min-height:40px;padding:6px 12px;border-radius:10px;background:var(--panel);border:1px solid transparent}.stat[data-active="1"]{background:var(--panel-2);border-color:var(--accent)}.stat-label{color:var(--muted);font-size:12px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}.stat[data-active="1"] .stat-label{color:var(--text)}.stat-value{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}.badge{width:18px;height:18px;flex:none;border-radius:50%;background:#64748b;box-shadow:inset -2px -3px 4px #0006;font-size:11px;font-weight:700;line-height:18px;text-align:center;color:#0b1220}.badge[data-group=solids]{background:#eab308}.badge[data-group=stripes]{background:linear-gradient(#f1f5f9 0 28%,#ef4444 28% 72%,#f1f5f9 72% 100%)}.badge[data-group=eight]{background:#10151f;color:#f8fafc}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border:0;border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;font-weight:600;cursor:pointer}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.4;cursor:default}.btn-glyph{display:none;font-size:17px;line-height:1}.btn-icon{padding:0 10px;font-size:17px}.btn-primary{background:var(--accent);color:#04261a;padding:0 26px;font-size:16px}.board-wrap{position:relative;flex:1;min-height:0;border-radius:12px;overflow:hidden;touch-action:none}.board-wrap:after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1px #94a3b824;pointer-events:none}canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.banner{position:absolute;inset-inline-start:10px;top:10px;max-width:calc(100% - 20px);margin:0;display:flex;justify-content:flex-start;text-align:start;pointer-events:none}.banner[hidden]{display:none}.banner-text{padding:6px 13px;border-radius:999px;background:#070a12d6;font-size:clamp(12px,3.2vw,18px);font-weight:700;color:var(--text);text-shadow:0 2px 12px rgba(2,6,18,.9)}.banner[data-tone=good] .banner-text{color:var(--accent)}.banner[data-tone=bad] .banner-text{color:var(--hot)}.banner[data-tone=gold] .banner-text{color:var(--gold)}.overlay{position:absolute;inset:0;display:flex;align-items:center;align-items:safe center;justify-content:center;padding:14px;padding-bottom:calc(var(--reserve) + 10px);background:#070a12d1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:auto}.overlay[hidden]{display:none}.card{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:46ch;text-align:center}.card-title{margin:0;font-size:clamp(19px,4.6vw,34px)}.card-line{margin:0;font-size:15px;font-weight:600}.card-note{margin:0;color:var(--muted);font-size:13px;line-height:1.45}.card-line[hidden],.card-note[hidden]{display:none}@media(max-height:320px){.overlay{padding-block:10px;padding-inline-end:max(10px,var(--reserve-end, 0px))}.card{gap:6px}.card-title{font-size:17px}.card.is-intro .card-note{display:none}.game{padding:5px;gap:5px}.stat{min-height:36px;padding:5px 8px}}@media(max-width:420px){.btn-text{display:none}.btn-glyph{display:inline-flex;align-items:center}.btn{padding:0 12px}.btn-primary{padding:0 24px}.btn-primary .btn-text{display:inline}.stat-label{display:none}.hud,.hud-stats,.hud-actions{gap:6px}.stat{padding:6px 9px;gap:5px}}@media(max-width:310px){.stat-rack{display:none}}