/* ============================================================
   ADATLAP — prémium gyorsáttekintő
   Kizárólag a hero-index Adatlap kártyájára hat. A meglévő struktúrát
   és a közös export-stíluslapot érintetlenül hagyja.
   ============================================================ */

#codex-onepager-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 20px 18px 54px;
    background:
        radial-gradient(circle at 50% 3%, rgba(48, 111, 151, .11), transparent 28%),
        radial-gradient(circle at 18% 70%, rgba(201, 161, 59, .055), transparent 28%);
}

#codex-onepager-card {
    --gcp-gold: #e7bd59;
    --gcp-cyan: #59dcf5;
    counter-reset: gcp-section;
    position: relative;
    width: 1000px;
    min-height: 1200px;
    overflow: hidden;
    padding-bottom: 0;
    border: 1px solid rgba(231, 189, 89, .32);
    border-radius: 3px;
    background:
        radial-gradient(circle at 75% 18%, rgba(56, 113, 151, .09), transparent 30%),
        linear-gradient(145deg, #0a111b 0%, #060a11 48%, #090b12 100%);
    color: #e8eff3;
    box-shadow: 0 30px 80px rgba(0,0,0,.52), 0 0 38px rgba(231,189,89,.055), inset 0 0 65px rgba(81,150,186,.025);
}

#codex-onepager-card::before,
#codex-onepager-card::after {
    position: absolute;
    z-index: 20;
    width: 42px;
    height: 42px;
    content: "";
    pointer-events: none;
}

#codex-onepager-card::before { top: 8px; left: 8px; border-top: 1px solid rgba(231,189,89,.72); border-left: 1px solid rgba(231,189,89,.72); }
#codex-onepager-card::after { right: 8px; bottom: 8px; border-right: 1px solid rgba(231,189,89,.42); border-bottom: 1px solid rgba(231,189,89,.42); }

/* ---- Banner és rangvitrin ---- */

#codex-onepager-card .gc-banner-wrap { position: relative; width: 100%; height: 535px; overflow: hidden; border-bottom: 1px solid rgba(231,189,89,.1); background: #03070c; }
#codex-onepager-card .gc-banner-wrap::before { position: absolute; z-index: 4; inset: 9px; border: 1px solid rgba(255,255,255,.05); content: ""; pointer-events: none; }
#codex-onepager-card .gc-banner-wrap::after { position: absolute; z-index: 5; top: 0; left: 32px; width: 190px; height: 2px; content: ""; background: linear-gradient(90deg, transparent, var(--gcp-gold), transparent); box-shadow: 0 0 16px rgba(231,189,89,.52); pointer-events: none; }
#codex-onepager-card .gc-banner-img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; filter: saturate(.9) contrast(1.04); animation: gcpBannerDrift 14s ease-in-out infinite alternate; }
#codex-onepager-card .gc-banner-fade { z-index: 2; background: linear-gradient(90deg, rgba(4,8,14,.42), transparent 33% 70%, rgba(4,8,14,.24)), linear-gradient(180deg, rgba(4,8,14,.02) 30%, rgba(4,8,14,.32) 60%, #070b12 96%); }

#codex-onepager-card .gc-passive-badge {
    --gcp-mastery-rgb: 89,220,245;
    z-index: 6; top: 27px; left: 31px; width: 92px; height: 92px; padding: 10px; box-sizing: border-box;
    border: 1px solid rgba(var(--gcp-mastery-rgb),.68); border-radius: 50%; outline: 1px solid rgba(231,189,89,.2); outline-offset: 5px; object-fit: contain;
    background: radial-gradient(circle, rgba(var(--gcp-mastery-rgb),.17), rgba(4,9,15,.86) 66%), conic-gradient(from 25deg, rgba(var(--gcp-mastery-rgb),.36), rgba(231,189,89,.22), rgba(var(--gcp-mastery-rgb),.36));
    box-shadow: 0 0 0 4px rgba(3,7,13,.7), 0 0 24px rgba(var(--gcp-mastery-rgb),.28), 0 0 48px rgba(var(--gcp-mastery-rgb),.1), inset 0 0 18px rgba(var(--gcp-mastery-rgb),.12);
    backdrop-filter: blur(7px); filter: drop-shadow(0 5px 10px rgba(0,0,0,.62));
    animation: gcpMasteryGlow 3.4s ease-in-out infinite; transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}
