.online-hall,.online-room{height:100%;min-height:0;display:flex;flex-direction:column;background:linear-gradient(115deg,#090f1ff2,#17172be8 63%,#0a1423f5);overflow:hidden}.online-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:29px 4vw 24px;border-bottom:1px solid #9cabc12a;flex-shrink:0;background:linear-gradient(90deg,#0d1423,#1f192d8a)}.online-heading>div:first-child>span,.online-room-heading>div>span{font:8px var(--mono);letter-spacing:2px;color:#cf9baf}.online-heading h1{font-size:38px;font-weight:400;line-height:1.12;letter-spacing:-1px;margin-top:12px}.online-heading h1 em{font-style:normal;color:#dbb7c5}.online-heading>div:first-child>p{font-size:12px;line-height:1.7;color:#91a4bf;margin-top:13px;max-width:550px}.online-link-state{display:flex;align-items:center;gap:11px;border:1px solid #8395af2e;padding:15px 18px;min-width:225px;max-width:300px;background:#0c1525}.online-link-state>i{height:7px;width:7px;border-radius:50%;background:#bc91a2;flex-shrink:0}.online-link-state.connected>i{background:#8ac8b5;box-shadow:0 0 12px #8ac8b54d}.online-link-state strong{font:8px var(--mono);letter-spacing:1.1px;display:block;color:#c7b7c8}.online-link-state span{display:block;font-size:11px;line-height:1.7;color:#7f98b7;margin-top:6px;overflow-wrap:anywhere}.online-hall-scroll,.online-room-scroll{min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;padding:24px 4vw 30px;scrollbar-color:#76637c #0c1424;scrollbar-width:thin}.online-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:13px}.online-mode-tabs>button{padding:20px 23px;text-align:left;border:1px solid #7e91b13b;background:#101b2da8;position:relative;min-width:0}.online-mode-tabs>button.selected{border-color:#d093b3b3;background:linear-gradient(110deg,#3b273c8c,#172137);box-shadow:inset 3px 0 #d69dba}.online-mode-tabs span{display:block;font:7px var(--mono);letter-spacing:1px;color:#8a9fbc}.online-mode-tabs strong{display:block;font-size:25px;font-weight:400;margin-top:9px;color:#d7ccd9}.online-mode-tabs small{display:block;font-size:11px;line-height:1.6;color:#93a7c2;margin-top:10px}.online-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:17px}.online-rule{min-width:0;padding:20px;text-align:left;border:1px solid #8498b333;background:#101b2da8;display:flex;flex-direction:column;position:relative}.online-rule.selected{border-color:#b991b7a6;background:linear-gradient(130deg,#34283d,#101b2d)}.online-rule>span{font:6px/1.8 var(--mono);letter-spacing:1px;color:#a995b2}.online-rule>strong{font-size:23px;font-weight:400;margin-top:11px;color:#e0cad9}.online-rule>p{font-size:11px;line-height:1.8;color:#8da3c0;margin:12px 0 18px;flex:1}.online-rule>b{font:7px var(--mono);font-weight:400;letter-spacing:1px;color:#be96b1}.online-coop-note{margin-top:17px;display:flex;gap:22px;padding:23px;border:1px solid #d9ba923b;border-left:2px solid #d9ba92;background:linear-gradient(110deg,#44312d55,#0b1728)}.online-coop-note>span{font:28px var(--mono);letter-spacing:-2px;color:#e2c7a0;white-space:nowrap}.online-coop-note h2{font-size:23px;font-weight:400;color:#dfd1cf}.online-coop-note p{font-size:12px;line-height:1.9;color:#9eafc4;margin-top:9px;max-width:800px}.online-coop-note small{font:9px/1.8 var(--mono);color:#8c91a7;display:block;margin-top:10px}.online-connect-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:21px}.online-connect-grid>article{min-width:0;border:1px solid #8196b329;padding:21px 23px;background:#0b1628bd}.online-section-label{display:flex;align-items:center;justify-content:space-between;gap:10px;font:7px/1.6 var(--mono);letter-spacing:1px;color:#d2b8ca}.online-section-label>b{font-weight:400;color:#708aa9;font-size:6px;white-space:nowrap}.online-connect-grid label{display:block;font:9px var(--mono);color:#99acc6;margin-top:20px}.online-connect-grid select,.online-connect-grid input{display:block;box-sizing:border-box;width:100%;min-width:0;height:46px;margin-top:9px;padding:11px 13px;font:12px var(--mono);color:#d8d0df;background:#17243a;border:1px solid #8297b944;outline-color:#d199b7}.online-join input{text-transform:uppercase;letter-spacing:5px}.online-join input::placeholder{color:#49627e}.online-connect-grid p{font-size:11px;line-height:1.8;color:#879fbe;margin:12px 0 17px;min-height:40px}.online-connect-grid .primary,.online-connect-grid .secondary{width:100%;min-height:46px;display:flex;align-items:center;justify-content:space-between;font:10px var(--mono);letter-spacing:.5px;padding:12px 16px}.online-connect-grid .primary{background:#cfa0b3;color:#161423}.online-connect-grid .secondary{border:1px solid #9e8eb270;color:#c9b7d0;background:#212239}.online-notice{padding:13px 16px;border-left:2px solid #d7ac8b;background:#30263199;color:#d0bdca;font-size:12px;line-height:1.8;margin-top:17px;overflow-wrap:anywhere}.online-notice[hidden]{display:none}.online-sign-in,.online-retry{display:flex;width:max-content;max-width:100%;align-items:center;justify-content:space-between;gap:28px;min-height:46px;padding:13px 20px;background:#c9a3b8;color:#1c1728;font:11px var(--mono);text-decoration:none;margin-top:15px;border:1px solid #eccbda66}.online-ground-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;border-top:1px solid #8292ae24;margin-top:24px;padding-top:20px}.online-ground-rules p{font-size:10px;line-height:1.8;color:#7790ae}.online-ground-rules b{display:block;font:6px/1.8 var(--mono);letter-spacing:1px;color:#b49ab3;margin-bottom:7px}.online-room-heading{padding:24px 4vw;border-bottom:1px solid #a091b530;display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(110deg,#261c30,#101a2b)}.online-room-heading h1{font-size:30px;font-weight:400;margin-top:10px;letter-spacing:-.6px}.online-code{display:grid;grid-template-columns:auto auto;align-items:center;gap:5px 14px}.online-code>span{font:6px var(--mono);letter-spacing:1.7px;color:#978aa8}.online-code strong{grid-column:1;grid-row:2;font:24px var(--mono);letter-spacing:4px;color:#e5b5cd;white-space:nowrap}.online-code button{grid-column:2;grid-row:1/3;border:1px solid #a684a672;min-height:44px;padding:10px 13px;font:8px var(--mono);letter-spacing:1px;color:#d4b4cd;background:#3b294755}.online-seats{display:grid;grid-template-columns:1fr 1fr;gap:17px}.online-seat{position:relative;min-width:0;padding:20px 23px;background:#111c2e;border:1px solid #7d93b33b;min-height:171px}.online-seat.you{border-color:#b995af77;background:linear-gradient(125deg,#2b253d,#111c2e)}.online-seat-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.online-seat-heading>span{font:6px var(--mono);letter-spacing:1px;color:#869ebc}.online-seat-heading>b{font:6px var(--mono);font-weight:400;letter-spacing:1px;color:#b5a0bd}.online-seat-heading>b.ready{color:#91d1b9}.online-seat h2{font-size:24px;font-weight:400;color:#d5c6d8;margin-top:12px;overflow-wrap:anywhere}.online-seat-roster{display:flex;gap:7px;margin-top:15px;min-height:45px;flex-wrap:wrap}.online-seat-roster>img{width:34px;height:45px;object-fit:cover;object-position:center 15%;border:1px solid #9e8fa865}.online-you{position:absolute;bottom:15px;right:18px;font:5px var(--mono);letter-spacing:1px;color:#9e7d9c}.online-seat-empty{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:128px;color:#5d7594}.online-seat-empty i{font-size:22px;font-style:normal;color:#a58fab}.online-seat-empty strong{font-size:19px;font-weight:400;margin-top:5px;color:#8e91ab}.online-seat-empty p{font-size:10px;margin-top:10px}.online-room-guide{padding:18px 1px}.online-room-guide>b{font:8px var(--mono);letter-spacing:1.1px;color:#d0b2c4}.online-room-guide p{font-size:12px;color:#a3b4c9;line-height:1.8;margin-top:8px}.online-room-guide>small{font:9px/1.8 var(--mono);color:#758fab;display:block;margin-top:7px}.online-loadout-form{padding:20px 23px;border:1px solid #7c91b333;background:#0b1729}.online-loadout-list{display:flex;flex-direction:column;gap:8px;margin-top:15px}.online-loadout-row{display:grid;grid-template-columns:minmax(190px,1fr) minmax(240px,1.4fr);gap:18px;align-items:center;border:1px solid #7890ac29;background:#111f32;padding:11px 13px;min-width:0}.online-loadout-row.selected{border-color:#a48ca255;background:#27233a88}.online-loadout-row.claimed{opacity:.55}.online-hero-pick{display:flex;align-items:center;gap:11px;min-width:0}.online-hero-pick>input{accent-color:#d69fbb;min-width:20px;width:20px;height:20px;margin:0}.online-hero-pick>img{width:32px;height:43px;object-fit:cover;object-position:center 15%;border:1px solid #9d8daa45}.online-hero-pick>span{font-size:12px;color:#c4bfd1;min-width:0;overflow-wrap:anywhere}.online-hero-pick small{display:block;font:5px/1.8 var(--mono);letter-spacing:.5px;margin-top:5px;color:#8f7e9d}.online-build-pick{display:block;min-width:0}.online-build-pick>span{display:block;font:6px var(--mono);color:#8199b8;margin-bottom:6px}.online-build-pick>select{width:100%;min-width:0;height:40px;border:1px solid #8b91b343;background:#152238;color:#bdb8cc;padding:9px;font:10px var(--mono);outline-color:#ce9fbb}.online-loadout-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:17px}.online-loadout-actions>span{font:8px/1.8 var(--mono);color:#8499b6}.online-loadout-actions>button{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:42px;min-width:190px;padding:11px 13px;background:#27263c;border:1px solid #a68da75c;color:#c6b4ce;font:8px var(--mono)}.online-room-start{display:flex;justify-content:space-between;align-items:center;gap:22px;border-top:1px solid #8495af2b;padding-top:22px;margin-top:23px}.online-room-start strong{display:block;font-size:20px;font-weight:400;color:#d7c7d3}.online-room-start p{font-size:11px;line-height:1.7;color:#839dbb;margin-top:7px;max-width:600px}.online-room-start>button{display:flex;justify-content:space-between;align-items:center;gap:35px;padding:14px 18px;min-height:47px;min-width:235px;background:#cba4b6;color:#201925;font:10px var(--mono)}.online-room-footer{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;padding-top:24px;margin-top:24px;border-top:1px solid #8b9bb025}.online-room-footer>button{display:flex;gap:25px;align-items:center;min-height:44px;font:9px var(--mono);color:#b99bb0;padding:9px 0;white-space:nowrap}.online-room-footer p{font-size:10px;line-height:1.8;color:#718aa7;max-width:500px}.online-hall button:focus-visible,.online-room button:focus-visible,.online-hall input:focus-visible,.online-hall select:focus-visible,.online-room select:focus-visible{outline:2px solid #e1b4ca;outline-offset:3px}
@media(max-width:1050px){.online-heading{padding:23px 25px;gap:18px}.online-heading h1{font-size:33px}.online-link-state{min-width:205px;padding:13px}.online-heading>div:first-child>p{font-size:11px;max-width:425px}.online-hall-scroll,.online-room-scroll{padding:21px 25px 26px}.online-room-heading{padding:21px 25px}.online-rules{gap:9px}.online-rule{padding:17px}.online-rule>strong{font-size:21px}.online-rule>span{font-size:5px}.online-connect-grid{gap:13px}.online-connect-grid>article{padding:19px}.online-loadout-row{grid-template-columns:minmax(170px,1fr) minmax(200px,1.4fr);gap:12px}.online-coop-note h2{font-size:22px}}
@media(max-width:760px){body:not(.battle-mode):not(.online-battle-mode) .topbar{height:91px;min-height:91px;padding:8px 15px 0;display:grid;grid-template-columns:1fr auto;grid-template-rows:39px 36px;gap:0 12px}body:not(.battle-mode):not(.online-battle-mode) .topbar .brand{grid-column:1;grid-row:1}body:not(.battle-mode):not(.online-battle-mode) .topbar .top-right{grid-column:2;grid-row:1}body:not(.battle-mode):not(.online-battle-mode) .topbar .main-nav{grid-column:1/3;grid-row:2;justify-content:space-between;gap:14px;width:100%}body:not(.battle-mode):not(.online-battle-mode) .topbar .main-nav button{font-size:8px;min-height:36px}.online-heading{padding:19px 17px;display:block}.online-heading h1{font-size:29px;margin-top:10px;line-height:1.1}.online-heading h1 br{display:none}.online-heading h1 em{display:block;margin-top:3px}.online-heading>div:first-child>span{font-size:6px;letter-spacing:1.5px}.online-heading>div:first-child>p{display:none}.online-link-state{padding:9px 11px;min-width:0;max-width:none;margin-top:15px;gap:9px}.online-link-state strong{font-size:6px;letter-spacing:.8px}.online-link-state span{font-size:10px;line-height:1.5;margin-top:3px}.online-link-state>i{width:5px;height:5px}.online-hall-scroll,.online-room-scroll{padding:16px 16px 24px}.online-mode-tabs{gap:8px}.online-mode-tabs>button{padding:14px 12px}.online-mode-tabs span{font-size:5px;letter-spacing:.4px;line-height:1.7}.online-mode-tabs strong{font-size:19px;margin-top:8px}.online-mode-tabs small{font-size:10px;line-height:1.6;margin-top:8px}.online-rules{display:flex;flex-direction:column;gap:8px;margin-top:13px}.online-rule{padding:15px 16px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px}.online-rule>span{grid-column:1/3;font-size:6px}.online-rule>strong{font-size:23px;grid-column:1;grid-row:2;margin-top:6px}.online-rule>p{grid-column:1/3;margin:9px 0 0;font-size:11px;line-height:1.7}.online-rule>b{grid-column:2;grid-row:2;align-self:center;font-size:5px}.online-coop-note{padding:16px;gap:15px;margin-top:13px}.online-coop-note>span{font-size:21px;letter-spacing:-1.5px;padding-top:2px}.online-coop-note h2{font-size:20px;line-height:1.25}.online-coop-note p{font-size:11px;line-height:1.8;margin-top:9px}.online-coop-note small{font-size:8px;line-height:1.8}.online-connect-grid{grid-template-columns:1fr;gap:11px;margin-top:16px}.online-connect-grid>article{padding:17px}.online-section-label{font-size:7px;letter-spacing:.8px}.online-section-label>b{font-size:5px}.online-connect-grid label{font-size:9px;margin-top:16px}.online-connect-grid select,.online-connect-grid input{height:46px;font-size:11px;padding:10px 11px}.online-connect-grid p{font-size:11px;min-height:0;line-height:1.7;margin:11px 0 14px}.online-connect-grid .primary,.online-connect-grid .secondary{min-height:46px;font-size:10px}.online-ground-rules{grid-template-columns:1fr;gap:16px;margin-top:20px;padding-top:18px}.online-ground-rules p{font-size:10px;line-height:1.7}.online-ground-rules b{font-size:6px;margin-bottom:5px}.online-notice{font-size:11px;padding:12px 13px}.online-sign-in,.online-retry{font-size:10px}.online-room-heading{padding:19px 17px;display:block}.online-room-heading>div>span{font-size:6px;letter-spacing:1px}.online-room-heading h1{font-size:27px;line-height:1.15;margin-top:9px}.online-code{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}.online-code>span{font-size:5px;letter-spacing:1px}.online-code strong{font-size:21px;letter-spacing:3px}.online-code button{min-height:36px;padding:9px 10px;font-size:7px;margin-left:auto}.online-seats{gap:9px}.online-seat{padding:14px 12px;min-height:143px}.online-seat-heading{display:block}.online-seat-heading>span{font-size:5px;display:block}.online-seat-heading>b{font-size:5px;display:block;margin-top:8px}.online-seat h2{font-size:19px;margin-top:11px}.online-seat-roster{gap:4px;margin-top:12px;min-height:34px}.online-seat-roster>img{width:25px;height:35px}.online-you{position:static;display:block;margin-top:12px;font-size:4px}.online-seat-empty{min-height:119px;text-align:center}.online-seat-empty strong{font-size:17px;line-height:1.3}.online-seat-empty p{font-size:9px;line-height:1.6;margin-top:9px}.online-room-guide{padding:17px 0}.online-room-guide>b{font-size:7px;line-height:1.7;letter-spacing:.5px}.online-room-guide p{font-size:11px;line-height:1.8}.online-room-guide>small{font-size:8px;line-height:1.8}.online-loadout-form{padding:15px 12px}.online-loadout-row{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:11px 12px}.online-hero-pick{gap:9px;min-height:44px}.online-hero-pick>input{width:22px;height:22px;min-width:22px}.online-hero-pick>img{width:31px;height:42px}.online-hero-pick>span{font-size:12px}.online-hero-pick small{font-size:5px}.online-build-pick>span{font-size:6px;margin-bottom:7px}.online-build-pick>select{min-height:44px;height:44px;font-size:10px}.online-loadout-actions{display:block;margin-top:14px}.online-loadout-actions>span{display:block;font-size:8px;line-height:1.7}.online-loadout-actions>button{margin-top:12px;min-height:44px;width:100%;min-width:0;font-size:9px}.online-room-start{display:block;margin-top:19px;padding-top:18px}.online-room-start strong{font-size:20px}.online-room-start p{font-size:11px;line-height:1.7}.online-room-start>button{width:100%;margin-top:17px;min-height:48px;font-size:10px}.online-room-footer{display:block;margin-top:18px;padding-top:15px}.online-room-footer p{font-size:9px;line-height:1.8;margin-top:12px}.online-room-footer>button{font-size:9px;min-height:44px}.online-code>button{min-height:44px}}
@media(max-height:600px) and (min-width:761px){.online-heading{padding-block:15px}.online-heading h1{font-size:29px;line-height:1.05}.online-heading h1 br{display:none}.online-heading h1 em{margin-left:8px}.online-heading>div:first-child>p{display:none}.online-link-state{padding:11px 13px}.online-hall-scroll,.online-room-scroll{padding-block:17px}.online-room-heading{padding-block:15px}.online-room-heading h1{font-size:25px;margin-top:7px}.online-code strong{font-size:21px}}
@media(prefers-reduced-motion:reduce){.online-hall.fade-in{animation:none}}
body.online-view{height:100dvh;overflow:hidden}.online-view #app{height:100dvh;min-height:100dvh}.online-view #screen{min-height:0;overflow:hidden;display:flex;flex-direction:column}.online-view #screen>.online-hall,.online-view #screen>.online-room{flex:1;width:100%}.online-sync-confirm{padding:22px;border:1px solid #c59fb862;background:linear-gradient(115deg,#36273f,#101b2f);margin-top:18px}.online-sync-confirm h2{font-size:24px;font-weight:400;color:#e0c8d6}.online-sync-confirm p{font-size:12px;line-height:1.8;color:#a6b0c7;margin-top:10px}.online-sync-confirm>div{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.online-sync-confirm button{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:46px;padding:12px 17px;font:10px var(--mono)}.online-sync-confirm .primary{background:#cca4b8;color:#211a29}.online-sync-confirm .secondary{background:#1c263d;border:1px solid #a68aa960;color:#c5b5cf}@media(max-width:760px){.online-sync-confirm{padding:18px}.online-sync-confirm h2{font-size:23px}.online-sync-confirm p{font-size:11px}.online-sync-confirm>div{display:block}.online-sync-confirm button{width:100%;font-size:9px;margin-top:10px}}

/* Keep online preparation legible at the same scale as the campaign. */
.online-hall button,.online-room button{touch-action:manipulation}
.online-heading>div:first-child>span,.online-room-heading>div>span{font-size:10px;line-height:1.6;letter-spacing:1px}
.online-link-state strong,.online-mode-tabs span,.online-rule>span,.online-rule>b,.online-section-label,.online-section-label>b,.online-ground-rules b,.online-code>span,.online-seat-heading>span,.online-seat-heading>b,.online-you{font-size:9px;line-height:1.6;letter-spacing:.5px}
.online-link-state span,.online-ground-rules p,.online-room-footer p,.online-coop-note small,.online-room-guide>small{font-size:11px;color:#9eafc5}
.online-rule>p,.online-connect-grid p,.online-room-guide p,.online-room-start p{font-size:12px}
.online-connect-grid label,.online-build-pick>span,.online-loadout-actions>span{font-size:11px;line-height:1.6}
.online-hero-pick small{font-size:9px;line-height:1.6;color:#ae9cb9;letter-spacing:0}
.online-hero-pick{min-height:44px}
.online-build-pick>select{height:44px;font-size:11px}
.online-code button,.online-loadout-actions>button,.online-room-footer>button{min-height:44px;font-size:10px}
.online-hall button:disabled,.online-room button:disabled{opacity:.48;cursor:not-allowed}
.online-hall[aria-busy=true],.online-room[aria-busy=true]{cursor:progress}
@media(max-width:760px){
 .online-heading{padding-block:14px}.online-heading h1{font-size:27px}.online-link-state{margin-top:11px}
 .online-mode-tabs span{font-size:9px;letter-spacing:0}.online-mode-tabs small{font-size:11px}
 .online-rule>b{font-size:8px}.online-code>span,.online-seat-heading>span,.online-seat-heading>b,.online-you{font-size:9px}
 .online-seat{padding-bottom:12px}.online-seat-heading>b{margin-top:5px}.online-seat h2{font-size:20px}
 .online-loadout-actions>span,.online-build-pick>span{font-size:11px}.online-hero-pick small{font-size:9px}
 .online-sync-confirm button{font-size:11px}.online-mode-tabs strong{font-size:21px}.online-section-label>b{font-size:9px}
}