.research-panel{font-family:'Microsoft YaHei UI','Microsoft YaHei',sans-serif}
.research-heading{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid #294258;margin-bottom:12px}
.research-heading h2{font-size:23px;letter-spacing:.1em;margin:0;font-weight:600}
.research-heading>div{font-size:11px;color:#819fb7}
.research-heading strong{font:24px 'Bahnschrift','Segoe UI',sans-serif;color:#c4edff;margin-left:12px}
.research-heroes{display:flex;gap:10px;margin-bottom:16px}
.research-heroes button{width:124px;height:44px;padding:0 10px .42em;border:0!important;background:transparent url('assets/menu/button.png') center/100% 100% no-repeat!important;color:#8daabe;font:12px 'Microsoft YaHei',sans-serif;filter:saturate(.5) brightness(.8);box-shadow:none!important}
.research-heroes button[aria-pressed=true],.research-heroes button:hover{filter:none;color:#e1f4ff}
.research-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid #233c50}
.research-summary h3{margin:0;color:#dcefff;font-size:20px;font-weight:600}
.research-summary p{margin:6px 0 0;font-size:10px;color:#668ba6}
.research-summary dl{display:grid;grid-template-columns:repeat(4,minmax(70px,1fr));gap:20px;margin:0}
.research-summary dt{font-size:10px;color:#67869e}
.research-summary dd{font:18px 'Bahnschrift','Microsoft YaHei',sans-serif;color:#cde4f4;margin:6px 0 0}
.research-layout{display:grid;grid-template-columns:minmax(0,1fr) 244px;gap:24px}
.research-forest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.research-branch h4{font-size:12px;color:#8fbcd6;font-weight:500;text-align:center;margin:0 0 12px;letter-spacing:.1em}
.research-branch ol{margin:0;padding:0;list-style:none}
.research-branch li{position:relative;margin-top:20px}
.research-branch li:first-child{margin-top:0}
.research-branch li+li::before{content:'';position:absolute;left:50%;top:-20px;width:1px;height:20px;background:#487d9a}
.research-branch li.research-locked::before{background:#263d4f}
.research-branch button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;width:100%;min-height:72px;padding:9px 8px;border:1px solid #38586e!important;border-radius:0;background:linear-gradient(145deg,#122b3d,#081622)!important;box-shadow:inset 0 0 0 2px #132536!important;color:#bed8e9;font-family:inherit}
.research-branch button>span{font-size:13px;font-weight:500}
.research-branch button>small{font-size:10px;color:#7997ae}
.research-branch button i{display:flex;gap:4px}
.research-branch button i b{width:16px;height:2px;background:#294154}
.research-branch button i b.filled{background:#75cced}
.research-branch .research-locked button{background:#081420!important;border-color:#243a4b!important;color:#667f94}
.research-branch .research-complete button{border-color:#4e879f!important}
.research-branch button[aria-pressed=true]{border-color:#79ceef!important;box-shadow:inset 0 0 0 2px #24485e!important;color:#e1f5ff}
.research-branch button:hover{border-color:#79a7c1!important}
.research-panel button:focus-visible{outline:2px solid #b5e7ff;outline-offset:-4px}
.research-detail{border-left:1px solid #233c50;padding-left:24px;min-width:0}
.research-detail .research-level{color:#679bbd;font:12px 'Bahnschrift',sans-serif;margin:0 0 8px}
.research-detail h3{font-size:21px;color:#dcefff;font-weight:600;margin:0 0 14px}
.research-detail>p{font-size:12px;line-height:1.8;color:#a3bdcf}
.research-detail dl{margin:16px 0;padding:14px 0;border-block:1px solid #233c50;display:grid;gap:14px}
.research-detail dt{font-size:10px;color:#6488a3}
.research-detail dd{font-size:12px;color:#d5eafa;margin:6px 0 0}
.research-detail .research-condition{font-size:11px;color:#85bddb}
.research-detail .research-next{font-size:11px;color:#b3d7ea;margin:10px 0}
.research-detail .research-scope{font-size:10px;color:#66869f}
.research-status{min-height:16px;font-size:11px;color:#9bd6ea;margin:10px 0 0}
#overlay.menu-subpage .menu-footer #research-upgrade:not(:disabled){filter:none;color:#f0f9ff!important}
#overlay.menu-subpage .menu-footer #research-upgrade{grid-column:3}
#overlay.menu-subpage .menu-footer #research-upgrade:disabled{opacity:.4;cursor:not-allowed}
.permanent-research{padding:16px 0;border-block:1px solid #294258;margin:16px 0}
.permanent-research h3{font-size:14px;color:#9acde8}.permanent-research p{font-size:12px;line-height:1.9;color:#9bb0c1}
@media(max-width:900px){
 .research-layout{grid-template-columns:minmax(0,1fr) 190px;gap:16px}
 .research-detail{padding-left:16px}.research-forest{gap:10px}
 .research-summary dl{gap:10px;grid-template-columns:repeat(4,minmax(54px,1fr))}
}
@media(max-width:640px){
 .research-heroes{gap:4px}.research-heroes button{width:25%;font-size:11px}
 .research-summary{display:block}.research-summary dl{margin-top:14px}
 .research-summary dd{font-size:15px}.research-heading h2{font-size:21px}
 .research-layout{grid-template-columns:1fr}.research-branch button>span{font-size:11px}
 .research-branch button>small{font-size:9px}.research-branch h4{font-size:11px;letter-spacing:0}
 .research-detail{border-left:0;border-top:1px solid #233c50;padding:16px 0 0}
}
/* Tactical archive shares the restrained metal-and-blue menu styling. */
.codex-panel{font-family:'Microsoft YaHei UI','Microsoft YaHei',sans-serif}
.codex-panel .archive-heading{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #294258;padding-bottom:14px;margin-bottom:16px}
.codex-panel .archive-heading h2{margin:0;font-size:23px;letter-spacing:.1em;font-weight:600}
.codex-panel .archive-heading>span{font-size:11px;color:#668da9}
.codex-panel .archive-tabs{display:flex;gap:12px;margin-bottom:20px}
.codex-panel .archive-tabs button{width:124px;height:44px;padding:0 10px .42em;border:0!important;background:transparent url('assets/menu/button.png') center/100% 100% no-repeat!important;color:#8daabe;font:12px 'Microsoft YaHei',sans-serif;letter-spacing:.06em;filter:saturate(.5) brightness(.8);box-shadow:none!important}
.codex-panel .archive-tabs button[aria-pressed=true],.codex-panel .archive-tabs button:hover{filter:none;color:#e1f4ff}
.codex-panel .archive-layout{display:grid;grid-template-columns:214px minmax(0,1fr);gap:30px;min-width:0}
.codex-panel .archive-list{display:flex;flex-direction:column;gap:4px;max-height:406px;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:#365970 #081522}
.codex-panel .archive-list button{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:10px 12px;text-align:left;background:transparent!important;border:1px solid transparent!important;border-radius:0;box-shadow:none!important;color:#9bb0c1;font:12px 'Microsoft YaHei',sans-serif}
.codex-panel .archive-list button small{font-size:10px;color:#628299;white-space:nowrap}
.codex-panel .archive-list button[aria-pressed=true]{background:#102b3d!important;border-color:#396783!important;color:#e0f2ff}
.codex-panel .archive-list button:hover{background:#0c2232!important;color:#e0f2ff}
.codex-panel :is(.archive-list,.archive-tabs) button:focus-visible{outline:2px solid #9cdfff;outline-offset:-3px}
.codex-panel .archive-detail{min-width:0;border-left:1px solid #233c50;padding-left:30px}
.codex-panel .archive-detail header{display:flex;gap:16px;align-items:center}
.codex-panel .archive-mark{display:grid;place-items:center;width:56px;height:56px;flex-shrink:0;color:#8ec6e6;border:1px solid #365970;background:linear-gradient(145deg,#15374e,#071420);font:24px 'Bahnschrift','Segoe UI',sans-serif}
.codex-panel .archive-kind{margin:0 0 5px;font-size:11px;color:#609bbf}
.codex-panel .archive-detail h3{margin:0;font-size:24px;font-weight:600;color:#dcefff}
.codex-panel .archive-description{margin:20px 0;font-size:13px;line-height:1.9;color:#b4c8d8}
.codex-panel .archive-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:16px 0;margin:0 0 22px;border-block:1px solid #233c50}
.codex-panel .archive-stats dt{font-size:11px;color:#67869e}
.codex-panel .archive-stats dd{margin:8px 0 0;font-size:16px;color:#cde4f4}
.codex-panel .archive-detail section{margin-top:18px}
.codex-panel .archive-detail h4{font-size:12px;font-weight:500;color:#82b7d6;margin:0 0 7px}
.codex-panel .archive-detail section p{font-size:12px;line-height:1.9;color:#9bb0c1;margin:0}
.codex-panel .archive-notice{font-size:11px;color:#7797af;margin:-8px 0 16px}
@media(max-width:700px){
 .codex-panel .archive-layout{grid-template-columns:1fr;gap:20px}
 .codex-panel .archive-tabs{gap:4px;justify-content:space-between;margin-bottom:14px}
 .codex-panel .archive-tabs button{width:100px;font-size:11px}
 .codex-panel .archive-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-height:148px;padding-right:4px}
 .codex-panel .archive-list button{padding:8px;display:block}
 .codex-panel .archive-list button small{display:block;margin-top:4px}
 .codex-panel .archive-detail{border-left:0;border-top:1px solid #233c50;padding:20px 0 0}
 .codex-panel .archive-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .codex-panel .archive-heading h2{font-size:21px}
}
/* Subpage chrome uses the home menu's original metal frame at a quieter scale. */
#overlay.menu-subpage .panel{
  height:min(680px,calc(100dvh - 40px));
  border-color:#426580;background:#05101af5;
  box-shadow:0 26px 80px #000b,inset 0 1px #93cefb30,inset 0 0 0 3px #102235;
}
#overlay.menu-subpage .menu-content{padding:24px}
#overlay.menu-subpage .menu-footer{
  flex-basis:68px;padding:12px 24px;border-top:1px solid #264158;background:#07131f;
}
#overlay.menu-subpage .menu-footer button,
#overlay.menu-subpage .deployment-panel #difficulty{
  border:0!important;box-shadow:none!important;border-radius:0!important;
  background:transparent url('assets/menu/button.png') center / 100% 100% no-repeat!important;
  color:#ceeaff!important;font-family:'Microsoft YaHei UI','Microsoft YaHei',sans-serif;
  font-size:12px;font-weight:500;letter-spacing:.06em;text-shadow:0 1px 4px #001321;
  padding:0 10px .42em;filter:saturate(.65) brightness(.85);transition:filter .15s ease;
}
#overlay.menu-subpage .menu-footer button:hover:not(:disabled){filter:saturate(.85) brightness(1.15)}
#overlay.menu-subpage .menu-footer #new{color:#f0f9ff!important;filter:none}
#overlay.menu-subpage .menu-footer #new:hover:not(:disabled){filter:brightness(1.18)}
#overlay.menu-subpage .deployment-panel #difficulty{
  appearance:none;padding:0 12px .38em;font-size:11px;letter-spacing:0;
  text-align:center;text-align-last:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='m1 1 3 3 3-3' fill='none' stroke='%239cbdd1' stroke-width='1.2'/%3E%3C/svg%3E"),url('assets/menu/button.png')!important;
  background-size:8px 5px,100% 100%!important;
  background-position:right 12px top 46%,center!important;
}
#overlay.menu-subpage #difficulty option{background:#0a1a28;color:#d6eafa}
#overlay.menu-subpage .menu-footer button:focus-visible{outline:2px solid #99dfff;outline-offset:-4px}
.deployment-panel{font-family:'Microsoft YaHei UI','Microsoft YaHei',sans-serif}
.deployment-panel :is(h2,h3,h4,p,dt,dd,strong,span){text-shadow:none}
.deployment-panel .deployment-heading{margin:0 0 16px;padding:0 0 14px;border-color:#294258}
.deployment-panel .deployment-heading h2{font-size:23px;line-height:1.35;font-weight:600;letter-spacing:.1em}
.deployment-panel #roster-position{font-size:11px;letter-spacing:.12em;color:#668da9}
.deployment-panel .hero-roster{gap:10px;padding:2px;width:100%}
.deployment-panel .hero-choice{
  position:relative;display:block;height:auto;width:100%;aspect-ratio:9/16;
  padding:0;overflow:hidden;border:1px solid #30485b!important;
  background:#06101d!important;box-shadow:inset 0 0 0 2px #132737;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.deployment-panel .hero-choice .unit-art{
  position:absolute;inset:3px;display:block;
  background-image:url('assets/heroes/selection-portraits.png');
  background-repeat:no-repeat;background-size:400% 100%;
  filter:brightness(.86) saturate(.85);transition:filter .2s ease;
}
.unit-art-0{background-position:0% 50%}.unit-art-1{background-position:33.333333% 50%}
.unit-art-2{background-position:66.666667% 50%}.unit-art-3{background-position:100% 50%}
.deployment-panel .hero-choice .unit-art-2{
  background-image:url('assets/heroes/selection-thor.png');
  background-size:contain;background-position:center;
}
.deployment-panel .hero-choice .unit-art-3{
  background-image:url('assets/heroes/selection-tank.png');
  background-size:contain;background-position:center;
}
.deployment-panel .hero-choice>strong{
  position:absolute;bottom:0;left:0;right:0;height:34px;margin:0;
  display:flex;align-items:center;justify-content:center;
  background:#071320ed;border-top:1px solid #2c415370;
  color:#bbcfdf;font-size:12px;font-weight:500;letter-spacing:.12em;
}
.deployment-panel .hero-choice:hover{border-color:#6c9fbd!important}
.deployment-panel .hero-choice[aria-pressed=true]{
  border-color:#60bde9!important;background:#06101d!important;
  box-shadow:0 0 0 1px #306986,inset 0 0 0 2px #4c9ac1;
}
.deployment-panel .hero-choice[aria-pressed=true] .unit-art{filter:brightness(1.08) saturate(1)}
.deployment-panel .hero-choice[aria-pressed=true]>strong{color:#e1f4ff;background:#0b2538f2;border-top-color:#36789d}
.deployment-panel .hero-choice:focus-visible{outline:2px solid #b5e7ff;outline-offset:-4px}
.deployment-panel .coming-choice{background:#102130!important}
.deployment-panel .coming-choice .future-art{
  position:absolute;left:10%;top:6%;width:80%;max-height:72%;filter:brightness(.17);opacity:.85;
}
.deployment-panel .coming-choice>strong{color:#6d899f;font-size:11px;letter-spacing:.06em}
.deployment-panel #hero-brief{
  display:grid;grid-template-columns:238px minmax(0,1fr);gap:24px;
  margin-top:20px;padding-top:18px;border-top:1px solid #233c50;min-height:0;
}
.deployment-panel .unit-overview{min-width:0;padding-right:20px;border-right:1px solid #233c50}
.deployment-panel .selected-unit-heading{display:block;margin:0}
.deployment-panel #hero-brief .selected-unit-heading h3{font-size:24px;line-height:1.35;letter-spacing:.03em;font-weight:600;margin:0;color:#dcefff}
.deployment-panel .selected-unit-heading p{margin:5px 0 0;color:#609bbf;font-size:11px;letter-spacing:.04em}
.deployment-panel .selected-unit-description{margin:12px 0 14px;font-size:12px;line-height:1.7;color:#8fa6b9}
.deployment-panel .deployment-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;margin:0}
.deployment-panel .deployment-stats div{display:flex;flex-direction:column;gap:5px}
.deployment-panel .deployment-stats dt{font-size:10px;letter-spacing:.05em;color:#67869e}
.deployment-panel .deployment-stats dd{font-family:'Bahnschrift','Segoe UI',sans-serif;font-size:22px;line-height:1;margin:0;color:#cde4f4;font-variant-numeric:tabular-nums}
.deployment-panel .deployment-stats dd small{font:10px 'Microsoft YaHei',sans-serif;color:#64859b}
.deployment-panel .unit-skill-bank{min-width:0}
.deployment-panel .deployment-abilities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px}
.deployment-panel .deployment-abilities article{
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:start;
  padding:0 0 12px;border:0;border-bottom:1px solid #20384b;background:none;
}
.deployment-panel .deployment-abilities article>img{width:34px;height:34px;margin-top:1px;opacity:.9}
.deployment-panel .deployment-abilities header{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.deployment-panel .deployment-abilities h4{font-size:14px;font-weight:500;line-height:1.45;color:#c5e1f4;margin:0}
.deployment-panel .deployment-abilities header span{flex-shrink:0;font:12px 'Bahnschrift','Segoe UI',sans-serif;color:#78a8c4;margin:0}
.deployment-panel .deployment-abilities header small{font:9px 'Microsoft YaHei',sans-serif;color:#587d96}
.deployment-panel .deployment-abilities p{margin:7px 0 0;font-size:12px;line-height:1.7;color:#9bb0c1}
.deployment-panel .deployment-evolution{display:flex;gap:12px;align-items:baseline;margin:12px 0 0;font-size:10px;line-height:1.7}
.deployment-panel .deployment-evolution b{color:#82b7d6;font-weight:500}
.deployment-panel .deployment-evolution span{color:#63839b}
.deployment-panel .coming-detail{grid-column:1/-1;min-height:215px;border:0;background:none}
.deployment-panel #hero-brief .coming-detail h3{font-size:20px;color:#89abc2;font-weight:500;letter-spacing:.2em}
.deployment-panel .coming-detail p{font-size:11px;color:#58758c}
@media(max-width:1000px){
 .deployment-panel #hero-brief{grid-template-columns:205px minmax(0,1fr);gap:18px}
 .deployment-panel .unit-overview{padding-right:16px}
 .deployment-panel .deployment-abilities{gap:12px 14px}
 .deployment-panel .deployment-abilities article{grid-template-columns:28px minmax(0,1fr);gap:8px}
 .deployment-panel .deployment-abilities article>img{width:28px;height:28px}
 .deployment-panel .deployment-abilities h4{font-size:12px}
 .deployment-panel .hero-choice>strong{font-size:11px;letter-spacing:.02em}
}
@media(max-width:900px){
 #overlay.menu-subpage .menu-footer{flex-basis:120px;grid-template-rows:44px 44px;gap:8px;padding:12px 20px}
 .deployment-panel #hero-brief{grid-template-columns:180px minmax(0,1fr);gap:16px}
 .deployment-panel .deployment-evolution{display:block}.deployment-panel .deployment-evolution span{display:block}
}
@media(max-width:640px){
 #overlay.menu-subpage .panel{height:calc(100dvh - 24px)}
 #overlay.menu-subpage .menu-content{padding:18px}
 #overlay.menu-subpage .menu-footer{padding-inline:18px}
 .deployment-panel .deployment-heading h2{font-size:21px}
 .deployment-panel .hero-roster{gap:8px}
 .deployment-panel .hero-choice>strong{height:26px;font-size:10px;letter-spacing:0}
 .deployment-panel .coming-choice>strong{font-size:10px}
 .deployment-panel #hero-brief{grid-template-columns:1fr;gap:18px;padding-top:16px;margin-top:16px}
 .deployment-panel .unit-overview{padding:0;border:0}
 .deployment-panel #hero-brief .selected-unit-heading h3{font-size:22px}
 .deployment-panel .selected-unit-description{margin:10px 0 12px}
 .deployment-panel .deployment-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .deployment-panel .deployment-stats dd{font-size:20px}
 .deployment-panel .deployment-abilities{grid-template-columns:1fr;gap:12px}
 .deployment-panel .deployment-abilities article{grid-template-columns:32px minmax(0,1fr);gap:10px}
 .deployment-panel .deployment-abilities article>img{width:32px;height:32px}
 .deployment-panel .deployment-abilities h4{font-size:13px}
 .deployment-panel .deployment-abilities p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
 .deployment-panel .hero-choice,.deployment-panel .hero-choice .unit-art,#overlay.menu-subpage .menu-footer button{transition:none}
}