:root{--ink: #2a1b3d;--ink-soft: #5b4a75;--paper: #fff6e8;--paper-dim: #efe2cf;--cube: #ff7a45;--sky: #6fc3ff;--mint: #4ee1a0;--sunshine: #ffd23f;--grape: #9b6dff;--rose: #ff6b9d;--outline: 4px;--lift: 6px;--radius: 22px;--spring: cubic-bezier(.34, 1.56, .64, 1);--font: 900 16px/1.35 "Nunito", "Quicksand", ui-rounded, "Segoe UI", system-ui, sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0b0d12;font:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}canvas{display:block;touch-action:none}.stick{position:fixed;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;border:var(--outline) solid var(--ink);background:#ffffff38;box-shadow:inset 0 0 0 6px #ffffff47;pointer-events:none;z-index:40;animation:stick-in .14s var(--spring) both}.stick[hidden]{display:none}.stick__knob{position:absolute;left:50%;top:50%;width:58px;height:58px;border-radius:50%;border:var(--outline) solid var(--ink);background:var(--cube);box-shadow:0 3px 0 var(--ink)}@keyframes stick-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.screen{position:fixed;inset:0;display:grid;place-items:safe center;padding:24px;overflow-y:auto;z-index:10;transition:opacity .22s ease,visibility .22s ease}.screen[hidden]{display:grid;opacity:0;visibility:hidden;pointer-events:none}.screen--menu{background:radial-gradient(circle at 50% 120%,#ffe9b8 0%,transparent 55%),linear-gradient(180deg,#7fd0ff,#b8e6ff 55%,bisque)}.screen--overlay{background:#180e268c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.panel{width:min(100%,880px);padding:28px;background:var(--paper);border:var(--outline) solid var(--ink);border-radius:var(--radius);box-shadow:0 var(--lift) 0 var(--ink);animation:pop-in .34s var(--spring) both}.panel--narrow{width:min(100%,460px);text-align:center}@keyframes pop-in{0%{opacity:0;transform:translateY(18px) scale(.94)}}@media(prefers-reduced-motion:reduce){.panel,.level-card{animation:none}}.title{margin:0;font-size:clamp(34px,6vw,54px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--cube);text-shadow:3px 3px 0 var(--ink),0 var(--lift) 0 rgba(42,27,61,.25)}.subtitle{margin:8px 0 0;font-size:15px;font-weight:700;color:var(--ink-soft)}.panel__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;font:inherit;font-size:16px;color:var(--ink);background:var(--sunshine);border:var(--outline) solid var(--ink);border-radius:16px;box-shadow:0 var(--lift) 0 var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none;text-transform:uppercase;letter-spacing:.03em;transition:transform .12s var(--spring),box-shadow .12s ease,filter .12s ease}.btn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-2px);box-shadow:0 calc(var(--lift) + 2px) 0 var(--ink)}.btn:active:not(:disabled){transform:translateY(var(--lift));box-shadow:0 0 0 var(--ink)}.btn:focus-visible{outline:3px dashed var(--grape);outline-offset:4px}.btn:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.6}.btn--primary{background:var(--mint)}.btn--ghost{background:var(--paper-dim)}.btn--wide{width:100%}.btn__row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.level-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:14px;min-height:132px;text-align:left;font:inherit;color:var(--ink);background:var(--sky);border:var(--outline) solid var(--ink);border-radius:18px;box-shadow:0 var(--lift) 0 var(--ink);cursor:pointer;overflow:hidden;animation:pop-in .3s var(--spring) both;transition:transform .14s var(--spring),box-shadow .14s ease,filter .14s ease}.level-card:hover:not(:disabled){transform:translateY(-3px) rotate(-1deg);box-shadow:0 calc(var(--lift) + 3px) 0 var(--ink);filter:brightness(1.05)}.level-card:active:not(:disabled){transform:translateY(var(--lift));box-shadow:0 0 0 var(--ink)}.level-card:focus-visible{outline:3px dashed var(--grape);outline-offset:4px}.level-card--done{background:var(--mint)}.level-card--locked{cursor:not-allowed;background:var(--paper-dim);color:var(--ink-soft);box-shadow:0 var(--outline) 0 var(--ink-soft);border-color:var(--ink-soft)}.level-card__index{font-size:12px;letter-spacing:.14em;opacity:.75}.level-card__name{font-size:19px;line-height:1.1;letter-spacing:-.01em}.level-card__time{margin-top:auto;font-size:13px;font-variant-numeric:tabular-nums;opacity:.85}.level-card__lock{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;background:#efe2cfb8}.level-card__pips{display:flex;gap:3px}.pip{width:100%;height:6px;border:2px solid var(--ink);border-radius:99px;background:#ffffff8c}.pip--on{background:var(--cube)}.level-card--locked .pip{border-color:var(--ink-soft)}.hud{position:fixed;inset:12px 12px auto;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:5;padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}.hud[hidden]{display:none}.hud__chip{display:flex;align-items:center;gap:10px;padding:9px 16px;background:var(--paper);border:var(--outline) solid var(--ink);border-radius:999px;box-shadow:0 var(--outline) 0 var(--ink)}.hud__actions{display:flex;gap:8px;pointer-events:auto}.hud__btn{width:44px;height:44px;display:grid;place-items:center;font:inherit;font-size:20px;color:var(--ink);background:var(--paper);border:var(--outline) solid var(--ink);border-radius:50%;box-shadow:0 var(--outline) 0 var(--ink);cursor:pointer;transition:transform 90ms ease,box-shadow 90ms ease}.hud__btn:active{transform:translateY(var(--outline));box-shadow:0 0 0 var(--ink)}.hud__label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}.hud__time{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:-.01em}.hud__chip--time .hud__time{display:inline-block;min-width:5em;text-align:center}.hud__gates{display:flex;gap:5px}.gate{width:12px;height:12px;border:3px solid var(--ink);border-radius:50%;background:var(--paper-dim);transition:background .2s ease}.gate--hit{background:var(--mint);animation:gate-pop .34s var(--spring)}@keyframes gate-pop{50%{transform:scale(1.55)}}.hud__hint{position:fixed;left:50%;bottom:14px;transform:translate(-50%);padding:7px 16px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);background:#2a1b3db3;border-radius:999px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:5}.hud__hint[hidden]{display:none}@media(max-width:720px){.hud{inset:8px 8px auto;gap:8px}.hud__chip{gap:8px;padding:6px 12px;border-width:3px;box-shadow:0 3px 0 var(--ink)}.hud__label,.hud__chip--level{display:none}.hud__time{font-size:18px}.hud__btn{width:38px;height:38px;font-size:17px;border-width:3px;box-shadow:0 3px 0 var(--ink)}.hud__actions{gap:6px}.gate{width:10px;height:10px;border-width:2px}.hud__hint{bottom:calc(10px + env(safe-area-inset-bottom));max-width:calc(100vw - 24px);padding:6px 12px;font-size:10px;text-align:center}.screen{padding:14px calc(14px + env(safe-area-inset-right)) 14px calc(14px + env(safe-area-inset-left))}.panel{padding:18px}.level-grid{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px}.result__time{font-size:40px}}@media(max-height:460px){.hud__hint{display:none}}.result__time{margin:12px 0 4px;font-size:52px;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}.result__best{font-size:14px;color:var(--ink-soft)}.ribbon{display:inline-block;margin-top:10px;padding:7px 18px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);background:var(--sunshine);border:3px solid var(--ink);border-radius:999px;transform:rotate(-2deg);animation:pop-in .4s var(--spring) .12s both}.ribbon[hidden]{display:none}.loader{display:grid;place-items:center;gap:18px}.loader__cube{width:46px;height:46px;background:var(--cube);border:var(--outline) solid var(--ink);border-radius:8px;animation:tumble 1.1s var(--spring) infinite}@keyframes tumble{0%{transform:rotate(0)}50%{transform:rotate(90deg) translateY(-6px)}to{transform:rotate(90deg)}}