:root{--bg: #dce5d6;--surface: #fff9ef;--ink: #293c37;--muted: #52645a;--primary: #335c49;--accent: #e98672;--cyan: #58cad1;--border: #a9b8a5;--shadow: #31453624;--scrim: #263b3b38;--white: #ffffff;--font-display: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;--font-body: "Trebuchet MS", system-ui, sans-serif;--ease: cubic-bezier(.22, 1, .36, 1);color:var(--ink);font-family:var(--font-body);font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:clip}body{background:var(--bg)}button,select{font:inherit;color:inherit}button{cursor:pointer;border:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--ink);outline-offset:4px}dialog .primary:focus,dialog .secondary:focus{outline:3px solid var(--ink);outline-offset:4px}button{transition:transform .12s var(--ease)}button:active{transform:scale(.97)}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}.shell{min-height:100svh;display:grid;place-content:center;justify-items:center;gap:16px;padding:24px}.desktop-brand{text-align:center}.wordmark{font:900 38px / 1 var(--font-display);letter-spacing:-2px}.wordmark span{color:var(--primary);font-size:14px;margin-left:3px}.desktop-brand p{margin:8px 0 0;font-size:12px;color:var(--muted)}.game{width:min(440px,calc((100svh - 150px)*.5625));aspect-ratio:9 / 16;position:relative;overflow:clip;border-radius:28px;isolation:isolate;background:var(--bg);box-shadow:0 20px 60px var(--shadow),0 0 0 6px var(--surface)}canvas{display:block;width:100%;height:100%;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;opacity:.15;mix-blend-mode:soft-light;background:radial-gradient(circle at 50% 48%,#fff2da 0% 38%,#6b4a2a)}.hud{position:absolute;inset:max(16px,env(safe-area-inset-top)) 16px auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;pointer-events:none}.charge,.distance,.icon-button{background:var(--surface);border-radius:16px;box-shadow:0 3px 0 var(--shadow)}.charge{display:flex;align-items:center;gap:8px;padding:12px;justify-self:start;font-size:14px;font-weight:800}.charge.recharged{animation:recharge .48s var(--ease)}@keyframes recharge{0%,to{transform:scale(1)}30%{transform:scale(1.06);background:#dff3d7}}.charge.low .battery-icon{animation:lowCharge 1.1s var(--ease) infinite}@keyframes lowCharge{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}#charge-value>span{font-size:10px;padding-left:1px}.battery-icon{height:19px;width:30px;border:2px solid var(--primary);border-radius:5px;display:flex;gap:2px;padding:2px;position:relative}.battery-icon:after{content:"";position:absolute;width:3px;height:7px;background:var(--primary);top:4px;right:-5px;border-radius:0 2px 2px 0}.battery-icon i{flex:1;background:var(--primary);border-radius:1px}.battery-icon i.empty{background:var(--border)}.distance{padding:12px 16px;white-space:nowrap;font-size:18px;font-variant-numeric:tabular-nums;font-weight:800}.distance>span:last-child{font-size:12px;font-weight:400}.icon-button{justify-self:end;width:44px;height:44px;display:grid;place-items:center;pointer-events:auto}.pause-icon{width:14px;height:17px;border-left:5px solid var(--ink);border-right:5px solid var(--ink);border-radius:2px}.welcome{position:absolute;inset:auto 16px 24px;padding:20px;background:var(--surface);border-radius:24px;text-align:center;box-shadow:0 8px 32px var(--shadow)}.welcome-kicker,.dialog-kicker{font-size:12px;color:var(--muted)}h1{font:900 clamp(26px,4vw,32px) / 1.06 var(--font-display);letter-spacing:-1px;margin:8px 0}.welcome p{font-size:13px;line-height:1.5;margin:0 0 12px;color:var(--muted)}.primary,.secondary{width:100%;min-height:48px;padding:12px 20px;border-radius:16px;font-weight:700;font-size:15px;white-space:nowrap}.primary{background:var(--primary);color:var(--surface)}.secondary{background:transparent;margin-top:24px;font-weight:600;color:var(--muted)}.secondary.armed{color:var(--ink);font-weight:700}.gesture-hint{display:block;margin-top:12px;font-size:12px;color:var(--muted)}.notice{position:absolute;top:15%;left:50%;--notice-shift: 0px;transform:translate(calc(-50% + var(--notice-shift)),-6px);opacity:0;transition:opacity .16s var(--ease),transform .16s var(--ease);pointer-events:none;background:var(--surface);border-radius:16px;padding:12px 16px;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 4px 16px var(--shadow)}.notice.visible{opacity:1;transform:translate(calc(-50% + var(--notice-shift)))}.steering-hint{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);white-space:nowrap;font-size:12px;background:var(--surface);padding:12px 20px;border-radius:16px;pointer-events:none}dialog{width:min(340px,calc(100vw - 48px));border:0;padding:28px 24px 16px;border-radius:24px;color:var(--ink);background:var(--surface);text-align:center;box-shadow:0 16px 60px var(--shadow)}dialog::backdrop{background:var(--scrim)}dialog h2,.error h2{font:800 27px / 1.1 var(--font-display);letter-spacing:-.7px;margin:12px 0;text-wrap:balance}dialog p{font-size:14px;line-height:1.5;color:var(--muted)}.view-settings{margin:24px 0;text-align:left}.view-settings label{display:block;font-size:12px;margin-bottom:8px}.controls-hint{margin:16px 0 0;font-size:12px;color:var(--muted);text-align:left}select{width:100%;border:1px solid var(--muted);background:var(--surface);border-radius:12px;padding:12px;min-height:44px;font-size:14px}.desktop-hint{display:flex;gap:24px;color:var(--muted);font-size:11px}.error{position:absolute;inset:0;display:grid;place-content:center;padding:24px;background:var(--surface);text-align:center}.error p{font-size:14px;line-height:1.5}@media(hover:hover)and (pointer:fine){.primary:hover{opacity:.92}.secondary:hover{text-decoration:underline}}@media(max-width:600px){.shell{padding:0;gap:0;min-height:100svh}.desktop-brand,.desktop-hint{display:none}.game{width:100vw;height:100svh;aspect-ratio:auto;max-width:520px;border-radius:0;box-shadow:none}.welcome{bottom:max(24px,env(safe-area-inset-bottom))}h1{font-size:36px}}@media(prefers-reduced-motion:reduce){button,.notice{transition:opacity .1s linear}button:active{transform:none}.charge.recharged,.charge.low .battery-icon{animation:none}}.flash{position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0}.flash.firing{animation:flash .42s cubic-bezier(.22,1,.36,1)}@keyframes flash{0%{opacity:0}12%{opacity:.82}to{opacity:0}}@media(prefers-reduced-motion:reduce){.flash.firing{animation:none}}.veil{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s cubic-bezier(.22,1,.36,1);background:radial-gradient(circle at 50% 78%,#e6efe4eb 0 16%,#e6efe48c 34%,#e6efe400 62%),linear-gradient(to top,#dbe6d880,#dbe6d800 55%)}.veil.on{opacity:1}body.gallery{margin:0;background:#c7d3bf;color:#33402f;font:14px/1.4 system-ui,sans-serif}body.gallery header{position:fixed;inset:0 0 auto;z-index:2;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 16px;background:#f6f3e8e6;box-shadow:0 2px 14px #33402f22}body.gallery h1{margin:0;font-size:16px;letter-spacing:.02em}body.gallery header p{margin:0;opacity:.65}body.gallery .controls{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}body.gallery .controls label{display:flex;align-items:center;gap:6px;white-space:nowrap}body.gallery main{position:relative;height:100vh}body.gallery canvas{display:block;width:100%;height:100%}body.gallery #labels{position:absolute;inset:0;pointer-events:none}.gallery-label{position:absolute;transform:translate(-50%);padding:3px 8px;border:1px solid #33402f22;border-radius:6px;background:#f6f3e8d9;color:inherit;font:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;pointer-events:auto}.gallery-label:hover{background:#fffdf5}.gallery-label.is-selected{background:#33402f;color:#f6f3e8;border-color:#33402f}body.gallery .hint{margin:0;opacity:.55;font-size:12px}body.gallery canvas{cursor:grab}body.gallery canvas.is-dragging{cursor:grabbing}body.gallery .controls button{padding:5px 10px;border:1px solid #33402f33;border-radius:7px;background:#fffdf5;font:inherit;font-weight:700;cursor:pointer}body.gallery .controls button:disabled{opacity:.4;cursor:default}
