:root{--bg:#12110d;--steel-0:#0e100d;--steel-1:#181b16;--steel-2:#22261f;--steel-3:#2e3329;--edge:#4d5340;--edge-hi:#75795e;--text:#ece6d6;--muted:#a9a58f;--dim:#6f6d5d;--brass:#d6a94a;--brass-hi:#f3c864;--brass-dark:#7c5d1f;--green:#86e06a;--red:#ff6a4d;--amber:#f2c14e;--blue:#6fb6ff;--tap:44px;--font:"Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, -apple-system, "Segoe UI", sans-serif;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--cut:12px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#app{background:var(--bg);height:100%;color:var(--text);font:16px/1.4 var(--font);overscroll-behavior:none;margin:0}body{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overflow:hidden}button,input,select{font:inherit;color:inherit}[hidden]{display:none!important}.icon{flex:none;width:22px;height:22px}.icon.dim{opacity:.35}.sr{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.screen{padding:calc(16px + var(--safe-top)) calc(16px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(16px + var(--safe-left));place-items:center;display:grid;position:fixed;inset:0;overflow:auto}.backdrop{z-index:-1;background:radial-gradient(80% 60% at 70% 110%,#d68c3c59,#0000 60%),radial-gradient(70% 50% at 15% -10%,#5a789640,#0000 60%),repeating-linear-gradient(135deg,#ffffff05 0 2px,#0000 2px 9px),linear-gradient(#16150f 0%,#1d1a12 55%,#2a2014 100%);position:fixed;inset:0}.backdrop:before{content:"";background:linear-gradient(180deg, transparent, #0000008c), conic-gradient(from 200deg at 20% 100%, #0f0e0a 0 40deg, transparent 40deg), conic-gradient(from 150deg at 78% 100%, transparent 0 20deg, #13110c 20deg 70deg, transparent 70deg);opacity:.9;height:34vh;position:absolute;inset:auto 0 0}.backdrop:after{content:"";background:radial-gradient(#0000 55%,#0009);position:absolute;inset:0}.panel{border:1px solid var(--edge);width:min(480px,100%);clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));background:linear-gradient(#262a22f7,#161914f7);flex-direction:column;gap:12px;padding:24px;display:flex;position:relative;box-shadow:inset 0 1px #ffffff0f,0 20px 60px #0000008c}.panel:before{content:"";background:linear-gradient(90deg, var(--brass-dark), var(--brass), var(--brass-dark));height:3px;position:absolute;top:0;left:0;right:0}h1,h2,h3{letter-spacing:.06em;text-transform:uppercase;margin:0;line-height:1.1}h1{font-size:30px}h2{color:var(--brass-hi);font-size:22px}h3{color:var(--muted);margin-top:6px;font-size:15px}.brand{align-items:center;gap:14px;margin-bottom:6px;display:flex}.emblem{color:#1b1509;background:radial-gradient(circle at 35% 30%, var(--brass-hi), var(--brass) 55%, var(--brass-dark));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);flex:none;place-items:center;width:58px;height:58px;display:grid}.emblem .icon{width:32px;height:32px}.brand h1{background:linear-gradient(#fff6df,#cdb88a);color:#0000;-webkit-background-clip:text;background-clip:text}.tagline,.subtitle{color:var(--muted);margin:2px 0 0}.hint{color:var(--muted);margin:0;font-size:14px}.hint.small,.version{color:var(--dim);font-size:12px}.version{text-align:right;margin:4px 0 0}.help{color:var(--muted);margin:0;font-size:14px}.field{flex-direction:column;gap:6px;display:flex}label,.field-label{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:700}input[type=text],select{min-height:var(--tap);background:var(--steel-0);border:1px solid var(--edge);border-radius:2px;outline:none;width:100%;padding:10px 12px}input[type=text]:focus,select:focus{border-color:var(--brass);box-shadow:0 0 0 2px #d6a94a40}.form-error{min-height:1em;color:var(--red);margin:0;font-size:14px}.form-error:empty{display:none}button{min-height:var(--tap);min-width:var(--tap);cursor:pointer;border:1px solid var(--edge);background:linear-gradient(180deg, var(--steel-3), var(--steel-2));letter-spacing:.04em;touch-action:manipulation;border-radius:2px;padding:8px 16px;font-weight:700;transition:filter .12s,transform 60ms}button:hover{filter:brightness(1.18)}button:active{transform:translateY(1px)}button:disabled{opacity:.45;cursor:default;filter:none}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}button.primary{background:linear-gradient(180deg, var(--brass-hi), var(--brass) 60%, #a57c2a);color:#1b1509;text-transform:uppercase;border-color:#f7d98c}button.secondary{background:linear-gradient(#2b3026,#1d211a)}button.danger{background:linear-gradient(#7a2a1c,#561c12);border-color:#a8452f}button.link{color:var(--brass);background:0 0;border:none;align-self:center;padding:4px;text-decoration:underline}.actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:6px;display:flex}.actions>button{flex:auto}.menu-list{flex-direction:column;gap:10px;display:flex}button.big{text-align:left;text-transform:none;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);align-items:center;gap:14px;min-height:64px;padding:12px 14px;display:flex}button.big .icon{width:30px;height:30px}button.big .chev{opacity:.6;width:18px;height:18px;margin-left:auto}button.big .text{flex-direction:column;display:flex}button.big b{letter-spacing:.05em;text-transform:uppercase;font-size:18px}button.big small{opacity:.8;font-size:13px;font-weight:400}.chips,.segmented{flex-wrap:wrap;gap:6px;display:flex}.chip{min-width:48px;padding:8px 0}.chip.selected,.segmented button.selected{background:linear-gradient(180deg, var(--brass-hi), var(--brass));color:#1b1509;border-color:#f7d98c}.segmented button{flex:1 1 0;padding:8px 10px}.settings{flex-direction:column;gap:12px;display:flex}.settings .row{flex-direction:column;gap:6px;display:flex}.slider{grid-template-columns:110px 1fr;align-items:center;gap:10px;display:grid}input[type=range]{width:100%;accent-color:var(--brass);min-height:32px}.check{min-height:var(--tap);cursor:pointer;align-items:center;gap:10px;display:flex}.check input{width:22px;height:22px;accent-color:var(--brass)}.setup{width:min(520px,100%)}.lobby-panel{width:min(560px,100%)}.invite{align-items:center;gap:8px;display:flex}.invite .icon{color:var(--brass)}.invite input{flex:1;min-width:0;font-size:13px}.slots{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.slots li{background:var(--steel-0);border:1px solid var(--steel-3);border-left-width:0;align-items:center;gap:10px;min-height:52px;padding:6px 10px;display:flex}.slots li.free{opacity:.8}.slots .swatch{align-self:stretch;width:6px;margin:-6px 0 -6px -10px}.slots .name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:700;overflow:hidden}.slots .name.dim{color:var(--dim);font-weight:400}.slots select{flex:1;min-height:40px;padding:6px 8px}.tags{gap:4px;display:flex}.tag{text-transform:uppercase;letter-spacing:.08em;border:1px solid var(--edge);color:var(--muted);padding:2px 6px;font-size:11px}.tag.host{color:var(--brass);border-color:var(--brass-dark)}.status{color:var(--muted);white-space:nowrap;font-size:13px}.status.ready{color:var(--green)}.status.off{color:var(--red)}.message{margin:0;font-size:18px}.spinner{border:3px solid #d6a94a40;border-top-color:var(--brass);border-radius:50%;align-self:center;width:34px;height:34px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.toast{left:50%;top:calc(16px + var(--safe-top));border:1px solid var(--brass-dark);z-index:50;background:#141612f2;padding:10px 16px;position:fixed;transform:translate(-50%)}.screen.match{background:#17130e;padding:0;display:block;overflow:hidden}#game-canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:100%;display:block;position:absolute;inset:0}.hud{pointer-events:none;-webkit-user-select:none;user-select:none;--console-h:176px;--mm:164px;position:absolute;inset:0}.hud>*{pointer-events:auto}.hud .select-box,.hud .feed,.hud .mode-hint,.hud .tooltip{pointer-events:none}.topbar{padding:calc(4px + var(--safe-top)) calc(8px + var(--safe-right)) 4px calc(8px + var(--safe-left));border-bottom:1px solid var(--edge);background:linear-gradient(#0e100deb,#141612c7);justify-content:space-between;align-items:center;gap:8px;display:flex;position:absolute;top:0;left:0;right:0;box-shadow:0 2px 10px #0006}.stats{align-items:center;gap:14px;min-width:0;display:flex}.stat{white-space:nowrap;align-items:center;gap:6px;display:flex}.stat .icon{color:var(--brass);width:20px;height:20px}.stat b{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:17px}.stat b.warn{color:var(--red)}.top-right{align-items:center;gap:6px;display:flex}.ping{color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;min-width:44px;font-size:12px}.ping.bad{color:var(--red)}.icon-btn{width:var(--tap);place-items:center;height:40px;padding:0;display:grid}.scoreboard{top:calc(54px + var(--safe-top));right:calc(8px + var(--safe-right));border:1px solid var(--steel-3);pointer-events:none;background:#0e100db8;flex-direction:column;gap:2px;max-width:220px;margin:0;padding:6px 8px;font-size:13px;list-style:none;display:flex;position:absolute}.scoreboard li{align-items:center;gap:6px;min-width:0;display:flex}.scoreboard .swatch{flex:none;width:10px;height:10px;transform:rotate(45deg)}.scoreboard .name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.scoreboard .tag{padding:0 4px;font-size:10px}.scoreboard li.out{opacity:.45;text-decoration:line-through}.scoreboard li.me .name{color:var(--brass-hi)}.feed{top:calc(54px + var(--safe-top));flex-direction:column;align-items:center;gap:4px;width:min(460px,60vw);display:flex;position:absolute;left:50%;transform:translate(-50%)}.feed-item{border-left:3px solid var(--blue);background:#0e100ddb;max-width:100%;padding:5px 12px;font-size:14px;transition:opacity .5s}.feed-item.warn{border-left-color:var(--red)}.feed-item.good{border-left-color:var(--green)}.feed-item.fade{opacity:0}.tools{left:calc(8px + var(--safe-left));top:calc(56px + var(--safe-top));flex-direction:column;gap:6px;display:flex;position:absolute}.tools .tool{text-transform:uppercase;background:#181b16e0;flex-direction:column;justify-content:center;align-items:center;gap:1px;width:56px;min-height:52px;padding:4px;font-size:10px;display:flex}.tools .tool.active{background:linear-gradient(180deg, var(--brass-hi), var(--brass));color:#1b1509}.mode-hint{left:50%;bottom:calc(var(--console-h) + 16px + var(--safe-bottom));text-overflow:ellipsis;border:1px solid var(--brass-dark);max-width:calc(100% - 280px);color:var(--brass-hi);letter-spacing:.04em;white-space:nowrap;background:#0e100de6;padding:6px 14px;font-weight:700;position:absolute;overflow:hidden;transform:translate(-50%)}.place-bar{right:calc(10px + var(--safe-right));bottom:calc(var(--console-h) + 12px + var(--safe-bottom));gap:8px;display:flex;position:absolute}.place-bar button{min-width:104px}.console{height:calc(var(--console-h) + var(--safe-bottom));grid-template-columns:calc(var(--mm) + 16px) minmax(0, 1fr) auto;padding:8px calc(10px + var(--safe-right)) calc(8px + var(--safe-bottom)) calc(8px + var(--safe-left));border-top:2px solid var(--edge-hi);background:repeating-linear-gradient(90deg,#ffffff04 0 1px,#0000 1px 6px),linear-gradient(#2a2f25,#161913 40%,#10120e);gap:10px;display:grid;position:absolute;bottom:0;left:0;right:0;box-shadow:0 -6px 24px #00000080,inset 0 1px #ffffff14}.mm-wrap{aspect-ratio:1;border:2px solid var(--edge-hi);height:100%;height:calc(var(--mm) + 16px);background:radial-gradient(circle,#1a1d17 60%,#0c0e0b 72%);border-radius:50%;align-self:end;place-items:center;margin-top:-34px;display:grid;position:relative;box-shadow:0 0 0 4px #1b1f18,0 -4px 20px #0009}.minimap{touch-action:none;cursor:crosshair;border-radius:50%}.info{border:1px solid var(--steel-3);background:#080a088c;align-items:flex-start;gap:12px;min-width:0;padding:8px 10px;display:flex;position:relative;overflow:hidden}.info .empty-hint{color:var(--dim);margin:2px 0 0;font-size:12px}.info .empty{color:var(--dim);text-align:center;margin:auto;font-size:14px}.portrait{background:radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--team) 35%, #20251c), #0c0e0b 80%);border:1px solid color-mix(in srgb, var(--team) 60%, #444);width:76px;height:76px;color:color-mix(in srgb, var(--team) 55%, #eee);flex:none;place-items:center;display:grid}.portrait .icon{width:56px;height:56px}.lines{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.lines .name{text-transform:uppercase;letter-spacing:.05em;font-size:17px;font-weight:700}.lines .owner{color:var(--muted);font-size:13px}.lines .detail{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}.lines .detail.warn{color:var(--amber)}.hpbar{background:#0a0b09;border:1px solid #333a2c;max-width:240px;height:8px}.hpbar i{background:var(--green);height:100%;display:block}.hpbar i.mid{background:var(--amber)}.hpbar i.low{background:var(--red)}.queue{flex-wrap:wrap;gap:4px;display:flex}.qslot{place-items:center;width:42px;min-width:42px;height:42px;min-height:42px;padding:0;display:grid;position:relative;overflow:hidden}.qslot .qprog{pointer-events:none;background:#86e06a47;position:absolute;bottom:0;left:0;right:0}.group{flex-wrap:wrap;gap:4px;display:flex}.gslot{align-items:center;gap:4px;min-height:40px;padding:4px 8px;font-size:14px;display:flex}.deselect{place-items:center;min-width:36px;min-height:36px;padding:0;display:grid;position:absolute;top:4px;right:4px}.card{grid-template-columns:repeat(4,60px);grid-auto-rows:60px;align-content:start;gap:6px;display:grid}.cmd{clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);background:linear-gradient(#394032,#22271e);border:1px solid #5f6650;place-items:center;padding:0;display:grid;position:relative;box-shadow:inset 0 1px #ffffff1a}.cmd .icon{color:#e8e1cb;width:34px;height:34px}.cmd .cost{color:var(--brass-hi);font-variant-numeric:tabular-nums;font-size:11px;position:absolute;bottom:1px;right:4px}.cmd .hotkey{color:var(--muted);font-size:10px;position:absolute;top:1px;left:5px}.cmd .badge{background:var(--green);color:#0c120a;border-radius:9px;min-width:18px;height:18px;padding:0 4px;font-size:12px;line-height:18px;position:absolute;top:2px;right:3px}.cmd.active{background:linear-gradient(180deg, var(--brass-hi), var(--brass))}.cmd.active .icon{color:#1b1509}.cmd.disabled{filter:grayscale(.8)brightness(.6)}.cmd.disabled .cost{color:var(--red)}.tooltip{z-index:20;border:1px solid var(--brass-dark);background:#0c0e0bf5;flex-direction:column;gap:4px;width:240px;padding:8px 10px;font-size:13px;display:flex;position:absolute}.tip-title{color:var(--brass-hi);text-transform:uppercase;letter-spacing:.04em;font-weight:700}.tip-desc{color:var(--muted)}.tip-meta{color:var(--text);gap:10px;display:flex}.tip-meta span{align-items:center;gap:4px;display:flex}.tip-meta .icon{width:14px;height:14px;color:var(--brass)}.tip-meta .key{color:var(--dim)}.tip-reason{color:var(--red)}.select-box{background:#7dff8a1a;border:1px solid #9dff8a;position:absolute;box-shadow:0 0 0 1px #0006}.overlay{z-index:30;padding:calc(16px + var(--safe-top)) 16px calc(16px + var(--safe-bottom));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0506048c;place-items:center;display:grid;position:absolute;inset:0;overflow:auto}.panel.banner{flex-direction:row;align-items:center;width:auto}.panel.banner p{margin:0}.menu-panel{width:min(460px,100%)}.result{text-align:center;align-items:center}.result h1{letter-spacing:.12em;font-size:46px}.result.victory h1{color:var(--brass-hi);text-shadow:0 0 24px #f3c86473}.result.defeat h1{color:var(--red)}.result .winner{margin:0;font-weight:700}.result .actions{width:100%}.rotate-hint{display:none}@media (max-width:1100px){.card{grid-template-columns:repeat(3,58px);grid-auto-rows:58px}}@media (max-height:520px){.hud{--console-h:112px;--mm:100px}.topbar{padding-top:calc(2px + var(--safe-top));padding-bottom:2px}.stats{gap:10px}.stat b{font-size:15px}.stat:nth-child(3){display:none}.icon-btn{height:36px}.scoreboard{top:calc(46px + var(--safe-top));max-width:150px;padding:4px 6px;font-size:11px}.scoreboard .tag{display:none}.tools{top:calc(48px + var(--safe-top));gap:4px}.tools .tool{width:52px;min-height:46px}.feed{top:calc(46px + var(--safe-top))}.feed-item{padding:3px 8px;font-size:12px}.console{gap:6px;padding-top:6px}.mm-wrap{margin-top:-18px}.portrait{width:52px;height:52px}.portrait .icon{width:38px;height:38px}.info{gap:8px;padding:4px 6px}.lines .name{font-size:14px}.lines .owner,.lines .detail{font-size:11px}.qslot{width:34px;min-width:34px;height:34px;min-height:34px}.card{grid-template-columns:repeat(4,48px);grid-auto-rows:48px;gap:4px}.cmd .icon{width:28px;height:28px}.cmd .hotkey{display:none}.result h1{font-size:32px}.overlay .panel{gap:8px;padding:14px 18px}}@media (max-width:640px){.hud{--console-h:206px;--mm:96px}.console{grid-template-columns:calc(var(--mm) + 8px) minmax(0, 1fr);grid-template-rows:auto 1fr;gap:6px}.mm-wrap{height:calc(var(--mm) + 8px);grid-row:1;align-self:start;margin-top:0}.info{max-height:calc(var(--mm) + 8px);grid-area:1/2}.card{grid-column:1/-1;grid-template-columns:repeat(auto-fill,52px);grid-auto-rows:52px;justify-content:center}.stat:nth-child(3){display:none}.stats{gap:10px}.feed{width:70vw;top:calc(96px + var(--safe-top))}.scoreboard{max-width:130px;font-size:11px}.scoreboard .tag{display:none}.slider{grid-template-columns:90px 1fr}.mode-hint{max-width:calc(100% - 24px);bottom:calc(var(--console-h) + 68px + var(--safe-bottom));white-space:normal;text-align:center}.rotate-hint{z-index:40;text-align:center;background:#080907e6;flex-direction:column;justify-content:center;align-items:center;gap:16px;padding:24px;display:flex;position:absolute;inset:0}.rotate-hint .phone{border:3px solid var(--brass);border-radius:8px;width:44px;height:76px;animation:2.2s ease-in-out infinite rotate-phone}.rotate-hint.dismissed{display:none}}@keyframes rotate-phone{0%,30%{transform:rotate(0)}60%,to{transform:rotate(-90deg)}}@media (max-height:400px){.card{grid-template-columns:repeat(4,44px);grid-auto-rows:44px}.tools .tool span{display:none}.tools .tool{width:44px;min-height:44px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}