/* Menu artwork is shared by every button; labels stay live and accessible. */
body[data-screen]:not([data-screen="game"]) #game > :not(#overlay){visibility:hidden;pointer-events:none}
#overlay.home-menu,#overlay.menu-subpage{
  background:#030a12 url('assets/menu/background.png') center center / cover no-repeat;
  backdrop-filter:none;padding:0;isolation:isolate;
}
#overlay.home-menu{display:flex;align-items:flex-start;justify-content:flex-start;overflow:auto}
#overlay.home-menu #panel{
  width:clamp(340px,30.5vw,580px);max-width:none;max-height:none;
  margin:12vh 0 8vh 4.5vw;padding:0;overflow:visible;
  background:none;border:0;box-shadow:none;text-align:center;
}
.home-title h1{margin:0;letter-spacing:0;line-height:0}
.home-title img{display:block;width:100%;height:auto}
.home-title p{margin:18px 0 0;padding-left:.65em;font-size:clamp(16px,1.25vw,24px);font-weight:500;line-height:1.5;letter-spacing:.65em;color:#b6daf0;text-shadow:0 2px 8px #06101f}
.home-actions{display:grid;gap:10px;margin-top:70px;width:100%}
#panel .menu-button{
  width:100%;height:auto;aspect-ratio:3.75;min-height:0;display:grid;place-items:center;
  /* Compensate for the frame image's lower transparent margin and CJK baseline. */
  margin:0;padding:0 0 .45em .16em;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  background:transparent url('assets/menu/button.png') center / 100% 100% no-repeat!important;
  color:#e6f4ff!important;font-family:'Microsoft YaHei',sans-serif;
  font-size:clamp(25px,2.05vw,38px);font-weight:600;letter-spacing:.16em;
  text-shadow:0 0 12px #338aff,0 2px 3px #00102d;
  transition:filter .16s ease;touch-action:manipulation;
}
#panel .menu-button:hover{filter:brightness(1.28)}
#panel .menu-button:active{filter:brightness(.9)}
#panel .menu-button:focus-visible{outline:2px solid #b2ecff;outline-offset:-5px;filter:brightness(1.25)}
#overlay.menu-subpage{justify-content:center;align-items:center;padding:20px}
#overlay.menu-subpage:before{content:'';position:absolute;inset:0;z-index:-1;background:#020913a6}
#overlay.menu-subpage .panel{background:#08131feb;border:1px solid #638baf;box-shadow:0 18px 70px #0009;width:min(1080px,calc(100vw - 40px));max-width:none;height:min(780px,calc(100dvh - 40px));max-height:none;padding:0;overflow:hidden;display:flex;flex-direction:column;scrollbar-color:#416780 #08131f}
#overlay.menu-subpage .menu-content{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:28px}
#overlay.menu-subpage .menu-footer{flex:0 0 84px;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;border-top:1px solid #324d65;background:#08131f}
.menu-navigation{display:flex;gap:8px;align-items:center;flex-shrink:0}
.menu-footer-actions{display:grid;grid-template-columns:repeat(3,124px);gap:8px;align-items:center}
#overlay.menu-subpage .menu-footer button{width:124px;height:44px;min-height:44px;margin:0;padding:0 10px;font-size:13px;letter-spacing:.08em;white-space:nowrap}
#overlay.menu-subpage .eyebrow{color:#a7d6f3}
#overlay.menu-subpage .panel h2{color:#e4f3ff}
#overlay.menu-subpage .panel-actions{align-items:center}
.codex-panel{width:min(980px,94vw);max-width:980px}
.codex-layout{display:grid;grid-template-columns:148px minmax(0,1fr);gap:28px;margin:24px 0}
.codex-roster{display:flex;flex-direction:column;gap:10px}
.codex-roster button{padding:8px;display:flex;align-items:center;gap:8px;font-size:13px}
.codex-roster button img{width:40px;height:46px;object-fit:contain}
.codex-roster button[aria-pressed=true]{border-color:#7bceff!important;color:#fff!important}
.codex-unit{min-width:0}
.codex-unit>header{display:flex;align-items:center;gap:20px}
.codex-portrait{width:132px;height:150px;object-fit:contain}
.codex-unit header h3{font-size:25px;margin:6px 0;color:#e6f1fc}
.codex-unit p{font-size:12px;line-height:1.8;color:#b0c4d5}
.codex-unit .codex-faction{font-size:11px;letter-spacing:.2em;color:#86b5d6}
.codex-stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid #324d65;padding:18px 0;gap:10px}
.codex-stats dt{font-size:11px;color:#91abc1}
.codex-stats dd{margin:8px 0 0;font-size:22px;color:#d8efff}
.codex-unit .hero-ability-details{margin-bottom:0}
@media(min-aspect-ratio:2/1){
  #overlay.home-menu #panel{width:min(29vw,65vh);margin-top:6vh}
  .home-actions{margin-top:5vh;gap:4px}
  .home-title p{margin-top:10px}
}
@media(max-width:1000px){
  #overlay.home-menu #panel{width:40vw;min-width:310px;margin-left:4vw}
  .home-actions{margin-top:55px}
  #overlay.menu-subpage .menu-content{padding:20px}
}
@media(max-width:900px){
  #overlay.menu-subpage .menu-footer{flex-basis:144px;display:grid;grid-template-columns:1fr;grid-template-rows:44px 44px;align-content:center;gap:12px;padding:14px 20px}
  .menu-footer-actions{grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .menu-navigation{grid-row:2}
  #overlay.menu-subpage .menu-footer-actions button{width:100%}
}
@media(max-width:640px){
  #overlay.home-menu{background-position:64% center;align-items:center}
  #overlay.home-menu:before{content:'';position:absolute;inset:0;background:#020a1470;z-index:-1}
  #overlay.home-menu #panel{width:calc(100% - 40px);min-width:0;max-width:410px;margin:32px auto}
  .home-title p{font-size:17px;margin-top:18px}
  .home-actions{margin-top:56px;gap:12px}
  #panel .menu-button{font-size:26px}
  #overlay.menu-subpage{padding:12px}
  #overlay.menu-subpage .panel{width:100%;height:calc(100dvh - 24px);max-height:none;padding:0}
  #overlay.menu-subpage .menu-content{padding:18px}
  #overlay.menu-subpage .menu-footer{padding-inline:18px}
  .codex-layout{grid-template-columns:1fr;gap:18px;margin:18px 0}
  .codex-roster{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .codex-roster button{justify-content:center;padding:6px;font-size:12px}
  .codex-roster button img{width:30px;height:34px}
  .codex-unit>header{gap:10px}.codex-portrait{width:90px;height:128px}
  .codex-unit header h3{font-size:22px}.codex-unit p{font-size:11px}
  .codex-stats{gap:6px}.codex-stats dd{font-size:18px}
}
@media(prefers-reduced-motion:reduce){#panel .menu-button{transition:none}}

/* Eight compact roster cards share one detail area and one configuration grid. */
.deployment-panel .deployment-heading{margin:0 0 18px;padding:0 0 15px;display:flex;align-items:center;justify-content:space-between}
.deployment-panel .deployment-heading h2{margin:0;font-size:26px}
.deployment-panel .hero-roster{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
.deployment-panel .hero-choice{height:138px;padding:8px 4px 12px;text-align:center;border:1px solid #47627a!important;background:#132333!important}
.deployment-panel .hero-choice img{width:100%;height:90px;object-fit:contain;background:none}
.deployment-panel .hero-choice strong{margin:9px 0 0;font-size:13px;line-height:1.3;font-weight:500;color:#d9e8f5}
.deployment-panel .hero-choice[aria-pressed=true]{border-color:#90d5ff!important;box-shadow:inset 0 0 0 1px #90d5ff;background:#203b50!important}
.deployment-panel .coming-choice{background:#192c3c!important}
.deployment-panel .coming-choice img{filter:brightness(0);opacity:.9}
.deployment-panel .coming-choice strong{color:#90a8bd}
.deployment-panel #hero-brief{margin:20px 0 0;min-height:270px}
.selected-unit-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.deployment-panel #hero-brief h3{margin:0;font-size:21px;color:#e6f2fd}
.selected-unit-heading p{margin:7px 0 0;font-size:11px;color:#88b6d5}
.deployment-stats{display:grid;grid-template-columns:repeat(4,minmax(64px,1fr));gap:18px;margin:0}
.deployment-stats dt{font-size:10px;color:#8da8c0}
.deployment-stats dd{margin:6px 0 0;font-size:19px;color:#dceffe}
.selected-unit-description{font-size:12px;line-height:1.6;margin:14px 0;color:#aabfd1}
.deployment-abilities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.deployment-abilities article{padding:12px;border:1px solid #304b61;background:#0d1c2a}
.deployment-abilities header{display:flex;align-items:center;gap:8px}
.deployment-abilities img{width:32px;height:32px;object-fit:contain;flex-shrink:0}
.deployment-abilities h4{margin:0;font-size:12px;font-weight:500;color:#d7eafb}
.deployment-abilities header span{display:block;margin-top:5px;font-size:10px;color:#84a3bc}
.deployment-abilities p{margin:10px 0 0;font-size:11px;line-height:1.65;color:#aebfd0}
.deployment-evolution{display:flex;gap:12px;align-items:baseline;margin:12px 0 0;font-size:11px;line-height:1.6}
.deployment-evolution b{color:#d9c78b;font-weight:500;white-space:nowrap}.deployment-evolution span{color:#9fb3c7}
.coming-detail{min-height:270px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid #304b61;background:#0d1c2a}
.coming-detail p{font-size:12px;color:#90a8bd;margin:14px 0 0}
.deployment-config{border-top:1px solid #324d65;padding-top:14px;margin-top:16px}
.deployment-config>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.deployment-panel .deployment-config h3{margin:0;font-size:12px;color:#bcd5e9;font-weight:500}
.deployment-config>header span{font-size:11px;color:#8ba5bd}.deployment-config>header b{color:#d4c388;margin-left:8px}
.deployment-panel .deployment-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;border:0;align-items:start}
.deployment-panel .deployment-options label{display:grid;gap:8px;font-size:11px;color:#9cb5c9;min-width:0}
.deployment-panel .deployment-options select{width:100%;height:38px;margin:0;padding:0 10px;font-size:12px;border-color:#49667f;color:#d4e4f1}
.deployment-panel .deployment-options select:disabled{opacity:.5}
.deployment-panel .panel-actions:empty{display:none}
@media(max-width:900px){
 .deployment-panel .hero-roster{grid-template-columns:repeat(4,minmax(0,1fr))}
 .deployment-panel .hero-choice{height:124px}.deployment-panel .hero-choice img{height:76px}
 .deployment-abilities{grid-template-columns:repeat(2,minmax(0,1fr))}
 .selected-unit-heading{align-items:flex-start}.deployment-stats{gap:10px;grid-template-columns:repeat(4,minmax(48px,1fr))}
}
@media(max-width:640px){
 .deployment-panel .deployment-heading h2{font-size:22px}
 .deployment-panel .hero-roster{gap:7px}.deployment-panel .hero-choice{height:103px;padding:5px 2px 8px}
 .deployment-panel .hero-choice img{height:65px}.deployment-panel .hero-choice strong{font-size:11px;margin-top:8px}
 .selected-unit-heading{display:block}.deployment-stats{margin-top:16px;gap:10px}.deployment-stats dd{font-size:18px}
 .deployment-panel #hero-brief h3{font-size:20px}.deployment-abilities{gap:8px}.deployment-abilities article{padding:10px}
 .deployment-abilities header{gap:6px}.deployment-abilities img{width:26px;height:26px}.deployment-abilities h4{font-size:11px}
 .deployment-evolution{display:block}.deployment-evolution span{display:block;margin-top:5px}
 .deployment-panel .deployment-options{grid-template-columns:1fr;gap:12px}
}

/* All eight portrait cards fit the available width without horizontal scrolling. */
#roster-position{font:13px Consolas,monospace;color:#88acc8;letter-spacing:.15em}
.deployment-panel .hero-roster{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;width:100%;padding:3px}
.deployment-panel .hero-choice{height:auto;width:100%;min-width:0;min-height:0;aspect-ratio:9/16;display:grid;grid-template-rows:minmax(0,1fr) 26px;align-items:center;justify-items:center;padding:10px 7px}
.deployment-panel .hero-choice img{width:100%;height:100%;min-height:0;object-fit:contain}
.deployment-panel .hero-choice strong{font-size:14px;margin:8px 0 0}
.deployment-panel .coming-choice{background:#1a2c3b!important}
.deployment-panel .future-art{display:block;width:100%;max-height:100%;aspect-ratio:var(--crop-ratio);background-image:url('assets/heroes/future-roster.png');background-repeat:no-repeat;background-size:var(--crop-size) 100%;background-position:var(--crop-position) center;filter:brightness(.2)}
.future-art-0{--crop-ratio:520/836;--crop-size:361.731%;--crop-position:0%}
.future-art-1{--crop-ratio:397/836;--crop-size:473.804%;--crop-position:35.040%}
.future-art-2{--crop-ratio:382/836;--crop-size:492.408%;--crop-position:63.442%}
.future-art-3{--crop-ratio:551/836;--crop-size:341.379%;--crop-position:100%}
.deployment-panel #hero-brief{min-height:0;margin-top:22px}
.deployment-panel .coming-detail{min-height:220px}
#overlay.menu-subpage .deployment-panel .menu-footer-actions{grid-template-columns:124px 104px 124px}
#overlay.menu-subpage .deployment-panel #difficulty{width:104px;height:44px;min-height:44px;padding:0 8px;margin:0;font:13px 'Microsoft YaHei',sans-serif;color:#cee0e8;background:#172630;border:1px solid #667982;border-radius:1px}
#difficulty:disabled{opacity:.45}
@media(max-width:900px){
 .deployment-panel .hero-choice strong{font-size:11px}
 #overlay.menu-subpage .deployment-panel .menu-footer-actions{grid-template-columns:minmax(0,1fr) 92px minmax(0,1fr)}
 #overlay.menu-subpage .deployment-panel #difficulty{width:92px}
}
@media(max-width:640px){
 .deployment-panel .hero-roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .deployment-panel .hero-choice{padding:6px 3px;grid-template-rows:minmax(0,1fr) 22px}
 .deployment-panel .hero-choice strong{font-size:11px}
}