/* Orbital home geometry; all materials and artwork come from the shared HUD system. */
#lobby[data-home-loading] #lobbyShell{visibility:hidden;}
#homeLoading{position:absolute;inset:0;display:grid;place-items:center;color:var(--hud-accent);font:var(--hud-space-6)/var(--hud-leading) var(--hud-font-label);}
#lobby:has(.homeShell #menuPane:not([hidden])){padding:calc(var(--hud-space-4) + var(--sat)) calc(var(--hud-space-4) + var(--sar)) calc(var(--hud-space-4) + var(--sab)) calc(var(--hud-space-4) + var(--sal));background:var(--hud-surface-canvas);}
#lobby .homeShell{width:min(1440px,100%);height:auto;min-height:0;gap:var(--hud-space-3);margin:auto;}
body.inlobby #lobby .homeShell #lobbyHead{padding:var(--hud-space-4);padding-right:240px;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--hud-space-3);background:var(--hud-panel-fill);border:var(--hud-border-hairline) solid var(--hud-border);box-shadow:var(--hud-chrome-highlight);}
.homeShell #lobbyTitle{font:700 var(--hud-title-lg)/var(--hud-leading-title) var(--hud-font-display);margin:0;color:var(--hud-text);text-shadow:var(--hud-title-shadow);letter-spacing:0;}
#lobby .homeShell #lobbySub{display:none;}
.homeShell #lobbyHead>.pxRule{display:none;}
.homeNav{display:flex;flex-wrap:wrap;gap:var(--hud-space-2);margin:0;}
.homeNavCurrent{display:none;}
.homeNav .btn{background:transparent;border-color:transparent;color:var(--hud-text-muted);}
.homeNav .btn:hover{border-color:var(--hud-border);color:var(--hud-accent);}
#lobby .homeShell #menuPane{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0;align-items:stretch;}
#lobby .homeShell #menuPane[hidden]{display:none;}
.homeShell :is(.homePilot,.homeShowcase,.homeLaunch){min-width:0;margin:0;border-radius:0;}
.homeShell :is(#menuPane,.homeNav,.homeDialog) :is(.btn,summary){min-height:var(--hud-target);font-size:var(--hud-text-sm);}
.homeShell :is(#menuPane,.homeNav,.homeDialog) .btn{padding:var(--hud-space-3);font-family:var(--hud-font-label);}
.homeShell .homePilot{grid-column:1/-1;padding:var(--hud-space-1) var(--hud-space-4);}
.homeAccountStrip{grid-column:1/-1;display:flex;align-items:flex-start;gap:var(--hud-space-3);border-bottom:var(--hud-border-hairline) solid var(--hud-border);}
.homeAccountStrip .homePilot{flex:1;}
.homeAccountEntry{display:flex;align-items:center;gap:var(--hud-space-3);padding:var(--hud-space-1) var(--hud-space-4);}
.homeAccountEntry .hud-copy{margin:0;color:var(--hud-text-muted);overflow-wrap:anywhere;}
.homeAccountEntry .btn{flex-shrink:0;}
.homeDialog.homeLoginDialog{width:min(400px,calc(100% - var(--hud-space-6)));}
.homeLoginDialog #googleLogin{width:100%;min-height:var(--hud-target);}
.homeLoginDialog #btnDiscordLogin,.homeLoginDialog #homeContinueGuest{width:100%;min-height:var(--hud-target);}
.homeLoginDialog #homeContinueGuest{margin-top:var(--hud-space-3);}
.homeLoginDialog #homeLoginStatus:empty{display:none;}
.homeShell .homePilotSummary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--hud-space-3);list-style:none;}
.homeEmailLogin summary{list-style:none;cursor:pointer;}
.homeEmailLogin summary::-webkit-details-marker{display:none;}
.homeEmailLogin form{margin-top:var(--hud-space-3);}
.homeEmailLogin input{width:100%;min-width:0;box-sizing:border-box;}
.homeEmailLogin [role=status]:empty{display:none;}
.homePilotSummary::-webkit-details-marker{display:none;}
.homePilotIdentity{display:flex;align-items:center;gap:var(--hud-space-3);min-width:0;text-align:left;}
.homeShell .homePilot:not(.homePilotAccount) .homePilotSummary{cursor:default;}
.homePilotAccount .homePilotIdentity>.hud-label::after{content:' +';color:var(--hud-focus);}
.homePilotAccount[open] .homePilotIdentity>.hud-label::after{content:' −';}
/* Progress ring toward the next rank reward, drawn around the medal. */
.homePilot #rankBadge.homeRankRing .rankMedal{position:relative;overflow:visible;}
.homePilot #rankBadge.homeRankRing .rankMedal::after{content:'';position:absolute;inset:-4px;border-radius:50%;pointer-events:none;background:conic-gradient(var(--hud-accent) calc(var(--rank-progress,0) * 1turn),var(--hud-border-subtle) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));}
.homeShell .homePilotSummary{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"id badge" "stats badge";column-gap:var(--hud-space-3);row-gap:var(--hud-space-1);}
.homePilotSummary>.homePilotIdentity{grid-area:id;align-self:end;}
.homePilotSummary>#rankBadge{grid-area:badge;}
.homePilotSummary>.homeRankStats{grid-area:stats;align-self:start;justify-self:start;text-align:left;}
.homeRankStats{margin:0;font-size:var(--hud-text-xs);color:var(--hud-text-muted);white-space:nowrap;}
.homeRankStats:empty{display:none;}
#homeNickname{display:block;margin:0;overflow-wrap:anywhere;}
#homeNickname[hidden]{display:none;}
.homeShell .homePilot #rankBadge{flex-direction:row;text-align:left;gap:var(--hud-space-2);}
.homeShell .homePilot #rankBadge .rankMedal{width:32px;height:32px;flex-shrink:0;}
.homePilotBody{margin-top:var(--hud-space-3);max-width:680px;}
/* Account rows moved out of Game Options: admin cosmetics and data deletion. */
.homePilotBody .optionRow{display:flex;align-items:center;justify-content:space-between;gap:var(--hud-space-3);margin:0;padding:var(--hud-space-3) 0;border-top:var(--hud-border-hairline) solid var(--hud-border);text-align:left;}
.homePilotBody .optionRow[hidden],.homePilotBody #adminCosmeticsStatus[hidden]{display:none;}
.homePilotBody #adminCosmeticsToggle{width:var(--hud-target);height:var(--hud-target);flex-shrink:0;accent-color:var(--hud-accent);}
.homePilotBody #adminCosmeticsStatus{margin:0;color:var(--hud-danger);}
.homePilotBody #btnDeleteAccount{flex-shrink:0;}
.homePilot #accountBar{justify-content:flex-start;flex-wrap:wrap;}
.homePilot #googleLogin{max-width:100%;overflow:hidden;}
.homeShowcase{position:relative;isolation:isolate;display:grid;grid-template-columns:53% minmax(0,1fr);grid-template-rows:auto 1fr;min-height:480px;padding:var(--hud-space-6);overflow:hidden;}
#homeOrbit{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;opacity:.25;}
.homeIntro{grid-column:1/-1;text-align:left;}
.homeIntro .hud-label{color:var(--hud-focus);}
.homeIntro h2,.homeIntro p{display:none;}
.homeHeroStage{display:grid;place-items:center;position:relative;min-width:0;min-height:340px;padding-bottom:var(--hud-space-6);}
#homeHero{position:relative;width:min(420px,100%);height:auto;aspect-ratio:1;object-fit:contain;background-color:transparent;background-size:contain;background-repeat:no-repeat;background-position:center;}
.homeHeroCaption{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:var(--hud-space-4);min-width:0;text-align:left;padding:var(--hud-space-3);}
.homeHeroCaption>div>.hud-label{color:var(--hud-text-muted);font-size:var(--hud-text-xs);}
.homeHeroCaption h3{font:700 clamp(24px,2.5vw,40px)/var(--hud-leading-title) var(--hud-font-display);color:var(--hud-text);text-shadow:var(--hud-title-shadow);margin:var(--hud-space-2) 0;overflow-wrap:anywhere;}
.homeHeroCaption p{margin:0;color:var(--hud-accent);}
#homeHeroPickerButton{display:flex;align-items:center;gap:var(--hud-space-3);min-width:0;width:100%;text-align:left;}
.homeHeroPickerButtonIcon,.homeHeroPickerButtonIcon .heroPortrait{display:block;width:40px;height:40px;border-radius:var(--hud-radius);flex:none;}
.homeHeroDetails{min-width:0;}
.homeSkills{display:flex;flex-wrap:wrap;gap:var(--hud-space-2);margin:var(--hud-space-4) 0;}
.homeShell #menuPane .homeSkill{width:56px;height:56px;padding:var(--hud-space-1);display:grid;place-items:center;border-color:var(--hud-launch-rim);background:var(--hud-surface-inset);}
/* The icon fills the button inside its border and padding at every size; a fixed icon size overflowed the
   button and sat off-centre, down and right. */
