:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#07131f;color:#ecf4f7;font-synthesis:none;line-height:1.45;--ink:#ecf4f7;--muted:#88a3b4;--soft:#537284;--panel:#0c2231e8;--line:#2b4b5d;--gold:#f4bf56;--teal:#54dbc5}*{box-sizing:border-box}body{margin:0;min-height:100vh;overflow-x:hidden;background:#07131f}button,input{font:inherit}button{cursor:pointer}.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:radial-gradient(ellipse at 70% 5%,#174563 0,#0b2639 32%,#07131f 75%)}.backdrop-glow{position:absolute;width:800px;height:800px;right:-230px;top:-300px;border:1px solid #3d8ca033;border-radius:50%;box-shadow:0 0 0 80px #3283a00a,0 0 0 170px #3283a006}.backdrop-grid{position:absolute;inset:48% 0 0;background:linear-gradient(#0a1c2a00,#07131fe8),repeating-linear-gradient(90deg,#80b0c00a 0 1px,transparent 1px 72px),repeating-linear-gradient(0deg,#80b0c00a 0 1px,transparent 1px 72px);transform:perspective(480px) rotateX(56deg);transform-origin:top}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,74px);border-bottom:1px solid #21425299;background:#061522b8;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:#e3aa42;color:#1a2530;font-weight:950;font-size:22px;font-style:italic;box-shadow:0 2px 0 #704522}.brand strong{display:block;letter-spacing:.08em;font-size:15px;line-height:1}.brand em{color:var(--gold);font-style:normal}.brand small{display:block;margin-top:5px;color:#6e90a3;letter-spacing:.24em;font-size:8px}.account-chip{display:flex;align-items:center;gap:9px;color:#bed0d8;font-size:12px}.status-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px #e9ae3822}.connection-pill{margin-left:5px;border:1px solid #315364;border-radius:20px;padding:4px 9px;color:#84a9b7;font:10px ui-monospace,monospace}.app-shell{width:min(1280px,calc(100% - 40px));margin:0 auto;padding:42px 0 70px}.screen[hidden]{display:block!important;position:fixed;left:-1000px;top:0;width:320px;height:180px;overflow:hidden;opacity:0;pointer-events:none}.register-screen{min-height:calc(100vh - 170px);display:grid;grid-template-columns:minmax(260px,1fr) minmax(340px,480px);align-items:center;gap:clamp(25px,8vw,130px)}.register-art{height:520px;position:relative;display:grid;place-items:center}.hero-silhouette{font-size:190px;color:#f1bd5b;filter:drop-shadow(0 0 35px #f1bd5b66);font-style:italic;transform:rotate(-14deg)}.ring{position:absolute;border:1px solid #65d1cc4a;border-radius:50%;transform:rotateX(65deg) rotateZ(-25deg)}.ring-one{width:480px;height:240px}.ring-two{width:320px;height:160px;border-color:#edbc5b55}.panel-card{border:1px solid #315465;background:linear-gradient(145deg,#0e2b3ce8,#091c2ae8);box-shadow:0 22px 70px #0004;border-radius:10px}.register-card{padding:38px 40px}.kicker{margin:0 0 9px;color:var(--gold);font-size:10px;font-weight:800;letter-spacing:.2em}.register-card h1,.screen-heading h1{font-size:clamp(32px,4vw,52px);line-height:1.02;letter-spacing:-.05em;margin:0 0 16px}.register-card h1 span{color:#9bc5cf}.lede{color:#a3bbc7;font-size:13px;line-height:1.7;margin:0 0 27px}.register-card label,.create-fields label{display:block;color:#89aabb;font-size:10px;font-weight:800;letter-spacing:.14em;margin:12px 0 7px}.field{width:100%;border:1px solid #416679;border-radius:5px;background:#061722cc;color:var(--ink);padding:12px 13px;font-size:13px;outline:none}.field:focus{border-color:var(--teal);box-shadow:0 0 0 3px #54dbc522}.check-row{display:flex!important;align-items:center;gap:8px;color:#7897a7!important;font-size:10px!important;letter-spacing:0!important;font-weight:500!important;margin:13px 0 20px!important}.check-row input{accent-color:var(--gold)}.button{border:1px solid #456679;border-radius:5px;min-height:40px;padding:9px 14px;background:#102f40;color:#d7e7eb;font-size:11px;font-weight:750;transition:.16s ease}.button:hover{filter:brightness(1.15);transform:translateY(-1px)}.button-gold{border-color:#ffdda0;background:linear-gradient(#fbd878,#d9912e);color:#32220f;box-shadow:0 3px 0 #754719}.button-outline{background:#123347;border-color:#61b5b2;color:#b5e5dc}.button-quiet{background:#0d2635;border-color:#2d4c5c;color:#9ab6c3}.button-wide{width:100%;display:flex;justify-content:space-between;align-items:center}.form-status{min-height:18px;margin:14px 0 0;color:#a8d8d9;font-size:11px}.fine-print{color:#5d7d8d;text-align:center;font-size:10px;margin:20px 0 0}.screen-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:15px;margin-bottom:28px}.screen-heading h1{margin-bottom:7px}.subline{color:#91adba;font-size:13px;margin:0}.lobby-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px}.lobby-main{min-width:0}.section-label{display:flex;align-items:center;gap:12px;color:#83a7b4;font-size:10px;letter-spacing:.18em;font-weight:800;margin:0 0 12px}.section-label .line{height:1px;background:#2c4b5b;flex:1}.section-label span:last-child{font-size:9px;letter-spacing:0;color:#63808e;font-weight:500}.mode-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:27px}.mode-card{display:grid;grid-template-columns:37px 1fr auto;align-items:center;text-align:left;gap:10px;padding:15px 13px;border:1px solid #2c4b5c;border-radius:7px;background:#0d2534cc;color:var(--ink);min-height:75px}.mode-card.selected{border-color:#d5a74e;background:linear-gradient(125deg,#25394a,#153648);box-shadow:inset 3px 0 #f4bf56}.mode-card b{color:#668898;font:10px ui-monospace,monospace}.mode-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:7px;background:#163e4c;color:#62d8c7;font-size:17px}.mode-card strong{display:block;font-size:13px}.mode-card small{display:block;color:#7e9eab;font-size:10px;margin-top:3px}.hero-roster{display:flex;flex-wrap:wrap;gap:8px;min-height:56px;margin-bottom:26px}.hero-button{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #315363;border-radius:5px;background:#0b2332;color:#c0d7dd;font-size:10px}.hero-button.selected{border-color:#e0b152;color:#ffe4a3;background:#293b43}.hero-avatar-small{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#265a63;color:#8ee8da;font-weight:800}.empty-state{color:#6f8e9c;font-size:11px;margin:5px 0}.create-card{display:grid;grid-template-columns:1fr minmax(260px,1.2fr);gap:20px;align-items:end;padding:19px 20px}.create-card h2,.room-browser h2,.room-players h2{font-size:18px;margin:0 0 5px}.create-card p:not(.kicker){color:#7897a6;font-size:11px;margin:0}.create-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.create-fields label{margin:0}.create-fields .button{grid-column:1/-1}.room-browser{padding:20px}.room-browser-head,.panel-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.room-list{display:grid;gap:7px;margin-top:16px;min-height:140px}.room-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:11px 10px;border:1px solid #264655;border-radius:5px;background:#0a202d}.room-row strong{display:block;color:#c6dbe1;font-size:11px}.room-row small{display:block;color:#7594a2;font-size:9px;margin-top:3px}.room-row .button{min-height:31px;padding:5px 9px;font-size:10px}.lobby-chat,.room-chat{border-top:1px solid #244250;margin-top:20px;padding-top:14px}.chat-title{color:#6e95a3;font-size:9px;font-weight:800;letter-spacing:.17em}.chat-log{height:92px;overflow:auto;margin:8px 0;color:#93abb7;font-size:10px;line-height:1.7}.chat-log>span{display:block}.chat-log span strong{color:#e2be67}.chat-entry{display:flex;gap:6px}.chat-entry .field{padding:8px 9px;font-size:10px}.chat-entry .button{min-height:34px;padding:6px 10px}.room-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px}.room-players,.room-controls{padding:22px}.room-state{color:#67d9c5;border:1px solid #327a72;border-radius:12px;padding:4px 9px;font-size:9px;font-weight:800;letter-spacing:.13em}.player-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:20px}.player-slot{display:flex;align-items:center;gap:10px;min-height:65px;border:1px solid #294958;border-radius:6px;padding:9px;background:#0a202e}.player-slot.ready{border-color:#3b877c;background:#103237}.player-slot .hero-avatar-small{flex:none;width:34px;height:34px}.player-slot strong{display:block;font-size:11px;color:#d2e3e8}.player-slot small{display:block;color:#7695a4;font-size:9px;margin-top:3px}.player-slot em{margin-left:auto;font-size:9px;color:#e8bc61;font-style:normal}.room-controls .kicker{margin-bottom:18px}.rule-row{display:flex;justify-content:space-between;border-bottom:1px solid #264554;padding:11px 0;color:#70909e;font-size:10px}.rule-row strong{color:#d4e2e5;font-size:11px}.ready-note{padding:13px 0;color:#9eb8c1;font-size:11px}.room-controls .button+.button{margin-top:9px}.battle-screen{margin-left:calc((min(1280px,100vw - 40px) - 100vw)/2);margin-right:calc((min(1280px,100vw - 40px) - 100vw)/2);padding:0 max(20px,calc((100vw - min(1280px,100vw - 40px))/2))}.battle-header{display:flex;align-items:center;gap:24px;margin-bottom:15px}.battle-header h1{margin:0;font-size:21px}.battle-timer{margin-left:auto;color:#ffe6a4;font:700 22px ui-monospace,monospace}.battle-connection{color:#66d4bf;font-size:10px;letter-spacing:.1em}.battle-stage{position:relative;height:min(67vh,650px);min-height:390px;border:1px solid #2b4d5c;border-radius:8px;overflow:hidden;background:#061522}.battle-stage canvas{display:block;width:100%;height:100%;background:#071a28;outline:none}.battle-announcement{position:absolute;inset:45% 0 auto;text-align:center;color:#ffdc8a;font-size:25px;font-weight:850;letter-spacing:.2em;text-shadow:0 3px 0 #3a2410;pointer-events:none}.touch-controls{position:absolute;left:16px;right:16px;bottom:14px;display:flex;justify-content:space-between;align-items:end}.touch-controls #touch-pad{display:flex}.battle-footer{display:flex;align-items:center;gap:25px;padding:15px 2px}.hero-hud{display:flex;align-items:center;gap:9px;min-width:190px}.hero-avatar{display:grid;place-items:center;width:38px;height:38px;border-radius:6px;background:#28606a;color:#a6fff0;font-weight:900}.hero-hud strong{display:block;font-size:11px;margin-bottom:5px}.health-bar{width:150px;height:6px;border-radius:4px;background:#1b3945;overflow:hidden}.health-bar span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#54dbc5,#dce874)}.battle-controls{color:#89a6b2;font-size:10px;flex:1}.battle-controls kbd{display:inline-block;padding:2px 5px;margin:0 3px 0 7px;border:1px solid #3a5e6e;border-radius:3px;color:#d5e5e8;background:#102c3b;font:9px ui-monospace,monospace}.battle-score{color:#f7d684;font:700 16px ui-monospace,monospace}.diagnostic-hooks{position:fixed;left:-1000px;top:0;width:320px;height:180px;opacity:0;pointer-events:none;overflow:hidden}.diagnostic-hooks #match-panel{display:none}.diagnostic-hooks #scene{display:block;width:320px;height:180px}.diagnostic-hooks #touch-pad{position:fixed;right:12px;bottom:12px;width:116px;height:116px;pointer-events:auto;opacity:0}.site-footer{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-between;gap:15px;padding:10px clamp(20px,5vw,74px);border-top:1px solid #1c3948;background:#061522e8;color:#60808e;font-size:9px;letter-spacing:.04em}.noscript{position:fixed;inset:20px;padding:20px;background:#112d3a;color:#f4c66c}@media(max-width:900px){.register-screen{grid-template-columns:1fr}.register-art{display:none}.lobby-grid,.room-grid{grid-template-columns:1fr}.room-browser{order:-1}.create-card{grid-template-columns:1fr}.battle-screen{margin-left:0;margin-right:0;padding:0}.site-footer{position:static;margin-top:10px}.mode-choices{grid-template-columns:1fr 1fr}}@media(max-width:600px){.topbar{height:60px;padding:0 16px}.account-chip{font-size:10px}.connection-pill{display:none}.app-shell{width:calc(100% - 28px);padding-top:28px}.register-card{padding:27px 23px}.screen-heading{align-items:flex-start;flex-direction:column}.screen-heading .button{align-self:flex-end;margin-top:-45px}.mode-choices,.player-slots{grid-template-columns:1fr}.create-fields{grid-template-columns:1fr}.battle-screen{padding:0}.battle-stage{min-height:390px;height:62vh}.battle-footer{gap:9px;flex-wrap:wrap}.battle-controls{order:3;flex-basis:100%;text-align:center}.battle-score{margin-left:auto}.site-footer{font-size:8px;padding:9px 14px}}@media(prefers-reduced-motion:no-preference){.register-art .hero-silhouette{animation:float 5s ease-in-out infinite}@keyframes float{50%{transform:translateY(-8px)}}}

#battle-screen[hidden] #scene{display:block;width:320px;height:180px}
/* Shared reference artwork: the Rust host serves these bytes from the TypeScript
   reference's checked-in art directory; no TypeScript runtime is loaded. */
body[data-screen="register"] .backdrop{background:linear-gradient(90deg,#07131ff2 0%,#07131fdb 38%,#07131f88 100%),url('/art/hero-plaza-v2.webp') center/cover fixed}
body[data-screen="lobby"] .backdrop,body[data-screen="room"] .backdrop{background:linear-gradient(90deg,#07131fe8,#07131fb8),url('/art/hero-plaza-v2.webp') center/cover fixed}
.battle-stage{background:#061522 url('/art/battle-banners-en-v2.webp') center/cover no-repeat}
.battle-stage canvas{background:#071a28cc}
/* Keep the shared reference backdrop behind the Rust-owned interface. */
.topbar,.app-shell,.site-footer{position:relative;z-index:1}

/* Reference presentation: the original web client uses bright key art, silver
   windows, glossy blue title bars and a compact bottom menu. Keep the Rust
   controls and IDs above, but present them in that same visual language. */
body{background:#1599d4;color:#263d52}
.topbar{display:none}
.app-shell{width:100%;min-height:100vh;margin:0;padding:0 0 52px}
.backdrop{z-index:0;background:#1599d4 url('/art/hero-plaza-v2.webp') center/cover fixed}
body[data-screen="register"] .backdrop,
body[data-screen="lobby"] .backdrop,
body[data-screen="room"] .backdrop{background:#1599d4 url('/art/hero-plaza-v2.webp') center/cover fixed}
.backdrop-glow,.backdrop-grid{display:none}
.register-art{display:none}
.register-screen{min-height:100vh;display:block}
.register-card{position:absolute;left:clamp(32px,8vw,140px);top:50%;transform:translateY(-50%);width:min(430px,calc(100vw - 48px));padding:36px;display:grid;gap:12px;border:3px solid #e9f3fa;outline:1px solid #4c647b;border-radius:9px;background:linear-gradient(135deg,#fffaf3f5,#d9e6eff5);box-shadow:0 5px 0 #344d6899,inset 0 0 0 1px #92a9bc,0 16px 32px #23456655;color:#243e56}
.register-card .kicker{background:linear-gradient(#3d99d9,#075092);color:#fff;padding:12px 10px;margin:-30px -30px 8px;border:1px solid #b5d8ee;border-radius:4px;font-size:10px;letter-spacing:.07em;text-align:center;text-shadow:0 1px 2px #002e57}
.register-card h1{margin:6px 0 0;color:#ffe668;font-size:clamp(42px,5vw,58px);line-height:.95;letter-spacing:-.045em;font-style:italic;text-shadow:2px 3px 0 #552f16,0 4px 0 #fff;-webkit-text-stroke:1px #693b12}
.register-card h1 span{color:#ffb52d}
.register-card .lede{margin:6px 0 0;color:#3b536a;font-size:14px;font-weight:600}
.register-card label{color:#344e66;font-size:10px;font-weight:700;letter-spacing:.12em}
.register-card .field{color:#243e56;background:#fff;border:2px solid #8ea6ba;box-shadow:inset 0 2px 4px #293e521a}
.register-card .button-gold{color:#fff;text-shadow:0 2px 2px #754400;background:linear-gradient(#ffd05c,#f29312);border:2px solid #fff0b5;box-shadow:0 3px 0 #9b5b11,0 0 0 1px #b87720;font-weight:800}
.register-card .check-row{display:none!important}
.register-card .form-status{color:#174e77}
.register-card .fine-print{color:#526a7d;margin:5px 0 0}
.login-controls{display:flex;justify-content:space-between;gap:10px;color:#41566c;font-size:11px}
.login-controls kbd{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:4px;border:1px solid #123e66;border-bottom-width:3px;border-radius:4px;color:#fff;background:linear-gradient(#4795d6,#14558e);font:700 11px system-ui;text-shadow:0 1px 1px #123}
.screen-heading{margin:0 0 8px;padding:9px 12px;border:2px solid #d8edf9;border-radius:6px;background:linear-gradient(#3d99d9,#075092);color:#fff;box-shadow:0 3px 0 #31485f;text-shadow:0 1px 2px #002e57}
.screen-heading .kicker{display:none}
.screen-heading h1{margin:0;font-size:20px;letter-spacing:0;color:#fff}
.screen-heading .subline{display:none}
.screen-heading .button{align-self:center;min-height:30px;padding:5px 12px;background:linear-gradient(#6ea9d2,#29658f);border-color:#cbe9f8;color:#fff}
.lobby-screen,.room-screen{width:min(980px,calc(100vw - 32px));margin:clamp(38px,10vh,120px) auto 0;padding:8px;border:3px solid #e9f3fa;outline:1px solid #4c647b;border-radius:9px;background:#eef1f2f2;box-shadow:0 5px 0 #344d6899,0 16px 32px #23456655;color:#31475c}
.lobby-grid{display:flex;flex-direction:column;gap:8px}
.room-browser{order:-1;padding:12px;border:1px solid #9babb7;border-radius:3px;background:#f4f4f2;box-shadow:inset 0 0 0 1px #fff; color:#31475c}
.room-browser-head{padding-bottom:8px;border-bottom:1px solid #c3c9cd}
.room-browser-head .kicker{display:none}
.room-browser h2{font-size:17px;color:#1b4d72}
.room-browser-head .button{min-height:28px;padding:3px 12px;background:linear-gradient(#f7f7f7,#ccd2d5);border-color:#89949d;color:#324c60}
.room-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;min-height:120px;margin-top:10px}
.room-row{min-height:72px;padding:10px;border:2px solid #c2c7ca;border-radius:5px;background:linear-gradient(135deg,#eee,#d9dadd);color:#52606b}
.room-row strong{color:#52606b;font-size:12px}
.room-row small{color:#6f7880}
.room-row .button{min-height:28px;padding:3px 10px;background:linear-gradient(#479fe0,#1261a0);border-color:#d9f0ff;color:#fff}
.lobby-chat,.room-chat{border-top:1px solid #c3c9cd;margin-top:10px;padding-top:8px}
.chat-title{color:#657786}
.chat-log{color:#61717f;background:#fff9;height:72px}
.chat-entry .field{padding:7px 9px;color:#31475c;background:#fff;border-color:#a5b3be}
.chat-entry .button{min-height:32px;background:linear-gradient(#f7f7f7,#ccd2d5);border-color:#89949d;color:#324c60}
.lobby-main{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.section-label{grid-column:1/-1;color:#395b74;margin:0;font-size:10px}
.section-label .line{background:#aebac2}
.mode-choices{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:0}
.mode-card{min-height:54px;padding:7px;border:2px solid #bfc8ce;border-radius:4px;background:linear-gradient(#f8f8f8,#d6d9db);color:#35516a}
.mode-card.selected{border-color:#f19a27;background:linear-gradient(#fff5dd,#ffd179);box-shadow:none}
.mode-card strong{font-size:11px}.mode-card small{color:#6c7880;font-size:8px}.mode-icon{width:24px;height:24px;font-size:12px;background:#3d8dcc;color:#fff}
.hero-roster{grid-column:1/-1;gap:5px;min-height:48px;margin:0;padding:8px;border:1px solid #bbc6cc;background:#e2e5e6}
.hero-button{padding:5px 7px;border:2px solid #aebbc4;background:#f8f8f8;color:#35516a;font-size:9px}
.hero-button.selected{border-color:#f19a27;background:#fff0cb;color:#9b4d06}
.hero-avatar-small{width:23px;height:23px;background:#2c7fb5;color:#fff}
.create-card{grid-column:1/-1;grid-template-columns:1fr 1.4fr;gap:10px;padding:10px;border:1px solid #adb9c1;border-radius:3px;background:#e4e7e8;box-shadow:none}
.create-card h2{font-size:15px;color:#2b5878}.create-card p:not(.kicker){color:#607584}
.create-fields .field{padding:8px;color:#31475c;background:#fff;border-color:#a5b3be}
.create-fields .button{min-height:34px;background:linear-gradient(#3eaf69,#078237);border-color:#d2f5dc;color:#fff}
.room-grid{display:grid;grid-template-columns:1fr 300px;gap:8px}
.room-players,.room-controls{padding:12px;border:1px solid #9babb7;border-radius:3px;background:#f4f4f2;box-shadow:inset 0 0 0 1px #fff;color:#31475c}
.panel-heading{padding:0 0 8px;border-bottom:1px solid #c3c9cd}.room-players h2{color:#1b4d72;font-size:17px}.room-state{color:#fff;background:#3d8dcc;border-color:#1c5c89;border-radius:3px}
.player-slots{gap:5px;margin-top:10px}.player-slot{min-height:58px;padding:7px;border:2px solid #bfc8ce;border-radius:4px;background:linear-gradient(#2e9fe1,#096da9);color:#fff}.player-slot.ready{border-color:#f19a27;background:linear-gradient(#6dc88e,#18834b)}.player-slot strong,.player-slot small{color:#fff}.player-slot em{color:#fff}
.room-controls .kicker{display:none}.rule-row{padding:8px;border-bottom:1px solid #c3c9cd;color:#6c7880}.rule-row strong{color:#31475c}.ready-note{padding:10px 0;color:#61717f}.room-controls .button-outline{background:linear-gradient(#479fe0,#1261a0);border-color:#d9f0ff;color:#fff}.room-controls .button-gold{background:linear-gradient(#3eaf69,#078237);border-color:#d2f5dc;color:#fff}
.battle-screen{margin:0;padding:0;min-height:100vh}
/* Battle owns the viewport like the reference canvas (apps/client/src/style.css:40-41):
   the HUD overlays the stage, and the shop/menu bar is hidden in game
   (style.css:164-166) so it cannot cover the HP bar, name or score. */
body[data-screen="battle"] .app-shell{min-height:0;padding:0}
body[data-screen="battle"] .battle-screen{position:fixed;inset:0;min-height:0}
/* Touch screens: the battle keeps the height it had before the chat's keyboard came up (index.html). */
body[data-touch="on"][data-screen="battle"] .battle-screen{bottom:auto;height:var(--battle-h,100%)}
body[data-screen="battle"] .site-footer{display:none}
/* The volume widget clears the battle HUD bar instead of the hidden menu bar. */
body[data-screen="battle"] .volume-panel{bottom:65px}
.battle-header{position:absolute;z-index:3;top:10px;left:50%;right:auto;transform:translateX(-50%);width:max-content;min-width:180px;max-width:calc(100% - 32px);gap:12px;justify-content:center;padding:5px 10px;border:1px solid #d6eefc;border-radius:5px;background:linear-gradient(#3d99d9,#075092);color:#fff;text-shadow:0 1px 2px #002e57}
.battle-header .kicker{display:none}.battle-header h1{font-size:14px}.battle-timer{margin-left:0;font-size:14px}.battle-connection{font-size:9px}
.battle-stage{height:100%;min-height:0;border:0;border-radius:0;background:#1599d4 url('/art/hero-plaza-v2.webp') center/cover no-repeat}
.battle-stage canvas{background:transparent}
/* Overhead name and HP gauges (game.ts:1102-1123), drawn by the arena over
   the scene; it never takes input. */
.battle-stage canvas.gauge-overlay{position:absolute;inset:0;width:100%;height:100%;background:transparent;pointer-events:none}
.battle-announcement{inset:45% 0 auto;color:#ffed9e;font-size:28px;text-shadow:0 3px 0 #224b74}
/* Match result held over the battle (main.ts:126-134): the WIN/LOSE/DRAW
   banner (BriefingWnd, apps/client/src/ui/banners.ts:4), the KILLS/HITS/
   DAMAGE ranks (ModeRankWnd) and the final ranking with each player's
   contribution, own row highlighted (ResultScoreUserWnd, ui/hud/results.ts:352-381). */
.battle-announcement[data-result],.battle-announcement[data-briefing]{inset:14% 0 auto;z-index:3;color:#ffd43b;font-size:clamp(44px,8vw,84px);font-style:italic;font-weight:950;letter-spacing:.03em;line-height:1;text-shadow:3px 3px 0 #2b1405,-3px 3px 0 #2b1405,3px -3px 0 #2b1405,-3px -3px 0 #2b1405,0 7px 0 #2b1405,0 0 28px #ff9d2e99}
.battle-announcement[data-result="lose"]{color:#a9cdfa;text-shadow:3px 3px 0 #0c2444,-3px 3px 0 #0c2444,3px -3px 0 #0c2444,-3px -3px 0 #0c2444,0 7px 0 #0c2444,0 0 28px #4b91e599}
.battle-announcement[data-result="draw"]{color:#f4f7f9;text-shadow:3px 3px 0 #2c3a46,-3px 3px 0 #2c3a46,3px -3px 0 #2c3a46,-3px -3px 0 #2c3a46,0 7px 0 #2c3a46}
/* Round start (BriefingWnd.showStart, ui/hud/results.ts:253-302): the BATTLE
   START plaque over the help bar with the mode's briefing text, for the 3 s
   briefing_time once the arena has loaded; the last second fades out. */
.battle-briefing{position:absolute;z-index:3;left:50%;top:calc(14% + 104px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);margin:0;padding:7px 22px;border-radius:4px;background:#000000a6;color:#e5e5e5;font-size:13px;font-weight:700;text-align:center;text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;pointer-events:none}
.battle-briefing:empty{display:none}
/* The generated English plaques (apps/client/src/ui/banners.ts, the 2x3
   atlas battle_chrome.rs loads as --banner-art): the result and BATTLE START
   plaques 440 UI units wide, centred 140 above the briefing centre
   cy = h/2 - (h - 600)*0.192 - 50 (results.ts:296,304), with the help bar
   text below; DOUBLE / TRIPLE KILL 330 wide (killInfo.ts:141). The text is
   kept for assistive technology and as the fallback without the atlas. */
.battle-screen[data-banner-art="ready"] .battle-announcement:is([data-result],[data-briefing]){left:50%;right:auto;top:calc(50% - .192*(100% - var(--hud,1)*600px) - var(--hud,1)*190px);width:calc(var(--hud,1)*440px);height:calc(var(--hud,1)*195.5px);transform:translate(-50%,-50%);background:var(--banner-art) 0 0/200% 300% no-repeat;color:transparent;font-size:0;text-shadow:none}
.battle-screen[data-banner-art="ready"] .battle-announcement[data-result="lose"]{background-position:100% 0}
.battle-screen[data-banner-art="ready"] .battle-announcement[data-result="draw"]{background-position:0 50%}
.battle-screen[data-banner-art="ready"] .battle-announcement[data-briefing]{background-position:100% 50%}
.battle-screen[data-banner-art="ready"] :is(.battle-briefing,.battle-results-grades){top:calc(50% - .192*(100% - var(--ui-hud,1)*600px) - var(--ui-hud,1)*86px)}
.battle-screen[data-banner-art="ready"] .kill-banner:is([data-combo="2"],[data-combo="3"]) .kill-banner-title{width:calc(var(--hud)*330px);height:calc(var(--hud)*146.6px);background:var(--banner-art) 0 100%/200% 300% no-repeat;color:transparent;font-size:0;text-shadow:none}
.battle-screen[data-banner-art="ready"] .kill-banner[data-combo="3"] .kill-banner-title{background-position:100% 100%}
/* Battle loading screen (Hud.loading, apps/client/src/game/hud.ts:21-29;
   .hud-loading, apps/client/src/style.css:95,138): covers the arena from
   matchStart until the map and heroes are ready, or says why they failed. The
   HUD bars and the battle menu stay above it so a failed battle can be left. */
.battle-loading{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:12px;padding:16px;background:linear-gradient(#16436b55,#143655cc),#1599d4 url('/art/hero-plaza-v2.webp') center/cover no-repeat;color:#fff;font-size:15px;font-weight:700;text-align:center;overflow-wrap:anywhere;text-shadow:0 2px 3px #17344e}
.battle-loading[hidden]{display:none}
.battle-screen[data-loading] :is(#battle-time-score,#la-hud-score,.battle-header,#battle-minimap,#battle-hud,#gauge-overlay,.hero-bar,#touch-pad,.touch-actions,#touch-heroes){visibility:hidden}
.battle-spinner{width:36px;height:36px;border:4px solid #2b3a66;border-top-color:#ffb52e;border-radius:50%;animation:battle-spin .8s linear infinite}
.battle-loading[data-state="failed"] .battle-spinner{display:none}
.battle-loading-bar{width:min(320px,72vw);height:10px;border:0;border-radius:6px;overflow:hidden;background:#2b3a66;accent-color:#ffb52e}
.battle-loading-bar::-webkit-progress-bar{background:#2b3a66;border-radius:6px}
.battle-loading-bar::-webkit-progress-value{background:#ffb52e;border-radius:6px;transition:width .35s ease}
.battle-loading-bar::-moz-progress-bar{background:#ffb52e;border-radius:6px}
.battle-loading-detail{font-size:12px;font-weight:600;opacity:.9}
.battle-loading[data-state="failed"] .battle-loading-bar,.battle-loading[data-state="failed"] .battle-loading-detail{display:none}
@keyframes battle-spin{to{transform:rotate(360deg)}}
.battle-results{position:absolute;z-index:3;left:50%;top:57%;transform:translateX(-50%);width:min(340px,calc(100% - 32px));max-height:calc(43% - 66px);overflow:hidden;display:flex;flex-direction:column;border:3px solid #e9f3fa;outline:1px solid #4c647b;border-radius:9px;background:#f3f5f6;color:#19476b;box-shadow:0 5px 0 #344d6899,0 16px 32px #23456655}
.battle-results[hidden]{display:none}
.battle-results h2{margin:0;padding:7px 12px;background:linear-gradient(#3d99d9,#075092);color:#fff;font-size:15px;text-shadow:0 1px 2px #002e57}
.battle-results-headline{margin:9px 12px 5px;font-size:18px;font-weight:850;color:#19476b}
.battle-results-grades{display:flex;justify-content:center;gap:16px;margin:0 12px 8px;padding:0;list-style:none;color:#31475c;font-size:11px;font-weight:800;letter-spacing:.06em}
.battle-results-grades b{margin-left:5px;font-size:19px;font-style:italic;color:#8a96a0}
.battle-results-grades b[data-grade="S"]{color:#1b84d8}.battle-results-grades b[data-grade="A"]{color:#2b9d4c}.battle-results-grades b[data-grade="B"]{color:#ec7414}
.battle-results-rows{margin:0;padding:0 8px 8px;list-style:none;overflow:auto}
.battle-results-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;gap:10px;align-items:center;padding:4px 9px;color:#d8471d;font-size:13px}
.battle-results-rows li:nth-child(odd){background:#e5e9ec}
.battle-results-rows li.blue{color:#1d5fc4}
.battle-results-rows li.me{background:#3b6fd1;color:#fff}
.battle-results-rows li.red.me{background:#d4532a}
.result-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.result-kills{font-size:11px;opacity:.8}
.result-contribution{text-align:right;font-weight:750}
/* The battle menu is closed for the result (game.ts:933). */
.battle-screen[data-result] .battle-menu-open{display:none}
/* Touch battle pad (apps/client/src/game/touch.ts and the reference
   style.css:173-204): shown only in a battle on a touch device or with
   ?touch=1. The stick zone is the left 45% below the top 28% (touch.ts:400)
   and the ring rests at 120u,105u from its corner (touch.ts:353);
   Attack/Jump/Defend sit at touch.ts:333-341. The pad replaces the volume
   pill in battle (reference style.css:199-204). Everything stays clear of
   the HUD bar below --touch-floor. */
#scene{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body[data-touch="on"][data-screen="battle"]{-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
body[data-touch="on"][data-screen="battle"] .battle-screen{touch-action:none}
body[data-touch="on"][data-screen="battle"] .volume-panel{display:none!important}
.touch-controls{--touch-floor:64px;display:none;position:absolute;inset:0;z-index:2;pointer-events:none}
body[data-touch="on"][data-screen="battle"] .touch-controls{display:block}
.touch-controls #touch-pad{display:block;position:absolute;left:0;top:28%;bottom:var(--touch-floor);width:45%;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.touch-stick{position:absolute;left:calc(62px*var(--touch-u,1));bottom:calc(47px*var(--touch-u,1));width:calc(116px*var(--touch-u,1));height:calc(116px*var(--touch-u,1));border:2px solid #ffffff8c;border-radius:50%;background:#0a122047;opacity:.55;pointer-events:none}
#touch-pad[data-active="true"] .touch-stick{left:var(--stick-x);top:var(--stick-y);bottom:auto;transform:translate(-50%,-50%);opacity:1}
#touch-pad[data-active="true"]:not([data-dir="0"]) .touch-stick{border-color:#ffd678f2}
.touch-knob{position:absolute;left:50%;top:50%;width:calc(52px*var(--touch-u,1));height:calc(52px*var(--touch-u,1));border:1.5px solid #fffffff2;border-radius:50%;background:#ffffffc7;transform:translate(-50%,-50%) translate(var(--knob-x,0px),var(--knob-y,0px))}
.touch-actions{position:absolute;right:0;bottom:var(--touch-floor);width:0;height:0}
.touch-actions button{position:absolute;display:grid;place-items:center;padding:0;border:2px solid #ffffffd9;border-radius:50%;background:#0a122061;color:#fff;font:800 calc(12px*var(--touch-u,1))/1 system-ui,sans-serif;text-shadow:0 1px 2px #000a;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.touch-actions button[data-pressed="true"]{background:#ffffff6b;transform:scale(.93)}
#touch-attack{right:calc(38px*var(--touch-u,1));bottom:calc(36px*var(--touch-u,1));width:calc(88px*var(--touch-u,1));height:calc(88px*var(--touch-u,1));border-width:2.5px;font-size:calc(14px*var(--touch-u,1))}
#touch-jump{right:calc(148.6px*var(--touch-u,1));bottom:calc(59.4px*var(--touch-u,1));width:calc(58px*var(--touch-u,1));height:calc(58px*var(--touch-u,1))}
#touch-defense{right:calc(85.8px*var(--touch-u,1));bottom:calc(141.2px*var(--touch-u,1));width:calc(58px*var(--touch-u,1));height:calc(58px*var(--touch-u,1))}
.battle-footer{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:8px 48px;border-top:3px solid #9bbad0;background:linear-gradient(#27648f,#0a2e55);color:#fff}
.hero-avatar{background:#1680c0;border:1px solid #d6eefc}.health-bar{background:#0b2742}.health-bar span{background:linear-gradient(90deg,#53eb77,#f5df55)}.battle-controls{color:#d4e7f3}.battle-score{color:#ffe875}
.site-footer{position:fixed;left:0;right:0;bottom:0;height:48px;padding:0 16px;border-top:3px solid #9bbad0;background:linear-gradient(#27648f,#0a2e55);color:#d6e9f5;font-size:9px;z-index:5}
@media(max-width:700px){.register-card{left:16px;width:calc(100vw - 32px);padding:24px}.lobby-screen,.room-screen{width:calc(100vw - 16px);margin-top:28px}.lobby-main,.room-grid{grid-template-columns:1fr}.mode-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.create-card{grid-template-columns:1fr}.battle-footer{padding:8px 16px}.battle-controls{display:none}}
.room-browser-actions{display:flex;align-items:center;gap:5px}.room-browser-actions .button{min-height:28px;padding:3px 9px}.room-browser-actions .button-quick{background:linear-gradient(#e89a47,#b85a13);border-color:#fff0c4;color:#fff;text-shadow:0 1px 1px #754400}.room-browser-actions .button-create{background:linear-gradient(#3eaf69,#078237);border-color:#d2f5dc;color:#fff}

/* Catalogue windows from the reference client. The Rust controls stay in the
   DOM, but the first lobby view is the compact Battle/Plaza room catalogue;
   mode and hero setup opens when Create Room is selected. */
.lobby-screen{width:min(780px,calc(100vw - 32px));margin:27vh auto 54px;padding:6px}
.lobby-screen .screen-heading{margin:0 0 7px;padding:4px 8px;min-height:42px;align-items:center}
.lobby-screen .screen-heading h1{font-size:20px}
.lobby-screen .screen-heading .button-quiet{display:none}
.legacy-tabs{display:flex;gap:5px;margin-left:auto;align-self:stretch}
.legacy-tab{min-width:106px;border:1px solid #b8d9ec;border-radius:5px;background:linear-gradient(#3d99d9,#075092);color:#fff;font-weight:800;text-shadow:0 1px 2px #002e57}
.legacy-tab.selected{background:linear-gradient(#fff,#e1edf4);color:#1e587a;text-shadow:none}
/* The Plaza tab, the Shop / My Items windows and the Monster Survival mode
   card are not in the Rust MVP: they look unavailable and say so when
   pressed. */
.legacy-tab[aria-disabled="true"],.legacy-menu button[aria-disabled="true"],.mode-card[aria-disabled="true"]{opacity:.55;filter:grayscale(.7);cursor:not-allowed}
/* The create popup's map is a list of the MVP's maps, not free text. */
.create-fields select.field{font:inherit;font-size:13px;color-scheme:light}
.lobby-grid{display:block}
.lobby-main{display:none}
.room-browser{padding:12px 13px 11px}
.room-browser-head{align-items:center;padding:0 0 9px;border-bottom:0}
.room-browser-head h2{display:none}
.room-browser-head .room-browser-actions{width:100%;gap:12px;align-items:center}
.room-browser-head .room-browser-actions .button{min-height:42px;padding:7px 17px;font-size:16px;border-radius:6px}
.room-browser-head .room-browser-actions .button-quick{order:0;min-width:190px}
.room-browser-head .room-browser-actions .button-create{order:1;min-width:215px}
.room-browser-head .room-browser-actions .button-quiet{order:2;margin-left:auto;min-width:116px;font-size:13px}
.room-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:86px;gap:8px;min-height:258px;margin:0}
.room-row{position:relative;min-height:86px;padding:12px 15px 10px 74px;border:2px solid #c1c4c8;border-radius:5px;background:linear-gradient(#efefef,#dedfe1)}
/* The grey × is the empty cell's IconEmpty only; a listed room has no ×
   (PartyCatalogueBtn.renderContent, apps/client/src/ui/classes.ts:169-178). */
.room-row.empty::before{content:'×';position:absolute;left:14px;top:15px;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#d5d6d8;color:#f4f4f4;font-size:38px;font-weight:300;line-height:1}
.room-row strong{font-size:16px;font-weight:500;color:#70757a}
.room-row small{font-size:12px;color:#777;margin-top:5px}
/* Join sits in the row's right column, clear of the name and detail lines;
   a running or full room shows why it cannot be joined, greyed like the
   source's inactive PartyCatalogueBtn. */
.room-row .button{align-self:center;min-height:24px;padding:1px 12px;border:0;border-radius:4px;background:linear-gradient(#479fe0,#1261a0);color:#fff;font-size:12px}
.room-row .button:disabled{background:#a9aeb2;color:#f1f2f3;cursor:default;filter:none;transform:none}
.room-info{min-width:0}
.room-info strong,.room-info small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-number{display:inline-block;min-width:20px;margin-right:6px;padding:0 4px;border-radius:3px;background:#6f7a84;color:#fff;font-size:10px;font-weight:700;line-height:16px;text-align:center;vertical-align:1px}
.room-row.playing strong,.room-row.full strong,.room-row.playing small,.room-row.full small{color:#a7abaf}
.room-row.playing .room-number,.room-row.full .room-number{background:#b0b5b9}
.room-row.empty{color:#70757a}
.room-row.empty .button{display:none}
.room-row.empty strong{font-size:16px;color:#70757a}
.room-row.empty small{font-size:12px;color:#777}
/* A listed room's player count, red at the cell's top right and grey when
   the room cannot be joined (apps/client/src/ui/classes.ts:177-184). */
.room-count{position:absolute;top:8px;right:15px;color:rgb(185,22,0);font-size:16px;line-height:1.2}
.room-row.playing .room-count,.room-row.full .room-count{color:#a7abaf}
@media(max-width:700px){.room-count{top:6px;right:9px;font-size:12px}.room-row:not(.empty) .room-info strong{padding-right:38px}}
.room-pagination{display:flex;align-items:center;justify-content:space-between;padding:7px 0 6px;color:#516b7d;font-size:13px}
.room-pagination .button{min-width:88px;min-height:26px;padding:1px 10px;font-size:21px;line-height:1;background:linear-gradient(#fff,#d2d5d7);border-color:#929ba2;color:#52616b}
.room-pagination span{margin:auto}
.room-pagination .button:disabled{opacity:.45;cursor:default;filter:none;transform:none}
.lobby-chat{margin:0;padding:4px 10px 0;border-top:0}
.lobby-chat .chat-title{font-size:13px;letter-spacing:0;font-weight:500;color:#637788;padding-bottom:5px;border-bottom:2px solid #e2e4e5}
/* Messages read at the room chat's size (#room-screen .chat-log), three rows. */
.lobby-chat .chat-log{height:57px;margin:0;background:transparent;border-bottom:2px solid #e2e4e5;font-size:13px;line-height:19px}
.lobby-chat .chat-entry{padding:6px 0 0}
.lobby-chat .chat-entry::before{content:'Lobby';display:grid;place-items:center;min-width:52px;height:26px;border:1px solid #969fa5;border-radius:5px;background:linear-gradient(#fff,#d6d8da);color:#4f626e;font-size:11px}
.lobby-chat .chat-entry .field{font-size:13px;padding:3px 9px}
.lobby-chat .chat-entry .button{display:none}
/* Enter sends (gameChat.ts:285-296); a phone keyboard may have no Enter, so touch layouts keep Send. */
body[data-touch="on"] .lobby-chat .chat-entry .button{display:inline-block}
.legacy-menu{display:flex;gap:3px;align-items:center}
.legacy-menu button{height:29px;padding:2px 14px;border:1px solid #9fcae4;border-radius:4px;background:linear-gradient(#2d9aee,#07528d);color:#fff;font-size:12px;font-weight:800;text-shadow:0 1px 1px #05304f}
.legacy-menu button:first-child{background:linear-gradient(#3dd77b,#007e3a)}
/* Options (apps/client/src/main.ts:173-181) opens the volume widget's sliders
   and the key legend without hovering it. */
#volume-panel[data-open]{flex-wrap:wrap;max-width:calc(100vw - 24px)}
#volume-panel[data-open] label{display:inline-flex}
#volume-panel .options-keys{display:none;flex-basis:100%;margin:0;color:#cfd8e6;font-size:11px}
#volume-panel[data-open] .options-keys{display:block}
.runtime-footer{display:none}
.site-footer{justify-content:flex-start}
/* The menu keeps its one-line labels on narrow screens (the reference zooms
   the whole bar, apps/client/src/style.css:205-206). The runtime diagnostics
   line lives with the hidden test hooks: the reference footer shows only the
   menu. */
.legacy-menu{flex:none}.legacy-menu button{white-space:nowrap}
/* The login screen has neither the menu bar nor diagnostics, only the login
   card and the sound toggle in its corner (apps/client/src/main.ts:224-330;
   gameAudio.ts:174 bottom:12px). */
body[data-screen="register"] .site-footer{display:none}
body[data-screen="register"] .app-shell{padding-bottom:0}
body[data-screen="register"] .volume-panel{bottom:12px}
@media(max-width:600px){.site-footer{gap:8px}.legacy-menu button{padding:2px 8px}}
/* The lobby window is centred in the space above the fixed 48 px footer, as
   the reference's scaled UI keeps the whole panel, chat field included, in
   view (y 95-705 at 1280x800, apps/client/src/ui/lobbyLayout.ts:140); a
   viewport too short for it starts it at the top and scrolls. */
body[data-screen="lobby"] .app-shell{display:flex;flex-direction:column;padding:12px 0 60px}
body[data-screen="lobby"] .lobby-screen{margin:auto}
/* Small screens (phones): the DOM chrome follows the canvas UI scale of the
   reference (--dom-scale = min(1, w/800, h/600), applyDomScale, ui/root.ts:
   220-225; .native-menu-bar zoom, style.css:205-206), and the lobby window
   shrinks to fit above the footer bar like the scaled lobby canvas (--ui-fit,
   room_view.rs). --dom-scale stays 1 at 800x600 and up; --ui-fit keeps
   growing past it so the lobby matches the waiting room on desktops. */
.site-footer,.toast{zoom:var(--dom-scale,1)}
body[data-screen="lobby"] .lobby-screen{zoom:var(--ui-fit,1)}
body[data-screen="lobby"] .app-shell{min-height:100vh;padding:0 0 var(--footer-space,48px)}
/* Create popup's Cancel (closeCreate, apps/client/src/ui/screens.ts:497-499)
   sits beside Create instead of taking the full row. */
.create-fields #lobby-create{grid-column:auto}
.create-fields #lobby-create-cancel{grid-column:auto;min-height:34px;background:linear-gradient(#fff,#d4d6d8);border:1px solid #9da5aa;color:#43515c}
@media(max-width:700px){.lobby-screen{margin-top:9vh}.legacy-tabs{display:none}.room-browser-head .room-browser-actions{flex-wrap:wrap}.room-browser-head .room-browser-actions .button-quick,.room-browser-head .room-browser-actions .button-create{min-width:0;flex:1;font-size:13px}.room-browser-head .room-browser-actions .button-quiet{margin-left:0;min-width:auto}.room-list{grid-auto-rows:minmax(72px,auto);min-height:216px}.room-row{min-height:72px;padding-left:57px}.room-row.empty::before{left:8px;top:10px;width:40px;height:40px;font-size:30px}.room-row:not(.empty){grid-template-columns:minmax(0,1fr);row-gap:3px}.room-row .button{justify-self:start;min-height:20px;padding:1px 7px;font-size:10px}.room-number{min-width:16px;margin-right:4px;font-size:8px;line-height:13px}.room-row strong{font-size:12px}.room-row small{font-size:9px}}

/* The own slot opens the hero window (RoomScreen.pickHero, ui/screens.ts:933,
   945-952); the window is the silver SoldierSelect frame with a close button. */
.player-slot[data-me]{cursor:pointer}
.player-slot[data-me]:hover{filter:brightness(1.24)}
.player-slot[data-me]:focus-visible{outline:2px solid #ffbf47;outline-offset:2px}
/* Battle menu (apps/client/src/ui/battleMenu.ts:13-38, style.css:13-25): a
   "Menu · Esc" button over the stage and the exit window with Leave battle and
   Resume battle. The battle keeps running behind the modal backdrop. */
.battle-menu-open{position:absolute;z-index:4;top:10px;right:16px;min-height:28px;padding:5px 12px;border:1px solid #d0e7f5;border-radius:5px;background:linear-gradient(#347fba,#124d79);color:#fff;font-size:12px;font-weight:700;text-shadow:0 1px 2px #002e57}
.battle-menu-open:focus-visible,.battle-menu button:focus-visible{outline:2px solid #ffbf47;outline-offset:2px}
.battle-menu{width:min(414px,calc(100vw - 24px));padding:0;border:3px solid #e9f3fa;outline:1px solid #4c647b;border-radius:9px;background:#ececea;color:#31475c;box-shadow:0 5px 0 #344d6899,0 16px 32px #23456655}
.battle-menu::backdrop{background:#07162566}
.battle-menu h2{margin:0;padding:9px 13px;background:linear-gradient(#3d99d9,#075092);color:#fff;font-size:17px;text-shadow:0 1px 2px #002e57}
.battle-menu p{margin:0;padding:38px 18px;text-align:center;color:#3a3a3a;font-size:13px}
.battle-menu-actions{display:flex;gap:8px;padding:0 13px 13px}
.battle-menu-actions button{flex:1;min-height:40px;border:2px solid #9da5aa;border-radius:6px;background:linear-gradient(#fff,#d4d6d8);color:#43515c;font-size:14px;font-weight:700}
.battle-menu-actions #battle-menu-resume{border-color:#d9f0ff;background:linear-gradient(#479fe0,#1261a0);color:#fff;text-shadow:0 1px 1px #05304f}
@media(max-width:700px){.battle-menu-open{top:52px}}
/* Server errors outside the register panel (apps/client/src/main.ts:216-222,
   style.css:72): shown for four seconds, then gone. */
.toast{position:fixed;left:50%;bottom:64px;z-index:30;max-width:calc(100vw - 32px);transform:translateX(-50%);padding:10px 16px;border:1px solid #e0605a;border-radius:8px;background:#3a1620;color:#fff;font-size:13px;pointer-events:none;animation:toast-life 4s forwards}
@keyframes toast-life{0%,92%{opacity:1}100%{opacity:0;visibility:hidden}}
/* Hero keys (config.loadout, apps/client/src/custom.ts:127-160): the strip
   next to each hero roster shows six of the twelve keys per page; select a
   key, then pick a roster hero for it. A roster hero with a key shows it. */
.loadout-strip{grid-column:1/-1;display:flex;align-items:center;gap:5px;min-width:0;margin:0;padding:6px 8px;border:1px solid #bbc6cc;background:#eef1f2;color:#35516a}
.loadout-slots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;flex:1;min-width:0}
.loadout-slot{display:flex;align-items:center;gap:4px;min-width:0;min-height:34px;padding:3px 5px;border:2px solid #aebbc4;border-radius:4px;background:#f8f8f8;color:#35516a;font-size:9px;text-align:left}
.loadout-slot kbd{flex:none;min-width:15px;padding:1px 3px;border-radius:3px;background:#133587;color:#dcdcdc;font:700 9px ui-monospace,monospace;text-align:center}
.loadout-slot .hero-avatar-small{flex:none;width:20px;height:20px;font-size:9px}
.loadout-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loadout-slot[data-start]{border-color:#3d8dcc;box-shadow:inset 0 -3px #3d8dcc}
.loadout-slot[aria-pressed="true"]{border-color:#f19a27;background:#fff0cb;color:#9b4d06}
.loadout-slot[data-empty]{color:#8697a3;border-style:dashed}
.loadout-page{flex:none;width:24px;min-height:30px;padding:0;border:1px solid #9da5aa;border-radius:4px;background:linear-gradient(#fff,#d4d6d8);color:#43515c;font-size:16px;line-height:1}
.loadout-page:disabled{opacity:.4;cursor:default}
.loadout-page-label{flex:none;color:#607584;font:9px ui-monospace,monospace}
.hero-button[data-key]{position:relative}
.hero-button[data-key]::after{content:attr(data-key);margin-left:2px;padding:0 3px;border-radius:3px;background:#133587;color:#dcdcdc;font:700 8px ui-monospace,monospace}
@media(max-width:700px){.loadout-slots{grid-template-columns:repeat(3,minmax(0,1fr))}.loadout-page-label{display:none}}
/* The battle's swap bar (MiniSoldierSelectWnd, miniSoldier.ts): six heroes a
   page with their key; the own hero is marked, a requested swap blinks. */
.hero-bar{display:flex;align-items:center;gap:4px;flex:none}.hero-bar[data-dead]{visibility:hidden}
.hero-bar-slots{display:flex;gap:4px}
.hero-bar-slot{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid #9bbad0;border-radius:5px;background:#0b2742;color:#a6fff0;font-weight:900;font-size:13px}
.hero-bar-slot.empty{border-style:dashed;opacity:.45}.hero-bar-icon{transform:translate(-4px,-4px)}
.hero-bar-slot kbd{position:absolute;right:1px;bottom:1px;min-width:12px;padding:0 2px;border-radius:3px;background:#133587;color:#dcdcdc;font:700 8px/11px ui-monospace,monospace;text-align:center}
.hero-bar-slot[aria-pressed="true"]{border:2px solid #ffe875;background:#1680c0;color:#fff;box-shadow:0 0 8px #ffe87599}
.hero-bar-slot[data-pending]{border-color:#f19a27;animation:hero-pending .5s ease-in-out infinite alternate}
@keyframes hero-pending{to{background:#3a5f7a}}
.hero-bar-page{width:20px;height:30px;padding:0;border:1px solid #9bbad0;border-radius:4px;background:#0b2742;color:#fff;font-size:14px;line-height:1}
.hero-bar-page[hidden]{display:none}
.hero-bar-page-label{color:#d4e7f3;font:9px ui-monospace,monospace}
.hero-bar-page-label:empty{display:none}
@media(max-width:700px){.hero-bar-slot{width:30px;height:30px;font-size:11px}.hero-bar-page-label{display:none}}
/* The battle hero selector (SoldierSelect in a match, game.ts:515-519): the
   loadout with each key; a hero swaps on click or on its key. */
/* The battle HUD windows (apps/client/src/ui/hud/battleHud.ts) in the 800x600
   UI units of the source canvas, scaled by --hud = min(w/800, h/600)
   (ui/root.ts:152-155). The container makes no stacking context: each
   window takes its own layer, the death blind above the footer. */
.battle-hud{position:absolute;inset:0;pointer-events:none;--hud:1;--footer-h:0px}
.battle-hud [hidden]{display:none!important}
/* KOChatMsgWnd (xml/kochatmsgwnd.xml): at 14,176, lines 19 apart from +16,+2,
   the newest at the bottom (koChat.ts:56-81). */
.ko-feed{position:absolute;z-index:2;left:calc(var(--hud)*30px);top:calc(var(--hud)*178px);display:flex;flex-direction:column;justify-content:flex-end;width:calc(var(--hud)*300px);height:calc(var(--hud)*76px);margin:0;padding:0;list-style:none}
.ko-feed li{display:flex;align-items:center;gap:calc(var(--hud)*4px);height:calc(var(--hud)*19px);font-size:calc(var(--hud)*12px);font-weight:700;white-space:nowrap;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.ko-name{overflow:hidden;max-width:calc(var(--hud)*120px);text-overflow:ellipsis}
.ko-name.blue{color:rgb(0,150,255)}
.ko-name.red{color:rgb(255,60,0)}
.ko-mark{display:inline-grid;place-items:center;min-width:calc(var(--hud)*20px);height:calc(var(--hud)*15px);padding:0 calc(var(--hud)*2px);border:1px solid #c9d6df;border-radius:calc(var(--hud)*8px);background:#16212bd9;color:#ffd54a;font-size:calc(var(--hud)*8px);font-style:italic;font-weight:900;line-height:1;text-shadow:none}
.ko-mark.ko-none{color:#e3e7ea}
/* CenterKillInfoWnd (xml/centerkillinfownd.xml, en: killInfo.ts:113-129): the
   killer line in the killer's colour, then the title; below the header bar. */
.kill-banner{position:absolute;z-index:3;left:50%;top:calc(var(--hud)*15px + 44px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:calc(var(--hud)*6px);width:max-content;max-width:calc(100% - 32px);text-align:center}
.kill-banner-line{min-width:calc(var(--hud)*180px);min-height:calc(var(--hud)*22px);margin:0;padding:calc(var(--hud)*2px) calc(var(--hud)*44px);background:linear-gradient(90deg,#d8401b00,#d8401bd9 22%,#d8401bd9 78%,#d8401b00);color:#fff;font-size:calc(var(--hud)*18px);font-weight:700;line-height:1.2;text-shadow:-2px 0 #000,2px 0 #000,0 -2px #000,0 2px #000}
.kill-banner[data-color="blue"] .kill-banner-line{background:linear-gradient(90deg,#1b6fd800,#1b6fd8d9 22%,#1b6fd8d9 78%,#1b6fd800)}
.kill-banner-line[data-none] .kill-banner-killer::before{content:"\2715";color:#e3e7ea}
.kill-banner-title{font-size:calc(var(--hud)*28px);font-style:italic;font-weight:950;letter-spacing:.03em;line-height:1.1;color:#ffb2a1;text-shadow:-2px 0 #10263d,2px 0 #10263d,0 -2px #10263d,0 2px #10263d,0 4px 0 #10263d}
.kill-banner[data-color="blue"] .kill-banner-title{color:#b8eaff}
.kill-banner:not([data-combo="1"]) .kill-banner-title{font-size:calc(var(--hud)*40px);color:#ffd43b;text-shadow:3px 3px 0 #2b1405,-3px 3px 0 #2b1405,3px -3px 0 #2b1405,-3px -3px 0 #2b1405,0 6px 0 #2b1405}
/* ModeRankWnd: the KILLS / HITS / DAMAGE ranks under the result banner and
   (DEATH_TYPE, at -108 bottom centre) 1 s after the own death. */
.rank-strip,.battle-results-grades{position:absolute;z-index:4;left:50%;transform:translateX(-50%);display:flex;justify-content:center;align-items:center;gap:calc(var(--hud)*16px);width:max-content;margin:0;padding:calc(var(--hud)*3px) calc(var(--hud)*40px);list-style:none;background:linear-gradient(90deg,#0000,#000a 20%,#000a 80%,#0000);color:#fff;font-size:calc(var(--hud)*11px);font-weight:800;letter-spacing:.06em;text-shadow:0 1px 2px #000}
.rank-strip{bottom:max(calc(var(--hud)*108px),calc(var(--footer-h,0px) + var(--hud)*56px))}
.battle-results-grades{top:calc(14% + clamp(54px,9vw,96px));--hud:1.25}
.battle-results-grades[hidden],.rank-strip[hidden]{display:none}
.rank-strip b,.battle-results-grades b{margin-left:calc(var(--hud)*4px);font-size:calc(var(--hud)*22px);font-style:italic;font-weight:950;color:#c9d0d6;text-shadow:-2px 0 #10263d,2px 0 #10263d,0 -2px #10263d,0 2px #10263d}
.rank-strip b[data-grade="S"],.battle-results-grades b[data-grade="S"]{color:#3fb6ff}
.rank-strip b[data-grade="A"],.battle-results-grades b[data-grade="A"]{color:#5fd35a}
.rank-strip b[data-grade="B"],.battle-results-grades b[data-grade="B"]{color:#ff8a1c}
/* SkillListWnd (xml/skilllistwnd.xml): 320x76 at -62 bottom centre, the
   54x54 buttons at x 19 + 76n (cloak Q, helmet W, armor E, weapon R), the
   gauge filling bottom-up, the key box at 10,52 (skillList.ts:98-160). */
.skill-bar{position:absolute;z-index:2;left:50%;bottom:max(calc(var(--hud)*62px),calc(var(--footer-h,0px) + 4px));transform:translateX(-50%);display:flex;gap:calc(var(--hud)*22px);width:calc(var(--hud)*320px);height:calc(var(--hud)*76px);box-sizing:border-box;padding:calc(var(--hud)*18px) calc(var(--hud)*19px) 0}
.skill-slot{position:relative;flex:none;width:calc(var(--hud)*54px);height:calc(var(--hud)*54px)}
.skill-icon{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;border:calc(var(--hud)*2px) solid #0e1720;border-radius:50%;background:radial-gradient(circle at 38% 30%,#7d8790,#3b444c 70%);box-shadow:0 calc(var(--hud)*2px) 0 #0009;transition:transform .08s}
.skill-fill{position:absolute;left:0;right:0;bottom:0;height:calc(var(--fill,0)*100%);border-top:calc(var(--hud)*2px) solid #000;background:radial-gradient(circle at 38% 0,#8fd3ff,#2477d6 75%)}
.skill-name{position:relative;z-index:1;max-width:92%;font-size:calc(var(--hud)*9px);font-weight:900;line-height:1.05;color:#fff;text-align:center;overflow-wrap:anywhere;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.skill-key{position:absolute;z-index:2;left:calc(var(--hud)*10px);top:calc(var(--hud)*52px);display:grid;place-items:center;width:calc(var(--hud)*34px);height:calc(var(--hud)*17px);box-sizing:border-box;border:1px solid #a9c8ff;border-radius:calc(var(--hud)*4px);background:rgb(19,53,135);color:#fff;font:700 calc(var(--hud)*11px)/1 sans-serif;text-shadow:0 1px 1px #000}
.skill-slot[data-state="passive"] .skill-key{display:none}
.skill-slot[data-state="empty"] :is(.skill-fill,.skill-key,.skill-name){display:none}
/* BackImage's authored 99FFFFFF tint in skilllistwnd.xml. */
.skill-slot[data-state="empty"] .skill-icon::before{opacity:.6}
.skill-slot[data-state="passive"] .skill-icon{background:radial-gradient(circle at 38% 30%,#b9e3ff,#3c84c9 70%)}
.skill-slot[data-state="passive"] .skill-fill{display:none}
.skill-slot[data-state="charged"] .skill-icon{background:radial-gradient(circle at 38% 30%,#d6efff,#4b8fd0 70%)}
.skill-slot[data-state="charged"] .skill-fill,.skill-slot[data-state="ready"] .skill-fill{height:100%!important;border-top:0}
.skill-slot[data-state="ready"] .skill-icon{border-color:#fff3b0;background:radial-gradient(circle at 38% 30%,#fff6c8,#f2a91d 70%);box-shadow:0 0 calc(var(--hud)*10px) #ffd84a,0 calc(var(--hud)*2px) 0 #0009;animation:skill-ready .3s ease-in-out infinite}
.skill-slot[data-state="ready"] .skill-fill{background:radial-gradient(circle at 38% 30%,#fff6c8,#f2a91d 70%)}
/* A gauge that is not recovering: the charging icon dimmed and grey, with
   no refill (gaugeIcon, skillList.ts:184-186); full slots draw normally. */
.skill-slot[data-dim][data-state="charging"] .skill-icon{filter:brightness(.59) grayscale(1)}
.skill-slot[data-dim][data-state="charging"] .skill-fill{visibility:hidden}
.skill-slot[data-cast] .skill-icon,.skill-slot[data-cast] .skill-fill{background:#fff}
.skill-slot[data-burst]::after{content:"";position:absolute;inset:0;border:calc(var(--hud)*3px) solid #fff7c2;border-radius:50%;animation:skill-burst .5s ease-out forwards;pointer-events:none}
.skill-bullet{position:absolute;z-index:2;right:calc(var(--hud)*-12px);top:calc(var(--hud)*-14px);display:grid;place-items:center;min-width:calc(var(--hud)*20px);height:calc(var(--hud)*20px);padding:0 calc(var(--hud)*3px);box-sizing:border-box;border:1px solid #f0d27a;border-radius:calc(var(--hud)*10px);background:linear-gradient(0deg,#b88a19 calc(var(--rate,0)*100%),#151d26 calc(var(--rate,0)*100%));color:#ffe36b;font:900 calc(var(--hud)*12px)/1 sans-serif;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.skill-bullet[data-red]{color:#ff5a3c;border-color:#ff8f6b}
.skill-count{position:absolute;z-index:2;left:calc(var(--hud)*-8px);top:calc(var(--hud)*-12px);display:grid;place-items:center;min-width:calc(var(--hud)*18px);height:calc(var(--hud)*18px);border-radius:50%;background:#3b0f5c;border:1px solid #d9b8ff;color:#fff;font:900 calc(var(--hud)*11px)/1 sans-serif}
/* SkillListBtn counter images (battle_hud_view.rs COUNTER_ORIGIN/SIZE): x 40..90, y -24..70 of the 54px slot */
/* .skill-slot raises it over `.battle-stage canvas` (100% of the slot). */
.skill-slot .skill-counter{position:absolute;left:calc(var(--hud)*40px);top:calc(var(--hud)*-24px);width:calc(var(--hud)*50px);height:calc(var(--hud)*94px);pointer-events:none}
.skill-counter-front{z-index:2}
.skill-counter[hidden]{display:none}
@keyframes skill-ready{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
@keyframes skill-burst{from{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}
/* BlindWnd (blind.ts): letterbox bars 50/51 units, then the revival gauge
   at 28, H-43 (W-56 x 27) with its line; above the footer. */
.battle-blind{position:absolute;z-index:4;inset:0;pointer-events:none;--blind:0}
.blind-bar{position:absolute;left:0;right:0;background:#000}
.blind-top{top:0;height:calc(var(--hud)*50px*var(--blind))}
.blind-bottom{bottom:0;height:calc(var(--hud)*51px*var(--blind))}
.revival{position:absolute;left:calc(var(--hud)*28px);right:calc(var(--hud)*28px);bottom:calc(var(--hud)*16px);height:calc(var(--hud)*27px);overflow:hidden;box-sizing:border-box;border:1px solid #5d5d5d;background:#141414}
.revival-fill{position:absolute;inset:0 auto 0 0;min-width:calc(var(--hud)*11px);box-sizing:border-box;border:1px solid #ff6a55;background:linear-gradient(#f0200f,#c40c00)}
.revival-text{position:absolute;inset:0;display:grid;place-items:center;color:rgb(255,214,200);font:700 calc(var(--hud)*13px)/1 sans-serif;text-shadow:-1px 0 rgb(90,10,0),1px 0 rgb(90,10,0),0 -1px rgb(90,10,0),0 1px rgb(90,10,0)}
.revival-count{position:absolute;top:0;right:calc(var(--hud)*12px);bottom:0;display:grid;place-items:center;color:#fff;font:900 calc(var(--hud)*15px)/1 sans-serif;text-shadow:0 1px 2px #000}
/* The result: the banner first, the ranking when it ends (battleHud.ts:580,598). */
.battle-announcement[data-phase="ranking"]{visibility:hidden}
/* The finished match's clock box covered the top of the VICTORY/DEFEAT plaque
   on a short (phone) screen, where the plaque reaches the top edge. */
.battle-screen[data-result-phase="banner"] #la-hud-score{visibility:hidden}
@media(max-width:700px){.ko-feed{top:calc(var(--hud)*120px)}}
.battle-screen[data-result-phase="ranking"] .battle-results{top:12%;width:min(420px,calc(100% - 32px));max-height:calc(80% - 66px)}
/* The round clock stays readable over the death blind, as the source's
   TimeScoreWnd mostly does; the swap bar goes with the match (battleHud.ts:569). */
.battle-screen .battle-header{z-index:5}
.battle-screen[data-result] .hero-bar{visibility:hidden}

/* PartyCreateWnd (partycreatewnd.xml) and BattleQuickStartOption. The runtime
   paints the original DDS frame slices at their authored pixel sizes; only the
   whole window scales, like ui/root.ts. Native dialog supplies modality/focus. */
.original-dialog{position:fixed;left:50%;top:50%;margin:0;padding:0;width:302px;height:207px;max-width:none;max-height:none;border:0;background:transparent;color:rgb(110,110,110);overflow:visible;transform:translate(calc(-50% + var(--safe-dx,0px)),calc(-50% + var(--safe-dy,0px))) scale(var(--ui-scale,1));transform-origin:center;font:12px/1 Arial,sans-serif;color-scheme:light;outline:none}
.original-dialog::backdrop{background:rgba(7,22,37,.48)}
.original-dialog[data-view="modes"]{width:670px;height:458px;top:calc(50% - 20px * var(--ui-scale,1))}
.original-dialog:not([open]){display:none}
.original-window{position:absolute;inset:0;isolation:isolate}
.original-window::before,.original-button::before{content:"";position:absolute;inset:-8px;background-image:var(--ui-normal);background-size:100% 100%;pointer-events:none;z-index:-1}
.original-dialog[data-view="create"] #create-mode-form,.original-dialog[data-view="modes"] #create-room-form{display:none}
.original-window h2{position:absolute;left:13px;top:11px;margin:0;color:#fff;font:17px/1 Arial,sans-serif;-webkit-text-stroke:4px #0c426f;paint-order:stroke fill;white-space:nowrap}
.original-dialog label,.original-dialog .create-mode-label{position:absolute;left:16px;margin:0;padding:0;font:12px/1 Arial,sans-serif;color:rgb(110,110,110)}
.create-name-label{top:57px}.create-access-label{top:80px}.create-mode-label{top:109px}
.original-dialog input{position:absolute;left:79px;width:200px;height:21px;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:#ce4e00;font:12px/1 Arial,sans-serif;outline:none;box-shadow:none}
#lobby-room-name{top:57px}#lobby-access{top:80px}
.original-dialog .original-button{display:block;position:absolute;isolation:isolate;min-height:0;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;color:#3a3a3a;font:13px/1 Arial,sans-serif;text-align:center;transition:none;transform:none;filter:none;outline-offset:2px}
.original-dialog .original-button:hover{transform:none;filter:brightness(1.08)}
.original-dialog .original-button:active::before{background-image:var(--ui-down,var(--ui-normal))}
.original-dialog .original-button:disabled{cursor:default;filter:none;opacity:1}
.original-dialog .original-button:disabled::before{background-image:var(--ui-disabled,var(--ui-normal))}
.original-dialog .original-button:focus-visible{outline:1px solid #187ebc}
.original-dialog .original-close{left:268px;top:11px;width:23px;height:23px}
#create-mode-form .original-close{left:636px}
.original-dialog .original-mode{left:73px;top:105px;width:212px;height:22px;font-size:12px;padding-bottom:2px}
.original-dialog .original-primary{left:17px;top:159px;width:178px;height:31px;padding-bottom:4px;color:white;-webkit-text-stroke:4px #215aa2;paint-order:stroke fill}
.original-dialog .original-cancel{left:197px;top:159px;width:88px;height:31px;padding-bottom:1px}
.original-dialog [data-mode-tile]{width:100px;height:91px}
.original-dialog [data-mode-tile] span{position:absolute;left:4px;right:4px;top:76px;color:white;font:12px/1 Arial,sans-serif;white-space:nowrap;letter-spacing:-.25px}
.original-dialog [data-mode-tile]:disabled::before{filter:grayscale(1);opacity:.3}
.original-dialog [data-mode-tile]:disabled span{color:#fff}
#lobby-create-art-status{position:absolute;top:100%;left:0;right:0;font:11px/1.4 Arial,sans-serif;text-align:center;color:#fff;background:#713b16;margin:10px 0 0}
#lobby-create-art-status:empty{display:none}
body:has(#lobby-create-dialog[open]) .lobby-chat{visibility:hidden}

.original-primary>span,.original-cancel>span,.original-mode>span{position:absolute;left:0;right:0;top:5px;line-height:1}
.original-cancel>span{top:7px}.original-mode>span{top:4px}
#mode-tile-105 span{font-size:10.5px}

/* PartyShamBattleWnd / BattleChatWnd. Native 772px window, 88x131 slots,
   original DDS frames; resize the complete 800x600 UI coordinate space. */
#room-screen{position:fixed;inset:auto;left:50%;top:var(--room-center,50%);width:772px;height:384px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:translate(-50%,-50%) scale(var(--room-scale,1));transform-origin:center;font:12px/1 Arial,sans-serif;color:#3a3a3a;color-scheme:light;--ui-normal:var(--room-window);--room-extra:0px}
#room-screen[data-second-row="true"]{height:517px;--ui-normal:var(--room-window-tall);--room-extra:133px}
#room-screen>h1{position:absolute;left:13px;top:11px;max-width:660px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;font:17px/1 Arial,sans-serif;color:white;-webkit-text-stroke:4px #0c426f;paint-order:stroke fill}
#room-screen .original-button{display:block;position:absolute;isolation:isolate;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:#3a3a3a;font:13px/1 Arial,sans-serif;text-align:center;transition:none;transform:none;filter:none;outline-offset:2px;--ui-normal:none}
#room-screen .original-button[hidden]{display:none}
#room-screen .original-button:hover{filter:brightness(1.08)}
#room-screen .original-button:active::before{background-image:var(--ui-down,var(--ui-normal))}
#room-screen .original-button:disabled{cursor:default;color:#777;filter:none;opacity:1}
#room-screen .original-button:disabled::before{background-image:var(--ui-disabled,var(--ui-normal))}
#room-screen .original-button:focus-visible,#room-screen input:focus-visible{outline:1px solid #187ebc}
#room-leave{left:689px;top:11px;width:72px;height:23px}
#room-leave span{position:absolute;left:25px;top:5px;color:white;font-size:12px}
.room-roster-label{position:absolute;left:27px;top:53px;margin:0;color:#53687b;font:12px/1 Arial,sans-serif}
#room-state{color:#53687b;font-size:10px}
#room-screen .player-slots{position:absolute;left:27px;top:80px;display:grid;grid-template-columns:repeat(8,88px);grid-auto-rows:131px;gap:2px;margin:0;padding:0;border:0;background:transparent}
#room-screen .player-slot{display:block;position:relative;width:88px;height:131px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:var(--slot-blue-nor) center/100% 100% no-repeat;box-shadow:none;filter:none;text-align:center;overflow:visible}
#room-screen .player-slot.red{background-image:var(--slot-red-nor)}
#room-screen .player-slot.blue.me,#room-screen .player-slot.blue:hover{background-image:var(--slot-blue-over)}
#room-screen .player-slot.red.me,#room-screen .player-slot.red:hover{background-image:var(--slot-red-over)}
#room-screen .player-slot::after{display:none}
#room-screen .player-slot .hero-avatar-small{position:absolute;left:6px;top:6px;display:grid;place-items:center;width:76px;height:80px;aspect-ratio:auto;margin:0;border:0;border-radius:0;background-color:transparent;background-size:contain;background-position:center;background-repeat:no-repeat;color:#fff;font:11px/1.3 Arial,sans-serif}
#room-screen .player-slot .host-badge{position:absolute;display:grid;place-items:center;font-weight:normal;z-index:1;left:6px;top:6px;width:40px;height:16px;border:0;border-radius:0;background:var(--host-art) center/100% 100% no-repeat;font:11px/1 Arial,sans-serif;text-shadow:none}
#room-screen .player-slot .slot-hero{display:none}
#room-screen .player-slot strong{position:absolute;left:4px;right:4px;top:110px;display:block;overflow:hidden;text-overflow:ellipsis;max-width:80px;margin:0;color:#fff;font:11px/1 Arial,sans-serif;text-shadow:0 1px 2px #1b4780;white-space:nowrap}
#room-screen .player-slot.open-slot strong{top:112px;color:#dcecff;text-shadow:none}
#room-screen .player-slot.red.open-slot strong{color:#ffe2dc}
.room-footer{position:absolute;top:calc(226px + var(--room-extra));left:0;width:772px;height:158px}
#room-screen .room-chat{display:block;position:absolute;left:17px;top:5px;width:394px;height:146px;margin:0;padding:0;border:0;background:transparent}
#room-screen .chat-title{position:absolute;left:10px;top:0;color:#53687b;font:11px/1 Arial,sans-serif;letter-spacing:0}
#room-screen .chat-log{position:absolute;left:10px;top:19px;width:374px;height:85px;margin:0;padding:0 8px 0 0;background:repeating-linear-gradient(transparent 0 17px,#78869420 17px 19px);color:#3a3a3a;font:12px/19px Arial,sans-serif;overflow-y:auto;overflow-x:hidden;overflow-wrap:anywhere;scrollbar-width:thin;scrollbar-color:#91a4b3 transparent}
#room-screen .chat-log>span{min-height:19px;display:block}
#room-screen .chat-log strong{color:#1e608b;font-weight:normal}
#room-chat-entry{position:absolute;inset:auto;left:10px;top:110px;width:374px;height:26px}
#room-chat-input{position:absolute;left:53px;top:4px;width:315px;height:19px;padding:0 3px;border:0;border-radius:0;background:transparent;color:#3a3a3a;font:12px/19px Arial,sans-serif;box-shadow:none}
#room-chat-send{left:4px;top:4px;width:45px;height:18px;font-size:11px!important}
#room-screen .room-rule{top:17px;width:163px;height:31px;display:flex;align-items:center;gap:6px;padding:0 16px 0 10px;font-size:11px;text-align:left}
#room-mode-chip{left:416px}#room-map-chip{left:581px}
#room-screen .room-rule span{flex:none;font-size:11px}
#room-screen .room-rule strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:11px/1 Arial,sans-serif}
#room-screen .room-rule select{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer;font:13px Arial,sans-serif}
#room-screen .room-rule select:disabled{cursor:default}
#room-screen .room-rule:has(select:focus-visible){outline:1px solid #187ebc}
.room-help,.room-status{position:absolute;left:416px;right:27px;margin:0;color:#53687b;font:11px/1.3 Arial,sans-serif}
.room-help{top:58px}.room-status{top:76px}
#room-change-team{left:434px;top:96px;width:150px;height:45px}
#room-start{left:596px;top:96px;width:149px;height:45px;color:white!important}
#room-change-team span{position:absolute;left:0;right:0;top:12px;font-size:16px}
#room-start span{position:absolute;left:47px;top:12px;font-size:16px;-webkit-text-stroke:3px #0b7222;paint-order:stroke fill}
#room-start:disabled span{-webkit-text-stroke:0;color:#777}
#room-action-status{position:absolute;left:416px;right:27px;top:142px;margin:0;color:#983d24;font:10px/1 Arial,sans-serif}
/* "Servers full" choices (crates/web/src/browser/servers_full.rs): they take
   the place of the help and status lines above Start Game while shown. */
.room-full-actions{position:absolute;left:416px;right:27px;top:52px;display:flex;gap:6px;flex-wrap:wrap;z-index:2}
.room-full-actions[hidden],.room-full-actions [hidden]{display:none}
.room-full-actions .button{min-height:24px;padding:3px 9px;font-size:11px;line-height:1.2;white-space:nowrap}
.room-full-actions .button[aria-pressed="true"]{outline:2px solid #983d24}
#room-screen[data-servers-full="true"] .room-help,#room-screen[data-servers-full="true"] .room-status{visibility:hidden}
#room-screen[data-capacity-layout="true"] .room-full-actions{left:596px}
.donate-full-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.donate-full-actions[hidden],.donate-full-actions [hidden]{display:none}
#room-art-status{position:absolute;top:100%;left:0;right:0;text-align:center;color:#982b1b;font-size:12px}
#room-art-status:empty{display:none}

#room-screen .player-slot.closed-slot{visibility:hidden}

/* SoldierSelectWnd: original 599×238/422 window and 90×184 six-column cards.
   ui/classes.ts::SoldierBtn uses original portraits until 3D previews are ported. */
.soldier-dialog{position:fixed;inset:50% auto auto 50%;width:599px;height:238px;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#fff;overflow:visible;transform:translate(calc(-50% + var(--safe-dx,0px)),calc(-50% + var(--safe-dy,0px))) scale(var(--soldier-scale,1));transform-origin:center;font:11px/1 Arial,sans-serif;--ui-normal:var(--soldier-window)}
.soldier-dialog[data-expanded]{height:422px;--ui-normal:var(--soldier-window-tall)}
.soldier-dialog[hidden]{display:none!important}
.soldier-dialog::backdrop{background:#14283c38}
.soldier-dialog h2{left:12px;top:10px;font:13px/16px Arial,sans-serif;-webkit-text-stroke:3px #20394f}
.soldier-dialog .soldier-close{position:absolute;left:570px;top:9px;width:20px;height:20px;min-height:0;padding:0;border:0;border-radius:0;background:transparent}
.soldier-dialog .soldier-expand{position:absolute;left:491px;top:9px;width:78px;height:20px;min-height:0;padding:0 7px;border:0;border-radius:0;background:transparent;font:11px/20px Arial,sans-serif;text-align:left;color:#fff}
.soldier-expand-label,.soldier-collapse-art{-webkit-text-stroke:2px #20394f;paint-order:stroke fill}
.soldier-collapse-art{position:absolute;inset:0;padding-left:7px;display:none}
.soldier-dialog[data-expanded] .soldier-collapse-art{display:block}
.soldier-dialog[data-expanded] .soldier-expand-label{visibility:hidden}
.soldier-dialog .hero-roster{position:absolute;left:12px;top:42px;display:grid;grid-template-columns:repeat(6,90px);grid-auto-rows:184px;gap:1px 2px;align-content:start;width:575px;height:184px;min-height:0;margin:0;padding:0 10px 0 0;border:0;border-radius:0;background:transparent;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain;scroll-snap-type:y mandatory}
.soldier-dialog[data-expanded] .hero-roster{height:369px}
.soldier-dialog .hero-button,.soldier-dialog .soldier-empty{position:relative;display:block;flex:none;min-width:0;width:90px;height:184px;margin:0;padding:0;border:0;border-radius:0;background:var(--soldier-card) center/100% 100% no-repeat;box-shadow:none;transform:none;scroll-snap-align:start}
.soldier-dialog .hero-button::after{display:none}
.soldier-dialog .hero-button:hover,.soldier-dialog .hero-button:active,.soldier-dialog .hero-button.selected,.soldier-dialog .hero-button[data-current],.soldier-dialog .hero-button[data-soldier-focus]{background-image:var(--soldier-card-over)}
.soldier-dialog .hero-button:focus{outline:none}
.soldier-dialog .hero-button:focus-visible{outline:1px solid #ffdf85;outline-offset:-3px}
.soldier-dialog .hero-avatar-small{position:absolute;left:5px;top:30px;display:block;width:80px;height:110px;border:0;border-radius:0;background-color:transparent;background-position:center top;background-size:contain;background-repeat:no-repeat;color:transparent}
.soldier-dialog .soldier-name{position:absolute;left:4px;right:4px;top:158px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font:11px/16px Arial,sans-serif;color:#fff;-webkit-text-stroke:2px #20394f;paint-order:stroke fill}
.soldier-dialog .hero-button.selected .soldier-name,.soldier-dialog [data-current] .soldier-name{color:#ffd36a}
.soldier-dialog .hero-button kbd{position:absolute;left:5px;top:5px;width:23px;height:23px;margin:0;padding:2px 0 0;border:0;border-radius:0;background:var(--soldier-key-blue) left top/auto no-repeat;color:white;text-align:center;font:11px/15px Arial,sans-serif;-webkit-text-stroke:2px #215aa2;paint-order:stroke fill}
.soldier-dialog .hero-button:not([data-key]):not([data-slot]) kbd{background-image:var(--soldier-key-gray);-webkit-text-stroke-color:#666}
.soldier-dialog .hero-button.selected kbd,.soldier-dialog .hero-button[data-current] kbd{background-image:var(--soldier-key-pink);-webkit-text-stroke-color:#9a273b}
.soldier-dialog #room-loadout{display:none}
.soldier-art-status{position:absolute;top:100%;left:0;right:0;text-align:center;color:#922;font:12px Arial,sans-serif}

.soldier-dialog .original-button{isolation:isolate;color:white}
.soldier-dialog .soldier-collapse-art{font:11px/20px Arial,sans-serif;text-align:left}
.soldier-dialog .soldier-name{-webkit-text-stroke-width:4px}
.soldier-dialog .hero-roster{width:550px;padding:0;scrollbar-width:none}
.soldier-dialog .hero-roster::-webkit-scrollbar{display:none}
.soldier-scroll{position:absolute;left:572px;top:42px;width:15px;height:183px}
.soldier-dialog[data-expanded] .soldier-scroll{height:368px}
.soldier-scroll button{position:absolute;left:0;width:15px;height:10px;margin:0;padding:0;border:0;border-radius:0;background:var(--soldier-arrow) center/100% 100% no-repeat}
.soldier-scroll .soldier-scroll-up{top:0;background-image:var(--soldier-arrow-up)}
.soldier-scroll-down{bottom:0}
.soldier-scroll-position{position:absolute;left:0;top:10px;appearance:none;writing-mode:vertical-lr;direction:ltr;width:15px;height:calc(100% - 20px);margin:0;padding:0;border:0;border-radius:0;background:transparent}
.soldier-scroll-position::-webkit-slider-runnable-track{width:5px;height:100%;background:var(--soldier-track) center/100% 100% no-repeat}
.soldier-scroll-position::-webkit-slider-thumb{appearance:none;width:15px;height:30px;margin-left:-5px;background:var(--soldier-thumb) center/100% 100% no-repeat}
.soldier-scroll-position::-moz-range-track{width:5px;height:100%;background:var(--soldier-track) center/100% 100% no-repeat}
.soldier-scroll-position::-moz-range-thumb{width:15px;height:30px;border:0;border-radius:0;background:var(--soldier-thumb) center/100% 100% no-repeat}
.soldier-dialog .hero-button[data-drop]{outline:2px solid #ffd36a;outline-offset:-3px}

.soldier-hint{position:absolute;left:8px;right:8px;top:100%;margin:10px 0 0;font:11px/16px Arial,sans-serif;color:#fff;-webkit-text-stroke:3px #20394f;paint-order:stroke fill}
.soldier-art-status:not(:empty){margin-top:32px;padding:4px;background:#fff}
.soldier-dialog .original-button:active::before{background-image:var(--ui-down,var(--ui-normal))}
/* Full reference mobile pad, game/touch.ts:326-371. Coordinates are viewport
   CSS pixels and include the device safe area; the input sampler is Rust. */
.touch-controls{position:fixed;inset:0;z-index:6;--touch-opacity:.85;--touch-u:1}
.touch-controls[data-covered="true"]{visibility:hidden}
.touch-controls[data-active="false"] .touch-actions,.touch-controls[data-active="false"] #touch-pad,.touch-controls[data-active="false"] #touch-heroes{pointer-events:none}
#touch-safe-area{position:absolute;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.touch-controls #touch-pad{top:28%;bottom:0}
.touch-stick{left:var(--rest-x);bottom:var(--rest-bottom);transform:translate(-50%,50%)}
.touch-actions{inset:0;width:auto;height:auto;opacity:var(--touch-opacity)}
.touch-actions button{right:auto!important;bottom:auto!important;border-width:2px!important;overflow:visible}
.touch-actions button svg,.touch-fab-root svg,.touch-fab-tab svg,.touch-fab-zones svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.touch-actions #touch-dash{font-size:calc(10px*var(--touch-u))}
.battle-screen[data-loading] .touch-left{visibility:hidden}
.touch-skill .touch-skill-icon{position:absolute;inset:2px;border-radius:50%;background-size:cover;background-position:center;overflow:hidden}
.touch-skill::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent 0 var(--charge,0turn),#0009 var(--charge,0turn) 1turn);pointer-events:none}
.touch-skill[data-state="ready"]{border-color:#ffe59e!important;box-shadow:0 0 8px #ffdf6670}
.touch-skill[data-dim="true"] .touch-skill-icon{filter:grayscale(1)}
.touch-skill[data-state="empty"] .touch-skill-icon{opacity:.6}
.touch-skill[data-state="empty"]::after,.touch-skill[data-state="empty"] :is(kbd,.touch-ammo){display:none}
.touch-skill kbd{position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);z-index:2;font:700 calc(10px*var(--touch-u))/1.3 sans-serif;min-width:18px;background:#153972;border:1px solid #cfedff;border-radius:4px}
.touch-ammo{position:absolute;right:-7px;top:-5px;z-index:2;min-width:16px;padding:2px;background:#102130;border:1px solid #ffe090;border-radius:50%;font-size:calc(11px*var(--touch-u));color:#ffe090}.touch-ammo:empty{display:none}
.touch-hero{position:absolute;display:grid;place-items:center;padding:0;border:2px solid #d9eaff;border-radius:50%;background:#122433cc;color:white;font:700 calc(12px*var(--touch-u))/1 sans-serif;touch-action:none;pointer-events:auto;opacity:var(--touch-opacity)}
.touch-hero[aria-pressed="true"]{border-color:#ffe275;box-shadow:0 0 7px #ffe27588}
.touch-portrait{position:absolute;inset:0;border-radius:50%;background-size:contain;background-position:center;background-repeat:no-repeat}
.touch-hero kbd{position:absolute;bottom:-4px;right:-3px;background:#173c85;border:1px solid #d6eeff;border-radius:4px;padding:1px 3px;font:700 calc(9px*var(--touch-u))/1 sans-serif}
body[data-touch="on"][data-screen="battle"] .battle-menu-open{display:none}
/* SkillListBtn art (skillList.ts:102-138, RenderGaugeIcon :180-190): the
   item / skill sprite at its own size with its anchor on the button's
   (28,27), unclipped, so it overhangs the 54x54 button and the key box
   overlaps its bottom. hud_icons draws each sprite into a 112x112 box with
   the anchor at its centre. The sprite itself is the box's ::before (grey
   while charging); .skill-fill shows it in colour from the gauge line
   (button y 54 x (1 - rate)) down, with the 2 px line in black. */
.skill-slot[data-artwork] .skill-icon{inset:auto;left:calc(var(--hud)*-28px);top:calc(var(--hud)*-29px);width:calc(var(--hud)*112px);height:calc(var(--hud)*112px);overflow:visible;border:0;border-radius:0;box-shadow:none;background-color:transparent;background-size:0 0;background-repeat:no-repeat}
.skill-slot[data-artwork] .skill-icon::before{content:"";position:absolute;inset:0;background-image:inherit;background-size:100% 100%;background-repeat:no-repeat}
.skill-slot[data-artwork] .skill-fill{height:calc(var(--hud)*(29px + 54px*var(--fill,0)));border-top:0;background-color:transparent;background-size:calc(112px*var(--hud)) calc(112px*var(--hud));background-position:center bottom;background-repeat:no-repeat}
.skill-slot[data-artwork] .skill-fill::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--hud)*2px);background-image:inherit;background-size:calc(112px*var(--hud)) calc(112px*var(--hud));background-position:center calc(var(--hud)*(54px*var(--fill,0) - 83px));background-repeat:no-repeat;filter:brightness(0)}
.skill-slot[data-artwork]:not([data-state="charging"]) .skill-fill::before{display:none}
.skill-slot[data-artwork] .skill-name{visibility:hidden}
.skill-slot[data-artwork][data-state="charging"] .skill-icon::before{filter:grayscale(1)}
.skill-slot[data-artwork][data-dim][data-state="charging"] .skill-icon{filter:none}
.skill-slot[data-artwork][data-dim][data-state="charging"] .skill-icon::before{filter:brightness(.59) grayscale(1)}
/* RenderUseSkillEffect: the item icon ramps to white, no gauge. */
.skill-slot[data-artwork][data-cast] .skill-icon{background-color:transparent}
.skill-slot[data-artwork][data-cast] .skill-icon::before{filter:brightness(0) invert(1)}
.skill-slot[data-artwork][data-cast] .skill-fill{visibility:hidden}
#touch-attack{background-size:80%;background-position:center;background-repeat:no-repeat}#touch-attack[data-artwork="true"] svg{visibility:hidden}
/* TimeScoreWnd and the TAB RoundStateMainWnd, original XML dimensions. */
#battle-time-score{position:absolute;z-index:4;top:max(15px,env(safe-area-inset-top));left:max(15px,env(safe-area-inset-left));width:200px;height:170px;background:transparent;pointer-events:none;transform:scale(var(--hud,1));transform-origin:top left}
#battle-scoreboard{position:fixed;z-index:10;left:50%;top:calc(50% - 20px);width:670px;height:326px;transform:translate(-50%,-50%) scale(var(--board-scale,1));transform-origin:center;background-size:100% 100%;color:white;pointer-events:auto;font:12px sans-serif}
#battle-scoreboard[hidden]{display:none}#battle-scoreboard-title{position:absolute;left:13px;top:11px;max-width:580px;margin:0;white-space:nowrap;overflow:hidden;font:700 17px/1.3 sans-serif;text-shadow:0 1px 2px #000}
#battle-scoreboard-close{position:absolute;left:616px;top:11px;width:43px;height:23px;border:0;color:white;font:700 11px sans-serif;background-color:transparent;text-shadow:0 1px 1px #20394f}
.scoreboard-headline{position:absolute;left:17px;top:54px;width:636px;height:255px;padding-top:16px;text-align:center;font:700 26px sans-serif;color:#f12813;text-shadow:-1px -1px white,1px 1px white;background-image:var(--score-panel);background-size:100% 100%}
#battle-scoreboard[data-team="true"] .scoreboard-headline{color:#e5f5ff;text-shadow:0 2px 2px #12395b}
.scoreboard-rows{position:absolute;left:24px;top:113px;margin:0;padding:0;list-style:none}
.scoreboard-rows li{position:absolute;width:303px;height:21px;display:grid;grid-template-columns:185px 52px 60px;align-items:center;background-size:100% 100%;font-size:12px;color:#d1f2ff}
.scoreboard-rows li>span:first-child{padding-left:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scoreboard-rows li>span:not(:first-child){text-align:center}
.scoreboard-rows li[data-color="blue"][data-stripe="dark"]{background-image:var(--score-bluedark)}.scoreboard-rows li[data-color="blue"][data-stripe="light"]{background-image:var(--score-bluelight)}
.scoreboard-rows li[data-color="red"]{color:#ffc2bb}.scoreboard-rows li[data-color="red"][data-stripe="dark"]{background-image:var(--score-reddark)}.scoreboard-rows li[data-color="red"][data-stripe="light"]{background-image:var(--score-redlight)}
.scoreboard-rows li[data-me][data-color="blue"]{background-image:var(--score-blueover);color:white}.scoreboard-rows li[data-me][data-color="red"]{background-image:var(--score-redover);color:white}
.scoreboard-labels{color:#fff;text-shadow:0 1px 2px #000}
.touch-actions,#touch-heroes{opacity:calc(var(--touch-opacity)*var(--board-opacity,1))}.touch-hero{opacity:1}
body[data-battle-art="ready"] .battle-header{position:fixed;left:-10000px}
body[data-touch="on"] #battle-time-score{transform:scale(var(--hud,.7))}
.skill-key{border:0;background:transparent;overflow:visible}.skill-key::before{content:"";position:absolute;z-index:-1;inset:calc(-8px*var(--hud));background-image:var(--skill-key-art);background-size:100% 100%}
.battle-footer{height:0;min-height:0;padding:0;border:0;background:transparent;pointer-events:none}
.battle-footer .hero-hud,.battle-footer .battle-controls,.battle-footer .battle-score{position:absolute;left:-10000px}
.hero-bar{position:absolute;bottom:calc(149px*var(--hud,1));left:50%;transform:translateX(-50%) scale(var(--hud,1));transform-origin:bottom center;height:46px;width:268px;pointer-events:auto;gap:0;padding:0;border:0;background:none}
.hero-bar-slots{position:absolute;left:16px;top:1px;display:flex;gap:4px}
.hero-bar .hero-bar-slot{position:relative;width:36px;height:36px;min-width:36px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.hero-bar-icon{position:absolute;inset:0!important;width:36px!important;height:36px!important;background-color:transparent!important;background-size:contain!important;background-repeat:no-repeat!important;border-radius:0!important}
.hero-bar-slot[aria-pressed="true"] .hero-bar-icon{filter:drop-shadow(0 0 3px #fff49b)}
.hero-bar-slot kbd{position:absolute;left:7px;top:28px;width:22px;height:17px;background:transparent;border:0;border-radius:0;padding:1px 0;font:700 11px/17px sans-serif;color:white;text-align:center;text-shadow:0 1px 1px #123973}
.hero-bar-slot kbd::before{content:"";position:absolute;inset:-8px;z-index:-1;background-image:var(--hero-key-art);background-size:100% 100%}
.hero-bar .hero-bar-page{position:absolute;left:255px;top:0;width:13px;min-width:13px;height:13px;padding:0;pointer-events:auto;font-size:11px;line-height:10px}.hero-bar #hero-bar-next{top:26px}.hero-bar-page-label{display:none}
.skill-bar{bottom:calc(var(--hud)*62px);--footer-h:0px}
/* GlobalChatWnd (xml/globalchatwnd.xml, gameChat.ts): the 14,-46 bottom-left
   window in UI units, scaled with the HUD like every canvas window
   (UIRoot.resize, ui/root.ts:150-156). ChatMsgWnd rows: newest at y 192,
   older 19 above, ten rows from x 15; each "[ All ] Name : text" row has the
   category bracket at +0 and the text at +37, wrapped at SplitWidth 317;
   the rows sit 3 px up so each 19 px line box puts its text top on the row
   y (drawText's 'top' baseline) and the bracket 3 px into it.
   The GameChatInput (292x30) sits at 0,214 while typing. */
#battle-chat{position:absolute;z-index:5;left:max(calc(var(--hud,1)*14px),env(safe-area-inset-left));bottom:calc(var(--hud,1)*46px);width:332px;height:244px;transform:scale(var(--hud,1));transform-origin:0 100%;pointer-events:none;font:12px/19px sans-serif;color:#fff}
#battle-chat-log{position:absolute;left:15px;top:18px;width:317px;height:190px;margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;font:12px/19px sans-serif}
.battle-chat-line{flex:none;position:relative;margin:0;padding:0 0 0 37px;overflow-wrap:anywhere;-webkit-text-stroke:4px #000;paint-order:stroke fill}
.battle-chat-head{position:absolute;left:0;top:3px;width:36px;height:17px;background:var(--chat-head-art) 0 0/100% 100% no-repeat;font-size:12px;line-height:15px;text-align:center;white-space:nowrap}
#battle-chat-log strong{font-weight:normal;color:rgb(255,60,0)}#battle-chat-log strong[data-side="blue"]{color:rgb(0,150,255)}
.battle-chat-entry{position:absolute;left:0;top:214px;width:292px;display:flex;align-items:center;gap:5px;padding:4px;height:30px;background:#051424dd;border:1px solid #8eb0c8;border-radius:5px;pointer-events:auto}
#battle-chat[data-editing="false"] .battle-chat-entry{display:none}#battle-chat[data-editing="true"]{pointer-events:auto}
#battle-chat[data-editing="true"] #battle-chat-log{overflow-y:auto;justify-content:flex-start;scrollbar-width:none}#battle-chat[data-editing="true"] .battle-chat-line:first-child{margin-top:auto}
.battle-chat-entry input{min-width:0;width:100%;background:transparent;border:0;color:white;outline:none;font-size:12px}.battle-chat-entry button{font:11px sans-serif;padding:2px 5px;color:#fff;background:#245a83;border:1px solid #9cc0dc;border-radius:3px}
body[data-touch="on"] .hero-bar,body[data-touch="on"] .skill-bar{display:none}
body[data-touch="on"] #battle-chat{bottom:160px;left:10px}
body[data-touch="on"] #battle-chat[data-editing="true"]{position:fixed;z-index:9;bottom:20px;left:5%;width:90%;height:auto;transform:none;background:#091725ee;border:1px solid #6d90ae;border-radius:8px;padding:10px}
body[data-touch="on"] #battle-chat[data-editing="true"] :is(#battle-chat-log,.battle-chat-entry){position:static;width:auto}
#battle-minimap{position:absolute;z-index:4;top:max(15px,env(safe-area-inset-top));right:max(15px,env(safe-area-inset-right));width:220px;height:157px;background:transparent;pointer-events:none;transform:scale(var(--hud,1));transform-origin:top right}
body[data-touch="on"] #battle-minimap{transform:scale(var(--hud,.7))}
.scoreboard-rows li{grid-template-columns:185px 52px 34px}
.skill-slot[data-artwork][data-state="charging"] .skill-icon{filter:none}
.skill-slot[data-artwork][data-state="charging"] .skill-icon::before{content:"";position:absolute;inset:0;background-image:inherit;background-size:cover;filter:grayscale(1)}
.skill-slot[data-artwork] .skill-fill{z-index:1}
#battle-minimap[hidden],#battle-time-score[hidden]{display:none}
.hero-bar .hero-bar-page{font-size:0;border:0;border-radius:0;background:var(--hero-page-art) center/contain no-repeat;box-shadow:none;visibility:hidden}
.hero-bar:hover .hero-bar-page,.hero-bar:focus-within .hero-bar-page{visibility:visible}
.hero-bar #hero-bar-prev{transform:scaleY(-1)}
.rank-strip b,.battle-results-grades b{display:inline-block;width:52px;height:30px;font-size:0;background-size:contain;background-position:center;background-repeat:no-repeat;vertical-align:middle}
.rank-strip b[data-grade="S"],.battle-results-grades b[data-grade="S"]{background-image:var(--rank-s-art)}
.rank-strip b[data-grade="A"],.battle-results-grades b[data-grade="A"]{background-image:var(--rank-a-art)}
.rank-strip b[data-grade="B"],.battle-results-grades b[data-grade="B"]{background-image:var(--rank-b-art)}
.rank-strip b[data-grade="C"],.battle-results-grades b[data-grade="C"]{background-image:var(--rank-c-art)}

/* Native RoundStateUserWnd team panels and readable source team colours. */
#battle-scoreboard[data-team="true"] .scoreboard-headline{background-image:var(--score-team-panel);padding-top:0}
.scoreboard-headline canvas{display:block;width:636px;height:60px}
.scoreboard-rows li{color:rgb(0,150,255)}
.scoreboard-rows li[data-color="red"]{color:rgb(255,60,0)}
.scoreboard-rows li[data-me]{color:white}
.scoreboard-rows li.scoreboard-labels{color:white}
.touch-rotate{display:none;position:fixed;z-index:30;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;background:#081b2bee;color:white;font:600 20px/1.5 sans-serif;text-align:center;pointer-events:none}#touch-rotate{pointer-events:auto;min-height:44px;padding:10px 18px;border:1px solid #85bed7;border-radius:22px;background:#103149;color:#d7eef5;font:600 14px/1.4 sans-serif}
@media(orientation:portrait) and (max-width:700px){body[data-touch="on"] .touch-rotate{display:flex}}
/* An iPhone cannot go fullscreen or lock landscape: no tap button that does
   nothing (and no full-screen button over the headers); the guidance says how
   to turn off the rotation lock instead. */
.touch-rotate .touch-rotate-ios{display:none;max-width:300px;margin:0;color:#ffe3a3;font:800 13px/1.45 Nunito,"Segoe UI",system-ui,sans-serif}
body[data-landscape-lock="none"] .touch-rotate .touch-rotate-ios{display:block}
body[data-landscape-lock="none"] :is(#touch-rotate,#touch-fullscreen-page,#touch-fullscreen){display:none!important}
.touch-fs-hint{position:fixed;z-index:40;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(90vw,500px);padding:16px 24px;color:white;background:#092a43f5;border:1px solid #85bed7;border-radius:12px;font:14px/1.5 sans-serif;text-align:left;box-shadow:0 6px 25px #0009;pointer-events:auto}
.touch-fs-hint[hidden]{display:none}
#inapp-banner{position:fixed;z-index:41;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);width:min(92vw,520px);padding:14px 44px 14px 18px;color:white;background:#092a43f5;border:1px solid #85bed7;border-radius:12px;font:14px/1.5 sans-serif;box-shadow:0 6px 25px #0009}#inapp-banner p{margin:0 0 6px}#inapp-banner a{display:inline-block;min-height:44px;padding:10px 20px;border-radius:22px;background:#f4bf56;color:#081521;font-weight:700;text-decoration:none;line-height:24px}#inapp-banner button{position:absolute;top:6px;right:6px;width:36px;height:36px;border:0;border-radius:18px;background:transparent;color:#d7eef5;font:22px/1 sans-serif}

/* KOChatMsgWnd and CenterKillInfoWnd: native art, English reference titles. */
body[data-battle-art="ready"] .ko-mark{font-size:0;border:0;border-radius:0;padding:0;width:24px;height:21px;background:var(--ko-skill-art) center/contain no-repeat;flex:none}
body[data-battle-art="ready"] .ko-mark.ko-none{background-image:var(--ko-none-art)}
body[data-battle-art="ready"] .kill-banner-line{background:var(--kill-line-red) center/100% 100% no-repeat;min-width:360px;min-height:32px}
body[data-battle-art="ready"] .kill-banner[data-color="blue"] .kill-banner-line{background-image:var(--kill-line-blue)}
/* TotalResultMainWnd and TotalResultScoreWnd (232 + 540 px, 2 px gap). */
body[data-battle-art="ready"] .battle-screen .battle-results{position:absolute;z-index:15;left:50%;top:calc(50% - 20px);width:774px;height:526px;max-height:none;padding:0;border:0;border-radius:0;box-shadow:none;background:var(--result-frame) center/100% 100% no-repeat;transform:translate(-50%,-50%) scale(var(--result-scale,1));transform-origin:center;overflow:visible;color:#19476b}
.battle-results::before{content:"";position:absolute;left:10px;top:50px;width:210px;height:465px;background:var(--result-solo-panel) center/100% 100% no-repeat}
.battle-results[data-team="true"]::before{background-image:var(--result-team-panel)}
#battle-results-title,#battle-result-summary h2{position:absolute;left:13px;top:11px;margin:0;color:white;font:700 17px sans-serif;text-shadow:0 1px 2px #000}
#battle-result-summary h2{left:252px}
#battle-result-summary dl{position:absolute;left:314px;top:70px;right:40px;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0;color:#3b3b3b;font:14px sans-serif}
#battle-result-summary dt,#battle-result-summary dd{margin:0}#battle-result-summary dd{text-align:right}
.battle-results #battle-results-headline{position:absolute;left:23px;top:63px;margin:0;font:700 18px sans-serif;color:#19476b;text-shadow:0 1px white}
.battle-results[data-team="true"] #battle-results-headline{display:none}
#result-blue-title,#result-red-title{display:none;position:absolute;left:23px;top:63px;margin:0;font:700 18px sans-serif;color:#19476b;text-shadow:0 1px white}
#result-red-title{top:294px;color:#b43020}
.result-team-score{margin-left:10px;font-size:22px;color:#0a6fc2}#result-red-title .result-team-score{color:#d23a17}
.battle-results[data-team="true"] #result-blue-title,.battle-results[data-team="true"] #result-red-title{display:block}
.battle-results .battle-results-rows{position:absolute;left:18px;top:109px;width:196px;height:380px;margin:0;padding:0;list-style:none;display:block}
.battle-results .battle-results-rows li{position:absolute;left:0;width:196px;height:21px;display:flex;align-items:center;gap:0;padding:0 5px 0 23px;border:0;border-radius:0;font:12px sans-serif;color:rgb(0,150,255);background-size:100% 100%;background-image:var(--score-bluedark)}
.battle-results-rows li.red{color:rgb(255,60,0);background-image:var(--score-reddark)}
.battle-results-rows li.blue[data-stripe="light"]{background-image:var(--score-bluelight)}
.battle-results-rows li.red[data-stripe="light"]{background-image:var(--score-redlight)}
.battle-results-rows li.blue.me{color:white;background-image:var(--score-blueover)}
.battle-results-rows li.red.me{color:white;background-image:var(--score-redover)}
.battle-results-rows .result-name{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400}
.battle-results-rows .result-kills{position:absolute;left:-10000px}
.battle-results-rows .result-contribution{margin-left:auto;font-weight:400;color:inherit}
/* TotalResultAwardWnd (234, 0, 540, 350) with four AwardSlotWnd (124 x 290 at
   22 + 124 i, 37) and their AwardSlotNameBtn (2, 269, 120, 21),
   xml/totalresultawardwnd.xml; layers at the slot centre x (resultPanels.ts:122-160).
   The source clears the RESULT summary while the award panel is up. */
#battle-result-awards{display:none}
body[data-battle-art="ready"] #battle-result-awards:not([hidden]){display:block;position:absolute;left:234px;top:0;width:540px;height:350px}
body[data-battle-art="ready"] .battle-results[data-awards] #battle-result-summary{display:none}
#battle-result-awards h2{position:absolute;left:18px;top:11px;margin:0;padding:0;border:0;background:transparent;box-shadow:none;color:white;font:700 17px/1 sans-serif;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
#battle-result-awards ol{margin:0;padding:0;list-style:none}
.award-slot{position:absolute;top:37px;width:124px;height:290px}
.award-slot[data-slot="0"]{left:22px}.award-slot[data-slot="1"]{left:146px}.award-slot[data-slot="2"]{left:270px}.award-slot[data-slot="3"]{left:394px}
.award-slot>span,.award-slot>strong{display:none;position:absolute;margin:0}
.award-slot:is([data-state="rolling"],[data-state="revealed"])>:not(.award-empty),.award-slot[data-state="empty"]>.award-empty{display:block}
.award-under,.award-hero,.award-title-back,.award-icon{left:0;top:0;width:124px;height:290px;background:none center/100% 100% no-repeat}
.award-under{background-image:var(--award-under)}
.award-title-back{background-image:var(--award-title-back)}
.award-slot[data-state="revealed"] .award-icon{animation:award-flash 150ms linear}
@keyframes award-flash{from{filter:brightness(0) invert(1)}to{filter:none}}
.award-title{left:3px;top:140px;width:118px;overflow:hidden;color:white;font:700 17px/1 sans-serif;text-align:center;white-space:nowrap;text-shadow:-2px 0 #184467,2px 0 #184467,0 -2px #184467,0 2px #184467,-1px -1px #184467,1px 1px #184467,-1px 1px #184467,1px -1px #184467}
.award-desc{left:-18px;top:172px;width:160px;color:white;font:11px/1 sans-serif;text-align:center;white-space:nowrap;text-shadow:-1px 0 #213c50,1px 0 #213c50,0 -1px #213c50,0 1px #213c50}
.award-name{left:2px;top:269px;width:120px;height:21px;overflow:hidden;background:var(--award-plate-blue) center/100% 100% no-repeat;color:white;font:12px/21px sans-serif;text-align:center;white-space:nowrap;text-overflow:ellipsis;text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.award-slot[data-red="true"] .award-name{background-image:var(--award-plate-red)}
.award-empty{left:0;top:140px;width:124px;color:#5d7180;font:22px/1 sans-serif;text-align:center}

#touch-fullscreen-page{display:none;position:fixed;z-index:15;right:max(12px,env(safe-area-inset-right));top:max(12px,env(safe-area-inset-top));width:38px;height:38px;border:1px solid #cad9df88;border-radius:50%;background:#103149a6;color:white;font:26px/1 sans-serif}body[data-touch="on"]:not([data-screen="battle"]) #touch-fullscreen-page{display:block}
/* Launched from its home-screen icon the game is already fullscreen; asking again would bring back the browser's exit notice. */
@media (display-mode:fullscreen){body[data-touch="on"]:not([data-screen="battle"]) #touch-fullscreen-page{display:none}}
#battle-results-title,#battle-result-summary h2{padding:0;border:0;box-shadow:none;background:transparent}

#create-hosting{position:absolute;left:0;top:calc(100% + 6px);width:100%;padding:7px 12px;border:1px solid #8ea9ba;border-radius:5px;background:#e1edf5;color:#19476b;font:12px sans-serif}#create-hosting label{display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:8px}#create-hosting select{max-width:175px}#p2p-status{position:absolute;bottom:-25px;left:14px;color:white;font:12px sans-serif;text-shadow:0 1px 2px black}
/* The native modal positions its own labels absolutely. Hosting controls are
   an optional flowing panel and must not inherit those authored coordinates. */
#create-hosting{height:auto;box-sizing:border-box;line-height:1.4}
#create-hosting summary{cursor:pointer}
#create-hosting label{position:static;left:auto;top:auto;margin:8px 0 0;padding:0;color:#19476b;font:12px/1.4 sans-serif}
#create-hosting select{position:static;display:block;width:175px;height:24px;min-height:0;padding:2px 5px;border:1px solid #8ea9ba;border-radius:3px;background:white;color:#19476b;font:12px/1.4 sans-serif}
#create-hosting input[type="checkbox"]{position:static;left:auto;width:16px;height:16px;margin:0;flex:none}
#create-hosting label:last-child{justify-content:flex-start}
/* Native party seats, extended to ten per team; each card stays 88×131. */
#room-screen[data-capacity-layout="true"]{width:952px;height:517px;--ui-normal:var(--room-window-wide);--room-extra:133px}
#room-screen[data-capacity-layout="true"] #room-leave{left:869px}
#room-screen[data-capacity-layout="true"] .player-slots{grid-template-columns:repeat(10,88px)}
#room-screen[data-capacity-layout="true"] .room-footer{left:90px}
#room-screen .room-capacity-control{position:absolute;right:27px;top:49px;display:flex;align-items:center;gap:6px;font:12px Arial,sans-serif;color:#53687b}
.room-capacity-control select{font:12px Arial,sans-serif;color:#334d66;background:#f2f6fa;border:1px solid #9baeba;border-radius:2px}
.room-capacity-control small{font-size:10px;margin-left:10px}
#room-screen .player-slot.closed-seat{background-image:var(--slot-blue-closed),var(--slot-blue-nor)}
#room-screen .player-slot.closed-seat.red{background-image:var(--slot-red-closed),var(--slot-red-nor)}
#room-screen .player-slot.closed-seat strong{color:#70849a;text-shadow:none}
#room-screen .player-slot:disabled{cursor:default}
#room-screen .player-slot[data-capacity]:hover{filter:brightness(1.12)}
#room-screen .player-slot[data-capacity]:focus-visible{outline:2px solid #197ac1;outline-offset:0}
.room-mode-icon{position:absolute;left:8px;top:12px;width:60px;height:60px;background:var(--room-mode-survival) center/contain no-repeat}
.room-mode-icon[data-mode-icon="team"]{background-image:var(--room-mode-team)}
.room-mode-icon[data-mode-icon="tower"]{background-image:var(--room-mode-tower)}
.room-mode-icon[data-mode-icon="catch"]{background-image:var(--room-mode-catch)}
.room-mode-icon[data-mode-icon="gangsi"]{background-image:var(--room-mode-gangsi)}
.room-mode-icon[data-mode-icon="plaza"]{background-image:var(--room-mode-plaza)}
.room-mode-icon[data-mode-icon="community"]{background-image:var(--room-mode-community)}
.original-dialog[data-kind="plaza"] #create-hosting{display:none}
/* The Create Plaza window's Map row sits inside the window, under Type (the PartyCreateWnd button at top 105) and above Create/Cancel (top 159), aligned with Type's column. */
#create-plaza-map{position:absolute;left:0;top:130px;width:100%;height:21px;margin:0;padding:0;border:0;background:transparent}
.original-dialog:not([data-kind="plaza"]) #create-plaza-map{display:none}
#create-plaza-map label{position:absolute;left:16px;top:4px;margin:0;padding:0;color:rgb(110,110,110);font:12px/1 Arial,sans-serif}
#create-plaza-map select{position:absolute;left:73px;top:0;display:block;box-sizing:border-box;width:212px;height:21px;min-height:0;margin:0;padding:0 4px;border:1px solid #9fb3c2;border-radius:3px;background:white;color:#3a3a3a;font:12px/1 Arial,sans-serif}
.room-row.playing .room-mode-icon,.room-row.full .room-mode-icon{filter:grayscale(1);opacity:.65}
.game-options{position:fixed;inset:50% auto auto 50%;width:536px;height:512px;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:transparent;overflow:visible;color:#3a3a3a;color-scheme:light;font:12px Arial,sans-serif;transform:translate(calc(-50% + var(--safe-dx,0px)),calc(-50% + var(--safe-dy,0px)));isolation:isolate}
.game-options::backdrop{background:#102a4266}.game-options:not([open]){display:none}
.game-options h2{position:absolute;left:15px;top:13px;margin:0;color:white;font:17px Arial,sans-serif;-webkit-text-stroke:3px #174774;paint-order:stroke fill}
.game-options .original-button{position:relative;isolation:isolate;border:0;background:transparent;border-radius:0;min-height:0;padding:0;color:#3a3a3a;font:12px Arial,sans-serif;box-shadow:none;transform:none}
.game-options .original-button::before{content:"";position:absolute;inset:-8px;z-index:-1;background:var(--ui-normal) center/100% 100% no-repeat;pointer-events:none}
.game-options .original-button:active::before{background-image:var(--ui-down,var(--ui-normal))}
.game-options .options-close{position:absolute;left:502px;top:11px;width:23px;height:23px;color:white;font-size:19px}
.options-tabs{position:absolute;left:17px;top:54px;display:flex;gap:1px}.options-tabs button{width:83px;height:27px}
.options-tabs button[aria-pressed="true"]{--ui-normal:var(--tab-selected)!important;color:#17669d}
.options-page{position:absolute;left:0;top:81px;width:536px;height:374px;padding:20px}
.options-page[hidden]{display:none!important}.graphics-presets{position:absolute;left:17px;top:15px;display:grid;gap:2px}
.graphics-presets .original-button{width:102px;height:31px;--ui-normal:var(--preset)}
.graphics-presets button[aria-pressed="true"]{--ui-normal:var(--preset-selected);color:white}
.graphics-fields{position:absolute;left:145px;right:20px;top:18px}.graphics-fields label{display:grid;grid-template-columns:95px 1fr;align-items:center;gap:6px;margin-bottom:6px}
.graphics-fields select,.graphics-fields button{width:100%;height:25px;margin:0;padding:1px 6px;border:1px solid #9cacbb;border-radius:2px;background:#f6f8fa;color:#3a3a3a;font:12px Arial,sans-serif}
.graphics-fields p{color:#66798a;font:11px/1.6 Arial,sans-serif;margin:8px 0 0}
.options-actions{position:absolute;left:17px;top:464px;display:flex;gap:2px;width:502px;justify-content:flex-end}.options-actions button{width:80px;height:31px}.options-actions #options-defaults{width:160px;margin-right:auto}
#options-status{position:absolute;left:145px;right:17px;top:430px;margin:0;color:#2c729c;font:11px Arial,sans-serif}
#options-art-status{position:absolute;top:100%;color:#923}#options-art-status:empty{display:none}
#options-sound #volume-panel{position:static;display:flex!important;flex-direction:column;align-items:stretch;gap:22px;margin:45px 35px;padding:0;border:0;background:transparent;box-shadow:none;color:#3a3a3a;font:13px Arial,sans-serif;max-width:none}
#options-sound #volume-panel label{display:grid!important;grid-template-columns:85px 1fr;gap:10px}#options-sound #volume-panel input[type=range]{width:100%;accent-color:#267cbb}
#options-sound #volume-panel button{color:#3a3a3a;border:1px solid #9cacbb;background:#edf3f8}
#options-controls{padding:25px 30px;font:13px/1.8 Arial,sans-serif}#options-controls p{line-height:1.8;color:#53687b}
#options-controls #options-keys{display:block;font:13px/2 Arial,sans-serif}
#options-controls h3{margin:0 0 4px}#options-controls .options-touch{display:flex;align-items:center;gap:10px;font-weight:bold}#options-controls .options-touch select{font:13px Arial,sans-serif}
#options-data h3{margin:0 0 6px}#options-data .options-download{display:flex;align-items:center;gap:8px;font-weight:bold}#options-data p{margin:8px 0;line-height:1.4}#options-download-status{font-weight:bold;color:#17669d}
@media(max-width:560px){.game-options{transform:translate(-50%,-50%) scale(calc((100vw - 20px)/536px))}}
@media(max-height:540px) and (min-width:561px){.game-options{transform:translate(-50%,-50%) scale(calc((100vh - 20px)/512px))}}

.game-options{transform:translate(calc(-50% + var(--safe-dx,0px)),calc(-50% + var(--safe-dy,0px))) scale(var(--options-scale,1))}

#room-screen .player-slot.closed-seat{background-blend-mode:multiply;color:#e2ebf3}
#room-screen .player-slot.closed-seat.blue:hover{background-image:var(--slot-blue-closed),var(--slot-blue-over)}
#room-screen .player-slot.closed-seat.red:hover{background-image:var(--slot-red-closed),var(--slot-red-over)}
#room-screen .player-slot.closed-seat strong{color:#c6d5e5}
#room-screen[data-capacity-layout="true"] .room-footer{left:0;width:952px}
#room-screen[data-capacity-layout="true"] .room-chat{width:574px}
#room-screen[data-capacity-layout="true"] .chat-log,#room-screen[data-capacity-layout="true"] #room-chat-entry{width:554px}
#room-screen[data-capacity-layout="true"] #room-chat-input{width:495px}
#room-screen[data-capacity-layout="true"] #room-mode-chip{left:596px}
#room-screen[data-capacity-layout="true"] #room-map-chip{left:761px}
#room-screen[data-capacity-layout="true"] .room-help,#room-screen[data-capacity-layout="true"] .room-status,#room-screen[data-capacity-layout="true"] #room-action-status{left:596px}
#room-screen[data-capacity-layout="true"] #room-change-team{left:614px}
#room-screen[data-capacity-layout="true"] #room-start{left:776px}
/* Prisoner's Rounds / Time lists (PartyOptionWnd ID_ROUND_TYPE / ID_ROUND_TIME_TYPE) under Mode / Map. */
#room-screen .room-rule.room-catch-rule{top:51px;height:27px}
#room-rounds-chip{left:416px}#room-time-chip{left:581px}
#room-screen[data-capacity-layout="true"] #room-rounds-chip{left:596px}
#room-screen[data-capacity-layout="true"] #room-time-chip{left:761px}
#room-screen[data-catch-options="true"] .room-help{top:81px}
#room-screen[data-catch-options="true"] .room-status{display:none}

/* Visible battle shortcut setup; its footprint is centered with the selector. */
#battle-hero-select{margin-top:calc(47px * var(--soldier-scale,1))}
.battle-key-editor{position:absolute;left:0;right:0;bottom:calc(100% + 8px);height:86px;padding:8px 12px;border:2px solid #b9d9ec;border-radius:7px;background:linear-gradient(#12648b,#063e62);box-shadow:0 2px 5px #092338aa;color:#fff;font:12px/16px Arial,sans-serif}
.battle-key-heading{display:flex;justify-content:space-between;align-items:center;height:16px}
.battle-key-heading strong{font-size:13px}
#battle-key-instruction{margin:3px 0 6px;min-height:16px;color:#eaf6ff;white-space:nowrap}
#battle-key-buttons{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px}
.battle-key-button{height:26px;min-height:26px;padding:0;border:1px solid #7db6d6;border-radius:4px;background:linear-gradient(#3588b7,#145076);color:#fff;font:700 13px/24px Arial,sans-serif}
.battle-key-button:hover,.battle-key-button:focus-visible{border-color:#ffe08b;outline:1px solid #ffe08b}
.battle-key-button[aria-pressed="true"]{background:#ffcf59;border-color:#fff2b5;color:#25394a}
#battle-key-cancel{padding:0 5px;min-height:16px;height:18px;border:1px solid #8ec3df;border-radius:3px;background:#164f71;color:#fff;font:11px/16px Arial,sans-serif}
#battle-heroes-open{position:absolute;left:286px;top:5px;width:70px;height:30px;min-height:30px;padding:0;border:1px solid #acd3eb;border-radius:5px;background:linear-gradient(#1c78a5,#07436a);color:#fff;font:700 12px/28px Arial,sans-serif;box-shadow:0 1px 3px #123b56}
#battle-heroes-open:hover,#battle-heroes-open:focus-visible{border-color:#ffe08b;outline:1px solid #ffe08b}
.battle-hero-card{position:relative;width:90px;height:184px;scroll-snap-align:start}
.soldier-dialog .hero-button[data-unbound] kbd{display:none}
.hero-shortcut-bind{position:absolute;left:5px;top:5px;z-index:1;width:35px;height:23px;min-height:23px;margin:0;padding:0;border:1px dashed #447c9e;border-radius:4px;background:#e9f2f8;color:#164e73;font:700 9px/21px Arial,sans-serif;cursor:pointer}
.hero-shortcut-bind:hover,.hero-shortcut-bind:focus-visible{border-color:#a7640b;outline:1px solid #ffd36a;background:#fff1c9}
.hero-shortcut-bind[aria-pressed="true"]{border:1px solid #be831c;background:#ffcf59;color:#25394a}
/* Prisoner (MT_CATCH): the round title / round result briefing (GUI/BriefingWnd.cpp:801-957), the catch screen blinds (ioPlayStage::StartScreenBlind SBT_CATCH_*), the KO-feed result word (ChatMsgWnd.cpp:727) and the result briefing hiding the minimap, TimeScore, skills and rank strip (BriefingWnd.cpp:588-623). */
.battle-catch-blind{position:absolute;inset:0;z-index:3;pointer-events:none}
.battle-catch-blind[hidden]{display:none}
.battle-round-title{position:absolute;left:0;right:0;top:34%;z-index:5;display:flex;flex-direction:column;align-items:center;gap:calc(var(--hud,1)*6px);pointer-events:none;text-align:center}
.battle-round-title[hidden]{display:none}
.battle-round-title .round-title-main{color:#ffd43b;font-size:clamp(30px,6vw,64px);font-style:italic;font-weight:950;letter-spacing:.04em;line-height:1;text-shadow:3px 3px 0 #2b1405,-3px 3px 0 #2b1405,3px -3px 0 #2b1405,-3px -3px 0 #2b1405,0 6px 0 #2b1405}
.battle-round-title .round-title-sub{color:#f4f7f9;font-weight:800;font-size:calc(var(--hud,1)*14px);text-shadow:-1px 0 #000,1px 0 #000,0 -1px #000,0 1px #000}
.battle-round-title[data-kind="result"]{top:22%}
.battle-round-title[data-kind="result"][data-color="blue"] .round-title-main{color:#7cc8ff;text-shadow:3px 3px 0 #0c2444,-3px 3px 0 #0c2444,3px -3px 0 #0c2444,-3px -3px 0 #0c2444,0 6px 0 #0c2444}
.battle-round-title[data-kind="result"][data-color="red"] .round-title-main{color:#ff7a5c;text-shadow:3px 3px 0 #44100c,-3px 3px 0 #44100c,3px -3px 0 #44100c,-3px -3px 0 #44100c,0 6px 0 #44100c}
.battle-screen[data-catch-result="true"] :is(#battle-minimap,#battle-time-score,#battle-skills,#battle-rank-strip){visibility:hidden}
.ko-feed .ko-result{color:#fff;margin-left:calc(var(--hud,1)*3px)}
.battle-blind[data-round-delay] .revival-fill{display:none}

/* Native-app feel on touch screens: no double-tap zoom, no pull-to-refresh or
   rubber-banding, no text selection or long-press callout, no tap flash. Form
   fields stay selectable. The viewport meta and index.html's gesture guards
   stop pinch zoom; touch-action keeps taps instant and still allows scrolling. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (pointer:coarse){
  html,body{touch-action:manipulation;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
  body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-font-smoothing:antialiased}
  input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
  img,canvas,svg{-webkit-user-drag:none;-webkit-touch-callout:none}
  button,a,[role="button"],summary,select,label{touch-action:manipulation}
}
@supports (height:100dvh){body{min-height:100dvh}}
/* Connection refused at the server's limits (browser.rs set_register_notice). */
.register-card .form-status[data-notice="error"]{padding:10px 12px;border:1px solid #e3707a;border-radius:6px;background:#ffe9eb;color:#8a1d28;font-size:12px;font-weight:700;line-height:1.5}
.register-card .form-status[data-notice="full"]{padding:10px 12px;border:1px solid #f0b43c;border-radius:6px;background:#fff4d6;color:#6b3d00;font-size:12px;font-weight:700;line-height:1.5}

/* Donation dialog (index.html): a support button on the login card and in the lobby header. */
.button-donate{border-color:#f3b1c0;background:linear-gradient(#ff8fa8,#d6456a);color:#fff;text-shadow:0 1px 2px #6b1430;box-shadow:0 3px 0 #8b2445;font-weight:800}
.register-card .button-donate{width:100%;margin-top:6px}
/* Install button and steps (index.html): touch screens only, hidden once installed. */
.button-install{border-color:#ffe39a;background:linear-gradient(#ffd66b,#e09a1f);color:#3a2300;box-shadow:0 3px 0 #8a5a0c;font-weight:800}
.button-install[hidden]{display:none}
.register-card .button-install{width:100%;margin-top:6px}
.lobby-screen .screen-heading .button-install{min-height:30px;padding:4px 12px;font-size:12px;margin-left:auto}
.lobby-screen .screen-heading .button-install:not([hidden])+.button-donate{margin-left:0}
.install-dialog ol{margin:0 0 14px;padding-left:22px;line-height:1.7}
.install-dialog ol[hidden]{display:none}
/* Phone landscape (and other short screens): the register card fits the viewport
   instead of running past both edges; it scrolls inside itself as a last resort. */
@media (max-height:520px){
  .register-card{width:min(400px,calc(100vw - 32px));padding:14px 20px;gap:7px;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto}
  .register-card .kicker{margin:-8px -14px 2px;padding:7px 10px}
  .register-card h1{font-size:34px}
  .register-card .lede{margin:0;font-size:12px}
  .register-card .field{padding:8px 11px}
  .register-card .button-wide{min-height:36px;padding:7px 14px}
  .register-card .form-status{margin:0;min-height:0}
  .register-card .fine-print{display:none}
  .register-card .button-donate{min-height:32px;padding:5px 12px;margin-top:0}
  .register-card .button-install{min-height:32px;padding:5px 12px;margin-top:0}
}
/* The A/S/D keyboard hints mean nothing on a touch screen. */
@media (pointer:coarse){.login-controls{display:none}}
.register-card [hidden]{display:none!important}
.register-card .register-oauth-row{display:flex;gap:8px}
.register-card #register-login-error{margin:0 0 10px}
.register-card .register-oauth{flex:1 1 0;display:flex;align-items:center;justify-content:center;min-height:40px;text-decoration:none;font-weight:800;font-size:13px}
.register-card .register-oauth.discord{background:#5865f2;border:2px solid #4752c4;color:#fff}
.register-card .register-oauth.google{background:#fff;border:2px solid #c9d3dc;color:#243e56}
.register-card .register-or{display:flex;align-items:center;gap:10px;color:#526a7d;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.register-card .register-or::before,.register-card .register-or::after{content:"";flex:1;height:1px;background:#8ea6ba}
@media(max-height:520px){.register-card .register-oauth{min-height:32px;padding:4px 10px;font-size:12px}.register-card .register-or{font-size:9px}}
.register-card .register-signed-in{color:#243e56;font-size:13px}
.register-card .register-signed-in a{color:#175b8c}
.lobby-screen .screen-heading .button-donate{min-height:30px;padding:4px 12px;font-size:12px;margin-left:auto;background:linear-gradient(#ff8fa8,#d6456a);border-color:#ffd3dd;color:#fff}
.donate-dialog{width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:22px 24px;border:3px solid #e9f3fa;border-radius:9px;background:linear-gradient(135deg,#fffaf3,#d9e6ef);color:#243e56;box-shadow:0 16px 40px #0008}
.donate-dialog::backdrop{background:#04101acc}
.donate-dialog h2{margin:0 0 8px;font-size:20px;color:#a8243f}
.donate-dialog p{margin:0 0 10px;font-size:13px;line-height:1.5}
.donate-network strong{color:#1d4f7a}
.donate-tabs{display:flex;gap:6px;margin:0 0 10px;border-bottom:2px solid #8ea6ba}
.donate-tab{flex:1;padding:8px 12px;border:2px solid #8ea6ba;border-bottom:0;border-radius:6px 6px 0 0;background:#e3ecf3;color:#4a6378;font-weight:800;font-size:14px;cursor:pointer;margin-bottom:-2px}
.donate-tab[aria-selected="true"]{background:#fff;color:#a8243f;border-color:#8ea6ba;border-bottom:2px solid #fff}
.donate-panel[hidden]{display:none}
.donate-qris{display:block;width:100%;height:auto;margin:4px 0 10px;border:2px solid #8ea6ba;border-radius:6px;background:#fff;box-sizing:border-box}
@media(max-height:600px){.donate-qris{width:auto;max-width:100%;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);margin:4px auto 10px}}
.donate-address{display:flex;gap:8px;align-items:stretch;margin:4px 0 10px}
.donate-address code{flex:1;min-width:0;padding:10px;border:2px solid #8ea6ba;border-radius:5px;background:#fff;color:#14263a;font:13px ui-monospace,monospace;word-break:break-all;user-select:all;-webkit-user-select:all}
.donate-warning{padding:8px 10px;border:1px solid #f0b43c;border-radius:6px;background:#fff4d6;color:#6b3d00;font-size:12px!important;font-weight:600}
.donate-status{min-height:18px;color:#1f7a4f;font-weight:700}
.donate-dialog form{display:flex;justify-content:flex-end;margin:0}
@media(max-height:420px){.donate-dialog{padding:14px 18px}.donate-dialog h2{font-size:17px;margin-bottom:4px}.donate-dialog p{margin-bottom:6px;font-size:12px}}
.donate-busy{padding:8px 10px;border-radius:6px;background:#ffe3ea;color:#8a1534;font-weight:700}
.donate-discord{font-size:13px}.donate-discord a{color:#5865f2;font-weight:700}

/* Operator announcements remain visible across lobby, room and battle screens. */
#admin-announcement{position:fixed;z-index:100;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);max-height:35vh;overflow:auto;padding:14px 22px;border:1px solid #f4bf56;border-radius:10px;background:#102333f5;color:#ffe2a0;box-shadow:0 5px 24px #0009;font:600 clamp(13px,2vw,16px)/1.5 system-ui,sans-serif;overflow-wrap:anywhere;pointer-events:auto}

.chat-log .admin-announcement-line{color:#ffe2a0;background:#57421955;border-left:3px solid #f4bf56;padding-left:7px;font-weight:600}
.lobby-online{margin:4px 0 0;color:#2d8a76;font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap}.room-browser-head>div:first-child{flex:0 0 auto}.lobby-online::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#54dbc5;box-shadow:0 0 0 3px #54dbc522;vertical-align:1px}.lobby-online[hidden]{display:none}
#battle-ping{position:absolute;z-index:4;top:max(15px,env(safe-area-inset-top));right:calc(max(15px,env(safe-area-inset-right)) + 220px*var(--hud,.7) + 8px);padding:2px 9px;border-radius:10px;background:#0009;color:#cfe3ec;font:700 11px/16px ui-monospace,monospace;pointer-events:none;white-space:nowrap}#battle-ping[data-level="good"]{color:#7ce8a8}#battle-ping[data-level="fair"]{color:#f4d26b}#battle-ping[data-level="poor"]{color:#ff8a7a}.battle-screen[data-loading] #battle-ping,.battle-screen[data-result] #battle-ping{visibility:hidden}
/* Landing (register) screen: navbar, card and footer over the plaza art.
   Other screens never show the navbar or the footer. */
:root{--nav-h:56px;--foot-h:38px}
.landing-nav,.landing-footer{display:none}
.landing-nav [hidden],.landing-footer [hidden]{display:none!important}
body[data-screen="register"] .landing-nav{position:fixed;z-index:6;top:0;left:0;right:0;height:var(--nav-h);display:flex;align-items:center;gap:clamp(10px,3vw,36px);padding-block:0;padding-inline:max(16px,env(safe-area-inset-left),4vw) max(16px,env(safe-area-inset-right),4vw);background:linear-gradient(#0b2f52e6,#061a30d9);border-bottom:2px solid #3d99d9aa;box-shadow:0 1px 0 #ffffff1a inset,0 6px 22px #00122466;backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);color:#e8f3fa;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.landing-brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;white-space:nowrap}
.landing-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:7px;background:linear-gradient(#ffe36b,#f29312);border:2px solid #fff0b5;color:#7a3f0c;font-size:14px;box-shadow:0 2px 0 #9b5b11;transform:rotate(-6deg)}
.landing-wordmark{font-size:18px;font-weight:900;font-style:italic;letter-spacing:.02em;text-shadow:0 2px 0 #052340}
.landing-wordmark em{color:#ffd23f;font-style:inherit}
.landing-links{display:flex;align-items:center;gap:4px}
.landing-link{position:relative;padding:8px 12px;border:0;border-radius:6px;background:none;color:#cfe3f1;font:700 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:color .15s,background .15s}
.landing-link::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;border-radius:2px;background:#ffd23f;transform:scaleX(0);transition:transform .18s}
.landing-link:hover,.landing-link:focus-visible{color:#ffe668;background:#ffffff12;outline:none}
.landing-link:hover::after,.landing-link:focus-visible::after{transform:scaleX(1)}
.landing-account{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-login,.nav-logout{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:7px;font:800 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none;white-space:nowrap;transition:transform .15s,filter .15s}
.nav-login{background:#5865f2;border:1px solid #8f98ff;color:#fff;box-shadow:0 2px 0 #3c45a5}
.nav-logout{background:#ffffff14;border:1px solid #9bbad088;color:#e3eff7;cursor:pointer}
.nav-logout-form,.nav-user-menu form{display:contents}
.nav-login:hover,.nav-logout:hover{transform:translateY(-1px);filter:brightness(1.1)}
.nav-user{position:relative}
.nav-user summary{display:flex;align-items:center;gap:8px;min-height:34px;padding:3px 10px 3px 3px;border:1px solid #9bbad066;border-radius:20px;background:#ffffff12;color:#fff;font:700 13px/1 system-ui,-apple-system,"Segoe UI",sans-serif;list-style:none;cursor:pointer;user-select:none}
.nav-user summary::-webkit-details-marker{display:none}
.nav-user summary:hover,.nav-user[open] summary{background:#ffffff22}
.nav-avatar{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(#ffe36b,#f29312);border:2px solid #fff0b5;color:#7a3f0c;font-weight:900;font-size:13px}
#nav-user-name{max-width:14ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-caret{font-size:10px;opacity:.8;transition:transform .15s}
.nav-user[open] .nav-caret{transform:rotate(180deg)}
.nav-user-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:160px;padding:6px;border:3px solid #e9f3fa;outline:1px solid #4c647b;border-radius:9px;background:linear-gradient(135deg,#fffaf3,#d9e6ef);box-shadow:0 4px 0 #344d6899,0 14px 30px #0006}
.nav-user-menu a,.nav-user-menu button{display:block;width:100%;border:0;background:none;text-align:left;cursor:pointer;padding:9px 12px;border-radius:5px;color:#243e56;font:700 13px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;text-decoration:none}
.nav-user-menu :is(a,button):hover,.nav-user-menu :is(a,button):focus-visible{background:#3d99d926;color:#075092;outline:none}
body[data-screen="register"] .landing-footer{position:fixed;z-index:6;left:0;right:0;bottom:0;min-height:var(--foot-h);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px;padding:6px max(16px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:#061a30d9;border-top:1px solid #3d99d955;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#9fbdd2;font:500 11px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif}
.landing-footer>*+*::before{content:"·";margin-right:14px;color:#5d84a3}
.landing-footer a,.landing-footer button{padding:0;border:0;background:none;color:#ffe17a;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.landing-footer a:hover,.landing-footer button:hover{text-decoration:underline}
/* The card sits in the space between the bars, left of the heroes. */
body[data-screen="register"] .register-screen{display:flex;align-items:center;min-height:100vh;min-height:100dvh;padding:calc(var(--nav-h) + 24px) clamp(16px,8vw,140px) calc(var(--foot-h) + 24px)}
.register-card{position:relative;left:auto;top:auto;transform:none;width:min(440px,100%);gap:12px}
.register-card .lede{margin:2px 0 4px}
.register-card .register-oauth{min-height:46px;font-size:15px;box-shadow:0 3px 0 #3c45a5;transition:transform .15s,filter .15s}
.register-card .register-oauth:hover{transform:translateY(-1px);filter:brightness(1.08)}
.register-card .register-guest label{margin:0 0 7px}
.register-guest-row{display:flex;gap:8px}
.register-guest-row .field{flex:1 1 auto;min-width:0}
.register-guest-row .button-gold{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;font-size:13px;white-space:nowrap}
.register-guest-row .button-gold:active,.register-card .register-oauth:active{transform:translateY(2px)}
.landing-signed-in{display:grid;gap:14px;margin-top:4px}
.landing-welcome{margin:0;color:#3b536a;font-size:17px;font-weight:600}
.landing-welcome strong{color:#075092;font-weight:900}
.landing-start{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:68px;border:3px solid #fff0b5;border-radius:12px;background:linear-gradient(#ffe36b,#ffc23a 45%,#f29312);color:#fff;font:italic 900 30px/1 system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.12em;text-shadow:0 2px 0 #9b5b11,0 3px 4px #75440088;box-shadow:0 5px 0 #9b5b11,0 0 0 1px #b87720,0 0 22px #ffc84a77;cursor:pointer;transition:transform .15s,filter .15s,box-shadow .15s}
.landing-start-icon{font-size:22px;font-style:normal}
.landing-start:hover,.landing-start:focus-visible{transform:translateY(-2px);filter:brightness(1.06);outline:none;box-shadow:0 7px 0 #9b5b11,0 0 0 1px #b87720,0 0 32px #ffc84acc}
.landing-start:active{transform:translateY(3px);box-shadow:0 2px 0 #9b5b11,0 0 0 1px #b87720,0 0 18px #ffc84a77}
@media(prefers-reduced-motion:no-preference){.landing-start{animation:landing-start-glow 2.4s ease-in-out infinite}@keyframes landing-start-glow{50%{box-shadow:0 5px 0 #9b5b11,0 0 0 1px #b87720,0 0 38px #ffd25acc}}}
/* The touch fullscreen button sits inside the navbar on this screen. */
body[data-touch="on"][data-screen="register"] .landing-nav{padding-right:calc(max(12px,env(safe-area-inset-right)) + 46px)}
body[data-touch="on"][data-screen="register"] #touch-fullscreen-page{top:calc((var(--nav-h) - 32px)/2);width:32px;height:32px;font-size:20px;z-index:7}
@media(max-width:640px){
  :root{--foot-h:56px}
  .landing-links{display:none}
  .landing-wordmark{font-size:16px}
}
/* Phone landscape and other short screens: one thin navbar row, no footer,
   and a card that fits below the navbar without page scroll. */
@media(max-height:520px){
  :root{--nav-h:40px;--foot-h:0px}
  body[data-screen="register"] .landing-footer{display:none}
  body[data-screen="register"] .register-screen{padding:calc(var(--nav-h) + 8px) clamp(16px,6vw,80px) 8px}
  .register-card{width:min(400px,100%);max-height:calc(100vh - var(--nav-h) - 16px)}
  @supports (height:100dvh){.register-card{max-height:calc(100dvh - var(--nav-h) - 16px)}}
  .landing-mark{width:24px;height:24px;font-size:11px}
  .landing-wordmark{font-size:15px}
  .landing-link{padding:6px 9px;font-size:12px}
  .nav-login,.nav-logout,.nav-user summary{min-height:28px;font-size:12px}
  .nav-avatar{width:22px;height:22px;font-size:11px}
  .register-card .register-oauth{min-height:34px;font-size:13px}
  .register-guest-row .button-gold{min-height:36px;font-size:12px}
  .register-guest-row .field{padding:8px 11px}
  .landing-signed-in{gap:8px}
  .landing-welcome{font-size:14px}
  .landing-start{min-height:50px;font-size:22px}
}
/* Player-made touch layouts (touch_custom.rs). A custom layout hides the
   classic buttons and draws its own; the stick zone shrinks to the placed
   stick, and no stick means no stick zone. */
.touch-controls[data-custom="true"] .touch-actions:not(#touch-custom){display:none}
.touch-controls[data-custom="true"] #touch-pad{left:var(--pad-l);top:var(--pad-t);width:var(--pad-w);height:var(--pad-h);bottom:auto}
.touch-controls[data-custom="true"][data-stick="false"] #touch-pad{display:none}
.touch-controls[data-custom="true"] .touch-stick{width:calc(116px*var(--stick-u,1));height:calc(116px*var(--stick-u,1))}
.touch-controls[data-custom="true"] .touch-knob{width:calc(52px*var(--stick-u,1));height:calc(52px*var(--stick-u,1))}
.touch-controls[data-custom="false"] #touch-custom{display:none}
.touch-controls[data-editing="true"]{visibility:hidden}
#touch-custom{position:absolute;inset:0;opacity:var(--touch-opacity);pointer-events:none}
#touch-custom .touch-ctl{font:800 calc(11px*var(--ctl-u,1))/1.05 system-ui,sans-serif;text-align:center;word-break:break-word}
#touch-custom .touch-ctl>span{padding:0 10%}
#touch-custom .touch-ctl[data-kind="combo"]{border-color:#9fe3ff;background:#0d3150a6;color:#d7f3ff}
#touch-custom .touch-ctl[data-kind="keys"]{border-color:#ffe39a}
#touch-custom .touch-ctl[data-kind="attack"]{border-width:2.5px!important;background-size:80%;background-position:center;background-repeat:no-repeat}
#touch-custom .touch-ctl[data-kind="attack"][data-artwork="true"] svg{visibility:hidden}
/* The arrow pad: four arrows around a dead centre; the held ones light up
   (data-dir is the held key mask: up 1, down 2, left 4, right 8). */
.touch-ctl[data-kind="dpad"],.te-ctl[data-kind="dpad"]{background:#0a122061}
:is(.touch-ctl,.te-ctl)[data-kind="dpad"] i[data-arrow]{position:absolute;width:30%;height:30%;border:2px solid #ffffffb0;border-radius:22%;background:#ffffff1a;pointer-events:none}
:is(.touch-ctl,.te-ctl)[data-kind="dpad"] i[data-arrow]::after{content:"";position:absolute;inset:28%;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(var(--r))}
:is(.touch-ctl,.te-ctl)[data-kind="dpad"] i[data-arrow="up"]{left:35%;top:4%;--r:-135deg}
:is(.touch-ctl,.te-ctl)[data-kind="dpad"] i[data-arrow="down"]{left:35%;bottom:4%;--r:45deg}
:is(.touch-ctl,.te-ctl)[data-kind="dpad"] i[data-arrow="left"]{left:4%;top:35%;--r:135deg}
:is(.touch-ctl,.te-ctl)[data-kind="dpad"] i[data-arrow="right"]{right:4%;top:35%;--r:-45deg}
.touch-ctl[data-kind="dpad"][data-pressed="true"]{transform:none;background:#0a122061}
.touch-ctl[data-kind="dpad"]:is([data-dir="1"],[data-dir="5"],[data-dir="9"]) i[data-arrow="up"],
.touch-ctl[data-kind="dpad"]:is([data-dir="2"],[data-dir="6"],[data-dir="10"]) i[data-arrow="down"],
.touch-ctl[data-kind="dpad"]:is([data-dir="4"],[data-dir="5"],[data-dir="6"]) i[data-arrow="left"],
.touch-ctl[data-kind="dpad"]:is([data-dir="8"],[data-dir="9"],[data-dir="10"]) i[data-arrow="right"]{background:#ffd678c0;border-color:#ffe9b0}
/* Hero shortcuts: one hero's portrait; dimmed when that hero is not in this battle. */
#touch-custom .touch-ctl[data-kind="hero"]{border-color:#d9eaff;background:#122433cc;overflow:visible}
#touch-custom .touch-ctl[data-kind="hero"][aria-pressed="true"]{border-color:#ffe275!important;box-shadow:0 0 7px #ffe27588}
#touch-custom .touch-ctl[data-kind="hero"][data-dim="true"]{opacity:.35;filter:grayscale(1)}
#touch-custom .touch-ctl[data-kind="hero"] kbd{position:absolute;bottom:-4px;right:-3px;background:#173c85;border:1px solid #d6eeff;border-radius:4px;padding:1px 3px;font:700 calc(9px*var(--touch-u))/1 sans-serif}
/* Lobby actions: one even row. Every button has the same height, a
   single-line label, and an equal share of the width, whatever its text. */
.room-browser-head .room-browser-actions{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;align-items:stretch}
.room-browser-head .room-browser-actions .button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;height:44px;margin:0;padding:0 12px;font-size:15px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.room-browser-head .room-browser-actions .button-quiet{font-size:15px}
.room-browser-actions .button-practice{background:linear-gradient(#5b8fd8,#2a5ea8);border-color:#d3e6ff;color:#fff;text-shadow:0 1px 1px #183a6b}

@media(max-width:700px){.room-browser-head .room-browser-actions{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:8px}.room-browser-head .room-browser-actions .button{height:40px;min-height:40px;font-size:13px;padding:0 8px}}
/* Update notice (index.html): a newer build is on the server; hidden during a battle. */
#update-banner{position:fixed;z-index:99;left:50%;top:max(10px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;align-items:center;gap:12px;max-width:calc(100vw - 24px);padding:8px 8px 8px 16px;border:1px solid #f4bf56;border-radius:24px;background:#102333f5;color:#ffe2a0;box-shadow:0 5px 24px #0009;font:600 14px/1.4 system-ui,sans-serif}
#update-banner button{min-height:36px;padding:6px 16px;border:0;border-radius:18px;background:#f4bf56;color:#081521;font:700 14px/1 system-ui,sans-serif}
#update-banner .update-dismiss{padding:6px 10px;background:transparent;color:#d7eef5;font-size:20px}
body[data-screen="battle"] #update-banner{display:none}

/* Room hero rule (RUST-ONLY "ban hero", crates/web/src/browser/hero_ban.rs):
   a chip under Mode / Map, its dialog, and the room list's badge. */
#room-screen #room-heroes-chip{top:51px;height:27px;left:416px;width:328px;cursor:pointer}
#room-screen[data-capacity-layout="true"] #room-heroes-chip{left:596px}
#room-screen[data-hero-ban="true"] #room-heroes-chip strong{color:#a8243f;font-weight:bold}
#room-screen[data-hero-ban-chip="true"] .room-help{top:81px}
#room-screen[data-hero-ban-chip="true"] .room-status{display:none}
#room-screen[data-catch-options="true"] #room-heroes-chip{top:81px;height:20px}
#room-screen[data-catch-options="true"] .room-help{visibility:hidden}
.room-hero-ban{display:inline-block;max-width:150px;margin-left:6px;padding:0 4px;border-radius:3px;background:#a8243f;color:#fff;font:10px/14px Arial,sans-serif;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hero-ban-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);display:none;flex-direction:column;gap:6px;padding:16px 18px;border:3px solid #e9f3fa;border-radius:9px;background:linear-gradient(135deg,#fffaf3,#d9e6ef);color:#243e56;box-shadow:0 16px 40px #0008;font:13px/1.4 Arial,sans-serif}
.hero-ban-dialog[open]{display:flex}
.hero-ban-dialog::backdrop{background:#04101a99}
.hero-ban-dialog h2{margin:0;font-size:18px;color:#a8243f}
.hero-ban-dialog p{margin:0}
.hero-ban-kind{display:flex;gap:14px;flex-wrap:wrap}
.hero-ban-kind[hidden]{display:none}
.hero-ban-summary{font-weight:bold}
.hero-ban-votes{color:#6a4b1c;font-size:12px}
.hero-ban-votes:empty{display:none}
#hero-ban-filter{padding:4px 6px;border:1px solid #9baeba;border-radius:3px;font:13px Arial,sans-serif}
.hero-ban-list{flex:1;min-height:120px;overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px;padding:2px}
.hero-ban-list button{display:flex;justify-content:space-between;align-items:center;gap:4px;min-height:28px;padding:3px 7px;border:1px solid #9baeba;border-radius:4px;background:#fff;color:#243e56;font:12px Arial,sans-serif;text-align:left;cursor:pointer}
.hero-ban-list button[hidden]{display:none}
.hero-ban-list button:disabled{cursor:default;opacity:.75}
.hero-ban-list button[data-banned="true"]{background:#f3d6dc;border-color:#a8243f;color:#7d1a2e;text-decoration:line-through}
.hero-ban-list button[data-voted="true"]{outline:2px solid #d79b2a}
.hero-ban-list .votes{flex:none;padding:0 4px;border-radius:8px;background:#d79b2a;color:#fff;font-size:10px;text-decoration:none}
.hero-ban-actions{display:flex;justify-content:flex-end;gap:8px;align-items:center}
.hero-ban-actions form{margin:0}
.hero-ban-actions [hidden]{display:none}
/* Live hero preview (crates/web/src/hero_preview.rs): one canvas at a time. */
.hero-preview{position:relative;flex:none;overflow:hidden;touch-action:pan-y;overscroll-behavior:contain}
.hero-preview[hidden]{display:none}
.hero-preview-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.hero-preview-canvas:active{cursor:grabbing}
.hero-preview-spinner{position:absolute;left:50%;top:45%;width:28px;height:28px;margin:-14px 0 0 -14px;border:3px solid #ffffff55;border-top-color:#f4bf56;border-radius:50%;animation:hero-preview-spin .9s linear infinite;pointer-events:none}
.hero-preview-spinner[hidden]{display:none}
@keyframes hero-preview-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.hero-preview-spinner{animation-duration:3s}}
.hero-preview-caption{position:absolute;left:4px;right:4px;bottom:4px;margin:0;text-align:center;font:11px/14px Arial,sans-serif;pointer-events:none;z-index:1}
/* Lost Arena type (web/fonts, SIL Open Font License 1.1: OFL-*.txt): Lilita One
   for titles and buttons, Nunito for text. Latin subsets, self-hosted. */
@font-face{font-family:"Lilita One";font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lilita-one-latin.woff2') format('woff2')}
@font-face{font-family:"Nunito";font-style:normal;font-weight:600 900;font-display:swap;src:url('/fonts/nunito-latin.woff2') format('woff2')}
/* Lost Arena colour themes (Options > Interface > Colours, `ls.ui`
   `theme`, body[data-ui-theme]): the redesigned windows read these tokens.
   Solid's own colours are the default; the others are the palettes of the
   design's lobby explorations (Lost Saga Classic, Original Lost Saga,
   Mobile Game, Crimson, Esports Neon, Esports Style, Lost Saga Colors). */
:root{--t-blue:#245fb0;--t-blue-hi:#4c8ad6;--t-blue-dk:#1f5299;--t-blue-dk2:#1e4e92;--t-ink:#23395b;--t-ink-2:#3e5878;--t-muted:#6b7f9c;--t-muted-2:#8a97a8;--t-faint:#a3aebd;--t-line:#c5d1e0;--t-line-soft:#c9d2de;--t-line-2:#9fb4d0;--t-panel:#eef2f7;--t-panel-2:#dce5f1;--t-panel-3:#e6ebf2;--t-surface:#f1f5fa;--t-tint:#dbe7f6;--t-card:#fff;--t-panel-rgb:238 242 247;--t-card-rgb:255 255 255;--t-accent-hi:#ffc061;--t-accent:#ee8f22;--t-accent-dk:#c46f14;--t-go-hi:#8bd677;--t-go:#3e9e45;--t-go-dk:#2e8a3a;--t-link:#245fb0;--t-link-2:#1e4e92;--t-accent-text:#c46f14;--t-go-text:#2e8a3a;--t-pick-hi:#fff7d6;--t-pick:#fdeab0;--t-bar:#2f6bc0;--t-go-tint:#e3f4df;--t-red-tint:#ffe9ec;--t-gold-tint:#fff8dc;--t-deep:#0e2a52;--t-deep-2:#0b2246}
body[data-ui-theme="saga-classic"]{--t-blue:#1e4e92;--t-blue-hi:#3b7bd0;--t-blue-dk:#163d75;--t-blue-dk2:#163d75;--t-panel:#e3eaf3;--t-panel-2:#d3deeb;--t-panel-3:#dae3ee;--t-surface:#eef3f8;--t-tint:#d6e4ff;--t-line-2:#8fa6c4;--t-link:#1e4e92;--t-link-2:#163d75;--t-accent-text:#c46f14;--t-go-text:#2e8a3a;--t-bar:var(--t-blue)}
body[data-ui-theme="original"]{--t-blue:#3a4a5e;--t-ink:#2e4565;--t-muted:#5a6b80;--t-line:#a3acb8;--t-accent:#f08a24;--t-blue-hi:#5a6b80;--t-blue-dk:#2e3a4a;--t-blue-dk2:#2e3a4a;--t-ink-2:#3a4a5e;--t-muted-2:#8c96a3;--t-faint:#a3acb8;--t-line-soft:#bcc3cc;--t-line-2:#8c96a3;--t-panel:#e3e7ec;--t-panel-2:#d3d8df;--t-panel-3:#dadfe5;--t-surface:#eceff2;--t-tint:#d5dbe3;--t-card:#f4f5f7;--t-panel-rgb:227 231 236;--t-card-rgb:244 245 247;--t-accent-hi:#ffb04d;--t-accent-dk:#b8600f;--t-link:#2e4565;--t-link-2:#3a4a5e;--t-accent-text:#b8600f;--t-go-text:#2e8a3a;--t-bar:var(--t-blue)}
body[data-ui-theme="midnight"]{--t-blue:#7a5cff;--t-ink:#eef2ff;--t-muted:#a9c1ec;--t-line:#2c3f6e;--t-card:#1a2a52;--t-blue-hi:#9a82ff;--t-blue-dk:#5638d6;--t-blue-dk2:#5638d6;--t-ink-2:#d6e0f7;--t-muted-2:#8496bf;--t-faint:#6f7fa6;--t-line-soft:#24365f;--t-line-2:#3a5088;--t-panel:#122045;--t-panel-2:#1b2b55;--t-panel-3:#17264c;--t-surface:#1d2e58;--t-tint:#26386a;--t-panel-rgb:18 32 69;--t-card-rgb:26 42 82;--t-accent-hi:#ffd04a;--t-accent:#ff9a1f;--t-accent-dk:#c46a00;--t-link:#b5a6ff;--t-link-2:#c9d6ff;--t-accent-text:#ffc061;--t-go-text:#8bd677;--t-pick-hi:#3b2f6e;--t-pick:#30265c;--t-bar:var(--t-blue);--t-go-tint:#1f3d2a;--t-red-tint:#4a1a26;--t-gold-tint:#4a3a14;--t-deep:var(--t-panel);--t-deep-2:var(--t-panel-3)}
body[data-ui-theme="crimson"]{--t-blue:#d93a6c;--t-ink:#ffeef4;--t-muted:#e8b4c8;--t-line:#5e2347;--t-card:#3d1430;--t-blue-hi:#ff5c8a;--t-blue-dk:#a52352;--t-blue-dk2:#a52352;--t-ink-2:#f6d3e0;--t-muted-2:#c08aa2;--t-faint:#9a6a82;--t-line-soft:#4e1b3b;--t-line-2:#73305a;--t-panel:#2a0b1e;--t-panel-2:#3a1029;--t-panel-3:#331025;--t-surface:#431535;--t-tint:#561d43;--t-panel-rgb:42 11 30;--t-card-rgb:61 20 48;--t-accent-hi:#ffd23f;--t-accent:#f59a12;--t-accent-dk:#b86a00;--t-link:#ff8fb0;--t-link-2:#ffc2d6;--t-accent-text:#ffd23f;--t-go-text:#8bd677;--t-pick-hi:#5c1d40;--t-pick:#4d1736;--t-bar:var(--t-blue);--t-go-tint:#1f3d2a;--t-red-tint:#4a1a26;--t-gold-tint:#4a3a14;--t-deep:var(--t-panel);--t-deep-2:var(--t-panel-3)}
body[data-ui-theme="neon"]{--t-blue:#123a52;--t-ink:#eaf6ff;--t-muted:#8a9bb8;--t-line:#22324a;--t-card:#121b2d;--t-blue-hi:#1b5878;--t-blue-dk:#2de2ff;--t-blue-dk2:#0d2a3c;--t-ink-2:#c9d8ea;--t-muted-2:#7184a3;--t-faint:#5a6b88;--t-line-soft:#1a2740;--t-line-2:#2de2ff66;--t-panel:#070b14;--t-panel-2:#0e1626;--t-panel-3:#0b1220;--t-surface:#141f33;--t-tint:#18304a;--t-panel-rgb:7 11 20;--t-card-rgb:18 27 45;--t-accent-hi:#2de2ff;--t-accent:#0aa6c8;--t-accent-dk:#06708a;--t-go-hi:#9be000;--t-go:#5f9a00;--t-go-dk:#4f7a00;--t-link:#2de2ff;--t-link-2:#9ff3ff;--t-accent-text:#2de2ff;--t-go-text:#d4ff3a;--t-pick-hi:#16333f;--t-pick:#102a35;--t-bar:var(--t-blue);--t-go-tint:#1f3d2a;--t-red-tint:#4a1a26;--t-gold-tint:#4a3a14;--t-deep:var(--t-panel);--t-deep-2:var(--t-panel-3)}
body[data-ui-theme="esports"]{--t-blue:#1d2230;--t-ink:#f2f4f8;--t-muted:#9aa3b5;--t-line:#262d3d;--t-card:#151a26;--t-blue-hi:#2a3142;--t-blue-dk:#ff4d7a;--t-blue-dk2:#11151f;--t-ink-2:#d3d8e2;--t-muted-2:#7d869a;--t-faint:#5f6779;--t-line-soft:#1f2534;--t-line-2:#343c50;--t-panel:#07090f;--t-panel-2:#0f131c;--t-panel-3:#0c0f17;--t-surface:#181d2a;--t-tint:#232a3b;--t-panel-rgb:7 9 15;--t-card-rgb:21 26 38;--t-accent-hi:#ff7a3d;--t-accent:#ff4d7a;--t-accent-dk:#c22a55;--t-link:#ff7a9b;--t-link-2:#ffb3c6;--t-accent-text:#ff9a5c;--t-go-text:#8bd677;--t-pick-hi:#3a1a26;--t-pick:#2e1520;--t-bar:var(--t-blue);--t-go-tint:#1f3d2a;--t-red-tint:#4a1a26;--t-gold-tint:#4a3a14;--t-deep:var(--t-panel);--t-deep-2:var(--t-panel-3)}
body[data-ui-theme="saga"]{--t-blue:#7a3f12;--t-ink:#fff3e0;--t-muted:#d9b98f;--t-line:#5a3a1c;--t-card:#3a2412;--t-blue-hi:#9a5520;--t-blue-dk:#5a2d0a;--t-blue-dk2:#5a2d0a;--t-ink-2:#f1dcbc;--t-muted-2:#b8966c;--t-faint:#8f7352;--t-line-soft:#4a2f16;--t-line-2:#6e4a24;--t-panel:#2b1a0c;--t-panel-2:#352010;--t-panel-3:#301d0e;--t-surface:#402814;--t-tint:#4d3119;--t-panel-rgb:43 26 12;--t-card-rgb:58 36 18;--t-accent-hi:#ffc061;--t-accent:#ff8f1f;--t-accent-dk:#b85f00;--t-link:#ffb46b;--t-link-2:#ffd7a8;--t-accent-text:#ffc061;--t-go-text:#a9e08a;--t-pick-hi:#5a3816;--t-pick:#4a2e12;--t-bar:var(--t-blue);--t-go-tint:#1f3d2a;--t-red-tint:#4a1a26;--t-gold-tint:#4a3a14;--t-deep:var(--t-panel);--t-deep-2:var(--t-panel-3)}
body[data-ui-theme]:not([data-ui-theme="solid"]):not([data-ui-theme="saga-classic"]):not([data-ui-theme="original"]){color-scheme:dark}
/* My Items (crates/web/src/inventory_view.rs), the Lost Arena "My Items v2"
   design: an 844x390 layout (tab rail 12,10 72x370; item panel 92,10
   416x370; hero stage 516,10 316x370) scaled to the viewport
   (--inv-scale, inventory_view.rs `scale`). */
.inventory-dialog{--ink:var(--t-ink);--ink-2:var(--t-ink-2);--muted:var(--t-muted);--faint:var(--t-faint);--line:var(--t-line);--panel:var(--t-panel);--blue:linear-gradient(var(--t-blue-hi),var(--t-blue));--blue-line:var(--t-blue-dk);--green:linear-gradient(var(--t-go-hi),var(--t-go));--green-line:var(--t-go-dk);--gray:linear-gradient(var(--t-line-soft),var(--t-faint));--gray-line:var(--t-muted-2);--orange:linear-gradient(var(--t-accent-hi),var(--t-accent));--orange-line:var(--t-accent-dk);--display:"Lilita One","Arial Black",Impact,sans-serif;--body:Nunito,"Segoe UI",system-ui,sans-serif;position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);color-scheme:light;font:800 11px/1.25 var(--body);overflow:hidden;-webkit-tap-highlight-color:transparent}
.inventory-dialog::backdrop{background:#0b1e3d80;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
.inventory-window{position:absolute;left:50%;top:50%;width:844px;height:390px;transform:translate(calc(-50% + var(--safe-dx,0px)),calc(-50% + var(--safe-dy,0px))) scale(var(--inv-scale,1));transform-origin:center;isolation:isolate}
.inventory-dialog :where(button,input,a){font:inherit;color:inherit;touch-action:manipulation}
.inventory-dialog :where(button){margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-user-select:none;user-select:none}
.inventory-dialog button:disabled{cursor:default}
.inventory-dialog .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.inventory-dialog [hidden]{display:none!important}
.inventory-dialog .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.inventory-icon{display:inline-block;flex:none;background:center/contain no-repeat}
.inventory-icon[data-art="none"]{opacity:0}
/* Panels. */
.inv-rail,.inv-main{position:absolute;top:10px;height:370px;background:var(--panel);border:1.5px solid var(--t-line-2);border-radius:16px;box-shadow:0 6px 16px #12305e59;box-sizing:border-box}
.inv-rail{left:12px;width:72px;padding:5px;display:flex;flex-direction:column;justify-content:space-between}
.inv-main{left:92px;width:416px;display:flex;flex-direction:column;overflow:hidden}
.inv-side{position:absolute;left:516px;top:10px;width:316px;height:370px;border-radius:16px;overflow:hidden;border:1.5px solid #9fc0ea;box-sizing:border-box;background:radial-gradient(70% 55% at 45% 45%,#7fb6f0aa,transparent 70%),linear-gradient(#5b9be3,var(--t-blue-dk2));box-shadow:0 6px 16px #12305e59}
/* The rail's tabs. */
.inv-rail-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:42px;border:1px solid var(--line)!important;border-radius:10px;background:linear-gradient(var(--t-card),var(--t-panel))!important;color:var(--ink-2)!important;font:8.5px/1 var(--display)!important;text-transform:uppercase;letter-spacing:.2px}
.inv-rail-tab .ui-i{font-size:15px;color:var(--t-link);stroke-width:2.2}
.inv-rail-tab[aria-pressed="true"]{background:var(--blue)!important;border-color:var(--blue-line)!important;color:#fff!important;box-shadow:0 2px 0 var(--blue-line)}
.inv-rail-tab[aria-pressed="true"] .ui-i{color:#fff}
.inv-rail-tab[data-soon]{background:var(--t-panel-3)!important;border-color:var(--t-line-soft)!important;color:var(--faint)!important}
.inv-rail-tab[data-soon] .ui-i{color:var(--faint)}
.inv-rail-tab[data-soon][aria-pressed="true"]{background:linear-gradient(#9aa8bb,#76859b)!important;border-color:#66748a!important;color:#fff!important;box-shadow:0 2px 0 #66748a}
.inv-rail-tab[data-soon][aria-pressed="true"] .ui-i{color:#fff}
.inv-rail-tab span{max-width:60px;overflow:hidden;white-space:nowrap}
.inv-soon{position:absolute;right:2px;top:-4px;padding:2px 4px 1px;border:1px solid #fff;border-radius:999px;background:linear-gradient(#ffd27a,var(--t-accent));color:#fff;font:6.5px/1 var(--display);font-style:normal;letter-spacing:.3px;text-shadow:0 1px 0 var(--t-accent-dk);text-transform:uppercase}
/* The item panel's title bar. */
.inv-head{flex:none;display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 12px;background:var(--blue);border-bottom:1.5px solid var(--blue-line);box-sizing:border-box;color:#fff}
.inv-head-text{flex:1;min-width:0}
.inv-head h2{margin:0;font:17px/1 var(--display);text-transform:uppercase;letter-spacing:.3px;text-shadow:0 1.5px 0 var(--blue-line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-subtitle{margin:2px 0 0;font:800 9px/1.1 var(--body);color:#fff;opacity:.92}
#inventory-back:empty{display:none}
#inventory-back{display:flex}
.inv-back{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#12305e4d!important;font-size:15px}
.inv-chips{display:flex;gap:6px;align-items:center}
.inv-chip{display:flex;align-items:center;gap:3px;height:24px;padding:0 9px 0 3px;border-radius:999px;background:#12305e4d!important;color:#fff;font:900 10px/1 var(--body);white-space:nowrap}
.inv-chip.plain{padding:0 10px}
.inv-chip.plain .ui-i{font-size:12px;margin-right:2px}
.inv-chip-icon{width:20px;height:20px}
.inv-chip.soon{padding:0 12px;height:22px;border:1px solid #fff;background:linear-gradient(#ffd27a,var(--t-accent))!important;font:10px/1 var(--display);letter-spacing:.4px;text-transform:uppercase;text-shadow:0 1px 0 var(--t-accent-dk)}
.inv-chip.loading .ui-i{animation:inv-spin 1.4s linear infinite}
@keyframes inv-spin{to{transform:rotate(360deg)}}
.inv-body{position:relative;flex:1;display:flex;flex-direction:column;gap:8px;padding:10px;min-height:0}
/* Filter chips. */
.inv-filters{flex:none;display:flex;gap:4px;align-items:center;height:24px;min-width:0}
.inv-filter{display:flex;align-items:center;gap:3px;height:24px;padding:0 8px!important;border:1px solid var(--line)!important;border-radius:999px;background:var(--t-card)!important;color:var(--ink-2);font:900 10px/1 var(--body);white-space:nowrap}
.inv-filter b{color:var(--ink-2);font-weight:900}
.inv-filter[aria-pressed="true"]{background:var(--blue)!important;border-color:var(--blue-line)!important;color:#fff}
.inv-filter[aria-pressed="true"] b{color:#fff}
.inv-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--t-muted-2)}
.inv-dot.premium,.inv-stripe.premium{background:#3aa0ff}.inv-dot.rare,.inv-stripe.rare{background:#b65ce8}.inv-dot.unique,.inv-stripe.unique{background:var(--t-accent)}
.inv-search{position:relative;display:flex;align-items:center;gap:5px;flex:0 0 112px;height:24px;padding:0 8px;border:1.5px solid var(--t-blue);border-radius:999px;background:var(--t-card);box-sizing:border-box;color:var(--muted)}
.inv-search .ui-i{font-size:12px}
.inv-search input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:900 11px/1 var(--body)!important;color:var(--ink)!important}
.inv-search input::-webkit-search-cancel-button{display:none}
.inv-search-clear{display:grid;place-items:center;color:var(--faint);font-size:12px}
.inv-search.wide{flex:1 1 auto;height:28px}
/* Cards. */
.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,116px);gap:8px}
.inventory-pages{position:relative;flex:1;min-height:0}
.inventory-page{height:100%}
.inv-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 7px 7px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(var(--t-card),var(--t-surface));box-sizing:border-box;text-align:center;cursor:pointer}
.inv-card[aria-selected="true"],.inv-card[data-tried]{border:2px solid var(--t-accent);padding:5px 6px 6px;background:linear-gradient(var(--t-pick-hi),var(--t-pick))}
.inv-card[data-empty]{justify-content:center;gap:6px;border-color:var(--t-line-soft);background:var(--t-panel-3);color:var(--faint);cursor:default}
.inv-card[data-empty] .ui-i{font-size:34px;stroke-width:1.4}
.inv-card[data-empty] b{font:900 12px/1 var(--body)}
.inv-stripe{position:absolute;left:12px;top:0;width:28px;height:3px;border-radius:0 0 3px 3px;background:var(--t-muted-2)}
.inv-card[aria-selected="true"] .inv-stripe,.inv-card[data-tried] .inv-stripe{left:11px;top:-1px}
.inv-card-art{display:flex;justify-content:center;align-items:center;width:100%;height:47px;flex:none}
.inv-card-art.big{height:50px}
.inv-card-icon{width:50px;height:50px}
.inv-card-art.big .inv-card-icon{width:52px;height:52px}
.inv-card-art.set .inv-card-icon{width:40px;height:40px;margin:0 -6px}
.inv-card-name{display:block;width:100%;font:900 12px/16px var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-card-line{display:block;width:100%;font:800 9px/12px var(--body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-card-line.worn{color:var(--t-go-text)}
.inv-card-line.left{color:var(--t-accent-text);font-weight:900;font-size:10px}
.inv-card .inv-btn{margin-top:auto;width:100%;height:22px;font-size:10px}
.inv-tag{position:absolute;right:-1px;top:-1px;padding:3px 6px 2px;border-radius:0 10px 0 7px;background:var(--t-accent);color:#fff;font:7px/1 var(--display);font-style:normal;letter-spacing:.4px;text-transform:uppercase}
.inv-count{position:absolute;right:8px;top:8px;padding:3px 6px;border-radius:999px;background:var(--t-ink);color:#fff;font:900 9px/1 var(--body);font-style:normal}
.inv-check{position:absolute;right:7px;top:7px;display:grid;place-items:center;width:18px;height:18px;border:1.5px solid #fff;border-radius:50%;background:var(--t-blue);color:#fff;font-size:11px;font-style:normal;box-shadow:0 1px 3px #12305e55}
.inv-check.orange{background:var(--t-accent)}
.inv-card .inv-check .ui-i{stroke-width:3}
.inv-kicker{font:900 8px/1 var(--body);color:var(--muted);letter-spacing:.6px;text-transform:uppercase;margin-top:2px}
.inv-deco-card{justify-content:flex-start;cursor:default}
.inv-deco-art{display:grid;place-items:center;width:46px;height:46px;margin-top:2px;border:2.5px solid var(--t-blue);border-radius:50%;background:var(--t-card);overflow:hidden;box-sizing:border-box;flex:none}
.inv-deco-art .inv-card-icon{width:40px;height:40px}
.inv-deco-art.glyph{background:linear-gradient(#5b9be3,var(--t-blue));color:#fff;font-size:21px}
.inv-deco-art.portrait{background:var(--t-tint) center/cover no-repeat;border-color:var(--t-ink)}
.inv-equipped{display:flex;align-items:center;gap:4px;margin-top:auto;padding:2px 10px;border:1px solid #9fd39a;border-radius:999px;background:var(--t-go-tint);color:var(--t-go-text);font:900 9.5px/14px var(--body)}
.inv-equipped .ui-i{font-size:10px;stroke-width:3}
.inv-deco-card.owned .inv-btn{margin-top:auto;height:22px;padding:0 10px!important;font-size:10px!important}
/* Hero cards. */
.inventory-heroes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:100%}
.inventory-hero{padding:6px 6px 6px;gap:0;justify-content:flex-start}
.inventory-hero[aria-selected="true"]{border:2px solid var(--t-blue);background:linear-gradient(var(--t-tint),var(--t-tint));padding:5px}
.inventory-hero .inv-check{right:6px;top:6px}
.inventory-hero-portrait{display:block;width:46px;height:46px;flex:none;border-radius:50%;background:var(--t-tint) center/cover no-repeat;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--t-line)}
.inventory-hero-name{margin-top:4px;font:15px/18px var(--display);color:var(--blue-line);max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;letter-spacing:.3px}
.inventory-hero-period{font:800 9px/12px var(--body);color:var(--muted)}
.inventory-strips{width:100%;margin:5px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px}
.inventory-strips li{display:flex;align-items:center;gap:5px;height:20px;padding:0 5px;border-radius:6px;background:var(--t-card);font:900 9.5px/1 var(--body);color:var(--ink);white-space:nowrap;overflow:hidden}
.inventory-hero[aria-selected="true"] .inventory-strips li{background:rgb(var(--t-card-rgb)/.8)}
.inventory-growth-icon{width:17px;height:17px}
.inventory-strips span{overflow:hidden;text-overflow:ellipsis}
.inv-growth{margin-top:auto;width:100%;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;border:1px solid var(--t-line-soft);border-radius:9px;background:var(--t-panel-3);box-sizing:border-box;color:var(--faint);font:10px/1 var(--display);text-transform:uppercase;letter-spacing:.4px}
.inv-growth span{display:flex;align-items:center;gap:4px}
.inv-growth em{padding:2px 8px;border-radius:999px;background:linear-gradient(#ffd27a,var(--t-accent));color:#fff;font:7px/1.2 var(--display);font-style:normal;letter-spacing:.4px;text-shadow:0 1px 0 var(--t-accent-dk)}
/* Footer. */
.inv-foot{flex:none;display:flex;align-items:center;gap:6px;height:30px}
.inv-spacer{flex:1}
.inv-pager{display:flex;align-items:center;gap:6px}
.inv-page-btn{display:grid;place-items:center;width:34px;height:30px;border:1px solid var(--line)!important;border-radius:9px;background:linear-gradient(var(--t-card),var(--t-panel))!important;color:var(--muted);font-size:14px;box-shadow:0 2px 0 var(--line)}
.inv-page-btn.next{background:var(--blue)!important;border-color:var(--blue-line)!important;color:#fff;box-shadow:0 2px 0 var(--blue-line)}
.inv-page-btn:disabled{opacity:.45;box-shadow:none}
.inv-page-no{display:grid;place-items:center;min-width:44px;height:30px;padding:0 8px;border-radius:9px;background:var(--t-panel-2);font:900 11px/1 var(--body);color:var(--ink);box-sizing:border-box}
.inv-hint{display:flex;align-items:center;gap:5px;margin:0 0 0 auto;color:var(--muted);font:800 9.5px/1.2 var(--body)}
.inv-hint .ui-i{font-size:12px}
.inv-foot>.inv-hint:first-child{margin-left:0;flex:1}
.inventory-sets-count{margin:0 0 0 auto;color:var(--muted);font:800 9.5px/1 var(--body)}
/* Buttons. */
.inv-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:30px;padding:0 12px!important;border:1.25px solid var(--blue-line)!important;border-radius:9px;background:var(--blue)!important;color:#fff!important;font:12px/1 var(--display)!important;letter-spacing:.4px;text-transform:uppercase;text-shadow:0 1px 0 #0003;box-shadow:0 2px 0 var(--blue-line),inset 0 -2px 0 #00000026,inset 0 1px 0 #ffffff59;white-space:nowrap;text-decoration:none;box-sizing:border-box}
.inv-btn .ui-i{font-size:13px;stroke-width:2.8}
.inv-btn.green{background:var(--green)!important;border-color:var(--green-line)!important;box-shadow:0 2px 0 var(--green-line),inset 0 -2px 0 #00000026,inset 0 1px 0 #ffffff59}
.inv-btn.gray{background:var(--gray)!important;border-color:var(--gray-line)!important;box-shadow:0 2px 0 var(--gray-line),inset 0 -2px 0 #00000026,inset 0 1px 0 #ffffff59}
.inv-btn.orange{background:var(--orange)!important;border-color:var(--orange-line)!important;box-shadow:0 2px 0 var(--orange-line),inset 0 -2px 0 #00000026,inset 0 1px 0 #ffffff80}
.inv-btn.discord{background:linear-gradient(#7c87f5,#4f5ce0)!important;border-color:#3b45b8!important;box-shadow:0 3px 0 #3b45b8,inset 0 1px 0 #ffffff59}
.inv-btn:active:not(:disabled){transform:translateY(1px);box-shadow:0 1px 0 #0003}
.inv-btn:disabled{filter:grayscale(.75) brightness(1.05);opacity:.6}
.inv-btn.big{height:34px;padding:0 10px 0 6px!important;font-size:14px!important}
.inv-btn.huge{height:42px;font-size:17px!important;border-radius:12px}
.inv-btn-icon{width:24px;height:24px}
.inv-btn.huge .inv-btn-icon{width:30px;height:30px}
.inv-btn-count{padding:2px 6px;border-radius:999px;background:var(--t-card);color:var(--t-accent-text);font:900 10px/1 var(--body);font-style:normal;text-shadow:none;letter-spacing:0;text-transform:none}
.inv-link{display:block;margin:6px auto 0;color:var(--t-link)!important;font:900 11px/1 var(--body)!important}
/* Loading and errors. */
.inv-skeleton{display:block;background:var(--t-panel-3);border-radius:999px}
.inv-skeleton.chip{width:48px;height:24px}
.inv-skeleton.chip:nth-child(2n){width:62px}
.inv-skeleton-card{cursor:default;justify-content:center;gap:8px;background:var(--t-surface);border-color:var(--t-panel-3)}
.inv-skeleton.dot{width:40px;height:40px;border-radius:50%}
.inv-skeleton.line{width:80px;height:9px}
.inv-skeleton.line.short{width:56px;height:7px}
.inv-banner{flex:none;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border:1px solid #f0b8bf;border-radius:12px;background:var(--t-red-tint);color:#a0283a}
.inv-banner>.ui-i{font-size:18px}
.inv-banner-text{flex:1;display:flex;flex-direction:column;gap:2px}
.inv-banner-text b{font:900 11px/1.2 var(--body)}
.inv-banner-text span{font:800 9px/1.2 var(--body);color:#b85662}
.inventory-status{position:absolute;left:50%;bottom:48px;z-index:4;max-width:360px;margin:0;padding:6px 12px;transform:translateX(-50%);border-radius:999px;background:var(--t-ink);color:#fff;font:900 10px/1.2 var(--body);text-align:center;box-shadow:0 3px 10px #12305e55;pointer-events:none}
@supports (color:color-mix(in srgb,red 50%,blue)){.inventory-status{background:color-mix(in srgb,var(--t-ink) 90%,transparent)}}
.inventory-empty{margin:40px 0;text-align:center;color:var(--muted);font:800 11px/1.4 var(--body)}
.inv-empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);text-align:center;font:800 10px/1.4 var(--body)}
.inv-empty-state>.ui-i{font-size:34px;color:#9fb4d0;stroke-width:1.6}
.inv-empty-state b{font:16px/1 var(--display);color:var(--ink);letter-spacing:.3px}
.inv-empty-state .inv-btn{margin-top:6px}
/* The "coming soon" pages. */
.inv-soon-page{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 22px}
.inv-soon-art{position:relative;width:120px;height:92px;margin-bottom:12px}
.inv-soon-lock{position:absolute;left:36px;top:22px;display:grid;place-items:center;width:48px;height:48px;border:3px solid #fff;border-radius:50%;background:var(--t-muted-2);color:#fff;font-size:20px;box-shadow:0 4px 12px #12305e40}
.inv-soon-gear{position:absolute;width:34px;height:34px;opacity:.75}
.inv-soon-gear.g0{left:0;top:22px}.inv-soon-gear.g1{left:20px;top:58px}.inv-soon-gear.g2{left:66px;top:0}.inv-soon-gear.g3{left:76px;top:46px}
.inv-soon-page h3{margin:0 0 6px;font:18px/1 var(--display);color:var(--ink);letter-spacing:.3px}
.inv-soon-page p{margin:0 0 14px;max-width:290px;color:var(--muted);font:800 10.5px/1.45 var(--body)}
.inv-soon-actions{display:flex;gap:6px}
/* The decoration package panel (the item panel widened over the rail). */
.inventory-dialog[data-package] .inv-main{left:12px;width:496px;z-index:2}
.inventory-dialog[data-package] .inv-rail{visibility:hidden}
.inventory-dialog[data-package] .inv-head{height:44px;background:linear-gradient(var(--t-accent-hi),var(--t-accent));border-bottom-color:var(--orange-line)}
.inventory-dialog[data-package] .inv-head h2{font-size:14px;text-shadow:0 1.5px 0 var(--orange-line)}
.inv-head-icon{width:30px;height:30px}
.inv-package{display:flex;flex-direction:column;gap:6px;height:100%}
.inv-row-line{position:relative;display:flex;align-items:center;gap:8px;height:31px}
.inv-row-line.open{z-index:3}
.inv-row-label{flex:0 0 92px;font:10.5px/1 var(--display);color:var(--ink-2);letter-spacing:.4px;text-transform:uppercase}
.inv-row-field{position:relative;flex:1;min-width:0}
.inventory-row{display:flex;align-items:center;gap:8px;width:100%;height:31px;padding:0 10px 0 3px!important;border:1px solid var(--line)!important;border-radius:9px;background:var(--t-card)!important;color:var(--ink)!important;font:900 11.5px/1 var(--body)!important;box-sizing:border-box}
.inventory-row[aria-expanded="true"]{border:1.5px solid var(--t-blue)!important}
.inventory-row.hero{background:var(--blue)!important;border-color:var(--blue-line)!important;color:#fff!important}
.inventory-row .inv-row-text{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inventory-row>.ui-i{font-size:13px;color:var(--muted)}
.inventory-row.hero>.ui-i{color:#fff}
.inv-row-glyph{display:grid;place-items:center;width:24px;height:24px;flex:none;border:1.5px solid var(--t-blue);border-radius:50%;background:linear-gradient(var(--t-tint),var(--t-tint));color:var(--t-link);font-size:12px;font-style:normal;overflow:hidden;box-sizing:border-box}
.inv-row-icon{width:22px;height:22px}
.inv-row-portrait{display:block;width:24px;height:24px;flex:none;border-radius:50%;background:var(--t-tint) center/cover no-repeat;box-shadow:0 0 0 1.5px #fff}
.inv-new{padding:2px 6px;border-radius:999px;background:var(--t-accent);color:#fff;font:7.5px/1.1 var(--display);font-style:normal;letter-spacing:.4px;text-transform:uppercase}
.inventory-pulldown{position:absolute;left:0;right:0;top:34px;max-height:126px;padding:4px;border:1.5px solid var(--t-blue);border-radius:10px;background:var(--t-card);box-shadow:0 8px 20px #12305e40;overflow:hidden auto;overscroll-behavior:contain}
.inventory-pulldown ul{margin:0;padding:0;list-style:none}
/* The package panel's lower rows (Face, Skin color, Underwear) open their
   list upward: downward it ran past the window's bottom edge, which clipped
   the last entries (Zombie Skin, Blue Floral Swimsuit) out of reach. */
.inv-package>.inv-row-line:nth-child(n+5) .inventory-pulldown{top:auto;bottom:34px;box-shadow:0 -8px 20px #12305e40}
.inventory-pulldown button{display:flex;align-items:center;gap:7px;width:100%;height:26px;padding:0 8px 0 4px!important;border-radius:7px;color:var(--ink);font:900 11px/1 var(--body);text-align:left}
.inventory-pulldown button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inventory-pulldown button:hover{background:var(--t-panel)}
.inventory-pulldown button[aria-selected="true"]{background:var(--blue);color:#fff}
.inventory-pulldown button>.ui-i{margin-left:auto;font-size:12px;stroke-width:3}
.inventory-pulldown .inv-row-glyph{width:20px;height:20px;border:0;background:none;font-size:12px;color:inherit}
.inventory-pulldown .inv-row-portrait{width:20px;height:20px}
.inv-owned{color:var(--t-go-text);font:900 9px/1 var(--body);font-style:normal}
.inventory-pulldown button[aria-selected="true"] .inv-owned{color:var(--t-go-tint)}
.inv-more{position:sticky;bottom:-4px;display:flex;justify-content:center;color:var(--faint);font-size:11px;background:linear-gradient(#fff0,var(--t-card) 60%)}
.inv-more:empty{display:none}
.inv-uses{flex:1;display:flex;align-items:center;gap:6px;margin:0;color:var(--muted);font:900 10px/1 var(--body)}
.inv-uses-icon{width:22px;height:22px}
/* The hero stage. */
.inventory-preview{position:absolute;left:0;top:0;width:300px;height:370px;z-index:0}
.inv-platform{position:absolute;left:60px;top:288px;width:180px;height:40px;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--t-card-rgb)/.7),#bfd8f566 55%,#fff0);pointer-events:none}
.inv-platform::after{content:"";position:absolute;left:20px;top:8px;width:140px;height:24px;border:1.5px solid #ffffff80;border-radius:50%;box-sizing:border-box}
.inventory-preview .hero-preview-canvas{z-index:1}
.inventory-preview .hero-preview-caption{left:20px;right:20px;top:170px;bottom:auto;z-index:2;color:#fff;font:900 11px/1.35 var(--body);text-shadow:0 1px 2px #12305e}
.inventory-preview[data-preview-state="loading"]::after{content:"Loading hero…";position:absolute;left:0;right:0;top:206px;z-index:2;text-align:center;color:#fff;font:900 11px/1 var(--body);text-shadow:0 1px 2px #12305e}
.inventory-preview .hero-preview-spinner{z-index:2;top:174px;width:34px;height:34px;margin:-17px 0 0 -17px;border:4px solid #ffffff40;border-top-color:#fff}
.inv-side-top{position:absolute;left:10px;right:10px;top:10px;z-index:3;display:flex;gap:6px;align-items:center}
.inv-side-head{flex:1;min-width:0;display:flex}
.inv-hero-head{display:flex;align-items:center;gap:6px;width:100%;height:32px;padding:0 10px 0 3px!important;border:1px solid #ffffff4d!important;border-radius:10px;background:#12305e8c!important;color:#fff;box-sizing:border-box;text-align:left}
.inv-hero-head>.ui-i{font-size:16px}
.inv-avatar{display:block;width:26px;height:26px;flex:none;border-radius:50%;background:var(--t-tint) center/cover no-repeat}
.inv-avatar.big{width:36px;height:36px;box-shadow:0 0 0 2px #fff}
.inv-hero-head-text{flex:1;min-width:0;display:flex;flex-direction:column}
.inv-hero-head-text small{font:900 7.5px/10px var(--body);color:#dbe7f6;letter-spacing:.5px;text-transform:uppercase}
.inv-hero-head-text b{font:13px/15px var(--display);letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-close{display:grid;place-items:center;width:32px;height:32px;flex:none;border:1.25px solid #b83232!important;border-radius:10px;background:linear-gradient(#ff8a8a,#e04848)!important;color:#fff;font-size:18px;box-shadow:0 2px 0 #b83232,inset 0 1px 0 #ffffff59}
.inv-close .ui-i{stroke-width:3}
.inv-close.small{width:28px;height:28px;font-size:15px}
.inv-kicker-chip{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid #ffffff4d;border-radius:10px;background:#12305e8c;color:#fff;font:11px/1 var(--display);letter-spacing:.6px;text-transform:uppercase}
.inv-kicker-chip .ui-i{font-size:13px;color:#ffd27a}
.inventory-detail{position:absolute;inset:0;z-index:2;pointer-events:none}
.inventory-detail :is(button,[role="button"],a,[data-inventory-action]){pointer-events:auto}
.inv-badges{position:absolute;left:10px;top:80px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.inv-pill{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 8px;border-radius:999px;background:#12305e8c;color:#fff;font:900 9px/1 var(--body);white-space:nowrap}
.inv-pill .ui-i{font-size:10px}
.inv-pill.gold{color:#ffd27a}
.inv-pill.orange{height:22px;padding:0 10px;border:1px solid #fff;background:var(--t-accent);font-size:10px}
.inv-pill.dark{height:22px;padding:0 10px;background:#12305eb3}
.inv-pill.light{height:20px;padding:0 10px;background:var(--t-tint);color:var(--t-link);font-size:10px}
.inv-trying{position:absolute;left:10px;top:50px;display:inline-flex;align-items:center;gap:4px;max-width:230px;height:18px;padding:0 8px;border:1px solid #fff;border-radius:999px;background:var(--t-accent);color:#fff;font:900 9px/1 var(--body);white-space:nowrap;box-sizing:border-box}
.inv-trying span{overflow:hidden;text-overflow:ellipsis}
.inv-trying .ui-i{font-size:10px}
.inv-slots{position:absolute;left:252px;top:96px;display:flex;flex-direction:column;gap:8px}
.inventory-gear-slot{display:flex;flex-direction:column;align-items:center;gap:1px;width:54px;height:56px;padding:4px 0;border:1px solid var(--line);border-radius:10px;background:rgb(var(--t-card-rgb)/.9);box-sizing:border-box;box-shadow:0 2px 4px #12305e40;font:900 8px/11px var(--body);color:var(--muted);text-transform:uppercase}
.inventory-gear-slot[data-changed]{border:2px solid var(--t-accent);padding:3px 0;background:linear-gradient(var(--t-pick-hi),var(--t-pick));color:var(--t-accent-text)}
.inventory-gear-slot[data-inventory-action]{cursor:pointer}
.inv-slot-icon{width:36px;height:36px}
.inv-slot-none{display:grid;place-items:center;width:36px;height:36px;color:#c5d1e0;font-size:24px;font-style:normal}
.inv-slot-none .ui-i{stroke-width:1.6}
.inventory-turn{position:absolute;left:104px;top:330px;z-index:3;display:flex;gap:8px}
.inventory-turn button{display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff80!important;border-radius:50%;background:#12305eb3!important;color:#fff;font-size:14px;touch-action:none}
.inventory-turn button:active{background:var(--t-blue)!important}
.inventory-dialog:is([data-stage="item"],[data-page="sets"]) .inventory-turn,.inventory-preview[hidden]~.inventory-turn,.inventory-dialog[data-guest] .inventory-turn{display:none}
.inventory-side-actions{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;display:flex}
.inventory-side-actions .inv-btn{flex:1}
/* A Special item's detail on the stage. */
.inv-item-side{position:absolute;left:10px;right:10px;top:60px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff}
.inv-medal{position:relative;display:grid;place-items:center;width:116px;height:116px;margin:14px 0 18px;border:4px solid #ffd27a;border-radius:50%;background:radial-gradient(var(--t-card),var(--t-tint));box-shadow:0 0 0 12px #ffffff1f,0 0 0 13px #ffffff33,0 8px 22px #12305e66;color:#9fb4d0;font-size:46px}
.inv-medal-icon{width:84px;height:84px}
.inv-medal em{position:absolute;right:-12px;top:-2px;padding:5px 9px;border:2px solid #fff;border-radius:999px;background:var(--t-ink);color:#fff;font:900 11px/1 var(--body);font-style:normal}
.inv-item-side h3{margin:0 0 6px;font:22px/1 var(--display);letter-spacing:.4px;text-shadow:0 2px 0 var(--t-blue-dk2)}
.inv-item-side p{margin:0 0 10px;max-width:260px;font:800 10px/1.45 var(--body);color:#dbe7f6}
.inv-tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
/* The hero picker (over the item panel's right part and the stage). */
.inv-picker{position:absolute;left:292px;top:10px;width:540px;height:370px;z-index:6;display:flex;flex-direction:column;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--panel);box-shadow:-10px 0 30px #12305e66;overflow:hidden;box-sizing:border-box}
.inv-picker-top{flex:none}
.inv-picker-head{display:flex;align-items:center;gap:8px;height:46px;padding:0 6px 0 8px;background:var(--blue);border-bottom:1.5px solid var(--blue-line);color:#fff}
.inv-picker-title{flex:1;display:flex;align-items:center;gap:8px;text-align:left;color:#fff}
.inv-picker-title .inv-hero-head-text{flex:none}
.inv-picker-title .inv-hero-head-text b{font-size:15px;line-height:17px}
.inv-picker-title>.ui-i{font-size:14px}
.inv-picker-filters{display:flex;gap:5px;align-items:center;padding:8px 10px 0}
.inv-picker-filters .inv-filter{height:28px;padding:0 9px!important}
.inv-picker-body{flex:1;min-height:0;padding:8px 10px 0}
.inv-pick-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(3,71px);gap:6px}
.inv-pick-card{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:4px 3px 6px!important;border:1px solid var(--line)!important;border-radius:10px;background:linear-gradient(var(--t-card),var(--t-surface))!important;box-sizing:border-box;min-width:0}
.inv-pick-card[aria-pressed="true"]{border:2px solid var(--t-blue)!important;background:linear-gradient(var(--t-tint),var(--t-tint))!important}
.inv-pick-portrait{display:block;width:44px;height:44px;border-radius:50%;background:var(--t-tint) center/cover no-repeat}
.inv-pick-card b{max-width:100%;font:900 9.5px/1.1 var(--body);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-dressed{display:grid;place-items:center;width:15px;height:15px;border:1.5px solid #fff;border-radius:50%;background:var(--t-accent);color:#fff;font-size:8px;font-style:normal;box-sizing:content-box}
.inv-pick-card .inv-dressed{position:absolute;left:5px;top:5px}
.inv-pick-card .inv-check{right:5px;top:5px;width:15px;height:15px;font-size:9px}
.inv-picker-foot{flex:none;display:flex;align-items:center;gap:8px;height:48px;padding:0 10px}
.inv-picker-foot .inv-hint{margin:0 0 0 6px}
.inv-picker-foot .inv-btn{height:34px;min-width:120px;font-size:14px!important}
/* Prompts and reveals over the whole window. */
.inv-layer{position:absolute;inset:-200px;z-index:8;display:grid;place-items:center;padding:200px;background:#0b1e3d99;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.inv-modal{position:relative;width:360px;border:2.5px solid #ffd27a;border-radius:18px;background:var(--t-panel);box-shadow:0 18px 40px #0b1e3d99;overflow:hidden;color:var(--ink)}
.inv-modal-bar{display:flex;align-items:center;justify-content:center;gap:8px;height:42px;background:var(--orange);border-bottom:2px solid var(--orange-line)}
.inv-modal-bar h3{margin:0;font:17px/1 var(--display);color:#fff;letter-spacing:.6px;text-transform:uppercase;text-shadow:0 2px 0 var(--orange-line)}
.inv-bar-icon{width:30px;height:30px}
.inv-modal-body{padding:12px 16px 14px;text-align:center}
.inv-modal-body h3{margin:4px 0 6px;font:17px/1 var(--display);letter-spacing:.3px}
.inv-modal-body h4{margin:8px 0 2px;font:16px/1.1 var(--display);letter-spacing:.3px}
.inv-modal-body p{margin:0 0 10px;color:var(--muted);font:800 10px/1.45 var(--body)}
.inv-modal-actions{display:flex;gap:8px;margin-top:10px}
.inv-modal-actions .inv-btn{flex:1;height:34px;font-size:14px!important}
.inv-modal-actions.center{justify-content:center}
.inv-modal-actions.center .inv-btn{flex:0 0 150px}
.inv-modal.guest{width:340px;border-color:var(--t-line-2)}
.inv-modal-art{position:relative;display:grid;place-items:center;height:96px;background:linear-gradient(var(--t-blue-hi),var(--t-blue))}
.inv-modal-art .inv-close{position:absolute;right:10px;top:9px}
.inv-modal-icon{width:72px;height:72px}
.inv-login-row{display:flex;gap:8px}
.inv-modal.guest .inv-login-row .inv-btn{flex:1 1 0;min-width:0}
.inv-btn.google{background:var(--t-card)!important;border-color:var(--t-line)!important;box-shadow:0 3px 0 var(--t-line),inset 0 1px 0 #ffffff59;color:var(--t-ink)!important;text-shadow:none}
.inv-btn .oauth-g{width:18px;height:18px;flex:none}
.inv-pieces{display:flex;justify-content:center;gap:8px;margin-top:2px}
.inv-piece{display:flex;flex-direction:column;align-items:center;gap:2px;width:72px;padding:6px 0 5px;border:1px solid var(--line);border-radius:10px;background:var(--t-card);font:900 8.5px/1 var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.inv-piece-icon{width:46px;height:46px}
.inv-modal-meta{margin:0 0 8px!important}
.inv-note{display:flex;align-items:center;gap:8px;margin:0!important;padding:7px 10px;border:1px solid #f2d27a;border-radius:10px;background:var(--t-gold-tint);text-align:left;color:#8a5a12!important;font-weight:900!important}
.inv-note-icon{width:26px;height:26px}
.inv-modal.reveal{width:420px}
.inv-modal.reveal .inv-modal-body{background:linear-gradient(#4d8fdc,#1f4f96);color:#fff;padding:10px 14px 14px}
.inv-reveal-mystery{margin:2px 0 8px!important;font:24px/1 var(--display)!important;color:#fff!important;letter-spacing:5px}
.inv-strip{display:flex;align-items:center;justify-content:center;gap:4px;height:120px;border:1px solid #ffffff40;border-radius:14px;background:#12305e40}
.inv-strip-icon{width:58px;height:58px;filter:blur(1.2px);opacity:.55}
.inv-strip-icon:first-child,.inv-strip-icon:last-child{width:46px;height:46px;opacity:.3}
.inv-strip-icon.center{width:90px;height:90px;margin:0 6px;padding:8px;border:3px solid var(--t-accent);border-radius:14px;background:var(--t-pick-hi) content-box;background-clip:padding-box;filter:none;opacity:1;box-shadow:0 0 18px #ffd27a99;background-origin:content-box}
.inv-reveal-note{display:flex;flex-direction:column;align-items:center;gap:1px;margin:10px 0 0!important;color:#fff!important}
.inv-reveal-note .ui-i{display:none}
.inv-reveal-note b{font:14px/1 var(--display);letter-spacing:.3px}
.inv-reveal-note small{font:800 10px/1.4 var(--body);color:#dbe7f6}
.inv-rays{position:relative;display:grid;place-items:center;height:150px;border:1px solid #ffffff40;border-radius:14px;background:repeating-conic-gradient(from 0deg at 50% 50%,#ffffff2e 0 6deg,#ffffff00 6deg 18deg),radial-gradient(circle at 50% 50%,var(--t-gold-tint) 0,#ffd27a33 35%,#3a78c800 70%),#3a78c8;overflow:hidden}
.inv-reveal-medal{display:grid;place-items:center;width:96px;height:96px;border:4px solid var(--t-accent);border-radius:50%;background:radial-gradient(var(--t-card),var(--t-gold-tint));box-shadow:0 0 22px #ffd27a}
.inv-reveal-icon{width:72px;height:72px}
.inv-new-badge{position:absolute;left:calc(50% + 28px);top:24px;z-index:1;padding:4px 9px;border:2px solid #fff;border-radius:999px;background:#e83c6e;color:#fff;font:10px/1 var(--display);font-style:normal;letter-spacing:.5px;text-transform:uppercase}
.inv-rays.set .inv-new-badge{left:50%;top:8px;transform:translateX(-50%)}
.inv-reveal-pieces{display:flex;gap:14px;align-items:center}
.inv-reveal-piece{position:relative;display:grid;place-items:center;width:72px;height:72px;border:4px solid #b65ce8;border-radius:50%;background:radial-gradient(var(--t-card),#f3e8fb)}
.inv-reveal-piece:nth-child(2){width:84px;height:84px}
.inv-reveal-piece.normal{border-color:var(--t-line-2)}.inv-reveal-piece.premium{border-color:#3aa0ff}.inv-reveal-piece.unique{border-color:var(--t-accent)}
.inv-reveal-piece .inv-reveal-icon{width:52px;height:52px}
.inv-reveal-piece small{position:absolute;bottom:-9px;padding:3px 8px;border:1.5px solid #fff;border-radius:999px;background:var(--t-ink);color:#fff;font:7.5px/1 var(--display);letter-spacing:.4px;text-transform:uppercase}
.inv-reveal-name{margin:10px 0 4px!important;font:22px/1 var(--display)!important;color:#fff;text-shadow:0 2px 0 #12305e}
.inv-reveal-meta{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 6px!important;color:#fff!important;font-size:11px!important}
.inv-grade{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 9px;border:1px solid #fff;border-radius:999px;background:var(--t-muted-2);color:#fff;font:10px/1 var(--display);font-style:normal;letter-spacing:.4px;text-transform:uppercase}
.inv-grade.premium{background:#3aa0ff}.inv-grade.rare{background:#b65ce8}.inv-grade.unique{background:var(--t-accent)}
.inv-grade .ui-i{font-size:10px}
.inv-reveal-got{display:flex;align-items:center;justify-content:center;gap:6px;margin:0!important;color:var(--t-go-tint)!important;font-weight:900!important;font-size:11px!important}
.inv-reveal-got .ui-i{font-size:13px}
.inv-modal.reveal .inv-modal-actions .inv-btn{font-size:13px!important}
@media(prefers-reduced-motion:reduce){.inv-chip.loading .ui-i{animation:none}}
/* The lobby in the Lost Arena look (index.html #lobby-screen, the "Lobby ·
   Solid · Coming Soon" design): an 844x352 layout over the taskbar, scaled
   by --la-fit (room_view.rs `fit`): the lobby window (44,6 560x340: title
   bar with the currencies, the mode menu, the actions, six room cards, the
   pager and the chat) and the player panel (612,6 188x340). Modes and
   buttons this game has nothing for yet are greyed with a "Soon" badge. */
:is(#lobby-screen,#landing-lobby){--la-ink:var(--t-ink);--la-muted:var(--t-muted);--la-line:var(--t-line);--la-blue:linear-gradient(var(--t-blue-hi),var(--t-blue));--la-display:"Lilita One","Arial Black",Impact,sans-serif;--la-body:Nunito,"Segoe UI",system-ui,sans-serif}
body[data-screen="lobby"] .app-shell{display:block;width:auto;min-height:0;margin:0;padding:0}
body[data-screen="lobby"] #lobby-screen,body[data-screen="register"] #landing-lobby{position:fixed;left:50%;top:calc((100vh - var(--footer-space,48px)) / 2);zoom:1;width:756px;height:340px;margin:0;padding:0;border:0;outline:0;border-radius:0;background:none;box-shadow:none;transform:translate(-50%,-50%) scale(var(--la-fit,1));transform-origin:center;display:flex;gap:8px;color:var(--la-ink);font:800 11px/1.25 var(--la-body)}
/* dvh sits in @supports, not after the vh value: with var() in it a browser
   without dvh (Chrome before 108) keeps the declaration and drops it only at
   computed-value time, which leaves top:auto and the lobby half off screen. */
@supports (height:100dvh){body[data-screen="lobby"] #lobby-screen,body[data-screen="register"] #landing-lobby{top:calc((100dvh - var(--footer-space,48px)) / 2)}}
:is(#lobby-screen,#landing-lobby) .ui-i,.la-taskbar .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
:is(#lobby-screen,#landing-lobby) .inventory-icon,.la-taskbar .inventory-icon{display:inline-block;flex:none;background:center/contain no-repeat}
:is(#lobby-screen,#landing-lobby) .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:is(#lobby-screen,#landing-lobby) button,.la-taskbar :is(button,a){font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
:is(#lobby-screen,#landing-lobby) [aria-disabled="true"],.la-taskbar [aria-disabled="true"]{cursor:default}
.la-soon{position:absolute;padding:2px 5px 1px;border:1px solid #fff;border-radius:999px;background:linear-gradient(#ffd27a,var(--t-accent));color:#fff;font:7px/1 "Lilita One","Arial Black",sans-serif;font-style:normal;letter-spacing:.3px;text-shadow:0 1px 0 var(--t-accent-dk);text-transform:uppercase;pointer-events:none}
.la-spacer{flex:1}
/* The lobby window. */
.la-window{position:relative;flex:0 0 560px;height:340px;display:flex;flex-direction:column;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--t-panel);box-shadow:0 6px 16px #12305e59;overflow:hidden;box-sizing:border-box}
:is(#lobby-screen,#landing-lobby) .la-title-bar{flex:none;display:flex;align-items:center;gap:8px;height:36px;min-height:0;margin:0;padding:0 8px 0 12px;background:var(--la-blue);border-bottom:1.5px solid var(--t-blue-dk);box-sizing:border-box}
:is(#lobby-screen,#landing-lobby) .la-title-bar :is(h1,h2){margin:0;color:#fff;font:17px/1 var(--la-display);letter-spacing:.3px;text-transform:uppercase;text-shadow:0 1.5px 0 var(--t-blue-dk)}
:is(#lobby-screen,#landing-lobby) .lobby-online{margin:0;padding:0 2px;color:var(--t-go-text);font:900 8.5px/1 var(--la-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
:is(#lobby-screen,#landing-lobby) .la-body{flex:1;display:flex;flex-direction:row;gap:6px;padding:6px;min-height:0}
/* The mode menu. */
:is(#lobby-screen,#landing-lobby) .la-modes{flex:0 0 114px;display:flex;flex-direction:column;gap:4px;margin:0;align-self:stretch}
:is(#lobby-screen,#landing-lobby) .la-modes>button{position:relative;display:flex;align-items:center;gap:5px;flex:1;min-width:0;min-height:0;height:auto;padding:0 6px 0 4px;border:1px solid var(--la-line);border-radius:10px;background:linear-gradient(var(--t-card),var(--t-panel));box-shadow:none;color:var(--la-ink);text-align:left;text-shadow:none;font:inherit}
:is(#lobby-screen,#landing-lobby) .la-modes>button.selected{background:var(--la-blue);border:1.25px solid var(--t-blue-dk);color:#fff;box-shadow:0 2px 0 var(--t-blue-dk)}
:is(#lobby-screen,#landing-lobby) .la-modes>button[data-soon]{background:linear-gradient(var(--t-panel-3),var(--t-panel-3));border-color:var(--t-line-soft);color:var(--t-faint);opacity:1;filter:none}
:is(#lobby-screen,#landing-lobby) .la-modes>button[data-soon] .la-mode-icon{filter:grayscale(1);opacity:.55}
:is(#lobby-screen,#landing-lobby) .la-modes>button>.ui-i{margin-left:auto;font-size:11px;color:var(--t-faint)}
:is(#lobby-screen,#landing-lobby) .la-modes .la-soon{right:6px;top:-5px}
.la-mode-icon{width:30px;height:30px}
.la-mode-text{display:flex;flex-direction:column;min-width:0}
.la-mode-text b{font:12px/1.1 var(--la-display);letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.la-mode-text small{font:800 8.5px/1.2 var(--la-body);opacity:.85;white-space:nowrap}
:is(#lobby-screen,#landing-lobby) .la-modes>button:not([data-soon]):not(.selected):hover{border-color:var(--t-line-2);background:var(--t-card)}
/* The rooms column. */
:is(#lobby-screen,#landing-lobby) .la-rooms{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;order:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit}
:is(#lobby-screen,#landing-lobby) .la-actions{display:flex!important;gap:6px;height:38px;flex:none;width:auto}
:is(#lobby-screen,#landing-lobby) .la-actions .button{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;flex:1;min-width:0!important;min-height:0;height:38px;margin:0;padding:0 10px;border-radius:10px;font:16px/1 var(--la-display);white-space:nowrap;letter-spacing:.4px;text-transform:uppercase;color:#fff;text-shadow:0 1px 0 #0003;box-shadow:inset 0 -2px 0 #00000026,inset 0 1px 0 #ffffff59}
:is(#lobby-screen,#landing-lobby) .la-actions .button .ui-i{font-size:16px;stroke-width:2.8}
:is(#lobby-screen,#landing-lobby) .la-actions .button-quick{flex:1.6;border:1.25px solid var(--t-accent-dk);background:linear-gradient(var(--t-accent-hi),var(--t-accent));box-shadow:0 3px 0 var(--t-accent-dk),inset 0 1px 0 #ffffff80}
:is(#lobby-screen,#landing-lobby) .la-actions .button-create{flex:1.15;font-size:14px;border:1.25px solid var(--t-go-dk);background:linear-gradient(var(--t-go-hi),var(--t-go));box-shadow:0 3px 0 var(--t-go-dk),inset 0 1px 0 #ffffff59}
:is(#lobby-screen,#landing-lobby) .la-actions .button-create::before{content:"";width:16px;height:16px;flex:none;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.22 2.416a2 2 0 0 0-2.511.057l-7 5.999A2 2 0 0 0 3 10v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M16 5h6'/%3E%3Cpath d='M19 2v6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.22 2.416a2 2 0 0 0-2.511.057l-7 5.999A2 2 0 0 0 3 10v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M16 5h6'/%3E%3Cpath d='M19 2v6'/%3E%3C/svg%3E") center/contain no-repeat}
:is(#lobby-screen,#landing-lobby) .la-actions .la-solo{flex:.9;border:1.25px solid var(--t-muted-2);background:linear-gradient(var(--t-line-soft),var(--t-faint));box-shadow:0 3px 0 var(--t-muted-2)}
:is(#lobby-screen,#landing-lobby) .la-actions .la-solo .la-soon{right:-3px;top:-8px}
:is(#lobby-screen,#landing-lobby) .la-actions .button:not([aria-disabled="true"]):active{transform:translateY(1px)}
/* Six room cards, two columns. */
:is(#lobby-screen,#landing-lobby) .room-list{display:grid!important;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);gap:5px;height:124px;min-height:0;margin:0;flex:none}
:is(#lobby-screen,#landing-lobby) .room-row{position:relative;display:block;min-height:0;height:auto;margin:0;padding:4px 50px 4px 46px;border:1px solid var(--la-line);border-radius:10px;background:linear-gradient(var(--t-card),var(--t-surface));box-sizing:border-box;overflow:hidden;color:var(--la-ink)}
:is(#lobby-screen,#landing-lobby) .room-row .room-mode-icon{left:5px;top:50%;width:32px;height:32px;transform:translateY(-50%)}
:is(#lobby-screen,#landing-lobby) .room-info{display:flex;flex-direction:column;justify-content:center;height:100%;gap:2px}
:is(#lobby-screen,#landing-lobby) .room-row strong{display:block;margin:0;padding:0;font:900 12px/1.15 var(--la-body);color:var(--la-ink)}
:is(#lobby-screen,#landing-lobby) .room-row small{display:flex;align-items:center;gap:4px;margin:0;font:9px/1 var(--la-display);letter-spacing:.4px;text-transform:uppercase;color:#e8455f}
:is(#lobby-screen,#landing-lobby) .room-row[data-mode="team"] small{color:var(--t-link)}#lobby-screen .room-row[data-mode="catch"] small{color:#7a5cf0}#lobby-screen .room-row[data-mode="gangsi"] small{color:var(--t-go-text)}#lobby-screen .room-row[data-mode="tower"] small{color:var(--t-accent-text)}#lobby-screen .room-row:is([data-mode="plaza"],[data-mode="community"]) small{color:#178f9b}
:is(#lobby-screen,#landing-lobby) .room-number{order:2;min-width:0;margin:0;padding:0;background:none;color:var(--la-muted);font:900 9px/1 var(--la-body);letter-spacing:0}
:is(#lobby-screen,#landing-lobby) .room-hero-ban{order:3;font:900 8px/1 var(--la-body);color:var(--la-muted);text-transform:none}
:is(#lobby-screen,#landing-lobby) .room-count{position:absolute;top:5px;right:6px;padding:2px 7px;border-radius:999px;background:var(--t-go-tint);color:var(--t-go-text);font:900 10px/1.1 var(--la-body)}
:is(#lobby-screen,#landing-lobby) .room-row:is(.full,.playing) .room-count{background:var(--t-red-tint);color:#d23a4e}
:is(#lobby-screen,#landing-lobby) .room-row .button{position:absolute;right:6px;bottom:5px;min-height:0;height:16px;margin:0;padding:0 8px;border:0;border-radius:999px;background:var(--la-blue);color:#fff;font:9px/16px var(--la-display);letter-spacing:.4px;text-transform:uppercase;box-shadow:none}
:is(#lobby-screen,#landing-lobby) .room-row .button:disabled{background:var(--t-line-soft);color:#fff}
:is(#lobby-screen,#landing-lobby) .room-row:is(.full,.playing){background:linear-gradient(var(--t-surface),var(--t-panel-3))}
:is(#lobby-screen,#landing-lobby) .room-row:is(.full,.playing) strong{color:var(--t-muted-2)}
:is(#lobby-screen,#landing-lobby) .room-row.empty{border-style:dashed;border-color:var(--t-line-soft);background:var(--t-panel-3)}
:is(#lobby-screen,#landing-lobby) .room-row.empty::before{left:8px;top:50%;width:28px;height:28px;margin-top:-14px;font-size:22px;line-height:28px;background:var(--t-line-soft);color:#f1f5fa}
:is(#lobby-screen,#landing-lobby) .room-row.empty strong{margin-top:7px;font-size:11px;color:var(--t-faint)}
:is(#lobby-screen,#landing-lobby) .room-row.empty small{color:var(--t-faint);font-size:9px}
/* Pager and refresh. */
:is(#lobby-screen,#landing-lobby) .room-pagination{display:flex;align-items:center;gap:6px;height:28px;margin:0;padding:0;flex:none}
:is(#lobby-screen,#landing-lobby) .room-pagination .button{display:grid;place-items:center;flex:none;min-width:0;width:40px;min-height:0;height:26px;margin:0;padding:0;border:1.25px solid var(--t-line-2);border-radius:8px;background:linear-gradient(var(--t-card),var(--t-panel-3));color:var(--t-link-2);font:18px/1 var(--la-body);box-shadow:0 2px 0 var(--t-line)}
:is(#lobby-screen,#landing-lobby) :is(#room-next,.la-land-next){background:var(--la-blue);border-color:var(--t-blue-dk);color:#fff;box-shadow:0 2px 0 var(--t-blue-dk)}
:is(#lobby-screen,#landing-lobby) .room-pagination .button:disabled{opacity:.5;box-shadow:none}
:is(#lobby-screen,#landing-lobby) :is(#room-page,.la-land-page){margin:0;padding:5px 10px;white-space:nowrap;border-radius:999px;background:var(--t-panel-2);color:var(--t-link-2);font:900 10px/1 var(--la-body)}
:is(#lobby-screen,#landing-lobby) :is(#lobby-refresh,.la-land-refresh){display:flex;gap:4px;width:auto;padding:0 10px;white-space:nowrap;font:12px/1 var(--la-display);letter-spacing:.4px;text-transform:uppercase}
/* The chat: the last lines, the channel, the field and the expand button. */
:is(#lobby-screen,#landing-lobby) .lobby-chat{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;gap:3px;margin:0;padding:5px 6px 5px 8px;border:1px solid var(--la-line);border-radius:12px;background:var(--t-card);box-sizing:border-box}
:is(#lobby-screen,#landing-lobby) .lobby-chat .chat-log{flex:1;min-height:0;height:auto;margin:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;border:0;color:var(--la-ink);font:800 10px/14px var(--la-body)}
:is(#lobby-screen,#landing-lobby) .lobby-chat .chat-log>*{flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#lobby-screen,#landing-lobby) .lobby-chat .chat-log strong{color:var(--t-go-text)}
:is(#lobby-screen,#landing-lobby) .chat-entry{display:flex;align-items:center;gap:6px;height:24px;margin:0;padding:0}
:is(#lobby-screen,#landing-lobby) .chat-entry::before{display:none}
.la-channel{display:flex;align-items:center;gap:3px;flex:none;height:22px;padding:0 8px;border-radius:7px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font:10px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.la-channel .ui-i{font-size:10px}
:is(#lobby-screen,#landing-lobby) .chat-entry .field{flex:1;min-width:0;height:22px;margin:0;padding:0 8px;border:1px solid var(--la-line);border-radius:7px;background:var(--t-card);color:var(--la-ink);font:800 10px/1 var(--la-body)}
:is(#lobby-screen,#landing-lobby) .chat-entry #lobby-chat-send{display:none;min-height:0;height:22px;padding:0 8px;border-radius:7px;font:10px/1 var(--la-display)}
body[data-touch="on"] :is(#lobby-screen,#landing-lobby) .chat-entry #lobby-chat-send{display:block}
.la-chat-expand{display:grid;place-items:center;flex:none;width:26px;height:22px;padding:0;border:1px solid var(--t-blue-dk);border-radius:7px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font-size:12px}
:is(#lobby-screen,#landing-lobby)[data-chat-open] .lobby-chat{position:absolute;left:126px;right:6px;bottom:6px;height:210px;z-index:3;box-shadow:0 10px 24px #12305e55}
:is(#lobby-screen,#landing-lobby)[data-chat-open] .lobby-chat .chat-log{overflow:auto;justify-content:flex-start}
:is(#lobby-screen,#landing-lobby)[data-chat-open] .lobby-chat .chat-log>*{white-space:normal}
/* The player panel. */
.la-player{flex:0 0 188px;height:340px;display:flex;flex-direction:column;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--t-panel);box-shadow:0 6px 16px #12305e59;overflow:hidden;box-sizing:border-box}
.la-player-head{display:flex;align-items:center;gap:8px;height:44px;padding:0 6px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));border-bottom:1.5px solid var(--t-blue-dk);color:#fff;box-sizing:border-box}
.la-avatar{display:grid;place-items:center;width:30px;height:30px;flex:none;border:1.5px solid #fff;border-radius:8px;background:linear-gradient(#ffd27a,var(--t-accent));font:16px/1 "Lilita One","Arial Black",sans-serif;color:#fff;text-shadow:0 1px 0 var(--t-accent-dk);box-sizing:border-box}
.la-player-text{flex:1;min-width:0;display:flex;flex-direction:column}
.la-player-text b{font:14px/16px "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.la-player-text small{display:flex;align-items:center;gap:3px;font:800 9px/12px Nunito,sans-serif;color:#dbe7f6}
.la-info{height:24px;padding:0 8px;border:1.25px solid var(--t-line-2);border-radius:7px;background:linear-gradient(var(--t-card),var(--t-panel-3));color:var(--t-link-2);font:10px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;opacity:.75}
.la-player-body{flex:1;display:flex;flex-direction:column;gap:6px;padding:6px;min-height:0}
.la-player-tabs{display:flex;gap:3px;height:28px;padding:3px;border-radius:9px;background:var(--t-panel-2);box-sizing:border-box}
.la-player-tabs span{flex:1;display:grid;place-items:center;border-radius:7px;color:#9fb4d0;font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.la-player-tabs span.on{background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff}
.la-player-soon{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;border:1px solid var(--t-line-soft);border-radius:10px;background:rgb(var(--t-card-rgb)/.9);text-align:center}
.la-lock{display:grid;place-items:center;width:44px;height:44px;border:1.25px solid var(--t-blue-dk);border-radius:50%;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font-size:20px}
.la-player-soon b{font:12px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;color:var(--t-ink)}
.la-player-soon em{padding:3px 10px;border:1px solid var(--t-accent-dk);border-radius:999px;background:linear-gradient(#ffd27a,var(--t-accent));color:#fff;font:9px/1 "Lilita One","Arial Black",sans-serif;font-style:normal;letter-spacing:.4px;text-transform:uppercase;text-shadow:0 1px 0 var(--t-accent-dk)}
.la-player-soon p{margin:0;color:var(--t-muted);font:800 9px/1.4 Nunito,sans-serif}
.la-player-actions{display:flex;flex-direction:column;gap:5px}
:is(#lobby-screen,#landing-lobby) .la-player-actions .button{width:100%;min-height:0;height:28px;margin:0;padding:0 8px;border-radius:8px;font:11px/1 var(--la-display);letter-spacing:.3px}
:is(#lobby-screen,#landing-lobby) .la-player-actions .button[hidden]{display:none}
/* The taskbar (the site footer, on the lobby and room screens). */
.site-footer.la-taskbar{display:flex;align-items:center;gap:6px;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));border-top:1.5px solid var(--t-blue-dk);background:linear-gradient(var(--t-bar),var(--t-blue-dk2))}
.la-taskbar .legacy-menu,.la-taskbar .la-task-right{display:flex;gap:6px;align-items:center}
.la-taskbar .la-task{position:relative;display:flex;align-items:center;gap:6px;height:38px;padding:0 14px 0 10px;border:1.25px solid var(--t-blue-dk);border-radius:9px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font:15px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;text-decoration:none;text-shadow:0 1px 0 #0003;box-shadow:inset 0 1px 0 #ffffff40;box-sizing:border-box;white-space:nowrap;opacity:1;filter:none}
.la-taskbar .la-task .ui-i{font-size:18px;stroke-width:2.6}
.la-taskbar .la-task.gray{border-color:var(--t-muted-2);background:linear-gradient(var(--t-line-soft),var(--t-faint))}
.la-taskbar .la-task.gray .la-task-icon{filter:grayscale(.6);opacity:.8}
.la-taskbar .la-task.exit{width:38px;padding:0;justify-content:center;border-color:#b8395c;background:linear-gradient(#ff86a8,#e83c6e)}
.la-taskbar .la-task.square{width:38px;padding:0;justify-content:center}
.la-taskbar .la-task-icon{width:30px;height:30px}
.la-taskbar .la-soon{left:50%;top:-10px;transform:translateX(-50%);font-size:8px}
.la-taskbar .la-task:not([aria-disabled="true"]):active{transform:translateY(1px)}
body:not([data-screen="lobby"]) .la-taskbar #lobby-signout{display:none}
body:has(#lobby-create-dialog[open]) :is(#lobby-screen,#landing-lobby) .lobby-chat{visibility:hidden}
.la-taskbar .legacy-menu .la-task[aria-disabled="true"],.la-taskbar .la-task-right .la-task[aria-disabled="true"]{opacity:1;filter:none;cursor:default}
:is(#lobby-screen,#landing-lobby) .room-number::before{content:"#"}
.inventory-detail .inventory-gear-slot{pointer-events:auto}
/* Create Room / Create Plaza / Select Mode in the Lost Arena look (the
   "Lobby · Solid · Create Room / Select Mode" designs): the original
   PartyCreateWnd ids, laid out as a 450-wide form and a 798x365 mode grid,
   scaled with the lobby (--la-fit). The mode cards keep the original tile
   art (--ui-normal, create_room_view.rs `Skin::window`). */
#lobby-create-dialog.la-dlg{--ink:var(--t-ink);inset:auto;left:50%;top:50%;width:450px;height:auto;max-height:none;transform:translate(-50%,-50%) scale(var(--la-fit,1));color:var(--ink);font:800 11px/1.25 Nunito,"Segoe UI",system-ui,sans-serif}
#lobby-create-dialog.la-dlg[data-view="modes"]{width:798px;height:365px;top:50%}
#lobby-create-dialog.la-dlg::backdrop{background:#0b1e3d80;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}
#lobby-create-dialog .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#lobby-create-dialog .la-dlg-win{position:relative;inset:auto;display:flex;flex-direction:column;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--t-panel);box-shadow:0 14px 34px #0b1e3d80;overflow:hidden}
#lobby-create-dialog[data-view="modes"] #create-mode-form{height:365px}
#lobby-create-dialog .la-dlg-win::before,#lobby-create-dialog .la-dlg-win .original-button:not([data-mode-tile])::before{display:none}
#lobby-create-dialog .la-dlg-head{display:flex;align-items:center;gap:8px;height:40px;flex:none;padding:0 6px 0 12px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));border-bottom:1.5px solid var(--t-blue-dk);color:#fff}
#lobby-create-dialog .la-dlg-head h2{position:static;flex:1;margin:0;color:#fff;font:17px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;-webkit-text-stroke:0;text-shadow:0 1.5px 0 var(--t-blue-dk)}
#lobby-create-dialog .la-dlg-glyph{display:grid;place-items:center;font-size:18px}
#lobby-create-dialog .la-dlg-head :is(.la-x,.la-back){position:static!important;display:grid;place-items:center;width:30px!important;height:30px!important;flex:none;margin:0;padding:0;border-radius:9px;font-size:16px;color:#fff;cursor:pointer}
#lobby-create-dialog .la-dlg-head .la-x{border:1.25px solid #b83232;background:linear-gradient(#ff8a8a,#e04848);box-shadow:0 2px 0 #b83232}
#lobby-create-dialog .la-dlg-head .la-back{border:0;background:#12305e4d}
#lobby-create-dialog .la-dlg-head .ui-i{stroke-width:3}
#lobby-create-dialog .la-dlg-body{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px 14px 12px}
#lobby-create-dialog .la-row{display:flex;align-items:center;gap:10px;min-height:34px}
#lobby-create-dialog .la-row>:is(label,.create-mode-label),#lobby-create-dialog #create-plaza-map label{position:static;flex:0 0 74px;margin:0;color:var(--t-ink-2);font:10.5px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase}
#lobby-create-dialog .la-name-box{flex:1;display:flex;align-items:center;height:34px;padding:0 10px;border:1.5px solid var(--t-blue);border-radius:9px;background:var(--t-card);box-sizing:border-box}
#lobby-create-dialog input#lobby-room-name{position:static!important;flex:1;width:auto!important;height:100%!important;padding:0;border:0;background:none;color:var(--t-ink);font:900 12px/1 Nunito,sans-serif;outline:none}
#lobby-create-dialog .la-count{color:var(--t-muted-2);font:900 9px/1 Nunito,sans-serif}
#lobby-create-dialog .la-access{flex:1;display:flex;gap:3px;height:34px;padding:3px;border-radius:10px;background:var(--t-panel-2);box-sizing:border-box}
#lobby-create-dialog .la-access>span{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;border-radius:8px;font:900 11px/1 Nunito,sans-serif}
#lobby-create-dialog .la-access-on{background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;box-shadow:0 1px 0 var(--t-blue-dk)}
#lobby-create-dialog .la-access-on input#lobby-access{position:static!important;width:7.5em!important;height:auto!important;padding:0;border:0;background:none;color:#fff;font:900 11px/1 Nunito,sans-serif;pointer-events:none}
#lobby-create-dialog .la-access-off{color:var(--t-faint)}
#lobby-create-dialog .la-soon-inline{padding:2px 5px;border-radius:999px;background:linear-gradient(#ffd27a,var(--t-accent));color:#fff;font:7px/1 "Lilita One",sans-serif;font-style:normal;letter-spacing:.3px;text-transform:uppercase}
#lobby-create-dialog #lobby-mode-open{position:static!important;flex:1;display:flex!important;align-items:center;gap:10px;width:auto!important;height:46px!important;padding:4px 10px 4px 4px!important;border:1px solid var(--t-line);border-radius:10px;background:linear-gradient(var(--t-card),var(--t-surface));color:var(--t-ink);text-align:left;box-shadow:0 2px 0 var(--t-line);-webkit-text-stroke:0}
#lobby-create-dialog #lobby-mode-open>.ui-i{font-size:15px;color:var(--t-muted)}
#lobby-create-dialog .la-mode-thumb{width:52px;height:38px;flex:none;border-radius:7px;background:var(--t-panel-2) center/cover no-repeat}
#lobby-create-dialog .la-mode-thumb[data-empty]{background:var(--t-panel-2)}
#lobby-create-dialog .la-mode-pick{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#lobby-create-dialog #lobby-mode-label{font:900 13px/1.1 Nunito,sans-serif;color:var(--t-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lobby-create-dialog #lobby-mode-sub{font:800 9px/1.1 Nunito,sans-serif;color:var(--t-muted)}
#lobby-create-dialog #create-plaza-map{position:static;display:flex;align-items:center;gap:10px;height:auto}
#lobby-create-dialog:not([data-kind="plaza"]) #create-plaza-map{display:none}
#lobby-create-dialog #create-plaza-map select{position:static;flex:1;width:auto;height:30px;padding:0 8px;border:1px solid var(--t-line);border-radius:9px;background:var(--t-card);color:var(--t-ink);font:900 11px/1 Nunito,sans-serif}
#lobby-create-dialog #create-hosting{position:static;width:auto;padding:5px 10px;border:1px solid var(--t-line);border-radius:9px;background:var(--t-surface);color:var(--t-ink-2);font:800 10px/1.3 Nunito,sans-serif}
#lobby-create-dialog #create-hosting label,#lobby-create-dialog #create-hosting select{color:var(--t-ink-2);font:800 10px/1.3 Nunito,sans-serif}
#lobby-create-dialog .la-dlg-actions{display:flex;gap:10px;margin-top:2px}
#lobby-create-dialog .la-dlg-actions .original-button{position:static!important;display:flex!important;align-items:center;justify-content:center;gap:6px;height:36px!important;padding:0!important;border-radius:10px;color:#fff;font:15px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase;-webkit-text-stroke:0;text-shadow:0 1px 0 #0003}
#lobby-create-dialog .la-dlg-actions .ui-i{font-size:15px;stroke-width:2.8}
#lobby-create-dialog #lobby-create-cancel{width:auto!important;flex:0 0 120px;border:1.25px solid var(--t-muted-2);background:linear-gradient(var(--t-line-soft),var(--t-faint));box-shadow:0 3px 0 var(--t-muted-2)}
#lobby-create-dialog #lobby-create{width:auto!important;flex:1;border:1.25px solid var(--t-go-dk);background:linear-gradient(var(--t-go-hi),var(--t-go));box-shadow:0 3px 0 var(--t-go-dk)}
#lobby-create-dialog #lobby-create:disabled{filter:grayscale(.8);opacity:.6}
#lobby-create-dialog .la-dlg-actions .original-button:not(:disabled):active{transform:translateY(1px)}
/* Select Mode. */
#lobby-create-dialog #mode-choices{flex:1;gap:6px;padding:8px 14px 12px;min-height:0}
#lobby-create-dialog .la-group-label{display:flex;align-items:center;gap:5px;margin:0;color:var(--t-muted-2);font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase}
#lobby-create-dialog .la-group-label.play{color:var(--t-go-text)}
#lobby-create-dialog .la-play-now{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
#lobby-create-dialog .la-soon-modes{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(2,46px);gap:6px}
#lobby-create-dialog [data-mode-tile]{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;display:flex!important;flex-direction:column;align-items:center;margin:0;padding:5px 5px 6px!important;border:1px solid var(--t-line);border-radius:12px;background:linear-gradient(var(--t-card),var(--t-surface));color:var(--t-ink);isolation:auto;-webkit-text-stroke:0}
#lobby-create-dialog [data-mode-tile]::before{position:static;display:block;width:100%;height:84px;flex:none;inset:auto;border-radius:8px;background:var(--ui-normal) 50% 38%/118% 128% no-repeat;z-index:0}
#lobby-create-dialog [data-mode-tile] span{position:static;margin-top:4px;color:var(--t-ink);font:900 12px/1.1 Nunito,sans-serif;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#lobby-create-dialog [data-mode-tile] small{color:var(--t-muted);font:800 9px/1.2 Nunito,sans-serif;white-space:nowrap}
#lobby-create-dialog [data-mode-tile].selected{border:2px solid var(--t-accent);padding:4px 4px 5px!important;background:linear-gradient(var(--t-pick-hi),var(--t-pick))}
#lobby-create-dialog [data-mode-tile].selected::after{content:"";position:absolute;right:9px;top:9px;width:22px;height:22px;border:2px solid #fff;border-radius:50%;background:var(--t-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;box-sizing:border-box}
#lobby-create-dialog [data-mode-tile]:not(:disabled):hover{border-color:var(--t-line-2);filter:none}
#lobby-create-dialog .la-soon-modes [data-mode-tile]{flex-direction:row;gap:6px;padding:4px 6px!important;border-color:var(--t-line-soft);background:var(--t-panel-3);opacity:1;filter:none;cursor:default}
#lobby-create-dialog .la-soon-modes [data-mode-tile]::before{width:32px;height:32px;border-radius:50%;background-image:var(--ui-disabled,var(--ui-normal));background-size:160% 170%;background-position:50% 40%;filter:grayscale(1);opacity:.55}
#lobby-create-dialog .la-soon-modes [data-mode-tile] span{margin:0;color:var(--t-muted-2);font:900 9.5px/1.15 Nunito,sans-serif;white-space:normal;text-align:left}
#lobby-create-dialog #lobby-create-art-status{display:none}
#lobby-create-dialog.la-dlg :is(.original-primary,.original-cancel,.original-mode)>span{position:static;left:auto;right:auto;top:auto}
#lobby-create-dialog.la-dlg .la-mode-pick{position:static}

/* The waiting room in the Lost Arena look (the "Room · Solid · Waiting"
   design): an 844x390 layout scaled by --la-fit, the leave button and
   title bar, the mode card (opens Room Settings), the blue and red team
   panels with five round seats a row, the actions, and the room chat on
   the right. The original room art (room_view.rs `apply`) is not drawn. */
body[data-screen="room"] .site-footer{display:none}
body[data-screen="room"] .app-shell{display:block;width:auto;margin:0;padding:0}
body #room-screen.la-room{position:fixed;left:50%;top:50%;width:820px;height:370px;margin:0;padding:0;transform:translate(-50%,-50%) scale(var(--la-fit-full,var(--la-fit,1)));transform-origin:center;color:var(--t-ink);font:800 11px/1.25 Nunito,"Segoe UI",system-ui,sans-serif;--ui-normal:none;--room-extra:0px}
body #room-screen.la-room::before,body #room-screen.la-room .original-button::before{display:none}
body #room-screen.la-room .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
body #room-screen.la-room .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body #room-screen.la-room .la-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5be28c;box-shadow:0 0 0 2px #5be28c33}
body #room-screen.la-room .la-room-top{position:absolute;left:0;top:0;width:588px;height:36px;display:flex;gap:8px}
body #room-screen.la-room .original-button.la-room-exit{position:static;display:grid;place-items:center;width:36px;height:36px;flex:none;border:1.25px solid #b8395c;border-radius:10px;background:linear-gradient(#ff86a8,#e83c6e);color:#fff;font-size:17px;box-shadow:0 2px 0 #b8395c}
body #room-screen.la-room .la-room-titlebar{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0 12px;border:1px solid #ffffff2e;border-radius:10px;background:#12305ed9;color:#fff}
body #room-screen.la-room .la-room-titlebar h1{position:static;flex:1;min-width:0;margin:0;color:#fff;font:15px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;-webkit-text-stroke:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #room-screen.la-room .room-roster-label{position:static;display:flex;align-items:center;gap:5px;margin:0;color:#dbe7f6;font:900 10px/1 Nunito,sans-serif;text-transform:uppercase;white-space:nowrap}
body #room-screen.la-room #room-state{color:#fff}
body #room-screen.la-room .la-room-mode{flex:0 0 184px;display:flex;align-items:center;gap:7px;height:36px;padding:0 8px 0 4px;border:1px solid var(--t-line);border-radius:10px;background:linear-gradient(var(--t-card),var(--t-panel));color:var(--t-ink);text-align:left;cursor:pointer;box-shadow:0 2px 0 var(--t-line)}
body #room-screen.la-room .la-room-mode-thumb{width:30px;height:30px;flex:none;border-radius:6px;background:var(--t-panel-2) var(--room-mode-survival) center/cover no-repeat}
body #room-screen.la-room[data-mode-icon="team"] .la-room-mode-thumb{background-image:var(--room-mode-team)}body #room-screen.la-room[data-mode-icon="catch"] .la-room-mode-thumb{background-image:var(--room-mode-catch)}body #room-screen.la-room[data-mode-icon="gangsi"] .la-room-mode-thumb{background-image:var(--room-mode-gangsi)}body #room-screen.la-room[data-mode-icon="tower"] .la-room-mode-thumb{background-image:var(--room-mode-tower)}body #room-screen.la-room[data-mode-icon="plaza"] .la-room-mode-thumb{background-image:var(--room-mode-plaza)}body #room-screen.la-room[data-mode-icon="community"] .la-room-mode-thumb{background-image:var(--room-mode-community)}
body #room-screen.la-room .la-room-mode-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
body #room-screen.la-room .la-room-mode-text b{font:900 11px/1.15 Nunito,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #room-screen.la-room .la-room-mode-text small{font:800 8.5px/1.15 Nunito,sans-serif;color:var(--t-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body #room-screen.la-room .la-room-mode>.ui-i{font-size:15px;color:var(--t-ink-2)}
body #room-screen.la-room .la-teams{position:absolute;left:0;top:44px;width:588px;height:274px}
body #room-screen.la-room .la-team{position:absolute;top:0;width:290px;height:274px;border:1.5px solid var(--t-blue-hi);border-radius:14px;background:#163e78f2;box-sizing:border-box;display:flex;justify-content:space-between;align-items:flex-start;padding:10px 12px}
body #room-screen.la-room .la-team.blue{left:0}
body #room-screen.la-room .la-team.red{left:298px;border-color:#e08a8a;background:#7a2f3ef2}
body #room-screen.la-room .la-team b{padding:5px 12px;border-radius:999px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase}
body #room-screen.la-room .la-team.red b{background:linear-gradient(#ff8a8a,#e04848)}
body #room-screen.la-room .la-team span{color:#9fc7ff;font:14px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px}
body #room-screen.la-room .la-team.red span{color:#ffb3b3}
body #room-screen.la-room .player-slots{position:absolute;left:8px;top:46px;width:572px;display:grid;grid-template-columns:repeat(5,1fr) 24px repeat(5,1fr);grid-auto-rows:96px;gap:4px 2px;margin:0;padding:0}
body #room-screen.la-room .player-slot:nth-child(10n+6){grid-column:7}
body #room-screen.la-room .player-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:auto;height:auto;min-height:0;margin:0;padding:6px 0 0;border:0;border-radius:0;background:none;color:#fff;font:inherit;cursor:default}
body #room-screen.la-room .player-slot.closed-slot{visibility:hidden}
body #room-screen.la-room .player-slot .hero-avatar-small{position:relative;left:auto;top:auto;display:block;width:52px;height:52px;margin:0;border:3px solid var(--t-blue-hi);border-radius:50%;background:var(--t-blue-dk2) center/cover no-repeat;box-sizing:border-box;color:transparent;font-size:0;overflow:hidden;box-shadow:0 2px 6px #0004}
body #room-screen.la-room .player-slot.red .hero-avatar-small{border-color:#e06868;background-color:#7a2f3e}
body #room-screen.la-room .player-slot.me .hero-avatar-small{border-color:#ffd27a;box-shadow:0 0 0 2px var(--t-accent),0 2px 6px #0004}
body #room-screen.la-room .player-slot strong{position:static;display:block;max-width:56px;margin:0;color:#fff;font:900 10px/1.1 Nunito,sans-serif;text-shadow:0 1px 1px #0006;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-text-stroke:0}
body #room-screen.la-room .player-slot.me strong{color:#ffd27a}
body #room-screen.la-room .player-slot .slot-hero{display:none}
body #room-screen.la-room .player-slot .host-badge{position:absolute;left:auto;right:4px;top:2px;width:20px;height:20px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--t-accent);color:transparent;font-size:0;z-index:1;box-sizing:border-box;-webkit-mask:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}
body #room-screen.la-room .player-slot:is(.open-slot,.closed-seat)::before{content:"+";display:grid;place-items:center;width:52px;height:52px;border:2px solid #ffffff4d;border-radius:50%;background:#ffffff14;box-sizing:border-box;color:#ffffff99;font:300 26px/1 Nunito,sans-serif;position:static;inset:auto}
body #room-screen.la-room .player-slot.closed-seat::before{content:"";border-style:dashed;border-color:#ffffff33;background:#00000026 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff66' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='11' x='3' y='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/18px no-repeat}
body #room-screen.la-room .player-slot:is(.open-slot,.closed-seat) strong{color:#ffffff80;text-shadow:none}
body #room-screen.la-room .player-slot[data-capacity]{cursor:pointer}
body #room-screen.la-room .player-slot[data-capacity]:hover::before{border-color:#ffffffaa;background-color:#ffffff26}
body #room-screen.la-room .player-slot[data-me]{cursor:pointer}
body #room-screen.la-room .player-slot[data-me]:hover .hero-avatar-small{filter:brightness(1.12)}
body #room-screen.la-room .la-room-actions{position:absolute;left:0;top:326px;width:588px;height:44px;display:flex;align-items:center;gap:8px}
body #room-screen.la-room .la-room-actions .original-button{position:static;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 16px;border-radius:12px;color:#fff;font:16px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 0 #0003;-webkit-text-stroke:0}
body #room-screen.la-room .la-room-actions .original-button>span{position:static}
body #room-screen.la-room .la-room-actions .ui-i{font-size:17px;stroke-width:2.6}
body #room-screen.la-room #room-change-team{flex:0 0 auto;border:1.25px solid var(--t-blue-dk);background:linear-gradient(var(--t-blue-hi),var(--t-blue));box-shadow:0 3px 0 var(--t-blue-dk)}
body #room-screen.la-room #room-start{flex:1;border:1.25px solid var(--t-accent-dk);background:linear-gradient(var(--t-accent-hi),var(--t-accent));box-shadow:0 3px 0 var(--t-accent-dk),inset 0 1px 0 #ffffff80;font-size:19px}
body #room-screen.la-room #room-start:disabled{filter:grayscale(.75);opacity:.65}
body #room-screen.la-room .la-room-actions .original-button:not(:disabled):active{transform:translateY(1px)}
body #room-screen.la-room .room-status{position:static;flex:0 1 auto;min-width:0;margin:0;color:#fff;font:900 10px/1.2 Nunito,sans-serif;text-shadow:0 1px 1px #0006}
body #room-screen.la-room .room-status:empty{display:none}
body #room-screen.la-room #room-full-actions{position:static;display:flex;gap:6px}
body #room-screen.la-room #room-full-actions[hidden]{display:none}
body #room-screen.la-room #room-full-actions .button{min-height:0;height:44px;padding:0 12px;border-radius:12px;font:900 11px/1.1 Nunito,sans-serif}
body #room-screen.la-room #room-action-status{position:absolute;left:0;top:300px;width:588px;margin:0;text-align:center;color:#fff;font:900 10px/1.2 Nunito,sans-serif;text-shadow:0 1px 2px #000a;pointer-events:none}
body #room-screen.la-room .la-room-chat{position:absolute;left:600px;top:0;width:220px;height:370px;display:flex;flex-direction:column;margin:0;padding:0;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--t-deep);overflow:hidden;box-sizing:border-box}
body #room-screen.la-room .la-room-chat-head{display:flex;align-items:center;gap:6px;height:40px;flex:none;padding:0 8px 0 12px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));border-bottom:1.5px solid var(--t-blue-dk);color:#fff;font-size:15px}
body #room-screen.la-room .la-room-chat-head .chat-title{flex:1;margin:0;padding:0;border:0;color:#fff;font:13px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
/* On a touch page the fixed full-screen button sits over the chat header's
   right end: keep the header's "N in room" chip clear of it. */
body[data-touch="on"] #room-screen.la-room .la-room-chat-head{padding-right:calc(44px / var(--la-fit,1))}
body[data-touch="on"] #room-screen.la-room .la-room-chat-head>.ui-i{display:none}
body #room-screen.la-room .la-room-chat-head #room-chat-count{flex:none;white-space:nowrap}
body #room-screen.la-room .la-room-chat-head .chat-title{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (display-mode:fullscreen){body[data-touch="on"] #room-screen.la-room .la-room-chat-head{padding-right:8px}}
body #room-screen.la-room .la-room-online{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:#12305e66;font:900 9px/1 Nunito,sans-serif}
body #room-screen.la-room #room-chat-log{position:static;flex:1;width:auto;height:auto;min-height:0;margin:0;padding:8px 10px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;overflow:auto;border:0;background:none;color:#fff;font:800 10px/1.35 Nunito,sans-serif}
body #room-screen.la-room #room-chat-log>span{display:block;white-space:normal}
body #room-screen.la-room #room-chat-log strong{color:#ff9db0}
body #room-screen.la-room #room-chat-entry{position:static;inset:auto;display:flex;align-items:center;gap:5px;width:auto;height:auto;padding:7px;border-top:1px solid #ffffff1f;background:var(--t-deep-2)}
body #room-screen.la-room #room-chat-entry::before{display:none}
body #room-screen.la-room #room-chat-entry .la-channel{height:24px;padding:0 7px;font-size:9px}
body #room-screen.la-room #room-chat-input{position:static;flex:1;min-width:0;width:auto;height:26px;margin:0;padding:0 8px;border:0;border-radius:7px;background:var(--t-card);color:var(--t-ink);font:800 10px/1 Nunito,sans-serif;outline:none}
body #room-screen.la-room #room-chat-send{position:static;display:block;width:auto;height:26px;padding:0 9px;border:1.25px solid var(--t-go-dk);border-radius:7px;background:linear-gradient(var(--t-go-hi),var(--t-go));color:#fff;font:10px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
body #room-screen.la-room #room-art-status{display:none}
/* Room Settings (the "Room · Solid · Room Settings (Host)" design): the
   room's rule lists in a dialog; each change applies at once. */
body #room-screen.la-room .la-room-settings{width:590px;max-width:none;padding:0;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 18px 40px #0b1e3d99;overflow:hidden;font:800 11px/1.25 Nunito,sans-serif}
body #room-screen.la-room .la-room-settings::backdrop{background:#0b1e3d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
body #room-screen.la-room .la-room-settings[open]{display:flex;flex-direction:column}
.la-modal-head{display:flex;align-items:center;gap:8px;height:42px;flex:none;padding:0 6px 0 12px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));border-bottom:1.5px solid var(--t-blue-dk);color:#fff;font-size:17px}
.la-modal-head h2{margin:0;color:#fff;font:17px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;text-shadow:0 1.5px 0 var(--t-blue-dk)}
.la-modal-head .la-x{display:grid;place-items:center;width:30px;height:30px;flex:none;padding:0;border:1.25px solid #b83232;border-radius:9px;background:linear-gradient(#ff8a8a,#e04848);color:#fff;font-size:16px;box-shadow:0 2px 0 #b83232;cursor:pointer}
.la-modal-head .ui-i,.la-modal-foot .ui-i,.la-settings-grid .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.la-host-chip{display:flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:#12305e66;color:#ffd27a;font:900 9px/1 Nunito,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.4px}
.la-host-chip .ui-i{font-size:10px}
body #room-screen.la-room[data-host="true"] .la-host-chip{display:none}
.la-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:12px 14px}
.la-settings-col{display:flex;flex-direction:column;gap:10px}
body #room-screen.la-room .la-settings-grid :is(.room-rule,.room-capacity-control){position:static!important;inset:auto;display:flex!important;flex-direction:column;align-items:stretch;gap:5px;width:auto!important;height:auto!important;margin:0;padding:0;border:0;background:none;color:var(--t-ink);font:inherit;text-align:left}
body #room-screen.la-room .la-settings-grid .room-rule[hidden]{display:none!important}
.la-set-label{display:flex;align-items:center;gap:5px;color:var(--t-ink-2);font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase}
.la-set-label .ui-i{font-size:12px}
body #room-screen.la-room .la-settings-grid select{position:static!important;inset:auto;display:block;width:100%!important;height:34px!important;margin:0;padding:0 10px;border:1px solid var(--t-line);border-radius:9px;background:var(--t-card);color:var(--t-ink);font:900 12px/1 Nunito,sans-serif;opacity:1;appearance:auto;cursor:pointer}
body #room-screen.la-room .la-settings-grid select:disabled{background:var(--t-panel-3);color:var(--t-muted);cursor:default}
body #room-screen.la-room .la-settings-grid .room-capacity-control small{color:var(--t-muted);font:800 9px/1.3 Nunito,sans-serif}
body #room-screen.la-room .la-settings-grid #room-heroes-chip{cursor:pointer}
body #room-screen.la-room .la-settings-grid #room-heroes-chip strong{position:static;display:flex;align-items:center;min-height:34px;padding:0 10px;border:1px solid var(--t-line);border-radius:9px;background:var(--t-card);color:var(--t-ink);font:900 11px/1.2 Nunito,sans-serif;white-space:normal}
.la-ban-chip{align-self:flex-start;display:flex;align-items:center;gap:4px;padding:5px 10px;border:1px solid #f0b8bf;border-radius:8px;background:var(--t-red-tint);color:#d23a4e;font:10px/1 "Lilita One","Arial Black",sans-serif;font-style:normal;letter-spacing:.4px;text-transform:uppercase}
.la-modal-foot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--t-panel-2)}
.la-modal-hint{flex:1;display:flex;align-items:center;gap:6px;margin:0;color:var(--t-muted);font:800 9.5px/1.3 Nunito,sans-serif}
.la-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 18px;border:1.25px solid var(--t-blue-dk);border-radius:10px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font:15px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 0 #0003;box-shadow:0 3px 0 var(--t-blue-dk);cursor:pointer}
.la-btn.green{border-color:var(--t-go-dk);background:linear-gradient(var(--t-go-hi),var(--t-go));box-shadow:0 3px 0 var(--t-go-dk)}
.la-btn.gray{border-color:var(--t-muted-2);background:linear-gradient(var(--t-line-soft),var(--t-faint));box-shadow:0 3px 0 var(--t-muted-2)}
.la-btn.orange{border-color:var(--t-accent-dk);background:linear-gradient(var(--t-accent-hi),var(--t-accent));box-shadow:0 3px 0 var(--t-accent-dk)}
.la-btn.red{border-color:#b83232;background:linear-gradient(#ff8a8a,#e04848);box-shadow:0 3px 0 #b83232}
.la-btn .ui-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.la-btn:active{transform:translateY(1px)}
body #room-screen.la-room .la-room-settings{transform:scale(var(--la-fit,1))}
/* A tall panel (Prisoner adds Rounds and Round time) fits the screen: its
   scaled height stays inside the viewport, and the settings scroll between the
   fixed header and the Done footer instead of pushing Done off screen. */
body #room-screen.la-room .la-room-settings{max-height:calc((100vh - 12px) / var(--la-fit,1))}
@supports (height:100dvh){body #room-screen.la-room .la-room-settings{max-height:calc((100dvh - 12px) / var(--la-fit,1))}}
body #room-screen.la-room .la-room-settings>.la-modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
body #room-screen.la-room .la-settings-grid .room-catch-rule strong{display:none}
body #room-screen.la-room{outline:0;box-shadow:none;background:none;border:0}
body #room-screen.la-room .player-slot,body #room-screen.la-room .player-slot:hover{background-image:none!important;background-color:transparent;filter:none}
body #room-screen.la-room .la-room-chat-head .chat-title{position:static;inset:auto;width:auto;height:auto;text-align:left;white-space:nowrap}
body #room-screen.la-room .la-room-actions .original-button{white-space:nowrap;color:#fff!important}
body #room-screen.la-room .la-room-actions .original-button>span{color:#fff;-webkit-text-stroke:0}
body #room-screen.la-room #room-change-team{font-size:14px}
body #room-screen.la-room .la-modal-head h2{position:static;-webkit-text-stroke:0}
body #room-screen.la-room .la-modal-hint.room-help{position:static;inset:auto;width:auto;color:var(--t-muted);font:800 9.5px/1.3 Nunito,sans-serif;visibility:visible}
body #room-screen.la-room[data-host="false"] .la-modal-hint.room-help::before{content:"Only the host changes these. "}
/* Room heroes (the "Room · Solid · Hero Ban / Allow" and "Hero Ban Vote"
   designs): ban or allow-only for the host, ban votes for the others, the
   heroes as portrait cards (banned red, voted orange, your vote green). */
.hero-ban-dialog.la-hb{width:798px;height:365px;max-width:none;max-height:none;padding:0;gap:0;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 18px 40px #0b1e3d99;overflow:hidden;font:800 11px/1.25 Nunito,"Segoe UI",system-ui,sans-serif;transform:scale(var(--la-fit,1))}
.hero-ban-dialog.la-hb::backdrop{background:#0b1e3d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.la-hb .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.la-hb .la-modal-head h2{color:#fff}
.la-hb form{margin:0;display:flex}
.la-hb .la-back{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:#12305e4d;color:#fff;font-size:16px;cursor:pointer}
.la-hb-allowed{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#12305e4d;color:#fff;font:900 10px/1 Nunito,sans-serif}
.la-hb[data-editing="false"] .la-hb-host{display:none}
.la-hb-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:8px 12px 0}
.la-hb-tools{display:flex;gap:8px;align-items:center}
.la-hb .hero-ban-kind{display:flex;gap:3px;flex:none;padding:3px;border-radius:10px;background:var(--t-panel-2)}
.la-hb .hero-ban-kind[hidden]{display:none}
.la-hb .hero-ban-kind label{display:flex;align-items:center;gap:5px;height:28px;padding:0 12px;border-radius:8px;color:var(--t-ink-2);font:900 11px/1 Nunito,sans-serif;cursor:pointer}
.la-hb .hero-ban-kind input{position:absolute;opacity:0;pointer-events:none}
.la-hb .hero-ban-kind label.ban:has(input:checked){background:linear-gradient(#ff8a8a,#e04848);color:#fff;box-shadow:0 1px 0 #b83232}
.la-hb .hero-ban-kind label.only:has(input:checked){background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;box-shadow:0 1px 0 var(--t-blue-dk)}
.la-hb-help{flex:0 1 auto;margin:0;padding:7px 12px;border:1px solid #f2d27a;border-radius:10px;background:var(--t-gold-tint);color:#8a5a12;font:900 10.5px/1.25 Nunito,sans-serif}
.la-hb[data-editing="true"] .la-hb-help{display:none}
.la-hb-search{flex:1;display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--t-line);border-radius:999px;background:var(--t-card);color:var(--t-muted-2);box-sizing:border-box}
.la-hb #hero-ban-filter{flex:1;min-width:0;padding:0;border:0;outline:0;background:none;color:var(--t-ink);font:800 11px/1 Nunito,sans-serif}
.la-hb-chips{display:flex;gap:6px;flex-wrap:wrap}
.la-hb .hero-ban-summary{margin:0;padding:5px 12px;border:1px solid #f0b8bf;border-radius:999px;background:var(--t-red-tint);color:#d23a4e;font:900 10px/1.2 Nunito,sans-serif}
.la-hb .hero-ban-votes{margin:0;padding:5px 12px;border:1px solid #f2d27a;border-radius:999px;background:var(--t-gold-tint);color:#8a5a12;font:900 10px/1.2 Nunito,sans-serif}
.la-hb .hero-ban-votes:empty{display:none}
.la-hb .hero-ban-list{flex:1;min-height:0;display:grid;grid-template-columns:repeat(9,1fr);grid-auto-rows:92px;gap:6px;padding:0 0 8px;overflow-y:auto;overscroll-behavior:contain}
.la-hb .hero-ban-list button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:0;padding:6px 3px;border:1px solid var(--t-line);border-radius:12px;background:linear-gradient(var(--t-card),var(--t-surface));color:var(--t-ink);text-decoration:none;cursor:pointer}
.la-hb .hero-ban-list button[hidden]{display:none}
.la-hb .hb-portrait{display:block;width:46px;height:46px;flex:none;border-radius:50%;background:var(--t-panel-2) center/cover no-repeat}
.la-hb .hb-name{max-width:100%;font:900 9.5px/1.15 Nunito,sans-serif;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.la-hb .hero-ban-list button[data-banned="true"]{border:2px solid #e04848;background:var(--t-red-tint);color:#d23a4e;text-decoration:none}
.la-hb .hero-ban-list button[data-banned="true"] .hb-portrait{filter:grayscale(1);opacity:.45}
.la-hb .hero-ban-list button[data-banned="true"]::after{content:"";position:absolute;left:50%;top:13px;width:30px;height:30px;margin-left:-15px;border:2px solid #fff;border-radius:50%;background:#e04848 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m5.7 5.7 12.6 12.6'/%3E%3C/svg%3E") center/18px no-repeat;box-sizing:border-box}
.la-hb .hero-ban-list button[data-voted="true"]{outline:0;border:2px solid var(--t-accent);background:linear-gradient(var(--t-pick-hi),var(--t-pick))}
.la-hb .hero-ban-list button[data-voted="true"]::before{content:"✓ You";position:absolute;left:6px;top:5px;padding:2px 6px;border-radius:999px;background:var(--t-go-dk);color:#fff;font:8px/1 "Lilita One",sans-serif;letter-spacing:.3px;text-transform:uppercase}
.la-hb .hero-ban-list .votes{position:absolute;right:5px;top:5px;padding:2px 6px;border-radius:999px;background:var(--t-accent);color:#fff;font:900 9px/1 Nunito,sans-serif}
.la-hb .hero-ban-list .votes::before{content:"✋";margin-right:2px;font-size:8px}
.la-hb .hero-ban-list button:not(:disabled):not([data-banned="true"]):hover{border-color:var(--t-line-2)}
.la-hb .hero-ban-list button:disabled{opacity:1;cursor:default}
.la-hb .la-modal-foot{gap:8px;padding:8px 12px;border-top:1px solid var(--t-panel-2);justify-content:flex-end}
.la-hb-legend{flex:1;display:flex;align-items:center;gap:6px;margin:0;color:var(--t-muted);font:800 9.5px/1 Nunito,sans-serif}
.la-hb-legend i{display:inline-block;width:9px;height:9px;margin-left:6px;border-radius:50%}
.la-hb-legend i:first-child{margin-left:0}
.la-hb-legend i.ban{background:#e04848}.la-hb-legend i.vote{background:var(--t-accent)}.la-hb-legend i.you{background:var(--t-go-dk)}
.la-hb[data-editing="true"] .la-hb-done{display:none}
.la-hb .la-modal-foot [hidden]{display:none}

/* Select Hero, in the room and in battle (the "Room · Solid · Select Hero"
   and "Battle · Solid · HUD · Select Hero" designs): portrait cards in a
   grid that scrolls by rows (soldier_view.rs reads the laid-out columns and
   row pitch), each hero's key badge, the teammate who plays it, the room's
   hero rule and a search. The original SoldierSelectWnd art is not drawn. */
.soldier-dialog.la-soldier{width:798px;height:365px;padding:0;border:1.5px solid var(--t-line-2);border-radius:16px;background:linear-gradient(var(--t-blue-hi),var(--t-blue)) top/100% 46px no-repeat,var(--t-panel);color:var(--t-ink);box-shadow:0 18px 40px #0b1e3d99;overflow:hidden;transform:translate(-50%,-50%) scale(var(--la-fit,1));font:800 11px/1.25 Nunito,"Segoe UI",system-ui,sans-serif;--ui-normal:none}
.soldier-dialog.la-soldier[data-expanded]{height:365px}
.soldier-dialog.la-soldier::backdrop{background:#0b1e3d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* Over a running battle the blur re-filters the whole frame on every frame (phones): dim only. */
#battle-hero-select.la-soldier::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
/* The battle's selector opens without showModal (soldier_view::open): no top layer and no
   ::backdrop, so it stacks over the battle HUD (under toasts) and dims with a spread shadow. */
#battle-hero-select[open]:not(:modal){z-index:25;box-shadow:0 0 0 200vmax #14283c38}
#battle-hero-select.la-soldier[open]:not(:modal){box-shadow:0 18px 40px #0b1e3d99,0 0 0 200vmax #0b1e3d80}
.soldier-dialog.la-soldier::before,.soldier-dialog.la-soldier .original-button::before{display:none}
.soldier-dialog.la-soldier .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.soldier-dialog.la-soldier .la-soldier-head{position:absolute;left:10px;top:7px;right:52px;height:32px;display:flex;align-items:center;gap:10px}
.soldier-dialog.la-soldier .la-soldier-current{width:32px;height:32px;flex:none;border:2px solid #fff;border-radius:50%;background:var(--t-tint) center/cover no-repeat;box-sizing:border-box}
.soldier-dialog.la-soldier h2,.soldier-dialog.la-soldier .la-soldier-head h2{position:static;left:auto;top:auto;margin:0;color:#fff;font:16px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;-webkit-text-stroke:0}
.soldier-dialog.la-soldier>h2{position:absolute;left:14px;top:14px}
.soldier-dialog.la-soldier .la-soldier-rule{padding:5px 12px;border:1px solid #f0b8bf;border-radius:999px;background:var(--t-red-tint);color:#d23a4e;font:900 10px/1.2 Nunito,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.soldier-dialog.la-soldier .la-soldier-rule[hidden]{display:none}
.soldier-dialog.la-soldier .soldier-close{position:absolute;left:auto;right:8px;top:7px;display:grid;place-items:center;width:32px;height:32px;padding:0;border:1.25px solid #b83232;border-radius:10px;background:linear-gradient(#ff8a8a,#e04848);color:#fff;font-size:17px;box-shadow:0 2px 0 #b83232}
.soldier-dialog.la-soldier .soldier-close .ui-i{stroke-width:3}
.soldier-dialog.la-soldier .soldier-expand,.soldier-dialog.la-soldier .soldier-scroll{display:none}
.soldier-dialog.la-soldier .la-soldier-search{position:absolute;left:12px;right:12px;top:56px;display:flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px solid var(--t-line);border-radius:999px;background:var(--t-card);color:var(--t-muted-2);box-sizing:border-box}
.soldier-dialog.la-soldier .la-soldier-search input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--t-ink);font:800 11px/1 Nunito,sans-serif}
.soldier-dialog.la-soldier .hero-roster{position:absolute;left:12px;right:12px;top:98px;bottom:34px;width:auto;height:auto!important;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));grid-auto-rows:110px;gap:6px;margin:0;padding:0 0 4px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain}
.soldier-dialog.la-soldier .battle-hero-card{display:flex;width:auto;height:auto;min-width:0}
.soldier-dialog.la-soldier .battle-hero-card>.hero-button{flex:1;min-width:0}
.soldier-dialog.la-soldier .hero-shortcut-bind{left:5px;top:5px;width:auto;height:16px;min-height:0;padding:0 5px;border:1px dashed var(--t-line-2);border-radius:5px;background:var(--t-card);color:var(--t-link);font:900 9px/14px Nunito,sans-serif}
.soldier-dialog.la-soldier .hero-button,.soldier-dialog.la-soldier .soldier-empty{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:auto;height:auto;padding:6px 3px;border:1px solid var(--t-line);border-radius:12px;background:linear-gradient(var(--t-card),var(--t-surface));color:var(--t-ink);box-sizing:border-box;scroll-snap-align:start;cursor:pointer}
.soldier-dialog.la-soldier .soldier-empty{border-style:dashed;border-color:var(--t-line-soft);background:var(--t-panel-3);cursor:default}
.soldier-dialog.la-soldier .hero-button[hidden]{display:none!important}
.soldier-dialog.la-soldier .hero-button:hover{border-color:var(--t-line-2);background:linear-gradient(var(--t-card),var(--t-surface))}
.soldier-dialog.la-soldier .hero-button.selected,.soldier-dialog.la-soldier .hero-button[data-current]{border:2px solid var(--t-blue);background:linear-gradient(var(--t-tint),var(--t-tint))}
.soldier-dialog.la-soldier .hero-button:focus-visible{outline:2px solid var(--t-accent);outline-offset:1px}
.soldier-dialog.la-soldier .hero-button[data-drop]{outline:2px dashed var(--t-accent);outline-offset:-3px}
.soldier-dialog.la-soldier .hero-avatar-small{position:static;left:auto;top:auto;display:block;width:52px;height:52px;flex:none;border:0;border-radius:50%;background:var(--t-tint) center/cover no-repeat;color:transparent;font-size:0;overflow:hidden}
.soldier-dialog.la-soldier .soldier-name{position:static;left:auto;right:auto;top:auto;max-width:100%;color:var(--t-ink);font:900 10px/1.15 Nunito,sans-serif;text-align:center;white-space:normal;-webkit-text-stroke:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.soldier-dialog.la-soldier .hero-button.selected .soldier-name,.soldier-dialog.la-soldier [data-current] .soldier-name{color:var(--t-link-2)}
.soldier-dialog.la-soldier .hero-button kbd{position:absolute;left:auto;right:5px;top:5px;width:auto;min-width:16px;height:16px;margin:0;padding:0 4px;border:0;border-radius:5px;background:var(--t-panel-2);color:var(--t-ink-2);font:900 9px/16px Nunito,sans-serif;text-align:center;-webkit-text-stroke:0;box-sizing:border-box}
.soldier-dialog.la-soldier .hero-button.selected kbd,.soldier-dialog.la-soldier .hero-button[data-current] kbd{background:var(--t-blue);color:#fff}
.soldier-dialog.la-soldier .hero-button[data-picked-by]::before{content:attr(data-picked-by);position:absolute;left:5px;top:5px;max-width:52px;padding:2px 6px;border-radius:999px;background:var(--t-tint);color:var(--t-link);font:900 8.5px/1.1 Nunito,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.soldier-dialog.la-soldier .soldier-hint{position:absolute;left:14px;right:14px;top:auto;bottom:9px;display:flex;align-items:center;gap:6px;margin:0;color:var(--t-muted);font:800 9.5px/1.2 Nunito,sans-serif;-webkit-text-stroke:0}
.soldier-dialog.la-soldier .soldier-art-status{display:none}
.soldier-dialog.la-soldier .battle-key-editor{position:absolute;left:12px;right:12px;top:52px;bottom:auto;height:auto;padding:6px 10px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-card);color:var(--t-ink);box-shadow:none}
.soldier-dialog.la-soldier .battle-key-heading strong{color:var(--t-ink-2);font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.soldier-dialog.la-soldier #battle-key-instruction{margin:2px 0 4px;color:var(--t-muted);font:800 9.5px/1.2 Nunito,sans-serif;white-space:normal}
.soldier-dialog.la-soldier .battle-key-button{height:22px;min-height:0;border:1px solid var(--t-line);border-radius:6px;background:linear-gradient(var(--t-card),var(--t-panel));color:var(--t-ink);font:900 11px/20px Nunito,sans-serif}
.soldier-dialog.la-soldier .battle-key-button[aria-pressed="true"]{background:linear-gradient(var(--t-accent-hi),var(--t-accent));border-color:var(--t-accent-dk);color:#fff}
.soldier-dialog.la-soldier #battle-key-cancel{border:1px solid var(--t-line);border-radius:6px;background:var(--t-card);color:var(--t-ink-2);font:900 10px/16px Nunito,sans-serif}
.soldier-dialog.la-soldier .hero-button kbd{background-image:none!important;-webkit-text-stroke:0!important}
/* The battle hero selector (the "Battle · Solid · HUD · Select Hero" design):
   SoldierSelectWnd's 599-wide window (xml/soldierselectwnd.xml: six 90 px
   cards 92 apart from x 12, the header strip) in the lobby's Solid look,
   two rows of cards tall: two 184 px rows would not fit a 390-unit phone,
   so the window takes the lobby dialogs' 365, centred (the original's -20
   would push it off a phone's top edge), and the cards 154. Each card has the
   shortcut key at the top left, the portrait, the name and a chip (NOW on
   the hero in play). The shortcut editor only shows while a key is being
   assigned (its Cancel button is up); the Bind badges start that. */
#battle-hero-select.la-soldier{width:599px;height:365px;margin-top:0;border-radius:16px;background:linear-gradient(var(--t-blue-hi),var(--t-blue)) top/100% 36px no-repeat,var(--t-panel)}
#battle-hero-select.la-soldier[data-expanded]{height:365px}
#battle-hero-select.la-soldier>h2{left:12px;top:10px;font-size:15px;letter-spacing:.6px;text-shadow:0 1.5px 0 var(--t-blue-dk)}
#battle-hero-select.la-soldier .soldier-close{right:5px;top:5px;width:26px;height:26px;border-radius:8px;font-size:14px}
#battle-hero-select.la-soldier .hero-roster{left:7.5px;right:7.5px;top:37.5px;bottom:6.5px;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:153.5px;gap:4px;padding:3px;scroll-padding:3px;scrollbar-width:thin;scrollbar-color:var(--t-line-2) var(--t-panel-2)}
#battle-hero-select.la-soldier .battle-hero-card{display:block;width:auto;height:153.5px}
#battle-hero-select.la-soldier .battle-hero-card>.hero-button,#battle-hero-select.la-soldier .soldier-empty{width:100%;height:100%;justify-content:flex-start;gap:4px;padding:26px 5px 7px;border-radius:12px;box-shadow:0 2px 0 var(--t-line)}
#battle-hero-select.la-soldier .hero-button[data-current]{border:2px solid var(--t-accent);background:linear-gradient(var(--t-pick-hi),var(--t-pick));box-shadow:0 2px 0 var(--t-accent)}
@supports (color:color-mix(in srgb,red 50%,blue)){#battle-hero-select.la-soldier .hero-button[data-current]{box-shadow:0 2px 0 color-mix(in srgb,var(--t-accent) 40%,transparent)}}
#battle-hero-select.la-soldier .hero-avatar-small{width:60px;height:60px;margin:auto 0;border:2px solid var(--t-blue);box-sizing:border-box;background-color:#12305e}
#battle-hero-select.la-soldier .hero-button[data-current] .hero-avatar-small{border-color:var(--t-accent)}
#battle-hero-select.la-soldier .soldier-name,#battle-hero-select.la-soldier [data-current] .soldier-name{color:var(--t-ink);font:400 10.5px/1.05 "Lilita One","Arial Black",sans-serif;letter-spacing:.2px}
#battle-hero-select.la-soldier .hero-button kbd{left:5px;right:auto;top:5px;min-width:20px;height:18px;border:1px solid #fff;border-radius:5px;background:var(--t-blue);color:#fff;font:400 10px/16px "Lilita One","Arial Black",sans-serif}
#battle-hero-select.la-soldier .hero-button[data-current] kbd{background:var(--t-accent)}
#battle-hero-select.la-soldier .hero-button::after{content:"∞ OWNED";display:block;flex:none;padding:0 7px;border-radius:999px;background:var(--t-blue);color:#fff;font:400 8.5px/18px "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;white-space:nowrap}
#battle-hero-select.la-soldier .hero-button[data-current]::after{content:"∞ NOW";background:var(--t-accent)}
#battle-hero-select.la-soldier .battle-key-editor{display:none}
#battle-hero-select.la-soldier .battle-key-editor:has(#battle-key-cancel:not([hidden])){display:block;top:auto;bottom:10px;z-index:3;box-shadow:0 6px 18px #0b1e3d55}
#battle-hero-select.la-soldier[data-forced] .battle-key-editor{display:none}
/* The battle HUD in the Lost Arena look (the "Battle · Solid · HUD"
   design): the tool buttons at the top left (pause, controls, chat, then
   the scoreboard and fullscreen) with the ping beside them, the score box
   over the clock, the KO feed under the minimap, and the
   touch buttons with blue, gold and purple rims. The original TimeScoreWnd
   ring (`#battle-time-score`) gives way to the score box. */
.battle-stage{--u:var(--la-fit,1)}
#battle-time-score{display:none!important}
/* The floating tool button (the "Touch Controls · Floating Menu" design,
   touch_fab.rs): one 56px button for the menu, controls, chat, scores and
   fullscreen. --fab-fx/--fab-fy are the player's spot as fractions of the
   free room; the clamp keeps it out of the notch and rounded corners. */
.touch-controls{--fab:calc(56px*var(--u,1));--fab-item:calc(42px*var(--u,1));--fab-tab-h:calc(60px*var(--u,1));--fab-top:clamp(max(calc(10px*var(--u,1)),env(safe-area-inset-top)),calc((100% - var(--fab))*var(--fab-fy,0)),calc(100% - var(--fab) - max(calc(10px*var(--u,1)),env(safe-area-inset-bottom))))}
.touch-fab-root{position:absolute;z-index:7;left:clamp(max(calc(12px*var(--u,1)),env(safe-area-inset-left)),calc((100% - var(--fab))*var(--fab-fx,0)),calc(100% - var(--fab) - max(calc(12px*var(--u,1)),env(safe-area-inset-right))));top:var(--fab-top);width:var(--fab);height:var(--fab);pointer-events:auto}
.touch-controls:is([data-fab-dock="left"],[data-fab-dock="right"]) .touch-fab-root{visibility:hidden;pointer-events:none}
.touch-fab{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:0;border:2.5px solid #fff;border-radius:50%;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;box-shadow:0 3px 0 var(--t-blue-dk),0 6px 14px #0b1e3d66,inset 0 -3px 0 #00000026,inset 0 2px 0 #ffffff73;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;transition:transform .12s,box-shadow .12s}
.touch-fab svg{grid-area:1/1;width:43%;height:43%;stroke-width:2.4}
.touch-fab :is(.fab-x,.fab-move),.touch-fab-root[data-open="true"] .fab-grid{display:none}
.touch-fab-root[data-open="true"] .fab-x{display:block}
.touch-fab-root[data-open="true"] .touch-fab{background:linear-gradient(#3b6fb8,#1b4a8f)}
.touch-fab-badge{position:absolute;top:-4px;right:-4px;display:grid;place-items:center;min-width:calc(20px*var(--u,1));height:calc(20px*var(--u,1));padding:0 4px;border:1.5px solid #fff;border-radius:999px;background:#ff5c8a;color:#fff;font:400 calc(11px*var(--u,1))/1 "Lilita One","Arial Black",sans-serif}
.touch-fab-badge[hidden],.touch-fab-root[data-open="true"] .touch-fab-badge{display:none}
.touch-fab-menu{position:absolute;left:calc((var(--fab) - var(--fab-item))/2);top:calc(100% + 8px);display:none;flex-direction:column;align-items:flex-start;gap:calc(7px*var(--u,1))}
.touch-fab-root[data-open="true"] .touch-fab-menu{display:flex}
.touch-fab-root[data-v="up"] .touch-fab-menu{top:auto;bottom:calc(100% + 8px);flex-direction:column-reverse}
.touch-fab-root[data-h="right"] .touch-fab-menu{left:auto;right:calc((var(--fab) - var(--fab-item))/2);align-items:flex-end}
.touch-fab-root[data-open="true"][data-wide] .touch-fab-menu{display:grid;grid-template-columns:auto auto;column-gap:calc(10px*var(--u,1))}
.touch-fab-menu button{display:flex;align-items:center;gap:calc(8px*var(--u,1));padding:0;border:0;background:none;color:#fff;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.touch-fab-root[data-h="right"] .touch-fab-menu button{flex-direction:row-reverse}
.touch-fab-menu button>i{display:grid;place-items:center;flex:none;width:var(--fab-item);height:var(--fab-item);border:2px solid #fff;border-radius:calc(13px*var(--u,1));background:linear-gradient(var(--t-blue-hi),var(--t-blue));box-shadow:0 3px 0 var(--t-blue-dk),inset 0 -3px 0 #00000026,inset 0 2px 0 #ffffff73}
.touch-fab-menu button>i svg{width:46%;height:46%;stroke-width:2.4}
.touch-fab-menu button>span{display:grid;place-items:center;height:calc(24px*var(--u,1));padding:0 calc(10px*var(--u,1));border:1px solid #ffffff33;border-radius:999px;background:#0d1b3ad9;font:400 calc(12px*var(--u,1))/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.touch-fab-menu button:active>i{transform:translateY(2px);box-shadow:0 1px 0 var(--t-blue-dk),inset 0 -3px 0 #00000026,inset 0 2px 0 #ffffff73}
.touch-fab-menu #touch-options>i{background:linear-gradient(#ffd27a,#ee8f22);box-shadow:0 3px 0 #b5650f,inset 0 -3px 0 #00000026,inset 0 2px 0 #ffffff73}
.touch-fab-menu #touch-fab-hide>i{background:linear-gradient(#9aa8bc,#6b7a90);box-shadow:0 3px 0 #4a566a,inset 0 -3px 0 #00000026,inset 0 2px 0 #ffffff73}
.touch-fab-menu #touch-board[aria-pressed="true"]>i{background:linear-gradient(var(--t-accent-hi),var(--t-accent))}
.touch-controls::after{content:"";position:absolute;inset:0;z-index:6;background:radial-gradient(circle at var(--fab-at,0 0),#0d1b3ad9,#0d1b3a59 70%);opacity:0;pointer-events:none;transition:opacity .15s}
.touch-controls[data-fab-open="true"]::after{opacity:1}
.touch-fab-hint{position:absolute;top:50%;left:calc(100% + 12px);display:none;transform:translateY(-50%);padding:calc(7px*var(--u,1)) calc(12px*var(--u,1));border:1px solid #ffffff33;border-radius:999px;background:#0d1b3ae6;color:#fff;font:800 calc(12px*var(--u,1))/1.2 Nunito,sans-serif;white-space:nowrap;pointer-events:none}
.touch-controls[data-fab-drag="true"] .touch-fab-hint{display:block}
.touch-controls[data-fab-drag="true"] .touch-fab-root[data-h="right"] .touch-fab-hint{left:auto;right:calc(100% + 12px)}
.touch-controls[data-fab-drag="true"] .touch-fab{transform:scale(1.15);border-color:#ffd23f;box-shadow:0 16px 24px #0b1e3d99,inset 0 -3px 0 #00000026,inset 0 2px 0 #ffffff73}
.touch-controls[data-fab-drag="true"] .touch-fab :is(.fab-grid,.fab-x){display:none}
.touch-controls[data-fab-drag="true"] .touch-fab .fab-move{display:block}
.touch-fab-zones{position:absolute;inset:0;z-index:5;display:none;pointer-events:none}
.touch-controls[data-fab-drag="true"] .touch-fab-zones{display:block}
.touch-fab-zones i{position:absolute;top:0;bottom:0;display:grid;place-items:center;width:calc(64px*var(--u,1));opacity:.6;transition:opacity .12s}
.touch-fab-zones i[data-side="left"]{left:0;border-left:3px solid #ffd23f;background:linear-gradient(90deg,#ffd23f59,#ffd23f00)}
.touch-fab-zones i[data-side="right"]{right:0;border-right:3px solid #ffd23f;background:linear-gradient(270deg,#ffd23f59,#ffd23f00)}
.touch-fab-zones svg{box-sizing:content-box;width:calc(15px*var(--u,1));height:calc(15px*var(--u,1));padding:calc(7px*var(--u,1));border:1.5px solid #ffd23f;border-radius:50%;background:#0d1b3ab3;color:#ffd23f}
.touch-controls[data-fab-hot="left"] .touch-fab-zones i[data-side="left"],.touch-controls[data-fab-hot="right"] .touch-fab-zones i[data-side="right"]{opacity:1;background-color:#ffd23f26}
.touch-fab-tab{position:absolute;z-index:7;top:calc(var(--fab-top) + (var(--fab) - var(--fab-tab-h))/2);left:env(safe-area-inset-left,0px);display:none;place-items:center;width:calc(26px*var(--u,1));height:var(--fab-tab-h);padding:0;border:2px solid #fff;border-left:0;border-radius:0 16px 16px 0;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;opacity:.9;box-shadow:2px 4px 10px #0b1e3d80;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent}
.touch-fab-tab svg{width:70%;height:auto;stroke-width:2.6}
.touch-controls:is([data-fab-dock="left"],[data-fab-dock="right"]) .touch-fab-tab{display:grid}
.touch-controls[data-fab-dock="right"] .touch-fab-tab{left:auto;right:env(safe-area-inset-right,0px);border:2px solid #fff;border-right:0;border-radius:16px 0 0 16px}
.touch-controls[data-fab-dock="right"] .touch-fab-tab svg{transform:scaleX(-1)}
/* A drag out of the tab keeps the captured tab alive, just unseen. */
.touch-controls[data-fab-drag="true"] .touch-fab-tab{display:grid;opacity:0}
.touch-fab-dot{position:absolute;top:-5px;right:-5px;width:12px;height:12px;border:1.5px solid #fff;border-radius:50%;background:#ff5c8a}
.touch-fab-dot[hidden]{display:none}
.touch-controls[data-fab-dock="right"] .touch-fab-dot{right:auto;left:-5px}
.la-hud-score{position:absolute;z-index:5;left:50%;top:max(calc(10px*var(--u)),env(safe-area-inset-top));transform:translateX(-50%);display:flex;align-items:stretch;height:calc(40px*var(--u));border:1.5px solid #fff;border-radius:calc(12px*var(--u));overflow:hidden;box-shadow:0 4px 12px #0005;pointer-events:none;font-family:"Lilita One","Arial Black",sans-serif}
.la-hud-score[hidden]{display:none}
.la-hud-score>b{display:grid;place-items:center;min-width:calc(52px*var(--u));padding:0 calc(10px*var(--u));color:#fff;font-size:calc(19px*var(--u));font-weight:400;text-shadow:0 1px 0 #0004}
.la-hud-blue{background:linear-gradient(var(--t-blue-hi),var(--t-blue))}
.la-hud-red{background:linear-gradient(#ff8a8a,#e04848)}
.la-hud-score[data-solo="true"] .la-hud-red{display:none}
.la-hud-score[data-solo="true"] .la-hud-blue{background:linear-gradient(var(--t-accent-hi),var(--t-accent))}
.la-hud-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2px*var(--u));min-width:calc(80px*var(--u));padding:0 calc(8px*var(--u));background:#0f2547}
.la-hud-mid strong{color:#fff;font:400 calc(16px*var(--u))/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px}
.la-hud-mid small{color:#ffd27a;font:900 calc(7.5px*var(--u))/1 Nunito,sans-serif;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.la-hud-score[data-warn="true"] .la-hud-mid strong{color:#ff8a8a}
#battle-ping{left:calc(max(calc(12px*var(--u)),env(safe-area-inset-left)) + 68px*var(--u));right:auto;top:calc(max(calc(10px*var(--u)),env(safe-area-inset-top)) + 19px*var(--u));transform:translateY(-50%);padding:calc(4px*var(--u)) calc(10px*var(--u));border:1px solid #ffffff2e;border-radius:999px;background:#12305ed9;color:#fff;font:900 calc(9px*var(--u))/1 Nunito,sans-serif;white-space:nowrap}
#battle-ping::before{content:"";display:inline-block;width:calc(6px*var(--u));height:calc(6px*var(--u));margin-right:calc(5px*var(--u));border-radius:50%;background:#5be28c;vertical-align:middle}
#battle-ping[data-level="fair"]::before{background:#ffd27a}#battle-ping[data-level="poor"]::before{background:#ff5c6c}#battle-ping[data-level="unknown"]::before{background:var(--t-faint)}
.ko-feed{left:auto;right:max(calc(12px*var(--u)),env(safe-area-inset-right));top:calc(150px*var(--u));align-items:flex-end;gap:calc(4px*var(--u));width:auto;height:auto}
.ko-feed li{height:auto;padding:calc(4px*var(--u)) calc(10px*var(--u));border:1px solid #ffffff26;border-radius:999px;background:#12305ed9;font:900 calc(10px*var(--u))/1.1 Nunito,sans-serif;text-shadow:none}
/* Touch buttons: blue round buttons, a gold attack, purple-rimmed skills
   and white key badges. Positions stay the touch layout's. */
.touch-actions button{border:2px solid #ffffffcc;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;box-shadow:0 3px 0 var(--t-blue-dk),0 4px 12px #0005}
@supports (color:color-mix(in srgb,red 50%,blue)){.touch-actions button{box-shadow:0 3px 0 color-mix(in srgb,var(--t-blue-dk) 67%,transparent),0 4px 12px #0005}}
.touch-actions #touch-attack{border:3px solid #ffd27a;background-color:#8a6a1e;background-size:80%;background-position:center;background-repeat:no-repeat;box-shadow:0 0 0 3px #ee8f2255,0 4px 14px #0006}
.touch-actions #touch-dash{font:400 calc(10px*var(--touch-u))/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px}
.touch-actions .touch-skill{border:3px solid #a46be8;background:#12305e;box-shadow:0 0 0 2px #ffffff40,0 4px 12px #0005}
.touch-skill kbd,.touch-hero kbd{top:auto;bottom:-6px;min-width:calc(16px*var(--touch-u));padding:1px 4px;border:1px solid var(--t-line);border-radius:5px;background:var(--t-card);color:var(--t-ink);font:900 calc(9px*var(--touch-u))/1.2 Nunito,sans-serif}
.touch-hero{border:2px solid #ffffffcc;border-radius:calc(10px*var(--touch-u));background:#12305ecc}
.touch-hero .touch-portrait{border-radius:calc(8px*var(--touch-u))}
.touch-hero[aria-pressed="true"]{border-color:#ffd27a;box-shadow:0 0 0 2px #ee8f2299}
#touch-pad .touch-stick{border:2px solid #ffffff66;background:#ffffff1f}
#touch-pad .touch-knob{background:radial-gradient(circle at 40% 35%,var(--t-card),var(--t-line-soft));box-shadow:0 2px 6px #0005}
/* The battle menu (the "Battle · Solid · HUD · Battle Menu" design). */
.battle-menu.la-bmenu{width:320px;padding:0;border:1.5px solid var(--t-line-2);outline:0;border-radius:16px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 18px 40px #0b1e3d99;overflow:hidden;transform:scale(var(--la-fit,1));font:800 11px/1.25 Nunito,"Segoe UI",system-ui,sans-serif}
.battle-menu.la-bmenu::backdrop{background:#0b1e3d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.la-bmenu .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.la-bmenu .la-modal-head h2{margin:0;padding:0;background:none;font:16px/1 "Lilita One","Arial Black",sans-serif;text-shadow:0 1.5px 0 var(--t-blue-dk)}
.la-bmenu-body{display:flex;flex-direction:column;gap:8px;padding:10px 12px 12px}
.la-bmenu-info{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card)}
.la-bmenu-info .la-room-mode-thumb{width:34px;height:34px;flex:none;border-radius:7px;background:var(--t-panel-2) var(--room-mode-survival) center/cover no-repeat}
.la-bmenu-info .la-room-mode-thumb[data-mode-icon="team"]{background-image:var(--room-mode-team)}.la-bmenu-info .la-room-mode-thumb[data-mode-icon="catch"]{background-image:var(--room-mode-catch)}.la-bmenu-info .la-room-mode-thumb[data-mode-icon="gangsi"]{background-image:var(--room-mode-gangsi)}.la-bmenu-info .la-room-mode-thumb[data-mode-icon="plaza"]{background-image:var(--room-mode-plaza)}
.la-bmenu-info span{display:flex;flex-direction:column;gap:2px;min-width:0}
.la-bmenu-info b{font:900 12px/1.15 Nunito,sans-serif}
.la-bmenu-info small{color:var(--t-muted);font:800 9.5px/1.2 Nunito,sans-serif}
.la-bmenu #battle-menu-description{margin:0;padding:0;color:var(--t-muted);font:800 9.5px/1.3 Nunito,sans-serif;text-align:center}
.la-bmenu .battle-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0}
.la-bmenu .battle-menu-actions .la-btn{min-height:0;height:34px;margin:0;padding:0 10px;font-size:13px;color:#fff}
.la-bmenu .battle-menu-actions .la-btn.big{grid-column:1/-1;height:40px;font-size:17px}
.la-bmenu .battle-menu-actions #battle-menu-resume{border-color:var(--t-go-dk);background:linear-gradient(var(--t-go-hi),var(--t-go));box-shadow:0 3px 0 var(--t-go-dk)}

/* The final ranking and awards in the Lost Arena look (the "Battle · Solid ·
   Results · Scoreboard / Awards" designs, for victory, defeat and draw): a
   798x365 window with the outcome in its title bar, the ranking (both teams
   side by side in team modes) with each player's place, KOs, deaths and
   contribution, and the award cards beside it. The original result art is
   not drawn. */
body .battle-screen #battle-results.battle-results{position:absolute;z-index:15;left:50%;top:50%;width:798px;height:365px;max-height:none;padding:0;display:grid;grid-template-columns:1fr 300px;grid-template-rows:46px auto minmax(0,1fr) auto;gap:0 10px;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 18px 40px #0b1e3d99;overflow:hidden;transform:translate(-50%,-50%) scale(var(--la-fit,1));font:800 11px/1.25 Nunito,"Segoe UI",system-ui,sans-serif}
body .battle-screen #battle-results.battle-results::before{content:"Victory";position:static;grid-column:1/-1;grid-row:1;width:auto;height:auto;display:flex;align-items:center;padding:0 14px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));border-bottom:1.5px solid var(--t-blue-dk);color:#ffd27a;font:26px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 2px 0 var(--t-accent-dk),0 3px 6px #0005;background-image:linear-gradient(var(--t-blue-hi),var(--t-blue))}
body .battle-screen #battle-results.battle-results[data-outcome="lose"]::before{content:"Defeat";color:#dce5f1;text-shadow:0 2px 0 var(--t-ink-2)}
body .battle-screen #battle-results.battle-results[data-outcome="draw"]::before{content:"Draw";color:#e3c8ff;text-shadow:0 2px 0 #7a3fc4}
body .battle-screen #battle-results.battle-results #battle-results-title{display:none}
body .battle-screen #battle-results.battle-results .battle-results-headline{position:absolute;left:170px;top:11px;margin:0;padding:5px 12px;border-radius:999px;background:#12305e66;color:#fff;font:900 11px/1.2 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.3px}
body .battle-screen #battle-results.battle-results .battle-results-rows{grid-column:1;grid-row:2/4;position:relative;display:grid;grid-template-columns:1fr;grid-auto-rows:26px;align-content:start;gap:3px;margin:0;padding:10px 0 10px 10px;overflow:auto}
body .battle-screen #battle-results.battle-results[data-team="true"] .battle-results-rows{grid-template-columns:1fr 1fr;grid-auto-flow:row dense;column-gap:8px;padding-top:36px}
body .battle-screen #battle-results.battle-results[data-team="true"] .battle-results-rows li.blue{grid-column:1}body .battle-screen #battle-results.battle-results[data-team="true"] .battle-results-rows li.red{grid-column:2}
body .battle-screen #battle-results.battle-results .battle-results-rows li{position:static!important;top:auto!important;left:auto;display:grid;grid-template-columns:20px minmax(0,1fr) 40px 26px 38px;gap:6px;align-items:center;height:26px;padding:0 8px 0 4px;border:1px solid var(--t-line-soft);border-radius:8px;background:var(--t-card);color:var(--t-ink);font:900 10.5px/1 Nunito,sans-serif;box-sizing:border-box}
body .battle-screen #battle-results.battle-results .battle-results-rows li.red{border-color:var(--t-red-tint)}
body .battle-screen #battle-results.battle-results .battle-results-rows li.me{border:1.5px solid var(--t-accent);background:linear-gradient(var(--t-pick-hi),var(--t-pick));color:var(--t-ink)}
body .battle-screen #battle-results.battle-results .battle-results-rows li::before,body .battle-screen #battle-results.battle-results .battle-results-rows li::after{display:none}
body .battle-screen #battle-results.battle-results .result-rank{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--t-panel-2);color:var(--t-muted);font:900 9px/1 Nunito,sans-serif}
body .battle-screen #battle-results.battle-results li.me .result-rank,body .battle-screen #battle-results.battle-results li:first-child .result-rank{background:var(--t-accent);color:#fff}
body .battle-screen #battle-results.battle-results .battle-results-rows .result-name{max-width:none;font-weight:900;color:inherit}
body .battle-screen #battle-results.battle-results .battle-results-rows .result-kills{position:static;left:auto;text-align:right;color:var(--t-ink);font:900 10.5px/1 Nunito,sans-serif;opacity:1}
body .battle-screen #battle-results.battle-results .result-deaths{text-align:right;color:var(--t-muted)}
body .battle-screen #battle-results.battle-results .battle-results-rows .result-contribution{margin:0;text-align:right;color:var(--t-link);font-weight:900}
body .battle-screen #battle-results.battle-results li.red .result-contribution{color:#d23a4e}
body .battle-screen #battle-results.battle-results :is(#result-blue-title,#result-red-title){position:absolute;top:56px;display:none;margin:0;padding:4px 10px;border-radius:999px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font:10px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;text-shadow:none}
body .battle-screen #battle-results.battle-results #result-blue-title{left:14px}
body .battle-screen #battle-results.battle-results #result-red-title{left:calc((100% - 310px) / 2 + 14px);background:linear-gradient(#ff8a8a,#e04848)}
body .battle-screen #battle-results.battle-results[data-team="true"] :is(#result-blue-title,#result-red-title){display:block}
body .battle-screen #battle-results.battle-results .result-team-score{margin-left:6px;color:#fff;font-size:11px}
body .battle-screen #battle-results.battle-results #result-red-title .result-team-score{color:#fff}
body .battle-screen #battle-results.battle-results #battle-result-summary{grid-column:2;grid-row:2/4;position:relative;margin:10px 10px 10px 0;padding:10px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-card)}
body .battle-screen #battle-results.battle-results #battle-result-summary h2{position:static;margin:0 0 8px;color:var(--t-ink-2);font:12px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;text-shadow:none}
body .battle-screen #battle-results.battle-results #battle-result-summary dl{position:static;display:grid;grid-template-columns:1fr auto;gap:8px;margin:0;color:var(--t-ink);font:900 11px/1.2 Nunito,sans-serif}
body .battle-screen #battle-results.battle-results #battle-result-summary dt{color:var(--t-muted)}
body .battle-screen #battle-results.battle-results[data-awards] #battle-result-summary{display:none}
/* The award column fits between the title bar and the footer: the slots share
   its height (two rows) instead of a fixed 128 px that ran over the footer. */
body .battle-screen #battle-results.battle-results #battle-result-awards:not([hidden]){grid-column:2;grid-row:2/4;position:relative;left:auto;top:auto;display:flex;flex-direction:column;min-height:0;width:auto;height:auto;margin:10px 10px 10px 0;overflow:hidden}
body .battle-screen #battle-results.battle-results #battle-result-awards h2{position:static;margin:0 0 6px;color:var(--t-ink-2);font:12px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;text-shadow:none}
body .battle-screen #battle-results.battle-results #battle-result-awards ol{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:6px}
body .battle-screen #battle-results.battle-results .award-slot{position:relative!important;left:auto!important;top:auto!important;width:auto!important;height:auto!important;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:0 0 6px;border:1.5px solid var(--t-blue-hi);border-radius:12px;background:linear-gradient(#5b9be3,var(--t-blue-dk2));overflow:hidden;transform:none!important;opacity:1}
body .battle-screen #battle-results.battle-results .award-slot:nth-child(1){border-color:#ffd27a}
body .battle-screen #battle-results.battle-results .award-slot :is(.award-under,.award-title-back){display:none}
body .battle-screen #battle-results.battle-results .award-slot .award-title{position:static;order:0;align-self:stretch;padding:5px 4px;background:linear-gradient(var(--t-accent-hi),var(--t-accent));color:#fff;font:10px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-align:center;text-transform:uppercase;text-shadow:0 1px 0 var(--t-accent-dk)}
body .battle-screen #battle-results.battle-results .award-slot:nth-child(2) .award-title{background:linear-gradient(#d39bff,#a46be8);text-shadow:0 1px 0 #7a3fc4}
body .battle-screen #battle-results.battle-results .award-slot:nth-child(3) .award-title{background:linear-gradient(var(--t-blue-hi),var(--t-blue));text-shadow:0 1px 0 var(--t-blue-dk)}
body .battle-screen #battle-results.battle-results .award-slot:nth-child(4) .award-title{background:linear-gradient(var(--t-line-soft),var(--t-faint));text-shadow:0 1px 0 var(--t-muted-2)}
body .battle-screen #battle-results.battle-results .award-slot .award-hero{position:static!important;order:1;width:50px!important;height:50px!important;flex:none;margin:4px 0 0;border:3px solid #ffd27a;border-radius:50%;background-color:#12305e;background-size:cover!important;background-position:center!important;transform:none!important}
body .battle-screen #battle-results.battle-results .award-slot .award-desc{position:static;order:2;color:var(--t-gold-tint);font:900 9.5px/1.2 Nunito,sans-serif;text-align:center}
body .battle-screen #battle-results.battle-results .award-slot .award-name{position:static;order:3;color:#fff;font:900 10px/1.2 Nunito,sans-serif}
body .battle-screen #battle-results.battle-results .award-slot .award-empty{position:static;order:2;color:#ffffff80}
body .battle-screen #battle-results.battle-results .award-slot[data-state="hidden"]{opacity:.35}
body .battle-screen #battle-results.battle-results[hidden]{display:none}
.la-bmenu .battle-menu-actions .la-btn{border:1.25px solid var(--t-blue-dk);background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;box-shadow:0 3px 0 var(--t-blue-dk);text-shadow:0 1px 0 #0003}
.la-bmenu .battle-menu-actions #battle-menu-leave{border-color:#b83232;background:linear-gradient(#ff8a8a,#e04848);box-shadow:0 3px 0 #b83232}
/* The battle loading screen in the Lost Arena look (the "Battle · Solid ·
   Loading" design): the mode chip, map and team sizes, both teams with each
   player's hero around a VS medal, and the download bar at the bottom. */
.battle-loading{grid-template-rows:auto 1fr auto auto auto;place-content:stretch;justify-items:stretch;gap:8px;padding:calc(14px*var(--la-fit,1)) calc(30px*var(--la-fit,1));background:linear-gradient(90deg,var(--t-blue),#12305ecc 45%,#7a2f3ecc 55%,#c6372ae6),#12305e url('/art/hero-plaza-v2.webp') center/cover no-repeat;color:#fff;font:800 calc(11px*var(--la-fit,1))/1.25 Nunito,"Segoe UI",system-ui,sans-serif}
@supports (color:color-mix(in srgb,red 50%,blue)){.battle-loading{background:linear-gradient(90deg,color-mix(in srgb,var(--t-blue) 90%,transparent),#12305ecc 45%,#7a2f3ecc 55%,#c6372ae6),#12305e url('/art/hero-plaza-v2.webp') center/cover no-repeat}}
.la-load-head{display:flex;flex-direction:column;align-items:center;gap:calc(4px*var(--la-fit,1))}
.la-load-mode{padding:calc(4px*var(--la-fit,1)) calc(12px*var(--la-fit,1));border:1.5px solid #fff;border-radius:999px;background:linear-gradient(var(--t-accent-hi),var(--t-accent));color:#fff;font:calc(11px*var(--la-fit,1))/1 "Lilita One","Arial Black",sans-serif;font-style:normal;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 0 var(--t-accent-dk)}
.la-load-mode:empty{display:none}
.la-load-head strong{font:calc(28px*var(--la-fit,1))/1.05 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-shadow:0 2px 0 #12305e}
.la-load-head small{color:#dbe7f6;font:900 calc(10px*var(--la-fit,1))/1 Nunito,sans-serif}
.la-load-teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(24px*var(--la-fit,1));min-height:0}
.la-load-team{display:flex;flex-direction:column;gap:calc(5px*var(--la-fit,1));margin:0;padding:0;list-style:none;max-height:100%;overflow:hidden}
.la-load-team li{display:flex;align-items:center;gap:calc(8px*var(--la-fit,1));height:calc(34px*var(--la-fit,1));padding:0 calc(10px*var(--la-fit,1)) 0 calc(4px*var(--la-fit,1));border:1px solid #ffffff2e;border-radius:calc(10px*var(--la-fit,1));background:#0f2547d9}
.la-load-team li[data-me]{border:1.5px solid #ffd27a}
.la-load-portrait{width:calc(28px*var(--la-fit,1));height:calc(28px*var(--la-fit,1));flex:none;border-radius:50%;background:var(--t-blue-dk2) center/cover no-repeat}
.la-load-team b{font:900 calc(11px*var(--la-fit,1))/1 Nunito,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.la-load-team.red li{flex-direction:row-reverse;padding:0 calc(4px*var(--la-fit,1)) 0 calc(10px*var(--la-fit,1))}
.la-load-vs{display:grid;place-items:center;width:calc(70px*var(--la-fit,1));height:calc(70px*var(--la-fit,1));border:4px solid #fff;border-radius:50%;background:linear-gradient(var(--t-accent-hi),var(--t-accent));color:#fff;font:calc(26px*var(--la-fit,1))/1 "Lilita One","Arial Black",sans-serif;text-shadow:0 2px 0 var(--t-accent-dk);box-shadow:0 6px 18px #0006}
.la-load-team:empty{visibility:hidden}
.battle-loading .battle-spinner{display:none}
#battle-loading-text{justify-self:start;font:900 calc(11px*var(--la-fit,1))/1 Nunito,sans-serif}
.battle-loading .battle-loading-bar{width:100%;height:calc(10px*var(--la-fit,1));border-radius:999px;background:#ffffff26}
.battle-loading .battle-loading-bar::-webkit-progress-bar{background:#ffffff26;border-radius:999px}
.battle-loading .battle-loading-bar::-webkit-progress-value{background:linear-gradient(#ffd27a,var(--t-accent));border-radius:999px}
.battle-loading .battle-loading-detail{justify-self:end;color:#ffd27a;font:900 calc(10px*var(--la-fit,1))/1 Nunito,sans-serif}
/* The battle chat (the "Battle · Solid · HUD · Chat" design): the log keeps
   GlobalChatWnd's outlined rows with nothing behind them. On desktop the
   entry is the design's 292x30 bar at native size: #battle-chat is already
   scaled by --hud, so --la-fit on top made it ~1.8x, past the box and the
   screen edge, with the field and the close button squeezed. Touch keeps
   its unscaled fixed panel, sized by --la-fit and the Lost Arena look. */
#battle-chat-log:empty{display:none}
.battle-chat-entry{gap:5px;padding:4px;background:#051424dd;border:1px solid #8eb0c8;border-radius:5px}
.battle-chat-entry label{flex:none;color:#fff;font:700 12px/1 Arimo,Arial,sans-serif}
.battle-chat-entry input{flex:1;height:22px;padding:0 2px;color:#fff;font:12px/22px Arimo,Arial,sans-serif}
.battle-chat-entry input::placeholder{color:#ffffff80}
.battle-chat-entry #battle-chat-send{flex:none;height:22px;padding:0 8px;border:1.25px solid #2e8a3a;border-radius:6px;background:linear-gradient(#8bd677,#3e9e45);color:#fff;font:10px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.battle-chat-entry #battle-chat-close{flex:none;width:22px;height:22px;padding:0;border:1px solid #8a97a8;border-radius:6px;background:linear-gradient(#c9d2de,#a7b3c3);color:#fff;font:900 14px/1 Nunito,sans-serif}
body[data-touch="on"] .battle-chat-entry{gap:calc(6px*var(--la-fit,1));height:auto;padding:calc(6px*var(--la-fit,1));border:1.5px solid var(--t-line-2);border-radius:calc(12px*var(--la-fit,1));background:var(--t-panel)}
body[data-touch="on"] .battle-chat-entry label{padding:calc(5px*var(--la-fit,1)) calc(10px*var(--la-fit,1));border-radius:calc(8px*var(--la-fit,1));background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font:calc(10px*var(--la-fit,1))/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
body[data-touch="on"] .battle-chat-entry input{height:calc(28px*var(--la-fit,1));padding:0 calc(10px*var(--la-fit,1));border:1.5px solid var(--t-blue);border-radius:calc(8px*var(--la-fit,1));background:var(--t-card);color:var(--t-ink);font:800 calc(11px*var(--la-fit,1))/1 Nunito,sans-serif}
body[data-touch="on"] .battle-chat-entry input::placeholder{color:revert}
body[data-touch="on"] .battle-chat-entry #battle-chat-send{height:calc(28px*var(--la-fit,1));padding:0 calc(12px*var(--la-fit,1));border:1.25px solid var(--t-go-dk);border-radius:calc(8px*var(--la-fit,1));background:linear-gradient(var(--t-go-hi),var(--t-go));font-size:calc(11px*var(--la-fit,1))}
body[data-touch="on"] .battle-chat-entry #battle-chat-close{height:calc(28px*var(--la-fit,1));width:calc(28px*var(--la-fit,1));border-color:var(--t-muted-2);border-radius:calc(8px*var(--la-fit,1));background:linear-gradient(var(--t-line-soft),var(--t-faint));font-size:calc(14px*var(--la-fit,1))}

/* Options in the Lost Arena look (the "Lobby · Options · Graphics / Sound /
   Controls" designs): a 742x365 window, the tab list on the left and each
   setting as a row with its control on the right. The original
   GameOptionWnd art is not drawn. */
.game-options.la-options{width:742px;height:365px;display:grid;grid-template-columns:150px 1fr;grid-template-rows:42px 1fr 48px;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 18px 40px #0b1e3d99;overflow:hidden;transform:translate(-50%,-50%) scale(var(--la-fit,1));font:800 11px/1.25 Nunito,"Segoe UI",system-ui,sans-serif}
.game-options.la-options::backdrop{background:#0b1e3d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.game-options.la-options::before,.game-options.la-options .original-button::before{display:none}
.game-options.la-options .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.game-options.la-options .la-modal-head{grid-column:1/-1}
.game-options.la-options .la-modal-head h2{position:static;-webkit-text-stroke:0;color:#fff;font:16px/1 "Lilita One","Arial Black",sans-serif}
.game-options.la-options .options-close{position:static;left:auto;top:auto;display:grid;place-items:center;width:30px;height:30px;border:1.25px solid #b83232;border-radius:9px;background:linear-gradient(#ff8a8a,#e04848);color:#fff;font-size:16px;box-shadow:0 2px 0 #b83232}
.game-options.la-options .options-tabs{position:static;grid-row:2/4;display:flex;flex-direction:column;gap:6px;padding:10px;border-right:1px solid var(--t-panel-2)}
.game-options.la-options .options-tabs button{display:flex;align-items:center;gap:8px;width:auto;height:38px;padding:0 12px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card);color:var(--t-ink);font:12px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.game-options.la-options .options-tabs button .ui-i{font-size:15px}
.game-options.la-options .options-tabs button[aria-pressed="true"]{--ui-normal:none!important;border:1.25px solid var(--t-blue-dk);background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;box-shadow:0 2px 0 var(--t-blue-dk)}
.game-options.la-options .options-page{position:static;grid-column:2;grid-row:2;width:auto;height:auto;padding:10px 12px;overflow-y:auto;overscroll-behavior:contain}
.game-options.la-options .graphics-presets{position:static;display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--t-panel-2)}
.game-options.la-options .graphics-presets .original-button{width:auto;height:26px;padding:0 9px;border-radius:7px;background:none;color:var(--t-ink-2);font:900 10.5px/1 Nunito,sans-serif;--ui-normal:none!important}
.game-options.la-options .graphics-presets .original-button[aria-pressed="true"],.game-options.la-options .graphics-presets .original-button.selected{background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff}
.game-options.la-options .graphics-fields{position:static;display:flex;flex-direction:column;gap:6px;margin-top:6px}
.game-options.la-options .la-opt-row{position:static;display:flex!important;align-items:center;justify-content:space-between;gap:10px;min-height:40px;margin:0;padding:4px 6px 4px 12px;border:1px solid var(--t-line);border-radius:11px;background:var(--t-card);box-sizing:border-box;color:var(--t-ink);font:900 11.5px/1 Nunito,sans-serif}
.game-options.la-options .la-opt-name{display:flex;align-items:center;gap:8px}
.game-options.la-options .la-opt-name .ui-i{font-size:14px;color:var(--t-ink-2)}
.game-options.la-options .la-opt-row select{position:static;width:auto;min-width:130px;height:30px;padding:0 8px;border:0;border-radius:8px;background:var(--t-panel-2);color:var(--t-ink);font:900 11px/1 Nunito,sans-serif}
.game-options.la-options .la-opt-row #options-fullscreen{height:30px;padding:0 12px;border:1.25px solid var(--t-blue-dk);border-radius:8px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;text-transform:uppercase}
.game-options.la-options .graphics-fields>p{margin:2px 4px;color:var(--t-muted);font:800 9.5px/1.35 Nunito,sans-serif}
.game-options.la-options .la-opt-group{display:flex;align-items:center;gap:6px;margin:4px 2px 6px;color:var(--t-ink-2);font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase}
.game-options.la-options #options-controls>p{margin:4px 4px 8px;color:var(--t-muted);font:800 9.5px/1.35 Nunito,sans-serif}
.game-options.la-options #options-data>p{margin:6px 4px 4px;color:var(--t-muted);font:800 9.5px/1.35 Nunito,sans-serif}.game-options.la-options #options-data #options-download{width:18px;height:18px;margin:0 6px 0 0;accent-color:var(--t-blue)}.game-options.la-options .la-dl-card{display:grid;gap:6px;margin:6px 0 8px;padding:8px 10px;border:1px solid var(--t-line);border-radius:11px;background:var(--t-card)}.game-options.la-options .la-dl-card[data-state="updating"]{border-color:#8fd3e2;background:#f1fbfd}.game-options.la-options #options-download-status{margin:0;color:var(--t-blue);font:900 11px/1.3 Nunito,sans-serif}.game-options.la-options .la-dl-card[data-state="updating"] #options-download-status{color:#0e7c93}.game-options.la-options .la-dl-card[data-state="full"] #options-download-status,.game-options.la-options .la-dl-card[data-state="failed"] #options-download-status{color:#c0392b}.game-options.la-options .la-dl-bar{height:8px;border-radius:999px;background:var(--t-panel-2);overflow:hidden}.game-options.la-options .la-dl-bar i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--t-blue-hi),var(--t-blue));transition:width .4s}.game-options.la-options .la-dl-card[data-state="updating"] .la-dl-bar i{background:linear-gradient(90deg,#5fd0e6,#0e7c93)}.game-options.la-options .la-dl-card[data-state="done"] .la-dl-bar i{background:linear-gradient(90deg,#6fd77a,#3e9e45)}.game-options.la-options .la-dl-meta{display:flex;align-items:center;gap:6px;justify-content:space-between;color:var(--t-muted);font:800 9.5px/1.2 Nunito,sans-serif}.game-options.la-options .la-dl-battle{padding:3px 7px;border-radius:999px;background:#fff3e0;color:#c7660e;font:900 9px/1 Nunito,sans-serif;font-style:normal}.game-options.la-options .la-dl-card[data-state="off"] :is(.la-dl-bar,.la-dl-battle){display:none}.game-options.la-options .la-dl-storage #options-download-usage{color:var(--t-muted);font:800 10px/1 Nunito,sans-serif}.game-options.la-options #options-download-clear{height:24px;padding:0 10px;border:1px solid #e3a0a0;border-radius:7px;background:#fff;color:#c0392b;font:900 10px/1 Nunito,sans-serif}
.la-dl-wrap{position:relative;display:flex}.la-taskbar .la-dl-chip{display:flex;align-items:center;gap:7px;height:34px;padding:0 10px 0 7px;border:1px solid #5c93da;border-radius:9px;background:#0f3b78;color:#fff;cursor:pointer}.la-taskbar .la-dl-chip[hidden]{display:none}.la-dl-ring{width:20px;height:20px;flex:none;transform:rotate(-90deg)}.la-dl-ring circle{fill:none;stroke-width:3.4}.la-dl-ring .track{stroke:rgb(255 255 255/.2)}.la-dl-ring .fill{stroke:#ffd27a;stroke-linecap:round;transition:stroke-dasharray .4s}.la-dl-text{display:grid;gap:1px;text-align:left}.la-dl-text b{font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px}.la-dl-text small{color:#bfd6f5;font:900 9px/1.1 Nunito,sans-serif}.la-dl-chip[data-state="starting"] .la-dl-ring .fill{stroke-dasharray:12 100;animation:la-dl-spin 1.2s linear infinite;transform-origin:50% 50%}@keyframes la-dl-spin{to{transform:rotate(360deg)}}.la-dl-chip[data-state="updating"]{border-color:#3fb5cf;background:#0b4a5c}.la-dl-chip[data-state="updating"] .fill{stroke:#6fe3ff}.la-dl-chip[data-state="updating"] small{color:#bdeffa}.la-dl-chip[data-state="done"]{border-color:#4fb862;background:#13532a}.la-dl-chip[data-state="done"] .fill{stroke:#5bd16a}.la-dl-chip[data-state="done"] small{color:#c3f0ca}.la-dl-chip[data-state="full"]{border-color:#d2675b;background:#5a1a1a}.la-dl-chip[data-state="full"] .fill{stroke:#ff8a7a}.la-dl-chip[data-state="full"] small{color:#f7cbc4}.la-dl-chip[data-state="failed"]{border-color:#d69a3b;background:#5a3a0a}.la-dl-chip[data-state="failed"] .fill{stroke:#ffb347}.la-dl-chip[data-state="failed"] small{color:#f6dfb8}.la-dl-hint{position:absolute;right:0;bottom:calc(100% + 12px);width:232px;padding:9px 11px;border:1px solid #c5d1e0;border-radius:10px;background:#fff;color:#5b7290;box-shadow:0 4px 12px rgb(11 37 77/.25);z-index:6}.la-dl-hint[hidden]{display:none}.la-dl-hint::after{content:"";position:absolute;right:48px;bottom:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fff}.la-dl-hint-head{display:flex;align-items:center;justify-content:space-between}.la-dl-hint-head b{color:#23395b;font:12px/1.2 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px}.la-dl-hint-head button{border:0;background:none;color:#8a9bb2;font:900 16px/1 Nunito,sans-serif;cursor:pointer}.la-dl-hint p{margin:5px 0 0;font:800 9.5px/1.35 Nunito,sans-serif}@media(max-width:620px){.la-dl-text small{display:none}}
.game-options.la-options #options-keys{padding:8px 10px;border:1px solid var(--t-line);border-radius:11px;background:var(--t-card);color:var(--t-ink)!important;font:900 10.5px/1.5 Nunito,sans-serif!important}
.game-options.la-options .la-opt-note{display:flex;align-items:center;gap:6px;margin:0 0 8px;color:var(--t-muted);font:800 10px/1.3 Nunito,sans-serif}
.game-options.la-options #options-sound #volume-panel{gap:6px;margin:0}
.game-options.la-options #options-sound #volume-panel label{display:grid!important;grid-template-columns:120px 1fr;align-items:center;min-height:40px;padding:0 12px;border:1px solid var(--t-line);border-radius:11px;background:var(--t-card);color:var(--t-ink);font:900 11.5px/1 Nunito,sans-serif}
.game-options.la-options #options-sound #volume-panel input[type=range]{accent-color:var(--t-blue)}
.game-options.la-options #options-sound #volume-panel button{align-self:flex-start;height:32px;padding:0 14px;border:1.25px solid var(--t-blue-dk);border-radius:9px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;text-transform:uppercase}
.game-options.la-options #options-sound #volume-panel style{display:none}
.game-options.la-options .options-actions{position:static;grid-column:1/-1;grid-row:3;display:flex;align-items:center;gap:8px;width:auto;padding:0 12px;border-top:1px solid var(--t-panel-2)}
.game-options.la-options .options-actions button{display:flex!important;align-items:center;justify-content:center;gap:6px;width:auto!important;height:34px!important;margin:0!important;padding:0 16px;border-radius:10px;color:#fff;font:13px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.game-options.la-options .options-actions .ui-i{stroke-width:2.8}
.game-options.la-options #options-defaults{border:1px solid var(--t-line);background:var(--t-card);color:var(--t-ink);font:900 11px/1 Nunito,sans-serif;text-transform:none;letter-spacing:0}
.game-options.la-options #options-cancel{border:1.25px solid var(--t-muted-2);background:linear-gradient(var(--t-line-soft),var(--t-faint));box-shadow:0 3px 0 var(--t-muted-2)}
.game-options.la-options #options-apply{border:1.25px solid var(--t-blue-dk);background:linear-gradient(var(--t-blue-hi),var(--t-blue));box-shadow:0 3px 0 var(--t-blue-dk)}
.game-options.la-options #options-ok{border:1.25px solid var(--t-go-dk);background:linear-gradient(var(--t-go-hi),var(--t-go));box-shadow:0 3px 0 var(--t-go-dk)}
.game-options.la-options #options-status{position:absolute;left:162px;bottom:56px;margin:0;color:var(--t-go-text);font:900 10px/1 Nunito,sans-serif}
.game-options.la-options #options-art-status{display:none}
/* Support the server / Install the game in the Lost Arena look (the
   "Lobby · Solid · Support the Server / Install the Game" designs). */
.donate-dialog{width:500px;max-width:calc(100vw - 24px);padding:0 14px 12px;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 18px 40px #0b1e3d99;font:800 11px/1.35 Nunito,"Segoe UI",system-ui,sans-serif;transform:scale(min(1,var(--la-fit,1)))}
.donate-dialog::backdrop{background:#0b1e3d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.donate-dialog h2{display:flex;align-items:center;gap:8px;height:42px;margin:0 -14px 10px;padding:0 14px;background:linear-gradient(#ff8a8a,#e04848);border-bottom:1.5px solid #b83232;color:#fff;font:16px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;text-shadow:0 1.5px 0 #b83232}
.donate-dialog h2::before{content:"♥";font-size:17px}
.install-dialog h2{background:linear-gradient(var(--t-blue-hi),var(--t-blue));border-bottom-color:var(--t-blue-dk);text-shadow:0 1.5px 0 var(--t-blue-dk)}
.install-dialog h2::before{content:"📲"}
.donate-dialog p{color:var(--t-ink-2);font:800 10.5px/1.4 Nunito,sans-serif}
#donate-lede{color:var(--t-ink);font:900 11.5px/1.4 Nunito,sans-serif}
.donate-tabs{gap:3px;padding:3px;border:0;border-radius:10px;background:var(--t-panel-2)}
.donate-tab{height:30px;padding:0;border:0;border-radius:8px;background:none;color:var(--t-ink-2);font:900 11.5px/1 Nunito,sans-serif}
.donate-tab[aria-selected="true"]{border:0;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff}
/* The QRIS card is big enough to scan from a phone held to the screen. */
#donate-panel-qris:not([hidden]){display:flex;justify-content:center}
#donate-panel-qris .donate-qris{width:auto;height:auto;max-width:100%;max-height:max(240px,calc(100vh - 290px));max-height:max(240px,calc(100dvh - 290px));margin:0;border:1px solid var(--t-line);border-radius:12px;background:var(--t-card)}
.donate-address code{border:1px solid var(--t-line);border-radius:9px;color:var(--t-ink)}
.donate-warning{border-radius:10px}
.donate-discord{padding:8px 12px;border:1px solid #c9cdf7;border-radius:10px;background:#eceefe;color:#3b45b8!important;font-weight:900!important}
.donate-discord a{color:#4f5ce0}
.install-dialog ol{margin:0 0 10px;padding:8px 12px 8px 30px;border:1px solid var(--t-line);border-radius:11px;background:var(--t-card);color:var(--t-ink);font:800 11px/1.6 Nunito,sans-serif}
.donate-dialog form{padding-top:8px;border-top:1px solid var(--t-panel-2)}
.donate-dialog form .button,.donate-full-actions .button{min-height:0;height:34px;padding:0 22px;border:1.25px solid var(--t-muted-2);border-radius:10px;background:linear-gradient(var(--t-line-soft),var(--t-faint));color:#fff;font:14px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;box-shadow:0 3px 0 var(--t-muted-2)}
.donate-full-actions .button-gold,#donate-copy{border-color:var(--t-accent-dk)!important;background:linear-gradient(var(--t-accent-hi),var(--t-accent))!important;box-shadow:0 3px 0 var(--t-accent-dk)!important;color:#fff!important}
.donate-busy{border:1px solid #f0b8bf;background:var(--t-red-tint);color:#d23a4e}
/* "Connection lost" (the "Lobby · Solid · Connection Lost" design). */
.la-offline{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#0b1e3d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.la-offline[hidden]{display:none}
.la-offline .ui-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.la-offline-card{width:340px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 18px 16px;border:1.5px solid var(--t-line-2);border-radius:18px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 18px 40px #0b1e3d99;transform:scale(var(--la-fit,1));font:800 11px/1.35 Nunito,sans-serif;text-align:center}
.la-offline-icon{display:grid;place-items:center;width:60px;height:60px;border:3px solid #fff;border-radius:50%;background:linear-gradient(var(--t-accent-hi),var(--t-accent));color:#fff;font-size:28px;box-shadow:0 4px 12px #c46f1466}
.la-offline-card h2{margin:4px 0 0;font:20px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.la-offline-card p{margin:0;color:var(--t-ink-2);font:900 11px/1.35 Nunito,sans-serif}
.la-offline-bar{width:100%;height:8px;border-radius:999px;background:var(--t-panel-2);overflow:hidden}
.la-offline-bar i{display:block;width:40%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--t-blue-hi),var(--t-blue));animation:la-offline 1.4s ease-in-out infinite}
@keyframes la-offline{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@media(prefers-reduced-motion:reduce){.la-offline-bar i{animation:none}}
.la-offline-actions{display:flex;gap:8px;width:100%;margin-top:4px}
.la-offline-actions .la-btn{flex:1;height:36px;padding:0 10px;font-size:13px}
/* A refused start: "Servers are full" (the "Room · Solid · Servers Full"
   design) on the support dialog's busy reasons. */
.donate-dialog:is([data-reason="matches"],[data-reason="full"],[data-reason="busy"]) h2{background:linear-gradient(var(--t-accent-hi),var(--t-accent));border-bottom-color:var(--t-accent-dk);text-shadow:0 1.5px 0 var(--t-accent-dk);font-size:0}
.donate-dialog:is([data-reason="matches"],[data-reason="full"],[data-reason="busy"]) h2::before{content:"⚡";font-size:17px}
.donate-dialog:is([data-reason="matches"],[data-reason="full"]) h2::after{content:"Servers are full";font-size:16px}
.donate-dialog[data-reason="busy"] h2::after{content:"Servers are busy";font-size:16px}
.donate-full-actions{flex-direction:column;flex-wrap:nowrap}
.donate-full-actions .button{width:100%;height:46px!important;justify-content:flex-start;text-align:left;font-size:15px!important}
.donate-full-actions .button-quiet{border-color:var(--t-blue-dk)!important;background:linear-gradient(var(--t-blue-hi),var(--t-blue))!important;box-shadow:0 3px 0 var(--t-blue-dk)!important}
.donate-full-actions .button-gold{border-color:var(--t-go-dk)!important;background:linear-gradient(var(--t-go-hi),var(--t-go))!important;box-shadow:0 3px 0 var(--t-go-dk)!important}
/* The login card in the Lost Arena look (the "Landing · Live Lobby Preview"
   designs' login panel): a gold-rimmed card on the right with the guest
   head, the INFINITE SAGA title, Discord, "or guest", the name and Play now,
   the connection line and what the game offers. */
.la-login .ui-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* "Turn your phone" (the "Phone Portrait · Rotate to Play" design). */
.touch-rotate{gap:12px;background:linear-gradient(#12305ef0,#0b1e3df5),#12305e url('/art/hero-plaza-v2.webp') center/cover no-repeat;font:800 14px/1.45 Nunito,"Segoe UI",system-ui,sans-serif;text-align:center}
.touch-rotate strong{color:var(--t-accent-hi);font:30px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 3px 0 var(--t-accent-dk)}
.touch-rotate p{max-width:300px;margin:0;color:#dbe7f6}
.la-rotate-art{width:96px;height:96px;margin-bottom:10px;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 4px 10px #0006)}
.la-rotate-phone{transform-box:fill-box;transform-origin:center;animation:la-rotate 2.4s ease-in-out infinite}
.la-rotate-arrow{stroke:#ffd27a}
@keyframes la-rotate{0%,30%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
@media(prefers-reduced-motion:reduce){.la-rotate-phone{animation:none}}
#touch-rotate{padding:9px 16px;border:1px solid #ffffff38;border-radius:999px;background:#ffffff1a;color:#fff;font:900 12px/1 Nunito,sans-serif}
.game-options.la-options:not([open]){display:none}
.game-options.la-options .options-tabs{grid-column:1}
.game-options.la-options .options-page{grid-column:2}
.game-options.la-options .la-opt-row #options-fullscreen{flex:none;width:auto!important;min-width:150px}
/* Options · Interface (the "Lobby · Options · Interface" design). */
.game-options.la-options .la-new{margin-left:auto;padding:2px 6px;border-radius:999px;background:var(--t-accent);color:#fff;font:8px/1.2 "Lilita One",sans-serif;font-style:normal;letter-spacing:.3px}
.la-theme-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.la-theme-choice{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:5px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card);color:var(--t-ink);cursor:pointer;text-align:center}
.la-theme-choice[aria-pressed="true"]{border:2px solid var(--t-accent);padding:4px;background:linear-gradient(var(--t-pick-hi),var(--t-pick))}
.la-theme-choice b{font:900 9.5px/1.1 Nunito,"Segoe UI",system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.la-theme-art{display:flex;height:22px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px #0002}
.la-theme-art i{flex:1}.la-theme-art i:nth-child(1){background:var(--a)}.la-theme-art i:nth-child(2){flex:2;background:var(--b)}.la-theme-art i:nth-child(3){background:var(--c)}
.la-style-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.la-style-choice{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:7px 9px 9px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-card);color:var(--t-ink);text-align:left;cursor:pointer}
.la-style-choice[aria-pressed="true"]{border:2px solid var(--t-accent);padding:6px 8px 8px;background:linear-gradient(var(--t-pick-hi),var(--t-pick))}
.la-style-choice b{font:13px/1.1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.la-style-choice[aria-pressed="true"] b{color:var(--t-accent-text)}
.la-style-choice small{color:var(--t-muted);font:800 9.5px/1.2 Nunito,sans-serif}
.la-style-art{position:relative;display:block;align-self:stretch;height:58px;margin-bottom:3px;border-radius:8px;background:url('/art/hero-plaza-v2.webp') center/cover no-repeat;overflow:hidden}
.la-style-art i{position:absolute;top:8px;bottom:8px;border-radius:6px;background:var(--t-panel);box-shadow:inset 0 9px 0 var(--t-blue-hi)}
.la-style-art i:first-child{left:8px;width:52%}.la-style-art i:last-child{right:8px;width:30%}
.la-style-art.glass i{background:rgb(var(--t-panel-rgb)/.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.la-seg{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--t-panel-2)}
.la-seg button{height:26px;padding:0 12px;border:0;border-radius:7px;background:none;color:var(--t-ink-2);font:900 10.5px/1 Nunito,sans-serif;cursor:pointer}
.la-seg button[aria-pressed="true"]{background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff}
.la-toggle{position:relative;width:44px;height:24px;padding:0;border:0;border-radius:999px;background:var(--t-line-soft);cursor:pointer}
.la-toggle i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--t-card);box-shadow:0 1px 3px #0004;transition:left .15s}
.la-toggle[aria-checked="true"]{background:var(--t-go)}
.la-toggle[aria-checked="true"] i{left:23px}
/* The Glass lobby style (body[data-ui-style="glass"]): frosted panels that
   let the arena show through, at three strengths. */
body[data-ui-style="glass"]{--glass-a:.62;--glass-blur:14px}
body[data-ui-style="glass"][data-ui-glass="light"]{--glass-a:.78;--glass-blur:8px}
body[data-ui-style="glass"][data-ui-glass="strong"]{--glass-a:.42;--glass-blur:22px}
body[data-ui-style="glass"] :is(.la-window,.la-player,.inv-rail,.inv-main,.la-room-chat,.la-dlg-win,.la-room-settings,.la-hb,.la-soldier,.la-options,.la-bmenu,.donate-dialog,.la-offline-card){background-color:rgb(var(--t-panel-rgb)/var(--glass-a))!important;-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.3);backdrop-filter:blur(var(--glass-blur)) saturate(1.3)}
body[data-ui-style="glass"] :is(.room-row,.la-modes>button,.lobby-chat,.inv-card,.la-opt-row,.inventory-row,.la-player-soon){background:rgb(var(--t-card-rgb)/calc(var(--glass-a) + .15))!important}
body[data-ui-style="glass"] .la-modes>button:is(.selected){background:linear-gradient(var(--t-blue-hi),var(--t-blue))!important}
body[data-ui-style="glass"] .la-taskbar{background:linear-gradient(rgb(47 107 192/var(--glass-a)),rgb(30 78 146/calc(var(--glass-a) + .2)));-webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
body[data-ui-blur="on"][data-screen="lobby"] .backdrop,body[data-ui-blur="on"][data-screen="room"] .backdrop{filter:blur(6px);transform:scale(1.04)}
.la-load-team:has(li:nth-child(6)){gap:calc(3px*var(--la-fit,1))}
.la-load-team:has(li:nth-child(6)) li{height:calc(22px*var(--la-fit,1))}
.la-load-team:has(li:nth-child(6)) .la-load-portrait{width:calc(18px*var(--la-fit,1));height:calc(18px*var(--la-fit,1))}
/* The keyboard battle HUD (the "Battle · HUD · Desktop (keyboard)"
   design): the pause button at the top left with the ping beside it, the
   chat at the bottom left, and MiniSoldierSelectWnd's hero bar over
   SkillListWnd's skills at the bottom centre, both at the original's place
   and size (the base `.hero-bar` and `.skill-bar` rules, in --hud units).
   The hero bar is scaled as a whole (`scale(var(--hud))`), so its slots are
   sized in UI pixels: 36 px slots 40 apart from x 16. */
body:not([data-touch="on"]) .battle-menu-open{left:max(calc(12px*var(--la-fit,1)),env(safe-area-inset-left));right:auto;top:calc(10px*var(--la-fit,1));width:calc(42px*var(--la-fit,1));height:calc(42px*var(--la-fit,1));min-height:0;padding:0;border:1.5px solid #ffffffd9;border-radius:calc(12px*var(--la-fit,1));background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:transparent;font-size:0;box-shadow:0 2px 0 var(--t-blue-dk),0 4px 10px #0004}
body:not([data-touch="on"]) #battle-ping{left:calc(max(calc(12px*var(--la-fit,1)),env(safe-area-inset-left)) + 52px*var(--la-fit,1));top:calc(31px*var(--la-fit,1))}
body:not([data-touch="on"]) .battle-menu-open::before{content:"";position:absolute;inset:28%;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='3' width='5' height='18' rx='1'/%3E%3Crect x='5' y='3' width='5' height='18' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='14' y='3' width='5' height='18' rx='1'/%3E%3Crect x='5' y='3' width='5' height='18' rx='1'/%3E%3C/svg%3E") center/contain no-repeat}
.battle-footer{border-top:0;background:none;padding:0;pointer-events:none}
.battle-footer>*{pointer-events:auto}
body:not([data-touch="on"]) .hero-bar .hero-bar-slot{width:36px!important;height:36px!important;min-width:36px;border:1.5px solid #ffffffb3;border-radius:9px;background:#12305ecc;overflow:visible}
body:not([data-touch="on"]) .hero-bar .hero-bar-slot[aria-pressed="true"]{border-color:#ffd27a;background:var(--t-blue);box-shadow:0 0 0 1.5px #ee8f2299}
body:not([data-touch="on"]) .hero-bar .hero-bar-icon{position:absolute;inset:1.5px!important;width:auto!important;height:auto!important;border-radius:7px!important;background-size:cover!important;background-position:center!important;transform:none!important}
body:not([data-touch="on"]) .hero-bar .hero-bar-slot kbd{z-index:1;left:auto;top:auto;right:-3px;bottom:-3px;display:grid;place-items:center;width:auto;height:14px;min-width:14px;padding:0 3px;box-sizing:border-box;border:1px solid var(--t-line);border-radius:4px;background:var(--t-card);color:var(--t-ink);font:900 9px/1 Nunito,sans-serif;text-shadow:none;box-shadow:0 1px 2px #0005}
body:not([data-touch="on"]) .hero-bar .hero-bar-slot kbd::before{display:none}
body:not([data-touch="on"]) .hero-bar .hero-bar-slot[aria-pressed="true"] kbd{border-color:#ffd27a;background:#ffd27a;color:#3a2600}
body:not([data-touch="on"]) .hero-bar .hero-bar-page{border-radius:4px}
body:not([data-touch="on"]) .hero-bar #battle-heroes-open{left:274px;top:0;height:36px;min-height:0;width:auto;padding:0 10px;border-radius:9px;font-size:12px}
.hero-bar-slot{width:calc(42px*var(--la-fit,1));height:calc(42px*var(--la-fit,1));border:2px solid #ffffffb3;border-radius:calc(10px*var(--la-fit,1));background:#12305ecc;overflow:visible}
.hero-bar-slot[aria-pressed="true"]{border-color:#ffd27a;background:var(--t-blue);box-shadow:0 0 0 2px #ee8f2299}
.hero-bar-slot kbd{right:-5px;bottom:-5px;min-width:calc(14px*var(--la-fit,1));padding:1px 3px;border:1px solid var(--t-line);border-radius:4px;background:var(--t-card);color:var(--t-ink);font:900 calc(9px*var(--la-fit,1))/1.2 Nunito,sans-serif}
.hero-bar-page{border:1.5px solid #ffffffb3;border-radius:8px;background:#12305ecc}
.skill-slot .skill-key{border:1px solid var(--t-line);border-radius:5px;background:var(--t-card);color:var(--t-ink);font-family:Nunito,sans-serif;font-weight:900}
#battle-heroes-open{height:calc(44px*var(--la-fit,1));padding:0 calc(10px*var(--la-fit,1));border:1.5px solid #ffffffb3;border-radius:calc(10px*var(--la-fit,1));background:#12305ecc;color:#fff;font:calc(12px*var(--la-fit,1))/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;text-transform:uppercase}
body .battle-screen #battle-results.battle-results .battle-results-rows{left:auto;top:auto;width:auto;height:auto;min-height:0}
body .battle-screen #battle-results.battle-results .battle-results-rows li{width:auto}
body .battle-screen #battle-results.battle-results[data-team="true"] .battle-results-rows li.blue{grid-column:1}
body .battle-screen #battle-results.battle-results[data-team="true"] .battle-results-rows li.red{grid-column:2}
body .battle-screen #battle-results.battle-results #battle-result-summary dd{color:var(--t-ink);text-align:right}
body .battle-screen #battle-results.battle-results #battle-result-summary dl{grid-template-columns:1fr auto}
/* Scaled dialogs centre themselves (a dialog wider than a narrow page would
   otherwise start at its left edge before the scale). */
body #room-screen.la-room .la-room-settings,.hero-ban-dialog.la-hb,.battle-menu.la-bmenu,.donate-dialog{position:fixed;inset:auto;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) scale(var(--la-fit,1))}
/* Not scaled: it already fits the viewport (max-width and max-height), and
   scaling by --la-fit made a portrait phone show a 116 px QR code. */
.donate-dialog{transform:translate(-50%,-50%)}
body #room-screen.la-room .la-room-actions .original-button>span{display:block;white-space:nowrap}
body #room-screen.la-room .la-room-actions .original-button>span{line-height:1.2}
/* The hero layer is the original 124x290 slot with the portrait at x 30-94,
   y 178-244 (SoldierIcon at 62,214, 0.9): 170% wide puts the portrait
   across the circle and 80% down centres it. */
body .battle-screen #battle-results.battle-results .award-slot .award-hero{width:44px!important;height:44px!important;margin-top:2px;background-size:170% auto!important;background-position:50% 80%!important}
/* The award icon layer is the same slot with the Icon at 62,41 (0.85), about
   x 34-90 and y 5-69: at 200% wide, 4% down centres it in a badge left of
   the portrait; a card is only about 140 px wide, so the badge keeps to the
   edge. */
body .battle-screen #battle-results.battle-results .award-slot .award-icon{position:absolute;left:max(3px,calc(50% - 66px));top:24px;width:38px;height:38px;background-size:200% auto;background-position:50% 4%}
body .battle-screen #battle-results.battle-results .award-slot .award-name{width:auto;height:auto;margin-top:auto;padding:3px 10px;border-radius:999px;background:#12305e99;line-height:1.2}
body .battle-screen #battle-results.battle-results .award-slot[data-red="true"] .award-name{background:#a8292999}
body .battle-screen #battle-results.battle-results .award-slot .award-title{width:auto;left:auto;top:auto;overflow:visible}
body .battle-screen #battle-results.battle-results .award-slot .award-desc{left:auto;top:auto;width:auto}
.la-live{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:#12305e66;color:#fff;font:900 10px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.3px}
.la-live i{width:8px;height:8px;border-radius:50%;background:#ff4d5e;box-shadow:0 0 0 3px #ff4d5e40;animation:la-live 1.4s ease-in-out infinite}
@keyframes la-live{50%{opacity:.4}}
@media(prefers-reduced-motion:reduce){.la-live i{animation:none}}
body .battle-screen #battle-results.battle-results .la-result-foot{grid-column:1/-1;grid-row:4;display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--t-panel-2)}
body .battle-screen #battle-results.battle-results .la-result-foot .la-btn{height:34px;font-size:13px}
body .battle-screen #battle-results.battle-results[data-board] #battle-result-awards{display:none!important}
body .battle-screen #battle-results.battle-results[data-board] #battle-result-summary{display:block!important}
/* Change name (the "Lobby · Solid · Change Name" design). */
.la-rename{width:400px;padding:0;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 18px 40px #0b1e3d99;overflow:hidden;position:fixed;inset:auto;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) scale(var(--la-fit,1));font:800 11px/1.3 Nunito,"Segoe UI",system-ui,sans-serif}
.la-rename::backdrop{background:#0b1e3d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.la-rename .ui-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.la-rename-body{display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.la-rename-now{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-card)}
.la-rename-now span:not(.la-avatar){flex:1;display:flex;flex-direction:column}
.la-rename-now small{color:var(--t-muted-2);font:900 8.5px/1 Nunito,sans-serif;letter-spacing:.5px;text-transform:uppercase}
.la-rename-now b{font:15px/1.2 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px}
.la-rename-now em{padding:4px 9px;border-radius:999px;background:var(--t-panel-2);color:var(--t-ink-2);font:900 9px/1 Nunito,sans-serif;font-style:normal;text-transform:uppercase}
.la-rename label{color:var(--t-ink-2);font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase}
.la-rename-field{display:flex;align-items:center;height:40px;padding:0 12px;border:1.5px solid var(--t-blue);border-radius:11px;background:var(--t-card)}
.la-rename-field input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--t-ink);font:900 13px/1 Nunito,sans-serif}
.la-rename-check{color:#d23a4e;font:900 10px/1 Nunito,sans-serif}
.la-rename-note{display:flex;align-items:center;gap:8px;margin:0;padding:8px 10px;border:1px solid #c9cdf7;border-radius:10px;background:#eceefe;color:#3b45b8;font:900 10px/1.35 Nunito,sans-serif}
.la-rename .la-modal-foot .la-btn.green{flex:1}
.la-rename-login{flex:none;margin-left:auto;padding:5px 10px;border:1px solid #3c45a5;border-radius:8px;background:linear-gradient(#7983f5,#4752c4);color:#fff;font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;text-transform:uppercase;box-shadow:0 2px 0 #3c45a5;cursor:pointer}
.la-rename-login[hidden]{display:none}
/* The game's login window (pencil "Login · 01 Choose", "02 Opening the
   app", "03 App didn't open"): one dialog, one step shown at a time
   (login_view.rs). Discord's own purple marks every Discord action. */
.la-signin{width:400px;max-width:none;max-height:none;padding:0;border:1.5px solid var(--t-line-2);border-radius:18px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 10px 30px #0b1e3d99;overflow:hidden;position:fixed;inset:auto;left:50%;top:50%;margin:0;transform:translate(-50%,-50%) scale(var(--la-fit,1));font:900 10px/1.3 Nunito,"Segoe UI",system-ui,sans-serif;--dc:#5865f2;--dc-hi:#7983f5;--dc-lo:#4752c4;--dc-dk:#3c45a5}
.la-signin:has(#la-signin-choose[hidden]){width:420px}
.la-signin::backdrop{background:#0b1e3d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.la-signin .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.la-signin .la-dc{width:1.27em;height:1em;flex:none;fill:currentColor}
.la-signin .oauth-g{width:20px;height:20px;flex:none}
.la-signin-step[hidden]{display:none}
.la-signin .la-modal-head{height:40px}
.la-signin .la-modal-head h2{font-size:16px;letter-spacing:.6px}
.la-signin .la-modal-head .la-x{width:28px;height:28px;border:1px solid #fff6;background:#12305e33;box-shadow:none;font-size:15px}
.la-signin-body{display:flex;flex-direction:column;gap:8px;padding:14px}
.la-signin-body.center{align-items:center;gap:10px;padding:16px 16px 12px}
.la-signin .la-rename-now{padding:8px 10px;border-radius:10px}
.la-signin .la-rename-now b{font-size:14px}
.la-signin .la-rename-now em{padding:4px 7px;background:var(--t-panel-2);color:var(--t-ink-2);font:8.5px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px}
.la-signin-provider{display:flex;align-items:center;gap:10px;height:50px;padding:0 12px;border:1.25px solid var(--t-line-2);border-radius:10px;background:var(--t-card);color:var(--t-ink);text-decoration:none;box-shadow:0 3px 0 #b7c4d6;box-sizing:border-box}
.la-signin-provider:active{transform:translateY(1px)}
.la-signin-provider.discord{border-color:var(--dc-dk);background:linear-gradient(var(--dc-hi),var(--dc-lo));color:#fff;box-shadow:0 3px 0 var(--dc-dk),inset 0 -3px 0 #00000026,inset 0 2px 0 #ffffff73}
.la-signin-logo{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:8px;background:var(--t-panel)}
.la-signin-provider.discord .la-signin-logo{background:#fff;color:var(--dc)}
.la-signin-provider.discord .la-signin-logo .la-dc{width:20px;height:16px}
.la-signin-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.la-signin-text b{font:14px/1.15 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;text-transform:uppercase}
.la-signin-text small{color:#5c6f88;font:900 9.5px/1.25 Nunito,sans-serif}
.la-signin-provider.discord .la-signin-text small{color:#e3e6ff}
.la-signin-provider em{display:flex;align-items:center;gap:4px;height:20px;padding:0 8px;border:1px solid var(--t-line);border-radius:999px;background:var(--t-panel);color:var(--t-ink-2);font:9px/1 "Lilita One","Arial Black",sans-serif;font-style:normal;letter-spacing:.4px;text-transform:uppercase;box-sizing:border-box}
.la-signin-provider.discord em{border-color:#ffffff59;background:#ffffff2e;color:#fff}
.la-signin-provider em[hidden],.la-signin-provider[hidden],.la-signin-alt[hidden]{display:none}
.la-signin-note{display:flex;align-items:center;gap:6px;margin:0;padding:2px;color:var(--t-ink-2);font-size:9.5px}
.la-signin-note .ui-i{width:13px;height:13px;color:var(--t-go)}
.la-signin-later{display:grid;place-items:center;height:40px;border-top:1px solid var(--t-line)}
.la-signin-later button{padding:6px 12px;border:0;background:none;color:#4c6a90;font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;cursor:pointer}
.la-signin .la-modal-foot{height:48px;padding:0 14px;gap:8px;border-top:1px solid var(--t-line);box-sizing:border-box}
.la-signin .la-modal-foot .la-btn{height:32px;padding:0 12px;border-radius:9px;font-size:12.5px}
.la-signin .la-modal-foot .la-btn.gray{width:110px;flex:none}
.la-btn.discord{flex:1;border-color:var(--dc-dk);background:linear-gradient(var(--dc-hi),var(--dc-lo));box-shadow:0 3px 0 var(--dc-dk),inset 0 -3px 0 #00000026,inset 0 2px 0 #ffffff73}
.la-signin-handoff{display:flex;align-items:center;gap:10px}
.la-signin-tile{display:grid;place-items:center;width:56px;height:56px;border:1.25px solid var(--t-line);border-radius:14px;background:var(--t-card);box-sizing:border-box}
.la-signin-tile img{width:40px;height:40px;border-radius:9px}
.la-signin-tile.discord{border-color:var(--dc-dk);background:linear-gradient(var(--dc-hi),var(--dc-lo));color:#fff;box-shadow:0 3px 0 var(--dc-dk),inset 0 -3px 0 #00000026,inset 0 2px 0 #ffffff73}
.la-signin-tile.discord .la-dc{width:32px;height:25px}
.la-signin-dots{display:flex;align-items:center;gap:5px;color:var(--dc)}
.la-signin-dots i{width:7px;height:7px;border-radius:50%;background:var(--dc);opacity:.25}
.la-signin-dots i:nth-child(2){opacity:.5}.la-signin-dots i:nth-child(3){opacity:.75}.la-signin-dots i:nth-child(4){opacity:1}
.la-signin-dots .ui-i{width:16px;height:16px}
.la-signin h3{margin:0;color:var(--t-ink);font:16px/1.2 "Lilita One","Arial Black",sans-serif;letter-spacing:.2px}
.la-signin-steps{display:flex;gap:6px;width:100%;margin:0;padding:0;list-style:none}
.la-signin-steps li{flex:1;display:flex;align-items:center;gap:6px;padding:7px 8px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card);color:var(--t-ink)}
.la-signin-steps b{display:grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;background:var(--t-panel-2);color:var(--t-ink-2);font:10px/1 "Lilita One","Arial Black",sans-serif}
.la-signin-steps li.on b{background:var(--dc);color:#fff}
.la-signin-wait{display:flex;align-items:center;gap:7px;width:100%;margin:0;padding:7px 10px;border:1px solid #b9bffa;border-radius:10px;background:#e6e8fe;color:#3f4bc9;box-sizing:border-box}
.la-signin-wait .ui-i{width:14px;height:14px;color:var(--dc)}
@media(prefers-reduced-motion:no-preference){.la-signin-wait .ui-i{animation:la-signin-spin 1s linear infinite}@keyframes la-signin-spin{to{transform:rotate(1turn)}}}
.la-signin-alt{display:flex;align-items:center;gap:5px;margin:0;color:#5c6f88}
.la-signin-alt a{display:inline-flex;align-items:center;gap:5px;color:var(--t-link);text-decoration:none}
.la-signin-alt .oauth-g{width:12px;height:12px}
.la-signin-explain{display:flex;align-items:center;gap:10px}
.la-signin-warn{display:grid;place-items:center;width:44px;height:44px;flex:none;border:1.25px solid #f2c46b;border-radius:12px;background:#fff1d6;color:#c47f12;box-sizing:border-box}
.la-signin-warn .ui-i{width:22px;height:22px}
.la-signin-explain>span:last-child{display:flex;flex-direction:column;gap:2px}
.la-signin-explain b{font:14px/1.2 "Lilita One","Arial Black",sans-serif;color:var(--t-ink)}
.la-signin-explain small{color:#5c6f88;font:900 10px/1.3 Nunito,sans-serif}
.la-signin-options{display:flex;gap:8px}
.la-signin-opt{flex:1;display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-card);color:var(--t-ink);text-align:left;font:inherit;cursor:pointer}
.la-signin-opt[aria-checked="true"]{padding:9px;border:2px solid var(--dc);background:#e6e8fe}
.la-signin-opt-row{display:flex;align-items:center;gap:6px}
.la-signin-opt-row>.ui-i:first-child{width:15px;height:15px;color:var(--t-ink-2)}
.la-signin-opt[aria-checked="true"] .la-signin-opt-row>.ui-i:first-child{color:var(--dc)}
.la-signin-opt b{flex:1;font:12px/1.1 "Lilita One","Arial Black",sans-serif;letter-spacing:.2px;text-transform:uppercase}
.la-signin-opt[aria-checked="true"] b{color:#3f4bc9}
.la-signin-opt small{color:#5c6f88;font:900 9.5px/1.3 Nunito,sans-serif}
.la-signin-radio{width:15px!important;height:15px!important;color:#a7b3c3}
.la-signin-radio .la-signin-tick{display:none}
.la-signin-opt[aria-checked="true"] .la-signin-radio{color:var(--dc)}
.la-signin-opt[aria-checked="true"] .la-signin-tick{display:inline}
.la-signin .la-signin-go-app,.la-signin[data-choice="app"] .la-signin-go-web{display:none}
.la-signin[data-choice="app"] .la-signin-go-app{display:inline-flex}
.la-signin-go-web,.la-signin-go-app{align-items:center;gap:6px}
.la-signin-go-web{display:inline-flex}
.button-login{display:flex;align-items:center;justify-content:center;gap:6px;border-color:#3c45a5;background:linear-gradient(#7983f5,#4752c4);color:#fff;box-shadow:0 3px 0 #3c45a5}
.button-login .la-dc{fill:currentColor}
.button-login[hidden]{display:none}
/* A guest's Log in joins Install and Support under the missions card: the
   card drops its blurb so all three still fit the 340px panel. */
.la-player-body:has(#lobby-login:not([hidden])) .la-player-soon p{display:none}
/* The landing page (the "Landing · Live Lobby Preview · Desktop" design):
   the lobby as it is right now, read-only (#landing-lobby takes the lobby's
   own rules and geometry, `fill_landing_lobby` reads `/api/rooms`), with the
   login card in the player panel's place, two hints and the taskbar. On an
   upright phone ("Landing · Live Lobby · Solid · Phone Portrait") the card,
   the live rooms and the lobby chat stack under a top bar, with Discord,
   Support and Install at the bottom. */
body[data-screen="register"] .backdrop{filter:blur(6px);transform:scale(1.04)}
body[data-screen="register"] .register-screen.la-land{position:static;display:block;min-height:0;margin:0;padding:0;background:none;border:0;box-shadow:none}
body[data-screen="register"] .app-shell{padding:0}
:is(#lobby-screen,#landing-lobby) .la-title-bar .la-live{display:flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;background:#12305e4d;color:#fff;font:900 10px/1 var(--la-body);letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
:is(#lobby-screen,#landing-lobby) .la-live i,.la-land-live i{width:7px;height:7px;border-radius:50%;background:#ff5c5c;box-shadow:0 0 0 2px #ff5c5c40;animation:la-live 1.6s ease-in-out infinite}
@keyframes la-live{50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){:is(#lobby-screen,#landing-lobby) .la-live i,.la-land-live i{animation:none}}
.la-land-phone-title,.la-land-open,.la-land-chat-title,.la-login-turn{display:none}
#landing-lobby .la-window .lobby-chat .chat-log{flex:1}
.la-land-hint{position:absolute;z-index:2;display:flex;align-items:center;gap:6px;margin:0;height:24px;padding:0 10px 0 4px;border:1.25px solid var(--t-accent-dk);border-radius:999px;background:linear-gradient(var(--t-accent-hi),var(--t-accent));box-shadow:0 3px 8px #12305e40;color:#fff;font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;white-space:nowrap;text-shadow:0 1px 0 var(--t-accent-dk)}
.la-land-hint>span{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#fff;color:var(--t-accent-dk);font-size:10px}
.la-land-hint .ui-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.la-land-hint.rooms{left:352px;top:242px}
.la-land-hint.chat{left:340px;top:279px;transform:translateX(-50%)}
/* The login card in the player panel's place. */
body[data-screen="register"] #landing-lobby #landing-main.la-login{position:relative;inset:auto;flex:0 0 188px;width:188px;height:340px;max-height:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;overflow:hidden;transform:none;border:2px solid #ffd27a;outline:0;border-radius:16px;background:var(--t-panel);box-shadow:0 6px 16px #12305e59,0 0 0 3px #ffd27a33;color:var(--t-ink);box-sizing:border-box}
.la-login .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.la-login-head{display:flex;align-items:center;gap:8px;height:42px;flex:none;padding:0 7px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));border-bottom:1.5px solid var(--t-blue-dk);color:#fff;box-sizing:border-box}
.la-login-head>span:last-child{display:flex;flex-direction:column;min-width:0}
.la-login-head b{font:14px/1.1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px}
.la-login-head small{color:#d6e4ff;font:800 8.5px/1.2 Nunito,sans-serif}
.la-login-avatar{display:grid;place-items:center;width:28px;height:28px;flex:none;border:1.5px solid #ffffffb3;border-radius:8px;background:#12305e4d;font-size:14px}
.la-login-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:9px 9px 8px;overflow:hidden}
body #landing-main.la-login h1{margin:0;color:var(--t-accent-hi);font:23px/1 "Lilita One","Arial Black",sans-serif;font-style:normal;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap;-webkit-text-stroke:0;text-shadow:0 2px 0 var(--t-accent-dk),0 0 1px var(--t-accent-dk)}
body #landing-main.la-login h1 span{color:var(--t-accent-hi)}
body #landing-main.la-login .lede{margin:0;color:var(--t-ink-2);font:800 8.5px/1.35 Nunito,sans-serif}
body #landing-main.la-login :is(.register-guest,.register-guest-row,.landing-signed-in){display:flex;flex-direction:column;gap:6px;margin:0}
body #landing-main.la-login .register-oauth-row{display:flex;flex-direction:row;gap:6px;margin:0}
body #landing-main.la-login :is(.register-oauth-row,.register-or,.register-guest,.landing-signed-in)[hidden],body #landing-main.la-login .register-oauth[hidden]{display:none}
body #landing-main.la-login .register-oauth{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:0;height:32px;margin:0;padding:0;border:1.25px solid #3b45b8;border-radius:10px;background:linear-gradient(#7c87f5,#4f5ce0);box-shadow:0 2px 0 #3b45b8;color:#fff;font:12px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;text-decoration:none}
/* The card body is a fixed-height flex column: without flex:none the
   Discord row shrank to a 3 px sliver once it was shown. */
body #landing-main.la-login :is(.register-oauth-row,.register-or){flex:none}
body #landing-main.la-login .register-oauth{flex:1 1 0;min-width:0}
body #landing-main.la-login .register-oauth .oauth-g{width:14px;height:14px;flex:none}
body #landing-main.la-login .register-oauth.google{border-color:var(--t-line);background:var(--t-card);box-shadow:0 2px 0 var(--t-line);color:var(--t-ink)}
body #landing-main.la-login .register-or{display:flex;align-items:center;gap:6px;margin:0}
body #landing-main.la-login .register-or::before,body #landing-main.la-login .register-or::after{content:"";flex:1;height:1px;background:var(--t-line)}
body #landing-main.la-login .register-or span{color:var(--t-muted-2);font:900 7px/1 Nunito,sans-serif;letter-spacing:.5px;text-transform:uppercase}
body #landing-main.la-login #register-name-label{display:none}
body[data-account="choosing"] #landing-main.la-login #register-name-label{display:block;margin:0;color:var(--t-ink-2);font:900 8.5px/1 Nunito,sans-serif;letter-spacing:.5px}
.la-login-field{display:flex;align-items:center;gap:6px;height:32px;padding:0 9px;border:1.5px solid var(--t-blue);border-radius:9px;background:var(--t-card);color:var(--t-muted);box-sizing:border-box}
.la-login-field .ui-i{font-size:11px}
body #landing-main.la-login .la-login-field .field{flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:0;background:none;box-shadow:none;color:var(--t-ink);font:800 11px/1 Nunito,sans-serif}
body #landing-main.la-login .la-login-field:focus-within{box-shadow:0 0 0 3px #4c8ad640}
body #landing-main.la-login #register-enter,body #landing-main.la-login .landing-start{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:0;height:34px;margin:0;padding:0;border:1.25px solid var(--t-accent-dk);border-radius:10px;background:linear-gradient(var(--t-accent-hi),var(--t-accent));box-shadow:0 2px 0 var(--t-accent-dk);color:#fff;font:13px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 0 var(--t-accent-dk)}
body #landing-main.la-login #register-enter:disabled{filter:grayscale(.5);opacity:.75}
body #landing-main.la-login .form-status{margin:0;min-height:0;color:var(--t-go-text);font:900 8px/1.3 Nunito,sans-serif}
body #landing-main.la-login .form-status[data-notice]{padding:6px 8px;font-size:8.5px;line-height:1.35}
body #landing-main.la-login .landing-welcome{margin:0;color:var(--t-ink-2);font:800 10px/1.3 Nunito,sans-serif}
body #landing-main.la-login .check-row{display:none!important}
/* Unofficial fan game / early access notice, always shown on the login card. */
.la-login-notice{display:flex;align-items:flex-start;gap:6px;margin:auto 0 0;padding:6px 8px;border:1px solid #e8a33a;border-radius:9px;background:#ffb02e1f}
.la-login-notice .ui-i{margin-top:1px;font-size:11px;color:#e8902a}
.la-login-notice p{display:flex;flex-direction:column;gap:2px;margin:0}
.la-login-notice b{color:var(--t-ink);font:900 8px/1.2 Nunito,sans-serif}
.la-login-notice span{color:var(--t-ink-2);font:800 7px/1.3 Nunito,sans-serif}
.la-login-features{display:flex;flex-direction:column;gap:5px;margin:0;padding:8px 9px;border-radius:9px;background:var(--t-panel-2);list-style:none}
.la-login-features li{display:flex;align-items:center;gap:6px;color:var(--t-ink);font:900 8.5px/1.2 Nunito,sans-serif}
.la-login-features .ui-i{font-size:10px;color:var(--t-ink-2)}
/* The notice takes the feature list's place: both do not fit the card in most languages. */
body #landing-main.la-login .la-login-features{display:none}
/* The taskbar: the lobby's, read-only, with Discord, Support and Install. */
body[data-screen="register"] #landing-footer.la-land-taskbar{position:fixed;z-index:6;left:0;right:0;bottom:0;height:var(--footer-space,48px);min-height:0;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:6px;margin:0;padding:0 max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));border:0;border-top:1.5px solid var(--t-blue-dk);background:linear-gradient(var(--t-bar),var(--t-blue-dk2));color:#fff;font:15px/1 "Lilita One","Arial Black",sans-serif;box-sizing:border-box}
.la-land-taskbar>*+*::before{content:none!important}
.la-land-taskbar .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.la-land-taskbar .la-task{position:relative;display:flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 9px;border:1.25px solid var(--t-blue-dk);border-radius:9px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font:13px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-decoration:none;text-transform:uppercase;box-sizing:border-box;cursor:pointer}
.la-land-taskbar span.la-task{cursor:default}
.la-land-taskbar .la-task .ui-i{font-size:15px}
.la-land-taskbar .la-task.gray{border-color:var(--t-muted-2);background:linear-gradient(var(--t-line-soft),var(--t-faint));opacity:.85}
.la-land-taskbar .la-task.gray .la-task-icon{filter:grayscale(.6);opacity:.8}
.la-land-taskbar .la-task.exit{width:34px;padding:0;justify-content:center;border-color:#b8395c;background:linear-gradient(#ff86a8,#e83c6e);opacity:.6}
.la-land-taskbar .la-task-icon{width:24px;height:24px}
.la-land-taskbar .la-land-discord{border-color:#3b45b8;background:linear-gradient(#7c87f5,#4f5ce0)}
.la-land-taskbar .la-land-support{border-color:#b8395c;background:linear-gradient(#ff86a8,#e83c6e)}
.la-land-taskbar .la-land-install{border-color:var(--t-go-dk);background:linear-gradient(var(--t-go-hi),var(--t-go))}
.la-land-taskbar .la-task[hidden]{display:none}
.la-land-taskbar a.la-task:hover,.la-land-taskbar button.la-task:hover{filter:brightness(1.08)}
/* The account menu stays at the top right once signed in. */
body[data-screen="register"] #landing-nav.la-land-nav{display:none}
body[data-screen="register"] #landing-nav.la-land-nav:has(#nav-user:not([hidden]),#register-onboarding:not([hidden])){display:flex;position:fixed;z-index:7;top:10px;right:max(12px,env(safe-area-inset-right));left:auto;height:auto;padding:0;background:none;border:0;box-shadow:none}
body[data-screen="register"] #landing-nav.la-land-nav :is(.landing-brand,.la-land-live){display:none}
body[data-screen="register"] #landing-nav .nav-login{display:none}
@media(orientation:portrait) and (max-width:600px){
  body[data-screen="register"] .touch-rotate{display:none!important}
  body[data-screen="register"] .register-screen.la-land{position:fixed;inset:0;z-index:5;overflow-y:auto;overscroll-behavior:contain;padding:calc(64px + env(safe-area-inset-top)) 12px calc(72px + env(safe-area-inset-bottom))}
  body[data-screen="register"] #landing-nav.la-land-nav,body[data-screen="register"] #landing-nav.la-land-nav:has(#nav-user:not([hidden]),#register-onboarding:not([hidden])){position:fixed;z-index:7;top:calc(10px + env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;gap:8px;height:42px;padding:0 8px;border:1.5px solid var(--t-blue-dk);border-radius:12px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));box-shadow:0 4px 12px #12305e40}
  body[data-screen="register"] #landing-nav.la-land-nav .landing-brand{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none}
  .la-land-mark{display:grid;place-items:center;width:28px;height:28px;border:1.25px solid var(--t-accent-dk);border-radius:8px;background:linear-gradient(var(--t-accent-hi),var(--t-accent));color:#fff;font-size:15px}
  .la-land-mark .ui-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  body[data-screen="register"] #landing-nav .landing-wordmark{color:#fff;font:16px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
  body[data-screen="register"] #landing-nav.la-land-nav .la-land-live{display:flex;align-items:center;gap:6px;height:24px;margin-left:auto;padding:0 10px;border-radius:999px;background:#12305e66;color:#fff;font:900 10px/1 Nunito,sans-serif;text-transform:uppercase;white-space:nowrap}
  body[data-screen="register"] #landing-nav .landing-account{margin-left:0}
  body[data-screen="register"] #landing-lobby{position:static;transform:none;width:auto;height:auto;display:flex;flex-direction:column;gap:12px}
  #landing-lobby :is(.la-window,.la-body,.la-rooms){display:contents}
  #landing-lobby :is(.la-modes,.la-actions,.room-pagination,.chat-entry,.la-land-hint,.la-title-bar h2,.la-title-bar .la-live){display:none!important}
  body[data-screen="register"] #landing-lobby #landing-main.la-login{order:-1;flex:none;width:auto;height:auto;border-width:2.5px}
  .la-login-head{height:48px;padding:0 9px}
  .la-login-head b{font-size:16px}.la-login-head small{font-size:10px}
  .la-login-avatar{width:32px;height:32px}
  .la-login-body{gap:10px;padding:14px 14px 12px}
  body #landing-main.la-login h1{font-size:34px}
  body #landing-main.la-login .lede{font-size:12px}
  body #landing-main.la-login .register-oauth{height:44px;font-size:15px;border-radius:12px}
  body #landing-main.la-login .register-or span{font-size:9px}
  .la-login-field{height:44px;border-radius:11px;padding:0 12px}
  .la-login-field .ui-i{font-size:14px}
  body #landing-main.la-login .la-login-field .field{font-size:14px}
  body #landing-main.la-login #register-enter,body #landing-main.la-login .landing-start{height:46px;font-size:16px;border-radius:12px}
  body #landing-main.la-login .form-status{font-size:10px;text-align:center}
  .la-login-features{display:none!important}
  .la-login-notice{gap:8px;padding:9px 11px;border-radius:11px}
  .la-login-notice .ui-i{font-size:14px}
  .la-login-notice b{font-size:11px}
  .la-login-notice span{font-size:10px}
  .la-login-turn{display:flex;align-items:center;justify-content:center;gap:7px;margin:0;color:var(--t-ink-2);font:900 10.5px/1.2 Nunito,sans-serif}
  .la-login-turn .ui-i{font-size:13px;transform:rotate(90deg)}
  #landing-lobby .la-title-bar{order:1;height:38px;margin:0;border:1.5px solid var(--t-line-2);border-bottom-color:var(--t-blue-dk);border-radius:14px 14px 0 0}
  .la-land-phone-title{display:flex;align-items:center;gap:6px;color:#fff;font:15px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
  .la-land-phone-title::before{content:"";width:14px;height:14px;background:#ffd27a;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9'/%3E%3Cpath d='M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'/%3E%3Cpath d='M19.1 4.9C23 8.8 23 15.1 19.1 19'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.9 19.1C1 15.2 1 8.8 4.9 4.9'/%3E%3Cpath d='M7.8 16.2c-2.3-2.3-2.3-6.1 0-8.5'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M16.2 7.8c2.3 2.3 2.3 6.1 0 8.5'/%3E%3Cpath d='M19.1 4.9C23 8.8 23 15.1 19.1 19'/%3E%3C/svg%3E") center/contain no-repeat}
  .la-land-open{display:block;color:#fff;font:900 10px/1 Nunito,sans-serif}
  #landing-lobby .room-list{order:2;display:flex!important;flex-direction:column;gap:6px;height:auto;margin:-12px 0 0;padding:8px;border:1.5px solid var(--t-line-2);border-top:0;border-radius:0 0 14px 14px;background:var(--t-panel)}
  #landing-lobby .room-list .room-row{height:52px;flex:none}
  #landing-lobby .room-list .room-row.empty,#landing-lobby .room-list .room-row:nth-child(n+4){display:none}
  #landing-lobby .room-list:not(:has(.room-row:not(.empty)))::before{content:"No rooms are open right now. Be the first!";padding:10px;color:var(--t-muted);font:800 11px/1.3 Nunito,sans-serif;text-align:center}
  #landing-lobby .lobby-chat{order:3;flex:none;height:auto;min-height:0;padding:0 0 8px;overflow:hidden;border:1.5px solid var(--t-line-2);border-radius:14px;background:var(--t-panel)}
  .la-land-chat-title{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));border-bottom:1.5px solid var(--t-blue-dk);color:#fff;font:15px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
  .la-land-chat-title .ui-i{width:1em;height:1em;color:#ffd27a;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
  #landing-lobby .lobby-chat .chat-log{min-height:0;margin:0;padding:8px 12px 0}
  #landing-lobby .lobby-chat .chat-log:empty::before{content:"Chat with players before you join: pick a name and say hello.";color:var(--t-muted);font:800 11px/1.35 Nunito,sans-serif}
  body[data-screen="register"] #landing-footer.la-land-taskbar{height:auto;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .la-land-taskbar span.la-task,.la-land-taskbar .la-spacer{display:none}
  .la-land-taskbar :is(a,button).la-task{flex:1;justify-content:center;height:44px;padding:0 6px;font-size:13px}
}
#landing-lobby .room-row .button{display:none}
/* Touch controls in the Lost Arena look (the "Touch Controls (redesign)"
   designs, 844x390, scaled by --la-fit): the battle's settings sheet
   (touch_view.rs settings_html), the practice setup wizard (wizard_html)
   and the layout editor with its sheets (touch_editor.rs). */
:where(#touch-settings,.touch-wizard,.touch-editor) :focus-visible{outline:2px solid var(--t-accent-hi);outline-offset:1px}
:where(#touch-settings,.touch-wizard,.touch-editor) .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
:is(#touch-settings,.touch-wizard,.touch-editor) .la-btn[disabled]{opacity:.45;cursor:default;transform:none}
#touch-settings{width:378px;max-width:none;max-height:none;padding:0;border:1.5px solid var(--t-line-2);outline:0;border-radius:16px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 8px 24px #0b1e3d99;overflow:hidden;transform:scale(var(--la-fit,1));font:800 11px/1.25 Nunito,"Segoe UI",system-ui,sans-serif}
#touch-settings::backdrop{background:#0b1e3d80}
#touch-settings .la-modal-head{height:36px;gap:7px;padding:0 6px 0 12px;font-size:15px}
#touch-settings .la-modal-head h2{font-size:14px;letter-spacing:.5px}
#touch-settings .ts-done{height:26px;padding:0 12px;gap:4px;border-radius:8px;font-size:11.5px;box-shadow:0 2px 0 var(--t-go-dk)}
.ts-body{display:flex;flex-direction:column;gap:5px;padding:7px 10px 9px}
.ts-label{margin:0;color:var(--t-ink-2);font:9.5px/1.15 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase}
.ts-layouts{display:flex;gap:6px}
.ts-layouts>button{position:relative;flex:1 1 96px;max-width:96px;min-width:0;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px 4px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card);color:var(--t-ink);cursor:pointer}
.ts-layouts>button :is(b,small){flex:none}
.ts-layouts>button b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:10px/1.15 "Lilita One","Arial Black",sans-serif}
.ts-layouts>button small{color:var(--t-muted-2);font:900 7.5px/1.2 Nunito,sans-serif}
.ts-layouts>button[aria-checked="true"]{border:2px solid var(--t-accent);background:linear-gradient(var(--t-pick-hi),var(--t-pick))}
.ts-layouts>button[aria-checked="true"] b{color:var(--t-accent-text)}
.ts-picked{display:none;position:absolute;left:5px;top:5px;width:14px;height:14px;place-items:center;border-radius:50%;background:var(--t-accent);color:#fff}
[aria-checked="true"]>.ts-picked{display:grid}
.ts-picked .ui-i{width:9px;height:9px;stroke-width:3.2}
.ts-layouts>.ts-new{flex:0 0 52px;border:1.25px solid var(--t-line-2);background:rgb(var(--t-card-rgb)/.5)}
.ts-new .ui-i{width:16px;height:16px;color:var(--t-link)}
.ts-layouts>.ts-new small{color:var(--t-muted)}
.ts-new[disabled]{opacity:.5;cursor:default}
.ts-mini{position:relative;display:block;width:58px;max-width:100%;height:28px;flex:none;border-radius:5px;background:#1e4e92}
.ts-mini>i{position:absolute;border-radius:50%}
.ts-mini>i:nth-child(1){left:6px;top:6px;width:16px;height:16px;border:1.5px solid #ffffffb3}
.ts-mini.analog>i:nth-child(1)::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:#fff}
.ts-mini>i:nth-child(2){right:6px;bottom:4px;width:9px;height:9px;background:#ffd27a}
.ts-mini>i:nth-child(3){right:17px;bottom:4px;width:6px;height:6px;background:#8ec0f2}
.ts-mini>i:nth-child(4){right:7px;top:5px;width:6px;height:6px;background:#8ec0f2}
.ts-mini.arrows>i:nth-child(1){left:12px;top:4px;width:6px;height:6px;border:0;border-radius:1.5px;background:#fffc;box-shadow:-6px 7px 0 #fffc,6px 7px 0 #fffc,0 14px 0 #fffc}
.ts-mini.mine>i:nth-child(1){top:auto;bottom:4px;left:5px;width:12px;height:12px}
.ts-mini.mine::before,.ts-mini.mine::after{content:"";position:absolute;left:21px;width:8px;height:8px;border-radius:2px;background:#ffd27a}
.ts-mini.mine::before{top:4px}.ts-mini.mine::after{top:15px}
.ts-actions{display:flex;gap:6px}
.ts-actions .la-btn{height:28px;padding:0 10px;gap:5px;border-radius:9px;font-size:11.5px;letter-spacing:.3px}
#touch-layout-edit{flex:1}#touch-layout-delete{flex:0 0 92px}
.ts-row{display:flex;align-items:center;gap:7px;height:26px;margin:0;padding:0 4px 0 8px;border:1px solid var(--t-line);border-radius:9px;background:var(--t-card);color:var(--t-ink);font:900 10.5px/1 Nunito,sans-serif}
.ts-row[hidden]{display:none}
.ts-row>.ui-i{width:12px;height:12px;color:var(--t-link)}
.ts-row>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-seg{display:flex;gap:2px;padding:2px;border-radius:7px;background:var(--t-panel-2)}
.ts-seg button{height:18px;padding:0 7px;border:0;border-radius:5px;background:none;color:var(--t-ink-2);font:900 9.5px/1 Nunito,sans-serif;cursor:pointer}
.ts-seg button[aria-checked="true"]{background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff}
:where(#touch-settings,.touch-wizard) input[type=range]{flex:0 0 120px;width:120px;height:16px;margin:0;padding:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer;--track:4px;--thumb:14px}
:where(#touch-settings,.touch-wizard) input[type=range]::-webkit-slider-runnable-track{height:var(--track);border-radius:999px;background:linear-gradient(90deg,var(--t-blue-hi),var(--t-blue)) 0/var(--p,50%) 100% no-repeat,var(--t-panel-2)}
:where(#touch-settings,.touch-wizard) input[type=range]::-webkit-slider-thumb{width:var(--thumb);height:var(--thumb);margin-top:calc((var(--track) - var(--thumb))/2);border:2px solid var(--t-blue);border-radius:50%;background:#fff;-webkit-appearance:none;appearance:none}
:where(#touch-settings,.touch-wizard) input[type=range]::-moz-range-track{height:var(--track);border-radius:999px;background:var(--t-panel-2)}
:where(#touch-settings,.touch-wizard) input[type=range]::-moz-range-progress{height:var(--track);border-radius:999px;background:linear-gradient(90deg,var(--t-blue-hi),var(--t-blue))}
:where(#touch-settings,.touch-wizard) input[type=range]::-moz-range-thumb{box-sizing:border-box;width:var(--thumb);height:var(--thumb);border:2px solid var(--t-blue);border-radius:50%;background:#fff}
.ts-row output{flex:0 0 34px;color:var(--t-link);font:10px/1 "Lilita One","Arial Black",sans-serif;text-align:right}
.la-switch{position:relative;flex:none;width:28px;height:16px;margin:0;border-radius:999px;background:var(--t-line);-webkit-appearance:none;appearance:none;cursor:pointer;transition:background .15s}
.la-switch::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:left .15s}
.la-switch:checked{background:var(--t-go)}
.la-switch:checked::after{left:14px}
.ts-pair{display:flex;gap:5px}
.ts-pair>.ts-row{flex:1;min-width:0;gap:6px;font-size:10px}
.ts-tip{display:flex;align-items:center;gap:5px;margin:0;color:var(--t-muted);font:800 8.5px/1.3 Nunito,sans-serif}
.ts-tip .ui-i{width:11px;height:11px}
/* The wizard: non-modal so the pad behind it shows each change; step 2
   sits at the top of the screen, clear of the pad. */
.touch-wizard{position:fixed;inset:50% 0 auto;z-index:12;width:560px;max-width:none;max-height:none;margin:0 auto;padding:0;border:1.5px solid var(--t-line-2);outline:0;border-radius:18px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 10px 30px #0b1e3d99;overflow:hidden;transform:translateY(-50%) scale(var(--la-fit,1));font:800 11px/1.3 Nunito,"Segoe UI",system-ui,sans-serif}
.touch-wizard[data-step="2"]{top:max(8px,env(safe-area-inset-top));width:380px;border-radius:16px;transform:scale(var(--la-fit,1));transform-origin:top center}
.touch-wizard[data-step="3"]{width:420px;border-radius:16px}
.touch-wizard .la-modal-head{height:44px;gap:8px;padding:0 12px}
.touch-wizard .la-modal-head h2{font-size:16px;letter-spacing:.6px}
.touch-wizard:not([data-step="1"]) .la-modal-head{height:38px;font-size:15px}
.touch-wizard:not([data-step="1"]) .la-modal-head h2{font-size:14px;letter-spacing:.5px}
.tw-steps{display:flex;align-items:center;gap:4px;height:22px;margin:0;padding:0 9px;border-radius:999px;background:#12305e4d}
.tw-steps span{width:8px;height:5px;border-radius:999px;background:#fff6}
.touch-wizard[data-step="1"] .tw-steps [data-for="1"],.touch-wizard[data-step="2"] .tw-steps [data-for="2"],.touch-wizard[data-step="3"] .tw-steps [data-for="3"]{width:16px}
.touch-wizard[data-step="1"] .tw-steps [data-for="1"],.touch-wizard[data-step="2"] .tw-steps :is([data-for="1"],[data-for="2"]),.touch-wizard[data-step="3"] .tw-steps span{background:#ffd27a}
.tw-steps b{margin-left:4px;color:#fff;font:400 9px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap}
.touch-wizard[data-step="1"] .tw-steps b::after{content:"Step 1 of 3"}
.touch-wizard[data-step="2"] .tw-steps b::after{content:"Step 2 of 3"}
.touch-wizard[data-step="3"] .tw-steps b::after{content:"Step 3 of 3"}
.touch-wizard section{display:none;flex-direction:column;gap:8px;padding:10px 14px}
.touch-wizard[data-step="1"] section[data-step="1"]{display:flex;gap:10px;padding:12px 14px}
.touch-wizard[data-step="2"] section[data-step="2"],.touch-wizard[data-step="3"] section[data-step="3"]{display:flex}
.touch-wizard h3{margin:0;color:var(--t-ink);font:16px/1.1 "Lilita One","Arial Black",sans-serif}
.tw-lead{margin:0;color:var(--t-ink-2);font:800 11px/1.35 Nunito,sans-serif}
.touch-wizard[data-step="1"] .tw-lead{font-size:11.5px}
.tw-note{margin:0;color:var(--t-muted);font:800 10px/1.35 Nunito,sans-serif}
.tw-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tw-choices button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;height:172px;padding:8px;border:1px solid var(--t-line);border-radius:14px;background:var(--t-card);color:var(--t-ink);text-align:left;cursor:pointer}
.tw-choices button[aria-pressed="true"]{padding:6.5px;border:2.5px solid var(--t-accent);background:linear-gradient(var(--t-pick-hi),var(--t-pick))}
.tw-choices b{display:flex;align-items:center;gap:5px;color:var(--t-ink);font:14px/1.1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.tw-choices b .ui-i{width:14px;height:14px;color:var(--t-link)}
.tw-choices [aria-pressed="true"] b,.tw-choices [aria-pressed="true"] b .ui-i{color:var(--t-accent-text)}
.tw-choices small{color:var(--t-muted);font:800 10px/1.35 Nunito,sans-serif}
.tw-picked{display:none;position:absolute;right:10px;top:-12px;width:24px;height:24px;place-items:center;border:2px solid #fff;border-radius:50%;background:var(--t-accent);color:#fff}
[aria-pressed="true"]>.tw-picked{display:grid}
.tw-picked .ui-i{width:13px;height:13px;stroke-width:3}
.tw-art{position:relative;display:block;align-self:stretch;height:100px;flex:none;border-radius:10px;background:linear-gradient(#3f7acb,#1e4e92)}
.tw-art.stick>i{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px;border:2px solid #ffffffb3;border-radius:50%;background:#ffffff26}
.tw-art.stick>i::after{content:"";position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px;border:2px solid #12305e;border-radius:50%;background:linear-gradient(#fff,#c5d1e0);box-shadow:0 3px 4px #0b1e3d66}
.tw-art.arrows>i{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:28px;height:28px;margin:-14px;border:1.5px solid #ffffffb3;border-radius:8px;background:#ffffff26;color:#fff}
.tw-art.arrows>i .ui-i{width:14px;height:14px}
.tw-art.arrows>i:nth-child(1){transform:translateY(-26px)}.tw-art.arrows>i:nth-child(2){transform:translateX(26px)}.tw-art.arrows>i:nth-child(3){transform:translateY(26px)}.tw-art.arrows>i:nth-child(4){transform:translateX(-26px)}
.touch-wizard .ts-row{height:34px;gap:8px;padding:0 10px;border-radius:10px;font-size:11.5px}
.touch-wizard .ts-row>.ui-i{width:14px;height:14px}
.touch-wizard .ts-row>span{flex:0 0 60px}
.touch-wizard input[type=range]{flex:1 1 auto;width:auto;height:18px;--track:5px;--thumb:16px}
.touch-wizard .ts-row output{flex:0 0 30px;font-size:11.5px}
.tw-go{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tw-go .la-btn{height:56px;justify-content:flex-start;gap:8px;padding:0 10px;border-radius:12px;text-align:left}
.tw-go .la-btn>i{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;background:#fff3}
.tw-go .la-btn>i .ui-i{width:16px;height:16px}
.tw-go .la-btn>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.tw-go b{font:12.5px/1.1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px}
.tw-go small{color:#ffffffd9;font:800 9px/1.2 Nunito,sans-serif;letter-spacing:0;text-transform:none;text-shadow:none}
.tw-nav{display:flex;align-items:center;gap:8px;height:52px;padding:0 14px;border-top:1px solid var(--t-line)}
.touch-wizard:not([data-step="1"]) .tw-nav{height:46px}
.tw-dont{display:flex;align-items:center;gap:6px;color:var(--t-ink-2);font:800 10.5px/1 Nunito,sans-serif;cursor:pointer}
.touch-wizard:not([data-step="1"]) .tw-dont{gap:5px;font-size:10px}
.tw-dont input{display:grid;place-items:center;width:18px;height:18px;margin:0;border:1.5px solid var(--t-line-2);border-radius:5px;background:var(--t-card);-webkit-appearance:none;appearance:none;cursor:pointer}
.touch-wizard:not([data-step="1"]) .tw-dont input{width:16px;height:16px;border-radius:4px}
.tw-dont input:checked{border-color:var(--t-blue-dk);background:var(--t-blue)}
.tw-dont input:checked::after{content:"";width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.tw-later{height:34px;padding:0 14px;border:0;background:none;color:var(--t-link);font:900 11px/1 Nunito,sans-serif;cursor:pointer}
.tw-nav .la-btn{height:34px;padding:0 22px;gap:6px;font-size:14px}
.touch-wizard[data-step="1"] #touch-wizard-next{min-width:130px}
.touch-wizard:not([data-step="1"]) .tw-nav .la-btn{height:30px;padding:0 13px;gap:5px;border-radius:9px;font-size:12px}
.touch-wizard:not([data-step="1"]) #touch-wizard-later,.touch-wizard[data-step="1"] #touch-wizard-back,.touch-wizard[data-step="3"] #touch-wizard-next{display:none}
/* The layout editor over the battle, on the snap grid. */
.touch-editor{position:fixed;inset:0;z-index:20;background:repeating-linear-gradient(90deg,#ffffff12 0 1px,transparent 1px 40px),repeating-linear-gradient(0deg,#ffffff12 0 1px,transparent 1px 40px),#0d1b3a8c;color:var(--t-ink);font:800 11px/1.25 Nunito,"Segoe UI",system-ui,sans-serif;touch-action:none;-webkit-user-select:none;user-select:none}
.touch-editor[hidden]{display:none}
.touch-editor[data-sheet]::after{content:"";position:absolute;inset:0;z-index:1;background:#0b1e3d80}
.te-stage{position:absolute;inset:0}
.te-bar{position:absolute;left:50%;top:max(10px,env(safe-area-inset-top));display:flex;align-items:center;gap:6px;padding:5px;border:1.5px solid var(--t-line-2);border-radius:14px;background:var(--t-panel);box-shadow:0 4px 12px #0b1e3d80;white-space:nowrap;transform:translateX(-50%) scale(var(--la-fit,1));transform-origin:top center}
.te-bar .la-btn{height:32px;padding:0 12px;gap:5px;font-size:12px;letter-spacing:.4px}
.te-name,.te-snap{display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card);color:var(--t-ink)}
:is(.te-name,.te-snap)>.ui-i{width:13px;height:13px;color:var(--t-link)}
#te-name{width:92px;min-width:0;padding:0;border:0;outline:0;background:none;color:var(--t-ink);font:12px/1 "Lilita One","Arial Black",sans-serif}
.te-snap{font:900 11px/1 Nunito,sans-serif;cursor:pointer}
.te-icon{display:grid;place-items:center;width:32px;height:32px;flex:none;padding:0;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card);color:var(--t-muted);cursor:pointer}
.te-icon .ui-i{width:14px;height:14px}
.te-icon[hidden]{display:none}
.te-icon.blue{border-color:var(--t-blue-dk);background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff}
.te-icon.red{border-color:#b83232;background:linear-gradient(#ff8a8a,#d93e3e);color:#fff}
.te-icon.red-soft{width:28px;height:28px;border-color:#f2a9a9;border-radius:8px;background:#ffe3e3;color:#d93e3e}
.te-div{width:1px;height:22px;background:var(--t-line)}
.te-hint{position:absolute;left:50%;top:calc(max(10px,env(safe-area-inset-top)) + 48px*var(--la-fit,1));display:flex;align-items:center;gap:6px;height:24px;margin:0;padding:0 10px;border:1px solid #fff3;border-radius:999px;background:#0b1e3dcc;color:#fff;font:800 10px/1 Nunito,sans-serif;white-space:nowrap;pointer-events:none;transform:translateX(-50%) scale(var(--la-fit,1));transform-origin:top center}
.te-hint .ui-i{width:12px;height:12px;color:#ffd27a}
.te-hint[data-warn]{border-color:#ff8a8a99;color:#ffd6cc}
.touch-editor:has(.te-tools:not([hidden])) .te-hint:not([data-warn]),.touch-editor[data-sheet] .te-hint:not([data-warn]){display:none}
.te-hint[data-warn]{z-index:3}
.te-tools{position:absolute;z-index:1;display:flex;align-items:center;gap:6px;height:36px;padding:0 4px 0 10px;border:2px solid var(--t-accent);border-radius:12px;background:var(--t-panel);box-shadow:0 4px 10px #0b1e3d80;white-space:nowrap;transform:scale(var(--la-fit,1));transform-origin:0 0}
.te-tools[hidden]{display:none}
.te-chip-text{display:flex;flex-direction:column;min-width:0;margin-right:2px}
#te-label{color:var(--t-ink);font:11px/1.15 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;text-transform:uppercase}
#te-detail{max-width:180px;overflow:hidden;text-overflow:ellipsis;color:var(--t-muted);font:800 8.5px/1.3 Nunito,sans-serif}
.te-tools .te-icon{width:28px;height:28px;border-radius:8px}
.te-ctl{position:absolute;display:grid;place-items:center;border:2px solid #ffffffcc;border-radius:50%;background:#12305ecc;color:#fff;font:400 calc(11px*var(--ctl-u,1))/1.05 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;text-align:center;box-shadow:0 4px 12px #0005;touch-action:none}
.te-ctl>span{padding:0 10%;word-break:break-word;pointer-events:none}
.te-ctl>svg,.te-ctl>.ui-i{width:50%;height:50%;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.te-ctl[data-kind="attack"]{border:3px solid #ffd27a;background:linear-gradient(#ffe45c,#ffae00)}
.te-ctl[data-kind="attack"]>svg{stroke:#0d1b3a}
.te-ctl:is([data-kind="jump"],[data-kind="defense"],[data-kind="dash"]){border-color:#0d1b3a99;background:linear-gradient(#4f86e8,#1f4fa8)}
.te-ctl[data-kind="dash"]{align-content:center;gap:2%;font-size:calc(9px*var(--ctl-u,1));text-transform:uppercase}
.te-ctl[data-kind="dash"]>.ui-i{width:calc(16px*var(--ctl-u,1));height:calc(16px*var(--ctl-u,1))}
.te-ctl[data-kind="skill"]{border:3px solid #a46be8;background:#12305e}
.te-ctl .touch-skill-icon{position:absolute;inset:2px;border-radius:50%;background:center/cover no-repeat;pointer-events:none}
.te-ctl:is([data-kind="combo"],[data-kind="keys"]){border-color:#0d1b3a99;background:linear-gradient(#b48cff,#6a3fd6)}
.te-ctl[data-kind="stick"]{border-color:#ffffffb3;background:#ffffff26}
.te-ring{position:absolute;inset:28%;border:2px solid #12305e;border-radius:50%;background:linear-gradient(#fff,#c5d1e0);pointer-events:none}
.te-ctl[data-kind="heroes"]{border-radius:14px}
.te-ctl[data-kind="hero"]{border-radius:22%;background:#12305ecc}
.te-ctl[data-kind="hero"] .touch-portrait{border-radius:20%}
.te-ctl[data-kind="hero"] b{position:absolute;bottom:-1.5em;font:800 11px/1 Nunito,sans-serif;white-space:nowrap;text-shadow:0 1px 2px #000;pointer-events:none}
.te-ctl[data-selected="true"]::before{content:"";position:absolute;inset:-7px;border:2px solid var(--t-accent);border-radius:30%;background:#ffd23f14;pointer-events:none}
.te-handle{position:absolute;z-index:2;right:-8px;bottom:-8px;display:grid;place-items:center;width:28px;height:28px;border:2px solid #0d1b3a;border-radius:50%;background:var(--t-accent);color:#0d1b3a;box-shadow:0 2px 0 #0d1b3a;cursor:nwse-resize}
.te-handle .ui-i{width:14px;height:14px;pointer-events:none}
/* The editor's sheets. */
.te-sheet{position:absolute;z-index:2;left:50%;top:50%;display:flex;flex-direction:column;width:620px;border:1.5px solid var(--t-line-2);border-radius:18px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 10px 30px #0b1e3d99;overflow:hidden;transform:translate(-50%,-50%) scale(var(--la-fit,1));touch-action:pan-y}
.te-sheet[hidden]{display:none}
.te-sheet .la-modal-head{height:42px;gap:8px;padding:0 6px 0 12px}
.te-sheet .la-modal-head h3{margin:0;color:#fff;font:16px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.6px;text-transform:uppercase;text-shadow:0 1.5px 0 var(--t-blue-dk);white-space:nowrap}
.te-sheet .la-modal-head small{color:#d6e4ff;font:800 10px/1.2 Nunito,sans-serif;white-space:nowrap}
.te-sheet .la-modal-head>.ui-i{width:17px;height:17px}
.te-add-sheet .la-modal-head>.ui-i{color:#ffd27a}
.te-sheet .la-x .ui-i{width:16px;height:16px}
.te-purple .la-modal-head{height:40px;background:linear-gradient(#b48cff,#6a3fd6);border-bottom-color:#4f2ba8}
.te-purple .la-modal-head h3{font-size:15px;letter-spacing:.5px;text-shadow:0 1.5px 0 #4f2ba8}
.te-purple .la-modal-head small{color:#ede3ff}
.te-close{display:grid;place-items:center;width:28px;height:28px;flex:none;padding:0;border:1px solid #fff6;border-radius:9px;background:#12305e33;color:#fff;cursor:pointer}
.te-close .ui-i{width:15px;height:15px}
.te-body{display:flex;flex-direction:column;gap:8px;padding:12px}
.te-foot{display:flex;align-items:center;gap:8px;height:48px;flex:none;padding:0 12px;border-top:1px solid var(--t-line)}
.te-foot .la-btn{height:32px;min-width:100px;padding:0 14px;gap:5px;border-radius:9px;font-size:12px;letter-spacing:.3px}
.te-foot :is(#te-chord-ok,#te-combo-ok){min-width:130px}
.te-lead{margin:0;color:var(--t-ink-2);font:800 11px/1.35 Nunito,sans-serif}
.te-palette{display:grid;grid-template-columns:repeat(6,1fr);gap:6px 8px;padding:10px}
.te-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;height:81px;padding:20px 4px 6px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-card);color:var(--t-ink);cursor:pointer}
.te-tile>b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:9.5px/1.15 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;text-transform:uppercase}
.te-tile:is(.add,.pick){border:1.5px solid var(--t-accent);background:linear-gradient(var(--t-pick-hi),var(--t-pick))}
.te-tile.adv{border:1.5px solid #9b6be0;background:linear-gradient(#f3eeff,#e6dcff)}
.te-tag{position:absolute;left:6px;top:6px;z-index:1;display:flex;align-items:center;gap:2px;height:15px;padding:0 5px;border-radius:999px;background:var(--t-go-tint);color:var(--t-go-text);font:400 7px/1 "Lilita One","Arial Black",sans-serif;font-style:normal;letter-spacing:.3px;text-transform:uppercase}
.te-tag .ui-i{width:8px;height:8px;stroke-width:3}
.te-tile.add .te-tag{background:var(--t-blue-hi);color:#fff}
.te-tile.pick .te-tag{background:var(--t-accent);color:#fff}
.te-tile.adv .te-tag{background:#9b3fd6;color:#fff}
.te-art{position:relative;display:grid;place-items:center;width:40px;height:40px;flex:none;border:2px solid #0d1b3a;border-radius:50%;background:linear-gradient(#4f86e8,#1f4fa8);color:#fff;box-shadow:inset 0 2px 0 #fff6;font-style:normal}
.te-art>.ui-i{width:22px;height:22px}
.te-art:is(.dpad,.stick){background:linear-gradient(#5b7db8,#2e4d86)}
.te-art.attack{background:linear-gradient(#ffe45c,#ffae00);color:#0d1b3a}
.te-art:is(.chord,.combo){background:linear-gradient(#8a97a8,#4f5d72);box-shadow:none}
.te-art kbd{position:absolute;right:-9px;top:-9px;display:grid;place-items:center;width:16px;height:16px;border:1px solid #0d1b3a;border-radius:4px;background:#fff;color:#0d1b3a;font:9px/1 "Lilita One","Arial Black",sans-serif}
.te-art:is(.skill,.hero){overflow:hidden;background:#12305e;box-shadow:none}
.te-art.skill{border:2.5px solid #9b6be0}
.te-art.hero{border:2.5px solid var(--t-accent);border-radius:12px}
.te-art :is(.touch-skill-icon,.te-portrait){position:absolute;inset:0;width:auto;height:auto;border-radius:0;background:center/cover no-repeat}
.te-note{grid-column:span 5;display:flex;flex-direction:column;justify-content:center;gap:4px;height:81px;padding:10px;border:1px solid var(--t-line);border-radius:12px;background:rgb(var(--t-card-rgb)/.5)}
.te-note b{color:var(--t-ink);font:12px/1.1 "Lilita One","Arial Black",sans-serif}
.te-note p{margin:0;color:var(--t-muted);font:800 9.5px/1.35 Nunito,sans-serif}
.te-portrait{display:block;width:38px;height:38px;flex:none;border-radius:50%;background:#12305e center/cover no-repeat}
.te-chord-sheet{width:400px}
.te-keys{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.te-key{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;height:61px;padding:7px 2px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card);color:var(--t-ink-2);font:900 8.5px/1.2 Nunito,sans-serif;cursor:pointer}
.te-key>i{display:grid;place-items:center;width:32px;height:32px;border:1.5px solid #0d1b3a;border-radius:50%;background:linear-gradient(#4f86e8,#1f4fa8);color:#fff;font:400 13px/1 "Lilita One","Arial Black",sans-serif;font-style:normal}
.te-key.purple>i{background:linear-gradient(#b48cff,#6a3fd6);font-size:9px}
.te-key>em{display:none;position:absolute;left:4px;top:4px;width:14px;height:14px;place-items:center;border-radius:50%;background:#9b3fd6;color:#fff}
.te-key>em .ui-i{width:9px;height:9px;stroke-width:3}
:is(.te-key,.te-dir)[aria-pressed="true"]{border:2px solid #9b6be0;background:linear-gradient(#f3eeff,#e6dcff)}
.te-key[aria-pressed="true"]>em{display:grid}
.te-dirs{display:flex;align-items:center;gap:6px;color:var(--t-muted);font:800 9.5px/1 Nunito,sans-serif}
.te-dirs>span{flex:1}
.te-dir{display:grid;place-items:center;width:34px;height:26px;padding:0;border:1px solid var(--t-line);border-radius:8px;background:var(--t-card);color:var(--t-ink-2);cursor:pointer}
.te-dir .ui-i{width:14px;height:14px}
.te-result{display:flex;align-items:center;gap:8px;height:56px;padding:8px 10px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card)}
.te-result>span{display:flex;flex-direction:column;gap:1px;min-width:0}
#te-chord-preview{color:var(--t-ink);font:400 12.5px/1.1 "Lilita One","Arial Black",sans-serif}
#te-chord-detail{color:var(--t-muted);font:800 9.5px/1.3 Nunito,sans-serif}
.te-face{display:grid;place-items:center;width:40px;height:40px;flex:none;overflow:hidden;border:2px solid #0d1b3a;border-radius:50%;background:linear-gradient(#b48cff,#6a3fd6);color:#fff;font:400 11px/1 "Lilita One","Arial Black",sans-serif;font-style:normal;white-space:nowrap}
.te-combo-sheet .te-body{gap:7px;padding:10px 12px}
.te-combo-top{display:flex;align-items:center;gap:8px}
.te-field{flex:1;display:flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1.5px solid #9b6be0;border-radius:9px;background:var(--t-card)}
.te-field>span{color:var(--t-muted-2);font:900 9.5px/1 Nunito,sans-serif}
#te-combo-label{flex:1;min-width:0;padding:0;border:0;outline:0;background:none;color:var(--t-ink);font:900 12px/1 Nunito,sans-serif}
#te-combo-face{width:32px;height:32px;font-size:7.5px}
.te-combo-sheet h4{margin:0;color:var(--t-ink-2);font:400 10px/1.1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase}
.te-sequence{display:flex;align-items:center;gap:8px;min-height:46px;padding:6px 8px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-card)}
.te-chips{flex:1;display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}
.te-chips>span{color:var(--t-muted);font:800 10px/1.3 Nunito,sans-serif}
.te-chips>b{display:grid;color:var(--t-faint)}
.te-chips>b .ui-i{width:11px;height:11px}
.te-step{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0;height:30px;padding:0 8px;border:0;border-radius:8px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font:400 10.5px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.2px;white-space:nowrap;box-shadow:0 2px 0 #0002;cursor:pointer}
.te-chips .te-step{height:28px}
.te-chips .te-step::before{content:attr(data-n);display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:#ffffff4d;font-size:8px}
.te-step.orange{background:linear-gradient(#ffd27a,#ee8f22)}
.te-step.green{background:linear-gradient(#8bd677,#3e9e45)}
.te-step.purple{background:linear-gradient(#b48cff,#6a3fd6)}
.te-step.gray{background:linear-gradient(#c9d2de,#8a97a8)}
.te-step-rows{display:flex;flex-direction:column;gap:6px}
.te-step-row{display:flex;gap:5px}
.te-step-row>.te-step{flex:1}
.te-combo-heroes{display:none;align-items:center;gap:6px;height:66px}
.te-combo-sheet[data-heroes] .te-combo-heroes{display:flex}
.te-combo-sheet[data-heroes] .te-step-rows{display:none}
.te-hero-strip{flex:1;display:flex;gap:6px;min-width:0;padding:2px;overflow-x:auto}
.te-hero-strip button{display:flex;flex:0 0 58px;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card);color:var(--t-ink);font:800 8.5px/1.1 Nunito,sans-serif;cursor:pointer}
.te-hero-strip .te-portrait{width:34px;height:34px}
.te-hero-strip b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.te-tip{flex:1;display:flex;align-items:center;gap:5px;margin:0;color:var(--t-muted);font:800 9.5px/1.3 Nunito,sans-serif}
.te-tip .ui-i{width:11px;height:11px}
.te-time{flex:1;display:flex;align-items:center;gap:6px;color:var(--t-muted);font:900 10px/1 Nunito,sans-serif}
:is(.te-tip,.te-time)[hidden]{display:none}
#te-combo-ms{width:72px;height:30px;padding:0 8px;border:1.5px solid #9b6be0;border-radius:8px;background:var(--t-card);color:var(--t-ink);font:900 12px/1 Nunito,sans-serif}
.te-mini{height:28px;padding:0 10px;border:0;border-radius:8px;background:linear-gradient(#c9d2de,#8a97a8);color:#fff;font:400 10.5px/1 "Lilita One","Arial Black",sans-serif;cursor:pointer}
.te-mini.orange{background:linear-gradient(#ffd27a,#ee8f22)}
.te-unit{min-width:34px;height:28px;padding:0 6px;border:1.5px solid #9b6be0;border-radius:8px;background:var(--t-card);color:#9b6be0;font:900 11px/1 Nunito,sans-serif;cursor:pointer}
.te-unit[data-pct]{background:#9b6be0;color:#fff}
.te-mini[hidden]{display:none}
.te-hero-sheet{width:800px;height:366px}
.te-hero-sheet .la-modal-head{height:48px;flex:none;gap:10px;padding:0 8px}
.te-hero-sheet .te-close{width:30px;height:30px;border-color:#fff4;border-radius:10px;background:#12305e4d}
.te-hero-sheet .la-modal-head .te-close .ui-i{width:16px;height:16px}
.te-title{display:flex;flex-direction:column;gap:2px;min-width:0}
.te-hero-sheet .la-modal-head .te-title small{color:#fff}
.te-search{display:flex;align-items:center;gap:6px;width:190px;height:30px;padding:0 10px;border-radius:999px;background:var(--t-card);color:var(--t-muted)}
.te-search .ui-i{width:14px;height:14px}
#te-hero-search{flex:1;min-width:0;padding:0;border:0;outline:0;background:none;color:var(--t-ink);font:800 11px/1 Nunito,sans-serif}
.te-heroes{flex:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:72px;align-content:start;gap:5px;padding:8px;overflow-y:auto}
.te-heroes>button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;padding:4px 2px 3px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card);color:var(--t-ink-2);font:900 9px/1.1 Nunito,sans-serif;cursor:pointer}
.te-heroes>button[hidden]{display:none}
.te-heroes b{display:-webkit-box;max-width:100%;overflow:hidden;text-align:center;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.te-heroes>button[aria-pressed="true"]{border:2px solid var(--t-accent);background:linear-gradient(var(--t-pick-hi),var(--t-pick));color:var(--t-accent-text)}
.te-heroes em{display:none;position:absolute;right:4px;top:4px;width:18px;height:18px;place-items:center;border:1.5px solid #fff;border-radius:50%;background:var(--t-accent);color:#fff}
.te-heroes [aria-pressed="true"] em{display:grid}
.te-heroes em .ui-i{width:10px;height:10px;stroke-width:3}
.te-empty{grid-column:1/-1;margin:20px;color:var(--t-muted);text-align:center}
/* The Hero stage lobby layout (Options > Interface > Lobby layout,
   body[data-ui-layout="stage"]; the "Lost Arena — Lobby Phone Landscape"
   design, 844 x 390): the hero in the middle (lobby_stage.rs), shortcuts
   on the left, the rooms on the right, Quick Join at the bottom. The
   lobby's own controls are only moved; the stage's shortcuts press them. */
.la-stage,.la-mtabs{display:none}
body[data-ui-layout="stage"][data-screen="lobby"] .site-footer.la-taskbar{display:none}
body[data-ui-layout="stage"][data-screen="lobby"] #lobby-screen{display:block;top:50%;width:844px;height:390px;transform:translate(-50%,-50%) scale(var(--la-sfit,1))}
body[data-ui-layout="stage"] #lobby-screen :is(.la-window,.la-body,.la-rooms){position:static;display:block;width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
body[data-ui-layout="stage"] #lobby-screen .la-stage{display:block;position:absolute;inset:0;pointer-events:none}
body[data-ui-layout="stage"] #lobby-screen .la-stage>*{pointer-events:auto}
/* The player chip. */
body[data-ui-layout="stage"] #lobby-screen .la-player{position:absolute;left:44px;top:12px;width:178px;height:46px;border:1.5px solid var(--t-blue-dk);border-radius:12px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));box-shadow:0 3px 0 var(--t-blue-dk)}
body[data-ui-layout="stage"] #lobby-screen .la-player-body,body[data-ui-layout="stage"] #lobby-screen .la-player .la-info{display:none}
body[data-ui-layout="stage"] #lobby-screen .la-player-head{height:100%;padding:0 10px 0 5px;border:0;background:none}
/* The shortcuts on the left and the round buttons at the top right. */
.la-stage-rail{position:absolute;left:44px;top:72px;display:flex;flex-direction:column;gap:12px}
.la-rail{display:flex;flex-direction:column;align-items:center;gap:3px;width:48px;padding:0;border:0;background:none;color:#fff;font:12px/1 "Lilita One","Arial Black",sans-serif;text-shadow:0 1.5px 0 #12305e;cursor:pointer}
#lobby-screen .la-rail .ui-i{box-sizing:border-box;width:46px;height:46px;padding:11px;border:1.5px solid #fff9;border-radius:12px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));box-shadow:0 3px 0 var(--t-blue-dk);stroke-width:2.2}
#lobby-screen .la-rail.gray .ui-i{background:linear-gradient(var(--t-line-soft),var(--t-faint));box-shadow:0 3px 0 var(--t-muted-2)}
#lobby-screen .la-rail.purple .ui-i{background:linear-gradient(#9a82ff,#6a4ce0);box-shadow:0 3px 0 #4b32b0}
.la-stage-top{position:absolute;right:44px;top:12px;display:flex;gap:10px}
.la-round{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1.5px solid #fff9;border-radius:11px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font-size:20px;box-shadow:0 3px 0 var(--t-blue-dk);cursor:pointer}
.la-round.pink{background:linear-gradient(#ff86a8,#e83c6e);box-shadow:0 3px 0 #b8395c}
/* The hero on its pedestal, and the name card between the arrows. */
.la-stage-hero{position:absolute;left:112px;top:50px;width:210px;height:210px;pointer-events:none}
.la-stage-hero canvas{width:100%!important;height:100%!important}
.la-stage-pedestal{position:absolute;left:150px;top:228px;width:134px;height:26px;border:3px solid #0d2a5c;border-radius:50%;background:radial-gradient(closest-side,#5aa8ff 55%,#2f6bc0 56%,#2f6bc0 78%,#1f4f96 80%);box-shadow:0 8px 14px #0006;pointer-events:none}
.la-stage-pick{position:absolute;left:104px;top:266px;display:flex;align-items:center;gap:8px;width:234px}
.la-stage-arrow{display:grid;place-items:center;flex:none;width:28px;height:40px;padding:0;border:1.5px solid var(--t-blue-dk);border-radius:9px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font-size:16px;box-shadow:0 3px 0 var(--t-blue-dk);cursor:pointer}
.la-stage-card{flex:1;min-width:0;display:flex;align-items:center;gap:7px;height:40px;padding:0 8px 0 4px;border:1.5px solid var(--t-blue-dk);border-radius:10px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));box-shadow:0 3px 0 var(--t-blue-dk)}
.la-stage-portrait{flex:none;width:32px;height:32px;border-radius:8px;background:#ffd27a center/cover no-repeat}
.la-stage-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.la-stage-text b{overflow:hidden;color:#ffd27a;font:15px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;white-space:nowrap;text-overflow:ellipsis;text-shadow:0 1.5px 0 #12305e}
.la-stage-text small{color:#dbe7f6;font:900 9px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.6px}
/* The Battle / Plaza tabs at the top. */
body[data-ui-layout="stage"] #lobby-screen .la-modes{position:absolute;left:300px;top:10px;display:flex;flex-direction:row;gap:4px;width:auto;height:44px;padding:4px;border:1.5px solid var(--t-blue-dk);border-radius:13px;background:#0d1b3acc}
body[data-ui-layout="stage"] #lobby-screen .la-modes>button:not(#lobby-tab-battle,#lobby-tab-plaza){display:none}
body[data-ui-layout="stage"] #lobby-screen .la-modes>button{flex:none;width:100px;height:34px;padding:0 10px;border-radius:9px}
body[data-ui-layout="stage"] #lobby-screen .la-modes>button:not(.selected){border-color:transparent;background:none;color:#fff;box-shadow:none}
body[data-ui-layout="stage"] #lobby-screen .la-modes .la-mode-icon,body[data-ui-layout="stage"] #lobby-screen .la-modes small{display:none}
body[data-ui-layout="stage"] #lobby-screen .la-modes b{font-size:16px}
/* The rooms panel on the right. */
body[data-ui-layout="stage"] #lobby-screen .la-rooms::before{content:"";position:absolute;left:340px;top:64px;width:460px;height:214px;border:1.5px solid var(--t-line-2);border-radius:16px;background:var(--t-panel);box-shadow:0 6px 16px #12305e59}
body[data-ui-layout="stage"] #lobby-screen .la-title-bar{position:absolute;left:340px;top:64px;width:200px;height:40px;padding:0 0 0 14px;border:0;border-radius:16px 0 0 0;background:none;z-index:1}
body[data-ui-layout="stage"] #lobby-screen #lobby-title{font-size:0;color:var(--t-ink);text-shadow:none}
body[data-ui-layout="stage"] #lobby-screen #lobby-title::before{content:"Open rooms";font:17px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;text-transform:uppercase}
body[data-ui-layout="stage"] #lobby-screen .la-title-bar .la-live{display:none}
body[data-ui-layout="stage"] #lobby-screen .room-pagination{position:absolute;left:556px;top:71px;display:flex;align-items:center;gap:4px;width:236px;height:26px;margin:0;z-index:1}
body[data-ui-layout="stage"] #lobby-screen .room-pagination>.la-spacer{display:none}
body[data-ui-layout="stage"] #lobby-screen .room-pagination :is(#room-prev,#room-next){flex:0 0 30px;width:30px;height:26px;min-height:0;padding:0}
body[data-ui-layout="stage"] #lobby-screen #room-page{flex:1;min-width:0;overflow:hidden;padding:4px 6px;font-size:9.5px;text-align:center;text-overflow:ellipsis}
body[data-ui-layout="stage"] #lobby-screen #lobby-refresh{flex:none;height:26px;min-height:0;padding:0 8px;font-size:10px}
body[data-ui-layout="stage"] #lobby-screen #lobby-online{display:none}
body[data-ui-layout="stage"] #lobby-screen #room-list{position:absolute;left:350px;top:106px;width:440px;height:164px;margin:0;z-index:1}
body[data-ui-layout="stage"] #lobby-screen .la-actions{position:absolute;left:520px;top:300px;display:flex;gap:10px;width:280px;height:64px;z-index:1}
body[data-ui-layout="stage"] #lobby-screen .la-actions .la-solo{display:none}
body[data-ui-layout="stage"] #lobby-screen .la-actions #lobby-create-top{order:1;flex:0 0 84px;height:100%;flex-direction:column;gap:3px;padding:0 6px;font-size:13px;line-height:1;white-space:normal;text-align:center}
body[data-ui-layout="stage"] #lobby-screen .la-actions #lobby-quick-join{order:2;flex:1;height:100%;font-size:26px}
body[data-ui-layout="stage"] #lobby-screen .lobby-chat{position:absolute;left:104px;top:318px;display:flex;flex-direction:column;gap:3px;width:234px;height:52px;margin:0;padding:4px 6px;border:1.5px solid var(--t-line-2);border-radius:11px;background:var(--t-panel);box-sizing:border-box;z-index:1}
body[data-ui-layout="stage"] #lobby-screen .lobby-chat .chat-log{flex:1;min-height:0;overflow:hidden;font-size:10px;line-height:1.2}
body[data-ui-layout="stage"] #lobby-screen .lobby-chat .chat-entry{height:22px}
body[data-ui-layout="stage"] #lobby-screen .lobby-chat .chat-entry :is(.la-channel,#lobby-chat-send){display:none}
/* An upright phone: the "Mobile First" designs (390 x 844) instead of the
   "turn your phone" notice, with the hero (Battle) and the rooms (Rooms)
   on two tabs of a bottom bar. */
@media(orientation:portrait) and (max-width:700px){
  body[data-ui-layout="stage"][data-screen="lobby"] .touch-rotate{display:none!important}
  body[data-ui-layout="stage"][data-screen="lobby"] #lobby-screen{width:390px;height:844px;transform:translate(-50%,-50%) scale(var(--la-pfit,1))}
  body[data-ui-layout="stage"] #lobby-screen .la-mtabs{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-around;height:96px;padding:0 6px 14px;border-top:1.5px solid var(--t-blue-dk);border-radius:0 0 24px 24px;background:linear-gradient(var(--t-blue),var(--t-blue-dk2));box-sizing:border-box}
  body[data-ui-layout="stage"] #lobby-screen .la-mtabs button{display:flex;flex-direction:column;align-items:center;gap:6px;width:66px;padding:0;border:0;background:none;color:#fff;font:14px/1 "Lilita One","Arial Black",sans-serif;cursor:pointer}
  body[data-ui-layout="stage"] #lobby-screen .la-mtabs .ui-i{width:26px;height:26px;stroke-width:2.2}
  body[data-ui-layout="stage"] #lobby-screen .la-mtabs [aria-pressed="true"]{color:#ffd27a}
  body[data-ui-layout="stage"] #lobby-screen .la-mtabs [aria-pressed="true"] .ui-i{box-sizing:border-box;width:48px;height:48px;padding:10px;border:1.5px solid #fff9;border-radius:13px;background:linear-gradient(#ffe36b,#f5b021);color:#3a1c00}
  body[data-ui-layout="stage"] #lobby-screen .la-mtabs .main .ui-i{box-sizing:border-box;width:62px;height:62px;margin-top:-30px;padding:14px;border:3px solid var(--t-blue-dk);border-radius:50%;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff}
  body[data-ui-layout="stage"] #lobby-screen .la-mtabs .main[aria-pressed="true"] .ui-i{background:linear-gradient(#ffe36b,#f5b021);color:#3a1c00}
  body[data-ui-layout="stage"] #lobby-screen .la-modes,body[data-ui-layout="stage"] #lobby-screen .la-stage-rail .gray{display:none}
  /* Battle: the hero, big, with Create and Quick Join under it. */
  body[data-ui-layout="stage"] #lobby-screen .la-player{left:16px;top:50px;width:212px;height:52px}
  body[data-ui-layout="stage"] #lobby-screen .la-stage-top{right:16px;top:54px}
  body[data-ui-layout="stage"] #lobby-screen .la-round{width:46px;height:46px}
  body[data-ui-layout="stage"] #lobby-screen .la-stage-rail{left:16px;top:200px}
  body[data-ui-layout="stage"] #lobby-screen .la-stage-hero{left:70px;top:150px;width:250px;height:380px}
  body[data-ui-layout="stage"] #lobby-screen .la-stage-pedestal{left:82px;top:512px;width:226px;height:42px}
  body[data-ui-layout="stage"] #lobby-screen .la-stage-pick{left:46px;top:556px;width:298px}
  body[data-ui-layout="stage"] #lobby-screen .la-stage-arrow{width:38px;height:44px}
  body[data-ui-layout="stage"] #lobby-screen .la-stage-card{height:44px;justify-content:center}
  body[data-ui-layout="stage"] #lobby-screen .la-stage-text b{font-size:20px}
  body[data-ui-layout="stage"] #lobby-screen .la-actions{left:16px;top:630px;width:358px;height:90px}
  body[data-ui-layout="stage"] #lobby-screen .la-actions #lobby-create-top{flex:0 0 84px;font-size:15px}
  body[data-ui-layout="stage"] #lobby-screen .la-actions #lobby-quick-join{font-size:32px}
  body[data-ui-layout="stage"] #lobby-screen:not([data-mtab="rooms"]) :is(.la-title-bar,.room-pagination,.lobby-chat),body[data-ui-layout="stage"] #lobby-screen:not([data-mtab="rooms"]) #room-list{display:none!important}
  body[data-ui-layout="stage"] #lobby-screen .la-rooms::before{display:none}
  /* Rooms: the room list, Create, Refresh and the chat line. */
  body[data-ui-layout="stage"] #lobby-screen[data-mtab="rooms"] :is(.la-stage-hero,.la-stage-pedestal,.la-stage-pick,.la-stage-rail,.la-stage-top,.la-player){display:none}
  body[data-ui-layout="stage"] #lobby-screen[data-mtab="rooms"] .la-title-bar{display:flex;left:16px;top:66px;width:200px;height:44px;padding:0}
  body[data-ui-layout="stage"] #lobby-screen[data-mtab="rooms"] #lobby-title{color:#fff}
  body[data-ui-layout="stage"] #lobby-screen[data-mtab="rooms"] #lobby-title::before{font-size:28px;text-shadow:0 2px 0 #12305e}
  body[data-ui-layout="stage"] #lobby-screen[data-mtab="rooms"] .la-actions{left:218px;top:66px;width:156px;height:46px}
  body[data-ui-layout="stage"] #lobby-screen[data-mtab="rooms"] .la-actions #lobby-quick-join{display:none}
  body[data-ui-layout="stage"] #lobby-screen[data-mtab="rooms"] .la-actions #lobby-create-top{flex:1;font-size:16px}
  body[data-ui-layout="stage"] #lobby-screen[data-mtab="rooms"] #room-list{display:grid;left:16px;top:124px;width:358px;height:480px;grid-template-columns:1fr;grid-template-rows:repeat(6,1fr);gap:10px}
  body[data-ui-layout="stage"] #lobby-screen[data-mtab="rooms"] .room-pagination{display:flex;left:16px;top:618px;width:358px;height:36px}
  body[data-ui-layout="stage"] #lobby-screen[data-mtab="rooms"] .lobby-chat{display:flex;left:16px;top:666px;width:358px;height:60px}
}
/* No-APK notice on the landing page (#no-apk-dialog). */
.la-noapk{width:min(620px,calc(100vw - 24px));max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:0;border:2.5px solid var(--t-accent-hi);border-radius:20px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 12px 32px #0b1e3db3;overflow:auto;position:fixed;inset:auto;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);font:800 12px/1.35 Nunito,"Segoe UI",system-ui,sans-serif}
.la-noapk::backdrop{background:#0b1e3db3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.la-noapk .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.la-noapk-head{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 18px 14px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;text-align:center}
.la-noapk-badge{display:grid;place-items:center;width:56px;height:56px;border:3px solid #fff;border-radius:50%;background:linear-gradient(var(--t-accent-hi),var(--t-accent));font-size:28px;box-shadow:0 4px 8px #0b1e3d66}
.la-noapk-head h2{margin:0;font:24px/1.05 "Lilita One","Arial Black",sans-serif;letter-spacing:.6px;text-transform:uppercase;text-shadow:0 2px 0 var(--t-blue-dk)}
.la-noapk-head p{margin:0;color:#d6e4ff;font-size:12.5px}
.la-noapk-lang{position:absolute;top:12px;right:12px;display:flex;gap:2px;padding:3px;border:1px solid #fff5;border-radius:999px;background:#0b1e3d59}
.la-noapk-lang button{padding:4px 10px;border:0;border-radius:999px;background:none;color:#fffc;font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;cursor:pointer}
.la-noapk-lang button[aria-pressed="true"]{background:#fff;color:var(--t-blue)}
.la-noapk-body{display:flex;flex-direction:column;gap:10px;padding:14px 16px 8px}
.la-noapk-warn{display:flex;gap:10px;padding:12px;border:1.5px solid #e04848;border-radius:12px;background:var(--t-red-tint);color:#b83232;font-size:11px;line-height:1.4}
.la-noapk-warn>span:last-child{display:flex;flex-direction:column;gap:3px}
.la-noapk-warn b{color:#a12e2e;font:14px/1.1 "Lilita One","Arial Black",sans-serif;letter-spacing:.2px}
.la-noapk-warn-icon{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:10px;background:linear-gradient(#ff8a8a,#d93e3e);color:#fff;font-size:19px}
.la-noapk-how{margin:0;color:var(--t-ink-2);font:10px/1.2 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.la-noapk-plats{display:flex;gap:8px}
.la-noapk-plat{flex:1;display:flex;align-items:center;gap:9px;padding:10px;border:1px solid var(--t-line);border-radius:12px;background:var(--t-card)}
.la-noapk-plat i{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;background:var(--t-tint);color:var(--t-blue);font-size:16px}
.la-noapk-plat span{display:flex;flex-direction:column;gap:1px;min-width:0}
.la-noapk-plat b{font:12px/1.2 "Lilita One","Arial Black",sans-serif;letter-spacing:.2px}
.la-noapk-plat small{color:var(--t-muted);font-size:10px}
.la-noapk-official{display:flex;align-items:center;gap:6px;margin:0;padding:8px 10px;border:1px solid var(--t-go-hi);border-radius:10px;background:var(--t-go-tint);color:var(--t-go-text);font-weight:900;font-size:11px}
.la-noapk-official .ui-i{font-size:15px}
.la-noapk-foot{display:flex;align-items:center;gap:8px;padding:8px 16px 16px}
.la-noapk-again{display:flex;align-items:center;gap:6px;color:var(--t-ink-2);font-size:10.5px;cursor:pointer}
.la-noapk-again input{appearance:none;-webkit-appearance:none;display:grid;place-items:center;width:16px;height:16px;flex:none;margin:0;border:1.5px solid var(--t-line-2);border-radius:4px;background:var(--t-card);cursor:pointer}
.la-noapk-again input:checked{border-color:var(--t-blue-dk);background:var(--t-blue)}
.la-noapk-again input:checked::after{content:"";width:4px;height:8px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.la-noapk-actions{display:flex;gap:8px}
.la-noapk-actions .la-btn{height:38px;padding:0 16px;font-size:13px}
.la-noapk-actions .la-btn[hidden]{display:none}
@media (max-width:560px){
  .la-noapk-head h2{font-size:22px}
  .la-noapk-head p{font-size:11.5px}
  .la-noapk-plats{flex-direction:column}
  .la-noapk-foot{flex-direction:column;align-items:stretch;gap:10px}
  .la-noapk-foot .la-spacer{display:none}
  .la-noapk-actions{flex-direction:column}
  .la-noapk-actions .la-btn{height:44px;font-size:14px}
  .la-noapk-again{order:1;justify-content:center}
}
@media (max-height:480px){
  .la-noapk-head{flex-direction:row;flex-wrap:wrap;justify-content:center;column-gap:10px;padding:10px 90px 10px 14px}
  .la-noapk-badge{width:36px;height:36px;border-width:2px;font-size:18px}
  .la-noapk-head h2{font-size:19px}
  .la-noapk-head p{flex-basis:100%}
  .la-noapk-body{gap:7px;padding:10px 14px 4px}
  .la-noapk-warn{padding:8px 10px}
  .la-noapk-foot{padding:6px 14px 10px}
}
/* The lobby's currencies (the "Lobby · OG Layout · Solid" title bar): the
   clover medal, peso and gold, each "Soon" until the game has them (no
   made-up amounts). The clover medal's art is not in the released data
   (UIIconPack156), so a line icon stands in for it. */
#lobby-screen .la-currencies{display:flex;align-items:center;gap:6px;margin-right:6px}
#lobby-screen .la-currency{display:flex;align-items:center;gap:5px;height:24px;padding:0 9px 0 3px;border-radius:999px;background:#12305e66;color:#fff}
#lobby-screen .la-cur-icon{display:grid;place-items:center;width:20px;height:20px;flex:none}
#lobby-screen .la-cur-icon.clover{border-radius:50%;background:radial-gradient(#3e9e45,#2e7a33);color:#c8f5c0}
#lobby-screen .la-cur-icon.clover .ui-i{width:14px;height:14px;stroke-width:2.4}
#lobby-screen .la-currency b{color:#dbe7f6;font:900 9px/1 Nunito,sans-serif;letter-spacing:.4px;text-transform:uppercase;opacity:.85}
body[data-ui-layout="stage"] #lobby-screen .la-currencies{display:none}
/* The touch HUD in the Glass style (the "Battle · HUD · Liquid Glass"
   design): frosted, see-through buttons with a light rim, so the arena
   shows through; positions stay the touch layout's. */
body[data-ui-style="glass"] .touch-actions button,body[data-ui-style="glass"] .touch-fab,body[data-ui-style="glass"] .touch-fab-menu button>i,body[data-ui-style="glass"] .touch-fab-tab,body[data-ui-style="glass"] .touch-hero{border:1.5px solid #ffffffa6;background:linear-gradient(#ffffff3d,#ffffff14);color:#fff;box-shadow:inset 0 1px 0 #ffffff80,0 4px 14px #0004;-webkit-backdrop-filter:blur(var(--glass-blur,14px)) saturate(1.4);backdrop-filter:blur(var(--glass-blur,14px)) saturate(1.4)}
body[data-ui-style="glass"] .touch-actions #touch-attack{border:2px solid #ffffffb3;background-color:#ffffff2e;box-shadow:inset 0 1px 0 #ffffff99,0 0 0 3px #ffffff26,0 6px 16px #0005}
body[data-ui-style="glass"] .touch-actions .touch-skill{border:2px solid #ffffffb3;background:#ffffff1f;box-shadow:inset 0 1px 0 #ffffff80,0 4px 12px #0004}
body[data-ui-style="glass"] .touch-actions .touch-skill[data-state="ready"]{border-color:#fff!important;box-shadow:inset 0 1px 0 #fff,0 0 10px #ffffff80}
body[data-ui-style="glass"] .touch-fab-menu #touch-board[aria-pressed="true"]>i{background:linear-gradient(#ffffff73,#ffffff33)}
body[data-ui-style="glass"] #touch-pad .touch-stick{border:1.5px solid #ffffffa6;background:#ffffff26;box-shadow:inset 0 1px 0 #ffffff80;-webkit-backdrop-filter:blur(var(--glass-blur,14px));backdrop-filter:blur(var(--glass-blur,14px))}
body[data-ui-style="glass"] #touch-pad .touch-knob{background:radial-gradient(circle at 40% 35%,#ffffffe6,#ffffff80);box-shadow:0 2px 8px #0004}
body[data-ui-style="glass"] .touch-skill kbd,body[data-ui-style="glass"] .touch-hero kbd{border-color:#ffffff99;background:#ffffffd9;color:#12305e}
/* The Quests window (the "Classic Colors · Quests (Daily / Hero)" designs):
   its tabs and daily bonus as designed, each saying what will come. The
   game has no quests yet, so the window lists none (no made-up rewards). */
.la-quests{position:fixed;inset:auto;left:50%;top:50%;width:760px;height:330px;margin:0;padding:0;border:1.5px solid var(--t-line-2);border-radius:18px;background:var(--t-panel);color:var(--t-ink);box-shadow:0 18px 40px #0b1e3d99;overflow:hidden;transform:translate(-50%,-50%) scale(min(1.4,var(--la-fit,1)));font:800 11px/1.3 Nunito,"Segoe UI",system-ui,sans-serif}
.la-quests[open]{display:flex;flex-direction:column}
.la-quests::backdrop{background:#0b1e3d80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.la-quests .ui-i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.la-quests-head{display:flex;align-items:center;gap:10px;height:48px;flex:none;padding:0 8px 0 14px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));border-bottom:1.5px solid var(--t-blue-dk);color:#fff}
.la-quests-head>.ui-i{font-size:20px}
.la-quests-head h2{margin:0;font:20px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;text-shadow:0 1.5px 0 var(--t-blue-dk)}
.la-quests-tabs{display:flex;gap:4px;margin-left:8px}
.la-quests-tabs button{display:flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1.5px solid transparent;border-radius:9px;background:none;color:#fff;font:13px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;text-transform:uppercase;cursor:pointer}
.la-quests-tabs button[aria-selected="true"]{border-color:#fff;background:var(--t-card);color:var(--t-link)}
.la-quests-note{display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:#12305e66;font:900 10px/1 Nunito,sans-serif}
.la-quests-x{display:grid;place-items:center;width:32px;height:32px;padding:0;border:1.5px solid #fff;border-radius:9px;background:linear-gradient(#ff86a8,#e83c6e);color:#fff;font-size:16px;cursor:pointer}
.la-quests-body{flex:1;min-height:0;display:flex;gap:10px;padding:10px}
.la-quests-list{flex:1;display:grid;place-items:center;border:1.5px dashed var(--t-line);border-radius:14px;background:var(--t-surface)}
.la-quests-empty{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:340px;text-align:center}
.la-quests-empty[hidden]{display:none}
.la-quests-icon{display:grid;place-items:center;width:56px;height:56px;border:1.5px solid var(--t-accent-dk);border-radius:14px;background:linear-gradient(var(--t-accent-hi),var(--t-accent));color:#fff;font-size:28px;box-shadow:0 3px 0 var(--t-accent-dk)}
.la-quests-empty b{font:18px/1.1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;color:var(--t-ink)}
.la-quests-empty p{margin:0;color:var(--t-muted);font:800 12px/1.4 Nunito,sans-serif}
.la-quests-bonus{flex:0 0 190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;border:1.5px solid var(--t-blue-dk);border-radius:14px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;text-align:center}
.la-quests-bonus b{font:16px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.la-quests-bonus p{margin:0;color:#dbe7f6;font:800 10px/1.35 Nunito,sans-serif}
.la-quests-chest{display:grid;place-items:center;width:64px;height:64px;border:2px solid #fff9;border-radius:50%;background:#12305e66;font-size:30px;filter:grayscale(.3)}
.la-quests-bonus em{padding:4px 12px;border-radius:999px;background:linear-gradient(#ffd27a,var(--t-accent));color:#fff;font:11px/1 "Lilita One","Arial Black",sans-serif;font-style:normal;letter-spacing:.4px;text-transform:uppercase}
.la-player-peek{margin-top:4px;padding:6px 12px;border:1.5px solid var(--t-blue-dk);border-radius:999px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.3px;cursor:pointer}
/* Staff title (docs/staff-title.md): the GM / DEV chip before a name in room
   slots and chat, a spinning holo ring and a gradient name on a staff room
   slot. Every animation moves only transform or opacity (compositor work, no
   repaint), chat chips stop after three passes, and reduced motion stops all
   of it. No image or font file. GM uses the holo palette, DEV the emerald one. */
.staff-chip{position:relative;display:inline-flex;align-items:center;gap:3px;vertical-align:1px;margin:0 4px 0 0;padding:0 5px 0 4px;overflow:hidden;border:1px solid transparent;border-radius:5px;font:400 9px/13px "Lilita One","Arial Black",sans-serif;letter-spacing:.06em;white-space:nowrap;text-shadow:none;-webkit-text-stroke:0;paint-order:normal;isolation:isolate}
.staff-chip::before{content:"";flex:none;width:9px;height:8px;background:linear-gradient(90deg,var(--staff-a),var(--staff-b),var(--staff-c));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 6l5 4 5-8 5 8 5-4-2 12H4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 6l5 4 5-8 5 8 5-4-2 12H4z'/%3E%3C/svg%3E") center/contain no-repeat}
.staff-chip::after{content:"";position:absolute;top:-2px;bottom:-2px;left:0;width:45%;background:linear-gradient(100deg,#fff0,#ffffffd9,#fff0);transform:translateX(-160%) skewX(-18deg);animation:staff-shine 2.4s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes staff-shine{0%{transform:translateX(-160%) skewX(-18deg)}45%,100%{transform:translateX(320%) skewX(-18deg)}}
.staff-chip[data-title="gm"]{--staff-a:#7df9ff;--staff-b:#a78bff;--staff-c:#ff7ad9;background:linear-gradient(#2a1b5c,#0e0a24) padding-box,linear-gradient(90deg,#7df9ff,#a78bff,#ff7ad9,#ffd58a) border-box;color:#ede6ff;box-shadow:0 0 6px #a78bffa6}
.staff-chip[data-title="dev"]{--staff-a:#b8ff6b;--staff-b:#3df2b0;--staff-c:#2bc4ff;background:linear-gradient(#0b3a33,#04161a) padding-box,linear-gradient(90deg,#b8ff6b,#3df2b0,#2bc4ff) border-box;color:#dfffef;box-shadow:0 0 6px #1fd69aa6}
:is(.chat-log,#battle-chat-log) .staff-chip::after{animation-iteration-count:3}
#room-screen .player-slot>.staff-chip{position:absolute;left:50%;top:94px;margin:0;transform:translateX(-50%);z-index:1;animation:staff-pop .5s cubic-bezier(.3,1.6,.5,1) both}
body #room-screen.la-room .player-slot>.staff-chip{position:relative;left:auto;top:auto;transform:none;margin-top:1px}
@keyframes staff-pop{0%{opacity:0;scale:.4}100%{opacity:1;scale:1}}
/* The staff slot's ring: a conic holo ring around the avatar, spun by transform. */
body #room-screen.la-room .player-slot[data-staff]::after{content:"";display:block;position:absolute;top:2px;left:50%;width:60px;height:60px;margin-left:-30px;border-radius:50%;background:conic-gradient(var(--staff-a),var(--staff-b),var(--staff-c),var(--staff-d),var(--staff-a));-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 calc(100% - 3px));filter:drop-shadow(0 0 4px var(--staff-b));animation:staff-spin 3s linear infinite;will-change:transform;pointer-events:none;z-index:0}
body #room-screen .player-slot[data-staff="gm"]{--staff-a:#7df9ff;--staff-b:#a78bff;--staff-c:#ff7ad9;--staff-d:#ffd58a}
body #room-screen .player-slot[data-staff="dev"]{--staff-a:#b8ff6b;--staff-b:#3df2b0;--staff-c:#2bc4ff;--staff-d:#3df2b0}
@keyframes staff-spin{to{transform:rotate(1turn)}}
body #room-screen .player-slot[data-staff] strong{background:linear-gradient(90deg,var(--staff-a),#fff 45%,var(--staff-c));-webkit-background-clip:text;background-clip:text;color:transparent!important;text-shadow:none}
@media (prefers-reduced-motion:reduce){.staff-chip::after,body #room-screen .player-slot[data-staff]::after,#room-screen .player-slot>.staff-chip{animation:none}}
/* Options -> Controls -> keyboard rows (key_options.rs) */
.game-options .options-keymap{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;margin:6px 0}
.game-options .la-opt-key{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;padding:4px 6px 4px 10px;border:1px solid var(--t-line);border-radius:9px;background:var(--t-card);color:var(--t-ink);font:900 11px/1 Nunito,sans-serif;cursor:pointer}
.game-options .la-opt-key kbd{min-width:28px;padding:5px 7px;border-radius:7px;background:var(--t-panel-2);color:var(--t-ink);font:900 11px/1 Nunito,sans-serif;text-align:center}
.game-options .la-opt-key[data-capture]{border-color:var(--t-blue);box-shadow:0 0 0 2px var(--t-blue-hi)}
.game-options .options-keymap-status{min-height:14px;margin:2px 0 6px;color:var(--t-ink-2);font:800 11px/1.3 Nunito,sans-serif}
.game-options .options-keys-reset{height:28px;padding:0 12px;border:1px solid var(--t-line);border-radius:8px;background:var(--t-panel-2);color:var(--t-ink);font:900 11px/1 Nunito,sans-serif;cursor:pointer}

/* Turned page (bug sheet 53, index.html "Turned page"): on a portrait screen
   that cannot lock landscape the body takes the landscape size and is turned
   90 degrees clockwise; modal dialogs open in place, over a shade. */
html[data-turned],html[data-turned] body{overflow:hidden;overscroll-behavior:none}
html[data-turned] body{position:fixed;left:0;top:0;width:var(--turn-w);height:var(--turn-h);min-height:0;margin:0;transform-origin:0 0;transform:translate(var(--turn-x),var(--turn-y)) rotate(90deg)}
html[data-turned][data-turn-tall] body{position:absolute}
:where(html[data-turned]) :where(dialog[data-turned-modal]){position:fixed;inset:0;margin:auto;max-width:calc(100% - 6px - 2em);max-height:calc(100% - 6px - 2em);overflow:auto}
html[data-turned] dialog[data-turned-modal]{z-index:2147483000}
html[data-turned] .turn-backdrop{position:fixed;inset:0;z-index:2147482999;background:#0b1e3d80}
html[data-turnable] #touch-rotate-page{display:none}
#touch-rotate-page{pointer-events:auto;min-height:40px;padding:9px 16px;border:1px solid #ffffff38;border-radius:999px;background:#ffffff12;color:#fff;font:800 12px/1.2 Nunito,"Segoe UI",system-ui,sans-serif}
/* Language picker in the landing card's header (web/i18n.js): a globe and
   the language code over a transparent native select. */
.la-login-head .la-lang-pick{order:1;position:relative;display:inline-flex;align-items:center;gap:4px;flex:none;margin:0 0 0 auto;height:28px;padding:0 8px;box-sizing:border-box;letter-spacing:0;border:1px solid #ffffff59;border-radius:8px;background:#12305e59;color:#fff;cursor:pointer}
.la-lang-pick .ui-i{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.la-lang-code{font:900 11px/1 Nunito,system-ui,sans-serif;letter-spacing:.4px}
.la-lang-pick select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;font-size:16px}
.la-lang-pick:focus-within{outline:2px solid #fff;outline-offset:1px}
/* Server full (servers_full.rs): the refused-connection card, the Quick Join
   dialog, the room list states and the room's wait for a free server. */
.la-btn.pink{border-color:#b8395c;background:linear-gradient(#ff86a8,#e83c6e);box-shadow:0 3px 0 #b8395c}
.la-offline-icon .ui-i:is(.la-offline-users,.la-offline-tabs),.la-offline :is(.la-offline-meta,.la-offline-kept),#la-offline-support{display:none}
.la-offline[data-kind] .la-offline-wifi,.la-offline[data-kind] #la-offline-reload{display:none}
.la-offline[data-kind="full"] .la-offline-users,.la-offline[data-kind="tabs"] .la-offline-tabs{display:block}
.la-offline[data-kind] .la-offline-card{width:380px}
.la-offline[data-kind="tabs"] .la-offline-icon{background:linear-gradient(var(--t-blue-hi),var(--t-blue));box-shadow:0 4px 12px #245fb066}
.la-offline[data-kind] .la-offline-bar i{width:0;animation:none;transition:width .4s linear}
.la-offline[data-kind="full"] .la-offline-bar i{background:linear-gradient(90deg,var(--t-accent-hi),var(--t-accent))}
.la-offline[data-kind] .la-offline-meta{display:flex;justify-content:space-between;width:100%;margin-top:-3px;color:var(--t-muted);font:900 10px/1.2 Nunito,sans-serif}
.la-offline-meta #la-offline-next{color:var(--t-blue)}
.la-offline[data-kind] .la-offline-kept{display:flex;align-items:center;gap:6px;width:100%;padding:7px 10px;border:1px solid var(--t-line);border-radius:10px;background:var(--t-card);color:var(--t-ink-2);font:900 10px/1.3 Nunito,sans-serif;text-align:left;box-sizing:border-box}
.la-offline-kept .ui-i{flex:none;font-size:13px}.la-offline-shield{color:#3e9e45}.la-offline-info{display:none;color:var(--t-blue)}
.la-offline[data-kind="tabs"] .la-offline-shield{display:none}.la-offline[data-kind="tabs"] .la-offline-info{display:block}
.la-offline[data-kind="full"] #la-offline-support{display:inline-flex}
#la-offline-retry:disabled{opacity:.6;cursor:default;transform:none}
.la-qjfull{width:450px}
.la-modal-head.orange{background:linear-gradient(var(--t-accent-hi),var(--t-accent));border-bottom-color:var(--t-accent-dk)}
.la-modal-head.orange h2{text-shadow:0 1.5px 0 var(--t-accent-dk)}
.la-qjfull .la-rename-body{gap:8px}
.la-qjfull-lede{margin:0;color:var(--t-ink);font:800 12px/1.4 Nunito,sans-serif}
.la-qj-opt{display:flex;align-items:center;gap:10px;width:100%;height:52px;padding:0 12px 0 8px;border:1.25px solid var(--t-blue-dk);border-radius:12px;background:linear-gradient(var(--t-blue-hi),var(--t-blue));box-shadow:0 3px 0 var(--t-blue-dk),inset 0 -3px 0 #00000026,inset 0 2px 0 #ffffff73;color:#fff;text-align:left;cursor:pointer;box-sizing:border-box}
.la-qj-opt.room{border-color:var(--t-go-dk);background:linear-gradient(var(--t-go-hi),var(--t-go));box-shadow:0 3px 0 var(--t-go-dk),inset 0 -3px 0 #00000026,inset 0 2px 0 #ffffff73}
.la-qj-opt.plaza{height:44px;border-color:var(--t-line-2);background:linear-gradient(var(--t-card),var(--t-panel-3));box-shadow:0 3px 0 var(--t-line-2);color:var(--t-link-2)}
.la-qj-opt>i{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:10px;background:#fff3;font-size:18px}
.la-qj-opt.plaza>i{width:30px;height:30px;background:#245fb01a;font-size:16px}
.la-qj-opt>span{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.la-qj-opt b{font:14px/1.1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.la-qj-opt.plaza b{font-size:13px}
.la-qj-opt small{color:#ffffffd9;font:800 9.5px/1.2 Nunito,sans-serif}
.la-qj-opt.plaza small{color:var(--t-muted)}
.la-qj-opt>em{flex:none;padding:4px 8px;border-radius:999px;background:#fff3;font:11px/1 "Lilita One","Arial Black",sans-serif;font-style:normal}
.la-qj-opt:active{transform:translateY(1px)}
.la-qjfull .ui-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.la-qjfull-support{display:flex;align-items:center;gap:6px;width:100%;padding:7px 10px;border:1px solid #f2a9a9;border-radius:10px;background:#ffe3e3;color:#b83232;font:900 10.5px/1.2 Nunito,sans-serif;text-align:left;cursor:pointer}
.la-qjfull-support .ui-i{flex:none;font-size:13px;color:#d93e3e}.la-qjfull-support span{flex:1}
.la-qjfull-support b{color:#d93e3e;font:11px/1 "Lilita One","Arial Black",sans-serif}
.la-qjfull .la-modal-foot .la-btn{width:120px;height:30px;font-size:12px}
:is(#lobby-screen,#landing-lobby) .la-actions #lobby-quick-join[data-waiting="true"]{border-color:var(--t-blue-dk);background:linear-gradient(var(--t-blue-hi),var(--t-blue));box-shadow:0 3px 0 var(--t-blue-dk),inset 0 1px 0 #ffffff80}
.lobby-servers-busy{display:flex;align-items:center;gap:5px;margin:0;padding:0 4px;color:var(--t-accent-text);font:900 10px/1 Nunito,sans-serif;white-space:nowrap}
.lobby-servers-busy::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--t-accent)}
.lobby-servers-busy[hidden]{display:none}
.room-row-state{order:3;display:inline-flex;align-items:center;gap:3px;margin:0;padding:0;border:0;border-radius:0;background:none;font:900 9.5px/1 Nunito,sans-serif;letter-spacing:0;text-transform:none}
.room-row-state[data-state="busy"]{color:var(--t-accent-text)}.room-row-state[data-state="full"]{color:var(--t-muted)}
.room-row-state[data-state="busy"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--t-accent)}
:is(#lobby-screen,#landing-lobby) .room-row:is(.host-full,.room-full) .room-count{background:#8a97a81f;color:var(--t-muted)}
:is(#lobby-screen,#landing-lobby) .room-row.live .room-count{background:var(--t-go-tint);color:var(--t-go-text)}
:is(#lobby-screen,#landing-lobby) .room-row:is(.host-full,.room-full) .button{display:none}
:is(#lobby-screen,#landing-lobby) .room-row:is(.host-full,.room-full) .room-mode-icon{filter:grayscale(1);opacity:.55}
body #room-screen.la-room #room-full-actions .button .ui-i{margin-right:5px;font-size:14px;vertical-align:-2px}
body #room-screen.la-room #room-auto-start{border:1.25px solid var(--t-blue-dk);background:linear-gradient(var(--t-blue-hi),var(--t-blue));box-shadow:0 3px 0 var(--t-blue-dk);color:#fff}
.room-auto-start-stop,.room-start-wait{display:none}
body #room-screen.la-room #room-full-actions #room-auto-start[aria-pressed="true"]{position:absolute;right:7px;top:7px;z-index:1;height:30px;padding:0 10px;border-color:#a82c2c;border-radius:8px;background:linear-gradient(#ff7a7a,#d93e3e);box-shadow:0 2px 0 #a82c2c;font:11px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
#room-auto-start[aria-pressed="true"] .room-auto-start-wait{display:none}
#room-auto-start[aria-pressed="true"] .room-auto-start-stop{display:inline-block;font-size:10px}
body #room-screen.la-room #room-full-actions #room-full-quick-join{position:absolute;right:4px;top:-30px;height:22px;padding:0 8px;border:1px solid var(--t-go-dk);border-radius:7px;background:linear-gradient(var(--t-go-hi),var(--t-go));color:#fff;font:10px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase;box-shadow:none}
body #room-screen.la-room #room-full-quick-join .ui-i{margin-right:4px;font-size:11px;vertical-align:-1px}
body #room-screen.la-room[data-servers-full="true"] #room-action-status{display:flex;align-items:center;gap:8px;top:294px;height:28px;padding:0 160px 0 10px;border:1px solid #ffd27a66;border-radius:10px;background:#0b1e3dcc;text-align:left;font-size:10.5px;box-sizing:border-box;text-shadow:none}
body #room-screen.la-room[data-servers-full="true"] #room-action-status::before{content:"";width:13px;height:13px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffd27a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M6 14H4a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2h-2'/%3E%3Cpath d='m13 6-4 6h6l-4 6'/%3E%3C/svg%3E") center/contain no-repeat}
body #room-screen.la-room[data-auto-start="true"] #room-start{justify-content:flex-start;padding-right:84px;font-size:15px}
body #room-screen.la-room[data-auto-start="true"] #room-start>svg:first-child{display:none}
body #room-screen.la-room[data-auto-start="true"] #room-start .room-start-wait{display:block}
.room-start-timer{margin-left:auto;margin-right:auto;padding:4px 8px;border-radius:999px;background:#9a5a1240;font:11px/1 "Lilita One","Arial Black",sans-serif;font-style:normal}
.room-start-timer[hidden]{display:none}
:is(#lobby-screen,#landing-lobby) .room-pagination:has(.lobby-servers-busy:not([hidden])) .lobby-online{display:none}
body #room-screen.la-room[data-auto-start="true"] #room-start:disabled{filter:none;opacity:1}

/* Headquarters (crates/web/src/browser/headquarters.rs): the lobby window,
   the doorbell/invite call and the in-battle owner panel. */
.la-hq{width:420px;max-width:calc(100vw - 32px)}
.la-hq .la-rename-body{gap:8px}
.la-hq-lede{margin:0;color:var(--t-ink);font:800 12px/1.4 Nunito,sans-serif}
.la-hq-visit{gap:8px;padding-right:4px}
.la-hq-visit .la-btn{height:32px;flex:none}
.la-hq-status{display:flex;flex-wrap:wrap;gap:4px 10px;margin:0;color:var(--t-ink-2);font:800 12px/1.3 Nunito,sans-serif}
.la-hq-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.la-hq-seats{display:flex;align-items:center;gap:6px}
.la-hq-seats select{height:30px;border:1.5px solid var(--t-blue);border-radius:9px;background:var(--t-card);color:var(--t-ink);font:900 12px/1 Nunito,sans-serif}
.la-hq h3{margin:4px 0 0;color:var(--t-ink-2);font:12px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.5px;text-transform:uppercase}
.la-hq-list{display:flex;flex-direction:column;gap:4px;max-height:180px;margin:0;padding:0;overflow-y:auto;list-style:none}
.la-hq-list li{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 6px 0 10px;border:1px solid var(--t-line-2);border-radius:9px;background:var(--t-card)}
.la-hq-list li>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 12px/1 Nunito,sans-serif}
.la-hq-list li>em{padding:2px 6px;border-radius:6px;background:var(--t-go);color:#fff;font:900 10px/1.2 Nunito,sans-serif;font-style:normal}
.la-hq-list li.la-hq-empty{justify-content:center;color:var(--t-ink-2);font:800 11px/1.3 Nunito,sans-serif}
.la-hq-check{display:flex;align-items:center;gap:8px;color:var(--t-ink);font:800 12px/1.3 Nunito,sans-serif;text-transform:none;letter-spacing:0;cursor:pointer}
.la-hq-check input{width:16px;height:16px;margin:0}
.la-hq-list .la-btn.small{height:26px;padding:0 10px;font-size:11px}
/* Planned maintenance (browser/maintenance.rs): lobby/room banner, the battle's last minute, the offline card */
.la-maint{position:fixed;z-index:55;left:50%;top:max(8px,env(safe-area-inset-top));transform:translateX(-50%) scale(var(--la-fit,1));transform-origin:top center;display:flex;align-items:center;gap:7px;max-width:min(520px,calc(100vw - 24px));height:30px;padding:0 12px 0 6px;border:1.25px solid #e8a23a;border-radius:10px;background:linear-gradient(#fff1cf,#ffe0a3);color:#8a4b08;box-shadow:0 4px 12px #0b1e3d40;font:900 11px/1 Nunito,sans-serif;white-space:nowrap;pointer-events:none}
.la-maint[hidden],body:not([data-screen="lobby"]):not([data-screen="room"]):not([data-screen="battle"]) .la-maint,body[data-screen="battle"]:not([data-maint-soon]) .la-maint{display:none}
.la-maint-icon{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#ee8f22;color:#fff}
.la-maint .ui-i{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.la-maint b{font:14px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
#la-maint-text{overflow:hidden;text-overflow:ellipsis;color:#9a6420}
#la-maint-text:empty{display:none}
body[data-screen="battle"] .la-maint{max-width:min(680px,calc(100vw - 24px));top:calc(60px*var(--la-fit,1));height:40px;padding:0 14px 0 8px;border-color:#ffd27a99;border-radius:12px;background:#0b1e3de6;color:#fff}
body[data-screen="battle"] .la-maint-icon{width:28px;height:28px;border:2px solid #fff;background:linear-gradient(#ffd27a,#ee8f22)}
body[data-screen="battle"] .la-maint .ui-i{width:15px;height:15px}
body[data-screen="battle"] .la-maint b{color:#ffd27a}
body[data-screen="battle"] #la-maint-text{color:#c9d6ea}
body[data-maint="closed"] #room-start,body[data-maint="active"] #room-start{filter:grayscale(1) brightness(.95)}
.la-offline-icon .ui-i:is(.la-offline-wrench,.la-offline-check),#la-offline-discord{display:none}
.la-offline[data-kind="maintenance"] .la-offline-wrench,.la-offline[data-kind="back"] .la-offline-check{display:block}
.la-offline[data-kind="maintenance"] #la-offline-discord{display:inline-flex}
.la-offline[data-kind="back"] .la-offline-icon{background:linear-gradient(#9be38a,#3e9e45);box-shadow:0 4px 12px #2e8a3a66}
.la-offline[data-kind="back"] :is(.la-offline-actions,.la-offline-meta,.la-offline-kept){display:none}
.la-offline[data-kind="back"] .la-offline-bar i{width:100%;background:linear-gradient(90deg,#9be38a,#3e9e45)}
#la-offline-discord{border-color:#3f4bc4;background:linear-gradient(#7c87f7,#5865f2);box-shadow:0 3px 0 #3f4bc4;text-decoration:none}
/* PC / mobile (RUST-ONLY, docs/platform.md): a player's platform badge and the room rule "Play on". */
.platform-badge{display:block;width:18px;height:18px;border:1.5px solid #fff;border-radius:50%;box-sizing:border-box;background:linear-gradient(#5d7ba6,#2c4569) center/10px no-repeat;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"),linear-gradient(#5d7ba6,#2c4569);background-size:10px,cover;background-position:center;background-repeat:no-repeat;font-style:normal}
.platform-badge[data-platform="mobile"]{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E"),linear-gradient(#5fd86e,#2fa344)}
.platform-badge[hidden]{display:none}
.la-player-head{position:relative}
#lobby-player-platform{position:absolute;left:24px;top:24px;width:15px;height:15px;background-size:8px,cover;z-index:1}
body #room-screen.la-room .player-slot .platform-badge{position:absolute;left:calc(50% + 9px);top:42px;z-index:1}
/* The rule on the room title and in the room list. */
.la-play-on-chip{display:inline-flex;align-items:center;gap:4px;flex:none;height:18px;padding:0 6px;border:1px solid #7fb2ee;border-radius:5px;background:linear-gradient(#4c8ad6,#245fb0);color:#fff;font:9px/1 "Lilita One","Arial Black",sans-serif;letter-spacing:.4px;text-transform:uppercase}
.la-play-on-chip .ui-i{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.la-play-on-chip[data-play-on="cross"] .ui-i:nth-of-type(2),.la-play-on-chip[data-play-on="mobile"] .ui-i:first-of-type{display:none}
.la-play-on-chip[data-play-on="mobile"]{border-color:#8ee59a;background:linear-gradient(#5fd86e,#2fa344)}
body #room-screen.la-room .la-room-titlebar h1{flex:0 1 auto}
.room-play-on{position:absolute;left:22px;bottom:2px;z-index:1;display:grid;place-items:center;width:17px;height:17px;padding:0;border:1.5px solid #fff;border-radius:50%;box-sizing:border-box;background:linear-gradient(#4c8ad6,#245fb0);color:#fff;font-size:0;box-shadow:0 1px 2px #0004}
.room-play-on::before{content:"";width:9px;height:9px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8M10 19v-4M7 19h5'/%3E%3Crect width='6' height='10' x='16' y='12' rx='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h8M10 19v-4M7 19h5'/%3E%3Crect width='6' height='10' x='16' y='12' rx='2'/%3E%3C/svg%3E") center/contain no-repeat}
.room-play-on[data-play-on="mobile"]{background:linear-gradient(#5fd86e,#2fa344)}
.room-play-on[data-play-on="mobile"]::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='20' x='5' y='2' rx='2'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E")}
:is(#lobby-screen,#landing-lobby) .room-row.pc-blocked{background:linear-gradient(var(--t-surface),var(--t-panel-3))}
:is(#lobby-screen,#landing-lobby) .room-row.pc-blocked .room-mode-icon{filter:grayscale(1);opacity:.55}
:is(#lobby-screen,#landing-lobby) .room-row.pc-blocked :is(.room-info,.room-count){opacity:.6}
:is(#lobby-screen,#landing-lobby) .room-row.pc-blocked .room-count{background:#8a97a81f;color:var(--t-muted)}
/* Create Room: the Play on toggle, styled like Access. */
#lobby-create-dialog .la-play-on{flex:1;display:flex;gap:3px;height:34px;padding:3px;border-radius:10px;background:var(--t-panel-2);box-sizing:border-box}
#lobby-create-dialog .la-play-on>button{position:static!important;flex:1;display:flex;align-items:center;justify-content:center;gap:5px;width:auto!important;height:auto!important;margin:0;padding:0;border:0;border-radius:8px;background:none;color:var(--t-muted);font:900 11px/1 Nunito,sans-serif;cursor:pointer}
#lobby-create-dialog .la-play-on .ui-i{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
#lobby-create-dialog .la-play-on>button[aria-checked="true"][data-play-on="cross"]{background:linear-gradient(var(--t-blue-hi),var(--t-blue));color:#fff;box-shadow:0 1px 0 var(--t-blue-dk)}
#lobby-create-dialog .la-play-on>button[aria-checked="true"][data-play-on="mobile"]{border:1px solid #24863a;background:linear-gradient(#5fd86e,#2fa344);color:#fff;box-shadow:0 1px 0 #24863a}
#lobby-create-dialog .la-play-on>button:disabled{color:var(--t-faint);cursor:default}
#lobby-create-dialog .la-play-on-hint{margin:-4px 0 0 84px;color:var(--t-ink-2);font:700 9.5px/1.25 Nunito,sans-serif}
#lobby-create-dialog[data-kind="plaza"] :is(#create-play-on-row,#lobby-play-on-hint){display:none}
body #room-screen.la-room .la-settings-grid #room-play-on{display:none}
:is(#lobby-screen,#landing-lobby) .room-row.pc-blocked .button{display:none}
:is(#lobby-screen,#landing-lobby) .room-row small .room-number{flex:none}
/* Drag to Run (pencil "Touch Controls · Drag to Run"): the yellow ring 1.25 radii out is where a push past the stick's or arrow pad's rim runs; it lights in the run direction while the run is steered. */
:is(.touch-stick,.touch-ctl[data-kind="dpad"])::before{content:"";position:absolute;inset:-11.5%;border-radius:50%;border:1.5px solid #ffd23f59;background:radial-gradient(closest-side,transparent 78%,#ffd23f1a 80%);pointer-events:none}
.touch-ctl[data-kind="dpad"]::before{inset:-12.5%}
.touch-controls[data-run="tap"] :is(.touch-stick,.touch-ctl[data-kind="dpad"])::before{display:none}
.touch-controls[data-run="drag"]:not([data-custom="true"]) #touch-dash{display:none}
body #touch-pad[data-active="true"][data-run="true"] .touch-stick{border-color:#ffd23f}
#touch-pad[data-run="true"] .touch-stick::before,.touch-ctl[data-kind="dpad"][data-run="true"]::before{border-color:#ffd23f;background:radial-gradient(closest-side,transparent 78%,#ffb02040 80%);box-shadow:0 0 12px #ffb02088}
#touch-pad[data-run="true"] .touch-stick::after{content:"";position:absolute;inset:-11.5%;border-radius:50%;background:conic-gradient(from calc(var(--run-a,90deg) - 40deg),#ffd23f 0 80deg,transparent 80deg);-webkit-mask:radial-gradient(closest-side,transparent 78%,#000 80%);mask:radial-gradient(closest-side,transparent 78%,#000 80%);pointer-events:none}
body #touch-pad[data-run="true"] .touch-knob{border-color:#7a3e00;background:radial-gradient(circle at 40% 35%,#fff4c2,#ffc43a);box-shadow:0 0 10px #ffb020aa}
.touch-ctl[data-kind="dpad"][data-run="true"]:is([data-dir="1"],[data-dir="5"],[data-dir="9"]) i[data-arrow="up"],
.touch-ctl[data-kind="dpad"][data-run="true"]:is([data-dir="2"],[data-dir="6"],[data-dir="10"]) i[data-arrow="down"],
.touch-ctl[data-kind="dpad"][data-run="true"]:is([data-dir="4"],[data-dir="5"],[data-dir="6"]) i[data-arrow="left"],
.touch-ctl[data-kind="dpad"][data-run="true"]:is([data-dir="8"],[data-dir="9"],[data-dir="10"]) i[data-arrow="right"]{background:#ffd23f;border-color:#fff4c2;box-shadow:0 0 8px #ffb020aa}
/* A 38 px room row holds the count above Join without overlap. */
:is(#lobby-screen,#landing-lobby) .room-row .room-count{top:3px;padding:1px 7px;font:900 10px/12px var(--la-body)}
:is(#lobby-screen,#landing-lobby) .room-row .button{bottom:3px;height:15px;font-size:8.5px;line-height:15px}
/* RUST-ONLY: the waiting room's automatic start (browser/auto_start.rs). */
.room-autostart{display:flex;align-items:center;gap:6px;white-space:nowrap}
.room-autostart[hidden],.room-autostart [hidden]{display:none}
.room-autostart-switch{display:flex;align-items:center;gap:5px;padding:0 10px;height:34px;border-radius:10px;background:rgba(255,255,255,.85);color:#1d3557;font:900 11px/1 Nunito,sans-serif;cursor:pointer}
.room-autostart-switch input{width:16px;height:16px;margin:0;accent-color:#2f80ed;cursor:pointer}
.room-autostart-countdown{padding:0 10px;height:34px;display:flex;align-items:center;border-radius:10px;background:#ffd23f;color:#3a2600;font:900 12px/1 Nunito,sans-serif}
body #room-screen.la-room .room-autostart .button{min-height:0;height:34px;padding:0 10px;border-radius:10px;font:900 11px/1 Nunito,sans-serif}