*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#a9c0c3;font-family:system-ui,-apple-system,sans-serif;color:#fff}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;top:calc(14px + env(safe-area-inset-top));left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:2px;text-shadow:0 2px 8px #000}header b{color:#ffd18b}button{font:inherit;border:1px solid #ffffff55;background:#183732d9;color:white;border-radius:12px;padding:12px 18px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}button:disabled{opacity:.5;cursor:wait}button:focus-visible{outline:3px solid #ffc06d}#hud{position:absolute;top:calc(65px + env(safe-area-inset-top));left:18px;right:18px;display:flex;gap:8px}#hud>div{padding:9px 12px;background:#142d29bc;backdrop-filter:blur(8px);border:1px solid #ffffff25;border-radius:12px;min-width:90px}small{font-size:9px;letter-spacing:1px}strong{display:block;font-size:17px;margin-top:3px}#menu{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:28px;background:linear-gradient(90deg,#102a28ed,#102a28a0 70%,#102a2833);overflow:auto}#menu[hidden],#controls[hidden]{display:none}.eyebrow{font-size:10px;letter-spacing:2px;color:#ffd18b}h1{font-size:clamp(32px,8vw,66px);line-height:1.03;font-weight:650;letter-spacing:-2px;margin:20px 0}p{font-size:14px;line-height:1.7;color:#e0eae6}.instructions{font-size:12px;line-height:1.9;color:#c3d7ce;margin:8px 0 24px}#start{background:#efb260;color:#193a31;font-weight:750;min-width:210px;min-height:52px;border:0}#loading{font-size:11px;margin:10px 0}#menu>small{margin-top:18px;letter-spacing:0;color:#b5cac1}#controls{position:absolute;bottom:calc(24px + env(safe-area-inset-bottom));left:14px;right:14px;display:flex;justify-content:space-between;gap:8px}#controls>div{display:flex;gap:8px}#controls button{padding:18px 12px;min-width:54px;min-height:62px;font-size:11px;font-weight:750}#throttle{background:#d9a65aeb;color:#193a31}#brake{background:#6b3c36dd}#help{position:absolute;bottom:calc(100px + env(safe-area-inset-bottom));width:100%;text-align:center;font-size:8px;letter-spacing:1px;pointer-events:none;color:#f2f1db;text-shadow:0 1px 4px #000}#notice{position:absolute;top:calc(137px + env(safe-area-inset-top));width:100%;text-align:center;font-size:12px;text-shadow:0 2px 5px #000;pointer-events:none}button.pressed{filter:brightness(1.4);transform:translateY(2px)}@media(max-height:540px){#menu{padding:18px 28px}h1{font-size:30px;margin:10px 0}p{margin:5px 0}.instructions{margin:4px 0 10px;font-size:10px}#menu>small{margin-top:6px}#hud{top:55px}#hud>div{padding:5px 10px}#notice{top:112px}}