#codex-onepager-card .gc-passive-badge[src*="hero_level_1"] { --gcp-mastery-rgb: 143,196,143; }
#codex-onepager-card .gc-passive-badge[src*="hero_level_2"] { --gcp-mastery-rgb: 85,222,234; }
#codex-onepager-card .gc-passive-badge[src*="hero_level_3"] { --gcp-mastery-rgb: 170,145,255; }
#codex-onepager-card .gc-passive-badge[src*="hero_level_4"] { --gcp-mastery-rgb: 255,174,85; }
#codex-onepager-card .gc-passive-badge[src*="hero_level_5"] { --gcp-mastery-rgb: 255,224,106; }
#codex-onepager-card .gc-passive-badge:hover { animation-play-state: paused; border-color: #fff0bc; transform: translateY(-3px) scale(1.055); box-shadow: 0 0 0 4px rgba(3,7,13,.76), 0 0 31px rgba(var(--gcp-mastery-rgb),.46), 0 0 58px rgba(var(--gcp-mastery-rgb),.16), inset 0 0 20px rgba(var(--gcp-mastery-rgb),.18); }

#codex-onepager-card .gc-tier-badge {
    --gcp-tier-rgb: 231,189,89;
    z-index: 6; top: 24px; right: 30px; width: 112px; height: 112px; padding: 9px; box-sizing: border-box;
    border: 1px solid rgba(var(--gcp-tier-rgb),.52); border-radius: 50%; outline: 1px solid rgba(var(--gcp-tier-rgb),.14); outline-offset: 5px; object-fit: contain;
    background: radial-gradient(circle at 50% 48%, rgba(var(--gcp-tier-rgb),.15), rgba(3,7,13,.8) 63%, rgba(3,7,13,.94));
    box-shadow: 0 0 0 4px rgba(3,7,13,.66), 0 0 26px rgba(var(--gcp-tier-rgb),.25), inset 0 0 22px rgba(var(--gcp-tier-rgb),.09);
    filter: drop-shadow(0 6px 13px rgba(0,0,0,.7)); animation: gcpTierGlow 4.2s ease-in-out infinite; transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}
#codex-onepager-card .gc-tier-badge[src$="_SSS.webp"] { --gcp-tier-rgb: 203,132,255; }
#codex-onepager-card .gc-tier-badge[src$="_SS.webp"] { --gcp-tier-rgb: 95,220,255; }
#codex-onepager-card .gc-tier-badge[src$="_S.webp"] { --gcp-tier-rgb: 255,191,73; }
#codex-onepager-card .gc-tier-badge[src$="_AA.webp"] { --gcp-tier-rgb: 255,151,89; }
#codex-onepager-card .gc-tier-badge[src$="_A.webp"] { --gcp-tier-rgb: 185,204,218; }
#codex-onepager-card .gc-tier-badge:hover { animation-play-state: paused; border-color: rgba(var(--gcp-tier-rgb),.92); transform: translateY(-3px) scale(1.055); box-shadow: 0 0 0 4px rgba(3,7,13,.72), 0 0 34px rgba(var(--gcp-tier-rgb),.43), inset 0 0 25px rgba(var(--gcp-tier-rgb),.15); }