.homeSkill .skillIcon{width:100%;height:100%;}
.homeHeroDetails p{font:var(--hud-text-sm)/var(--hud-leading) var(--hud-font-body);text-align:left;color:var(--hud-text-muted);}
#homeMasteryProgress{display:block;width:100%;height:var(--hud-space-2);margin-top:var(--hud-space-2);accent-color:var(--hud-focus);}
.homeSkillDescription:empty{display:none;}
.homeSkillDescription{margin:var(--hud-space-3) 0 0;text-align:left;}
.homeLaunch{display:flex;flex-direction:column;justify-content:center;gap:var(--hud-space-4);padding:var(--hud-space-6);}
.homeLaunch>h2,.homeLaunch>p:not(#queueState),.homeLaunch>.hud-label{display:none;}
.homeLaunch>p{margin:0;}
.homeMatchAction{display:flex;flex-direction:column;gap:var(--hud-space-2);text-align:center;}
#menuPane .homeLaunch #btnQuickMatch{min-height:var(--hud-launch-height);font:700 var(--hud-text-body)/var(--hud-leading) var(--hud-font-label);padding:var(--hud-space-4) var(--hud-space-2);animation:none;}
.homeRoutes{gap:var(--hud-space-3);}
.homeRoutes>.hud-label{display:none;}
/* Format picker (1v1v1 / 2v2v2 squad): spans the full routes row on every breakpoint. */
.homeRoutes .modePick{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--hud-space-1);width:100%;text-align:center;}
.homeRoutes #modeRow{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hud-space-2);}
.homeRoutes .modePick .pcSub{flex:0 0 auto;min-height:0;}
#menuPane .homeRoutes #btnHowToPlay{align-self:stretch;font-size:var(--hud-text-xs);}
#queueState{order:4;}
#matchFlow #homeCancelSearch{min-width:min(260px,100%);pointer-events:auto;}
.homeHeroPicker{inset:var(--sat) var(--sar) var(--sab) var(--sal);width:min(980px,calc(100vw - var(--hud-space-6) - var(--sal) - var(--sar)));height:min(720px,calc(100dvh - var(--hud-space-6) - var(--sat) - var(--sab)));max-width:none;max-height:none;overflow:hidden;padding:var(--hud-space-4);}
.homeHeroPicker[open]{display:flex;flex-direction:column;}
.homeHeroPickerHead{display:flex;align-items:center;justify-content:space-between;gap:var(--hud-space-4);flex:none;margin-bottom:var(--hud-space-3);}
.homeHeroPickerHead h2{margin:0;font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-label);}
.homeHeroPickerHead .btn{min-width:var(--hud-target);min-height:var(--hud-target);padding:var(--hud-space-2);}
.homeHeroPickerLayout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--hud-space-3);min-height:0;flex:1;}
#homeHeroPickerDetail{min-width:0;overflow:auto;padding:var(--hud-space-3);}
#homeHeroPickerDetail .hdAbils{display:flex;}
.homeHeroPickerPortrait .heroPortrait{width:72px;height:72px;border-radius:var(--hud-radius);}
.homeHeroPickerRoster{display:flex;flex-direction:column;gap:var(--hud-space-2);min-width:0;min-height:0;}
#homeHeroPickerSearch{width:100%;min-height:var(--hud-target);font-size:var(--hud-text-body);flex:none;}
.homeHeroPickerGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--hud-space-2);align-content:start;min-height:0;overflow:auto;padding:var(--hud-space-1);}
.homeHeroPicker .homeHeroPickerGrid .hcard{min-height:112px;}
.homeHeroPickerGrid .hcard :is(.ic,.nm,.rl){flex:none;}
body:not(.touch) .homeHeroPicker .homeHeroPickerGrid .hcard{min-height:140px;}
#homeHeroPickerEmpty{margin:auto;text-align:center;}

