:root{--c-ink-900: 10 13 17;--c-ink-800: 16 19 24;--c-ink-700: 24 28 34;--c-ink-600: 36 42 50;--c-chalk: 238 240 242;--c-brass: 255 210 74;--c-azure: 108 200 255;--c-felt: 86 205 140;--c-ember: 255 154 77;--c-rose: 255 107 107;--c-orchid: 215 166 255;--c-teal: 127 227 212;--surface: rgb(var(--c-ink-800) / .72);--surface-solid: rgb(var(--c-ink-800) / .96);--surface-float: rgb(var(--c-ink-700) / .78);--surface-raised: rgb(255 255 255 / .06);--surface-hover: rgb(255 255 255 / .13);--surface-active: rgb(255 255 255 / .18);--surface-sunken: rgb(0 0 0 / .28);--scrim: radial-gradient(ellipse at center, rgb(var(--c-ink-900) / .72), rgb(var(--c-ink-900) / .94));--line: rgb(255 255 255 / .1);--line-strong: rgb(255 255 255 / .2);--line-accent: rgb(var(--c-brass) / .55);--text: rgb(var(--c-chalk));--text-dim: rgb(var(--c-chalk) / .68);--text-mute: rgb(var(--c-chalk) / .45);--text-accent: rgb(var(--c-brass));--text-on-accent: #17130a;--r-xs: 4px;--r-s: 6px;--r-m: 8px;--r-l: 12px;--r-xl: 16px;--r-pill: 999px;--s-0: 2px;--s-1: 4px;--s-2: 6px;--s-3: 8px;--s-4: 12px;--s-5: 16px;--s-6: 22px;--s-7: 28px;--fs-2xs: 10px;--fs-xs: 11px;--fs-s: 12px;--fs-m: 13px;--fs-l: 15px;--fs-xl: 18px;--fs-2xl: 22px;--fs-3xl: 30px;--fs-4xl: 40px;--fw-normal: 500;--fw-semi: 600;--fw-bold: 700;--fw-black: 800;--track-label: .06em;--elev-1: 0 4px 16px rgb(0 0 0 / .35);--elev-2: 0 10px 40px rgb(0 0 0 / .5);--glass: blur(8px) saturate(115%);--glow-accent: 0 0 0 1px rgb(var(--c-brass) / .5), 0 0 18px rgb(var(--c-brass) / .25);--t-fast: .11s;--t-med: .2s;--ease: cubic-bezier(.2, .7, .3, 1);--z-hud: 18;--z-float: 20;--z-panel: 26;--z-modal: 50;--z-chat: 55;--z-top: 60}.ui-panel,.hud-panel{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--s-4);backdrop-filter:var(--glass);box-shadow:var(--elev-1);color:var(--text)}.ui-title{font-size:var(--fs-xl);font-weight:var(--fw-bold);letter-spacing:.01em}.ui-sub{font-size:var(--fs-s);color:var(--text-mute)}.ui-label{font-size:var(--fs-2xs);font-weight:var(--fw-semi);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-mute)}.ui-divider{height:1px;background:var(--line);border:0;margin:var(--s-2) 0}.ui-stack{display:flex;flex-direction:column;gap:var(--s-3)}.ui-row{display:flex;align-items:center;gap:var(--s-3)}.ui-row--between{justify-content:space-between}.ui-btn{font-family:inherit;font-size:var(--fs-m);font-weight:var(--fw-semi);line-height:1.2;color:var(--text);background:var(--surface-raised);border:1px solid var(--line);border-radius:var(--r-m);padding:var(--s-3) var(--s-4);cursor:pointer;transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}.ui-btn:hover:not(:disabled){background:var(--surface-hover);border-color:var(--line-strong)}.ui-btn:active:not(:disabled){transform:translateY(1px)}.ui-btn:disabled{opacity:.4;cursor:default}.ui-btn--primary{background:rgb(var(--c-azure) / .2);border-color:rgb(var(--c-azure) / .55);color:rgb(var(--c-azure))}.ui-btn--primary:hover:not(:disabled){background:rgb(var(--c-azure) / .32);border-color:rgb(var(--c-azure) / .8)}.ui-btn--go{background:rgb(var(--c-felt) / .2);border-color:rgb(var(--c-felt) / .55);color:rgb(var(--c-felt))}.ui-btn--go:hover:not(:disabled){background:rgb(var(--c-felt) / .32)}.ui-btn--accent{background:rgb(var(--c-brass) / .18);border-color:var(--line-accent);color:rgb(var(--c-brass))}.ui-btn--accent:hover:not(:disabled){background:rgb(var(--c-brass) / .3)}.ui-btn--danger{background:rgb(var(--c-rose) / .16);border-color:rgb(var(--c-rose) / .5);color:rgb(var(--c-rose))}.ui-btn--danger:hover:not(:disabled){background:rgb(var(--c-rose) / .28)}.ui-btn--ghost{background:transparent;border-color:transparent;color:var(--text-dim)}.ui-btn--ghost:hover:not(:disabled){background:var(--surface-raised);color:var(--text)}.ui-btn--sm{font-size:var(--fs-xs);padding:var(--s-1) var(--s-3);border-radius:var(--r-s)}.ui-btn--lg{font-size:var(--fs-l);padding:var(--s-4) var(--s-5);border-radius:var(--r-l)}.ui-btn--block{display:block;width:100%}.ui-btn--icon{display:inline-flex;align-items:center;justify-content:center;padding:var(--s-2);min-width:32px;line-height:1}.ui-input,.ui-select{font-family:inherit;font-size:var(--fs-m);color:var(--text);background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--r-s);padding:var(--s-2) var(--s-3);min-width:0;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}.ui-input::placeholder{color:var(--text-mute)}.ui-input:hover,.ui-select:hover{border-color:var(--line-strong)}.ui-input:focus,.ui-select:focus{outline:none;border-color:rgb(var(--c-azure) / .8);background:#0000005c}.ui-select{cursor:pointer}.ui-chip{display:inline-flex;align-items:center;gap:var(--s-1);font-size:var(--fs-2xs);font-weight:var(--fw-bold);letter-spacing:.02em;border-radius:var(--r-pill);padding:var(--s-0) var(--s-2);background:var(--surface-raised);border:1px solid var(--line);color:var(--text-dim);white-space:nowrap}.ui-chip--accent{background:rgb(var(--c-brass) / .16);border-color:var(--line-accent);color:rgb(var(--c-brass))}.ui-chip--info{background:rgb(var(--c-azure) / .16);border-color:rgb(var(--c-azure) / .45);color:rgb(var(--c-azure))}.ui-chip--good{background:rgb(var(--c-felt) / .16);border-color:rgb(var(--c-felt) / .45);color:rgb(var(--c-felt))}.ui-chip--solid-ember{background:rgb(var(--c-ember));border-color:transparent;color:var(--text-on-accent)}.ui-chip--solid-teal{background:rgb(var(--c-teal));border-color:transparent;color:var(--text-on-accent)}.ui-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;background:var(--text-mute)}.ui-dot--live{background:rgb(var(--c-felt));box-shadow:0 0 8px rgb(var(--c-felt) / .7)}.ui-kv{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4)}.ui-kv__k{font-size:var(--fs-2xs);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-mute)}.ui-kv__v{font-size:var(--fs-xs);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums;color:var(--text-accent)}.ui-meter{width:100%;height:5px;border-radius:var(--r-pill);background:var(--surface-sunken);overflow:hidden}.ui-meter__fill{height:100%;border-radius:var(--r-pill);background:rgb(var(--c-felt));transition:width 50ms linear}.ui-scrim{position:fixed;inset:0;z-index:var(--z-modal);display:none;align-items:center;justify-content:center;background:var(--scrim);backdrop-filter:blur(3px)}.ui-scrim.open{display:flex}#hud :focus-visible{outline:2px solid rgb(var(--c-azure) / .9);outline-offset:2px;border-radius:var(--r-xs)}#hud select option{color:#111;background:#eef0f2}#hud *::-webkit-scrollbar{width:8px;height:8px}#hud *::-webkit-scrollbar-track{background:transparent}#hud *::-webkit-scrollbar-thumb{background:#ffffff29;border-radius:var(--r-pill)}#hud *::-webkit-scrollbar-thumb:hover{background:#ffffff47}#hud{scrollbar-width:thin;scrollbar-color:rgb(255 255 255 / .16) transparent}.tabular{font-variant-numeric:tabular-nums}@media (prefers-reduced-motion: reduce){#hud *,#hud *:before,#hud *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}:root{--hud-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#0b0d10;color:#e8e8ea;font-family:var(--hud-font);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#app{position:fixed;inset:0}#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;touch-action:none}#hud{position:absolute;inset:0;z-index:2;pointer-events:none;user-select:none}#hud .interactive{pointer-events:auto;touch-action:manipulation}