:root{--bg: #06070a;--surface-0: #0b0d12;--surface-1: #12151d;--surface-2: #181c26;--surface-3: #1f2430;--surface-4: #272d3b;--scrim: rgba(4, 5, 8, .72);--on-surface: #eceff6;--on-surface-dim: #a2aabb;--on-surface-faint: #6d768a;--outline: #2c3242;--outline-strong: #414a60;--accent: #ff2e6e;--accent-hot: #ff5c8d;--accent-deep: #b8004a;--on-accent: #14060c;--accent-2: #ffd23f;--on-accent-2: #1a1400;--danger: #ff4b3e;--warn: #ffb020;--ok: #34d399;--elev-1: 0 1px 2px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .4);--elev-2: 0 2px 6px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .5);--elev-3: 0 6px 16px rgba(0, 0, 0, .65), 0 2px 4px rgba(0, 0, 0, .5);--elev-4: 0 12px 32px rgba(0, 0, 0, .7), 0 4px 8px rgba(0, 0, 0, .5);--glow: 0 0 0 1px rgba(255, 46, 110, .35), 0 6px 24px rgba(255, 46, 110, .22);--font: ui-sans-serif, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-display: "Arial Black", "Helvetica Neue", Impact, var(--font);--font-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, monospace;--fs-xs: .6875rem;--fs-sm: .8125rem;--fs-md: .9375rem;--fs-lg: 1.125rem;--fs-xl: 1.5rem;--fs-2xl: 2.125rem;--lh: 1.45;--r-xs: 3px;--r-sm: 6px;--r-md: 10px;--r-lg: 16px;--r-pill: 999px;--ease-std: cubic-bezier(.2, 0, 0, 1);--ease-out: cubic-bezier(.05, .7, .1, 1);--dur-1: 90ms;--dur-2: .16s;--dur-3: .26s;--dur-ripple: .56s;--state-hover: .08;--state-focus: .12;--state-press: .16;--focus-ring: 2px solid var(--accent);--focus-offset: 2px;color-scheme:dark;accent-color:var(--accent)}*,*:before,*:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--on-surface);font-family:var(--font);font-size:var(--fs-md);line-height:var(--lh);overflow:hidden;overscroll-behavior:none;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}[hidden]{display:none!important}#app{position:fixed;inset:0;display:grid;place-items:center;background:#000}#game{display:block;background:#000;image-rendering:pixelated;touch-action:none}#ui{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:clamp(8px,3vmin,32px);pointer-events:none}#ui>*{pointer-events:auto}.ui-view{width:min(940px,100%);max-height:100%;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:var(--outline-strong) transparent}.ui-view>*{flex:0 0 auto}.ui-view::-webkit-scrollbar{width:10px}.ui-view::-webkit-scrollbar-thumb{background:var(--outline-strong);border-radius:var(--r-pill)}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.row--end{justify-content:flex-end}.row--between{justify-content:space-between}.grow{flex:1 1 auto;min-width:0}.hint{color:var(--on-surface-dim);font-size:var(--fs-sm);margin:0}.title{font-family:var(--font-display);font-size:var(--fs-2xl);letter-spacing:.02em;text-transform:uppercase;margin:0;color:var(--on-surface);text-shadow:0 2px 0 var(--accent-deep)}.code{font-family:var(--font-mono);font-size:var(--fs-sm);background:var(--surface-0);border:1px solid var(--outline);border-radius:var(--r-sm);padding:8px 10px;color:var(--accent-2);overflow-wrap:anywhere;user-select:all}.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-3);border:1px solid var(--outline);font-size:var(--fs-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--on-surface-dim)}.chip--live{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}.chip--warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}.chip--bad{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}.panel{background:linear-gradient(180deg,var(--surface-2),var(--surface-1));border:1px solid var(--outline);border-radius:var(--r-lg);box-shadow:var(--elev-3);overflow:hidden}.panel__head{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--surface-3);border-bottom:1px solid var(--outline)}.panel__head:before{content:"";width:6px;align-self:stretch;background:var(--accent);border-radius:var(--r-pill);box-shadow:0 0 12px var(--accent-deep)}.panel__title{margin:0;font-family:var(--font-display);font-size:var(--fs-lg);letter-spacing:.08em;text-transform:uppercase}.panel__body{display:flex;flex-direction:column;gap:14px;padding:18px}.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 20px;border:1px solid transparent;border-radius:var(--r-sm);overflow:hidden;background:var(--surface-3);color:var(--on-surface);font-family:var(--font-display);font-size:var(--fs-md);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-2) var(--ease-std),box-shadow var(--dur-2) var(--ease-std),transform var(--dur-1) var(--ease-std),border-color var(--dur-2) var(--ease-std)}.btn:before{content:"";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-std)}.btn:hover:before{opacity:var(--state-hover)}.btn:active:before{opacity:var(--state-press)}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.btn__label{position:relative;z-index:1}.btn__icon{position:relative;z-index:1;font-size:1.05em;line-height:1}.btn--filled{background:var(--accent);color:var(--on-accent);box-shadow:var(--elev-2),var(--glow)}.btn--filled:hover{background:var(--accent-hot)}.btn--tonal{background:color-mix(in srgb,var(--accent) 18%,var(--surface-3));color:var(--accent-hot)}.btn--outlined{background:transparent;border-color:var(--outline-strong);color:var(--on-surface)}.btn--outlined:hover{border-color:var(--accent)}.btn--text{background:transparent;color:var(--on-surface-dim);padding:0 12px}.btn--text:hover{color:var(--on-surface)}.btn--danger{background:var(--danger);color:#180402;box-shadow:var(--elev-2)}.btn--wide{width:100%}.btn[disabled],.btn[aria-disabled=true]{cursor:not-allowed;opacity:.38;box-shadow:none;transform:none}.btn[disabled]:before,.btn[aria-disabled=true]:before{opacity:0!important}.btn.is-loading{cursor:progress;color:transparent}.btn.is-loading .btn__label,.btn.is-loading .btn__icon{visibility:hidden}.btn.is-loading .btn__spinner{display:block}.btn__spinner{display:none;position:absolute;inset:50% auto auto 50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;color:var(--on-surface);animation:spin .72s linear infinite}.btn--filled .btn__spinner{color:var(--on-accent)}@keyframes spin{to{transform:rotate(360deg)}}.ripple-host{position:relative;overflow:hidden}.ripple{position:absolute;z-index:2;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#ffffff6b,#ffffff29 62%,#fff0 72%);transform:scale(0);opacity:.85;animation:ripple-out var(--dur-ripple) var(--ease-out) forwards}@keyframes ripple-out{to{transform:scale(1);opacity:0}}.field{display:flex;flex-direction:column;gap:6px}.field__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.field__label{font-size:var(--fs-sm);letter-spacing:.04em;text-transform:uppercase;color:var(--on-surface-dim)}.field__value{font-family:var(--font-mono);font-size:var(--fs-sm);color:var(--accent-2);font-variant-numeric:tabular-nums}.field__help{font-size:var(--fs-xs);color:var(--on-surface-faint)}.field.is-invalid .field__label,.field.is-invalid .field__help{color:var(--danger)}.input{width:100%;min-height:42px;padding:0 12px;background:var(--surface-0);border:1px solid var(--outline-strong);border-radius:var(--r-sm);color:var(--on-surface);font:inherit;transition:border-color var(--dur-2) var(--ease-std),box-shadow var(--dur-2) var(--ease-std)}.input::placeholder{color:var(--on-surface-faint)}.input:hover{border-color:var(--on-surface-faint)}.input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}.input:disabled{opacity:.38;cursor:not-allowed}.input:user-invalid,.field.is-invalid .input{border-color:var(--danger)}.input:user-invalid:focus-visible,.field.is-invalid .input:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 30%,transparent)}.range{--range-fill: 50%;width:100%;height:24px;margin:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none}.range:focus-visible{outline:var(--focus-ring);outline-offset:4px;border-radius:var(--r-pill)}.range:disabled{opacity:.38;cursor:not-allowed}.range::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-pill);background:linear-gradient(to right,var(--accent) 0 var(--range-fill),var(--surface-4) var(--range-fill) 100%)}.range::-moz-range-track{height:6px;border-radius:var(--r-pill);background:var(--surface-4)}.range::-moz-range-progress{height:6px;border-radius:var(--r-pill);background:var(--accent)}.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-6px;border:2px solid var(--surface-0);border-radius:50%;background:var(--accent);box-shadow:var(--elev-2);transition:transform var(--dur-2) var(--ease-std),box-shadow var(--dur-2) var(--ease-std)}.range::-moz-range-thumb{width:18px;height:18px;border:2px solid var(--surface-0);border-radius:50%;background:var(--accent);box-shadow:var(--elev-2);transition:transform var(--dur-2) var(--ease-std),box-shadow var(--dur-2) var(--ease-std)}.range:hover::-webkit-slider-thumb,.range:focus-visible::-webkit-slider-thumb{transform:scale(1.15);box-shadow:var(--elev-2),0 0 0 8px color-mix(in srgb,var(--accent) 22%,transparent)}.range:hover::-moz-range-thumb,.range:focus-visible::-moz-range-thumb{transform:scale(1.15);box-shadow:var(--elev-2),0 0 0 8px color-mix(in srgb,var(--accent) 22%,transparent)}.switch{position:relative;display:flex;align-items:center;gap:12px;padding:8px 10px;margin:-8px -10px;border-radius:var(--r-sm);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.switch__input{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.switch__track{position:relative;flex:0 0 auto;width:44px;height:24px;border-radius:var(--r-pill);background:var(--surface-4);border:1px solid var(--outline-strong);transition:background-color var(--dur-2) var(--ease-std),border-color var(--dur-2) var(--ease-std)}.switch__thumb{position:absolute;top:50%;left:3px;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--on-surface-dim);box-shadow:var(--elev-1);transition:transform var(--dur-3) var(--ease-out),background-color var(--dur-2) var(--ease-std)}.switch__text{font-size:var(--fs-md);color:var(--on-surface)}.switch:hover .switch__track{border-color:var(--on-surface-faint)}.switch__input:checked~.switch__track{background:color-mix(in srgb,var(--accent) 45%,var(--surface-4));border-color:var(--accent)}.switch__input:checked~.switch__track .switch__thumb{transform:translate(20px);background:var(--accent)}.switch__input:focus-visible~.switch__track{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.switch__input:disabled~.switch__track,.switch__input:disabled~.switch__text{opacity:.38}.switch:has(.switch__input:disabled){cursor:not-allowed}.list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}.list__item{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--surface-0);border:1px solid var(--outline);border-left:3px solid var(--outline-strong);border-radius:var(--r-sm)}.list__item--self{border-left-color:var(--accent)}.list__item--empty{color:var(--on-surface-faint);font-style:italic}.kbe{display:flex;flex-direction:column;gap:12px}.kbe__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}.kbe__tabs{display:inline-flex;gap:4px;padding:4px;background:var(--surface-0);border:1px solid var(--outline);border-radius:var(--r-pill)}.kbe__tab{min-height:32px;padding:0 16px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--on-surface-dim);font-family:var(--font-display);font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color var(--dur-2) var(--ease-std),color var(--dur-2) var(--ease-std)}.kbe__tab:hover{color:var(--on-surface)}.kbe__tab[aria-selected=true]{background:var(--accent);color:var(--on-accent);box-shadow:var(--elev-1)}.kbe__tab:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}.kbe__layout{margin:0;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--on-surface-faint)}.kbe__layout b{font-family:var(--font-mono);color:var(--on-surface-dim)}.kbe__hint{margin:0;font-size:var(--fs-xs);color:var(--on-surface-faint)}.kbe__panel{display:flex;flex-direction:column;gap:10px}.kbe__rows{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}.kbe__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;padding:4px 6px 6px 12px;background:var(--surface-0);border:1px solid var(--outline);border-left:3px solid var(--outline-strong);border-radius:var(--r-sm);transition:background-color var(--dur-2) var(--ease-std),border-color var(--dur-2) var(--ease-std)}.kbe__action{min-width:0;font-size:var(--fs-sm);color:var(--on-surface);overflow-wrap:anywhere}.kbe__keys{display:flex;align-items:flex-end;gap:6px}.kbe__slot{display:flex;min-width:0;flex-direction:column;gap:1px}.kbe__slotlabel{padding-left:3px;font-family:var(--font-display);font-size:var(--fs-xs);line-height:1.1;letter-spacing:.08em;text-transform:uppercase;color:var(--on-surface-faint)}.kbe__slotctl{display:flex;align-items:center;gap:2px}.kbe__key{min-width:8ch;min-height:34px;padding:0 8px}.kbe__key .btn__label{font-family:var(--font-mono);font-size:var(--fs-sm);letter-spacing:0;text-transform:none;color:var(--accent-2)}.kbe__clear{min-width:38px;min-height:34px;padding:0 8px;font-family:var(--font);color:var(--on-surface-faint)}.kbe__clear .btn__label{font-size:var(--fs-lg);line-height:1}.kbe__clear:hover:not([disabled]){color:var(--danger)}.kbe__row.is-unbound{border-left-color:var(--warn)}.kbe__key.is-empty .btn__label{color:var(--on-surface-faint)}.kbe__row.is-capturing{border-left-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 8%,var(--surface-0))}.kbe__key.is-capturing{border-style:dashed;border-color:var(--accent-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-2) 22%,transparent)}.kbe__key.is-capturing .btn__label{color:var(--accent-2)}.kbe__cue{position:relative;z-index:1;order:-1;width:.5em;height:1.1em;background:var(--accent-2);border-radius:1px;visibility:hidden}.kbe__key.is-capturing .kbe__cue{visibility:visible;animation:kbe-caret 1s steps(1,end) infinite}@keyframes kbe-caret{50%{opacity:.1}}.kbe__foot{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.kbe__status{min-height:calc(var(--fs-sm) * var(--lh));margin:0;font-size:var(--fs-sm);color:var(--on-surface-dim)}.kbe__status--ok{color:var(--ok)}.kbe__status--warn{color:var(--warn)}@media(max-width:560px){.kbe__row{grid-template-columns:minmax(0,1fr);gap:4px;padding-left:8px}.kbe__action{font-size:var(--fs-xs)}.kbe__keys{gap:8px}.kbe__slot{flex:1 1 0}.kbe__slotctl .kbe__key{flex:1 1 auto;min-width:7ch;padding:0 6px}.kbe__tab{padding:0 10px}}.notice{display:flex;gap:10px;padding:10px 12px;border-radius:var(--r-sm);border:1px solid var(--outline);background:var(--surface-0);font-size:var(--fs-sm);color:var(--on-surface-dim)}.notice--error{border-color:color-mix(in srgb,var(--danger) 55%,transparent);background:color-mix(in srgb,var(--danger) 12%,var(--surface-0));color:#ffd9d5}.notice--warn{border-color:color-mix(in srgb,var(--warn) 55%,transparent);background:color-mix(in srgb,var(--warn) 10%,var(--surface-0));color:#ffe9c2}.waiting{display:inline-flex;align-items:center;gap:8px;color:var(--warn);font-size:var(--fs-sm)}.waiting__dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse .9s var(--ease-std) infinite alternate}@keyframes pulse{0%{opacity:.25;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.ripple{display:none!important}.btn:active{transform:none}.waiting__dot,.kbe__key.is-capturing .kbe__cue{animation:none;opacity:1}.btn__spinner{animation-duration:2.4s!important;animation-iteration-count:infinite!important}}html.reduced-motion *,html.reduced-motion *:before,html.reduced-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}html.reduced-motion .ripple{display:none!important}html.reduced-motion .waiting__dot,html.reduced-motion .kbe__key.is-capturing .kbe__cue{animation:none;opacity:1}html.reduced-motion .btn__spinner{animation-duration:2.4s!important;animation-iteration-count:infinite!important}.sw-toast{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:60;display:flex;flex-direction:column;gap:10px;width:min(22rem,calc(100vw - 32px));padding:14px 16px;border:1px solid var(--outline);border-left:3px solid var(--accent-2);border-radius:10px;background:var(--surface-3);box-shadow:var(--elev-4);opacity:0;transform:translateY(12px);transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1)}.sw-toast.is-in{opacity:1;transform:translateY(0)}.sw-toast__text{display:flex;flex-direction:column;gap:3px}.sw-toast__text strong{font-family:var(--font-display);font-size:var(--fs-sm);letter-spacing:.06em;color:var(--accent-2)}.sw-toast__text span{font-size:var(--fs-sm);color:var(--on-surface-dim)}.sw-toast__row{display:flex;gap:8px;justify-content:flex-end}@media(max-width:520px),(max-height:460px){.sw-toast{left:0;right:0;bottom:0;width:auto;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;border-radius:0;border-left:0;border-top:3px solid var(--accent-2);padding:10px 12px}.sw-toast__text span{display:none}}html.reduced-motion .sw-toast{transition:none}@media(prefers-reduced-motion:reduce){.sw-toast{transition:none}}select.input{-webkit-appearance:none;appearance:none;padding-right:34px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--on-surface-dim) 50%),linear-gradient(135deg,var(--on-surface-dim) 50%,transparent 50%);background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);background-size:6px 6px,6px 6px;background-repeat:no-repeat}select.input:hover,select.input:focus-visible{background-image:linear-gradient(45deg,transparent 50%,var(--on-surface) 50%),linear-gradient(135deg,var(--on-surface) 50%,transparent 50%)}select.input option{background:var(--surface-2);color:var(--on-surface)}.ui-view--lobby{--stage-h: min(100vh, 56.25vw );align-self:end;max-height:calc(100% - var(--stage-h) * .3)}.mapstrip{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 10px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--outline-strong) transparent}.mapstrip--single{overflow:visible;padding-bottom:2px}.mapcard{flex:0 0 auto;width:120px;display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:var(--on-surface-dim);text-align:left;font:inherit;cursor:pointer;scroll-snap-align:center;border-radius:10px;position:relative;transition:transform .14s ease,color .14s ease}.mapcard__art{display:block;width:120px;height:68px;border-radius:9px;outline:2px solid transparent;outline-offset:2px;transition:outline-color .14s ease}.mapcard__cap{font-size:var(--fs-xs);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}button.mapcard:hover{transform:translateY(-2px);color:var(--on-surface)}button.mapcard:focus-visible{outline:none}button.mapcard:focus-visible .mapcard__art{outline-color:var(--accent-2)}.mapcard.is-chosen{color:var(--on-surface)}.mapcard.is-chosen .mapcard__art{outline-color:var(--accent)}html.reduced-motion .mapcard,html.reduced-motion .mapcard__art{transition:none}@media(prefers-reduced-motion:reduce){.mapcard,.mapcard__art{transition:none}button.mapcard:hover{transform:none}}