.homeDialog{inset:var(--sat) var(--sar) var(--sab) var(--sal);width:min(680px,calc(100vw - var(--hud-space-6) - var(--sal) - var(--sar)));max-height:calc(100dvh - var(--hud-space-6) - var(--sat) - var(--sab));overflow:auto;}
.homeDialogHead{display:flex;align-items:center;justify-content:space-between;gap:var(--hud-space-4);margin-bottom:var(--hud-space-4);}
.homeDialogHead h2{font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-label);margin:0;}
.homeDialog .playCard{display:flex;flex-direction:column;align-items:stretch;gap:var(--hud-space-3);width:100%;min-width:0;padding:var(--hud-space-4);background:var(--hud-surface-panel);border:var(--hud-border-width) solid var(--hud-border-subtle);}
.homeDialog .pcSub{font:var(--hud-text-body)/var(--hud-leading) var(--hud-font-body);}
.homeDialog #joinBox{display:flex;min-width:0;width:100%;}
.homeDialog #codeInput{min-width:0;width:100%;font-size:var(--hud-text-body);}
.homeDialog .rankProgression{width:100%;border:0;padding:0;background:none;color:var(--hud-text);}
.homeDialog #patchNotes{position:static;width:auto;box-shadow:none;background:var(--hud-surface-panel);}
.homeDialog #patchNotes summary{flex-wrap:wrap;gap:var(--hud-space-2);}
.homeDialog #patchNotes summary strong{min-width:0;white-space:normal;overflow-wrap:anywhere;flex:1;}
.homeDialog #patchNotes .patchNotesBody{max-height:none;}
/* An empty status line reserves no height, so the home fills the window. */
.homeShell #lobbyStatus:empty{display:none;}
.homeShell:has(#roomPane:not([hidden])) .homeNav{display:none;}
#lobby .homeShell:has(#roomPane:not([hidden])){height:100%;}

.homeShell:has(#menuPane[hidden]) #lobbyHead>.homeAccountStrip{display:none;}
/* Fill desktop windows, including ultrawide displays. Keep short windows scrollable
   inside the menu and preserve the phone layout and device safe areas. */
@media(min-width:1024px) and (min-height:600px){
  body:not(.touch) #lobby:has(.homeShell #menuPane:not([hidden])){padding:var(--sat) var(--sar) var(--sab) var(--sal);}
  body:not(.touch) #lobby #lobbyShell.homeShell:has(#menuPane:not([hidden])){width:100%;height:100%;margin:0;gap:0;}
  body:not(.touch) #lobby .homeShell #menuPane{flex:1 1 auto;min-height:0;overflow-y:auto;}
}
@media(min-width:1280px) and (min-height:600px){
  #lobby .homeShell{gap:0;}
  /* Full-bleed on a real desktop window: the home screen is the whole screen,
     not a 1440px card floating on a backdrop. Phones and short windows keep
     the centred layout above. */
  #lobby:has(.homeShell #menuPane:not([hidden])){padding:var(--sat) var(--sar) var(--sab) var(--sal);}
  #lobby .homeShell{width:100%;max-width:none;min-height:100%;}
  #lobby .homeShell #menuPane{flex:1 1 auto;}
  body.inlobby #lobby .homeShell #lobbyHead{position:relative;display:flex;flex-wrap:nowrap;justify-content:flex-start;padding:var(--hud-space-3) var(--hud-space-4);gap:var(--hud-space-3);min-height:80px;background:var(--hud-orbital-fill);}
  .homeShell #lobbyTitle{font-family:var(--hud-font-pixel);font-size:var(--hud-space-6);white-space:nowrap;flex-shrink:0;padding-right:var(--hud-space-3);border-right:var(--hud-border-hairline) solid var(--hud-border-subtle);}
  .homeNav{gap:0;flex:1;flex-wrap:wrap;align-items:center;}
  .homeNavCurrent{display:flex;order:-1;align-items:center;align-self:stretch;min-height:var(--hud-target);padding:var(--hud-space-2);color:var(--hud-accent);font:var(--hud-weight-strong) var(--hud-text-sm)/var(--hud-leading) var(--hud-font-label);border-bottom:var(--hud-border-width) solid var(--hud-accent);}
  .homeNav .btn{padding:var(--hud-space-2);font-size:var(--hud-text-xs);min-height:var(--hud-target);text-transform:uppercase;letter-spacing:var(--hud-tracking-label);}
  #lobbyHead>.homeAccountStrip{flex:0 0 264px;align-items:center;border:0;border-left:var(--hud-border-hairline) solid var(--hud-border-subtle);gap:0;padding-left:var(--hud-space-2);}
  #lobbyHead .homePilot{position:relative;padding:var(--hud-space-1);border:0;background:none;min-width:0;}
  #lobbyHead .homePilotIdentity>.hud-label{max-width:none;font-size:var(--hud-text-xs);}
  #lobbyHead .homePilotSummary{flex-direction:column;align-items:flex-start;gap:var(--hud-space-1);}
  #lobbyHead .homePilot #rankBadge{padding:0;gap:var(--hud-space-1);font-size:var(--hud-text-xs);}
  #lobbyHead .homePilot #rankBadge .rankMedal{width:var(--hud-space-6);height:var(--hud-space-6);}
  #lobbyHead .homePilotSummary{display:flex;}
  #lobbyHead .homePilot #rankBadge{min-height:0;margin:var(--hud-space-2) 0 0;padding:var(--hud-space-1) var(--hud-space-2) var(--hud-space-1) var(--hud-space-2);}
  #lobbyHead .homePilotSummary{gap:2px;}
  #lobbyHead .homeRankStats{line-height:1;padding-left:var(--hud-space-1);}
  #lobbyHead .homePilotBody{position:absolute;right:0;top:100%;width:420px;max-height:65vh;overflow:auto;z-index:55;padding:var(--hud-space-4);background:var(--hud-surface-overlay);border:var(--hud-border-hairline) solid var(--hud-border);box-shadow:var(--hud-shadow);}
  #lobbyHead .homeAccountEntry{padding:var(--hud-space-1);flex-direction:column;align-items:flex-end;gap:var(--hud-space-1);}
  #lobbyHead #homeAccountHint{font-size:var(--hud-text-xs);}
  /* Lift the small captions out of flow so the rank badge and Sign In share the nav's centre line. */
  #lobbyHead :is(.homePilotSummary,.homeAccountEntry){position:relative;}
  #lobbyHead .homePilotIdentity{position:absolute;left:var(--hud-space-1);bottom:calc(100% - var(--hud-space-2));white-space:nowrap;}
  #lobbyHead #homeAccountHint{position:absolute;right:var(--hud-space-1);bottom:calc(100% - var(--hud-space-1));white-space:nowrap;}
  #lobbyHead #homeSignIn{min-height:var(--hud-target);padding:var(--hud-space-1) var(--hud-space-2);}
  body.inlobby #lobbyHead #hudUtilityBar{position:static;flex:none;gap:var(--hud-space-1);}
  body.inlobby #lobbyHead #hudUtilityBar button{width:var(--hud-target);height:var(--hud-target);padding:var(--hud-space-2);}
  #lobbyHead #btnQuickFullscreen .fullscreenLabel,#lobbyHead #btnHudOptions span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  #lobby .homeShell #menuPane{grid-template-columns:minmax(0,1fr) 316px;}
  .homeShowcase{min-height:520px;grid-template-columns:56% minmax(0,1fr);padding:var(--hud-space-6);border-top:0;}
  .homeHeroStage{align-items:center;padding-bottom:var(--hud-space-6);}
  #homeHero{width:min(360px,100%);}
  .homeIntro .hud-label{font-size:var(--hud-text-xs);letter-spacing:var(--hud-tracking-label);color:var(--hud-text-muted);}
  .homeHeroCaption{gap:var(--hud-space-4);padding:var(--hud-space-4);}
  .homeHeroCaption h3{font-size:var(--hud-title-xl);text-transform:uppercase;}
  .homeHeroCaption p{letter-spacing:var(--hud-tracking-label);}
  .homeSkills{gap:var(--hud-space-3);margin:var(--hud-space-6) 0 var(--hud-space-4);}
  .homeShell #menuPane .homeSkill{width:60px;height:60px;padding:var(--hud-space-1);}
  .homeLaunch{padding:var(--hud-space-4);gap:var(--hud-space-4);border-top:0;}
  .homeLaunch #homeHeroPickerButton{min-height:72px;}
  #menuPane .homeLaunch #btnQuickMatch{min-height:64px;font-size:var(--hud-text-count);text-transform:uppercase;}
  .homeLaunch .homeRoutes .btn{font-size:var(--hud-text-sm);letter-spacing:var(--hud-tracking-label);text-align:left;}
  .homeRoutes [aria-controls="homePanel0"]::before,.homeRoutes #btnTutorial::before{content:'';display:inline-block;width:var(--hud-space-6);height:var(--hud-space-6);vertical-align:middle;margin-right:var(--hud-space-3);background:var(--hud-text-muted);mask:url('../assets/ui/online-players.svg') center/contain no-repeat;}
  .homeRoutes #btnTutorial::before{mask-image:url('../shared/ui/cursors/target-cursor.png');}
}

@media(max-width:1100px){
  #lobby .homeShell #menuPane{grid-template-columns:minmax(0,1fr) 250px;}
  .homeShowcase{grid-template-columns:50% minmax(0,1fr);padding:var(--hud-space-4);min-height:420px;}
  .homeLaunch{padding:var(--hud-space-4);}
  #homeHero{width:min(340px,100%);}
  .homeHeroStage{min-height:280px;}
  .homeShell #menuPane .homeSkill{width:var(--hud-target);height:var(--hud-target);}
}
@media(max-width:700px){
  .homeAccountStrip{flex-wrap:wrap;gap:0;}
  .homeAccountStrip .homePilot{flex-basis:100%;}
  .homeAccountEntry{width:100%;justify-content:space-between;}
  body.inlobby #lobby .homeShell #lobbyHead{padding:var(--hud-space-3);align-items:flex-start;}
  .homeShell #lobbyTitle{font-size:var(--hud-space-6);flex-basis:100%;min-height:var(--hud-target);display:flex;align-items:center;padding-right:calc(var(--hud-target) * 2 + var(--hud-space-4));}
  body.inlobby #btnHudOptions{width:var(--hud-target);padding:var(--hud-space-2);}
  body.inlobby #btnHudOptions span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  #lobby .homeShell #menuPane{grid-template-columns:minmax(0,1fr);padding-bottom:calc(96px + var(--hud-space-6) + var(--sab));}
  .homePilotIdentity{flex-direction:column;align-items:flex-start;gap:0;}
  .homeShowcase{min-height:440px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 280px auto;padding:var(--hud-space-3);background-position:center,left center,center;}
  .homeHeroStage{grid-row:2;min-height:280px;padding:0;}
  #homeHero{width:min(280px,100%);}
  .homeHeroCaption{padding:var(--hud-space-2);gap:var(--hud-space-1);background:var(--hud-surface-glass);}
  .homeHeroCaption>div>.hud-label{display:none;}
  .homeHeroCaption h3{font-size:var(--hud-space-6);margin:0 0 var(--hud-space-1);}
  .homeSkills{margin:var(--hud-space-2) 0;}
  .homeLaunch{padding:var(--hud-space-3);gap:var(--hud-space-3);}
  .homeRoutes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hud-space-2);}
  #menuPane:not([hidden]) .homeMatchAction{position:fixed;z-index:30;bottom:calc(var(--hud-space-2) + var(--sab));left:calc(var(--hud-space-4) + var(--sal));right:calc(var(--hud-space-4) + var(--sar));padding:var(--hud-space-2);background:var(--hud-surface-panel);border:var(--hud-border-hairline) solid var(--hud-border);box-shadow:var(--hud-shadow);}
}
@media(max-height:520px) and (min-width:480px){
  /* Phone landscape uses the whole width: the safe area or a thin gutter, whichever is wider; no 1440px card. */
  #lobby:has(.homeShell #menuPane:not([hidden])){padding-left:max(var(--hud-space-2),var(--sal));padding-right:max(var(--hud-space-2),var(--sar));}
  #lobby .homeShell{width:100%;max-width:none;}
  /* Fullscreen and Options are icon-only here, so the header reserves two targets instead of 240px. */
  body.inlobby #lobby .homeShell #lobbyHead{padding:var(--hud-space-2);padding-right:calc(2 * var(--hud-target) + 3 * var(--hud-space-2));gap:var(--hud-space-1);flex-wrap:nowrap;}
  body.inlobby #btnHudOptions{width:var(--hud-target);padding:var(--hud-space-2);}
  body.inlobby :is(#btnHudOptions span,#btnQuickFullscreen .fullscreenLabel){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
  /* The title keeps its own width and the nav wraps in what is left, so every destination
     stays on screen; a scrolling strip hid everything after Friends. */
  .homeShell #lobbyTitle{flex:0 0 auto;}
  .homeNav{min-width:0;flex:1 1 0;}
  .homeAccountStrip{flex-wrap:nowrap;align-items:center;}
  .homeAccountStrip .homePilot{flex-basis:0;}
  .homeAccountEntry{width:auto;padding:var(--hud-space-1);}
  .homeShell #lobbyTitle{font-size:var(--hud-space-4);}
  .homeNav{gap:0;flex-wrap:wrap;max-width:100%;}
  .homeNav>*{flex:1 0 auto;}
  .homeNav .btn{padding:var(--hud-space-1);font-size:var(--hud-text-xs);letter-spacing:0;}
  #menuPane .homePilot #rankBadge{padding:0;margin:0;}
  #lobby .homeShell #menuPane{grid-template-columns:minmax(0,1fr) 210px;padding-bottom:0;}
  .homeShowcase{min-height:220px;grid-template-columns:45% minmax(0,1fr);grid-template-rows:1fr;padding:var(--hud-space-2);align-items:start;}
  .homeIntro{display:none;}
  .homeHeroStage{grid-row:1;min-height:160px;padding:0;align-items:start;}
  #homeHero{width:min(190px,100%);}
  .homeHeroCaption{padding:var(--hud-space-1);gap:var(--hud-space-1);}
  .homeHeroCaption h3{font-size:var(--hud-space-4);}
  .homeHeroCaption p{font-size:var(--hud-text-xs);}
  .homeHeroCaption{justify-content:flex-start;}
  .homeSkills{gap:var(--hud-space-1);margin:var(--hud-space-1) 0;}
  .homeLaunch{padding:var(--hud-space-2);justify-content:flex-start;gap:var(--hud-space-2);}
  #menuPane:not([hidden]) .homeMatchAction{position:static;order:-1;padding:0;border:0;box-shadow:none;background:none;}
  #menuPane .homeLaunch #btnQuickMatch{font-size:var(--hud-text-sm);}
  .homeRoutes{display:grid;grid-template-columns:1fr 1fr;gap:var(--hud-space-1);}
  .homeShell .homeRoutes .btn{padding:var(--hud-space-1);}
  .homeHeroPickerButtonIcon,.homeHeroPickerButtonIcon .heroPortrait{width:24px;height:24px;}
  /* Phone landscape: one screen-tall row. The showcase sets the height and the route list
     scrolls inside its column, starting below the fixed Fullscreen/Options bar rather than
     stretching the row past the viewport and sliding under that bar. */
  #menuPane .homeShowcase{height:calc(100dvh - 2 * var(--hud-space-4) - var(--sat) - var(--sab));min-height:200px;box-sizing:border-box;}
  #menuPane .homeLaunch{height:0;min-height:100%;box-sizing:border-box;overflow-y:auto;padding-top:calc(var(--hud-target) + 2 * var(--hud-space-2));}
}
/* The smallest landscape phones use the phone home (js/home.js phoneHome): DOGS, FRIENDS and MORE
   share the title row, and Options lives in MORE, so neither the header nor the launch column
   keeps room for the utility bar. */
@media(max-height:520px) and (min-width:480px) and (max-width:700px){
  body.inlobby #lobby .homeShell #lobbyHead{padding-right:var(--hud-space-2);}
  .homeShell #lobbyHead>.homeNav{flex:1 1 0;flex-wrap:nowrap;justify-content:flex-end;gap:var(--hud-space-1);}
  .homeShell #lobbyHead>.homeNav>*{flex:0 1 auto;}
  #menuPane .homeLaunch{padding-top:var(--hud-space-2);}
  /* A guest's strip is the hint and SAVE YOUR DOGS alone: hint left, the call on the right. */
  #menuPane .homeAccountStrip:not(.homeSignedIn) .homeAccountEntry{flex:1 1 auto;justify-content:space-between;}
}
@media(max-width:700px){
  .homeHeroPicker{padding:var(--hud-space-3);}
  .homeHeroPickerLayout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(150px,38%) minmax(0,1fr);}
  #homeHeroPickerDetail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--hud-space-2);}
  #homeHeroPickerDetail .hdTop,#homeHeroPickerDetail .hdBadge{grid-column:1;}
  #homeHeroPickerDetail .hdTop{align-self:end;}
  #homeHeroPickerDetail .hdBadge{align-self:start;padding:var(--hud-space-2) var(--hud-space-1);}
  #homeHeroPickerDetail .hdAbils{display:flex;grid-column:2;grid-row:1/span 2;overflow:auto;}
  .homeHeroPickerPortrait .heroPortrait{width:56px;height:56px;}
  .homeHeroPickerGrid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:var(--hud-space-1);}
  .homeHeroPicker .homeHeroPickerGrid .hcard{min-height:92px;}
}
@media(max-height:420px){
  .homeHeroPickerLayout{grid-template-columns:220px minmax(0,1fr);grid-template-rows:minmax(0,1fr);}
  #homeHeroPickerDetail{display:block;}
  .homeHeroPickerPortrait .heroPortrait{width:48px;height:48px;}
}

