/* Skin purchases use the shop's larger dialog without shrinking mobile text.
   The height floor keeps landscape screens wide; the dialog scrolls instead. */
body[data-shell-active="codex"] .hero-purchase-modal-window--skin {
    --hpm-scale: 1;
    box-sizing: border-box;
    flex-shrink: 0;
    width: min(720px, calc(100vw - 24px), max(480px, calc(150dvh - 390px)));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
body[data-shell-active="codex"] .hero-purchase-modal-window--skin .hero-purchase-modal-close {
    width: 36px;
    height: 36px;
    font-size: 1rem;
}
body[data-shell-active="codex"] .hero-purchase-modal-window--skin .hero-purchase-modal-body {
    padding-inline: clamp(14px, 3vw, 26px);
}
body[data-shell-active="codex"] .hero-purchase-modal-window--skin .hero-purchase-modal-actions {
    flex-wrap: wrap;
}
body[data-shell-active="codex"] .hero-purchase-modal-window--skin .hero-purchase-modal-actions > * {
    min-width: min(180px, 100%);
}

/* The original live detail renderer inside the V2 archive shell. */
#codex-browse.codex-view{display:none;animation:none}
#codex-browse.codex-view.is-active{display:grid}
.world-atmosphere{z-index:0}.codex-layout{position:relative;z-index:1}
#codex-shell.v2-detail-shell{display:none;width:min(100%,1800px);margin:0 auto;padding:24px 28px 50px;position:relative;z-index:1;--hcp-gold:#e9c585;--hcp-gold-bright:#fff0c9;--hcp-cyan:#81deed;--hcp-violet:#a273ff;--hcp-line:#293c56;--hcp-panel:#0b1424;--hcp-deep:#080e1c}
body.codex-detail-open #codex-shell.v2-detail-shell{display:block}
.v2-detail-context{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:14px}
.v2-detail-context .eyebrow{margin:0}.v2-detail-context .eyebrow span{color:#66829b;margin:0 12px}
.v2-detail-context .eyebrow [data-i18n]{color:inherit;margin:0}
#detail-favorite{padding:8px 14px;border-radius:5px;font-size:11px;background:linear-gradient(120deg,#152a43,#101a2d);color:var(--gold)}
#detail-favorite[aria-pressed=true]{border-color:#b89960;background:#352b22}
#codex-detail.codex-view.is-active{position:relative;inset:auto;display:flex;max-width:none;width:100%;margin:0;padding:0;overflow:visible;min-height:0;animation:none;box-shadow:none;background:none}
#codex-detail-header{border:1px solid #977c515c;border-radius:8px;background:linear-gradient(110deg,#17253d,#0c1527 60%,#20182d);clip-path:none;overflow:visible;margin:0 0 20px;box-shadow:0 12px 30px #0005}
#codex-detail-header:before{border-radius:7px;opacity:.7}
#codex-detail-identity{min-width:260px;border-radius:8px 0 0 8px;background:linear-gradient(110deg,#e7bd5912,transparent);padding:15px 20px;gap:12px}
#codex-name{font-family:Codex,Georgia,serif;color:#f2d49a}
#codex-tabs{gap:8px;justify-content:flex-start;padding:0 170px 0 12px}
#codex-tabs .codex-tab-btn{font-size:10px;letter-spacing:.7px;min-height:76px;padding:6px 10px;background:none;border:0;color:#a8bad4}
#codex-tabs .codex-tab-btn.is-active{color:#8ee2f2;background:linear-gradient(0deg,#36578040,transparent)}
#codex-tabs .codex-tab-btn:after{background:linear-gradient(90deg,transparent,#81deed,transparent)}
#codex-detail-close,#codex-detail-next{clip-path:none;border-radius:5px;border-color:#405676;height:34px;background:#0e1b2d}
#codex-detail-close{width:91px;font-size:11px;right:14px}#codex-detail-next{right:114px}
#codex-detail .codex-tab-panel{min-width:0;max-width:100%;overflow-x:clip;overflow-y:visible;max-height:none;flex:none;padding:0;animation:none}
#codex-detail .codex-tab-panel.is-active{min-height:300px}
#codex-detail #codex-tab-overview.is-active{overflow:visible}
#codex-detail #codex-overview-left{overflow:visible;padding-right:0}
#codex-overview-tier-watermark{display:none!important}
#codex-onepager-wrap{padding:0 0 30px;background:none}
#codex-onepager-card{width:min(100%,1100px);min-height:0;border:1px solid #aa8a505c;border-radius:8px;background:linear-gradient(150deg,#121d31,#080f1d 60%,#171125);box-shadow:0 15px 45px #0007;--gcp-gold:#e9c585;--gcp-cyan:#81deed}
#codex-onepager-card .gc-section-title{color:#e9c585}
#codex-detail .hextech-panel,#codex-detail .strategy-section{border-radius:7px;border-color:#31445d;background:linear-gradient(135deg,#142137db,#0a1423e8)}
#codex-detail .cab-intro,#codex-detail .csk-intro,#codex-detail .cov-dossier-intro{border-radius:7px;clip-path:none}
#codex-detail img{max-width:100%}
#codex-detail .codex-ability-card{border-radius:7px}
@media(max-width:620px){#codex-onepager-card .gc-avatar-row{gap:14px;margin-top:-60px;padding:0 20px;align-items:center}#codex-onepager-card .gc-avatar{width:92px;height:92px;flex-shrink:0}#codex-onepager-card .gc-identity{flex:1;padding:20px 0 0;min-width:0}#codex-onepager-card .gc-name{overflow-wrap:anywhere;font-size:26px}#codex-onepager-card .gc-meta{flex-wrap:wrap;gap:5px;font-size:10px;letter-spacing:0}#codex-onepager-card .gc-meta .gc-tier-pill{font-size:9px;padding:3px 5px}}
@media(max-width:1250px){#codex-detail-header{flex-wrap:wrap}#codex-detail-identity{min-width:0;width:100%;padding-right:172px}#codex-tabs{order:2;width:100%;flex-basis:100%;min-height:52px;padding:0 10px;border-top:1px solid #30415b;border-radius:0 0 8px 8px}#codex-tabs .codex-tab-btn{min-height:52px}#codex-detail-close,#codex-detail-next{top:37px}}
@media(max-width:850px){#codex-shell.v2-detail-shell{padding:18px 16px 35px}#codex-detail #codex-tab-overview.is-active{display:block}#codex-detail #codex-overview-visual{min-height:460px;margin-top:16px}.v2-detail-context .eyebrow{font-size:8px;letter-spacing:1px}}
@media(max-width:620px){#codex-browse.codex-view.is-active{display:block}#codex-shell.v2-detail-shell{padding:15px 12px 30px}.v2-detail-context{align-items:flex-start;gap:8px}.v2-detail-context .eyebrow{font-size:7px;max-width:155px;line-height:1.8}.v2-detail-context .eyebrow span{margin:0 4px}#detail-favorite{font-size:9px;padding:7px 9px}#codex-detail-header{flex-direction:row}#codex-detail-identity{padding:13px 104px 13px 10px;gap:8px}#codex-detail-classicon{width:31px;height:31px}#codex-detail-classicon img{width:28px;height:28px}#codex-name{font-size:19px;letter-spacing:.2px;margin:0}#codex-location{font-size:9px}#codex-detail-tier{padding:0}#codex-detail-tier img{width:31px;height:31px}#codex-detail-close{width:72px;right:10px;font-size:10px;top:23px;height:28px}#codex-detail-next{top:54px;right:10px;width:28px;height:25px}#codex-tabs{gap:2px;padding:0 4px}#codex-tabs .codex-tab-btn{font-size:9px;letter-spacing:0;padding:4px 9px;min-height:47px}#codex-detail #codex-overview-visual{min-height:400px}#codex-onepager-card .gc-banner-wrap{height:365px}#codex-onepager-card .gc-passive-badge{width:57px;height:57px;top:17px;left:17px;padding:5px}#codex-onepager-card .gc-tier-badge{width:68px;height:68px;top:15px;right:17px;padding:4px}#codex-onepager-card .gc-relic-showcase{width:67px;height:67px;right:16px;bottom:22px}#codex-onepager-card .gc-nameplate{left:20px;right:90px;bottom:27px}#codex-onepager-card .gc-name{font-size:30px}#codex-onepager-card .gc-bio{margin:0 16px 18px;padding:28px 14px 15px;font-size:12px;line-height:1.7}#codex-onepager-card .gc-section-title{margin:20px 16px 12px}#codex-onepager-card .gc-stats-grid{margin:0 16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#codex-onepager-card .gc-stat{grid-template-columns:25px minmax(0,1fr);padding:8px 6px;gap:5px}#codex-onepager-card .gc-stat-icon{width:24px;height:24px}#codex-onepager-card .gc-stat-value{font-size:14px}#codex-onepager-card .gc-stat-label{font-size:8px;letter-spacing:0}#codex-onepager-card .gc-abilities{margin:0 16px;grid-template-columns:1fr}#codex-onepager-card .gc-ability{grid-template-columns:54px minmax(0,1fr);gap:10px;padding:11px}#codex-onepager-card .gc-ability img.gc-ability-icon{width:54px;height:54px}#codex-onepager-card .gc-ability-name{font-size:12px}#codex-onepager-card .gc-ability-desc{font-size:11px}#codex-onepager-card .gc-passive-box{margin:0 16px 12px;padding:12px;gap:10px;flex-wrap:wrap}#codex-onepager-card .gc-passive-box-collect{margin-left:0;padding-left:0}#codex-onepager-card .gc-skins-carousel{margin:0 16px 20px;gap:6px}#codex-onepager-card .gc-skins-viewport{height:220px}#codex-onepager-card .gc-skins-nav{width:28px;height:28px;flex-shrink:0}#codex-onepager-card .gc-footer{padding:20px}.ability-popup-window{width:calc(100% - 24px);max-height:85dvh;overflow:auto}}