:root{color-scheme:dark;--mint:#a5f0cc;--paper:#fff0d3}*{box-sizing:border-box}body{margin:0;background:#100e1b;color:var(--paper);font:16px/1.5 ui-monospace,Consolas,monospace}main{max-width:1120px;margin:auto;padding:24px 20px}header{display:flex;justify-content:space-between;align-items:center;gap:15px}header a{color:var(--mint);text-underline-offset:4px}header span{font-size:12px;color:#c0adce}.heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:28px 0 20px}.heading>p{color:#c0adce;margin:0}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--mint);margin:0 0 5px}h1{font-size:clamp(25px,4vw,38px);line-height:1.2;margin:0}.game{border:3px solid #76608e;border-radius:12px;overflow:hidden;background:#241b32}.scene{position:relative;aspect-ratio:16/9;overflow:hidden;background:#181c35}canvas{display:block;width:100%;height:100%;touch-action:none;image-rendering:pixelated;outline:none}canvas:focus-visible{outline:3px solid var(--mint);outline-offset:-3px}.phone-link{position:absolute;left:58.5%;top:38%;width:6%;height:21%;min-width:28px;min-height:44px;border:2px solid transparent;border-radius:5px}.phone-link:hover,.phone-link:focus-visible{border-color:var(--mint);background:#a5f0cc11}.phone-link span{display:none;position:absolute;bottom:103%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;padding:4px 7px;background:#21172e;color:var(--mint)}.phone-link:hover span,.phone-link:focus-visible span{display:block}.controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;padding:18px 12px 8px}.movement{display:flex;gap:8px}button{font:700 16px ui-monospace,monospace;min-height:48px;min-width:48px;border:2px solid #0e0a16;border-radius:8px;background:var(--mint);color:#251933;padding:9px 15px;box-shadow:0 3px #100b19;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}button:active,button.held{transform:translateY(2px);box-shadow:0 1px #100b19}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}#interact{background:#ffe0a3}#pause{background:#d6c3ed}#status{text-align:center;padding:4px 16px 16px;margin:0;font-size:15px;min-height:60px}.hint,.note{text-align:center;color:#c4b3d5;font-size:14px;max-width:900px;margin:18px auto 0}.note{font-size:12px;margin-top:8px}.loading,.paused{position:absolute;inset:0;display:grid;place-items:center;background:#130e26bb;font-size:18px;padding:24px;text-align:center;pointer-events:none}.loading[hidden],.paused[hidden]{display:none}@media(max-width:600px){main{padding:16px 10px}.heading{display:block;margin:20px 0 16px}.heading>p{font-size:14px;margin-top:8px}header{font-size:14px}header span{font-size:10px}.controls{gap:8px}button{font-size:14px;padding:8px 12px}.phone-link{min-width:24px;min-height:32px}#status{font-size:14px}.hint{font-size:13px}}

#play{background:#ffcf91}#courage{text-align:center;font-size:13px;color:var(--mint);letter-spacing:1px;margin:8px 0}

.paused{inset:12px auto auto 50%;transform:translateX(-50%);padding:8px 16px;border-radius:8px;background:#130e26dd;font-size:14px;white-space:nowrap}

.skip-intro{position:absolute;top:12px;right:12px;background:#251933e8;color:var(--paper);font-size:14px;z-index:3}.skip-intro[hidden],.phone-link[hidden]{display:none}.intro-tools{text-align:center;margin:14px 0 0}#replay-intro{background:transparent;color:var(--mint);border:1px solid #76608e;font-size:14px;box-shadow:none}.intro-playing~.controls{opacity:.5}

.audio-controls{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin:16px 0}.audio-controls label{font-size:14px}.audio-controls input{width:130px;min-height:44px;accent-color:var(--mint)}#sound-toggle{font-size:14px;background:#d6c3ed}
