:root{--bg: #0e1116;--panel: #171c26;--panel-2: #212940;--text: #e8ecf4;--muted: #93a0b4;--accent: #38bdf8;--accent-ink: #06283a;--wrong: #f87171;--gold: #fbbf24;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:860px;margin-inline:auto;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:10px;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.hud{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}.chips{grid-column:1;grid-row:1;display:flex;gap:6px;min-width:0}.chip{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding-inline:10px;border-radius:10px;background:var(--panel);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}.chip[hidden]{display:none}.chip .icon{width:17px;height:17px;flex:none}#round-chip .icon{color:var(--accent)}#best-chip .icon{color:var(--gold)}.actions{grid-column:2;grid-row:1;display:flex;gap:6px;justify-self:end}.levels{grid-column:1 / -1;grid-row:2;display:flex;gap:6px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding-inline:14px;border:0;border-radius:10px;background:var(--panel-2);color:var(--text);font:inherit;font-weight:600;cursor:pointer}.btn .icon{width:20px;height:20px;flex:none}.btn-icon{padding-inline:0}.btn-icon span[hidden]{display:none}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--accent);color:var(--accent-ink);padding-inline:24px}#sound-btn[aria-pressed=false]{color:var(--muted)}.level{flex:1;min-height:40px;padding-inline:6px;border:0;border-radius:10px;background:var(--panel);color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.level.is-on{background:var(--panel-2);color:var(--text);box-shadow:inset 0 0 0 1.5px #38bdf88c}.stage{position:relative;flex:1;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center}.simon{--seam: calc(var(--disc, 300px) * .035);--edge: calc(var(--disc, 300px) * .035);position:relative;width:var(--disc, 300px);height:var(--disc, 300px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:var(--seam);border-radius:50%;transition:width .18s ease,height .18s ease;background:#070a10;box-shadow:0 0 0 calc(var(--disc, 300px) * .022) #1b2333,0 18px 40px #00000080;touch-action:none}.pad{position:relative;padding:0;border:0;background:var(--pad-dim);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:background 90ms linear,box-shadow 90ms linear}.pad:disabled{cursor:default;opacity:1}.pad[data-pad="0"]{--pad: #22c55e;--pad-dim: #14532d;--pad-glow: rgba(34, 197, 94, .5);border-radius:100% var(--edge) var(--edge) var(--edge)}.pad[data-pad="1"]{--pad: #ef4444;--pad-dim: #5f1d1d;--pad-glow: rgba(239, 68, 68, .5);border-radius:var(--edge) 100% var(--edge) var(--edge)}.pad[data-pad="2"]{--pad: #eab308;--pad-dim: #5c4708;--pad-glow: rgba(234, 179, 8, .5);border-radius:var(--edge) var(--edge) var(--edge) 100%}.pad[data-pad="3"]{--pad: #3b82f6;--pad-dim: #1c3a75;--pad-glow: rgba(59, 130, 246, .5);border-radius:var(--edge) var(--edge) 100% var(--edge)}.pad.is-lit{background:var(--pad);box-shadow:0 0 calc(var(--disc, 300px) * .09) var(--pad-glow),inset 0 0 calc(var(--disc, 300px) * .06) #ffffff47}.pad.is-wrong{background:var(--wrong);box-shadow:0 0 calc(var(--disc, 300px) * .09) #f871718c,inset 0 0 calc(var(--disc, 300px) * .06) #ffffff4d}.glyph{position:absolute;width:20%;height:20%;fill:#fff;opacity:.3;transition:opacity 90ms linear}.pad.is-lit .glyph,.pad.is-wrong .glyph{opacity:.75}.pad[data-pad="0"] .glyph{top:35%;left:35%}.pad[data-pad="1"] .glyph{top:35%;right:35%}.pad[data-pad="2"] .glyph{bottom:35%;left:35%}.pad[data-pad="3"] .glyph{bottom:35%;right:35%}.hub{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:calc(var(--disc, 300px) * .34);height:calc(var(--disc, 300px) * .34);padding:4%;border:0;border-radius:50%;background:#10151f;color:var(--text);font:inherit;cursor:pointer;box-shadow:inset 0 0 0 calc(var(--disc, 300px) * .008) #ffffff1a,0 6px 18px #0000008c}.hub:disabled{cursor:default;opacity:1}.hub.is-start{background:#16202f;box-shadow:inset 0 0 0 calc(var(--disc, 300px) * .01) #38bdf899,0 6px 18px #0000008c}.hub-label{font-size:calc(var(--disc, 300px) * .038);font-weight:600;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;line-height:1}.hub-label[hidden]{display:none}.hub-value{font-size:calc(var(--disc, 300px) * .105);font-weight:800;line-height:1;font-variant-numeric:tabular-nums}.hub.is-start .hub-value{font-size:calc(var(--disc, 300px) * .058);color:var(--accent);text-transform:uppercase;letter-spacing:.03em}.simon.is-cleared .hub{animation:hub-pop .42s ease-out}.simon.is-over{animation:shake .4s ease-out}@keyframes hub-pop{0%{transform:translate(-50%,-50%) scale(1)}45%{transform:translate(-50%,-50%) scale(1.12)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}60%{transform:translate(6px)}}.status{margin:0;min-height:1.3em;text-align:center;font-size:15px;font-weight:600;line-height:1.3}.status.is-over{color:var(--wrong)}.hint{margin:0;text-align:center;color:var(--muted);font-size:13px;line-height:1.45}.hint[hidden]{display:none}.overlay{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:12px;background:#0e111699;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:overlay-in .2s ease-out}.overlay[hidden]{display:none}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.overlay-card{max-width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 22px;border-radius:16px;background:var(--panel);box-shadow:0 18px 44px #0000008c;text-align:center}.overlay-title{margin:0;font-size:clamp(20px,4.6vw,30px);font-weight:800}.overlay-line{margin:0;color:var(--muted);font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}.overlay-note{margin:0;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}.overlay-note:empty{display:none}.overlay-note.is-best{color:var(--gold);font-weight:700}.overlay-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:4px}@media(max-width:470px){.btn-label{display:none}#restart-btn{padding-inline:0}.game{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}}@media(max-height:470px){.game{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));gap:6px}.chip{min-height:32px;padding-inline:8px;font-size:14px}.btn{min-height:38px;min-width:38px}.level{min-height:32px;font-size:13px}.status{font-size:13px}.hint{display:none}}@media(max-height:470px)and (min-aspect-ratio:13 / 10){.game{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;gap:10px;max-width:none}.hud{grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:center;align-items:stretch;width:min(30vw,175px);min-height:0;overflow-y:auto;gap:6px}.chips,.levels{flex-direction:column}.chip{justify-content:space-between}.actions{justify-self:auto}.btn-label{display:none}#restart-btn{flex:1;padding-inline:0}.stage{grid-column:2;grid-row:1}.status{grid-column:2;grid-row:2}}@media(prefers-reduced-motion:reduce){.simon.is-cleared .hub,.simon.is-over,.overlay{animation-duration:1ms}.pad,.glyph,.simon{transition-duration:1ms}}