#codex-onepager-card .gc-relic-showcase {
    z-index: 6; right: 28px; bottom: 28px; width: 112px; height: 112px; padding: 8px; box-sizing: border-box;
    overflow: visible; border: 1px solid rgba(183,145,255,.48); border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(87,224,255,.65), rgba(161,111,255,.68), rgba(255,115,207,.58), rgba(231,189,89,.7), rgba(87,224,255,.65));
    box-shadow: 0 0 28px rgba(151,105,255,.2); animation: gcpRelicFloat 4.8s ease-in-out infinite;
}
#codex-onepager-card .gc-relic-showcase::before { position: absolute; z-index: -1; inset: 5px; border-radius: inherit; background: #070b13; content: ""; }
#codex-onepager-card .gc-relic-showcase img { width: 100%; height: 100%; border-radius: 0; object-fit: contain; filter: drop-shadow(0 0 11px rgba(170,130,255,.35)); }
#codex-onepager-card .gc-relic-showcase.is-locked { opacity: .58; filter: grayscale(.65) brightness(.65); box-shadow: none; }

/* ---- Hősazonosság ---- */

#codex-onepager-card .gc-avatar-row { position: relative; z-index: 7; display: flex; align-items: flex-end; gap: 23px; margin-top: -118px; padding: 0 42px; }
#codex-onepager-card .gc-avatar { width: 184px; height: 184px; padding: 5px; box-sizing: border-box; border: 1px solid rgba(231,189,89,.72); border-radius: 50%; background: #07101a; box-shadow: 0 12px 34px rgba(0,0,0,.68), 0 0 24px rgba(231,189,89,.13), inset 0 0 0 4px rgba(255,255,255,.035); }
#codex-onepager-card .gc-identity { min-width: 0; padding-bottom: 16px; }
#codex-onepager-card .gc-name { margin: 0 0 7px; color: #fff3d8; font-family: "AOW", serif; font-size: 2.85rem; font-weight: 400; letter-spacing: .04em; line-height: 1; text-shadow: 0 3px 18px rgba(0,0,0,.9); }
#codex-onepager-card .gc-meta { display: flex; align-items: center; gap: 9px; color: rgba(197,212,222,.72); font-size: .78rem; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; }
#codex-onepager-card .gc-meta .gc-tier-pill { padding: 5px 10px; border: 1px solid rgba(231,189,89,.38); border-radius: 1px; background: rgba(29,23,8,.72); color: var(--gcp-gold); font-size: .67rem; letter-spacing: .08em; }
#codex-onepager-card .gc-meta .gc-dot { color: rgba(231,189,89,.48); }
#codex-onepager-card .gc-partner-logo { margin-bottom: 12px; }
#codex-onepager-card .gc-partner-logo-label { color: rgba(197,212,222,.54); font-size: .62rem; }
#codex-onepager-card .gc-partner-logo img { height: 56px; }

/* ---- Rövid hősprofil ---- */

#codex-onepager-card .gc-bio {
    position: relative; margin: 22px 42px 0; padding: 30px 22px 17px;
    border: 1px solid rgba(174,199,215,.1); border-radius: 2px;
    background: linear-gradient(110deg, rgba(13,26,40,.7), rgba(5,10,17,.72));
    color: rgba(201,214,222,.78); font-family: "SpectralBold", Georgia, serif; font-size: .86rem; font-weight: 400; line-height: 1.55;
}
#codex-onepager-card .gc-bio::before { position: absolute; top: 10px; left: 21px; color: rgba(89,220,245,.55); font-family: "Segoe UI", sans-serif; font-size: .49rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; content: "Hősprofil"; }
#codex-onepager-card .gc-bio::after { position: absolute; top: -1px; left: -1px; width: 16px; height: 16px; border-top: 1px solid rgba(89,220,245,.52); border-left: 1px solid rgba(89,220,245,.52); content: ""; }
#codex-onepager-card .gc-hero-title { margin: 0 0 8px; color: #f0c967; font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-style: italic; font-weight: 400; letter-spacing: .025em; line-height: 1.25; text-shadow: 0 0 12px rgba(231,189,89,.14); }

/* ---- Számozott szekciófejlécek ---- */

