/* Keep the illustrated village and make hero selection a compact strip. */
#lobby .lobby-content{max-width:1260px;gap:4%;padding-top:16px}
#lobby .play-panel{display:flex;flex-direction:column;padding:20px 22px}
#lobby .play-panel>.section-heading:first-child{order:0}
#lobby .roster{order:1}
#lobby .profile-form{order:2}
#lobby .ability-card{order:3}
#lobby .stats{order:4}
#lobby .mode-heading{order:5}
#lobby .modes{order:6;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#lobby .play-button{order:7}
#lobby .play-note{order:8}
#lobby .account-entry{order:9;border-top:1px solid #c7e8bd22;border-bottom:0;margin:14px 0 0;padding:10px 0 0}
#lobby .play-panel>.section-heading{margin-bottom:10px}
#lobby .roster{display:flex!important;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:2px 2px 8px;scrollbar-width:thin;scrollbar-color:#8aa998 transparent}
#lobby .hero-card{flex:0 0 78px;min-width:78px;scroll-snap-align:start;border-radius:10px}
#lobby .portrait{height:66px}
#lobby .hero-card b{font-size:11px;line-height:1.15;min-height:25px;margin:5px 3px 2px}
#lobby .hero-access{font-size:8px;margin:2px 0 5px}
#lobby .hero-card:hover{transform:translateY(-1px)}
#lobby .profile-form{margin:9px 0 12px}
#lobby .profile-form div{margin-top:5px}
#lobby .profile-form input{padding:9px 10px;min-height:40px}
#lobby .profile-form small{margin-top:4px;font-size:10px}
#lobby .account-entry{gap:5px 10px;margin-bottom:9px;padding:7px 0}
#lobby .account-entry>a:first-child{padding:6px 10px;font-size:12px}
#lobby .account-entry small{font-size:10px}
#lobby .ability-card{margin-top:8px;padding:10px 0;gap:10px}
#lobby .ability-symbol{width:40px;height:40px;border-radius:11px;font-size:28px}
#lobby .ability-card h3{font-size:21px;margin:1px 0}
#lobby .ability-card p{font-size:12px;line-height:1.35}
#lobby .stats{padding:12px 0;gap:15px}
#lobby .stats b{margin:3px 0 6px;font-size:15px}
#lobby .hero-stage{min-height:510px;align-self:start}
#lobby .stage-label{position:static;margin-top:24px}
#lobby .selected-art{height:300px;width:280px;margin-top:12px}
#lobby .hero-stage h1{font-size:clamp(38px,4vw,58px)}
#lobby .hero-caption h2{font-size:38px}
#lobby .mode{padding:10px 12px;gap:10px}
#lobby .mode div{min-width:0}
#lobby .mode b{font-size:13px}
#lobby .mode small{font-size:10px;line-height:1.35}
#lobby .play-button{margin-top:14px;padding:12px}
#lobby .play-note{margin-top:10px}

