:root{font-family:system-ui,sans-serif;color:#173d47;background:#bddfe3;color-scheme:light}*{box-sizing:border-box}body{margin:0}#app{min-height:100svh}#scene{display:block;position:fixed;inset:0;width:100%;height:100%;touch-action:none}.panel{position:absolute;top:max(1.4rem,env(safe-area-inset-top));left:max(1.5rem,env(safe-area-inset-left));max-width:min(28rem,65vw);pointer-events:none}.eyebrow{font-weight:750;text-transform:uppercase;font-size:.7rem;letter-spacing:.17em}h1{margin:.35rem 0 .65rem;font-size:clamp(1.4rem,3vw,2.6rem);letter-spacing:-.055em;line-height:1.1}p{line-height:1.45}#status{font-size:.8rem}.notice{font-size:.72rem;max-width:24rem;padding:.65rem .8rem;background:#f7faf0da;border-left:3px solid #c2a450;border-radius:.4rem}.tools{position:absolute;right:max(1.3rem,env(safe-area-inset-right));top:max(1.5rem,env(safe-area-inset-top));display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;max-width:13rem;font-size:.75rem}button,select{font:inherit;color:#173d47;background:#f6fbf5ed;border:1px solid #ffffff;border-radius:1.2rem;padding:.7rem .9rem;min-height:44px}button{cursor:pointer}button:disabled{opacity:.45}button:focus-visible,select:focus-visible{outline:3px solid #b66c2b;outline-offset:2px}#joystick{position:fixed;left:max(1.5rem,env(safe-area-inset-left));bottom:max(6.5rem,calc(env(safe-area-inset-bottom) + 5rem));width:108px;height:108px;border-radius:50%;background:#eef8f344;border:1px solid #f9fff9aa;display:grid;place-items:center;touch-action:none;-webkit-user-select:none;user-select:none}#stick{width:44px;height:44px;border-radius:50%;background:#ffffffa0;box-shadow:0 3px 15px #173d4720;pointer-events:none}footer{position:fixed;left:0;right:0;bottom:0;padding:.6rem max(1.5rem,env(safe-area-inset-left)) max(.65rem,env(safe-area-inset-bottom));background:#e6f3eced;font-size:.7rem}footer p{margin:0 0 .2rem}#metrics{font-variant-numeric:tabular-nums;font-weight:650}.credits{margin:.25rem 0 0;font-size:.62rem}@media(max-width:600px){.panel{left:1rem;top:.7rem;max-width:64vw}h1{font-size:1.4rem}.tools{top:1rem;right:.7rem;max-width:30vw;gap:.25rem}.tools label{display:none}.tools button,.tools select{font-size:.65rem;width:100%;padding:.5rem}.notice{font-size:.65rem}#joystick{width:90px;height:90px;left:1rem;bottom:8rem}footer{font-size:.62rem;padding-left:1rem;padding-right:1rem}}.actions{position:fixed;right:max(1.5rem,env(safe-area-inset-right));bottom:8rem;display:flex;flex-direction:column;gap:.6rem;font-size:.75rem}.panel{text-shadow:0 1px 8px #ffffffb0}.panel{padding:.8rem 1rem;border:1px solid #ffffffbb;border-radius:1rem;background:#f5faf0e8;text-shadow:none}.panel .eyebrow{margin-top:.1rem}.panel .notice{margin-bottom:0;background:#fff8e6c9}@media(max-width:600px){.panel{padding:.6rem .7rem;max-width:60vw}.panel .notice{padding:.4rem .5rem}}