#codex-onepager-card .gc-section-title { counter-increment: gcp-section; display: flex; align-items: center; gap: 10px; margin: 26px 42px 12px; color: #f0e7d6; font-family: "AOW", serif; font-size: 1.14rem; font-weight: 400; letter-spacing: .055em; }
#codex-onepager-card .gc-section-title::before { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(231,189,89,.27); color: rgba(231,189,89,.62); font-family: "Segoe UI", sans-serif; font-size: .49rem; font-weight: 700; content: "0" counter(gcp-section); }
#codex-onepager-card .gc-section-title::after { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(231,189,89,.38), rgba(89,220,245,.08), transparent); }

/* ---- Statműszerfal ---- */

#codex-onepager-card .gc-stats-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin: 0 42px; }
#codex-onepager-card .gc-stat { position: relative; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 8px; min-width: 0; padding: 9px; overflow: hidden; border: 1px solid rgba(173,199,215,.09); border-radius: 2px; background: rgba(4,10,17,.62); }
#codex-onepager-card .gc-stat::after { position: absolute; right: -18px; bottom: -28px; width: 58px; height: 58px; border: 1px solid rgba(89,220,245,.055); border-radius: 50%; content: ""; }
#codex-onepager-card .gc-stat img { width: 20px; height: 20px; padding: 6px; border: 1px solid rgba(89,220,245,.12); border-radius: 50%; background: rgba(89,220,245,.035); object-fit: contain; }
#codex-onepager-card .gc-stat-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.14; }
#codex-onepager-card .gc-stat-label { overflow: hidden; color: rgba(159,179,194,.52); font-size: .49rem; font-weight: 650; letter-spacing: .04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
#codex-onepager-card .gc-stat-value { margin-top: 2px; color: #edf5f8; font-size: .82rem; font-weight: 750; }

/* ---- Passzív és képességek ---- */

#codex-onepager-card .gc-passive-box { position: relative; display: flex; align-items: center; gap: 14px; margin: 0 42px 11px; padding: 13px 15px; overflow: hidden; border: 1px solid rgba(178,143,255,.2); border-radius: 2px; background: linear-gradient(100deg, rgba(83,57,133,.13), rgba(5,10,17,.68) 48%); }
#codex-onepager-card .gc-passive-box::after { position: absolute; right: -55px; width: 150px; height: 150px; border: 1px solid rgba(178,143,255,.06); border-radius: 50%; content: ""; }
#codex-onepager-card .gc-passive-box > img { width: 56px; height: 56px; border: 1px solid rgba(231,189,89,.38); border-radius: 50%; object-fit: cover; box-shadow: 0 0 14px rgba(178,143,255,.1); }
#codex-onepager-card .gc-passive-box-title { margin-bottom: 3px; color: rgba(184,153,255,.66); font-size: .52rem; letter-spacing: .13em; }
#codex-onepager-card .gc-passive-box-name { margin-bottom: 3px; color: #f1e7d1; font-family: "AOW", serif; font-size: .86rem; font-weight: 400; letter-spacing: .025em; }
#codex-onepager-card .gc-passive-box-desc { display: -webkit-box; overflow: hidden; color: rgba(188,202,212,.68); font-size: .68rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#codex-onepager-card .gc-passive-box-collect { position: relative; z-index: 1; gap: 6px; margin-left: auto; padding-left: 12px; }
#codex-onepager-card .gc-passive-box-collect-icon { width: 58px; height: 58px; padding: 3px; box-sizing: border-box; border: 1px solid rgba(231,189,89,.24); border-radius: 50%; background: rgba(231,189,89,.035); object-fit: contain; }