@media(max-width:720px){
  #lobby .topbar{height:64px;padding:0 14px;gap:9px}
  #lobby .lobby-content{padding:8px 12px 12px;gap:10px}
  #lobby .hero-stage{min-height:0;grid-template-columns:80px minmax(0,1fr);gap:12px;align-items:center;padding:0 5px}
  #lobby .hero-stage>.eyebrow,#lobby .hero-stage h1{display:none}
  #lobby .selected-art{grid-column:1;grid-row:1;width:68px;height:72px;margin:0;max-width:100%}
  #lobby .selected-art:before{height:12px;bottom:0;box-shadow:0 0 24px #e8bb3644}
  #lobby .hero-caption{grid-column:2;grid-row:1;text-align:left;margin:0}
  #lobby .hero-caption>span{font-size:9px;letter-spacing:1px}
  #lobby .hero-caption h2{font-size:29px;margin:4px 0}
  #lobby .hero-caption p{font-size:11px;line-height:1.35;margin:4px 0;max-width:270px}
  #lobby .play-panel{display:flex;flex-direction:column;padding:13px;border-radius:15px}
  #lobby .play-panel>.section-heading:first-child{order:0;margin-bottom:7px;gap:6px}
  #lobby .section-heading h2{font-size:22px}
  #lobby .section-heading>span{font-size:8px;letter-spacing:.4px}
  #lobby .play-panel>.section-heading:first-child>span{text-align:right}
  #lobby .play-panel>.section-heading:first-child>span:after{content:'Swipe for more heroes →';display:block;margin-top:2px;color:#c5e6d2;font-size:9px;font-weight:600;letter-spacing:0}
  #lobby .roster{order:1;gap:6px;margin:0 -2px;padding-bottom:7px;scrollbar-width:none}
  #lobby .roster::-webkit-scrollbar{display:none}
  #lobby .hero-card{flex-basis:76px;min-width:76px}
  #lobby .portrait{height:50px}
  #lobby .hero-card b{font-size:10px;min-height:23px;margin:4px 2px 1px}
  #lobby .hero-access{font-size:7px;margin:1px 0 4px;white-space:nowrap}
  #lobby .profile-form{order:2;margin:5px 0 7px}
  #lobby .profile-form label{display:block;font-size:9px;line-height:12px;letter-spacing:.6px}
  #lobby .profile-form div{margin-top:3px;gap:6px}
  #lobby .profile-form input{padding:7px 10px;min-height:40px;font-size:16px;border-radius:9px}
  #lobby .profile-form button{min-height:40px;padding:0 13px;border-radius:9px;font-size:11px}
  #lobby .profile-form small{font-size:9px;line-height:1.35;margin-top:3px}
  #lobby .ability-card{order:3;margin:0;padding:7px 0;gap:9px}
  #lobby .ability-card small{display:block;font-size:9px;line-height:12px;letter-spacing:.8px}
  #lobby .ability-card h3{font-size:19px;margin:1px 0}
  #lobby .ability-card p{font-size:10px;margin:2px 0;line-height:1.35}
  #lobby .ability-symbol{width:34px;height:34px;font-size:24px}
  #lobby .stats{order:4;padding:6px 0;gap:12px}
  #lobby .stats span{font-size:8px}
  #lobby .stats b{font-size:13px;margin:2px 0 4px}
  #lobby .stats i{height:3px}
  #lobby .play-panel>.mode-heading{order:5;margin:5px 0 7px}
  #lobby .modes{order:6;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  #lobby .mode{min-height:57px;padding:8px;gap:6px;border-radius:9px}
  #lobby .mode-icon{font-size:20px;width:20px;flex-shrink:0}
  #lobby .mode div{min-width:0}
  #lobby .mode b{font-size:11px;line-height:1.25}
  #lobby .mode small{font-size:9px;line-height:1.25;margin-top:2px}
  #lobby .radio-dot{width:11px;height:11px;flex-shrink:0}
  #lobby .active .radio-dot{border-width:3px}
  #lobby .play-button{order:7;margin-top:10px;padding:10px;border-radius:10px}
  #lobby .play-button span{font-size:29px}
  #lobby .play-button small{margin-top:4px;font-size:8px}
  #lobby .play-note{order:8;margin:7px 0 0;font-size:9px}
  #lobby .account-entry{order:9;margin:9px 0 0;padding:8px 0 0;border-top:1px solid #c7e8bd22;border-bottom:0}
  #lobby .account-entry>a:first-child{min-height:36px;padding:8px 10px;font-size:11px}
  #lobby .account-entry small{font-size:9px;line-height:1.4}
  #lobby .account-entry .signout-link{align-self:center;font-size:10px}
  #lobby .village-entry{margin:4px 12px}
  #lobby .village-entry .explore-village{max-width:100%;padding:8px 12px;border-radius:9px;font-size:11px}
  #lobby .explore-village small{font-size:9px;margin-top:2px}
  #lobby .entry-welcome{margin:0 12px 5px}
  #lobby .entry-welcome b{font-size:21px}
  #lobby .entry-welcome span{font-size:10px;margin-top:2px}
  #lobby footer{padding:12px;font-size:9px}
}

@media(max-width:360px){
  #lobby .topbar{padding:0 10px;gap:7px}
  #lobby .brand{font-size:23px;gap:8px}
  #lobby .brand small{font-size:10px;letter-spacing:2px}
  #lobby .lobby-content{padding-left:8px;padding-right:8px}
  #lobby .play-panel{padding:11px}
  #lobby .mode{padding:7px 6px;gap:4px}
}