:root{--font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "Space Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;--accent: #a855f7;--accent2: #22d3ee}:root[data-theme=night]{--bg-1: #070b18;--bg-2: #0d1430;--bg-3: #0a1126;--panel: rgba(20,28,52,.62);--panel-2: rgba(15,21,42,.8);--line: rgba(148,163,210,.16);--line-strong: rgba(148,163,210,.28);--text: #e8edff;--muted: #93a0c8;--faint: #6b7aa6;--field: rgba(8,12,28,.6);--shadow: 0 24px 60px rgba(0,0,0,.5)}:root[data-theme=day]{--bg-1: #eef2fb;--bg-2: #e3e9f6;--bg-3: #eaf0fa;--panel: rgba(255,255,255,.72);--panel-2: rgba(255,255,255,.92);--line: rgba(30,41,80,.1);--line-strong: rgba(30,41,80,.18);--text: #0f1733;--muted: #4a567f;--faint: #7886ab;--field: rgba(255,255,255,.85);--shadow: 0 22px 50px rgba(30,41,90,.16)}*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:var(--font-body);color:var(--text);background:radial-gradient(1100px 700px at 78% -10%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 60%),radial-gradient(900px 600px at 8% 110%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 55%),linear-gradient(160deg,var(--bg-1),var(--bg-2) 55%,var(--bg-3));background-attachment:fixed;min-height:100dvh;-webkit-font-smoothing:antialiased;overscroll-behavior:none}#root{min-height:100dvh;display:flex;flex-direction:column}.app{flex:1;width:100%;max-width:1000px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}.brand{display:flex;align-items:baseline;gap:10px}.logo{font-family:var(--font-display);font-weight:700;font-size:clamp(26px,6vw,40px);letter-spacing:.06em;line-height:1;display:flex}.logo span{transition:transform .25s}.logo:hover span{transform:translateY(-2px)}.tag{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--faint);font-weight:600}.icon-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line-strong);background:var(--panel);color:var(--text);width:42px;height:42px;border-radius:13px;display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .15s,border-color .2s,background .2s}.icon-btn:hover{transform:translateY(-1px);border-color:var(--accent)}.icon-btn:active{transform:translateY(0)}.icon-btn svg{width:20px;height:20px}.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--shadow)}.menu{max-width:460px;margin:auto;width:100%;padding:30px 26px 26px;text-align:center}.menu h1{font-family:var(--font-display);font-size:clamp(40px,11vw,64px);margin:6px 0 0;letter-spacing:.04em;display:flex;justify-content:center;flex-wrap:wrap}.menu .sub{color:var(--muted);margin:8px 0 22px;font-size:14px}.field-label{display:block;text-align:left;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px 2px}.field{width:100%;padding:14px 16px;border-radius:14px;border:1px solid var(--line-strong);background:var(--field);color:var(--text);font-size:16px;font-family:var(--font-body);outline:none;transition:border-color .2s,box-shadow .2s}.field::placeholder{color:var(--faint)}.field:focus-visible{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}.seg button{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:1px solid var(--line-strong);background:var(--field);color:var(--muted);border-radius:14px;padding:12px 6px;display:flex;flex-direction:column;gap:3px;align-items:center;transition:all .18s;font-family:var(--font-body)}.seg button .lab{font-weight:700;font-size:15px;color:var(--text)}.seg button .hint{font-size:11px;color:var(--faint)}.seg button .rec{font-size:10px;color:var(--faint);font-family:var(--font-mono);margin-top:1px}.seg button[data-on=true]{border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 35%,transparent)}.seg button[data-on=true] .lab,.seg button[data-on=true] .hint,.seg button[data-on=true] .rec{color:#fff}.rec-line{margin-top:12px;font-size:12px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px}.rec-line b{font-family:var(--font-mono);color:var(--text)}.switches{display:flex;flex-direction:column;gap:8px}.switch{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border-radius:13px;border:1px solid var(--line-strong);background:var(--field);cursor:pointer;color:var(--text);font-family:var(--font-body);transition:border-color .2s}.switch:hover{border-color:var(--accent)}.switch .ico{display:grid;place-items:center;width:20px;height:20px;color:var(--muted)}.switch .ico svg{width:19px;height:19px}.switch .lbl{font-size:14px;font-weight:600;text-align:left;flex:1}.switch .track{width:42px;height:24px;border-radius:999px;background:var(--line-strong);position:relative;transition:background .2s;flex:none}.switch[data-on=true] .track{background:linear-gradient(135deg,var(--accent),var(--accent2))}.switch .thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}.switch[data-on=true] .thumb{transform:translate(18px)}.row{display:flex;gap:10px}.block{margin-top:18px}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;border:none;border-radius:15px;font-family:var(--font-display);font-weight:600;font-size:17px;letter-spacing:.02em;padding:15px 18px;width:100%;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 32%,transparent);transition:transform .15s,filter .2s;display:inline-flex;align-items:center;justify-content:center}.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}.btn:active{transform:translateY(0)}.btn.ghost{background:var(--field);color:var(--text);border:1px solid var(--line-strong);box-shadow:none;font-weight:600;font-size:15px}.btn.ghost:hover{border-color:var(--accent)}.btn.sm{font-size:14px;padding:11px 14px;width:auto}.teaser{margin-top:18px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px}.teaser b{color:var(--text);font-family:var(--font-mono)}.game-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.game-topbar .logo{font-size:clamp(20px,5vw,26px)}.board-info{display:flex;align-items:center;justify-content:space-between;width:100%;padding:0 4px;margin-bottom:6px}.bi-slot{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:54px}.bi-slot.bi-right{align-items:flex-end}.bi-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}.bi-empty{width:42px;height:28px}.bi-score{font-family:var(--font-mono);font-weight:700;font-size:clamp(18px,5vw,26px);background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-align:center}.board-row{display:flex;align-items:flex-start;gap:8px}.level-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);min-width:46px;gap:3px;margin-top:2px}.lb-label{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}.lb-value{font-family:var(--font-mono);font-weight:700;font-size:20px;color:var(--text);line-height:1}.play{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:flex-start;margin-top:0}.board-wrap{display:flex;flex-direction:column;align-items:center;gap:0;width:100%}.board-frame{position:relative;aspect-ratio:1 / 2;height:clamp(420px,66dvh,700px);width:auto;max-width:82vw;border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb,var(--glow-color, var(--accent)) 55%,var(--line-strong));box-shadow:0 18px 44px #0006,0 0 calc(16px + 34px * var(--glow-strength, .3)) color-mix(in srgb,var(--glow-color, var(--accent)) 70%,transparent);background:var(--bg-1);transition:box-shadow .5s,border-color .5s}.board-frame canvas{display:block;width:100%!important;height:100%!important}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:color-mix(in srgb,var(--bg-1) 78%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:center;padding:22px}.overlay h2{font-family:var(--font-display);margin:0;font-size:clamp(26px,7vw,38px);letter-spacing:.03em}.overlay .saved{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:300px;margin-top:4px}.result-grid .cell{background:var(--panel-2);border:1px solid var(--line);border-radius:13px;padding:11px 6px}.result-grid .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}.result-grid .v{font-family:var(--font-mono);font-weight:700;font-size:19px;margin-top:3px}.overlay .actions{display:flex;gap:10px;width:100%;max-width:320px;margin-top:6px}.overlay .actions .btn{font-size:15px;padding:13px}.side{display:flex;flex-direction:column;gap:14px;width:240px;max-width:92vw}@media (max-width: 760px){.side{width:clamp(280px,92vw,420px)}}.quickbar{display:flex;gap:10px;flex-wrap:wrap}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:13px 14px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.stat.full{grid-column:1 / -1}.stat .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}.stat .v{font-family:var(--font-mono);font-weight:700;font-size:22px;margin-top:4px;line-height:1}.stat .v.score{font-size:26px;background:linear-gradient(120deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.diff-pill{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:13px;font-weight:700;color:var(--text)}.diff-dot{width:9px;height:9px;border-radius:50%}.next-card{display:flex;align-items:center;gap:14px}.next-card .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}.next-grid{display:grid;gap:3px}.next-grid i{width:14px;height:14px;border-radius:4px;display:block}.pause-menu{display:flex;flex-direction:column;gap:10px;width:100%;max-width:240px}.pause-menu .btn{margin-top:6px}.pad{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;width:100%;margin-top:10px}.pad .ctl{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--line-strong);background:var(--panel-2);color:var(--text);border-radius:15px;height:58px;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:transform .08s,background .15s,border-color .15s}.pad .ctl:active{transform:scale(.94);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--panel-2))}.pad .ctl.wide{grid-column:span 2}.pad .ctl.full{grid-column:1 / -1}.pad .ctl.hold-dim{opacity:.42;filter:grayscale(.4)}.pad .ctl svg{width:24px;height:24px}.pad .ctl .ctl-lbl{margin-left:8px;font-size:12px;letter-spacing:.08em}.keyhint{font-size:11.5px;color:var(--faint);text-align:center;line-height:1.7}.keyhint kbd{font-family:var(--font-mono);background:var(--field);border:1px solid var(--line-strong);border-radius:6px;padding:1px 6px;color:var(--muted);font-size:11px}@media (pointer: coarse){.keyhint{display:none}}.history{max-width:560px;margin:8px auto 0;width:100%;padding:22px}.history .head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.history h2{font-family:var(--font-display);margin:0;font-size:26px;letter-spacing:.02em}.hlist{display:flex;flex-direction:column;gap:8px}.hrow{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line)}.hrow .rank{font-family:var(--font-mono);font-weight:700;color:var(--faint);text-align:center}.hrow.top .rank{color:var(--accent2)}.hrow .who{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hrow .meta{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}.hrow .pts{font-family:var(--font-mono);font-weight:700;font-size:19px;text-align:right}.empty{text-align:center;color:var(--muted);padding:34px 10px;font-size:14px}.empty .big{margin-bottom:10px;opacity:.7;display:flex;justify-content:center}.hfoot{display:flex;gap:10px;justify-content:space-between;margin-top:18px}.mini-tag{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;border:1px solid var(--line-strong);color:var(--muted)}.tagline{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent2);font-weight:700;display:inline-flex;align-items:center;gap:5px}.board-frame.shake{animation:shake .32s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}