/* Character introduction: staged painted artwork, not a combat sprite thumbnail. */
.showcase-column{min-width:0}.art-review-link{font:12px 'Malgun Gothic',sans-serif;text-decoration:none;padding:8px}.commander-showcase{position:relative;isolation:isolate;overflow:hidden;height:430px;border:1px solid #c4a97180;background:radial-gradient(ellipse at 72% 40%,#716e5660,transparent 60%),linear-gradient(120deg,#142027,#334443);margin-bottom:18px;border-radius:5px}.commander-showcase:after{content:'';position:absolute;inset:10px;border:1px solid #d1b78342;pointer-events:none;z-index:3}.cutscene-background{position:absolute;width:100%;height:100%;object-fit:cover;object-position:65% center;z-index:-2;transform:scale(1.025)}.showcase-shade{position:absolute;inset:0;background:linear-gradient(90deg,#101b23fa 0,#101b23b8 29%,#101b2340 52%,transparent 75%),linear-gradient(0deg,#101b23b3,transparent 30%);z-index:0}.showcase-figure{position:absolute;right:-3%;top:-5%;width:64%;height:114%;z-index:-1;display:flex;justify-content:center}.showcase-figure>img{height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 25px #0006)}.showcase-figure>.portrait{width:100%;max-width:none;height:100%;object-fit:contain}.showcase-copy{position:relative;width:49%;padding:52px 30px;color:#f2e9d6;z-index:1;pointer-events:none}.showcase-copy>small{font:9px sans-serif;letter-spacing:3px;color:var(--accent)}.commander-title{font-size:13px;letter-spacing:2px;margin:25px 0 10px;color:#cec3a8}.showcase-copy h2{font-size:clamp(26px,3.5vw,49px);letter-spacing:-2px;line-height:1.2;margin:0 0 17px;text-shadow:0 3px 18px #061017}.showcase-rule{width:65px;height:1px;background:var(--accent);display:block;margin-bottom:18px}.showcase-copy>p:not(.commander-title){font:12px/1.8 'Malgun Gothic',sans-serif;max-width:210px;color:#bccbc8}.showcase-ultimate{display:flex;flex-direction:column;gap:7px;margin-top:24px}.showcase-ultimate small{font:8px sans-serif;letter-spacing:3px;color:var(--accent)}.showcase-ultimate b{font-weight:400;font-size:20px}.showcase-ultimate span{font:10px sans-serif;color:#c2c5b4}.showcase-ornament{position:absolute;top:22px;left:20px;font:360px/1 Georgia,serif;color:#bda56b05;z-index:0;pointer-events:none}.showcase-controls{position:absolute;bottom:18px;right:23px;left:30px;display:flex;justify-content:space-between;align-items:center;z-index:4;font:9px sans-serif;color:#bfcabca8}.showcase-controls button{font-size:10px;padding:6px 10px;background:#101b23ad;border-color:#d2b98155}.commander-showcase.reveal .cutscene-background{animation:scene-drift 1.4s ease-out both}.commander-showcase.reveal .showcase-figure{animation:commander-enter .75s cubic-bezier(.2,.8,.2,1) both}.commander-showcase.reveal .showcase-copy{animation:name-enter .7s .1s both}.commander-showcase.reveal:before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 20%,#e5d1a530 45%,transparent 70%);z-index:2;pointer-events:none;animation:light-sweep 1s both}
@keyframes scene-drift{from{transform:scale(1.14) translateX(2%);filter:brightness(.75)}to{transform:scale(1.025);filter:brightness(1)}}@keyframes commander-enter{from{opacity:0;transform:translateX(65px) scale(1.05)}to{opacity:1;transform:translateX(0) scale(1)}}@keyframes name-enter{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:translateX(0)}}@keyframes light-sweep{from{transform:translateX(-100%);opacity:0}30%{opacity:1}to{transform:translateX(100%);opacity:0}}
.painted-portrait{position:relative;overflow:hidden;height:170px;max-width:none;margin:0}.painted-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% var(--face-y,10%)}.setup-layout .roster-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.setup-layout .hero-card-top{padding:8px 6px 0;gap:3px}.setup-layout .hero-card-top small{display:none}.setup-layout .hero-card-top .tag{font-size:8px;padding:2px 5px}.setup-layout .hero-caption{padding:9px 7px 12px}.setup-layout .hero-caption h2{font-size:12px;letter-spacing:-.5px}.setup-layout .hero-caption p{display:none}.setup-layout .painted-portrait{height:126px}.setup-layout .transform-tag{display:none}.setup-layout .loadout{padding:20px}.setup-layout .loadout h3{margin-top:17px}.selection-grid .painted-portrait{height:145px}.selection-grid{margin-top:18px}.result-companies .painted-portrait{height:210px}.result-companies .painted-portrait img{object-fit:contain;object-position:center}
/* Keep HP above the enlarged stage, rather than over the commander's face. */
.battle-stage .arena{display:grid;grid-template-columns:1fr 1fr;background:#1c2d32}.battle-stage .arena>canvas{grid-column:1/-1;grid-row:2;aspect-ratio:1440/640;max-height:none}.battle-stage .hud{position:static;grid-row:1;width:auto;max-width:none;margin:8px 9px;padding:9px 12px}.battle-stage .player-hud{grid-column:1}.battle-stage .enemy-hud{grid-column:2}.battle-stage .hud-name small{display:none}.battle-stage .hud-name h2{font-size:15px}.battle-stage .hud-state{font-size:8px}.battle-stage .hp-line{margin:5px 0}.battle-stage .arena-label{bottom:10px}.ultimate-path{margin-top:12px;border:1px solid #ab956044;padding:10px;background:#18272a}.ultimate-path>div{display:flex;justify-content:space-between;align-items:center;gap:8px}.ultimate-path b{font:11px sans-serif;color:#cfbb8b}.ultimate-path>div>span{display:flex;gap:4px}.ultimate-path i{display:grid;place-items:center;border:1px solid #a08e6455;color:#b2b4a6;width:19px;height:19px;border-radius:50%;font:9px sans-serif}.ultimate-path i.filled{background:#d0b36d;color:#1c2829;border-color:#f1d393}.ultimate-path small{font:9px/1.6 sans-serif;color:var(--muted);display:block;margin-top:7px}.ultimate-path.ready{border-color:#e6ca84;background:#433d28}.ultimate-path.ready b{color:#ffe4a0}.battle-stage .special-grid .ultimate.ready{grid-column:1/-1;grid-row:1;min-height:88px;background:linear-gradient(115deg,#796138,#413827);border-color:#f4d493;box-shadow:0 0 15px #dfb34c25}.battle-stage .special-grid .ultimate.ready b{font-size:20px}.battle-stage .special-grid:has(.ultimate.ready) .direct{grid-column:1/-1;min-height:52px}.battle-stage .battle-notes ol{max-height:42px}.battle-stage .battle-notes{margin-top:10px}.art-preview-banner{padding:12px 25px;background:#574832;font:12px sans-serif;text-align:center}
@media(max-width:1100px){.setup-layout .roster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.setup-layout .painted-portrait{height:115px}.showcase-copy{padding:40px 25px}.commander-showcase{height:400px}.showcase-copy h2{font-size:35px}.battle-stage .special-grid{display:grid;grid-template-columns:1fr 1fr 1fr}.battle-stage .special-grid .transform{grid-column:auto}.battle-stage .special-grid .ultimate.ready{grid-column:2;grid-row:auto}.battle-stage .special-grid:has(.ultimate.ready) .direct{grid-column:1}.battle-stage .special-grid .ultimate.ready b{font-size:16px}}
@media(max-width:800px){.setup-layout .roster-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.setup-layout .painted-portrait{height:110px}.commander-showcase{height:380px}.showcase-copy{padding:40px 26px}.showcase-copy h2{font-size:39px}.showcase-copy .commander-title{font-size:11px;letter-spacing:1px}.showcase-ultimate{margin-top:18px}}
@media(max-width:550px){.art-review-link{font-size:9px;padding:5px}nav button{padding:6px;font-size:9px}.commander-showcase{height:345px}.showcase-copy{width:55%;padding:42px 18px}.showcase-copy h2{font-size:30px;letter-spacing:-1.8px}.showcase-copy>small{font-size:7px;letter-spacing:2px}.showcase-copy>p:not(.commander-title){font-size:10px;max-width:120px}.showcase-copy .commander-title{font-size:10px;letter-spacing:0;margin-top:18px}.showcase-ultimate b{font-size:15px}.showcase-ultimate span{font-size:8px}.showcase-controls{left:18px;right:17px;font-size:7px;bottom:17px;gap:10px}.showcase-controls button{font-size:9px}.showcase-figure{width:82%;right:-17%;height:108%;top:2%}.showcase-shade{background:linear-gradient(90deg,#101b23e8,#101b2380 39%,transparent 73%),linear-gradient(0deg,#101b23cc,transparent 24%)}.cutscene-background{object-position:62% center}.setup-layout .roster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.setup-layout .painted-portrait{height:115px}.selection-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.selection-grid .painted-portrait{height:106px}.selection-grid .hero-card-top{padding:8px 6px 0;gap:2px}.selection-grid .tag{font-size:8px;padding:2px 4px}.selection-grid .order{font-size:9px}.selection-grid .hero-caption{padding:9px 6px}.selection-grid .hero-caption h2{font-size:12px}.selection-grid .hero-caption p{font-size:8px}.battle-stage .hud{margin:5px 3px;padding:7px}.battle-stage .hud-name h2{font-size:11px}.battle-stage .hud-state{font-size:7px}.battle-stage .special-grid{grid-template-columns:1fr 1fr}.battle-stage .special-grid .transform{grid-column:1/-1}.battle-stage .special-grid .ultimate.ready{grid-column:1/-1;grid-row:1}.battle-stage .special-grid:has(.ultimate.ready) .direct{grid-column:1/-1}.ultimate-path b{font-size:11px}}
@media(prefers-reduced-motion:reduce){.commander-showcase *,.commander-showcase:before{animation:none!important}.commander-showcase.reveal:before{display:none}}
.showcase-figure{top:2%;height:108%}.hero-card .painted-portrait img{transform:scale(1.18);transform-origin:50% 8%}
@media(max-width:550px){header{flex-wrap:wrap;gap:10px}header nav{width:100%;justify-content:flex-start;flex-wrap:wrap}header nav a,header nav button{white-space:nowrap}.battle-toolbar>div{display:flex;flex-wrap:wrap;gap:4px}}