:root{--bg:#0b1020;--bg-2:#121a3d;--panel:#141c3a;--panel-2:#1c2650;--panel-3:#26346a;--border:#94a3b82e;--fg:#e8ecf8;--muted:#9aa7c7;--accent:#60a5fa;--accent-2:#a78bfa;--danger:#f87171;--warning:#fbbf24;--radius:18px;--safe-top:env(safe-area-inset-top);--safe-right:env(safe-area-inset-right);--safe-bottom:env(safe-area-inset-bottom);--safe-left:env(safe-area-inset-left);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.45}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:radial-gradient(120% 80% at 50% 0%, var(--bg-2), var(--bg) 70%) fixed var(--bg);color:var(--fg);-webkit-tap-highlight-color:transparent;overflow:hidden}[hidden]{display:none!important}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}#app{height:100dvh;position:relative;overflow:hidden}.game-layer{z-index:0;padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);grid-template:"hud""board"minmax(0,1fr)"controls"/minmax(0,1fr);display:grid;position:absolute;inset:0}.board-host{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;grid-area:board;place-items:center;min-width:0;min-height:0;padding:6px 10px 10px;display:grid;position:relative;overflow:hidden}canvas.board{touch-action:none;border-radius:4px;display:block;box-shadow:0 20px 60px #00000073}.controls{grid-area:controls}.hud{width:max(var(--board-width,100%), 15rem);grid-area:hud;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"level pause score""bar bar bar";justify-self:center;align-items:center;gap:8px 10px;max-width:100%;padding:10px 0 0;display:grid}.hud__stat{white-space:nowrap;align-items:center;gap:6px;min-width:0;display:flex}.hud__stat--level{grid-area:level;justify-self:start}.hud__stat--score{grid-area:score;justify-self:end}.hud__value{font-variant-numeric:tabular-nums;font-size:1.9rem;font-weight:800;line-height:1}.hud__stat--level .hud__value{color:#cdd5ea}.hud__stat .icon{flex:none;width:1.5rem;height:1.5rem}.hud__stat--score .icon{fill:var(--warning);stroke:var(--warning);stroke-width:1.5px}.hud__stat--level .icon{color:var(--accent)}.hud__pause{background:0 0;border:none;grid-area:pause;position:relative}.hud__pause:before{content:"";border:1px solid var(--border);background:var(--panel-2);border-radius:50%;position:absolute;inset:5px}.hud__pause .icon{width:18px;height:18px;position:relative}@media (hover:hover){.hud__pause:hover{background:0 0}.hud__pause:hover:before{background:var(--panel-3)}}.hud__progress{grid-area:bar;min-width:0}.progress{background:var(--panel-2);border-radius:999px;justify-content:flex-end;height:6px;display:flex;overflow:hidden}.progress__fill{width:calc(var(--progress,0) * 100%);border-radius:inherit;background:linear-gradient(270deg, var(--accent-2), var(--accent));height:100%;transition:width .25s ease-out,height .25s ease-out}@media (orientation:landscape) and (max-height:500px){.hud{z-index:1;top:50%;right:calc(50% + var(--board-width,300px) / 2 + 12px);width:auto;height:calc(var(--board-height,300px) - 20px);grid-template:"level bar""pause bar"minmax(0,1fr)"score bar"/auto 6px;grid-area:auto;justify-items:end;column-gap:12px;padding:0;position:absolute;translate:0 -50%}.hud__stat--level,.hud__stat--score{justify-self:end}.hud__pause{align-self:center}.hud__value{font-size:1.5rem}.hud__stat .icon{width:1.2rem;height:1.2rem}.hud__progress{height:100%}.progress{flex-direction:column;width:6px;height:100%}.progress__fill{width:100%;height:calc(var(--progress,0) * 100%);background:linear-gradient(0deg, var(--accent), var(--accent-2))}}.toast{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0b1020;white-space:nowrap;opacity:0;pointer-events:none;border-radius:999px;padding:10px 22px;font-size:1.3rem;font-weight:800;position:absolute;top:30%;left:50%;translate:-50%}.toast--show{animation:1.6s ease-out toast}@keyframes toast{0%{opacity:0;transform:translateY(12px)scale(.9)}15%,70%{opacity:1;transform:none}to{opacity:0;transform:translateY(-16px)}}.touch-buttons{justify-content:center;gap:12px;padding:6px 12px 12px;display:flex}.touch-button{border:1px solid var(--border);background:var(--panel-2);width:58px;height:58px;color:var(--fg);touch-action:none;-webkit-user-select:none;user-select:none;border-radius:50%;place-items:center;display:grid}.touch-button:active{background:var(--panel-3)}.touch-button .icon{width:28px;height:28px}.screen-layer{z-index:1;pointer-events:none;position:absolute;inset:0}.screen{padding:calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 16px) calc(var(--safe-left) + 16px);pointer-events:auto;grid-template-columns:minmax(0,1fr);place-items:center;animation:.18s ease-out screen-in;display:grid;position:absolute;inset:0;overflow-y:auto}@keyframes screen-in{0%{opacity:0;transform:translateY(8px)}}.screen--overlay{-webkit-backdrop-filter:blur(6px);background:#050814b8}.screen--pause{background:var(--bg)}.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);text-align:center;width:min(100%,26rem);padding:28px 24px;box-shadow:0 24px 80px #00000073}.card--settings,.card--text{text-align:left;width:min(100%,34rem)}.card--home{box-shadow:none;background:0 0;border:none}.title{overflow-wrap:break-word;letter-spacing:-.02em;background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0 0 4px;font-size:clamp(2.2rem,10vw,3.6rem);font-weight:800;line-height:1.1}.screen--overlay .title{font-size:clamp(1.9rem,8vw,2.6rem)}.title--small{margin-bottom:16px;font-size:1.7rem}.tagline{color:var(--muted);margin:0 0 28px;font-weight:600}h2{margin:20px 0 6px;font-size:1.05rem}.card--text p,.card--text li{color:#cdd5ea}.menu{flex-direction:column;gap:12px;margin-top:8px;display:flex}.actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:20px;display:flex}.actions>.btn{flex:auto}.hint{color:var(--muted);margin:18px 0 0;font-size:.85rem}@media (pointer:coarse){.hint{display:none}}.notice{color:var(--warning);margin:20px 0 0;font-size:.9rem}.empty{color:var(--muted)}.logo{grid-template-columns:repeat(3,34px);justify-content:center;gap:8px;margin:0 auto 22px;display:grid}@media (orientation:landscape) and (max-height:540px){.card--home{grid-template-columns:auto minmax(14rem,20rem);grid-template-areas:"logo menu""title menu""tagline menu";align-items:center;column-gap:40px;width:auto;padding:0;display:grid}.card--home .logo{grid-area:logo;grid-template-columns:repeat(3,26px);gap:6px;margin-bottom:10px}.card--home .logo__block{width:26px;height:26px}.card--home .title{grid-area:title;font-size:2.4rem}.card--home .tagline{grid-area:tagline;margin:0}.card--home .menu{grid-area:menu;gap:8px;margin:0}}.logo__block{background:linear-gradient(135deg, var(--block-light), var(--block) 45%, var(--block-dark));border-radius:7px;width:34px;height:34px;box-shadow:inset 0 0 0 1px #0000004d,0 4px 12px #00000059}.btn{border:1px solid var(--border);background:var(--panel-2);min-height:48px;color:var(--fg);font:inherit;cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:0 22px;font-weight:650;transition:background .15s,transform .1s;display:inline-flex}.btn:active{transform:scale(.97)}.btn--primary{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0b1020;border-color:#0000}.btn--danger{background:var(--panel);color:var(--danger)}@media (hover:hover){.btn:hover{background:var(--panel-3)}.btn--primary:hover{background:linear-gradient(90deg,#7db6fb,#b9a0fb)}.btn--danger:hover{color:#fca5a5}}.btn--icon{width:44px;min-height:44px;padding:0}.btn:focus-visible,.touch-button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.icon{fill:none;stroke:currentColor;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}fieldset{border:none;margin:0 0 18px;padding:0}legend{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;font-size:.75rem;font-weight:700}.field{grid-template-columns:minmax(8rem,11rem) 1fr 2rem;align-items:center;gap:12px;min-height:44px;display:grid}.field--select{grid-template-columns:minmax(8rem,11rem) 1fr}.field--check{gap:12px;display:flex}.field__value{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}input[type=range]{width:100%;accent-color:var(--accent)}input[type=checkbox]{width:22px;height:22px;accent-color:var(--accent)}select,input[type=text]{border:1px solid var(--border);background:var(--panel-2);min-height:44px;color:var(--fg);font:inherit;border-radius:12px;padding:0 12px}@media (max-width:420px){.field,.field--select{grid-template-columns:1fr 2rem;gap:4px 12px}.field>label,.field--select>select{grid-column:1/-1}}.result{margin:4px 0;font-size:1.4rem;font-weight:800}.result--small{color:var(--muted);font-size:1rem;font-weight:600}.record{text-align:left;margin:20px 0 8px}.record__title{color:var(--warning);text-align:center;margin:0 0 10px;font-weight:800}.record__row{gap:10px;margin-top:6px;display:flex}.record__row input{flex:1;min-width:0}.scores{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%}.scores th,.scores td{border-bottom:1px solid var(--border);text-align:left;padding:8px 6px}.scores thead th{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:.75rem}.scores .num{text-align:right}.scores tbody th{font-weight:600}.scores .legacy{color:var(--muted);font-weight:400}.scores tr.is-new{background:#60a5fa29}@media (max-width:380px){.scores .date{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.notice-bar{z-index:2;left:50%;bottom:calc(var(--safe-bottom) + 16px);border:1px solid var(--border);background:var(--panel-2);border-radius:999px;align-items:center;gap:14px;width:max-content;max-width:calc(100% - 32px);padding:10px 12px 10px 18px;animation:.2s ease-out screen-in;display:flex;position:absolute;translate:-50%;box-shadow:0 12px 40px #00000080}.notice-bar__text{font-size:.92rem}.btn--small{min-height:40px;padding:0 16px}