/* Orbit Heist: one game window. The 3D reactor fills it; the HUD, control bar, return table, result readout and
   menu are all overlaid inside it, so the page can be framed by an operator at any reasonable size.
   JS sets --hud-h, --bar-h, --rail-w, --safe-* (the area the ring is framed in) and --cx/--cy/--well (where the
   ring's centre well sits on screen).
   Polish wave 2: type, buttons, the stake pattern and the 11px floor come from games/baize-ui.css (linked first); Orbit
   keeps its sci-fi palette through --bz-accent (lime). The kit's win card is not drawn: Orbit counts the win up in its
   own readout on the well (src/app.mjs, card:false), and the window ring and debris are drawn in lime. */
:root{color-scheme:dark;--bg:#0a111a;--surface:#101d28;--panel:#0b141dd9;--text:#edece5;--muted:#98a7ae;--line:#23323e;--line-2:#34444f;--lime:#d6f99a;--formation-accent:#a2e7cf;
  --sans:var(--bz-sans);--mono:var(--bz-mono);--serif:var(--bz-serif);
  --bz-accent:#d6f99a;--bz-accent-up:#e2ffb5;--bz-on-accent:#18211d;--bz-glow:#d6f99a66;
  --safe-b:env(safe-area-inset-bottom,0px);--hud-h:56px;--bar-h:76px;--rail-w:0px;--safe-top:56px;--safe-right:0px;--safe-bottom:76px;--safe-left:0px;--cx:50%;--cy:50%;--well:220px}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--text);font:400 14px/1.4 var(--sans);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default;opacity:.45}
