/* Launcher layout is scoped to the menu; match HUD styling is unchanged. */
#menu{--text:#eef0ee;--soft:#a0adaa;--accent:#e4cb95;padding:0;background:linear-gradient(90deg,#0b1319f5 0%,#0b1319a8 38%,#101819aa 62%,#0c141af7 100%),linear-gradient(0deg,#0b1419 0%,#0b141940 70%),url('assets/gulch-lobby-v1.webp') center/cover fixed;backdrop-filter:none;color:var(--text);font-family:var(--font-body)}
#menu .lobby{width:min(1580px,100%);max-width:none;padding:0 38px 18px;margin:0 auto;background:none;border:0;box-shadow:none;position:relative}
#menu .lobby:before,#menu .lobby:after{display:none}
#menu h1,#menu h2,#menu h3,#menu b,#menu strong,#menu button,#menu summary,#menu legend{font-family:var(--font-body);text-shadow:none}
#menu button{border-radius:7px;letter-spacing:0;box-shadow:none}
#menu button:focus-visible,#menu summary:focus-visible{outline:2px solid #e4cb95;outline-offset:3px}
#menu .masthead{height:104px;display:flex;align-items:center;gap:16px;text-align:left;margin:0;border-bottom:1px solid #ffffff12}
#menu .masthead h1{margin:0;line-height:1}
#menu .brand-logo{display:block;width:120px;height:82px;object-fit:contain;mask-image:radial-gradient(ellipse 72% 75% at center,#000 51%,transparent 75%)}
#menu .masthead .eyebrow{font-size:9px;letter-spacing:2px;color:#bdc8c6}
#menu .masthead p{font-size:12px;color:#778b8e;margin-top:7px}
#menu .account-panel{position:absolute;right:38px;top:23px;width:335px;margin:0;padding:0;border:0;background:none;z-index:9}
#menu .account-top{gap:12px;min-height:52px}
#menu .account-top .eyebrow{display:none}
#menu .account-top strong{font-size:10px;color:#aab8b6;font-weight:500;margin:0}
#menu .account-top .secondary{background:#ffffff08;border:1px solid #ffffff20;color:#dbe3df;font-size:10px;margin:0;padding:10px 12px;min-height:36px;white-space:nowrap}
#menu #account-content{background:#152129;border:1px solid #ffffff24;border-radius:12px;padding:20px;margin-top:8px;max-height:75vh;overflow:auto;box-shadow:0 20px 70px #0009}
#menu .selection{display:grid;grid-template-columns:250px minmax(240px,1fr) 330px;gap:24px 34px;align-items:start;padding-top:30px}
#menu .character-panel,#menu .build-panel{min-width:0;background:none;border:0;padding:0;box-shadow:none}
#menu .selection-top{margin-bottom:16px;min-height:24px}
#menu .selection-top h2{font-size:18px;font-weight:600;letter-spacing:-.4px}
#menu .factions{gap:4px;background:#09121899;border:1px solid #ffffff12;border-radius:8px;padding:4px;margin-bottom:24px}
#menu .factions button{padding:10px 6px;background:none;border:0;text-align:center;font-size:12px;font-weight:600;letter-spacing:0;color:#81969f}
#menu .factions button[data-team=alliance][aria-pressed=true]{color:#c2e6ff;background:#29537766;box-shadow:inset 0 0 0 1px #6c9dc444}
#menu .factions button[data-team=horde][aria-pressed=true]{color:#ffd0c9;background:#713c3a66;box-shadow:inset 0 0 0 1px #c47e7044}
#menu .class-heading{margin-bottom:10px}
#menu .class-heading h2{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#9aadaa;font-weight:600}
#menu .map-link{font-size:8px;color:#7d9295}
#menu .class-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#menu .class-card{padding:10px 3px;min-height:68px;background:#ffffff04;border:1px solid #ffffff0c;overflow:hidden;transition:background .15s,transform .15s}
#menu .class-card .spell-icon{display:block;width:25px;height:25px;margin:0 auto 7px;filter:none;border-radius:5px;opacity:.65}
#menu .class-card strong{font-size:10px;font-weight:500;color:#a6b6b3;margin:0}
#menu .class-card:hover{transform:translateY(-2px);background:#ffffff0d}
#menu .class-card[aria-pressed=true]{border-color:#dbc19088;background:#dbc19013;box-shadow:none}
#menu .class-card[aria-pressed=true] .spell-icon{opacity:1}
#menu .class-card[aria-pressed=true] strong{color:#f3e1bd}
#menu .class-card[aria-pressed=true]:after{display:none}
#menu .difficulty-options{gap:5px;margin-top:10px}
#menu .difficulty-options button{font-size:11px;font-weight:500;padding:9px 5px;border:1px solid #ffffff12;background:#ffffff04;color:#a5b5b2;min-width:0}
#menu .difficulty-options button[aria-pressed=true]{color:#f2ede1;background:#ffffff12;border-color:#ffffff36}
#menu .launcher-link{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:14px 0;margin-top:19px;background:none;border:0;border-top:1px solid #ffffff12;color:#d3dcce;font-size:11px;text-align:left}
#menu .launcher-link span{font-size:17px;color:#e4cb95}
#menu .champion-stage{position:relative;min-width:0;height:540px;align-self:stretch;text-align:center;isolation:isolate}
#menu .stage-halo{position:absolute;width:110%;height:95%;inset:0 -5%;z-index:-1;background:radial-gradient(ellipse at 50% 40%,#82a6b62b,transparent 66%);pointer-events:none}
#menu[data-faction=horde] .stage-halo{background:radial-gradient(ellipse at 50% 40%,#c66c492b,transparent 66%)}
#menu #champion-preview{width:100%;height:440px;object-fit:contain;image-rendering:pixelated;position:relative;top:-18px;pointer-events:none}
#menu #champion-facing{position:absolute;left:50%;top:367px;transform:translateX(-50%);background:#111d2255;border:1px solid #ffffff1a;color:#b0c3bb;width:42px;height:28px;font-size:18px}
#menu .champion-caption{position:absolute;left:-15px;right:-15px;bottom:3px}
#menu #champion-tag{font-size:10px;text-transform:uppercase;letter-spacing:3px;color:#bec8b7}
#menu #champion-name{font-size:clamp(42px,4.2vw,64px);line-height:1.1;letter-spacing:-3px;font-weight:750;margin:8px 0 10px;color:#f1f3e9}
#menu .class-detail{padding:0;border:0;margin:0;min-height:0}
#menu .class-detail>p{font-size:11px;color:#9dadac;line-height:1.6;margin:0 0 12px}
#menu .build-heading{margin-bottom:22px}
#menu .section-kicker{display:block;font-size:9px;letter-spacing:2px;color:#ae9c74;font-weight:600}
#menu .build-heading h2{font-size:27px;font-weight:650;letter-spacing:-1px;margin:7px 0 8px;color:#f2f1e9}
#menu .build-heading p{font-size:11px;color:#91a4a6;margin:0}
#menu .slot-label{display:flex;justify-content:space-between;align-items:center;margin:16px 0 10px}
#menu .slot-label h3{font-size:10px;text-transform:uppercase;letter-spacing:1px;margin:0;color:#94a8a5;font-weight:600}
#menu .slot-label>span{font-size:9px;color:#78908e}
#menu .loadout-slots{display:grid;grid-template-columns:1fr;gap:7px;margin:0;padding:0}
#menu .loadout-slots button,#menu .ultimate-slot{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:#122027aa;border:1px solid #ffffff12;padding:10px 12px;min-height:60px;transition:border-color .15s,background .15s}
#menu .loadout-slots button:hover,#menu .ultimate-slot:hover{border-color:#c4b08577;background:#203037}
#menu .slot-number{font-size:9px;color:#667c80;width:14px;flex-shrink:0}
#menu .loadout-slots .spell-icon,#menu .ultimate-slot .spell-icon{width:34px;height:34px;flex-shrink:0;margin:0;filter:none;border-radius:6px;box-shadow:0 2px 9px #0005}