#codex-onepager-card .gc-abilities { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0 42px; }
#codex-onepager-card .gc-ability { position: relative; display: grid; grid-template-columns: 74px minmax(0,1fr); gap: 12px; min-height: 94px; padding: 12px; overflow: hidden; border: 1px solid rgba(173,199,215,.1); border-radius: 2px; background: linear-gradient(125deg, rgba(12,24,37,.78), rgba(4,9,16,.72)); }
#codex-onepager-card .gc-ability::after { position: absolute; right: -28px; bottom: -48px; width: 95px; height: 95px; border: 1px solid rgba(89,220,245,.055); border-radius: 50%; content: ""; }
#codex-onepager-card .gc-ability img.gc-ability-icon { width: 74px; height: 74px; border: 1px solid rgba(89,220,245,.26); border-radius: 3px; object-fit: cover; box-shadow: 0 0 13px rgba(89,220,245,.07); }
#codex-onepager-card .gc-abilities .gc-ability:nth-child(4) { border-color: rgba(231,189,89,.24); background: linear-gradient(125deg, rgba(37,27,11,.52), rgba(6,9,15,.76)); }
#codex-onepager-card .gc-abilities .gc-ability:nth-child(4) img.gc-ability-icon { border-color: rgba(231,189,89,.72); box-shadow: 0 0 16px rgba(231,189,89,.2); }
#codex-onepager-card .gc-ability-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#codex-onepager-card .gc-ability-head { display: flex; align-items: baseline; gap: 7px; padding-right: 0; flex-wrap: wrap; }
#codex-onepager-card .gc-ability-name { color: #eee7d9; font-size: .75rem; font-weight: 700; line-height: 1.2; }
#codex-onepager-card .gc-ability-mana { color: #68b9f2; font-size: .53rem; font-style: normal; white-space: nowrap; }
#codex-onepager-card .gc-ability-activation { position: static; top: auto; right: auto; flex: 0 0 auto; margin-left: auto; padding: 2px 7px; border: 1px solid rgba(231,189,89,.3); border-radius: 1px; background: rgba(231,189,89,.07); color: var(--gcp-gold); font-size: .52rem; }
#codex-onepager-card .gc-ability-desc { display: -webkit-box; overflow: hidden; color: rgba(173,190,201,.65); font-family: "SpectralBold", Georgia, serif; font-size: .62rem; font-weight: 400; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#codex-onepager-card .gc-ability-desc .ability-inline-icon,
#codex-onepager-card .gc-passive-box-desc .ability-inline-icon { display: none; }
#codex-onepager-card .gc-ability-fx { gap: 4px; margin-top: auto; }
#codex-onepager-card .gc-ability-fx img { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; object-fit: cover; }

/* ---- Skin gyorsnézet ---- */

#codex-onepager-card .gc-skins-carousel { display: flex; align-items: center; gap: 12px; margin: 0 42px 22px; }
#codex-onepager-card .gc-skins-viewport { flex: 1; min-width: 0; height: 270px; overflow: hidden; border: 1px solid rgba(173,199,215,.1); border-radius: 2px; background: rgba(3,8,14,.62); }
#codex-onepager-card .gc-skins-track { height: 100%; transition: transform 420ms var(--ease-premium); }
#codex-onepager-card .gc-skin { position: relative; flex: 0 0 100%; height: 100%; gap: 0; overflow: hidden; }
#codex-onepager-card .gc-skin-img-wrap { width: 100%; height: 100%; }
#codex-onepager-card .gc-skin-img-wrap::after { position: absolute; z-index: 1; inset: 0; background: linear-gradient(0deg, rgba(3,7,13,.9), transparent 42%); content: ""; pointer-events: none; }
#codex-onepager-card .gc-skin-img-wrap > img { width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; object-position: center; transition: transform 600ms var(--ease-premium), filter var(--t-mid); }
#codex-onepager-card .gc-skin:hover .gc-skin-img-wrap > img { transform: scale(1.025); }
#codex-onepager-card .gc-skin.is-locked .gc-skin-img-wrap > img { filter: grayscale(.9) brightness(.42); }
#codex-onepager-card .gc-skin-name { position: absolute; z-index: 3; right: 18px; bottom: 14px; left: 18px; color: #f3ead8; font-family: "AOW", serif; font-size: .82rem; letter-spacing: .035em; text-align: left; text-shadow: 0 2px 10px #000; }
#codex-onepager-card .gc-skin-lock-group { z-index: 3; gap: 8px; }
#codex-onepager-card .gc-skin-lock-group .skin-card-lock img { width: 42px; height: 42px; }
#codex-onepager-card .gc-skin-lock-group .skin-card-price-row { padding: 5px 10px; border: 1px solid rgba(231,189,89,.2); border-radius: 1px; background: rgba(3,7,13,.72); color: #e8dfcf; }
#codex-onepager-card .gc-skins-nav { width: 38px; height: 38px; border: 1px solid rgba(231,189,89,.2); border-radius: 50%; background: rgba(3,8,14,.66); color: rgba(231,189,89,.72); font-size: 1rem; box-shadow: 0 5px 15px rgba(0,0,0,.2); transition: border-color var(--t-fast), color var(--t-fast), transform var(--t-fast); }
#codex-onepager-card .gc-skins-nav:hover { border-color: rgba(231,189,89,.6); background: rgba(22,18,9,.75); color: #f2d77f; transform: scale(1.06); }
#codex-onepager-card .gc-no-skins { margin: 0 42px 20px; padding: 18px; border: 1px solid rgba(255,255,255,.07); color: rgba(159,179,194,.58); font-size: .7rem; text-align: center; }

