@font-face{font-family:Kenney Future;src:url(../assets/fonts/KenneyFuture.ttf) format("truetype");font-display:block}@font-face{font-family:Russo One;src:url(../assets/fonts/russo-one.woff2) format("woff2");font-display:block}:root{--accent: #ffc531;--ink: #ecebe6;--dim: #a19f98;--panel: rgba(12, 12, 15, .82);--line: rgba(255, 255, 255, .12);--logo: "Kenney Future", system-ui, sans-serif;--font: "Russo One", system-ui, sans-serif;--narrow: "Russo One", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#000;color:var(--ink);font-family:var(--font);-webkit-user-select:none;user-select:none}#stage,#stage canvas{position:fixed;inset:0;display:block}[hidden]{display:none!important}.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:1.6vh;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:radial-gradient(ellipse at center,#00000026,#0000009e);overflow:hidden}.screen.on{display:flex}#loading{background:#050507}#title{justify-content:flex-start;align-items:flex-start;padding-left:max(5vw,24px,env(safe-area-inset-left));padding-top:max(5vh,20px,env(safe-area-inset-top));background:radial-gradient(ellipse at 0 0,#000000b8,#0000 60%)}#title .logo{font-size:clamp(34px,5vw,84px)}#title .menu{align-items:stretch}.logo{margin:0;font-family:var(--logo);font-weight:400;font-size:clamp(34px,7vw,96px);letter-spacing:.06em;color:var(--accent);text-shadow:0 3px 0 #6b4a00,0 8px 24px rgba(0,0,0,.7)}.tag{margin:-1vh 0 2vh;font-family:var(--narrow);letter-spacing:.4em;color:var(--dim)}h2{margin:0;font-size:clamp(22px,3.4vw,40px);color:var(--accent);letter-spacing:.08em}h3{margin:1em 0 .3em;font-size:15px;color:var(--accent)}.foot{position:absolute;bottom:12px;right:18px;display:flex;gap:18px;margin:0;font-family:var(--narrow);font-size:12px;color:var(--dim)}.menu{display:flex;flex-direction:column;align-items:center;gap:8px}.row-menu{flex-direction:row}.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:14px 18px;font-family:var(--narrow);line-height:1.45}.panel.narrow{max-width:520px}.panel.wide{max-width:880px}.panel p{margin:.5em 0}button{font:inherit;font-size:clamp(15px,1.6vw,20px);letter-spacing:.06em;min-width:260px;padding:10px 22px;color:var(--ink);background:#121216db;border:2px solid rgba(255,255,255,.14);border-radius:4px;cursor:pointer;text-align:left}button:hover,button:focus-visible,button:focus{outline:none;border-color:var(--accent);color:#fff;background:#28220eeb}.menu.rows button.row{display:flex;justify-content:space-between;gap:28px;min-width:420px}.menu.rows .row b{font-weight:400}.menu.rows .row span{color:var(--accent)}.livery{display:flex;align-items:center;gap:14px;min-width:340px}.livery i{display:inline-block;width:34px;height:18px;border:5px solid;border-radius:2px}.livery.picked{border-color:var(--accent)}.livery.picked:after{content:"\2713";margin-left:auto;color:var(--accent)}.seed{display:flex;align-items:center;gap:12px;margin:10px 0;font-family:var(--font)}.seed input{flex:1;font:inherit;font-size:18px;padding:6px 10px;color:#fff;background:#111;border:2px solid var(--line);border-radius:4px;-webkit-user-select:text;user-select:text}.seed input:focus{outline:none;border-color:var(--accent)}.warn,.note{color:var(--dim);font-size:13px}.settings-body{display:flex;gap:18px;align-items:flex-start;justify-content:center;flex-wrap:wrap}.panel.deck{max-width:380px;font-size:13px}.panel.deck code{display:block;margin:8px 0;padding:6px 8px;font-size:11px;word-break:break-all;background:#0a0a0c;border:1px solid var(--line);border-radius:3px;color:var(--accent);-webkit-user-select:all;user-select:all}.panel.deck a{color:var(--dim);font-size:12px}.panel.deck button{min-width:0;padding:4px 14px;font-size:13px}#controls .panel{flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}#controls .row-menu{flex:none}.binds{border-collapse:collapse;font-size:13px}.binds th{text-align:left;font-weight:400;padding:2px 10px 2px 0;color:var(--dim);white-space:nowrap}.binds thead th{color:var(--accent);text-align:center}.binds td{padding:2px}button.bind{min-width:76px;padding:3px 6px;font-size:12px;text-align:center;font-family:var(--narrow)}button.bind.waiting{border-color:var(--accent);color:var(--accent)}.loadbar{width:min(420px,80vw);height:8px;background:#1b1b20;border-radius:4px;overflow:hidden}#loadBar{height:100%;width:0;background:var(--accent);transition:width .15s}#loadText{font-family:var(--narrow);color:var(--dim)}#hud{position:fixed;inset:0;pointer-events:none}.bucket{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));width:250px;padding:10px 14px;font-size:13px}.bucket .label{font-family:var(--font);color:var(--accent);letter-spacing:.12em;font-size:12px}.gauge{height:10px;margin:6px 0;background:#1c1c21;border-radius:3px;overflow:hidden}#bucketFill{height:100%;width:0;background:var(--accent);transition:width .2s}#bucketFill.full{background:#ff8a2b}#bucketMix{white-space:pre;color:var(--dim);font-size:12px;min-height:1.4em}#under{position:absolute;left:calc(50% + 34px);top:50%;transform:translateY(-50%);font-family:var(--narrow);font-size:13px;color:var(--ink);text-shadow:0 1px 3px #000;white-space:nowrap}#hint{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));max-width:46vw;text-align:right;font-family:var(--narrow);font-size:12px;color:var(--dim);text-shadow:0 1px 3px #000}#reticle{position:fixed;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;fill:var(--accent);pointer-events:none;filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000)}#reticle.far{fill:#8a8a8a;opacity:.7}#toast{position:fixed;left:50%;top:22%;transform:translate(-50%);padding:8px 18px;background:var(--panel);border:1px solid var(--accent);border-radius:4px;font-size:15px;opacity:0;transition:opacity .25s;pointer-events:none}#toast.on{opacity:1}#stats{position:fixed;top:8px;left:8px;margin:0;padding:6px 8px;font:11px/1.35 ui-monospace,monospace;background:#0009;color:#cfe;display:none}#stats.on{display:block}body[data-mode=play]{cursor:crosshair}@media(max-height:500px){.screen{gap:6px}button{padding:6px 16px;font-size:14px}.logo{font-size:34px}.panel{padding:8px 12px;font-size:12px}.binds{font-size:11px}.binds td{padding:1px}button.bind{min-width:64px;padding:1px 4px;font-size:11px}#controls h2{display:none}#controls .note{margin:4px 0 0;font-size:11px}#controls .row-menu button{min-width:160px;padding:4px 12px}}@media(prefers-reduced-motion:reduce){#loadBar,#bucketFill,#toast{transition:none}}#droneHud{position:absolute;inset: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));pointer-events:none;display:none}body[data-view=drone] #droneHud{display:block}#droneHud i{position:absolute;width:34px;height:34px;border:0 solid rgba(255,255,255,.55)}#droneHud .tl{left:0;top:0;border-width:2px 0 0 2px}#droneHud .tr{right:0;top:0;border-width:2px 2px 0 0}#droneHud .bl{left:0;bottom:0;border-width:0 0 2px 2px}#droneHud .br{right:0;bottom:0;border-width:0 2px 2px 0}#droneHud .feed{position:absolute;top:8px;left:50%;transform:translate(-50%);font-family:var(--narrow);font-size:12px;letter-spacing:.18em;color:#ffffffbf;text-shadow:0 1px 2px #000;white-space:nowrap}#droneHud .rec{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#ff3b30;animation:rec 1s steps(2) infinite}@keyframes rec{50%{opacity:.2}}@media(prefers-reduced-motion:reduce){#droneHud .rec{animation:none}}#lockBadge{position:absolute;top:calc(max(14px,env(safe-area-inset-top)) + 30px);left:50%;transform:translate(-50%);padding:3px 12px;font-family:var(--narrow);font-size:12px;letter-spacing:.18em;color:var(--accent);background:var(--panel);border:1px solid var(--accent);border-radius:3px}#seedTag{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));font-family:var(--narrow);font-size:11px;letter-spacing:.12em;color:var(--dim);text-shadow:0 1px 2px #000}