#menu .loadout-slots b,#menu .ultimate-slot b{font-size:12px;display:block;color:#dfe6dc;font-weight:600}
#menu .loadout-slots small,#menu .ultimate-slot small{display:block;font-size:9px;line-height:1.4;color:#849c9b;margin-top:5px}
#menu .loadout-slots small i{font-style:normal;color:#456368;padding:0 3px}
#menu .slot-change{font-size:15px;color:#7c918e;margin-left:auto}
#menu .ultimate-slot{background:#302b203d;border-color:#b89a5540;padding-left:12px}
#menu .build-hint{display:none}
#menu .launch-panel{grid-column:1/-1;border-top:1px solid #ffffff18;padding-top:22px}
#menu #mode-picker{margin:0;display:flex;align-items:center;gap:25px;flex-wrap:wrap}
#menu #mode-picker h2{font-size:10px;color:#8fa29f;letter-spacing:1.2px}
#menu #mode-picker .difficulty-options{margin:0;gap:7px;flex:1;max-width:660px}
#menu #mode-picker button{padding:11px 16px;font-size:12px}
#menu #mode-picker .setup-note{display:none}
#menu .launch-bottom{display:flex;align-items:end;gap:28px;justify-content:space-between;margin-top:20px}
#menu .multiplayer-box{display:grid;grid-template-columns:minmax(140px,210px) auto;gap:7px 10px;align-items:end;background:none;border:0;margin:0;padding:0;max-width:520px}
#menu .multiplayer-box>label{font-size:8px;letter-spacing:1px;color:#7f9595;grid-column:1/-1;margin:0}
#menu #player-name{width:100%;min-width:0;font-size:12px;padding:12px;border:1px solid #ffffff20;background:#101d23;border-radius:7px;color:#dce4dd}
#menu #create-room,#menu #join-room{font-size:10px;padding:12px 17px;margin:0;border:1px solid #ffffff20;background:#ffffff06;color:#c7d4cc;min-height:41px}
#menu #join-room{grid-column:2}
#menu #room-help{grid-column:1/-1;font-size:9px;color:#6c8589;line-height:1.6;margin:0}
#menu .play-actions{display:grid;grid-template-columns:120px 240px;gap:8px 14px;align-items:center}
#menu .primary{background:#e6d5ae;color:#192228;border:0;padding:16px 20px;font-size:12px;font-weight:750;letter-spacing:1px;box-shadow:none;min-height:49px}
#menu .primary:hover{outline:2px solid #ffe46b;outline-offset:2px;transform:translateY(-1px)}
#menu #enter-training{grid-column:2;background:none;border:0;padding:2px;font-size:8px;letter-spacing:1px;color:#879d97;margin:0}
#menu .control-hint{text-align:right;font-size:8px;color:#637d80;margin-top:12px}
#menu #match-settings{position:relative;grid-row:1;grid-column:1}
#menu #match-settings>summary{cursor:pointer;font-size:11px;color:#a3b3ae;padding:14px 0;list-style:none}
#menu #match-settings>summary:after{content:'⌃';margin-left:9px}
#menu .briefing{position:absolute;bottom:55px;right:0;width:420px;max-width:85vw;max-height:70vh;overflow:auto;background:#142129;border:1px solid #ffffff25;border-radius:12px;padding:20px;box-shadow:0 20px 60px #0008;z-index:6}
#menu .briefing h2{font-size:13px}
#menu .map-preview{height:150px;border:0;border-radius:8px;margin-bottom:20px}
#menu .map-preview button{font-size:9px;background:#132129df;border:0}
#menu .map-preview img{object-position:center 45%}
#menu .map-options{grid-template-columns:repeat(3,1fr);gap:7px}
#menu .map-options button{background:#ffffff05;border:1px solid #ffffff18;padding:0;overflow:hidden}
#menu .map-options img{height:65px;object-fit:cover}
#menu .map-options b{font-size:10px;display:block;padding:10px 2px}
#menu .map-options button[aria-pressed=true]{border-color:#bda672;background:#c6b07c12}
#menu .briefing .setup-note{margin:10px 0;font-size:10px;color:#879c9b}
#menu .briefing details{border:0;border-top:1px solid #ffffff16;background:none;padding-top:12px;margin-top:16px}
#menu .briefing summary{font-size:11px;cursor:pointer;padding:5px 0;color:#c4d1c5}
#menu .briefing-copy b{font:600 11px var(--font-body);color:#bbc9b7}
#menu .briefing-copy p{font-size:11px;color:#829a98}
#menu .sound-settings{font-size:10px;background:none;border:0;margin:0;color:#7e9491}
#menu .selection>div:has(.sound-settings){grid-column:1/-1}
#menu .lobby-footer{border-top:1px solid #ffffff0a;font-size:8px;letter-spacing:.8px;color:#476367;margin-top:12px;padding-top:16px}
#menu .launcher-dialog{color:#e6ede4;background:#132027;border:1px solid #ffffff20;border-radius:16px;width:min(900px,calc(100vw - 32px));max-height:88vh;padding:0;box-shadow:0 30px 100px #000a}
#menu .launcher-dialog::backdrop{background:#050c11bb;backdrop-filter:blur(8px)}
#menu .launcher-dialog>header{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1;background:#132027f5;padding:24px 28px;border-bottom:1px solid #ffffff13}
#menu .launcher-dialog h2{font-size:25px;letter-spacing:-.7px;margin:5px 0 0;color:#eef0e8}
#menu .launcher-dialog [data-close-dialog]{width:34px;height:34px;border:1px solid #ffffff1b;background:#ffffff06;color:#c1cfcb;font-size:17px}
#menu .browser-note{font-size:11px;line-height:1.6;color:#8aa09e;padding:0 28px;margin:17px 0}
#menu .launcher-dialog .ability-grid{grid-template-columns:1fr 1fr;gap:10px;padding:0 24px 24px}
#menu .launcher-dialog .ability-option{position:relative;cursor:pointer;border:1px solid #ffffff14;border-radius:10px;background:#ffffff04;padding:17px;text-align:left;gap:12px}
#menu .launcher-dialog .ability-option:hover{background:#ffffff09;border-color:#b6a27688}
#menu .launcher-dialog .ability-option[aria-pressed=true]{border-color:#bda56a66;background:#bfab7410}
#menu .launcher-dialog .ability-option:disabled{opacity:.44;cursor:default}
#menu .launcher-dialog .ability-option b{font-size:13px;color:#e3eadc}
#menu .launcher-dialog .ability-option small{font-size:11px;color:#91a4a3;line-height:1.6}
#menu .launcher-dialog .ability-option em{font-size:10px;color:#819c9c}
#menu .launcher-dialog .spell-icon{filter:none;width:34px;height:34px;flex-shrink:0;border-radius:7px}
#menu .launcher-dialog .ability-starting{font-size:15px;color:#d4c392;margin-top:12px}
#menu .equipped-tag{display:block;color:#bbaa78;font-size:8px;letter-spacing:1px;margin-top:5px}
#menu .launcher-dialog .ability-role{margin-top:12px;color:#a9ba9d;font-size:9px}
#menu .launcher-dialog .ability-tradeoff b{font-size:9px;color:#b0beac}
#menu #private-lobby{grid-column:1/-1;margin:0;background:#132329dd;border:1px solid #ffffff22;border-radius:12px;padding:20px}
#menu #private-lobby .eyebrow{font-size:9px;letter-spacing:1px}
#menu #private-lobby h2{font-size:20px;letter-spacing:-.5px}
#menu #private-lobby p{font-size:11px;color:#8da5a1}
#menu .room-team{border-color:#ffffff13;border-radius:8px;background:#0e1b2399}
#menu .room-team h3{font-size:13px}
#menu .room-actions button{font-size:10px}
#menu .room-actions .secondary,#menu .room-invite button{background:#ffffff06;border:1px solid #ffffff20;border-radius:6px}
#menu .room-invite input{font-size:11px;background:#0f1e24;border-color:#ffffff20;border-radius:6px}
body.in-room #menu .launch-panel{padding-top:12px}body.in-room #menu #match-settings{display:none}
@media(min-width:1600px){#menu .selection{grid-template-columns:280px minmax(300px,1fr) 370px;gap:28px 55px}#menu .champion-stage{height:580px}#menu #champion-preview{height:480px}#menu #champion-facing{top:405px}#menu .class-card{min-height:78px}#menu .loadout-slots button{min-height:65px}}
@media(max-width:1100px){#menu .lobby{padding-inline:24px}#menu .selection{grid-template-columns:210px minmax(180px,1fr) 290px;gap:20px}#menu .account-panel{right:24px;width:300px}#menu .masthead>div{display:none}#menu #champion-name{font-size:42px}#menu .champion-caption{left:-10px;right:-10px}#menu .play-actions{grid-template-columns:100px 200px}#menu .multiplayer-box{max-width:410px}#menu .loadout-slots button{gap:8px;padding:10px 8px}}
@media(max-width:850px){#menu .selection{grid-template-columns:220px minmax(0,1fr)}#menu .build-panel{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 24px;border-top:1px solid #ffffff16;padding-top:20px}#menu .build-heading{grid-column:1/-1;margin-bottom:4px}#menu #ability-picker{grid-row:2/5}#menu #focus-picker{margin-top:16px}#menu .champion-stage{height:510px}#menu .launch-bottom{flex-wrap:wrap}#menu .play-actions{margin-left:auto}#menu #mode-picker{gap:12px}#menu #mode-picker button{padding:10px}#menu .masthead{height:90px}#menu .brand-logo{height:72px;width:105px}#menu .account-panel{top:18px}}
@media(max-width:550px){#menu{background-position:47% top}#menu .lobby{padding:0 16px 16px}#menu .masthead{height:80px}#menu .brand-logo{width:94px;height:65px}#menu .account-panel{top:20px;right:16px;width:auto;max-width:230px}#menu .account-top{flex-direction:row;align-items:center}#menu .account-top>div{display:none}#menu .account-top .secondary{font-size:9px;padding:9px;min-height:33px}#menu #account-content{position:fixed;top:80px;left:16px;right:16px;max-height:75vh;margin:0}#menu .selection{grid-template-columns:1fr;gap:22px;padding-top:18px}#menu .champion-stage{grid-row:1;height:390px}#menu #champion-preview{height:330px;top:-26px}#menu #champion-facing{top:252px}#menu .champion-caption{bottom:0;left:0;right:0}#menu #champion-name{font-size:46px;margin:5px 0}#menu .class-detail>p{font-size:10px;margin-bottom:6px}#menu .character-panel{grid-row:2}#menu .selection-top{margin-bottom:12px}#menu .factions{margin-bottom:17px}#menu .class-grid{grid-template-columns:repeat(3,1fr)}#menu .class-card{display:flex;align-items:center;gap:8px;padding:10px;min-height:48px}#menu .class-card .spell-icon{width:23px;height:23px;margin:0}#menu .class-card strong{font-size:10px}#menu .difficulty-options button{padding:11px 5px}#menu .build-panel{display:block;padding-top:22px}#menu .build-heading h2{font-size:25px}#menu .loadout-slots button{padding:12px;min-height:66px}#menu #focus-picker{margin-top:20px}#menu .launch-panel{padding-top:22px}#menu #mode-picker{display:block}#menu #mode-picker .difficulty-options{display:grid;grid-template-columns:1fr 1fr;margin-top:12px}#menu .launch-bottom{display:block;margin-top:20px}#menu .multiplayer-box{grid-template-columns:minmax(0,1fr) auto;max-width:none}#menu #create-room,#menu #join-room{font-size:9px;padding:12px}#menu .play-actions{grid-template-columns:100px 1fr;margin-top:18px}#menu .primary{font-size:11px;padding:16px 10px}#menu .control-hint{text-align:center;line-height:1.6;margin-top:16px}#menu .briefing{position:fixed;bottom:100px;left:16px;right:16px;width:auto;max-width:none;max-height:65vh}#menu .launcher-dialog{max-height:91vh;width:calc(100vw - 20px);border-radius:12px}#menu .launcher-dialog>header{padding:20px}#menu .launcher-dialog h2{font-size:22px}#menu .browser-note{padding-inline:20px}#menu .launcher-dialog .ability-grid{grid-template-columns:1fr;padding:0 14px 20px}#menu .wardrobe-dialog{margin:auto;width:calc(100vw - 24px);max-height:85vh}#menu .lobby-footer{font-size:7px;line-height:1.8}#menu .lobby-footer span:last-child{display:none}#menu .room-teams{grid-template-columns:1fr}#menu .room-actions button{min-width:120px}#menu .room-invite{flex-wrap:wrap}#menu .room-invite input{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){#menu button{transition:none}#menu .class-card:hover,#menu .primary:hover{transform:none}}

/* Keep the launch controls within reach on common laptop displays. */
@media(min-width:851px) and (max-height:850px){
 #menu .masthead{height:78px}#menu .brand-logo{height:68px;width:100px}#menu .account-panel{top:11px}
 #menu .selection{padding-top:18px;row-gap:14px}#menu .selection-top{margin-bottom:10px}#menu .factions{margin-bottom:14px}
 #menu .class-card{min-height:53px;padding:6px 3px}#menu .class-card .spell-icon{width:21px;height:21px;margin-bottom:4px}
 #menu .difficulty-options{margin-top:7px}#menu .difficulty-options button{padding:7px 5px}
 #menu .launcher-link{margin-top:12px;padding:11px 0}#menu .champion-stage{height:450px}#menu #champion-preview{height:365px;top:-18px}#menu #champion-facing{top:303px}#menu #champion-name{font-size:44px}
 #menu .build-heading{margin-bottom:12px}#menu .build-heading h2{font-size:25px}#menu .loadout-slots button,#menu .ultimate-slot{min-height:49px;padding:7px 10px}#menu .loadout-slots .spell-icon,#menu .ultimate-slot .spell-icon{width:30px;height:30px}
 #menu .slot-label{margin:12px 0 7px}
 #menu .launch-panel{padding-top:12px}#menu .launch-bottom{margin-top:12px}#menu .control-hint{margin-top:8px}
}

#menu .launcher-dialog .ability-starting,#menu .launcher-dialog .ability-metrics{display:block}
#menu .launcher-dialog .ability-metrics{margin-top:6px;font-style:normal;line-height:1.6}
@media(max-width:550px){
 #menu .lobby{padding-bottom:110px}
 #menu .play-actions{position:fixed;bottom:0;left:0;right:0;z-index:10;display:grid;grid-template-columns:100px minmax(0,1fr);gap:7px 12px;background:#101d26f5;border-top:1px solid #ffffff20;padding:12px 16px max(12px,env(safe-area-inset-bottom));box-shadow:0 -12px 40px #07101888}
 #menu .play-actions .primary{font-size:11px;padding:13px 10px;min-height:44px;margin:0}
 #menu .play-actions #enter-training{grid-column:2;font-size:8px}
 #menu .briefing{position:fixed;left:16px;right:16px;bottom:100px;width:auto;max-width:none}
}

/* Keep the innate bonus visible and let longer descriptions expand naturally. */
#menu .champion-stage{height:auto}
#menu .champion-caption{position:relative;left:auto;right:auto;bottom:auto;margin-top:-25px}
#menu .creation-passive{max-width:420px;margin:14px auto 0;padding:13px 16px;text-align:left;border:1px solid #a6bea52e;border-radius:9px;background:#12232be8}
#menu .passive-label{display:flex;justify-content:space-between;gap:10px;color:#96aaa5;font-size:9px;letter-spacing:1px;font-weight:600}
#menu .passive-label>span{color:#b7d2a0;text-transform:none;letter-spacing:0}
#menu .creation-passive .class-passive{border:0;background:none;padding:0;margin:8px 0 0}
#menu .creation-passive .class-passive b{font-size:14px;color:#e7d6aa}
#menu .creation-passive .class-passive small{font-size:12px;line-height:1.5;color:#c5d3cf;margin-top:5px}
@media(min-width:851px) and (max-height:850px){#menu #champion-preview{height:310px}#menu #champion-facing{top:250px}#menu #champion-name{font-size:40px}#menu .creation-passive{padding:11px 14px;margin-top:10px}}
@media(max-width:550px){#menu .creation-passive{margin-top:14px}#menu .champion-caption{margin-top:-25px}}

#menu .setting-story{margin-top:18px;border-top:1px solid #ffffff20;padding-top:12px;color:#b9c8cd;font-size:12px;line-height:1.6}
#menu .setting-story summary{cursor:pointer;color:#f1d88a;font-size:11px;font-weight:700}
#menu .setting-story p{max-width:850px;margin:10px 0}