/* ---- Lábléc ---- */

#codex-onepager-card .gc-footer { position: relative; height: 82px; margin-top: 10px; border-top: 1px solid rgba(231,189,89,.08); background: linear-gradient(0deg, #05080d, rgba(5,8,13,.35)); }
#codex-onepager-card .gc-footer::before, #codex-onepager-card .gc-footer::after { width: 120px; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgba(231,189,89,.25)); }
#codex-onepager-card .gc-footer::after { transform: scaleX(-1); }
#codex-onepager-card .gc-footer img { height: 42px; opacity: .82; filter: drop-shadow(0 3px 9px rgba(0,0,0,.6)); }

@keyframes gcpBannerDrift { from { transform: scale(1.01) translate3d(0,0,0); } to { transform: scale(1.035) translate3d(0,-4px,0); } }
@keyframes gcpRelicFloat { 0%,100% { transform: translateY(0) rotate(-.35deg); } 50% { transform: translateY(-6px) rotate(.35deg); } }
@keyframes gcpMasteryGlow { 0%,100% { box-shadow: 0 0 0 4px rgba(3,7,13,.7), 0 0 20px rgba(var(--gcp-mastery-rgb),.22), 0 0 42px rgba(var(--gcp-mastery-rgb),.08), inset 0 0 16px rgba(var(--gcp-mastery-rgb),.1); } 50% { box-shadow: 0 0 0 4px rgba(3,7,13,.72), 0 0 31px rgba(var(--gcp-mastery-rgb),.38), 0 0 58px rgba(var(--gcp-mastery-rgb),.14), inset 0 0 22px rgba(var(--gcp-mastery-rgb),.17); } }
@keyframes gcpTierGlow { 0%,100% { box-shadow: 0 0 0 4px rgba(3,7,13,.66), 0 0 22px rgba(var(--gcp-tier-rgb),.2), inset 0 0 18px rgba(var(--gcp-tier-rgb),.08); } 50% { box-shadow: 0 0 0 4px rgba(3,7,13,.7), 0 0 34px rgba(var(--gcp-tier-rgb),.34), inset 0 0 26px rgba(var(--gcp-tier-rgb),.15); } }

@media (max-width: 760px) {
    #codex-onepager-wrap { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    #codex-onepager-card .gc-banner-img,
    #codex-onepager-card .gc-relic-showcase,
    #codex-onepager-card .gc-passive-badge,
    #codex-onepager-card .gc-tier-badge { animation: none; }
    #codex-onepager-card .gc-skin-img-wrap > img,
    #codex-onepager-card .gc-skins-track { transition: none; }
}