/* Illustrated command center. Battle styles remain in style.css. */
body:not(.battle-mode){background:#040d14;color:#eaf2f8}
body:not(.battle-mode) .shell{grid-template-columns:210px minmax(0,1fr)}
.sidebar{background:linear-gradient(100deg,#07121b,#030b11);border-right:1px solid #1d3543}.brand-icon{color:#f9cc60;text-shadow:0 0 18px #e9a82477;font-size:46px}.brand{font-family:Georgia,serif}.brand small{font-family:Arial,sans-serif;color:#779bb2}.nav{color:#9bbbd0;border-radius:4px}.nav.active{background:linear-gradient(90deg,#b3ed641b,#96ca6608);border-left:3px solid #bbed69;color:#c5f275}.nav-label{color:#61839c}.nav i{color:#6b98b3}
body:not(.battle-mode) main>header{height:62px;background:#061018e8;border-bottom:1px solid #213b4a;padding:0 30px}body:not(.battle-mode) #content{max-width:1800px;padding:24px 30px 36px;margin:auto}body:not(.battle-mode) .eyebrow{color:#d6f784;letter-spacing:2px;font-weight:700}.header-right,.breadcrumb{color:#8cb3cb}
.art-party,.art-castle,.art-forge,.art-hall,.art-forest,.art-volcano{background-image:url('/assets/command-scenes-v1.png');background-size:200% 300%;background-repeat:no-repeat}.art-party{background-position:0 0}.art-castle{background-position:100% 0}.art-forge{background-position:0 50%}.art-hall{background-position:100% 50%}.art-forest{background-position:0 100%}.art-volcano{background-position:100% 100%}
body:not(.battle-mode) .hero{min-height:420px;border:0;border-radius:0;margin:-24px -30px 0;padding:24px 30px 0;display:block;background:none;isolation:isolate;position:relative}body:not(.battle-mode) .hero:before{content:'';position:absolute;inset:0;z-index:-2;background:url('/assets/command-scenes-v1.png') 0 0/200% 300%}body:not(.battle-mode) .hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#040d14 2%,#040d14b8 32%,#040d1400 75%),linear-gradient(0deg,#040d14,transparent 45%)}body:not(.battle-mode) .hero-copy{padding:38px 10px;max-width:620px}body:not(.battle-mode) .hero .badge{border:0;background:transparent;padding:0;color:#ffe796}body:not(.battle-mode) .hero h2{font-size:clamp(34px,3.8vw,60px);line-height:1.2;letter-spacing:-2px;margin:20px 0}body:not(.battle-mode) .hero h2 em{color:#ffda81;text-shadow:0 0 18px #b9783455}body:not(.battle-mode) .hero p{color:#c3d4df;font-size:14px}body:not(.battle-mode) .hero-tags{font-size:12px;color:#e6d7b2;gap:28px}.hero-art{display:none}body:not(.battle-mode) .section-head{margin:12px 0 18px}body:not(.battle-mode) .section-head h2{font-size:20px;color:#f3eddc}.mode-card{min-height:205px;padding:105px 24px 20px;overflow:hidden;border-color:#36627d;background:linear-gradient(0deg,#030c14 8%,#030c1433 100%);isolation:isolate}.mode-card:before{content:'';position:absolute;inset:0;z-index:-2;background:url('/assets/command-scenes-v1.png') 0 100%/200% 300%}.mode-card:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#020c15 2%,#020c15c9 42%,transparent)}.mode-card[data-mode=coop]:before{background-position:100% 0}.mode-card[data-mode=versus]:before{background-position:100% 100%}.mode-card.selected{border-color:#ffdd88;box-shadow:0 0 0 1px #c79d53,0 0 14px #eebf6555;background:transparent}.mode-card .mode-icon{position:absolute;left:20px;bottom:68px;font-size:32px;color:#ffd888}.mode-card h3,.mode-card p{margin-left:40px}.mode-card h3{font-size:18px}.mode-card p{font-size:11px;color:#9dbfd4}.mode-card .count{color:#dfc792}.mode-card .check{color:#ccf593}.setup{grid-template-columns:1.65fr 1fr;gap:16px;margin-top:18px}.settings,.deploy{background:linear-gradient(120deg,#0b1a25,#040d15);border-color:#2b4d64;padding:22px}.deploy{background:linear-gradient(90deg,#07131aee,#07131aa6),url('/assets/command-scenes-v1.png') 100% 0/200% 300%}.deploy h3{font-size:25px}.deploy .primary{background:linear-gradient(#c5ff82,#95db44);border:1px solid #d3ffa4;box-shadow:0 0 13px #a8f76c66;border-radius:6px;font-size:18px}.settings-row label{font-size:14px}.segments button.selected{border-color:#abec66;background:#385321}.footer-notes{color:#7c9bb0}
.command-banner{position:relative;isolation:isolate;display:flex;justify-content:space-between;align-items:center;gap:25px;min-height:185px;padding:26px 12px;margin:-24px -30px 20px;padding-left:30px;padding-right:30px;border-bottom:1px solid #213645}.command-banner:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#030d17 0%,#030d17b3 35%,#030d171a 65%,#030d1777),linear-gradient(0deg,#040d14,transparent 55%)}.command-banner h1{font-size:36px;margin:12px 0;color:#f3f5f8;letter-spacing:-1px}.command-banner p{font-size:12px;line-height:1.9;color:#b1cbdc}.command-banner em{font-style:normal;color:#b9f16e}.season{padding:16px 22px;border-color:#846c3c;background:#041019d9;color:#f6d78b;line-height:1.8;text-align:center}.collection-count{min-width:250px;display:flex;gap:18px;border:1px solid #968251;padding:18px 22px;background:#041019dc;border-radius:7px}.collection-count>span{font-size:45px;color:#ffd469}.collection-count small{color:#f6db75;font-size:11px}.collection-count strong{display:block;color:#e3f2a2;font-size:22px}.collection-count em{font-size:12px;font-style:normal;color:#90a8b8}.collection-line{height:6px;width:180px;background:linear-gradient(90deg,#b2ed66,#39e987);border-radius:10px;margin-top:9px}
.catalog-toolbar{display:flex;align-items:center;gap:10px;margin:0 0 18px}.catalog-tabs{display:flex;gap:6px;flex:1}.catalog-tabs button{min-width:65px;padding:13px 16px;background:#081823;border:1px solid #22465c;color:#a9c9dd}.catalog-tabs button.active{border-color:#aedb68;color:#d6f6a4;background:linear-gradient(#2d502c,#14241e);box-shadow:inset 0 0 15px #94c93d22}.equipment-page .catalog-tabs button.active{border-color:#dfbb56;color:#ffe595;background:linear-gradient(#685125,#211e14)}.catalog-toolbar input{flex:1;min-width:100px;background:#071522;border-color:#2b4a60;font-size:11px}.catalog-toolbar select{padding:12px;background:#061522;border-color:#29495f}.catalog-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(310px,1fr);gap:24px;align-items:start}.champion-page .catalog{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.codex-hero{height:230px;position:relative;overflow:hidden;padding:0;border:1px solid var(--hero-color);border-radius:7px;background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--hero-color) 26%,#0b1421),#040b14 80%);text-align:left}.codex-hero.active{border-color:#ffe39a;box-shadow:0 0 0 2px #ebc47377,0 0 13px #e8bc5266}.hero-diamond{position:absolute;top:6px;left:8px;color:var(--rarity);font-size:22px;z-index:1}.codex-portrait{position:absolute;inset:5% -12% 0;width:124%;height:100%;background-size:500% 200%}.codex-hero-footer{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#030b13 38%);padding:30px 9px 10px}.codex-hero-footer small{color:var(--rarity);font-size:10px}.codex-hero-footer strong{display:block;color:#d9e8f0;font-size:12px;margin-top:5px}.codex-detail{border:1px solid #496070;border-top-color:#bba16b;border-radius:8px;overflow:hidden;background:linear-gradient(#0b1926,#050e16);position:sticky;top:15px}.codex-detail-art{height:275px;position:relative;isolation:isolate;padding:25px}.codex-detail-art:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#08131bed,#08131b33),linear-gradient(0deg,#08131b,transparent);z-index:-1}.codex-detail-art h2{font-size:30px;margin:12px 0}.codex-detail-art p{font-size:12px}.codex-large{position:absolute;right:-5%;bottom:-15px;width:70%;height:280px;background-size:500% 200%}.codex-detail-body{padding:20px}.codex-talent{font-size:12px;color:#b5d3e4;line-height:1.8;margin:0 0 22px}.codex-detail-body h3{font-size:14px;border-bottom:1px solid #263c4c;padding-bottom:12px;margin:20px 0 14px}.codex-detail-body h3 small{float:right;font-size:10px;color:#7498af}.codex-stats{display:grid;grid-template-columns:1fr 1fr;gap:15px;font-size:11px}.codex-stats div{display:flex;justify-content:space-between;gap:10px}.codex-stats span{color:#98b8ce}.codex-preview{width:100%;margin-top:20px;padding:11px;background:#112332;border-color:#395c73;font-size:11px}.tier-preview{display:flex;gap:3px}.tier-preview>span{flex:1;min-width:0;text-align:center}.tier-portrait{width:100%;height:65px;background-size:500% 200%}.tier-preview small{font-size:8px}.equipment-page .catalog-layout{display:block}.equipment-page .catalog{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}.codex-item{position:relative;border:1px solid var(--rarity);border-radius:7px;padding:10px 12px 16px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,color-mix(in srgb,var(--rarity) 17%,#07101b),#050e16 75%)}.item-card-top{display:flex;justify-content:space-between;font-size:10px;color:var(--rarity)}.item-card-top>span+span{color:#aac1d2}.equipment-art{display:block;height:150px;width:100%;background-image:url('/assets/equipment-icons-v1.png');background-size:500% 400%;background-repeat:no-repeat;mix-blend-mode:screen}.codex-item h3{font-size:13px;margin:4px 0 8px}.codex-item p{color:#a2c5df;font-size:11px;margin:0 0 4px}.codex-item>small{color:#7995ad;font-size:10px}
.ranking-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:22px}.ranking-layout .catalog-toolbar input{max-width:320px}.ranking-layout .catalog-toolbar{justify-content:space-between}.ranking-layout .table-wrap{border:1px solid #294255;border-radius:5px;background:#06111a}.ranking-layout th{font-size:10px;color:#93b1c5}.ranking-layout td{font-size:12px;height:64px;border-color:#172e40;padding:12px}.ranking-layout th{padding:14px 12px}.rank-place-1{background:linear-gradient(90deg,#68502344,#17221944)}.rank-place-2{background:linear-gradient(90deg,#30567344,#17221922)}.rank-place-3{background:linear-gradient(90deg,#69432244,#17221922)}.rank-medal{color:#f5d17f;font-weight:700;white-space:nowrap}.rank-mode-tag{display:inline-block;border:1px solid #34546a;background:#13322855;color:#b4d39e;font-size:10px;padding:5px;border-radius:4px}.ranking-layout aside{display:grid;gap:18px;align-content:start}.ranking-layout .panel{background:linear-gradient(#0a1925,#040e17);border-color:#405268}.rank-personal{text-align:center}.rank-personal h3{text-align:left;color:#f7df9d}.rank-personal h2{font-size:19px;margin:10px}.rank-avatar{font-size:35px;border:1px solid #bf9d4d;border-radius:50%;width:65px;height:65px;display:grid;place-items:center;margin:15px auto;color:#e1c676;background:#342b1c}.personal-stats{display:flex;gap:10px}.personal-stats>div{flex:1;border:1px solid #243d51;padding:12px 5px;color:#839fb4;font-size:10px}.personal-stats strong{display:block;font-size:24px;color:#e4eef5;margin-top:8px}.podium-entry{display:flex;align-items:center;gap:12px;margin:18px 0}.podium-entry>span{font-size:26px}.podium-entry b{font-size:12px}.podium-entry small{margin-left:auto;color:#c4ab6b;font-size:10px}.rank-empty{min-height:370px;text-align:center;display:flex;flex-direction:column;justify-content:center;border:1px solid #263d4e;background:radial-gradient(#182639,#07131c)}.rank-empty>span{font-size:70px;color:#d9b974}.rank-empty h2{font-size:22px}.rank-empty p{color:#8daabd;font-size:12px;line-height:1.9}
.manual-page .guide-grid{gap:18px;align-items:start}.manual-card{padding:22px!important;background:linear-gradient(125deg,#122430,#040d15)!important;border-color:#305165!important}.manual-card h3{display:flex;align-items:center;gap:14px;font-size:20px;margin:0 0 12px}.manual-number{font:700 30px 'Barlow Condensed',sans-serif;color:#e9cd72;text-shadow:0 0 15px #ddbf6655}.manual-card:nth-child(even) .manual-number{color:#59e6da}.manual-card p{font-size:11px!important;line-height:1.9!important;color:#9bbdd2!important}.manual-flow{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:18px}.manual-flow>span{display:flex;flex:1;flex-direction:column;align-items:center;font-size:30px;color:#dfc579}.manual-flow b{font-size:11px;color:#c8dce9}.manual-flow small{font-size:8px;color:#839fb1;margin-top:4px}.manual-flow i{color:#dfc579;font-size:25px}.manual-portrait{width:70px;height:75px;background-size:500% 200%}.manual-modes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:20px}.manual-modes>div{height:110px;padding:65px 10px 8px;border:1px solid #527455;border-radius:5px;position:relative;isolation:isolate}.manual-modes>div:before{content:'';position:absolute;inset:0;background:linear-gradient(transparent,#020e15);z-index:-1}.manual-modes b{display:block;font-size:13px}.manual-modes small{font-size:9px;color:#b0c5d4}.manual-merge{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:15px}.manual-merge b{font-size:27px;color:#edd68e}.manual-merge>div{text-align:center}.manual-merge small{display:block;color:#c1e47e;font-size:10px}.upgraded{filter:drop-shadow(0 0 10px #e6b935)}.element-strip{display:flex;gap:10px;margin-top:25px}.element-strip span{flex:1;text-align:center;border:1px solid #28485a;border-radius:5px;background:#071721;padding:12px 0;font-size:26px;color:#78d4e8}.element-strip small{display:block;font-size:10px;color:#bfd0dc;margin-top:6px}.element-strip span:nth-child(5){color:#ef8655}.online-party{display:flex;align-items:center;justify-content:center;margin:20px 0 0;background:radial-gradient(ellipse,#234d88aa,transparent 70%)}.online-party .manual-portrait{width:85px;height:105px}.online-party>span{font-size:34px;color:#8bdded}.online-party small{display:block;font-size:11px}.manual-card table{font-size:11px}.manual-card th,.manual-card td{padding:8px 10px}
@media(min-width:1700px){.codex-hero{height:280px}.equipment-art{height:185px}}
@media(max-width:1250px){body:not(.battle-mode) .shell{grid-template-columns:180px minmax(0,1fr)}body:not(.battle-mode) #content{padding:20px}.command-banner{margin:-20px -20px 20px;padding:25px 20px}.champion-page .catalog{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-layout{gap:16px;grid-template-columns:minmax(0,1fr) 310px}.catalog-toolbar{flex-wrap:wrap}.catalog-tabs{flex-basis:100%}.equipment-page .catalog{grid-template-columns:repeat(4,minmax(0,1fr))}.ranking-layout{grid-template-columns:minmax(0,1fr) 240px}.collection-count{min-width:210px}.collection-line{width:130px}body:not(.battle-mode) .hero{margin:-20px -20px 0}.mode-card{padding-left:12px;padding-right:12px}.mode-card h3{font-size:15px}.mode-card .count{font-size:8px}.manual-card h3{font-size:17px}}
@media(max-width:950px){.catalog-layout{grid-template-columns:1fr}.champion-page .catalog{grid-template-columns:repeat(5,minmax(0,1fr))}.codex-hero{height:180px}.codex-detail{position:static;display:grid;grid-template-columns:1fr 1fr}.codex-detail-art{height:100%}.codex-large{height:300px;width:90%}.ranking-layout{grid-template-columns:1fr}.ranking-layout aside{grid-template-columns:1fr 1fr}.collection-count{display:none}.manual-page .guide-grid{grid-template-columns:1fr}.setup{grid-template-columns:1fr}.mode-card h3,.mode-card p{margin-left:0}.mode-card .mode-icon{display:none}}
@media(max-width:700px){body:not(.battle-mode) .shell{grid-template-columns:1fr}.sidebar{position:static;width:auto;height:auto;padding:15px}.brand,.nav-label,.side-bottom{display:none}.sidebar nav{display:flex;gap:4px;overflow:auto}.sidebar .nav{padding:12px 8px;white-space:nowrap;font-size:10px;gap:5px}.nav i{display:none}body:not(.battle-mode) main{margin:0}body:not(.battle-mode) main>header{padding:0 15px;height:50px}.header-right{font-size:9px}.breadcrumb{display:none}.slash{display:none}body:not(.battle-mode) .hero{min-height:370px}.hero-copy{max-width:100%}.hero-tags{gap:12px!important;font-size:10px!important}.modes{grid-template-columns:1fr}.mode-card{min-height:155px;padding-top:65px}.command-banner h1{font-size:28px}.command-banner .season{display:none}.equipment-page .catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.champion-page .catalog{grid-template-columns:repeat(3,minmax(0,1fr))}.codex-detail{display:block}.codex-detail-art{height:250px}.catalog-tabs button{min-width:0;padding:10px;flex:1}.catalog-toolbar select{max-width:45%}.catalog-toolbar input{flex-basis:100%}.ranking-layout aside{grid-template-columns:1fr}.manual-card{padding:15px!important}.manual-modes small{font-size:8px}.manual-merge{gap:10px}.footer-notes{flex-wrap:wrap}.equipment-art{height:130px}}
body:not(.battle-mode) .hero-copy{background:transparent}

/* Catalog portraits share one bounded stage; never enlarge past the card. */
.champion-page .codex-hero{display:block;height:270px;padding:0;overflow:hidden}
.champion-page .codex-hero .codex-portrait{position:absolute;inset:20px 10px 55px;width:auto;height:auto;margin:0;background-size:contain!important;background-position:center bottom!important;background-repeat:no-repeat;transform:none}
.champion-page .codex-hero-footer{height:53px;padding:6px 10px 9px;background:linear-gradient(#07111be6,#040b13);display:flex;flex-direction:column;justify-content:center;gap:4px}
.champion-page .codex-hero-footer small{line-height:14px;margin:0}.champion-page .codex-hero-footer strong{line-height:18px;margin:0;font-size:12px}.champion-page .hero-diamond{z-index:2;top:7px;left:8px}
.champion-page .codex-detail-art{min-height:275px;overflow:hidden}.champion-page .codex-detail-art .codex-large{position:absolute;inset:18px 12px 15px auto;width:53%;height:auto;background-size:contain!important;background-position:center bottom!important;transform:none}
.champion-page .tier-preview .tier-portrait{height:85px;background-size:contain!important;background-position:center bottom!important}
/* Approved portrait-first champion codex. Scoped to avoid changing equipment/battle cards. */
.champion-page .command-banner{min-height:126px;margin-bottom:16px;padding-top:16px;padding-bottom:16px}
.champion-page .command-banner h1{font-size:34px;margin:0 0 9px}.champion-page .command-banner .eyebrow,.champion-page .collection-count{display:none}.champion-page .command-banner p{margin:0}
.champion-page .catalog-toolbar{gap:9px;margin-bottom:18px}.champion-page #catalog-tier{display:none}.champion-page .catalog-tabs{flex:1}.champion-page .catalog-tabs button.active{background:linear-gradient(#695525,#2c2518);color:#ffe6a4;border-color:#d1b676;box-shadow:0 0 10px #ddb65122}
.champion-page .catalog-layout{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:22px}.champion-page .catalog{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0}
.champion-page .codex-hero{height:auto;aspect-ratio:.82;border:1px solid #3f525e;border-radius:7px;display:block;background:#07111b;transition:border-color .15s,box-shadow .15s}.champion-page .codex-hero:hover{border-color:var(--hero-color)}.champion-page .codex-hero.active{border-color:#94ddff;box-shadow:0 0 0 1px #94ddff,0 0 16px #43baff55}.champion-page .hero-diamond,.champion-page .codex-hero-footer small{display:none}
.codex-painted{display:block;background-image:url('/assets/codex-portraits-v2.png');background-size:500% 400%;background-repeat:no-repeat;aspect-ratio:1;width:100%}
.champion-page .codex-hero-footer{position:absolute;bottom:0;height:32px;padding:3px 4px;background:#07121fee;border-top:1px solid #273b4c;align-items:center}.champion-page .codex-hero-footer strong{font-size:12px;white-space:nowrap;letter-spacing:-.5px}
.champion-page .codex-detail{display:block;top:12px;border:1px solid #355269;background:#081622}.codex-feature{height:300px;position:relative;overflow:hidden;background:#0c2030}.codex-feature .is-large{position:absolute;width:78%;right:0;top:0}.codex-feature:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#081622 0%,#081622b0 22%,transparent 60%),linear-gradient(0deg,#081622,transparent 30%);pointer-events:none}.codex-feature-title{position:relative;z-index:1;padding:25px 20px;max-width:90%}.codex-feature-title h2{font-size:32px;text-shadow:0 2px 10px #00101f;margin:0 0 17px}.codex-tags{display:flex;gap:7px}.codex-tags span{font-size:12px;color:#b6ddf4;background:#092039d9;border:1px solid #416b8a;border-radius:5px;padding:5px 9px}
.champion-page .codex-detail-body{padding:0 20px 20px}.codex-grade-picker{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid #334b5c;border-radius:8px;background:#06131f;padding:8px 0;margin-top:-8px}.codex-grade-picker button{min-width:0;background:transparent;border:0;padding:4px 0;color:#95aabd}.codex-grade-picker span{display:block;font-size:27px;color:var(--grade);line-height:32px}.codex-grade-picker small{font-size:10px;white-space:nowrap}.codex-grade-picker .active{color:#e1f4ff;background:linear-gradient(transparent,#4e9cc52b);text-shadow:0 0 9px #91dfff}.codex-grade-picker .active span{color:#d6f3ff}
.champion-page .codex-talent{font-size:12px;margin:13px 0;color:#abc4d5}.champion-page .codex-stats{gap:0 25px;font-size:12px}.champion-page .codex-stats div{padding:10px 0;border-bottom:1px solid #233747}.champion-page .codex-stats b{color:#edf4fb;font-variant-numeric:tabular-nums}.champion-page .codex-detail-body h3{margin:17px 0 10px;border:0;padding:0;color:#edd8aa}.champion-page .champion-skill{padding:12px;background:#06121d;border:1px solid #30495c;border-radius:7px}.champion-page .champion-skill small{line-height:1.6}
@media(min-width:1700px){.champion-page .codex-feature{height:345px}.champion-page .codex-hero-footer{height:37px}.champion-page .codex-hero-footer strong{font-size:14px}}
@media(max-width:1100px){.champion-page .catalog-layout{grid-template-columns:1fr 1fr;gap:14px}.champion-page .catalog{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.codex-feature-title h2{font-size:24px}.champion-page .codex-detail-body{padding:0 12px 15px}}
@media(max-width:760px){.champion-page .catalog-layout{grid-template-columns:1fr}.champion-page .catalog{grid-template-columns:repeat(4,minmax(0,1fr))}.champion-page .codex-detail{position:static}.champion-page .codex-feature{height:290px}.champion-page .codex-feature .is-large{max-width:380px}.champion-page .codex-hero-footer strong{font-size:11px}}
/* Keep the complete portrait visible inside the detail banner at every width. */
.champion-page .codex-feature .is-large{width:auto;height:100%;aspect-ratio:1;max-width:none;right:0;top:0}
.champion-page .catalog .codex-hero{padding:0!important;display:block!important;border-color:#3f525e!important}
.champion-page .catalog .codex-hero .codex-painted{position:absolute;top:0;left:0}
.champion-page .catalog .codex-hero.active{border-color:#94ddff!important;box-shadow:0 0 0 1px #94ddff,0 0 16px #43baff55!important}
.champion-page .command-banner{min-height:126px!important;height:126px!important}.champion-page .codex-detail{border-color:#355269!important}
/* Equipment codex: matching portrait codex layout, with full uncropped item art. */
.equipment-page .command-banner{min-height:126px!important;height:126px!important;margin-bottom:16px;padding-top:16px;padding-bottom:16px}.equipment-page .command-banner h1{font-size:34px;margin:0 0 9px}.equipment-page .command-banner .eyebrow,.equipment-page .collection-count{display:none}.equipment-page .command-banner p{margin:0}.equipment-page #catalog-tier{display:none}
.equipment-page .catalog-layout{display:grid!important;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important;gap:22px;align-items:start}.equipment-page .catalog{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px;margin:0;max-height:calc(100vh - 260px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#475766 #09121b;padding:2px 7px 12px 2px}
.equipment-page .codex-item{padding:0!important;display:flex!important;flex-direction:column;min-width:0;border:1px solid #344957!important;border-radius:7px;background:linear-gradient(#101b25,#06111a)!important;text-align:left;overflow:hidden}.equipment-page .codex-item:hover{border-color:#bb9d60!important}.equipment-page .codex-item.active{border-color:#ecd18a!important;box-shadow:0 0 0 1px #ecd18a,0 0 12px #d6a63d40!important}
.equipment-page .item-card-top,.equipment-page .codex-item>small{display:none}.equipment-page .codex-item .equipment-art{height:auto!important;aspect-ratio:1.15;width:100%!important;margin:0!important;display:block!important;background:none!important;mix-blend-mode:normal;padding:5px;box-sizing:border-box}.equipment-page .equipment-art svg{width:100%;height:100%;display:block}.equipment-page .codex-item h3{font-size:12px!important;margin:0!important;padding:8px 7px 4px!important;color:#eef2f5;border-top:1px solid #243644}.equipment-page .codex-item p{padding:0 7px 9px!important;margin:0!important;font-size:11px!important;line-height:1.55;color:#a4c8df;overflow-wrap:anywhere}
.equipment-page .codex-detail{display:block!important;position:sticky;top:12px;border:1px solid #3d5264!important;background:#07141f!important;min-width:0}.equipment-showcase{position:relative;height:290px;overflow:hidden;isolation:isolate}.equipment-showcase:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#06111bec,transparent),linear-gradient(0deg,#07141f,transparent);z-index:-1}.equipment-showcase-title{position:absolute;left:20px;top:23px;z-index:1;max-width:65%;text-shadow:0 2px 10px #000}.equipment-showcase-title h2{font-size:30px;margin:0 0 12px;color:#fff3dc}.equipment-showcase-title span{font-size:14px;color:#cfdae1}.equipment-page .equipment-showcase .equipment-art{position:absolute;right:6px;bottom:0;width:68%!important;height:88%!important;background:none!important;mix-blend-mode:normal}
.equipment-page .codex-detail-body{padding:0 18px 18px}.equipment-page .codex-grade-picker{margin-top:0}.equipment-page .codex-detail-body h3{font-size:15px;margin:18px 0 10px;padding:0;border:0;color:#f0ddaa}.equipment-current-effect{font-size:21px;line-height:1.6;font-weight:700;color:#ffe099;border-block:1px solid #2c4050;padding:11px 0}.equipment-grade-effects{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid #2c4050;border-radius:7px;overflow:hidden}.equipment-grade-effects button{background:#081521;border:0;border-right:1px solid #263c4b;border-radius:0;padding:9px 4px;min-width:0;color:#d9e6ed}.equipment-grade-effects button.active{background:#302818;box-shadow:inset 0 0 0 1px #c9a457}.equipment-grade-effects b{display:block;font-size:10px;margin-bottom:8px}.equipment-grade-effects span{display:block;font-size:10px;line-height:1.6;overflow-wrap:anywhere}.equipment-obtain{display:grid;grid-template-columns:1fr 1fr;gap:8px}.equipment-obtain>div{display:flex;align-items:center;gap:10px;padding:12px 9px;border:1px solid #2d4353;border-radius:6px}.equipment-obtain i{font-style:normal;color:#e7c775;font-size:28px}.equipment-obtain p{margin:0}.equipment-obtain b{font-size:12px;display:block;margin-bottom:5px}.equipment-obtain small{font-size:10px;line-height:1.6;color:#95b3c8;display:block}
@media(max-width:1200px){.equipment-page .catalog{grid-template-columns:repeat(4,minmax(0,1fr))!important}.equipment-showcase-title h2{font-size:25px}.equipment-grade-effects{grid-template-columns:repeat(4,minmax(0,1fr))}.equipment-obtain{grid-template-columns:1fr}}
@media(max-width:760px){.equipment-page .catalog-layout{grid-template-columns:1fr!important}.equipment-page .catalog{max-height:430px;grid-template-columns:repeat(3,minmax(0,1fr))!important}.equipment-page .codex-detail{position:static}.equipment-page .equipment-showcase{height:260px}.equipment-grade-effects{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Original in-game character artwork in the redesigned champion codex. */
.champion-page .codex-hero .codex-original{position:absolute;inset:8px 5px 36px;display:block;width:auto;height:auto;background-size:contain!important;background-position:center bottom!important;background-repeat:no-repeat;transform:none}
.champion-page .codex-feature .codex-original-large{position:absolute;right:8px;top:12px;bottom:5px;width:65%;height:auto;display:block;background-size:contain!important;background-position:right bottom!important;background-repeat:no-repeat;transform:none}
/* Illustrated seven-grade progression shared by both codices. */
.codex-grade-picker{gap:2px;padding:7px 4px;background:linear-gradient(#071723,#030d15);overflow:hidden}
.codex-grade-picker button{position:relative;padding:5px 1px 7px;border:1px solid transparent;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:end;transition:border-color .15s,background .15s}
.codex-grade-picker .codex-grade-art{display:block;width:100%;height:auto;aspect-ratio:3/7;background-size:700% 100%;background-position:var(--grade-position) center;background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--grade),transparent 70%));font-size:0;line-height:0}
.codex-grade-picker .champion-grade-art{background-image:url('/assets/codex-champion-grades-v1.png')}
.codex-grade-picker .equipment-grade-art{background-image:url('/assets/codex-equipment-grades-v1.png')}
.codex-grade-picker small{font-size:clamp(9px,.7vw,13px);font-weight:700;color:var(--grade);line-height:1.6;margin-top:4px}
.codex-grade-picker button.active{border-color:var(--grade);background:linear-gradient(transparent,color-mix(in srgb,var(--grade),transparent 86%));box-shadow:inset 0 0 12px color-mix(in srgb,var(--grade),transparent 65%),0 0 6px color-mix(in srgb,var(--grade),transparent 70%)}
.codex-grade-picker button:hover{border-color:var(--grade)}.codex-grade-picker button:focus-visible{outline:2px solid #fff1b8;outline-offset:-3px}
/* Compact square grade buttons; retain the full sprite without stretching. */
.codex-grade-picker button{aspect-ratio:1;padding:3px 1px;justify-content:flex-end;overflow:hidden}
.codex-grade-picker .codex-grade-art{position:absolute;inset:2px 0 20px;margin:auto;width:auto;height:calc(100% - 23px);aspect-ratio:3/7;flex:none}
.codex-grade-picker small{position:relative;z-index:1;margin:0;font-size:clamp(8px,.65vw,12px);line-height:17px}
@media(max-width:700px){.codex-grade-picker{gap:1px;padding:4px 2px}.codex-grade-picker .codex-grade-art{inset:1px 0 15px;height:calc(100% - 17px)}.codex-grade-picker small{font-size:8px;line-height:13px}}
.ranking-page .command-banner{min-height:190px;background:linear-gradient(90deg,#020a13e8,transparent 72%),url('/assets/ranking-hall-v3.png') center 48%/cover!important;border-bottom:1px solid #a08045}.ranking-page .command-banner h1{color:#fff0c5;font-size:44px}.ranking-page .season{border:1px solid #aa8240;background:#04101ac9;padding:20px;color:#eed18b}.ranking-layout{grid-template-columns:minmax(0,1fr) 320px;gap:20px}.rank-tabs{display:flex;gap:10px;flex-wrap:wrap}.rank-tabs button{background:#071421;border:1px solid #25445d;color:#a8cde9;padding:14px 20px}.rank-tabs button[aria-pressed=true]{border-color:#e6bc61;color:#ffe19a;background:linear-gradient(#735320,#241a0d);box-shadow:0 0 14px #e8ab4338}.ranking-layout .catalog-toolbar{gap:12px}.ranking-layout tr[data-rank-row]{cursor:pointer}.ranking-layout tr[data-rank-row]:hover{outline:1px solid #e1c77c;outline-offset:-1px}.ranking-layout tr:focus-visible{outline:2px solid #ffe09b;outline-offset:-2px}.ranking-layout td{height:76px;font-size:14px}.ranking-layout .rank-place-1{background:linear-gradient(90deg,#342311e8,#22190dbb),url('/assets/ranking-hall-v3.png') center/cover;color:#ffe6a2}.ranking-layout .rank-place-2{background:linear-gradient(90deg,#0c2340ed,#0b142acc),url('/assets/home-coop-v2.png') center/cover}.ranking-layout .rank-place-3{background:linear-gradient(90deg,#300e15ed,#180b17cf),url('/assets/home-versus-v2.png') center/cover}.rank-place-1 .rank-medal,.rank-place-2 .rank-medal,.rank-place-3 .rank-medal{font:700 28px Georgia;color:#f2d38b;text-shadow:0 0 12px #eab85c}.rank-personal{background:linear-gradient(#07132033,#05101bf5 65%),url('/assets/ranking-hall-v3.png') center/cover!important}.rank-podium{background:linear-gradient(#07132055,#05101be8),url('/assets/ranking-hall-v3.png') center/cover!important;min-height:250px}.rank-podium h3{color:#ffe4a4}.rank-personal .cos-profile{justify-content:center;margin:25px 0}.rank-podium .podium-entry{padding:14px 0;border-bottom:1px solid #b8995144}.ranking-layout .table-wrap{overflow:auto}
#rank-loadout{width:min(1040px,94vw);max-height:90vh;box-sizing:border-box;border:1px solid #d0ac60;border-radius:12px;padding:28px;color:#e8edf5;background:linear-gradient(#06101ace,#06101aea),url('/assets/ranking-record-v1.png') center/cover;overflow:auto}#rank-loadout::backdrop{background:#000c}#rank-loadout header{display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid #947848;padding-bottom:16px;margin-bottom:20px}#rank-loadout header small{color:#dfc27e;letter-spacing:3px}#rank-loadout h2{font-size:26px;color:#ffe3a2;margin:10px 0}#rank-loadout p{color:#a8bacb}.record-heroes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.record-heroes article{background:#05111de0;border:1px solid #5d5140;border-radius:8px;padding:14px}.record-hero{display:flex;align-items:center;gap:18px}.record-hero .character-portrait{width:90px;height:110px;flex:none}.record-hero h3{margin:0 0 8px;color:#f3e1bb}.record-equipment{display:grid;grid-template-columns:1fr 1fr;gap:8px;border-top:1px solid #3d4144;margin-top:8px;padding-top:10px}.record-item{display:flex;align-items:center;gap:8px;min-width:0;background:#10203288;padding:6px;border:1px solid #263d4b;border-radius:5px}.record-item .equipment-icon{width:48px;height:48px;flex:none}.record-item svg{width:100%;height:100%}.record-item span{font-size:12px}.record-item small{display:block;margin-top:5px}.record-bag{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.record-missing{grid-column:1/-1;padding:70px 20px;text-align:center;line-height:2}@media(max-width:950px){.ranking-layout{grid-template-columns:1fr}.record-bag{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.record-heroes{grid-template-columns:1fr}#rank-loadout{padding:16px}.rank-tabs{gap:5px}.rank-tabs button{padding:10px;font-size:12px}}
#rank-loadout{width:min(1040px,94vw)!important;max-width:1040px!important}#rank-loadout header{height:auto!important;padding:0 0 16px!important;background:transparent!important}#rank-loadout .record-item>span:last-child{min-width:0;overflow-wrap:break-word}#rank-loadout .record-hero h3{word-break:keep-all}

/* Large square grade tiles: preserve illustration proportions and keep labels separate. */
.codex-grade-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,76px),1fr));gap:6px;padding:7px;min-width:0;overflow:hidden}
.codex-grade-picker button{min-width:0;max-width:none;width:100%;box-sizing:border-box;aspect-ratio:1;justify-content:flex-end;padding:3px 2px 4px}
.codex-grade-picker .codex-grade-art{position:absolute;inset:3px 3px 22px;width:auto;height:auto;aspect-ratio:auto;margin:0;background:none;filter:none}
.codex-grade-picker .codex-grade-art svg{display:block;width:100%;height:100%;overflow:hidden}
.codex-grade-picker small{font-size:12px;line-height:18px;margin:0;flex:none}
@media(max-width:700px){.codex-grade-picker .codex-grade-art{inset:3px 3px 22px;height:auto}.codex-grade-picker small{font-size:12px;line-height:18px}}