:root{--ink: #f6f1e8;--muted: rgba(246, 241, 232, .58);--faint: rgba(246, 241, 232, .28);--line: rgba(255, 255, 255, .12);--panel: rgba(14, 14, 26, .58);--accent: #ffb35c;--ana: #ff6a5c;--kata: #4d8bff;--goal: #ffe7a3;--shard: #8ff7ff;--danger: #ff5c6c;--ui: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;--prose: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;color-scheme:dark}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:#0b0b16;color:var(--ink);font-family:var(--ui)}body{-webkit-font-smoothing:antialiased;user-select:none}#game{position:fixed;inset:0}.game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}kbd{display:inline-block;min-width:1.6em;padding:.05em .45em;margin:0 .1em;border:1px solid var(--faint);border-bottom-width:2px;border-radius:6px;font:500 .82em/1.4 var(--ui);text-align:center;color:var(--ink);background:#ffffff0f}.hidden{display:none!important}.hud{position:absolute;inset:0;pointer-events:none;z-index:10}.crosshair{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#ffffffd9;box-shadow:0 0 0 1.5px #00000040}.hud-compass{position:absolute;top:18px;left:50%;width:min(520px,70vw);height:26px;transform:translate(-50%);container-type:inline-size;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}.hud-compass:after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:6px;background:var(--muted)}.compass-label{position:absolute;left:50%;top:0;width:60px;margin-left:-30px;text-align:center;font:500 13px/20px var(--ui);letter-spacing:.12em;color:var(--muted)}.compass-label.w-axis{color:var(--accent);font-weight:600}.hud-title{position:absolute;top:22%;left:0;right:0;text-align:center;opacity:0;transition:opacity 1.2s ease;text-shadow:0 2px 24px rgba(0,0,0,.45)}.hud-title.visible{opacity:1}.title-kicker{font:400 13px var(--ui);letter-spacing:.4em;text-transform:uppercase;color:var(--muted)}.title-name{margin-top:10px;font:italic 400 clamp(30px,4.4vw,52px) var(--prose)}.hud-corner{position:absolute;top:18px;right:22px;display:flex;gap:14px;align-items:center}.hud-timer{font:400 15px var(--ui);font-variant-numeric:tabular-nums;color:var(--muted)}.hud-shard{width:14px;height:14px;transform:rotate(45deg);border:1.5px solid var(--shard);opacity:.5}.hud-shard.none{display:none}.hud-shard.found{background:var(--shard);opacity:1;box-shadow:0 0 12px var(--shard)}.hud-toast{position:absolute;top:36%;left:50%;transform:translate(-50%,6px);padding:8px 18px;border-radius:999px;background:var(--panel);backdrop-filter:blur(10px);font:400 15px var(--ui);letter-spacing:.04em;opacity:0;transition:opacity .35s,transform .35s}.hud-toast.visible{opacity:1;transform:translate(-50%)}.hud-bottom{position:absolute;bottom:22px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:12px;width:min(760px,92vw)}.hud-hint{max-width:640px;padding:10px 20px;border-radius:14px;text-align:center;background:var(--panel);backdrop-filter:blur(12px);border:1px solid var(--line);font:400 16px/1.5 var(--ui);opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}.hud-hint.visible{opacity:1;transform:none}.hud-gauge{display:grid;grid-template-columns:auto auto auto;align-items:center;gap:10px}.gauge-ticks{display:flex;gap:6px;align-items:center}.gauge-tick{width:8px;height:8px;border-radius:2px;background:var(--faint);transition:background .3s}.gauge-tick.here{width:12px;height:12px;background:var(--ink);box-shadow:0 0 10px #ffffff80}.gauge-tick:nth-child(-n+3){background:color-mix(in srgb,var(--kata) 55%,transparent)}.gauge-tick:nth-child(n+5){background:color-mix(in srgb,var(--ana) 55%,transparent)}.gauge-tick.goal{background:var(--goal);box-shadow:0 0 10px var(--goal);border-radius:50%}.gauge-dir{font:600 12px var(--ui);letter-spacing:.08em;min-width:2.4em;text-align:center}.gauge-dir.kata{color:var(--kata)}.gauge-dir.ana{color:var(--ana)}.gauge-dir.goal{color:var(--goal);text-shadow:0 0 8px var(--goal)}.gauge-label{grid-column:1 / -1;text-align:center;font:400 11px var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--faint)}.hud-views{display:flex;gap:8px}.view-chip{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:12px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);font:500 14px var(--ui);letter-spacing:.14em;color:var(--muted);transition:all .25s}.view-chip kbd{font-size:12px}.view-chip.active{color:var(--ink);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 22px color-mix(in srgb,var(--accent) 45%,transparent)}.view-chip.turning{color:var(--ink);border-color:var(--accent);animation:pulse .5s ease-in-out infinite alternate}.view-chip.blocked{opacity:.4;text-decoration:line-through}.view-chip.denied{animation:denied .45s ease}@keyframes pulse{to{box-shadow:0 0 26px color-mix(in srgb,var(--accent) 60%,transparent)}}@keyframes denied{0%,to{transform:none}20%,60%{transform:translate(-4px);border-color:var(--danger)}40%,80%{transform:translate(4px)}}.hud-keys{position:absolute;right:22px;bottom:24px;display:flex;flex-direction:column;gap:6px;align-items:flex-end;font:400 12px var(--ui);color:var(--faint);letter-spacing:.05em}.hud-keys kbd{font-size:11px;color:var(--muted)}.hud-controls{position:absolute;left:24px;bottom:26px;display:flex;flex-direction:column;gap:8px;font:400 14px var(--ui);color:var(--muted);letter-spacing:.05em;opacity:0;transition:opacity 1s}.hud-controls.visible{opacity:1}.lock-prompt{position:absolute;left:50%;top:58%;transform:translate(-50%);padding:10px 20px;border-radius:999px;background:var(--panel);backdrop-filter:blur(10px);font:400 15px var(--ui);letter-spacing:.06em;opacity:0;transition:opacity .3s}.lock-prompt.visible{opacity:1}.screens{position:absolute;inset:0;z-index:20;pointer-events:none}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;opacity:0;transition:opacity .4s ease;pointer-events:auto;overflow-y:auto;background:radial-gradient(ellipse at center,#08081240,#080812b3)}.screen.visible{opacity:1}.screen:not(.visible){pointer-events:none}h2{font:300 30px var(--ui);letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px}h3{grid-column:1 / -1;margin-top:14px;font:500 12px var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}p{font:400 17px/1.6 var(--ui);margin-bottom:12px}.muted{color:var(--muted)}.panel{width:min(620px,100%);padding:34px 38px;border-radius:22px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 30px 80px #00000059}.panel.narrow{width:min(440px,100%)}.menu-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}.menu-row{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}.menu-btn,.toggle,.card-continue{appearance:none;border:1px solid var(--line);background:#ffffff0a;color:var(--ink);padding:12px 26px;border-radius:12px;font:400 16px var(--ui);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;outline:none}.menu-btn:hover,.menu-btn:focus-visible,.toggle:hover,.toggle:focus-visible,.card-continue:hover,.card-continue:focus-visible{background:#ffffff1f;border-color:#fff6;transform:translateY(-1px)}.menu-btn:focus-visible,.toggle:focus-visible,.tile:focus-visible,input[type=range]:focus-visible{box-shadow:0 0 0 2px var(--accent)}.menu-btn.primary{background:var(--ink);color:#14121c;border-color:var(--ink)}.menu-btn.primary:hover,.menu-btn.primary:focus-visible{background:#fff}.menu-btn:disabled{opacity:.35;cursor:default}.title-screen{align-items:flex-start;justify-content:center;padding-left:clamp(32px,9vw,160px);background:linear-gradient(90deg,#080812b8,#0808121a 60%)}.title-block{display:flex;flex-direction:column;align-items:flex-start}.game-title{font:200 clamp(44px,7.2vw,96px) var(--ui);letter-spacing:.32em;text-transform:uppercase;margin-right:-.32em;text-shadow:0 4px 40px rgba(0,0,0,.35)}.game-subtitle{margin:6px 0 40px;font:italic 400 clamp(18px,2vw,24px) var(--prose);color:var(--muted);letter-spacing:.04em}.title-screen .menu-list{min-width:260px}.title-screen .menu-btn{text-align:left}.title-footer{position:absolute;bottom:24px;left:clamp(32px,9vw,160px);font:400 12px var(--ui);letter-spacing:.14em;color:var(--faint)}.levels-screen{justify-content:flex-start;padding-top:48px}.screen-head{display:flex;align-items:baseline;justify-content:space-between;width:min(1180px,100%);margin-bottom:18px}.shard-total{display:inline-flex;align-items:center;gap:10px;font:400 14px var(--ui);color:var(--muted);letter-spacing:.08em}.chapter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;width:min(1180px,100%)}.chapter-col{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:18px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(16px)}.chapter-head{display:grid;grid-template-columns:1fr auto;margin-bottom:6px}.chapter-num{grid-column:1 / -1;font:500 11px var(--ui);letter-spacing:.28em;text-transform:uppercase;color:var(--accent)}.chapter-title{font:italic 400 24px var(--prose)}.chapter-count{align-self:end;font:400 13px var(--ui);color:var(--muted)}.tile{display:grid;grid-template-columns:26px 1fr auto;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:12px;border:1px solid transparent;background:#ffffff0a;color:var(--ink);font:400 14px var(--ui);text-align:left;cursor:pointer;transition:background .2s,border-color .2s;outline:none}.tile:not(.locked):hover,.tile:focus-visible{background:#ffffff1c;border-color:#ffffff40}.tile.locked{opacity:.35;cursor:default}.tile-num{font:500 13px var(--ui);color:var(--muted);text-align:center}.tile.solved .tile-num{color:#14121c;background:var(--accent);border-radius:50%;width:22px;height:22px;line-height:22px}.tile-meta{display:flex;gap:8px;align-items:center}.tile-time{font:400 12px var(--ui);font-variant-numeric:tabular-nums;color:var(--muted)}.tile-shard{display:inline-block;width:9px;height:9px;transform:rotate(45deg);border:1.5px solid var(--shard);opacity:.55}.tile-shard.found{background:var(--shard);opacity:1;box-shadow:0 0 8px var(--shard)}.settings-panel{width:min(980px,100%)}.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:0 44px;max-height:70vh;overflow-y:auto;padding-right:6px}.settings-group{display:flex;flex-direction:column;gap:2px}.setting{display:grid;grid-template-columns:1fr 170px 56px;align-items:center;gap:14px;padding:5px 0;font:400 15px var(--ui)}.setting .toggle{grid-column:2 / -1;padding:8px 14px;font-size:13px}.setting output{font:400 13px var(--ui);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--line);outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--ink);cursor:pointer}input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--ink);cursor:pointer}.nudge{display:none;margin:-4px 0 18px;padding:12px 16px;border-radius:12px;background:#ffffff0f;font:italic 400 18px/1.5 var(--prose);color:var(--ink)}.nudge.visible{display:block}.controls{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font:400 13px var(--ui)}.controls dt{color:var(--ink);letter-spacing:.1em;text-align:right}.controls dd{color:var(--muted)}.card-screen{background:#07070f;cursor:pointer}.card{max-width:640px;text-align:center}.card-kicker{font:500 13px var(--ui);letter-spacing:.5em;text-transform:uppercase;color:var(--accent);opacity:0;animation:rise 1.2s ease .2s forwards}.card-title{margin:14px 0 34px;font:italic 300 clamp(48px,7vw,84px) var(--prose);letter-spacing:.02em;text-transform:none;opacity:0;animation:rise 1.4s ease .5s forwards}.card-line{font:400 clamp(19px,2vw,23px)/1.6 var(--prose);color:var(--ink);opacity:0;animation:rise 1.4s ease forwards}.card-line.muted{color:var(--muted);font-family:var(--ui);font-size:15px;margin-top:18px}.card-continue{margin-top:34px;opacity:0;animation:rise 1s ease forwards}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.complete-screen{background:radial-gradient(ellipse at center,#fff6e014,#0808128c)}.complete{text-align:center}.complete-kicker{font:500 13px var(--ui);letter-spacing:.5em;text-transform:uppercase;color:var(--goal)}.complete-name{margin:12px 0 22px;font:italic 400 clamp(36px,5vw,58px) var(--prose);letter-spacing:.01em;text-transform:none}.complete-stats{display:flex;gap:40px;justify-content:center;font:300 28px var(--ui);font-variant-numeric:tabular-nums}.complete-stats span{display:flex;flex-direction:column;align-items:center;gap:4px}.complete-stats small{font:500 11px var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}.complete-shard{margin-top:18px;display:inline-flex;align-items:center;gap:10px;font:400 14px var(--ui);color:var(--muted)}.complete-shard.found{color:var(--shard)}.loading{position:fixed;inset:0;display:grid;place-items:center;font:300 14px var(--ui);letter-spacing:.4em;text-transform:uppercase;color:var(--faint)}@media(prefers-reduced-motion:reduce){.screen,.hud-hint,.hud-toast,.hud-title{transition-duration:.01s}}
