:root{--space-deep: oklch(.16 .055 275);--space-mid: oklch(.3 .08 285);--brand: oklch(.4 .15 270);--brand-bright: oklch(.72 .13 280);--accent: oklch(.75 .155 60);--accent-hot: oklch(.65 .19 40);--paper: oklch(.97 .01 275);--ink: oklch(.22 .03 275);--ink-soft: oklch(.45 .03 275);--bug: oklch(.7 .2 330);--font-pixel: "Silkscreen", monospace;--font-hand: "Patrick Hand", "Comic Sans MS", cursive;--z-hud: 10;--z-dialog: 20;--z-boot: 30}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--space-deep);color:var(--ink);font-family:var(--font-hand);-webkit-font-smoothing:antialiased}#app,#app canvas{position:fixed;inset:0;width:100%;height:100%}#app canvas{display:block;touch-action:none}button{font:inherit;cursor:pointer}[hidden]{display:none!important}#hud{position:fixed;inset:0;z-index:var(--z-hud);pointer-events:none;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))}.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}.hud-right{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.hud-chip{font-family:var(--font-pixel);font-size:12px;letter-spacing:.04em;color:var(--paper);background:#080924b8;border:2px solid oklch(.72 .13 280 / .5);border-radius:8px;padding:7px 10px 5px;backdrop-filter:blur(4px)}.hud-title{color:var(--brand-bright)}.hud-badge{color:var(--accent);border-color:#f4933599}.hud-btn{pointer-events:auto}.hud-btn:hover,.hud-btn:focus-visible{background:#2b2654e6}.hud-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hud-alert{position:absolute;top:max(14px,env(safe-area-inset-top));left:50%;transform:translate(-50%);font-family:var(--font-pixel);font-size:12px;color:var(--paper);background:#9e170ceb;border:2px solid var(--accent-hot);border-radius:8px;padding:7px 12px 5px;animation:alert-pulse 2.4s ease-in-out infinite}@keyframes alert-pulse{0%,to{opacity:1}50%{opacity:.72}}.key{display:inline-block;font-family:var(--font-pixel);font-size:11px;color:var(--ink);background:var(--paper);border-radius:5px;border-bottom:3px solid oklch(.7 .03 275);padding:3px 6px 1px;margin:0 2px}.hud-hint,.hud-prompt{position:absolute;left:50%;transform:translate(-50%);font-family:var(--font-pixel);font-size:12px;color:var(--paper);text-shadow:0 2px 4px oklch(.16 .055 275 / .9);transition:opacity .6s ease-out}.hud-hint{bottom:max(20px,env(safe-area-inset-bottom));white-space:nowrap}@media (max-width: 480px){.hud-hint{font-size:10px}.hud-hint .key{font-size:9px;padding:2px 4px 1px}}.hud-hint.faded{opacity:0}.hud-prompt{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 34px);background:#080924b8;border:2px solid var(--accent);border-radius:8px;padding:6px 12px 5px}.hud-prompt .key{margin-right:8px}#toasts{position:absolute;top:64px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:90vw}.toast{font-family:var(--font-pixel);font-size:12px;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:8px;box-shadow:3px 3px #0809248c;padding:8px 14px 6px;animation:toast-in .25s cubic-bezier(.22,1,.36,1)}.toast.leaving{opacity:0;transition:opacity .4s ease-out}@keyframes toast-in{0%{opacity:0;transform:translateY(-8px) scale(.96)}}#joystick{position:absolute;width:128px;height:128px;border-radius:50%;border:2px solid oklch(.72 .13 280 / .5);background:#08092466;pointer-events:none}#joystick-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:#959af4cc;border:2px solid var(--paper)}#action-btn{position:absolute;right:max(26px,env(safe-area-inset-right));bottom:calc(max(26px,env(safe-area-inset-bottom)) + 10px);width:76px;height:76px;border-radius:50%;font-family:var(--font-pixel);font-size:13px;color:var(--ink);background:#f49335eb;border:3px solid var(--paper);box-shadow:0 4px #08092499;pointer-events:auto;touch-action:none;opacity:.45;transition:opacity .2s ease-out,transform .1s ease-out}#action-btn.armed{opacity:1}#action-btn:active{transform:scale(.92)}#jump-btn{position:absolute;right:calc(max(26px,env(safe-area-inset-right)) + 94px);bottom:calc(max(26px,env(safe-area-inset-bottom)) + 42px);width:66px;height:66px;border-radius:50%;font-family:var(--font-pixel);font-size:11px;color:var(--paper);background:#2a3c97e0;border:3px solid var(--paper);box-shadow:0 4px #08092499;pointer-events:auto;touch-action:none;opacity:.8;transition:transform .1s ease-out}#jump-btn:active{transform:scale(.92)}body.rotated{position:fixed;top:0;left:0;width:100vh;height:100vw;width:100dvh;height:100dvw;transform:rotate(90deg) translateY(-100%);transform-origin:top left;overflow:hidden}#rotate-overlay{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:#080924d1;text-align:center;padding:24px;pointer-events:none;animation:rotate-hint-in .4s ease-out}@keyframes rotate-hint-in{0%{opacity:0}}.rotate-phone{width:46px;height:78px;border:4px solid var(--paper);border-radius:10px;animation:rotate-hint 1.6s ease-in-out infinite}@keyframes rotate-hint{0%,25%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}.rotate-title{font-family:var(--font-pixel);font-size:16px;color:var(--paper);letter-spacing:1px}.rotate-sub{font-size:18px;color:#959af4}@media (prefers-reduced-motion: reduce){.rotate-phone{animation:none;transform:rotate(-90deg)}}#minimap{position:absolute;top:58px;right:12px;width:150px;height:150px;border:3px solid var(--ink);border-radius:16px;background:#0809248c;box-shadow:3px 3px #0809248c}@media (max-width: 700px){#minimap{width:108px;height:108px;top:54px}}#dialog{position:fixed;inset:0;z-index:var(--z-dialog);display:flex;align-items:flex-end;justify-content:center;padding:0 16px calc(max(24px,env(safe-area-inset-bottom)) + 18px);pointer-events:auto}.dialog-box{position:relative;width:min(560px,100%);background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:12px;box-shadow:5px 5px #08092499;padding:26px 20px 18px;animation:dialog-in .18s cubic-bezier(.22,1,.36,1)}@keyframes dialog-in{0%{opacity:0;transform:scale(.96) translateY(8px)}}.dialog-name{position:absolute;top:-16px;left:14px;font-family:var(--font-pixel);font-size:12px;color:var(--paper);background:var(--brand);border:2px solid var(--ink);border-radius:7px;box-shadow:2px 2px #08092480;padding:5px 10px 3px;transform:rotate(-1.5deg);max-width:80%}.dialog-name.tone-bug{background:#83297e}.dialog-name.tone-ops{background:#454b69}.dialog-name.tone-alert{background:var(--accent-hot)}.dialog-name.tone-me{background:#137738}.dialog-text{font-size:19px;line-height:1.45;min-height:3.9em;white-space:pre-wrap}.dialog-next{display:block;margin:10px 0 0 auto;font-family:var(--font-pixel);font-size:14px;color:var(--paper);background:var(--brand);border:2px solid var(--ink);border-radius:8px;box-shadow:2px 2px #08092480;padding:8px 14px 6px}.dialog-next:hover{filter:brightness(1.15)}.dialog-next:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.dialog-next:active{transform:translate(1px,1px);box-shadow:1px 1px #08092480}#contact-panel{position:fixed;inset:0;z-index:var(--z-dialog);display:flex;align-items:center;justify-content:center;padding:20px;background:#0809248c}.contact-box{width:min(460px,100%);background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px #08092499;padding:28px 24px 22px;text-align:center}.contact-box h2{font-family:var(--font-pixel);font-size:16px;margin-bottom:12px;color:var(--brand)}.contact-box p{font-size:19px;line-height:1.45;color:var(--ink)}.contact-actions{display:flex;flex-direction:column;gap:10px;margin:18px 0 6px}.contact-actions a{font-family:var(--font-pixel);font-size:13px;text-decoration:none;color:var(--paper);background:var(--brand);border:2px solid var(--ink);border-radius:9px;box-shadow:3px 3px #08092480;padding:12px 16px 10px}.contact-actions a.primary{background:var(--accent-hot)}.contact-actions a:hover{filter:brightness(1.12)}.contact-actions a:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.contact-close{font-family:var(--font-hand);font-size:17px;background:none;border:none;color:var(--ink-soft);text-decoration:underline;margin-top:8px}.contact-close:hover{color:var(--ink)}#piano-panel{position:fixed;inset:0;z-index:var(--z-dialog);display:flex;align-items:flex-end;justify-content:center;padding:20px;background:#08092473}.piano-box{width:min(640px,100%);background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:6px 6px #08092499;padding:22px 20px 16px;margin-bottom:max(20px,env(safe-area-inset-bottom));text-align:center}.piano-box h2{font-family:var(--font-pixel);font-size:15px;color:var(--brand);margin-bottom:14px}#piano-keys{position:relative;height:150px;border:2px solid var(--ink);border-radius:8px;overflow:hidden;background:var(--ink)}.piano-key{position:absolute;top:0;bottom:0;border:1px solid var(--ink);border-radius:0 0 6px 6px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;transition:transform .06s ease-out,filter .06s ease-out}.piano-key span{font-family:var(--font-pixel);font-size:10px;color:var(--ink-soft);pointer-events:none}.piano-key.white{background:var(--paper)}.piano-key.black{height:58%;bottom:auto;background:var(--ink);border-radius:0 0 5px 5px;z-index:2}.piano-key.black span{color:#aaadbb}.piano-key.down,.piano-key:active{filter:brightness(.82);transform:translateY(2px)}.piano-key.black.down,.piano-key.black:active{filter:brightness(1.6)}.piano-hint{font-size:16px;color:var(--ink-soft);margin-top:12px}.piano-hint .key{font-size:10px}#boot{position:fixed;inset:0;z-index:var(--z-boot);display:grid;place-items:center;background:radial-gradient(ellipse 90% 70% at 50% 110%,var(--space-mid),transparent),var(--space-deep);overflow:hidden;transition:opacity .5s ease-out}#boot.leaving{opacity:0;pointer-events:none}.boot-inner{position:relative;text-align:center;padding:24px;max-width:640px}.boot-stars,.fb-stars{position:absolute;inset:-100vh -100vw;background-image:radial-gradient(1.5px 1.5px at 20% 30%,oklch(.9 .02 280 / .9),transparent),radial-gradient(1px 1px at 40% 70%,oklch(.9 .02 280 / .7),transparent),radial-gradient(2px 2px at 60% 20%,oklch(.85 .05 60 / .8),transparent),radial-gradient(1px 1px at 80% 50%,oklch(.9 .02 280 / .8),transparent),radial-gradient(1.5px 1.5px at 10% 80%,oklch(.9 .02 280 / .6),transparent),radial-gradient(1px 1px at 90% 85%,oklch(.85 .05 330 / .7),transparent),radial-gradient(1.5px 1.5px at 70% 90%,oklch(.9 .02 280 / .75),transparent);background-size:480px 480px;pointer-events:none}.boot-kicker{font-family:var(--font-pixel);font-size:13px;color:var(--accent);margin-bottom:18px}.boot-title{font-family:var(--font-pixel);font-weight:700;font-size:clamp(2.2rem,8vw,4.5rem);line-height:1.05;color:var(--paper);text-shadow:4px 4px 0 var(--brand);text-wrap:balance}.boot-sub{font-family:var(--font-pixel);font-size:clamp(11px,2.5vw,14px);color:var(--brand-bright);margin-top:14px}.boot-desc{font-size:clamp(19px,3vw,22px);line-height:1.5;color:#d5d5eb;margin-top:26px}.boot-desc strong{color:var(--bug)}.boot-actions{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:30px}.boot-btn{font-family:var(--font-pixel);font-size:16px;color:var(--ink);background:var(--accent);border:3px solid var(--paper);border-radius:12px;box-shadow:0 5px #80421a,0 10px 24px #f4933559;padding:16px 26px 13px;transition:transform .12s ease-out,box-shadow .12s ease-out}.boot-btn:hover{transform:translateY(-2px)}.boot-btn:active{transform:translateY(2px);box-shadow:0 2px #80421a}.boot-btn:focus-visible{outline:3px solid var(--paper);outline-offset:3px}.boot-link{font-family:var(--font-hand);font-size:18px;background:none;border:none;color:var(--brand-bright);text-decoration:underline;text-underline-offset:3px}.boot-link:hover{color:var(--paper)}.boot-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}.boot-controls{font-family:var(--font-pixel);font-size:11px;color:#8282a4;margin-top:26px}#fallback{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;background:var(--space-deep);padding:40px 18px 80px}#fallback .fb-stars{position:fixed;inset:0}.fb-wrap{position:relative;max-width:620px;margin:0 auto}.fb-header{text-align:center;margin-bottom:40px;position:relative}.fb-header .boot-kicker{margin-bottom:12px}.fb-header h1{font-family:var(--font-pixel);font-weight:700;font-size:clamp(1.8rem,7vw,3rem);color:var(--paper);text-shadow:3px 3px 0 var(--brand);line-height:1.1;text-wrap:balance}.fb-header .fb-role{font-family:var(--font-pixel);font-size:12px;color:var(--brand-bright);margin-top:12px}.fb-enter{margin-top:18px}.fb-panel{position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:14px;box-shadow:5px 5px #00000073;padding:30px 24px 22px;margin-bottom:34px}.fb-panel .fb-tag{position:absolute;top:-15px;left:16px;font-family:var(--font-pixel);font-size:11px;color:var(--paper);background:var(--brand);border:2px solid var(--ink);border-radius:7px;padding:5px 10px 3px;transform:rotate(-1.5deg)}.fb-panel h2{font-family:var(--font-pixel);font-size:17px;color:var(--ink);margin-bottom:10px}.fb-panel p{font-size:19px;line-height:1.5;color:var(--ink);margin-bottom:10px;max-width:68ch}.fb-panel ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}.fb-panel li{font-family:var(--font-pixel);font-size:11px;background:#dbdcf2;border:2px solid var(--ink);border-radius:7px;padding:5px 9px 3px}.fb-contact{text-align:center}.fb-contact .contact-actions{margin-top:16px}.fb-footer{text-align:center;font-family:var(--font-pixel);font-size:10px;color:#7d7c9d;margin-top:20px;line-height:1.9}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}