svg{display:block}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The window */
.game{position:fixed;inset:0;width:100vw;height:100dvh;overflow:hidden;isolation:isolate;user-select:none;-webkit-user-select:none}
.reactor{position:absolute;inset:0;touch-action:none;background:radial-gradient(90% 70% at var(--cx) var(--cy),#122431 0%,#0a111a 62%,#070c13 100%)}
.reactor.can-grab{cursor:grab}.reactor.dragging{cursor:grabbing}
#reactor-art{position:absolute;inset:0}
.reactor-canvas{display:block;width:100%;height:100%}

/* Top HUD */
.hud{position:absolute;z-index:4;top:0;left:0;right:0;height:var(--hud-h);display:flex;align-items:center;gap:10px;padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left));background:linear-gradient(#060b11e0 0%,#060b11a8 55%,#060b1100 100%);pointer-events:none}
.hud>*{pointer-events:auto}
.hud-home{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%}
.hud-home img{width:32px;height:32px}
.hud-home:hover img{transform:rotate(30deg);transition:transform .3s}
.is-embedded.no-lobby .hud-home{display:none}
.hud-title{margin:0;font:normal 22px/1 var(--serif);letter-spacing:-.5px;white-space:nowrap}
.hud-title em{color:var(--lime)}
.hud-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.hud-balance{display:flex;flex-direction:column;align-items:flex-end;line-height:1.1;margin-right:4px}
.hud-balance{--bz-gold-soft:var(--lime)}
.hud-balance span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hud-balance strong{font:500 18px/1.2 var(--mono);font-variant-numeric:tabular-nums}
.hud-balance strong.bz-bal-rolling{color:var(--lime);text-shadow:0 0 14px #d6f99a80}
.hud-btn{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-2);background:#0d1822cc}
.hud-btn:hover{background:#1a2a35}
.hud-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.hud-btn svg .fill{fill:currentColor;stroke:none}
#sound .sound-on,#sound[aria-pressed=true] .sound-off{display:none}
#sound[aria-pressed=true] .sound-on{display:inline}
#sound[aria-pressed=true]{border-color:var(--lime);color:var(--lime)}
.broadcast-banner{display:none}

/* Centre readout: sits on the reactor's well wherever the ring is framed. */
.reactor-readout{position:absolute;z-index:1;left:var(--cx);top:var(--cy);width:calc(var(--well) * .92);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--well) * .03);text-align:center;pointer-events:none}
.reactor-mark{height:clamp(18px,calc(var(--well) * .12),33px);width:clamp(18px,calc(var(--well) * .12),33px);fill:none;stroke:var(--formation-accent);stroke-width:.8;opacity:.8}
.readout-label{text-transform:uppercase;letter-spacing:.16em;font-size:clamp(11px,calc(var(--well) * .036),12px);font-weight:650;color:#a2b6bc}
.reactor-readout strong{font-family:var(--serif);font-size:clamp(24px,calc(var(--well) * .2),84px);font-weight:normal;line-height:1;letter-spacing:-1px;white-space:nowrap}
.reactor-readout>span:last-child{font-size:clamp(11px,calc(var(--well) * .042),14px);color:#b5c6cb;white-space:nowrap}
.reactor-readout>span:last-child b{font-weight:650;color:var(--text);font-family:var(--mono)}
.running .reactor-mark{animation:rotate 3s linear infinite}
.running .reactor-readout strong{font-size:clamp(20px,calc(var(--well) * .15),62px)}
@keyframes rotate{to{transform:rotate(360deg)}}
.reactor[data-result=profit] .reactor-readout strong{color:var(--lime)}
.reactor[data-result=profit] .readout-label{color:var(--lime)}
.reactor[data-result=profit] .reactor-readout>span:last-child b{color:var(--lime)}
.reactor[data-result=partial] .reactor-readout strong{color:#dfe5e4}
.reactor[data-result=partial] .readout-label,.reactor[data-result=loss] .readout-label{color:#f3bfb2}
.reactor[data-result=partial] .reactor-readout>span:last-child b,.reactor[data-result=loss] .reactor-readout>span:last-child b{color:#f0ab9b}
.reactor[data-result=loss] .reactor-readout strong{color:#e9eff0;text-shadow:0 2px 16px #03080b,0 0 4px #03080b,0 0 1px #000}
.reactor[data-result=profit][data-tier="2"] .reactor-readout strong{font-size:clamp(28px,calc(var(--well) * .23),92px)}
.reactor[data-result=profit][data-tier="3"] .reactor-readout strong,.reactor[data-result=profit][data-tier="4"] .reactor-readout strong{font-size:clamp(30px,calc(var(--well) * .25),100px);text-shadow:0 0 30px #d6f99a88,0 2px 14px #050b10}
.reactor.is-3d .reactor-mark{display:none}
.reactor.is-3d .reactor-readout{text-shadow:0 2px 14px #050b10,0 0 3px #050b10}
.reactor.is-3d .reactor-readout:before{content:"";position:absolute;z-index:-1;inset:-6% -2%;border-radius:50%;background:radial-gradient(closest-side,#050b10f2 52%,#050b10b0 75%,#050b1000);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.3,1)}
.reactor.is-3d .reactor-readout>span:last-child{background:#050b10d9;padding:4px 11px;border-radius:999px}
.reactor.is-3d[data-result=loss] .reactor-readout:before,.reactor.is-3d[data-result=partial] .reactor-readout:before{background:radial-gradient(closest-side,#03080cfa 58%,#03080cc8 78%,#03080c00)}
.reactor.is-3d[data-flare] .reactor-readout:before{opacity:.88;transform:scale(.9)}
/* The readout pops the moment the pulse locks and again when the result lands: no delayed start and no dimming, so the
   multiplier is at full strength from its first frame (it then counts up from 1.00x on a win). */
.reactor[data-pop] .reactor-readout strong{animation:orbit-pop calc(.45s*var(--pace,1) + .15s) cubic-bezier(.2,1.5,.35,1) both}
.reactor[data-pop=big] .reactor-readout strong{animation-name:orbit-pop-big;animation-duration:calc(.6s*var(--pace,1) + .2s)}
@keyframes orbit-pop{0%{transform:scale(.82)}100%{transform:scale(1)}}
@keyframes orbit-pop-big{0%{transform:scale(.7)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
/* Big and Huge wins: the tier is a large kicker over the multiplier, not small caps. */
.reactor[data-result=profit]:is([data-tier="2"],[data-tier="3"],[data-tier="4"]) .readout-label{font:600 clamp(20px,calc(var(--well) * .12),44px)/1 var(--serif);letter-spacing:0;text-transform:none;color:var(--lime);text-shadow:0 0 22px #d6f99a70,0 2px 12px #050b10}
.reactor[data-counting] .reactor-readout strong{font-variant-numeric:tabular-nums}

/* Flat SVG reactor (fallback when WebGL is unavailable), framed in the safe area. */
.reactor-svg{position:absolute;left:var(--safe-left);top:var(--safe-top);width:calc(100% - var(--safe-left) - var(--safe-right));height:calc(100% - var(--safe-top) - var(--safe-bottom));overflow:visible}
.ticks{stroke:#3d505a;stroke-width:1}.ticks .major{stroke:#77918f;stroke-width:1.5}.spokes{stroke:#283e47;stroke-width:1}
.bay-segment{fill:none;stroke:#182e38;stroke-width:48}.bay-number{fill:#c2d4d9;font-size:18px;font-weight:600;letter-spacing:.06em;font-family:var(--sans)}.has-drone .bay-number{fill:var(--formation-accent)}
.empty-bay{fill:#0e1921;stroke:#59747c;stroke-width:1.5}.bay-cross{stroke:#39555f;stroke-width:1}
.drone-halo{fill:#0d1b25;stroke:var(--formation-accent);stroke-opacity:.23}.drone-wing{fill:#69857e;stroke:#9eb6aa;stroke-width:.8}.drone-body{fill:url(#metal);stroke:#ddf0df;stroke-width:1}.drone-core{stroke:var(--formation-accent);stroke-width:2.4;stroke-linecap:round}
.pulse-beam{transform-origin:300px 300px;transform:rotate(var(--beam-angle));opacity:0}
.beam-wash{stroke:var(--formation-accent);stroke-opacity:.17;stroke-width:60;fill:none}.beam-edge{stroke:var(--formation-accent);stroke-width:3;fill:none;filter:drop-shadow(0 0 8px var(--formation-accent))}.beam-inner{stroke:var(--formation-accent);stroke-opacity:.7;stroke-width:1;fill:none}
.settled-beam,.active-beam{opacity:1}
.powered .empty-bay{stroke:var(--formation-accent);fill:#477d6970}
.captured .drone-body{fill:var(--formation-accent);filter:drop-shadow(0 0 8px #bcffb077)}.captured .drone-halo{stroke:var(--formation-accent);stroke-opacity:.65;fill:#2c514641}
.inner-accent{fill:none;stroke:#7c9e99;stroke-width:2}.inner-accent.secondary{stroke:#3e5b60}.centre-orbit{fill:none;stroke:#35515b;stroke-dasharray:2 8;stroke-width:1;opacity:.5}
.reactor-track{fill:none;stroke:#365861;stroke-width:1.5;stroke-dasharray:2 9}
.cargo-core{fill:#182d35;stroke:#d7ece6;stroke-width:1.3}.cargo-hatch{stroke:#d7ece6;stroke-width:1.3;stroke-linecap:round}
.captured .cargo-core{fill:var(--lime);stroke:#f1ffd4;filter:drop-shadow(0 0 9px var(--lime))}
.missed .drone-halo{stroke:#b79178;stroke-opacity:.75;stroke-dasharray:4 5}.missed .drone-body{fill:#52636a;stroke:#8c9ea3}.missed .cargo-core{fill:#483936;stroke:#e9b798}.missed .drone-wing{opacity:.55}
.search-beam .beam-wash{stroke-opacity:.06}.search-beam .beam-edge{stroke:#8ba9b4;stroke-dasharray:5 9;filter:none}.search-beam .beam-inner{opacity:.3}

/* Cargo status, just above the control bar */
.status{position:absolute;z-index:2;left:calc(var(--safe-left) + 12px);right:calc(var(--rail-w) + 12px);bottom:calc(var(--bar-h) + 8px);display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none}
.cargo-manifest{display:flex;justify-content:center;gap:6px;width:100%;max-width:520px;min-height:34px}
.cargo-chip{min-width:0;flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border:1px solid #3d5960;border-radius:8px;color:#d2dcd9;background:#162a30e6;font-size:11px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cargo-chip b{font:500 11px var(--mono);white-space:nowrap}
.cargo-chip.sealed{border-style:dashed;color:#9caeb2;background:#111f28e6}
.cargo-chip.recovered{border-color:#698e73;background:#203c32e6;color:#d9fac8}
.cargo-chip.recovered.short{border-color:#5d6d70;background:#18252be6;color:#d6dfdc}
.cargo-chip.missed{border-color:#735b54;background:#282326e6;color:#f0c8b5}
.cargo-waiting{color:#b3c4c9;font-size:12px;line-height:1.4;align-self:center;text-align:center;background:#0a111ab0;padding:6px 12px;border-radius:999px}
.round-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;margin:0}

/* Bottom control bar */
.bar{position:absolute;z-index:5;left:0;right:0;bottom:0;display:grid;align-items:center;gap:8px 10px;padding:22px max(12px,calc((100% - 1260px) / 2)) calc(10px + var(--safe-b));background:linear-gradient(to top,#060b11f2 0%,#060b11d0 50%,#060b1100 100%);pointer-events:none;
  grid-template-columns:auto auto minmax(0,1fr) auto auto auto auto;grid-template-areas:"form rot . stake pace launch ret"}
.bar>*{pointer-events:auto}
.bar-formation{grid-area:form;display:flex;gap:3px;padding:3px;border-radius:14px;background:#0d1822d9;border:1px solid var(--line);min-width:0}
.bar-rotate{grid-area:rot;display:flex;gap:6px}
.bar-stake{grid-area:stake;display:flex;align-items:center;gap:8px;min-width:0}
.launch-button{grid-area:launch}
.bar-returns{grid-area:ret}
.bar-pace{grid-area:pace;display:flex;gap:6px}
.bar-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.formation-option{position:relative;flex:1;min-width:0;min-height:44px;display:flex;align-items:center;gap:7px;padding:5px 10px 5px 7px;border-radius:11px;border:1px solid transparent;text-align:left;transition:background .2s,border-color .2s}
.formation-option:hover:not(:disabled){background:#15242e}
.formation-option>svg{width:26px;height:26px;flex:none;color:var(--profile-accent)}
.formation-option>span{min-width:0;overflow:hidden}
.formation-option strong{display:block;font-size:14px;font-weight:650;line-height:1.1}
.formation-option small{display:block;font:400 11px/1.2 var(--mono);color:var(--muted);white-space:nowrap;margin-top:2px}
.formation-option[aria-pressed=true]{background:color-mix(in srgb,var(--profile-accent) 16%,#0d1822);border-color:color-mix(in srgb,var(--profile-accent) 55%,transparent)}
.formation-option[aria-pressed=true] small{color:#d4dfdf}
.formation-option:disabled{opacity:.6}
.bar-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line-2);background:#0d1822d9}
.bar-icon:hover:not(:disabled){background:#1a2a35}
.bar-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bar-returns[aria-expanded=true]{border-color:var(--lime);color:var(--lime)}
/* Stake: baize-ui's .bz-stake (Min, ½, box, 2×, Max) in Orbit's colours. */
.stake-control{width:276px;--bz-btn-h:48px}
.bar .bz-stake input{width:100%;background:#0d1822d9;border-color:var(--line-2);color:var(--text);appearance:textfield;-moz-appearance:textfield;user-select:text;-webkit-user-select:text}
.bar .bz-stake input:focus{border-color:var(--lime)}
.bar .bz-stake input::-webkit-inner-spin-button,.bar .bz-stake input::-webkit-outer-spin-button{appearance:none;margin:0}
.bar .bz-stake button{background:#13222c;border:1px solid var(--line-2);color:#c2d0d4;font-size:14px;--bz-glow:#d6f99a55}
.bar .bz-stake button:hover:not(:disabled){background:#1f2f39}
/* Quick play bolt and the auto play button */
.bar .bz-turbo,.bar-auto{min-width:56px;min-height:52px;border-radius:12px;background:#0d1822d9;border:1.5px solid var(--line-2);color:#c2d0d4;font:600 12px/1 var(--sans);--bz-glow:#d6f99a55}
.bar-auto{display:grid;place-items:center;align-content:center;gap:4px;padding:4px 8px}
.bar-auto svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bar .bz-turbo:hover:not(:disabled),.bar-auto:hover:not(:disabled){color:var(--text);background:#1a2a35}
.bar .bz-turbo[aria-pressed=true]{color:var(--lime);border-color:var(--lime);box-shadow:none}
.bar .bz-turbo[aria-pressed=true] svg{filter:drop-shadow(0 0 6px #d6f99aa0)}
.bar-auto[aria-expanded=true]{color:var(--lime);border-color:var(--lime)}
.bar-auto[data-running]{color:#ffd2c6;border-color:#f0ab9b}
.launch-button{min-height:52px;min-width:190px;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:0 18px 0 20px;border-radius:14px;background:var(--lime);color:#18211d;font:700 16px/1.15 var(--sans);box-shadow:0 6px 22px #b7f58022}
.launch-button>span{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.launch-button small{font:500 12px/1.2 var(--mono);opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.launch-button small:empty{display:none}
.launch-button:hover:not(:disabled){background:#e2ffb5}
.launch-button[data-tone=stop]{background:#1d2a32;color:var(--text);box-shadow:inset 0 0 0 2px #f0ab9b}
.launch-button:disabled{opacity:.6}
.launch-button svg{width:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.error-message{position:absolute;left:50%;bottom:calc(100% + 52px);transform:translateX(-50%);width:max-content;max-width:min(520px,calc(100% - 24px));margin:0;padding:8px 14px;border-radius:10px;background:#3a1f1cf2;border:1px solid #8a4a40;color:#ffd2c6;font-size:13px;line-height:1.4;text-align:center;pointer-events:none}
.error-message:empty{display:none}
.bar-note{background:#0f1a24f2;border-color:var(--line-2);color:var(--text);pointer-events:auto;cursor:pointer}
.error-message:not(:empty)~.bar-note{display:none}

/* Return table: collapsible card inside the window */
.returns{position:absolute;z-index:3;right:calc(var(--rail-w) + 12px);bottom:calc(var(--bar-h) + 12px);width:min(290px,calc(100% - var(--rail-w) - 24px));max-height:calc(100% - var(--hud-h) - var(--bar-h) - 24px);overflow:auto;padding:14px 16px 12px;border-radius:16px;background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line-2);box-shadow:0 18px 50px #0007}
.returns[hidden]{display:none}
.returns-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.returns-head h2{margin:0;font-size:14px;font-weight:650}
.returns-head h2 span{color:var(--formation-accent);margin-left:4px}
.returns-sub{margin:2px 0 6px;font-size:11px;color:var(--muted)}
.panel-close{display:grid;place-items:center;width:44px;height:44px;margin:-10px -10px -10px 0;border-radius:50%;flex:none}
.panel-close:hover{background:#1a2a35}
.panel-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.payout-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);gap:10px}
.payout-row>span{font-size:13px}
.payout-row small{display:block;color:var(--muted);font:400 11px var(--mono);margin-top:2px}
.payout-row>strong{font:500 19px var(--mono);font-variant-numeric:tabular-nums}
.payout-row strong>span{font-size:13px;color:var(--muted);margin-left:2px}
.payout-row.matched>strong{color:var(--formation-accent)}
.payout-row.matched{background:linear-gradient(90deg,transparent,#a2e7cf14)}
.zero-row>strong{color:#93a0a8}
.odds-summary{display:flex;justify-content:space-between;margin-top:10px;gap:8px;font-size:13px}
.odds-summary>span{color:var(--muted)}
.odds-summary strong{font:500 14px var(--mono)}
.return-explanation{font-size:12px;line-height:1.5;color:var(--muted);margin:6px 0 0}
.simulation-label{font-size:11px;color:#7f939c;margin:8px 0 0}

/* Auto play: an in-window sheet over the scene, opened from the bar */
.auto-panel{position:absolute;z-index:6;right:calc(var(--rail-w) + 12px);bottom:calc(var(--bar-h) + 12px);width:min(380px,calc(100% - var(--rail-w) - 24px));max-height:calc(100% - var(--hud-h) - var(--bar-h) - 24px);overflow:auto;padding:14px 16px 16px;border-radius:16px;background:#0f1a24f5;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line-2);box-shadow:0 18px 50px #0009}
.auto-panel[hidden]{display:none}
.auto-panel h2{margin:0;font-size:15px;font-weight:600}
.auto-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin-top:8px;font-size:13px;color:var(--muted)}
.auto-grid label{display:grid;gap:4px;align-content:end}
.auto-wide{grid-column:1/-1}
.auto-grid select,.auto-grid input{width:100%;min-height:44px;border-radius:9px;border:1.5px solid var(--line-2);background:#0b141d;color:var(--text);padding:0 8px;font:500 15px var(--mono);font-variant-numeric:tabular-nums}
.auto-grid input::placeholder{color:var(--muted);font-family:var(--sans)}
.auto-grid input:focus,.auto-grid select:focus{border-color:var(--lime);outline:0}
.auto-grid input[aria-invalid]{border-color:#f0ab9b}
.auto-adjust{display:flex;flex-wrap:wrap;align-content:flex-end;gap:4px 6px;min-width:0}
.auto-adjust>span{flex:1 0 100%}
.auto-grid .auto-adjust select{flex:1 1 0;min-width:0;width:auto}
.auto-grid .auto-adjust input{flex:none;width:64px}
.auto-grid :disabled{opacity:.55}
.auto-start{width:100%;margin-top:14px;min-height:48px;border-radius:12px;background:var(--lime);color:#18211d;font-weight:700}
.auto-start:hover:not(:disabled){background:#e2ffb5}

/* The win moment: baize-celebrate drives it (card:false), Orbit's readout shows it; the window ring and a big win's
   debris use Orbit's lime (createCelebrate ring/particles options). */
.game{--bz-ring-win:var(--lime);--bz-ring-big:var(--lime);--bz-ring-big-glow:#d6f99a44;--bz-ring-z:6}
/* The debris flies over the reactor but under the readout (z 1) and the HUD, so the count stays legible. */
.game>.bz-cel-layer{z-index:0}
/* Hotkey legend (baize-pace) and the first-visit sound prompt, on Orbit's dark menu */
.menu .bz-keys{font-size:13px;color:#b3c1c8}
.menu .bz-keys kbd{background:#1e2f38;color:var(--text);box-shadow:inset 0 -2px 0 #0007,0 0 0 1px var(--line-2)}
.bz-sound-ask{font-family:var(--sans)}
.hud:has(.bz-sound-ask){z-index:7}

/* Pause from the operator */
.paused-veil{position:absolute;z-index:8;inset:0;display:grid;place-items:center;background:#050b10b8}
.paused-veil[hidden]{display:none}
.paused-veil span{font:normal 34px var(--serif);padding:10px 26px;border:1px solid var(--line-2);border-radius:999px;background:#0a111a}

/* Menu: an in-window sheet */
.menu{width:min(640px,calc(100vw - 24px));max-width:none;max-height:calc(100dvh - 24px);padding:0;overflow:hidden;background:#0f1a24;color:var(--text);border:1px solid var(--line-2);border-radius:18px;box-shadow:0 30px 90px #000a}
.menu[open]{display:flex;flex-direction:column}
.menu::backdrop{background:#050c14c4;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.menu-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 6px 20px}
.menu-head h2{margin:0;font:normal 26px var(--serif)}
.menu-tabs{display:flex;gap:4px;padding:4px 14px 10px;border-bottom:1px solid var(--line)}
.menu-tabs button{min-height:44px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--muted)}
.menu-tabs button:hover{color:var(--text)}
.menu-tabs button[aria-selected=true]{background:#1e2f38;color:var(--text)}
.menu-body{overflow:auto;padding:16px 20px 20px;overscroll-behavior:contain;user-select:text;-webkit-user-select:text}
.menu-body h3{font-size:14px;font-weight:650;margin:18px 0 6px}
.menu-body p,.how-to{color:#b3c1c8;font-size:13px;line-height:1.7}
.how-to{padding-left:18px;margin:8px 0}
.how-to li{margin:6px 0;padding-left:4px}
.small-label{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:600;color:var(--muted)}
.table-scroll{overflow-x:auto;margin:14px 0}
table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap;text-align:left}
caption{color:var(--text);font-size:13px;text-align:left;margin-bottom:8px}
th,td{padding:9px 8px;border-bottom:1px solid #2c3b46}
th:first-child{padding-left:0}
th{font-weight:600;color:var(--text)}
td{color:#a3b5bf;font-family:var(--mono)}
thead th{color:#8fa1ab;font-size:11px}
.menu-button{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--line-2);font-size:13px;font-weight:600}
.menu-button:hover:not(:disabled){background:#1a2a35}
.session-title{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.session-title h3{margin:0}
.session-title>span{color:var(--muted);font:400 12px var(--mono)}
.history-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:12px 0 14px}
.empty-history{font-size:13px;color:#7f939c;grid-column:1/-1;margin:0}
.history-item{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:9px 12px;background:#14232e;border-radius:9px;font-variant-numeric:tabular-nums}
.history-item>span{font-size:12px;color:#a9bcc4}
.history-item strong{font:500 15px var(--mono);grid-row:span 2;align-self:center}
.history-item small{font:400 11px var(--mono)}
.history-item.profit{background:#18302b}
.history-item.profit strong,.history-item.profit small{color:#c1eca3}
.history-item.partial strong{color:#efb994}
.history-item.loss strong{color:#8d9fa9}
.receipt-section{padding-top:6px;border-top:1px solid var(--line);margin-top:16px}
.receipt-section pre{font:400 11.5px/1.6 var(--mono);color:#bbcec8;background:#0a151e;padding:12px 14px;border-radius:8px;overflow:auto;max-height:220px;white-space:pre}
.setting{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.setting strong{display:block;font-size:14px;font-weight:650}
.setting small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.setting[hidden]{display:none}
.switch{position:relative;width:56px;height:44px;flex:none}
.switch:before{content:"";position:absolute;left:2px;right:2px;top:9px;height:26px;border-radius:999px;background:#22323c;border:1.5px solid var(--line-2);transition:background .2s}
.switch i{position:absolute;left:7px;top:14px;width:16px;height:16px;border-radius:50%;background:#9fb0b7;transition:transform .2s}
.switch[aria-checked=true]:before{background:#3d5a2d;border-color:var(--lime)}
.switch[aria-checked=true] i{transform:translateX(26px);background:var(--lime)}

/* Watch mode: a recording layout with the formation banner, plain-language round line and no return card. */
.broadcast .hud-title{display:none}
.broadcast .broadcast-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;pointer-events:none;white-space:nowrap}
.broadcast-banner strong{font-size:16px;color:var(--formation-accent);font-weight:600}
.broadcast-banner span{font-size:11px;color:var(--muted)}
.broadcast .returns{display:none}
.broadcast .round-announcement{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal;text-align:center;font-size:15px;color:var(--text);background:#0a111ac0;padding:5px 14px;border-radius:999px;max-width:100%}

/* Compact one-row bar for small laptops */
@media (min-width:1000px) and (max-width:1279px){
  .formation-option>svg,.bar-label,.bar-pace span{display:none}
  .formation-option{padding:5px 10px}
  .stake-control{width:236px;gap:4px}
  .bar .bz-stake button{min-width:36px;padding:0 4px}
  .bar .bz-turbo,.bar-auto{min-width:46px}
  .launch-button{min-width:150px}
}
/* Two-row bar: tablets and small laptops */
@media (max-width:999px){
  .bar{grid-template-columns:minmax(0,1fr) auto auto auto;grid-template-areas:"form form rot ret" "stake pace launch launch"}
  .bar-stake{justify-content:flex-start}
  .stake-control{width:min(276px,100%)}
  .launch-button{min-width:0}
}
/* Three-row bar: portrait phones */
@media (max-width:559px){
  .hud{gap:6px}
  .hud-title{font-size:19px}
  .hud-balance strong{font-size:16px}
  .hud-balance span{font-size:11px;letter-spacing:.04em}
  .hud-right{gap:6px}
  .bar{gap:8px;padding:18px 10px calc(8px + var(--safe-b));grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"form form form rot" "stake stake stake stake" "ret pace launch launch"}
  .bar-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .bar-stake{justify-content:stretch}
  .stake-control{width:100%;--bz-btn-h:46px}
  .bar .bz-turbo,.bar-auto{min-width:50px}
  .launch-button{padding:0 14px 0 16px}
  .formation-option{flex-direction:column;justify-content:center;gap:1px;padding:4px 2px;text-align:center}
  .formation-option>svg{display:none}
  .formation-option strong{font-size:14px}
  .launch-button{min-width:0}
  .cargo-chip{font-size:11px;padding:5px 4px;gap:4px}
  .cargo-chip b{font-size:11px}
  .formation-option small{font-size:11px}
  .small-label{font-size:11px}
  .readout-label{letter-spacing:.1em}
  .broadcast .broadcast-banner span{display:none}
}
@media (max-width:399px){
  .hud-title{font-size:17px}
}
@media (max-width:374px){
  .bar-pace span{display:none}
  .bar .bz-turbo,.bar-auto{min-width:44px;padding:4px}
}
@media (max-width:359px){
  .hud{gap:4px;padding-left:6px;padding-right:6px}
  .hud-right{gap:4px}
  .hud-title{font-size:15px}
  .hud-balance{margin-right:0}
  .hud-balance strong{font-size:14px}
  .formation-option small{display:none}
}
/* Narrow windows: the watch-mode banner sits just under the HUD instead of between its buttons. */
@media (max-width:759px){
  .broadcast .hud-title{display:block}
  .broadcast .broadcast-banner{top:calc(100% + 16px);padding:4px 12px;border-radius:999px;background:#060b11c0}
}
/* Short landscape (phones on their side): the controls become a right-edge rail inside the window. */
@media (max-height:520px) and (min-aspect-ratio:4/3){
  .hud{--hud-pad:4px}
  .bar{top:var(--hud-h);left:auto;width:290px;bottom:0;align-content:center;padding:6px max(10px,env(safe-area-inset-right)) calc(6px + var(--safe-b)) 24px;gap:8px;background:linear-gradient(to left,#060b11f0 0%,#060b11cc 78%,#060b1100 100%);
    grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"form form form" "rot pace ret" "stake stake stake" "launch launch launch"}
  .bar-rotate{justify-self:start}
  .bar-stake{flex-wrap:wrap;gap:6px}
  .bar-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .stake-control{width:100%;--bz-btn-h:44px}
  .bar-pace{justify-self:center}
  .bar-pace span{display:none}
  .bar .bz-turbo,.bar-auto{min-width:44px;min-height:44px;padding:4px}
  .formation-option{flex-direction:column;justify-content:center;gap:1px;padding:3px 2px;text-align:center}
  .formation-option>svg{display:none}
  .formation-option small{display:none}
  .launch-button{min-width:0;min-height:48px}
  .status{bottom:8px}
  .cargo-manifest{min-height:30px}
  .error-message{bottom:auto;top:-46px;left:auto;right:0;transform:none;max-width:260px}
  .returns{bottom:auto;top:calc(var(--hud-h) + 8px);padding-top:10px;padding-bottom:10px}
  .returns .return-explanation{display:none}
  .payout-row{padding:6px 0}
}
@media (max-height:360px) and (min-aspect-ratio:4/3){
  .bar{width:252px;padding-left:16px}
  .stake-control{--bz-btn-h:40px;gap:3px}
  .bar .bz-stake button{min-width:38px;padding:0 4px}
  .launch-button{min-height:46px;font-size:15px}
  .status{display:none}
}
@media (max-height:600px) and (min-aspect-ratio:4/3) and (min-height:521px){
  .formation-option small{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}