/* Punk sticker home (direction B). home.js puts .hud-theme-sticker on #lobbyHead and #menuPane;
   the shared theme supplies button and panel materials, this block the home's own surfaces and
   the nav icons (assets/ui/nav/, painted with klein). */
#lobby:has(.homeShell #menuPane:not([hidden])){background:var(--hud-sticker-dots),var(--hud-sticker-wall);}
body.inlobby #lobby .homeShell #lobbyHead.hud-theme-sticker{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
.homeShell #lobbyTitle.hud-sticker-type{letter-spacing:.02em;}
body.inlobby #btnHudOptions{background:var(--hud-sticker-raised);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
.hud-theme-sticker #btnHeroCollection{--nav-icon:url('../assets/ui/nav/heroes.png');}
.hud-theme-sticker #btnSkinsTop{--nav-icon:url('../assets/ui/nav/inventory.png');}
.hud-theme-sticker #btnFriends{--nav-icon:url('../assets/ui/nav/friends.png');}
.hud-theme-sticker [data-nav=rank]{--nav-icon:url('../assets/ui/nav/rank.png');}
.hud-theme-sticker [data-nav=history]{--nav-icon:url('../assets/ui/nav/history.png');}
.hud-theme-sticker [data-nav=changes]{--nav-icon:url('../assets/ui/nav/changes.png');}
.hud-theme-sticker #heroStatisticsButton{--nav-icon:url('../assets/ui/nav/stats.png');}
.hud-theme-sticker [aria-controls=homeCommunity]{--nav-icon:url('../assets/ui/nav/community.png');}
/* The hero-collection count rides on the Heroes tile as a tape tag. */
.hud-theme-sticker #heroCollectionCount{background:var(--hud-sticker-tape);color:var(--hud-sticker-ink);border:0;border-radius:0;padding:0 var(--hud-space-1);font:var(--hud-weight-strong) var(--hud-text-xs)/1.5 var(--hud-font-label);transform:rotate(4deg);pointer-events:none;box-shadow:0 1px 0 var(--hud-sticker-keyline);}
.hud-theme-sticker .homeNav>#heroCollectionCount{flex:0 0 auto;align-self:center;height:auto;}
.hud-theme-sticker #heroCollectionCount .heroCollectionWord{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.hud-theme-sticker .homeFriendsCount{background:var(--hud-sticker-hot);color:var(--hud-sticker-ink);border:2px solid var(--hud-sticker-keyline);}
/* Account: the pilot profile and sign-in share one sticker; guests get two calls, not an empty box. */
.hud-theme-sticker .homeAccountStrip{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
.hud-theme-sticker .homeAccountStrip .homePilot{background:none;border:0;box-shadow:none;}
.hud-theme-sticker .homeShowcase .homeHeroCaption{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
.hud-theme-sticker .homeHeroCaption p#homeHeroRole{color:var(--hud-sticker-hot);font-weight:var(--hud-weight-strong);letter-spacing:var(--hud-tracking-label);}
.hud-theme-sticker #homeMasteryProgress{accent-color:var(--hud-sticker-cool);}
.hud-theme-sticker .homeRoutes .modeCard{background:var(--hud-sticker-raised);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);color:var(--hud-text);}
.hud-theme-sticker .homeRoutes .modeCard.sel{background:var(--hud-sticker-cool);color:var(--hud-sticker-ink);}
.hud-theme-sticker .homeRoutes .modeCard.sel *{color:var(--hud-sticker-ink);}
.hud-theme-sticker .homeRoutes .pcSub{color:var(--hud-text-muted);}
#menuPane.hud-theme-sticker:not([hidden]) .homeMatchAction{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
#menuPane.hud-theme-sticker .homeLaunch #btnQuickMatch{font:700 var(--hud-text-count)/1 var(--hud-font-display);letter-spacing:.06em;}
/* Portrait phones: the nav is a 4x2 icon grid instead of three rows of wrapped links, and the
   account sticker is two rows (who you are / what to do). */
@media(max-width:479px),(max-width:700px) and (min-height:521px){
  body.inlobby #lobby .homeShell #lobbyHead.hud-theme-sticker{row-gap:var(--hud-space-3);}
  .hud-theme-sticker .homeNav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--hud-space-2);flex:1 1 100%;width:100%;}
   /* #lobbyHead outranks the shared .homeShell :is(#menuPane,.homeNav,...) .btn padding. */
  #lobbyHead.hud-theme-sticker .homeNav>.btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--hud-space-1);min-width:0;min-height:68px;padding:var(--hud-space-2) 2px;font-size:var(--hud-text-xs);line-height:1.15;letter-spacing:0;white-space:normal;text-align:center;overflow-wrap:normal;hyphens:manual;}
  .hud-theme-sticker .homeNav>.btn::before{content:'';flex:none;width:32px;height:32px;background:var(--nav-icon) center/contain no-repeat;}
  .hud-theme-sticker .homeNav>#btnHeroCollection{grid-column:1;grid-row:1;}
  .hud-theme-sticker .homeNav>#heroCollectionCount{grid-column:1;grid-row:1;justify-self:end;align-self:start;margin:-6px -4px 0 0;z-index:1;}
  .hud-theme-sticker .homeFriendsCount{position:absolute;top:-6px;right:-4px;}
  .hud-theme-sticker .homeNav>#btnFriends{position:relative;}
  .hud-theme-sticker.homeAccountStrip,.hud-theme-sticker .homeAccountStrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:var(--hud-space-2) var(--hud-space-2);padding:var(--hud-space-3);}
  .hud-theme-sticker .homeAccountEntry{display:contents;}
  .hud-theme-sticker .homeAccountStrip .homePilot{grid-column:1;grid-row:1;padding:0;}
  .hud-theme-sticker #homeAccountHint{grid-column:2;grid-row:1;justify-self:end;text-align:right;font-size:var(--hud-text-sm);}
  .hud-theme-sticker .homeAccountStrip:has(.homePilot[open]) .homePilot{grid-column:1/-1;}
  .hud-theme-sticker .homeAccountStrip:has(.homePilot[open]) #homeAccountHint{grid-row:2;grid-column:1/-1;justify-self:start;text-align:left;}
  .hud-theme-sticker #homeCreateAccount[hidden]+#homeSignIn{grid-column:1/-1;}
  .hud-theme-sticker .homeAccountEntry .btn{width:100%;padding:var(--hud-space-2);}
  .hud-theme-sticker .homeShowcase{margin-top:var(--hud-space-2);}
  .hud-theme-sticker .homeShowcase .homeHeroCaption{padding:var(--hud-space-3);margin-top:calc(-1 * var(--hud-space-6));position:relative;}
  .hud-theme-sticker .homeLaunch{margin-top:var(--hud-space-2);}
}
/* Pilot sticker at every size: a small medal leads, the label follows. */
.hud-theme-sticker .homePilotSummary{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"badge id" "badge stats";}
/* No rank line yet (a guest, or offline): the label centres on the medal instead of sitting on an empty row. */
.hud-theme-sticker .homePilotSummary:has(>.homeRankStats:empty)>.homePilotIdentity{grid-row:1/-1;align-self:center;}
.hud-theme-sticker .homePilotIdentity>.hud-label{white-space:nowrap;}
:is(#menuPane,#lobbyHead).hud-theme-sticker .homePilot #rankBadge{margin:0;padding:0;background:none;border:0;box-shadow:none;}
:is(#menuPane,#lobbyHead).hud-theme-sticker .homePilot #rankBadge .rankMedal{width:36px;height:36px;font-size:22px;}
/* Offline or connecting, the grey medal says it; the tier name returns once a rank loads. */
:is(#menuPane,#lobbyHead).hud-theme-sticker .homePilot #rankBadge.off .rankTier{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
/* Wider than a phone: the hero card hugs its content over the hangar art instead of filling the
   column, and the nav is a row of ghost tabs with their icons; a tab lifts into a sticker on hover. */
@media(min-width:701px) and (min-height:521px){
  .hud-theme-sticker .homeShowcase .homeHeroCaption{align-self:center;justify-content:flex-start;height:auto;max-width:520px;padding:var(--hud-space-4);}
  #lobbyHead.hud-theme-sticker .homeNav>.btn{display:inline-flex;align-items:center;gap:var(--hud-space-2);padding:var(--hud-space-1) var(--hud-space-3) var(--hud-space-1) var(--hud-space-2);background:transparent;border-color:transparent;box-shadow:none;color:var(--hud-text-muted);letter-spacing:var(--hud-tracking-label);}
  #lobbyHead.hud-theme-sticker .homeNav>.btn::before{content:'';flex:none;width:24px;height:24px;background:var(--nav-icon) center/contain no-repeat;}
  #lobbyHead.hud-theme-sticker .homeNav>.btn:not(:disabled):hover{background:var(--hud-sticker-raised);border-color:var(--hud-sticker-keyline);box-shadow:var(--hud-sticker-drop);color:var(--hud-text);}
  #lobbyHead.hud-theme-sticker .homeNavCurrent{align-self:center;min-height:0;padding:2px var(--hud-space-2);background:var(--hud-sticker-tape);color:var(--hud-sticker-ink);border:0;transform:rotate(-2deg);}
  .hud-theme-sticker .homeNav>#heroCollectionCount{margin-left:calc(-1 * var(--hud-space-2));align-self:flex-start;}
  #menuPane.hud-theme-sticker .homeAccountStrip{align-items:center;padding:var(--hud-space-2) var(--hud-space-3);}
}
/* Tablets and small desktop windows: home.js seats the utility bar in the header, so the title
   and the bar share the top row and the nav gets the card's full width beneath them. */
@media(min-width:701px) and (max-width:1279px) and (min-height:521px),(min-width:1280px) and (min-height:521px) and (max-height:599px){
  body.inlobby #lobby .homeShell #lobbyHead{padding-right:var(--hud-space-4);}
  .homeShell #lobbyHead>#lobbyTitle{flex:1 1 auto;text-align:left;}
  .homeShell #lobbyHead>.homeNav{order:2;flex:1 1 100%;}
  body.inlobby #lobbyHead #hudUtilityBar{position:static;order:1;flex:none;}
}
/* Desktop windows: separate stickers with a gutter instead of butting panels together, and a
   two-row header: brand and account on top, the tab row beneath. */
@media(min-width:1024px) and (min-height:600px){
  body:not(.touch) #lobby:has(.homeShell #menuPane:not([hidden])){padding:calc(var(--hud-space-3) + var(--sat)) calc(var(--hud-space-3) + var(--sar)) calc(var(--hud-space-3) + var(--sab)) calc(var(--hud-space-3) + var(--sal));}
  body:not(.touch) #lobby #lobbyShell.homeShell:has(#menuPane:not([hidden])){gap:var(--hud-space-3);}
  #lobby .homeShell #menuPane.hud-theme-sticker{column-gap:var(--hud-space-3);}
}
@media(min-width:1280px) and (min-height:600px){
  body.inlobby #lobby .homeShell #lobbyHead.hud-theme-sticker{flex-wrap:wrap;row-gap:var(--hud-space-2);padding:var(--hud-space-3) var(--hud-space-4) var(--hud-space-2);}
  .homeShell #lobbyTitle.hud-sticker-type{font:700 var(--hud-title-lg)/1 var(--hud-font-display);border-right:0;letter-spacing:.03em;}
  #lobbyHead.hud-theme-sticker .homeNav{order:5;flex:1 1 100%;gap:var(--hud-space-1);padding-top:var(--hud-space-2);border-top:var(--hud-border-width) solid var(--hud-sticker-keyline);}
  #lobbyHead.hud-theme-sticker>.homeAccountStrip{flex:0 0 auto;margin-left:auto;border:0;background:none;box-shadow:none;padding:0;gap:var(--hud-space-3);}
  #lobbyHead.hud-theme-sticker .homePilotSummary{display:flex;flex-direction:row;align-items:center;gap:var(--hud-space-2);}
  #lobbyHead.hud-theme-sticker .homePilotSummary>#rankBadge{order:-1;margin:0;}
  #lobbyHead.hud-theme-sticker .homePilotSummary>.homeRankStats{align-self:center;}
  #lobbyHead.hud-theme-sticker .homePilotIdentity{position:static;align-self:center;}
  #lobbyHead.hud-theme-sticker .homeAccountEntry{flex-direction:row;align-items:center;gap:var(--hud-space-2);}
  #lobbyHead.hud-theme-sticker #homeAccountHint{position:static;white-space:nowrap;font-size:var(--hud-text-sm);}
  #lobbyHead.hud-theme-sticker #homeSignIn,#lobbyHead.hud-theme-sticker #homeCreateAccount{padding:var(--hud-space-2) var(--hud-space-3);}
}
@media(max-width:360px){
  .homeShell #lobbyTitle.hud-sticker-type{font-size:var(--hud-space-4);white-space:nowrap;}
}
/* Home dialogs in the sticker theme: inner cards become lighter keylined wells, hero tiles are
   stickers with the pick in cyan. */
.hud-dialog.hud-theme-sticker :is(.playCard,.pxpanel,#patchNotes,.rankProgression){background:var(--hud-sticker-raised);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
.hud-dialog.hud-theme-sticker .hcard{background:var(--hud-sticker-raised);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
.hud-dialog.hud-theme-sticker .hcard.sel{outline:var(--hud-sticker-keyline-width) solid var(--hud-sticker-cool);outline-offset:0;}
.hud-dialog.hud-theme-sticker :is(.homeDialogHead,.homeHeroPickerHead)>h2{font-size:var(--hud-text-count);}
.hud-dialog.hud-theme-sticker :is(.homeDialogHead,.homeHeroPickerHead) .btn{min-width:var(--hud-target);}
/* #lobby h2 paints every lobby heading gold; in a sticker dialog gold belongs to the launch action. */
#lobby .hud-dialog.hud-theme-sticker h2{color:var(--hud-text);}
/* Ownership reads from the ✓ tag, so owned tiles keep the black keyline instead of a green edge. */
.hud-dialog.hud-theme-sticker :is(.hcard,.heroCollectionCard).isOwned:not(.sel){border-color:var(--hud-sticker-keyline);}
/* Don't Make Me Think on a phone (docs/dont-make-me-think-plan.md, phase 2): the dog and PLAY, with
   DOGS, FRIENDS and MORE beneath; every other tile, the other formats and the options open from MORE
   (js/home.js phoneHome, which also takes landscape phones up to 700px wide). A new guest sees no
   account call until a finished match gives them dogs to save. */
#lobbyHead .homeNav>#homeMoreButton[hidden]{display:none;}
@media(max-width:700px){
  .hud-theme-sticker .homeNav{grid-template-columns:repeat(3,minmax(0,1fr));}
  #lobbyHead.hud-theme-sticker .homeNav>.btn:not(#btnHeroCollection,#btnFriends,#homeMoreButton){display:none;}
  .hud-theme-sticker .homeNav>#btnFriends{grid-column:2;grid-row:1;}
  .hud-theme-sticker .homeNav>#homeMoreButton{grid-column:3;grid-row:1;}
  #lobbyHead.hud-theme-sticker .homeNav>#homeMoreButton::before{background:radial-gradient(circle at 18% 50%,currentColor 3px,transparent 3.5px),radial-gradient(circle at 50% 50%,currentColor 3px,transparent 3.5px),radial-gradient(circle at 82% 50%,currentColor 3px,transparent 3.5px);}
  body.inlobby:has(#menuPane:not([hidden])) #btnHudOptions{display:none;}
  #menuPane .homeAccountStrip.homeGuestFresh{display:none;}
  /* A guest's strip is the one SAVE YOUR DOGS call; a signed-in player's medal row opens the account. */
  .hud-theme-sticker .homeAccountStrip:not(.homeSignedIn) .homePilot:not(.homePilotAccount){display:none;}
  .hud-theme-sticker .homeAccountStrip.homeSignedIn #homeSignIn{display:none;}
  .hud-theme-sticker .homeAccountStrip:not(.homeSignedIn) #homeSignIn{grid-column:1/-1;}
  .hud-theme-sticker .homeAccountStrip:not(.homeSignedIn) #homeAccountHint{grid-column:1/-1;justify-self:center;text-align:center;}
}
.homeMoreList{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hud-space-2);}
.homeMoreList .btn{width:100%;}
.homeMoreModes{margin-top:var(--hud-space-4);}
.homeMoreModes .homeRoutes>.hud-label:first-child{display:none;}
/* Lobby screens outside the home (punk sticker plan, Phase 2): the nickname and matchmaking takeovers
   sit on the dotted wall, and the friends-room dog picker uses the same stickers as the home dialogs.
   html body.hud-theme-sticker outranks style.css's .hcard and hero-collection.css's .isOwned edge. */
html body.hud-theme-sticker :is(#nicknameFlow,#matchFlow){background:var(--hud-sticker-dots),var(--hud-sticker-wall);}
html body.hud-theme-sticker #nicknameForm h2{font-family:var(--hud-font-display);letter-spacing:.03em;color:var(--hud-text);-webkit-text-stroke:4px var(--hud-sticker-keyline);paint-order:stroke fill;text-shadow:0 2px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker .nicknameEmblem{color:var(--hud-sticker-cool);text-shadow:0 3px 0 var(--hud-sticker-keyline);}
html body.hud-theme-sticker #nicknameForm :is(small,p){color:var(--hud-text-muted);}
html body.hud-theme-sticker #nicknameForm label{color:var(--hud-sticker-cool);}
html body.hud-theme-sticker :is(#nicknameInput,#heroSearch){background:var(--hud-sticker-wall);color:var(--hud-text);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:inset 0 3px 0 #0006;}
html body.hud-theme-sticker #heroDetail{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
html body.hud-theme-sticker .chip{background:var(--hud-sticker-raised);color:var(--hud-text);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
html body.hud-theme-sticker .chip.on{background:var(--hud-sticker-cool);color:var(--hud-sticker-ink);border-color:var(--hud-sticker-keyline);}
html body.hud-theme-sticker .hcard{background:var(--hud-sticker-raised);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
html body.hud-theme-sticker .hcard:hover{background:var(--hud-sticker-raised-hover);border-color:var(--hud-sticker-keyline);}
html body.hud-theme-sticker .hcard.sel{background:var(--hud-sticker-raised);border-color:var(--hud-sticker-keyline);outline:var(--hud-sticker-keyline-width) solid var(--hud-sticker-cool);outline-offset:0;}
html body.hud-theme-sticker .hcard.sel .nm{color:var(--hud-text);}
html body.hud-theme-sticker :is(.hcard,.heroCollectionCard).isOwned:not(.sel){border-color:var(--hud-sticker-keyline);}
html body.hud-theme-sticker .hdIcon{border-color:var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);}
/* MORE (phone home): every entry shows its klein icon beside the label (punk sticker plan, Phase 5). */
.hud-theme-sticker [data-nav=inventory]{--nav-icon:url('../assets/ui/nav/inventory.png');}
.hud-theme-sticker [data-nav=stats]{--nav-icon:url('../assets/ui/nav/stats.png');}
.hud-theme-sticker [data-nav=community]{--nav-icon:url('../assets/ui/nav/community.png');}
.hud-theme-sticker [data-nav=options]{--nav-icon:url('../assets/ui/nav/options.png');}
.hud-theme-sticker [data-nav=account]{--nav-icon:url('../assets/ui/nav/account.png');}
.hud-theme-sticker .homeMoreList>.btn[data-nav]{display:flex;align-items:center;justify-content:flex-start;gap:var(--hud-space-2);text-align:left;}
.hud-theme-sticker .homeMoreList>.btn[data-nav]::before{content:'';flex:none;width:28px;height:28px;background:var(--nav-icon) center/contain no-repeat;}
/* Phase 8: the skill buttons under the selected dog lose the old gold launch-rim border. */
.homeShell #menuPane.hud-theme-sticker .homeSkill{border-color:var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);background:var(--hud-sticker-wall);}
/* #lobbyTitle's --hud-title-shadow outranks .hud-sticker-type; the sticker title keeps a hard keyline drop. */
.hud-theme-sticker .homeShell #lobbyTitle{text-shadow:0 3px 0 var(--hud-sticker-keyline);}
/* The dotted wall is the lobby's own background whenever the sticker theme is on, not only with the
   menu showing: no CRT scanlines or purple glow behind the hero picker and the other lobby panes. */
html body.hud-theme-sticker #lobby{background:var(--hud-sticker-dots),var(--hud-sticker-wall);}
/* Desktop account dropdown: a sticker panel. */
@media(min-width:1280px) and (min-height:600px){
  html body.hud-theme-sticker #lobbyHead .homePilotBody{background:var(--hud-sticker-fill);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-lift-far);}
}
/* Language picker (i18n.css), on the home and in Game Options: the sticker wall and keyline. */
html body.hud-theme-sticker #languageControl{background:var(--hud-sticker-wall);border-color:var(--hud-sticker-keyline);color:var(--hud-text);}
html body.hud-theme-sticker #languageOption{background:var(--hud-sticker-raised);border-color:var(--hud-sticker-keyline);color:var(--hud-text);}
html body.hud-theme-sticker #hudOptionsDialog #languageControl{background:none;border-top-color:var(--hud-sticker-keyline);}
/* Inner cards of the friends, community, dog statistics and lore dialogs: keylined wells like the
   other home dialogs' cards. */
html body.hud-theme-sticker :is(.homeFriendCode,.homeFriend,.communityPost,.communityReply,.communityThread){background:var(--hud-sticker-raised);border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);box-shadow:var(--hud-sticker-drop);}
html body.hud-theme-sticker .homeFriend.online{border-color:var(--hud-sticker-cool);}
html body.hud-theme-sticker .homeFriendCodeValue{background:var(--hud-sticker-wall);border-color:var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);}
html body.hud-theme-sticker .heroStatsControls>*{background-color:var(--hud-sticker-wall);border-color:var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);}
html body.hud-theme-sticker #loreScroll .loreArt{border:var(--hud-sticker-keyline-width) solid var(--hud-sticker-keyline);border-radius:var(--hud-sticker-radius);}
/* LEADERBOARD (js/leaderboard.js): a shared .hud-data-table in a keyboard-scrollable region; the
   caller's own row is tr[aria-current="true"], which the shared table already raises. */
.hud-theme-sticker [data-nav=leaderboard]{--nav-icon:url('../assets/ui/nav/scores.png');}
.leaderboardPanel{width:min(640px,100%);}
.leaderboardScroll{max-height:min(56vh,440px);}
.leaderboardTable{width:100%;}
.leaderboardTable :is(th,td):is(:first-child,:nth-child(2)){text-align:left;}
.leaderboardTable :is(th,td){padding:var(--hud-space-2);}
.leaderboardTable tr[aria-current="true"] td{color:var(--hud-accent);}
.leaderboardPlayer{display:flex;align-items:center;gap:var(--hud-space-2);min-width:0;}
.leaderboardMedal{display:grid;place-items:center;flex:none;width:32px;height:32px;}
.leaderboardMedal .medalSprite{width:32px;height:32px;}
.leaderboardIdentity{min-width:0;}
.leaderboardName{overflow-wrap:anywhere;}
.leaderboardIdentity small{display:block;color:var(--hud-text-muted);font:var(--hud-text-xs)/var(--hud-leading) var(--hud-font-label);letter-spacing:var(--hud-tracking-label);}
.leaderboardMe{font-weight:var(--hud-weight-strong);}
@media(max-width:600px){.leaderboardTable :is(th,td){padding:var(--hud-space-1);}.leaderboardMedal,.leaderboardMedal .medalSprite{width:24px;height:24px;}}