@font-face{font-family:Nunito;src:url('./nunito-500.woff2') format('woff2');font-weight:400 600;font-display:swap}
@font-face{font-family:Nunito;src:url('./nunito-700.woff2') format('woff2');font-weight:700 900;font-display:swap}
:root{font-family:Nunito,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#292b30;background:#f5f5f7;font-synthesis:none;--accent:#8259de;--muted:#777983}
*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.45}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}[hidden]{display:none!important}
#game{position:relative;width:100%;height:100vh;height:100dvh;min-height:320px;overflow:hidden}#scene{position:absolute;inset:0;width:100%;height:100%;outline:none;touch-action:none}#scene:focus-visible{box-shadow:inset 0 0 0 2px #8259de33}#scene canvas{display:block;width:100%;height:100%}
.topbar{position:absolute;top:max(26px,env(safe-area-inset-top));left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;letter-spacing:-.6px;min-height:44px}.brand-mark{width:23px;height:23px;background:#292b30;border-radius:6px;box-shadow:inset -4px -4px 0 #16181d;transform:rotate(-8deg)}.brand-divider{font-weight:400;color:#c7c8cf;margin:0 4px}.brand-sub{font-size:14px;font-weight:500;letter-spacing:0;color:#737681}.score{background:#fffffff0;border:1px solid #fff;border-radius:24px;box-shadow:0 4px 20px #27292d07;display:flex;align-items:center;gap:7px;padding:12px 18px;min-height:48px}.score strong{font-variant-numeric:tabular-nums;font-size:20px;font-weight:800;min-width:21px;text-align:right}.score-dot{height:7px;width:7px;background:var(--accent);border-radius:100%;margin-right:6px}.score-total{color:#9698a2}.score-label{font-size:12px;margin-left:7px;color:#747680}.score.picked{animation:score-pop .35s ease-out}@keyframes score-pop{45%{transform:scale(1.12);box-shadow:0 0 0 8px #8259de16}}
.intro{position:absolute;top:104px;left:34px;pointer-events:none;max-width:230px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:800;color:#8b8d96;margin:0 0 11px}.intro h1{font-size:clamp(23px,2.3vw,32px);line-height:1.15;letter-spacing:-1.2px;font-weight:750;margin:0 0 9px}.intro>p:last-child{font-size:12px;color:var(--muted);margin:0;line-height:1.5}
.bottom{position:absolute;bottom:max(26px,env(safe-area-inset-bottom));left:235px;right:max(32px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:18px;pointer-events:none}.bottom>*{pointer-events:auto}.hint{font-size:12px;color:var(--muted);display:flex;gap:12px;align-items:center;margin:0;line-height:1.6}.hint-secondary{font-size:11px}.keys{color:#52545e;font-family:system-ui;letter-spacing:4px;background:#ffffffc9;padding:9px 9px 10px 13px;border:1px solid #fff;border-radius:10px;white-space:nowrap}.actions{display:flex;gap:8px}.actions button{border:1px solid #e1e1e7;background:#fffffff0;border-radius:12px;min-height:44px;padding:0 14px;font-size:12px;color:#52545e}.actions button:hover{background:#fff;border-color:#c6b9e7}.actions button span{margin-left:8px;font-size:16px}.actions button:active{transform:translateY(1px)}
.joystick{position:absolute;left:max(30px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));width:160px;text-align:center;user-select:none;-webkit-user-select:none}#joystick-pad{position:relative;width:152px;height:152px;margin:auto;border:1px solid #ffffff;border-radius:50%;background:radial-gradient(circle,#ffffffd9 0 42%,#f3f0fae6 43% 67%,#fffffff2 68%);box-shadow:0 8px 32px #292b3010,inset 0 0 0 1px #dedbe8;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}#joystick-pad.active{cursor:grabbing;box-shadow:0 8px 32px #8259de1a,inset 0 0 0 2px #bba5e6}.stick-ring{position:absolute;inset:20px;border:1px dashed #c7bddc;border-radius:50%;pointer-events:none}.stick-axis{position:absolute;background:#dcd7e7;pointer-events:none}.axis-x{left:12px;right:12px;top:50%;height:1px}.axis-y{top:12px;bottom:12px;left:50%;width:1px}#joystick-thumb{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#494950,#25262d);border:1px solid #55545d;box-shadow:0 6px 12px #24222c33,inset 0 2px 1px #ffffff22;pointer-events:none;will-change:transform}#joystick-thumb>span{width:9px;height:9px;border-radius:50%;background:#af8aee;box-shadow:0 0 12px #ae80ff44}#joystick-help{font-size:11px;font-weight:700;line-height:1.4;margin:10px 0 8px;color:#45464e}#joystick-help span{display:block;font-size:10px;font-weight:500;color:var(--muted);margin-top:2px}.speed-track{width:80px;height:3px;background:#dcd8e6;border-radius:8px;margin:auto;overflow:hidden}#speed-fill{display:block;width:100%;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}#speed-label{display:block;font-size:9px;color:#8b819c;margin-top:4px;min-height:12px}
.radar{position:absolute;top:99px;right:32px;width:158px;padding:9px;background:#fffffff0;border:1px solid #fff;border-radius:18px;pointer-events:none;box-shadow:0 4px 24px #27292d06}.radar-heading{display:flex;justify-content:space-between;font-size:9px;color:#747680;padding:2px}.radar-heading b{color:#363842}.radar canvas{width:100%;height:auto;display:block}.clock{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eeeeF3;padding:8px 2px 0;gap:8px}.clock>span{font-size:9px;max-width:68px;line-height:1.4;color:#777983}.clock strong{font-size:22px;font-variant-numeric:tabular-nums;font-weight:800}.clock small{font-size:11px;font-weight:500;color:#777983}.clock.urgent strong{color:#b8542f}
#notice{position:absolute;left:50%;bottom:max(102px,calc(env(safe-area-inset-bottom) + 75px));transform:translateX(-50%);color:var(--accent);font-size:12px;pointer-events:none;transition:opacity .2s;opacity:0;background:#fffffff2;border:1px solid #e9e0f8;border-radius:14px;padding:11px 17px;width:max-content;max-width:min(380px,calc(100vw - 40px));line-height:1.5;text-align:center}#notice.visible{opacity:1}
.overlay{position:absolute;inset:0;background:#f5f5f7b8;backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto}.panel{width:min(390px,100%);text-align:center;border-radius:28px;background:#fff;padding:36px 32px 27px;box-shadow:0 24px 90px #26293612;border:1px solid #ededf1}.panel-symbol{height:48px;display:grid;place-items:center;margin-bottom:25px}.panel-symbol span{width:40px;height:40px;background:#292b30;border-radius:10px;transform:rotate(-12deg);box-shadow:7px 8px 0 #e7e0f6}.panel h2{font-size:24px;letter-spacing:-.8px;line-height:1.15;margin:12px 0}.panel>p:not(.eyebrow){font-size:14px;line-height:1.6;color:var(--muted);margin:0 auto 22px}.panel button{display:block;width:100%;border:0;border-radius:12px;background:#292b30;color:#fff;min-height:48px;padding:12px 20px;font-weight:700}.panel button:hover{background:#42444c}.back-link{font-size:12px;color:#858791;display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-top:12px}#progress{height:4px;background:#edeaf4;border-radius:10px;overflow:hidden;margin:24px 0 10px}#progress>span{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}.noscript{position:absolute;inset:0;display:grid;place-content:center;background:#fff;padding:30px;z-index:5}.noscript a{text-decoration:underline}
@media(max-width:700px){.topbar{left:max(18px,env(safe-area-inset-left));right:max(18px,env(safe-area-inset-right));top:max(16px,env(safe-area-inset-top))}.brand{font-size:19px;gap:8px}.brand-sub{font-size:11px}.brand-divider{margin:0}.score{padding:10px 12px;gap:4px}.score-label{display:none}.score-dot{margin-right:2px}.intro{left:20px;top:86px;max-width:185px}.intro .eyebrow{display:none}.intro h1{font-size:23px}.intro>p:last-child{font-size:11px;max-width:160px}.radar{top:80px;right:16px;width:116px;padding:6px;border-radius:14px}.radar-heading{font-size:8px}.clock{padding:5px 1px 0;gap:4px}.clock>span{font-size:8px;max-width:52px}.clock strong{font-size:18px}.joystick{left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:152px}.bottom{left:auto;right:max(18px,env(safe-area-inset-right));bottom:max(26px,env(safe-area-inset-bottom))}.hint{display:none}.actions{flex-direction:column;gap:8px}.actions button{min-width:112px}#notice{bottom:260px;font-size:11px;max-width:calc(100vw - 36px)}}
@media(max-width:370px){.brand-sub,.brand-divider{display:none}.intro{max-width:165px}.intro h1{font-size:21px}.intro>p:last-child{max-width:138px}.radar{width:105px}.joystick{left:12px;width:140px}#joystick-pad{width:140px;height:140px}.bottom{right:12px}.actions button{min-width:104px}}
@media(max-height:500px){.topbar{top:max(12px,env(safe-area-inset-top))}.brand-sub{font-size:12px}.intro{top:76px;left:26px}.intro .eyebrow,.intro>p:last-child{display:none}.intro h1{font-size:22px}.radar{top:72px;right:24px;width:112px;padding:5px}.radar canvas{max-height:94px;width:94px;margin:auto}.radar-heading{font-size:8px}.clock{padding-top:4px}.clock strong{font-size:17px}.clock>span{font-size:8px}.joystick{left:max(24px,env(safe-area-inset-left));bottom:max(13px,env(safe-area-inset-bottom));width:128px}#joystick-pad{width:120px;height:120px}#joystick-thumb{width:48px;height:48px;margin:-24px 0 0 -24px}.stick-ring{inset:16px}#joystick-help{margin:6px 0 0;font-size:10px}#joystick-help span,.speed-track,#speed-label{display:none}.bottom{left:auto;right:max(24px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}.hint{display:none}.actions{flex-direction:row;gap:6px}.actions button{min-width:0;padding-inline:12px}.actions button span{display:none}#notice{bottom:76px;font-size:11px;max-width:45vw}.panel{padding:19px 24px}.panel-symbol{display:none}.panel>p:not(.eyebrow){margin-bottom:12px}.panel .eyebrow{margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
.actions .button-label{margin-left:0;font-size:12px}.actions #sound.muted{opacity:.65;text-decoration:line-through}.view-controls{position:absolute;z-index:2;right:32px;bottom:90px;padding:16px;border:1px solid #e2dce9;background:#fffffff5;border-radius:18px;box-shadow:0 8px 32px #292b3012;width:228px}.view-controls p{font-size:12px;font-weight:700;margin:0 0 9px}.view-controls>div{display:flex;gap:4px}.view-controls button{min-width:44px;min-height:44px;border:1px solid #e4e0ea;border-radius:10px;background:#f8f6fc;color:#61566f;font-size:20px}.view-controls>button{width:100%;font-size:11px;margin-top:8px}.view-controls small{display:block;font-size:10px;color:#85808f;line-height:1.5;margin-top:10px}.actions button>span[aria-hidden]{display:inline-block}
@media(max-width:900px){.bottom .hint{display:none}}
@media(max-width:700px){.actions{display:grid;grid-template-columns:repeat(2,48px);gap:8px}.actions button{min-width:48px;padding:0}.actions .button-label{display:none}.actions button>span[aria-hidden]{margin-left:0;font-size:19px}.actions #hint-route{grid-column:1 / -1;font-size:11px}.actions #hint-route>span{font-size:15px;margin-left:8px}.view-controls{right:18px;bottom:252px;width:220px}#notice{bottom:260px}}
@media(max-height:500px){.actions{display:flex;gap:6px}.actions button{min-width:44px;padding-inline:12px}.actions .button-label{display:none}.actions button>span[aria-hidden]{margin-left:0;display:inline-block;font-size:18px}.view-controls{right:24px;bottom:76px;width:228px;padding:12px}.view-controls small{display:none}.view-controls>button{min-height:36px}.view-controls p{margin-bottom:6px}.actions #hint-route{font-size:11px}#notice{max-width:42vw;bottom:76px}}

/* Keep instructions readable when dark walls pass behind the HUD. */
.joystick{isolation:isolate}.joystick::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-5px;right:-5px;bottom:-6px;height:68px;border-radius:12px;background:#fcfbfe;box-shadow:0 2px 12px #25242e08}#speed-label{color:#696174}
@media(max-height:500px){.joystick::before{height:26px;bottom:-5px}}
/* The completion panorama stays clear on small screens. The live region still
   announces success; the score and following panel provide the visible status. */
@media(max-width:700px),(max-height:500px){#notice.sector-complete{opacity:0;transition:none}}