:root{--cream:#f3ead8;--cream-dim:#f3ead8b8;--rose:#e08a7d;--rose-bright:#eda596;--teal:#6fb5ac;--teal-bright:#8fd0c9;--amber:#e8b36a;--walnut:#3a2a22;--walnut-deep:#261a15db;--walnut-soft:#2e201ac7;--edge:#f3ead829;--shadow-soft:0 6px 24px #0a081061;--hud-pad-top:max(12px, env(safe-area-inset-top));--hud-pad-right:max(12px, env(safe-area-inset-right));--hud-pad-bottom:max(12px, env(safe-area-inset-bottom));--hud-pad-left:max(12px, env(safe-area-inset-left));--touch:46px;color:var(--cream);font-synthesis:none;text-rendering:geometricprecision;-webkit-text-size-adjust:100%;background:#10141c;font-family:ui-rounded,SF Pro Rounded,Nunito,Varela Round,Comfortaa,Avenir Next,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none;min-width:320px}#app{background:#10141c;position:relative}#game-canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;outline:none;width:100vw;height:100vh;display:block}#hud{pointer-events:none;position:absolute;inset:0}#hud:before{content:"";background:radial-gradient(at 50% 44%,#0000 55%,#080a164d 100%);position:absolute;inset:0}#topbar{top:var(--hud-pad-top);left:var(--hud-pad-left);right:var(--hud-pad-right);justify-content:space-between;align-items:flex-start;gap:10px;display:flex;position:absolute}#scoreboard{background:linear-gradient(180deg, #ffdcb414, #0000001f), var(--walnut-soft);border:1px solid var(--edge);box-shadow:var(--shadow-soft), inset 0 1px 0 #ffebcd1f;border-bottom-color:#140c0880;border-radius:16px;align-items:baseline;gap:8px;padding:8px 18px 9px;display:flex;position:relative}.score-num{text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.02em;text-shadow:0 2px 6px #0a081073;min-width:1.4ch;font-size:1.55rem;font-weight:800;line-height:1;display:inline-block}.score-rose{color:var(--rose-bright)}.score-teal{color:var(--teal-bright)}.score-divider{opacity:.5;font-size:1.2rem;font-weight:700}.score-tag{text-transform:uppercase;letter-spacing:.14em;opacity:.85;font-size:.62rem;font-weight:700;transform:translateY(-1px)}.score-tag-rose{color:var(--rose-bright)}.score-tag-teal{color:var(--teal-bright)}.match-point{color:#3a2413;text-transform:uppercase;letter-spacing:.14em;white-space:nowrap;background:#e8b36aeb;border-radius:999px;padding:3px 12px 4px;font-size:.66rem;font-weight:800;animation:1.6s ease-in-out infinite mp-pulse;position:absolute;top:calc(100% + 5px);left:50%;transform:translate(-50%);box-shadow:0 3px 10px #0a081059}@keyframes mp-pulse{0%,to{transform:translate(-50%)scale(1)}50%{transform:translate(-50%)scale(1.06)}}.icon-btn{pointer-events:auto;width:var(--touch);height:var(--touch);border:1px solid var(--edge);background:linear-gradient(180deg, #ffdcb41a, #00000024), var(--walnut-soft);color:var(--cream);box-shadow:var(--shadow-soft), inset 0 1px 0 #ffebcd1f;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border-radius:50%;place-items:center;padding:0;transition:transform .15s,background-color .15s,box-shadow .15s;display:grid}.icon-btn .icon{width:22px;height:22px}.icon-btn:hover{transform:translateY(-1px)scale(1.05)}.icon-btn:active{transform:translateY(1px)scale(.96)}#btn-mute .icon-sound-off,#btn-mute.is-muted .icon-sound-on{display:none}#btn-mute.is-muted .icon-sound-off{display:block}#btn-mute.is-muted{color:var(--cream-dim)}.banner{top:calc(var(--hud-pad-top) + 74px);background:linear-gradient(180deg, #ffdcb41a, #0000001f), var(--walnut-deep);border:1px solid var(--edge);box-shadow:var(--shadow-soft);letter-spacing:.04em;white-space:nowrap;text-overflow:ellipsis;opacity:0;border-radius:999px;max-width:min(88vw,480px);padding:9px 26px 11px;font-size:1.15rem;font-weight:800;transition:opacity .18s ease-out,transform .22s cubic-bezier(.34,1.4,.64,1);position:absolute;left:50%;overflow:hidden;transform:translate(-50%)translateY(-8px)scale(.94)}.banner.visible{opacity:1;transform:translate(-50%)translateY(0)scale(1)}.banner.banner-rose{color:var(--rose-bright)}.banner.banner-teal{color:var(--teal-bright)}.banner.banner-neutral{color:var(--cream)}.overlay{padding:calc(var(--hud-pad-top) + 12px) calc(var(--hud-pad-right) + 8px) calc(var(--hud-pad-bottom) + 12px) calc(var(--hud-pad-left) + 8px);pointer-events:none;opacity:1;place-items:center;transition:opacity .2s ease-out;display:grid;position:absolute;inset:0}.overlay[hidden]{opacity:0;visibility:hidden;transition:opacity .2s ease-out,visibility 0s linear .2s;display:grid}.overlay-dim{background:radial-gradient(at 50% 45%,#1810146b,#0a08109e)}.card{text-align:center;background:linear-gradient(180deg, #ffd6aa17, #0000001a), var(--walnut-deep);border:1px solid var(--edge);-webkit-backdrop-filter:blur(6px);border-bottom-color:#140c088c;border-radius:26px;width:min(88vw,400px);padding:26px 26px 20px;animation:.26s cubic-bezier(.34,1.35,.64,1) both card-in;position:relative;box-shadow:0 18px 50px #08060e80,inset 0 1px #ffebcd24}.overlay[hidden] .card{animation:none}@keyframes card-in{0%{opacity:0;transform:translateY(14px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.game-title{letter-spacing:.01em;text-shadow:0 3px 14px #0a081080;margin:6px 0 4px;font-size:clamp(2rem,7.5vw,2.9rem);font-weight:900;line-height:1.05}.title-rose{color:var(--rose-bright)}.title-teal{color:var(--teal-bright)}.kicker{text-transform:uppercase;letter-spacing:.18em;color:var(--amber);margin:0;font-size:.74rem;font-weight:700}.tagline{color:var(--cream-dim);margin:4px 0 18px;font-size:.95rem}.tagline strong{color:var(--amber)}.card-title{letter-spacing:.02em;margin:2px 0 16px;font-size:1.7rem;font-weight:900}.hint{letter-spacing:.04em;color:var(--cream-dim);margin:14px 0 0;font-size:.74rem}.btn{pointer-events:auto;width:100%;min-height:var(--touch);border:1px solid var(--edge);color:var(--cream);font:inherit;letter-spacing:.03em;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:#f3ead814;border-radius:999px;padding:11px 24px;font-size:1rem;font-weight:800;transition:transform .15s,background-color .15s,box-shadow .15s,filter .15s;display:block;box-shadow:inset 0 1px #ffebcd1a}.btn:hover{background:#f3ead824;transform:translateY(-1px)}.btn:active{transform:translateY(1px)scale(.98)}.btn:disabled{opacity:.45;cursor:default;transform:none}.btn-primary{background:linear-gradient(180deg, #edac9b, var(--rose) 55%, #cf7668);color:#3a1712;text-shadow:0 1px #ffebcd59;border-color:#ffebcd4d #ffebcd4d #783026b3;box-shadow:0 6px 18px #e08a7d52,inset 0 1px #fff0dc80}.btn-primary:hover{filter:brightness(1.06);background:linear-gradient(180deg, #edac9b, var(--rose) 55%, #cf7668)}.btn-big{padding:14px 28px;font-size:1.2rem}.icon-btn:focus-visible,.btn:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.menu-buttons{gap:10px;display:grid}.final-score{justify-content:center;align-items:baseline;gap:12px;margin:4px 0 6px;display:flex}.final-score .score-num{font-size:2.3rem}.stat-line{color:var(--cream-dim);margin:0 0 16px;font-size:.8rem}.stat-line:empty{margin:0 0 10px;display:none}@media (width<=540px){.score-num{font-size:1.3rem}.score-tag{display:none}#scoreboard{gap:7px;padding:8px 14px 9px}.banner{top:calc(var(--hud-pad-top) + 66px);font-size:1rem}.card{padding:22px 18px 16px}}@media (height<=460px){.card{width:min(80vw,380px);padding:14px 20px 12px}.game-title{font-size:1.6rem}.tagline{margin-bottom:10px}.menu-buttons{gap:7px}.hint{margin-top:8px}}@media (prefers-reduced-motion:reduce){.card,.match-point{animation:none}.banner,.overlay,.btn,.icon-btn{transition:none}}