/* ============================================================
   KÉPESSÉGEK — prémium harci képességtár
   ============================================================ */

#codex-tab-abilities { position: relative; isolation: isolate; }
#codex-tab-abilities.codex-tab-panel.is-active { display: block; padding: 0 2px 42px; overflow-x: hidden; }

.cab-ambient { position: fixed; z-index: -2; inset: 0; background: radial-gradient(circle at 72% 18%, rgba(67,84,192,.12), transparent 34%), radial-gradient(circle at 18% 70%, rgba(35,149,177,.08), transparent 32%); pointer-events: none; }

.cab-intro {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px;
    width: min(100%, 1250px); min-height: 116px; margin: 0 auto 16px; padding: 22px 27px; box-sizing: border-box; overflow: hidden;
    border: 1px solid rgba(181,204,219,.14); border-radius: 3px;
    background: linear-gradient(108deg, rgba(11,23,38,.96), rgba(5,10,18,.93));
    box-shadow: 0 16px 38px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.025);
}

.cab-intro::before { position: absolute; top: 0; left: 25px; width: 190px; height: 2px; content: ""; background: linear-gradient(90deg, transparent, #5ee7ff, transparent); box-shadow: 0 0 15px rgba(94,231,255,.42); }
.cab-intro::after { position: absolute; right: -72px; bottom: -128px; width: 300px; height: 300px; content: ""; border: 1px solid rgba(94,231,255,.075); border-radius: 50%; box-shadow: 0 0 0 34px rgba(94,231,255,.012), 0 0 0 35px rgba(94,231,255,.045); }
.cab-intro-copy, .cab-intro-meta { position: relative; z-index: 1; }
.cab-kicker, .ability-kind { color: rgba(94,231,255,.68); font-size: .57rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.cab-kicker { display: flex; align-items: center; gap: 8px; }
.cab-kicker i { width: 24px; height: 1px; background: currentColor; box-shadow: 0 0 7px currentColor; }
.cab-intro h2 { margin: 6px 0 3px; color: #f7f1df; font-family: "AOW", serif; font-size: 1.65rem; font-weight: 400; letter-spacing: .04em; }
.cab-intro p { margin: 0; color: rgba(159,179,194,.62); font-size: .68rem; letter-spacing: .04em; }
.cab-intro-meta { display: flex; align-items: center; gap: 22px; }
.cab-intro-meta > div:first-child { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 7px; min-width: 92px; padding-right: 21px; border-right: 1px solid rgba(255,255,255,.08); }
.cab-intro-meta > div:first-child span { grid-column: 1 / -1; color: rgba(159,179,194,.52); font-size: .49rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cab-intro-meta > div:first-child strong { color: #effbff; font-family: "AOW", serif; font-size: 1.65rem; font-weight: 400; line-height: 1; }
.cab-intro-meta > div:first-child small { color: rgba(94,231,255,.58); font-size: .55rem; letter-spacing: .08em; text-transform: uppercase; }
.cab-effect-legend { display: flex; flex-direction: column; gap: 7px; }
.cab-effect-legend span { display: flex; align-items: center; gap: 7px; color: rgba(183,201,213,.65); font-size: .55rem; letter-spacing: .06em; text-transform: uppercase; }
.cab-effect-legend i { width: 7px; height: 7px; border-radius: 50%; }
.cab-effect-legend i.is-buff { background: var(--c-buff); box-shadow: 0 0 8px rgba(109,247,193,.6); }
.cab-effect-legend i.is-debuff { background: var(--c-debuff); box-shadow: 0 0 8px rgba(255,107,106,.6); }

/* ---- Képességkártyák ---- */

#codex-abilities { display: flex; flex-direction: column; gap: 13px; width: min(100%, 1250px); margin: 0 auto; }

.ability-box {
    --cab-accent: #59dff5; --cab-accent-rgb: 89,223,245;
    position: relative; isolation: isolate; display: grid; grid-template-columns: 210px minmax(0,1fr); min-height: 246px; overflow: hidden;
    border: 1px solid rgba(164,197,216,.14); border-radius: 3px;
    background: linear-gradient(125deg, rgba(9,20,33,.97), rgba(4,9,16,.96));
    box-shadow: 0 16px 36px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.022);
    transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
}

.ability-box::before { position: absolute; z-index: 4; top: -1px; left: -1px; width: 30px; height: 30px; border-top: 1px solid color-mix(in srgb, var(--cab-accent) 72%, transparent); border-left: 1px solid color-mix(in srgb, var(--cab-accent) 72%, transparent); content: ""; pointer-events: none; }
.ability-box::after { position: absolute; z-index: -1; top: -90px; left: 45px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--cab-accent-rgb),.11), transparent 65%); content: ""; pointer-events: none; }
.ability-box:hover { border-color: rgba(var(--cab-accent-rgb),.34); transform: translateY(-2px); box-shadow: 0 20px 44px rgba(0,0,0,.32), inset 0 0 30px rgba(var(--cab-accent-rgb),.022); }

.ability-box--ultimate { --cab-accent: #c48aff; --cab-accent-rgb: 196,138,255; border-color: rgba(196,138,255,.24); background: linear-gradient(125deg, rgba(24,15,40,.95), rgba(6,8,17,.98)); }
.passive-box { --cab-accent: #e6bd58; --cab-accent-rgb: 230,189,88; margin: 0; border-color: rgba(230,189,88,.25); background: linear-gradient(125deg, rgba(29,24,13,.84), rgba(5,9,15,.97)); }

/* ---- Ikonkamra ---- */

.ability-icon-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 246px; padding: 22px 16px 18px; overflow: hidden; border: 0; border-right: 1px solid rgba(255,255,255,.065); background: radial-gradient(circle at 50% 43%, rgba(var(--cab-accent-rgb),.13), transparent 52%), rgba(2,7,13,.38); }
.ability-icon-wrapper::before, .ability-icon-wrapper::after { position: absolute; content: ""; pointer-events: none; }
.ability-icon-wrapper::before { inset: 11px; border: 1px solid rgba(var(--cab-accent-rgb),.06); }
.ability-icon-wrapper::after { right: -54px; bottom: -78px; width: 160px; height: 160px; border: 1px solid rgba(var(--cab-accent-rgb),.08); border-radius: 50%; }
.ability-card-index { position: absolute; z-index: 4; top: 15px; left: 16px; color: rgba(var(--cab-accent-rgb),.5); font-family: "AOW", serif; font-size: .78rem; letter-spacing: .06em; }

.ability-vip-switch {
    position: absolute; z-index: 6; top: 12px; right: 13px; display: inline-flex; align-items: center; gap: 7px;
    min-width: 58px; height: 28px; padding: 0 7px 0 9px; border: 1px solid rgba(230,189,88,.34); border-radius: 2px;
    background: linear-gradient(145deg,rgba(20,12,30,.94),rgba(7,10,17,.96)); color: rgba(238,211,126,.68);
    font-family: Montserrat,sans-serif; font-size: .48rem; font-weight: 800; letter-spacing: .11em; cursor: pointer;
    box-shadow: inset 0 1px rgba(255,255,255,.035),0 5px 14px rgba(0,0,0,.28); transition: .25s ease;
}
.ability-icon-mode-switches { position: absolute; z-index: 6; top: 12px; right: 13px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.ability-icon-mode-switches .ability-vip-switch { position: relative; top: auto; right: auto; }
.ability-upgraded-switch { min-width: 68px; border-color: rgba(69,211,255,.42); color: rgba(133,229,255,.82); }
.ability-upgraded-switch[aria-pressed="true"] { border-color: #66ddff; background: linear-gradient(135deg,rgba(14,97,143,.94),rgba(12,28,52,.98)); color: #d7f8ff; box-shadow: inset 0 0 14px rgba(87,220,255,.12),0 0 17px rgba(45,190,255,.38); }
.ability-icon-wrapper.is-upgraded-mode { background: radial-gradient(circle at 50% 43%,rgba(43,192,255,.2),transparent 52%),radial-gradient(circle at 52% 42%,rgba(102,255,225,.08),transparent 66%),rgba(2,12,22,.52); }
.ability-icon-wrapper.is-upgraded-mode .ability-icon-orbit { border-color: rgba(80,221,255,.45); box-shadow: 0 0 32px rgba(42,190,255,.25),inset 0 0 28px rgba(67,238,255,.1); }
.ability-icon.is-upgraded-icon { border-color: #66ddff; filter: saturate(1.15) brightness(1.08); box-shadow: 0 0 0 2px rgba(27,105,156,.78),0 0 29px rgba(58,205,255,.45),inset 0 0 14px rgba(0,0,0,.35); animation: cabVipIconReveal .42s cubic-bezier(.2,.9,.25,1.15); }

/* Xamandra külön, lenyitható ereklyetára a Képességek fülön. */
.codex-xamandra-relics { position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid rgba(232,183,69,.34); background: radial-gradient(circle at 12% 0,rgba(226,166,45,.12),transparent 36%),linear-gradient(145deg,rgba(25,16,7,.94),rgba(5,11,17,.96)); box-shadow: inset 0 0 34px rgba(232,173,48,.06),0 18px 38px rgba(0,0,0,.3); }
.codex-xamandra-relics > header span { color: #eabe58; font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-xamandra-relics > header h3 { margin: 7px 0 5px; color: #fff0b5; font: 400 1.65rem/1.1 AOW,serif; }
.codex-xamandra-relics > header p { margin: 0; color: rgba(222,211,181,.68); font-size: .74rem; }
.codex-xamandra-relic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 20px; }
.codex-xamandra-relic-card { border: 1px solid rgba(223,173,55,.22); background: rgba(8,8,9,.66); transition: .25s ease; }
.codex-xamandra-relic-card:hover { border-color: rgba(255,215,102,.62); box-shadow: 0 0 22px rgba(218,155,31,.12); }
.codex-xamandra-relic-summary { display: grid; grid-template-columns: 24px 58px 1fr; align-items: center; gap: 10px; min-height: 86px; padding: 12px; }
.codex-xamandra-relic-summary > b { align-self: start; color: rgba(234,188,76,.43); font: 800 .58rem/1 Montserrat,sans-serif; }
.codex-xamandra-relic-summary > img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(238,180,53,.42)); }
.codex-xamandra-relic-summary span { min-width: 0; }
.codex-xamandra-relic-summary small,.codex-xamandra-relic-summary strong { display: block; }
.codex-xamandra-relic-summary small { color: #b9903f; font: 700 .46rem/1.25 Montserrat,sans-serif; letter-spacing: .08em; }
.codex-xamandra-relic-summary strong { margin-top: 5px; color: #f8e6af; font: 400 .82rem/1.2 AOW,serif; }
.codex-xamandra-relic-card > div:last-child { padding: 0 15px 15px; border-top: 1px solid rgba(229,184,73,.13); color: rgba(229,220,196,.76); font-size: .68rem; line-height: 1.55; }
.codex-xamandra-relic-card > div:last-child p { margin: 12px 0 10px; }
.codex-xamandra-relic-card > div:last-child ul { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
.codex-xamandra-relic-card > div:last-child li { padding: 4px 7px; border: 1px solid rgba(236,191,78,.24); color: #f1cf77; background: rgba(109,73,13,.2); font-size: .55rem; font-weight: 700; }
@media (max-width: 900px) { .codex-xamandra-relic-grid { grid-template-columns: 1fr; } }

.ability-vip-switch::before { position: absolute; inset: -1px; border-radius: inherit; background: linear-gradient(115deg,transparent 22%,rgba(255,230,147,.18) 48%,transparent 72%); content: ""; opacity: 0; transform: translateX(-40%); transition: .35s ease; pointer-events: none; }
.ability-vip-switch span,.ability-vip-switch i { position: relative; z-index: 1; }
.ability-vip-switch i { width: 16px; height: 10px; border: 1px solid rgba(230,189,88,.32); border-radius: 10px; background: rgba(255,255,255,.055); box-shadow: inset 0 0 5px rgba(0,0,0,.65); }
.ability-vip-switch i::after { position: absolute; top: 2px; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: rgba(222,231,238,.5); content: ""; box-shadow: 0 0 4px rgba(255,255,255,.22); transition: .25s ease; }
.ability-vip-switch:hover { border-color: rgba(244,205,77,.72); color: #ffe79a; box-shadow: 0 0 18px rgba(182,94,221,.17),0 7px 18px rgba(0,0,0,.36); transform: translateY(-1px); }
.ability-vip-switch:hover::before { opacity: 1; transform: translateX(32%); }
.ability-vip-switch[aria-pressed="true"] { border-color: #e9c650; background: linear-gradient(135deg,rgba(111,43,142,.94),rgba(31,16,48,.98)); color: #fff1b9; box-shadow: inset 0 0 14px rgba(255,207,77,.09),0 0 16px rgba(192,92,231,.35),0 0 8px rgba(239,197,68,.24); }
.ability-vip-switch[aria-pressed="true"] i { border-color: #f4d46f; background: rgba(234,196,73,.18); }
.ability-vip-switch[aria-pressed="true"] i::after { left: 8px; background: #fff0a3; box-shadow: 0 0 8px #f1cb55; }
.ability-icon-mode-switches .ability-upgraded-switch[aria-pressed="true"] { border-color: #66ddff; background: linear-gradient(135deg,rgba(14,97,143,.94),rgba(12,28,52,.98)); color: #d7f8ff; box-shadow: inset 0 0 14px rgba(87,220,255,.12),0 0 17px rgba(45,190,255,.38); }
.ability-icon-mode-switches .ability-upgraded-switch[aria-pressed="true"] i { border-color: #78e7ff; background: rgba(63,200,255,.18); }
.ability-icon-mode-switches .ability-upgraded-switch[aria-pressed="true"] i::after { background: #baf5ff; box-shadow: 0 0 8px #58dfff; }
.ability-icon-wrapper.is-vip-mode { background: radial-gradient(circle at 50% 43%,rgba(179,77,222,.18),transparent 52%),radial-gradient(circle at 52% 42%,rgba(235,195,70,.08),transparent 66%),rgba(5,3,12,.5); }
.ability-icon-wrapper.is-vip-mode .ability-icon-orbit { border-color: rgba(234,195,72,.36); box-shadow: 0 0 30px rgba(176,75,216,.2),inset 0 0 26px rgba(234,195,72,.08); }
.ability-icon.is-vip-icon { border-color: #edcb5d; filter: saturate(1.08) brightness(1.07); box-shadow: 0 0 0 2px rgba(115,51,143,.76),0 0 27px rgba(193,83,226,.38),0 0 16px rgba(236,197,71,.2),inset 0 0 14px rgba(0,0,0,.38); animation: cabVipIconReveal .42s cubic-bezier(.2,.9,.25,1.15); }

/* Az orbit-gyűrű a flex-folyamban marad (nem fix top-hoz kötve), így magasabb
   kártyáknál sem csúszik el az ikon fölé: a negatív margók kinullázzák a saját
   helyigényét, és a 124px-es ikont pont a 152px-es kör közepére igazítják. */
.ability-icon-orbit { position: relative; z-index: 0; flex: 0 0 auto; width: 152px; height: 152px; margin: -14px 0 -138px; border: 1px solid rgba(var(--cab-accent-rgb),.18); border-radius: 50%; box-shadow: 0 0 24px rgba(var(--cab-accent-rgb),.08), inset 0 0 22px rgba(var(--cab-accent-rgb),.05); pointer-events: none; }
.ability-icon-orbit::before { position: absolute; inset: -1px; content: ""; border: 1px solid transparent; border-top-color: rgba(var(--cab-accent-rgb),.7); border-right-color: rgba(var(--cab-accent-rgb),.22); border-radius: 50%; animation: cabOrbitSpin 7s linear infinite; }
.ability-icon-orbit::after { position: absolute; top: 9px; right: 8px; width: 5px; height: 5px; content: ""; border-radius: 50%; background: var(--cab-accent); box-shadow: 0 0 10px var(--cab-accent); }

.ability-icon { position: relative; z-index: 2; width: 124px; height: 124px; border: 1px solid rgba(var(--cab-accent-rgb),.42); border-radius: 4px; object-fit: cover; cursor: pointer; box-shadow: 0 0 24px rgba(var(--cab-accent-rgb),.16), inset 0 0 14px rgba(0,0,0,.45); transition: transform var(--t-mid), border-color var(--t-mid), filter var(--t-mid), box-shadow var(--t-mid); }
.ability-icon:hover { border-color: var(--cab-accent); transform: scale(1.035); filter: brightness(1.1); box-shadow: 0 0 30px rgba(var(--cab-accent-rgb),.28); }
.ability-icon-hint { position: relative; z-index: 2; margin-top: 13px; color: rgba(159,179,194,.42); font-size: .47rem; font-weight: 700; letter-spacing: .11em; text-align: center; text-transform: uppercase; }

/* Aktiválási mérő */
.ability-act-gauge { position: absolute; z-index: 3; right: 20px; bottom: 37px; left: 20px; top: auto; width: auto; height: 4px; overflow: visible; border-radius: 0; background: rgba(255,255,255,.07); }
.ability-act-gauge-fill { position: absolute; inset: 0 auto 0 0; width: var(--cab-gauge,100%); height: 100% !important; border-radius: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--cab-accent) 45%, #224056), var(--cab-accent), #efffff); box-shadow: 0 0 8px rgba(var(--cab-accent-rgb),.42); }
.ability-act-gauge-label { position: absolute; right: 0; bottom: 8px; left: auto; top: auto; display: flex; align-items: baseline; gap: 5px; color: var(--cab-accent); font-size: .62rem; font-weight: 700; white-space: nowrap; }
.ability-act-gauge-label small { color: rgba(159,179,194,.46); font-size: .44rem; letter-spacing: .08em; text-transform: uppercase; }
.ability-act-gauge-label strong { font-size: .65rem; }

/* ---- Szöveges rész ---- */

.ability-info { min-width: 0; padding: 22px 24px 20px; }
.ability-info-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 9px; }
.ability-title-block { min-width: 0; }
.ability-kind { display: block; margin-bottom: 5px; color: rgba(var(--cab-accent-rgb),.62); font-size: .5rem; }
.ability-info h3 { margin: 0; color: #f5efdf; font-family: "AOW", serif; font-size: 1.3rem; font-weight: 400; letter-spacing: .035em; line-height: 1.15; }
.ability-mana-tag { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 9px; border: 1px solid rgba(76,157,255,.18); background: rgba(33,92,164,.08); color: #65b9ff; font-size: .6rem; font-weight: 700; letter-spacing: .035em; white-space: nowrap; }
.ability-mana-tag img { width: 14px; height: 14px; filter: drop-shadow(0 0 5px rgba(76,157,255,.4)); }
.ability-mana-tag.passive-tag { border-color: rgba(230,189,88,.22); background: rgba(230,189,88,.07); color: #e6bd58; letter-spacing: .08em; text-transform: uppercase; }
.ability-info .ability-desc { margin: 0 0 15px; max-width: none; color: rgba(181,199,211,.72); font-family: "SpectralBold", Georgia, serif; font-size: .76rem; font-weight: 400; line-height: 1.58; }

/* A 25 reworked hős összetett képességeinek közös olvasási hierarchiája. */
.ability-desc .ability-description-summary { display: block; color: rgba(225,235,241,.9); font-size: .8rem; line-height: 1.52; overflow-wrap: anywhere; }
.ability-patch-copy { display: block; margin-top: 13px; padding-top: 11px; border-top: 1px solid rgba(var(--cab-accent-rgb),.13); }
.ability-patch-copy-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.ability-patch-detail { position: relative; display: grid; grid-template-columns: 29px minmax(0,1fr); align-items: start; gap: 10px; min-width: 0; min-height: 56px; padding: 10px 12px; overflow: hidden; border: 1px solid rgba(var(--cab-accent-rgb),.15); border-left: 2px solid rgba(var(--cab-accent-rgb),.7); border-radius: 3px; background: linear-gradient(112deg,rgba(var(--cab-accent-rgb),.075),rgba(2,7,12,.5) 48%,rgba(var(--cab-accent-rgb),.025)); box-shadow: inset 0 1px rgba(255,255,255,.018); font-family: Montserrat,sans-serif; }
.ability-patch-detail::after { position: absolute; right: -32px; bottom: -48px; width: 88px; height: 88px; border: 1px solid rgba(var(--cab-accent-rgb),.12); border-radius: 50%; content: ""; pointer-events: none; }
.ability-patch-detail:nth-child(odd):last-child { grid-column: 1 / -1; }
.ability-patch-detail > b { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(var(--cab-accent-rgb),.22); border-radius: 50%; color: rgba(var(--cab-accent-rgb),.8); background: rgba(var(--cab-accent-rgb),.07); font-size: .5rem; line-height: 1; letter-spacing: .04em; box-shadow: 0 0 10px rgba(var(--cab-accent-rgb),.07); }
.ability-patch-detail > span { display: grid; align-content: start; gap: 4px; min-width: 0; }
.ability-patch-detail strong { color: rgba(var(--cab-accent-rgb),.9); font-size: .58rem; line-height: 1.35; letter-spacing: .035em; text-transform: uppercase; overflow-wrap: anywhere; }
.ability-patch-detail small { color: rgba(209,222,230,.8); font-size: .67rem; font-weight: 500; line-height: 1.48; overflow-wrap: anywhere; }
.ability-desc .ability-progression { display: grid; grid-template-columns: 1fr; gap: 7px; margin-top: 12px; }
.ability-desc .ability-progression::before { grid-column: 1/-1; content: attr(data-progression-title); color: rgba(var(--cab-accent-rgb),.66); font: 800 .5rem/1 Montserrat,sans-serif; letter-spacing: .14em; }
.ability-desc .ability-progression-step { position: relative; display: grid; grid-template-columns: minmax(128px,22%) minmax(0,1fr); align-items: start; gap: 12px; min-width: 0; padding: 9px 10px; border: 1px solid rgba(var(--cab-accent-rgb),.13); border-left: 2px solid rgba(var(--cab-accent-rgb),.56); border-radius: 2px; background: linear-gradient(90deg,rgba(var(--cab-accent-rgb),.065),rgba(2,7,12,.38) 55%); }
.ability-desc .ability-progression-label { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; color: rgba(var(--cab-accent-rgb),.88); font: 800 .53rem/1.35 Montserrat,sans-serif; letter-spacing: .045em; text-transform: uppercase; overflow-wrap: anywhere; }
.ability-desc .ability-progression-label i { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; }
.ability-desc .ability-progression-copy { min-width: 0; color: rgba(213,226,235,.78); font-size: .7rem; line-height: 1.48; overflow-wrap: anywhere; }
.ability-desc .ability-progression.is-jaffar-rune-details .ability-progression-step { grid-template-columns: 112px minmax(0,1fr); }
.ability-desc .ability-progression.is-jaffar-rune-details .ability-progression-step.is-wide-label { grid-template-columns: minmax(0,1fr); gap: 5px; }
.ability-desc .ability-progression.is-jaffar-rune-details .ability-progression-step.is-wide-label .ability-progression-label { padding-bottom: 5px; border-bottom: 1px solid rgba(var(--cab-accent-rgb),.13); }
.ability-desc .ability-progression-name { display: block; margin-bottom: 2px; color: rgba(240,248,252,.92); font-size: .72rem; font-weight: 800; }
.ability-desc .ability-progression:not(.is-detail-list) .ability-progression-step:last-child { border-color: rgba(230,189,88,.25); border-left-color: rgba(230,189,88,.75); background: linear-gradient(90deg,rgba(230,189,88,.075),rgba(2,7,12,.38) 58%); }
.ability-desc .ability-progression:not(.is-detail-list) .ability-progression-step:last-child .ability-progression-label { color: #dfbd69; }
.ability-desc .ability-progression.is-detail-list .ability-progression-step { grid-template-columns: 86px minmax(0,1fr); }

@media (max-width: 900px) {
    .ability-patch-copy-list { grid-template-columns: 1fr; }
    .ability-patch-detail:nth-child(odd):last-child { grid-column: 1; }
    .ability-desc .ability-progression { grid-template-columns: 1fr; }
    .ability-desc .ability-progression::before { grid-column: 1; }
}

@media (max-width: 520px) {
    .ability-desc .ability-progression-step,
    .ability-desc .ability-progression.is-detail-list .ability-progression-step { grid-template-columns: 1fr; }
}

/* ---- Hatástábla ---- */

.ability-fx-table { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 12px 0 0; border-top: 1px solid rgba(255,255,255,.07); }
.ability-fx-header { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1px; padding: 0 2px; }
.ability-fx-header span { color: rgba(225,236,243,.68); font-size: .53rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ability-fx-header small { color: rgba(159,179,194,.38); font-size: .48rem; letter-spacing: .07em; text-transform: uppercase; }
.ability-fx-row { position: relative; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.055); border-left: 2px solid transparent; border-radius: 2px; background: rgba(2,7,12,.42); font-size: .65rem; }
.ability-fx-row::after { position: absolute; right: -20px; bottom: -34px; width: 70px; height: 70px; border: 1px solid currentColor; border-radius: 50%; content: ""; opacity: .035; }
.ability-fx-row.buff { border-left-color: rgba(109,247,193,.72); background: linear-gradient(90deg, rgba(109,247,193,.055), rgba(2,7,12,.4) 40%); }
.ability-fx-row.debuff { border-left-color: rgba(255,107,106,.72); background: linear-gradient(90deg, rgba(255,107,106,.055), rgba(2,7,12,.4) 40%); }
.ability-fx-icon { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.ability-fx-row.buff .ability-fx-icon { border-color: rgba(109,247,193,.18); background: rgba(109,247,193,.07); }
.ability-fx-row.debuff .ability-fx-icon { border-color: rgba(255,107,106,.18); background: rgba(255,107,106,.07); }
.ability-fx-icon img { width: 17px; height: 17px; object-fit: contain; }
.ability-fx-label { min-width: 0; color: rgba(226,236,242,.82); font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; }
.ability-fx-target { display: block; margin-top: 2px; color: rgba(159,179,194,.46); font-size: .5rem; font-weight: 500; }
.ability-fx-value { min-width: 0; color: #edf5f8; font-size: .7rem; font-weight: 780; line-height: 1.38; text-align: right; overflow-wrap: anywhere; }
.ability-fx-row.buff .ability-fx-value { color: var(--c-buff); }
.ability-fx-row.debuff .ability-fx-value { color: var(--c-debuff); }
.ability-fx-dur { grid-column: 2 / 4; margin-top: -3px; color: rgba(159,179,194,.39); font-size: .48rem; letter-spacing: .04em; text-align: left; }

.ability-fx-row.passive-fx-row { grid-template-columns: minmax(150px,30%) minmax(0,1fr); border-left-color: rgba(230,189,88,.68); background: linear-gradient(90deg, rgba(230,189,88,.055), rgba(2,7,12,.4) 42%); }
.ability-fx-row.passive-fx-row .ability-fx-label { white-space: normal; }
.ability-fx-row.passive-fx-row .ability-fx-value { color: #e6bd58; text-align: left; }
.ability-fx-row.passive-fx-row.is-direct-copy { grid-template-columns: 8px minmax(0,1fr); gap: 10px; padding: 10px 13px; }
.ability-fx-bullet { width: 5px; height: 5px; border-radius: 50%; background: #e6bd58; box-shadow: 0 0 7px rgba(230,189,88,.55); }
.ability-fx-copy { min-width: 0; color: rgba(225,232,237,.82); font-family: Montserrat,sans-serif; font-size: .69rem; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }

/* ---- Gyűjtő passzív és váltott kártyák ---- */

.passive-box.has-collect { grid-template-columns: 210px minmax(0,1fr) 150px; }
.passive-collect-icon-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 15px; border: 0; border-left: 1px solid rgba(230,189,88,.1); background: radial-gradient(circle at 50% 50%, rgba(230,189,88,.09), transparent 65%); }
.passive-collect-icon-wrapper::before { position: absolute; top: 18px; color: rgba(230,189,88,.44); font-size: .44rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; content: "Erőforrás"; }
.passive-collect-icon { width: 90px; height: 90px; padding: 5px; box-sizing: border-box; object-fit: contain; border: 1px solid rgba(230,189,88,.24); border-radius: 50%; background: rgba(230,189,88,.04); filter: drop-shadow(0 0 12px rgba(230,189,88,.12)); }

.ability-box:not(.passive-box):nth-child(odd) { grid-template-columns: minmax(0,1fr) 210px; }
.ability-box:not(.passive-box):nth-child(odd) .ability-icon-wrapper { grid-column: 2; grid-row: 1; border-right: 0; border-left: 1px solid rgba(255,255,255,.065); }
.ability-box:not(.passive-box):nth-child(odd) .ability-info { grid-column: 1; grid-row: 1; }

@keyframes cabOrbitSpin { to { transform: rotate(360deg); } }
@keyframes cabVipIconReveal { 0% { opacity: .35; transform: scale(.9) rotate(-2deg); filter: blur(3px) brightness(1.35); } 100% { opacity: 1; transform: scale(1); filter: blur(0) saturate(1.08) brightness(1.07); } }

/* ---- Reszponzív ---- */

@media (max-width: 900px) {
    .ability-fx-table { grid-template-columns: 1fr; }
    .passive-box.has-collect { grid-template-columns: 190px minmax(0,1fr); }
    .passive-collect-icon-wrapper { grid-column: 1 / -1; flex-direction: row; min-height: 115px; border-top: 1px solid rgba(230,189,88,.1); border-left: 0; }
    .passive-collect-icon-wrapper::before { top: 9px; }
}

@media (max-width: 680px) {
    .cab-intro { align-items: flex-start; flex-direction: column; }
    .cab-intro-meta { width: 100%; justify-content: space-between; }
    .ability-box,
    .ability-box:not(.passive-box):nth-child(odd),
    .passive-box.has-collect { grid-template-columns: 1fr; }
    .ability-icon-wrapper,
    .ability-box:not(.passive-box):nth-child(odd) .ability-icon-wrapper { grid-column: 1; grid-row: auto; min-height: 220px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.065); border-left: 0; }
    .ability-box:not(.passive-box):nth-child(odd) .ability-info { grid-column: 1; grid-row: auto; }
    .ability-info { padding: 19px 17px; }
    .ability-info-head { align-items: flex-start; flex-direction: column; }
    .ability-fx-row { grid-template-columns: 30px minmax(0,1fr) auto; }
    .passive-collect-icon-wrapper { grid-column: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .ability-box, .ability-icon, .ability-vip-switch { transition: none; }
    .ability-icon-orbit::before { animation: none; }
    .ability-icon.is-vip-icon { animation: none; }
}

/* Patch 2.1 – közös, hősszínű EXTRA MECHANIKA bemutató */
.codex-rework-mechanic {
    --mechanic-accent: #72ddff;
    --mechanic-glow: #8d74ff;
    position: relative;
    isolation: isolate;
    margin: 22px 0 30px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb,var(--mechanic-accent) 42%,transparent);
    outline: 1px solid color-mix(in srgb,var(--mechanic-glow) 14%,transparent);
    outline-offset: -6px;
    background:
        radial-gradient(circle at 8% 0,color-mix(in srgb,var(--mechanic-accent) 17%,transparent),transparent 37%),
        radial-gradient(circle at 94% 100%,color-mix(in srgb,var(--mechanic-glow) 18%,transparent),transparent 43%),
        linear-gradient(145deg,rgba(15,20,27,.97),rgba(3,7,12,.98));
    box-shadow: inset 0 0 38px color-mix(in srgb,var(--mechanic-accent) 7%,transparent),0 18px 38px rgba(0,0,0,.3);
}
.codex-rework-mechanic::before { position:absolute;z-index:-1;right:-95px;top:-125px;width:310px;height:310px;border:1px solid color-mix(in srgb,var(--mechanic-accent) 13%,transparent);border-radius:50%;box-shadow:0 0 0 34px color-mix(in srgb,var(--mechanic-glow) 3%,transparent),0 0 0 35px color-mix(in srgb,var(--mechanic-glow) 8%,transparent);content:""; }
.codex-rework-mechanic > header { display:flex;align-items:center;gap:18px; }
.codex-rework-mechanic-emblem { position:relative;display:grid;flex:0 0 82px;width:82px;height:82px;place-items:center; }
.codex-rework-mechanic-emblem::before,.codex-rework-mechanic-emblem::after { position:absolute;border:1px solid color-mix(in srgb,var(--mechanic-accent) 38%,transparent);border-radius:50%;content:""; }
.codex-rework-mechanic-emblem::before { inset:0;box-shadow:inset 0 0 20px color-mix(in srgb,var(--mechanic-accent) 12%,transparent),0 0 20px color-mix(in srgb,var(--mechanic-glow) 13%,transparent);animation:codexMechanicOrbit 9s linear infinite; }
.codex-rework-mechanic-emblem::after { inset:8px;border-style:dashed;animation:codexMechanicOrbit 13s linear reverse infinite; }
.codex-rework-mechanic-emblem img { position:relative;z-index:1;width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--mechanic-accent) 68%,transparent)); }
.codex-rework-mechanic > header > div:last-child { min-width:0; }
.codex-rework-mechanic > header span { display:flex;align-items:center;flex-wrap:wrap;gap:9px;color:var(--mechanic-accent);font:800 .58rem/1 Montserrat,sans-serif;letter-spacing:.18em; }
.codex-rework-mechanic > header span i { padding:4px 6px;border:1px solid color-mix(in srgb,var(--mechanic-accent) 28%,transparent);color:color-mix(in srgb,var(--mechanic-accent) 72%,#b9c5ce);font-size:.43rem;font-style:normal;letter-spacing:.1em; }
.codex-rework-mechanic > header h3 { margin:8px 0 5px;color:color-mix(in srgb,var(--mechanic-accent) 23%,#fff);font:400 1.68rem/1.08 AOW,serif;text-shadow:0 0 17px color-mix(in srgb,var(--mechanic-glow) 52%,transparent); }
.codex-rework-mechanic > header p { max-width:980px;margin:0;color:rgba(205,219,229,.74);font-size:.74rem;line-height:1.5; }
.codex-rework-mechanic-grid { display:grid;grid-template-columns:repeat(var(--mechanic-columns),minmax(0,1fr));gap:11px;margin-top:21px; }
.codex-rework-mechanic-card { position:relative;display:flex;min-width:0;min-height:222px;align-items:center;flex-direction:column;padding:15px 13px;overflow:hidden;border:1px solid color-mix(in srgb,var(--mechanic-accent) 20%,rgba(255,255,255,.08));border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--mechanic-accent) 7%,transparent),rgba(0,0,0,.3));text-align:center; }
.codex-rework-mechanic-card::after { position:absolute;right:-32px;bottom:-52px;width:112px;height:112px;border:1px solid color-mix(in srgb,var(--mechanic-glow) 10%,transparent);border-radius:50%;content:""; }
.codex-rework-mechanic-card.is-capstone { border-color:color-mix(in srgb,var(--mechanic-accent) 52%,transparent);box-shadow:0 0 19px color-mix(in srgb,var(--mechanic-glow) 17%,transparent),inset 0 0 19px color-mix(in srgb,var(--mechanic-accent) 7%,transparent); }
.codex-rework-mechanic-icon { position:relative;display:grid;width:72px;height:72px;margin-bottom:10px;place-items:center; }
.codex-rework-mechanic-icon i { position:absolute;inset:3px;border:1px solid color-mix(in srgb,var(--mechanic-accent) 25%,transparent);border-radius:50%;box-shadow:inset 0 0 15px color-mix(in srgb,var(--mechanic-accent) 9%,transparent); }
.codex-rework-mechanic-icon img { position:relative;width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--mechanic-accent) 55%,transparent)); }
.codex-rework-mechanic-card small { color:color-mix(in srgb,var(--mechanic-accent) 72%,#8796a2);font:800 .55rem/1.15 Montserrat,sans-serif;letter-spacing:.11em;text-transform:uppercase; }
.codex-rework-mechanic-card strong { display:block;margin:6px 0 7px;color:#f0f7fa;font:800 .86rem/1.18 Montserrat,sans-serif; }
.codex-rework-mechanic-card p { margin:0;color:rgba(205,219,229,.72);font-size:.67rem;line-height:1.38; }
.codex-rework-mechanic.is-compact .codex-rework-mechanic-card { min-height:164px;padding:12px 10px; }
.codex-rework-mechanic.is-compact .codex-rework-mechanic-icon { width:54px;height:54px;margin-bottom:7px; }
.codex-rework-mechanic.is-compact .codex-rework-mechanic-icon img { width:44px;height:44px; }
.codex-rework-mechanic.is-compact .codex-rework-mechanic-card strong { margin:4px 0 5px;font-size:.76rem; }
.codex-rework-mechanic.is-compact .codex-rework-mechanic-card p { font-size:.6rem;line-height:1.3; }
.codex-rework-mechanic-card[style*="--card-accent"] { border-color:color-mix(in srgb,var(--card-accent) 52%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--card-accent) 10%,transparent),rgba(0,0,0,.3)); }
.codex-rework-mechanic-card[style*="--card-accent"] .codex-rework-mechanic-icon img { filter:drop-shadow(0 0 10px color-mix(in srgb,var(--card-accent) 72%,transparent)); }
.codex-nitocris-vector-crystal { position:relative;z-index:1;display:grid;width:42px;height:56px;place-items:center;background:linear-gradient(150deg,#fff 0%,color-mix(in srgb,var(--card-accent) 72%,#fff) 24%,var(--card-accent) 58%,rgba(0,0,0,.82) 100%);clip-path:polygon(50% 0%,91% 19%,100% 57%,72% 100%,28% 100%,0 57%,9% 19%);filter:drop-shadow(0 0 7px var(--card-accent)) drop-shadow(0 0 16px color-mix(in srgb,var(--card-accent) 68%,transparent)); }
.codex-nitocris-vector-crystal::before { position:absolute;inset:4px;background:linear-gradient(138deg,rgba(255,255,255,.9),transparent 34%),linear-gradient(42deg,transparent 46%,rgba(255,255,255,.38) 48% 52%,transparent 54%);clip-path:polygon(50% 0%,91% 19%,100% 57%,72% 100%,28% 100%,0 57%,9% 19%);content:""; }
.codex-nitocris-vector-crystal b { width:2px;height:70%;background:linear-gradient(transparent,rgba(255,255,255,.7),transparent);transform:rotate(22deg);box-shadow:10px 3px 0 -1px rgba(255,255,255,.18); }
.codex-rework-mechanic-card.is-star-milestone { --star-color:#75e56c;border-color:color-mix(in srgb,var(--star-color) 55%,transparent); }
.codex-rework-mechanic-card.is-star-milestone[data-star-tone="blue"] { --star-color:#54b9ff; }
.codex-rework-mechanic-card.is-star-milestone[data-star-tone="red"] { --star-color:#ff5858; }
.codex-rework-mechanic-card.is-star-milestone[data-star-tone="gold"] { --star-color:#ffd65a; }
.codex-rework-mechanic-card.is-star-milestone .codex-rework-mechanic-icon img { filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 14px var(--star-color)); }
.codex-rework-mechanic-rules { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px; }
.codex-rework-mechanic-rules span { display:grid;min-width:0;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:2px 10px;padding:10px;border:1px solid color-mix(in srgb,var(--mechanic-accent) 20%,rgba(255,255,255,.06));border-radius:10px;background:rgba(0,0,0,.27); }
.codex-rework-mechanic-rules > span > img { grid-row:1 / 3;width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--mechanic-glow) 60%,transparent)); }
.codex-rework-mechanic-rules b { color:var(--mechanic-accent);font:800 .72rem/1.1 Montserrat,sans-serif;overflow-wrap:anywhere; }
.codex-rework-mechanic-rules small { min-width:0;color:rgba(205,219,229,.72);font-size:.66rem;line-height:1.35; }
.codex-rework-mechanic-rules .ability-inline-icon,
.codex-rework-mechanic-card .ability-inline-icon,
.codex-rework-mechanic > header .ability-inline-icon { width:1.05em!important;height:1.05em!important;margin:-.08em .12em!important;vertical-align:-.12em!important;object-fit:contain; }

/* April – ugyanaz a lebegő, forgó buborékfény, mint a Patch Notes v2.1-ben és a harcban. */
.codex-rework-mechanic.is-hero-11 .codex-rework-mechanic-icon { width:92px;height:92px; }
.codex-rework-mechanic.is-hero-11 .codex-rework-mechanic-icon img { z-index:2;width:78px;height:78px;animation:codexAprilBubbleFloat 2.1s ease-in-out infinite;filter:drop-shadow(0 0 8px rgba(163,220,255,.92)) drop-shadow(0 0 18px rgba(255,214,245,.62)); }
.codex-rework-mechanic.is-hero-11 .codex-rework-mechanic-icon i { z-index:1;inset:0;border:0;background:conic-gradient(from 0deg,transparent 0deg,rgba(163,220,255,.96) 70deg,transparent 150deg,transparent 360deg);box-shadow:none;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));animation:codexAprilBubbleSpin 2.4s linear infinite; }
.codex-rework-mechanic.is-hero-11 .codex-rework-mechanic-icon::after { position:absolute;z-index:0;inset:-8px;border-radius:50%;background:radial-gradient(circle,rgba(163,220,255,.24),transparent 68%);content:"";animation:codexAprilBubbleHalo 2.8s ease-in-out infinite; }
.codex-rework-mechanic.is-hero-11 [data-mechanic-type="reinforced"] .codex-rework-mechanic-icon i { background:conic-gradient(from 0deg,transparent 0deg,rgba(176,88,255,.98) 60deg,rgba(255,224,102,.98) 120deg,transparent 190deg,transparent 360deg);animation-duration:1.7s; }
.codex-rework-mechanic.is-hero-11 [data-mechanic-type="reinforced"] .codex-rework-mechanic-icon img { filter:brightness(1.15) drop-shadow(0 0 8px rgba(176,88,255,.95)) drop-shadow(0 0 20px rgba(255,224,102,.75)); }
.codex-rework-mechanic.is-hero-11 [data-mechanic-type="queen"] .codex-rework-mechanic-icon i { background:conic-gradient(from 0deg,transparent 0deg,rgba(176,88,255,1) 65deg,rgba(226,168,255,.95) 125deg,transparent 195deg,transparent 360deg);filter:drop-shadow(0 0 8px rgba(176,88,255,.9)); }
.codex-rework-mechanic.is-hero-11 [data-mechanic-type="giant"] .codex-rework-mechanic-icon i { inset:-2px;background:conic-gradient(from 0deg,transparent 0deg,rgba(255,214,92,1) 55deg,rgba(255,247,204,1) 110deg,transparent 185deg,transparent 360deg);filter:drop-shadow(0 0 10px rgba(255,206,71,.95));animation-duration:1.35s; }
.codex-rework-mechanic.is-hero-11 [data-mechanic-type="giant"] .codex-rework-mechanic-icon img { filter:brightness(1.25) drop-shadow(0 0 10px rgba(255,206,71,1)) drop-shadow(0 0 26px rgba(255,236,160,.85)); }
.codex-april-bubble-crown { position:absolute;z-index:3;top:-7px;left:50%;width:34px;height:23px;transform:translateX(-50%);fill:#ffd76a;stroke:#b058ff;stroke-width:.8;filter:drop-shadow(0 0 6px rgba(176,88,255,.95));animation:codexAprilBubbleHalo 2.2s ease-in-out infinite; }
@keyframes codexAprilBubbleSpin { to { transform:rotate(360deg); } }
@keyframes codexAprilBubbleFloat { 50% { transform:translateY(-4px) scale(1.025); } }
@keyframes codexAprilBubbleHalo { 50% { opacity:.58;transform:scale(1.08); } }
@keyframes codexMechanicOrbit { to { transform:rotate(360deg); } }
@media (max-width:1050px) { .codex-rework-mechanic-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .codex-rework-mechanic-rules { grid-template-columns:1fr; } }
@media (max-width:580px) { .codex-rework-mechanic { padding:19px 15px; }.codex-rework-mechanic > header { align-items:flex-start; }.codex-rework-mechanic-emblem { flex-basis:62px;width:62px;height:62px; }.codex-rework-mechanic-emblem img { width:46px;height:46px; }.codex-rework-mechanic-grid { grid-template-columns:1fr; }.codex-rework-mechanic-card { min-height:0; } }
@media (prefers-reduced-motion:reduce) { .codex-rework-mechanic-emblem::before,.codex-rework-mechanic-emblem::after,.codex-rework-mechanic.is-hero-11 .codex-rework-mechanic-icon i,.codex-rework-mechanic.is-hero-11 .codex-rework-mechanic-icon img,.codex-rework-mechanic.is-hero-11 .codex-rework-mechanic-icon::after,.codex-april-bubble-crown { animation:none; } }

/* Nekatay – Lélekudvar szintek + részletes, szintekre bontott leírások */
.ability-desc .ability-progression.is-nekatay-court-details .ability-progression-step { grid-template-columns: 112px minmax(0,1fr); }
.ability-desc .ability-progression.is-nekatay-court-details .ability-progression-step.is-wide-label { grid-template-columns: minmax(0,1fr); gap: 5px; }
.ability-desc .ability-progression.is-nekatay-court-details .ability-progression-step.is-wide-label .ability-progression-label { padding-bottom: 5px; border-bottom: 1px solid rgba(56,222,209,.18); }
.ability-desc .ability-inline-icon.is-nekatay-mechanic { filter: drop-shadow(0 0 4px rgba(56,222,209,.7)); }
.codex-nekatay-court { position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid rgba(56,222,209,.36); outline: 1px solid rgba(72,250,247,.12); outline-offset: -6px; background: radial-gradient(circle at 10% 0,rgba(56,222,209,.16),transparent 38%),radial-gradient(circle at 92% 100%,rgba(32,132,118,.2),transparent 42%),linear-gradient(145deg,rgba(24,28,28,.95),rgba(4,9,9,.97)); box-shadow: inset 0 0 34px rgba(56,222,209,.07),0 18px 38px rgba(0,0,0,.3); }
.codex-nekatay-court > header { display: flex; align-items: center; gap: 16px; }
.codex-nekatay-court > header > img { flex: 0 0 auto; width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(56,222,209,.7)); animation: codexNekatayFloat 3.2s ease-in-out infinite; }
.codex-nekatay-court > header span { color: #48FAF7; font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-nekatay-court > header h3 { margin: 7px 0 5px; color: #dffffb; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px rgba(56,222,209,.5); }
.codex-nekatay-court > header p { margin: 0; color: rgba(205,226,222,.72); font-size: .74rem; line-height: 1.45; }
.codex-nekatay-court-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.codex-nekatay-tier { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 14px 11px; border: 1px solid rgba(125,172,165,.22); border-radius: 12px; background: linear-gradient(180deg,rgba(56,222,209,.06),rgba(0,0,0,.28)); text-align: center; }
.codex-nekatay-tier[data-tier="3"] { border-color: rgba(72,250,247,.55); box-shadow: 0 0 18px rgba(56,222,209,.22),inset 0 0 18px rgba(56,222,209,.1); }
.codex-nekatay-tier > img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(56,222,209,.55)); }
.codex-nekatay-tier small { color: #7DACA5; font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-nekatay-tier strong { display: block; margin: 4px 0 6px; color: #eafffc; font: 800 .86rem/1.15 Montserrat,sans-serif; }
.codex-nekatay-tier ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; color: rgba(214,232,228,.8); font-size: .68rem; line-height: 1.3; }
.codex-nekatay-tier li::before { content: "·"; margin-right: 4px; color: #48FAF7; }
.codex-nekatay-court-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.codex-nekatay-court-rules span { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 10px; border: 1px solid rgba(56,222,209,.18); border-radius: 10px; background: rgba(0,0,0,.26); }
.codex-nekatay-court-rules img { grid-row: 1 / 3; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(56,222,209,.6)); }
.codex-nekatay-court-rules b { color: #48FAF7; font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-nekatay-court-rules small { color: rgba(205,226,222,.72); font-size: .66rem; line-height: 1.35; }
@keyframes codexNekatayFloat { 50% { transform: translateY(-5px); } }
@media (max-width: 900px) { .codex-nekatay-court-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .codex-nekatay-court-rules { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .codex-nekatay-court > header > img { animation: none; } }
/* Flower (42) · Tüskekorona – leírás-lista, inline ikonok, mérföldkő-szekció */
.ability-desc .ability-progression.is-flower-thorn-details .ability-progression-step { grid-template-columns: 112px minmax(0,1fr); }
.ability-desc .ability-progression.is-flower-thorn-details .ability-progression-step.is-wide-label { grid-template-columns: minmax(0,1fr); gap: 5px; }
.ability-desc .ability-progression.is-flower-thorn-details .ability-progression-step.is-wide-label .ability-progression-label { padding-bottom: 5px; border-bottom: 1px solid rgba(194,68,92,.2); }
.ability-desc .ability-inline-icon.is-flower-mechanic { filter: drop-shadow(0 0 4px rgba(194,68,92,.75)); }
.codex-flower-crown { position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid rgba(194,68,92,.4); outline: 1px solid rgba(88,153,145,.16); outline-offset: -6px; background: radial-gradient(circle at 10% 0,rgba(88,153,145,.16),transparent 38%),radial-gradient(circle at 92% 100%,rgba(171,30,73,.24),transparent 42%),linear-gradient(145deg,rgba(19,37,37,.95),rgba(7,3,4,.97)); box-shadow: inset 0 0 34px rgba(171,30,73,.09),0 18px 38px rgba(0,0,0,.3); }
.codex-flower-crown > header { display: flex; align-items: center; gap: 16px; }
.codex-flower-crown > header > img { flex: 0 0 auto; width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(194,68,92,.7)); animation: codexFlowerFloat 3.2s ease-in-out infinite; }
.codex-flower-crown > header span { color: #589991; font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-flower-crown > header h3 { margin: 7px 0 5px; color: #ffe6ea; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px rgba(194,68,92,.55); }
.codex-flower-crown > header p { margin: 0; color: rgba(232,210,214,.74); font-size: .74rem; line-height: 1.45; }
.codex-flower-crown-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.codex-flower-tier { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 14px 11px; border: 1px solid rgba(194,68,92,.24); border-radius: 12px; background: linear-gradient(180deg,rgba(194,68,92,.07),rgba(0,0,0,.3)); text-align: center; }
.codex-flower-tier[data-tier="10"] { border-color: rgba(171,30,73,.7); box-shadow: 0 0 18px rgba(171,30,73,.3),inset 0 0 18px rgba(0,0,0,.45); }
.codex-flower-tier > img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(171,30,73,.6)); }
.codex-flower-tier small { color: #589991; font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-flower-tier strong { display: block; margin: 4px 0 6px; color: #ffeef1; font: 800 .86rem/1.15 Montserrat,sans-serif; }
.codex-flower-tier p { margin: 0; color: rgba(232,214,218,.8); font-size: .68rem; line-height: 1.35; }
.codex-flower-crown-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.codex-flower-crown-rules span { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 10px; border: 1px solid rgba(194,68,92,.2); border-radius: 10px; background: rgba(0,0,0,.28); }
.codex-flower-crown-rules img { grid-row: 1 / 3; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(171,30,73,.65)); }
.codex-flower-crown-rules b { color: #C2445C; font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-flower-crown-rules small { color: rgba(232,210,214,.74); font-size: .66rem; line-height: 1.35; }
@keyframes codexFlowerFloat { 50% { transform: translateY(-5px) rotate(3deg); } }
@media (max-width: 900px) { .codex-flower-crown-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .codex-flower-crown-rules { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .codex-flower-crown > header > img { animation: none; } }
/* Ariella (50) · Vérkészlet – leírás-lista, inline ikonok, Vér-szint szekció (skin-függő paletta: --ariella-c1..5) */
.ability-desc .ability-progression.is-ariella-blood-details .ability-progression-step { grid-template-columns: 112px minmax(0,1fr); }
.ability-desc .ability-progression.is-ariella-blood-details .ability-progression-step.is-wide-label { grid-template-columns: minmax(0,1fr); gap: 5px; }
.ability-desc .ability-progression.is-ariella-blood-details .ability-progression-step.is-wide-label .ability-progression-label { padding-bottom: 5px; border-bottom: 1px solid rgba(136,17,35,.28); }
.ability-desc .ability-progression.is-ariella-blood-details .ability-progression-step.is-ariella-moon-step { border-color: rgba(255,84,104,.42); background: linear-gradient(90deg,rgba(136,17,35,.22),rgba(13,16,24,.4)); box-shadow: inset 3px 0 0 #ff5468; }
.ability-desc .ability-inline-icon.is-ariella-mechanic { filter: drop-shadow(0 0 4px rgba(214,40,64,.8)); }
.codex-ariella-blood { --ariella-c1: #0D1018; --ariella-c2: #7B1E29; --ariella-c3: #520b0b; --ariella-c4: #881123; --ariella-c5: #4D1E33; --ariella-hi: color-mix(in srgb, var(--ariella-c4) 55%, #ff5468); position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ariella-hi) 55%, transparent); outline: 1px solid color-mix(in srgb, var(--ariella-c2) 45%, transparent); outline-offset: -6px; background: radial-gradient(circle at 10% 0,color-mix(in srgb, var(--ariella-c4) 30%, transparent),transparent 40%),radial-gradient(circle at 92% 100%,color-mix(in srgb, var(--ariella-c5) 55%, transparent),transparent 45%),linear-gradient(145deg,color-mix(in srgb, var(--ariella-c1) 88%, var(--ariella-c3)),var(--ariella-c1)); box-shadow: inset 0 0 38px color-mix(in srgb, var(--ariella-c4) 22%, transparent),0 18px 38px rgba(0,0,0,.34); isolation: isolate; }
.codex-ariella-blood > *:not(.codex-ariella-blood__vfx) { position: relative; z-index: 1; }
.codex-ariella-blood__vfx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.codex-ariella-blood__vfx i { position: absolute; top: -18px; width: 4px; height: 18px; border-radius: 0 0 50% 50% / 0 0 70% 70%; background: linear-gradient(180deg,transparent,var(--ariella-hi)); opacity: 0; animation: codexAriellaDrip 5.4s ease-in infinite; }
.codex-ariella-blood__vfx i:nth-child(1) { left: 6%; animation-delay: 0s; }
.codex-ariella-blood__vfx i:nth-child(2) { left: 18%; animation-delay: 1.9s; height: 12px; }
.codex-ariella-blood__vfx i:nth-child(3) { left: 31%; animation-delay: 3.4s; }
.codex-ariella-blood__vfx i:nth-child(4) { left: 46%; animation-delay: .8s; height: 14px; }
.codex-ariella-blood__vfx i:nth-child(5) { left: 59%; animation-delay: 4.2s; }
.codex-ariella-blood__vfx i:nth-child(6) { left: 71%; animation-delay: 2.6s; height: 11px; }
.codex-ariella-blood__vfx i:nth-child(7) { left: 84%; animation-delay: 1.3s; }
.codex-ariella-blood__vfx i:nth-child(8) { left: 95%; animation-delay: 3.9s; height: 13px; }
.codex-ariella-blood > header { display: flex; align-items: center; gap: 16px; }
.codex-ariella-blood > header > img { flex: 0 0 auto; width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 0 12px var(--ariella-hi)); animation: codexAriellaPulse 3.2s ease-in-out infinite; }
.codex-ariella-blood > header span { color: var(--ariella-hi); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-ariella-blood > header h3 { margin: 7px 0 5px; color: #ffe4e8; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb, var(--ariella-hi) 70%, transparent); }
.codex-ariella-blood > header p { margin: 0; color: rgba(236,212,218,.76); font-size: .74rem; line-height: 1.45; }
.codex-ariella-blood-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.codex-ariella-tier { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 14px 10px; border: 1px solid color-mix(in srgb, var(--ariella-c4) 40%, transparent); border-radius: 12px; background: linear-gradient(180deg,color-mix(in srgb, var(--ariella-c2) 16%, transparent),rgba(0,0,0,.34)); text-align: center; }
.codex-ariella-tier.is-moon { border-color: color-mix(in srgb, var(--ariella-hi) 80%, transparent); background: radial-gradient(circle at 50% 0,color-mix(in srgb, var(--ariella-c4) 38%, transparent),transparent 62%),linear-gradient(180deg,color-mix(in srgb, var(--ariella-c5) 40%, transparent),rgba(0,0,0,.4)); box-shadow: 0 0 20px color-mix(in srgb, var(--ariella-hi) 35%, transparent),inset 0 0 18px rgba(0,0,0,.45); }
.codex-ariella-tier > img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--ariella-hi) 70%, transparent)); }
.codex-ariella-tier[data-tier="0"] > img { filter: grayscale(.45) brightness(.8) drop-shadow(0 0 6px rgba(123,30,41,.5)); }
.codex-ariella-tier[data-tier="25"] > img { filter: brightness(.9) drop-shadow(0 0 7px color-mix(in srgb, var(--ariella-hi) 55%, transparent)); }
.codex-ariella-tier[data-tier="75"] > img { filter: saturate(1.2) drop-shadow(0 0 11px var(--ariella-hi)); }
.codex-ariella-tier.is-moon > img { width: 64px; height: 64px; animation: codexAriellaPulse 2.6s ease-in-out infinite; }
.codex-ariella-tier small { color: var(--ariella-hi); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-ariella-tier strong { display: block; margin: 4px 0 6px; color: #ffecef; font: 800 .84rem/1.15 Montserrat,sans-serif; }
.codex-ariella-tier p { margin: 0; color: rgba(236,214,220,.8); font-size: .67rem; line-height: 1.35; }
.codex-ariella-blood-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.codex-ariella-blood-rules span { display: grid; gap: 4px; align-content: start; padding: 10px; border: 1px solid color-mix(in srgb, var(--ariella-c4) 34%, transparent); border-radius: 10px; background: rgba(0,0,0,.3); }
.codex-ariella-blood-rules b { color: var(--ariella-hi); font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-ariella-blood-rules small { color: rgba(236,212,218,.76); font-size: .66rem; line-height: 1.35; }
.codex-ariella-blood-showcase { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--ariella-c4) 30%, transparent); }
.codex-ariella-blood-showcase span { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 9px; border: 1px solid color-mix(in srgb, var(--ariella-c2) 40%, transparent); border-radius: 999px; background: linear-gradient(90deg,color-mix(in srgb, var(--ariella-c3) 45%, transparent),rgba(0,0,0,.3)); }
.codex-ariella-blood-showcase img { flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ariella-hi) 70%, transparent)); }
.codex-ariella-blood-showcase b { overflow: hidden; color: #ffe2e7; font: 700 .64rem/1.15 Montserrat,sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.codex-ariella-blood .ability-inline-icon { display: inline-block; width: 1.15em; height: 1.15em; margin: 0 .12em; vertical-align: -.2em; object-fit: contain; }
@keyframes codexAriellaPulse { 50% { transform: translateY(-4px) scale(1.04); } }
@keyframes codexAriellaDrip { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .85; } 70% { opacity: .5; } 100% { opacity: 0; transform: translateY(260px); } }
@media (max-width: 900px) { .codex-ariella-blood-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .codex-ariella-tier.is-moon { grid-column: 1 / -1; } .codex-ariella-blood-rules { grid-template-columns: 1fr; } .codex-ariella-blood-showcase { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .codex-ariella-blood > header > img, .codex-ariella-tier.is-moon > img, .codex-ariella-blood__vfx i { animation: none; } .codex-ariella-blood__vfx { display: none; } }

/* ===== SOLARIA · FÉNYRÚNÁK (kódex extra mechanika) ===== */
.codex-solaria-runes { position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid rgba(241,207,123,.42); outline: 1px solid rgba(255,245,190,.16); outline-offset: -6px; background: radial-gradient(circle at 10% 0,rgba(255,245,190,.14),transparent 38%),radial-gradient(circle at 92% 100%,rgba(150,73,129,.26),transparent 42%),linear-gradient(145deg,rgba(93,68,113,.92),rgba(8,4,14,.97)); box-shadow: inset 0 0 34px rgba(241,207,123,.09),0 18px 38px rgba(0,0,0,.3); }
.codex-solaria-runes > header { display: flex; align-items: center; gap: 16px; }
.codex-solaria-runes > header > img { flex: 0 0 auto; width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(241,207,123,.75)); animation: codexSolariaFloat 3.4s ease-in-out infinite; }
.codex-solaria-runes > header span { color: #F1CF7B; font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-solaria-runes > header h3 { margin: 7px 0 5px; color: #FFF5BE; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px rgba(241,207,123,.55); }
.codex-solaria-runes > header p { margin: 0; color: rgba(240,232,214,.76); font-size: .74rem; line-height: 1.45; }
.codex-solaria-rune-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.codex-solaria-rune { display: grid; grid-template-columns: 64px 1fr; align-items: center; gap: 12px; padding: 14px 13px; border: 1px solid rgba(241,207,123,.26); border-radius: 12px; background: linear-gradient(180deg,rgba(241,207,123,.08),rgba(0,0,0,.32)); }
.codex-solaria-rune[data-rune="3"] { border-color: rgba(255,245,190,.7); box-shadow: 0 0 18px rgba(241,207,123,.3),inset 0 0 18px rgba(0,0,0,.45); }
.codex-solaria-rune > img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 9px rgba(241,207,123,.65)); }
.codex-solaria-rune small { color: #F1CF7B; font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-solaria-rune strong { display: block; margin: 4px 0 6px; color: #FFF5BE; font: 800 .86rem/1.15 Montserrat,sans-serif; }
.codex-solaria-rune p { margin: 0; color: rgba(240,230,214,.82); font-size: .68rem; line-height: 1.35; }
.codex-solaria-rune-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.codex-solaria-rune-rules span { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 10px; border: 1px solid rgba(241,207,123,.22); border-radius: 10px; background: rgba(0,0,0,.3); }
.codex-solaria-rune-rules img { grid-row: 1 / 3; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(241,207,123,.65)); }
.codex-solaria-rune-rules b { color: #F1CF7B; font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-solaria-rune-rules small { color: rgba(240,232,214,.76); font-size: .66rem; line-height: 1.35; }
@keyframes codexSolariaFloat { 50% { transform: translateY(-5px) rotate(3deg); } }
@media (max-width: 900px) { .codex-solaria-rune-grid, .codex-solaria-rune-rules { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .codex-solaria-runes > header > img { animation: none; } }

/* Gengar (13) – inline mechanika-ikonok a leírásokban: a Düh-portré (duh.webp)
   kerek, bronz keretes; a Szikla ököl és a hatás-ikonok bronz fényt kapnak. */
.ability-inline-icon.is-gengar-mechanic { filter: drop-shadow(0 0 4px rgba(225, 194, 105, .75)); }
.ability-inline-icon.is-gengar-rage { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(225, 194, 105, .85), 0 0 6px rgba(223, 52, 107, .55); filter: none; }
.ability-inline-icon.is-gengar-exhaust { filter: drop-shadow(0 0 4px rgba(223, 52, 107, .6)); }

/* Gengar (13) – Dühkitörés kódex-szekció: bronz/vörösagyag keret, a Szikla ököl
   körül öt keringő sziklaszilánk, négy Düh-szint kártya és a hatás-szabályok. */
.codex-gengar-rage { position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid rgba(225,194,105,.42); outline: 1px solid rgba(255,240,218,.16); outline-offset: -6px; background: radial-gradient(circle at 10% 0,rgba(225,194,105,.16),transparent 38%),radial-gradient(circle at 92% 100%,rgba(223,52,107,.2),transparent 42%),linear-gradient(145deg,rgba(94,46,36,.94),rgba(12,7,5,.97)); box-shadow: inset 0 0 34px rgba(225,194,105,.09),0 18px 38px rgba(0,0,0,.3); }
.codex-gengar-rage > header { display: flex; align-items: center; gap: 18px; }
.codex-gengar-rage__fist { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle,rgba(225,194,105,.3),rgba(141,73,60,.18) 55%,transparent 72%); }
.codex-gengar-rage__fist img { position: relative; z-index: 1; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(225,194,105,.8)); animation: codexGengarFloat 3.4s ease-in-out infinite; }
.codex-gengar-rage__fist i { position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; clip-path: polygon(50% 0,86% 18%,100% 58%,72% 100%,24% 92%,0 52%,16% 14%); background: linear-gradient(145deg,#FFF0DA,#E1C269 36%,#8D493C 76%); transform: rotate(calc(var(--shard-i) * 72deg)) translateY(-42px); animation: codexGengarOrbit 14s linear infinite; }
.codex-gengar-rage > header span { color: #E1C269; font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-gengar-rage > header h3 { margin: 7px 0 5px; color: #FFF0DA; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px rgba(225,194,105,.55); }
.codex-gengar-rage > header p { margin: 0; color: rgba(240,232,214,.78); font-size: .74rem; line-height: 1.45; }
.codex-gengar-rage-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.codex-gengar-level { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 11px; padding: 13px 12px; border: 1px solid rgba(225,194,105,.26); border-radius: 12px; background: linear-gradient(180deg,rgba(225,194,105,.08),rgba(0,0,0,.32)); }
.codex-gengar-level[data-level="4"] { border-color: rgba(255,240,218,.62); box-shadow: 0 0 18px rgba(225,194,105,.28),inset 0 0 18px rgba(0,0,0,.45); }
.codex-gengar-level__badge { position: relative; width: 52px; height: 52px; }
.codex-gengar-level__badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(225,194,105,.8),0 0 12px rgba(223,52,107,.45); }
.codex-gengar-level__badge b { position: absolute; right: -4px; bottom: -4px; min-width: 22px; padding: 2px 5px; border: 1px solid rgba(255,240,218,.7); border-radius: 999px; background: linear-gradient(145deg,#E1C269,#8D493C); color: #1d0f0a; font: 900 .6rem/1.2 Montserrat,sans-serif; text-align: center; }
.codex-gengar-level small { color: #E1C269; font: 800 .54rem/1 Montserrat,sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.codex-gengar-level strong { display: block; margin: 4px 0 5px; color: #FFF0DA; font: 800 .84rem/1.15 Montserrat,sans-serif; }
.codex-gengar-level p { margin: 0; color: rgba(240,230,214,.82); font-size: .66rem; line-height: 1.35; }
.codex-gengar-rage-rules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.codex-gengar-rage-rules span { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 10px; border: 1px solid rgba(225,194,105,.22); border-radius: 10px; background: rgba(0,0,0,.3); }
.codex-gengar-rage-rules span.is-frenzy { border-color: rgba(223,52,107,.5); background: linear-gradient(120deg,rgba(223,52,107,.16),rgba(0,0,0,.34)); }
.codex-gengar-rage-rules span.is-exhaust { border-color: rgba(160,160,170,.35); }
.codex-gengar-rage-rules img { grid-row: 1 / 3; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(225,194,105,.65)); }
.codex-gengar-rage-rules b { color: #E1C269; font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-gengar-rage-rules span.is-frenzy b { color: #ff8fb4; }
.codex-gengar-rage-rules small { color: rgba(240,232,214,.78); font-size: .66rem; line-height: 1.35; }
@keyframes codexGengarFloat { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes codexGengarOrbit { from { transform: rotate(calc(var(--shard-i) * 72deg)) translateY(-42px); } to { transform: rotate(calc(var(--shard-i) * 72deg + 360deg)) translateY(-42px); } }
@media (max-width: 1100px) { .codex-gengar-rage-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) { .codex-gengar-rage-grid, .codex-gengar-rage-rules { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .codex-gengar-rage__fist img, .codex-gengar-rage__fist i { animation: none; } }

/* Prisma (17) inline mechanika-ikonok */
.ability-inline-icon.is-prisma-mechanic { filter: drop-shadow(0 0 4px rgba(255, 202, 255, .7)); }
.ability-inline-icon.is-prisma-break { filter: drop-shadow(0 0 5px rgba(255, 255, 255, .85)) drop-shadow(0 0 9px rgba(134, 141, 204, .6)); }
.ability-inline-icon.is-prisma-crack { filter: drop-shadow(0 0 4px rgba(166, 148, 148, .9)) drop-shadow(0 0 7px rgba(255, 202, 255, .45)); }
.ability-inline-icon.is-prisma-mirror { filter: drop-shadow(0 0 4px rgba(134, 141, 204, .8)); }
.ability-inline-icon.is-raven-keyword { filter: drop-shadow(0 0 4px rgba(156, 95, 221, .8)); }

/* ===== Prisma (17) · Prizmafény – extra mechanika a kódexben ===== */
.codex-prisma-light { position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid rgba(255,202,255,.4); outline: 1px solid rgba(249,227,213,.16); outline-offset: -6px; background: radial-gradient(circle at 10% 0,rgba(255,202,255,.15),transparent 38%),radial-gradient(circle at 92% 100%,rgba(134,141,204,.22),transparent 42%),linear-gradient(145deg,rgba(76,64,70,.95),rgba(10,7,12,.97)); box-shadow: inset 0 0 34px rgba(255,202,255,.08),0 18px 38px rgba(0,0,0,.3); }
.codex-prisma-light::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg,transparent 30%,rgba(111,168,255,.07) 42%,rgba(255,214,107,.07) 50%,rgba(255,111,125,.07) 58%,transparent 70%); background-size: 220% 100%; animation: codexPrismaSheen 9s linear infinite; }
.codex-prisma-light > header { position: relative; display: flex; align-items: center; gap: 18px; }
.codex-prisma-light__mirror { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle,rgba(249,227,213,.28),rgba(134,141,204,.2) 55%,transparent 72%); }
.codex-prisma-light__mirror img { position: relative; z-index: 1; width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255,202,255,.8)); animation: codexPrismaFloat 3.8s ease-in-out infinite; }
.codex-prisma-light__mirror i { position: absolute; top: 50%; left: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); transform: rotate(calc(var(--light-i) * 120deg)) translateY(-42px); animation: codexPrismaOrbit 12s linear infinite; }
.codex-prisma-light__mirror i.is-blue, .codex-prisma-light-steps .is-blue i { background: #6FA8FF; box-shadow: 0 0 10px #6FA8FF; }
.codex-prisma-light__mirror i.is-yellow, .codex-prisma-light-steps .is-yellow i { background: #FFD66B; box-shadow: 0 0 10px #FFD66B; }
.codex-prisma-light__mirror i.is-red, .codex-prisma-light-steps .is-red i { background: #FF6F7D; box-shadow: 0 0 10px #FF6F7D; }
.codex-prisma-light > header span { color: #FFCAFF; font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-prisma-light > header h3 { margin: 7px 0 5px; color: #F9E3D5; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px rgba(255,202,255,.55); }
.codex-prisma-light > header p { margin: 0; color: rgba(240,230,236,.8); font-size: .74rem; line-height: 1.45; }
.codex-prisma-light-steps { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.codex-prisma-light-steps span { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(255,202,255,.24); border-radius: 12px; background: linear-gradient(180deg,rgba(255,202,255,.07),rgba(0,0,0,.32)); }
.codex-prisma-light-steps i { grid-row: 1 / 3; width: 18px; height: 18px; margin: auto; clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
.codex-prisma-light-steps img { grid-row: 1 / 3; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(255,255,255,.7)); }
.codex-prisma-light-steps b { color: #F9E3D5; font: 800 .74rem/1.1 Montserrat,sans-serif; }
.codex-prisma-light-steps small { color: rgba(240,230,236,.72); font-size: .62rem; line-height: 1.3; }
.codex-prisma-light-steps .is-break { border-color: rgba(255,255,255,.5); background: linear-gradient(120deg,rgba(111,168,255,.14),rgba(255,214,107,.1),rgba(255,111,125,.14)); box-shadow: 0 0 18px rgba(255,202,255,.22); }
.codex-prisma-light-grid { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.codex-prisma-rule { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; padding: 10px; border: 1px solid rgba(255,202,255,.2); border-radius: 10px; background: rgba(0,0,0,.3); }
.codex-prisma-rule.is-break { border-color: rgba(255,255,255,.45); background: linear-gradient(120deg,rgba(255,202,255,.12),rgba(0,0,0,.34)); }
.codex-prisma-rule.is-crack { border-color: rgba(166,148,148,.5); }
.codex-prisma-rule.is-mirror { border-color: rgba(134,141,204,.45); }
.codex-prisma-rule > img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255,202,255,.6)); }
.codex-prisma-rule strong { display: block; margin-bottom: 3px; color: #FFCAFF; font: 800 .72rem/1.15 Montserrat,sans-serif; }
.codex-prisma-rule p { margin: 0; color: rgba(240,230,236,.8); font-size: .66rem; line-height: 1.4; }
@keyframes codexPrismaFloat { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes codexPrismaOrbit { from { transform: rotate(calc(var(--light-i) * 120deg)) translateY(-42px); } to { transform: rotate(calc(var(--light-i) * 120deg + 360deg)) translateY(-42px); } }
@keyframes codexPrismaSheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (max-width: 1100px) { .codex-prisma-light-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 900px) { .codex-prisma-light-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .codex-prisma-light::before, .codex-prisma-light__mirror img, .codex-prisma-light__mirror i { animation: none; } }
/* Cross · Elektromos Regenerátor */
.codex-cross-regenerator{position:relative;margin:22px 0 30px;padding:24px;overflow:hidden;border:1px solid rgba(0,229,254,.42);outline:1px solid rgba(27,157,255,.16);outline-offset:-6px;background:radial-gradient(circle at 10% 0,rgba(0,140,253,.2),transparent 38%),radial-gradient(circle at 92% 100%,rgba(12,68,252,.22),transparent 42%),linear-gradient(145deg,rgba(4,22,49,.96),rgba(2,5,14,.98));box-shadow:inset 0 0 34px rgba(0,229,254,.08),0 18px 38px rgba(0,0,0,.3)}
.codex-cross-regenerator>header{display:flex;align-items:center;gap:18px}.codex-cross-regenerator>header>img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 0 13px rgba(0,229,254,.75));animation:codexCrossFloat 3s ease-in-out infinite}.codex-cross-regenerator>header span{color:#00e5fe;font:800 .58rem/1 Montserrat,sans-serif;letter-spacing:.18em}.codex-cross-regenerator>header h3{margin:7px 0 5px;color:#eafcff;font:400 1.65rem/1.1 AOW,serif;text-shadow:0 0 16px rgba(0,229,254,.55)}.codex-cross-regenerator>header p{margin:0;color:rgba(220,240,250,.78);font-size:.74rem;line-height:1.45}
.codex-cross-regenerator__tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:20px}.codex-cross-regenerator__tiers article{display:grid;grid-template-columns:50px 1fr;align-items:center;gap:3px 10px;padding:13px;border:1px solid rgba(0,229,254,.22);border-radius:12px;background:linear-gradient(180deg,rgba(0,140,253,.08),rgba(0,0,0,.32))}.codex-cross-regenerator__tiers article:last-child{border-color:rgba(0,229,254,.65);box-shadow:0 0 18px rgba(0,229,254,.22)}.codex-cross-regenerator__tiers img{grid-row:1/4;width:50px;height:50px;object-fit:contain}.codex-cross-regenerator__tiers small{color:#00e5fe;font:800 .53rem/1 Montserrat}.codex-cross-regenerator__tiers strong{color:#eefcff;font:800 .8rem/1.15 Montserrat}.codex-cross-regenerator__tiers p{margin:0;color:rgba(220,238,248,.74);font-size:.64rem;line-height:1.35}
.codex-cross-regenerator__rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.codex-cross-regenerator__rules span{display:grid;grid-template-columns:38px 1fr;gap:2px 10px;align-items:center;padding:10px;border:1px solid rgba(0,229,254,.18);border-radius:10px;background:rgba(0,0,0,.28)}.codex-cross-regenerator__rules img{grid-row:1/3;width:38px;height:38px;object-fit:contain}.codex-cross-regenerator__rules b{color:#00e5fe;font:800 .72rem/1.1 Montserrat}.codex-cross-regenerator__rules small{font-size:.66rem;line-height:1.35;color:rgba(220,238,248,.75)}
@keyframes codexCrossFloat{50%{transform:translateY(-5px) scale(1.04)}}@media(max-width:900px){.codex-cross-regenerator__tiers{grid-template-columns:repeat(2,1fr)}.codex-cross-regenerator__rules{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.codex-cross-regenerator>header>img{animation:none}}

/* ===== Raven (38) · Hollótoll – kódex extra mechanika
   Paletta: #A7B5DE holdezüst, #9C5FDD hollólila, #5C548D szürkület,
   #080810 éjfekete, #39255A mélyibolya. ===== */
.codex-raven-feather { position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid rgba(156,95,221,.45); outline: 1px solid rgba(167,181,222,.16); outline-offset: -6px; background: radial-gradient(circle at 10% 0,rgba(156,95,221,.2),transparent 40%),radial-gradient(circle at 92% 100%,rgba(92,84,141,.28),transparent 44%),linear-gradient(145deg,rgba(57,37,90,.92),rgba(8,8,16,.97)); box-shadow: inset 0 0 34px rgba(156,95,221,.1),0 18px 38px rgba(0,0,0,.34); }
.codex-raven-feather::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg,transparent 32%,rgba(167,181,222,.07) 46%,rgba(156,95,221,.09) 54%,transparent 68%); background-size: 220% 100%; animation: codexRavenSheen 10s linear infinite; }
.codex-raven-feather > header { position: relative; display: flex; align-items: center; gap: 18px; }
.codex-raven-feather__emblem { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle,rgba(167,181,222,.2),rgba(57,37,90,.45) 55%,transparent 72%); }
.codex-raven-feather__sigil { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: contain; opacity: .55; filter: drop-shadow(0 0 10px rgba(156,95,221,.8)); animation: codexRavenSigil 4.2s ease-in-out infinite; }
.codex-raven-feather__quill { position: relative; z-index: 1; width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(167,181,222,.8)) drop-shadow(0 0 16px rgba(156,95,221,.6)); animation: codexRavenFloat 3.6s ease-in-out infinite; }
.codex-raven-feather__emblem i { position: absolute; top: 50%; left: 50%; z-index: 2; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #A7B5DE; box-shadow: 0 0 8px #9C5FDD, 0 0 3px #fff; transform: rotate(calc(var(--feather-i) * 72deg)) translateY(-44px); animation: codexRavenOrbit 14s linear infinite; }
.codex-raven-feather > header span:not(.codex-raven-feather__emblem) { color: #A7B5DE; font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-raven-feather > header h3 { margin: 7px 0 5px; color: #EEF0FA; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px rgba(156,95,221,.6); }
.codex-raven-feather > header p { margin: 0; color: rgba(226,228,242,.82); font-size: .74rem; line-height: 1.45; }
.codex-raven-feather-steps { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.codex-raven-feather-steps span { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(167,181,222,.22); border-radius: 12px; background: linear-gradient(180deg,rgba(156,95,221,.08),rgba(8,8,16,.45)); }
.codex-raven-feather-steps img { grid-row: 1 / 3; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(156,95,221,.75)); }
.codex-raven-feather-steps b { color: #EEF0FA; font: 800 .74rem/1.1 Montserrat,sans-serif; }
.codex-raven-feather-steps small { color: rgba(214,216,236,.72); font-size: .62rem; line-height: 1.3; }
.codex-raven-feather-steps .is-ready { border-color: rgba(156,95,221,.7); background: linear-gradient(120deg,rgba(156,95,221,.26),rgba(57,37,90,.4),rgba(8,8,16,.5)); box-shadow: 0 0 18px rgba(156,95,221,.3); }
.codex-raven-feather-steps .is-ready img { filter: drop-shadow(0 0 9px #9C5FDD) drop-shadow(0 0 3px #fff); animation: codexRavenSigil 2.6s ease-in-out infinite; }
.codex-raven-feather-grid { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.codex-raven-rule { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; padding: 10px; border: 1px solid rgba(167,181,222,.2); border-radius: 10px; background: rgba(8,8,16,.42); }
.codex-raven-rule.is-execution { border-color: rgba(156,95,221,.55); background: linear-gradient(120deg,rgba(156,95,221,.16),rgba(8,8,16,.45)); }
.codex-raven-rule.is-bloodlust { border-color: rgba(190,90,140,.5); }
.codex-raven-rule.is-wounded { border-color: rgba(92,84,141,.6); background: linear-gradient(120deg,rgba(57,37,90,.4),rgba(8,8,16,.45)); }
.codex-raven-rule > img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(156,95,221,.7)); }
.codex-raven-rule strong { display: block; margin-bottom: 3px; color: #A7B5DE; font: 800 .72rem/1.15 Montserrat,sans-serif; }
.codex-raven-rule p { margin: 0; color: rgba(226,228,242,.8); font-size: .66rem; line-height: 1.4; }
@keyframes codexRavenFloat { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes codexRavenSigil { 0%,100% { transform: scale(.96); opacity: .5; } 50% { transform: scale(1.04); opacity: .85; } }
@keyframes codexRavenOrbit { from { transform: rotate(calc(var(--feather-i) * 72deg)) translateY(-44px); } to { transform: rotate(calc(var(--feather-i) * 72deg + 360deg)) translateY(-44px); } }
@keyframes codexRavenSheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (max-width: 1100px) { .codex-raven-feather-steps { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 900px) { .codex-raven-feather-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .codex-raven-feather > header { flex-direction: column; align-items: flex-start; } .codex-raven-feather-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .codex-raven-feather::before, .codex-raven-feather__sigil, .codex-raven-feather__quill, .codex-raven-feather__emblem i, .codex-raven-feather-steps .is-ready img { animation: none; } }

/* OGERPON · MŰHELY – kódex-szekció (Lv1–Lv3 út + Műhely-szabályok).
   Paletta: #EF7203 #7F1B00 #570000 #EA6F02 #4184BF. */
.codex-ogerpon-forge { position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid rgba(239,114,3,.45); outline: 1px solid rgba(234,111,2,.16); outline-offset: -6px; background: radial-gradient(circle at 10% 0,rgba(239,114,3,.2),transparent 40%),radial-gradient(circle at 92% 100%,rgba(65,132,191,.14),transparent 44%),linear-gradient(145deg,rgba(87,0,0,.92),rgba(12,6,4,.97)); box-shadow: inset 0 0 34px rgba(239,114,3,.1),0 18px 38px rgba(0,0,0,.34); }
.codex-ogerpon-forge::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg,transparent 32%,rgba(255,194,122,.06) 46%,rgba(239,114,3,.09) 54%,transparent 68%); background-size: 220% 100%; animation: codexOgerponSheen 10s linear infinite; }
.codex-ogerpon-forge > header { position: relative; display: flex; align-items: center; gap: 18px; }
.codex-ogerpon-forge__emblem { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle,rgba(239,114,3,.26),rgba(127,27,0,.5) 55%,transparent 72%); }
.codex-ogerpon-forge__anvil { position: relative; z-index: 1; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(234,111,2,.85)) drop-shadow(0 0 16px rgba(127,27,0,.8)); animation: codexOgerponGlow 3.2s ease-in-out infinite; }
.codex-ogerpon-forge__point { position: absolute; right: -2px; bottom: -2px; z-index: 3; width: 32px; height: 32px; object-fit: contain; filter: drop-shadow(0 0 6px #EF7203); }
.codex-ogerpon-forge__emblem i { position: absolute; top: 50%; left: 50%; z-index: 2; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #FFC27A; box-shadow: 0 0 8px #EF7203, 0 0 3px #fff; transform: rotate(calc(var(--spark-i) * 72deg)) translateY(-44px); animation: codexOgerponOrbit 16s linear infinite; }
.codex-ogerpon-forge > header span:not(.codex-ogerpon-forge__emblem) { color: #EA6F02; font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-ogerpon-forge > header h3 { margin: 7px 0 5px; color: #FFF1E2; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px rgba(239,114,3,.6); }
.codex-ogerpon-forge > header p { margin: 0; color: rgba(245,230,218,.84); font-size: .74rem; line-height: 1.45; }
.codex-ogerpon-forge-steps { position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.codex-ogerpon-forge-steps span { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto auto; gap: 2px 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(239,114,3,.4); border-radius: 12px; background: linear-gradient(180deg,rgba(239,114,3,.12),rgba(12,6,4,.5)); }
.codex-ogerpon-forge-steps img { grid-row: 1 / 4; width: 36px; height: 36px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(239,114,3,.75)); }
.codex-ogerpon-forge-steps b { color: #FFF1E2; font: 800 .76rem/1.1 Montserrat,sans-serif; }
.codex-ogerpon-forge-steps small { color: rgba(245,230,218,.78); font-size: .62rem; line-height: 1.3; }
.codex-ogerpon-forge-steps em { color: #EA6F02; font: 700 .56rem/1.2 Montserrat,sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.codex-ogerpon-forge-steps .is-lv2 { border-color: rgba(65,132,191,.6); background: linear-gradient(180deg,rgba(65,132,191,.16),rgba(127,27,0,.3) 60%,rgba(12,6,4,.5)); }
.codex-ogerpon-forge-steps .is-lv2 img { filter: drop-shadow(0 0 7px rgba(65,132,191,.85)) drop-shadow(0 0 12px rgba(127,27,0,.7)); }
.codex-ogerpon-forge-steps .is-lv2 em { color: #8DBBE6; }
.codex-ogerpon-forge-steps .is-lv3 { border-color: rgba(255,200,87,.7); background: linear-gradient(120deg,rgba(255,200,87,.2),rgba(127,27,0,.36),rgba(12,6,4,.5)); box-shadow: 0 0 18px rgba(255,200,87,.2); }
.codex-ogerpon-forge-steps .is-lv3 img { filter: drop-shadow(0 0 9px #FFC857) drop-shadow(0 0 3px #fff); animation: codexOgerponGlow 2.6s ease-in-out infinite; }
.codex-ogerpon-forge-steps .is-lv3 em { color: #FFD27A; }
.codex-ogerpon-forge-grid { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.codex-ogerpon-rule { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; padding: 10px; border: 1px solid rgba(234,111,2,.24); border-radius: 10px; background: rgba(12,6,4,.46); }
.codex-ogerpon-rule.is-point { border-color: rgba(239,114,3,.55); background: linear-gradient(120deg,rgba(239,114,3,.16),rgba(12,6,4,.46)); }
.codex-ogerpon-rule.is-death { border-color: rgba(127,27,0,.7); background: linear-gradient(120deg,rgba(87,0,0,.42),rgba(12,6,4,.46)); }
.codex-ogerpon-rule > img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(239,114,3,.7)); }
.codex-ogerpon-rule strong { display: block; margin-bottom: 3px; color: #EA6F02; font: 800 .72rem/1.15 Montserrat,sans-serif; }
.codex-ogerpon-rule p { margin: 0; color: rgba(245,230,218,.82); font-size: .66rem; line-height: 1.4; }
.codex-ogerpon-forge .ability-inline-icon.is-ogerpon-keyword,
.ability-box .ability-inline-icon.is-ogerpon-keyword { filter: drop-shadow(0 0 4px rgba(239,114,3,.8)); }
@keyframes codexOgerponGlow { 0%,100% { filter: drop-shadow(0 0 7px rgba(234,111,2,.8)) drop-shadow(0 0 14px rgba(127,27,0,.7)); } 50% { filter: drop-shadow(0 0 12px #EF7203) drop-shadow(0 0 22px rgba(239,114,3,.6)); } }
@keyframes codexOgerponOrbit { from { transform: rotate(calc(var(--spark-i) * 72deg)) translateY(-44px); } to { transform: rotate(calc(var(--spark-i) * 72deg + 360deg)) translateY(-44px); } }
@keyframes codexOgerponSheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (max-width: 900px) { .codex-ogerpon-forge-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .codex-ogerpon-forge > header { flex-direction: column; align-items: flex-start; } .codex-ogerpon-forge-steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .codex-ogerpon-forge::before, .codex-ogerpon-forge__anvil, .codex-ogerpon-forge__emblem i, .codex-ogerpon-forge-steps .is-lv3 img { animation: none; } }

/* ===== AHEL (43) · TŰZKALAPÁCS (kódex extra mechanika) =====
   Paletta: --ahel-c1..5 inline stílusból (alap: #FD7C1C #84482D #FE9334 #97EAFA #BBBED9,
   Kőkorszaki: #714D0C #1F1D08 #FD8C00 #510C06 #F13105). */
.ability-desc .ability-progression.is-ahel-hammer-details .ability-progression-step { grid-template-columns: 112px minmax(0,1fr); }
.ability-desc .ability-progression.is-ahel-hammer-details .ability-progression-step.is-wide-label { grid-template-columns: minmax(0,1fr); gap: 5px; }
.ability-desc .ability-progression.is-ahel-hammer-details .ability-progression-step.is-wide-label .ability-progression-label { padding-bottom: 5px; border-bottom: 1px solid rgba(253,124,28,.22); }
.ability-desc .ability-inline-icon.is-ahel-keyword { filter: drop-shadow(0 0 4px rgba(253,124,28,.8)); }
.ability-desc .ability-inline-icon.is-ahel-hammer { filter: drop-shadow(0 0 4px rgba(254,147,52,.9)) drop-shadow(0 0 2px rgba(151,234,250,.5)); }
.codex-ahel-hammer { --ahel-c1: #FD7C1C; --ahel-c2: #84482D; --ahel-c3: #FE9334; --ahel-c4: #97EAFA; --ahel-c5: #BBBED9; position: relative; isolation: isolate; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--ahel-c1) 48%,transparent); outline: 1px solid color-mix(in srgb,var(--ahel-c4) 18%,transparent); outline-offset: -6px; background: radial-gradient(circle at 10% 0,color-mix(in srgb,var(--ahel-c4) 12%,transparent),transparent 38%),radial-gradient(circle at 92% 100%,color-mix(in srgb,var(--ahel-c1) 26%,transparent),transparent 44%),linear-gradient(145deg,color-mix(in srgb,var(--ahel-c2) 45%,#0b0605),rgba(7,4,3,.97)); box-shadow: inset 0 0 34px color-mix(in srgb,var(--ahel-c1) 10%,transparent),0 18px 38px rgba(0,0,0,.3); }
.codex-ahel-hammer[data-ahel-theme="titan"] { outline-color: color-mix(in srgb,var(--ahel-c1) 30%,transparent); background: radial-gradient(circle at 10% 0,color-mix(in srgb,var(--ahel-c3) 16%,transparent),transparent 38%),radial-gradient(circle at 92% 100%,color-mix(in srgb,var(--ahel-c5) 20%,transparent),transparent 44%),repeating-conic-gradient(from 0deg at 50% -24%,#fdf3e309 0 3deg,transparent 3deg 12deg),linear-gradient(145deg,#222c46,#0d1424 60%,#1d2131); }
.codex-ahel-hammer[data-ahel-theme="titan"] > header span,
.codex-ahel-hammer[data-ahel-theme="titan"] .codex-ahel-tier small { color: var(--ahel-c5); }
.codex-ahel-hammer[data-ahel-theme="titan"] > header h3 { color: #fdf3e3; }
.codex-ahel-hammer[data-ahel-theme="titan"] > header p { color: #c4cee0; }
.codex-ahel-hammer[data-ahel-theme="titan"] .codex-ahel-hammer__vfx i { background: var(--ahel-c3); box-shadow: 0 0 8px var(--ahel-c5), 0 0 12px var(--ahel-c1); }
.codex-ahel-hammer[data-ahel-theme="ko"] { outline-color: color-mix(in srgb,var(--ahel-c5) 26%,transparent); background: radial-gradient(circle at 10% 0,color-mix(in srgb,var(--ahel-c3) 14%,transparent),transparent 38%),radial-gradient(circle at 92% 100%,color-mix(in srgb,var(--ahel-c5) 24%,transparent),transparent 44%),linear-gradient(145deg,color-mix(in srgb,var(--ahel-c1) 40%,#0b0805),color-mix(in srgb,var(--ahel-c2) 90%,#000)); }
.codex-ahel-hammer > * { position: relative; z-index: 1; }
.codex-ahel-hammer__vfx { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; overflow: hidden; }
.codex-ahel-hammer__vfx i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: var(--ahel-c3); box-shadow: 0 0 8px var(--ahel-c1); opacity: 0; animation: codexAhelEmber 5.6s linear infinite; }
.codex-ahel-hammer__vfx i:nth-child(1) { left: 6%; animation-delay: 0s; }
.codex-ahel-hammer__vfx i:nth-child(2) { left: 18%; animation-delay: 1.4s; }
.codex-ahel-hammer__vfx i:nth-child(3) { left: 31%; animation-delay: 3.1s; }
.codex-ahel-hammer__vfx i:nth-child(4) { left: 45%; animation-delay: .7s; }
.codex-ahel-hammer__vfx i:nth-child(5) { left: 58%; animation-delay: 2.3s; }
.codex-ahel-hammer__vfx i:nth-child(6) { left: 71%; animation-delay: 4.2s; }
.codex-ahel-hammer__vfx i:nth-child(7) { left: 84%; animation-delay: 1.9s; }
.codex-ahel-hammer__vfx i:nth-child(8) { left: 94%; animation-delay: 3.6s; }
.codex-ahel-hammer > header { display: flex; align-items: center; gap: 16px; }
.codex-ahel-hammer > header > img { flex: 0 0 auto; width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 0 12px color-mix(in srgb,var(--ahel-c1) 70%,transparent)); animation: codexAhelFloat 3.4s ease-in-out infinite; }
.codex-ahel-hammer > header span { color: var(--ahel-c4); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-ahel-hammer[data-ahel-theme="ko"] > header span { color: var(--ahel-c3); }
.codex-ahel-hammer > header h3 { margin: 7px 0 5px; color: #fff0e2; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb,var(--ahel-c1) 60%,transparent); }
.codex-ahel-hammer > header p { margin: 0; color: rgba(236,220,206,.76); font-size: .74rem; line-height: 1.45; }
.codex-ahel-hammer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.codex-ahel-tier { display: grid; grid-template-columns: 64px minmax(0,1fr); align-items: center; gap: 12px; padding: 14px 12px; border: 1px solid color-mix(in srgb,var(--ahel-c1) 26%,transparent); border-radius: 12px; background: linear-gradient(180deg,color-mix(in srgb,var(--ahel-c1) 8%,transparent),rgba(0,0,0,.32)); }
.codex-ahel-tier[data-tier="2"] { border-color: color-mix(in srgb,var(--ahel-c3) 45%,transparent); }
.codex-ahel-tier[data-tier="3"] { border-color: color-mix(in srgb,var(--ahel-c1) 72%,transparent); box-shadow: 0 0 18px color-mix(in srgb,var(--ahel-c1) 30%,transparent),inset 0 0 18px rgba(0,0,0,.45); }
.codex-ahel-tier > img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb,var(--ahel-c1) 60%,transparent)); }
.codex-ahel-tier small { color: var(--ahel-c4); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-ahel-hammer[data-ahel-theme="ko"] .codex-ahel-tier small { color: var(--ahel-c3); }
.codex-ahel-tier strong { display: block; margin: 4px 0 6px; color: #fff1e4; font: 800 .86rem/1.15 Montserrat,sans-serif; }
.codex-ahel-tier p { margin: 0; color: rgba(236,220,208,.8); font-size: .68rem; line-height: 1.35; }
.codex-ahel-hammer-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.codex-ahel-hammer-rules span { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 10px; border: 1px solid color-mix(in srgb,var(--ahel-c1) 22%,transparent); border-radius: 10px; background: rgba(0,0,0,.28); }
.codex-ahel-hammer-rules img { grid-row: 1 / 3; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb,var(--ahel-c1) 65%,transparent)); }
.codex-ahel-hammer-rules b { color: var(--ahel-c3); font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-ahel-hammer-rules small { color: rgba(236,220,206,.74); font-size: .66rem; line-height: 1.35; }
@keyframes codexAhelFloat { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes codexAhelEmber { 0% { transform: translate(0,0) scale(.6); opacity: 0; } 12% { opacity: .9; } 100% { transform: translate(14px,-260px) scale(1.1); opacity: 0; } }
@media (max-width: 900px) { .codex-ahel-hammer-grid { grid-template-columns: 1fr; } .codex-ahel-hammer-rules { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .codex-ahel-hammer > header > img, .codex-ahel-hammer__vfx i { animation: none; } }

/* ===== Nola (44) · Vadászprofil – extra mechanika a kódexben =====
   Paletta: --nola-c1..5 inline stílusból (alap: #ACDB35 #2690DC #F3F4EF #1A2229 #1A6BF1,
   Elegáns: #62FFB8 #1B8C3D #B18333 #6AFFA4 #065C29). */
.ability-desc .ability-progression.is-nola-hunter-details .ability-progression-step { grid-template-columns: 112px minmax(0,1fr); }
.ability-desc .ability-progression.is-nola-hunter-details .ability-progression-step.is-wide-label { grid-template-columns: minmax(0,1fr); gap: 5px; }
.ability-desc .ability-progression.is-nola-hunter-details .ability-progression-step.is-wide-label .ability-progression-label { padding-bottom: 5px; border-bottom: 1px solid rgba(172,219,53,.22); }
.ability-inline-icon.is-nola-keyword { filter: drop-shadow(0 0 4px rgba(38,144,220,.85)) drop-shadow(0 0 2px rgba(172,219,53,.5)); }
.ability-inline-icon.is-nola-keyword.is-nola-elegans { filter: drop-shadow(0 0 4px rgba(98,255,184,.85)) drop-shadow(0 0 2px rgba(177,131,51,.6)); }
.codex-nola-hunter { --nola-c1: #ACDB35; --nola-c2: #2690DC; --nola-c3: #F3F4EF; --nola-c4: #1A2229; --nola-c5: #1A6BF1; position: relative; isolation: isolate; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--nola-c2) 50%,transparent); outline: 1px solid color-mix(in srgb,var(--nola-c1) 18%,transparent); outline-offset: -6px; background: radial-gradient(circle at 10% 0,color-mix(in srgb,var(--nola-c1) 14%,transparent),transparent 38%),radial-gradient(circle at 92% 100%,color-mix(in srgb,var(--nola-c5) 26%,transparent),transparent 44%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),linear-gradient(145deg,color-mix(in srgb,var(--nola-c4) 88%,#000),rgba(5,8,11,.97)); box-shadow: inset 0 0 34px color-mix(in srgb,var(--nola-c2) 10%,transparent),0 18px 38px rgba(0,0,0,.32); }
.codex-nola-hunter[data-nola-theme="elegans"] { border-color: color-mix(in srgb,var(--nola-c1) 45%,transparent); outline-color: color-mix(in srgb,var(--nola-c3) 30%,transparent); background: radial-gradient(circle at 10% 0,color-mix(in srgb,var(--nola-c1) 14%,transparent),transparent 38%),radial-gradient(circle at 92% 100%,color-mix(in srgb,var(--nola-c3) 22%,transparent),transparent 44%),linear-gradient(145deg,color-mix(in srgb,var(--nola-c5) 70%,#000),rgba(3,10,6,.97)); }
.codex-nola-hunter::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--nola-c2) 12%,transparent) 48%,color-mix(in srgb,var(--nola-c1) 18%,transparent) 50%,transparent 52%,transparent 100%); background-size: 100% 260%; animation: codexNolaScan 7s linear infinite; }
.codex-nola-hunter > * { position: relative; z-index: 1; }
.codex-nola-hunter__vfx { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; overflow: hidden; }
.codex-nola-hunter__vfx i { position: absolute; top: -12px; width: 2px; height: 26px; border-radius: 2px; background: linear-gradient(180deg,transparent,var(--nola-c1)); box-shadow: 0 0 8px var(--nola-c2); opacity: 0; animation: codexNolaData 6s linear infinite; }
.codex-nola-hunter__vfx i:nth-child(1) { left: 8%; animation-delay: 0s; }
.codex-nola-hunter__vfx i:nth-child(2) { left: 24%; animation-delay: 2.2s; }
.codex-nola-hunter__vfx i:nth-child(3) { left: 41%; animation-delay: 4.1s; }
.codex-nola-hunter__vfx i:nth-child(4) { left: 63%; animation-delay: 1.3s; }
.codex-nola-hunter__vfx i:nth-child(5) { left: 79%; animation-delay: 3.4s; }
.codex-nola-hunter__vfx i:nth-child(6) { left: 93%; animation-delay: 5.2s; }
.codex-nola-hunter > header { display: flex; align-items: center; gap: 18px; }
.codex-nola-hunter__emblem { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--nola-c1) 22%,transparent),color-mix(in srgb,var(--nola-c5) 24%,transparent) 55%,transparent 72%); }
.codex-nola-hunter__digital { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; opacity: .5; filter: drop-shadow(0 0 10px var(--nola-c2)); animation: codexNolaSpin 18s linear infinite; }
.codex-nola-hunter__weapon { position: relative; z-index: 1; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb,var(--nola-c1) 80%,transparent)) drop-shadow(0 0 16px color-mix(in srgb,var(--nola-c2) 60%,transparent)); animation: codexNolaFloat 3.4s ease-in-out infinite; }
.codex-nola-hunter__emblem i { position: absolute; top: 50%; left: 50%; z-index: 2; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 1px; background: var(--nola-c1); box-shadow: 0 0 8px var(--nola-c2), 0 0 3px #fff; transform: rotate(calc(var(--nola-i) * 120deg)) translateY(-44px); animation: codexNolaOrbit 12s linear infinite; }
.codex-nola-hunter > header span:not(.codex-nola-hunter__emblem) { color: var(--nola-c1); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-nola-hunter > header h3 { margin: 7px 0 5px; color: var(--nola-c3); font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb,var(--nola-c2) 65%,transparent); }
.codex-nola-hunter[data-nola-theme="elegans"] > header h3 { color: #f1fff6; text-shadow: 0 0 16px color-mix(in srgb,var(--nola-c1) 55%,transparent); }
.codex-nola-hunter > header p { margin: 0; color: rgba(226,236,240,.82); font-size: .74rem; line-height: 1.45; }
.codex-nola-hunter-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.codex-nola-tier { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 12px; padding: 12px; border: 1px solid color-mix(in srgb,var(--nola-c2) 32%,transparent); border-radius: 12px; background: linear-gradient(180deg,color-mix(in srgb,var(--nola-c2) 9%,transparent),rgba(0,0,0,.34)); }
.codex-nola-tier[data-tier="10"] { border-color: color-mix(in srgb,var(--nola-c1) 45%,transparent); }
.codex-nola-tier[data-tier="15"] { border-color: color-mix(in srgb,var(--nola-c1) 75%,transparent); background: linear-gradient(120deg,color-mix(in srgb,var(--nola-c1) 16%,transparent),color-mix(in srgb,var(--nola-c5) 14%,transparent),rgba(0,0,0,.4)); box-shadow: 0 0 18px color-mix(in srgb,var(--nola-c1) 24%,transparent),inset 0 0 18px rgba(0,0,0,.4); }
.codex-nola-tier__count { position: relative; display: grid; place-items: center; width: 58px; height: 58px; }
.codex-nola-tier__count img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 7px color-mix(in srgb,var(--nola-c2) 75%,transparent)); }
.codex-nola-tier[data-tier="15"] .codex-nola-tier__count img { filter: drop-shadow(0 0 9px var(--nola-c1)) drop-shadow(0 0 3px #fff); animation: codexNolaPulse 2.6s ease-in-out infinite; }
.codex-nola-tier__count b { position: absolute; right: -4px; bottom: -2px; padding: 2px 5px; border-radius: 6px; background: rgba(4,8,12,.9); border: 1px solid color-mix(in srgb,var(--nola-c1) 60%,transparent); color: var(--nola-c3); font: 800 .62rem/1 Montserrat,sans-serif; }
.codex-nola-tier small { color: var(--nola-c2); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-nola-hunter[data-nola-theme="elegans"] .codex-nola-tier small { color: var(--nola-c3); }
.codex-nola-tier strong { display: block; margin: 4px 0 6px; color: var(--nola-c3); font: 800 .84rem/1.15 Montserrat,sans-serif; }
.codex-nola-tier p { margin: 0; color: rgba(222,232,236,.8); font-size: .66rem; line-height: 1.35; }
.codex-nola-hunter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.codex-nola-rule { display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: start; padding: 10px; border: 1px solid color-mix(in srgb,var(--nola-c2) 24%,transparent); border-radius: 10px; background: rgba(0,0,0,.34); }
.codex-nola-rule.is-analysis, .codex-nola-rule.is-triple { border-color: color-mix(in srgb,var(--nola-c1) 50%,transparent); background: linear-gradient(120deg,color-mix(in srgb,var(--nola-c1) 12%,transparent),rgba(0,0,0,.36)); }
.codex-nola-rule > img { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb,var(--nola-c2) 70%,transparent)); }
.codex-nola-rule strong { display: block; margin-bottom: 3px; color: var(--nola-c1); font: 800 .72rem/1.15 Montserrat,sans-serif; }
.codex-nola-rule p { margin: 0; color: rgba(222,232,236,.8); font-size: .66rem; line-height: 1.4; }
.codex-nola-hunter-footer { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 10px; margin-top: 12px; }
.codex-nola-hunter-footer > span { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 10px; border: 1px solid color-mix(in srgb,var(--nola-c2) 22%,transparent); border-radius: 10px; background: rgba(0,0,0,.28); }
.codex-nola-hunter-footer > span > img { grid-row: 1 / 3; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb,var(--nola-c1) 60%,transparent)); }
.codex-nola-hunter-footer b { color: var(--nola-c1); font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-nola-hunter-footer small { color: rgba(222,232,236,.76); font-size: .64rem; line-height: 1.35; }
.codex-nola-hunter-footer .codex-nola-hunter-skins { grid-template-columns: 44px 44px 1fr; grid-template-rows: auto; }
.codex-nola-hunter-footer .codex-nola-hunter-skins img { grid-row: auto; width: 44px; height: 44px; object-fit: contain; animation: codexNolaFloat 3.8s ease-in-out infinite; }
.codex-nola-hunter-footer .codex-nola-hunter-skins img:nth-child(1) { filter: drop-shadow(0 0 7px rgba(38,144,220,.85)); }
.codex-nola-hunter-footer .codex-nola-hunter-skins img:nth-child(2) { filter: drop-shadow(0 0 7px rgba(98,255,184,.85)); animation-delay: -1.9s; }
@keyframes codexNolaScan { 0% { background-position: 0 100%; } 100% { background-position: 0 -160%; } }
@keyframes codexNolaData { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .75; } 100% { transform: translateY(420px); opacity: 0; } }
@keyframes codexNolaFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes codexNolaSpin { to { transform: rotate(360deg); } }
@keyframes codexNolaOrbit { from { transform: rotate(calc(var(--nola-i) * 120deg)) translateY(-44px); } to { transform: rotate(calc(var(--nola-i) * 120deg + 360deg)) translateY(-44px); } }
@keyframes codexNolaPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (max-width: 900px) { .codex-nola-hunter-steps, .codex-nola-hunter-grid, .codex-nola-hunter-footer { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .codex-nola-hunter > header { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .codex-nola-hunter::before, .codex-nola-hunter__vfx i, .codex-nola-hunter__digital, .codex-nola-hunter__weapon, .codex-nola-hunter__emblem i, .codex-nola-tier[data-tier="15"] .codex-nola-tier__count img, .codex-nola-hunter-footer .codex-nola-hunter-skins img { animation: none; } }

/* CIRCUS · ROBOTMŰHELY (hero-index.js renderCircusCodexWorkshop) */
.codex-circus-workshop { --circus-c1: #175BCF; --circus-c2: #1E76B6; --circus-c3: #45608E; --circus-c4: #4DFFFF; --circus-c5: #001193; position: relative; isolation: isolate; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--circus-c1) 60%,transparent); outline: 1px solid color-mix(in srgb,var(--circus-c4) 20%,transparent); outline-offset: -6px; background: repeating-linear-gradient(0deg,color-mix(in srgb,var(--circus-c4) 4%,transparent) 0 1px,transparent 1px 10px),repeating-linear-gradient(90deg,color-mix(in srgb,var(--circus-c4) 4%,transparent) 0 1px,transparent 1px 10px),radial-gradient(circle at 10% 0,color-mix(in srgb,var(--circus-c2) 20%,transparent),transparent 38%),radial-gradient(circle at 92% 100%,color-mix(in srgb,var(--circus-c1) 26%,transparent),transparent 44%),linear-gradient(145deg,color-mix(in srgb,var(--circus-c5) 60%,#01030c),rgba(2,5,14,.97)); box-shadow: inset 0 0 34px color-mix(in srgb,var(--circus-c1) 14%,transparent),0 18px 38px rgba(0,0,0,.32); }
.codex-circus-workshop[data-circus-theme="akademia"] { border-color: color-mix(in srgb,var(--circus-c2) 60%,transparent); outline-color: color-mix(in srgb,var(--circus-c5) 30%,transparent); background: repeating-linear-gradient(0deg,color-mix(in srgb,var(--circus-c5) 5%,transparent) 0 1px,transparent 1px 10px),radial-gradient(circle at 10% 0,color-mix(in srgb,var(--circus-c5) 16%,transparent),transparent 38%),radial-gradient(circle at 92% 100%,color-mix(in srgb,var(--circus-c1) 22%,transparent),transparent 44%),linear-gradient(145deg,var(--circus-c4),rgba(6,4,24,.97)); }
.codex-circus-workshop::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--circus-c2) 10%,transparent) 48%,color-mix(in srgb,var(--circus-c4) 16%,transparent) 50%,transparent 52%,transparent 100%); background-size: 100% 260%; animation: codexCircusScan 7s linear infinite; }
.codex-circus-workshop > * { position: relative; z-index: 1; }
.codex-circus-workshop__vfx { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; overflow: hidden; }
.codex-circus-workshop__vfx i { position: absolute; bottom: -10px; width: 2px; height: 9px; border-radius: 1px; background: var(--circus-c4); box-shadow: 0 0 8px var(--circus-c4); opacity: 0; animation: codexCircusBit 7s linear infinite; }
.codex-circus-workshop__vfx i:nth-child(1) { left: 6%; animation-delay: 0s; }
.codex-circus-workshop__vfx i:nth-child(2) { left: 18%; animation-delay: 3.1s; }
.codex-circus-workshop__vfx i:nth-child(3) { left: 31%; animation-delay: 1.4s; }
.codex-circus-workshop__vfx i:nth-child(4) { left: 44%; animation-delay: 5.2s; }
.codex-circus-workshop__vfx i:nth-child(5) { left: 57%; animation-delay: 2.3s; }
.codex-circus-workshop__vfx i:nth-child(6) { left: 70%; animation-delay: 4.4s; }
.codex-circus-workshop__vfx i:nth-child(7) { left: 83%; animation-delay: .8s; }
.codex-circus-workshop__vfx i:nth-child(8) { left: 95%; animation-delay: 6.1s; }
.codex-circus-workshop > header { display: flex; align-items: center; gap: 18px; }
.codex-circus-workshop__emblem { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb,var(--circus-c4) 20%,transparent),color-mix(in srgb,var(--circus-c1) 26%,transparent) 55%,transparent 72%); }
.codex-circus-workshop__gear { position: absolute; inset: 6px; border-radius: 50%; background: repeating-conic-gradient(color-mix(in srgb,var(--circus-c4) 40%,transparent) 0 8deg,transparent 8deg 22.5deg); -webkit-mask: radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px)); mask: radial-gradient(farthest-side,transparent calc(100% - 7px),#000 calc(100% - 6px)); animation: codexCircusSpin 16s linear infinite; }
.codex-circus-workshop__emblem img { position: relative; z-index: 1; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 8px var(--circus-c4)) drop-shadow(0 0 16px var(--circus-c1)); animation: codexCircusWrench 3.4s ease-in-out infinite; }
.codex-circus-workshop > header span:not(.codex-circus-workshop__emblem) { color: var(--circus-c4); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-circus-workshop[data-circus-theme="akademia"] > header span:not(.codex-circus-workshop__emblem) { color: var(--circus-c5); }
.codex-circus-workshop > header h3 { margin: 7px 0 5px; color: #eaf6ff; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb,var(--circus-c1) 70%,transparent); }
.codex-circus-workshop > header p { margin: 0; color: rgba(226,236,244,.84); font-size: .74rem; line-height: 1.45; }
.codex-circus-slots { display: flex; justify-content: center; gap: 8px; margin: 18px auto 4px; padding: 8px 12px; width: fit-content; border: 1px solid color-mix(in srgb,var(--circus-c4) 35%,transparent); border-radius: 12px 12px 6px 6px; background: rgba(1,4,14,.6); box-shadow: 0 0 14px color-mix(in srgb,var(--circus-c1) 30%,transparent); }
.codex-circus-slots span { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid #2f6bff; border-radius: 10px; background: radial-gradient(circle,rgba(47,107,255,.22),rgba(1,4,14,.92) 72%); animation: codexCircusIdle 2.6s ease-in-out infinite; animation-delay: calc(var(--circus-slot-i) * -.5s); }
.codex-circus-slots span[data-robot-type="lezer"] { border-color: #7fd6ff; }
.codex-circus-slots span[data-robot-type="hatalmas"] { border-color: #ff9a2e; }
.codex-circus-slots img { width: 38px; height: 38px; object-fit: contain; }
.codex-circus-slots b { position: absolute; top: -7px; right: -6px; padding: 1px 4px; border-radius: 4px; background: #020614; border: 1px solid var(--circus-c4); color: #fff; font: 800 .5rem/1 Montserrat,sans-serif; }
.codex-circus-robots { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 16px; }
.codex-circus-robot { display: grid; align-content: start; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb,var(--circus-c1) 45%,transparent); border-radius: 12px; background: linear-gradient(180deg,color-mix(in srgb,var(--circus-c1) 10%,transparent),rgba(0,0,0,.36)); }
.codex-circus-robot[data-robot-type="hatalmas"] { border-color: rgba(255,154,46,.5); background: linear-gradient(180deg,rgba(255,154,46,.08),rgba(0,0,0,.36)); }
.codex-circus-robot header { display: flex; align-items: center; gap: 10px; }
.codex-circus-robot header img { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb,var(--circus-c4) 60%,transparent)); }
.codex-circus-robot header small { display: block; color: var(--circus-c4); font: 800 .5rem/1.3 Montserrat,sans-serif; letter-spacing: .08em; }
.codex-circus-workshop[data-circus-theme="akademia"] .codex-circus-robot header small { color: var(--circus-c5); }
.codex-circus-robot header strong { display: block; margin-top: 3px; color: #eef7ff; font: 800 .86rem/1.15 Montserrat,sans-serif; }
.codex-circus-robot ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.codex-circus-robot li { --circus-frame: #2f6bff; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 5px 8px; border: 1px solid color-mix(in srgb,var(--circus-frame) 45%,transparent); border-radius: 8px; background: rgba(0,0,0,.34); color: rgba(226,236,244,.86); font-size: .64rem; }
.codex-circus-robot li[data-circus-level="1"] { --circus-frame: #7fd6ff; }
.codex-circus-robot li[data-circus-level="2"] { --circus-frame: #ff9a2e; }
.codex-circus-robot li[data-circus-level="3"] { --circus-frame: #e2baf7; box-shadow: 0 0 10px rgba(226,186,247,.22); }
.codex-circus-robot li b { min-width: 24px; color: var(--circus-frame); font: 900 .66rem/1 Montserrat,sans-serif; }
.codex-circus-robot p { margin: 0; color: rgba(222,232,238,.78); font-size: .64rem; line-height: 1.4; }
.codex-circus-rules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.codex-circus-rules > div { padding: 9px 11px; border: 1px solid color-mix(in srgb,var(--circus-c4) 18%,transparent); border-radius: 10px; background: rgba(0,0,0,.3); }
.codex-circus-rules dt { color: var(--circus-c4); font: 800 .64rem/1.2 Montserrat,sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.codex-circus-workshop[data-circus-theme="akademia"] .codex-circus-rules dt { color: var(--circus-c5); }
.codex-circus-rules dd { margin: 4px 0 0; color: rgba(222,232,238,.8); font-size: .66rem; line-height: 1.4; }
.codex-circus-effects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 12px; }
.codex-circus-effect { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: start; padding: 10px; border: 1px solid color-mix(in srgb,var(--circus-c1) 30%,transparent); border-radius: 10px; background: rgba(0,0,0,.34); }
.codex-circus-effect.is-tulhajtas, .codex-circus-effect.is-tulterheles, .codex-circus-effect.is-hadiuzemmod { border-color: color-mix(in srgb,var(--circus-c4) 50%,transparent); background: linear-gradient(120deg,color-mix(in srgb,var(--circus-c4) 10%,transparent),rgba(0,0,0,.36)); }
.codex-circus-effect.is-hadiuzemmod { border-color: rgba(255,154,46,.6); background: linear-gradient(120deg,rgba(255,154,46,.12),rgba(0,0,0,.36)); }
.codex-circus-effect > img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb,var(--circus-c4) 70%,transparent)); }
.codex-circus-effect strong { display: block; margin-bottom: 3px; color: #eef7ff; font: 800 .72rem/1.15 Montserrat,sans-serif; }
.codex-circus-effect p { margin: 0; color: rgba(222,232,238,.8); font-size: .66rem; line-height: 1.4; }
.codex-circus-footer { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 10px; margin-top: 12px; }
.codex-circus-footer > span { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; gap: 2px 10px; align-items: center; padding: 10px; border: 1px solid color-mix(in srgb,var(--circus-c4) 22%,transparent); border-radius: 10px; background: rgba(0,0,0,.28); }
.codex-circus-footer > span > img { grid-row: 1 / 3; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb,var(--circus-c4) 60%,transparent)); }
.codex-circus-footer b { color: var(--circus-c4); font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-circus-workshop[data-circus-theme="akademia"] .codex-circus-footer b { color: var(--circus-c5); }
.codex-circus-footer small { color: rgba(222,232,238,.76); font-size: .64rem; line-height: 1.35; }
.codex-circus-footer .codex-circus-skins { grid-template-columns: 44px 44px 1fr; grid-template-rows: auto; }
.codex-circus-footer .codex-circus-skins img { grid-row: auto; width: 44px; height: 44px; object-fit: contain; animation: codexCircusWrench 3.8s ease-in-out infinite; }
.codex-circus-footer .codex-circus-skins img:nth-child(1) { filter: drop-shadow(0 0 7px rgba(77,255,255,.85)); }
.codex-circus-footer .codex-circus-skins img:nth-child(2) { filter: drop-shadow(0 0 7px rgba(226,186,247,.85)); animation-delay: -1.9s; }
.ability-inline-icon.is-circus-keyword { filter: drop-shadow(0 0 4px rgba(77,255,255,.75)); }
.ability-inline-icon.is-circus-keyword.is-circus-akademia { filter: drop-shadow(0 0 4px rgba(226,186,247,.8)); }
.ability-progression.is-circus-workshop-details .ability-progression-step.is-current { border-radius: 8px; box-shadow: 0 0 0 1px rgba(77,255,255,.6) inset; }
@keyframes codexCircusScan { 0% { background-position: 0 100%; } 100% { background-position: 0 -160%; } }
@keyframes codexCircusBit { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .75; } 100% { transform: translateY(-620px); opacity: 0; } }
@keyframes codexCircusSpin { to { transform: rotate(360deg); } }
@keyframes codexCircusWrench { 0%,100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-5px) rotate(6deg); } }
@keyframes codexCircusIdle { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (max-width: 900px) { .codex-circus-robots, .codex-circus-rules, .codex-circus-effects, .codex-circus-footer { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .codex-circus-workshop > header { flex-direction: column; align-items: flex-start; } .codex-circus-slots { gap: 5px; padding: 6px 8px; } .codex-circus-slots span { width: 40px; height: 40px; } .codex-circus-slots img { width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .codex-circus-workshop::before, .codex-circus-workshop__vfx i, .codex-circus-workshop__gear, .codex-circus-workshop__emblem img, .codex-circus-slots span, .codex-circus-footer .codex-circus-skins img { animation: none; } }

.codex-rework-mechanic.is-hero-46 .codex-rework-mechanic-icon{width:112px;height:88px}
.codex-rework-mechanic.is-hero-46 .codex-rework-mechanic-icon img{width:104px;height:80px;object-fit:contain}

/* ===== ABRA (55) · ÜRESSÉG ÉS LÉLEKSZÍVÓ KASZA – kódex-szekció =====
   Skin-függő paletta (alap / jeg / vip) szemantikus tokenekkel:
   --abra-deep (háttér), --abra-core (lyuk), --abra-accent (korong),
   --abra-glow (fény), --abra-mist (köd), --abra-edge (keret). */
.codex-abra-void { --abra-deep: #0b0f18; --abra-core: #000; --abra-accent: #4E5693; --abra-glow: #F0FFFF; --abra-mist: #797D97; --abra-edge: #364559; --abra-hi: color-mix(in srgb, var(--abra-accent) 55%, var(--abra-glow)); position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--abra-hi) 50%, transparent); outline: 1px solid color-mix(in srgb, var(--abra-edge) 60%, transparent); outline-offset: -6px; background: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--abra-accent) 26%, transparent), transparent 42%), radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--abra-edge) 55%, transparent), transparent 46%), linear-gradient(145deg, color-mix(in srgb, var(--abra-deep) 90%, var(--abra-accent)), var(--abra-deep)); box-shadow: inset 0 0 40px color-mix(in srgb, var(--abra-accent) 20%, transparent), 0 18px 38px rgba(0,0,0,.36); isolation: isolate; }
.codex-abra-void[data-abra-theme="jeg"] { --abra-deep: #0D1431; --abra-core: #03061a; --abra-accent: #63E2FF; --abra-glow: #D8DBFF; --abra-mist: #8FA6DC; --abra-edge: #2E4C8D; }
.codex-abra-void[data-abra-theme="vip"] { --abra-deep: #0C0C06; --abra-core: #050402; --abra-accent: #CCA285; --abra-glow: #f6e2c9; --abra-mist: #918D99; --abra-edge: #3B2616; }
.codex-abra-void > *:not(.codex-abra-void__vfx) { position: relative; z-index: 1; }
.codex-abra-void__vfx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.codex-abra-void__vfx i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--abra-glow); box-shadow: 0 0 6px var(--abra-hi); opacity: 0; animation: codexAbraMote 7s ease-in infinite; }
.codex-abra-void__vfx i:nth-child(1) { left: 8%; top: 20%; animation-delay: 0s; }
.codex-abra-void__vfx i:nth-child(2) { left: 22%; top: 70%; animation-delay: 1.4s; }
.codex-abra-void__vfx i:nth-child(3) { left: 35%; top: 35%; animation-delay: 2.8s; }
.codex-abra-void__vfx i:nth-child(4) { left: 48%; top: 85%; animation-delay: .7s; }
.codex-abra-void__vfx i:nth-child(5) { left: 60%; top: 15%; animation-delay: 4.2s; }
.codex-abra-void__vfx i:nth-child(6) { left: 72%; top: 60%; animation-delay: 2.1s; }
.codex-abra-void__vfx i:nth-child(7) { left: 84%; top: 30%; animation-delay: 5.1s; }
.codex-abra-void__vfx i:nth-child(8) { left: 93%; top: 78%; animation-delay: 3.5s; }
.codex-abra-void__vfx i:nth-child(9) { left: 15%; top: 50%; animation-delay: 6s; }
.codex-abra-void__vfx i:nth-child(10) { left: 66%; top: 42%; animation-delay: 5.6s; }
.codex-abra-void > header { display: flex; align-items: center; gap: 18px; }
.codex-abra-void__emblem { position: relative; flex: 0 0 auto; width: 84px; height: 84px; display: grid; place-items: center; }
.codex-abra-void__emblem i { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle, var(--abra-core) 0 36%, color-mix(in srgb, var(--abra-accent) 70%, transparent) 44%, transparent 64%), conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--abra-hi) 85%, transparent), transparent 40%, color-mix(in srgb, var(--abra-accent) 70%, transparent), transparent 80%); box-shadow: 0 0 22px color-mix(in srgb, var(--abra-accent) 60%, transparent), inset 0 0 14px var(--abra-core); animation: codexAbraSpin 9s linear infinite; }
.codex-abra-void__emblem img { position: relative; width: 70px; height: 70px; object-fit: contain; filter: drop-shadow(0 0 10px var(--abra-hi)); animation: codexAbraFloat 3.4s ease-in-out infinite; }
.codex-abra-void > header span { color: var(--abra-hi); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-abra-void > header h3 { margin: 7px 0 5px; color: var(--abra-glow); font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb, var(--abra-hi) 70%, transparent); }
.codex-abra-void > header p { margin: 0; color: color-mix(in srgb, var(--abra-glow) 72%, transparent); font-size: .74rem; line-height: 1.45; }
.codex-abra-void__title { margin: 20px 0 0; color: var(--abra-hi); font: 800 .66rem/1 Montserrat,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.codex-abra-void-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.codex-abra-tier { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 14px 10px; border: 1px solid color-mix(in srgb, var(--abra-accent) 38%, transparent); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--abra-edge) 30%, transparent), rgba(0,0,0,.36)); text-align: center; }
.codex-abra-tier.is-rift, .codex-abra-tier.is-death { border-color: color-mix(in srgb, var(--abra-hi) 80%, transparent); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--abra-accent) 34%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--abra-edge) 45%, transparent), rgba(0,0,0,.42)); box-shadow: 0 0 20px color-mix(in srgb, var(--abra-hi) 32%, transparent), inset 0 0 18px rgba(0,0,0,.45); }
.codex-abra-tier > img { width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--abra-hi) 70%, transparent)); }
.codex-abra-tier[data-tier="0"] > img, .codex-abra-tier[data-seals="0"] > img { filter: grayscale(.4) brightness(.82) drop-shadow(0 0 6px color-mix(in srgb, var(--abra-accent) 50%, transparent)); }
.codex-abra-tier[data-tier="75"] > img, .codex-abra-tier[data-seals="3"] > img { filter: saturate(1.2) drop-shadow(0 0 11px var(--abra-hi)); }
.codex-abra-tier.is-rift > img, .codex-abra-tier.is-death > img { width: 64px; height: 64px; animation: codexAbraFloat 2.8s ease-in-out infinite; }
.codex-abra-tier small { color: var(--abra-hi); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-abra-tier strong { display: block; margin: 4px 0 6px; color: var(--abra-glow); font: 800 .84rem/1.15 Montserrat,sans-serif; }
.codex-abra-tier p { margin: 0; color: color-mix(in srgb, var(--abra-glow) 76%, transparent); font-size: .67rem; line-height: 1.35; }
.codex-abra-void-rules { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.codex-abra-void-rules span { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 8px; row-gap: 4px; align-content: start; padding: 10px; border: 1px solid color-mix(in srgb, var(--abra-accent) 32%, transparent); border-radius: 10px; background: rgba(0,0,0,.32); }
.codex-abra-void-rules span > img { grid-row: 1 / span 2; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--abra-hi) 70%, transparent)); }
.codex-abra-void-rules b { color: var(--abra-hi); font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-abra-void-rules small { color: color-mix(in srgb, var(--abra-glow) 74%, transparent); font-size: .66rem; line-height: 1.35; }
.codex-abra-void .ability-inline-icon { display: inline-block; width: 1.15em; height: 1.15em; margin: 0 .12em; vertical-align: -.2em; object-fit: contain; }
@keyframes codexAbraSpin { to { transform: rotate(360deg); } }
@keyframes codexAbraFloat { 50% { transform: translateY(-4px) rotate(-3deg); } }
@keyframes codexAbraMote { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-30px, -60px) scale(.2); } }
@media (max-width: 900px) { .codex-abra-void-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .codex-abra-tier.is-rift, .codex-abra-tier.is-death { grid-column: 1 / -1; } .codex-abra-void-rules { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .codex-abra-void { padding: 18px 16px; } .codex-abra-void > header { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .codex-abra-void__emblem i, .codex-abra-void__emblem img, .codex-abra-tier > img, .codex-abra-void__vfx i { animation: none; } .codex-abra-void__vfx { display: none; } }

/* ===============================
   AROBIUS · JEGES CSILLAGPENGÉK (heroId 59)
   Skin-függő paletta: --arobius-c1..5 (alap / Rém Akadémia).
   =============================== */
.codex-arobius-blades { --arobius-c1: #3A6DD9; --arobius-c2: #173656; --arobius-c3: #1F2742; --arobius-c4: #54D8FF; --arobius-c5: #153A70; --arobius-hi: color-mix(in srgb, var(--arobius-c4) 70%, #fff); position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--arobius-c4) 48%, transparent); outline: 1px solid color-mix(in srgb, var(--arobius-c1) 50%, transparent); outline-offset: -6px; background: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--arobius-c1) 34%, transparent), transparent 44%), radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--arobius-c5) 60%, transparent), transparent 48%), linear-gradient(145deg, color-mix(in srgb, var(--arobius-c3) 88%, var(--arobius-c1)), color-mix(in srgb, var(--arobius-c3) 80%, #000)); box-shadow: inset 0 0 40px color-mix(in srgb, var(--arobius-c4) 16%, transparent), 0 18px 38px rgba(0,0,0,.36); isolation: isolate; }
.codex-arobius-blades[data-arobius-theme="rem"] { --arobius-hi: color-mix(in srgb, var(--arobius-c3) 70%, #fff); }
.codex-arobius-blades > *:not(.codex-arobius-blades__vfx) { position: relative; z-index: 1; }
.codex-arobius-blades__vfx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.codex-arobius-blades__vfx i { position: absolute; width: 5px; height: 5px; background: var(--arobius-hi); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: codexArobiusFlake 7.5s linear infinite; }
.codex-arobius-blades__vfx i:nth-child(1) { left: 8%; top: 10%; animation-delay: 0s; }
.codex-arobius-blades__vfx i:nth-child(2) { left: 22%; top: 40%; animation-delay: 1.3s; }
.codex-arobius-blades__vfx i:nth-child(3) { left: 36%; top: 5%; animation-delay: 2.6s; }
.codex-arobius-blades__vfx i:nth-child(4) { left: 48%; top: 55%; animation-delay: .6s; }
.codex-arobius-blades__vfx i:nth-child(5) { left: 61%; top: 12%; animation-delay: 4.1s; }
.codex-arobius-blades__vfx i:nth-child(6) { left: 73%; top: 48%; animation-delay: 2.2s; }
.codex-arobius-blades__vfx i:nth-child(7) { left: 85%; top: 20%; animation-delay: 5.2s; }
.codex-arobius-blades__vfx i:nth-child(8) { left: 94%; top: 62%; animation-delay: 3.4s; }
.codex-arobius-blades__vfx i:nth-child(9) { left: 15%; top: 70%; animation-delay: 6.1s; }
.codex-arobius-blades__vfx i:nth-child(10) { left: 55%; top: 80%; animation-delay: 4.7s; }
.codex-arobius-blades > header { display: flex; align-items: center; gap: 18px; }
.codex-arobius-blades__emblem { position: relative; flex: 0 0 auto; width: 92px; height: 92px; display: grid; place-items: center; }
.codex-arobius-blades__emblem::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--arobius-c4) 45%, transparent); animation: codexArobiusSpin 16s linear infinite; }
.codex-arobius-blades__emblem i { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--arobius-c4) 40%, transparent), transparent 66%); box-shadow: 0 0 22px color-mix(in srgb, var(--arobius-c1) 60%, transparent); }
.codex-arobius-blades__emblem b { position: absolute; left: 50%; top: 50%; width: 9px; height: 16px; margin: -8px 0 0 -4.5px; background: linear-gradient(180deg, #fff, var(--arobius-c4) 55%, var(--arobius-c1)); clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%); filter: drop-shadow(0 0 4px var(--arobius-c4)); transform: rotate(calc(var(--blade-i) * 45deg)) translateY(-40px); }
.codex-arobius-blades__emblem img { position: relative; width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 10px var(--arobius-hi)); animation: codexArobiusFloat 3.4s ease-in-out infinite; }
.codex-arobius-blades > header span { color: var(--arobius-hi); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-arobius-blades > header h3 { margin: 7px 0 5px; color: #eef9ff; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb, var(--arobius-c4) 70%, transparent); }
.codex-arobius-blades > header p { margin: 0; color: rgba(230, 244, 255, .76); font-size: .74rem; line-height: 1.45; }
.codex-arobius-blades__title { margin: 20px 0 0; color: var(--arobius-hi); font: 800 .66rem/1 Montserrat,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.codex-arobius-blades-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.codex-arobius-tier { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 14px 10px; border: 1px solid color-mix(in srgb, var(--arobius-c1) 45%, transparent); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--arobius-c5) 38%, transparent), rgba(0,0,0,.36)); text-align: center; }
.codex-arobius-tier.is-full, .codex-arobius-tier.is-effect { border-color: color-mix(in srgb, var(--arobius-c4) 70%, transparent); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--arobius-c4) 24%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--arobius-c5) 50%, transparent), rgba(0,0,0,.42)); box-shadow: 0 0 18px color-mix(in srgb, var(--arobius-c4) 24%, transparent), inset 0 0 18px rgba(0,0,0,.45); }
.codex-arobius-tier > img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--arobius-c4) 70%, transparent)); }
.codex-arobius-tier[data-tier="1"] > img { filter: saturate(.7) brightness(.85) drop-shadow(0 0 5px color-mix(in srgb, var(--arobius-c1) 60%, transparent)); }
.codex-arobius-tier.is-full > img, .codex-arobius-tier.is-effect > img { width: 62px; height: 62px; animation: codexArobiusFloat 2.8s ease-in-out infinite; }
.codex-arobius-tier small { color: var(--arobius-hi); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-arobius-tier strong { display: block; margin: 4px 0 6px; color: #eef9ff; font: 800 .84rem/1.15 Montserrat,sans-serif; }
.codex-arobius-tier p { margin: 0; color: rgba(225, 240, 255, .78); font-size: .67rem; line-height: 1.35; }
.codex-arobius-blades-rules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.codex-arobius-blades-rules span { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 8px; row-gap: 4px; align-content: start; padding: 10px; border: 1px solid color-mix(in srgb, var(--arobius-c1) 40%, transparent); border-radius: 10px; background: rgba(0,0,0,.32); }
.codex-arobius-blades-rules span > img { grid-row: 1 / span 2; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--arobius-c4) 70%, transparent)); }
.codex-arobius-blades-rules b { color: var(--arobius-hi); font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-arobius-blades-rules small { color: rgba(225, 240, 255, .76); font-size: .66rem; line-height: 1.35; }
.codex-arobius-blades .ability-inline-icon { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .12em; vertical-align: -.22em; object-fit: contain; }
@keyframes codexArobiusSpin { to { transform: rotate(360deg); } }
@keyframes codexArobiusFloat { 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes codexArobiusFlake { 0% { opacity: 0; transform: translateY(0) rotate(0); } 20% { opacity: .85; } 100% { opacity: 0; transform: translateY(70px) rotate(180deg); } }
@media (max-width: 900px) { .codex-arobius-blades-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .codex-arobius-tier.is-full { grid-column: 1 / -1; } .codex-arobius-blades-rules { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .codex-arobius-blades { padding: 18px 16px; } .codex-arobius-blades > header { flex-direction: column; align-items: flex-start; } .codex-arobius-blades-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .codex-arobius-blades__emblem::before, .codex-arobius-blades__emblem img, .codex-arobius-tier > img, .codex-arobius-blades__vfx i { animation: none; } .codex-arobius-blades__vfx { display: none; } }

/* CASSANDRA · HANGENERGIA (heroId 60) – a codex-arobius-blades mintájára; szerepek: c1 fő lila, c2 tompa, c3 mély háttér, c4 jeges ragyogás, c5 lágy. */
.codex-cassandra-sound { --cassandra-c1: #BFA7FD; --cassandra-c2: #8B82A2; --cassandra-c3: #0E1028; --cassandra-c4: #B7C4FF; --cassandra-c5: #CBCAE8; --cassandra-hi: color-mix(in srgb, var(--cassandra-c4) 70%, #fff); position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--cassandra-c4) 48%, transparent); outline: 1px solid color-mix(in srgb, var(--cassandra-c1) 50%, transparent); outline-offset: -6px; background: radial-gradient(circle at 12% 0, color-mix(in srgb, var(--cassandra-c1) 34%, transparent), transparent 44%), radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--cassandra-c5) 60%, transparent), transparent 48%), linear-gradient(145deg, color-mix(in srgb, var(--cassandra-c3) 88%, var(--cassandra-c1)), color-mix(in srgb, var(--cassandra-c3) 80%, #000)); box-shadow: inset 0 0 40px color-mix(in srgb, var(--cassandra-c4) 16%, transparent), 0 18px 38px rgba(0,0,0,.36); isolation: isolate; }
.codex-cassandra-sound[data-cassandra-theme="kristaly"] { --cassandra-hi: color-mix(in srgb, var(--cassandra-c4) 62%, #fff); }
.codex-cassandra-sound > *:not(.codex-cassandra-sound__vfx) { position: relative; z-index: 1; }
.codex-cassandra-sound__vfx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.codex-cassandra-sound__vfx i { position: absolute; width: 5px; height: 5px; background: var(--cassandra-hi); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: codexCassandraFlake 7.5s linear infinite; }
.codex-cassandra-sound__vfx i.is-note { width: 14px; height: 14px; background: none; clip-path: none; }
.codex-cassandra-sound__vfx i.is-note img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 4px var(--cassandra-c4)); }
.codex-cassandra-sound[data-cassandra-motif="crystal-rose"] .codex-cassandra-sound__vfx i:not(.is-note) { width: 8px; height: 8px; border-radius: 50%; background: conic-gradient(var(--cassandra-c4), var(--cassandra-c1), var(--cassandra-c5), var(--cassandra-c4)); }
.codex-cassandra-sound__vfx i:nth-child(1) { left: 8%; top: 10%; animation-delay: 0s; }
.codex-cassandra-sound__vfx i:nth-child(2) { left: 22%; top: 40%; animation-delay: 1.3s; }
.codex-cassandra-sound__vfx i:nth-child(3) { left: 36%; top: 5%; animation-delay: 2.6s; }
.codex-cassandra-sound__vfx i:nth-child(4) { left: 48%; top: 55%; animation-delay: .6s; }
.codex-cassandra-sound__vfx i:nth-child(5) { left: 61%; top: 12%; animation-delay: 4.1s; }
.codex-cassandra-sound__vfx i:nth-child(6) { left: 73%; top: 48%; animation-delay: 2.2s; }
.codex-cassandra-sound__vfx i:nth-child(7) { left: 85%; top: 20%; animation-delay: 5.2s; }
.codex-cassandra-sound__vfx i:nth-child(8) { left: 94%; top: 62%; animation-delay: 3.4s; }
.codex-cassandra-sound__vfx i:nth-child(9) { left: 15%; top: 70%; animation-delay: 6.1s; }
.codex-cassandra-sound__vfx i:nth-child(10) { left: 55%; top: 80%; animation-delay: 4.7s; }
.codex-cassandra-sound > header { display: flex; align-items: center; gap: 18px; }
.codex-cassandra-sound__emblem { position: relative; flex: 0 0 auto; width: 92px; height: 92px; display: grid; place-items: center; }
.codex-cassandra-sound__emblem::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--cassandra-c4) 45%, transparent); animation: codexCassandraSpin 16s linear infinite; }
.codex-cassandra-sound__emblem i { position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cassandra-c4) 40%, transparent), transparent 66%); box-shadow: 0 0 22px color-mix(in srgb, var(--cassandra-c1) 60%, transparent); }
.codex-cassandra-sound__emblem b { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; transform: rotate(calc(var(--note-i) * 72deg)) translateY(-42px) rotate(calc(var(--note-i) * -72deg)); }
.codex-cassandra-sound__emblem b img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 4px var(--cassandra-c4)); animation: codexCassandraFloat 2.4s ease-in-out infinite; animation-delay: calc(var(--note-i) * -.45s); }
.codex-cassandra-sound__emblem img { position: relative; width: 58px; height: 58px; object-fit: contain; filter: drop-shadow(0 0 10px var(--cassandra-hi)); animation: codexCassandraFloat 3.4s ease-in-out infinite; }
.codex-cassandra-sound > header span { color: var(--cassandra-hi); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-cassandra-sound > header h3 { margin: 7px 0 5px; color: #eef9ff; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb, var(--cassandra-c4) 70%, transparent); }
.codex-cassandra-sound > header p { margin: 0; color: rgba(230, 244, 255, .76); font-size: .74rem; line-height: 1.45; }
.codex-cassandra-sound__title { margin: 20px 0 0; color: var(--cassandra-hi); font: 800 .66rem/1 Montserrat,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.codex-cassandra-sound-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.codex-cassandra-sound-grid.is-effects { grid-template-columns: repeat(3,minmax(0,1fr)); }
.codex-cassandra-tier { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 14px 10px; border: 1px solid color-mix(in srgb, var(--cassandra-c1) 45%, transparent); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--cassandra-c5) 38%, transparent), rgba(0,0,0,.36)); text-align: center; }
.codex-cassandra-tier.is-full, .codex-cassandra-tier.is-effect { border-color: color-mix(in srgb, var(--cassandra-c4) 70%, transparent); background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--cassandra-c4) 24%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in srgb, var(--cassandra-c5) 50%, transparent), rgba(0,0,0,.42)); box-shadow: 0 0 18px color-mix(in srgb, var(--cassandra-c4) 24%, transparent), inset 0 0 18px rgba(0,0,0,.45); }
.codex-cassandra-tier > img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--cassandra-c4) 70%, transparent)); }
.codex-cassandra-tier[data-tier="0"] > img { filter: saturate(.7) brightness(.85) drop-shadow(0 0 5px color-mix(in srgb, var(--cassandra-c1) 60%, transparent)); }
.codex-cassandra-tier.is-full > img, .codex-cassandra-tier.is-effect > img { width: 62px; height: 62px; animation: codexCassandraFloat 2.8s ease-in-out infinite; }
.codex-cassandra-tier small { color: var(--cassandra-hi); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-cassandra-tier strong { display: block; margin: 4px 0 6px; color: #eef9ff; font: 800 .84rem/1.15 Montserrat,sans-serif; }
.codex-cassandra-tier p { margin: 0; color: rgba(225, 240, 255, .78); font-size: .67rem; line-height: 1.35; }
.codex-cassandra-sound-rules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.codex-cassandra-sound-rules span { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 8px; row-gap: 4px; align-content: start; padding: 10px; border: 1px solid color-mix(in srgb, var(--cassandra-c1) 40%, transparent); border-radius: 10px; background: rgba(0,0,0,.32); }
.codex-cassandra-sound-rules span > img { grid-row: 1 / span 2; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cassandra-c4) 70%, transparent)); }
.codex-cassandra-sound-rules b { color: var(--cassandra-hi); font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-cassandra-sound-rules small { color: rgba(225, 240, 255, .76); font-size: .66rem; line-height: 1.35; }
.codex-cassandra-sound .ability-inline-icon { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .12em; vertical-align: -.22em; object-fit: contain; }
@keyframes codexCassandraSpin { to { transform: rotate(360deg); } }
@keyframes codexCassandraFloat { 50% { transform: translateY(-4px) rotate(4deg); } }
@keyframes codexCassandraFlake { 0% { opacity: 0; transform: translateY(0) rotate(0); } 20% { opacity: .85; } 100% { opacity: 0; transform: translateY(70px) rotate(180deg); } }
@media (max-width: 900px) { .codex-cassandra-sound-grid, .codex-cassandra-sound-grid.is-effects { grid-template-columns: repeat(2,minmax(0,1fr)); } .codex-cassandra-tier.is-full { grid-column: 1 / -1; } .codex-cassandra-sound-rules { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .codex-cassandra-sound { padding: 18px 16px; } .codex-cassandra-sound > header { flex-direction: column; align-items: flex-start; } .codex-cassandra-sound-grid, .codex-cassandra-sound-grid.is-effects { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .codex-cassandra-sound__emblem::before, .codex-cassandra-sound__emblem img, .codex-cassandra-tier > img, .codex-cassandra-sound__vfx i { animation: none; } .codex-cassandra-sound__vfx { display: none; } }
/* PUP · BOMBAMESTER (heroId 69) – a codex-cassandra-sound mintájára. A --pup-c1..c5 a téma palettája (pupConfig PUP_THEMES), a bombaszínek saját tintát kapnak. */
.codex-pup-bombs { --pup-c1: #358FDB; --pup-c2: #97E07E; --pup-c3: #ED6238; --pup-c4: #934353; --pup-c5: #241A12; --pup-base: #120d0a; --pup-hi: color-mix(in srgb, var(--pup-c1) 62%, #fff); --pup-green: #97E07E; --pup-blue: #4FA6F0; --pup-red: #ED6238; position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--pup-c1) 48%, transparent); outline: 1px solid color-mix(in srgb, var(--pup-c3) 42%, transparent); outline-offset: -6px; background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--pup-c1) 30%, transparent), transparent 44%), radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--pup-c3) 26%, transparent), transparent 48%), radial-gradient(circle at 55% 40%, color-mix(in srgb, var(--pup-c2) 10%, transparent), transparent 55%), linear-gradient(145deg, color-mix(in srgb, var(--pup-base) 86%, var(--pup-c4)), color-mix(in srgb, var(--pup-base) 82%, #000)); box-shadow: inset 0 0 40px color-mix(in srgb, var(--pup-c1) 14%, transparent), 0 18px 38px rgba(0,0,0,.36); isolation: isolate; }
.codex-pup-bombs[data-pup-theme="urhajos"] { --pup-base: #0a1020; --pup-green: #8DF25A; --pup-blue: #44DEFF; --pup-red: #FB2F00; --pup-hi: color-mix(in srgb, var(--pup-c1) 58%, #fff); }
.codex-pup-bombs > *:not(.codex-pup-bombs__vfx) { position: relative; z-index: 1; }
.codex-pup-bombs [data-bomb="green"] { --bomb-tint: var(--pup-green); }
.codex-pup-bombs [data-bomb="blue"] { --bomb-tint: var(--pup-blue); }
.codex-pup-bombs [data-bomb="red"] { --bomb-tint: var(--pup-red); }
.codex-pup-bombs__vfx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.codex-pup-bombs__vfx i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--bomb-tint); box-shadow: 0 0 8px var(--bomb-tint); opacity: 0; animation: codexPupSpark 6.8s ease-out infinite; }
.codex-pup-bombs[data-pup-motif="space"] .codex-pup-bombs__vfx i { width: 3px; height: 3px; background: #fff; box-shadow: 0 0 6px var(--bomb-tint); animation-name: codexPupStar; }
.codex-pup-bombs__vfx i:nth-child(1) { left: 6%; top: 18%; animation-delay: 0s; }
.codex-pup-bombs__vfx i:nth-child(2) { left: 18%; top: 62%; animation-delay: 1.1s; }
.codex-pup-bombs__vfx i:nth-child(3) { left: 29%; top: 8%; animation-delay: 2.4s; }
.codex-pup-bombs__vfx i:nth-child(4) { left: 41%; top: 48%; animation-delay: .5s; }
.codex-pup-bombs__vfx i:nth-child(5) { left: 52%; top: 14%; animation-delay: 3.6s; }
.codex-pup-bombs__vfx i:nth-child(6) { left: 63%; top: 70%; animation-delay: 1.8s; }
.codex-pup-bombs__vfx i:nth-child(7) { left: 72%; top: 26%; animation-delay: 4.7s; }
.codex-pup-bombs__vfx i:nth-child(8) { left: 83%; top: 56%; animation-delay: 2.9s; }
.codex-pup-bombs__vfx i:nth-child(9) { left: 93%; top: 12%; animation-delay: 5.4s; }
.codex-pup-bombs__vfx i:nth-child(10) { left: 12%; top: 86%; animation-delay: 4.1s; }
.codex-pup-bombs__vfx i:nth-child(11) { left: 47%; top: 88%; animation-delay: 6.0s; }
.codex-pup-bombs__vfx i:nth-child(12) { left: 88%; top: 84%; animation-delay: 3.2s; }
.codex-pup-bombs > header { display: flex; align-items: center; gap: 18px; }
.codex-pup-bombs__emblem { position: relative; flex: 0 0 auto; width: 104px; height: 92px; }
.codex-pup-bombs__emblem i { position: absolute; inset: 10px 14px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--pup-c3) 34%, transparent), transparent 66%); box-shadow: 0 0 24px color-mix(in srgb, var(--pup-c1) 40%, transparent); }
.codex-pup-bombs__emblem b { position: absolute; width: 46px; height: 46px; top: 24px; left: calc(4px + var(--bomb-i) * 27px); }
.codex-pup-bombs__emblem b:nth-of-type(2) { top: 6px; z-index: 1; }
.codex-pup-bombs__emblem b img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px var(--bomb-tint)); animation: codexPupBob 2.6s ease-in-out infinite; animation-delay: calc(var(--bomb-i) * -.55s); }
.codex-pup-bombs > header span { color: var(--pup-hi); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-pup-bombs > header h3 { margin: 7px 0 5px; color: #fff4ea; font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb, var(--pup-c3) 60%, transparent); }
.codex-pup-bombs > header p { margin: 0; color: rgba(255, 240, 228, .78); font-size: .74rem; line-height: 1.45; }
.codex-pup-bombs__title { margin: 20px 0 0; color: var(--pup-hi); font: 800 .66rem/1 Montserrat,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.codex-pup-bombs-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.codex-pup-bombs-grid.is-effects { grid-template-columns: repeat(2,minmax(0,1fr)); }
.codex-pup-bomb { display: grid; align-content: start; gap: 10px; padding: 14px 12px; border: 1px solid color-mix(in srgb, var(--bomb-tint) 50%, transparent); border-radius: 12px; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--bomb-tint) 20%, transparent), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.4)); box-shadow: inset 0 0 18px rgba(0,0,0,.45); }
.codex-pup-bomb > header { display: grid; grid-template-columns: 50px minmax(0,1fr); gap: 10px; align-items: center; }
.codex-pup-bomb > header img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 0 8px var(--bomb-tint)); animation: codexPupBob 3s ease-in-out infinite; }
.codex-pup-bomb > header small { color: var(--bomb-tint); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-pup-bomb > header strong { display: block; margin: 4px 0 3px; color: #fff4ea; font: 800 .82rem/1.15 Montserrat,sans-serif; }
.codex-pup-bomb > header em { color: rgba(255, 240, 228, .6); font-size: .64rem; font-style: normal; }
.codex-pup-bomb ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.codex-pup-bomb li { display: grid; gap: 3px; padding: 7px 9px; border-left: 2px solid color-mix(in srgb, var(--bomb-tint) 45%, transparent); border-radius: 0 8px 8px 0; background: rgba(0,0,0,.3); }
.codex-pup-bomb li.is-max { border-left-color: var(--bomb-tint); background: linear-gradient(90deg, color-mix(in srgb, var(--bomb-tint) 20%, transparent), rgba(0,0,0,.34)); box-shadow: 0 0 12px color-mix(in srgb, var(--bomb-tint) 18%, transparent); }
.codex-pup-bomb li b { color: var(--bomb-tint); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-pup-bomb li span { color: rgba(255, 240, 228, .8); font-size: .66rem; line-height: 1.35; }
.codex-pup-effect { --pup-fx: var(--pup-c1); display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid color-mix(in srgb, var(--pup-fx) 50%, transparent); border-radius: 12px; background: radial-gradient(circle at 0 50%, color-mix(in srgb, var(--pup-fx) 20%, transparent), transparent 60%), rgba(0,0,0,.34); }
.codex-pup-effect[data-effect="felho"] { --pup-fx: var(--pup-green); }
.codex-pup-effect[data-effect="visszhang"] { --pup-fx: var(--pup-blue); }
.codex-pup-effect[data-effect="kaosz"] { --pup-fx: var(--pup-c3); }
.codex-pup-effect[data-effect="mini"] { --pup-fx: var(--pup-red); }
.codex-pup-effect > img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 8px var(--pup-fx)); animation: codexPupBob 2.8s ease-in-out infinite; }
.codex-pup-effect strong { display: block; margin-bottom: 4px; color: #fff4ea; font: 800 .8rem/1.15 Montserrat,sans-serif; }
.codex-pup-effect p { margin: 0; color: rgba(255, 240, 228, .78); font-size: .66rem; line-height: 1.35; }
.codex-pup-bombs-rules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.codex-pup-bombs-rules span { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 8px; row-gap: 4px; align-content: start; padding: 10px; border: 1px solid color-mix(in srgb, var(--pup-c3) 36%, transparent); border-radius: 10px; background: rgba(0,0,0,.32); }
.codex-pup-bombs-rules span > img { grid-row: 1 / span 2; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--pup-c3) 70%, transparent)); }
.codex-pup-bombs-rules b { color: var(--pup-hi); font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-pup-bombs-rules small { color: rgba(255, 240, 228, .76); font-size: .66rem; line-height: 1.35; }
.codex-pup-bombs .ability-inline-icon { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .12em; vertical-align: -.22em; object-fit: contain; }
@keyframes codexPupBob { 50% { transform: translateY(-4px) rotate(-5deg); } }
@keyframes codexPupSpark { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: translateY(-46px) scale(.2); } }
@keyframes codexPupStar { 0%, 100% { opacity: 0; } 40% { opacity: .9; } 60% { opacity: .5; } }
@media (max-width: 900px) { .codex-pup-bombs-grid { grid-template-columns: 1fr; } .codex-pup-bombs-grid.is-effects { grid-template-columns: repeat(2,minmax(0,1fr)); } .codex-pup-bombs-rules { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .codex-pup-bombs { padding: 18px 16px; } .codex-pup-bombs > header { flex-direction: column; align-items: flex-start; } .codex-pup-bombs-grid.is-effects { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .codex-pup-bombs__emblem b img, .codex-pup-bomb > header img, .codex-pup-effect > img, .codex-pup-bombs__vfx i { animation: none; } .codex-pup-bombs__vfx { display: none; } }
/* HONEYCOMB · GYILKOS MÉHRAJ (heroId 70) – a codex-pup-bombs mintájára. A --hc-c1..c5 a skin palettája (honeycombConfig HONEYCOMB_THEMES), a díszítés skinenként: lépsejt + mézcsepp / pók + denevér / buborék + szívecske. */
.codex-honeycomb-swarm { --hc-c1: #F6B11D; --hc-c2: #FFF3A6; --hc-c3: #A7782D; --hc-c4: #1E1C1A; --hc-c5: #FDE640; --hc-base: #15110a; --hc-hi: color-mix(in srgb, var(--hc-c5) 70%, #fff); --hc-ink: #fff8e6; --hc-soft: rgba(255, 244, 220, .78); position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--hc-c1) 50%, transparent); outline: 1px solid color-mix(in srgb, var(--hc-c5) 36%, transparent); outline-offset: -6px; background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--hc-c1) 30%, transparent), transparent 44%), radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--hc-c5) 20%, transparent), transparent 48%), linear-gradient(145deg, color-mix(in srgb, var(--hc-base) 86%, var(--hc-c3)), color-mix(in srgb, var(--hc-base) 84%, #000)); box-shadow: inset 0 0 40px color-mix(in srgb, var(--hc-c1) 14%, transparent), 0 18px 38px rgba(0,0,0,.36); isolation: isolate; }
.codex-honeycomb-swarm[data-hc-theme="alap"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0l14 8v16l-14 8-14-8V8zM14 32v16' fill='none' stroke='%23FDE640' stroke-width='1.2'/%3E%3C/svg%3E"); background-size: 28px 48px; }
.codex-honeycomb-swarm[data-hc-theme="rem"] { --hc-base: #0c0818; --hc-hi: color-mix(in srgb, var(--hc-c2) 60%, #fff); --hc-ink: #f1ecff; --hc-soft: rgba(226, 220, 255, .78); }
.codex-honeycomb-swarm[data-hc-theme="halloween"] { --hc-base: #12071a; --hc-hi: color-mix(in srgb, var(--hc-c1) 60%, #fff); --hc-ink: #fff4ea; --hc-soft: rgba(255, 236, 220, .8); }
.codex-honeycomb-swarm[data-hc-theme="urhajos"] { --hc-base: #070c2c; --hc-hi: color-mix(in srgb, var(--hc-c4) 70%, #fff); --hc-ink: #f1fbff; --hc-soft: rgba(206, 238, 255, .82); background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--hc-c1) 30%, transparent), transparent 44%), radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--hc-c2) 26%, transparent), transparent 48%), radial-gradient(ellipse at 55% 45%, rgba(130, 70, 220, .22), transparent 55%), linear-gradient(145deg, #0B1440, #05081f 60%, #150a38); }
.codex-honeycomb-swarm[data-hc-theme="urhajos"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .85; background: radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent 60%), radial-gradient(1px 1px at 30% 70%, #fff, transparent 60%), radial-gradient(1.6px 1.6px at 52% 14%, var(--hc-c4), transparent 60%), radial-gradient(1px 1px at 68% 52%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 84% 30%, var(--hc-c1), transparent 60%), radial-gradient(1px 1px at 92% 78%, #fff, transparent 60%); animation: codexHcTwinkle 3.4s ease-in-out infinite alternate; }
.codex-honeycomb-swarm[data-hc-theme="urhajos"] .codex-honeycomb-tier[data-tier="scorch"] { --tier-glow: var(--hc-c5); }
.codex-honeycomb-swarm__vfx i.is-star { width: 9px; height: 9px; background: var(--hc-c4); clip-path: polygon(50% 0, 62% 38%, 100% 38%, 69% 60%, 80% 100%, 50% 76%, 20% 100%, 31% 60%, 0 38%, 38% 38%); filter: drop-shadow(0 0 5px var(--hc-c4)); }
.codex-honeycomb-swarm__vfx i.is-planet { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, var(--hc-c3), var(--hc-c2) 62%, var(--hc-c5)); box-shadow: 0 0 0 2px transparent, 0 0 8px var(--hc-c2); }
.codex-honeycomb-swarm__vfx i.is-planet::after { content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 5px; margin-top: -2.5px; border: 1px solid var(--hc-c1); border-radius: 50%; transform: rotate(-20deg); }
.codex-honeycomb-swarm__vfx i.is-rocket { width: 6px; height: 13px; border-radius: 50% 50% 20% 20% / 70% 70% 20% 20%; background: linear-gradient(180deg, #fff, var(--hc-c1)); box-shadow: 0 7px 6px -2px var(--hc-c2), 0 11px 8px -3px var(--hc-c4); }
.codex-honeycomb-swarm__vfx i.is-moon { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset -4px 0 0 0 var(--hc-c4); filter: drop-shadow(0 0 4px var(--hc-c4)); }
@keyframes codexHcTwinkle { from { opacity: .45; } to { opacity: 1; } }
.codex-honeycomb-swarm[data-hc-theme="mese"] { --hc-base: #2a0610; --hc-hi: color-mix(in srgb, var(--hc-c1) 55%, #fff); --hc-ink: #fffff3; --hc-soft: rgba(255, 246, 240, .8); }
.codex-honeycomb-swarm > *:not(.codex-honeycomb-swarm__vfx) { position: relative; z-index: 1; }
.codex-honeycomb-swarm__vfx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.codex-honeycomb-swarm__vfx i { position: absolute; left: calc(4% + var(--m-i) * 8%); top: 16%; width: 10px; height: 10px; opacity: 0; animation: codexHcDrift 7.2s ease-in-out infinite; animation-delay: calc(var(--m-i) * -.6s); }
.codex-honeycomb-swarm__vfx i:nth-child(2n) { top: 74%; }
.codex-honeycomb-swarm__vfx i:nth-child(3n) { top: 42%; }
.codex-honeycomb-swarm__vfx i:nth-child(5n) { top: 88%; }
.codex-honeycomb-swarm__vfx i.is-hex { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); background: var(--hc-c5); box-shadow: 0 0 8px var(--hc-c1); }
.codex-honeycomb-swarm__vfx i.is-drop { width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: linear-gradient(180deg, var(--hc-c2), var(--hc-c1)); }
.codex-honeycomb-swarm__vfx i.is-bee { width: 8px; height: 6px; border-radius: 50%; background: repeating-linear-gradient(90deg, var(--hc-c1) 0 2px, var(--hc-c4) 2px 3px); box-shadow: 0 0 6px var(--hc-c5); }
.codex-honeycomb-swarm__vfx i.is-spider { width: 8px; height: 8px; border-radius: 50%; background: var(--hc-c4); box-shadow: 0 0 0 1px var(--hc-c2), 0 0 8px var(--hc-c3); }
.codex-honeycomb-swarm__vfx i.is-spider::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 22px; background: color-mix(in srgb, var(--hc-c2) 60%, transparent); }
.codex-honeycomb-swarm__vfx i.is-bat { width: 16px; height: 7px; background: var(--hc-c3); clip-path: polygon(0 20%, 22% 0, 38% 40%, 50% 20%, 62% 40%, 78% 0, 100% 20%, 80% 100%, 60% 70%, 50% 100%, 40% 70%, 20% 100%); filter: drop-shadow(0 0 4px var(--hc-c2)); }
.codex-honeycomb-swarm__vfx i.is-bubble { width: 12px; height: 12px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--hc-c2) 80%, #fff); background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.8) 0 12%, transparent 30%), color-mix(in srgb, var(--hc-c2) 18%, transparent); }
.codex-honeycomb-swarm__vfx i.is-heart { width: 10px; height: 10px; background: var(--hc-c1); clip-path: path("M5 9.2 L1 5.2 A2.4 2.4 0 0 1 5 1.9 A2.4 2.4 0 0 1 9 5.2 Z"); filter: drop-shadow(0 0 4px var(--hc-c5)); }
.codex-honeycomb-swarm > header { display: flex; align-items: center; gap: 18px; }
.codex-honeycomb-swarm__emblem { position: relative; flex: 0 0 auto; width: 104px; height: 92px; }
.codex-honeycomb-swarm__emblem i { position: absolute; inset: 6px 12px; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: radial-gradient(circle, color-mix(in srgb, var(--hc-c5) 40%, transparent), color-mix(in srgb, var(--hc-c3) 30%, transparent) 70%); box-shadow: inset 0 0 18px var(--hc-c1); }
.codex-honeycomb-swarm__emblem > img { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; object-fit: contain; filter: drop-shadow(0 0 10px var(--hc-c5)); animation: codexHcBob 2.6s ease-in-out infinite; }
.codex-honeycomb-swarm__emblem b { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; animation: codexHcOrbit 5.4s linear infinite; animation-delay: calc(var(--bee-i) * -1.8s); }
.codex-honeycomb-swarm__emblem b img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 5px var(--hc-c5)); }
.codex-honeycomb-swarm > header span { color: var(--hc-hi); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-honeycomb-swarm > header h3 { margin: 7px 0 5px; color: var(--hc-ink); font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb, var(--hc-c1) 60%, transparent); }
.codex-honeycomb-swarm > header p { margin: 0; color: var(--hc-soft); font-size: .74rem; line-height: 1.45; }
.codex-honeycomb-swarm__stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.codex-honeycomb-swarm__stats span { display: grid; gap: 4px; justify-items: center; padding: 9px 6px; clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); background: linear-gradient(180deg, color-mix(in srgb, var(--hc-c1) 24%, transparent), rgba(0,0,0,.4)); }
.codex-honeycomb-swarm__stats b { color: var(--hc-hi); font: 800 1rem/1 Montserrat,sans-serif; }
.codex-honeycomb-swarm__stats small { color: var(--hc-soft); font-size: .58rem; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.codex-honeycomb-swarm__title { margin: 20px 0 0; color: var(--hc-hi); font: 800 .66rem/1 Montserrat,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.codex-honeycomb-swarm-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.codex-honeycomb-swarm-grid.is-effects { grid-template-columns: repeat(2,minmax(0,1fr)); }
.codex-honeycomb-tier { --tier-glow: var(--hc-c1); display: grid; align-content: start; justify-items: center; gap: 8px; padding: 14px 10px; text-align: center; border: 1px solid color-mix(in srgb, var(--tier-glow) 46%, transparent); border-radius: 12px; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--tier-glow) 22%, transparent), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.4)); box-shadow: inset 0 0 18px rgba(0,0,0,.45); }
.codex-honeycomb-tier[data-tier="small"] { --tier-glow: var(--hc-c2); }
.codex-honeycomb-tier[data-tier="sting"] { --tier-glow: var(--hc-c1); }
.codex-honeycomb-tier[data-tier="angry"] { --tier-glow: var(--hc-c3); }
.codex-honeycomb-tier[data-tier="scorch"] { --tier-glow: #ff7a2e; }
.codex-honeycomb-tier[data-tier="queen"] { --tier-glow: var(--hc-c5); border-color: var(--hc-c5); box-shadow: inset 0 0 18px rgba(0,0,0,.45), 0 0 16px color-mix(in srgb, var(--hc-c5) 30%, transparent); }
.codex-honeycomb-tier > img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 8px var(--tier-glow)); animation: codexHcBob 3s ease-in-out infinite; }
.codex-honeycomb-tier small { color: var(--tier-glow); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-honeycomb-tier strong { display: block; margin: 4px 0 5px; color: var(--hc-ink); font: 800 .8rem/1.15 Montserrat,sans-serif; }
.codex-honeycomb-tier p { margin: 0; color: var(--hc-soft); font-size: .65rem; line-height: 1.35; }
.codex-honeycomb-effect { --hc-fx: var(--hc-c1); display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid color-mix(in srgb, var(--hc-fx) 50%, transparent); border-radius: 12px; background: radial-gradient(circle at 0 50%, color-mix(in srgb, var(--hc-fx) 20%, transparent), transparent 60%), rgba(0,0,0,.34); }
.codex-honeycomb-effect[data-effect="vihar"] { --hc-fx: var(--hc-c5); }
.codex-honeycomb-effect > img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 8px var(--hc-fx)); animation: codexHcBob 2.8s ease-in-out infinite; }
.codex-honeycomb-effect strong { display: block; margin-bottom: 4px; color: var(--hc-ink); font: 800 .8rem/1.15 Montserrat,sans-serif; }
.codex-honeycomb-effect p { margin: 0; color: var(--hc-soft); font-size: .66rem; line-height: 1.35; }
.codex-honeycomb-swarm-rules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.codex-honeycomb-swarm-rules span { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 8px; row-gap: 4px; align-content: start; padding: 10px; border: 1px solid color-mix(in srgb, var(--hc-c1) 36%, transparent); border-radius: 10px; background: rgba(0,0,0,.32); }
.codex-honeycomb-swarm-rules span > img { grid-row: 1 / span 2; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--hc-c5) 70%, transparent)); }
.codex-honeycomb-swarm-rules b { color: var(--hc-hi); font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-honeycomb-swarm-rules small { color: var(--hc-soft); font-size: .66rem; line-height: 1.35; }
.codex-honeycomb-swarm .ability-inline-icon { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .12em; vertical-align: -.22em; object-fit: contain; }
@keyframes codexHcBob { 50% { transform: translateY(-4px) rotate(-4deg); } }
@keyframes codexHcOrbit { from { transform: rotate(0) translateX(40px) rotate(0); } to { transform: rotate(360deg) translateX(40px) rotate(-360deg); } }
@keyframes codexHcDrift { 0%, 100% { opacity: 0; transform: translate(0, 0) rotate(0); } 20% { opacity: .75; } 50% { transform: translate(18px, -22px) rotate(20deg); } 80% { opacity: .5; } }
@media (max-width: 900px) { .codex-honeycomb-swarm-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .codex-honeycomb-swarm__stats { grid-template-columns: repeat(3,minmax(0,1fr)); } .codex-honeycomb-swarm-rules { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .codex-honeycomb-swarm { padding: 18px 16px; } .codex-honeycomb-swarm > header { flex-direction: column; align-items: flex-start; } .codex-honeycomb-swarm-grid, .codex-honeycomb-swarm-grid.is-effects { grid-template-columns: 1fr; } .codex-honeycomb-swarm__stats { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .codex-honeycomb-swarm__emblem > img, .codex-honeycomb-swarm__emblem b, .codex-honeycomb-tier > img, .codex-honeycomb-effect > img, .codex-honeycomb-swarm__vfx i { animation: none; } .codex-honeycomb-swarm__vfx, .codex-honeycomb-swarm__emblem b { display: none; } }
.codex-karthy-stages { margin:22px 0; padding:22px; border:1px solid #B3198280; border-radius:20px; background:radial-gradient(circle at 0 0,#5F1DAD55,transparent 55%),linear-gradient(135deg,#1e0b29,#07040c); box-shadow:inset 0 0 30px #B319822b,0 18px 40px #0006; color:#f7e5f5; }
.codex-karthy-stages>header { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.codex-karthy-stages>header img { width:55px; height:55px; object-fit:contain; filter:drop-shadow(0 0 14px #B31982); }
.codex-karthy-stages>header small { color:#AA7477; letter-spacing:.16em; }
.codex-karthy-stages>header h3 { margin:3px 0; color:#fff; }
.codex-karthy-stages__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.codex-karthy-stages__grid article { display:flex; gap:10px; min-width:0; padding:13px; border:1px solid #AA747766; border-radius:13px; background:#190c24c9; }
.codex-karthy-stages__grid article > img { flex:none; width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 0 10px #b31982aa); }
.codex-karthy-stages__grid small { color:#d9abc9; }
.codex-karthy-stages__grid h4 { margin:5px 0 9px; color:#fff; font:800 1rem/1.25 Montserrat,sans-serif; }
.codex-karthy-stages__grid p { margin:0; color:#e1cbe1; font:500 .82rem/1.6 Outfit,sans-serif; }
.codex-karthy-stages__grid .ability-inline-icon { display:inline-block!important; width:1.15em!important; height:1.15em!important; margin:0 .16em!important; vertical-align:-.2em!important; object-fit:contain; filter:drop-shadow(0 0 5px #b31982); }
@media(max-width:700px){.codex-karthy-stages__grid{grid-template-columns:1fr}}
.codex-anita-command{margin:22px 0;padding:22px;border:1px solid #fef5bb;border-radius:22px;background:radial-gradient(circle at 92% 0%,#52558777,transparent 45%),linear-gradient(140deg,#4d3e45,#10121d 75%);box-shadow:0 18px 44px #0008,inset 0 0 35px #b1a1d022;color:#fefefa}
.codex-anita-command>header{display:flex;align-items:center;gap:20px}
.codex-anita-command>header img{width:90px;height:90px;object-fit:contain;filter:drop-shadow(0 0 15px #fef5bb)}
.codex-anita-command header small{color:#fef5bb;letter-spacing:.13em;font-weight:800}
.codex-anita-command header h3{margin:4px 0;font-size:25px}
.codex-anita-command header p{max-width:780px;line-height:1.6}
.codex-anita-command__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:22px}
.codex-anita-command__grid article{position:relative;min-width:0;display:grid;grid-template-columns:58px minmax(0,1fr);align-content:start;align-items:center;column-gap:13px;row-gap:10px;padding:18px;border:1px solid #b1a1d077;border-radius:16px;background:linear-gradient(145deg,#52558738,#171725d9);box-shadow:inset 0 0 20px #b1a1d014}
.codex-anita-command__grid article.is-command{grid-column:span 2}
.codex-anita-command__grid article.is-authority{grid-column:span 3}
.codex-anita-command__grid article > img{grid-row:1;width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 10px #fef5bb80)}
.codex-anita-command__grid h4{grid-row:1;margin:0;color:#fef5bb;font:800 1rem/1.3 Montserrat,sans-serif}
.codex-anita-command__grid p{grid-column:1/-1;margin:0;color:#f4edf7;font:500 .85rem/1.6 Outfit,sans-serif}
.codex-anita-command__grid .ability-inline-icon{display:inline-block!important;width:1.15em!important;height:1.15em!important;margin:0 .16em!important;vertical-align:-.2em!important;object-fit:contain;filter:drop-shadow(0 0 5px #fef5bb88)}
@media(max-width:900px){.codex-anita-command__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.codex-anita-command__grid article.is-command,.codex-anita-command__grid article.is-authority{grid-column:span 1}}
@media(max-width:600px){.codex-anita-command>header{align-items:flex-start;gap:12px}.codex-anita-command>header img{width:62px;height:62px}.codex-anita-command__grid{grid-template-columns:1fr}}

/* CRIPTO · GALAKTIKUS ENERGIA (heroId 71) – a codex-honeycomb-swarm mintájára. A --cx-c1..c5 a skin palettája (criptoConfig CRIPTO_THEMES: fő lila, magenta, cián, mélyűr, csillagfény), a díszítés csillag + meteor + bolygó. */
.codex-cripto-cosmos { --cx-c1: #8B3DFF; --cx-c2: #E04BFF; --cx-c3: #7FD8FF; --cx-c4: #140A3A; --cx-c5: #F4E9FF; --cx-base: #0a0620; --cx-hi: color-mix(in srgb, var(--cx-c2) 55%, #fff); --cx-ink: #fbf6ff; --cx-soft: rgba(236, 226, 255, .8); position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--cx-c1) 55%, transparent); outline: 1px solid color-mix(in srgb, var(--cx-c2) 36%, transparent); outline-offset: -6px; background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--cx-c2) 26%, transparent), transparent 44%), radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--cx-c3) 18%, transparent), transparent 48%), linear-gradient(145deg, color-mix(in srgb, var(--cx-base) 80%, var(--cx-c4)), color-mix(in srgb, var(--cx-base) 84%, #000)); box-shadow: inset 0 0 40px color-mix(in srgb, var(--cx-c1) 16%, transparent), 0 18px 38px rgba(0,0,0,.36); isolation: isolate; }
.codex-cripto-cosmos[data-cx-motif="galaxy"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; background: radial-gradient(1px 1px at 8% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 62%, #fff, transparent), radial-gradient(1.5px 1.5px at 46% 12%, var(--cx-c3), transparent), radial-gradient(1px 1px at 63% 78%, #fff, transparent), radial-gradient(1.5px 1.5px at 81% 30%, var(--cx-c2), transparent), radial-gradient(1px 1px at 93% 70%, #fff, transparent), radial-gradient(1px 1px at 17% 90%, #fff, transparent), radial-gradient(1px 1px at 72% 48%, #fff, transparent); }
.codex-cripto-cosmos > *:not(.codex-cripto-cosmos__vfx) { position: relative; z-index: 1; }
.codex-cripto-cosmos__vfx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.codex-cripto-cosmos__vfx i { position: absolute; left: calc(4% + var(--m-i) * 8%); top: 16%; width: 8px; height: 8px; opacity: 0; animation: codexCxDrift 8s ease-in-out infinite; animation-delay: calc(var(--m-i) * -.66s); }
.codex-cripto-cosmos__vfx i:nth-child(2n) { top: 74%; }
.codex-cripto-cosmos__vfx i:nth-child(3n) { top: 42%; }
.codex-cripto-cosmos__vfx i:nth-child(5n) { top: 88%; }
.codex-cripto-cosmos__vfx i.is-star { background: var(--cx-c5); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 4px var(--cx-c3)); }
.codex-cripto-cosmos__vfx i.is-meteor { width: 18px; height: 5px; border-radius: 0 50% 50% 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cx-c2) 70%, transparent) 60%, var(--cx-c5)); rotate: -24deg; }
.codex-cripto-cosmos__vfx i.is-planet { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--cx-c5) 0 10%, var(--cx-c1) 40%, var(--cx-c4) 100%); box-shadow: 0 0 8px var(--cx-c2); }
.codex-cripto-cosmos > header { display: flex; align-items: center; gap: 18px; }
.codex-cripto-cosmos__emblem { position: relative; flex: 0 0 auto; width: 104px; height: 92px; }
.codex-cripto-cosmos__emblem i { position: absolute; inset: 4px 10px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--cx-c2) 40%, transparent), color-mix(in srgb, var(--cx-c1) 26%, transparent) 55%, transparent 72%); box-shadow: inset 0 0 18px var(--cx-c1); border: 1px dashed color-mix(in srgb, var(--cx-c3) 45%, transparent); animation: codexCxSpin 24s linear infinite; }
.codex-cripto-cosmos__emblem > img { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; object-fit: contain; filter: drop-shadow(0 0 10px var(--cx-c2)); animation: codexCxBob 2.8s ease-in-out infinite; }
.codex-cripto-cosmos__emblem b { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--cx-c5) 0 12%, var(--cx-c2) 45%, var(--cx-c4)); box-shadow: 0 0 8px var(--cx-c2); animation: codexCxOrbit 6s linear infinite; animation-delay: calc(var(--o-i) * -2s); }
.codex-cripto-cosmos__emblem b:nth-of-type(2) { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: radial-gradient(circle at 34% 30%, #fff 0 12%, var(--cx-c3) 50%, var(--cx-c4)); }
.codex-cripto-cosmos > header span { color: var(--cx-hi); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-cripto-cosmos > header h3 { margin: 7px 0 5px; color: var(--cx-ink); font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb, var(--cx-c2) 60%, transparent); }
.codex-cripto-cosmos > header p { margin: 0; color: var(--cx-soft); font-size: .74rem; line-height: 1.45; }
.codex-cripto-cosmos__stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 16px; }
.codex-cripto-cosmos__stats span { display: grid; gap: 4px; justify-items: center; padding: 9px 6px; border: 1px solid color-mix(in srgb, var(--cx-c1) 36%, transparent); border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--cx-c1) 22%, transparent), rgba(0,0,0,.4)); }
.codex-cripto-cosmos__stats b { color: var(--cx-hi); font: 800 1rem/1 Montserrat,sans-serif; white-space: nowrap; }
.codex-cripto-cosmos__stats small { color: var(--cx-soft); font-size: .58rem; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.codex-cripto-cosmos__title { margin: 20px 0 0; color: var(--cx-hi); font: 800 .66rem/1 Montserrat,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.codex-cripto-cosmos-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.codex-cripto-cosmos-grid.is-effects { grid-template-columns: repeat(2,minmax(0,1fr)); }
.codex-cripto-tier { --tier-glow: var(--cx-c1); display: grid; align-content: start; justify-items: center; gap: 8px; padding: 14px 10px; text-align: center; border: 1px solid color-mix(in srgb, var(--tier-glow) 46%, transparent); border-radius: 12px; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--tier-glow) 22%, transparent), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.4)); box-shadow: inset 0 0 18px rgba(0,0,0,.45); }
.codex-cripto-tier[data-tier="dust"] { --tier-glow: var(--cx-c3); }
.codex-cripto-tier[data-tier="charge"] { --tier-glow: var(--cx-c1); }
.codex-cripto-tier[data-tier="surge"] { --tier-glow: var(--cx-c2); }
.codex-cripto-tier[data-tier="ready"] { --tier-glow: var(--cx-c5); border-color: var(--cx-c2); box-shadow: inset 0 0 18px rgba(0,0,0,.45), 0 0 16px color-mix(in srgb, var(--cx-c2) 34%, transparent); }
.codex-cripto-tier > img { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 0 8px var(--tier-glow)); animation: codexCxBob 3s ease-in-out infinite; }
.codex-cripto-tier[data-tier="ready"] > img { border-radius: 12px; }
.codex-cripto-tier small { color: var(--tier-glow); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.codex-cripto-tier strong { display: block; margin: 4px 0 5px; color: var(--cx-ink); font: 800 .8rem/1.15 Montserrat,sans-serif; }
.codex-cripto-tier p { margin: 0; color: var(--cx-soft); font-size: .65rem; line-height: 1.35; }
.codex-cripto-cosmos__table { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.codex-cripto-cosmos__table span { display: grid; gap: 4px; justify-items: center; padding: 10px 6px; border: 1px solid color-mix(in srgb, var(--cx-c1) 40%, transparent); border-radius: 12px; background: linear-gradient(180deg, color-mix(in srgb, var(--cx-c1) 16%, transparent), rgba(0,0,0,.42)); text-align: center; }
.codex-cripto-cosmos__table span.is-cap { border-color: var(--cx-c2); box-shadow: 0 0 14px color-mix(in srgb, var(--cx-c2) 30%, transparent); }
.codex-cripto-cosmos__table small { color: var(--cx-c3); font: 800 .54rem/1.2 Montserrat,sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.codex-cripto-cosmos__table b { color: var(--cx-ink); font: 900 1.2rem/1 Montserrat,sans-serif; text-shadow: 0 0 10px var(--cx-c2); }
.codex-cripto-cosmos__table em { color: var(--cx-soft); font-size: .6rem; font-style: normal; }
.codex-cripto-effect { --cx-fx: var(--cx-c1); display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid color-mix(in srgb, var(--cx-fx) 50%, transparent); border-radius: 12px; background: radial-gradient(circle at 0 50%, color-mix(in srgb, var(--cx-fx) 20%, transparent), transparent 60%), rgba(0,0,0,.34); }
.codex-cripto-effect[data-effect="debris"] { --cx-fx: var(--cx-c3); }
.codex-cripto-effect[data-effect="cycle"] { --cx-fx: var(--cx-c2); }
.codex-cripto-effect > img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 8px var(--cx-fx)); animation: codexCxBob 2.8s ease-in-out infinite; }
.codex-cripto-effect strong { display: block; margin-bottom: 4px; color: var(--cx-ink); font: 800 .8rem/1.15 Montserrat,sans-serif; }
.codex-cripto-effect p { margin: 0; color: var(--cx-soft); font-size: .66rem; line-height: 1.35; }
.codex-cripto-cosmos-rules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.codex-cripto-cosmos-rules span { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 8px; row-gap: 4px; align-content: start; padding: 10px; border: 1px solid color-mix(in srgb, var(--cx-c1) 36%, transparent); border-radius: 10px; background: rgba(0,0,0,.32); }
.codex-cripto-cosmos-rules span > img { grid-row: 1 / span 2; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--cx-c2) 70%, transparent)); }
.codex-cripto-cosmos-rules b { color: var(--cx-hi); font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-cripto-cosmos-rules small { color: var(--cx-soft); font-size: .66rem; line-height: 1.35; }
.codex-cripto-cosmos .ability-inline-icon { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .12em; vertical-align: -.22em; object-fit: contain; }
@keyframes codexCxBob { 50% { transform: translateY(-4px) rotate(-4deg); } }
@keyframes codexCxSpin { to { transform: rotate(360deg); } }
@keyframes codexCxOrbit { from { transform: rotate(0) translateX(44px) rotate(0); } to { transform: rotate(360deg) translateX(44px) rotate(-360deg); } }
@keyframes codexCxDrift { 0%, 100% { opacity: 0; transform: translate(0, 0); } 20% { opacity: .8; } 50% { transform: translate(22px, -18px); } 80% { opacity: .5; } }
@media (max-width: 900px) { .codex-cripto-cosmos-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .codex-cripto-cosmos__stats, .codex-cripto-cosmos__table { grid-template-columns: repeat(3,minmax(0,1fr)); } .codex-cripto-cosmos-rules { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .codex-cripto-cosmos { padding: 18px 16px; } .codex-cripto-cosmos > header { flex-direction: column; align-items: flex-start; } .codex-cripto-cosmos-grid, .codex-cripto-cosmos-grid.is-effects { grid-template-columns: 1fr; } .codex-cripto-cosmos__stats, .codex-cripto-cosmos__table { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .codex-cripto-cosmos__emblem > img, .codex-cripto-cosmos__emblem i, .codex-cripto-cosmos__emblem b, .codex-cripto-tier > img, .codex-cripto-effect > img, .codex-cripto-cosmos__vfx i { animation: none; } .codex-cripto-cosmos__vfx, .codex-cripto-cosmos__emblem b { display: none; } }

/* KENJIRO · PENGEFÖLÉNY (heroId 73) – a codex-cripto-cosmos mintájára. A --kx-c1..c5 a skin palettája (kenjiroConfig KENJIRO_THEMES: fő, fény, lágy, mély, kiemelő), a --kx-petal a sakura-szirom / szikra színe. Díszítés: sakura + szél (Alap), csillag + rakéta (Űrhajós), csillogás + fényív (VIP). */
.codex-kenjiro-blade { --kx-c1: #1A3C65; --kx-c2: #76B2FF; --kx-c3: #8492BD; --kx-c4: #020007; --kx-c5: #350A18; --kx-petal: #F2B9D0; --kx-hi: color-mix(in srgb, var(--kx-c2) 60%, #fff); --kx-ink: #f5f8ff; --kx-soft: rgba(226, 234, 250, .8); position: relative; margin: 22px 0 30px; padding: 24px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--kx-c2) 55%, transparent); outline: 1px solid color-mix(in srgb, var(--kx-petal) 34%, transparent); outline-offset: -6px; background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--kx-c2) 22%, transparent), transparent 44%), radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--kx-c5) 45%, transparent), transparent 48%), linear-gradient(145deg, color-mix(in srgb, var(--kx-c1) 50%, #04060c), #03040a 60%, color-mix(in srgb, var(--kx-c4) 80%, var(--kx-c5))); box-shadow: inset 0 0 40px color-mix(in srgb, var(--kx-c1) 20%, transparent), 0 18px 38px rgba(0,0,0,.36); isolation: isolate; }
.codex-kenjiro-blade[data-kx-motif="space"] { --kx-hi: color-mix(in srgb, var(--kx-c1) 70%, #fff); background: radial-gradient(circle at 10% 0, color-mix(in srgb, var(--kx-c1) 22%, transparent), transparent 44%), radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--kx-c2) 26%, transparent), transparent 48%), linear-gradient(145deg, #06121c, #04070d 60%, #1c0a04); border-color: color-mix(in srgb, var(--kx-c1) 55%, transparent); }
.codex-kenjiro-blade[data-kx-motif="space"]::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; background: radial-gradient(1px 1px at 8% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 62%, #fff, transparent), radial-gradient(1.5px 1.5px at 46% 12%, var(--kx-c1), transparent), radial-gradient(1px 1px at 63% 78%, #fff, transparent), radial-gradient(1.5px 1.5px at 81% 30%, var(--kx-c4), transparent), radial-gradient(1px 1px at 93% 70%, #fff, transparent); }
.codex-kenjiro-blade[data-kx-motif="vip"] { --kx-hi: color-mix(in srgb, var(--kx-c1) 70%, #fff); background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.07) 50%, transparent 65%) 0 0 / 250% 100%, radial-gradient(circle at 10% 0, color-mix(in srgb, var(--kx-c1) 22%, transparent), transparent 44%), radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--kx-c4) 22%, transparent), transparent 48%), linear-gradient(145deg, #1d1208, #0c0704 60%, #1a0d18); border-color: color-mix(in srgb, var(--kx-c1) 60%, transparent); animation: codexKxShimmer 6s linear infinite; }
.codex-kenjiro-blade > *:not(.codex-kenjiro-blade__vfx) { position: relative; z-index: 1; }
.codex-kenjiro-blade__vfx { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.codex-kenjiro-blade__vfx i { position: absolute; left: calc(4% + var(--m-i) * 8%); top: -12px; width: 9px; height: 9px; opacity: 0; animation: codexKxFall 9s linear infinite; animation-delay: calc(var(--m-i) * -.75s); }
.codex-kenjiro-blade__vfx i.is-petal { border-radius: 70% 0 70% 0; background: var(--kx-petal); box-shadow: 0 0 6px color-mix(in srgb, var(--kx-petal) 70%, transparent); }
.codex-kenjiro-blade__vfx i.is-wind { top: calc(12% + var(--m-i) * 6%); left: -12%; width: 90px; height: 1.5px; border-radius: 2px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kx-c3) 75%, #fff), transparent); animation: codexKxWind 5s ease-in infinite; animation-delay: calc(var(--m-i) * -.6s); }
.codex-kenjiro-blade__vfx i.is-star, .codex-kenjiro-blade__vfx i.is-sparkle { background: var(--kx-petal); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 4px #fff); }
.codex-kenjiro-blade__vfx i.is-rocket { top: auto; bottom: -16px; width: 6px; height: 14px; border-radius: 50% 50% 20% 20%; background: linear-gradient(180deg, #fff, var(--kx-c1) 60%, var(--kx-c4)); box-shadow: 0 6px 8px var(--kx-c2); animation: codexKxRise 10s linear infinite; animation-delay: calc(var(--m-i) * -.8s); }
.codex-kenjiro-blade__vfx i.is-arc { top: 50%; left: 50%; width: calc(40% + var(--m-i) * 4%); height: auto; aspect-ratio: 1; border: 1px solid transparent; border-top-color: color-mix(in srgb, #fff 45%, var(--kx-c1)); border-radius: 50%; opacity: .5; transform: translate(-50%, -50%); animation: codexKxArc calc(8s + var(--m-i) * .5s) linear infinite; }
.codex-kenjiro-blade > header { display: flex; align-items: center; gap: 18px; }
.codex-kenjiro-blade__emblem { position: relative; flex: 0 0 auto; width: 104px; height: 92px; }
.codex-kenjiro-blade__emblem i { position: absolute; inset: 4px 10px; border: 1.5px solid color-mix(in srgb, var(--kx-c2) 70%, transparent); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--kx-c2) 30%, transparent), color-mix(in srgb, var(--kx-c4) 90%, #000) 72%); box-shadow: 0 0 16px color-mix(in srgb, var(--kx-c2) 45%, transparent); }
.codex-kenjiro-blade__emblem > img { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; object-fit: contain; filter: drop-shadow(0 0 6px var(--kx-c2)); animation: codexKxBob 3.2s ease-in-out infinite; }
.codex-kenjiro-blade__emblem b { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 70% 0 70% 0; background: var(--kx-petal); animation: codexKxOrbit 4.5s linear infinite; animation-delay: calc(var(--o-i) * -1.5s); }
.codex-kenjiro-blade > header span { color: var(--kx-hi); font: 800 .58rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-kenjiro-blade > header h3 { margin: 7px 0 5px; color: var(--kx-ink); font: 400 1.65rem/1.1 AOW,serif; text-shadow: 0 0 16px color-mix(in srgb, var(--kx-c2) 70%, transparent); }
.codex-kenjiro-blade > header p { margin: 0; color: var(--kx-soft); font-size: .74rem; line-height: 1.45; }
.codex-kenjiro-blade__flow { display: grid; grid-template-columns: 1fr 18px 1fr 18px 1fr 18px 1.2fr; align-items: center; gap: 4px; margin-top: 16px; }
.codex-kenjiro-blade__flow span { display: grid; gap: 4px; justify-items: center; padding: 9px 6px; border: 1px solid color-mix(in srgb, var(--kx-c3) 36%, transparent); border-radius: 10px; background: rgba(0,0,0,.34); }
.codex-kenjiro-blade__flow span.is-ignore { border-color: var(--kx-c2); box-shadow: 0 0 14px color-mix(in srgb, var(--kx-c2) 30%, transparent); }
.codex-kenjiro-blade__flow b { color: var(--kx-hi); font: 800 1rem/1 Montserrat,sans-serif; white-space: nowrap; }
.codex-kenjiro-blade__flow small { color: var(--kx-soft); font-size: .56rem; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.codex-kenjiro-blade__flow > i { position: relative; display: block; height: 2px; background: linear-gradient(90deg, var(--kx-c3), var(--kx-c2)); }
.codex-kenjiro-blade__flow > i::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--kx-c2); border-right: 0; }
.codex-kenjiro-blade__example { margin: 10px 0 0; padding: 8px 11px; border: 1px dashed color-mix(in srgb, var(--kx-petal) 40%, transparent); border-radius: 10px; color: var(--kx-soft); font-size: .68rem; line-height: 1.4; }
.codex-kenjiro-blade__title { margin: 20px 0 0; color: var(--kx-hi); font: 800 .66rem/1 Montserrat,sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.codex-kenjiro-blade__ladders { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.codex-kenjiro-blade__ladders article { display: grid; align-content: start; gap: 6px; padding: 12px; border: 1px solid color-mix(in srgb, var(--kx-c2) 30%, transparent); border-radius: 12px; background: rgba(0,0,0,.32); }
.codex-kenjiro-blade__ladders strong { color: var(--kx-ink); font: 800 .74rem/1.15 Montserrat,sans-serif; }
.codex-kenjiro-blade__ladders span { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 8px; padding: 6px 8px; border-left: 2px solid var(--kx-c2); border-radius: 0 8px 8px 0; background: rgba(255,255,255,.03); }
.codex-kenjiro-blade__ladders span:last-child { border-left-color: var(--kx-petal); background: color-mix(in srgb, var(--kx-c1) 16%, transparent); }
.codex-kenjiro-blade__ladders b { color: var(--kx-hi); font: 900 .9rem/1 Montserrat,sans-serif; }
.codex-kenjiro-blade__ladders small { color: var(--kx-soft); font-size: .64rem; line-height: 1.3; }
.codex-kenjiro-blade__stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; margin-top: 10px; }
.codex-kenjiro-blade__stats span { display: grid; gap: 4px; justify-items: center; padding: 10px 6px; border: 1px solid color-mix(in srgb, var(--kx-c2) 36%, transparent); border-radius: 10px; background: rgba(0,0,0,.34); text-align: center; }
.codex-kenjiro-blade__stats b { color: var(--kx-ink); font: 900 1.05rem/1 Montserrat,sans-serif; text-shadow: 0 0 10px var(--kx-c2); white-space: nowrap; }
.codex-kenjiro-blade__stats small { color: var(--kx-soft); font-size: .56rem; letter-spacing: .05em; text-transform: uppercase; }
.codex-kenjiro-blade-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.codex-kenjiro-effect { --kx-fx: var(--kx-c2); display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 12px; align-items: center; padding: 12px; border: 1px solid color-mix(in srgb, var(--kx-fx) 40%, transparent); border-radius: 12px; background: rgba(0,0,0,.32); }
.codex-kenjiro-effect[data-effect="scent"] { --kx-fx: #d0263f; }
.codex-kenjiro-effect[data-effect="counter"] { --kx-fx: var(--kx-c3); }
.codex-kenjiro-effect > img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 0 8px var(--kx-fx)); animation: codexKxBob 2.8s ease-in-out infinite; }
.codex-kenjiro-effect strong { display: block; margin-bottom: 4px; color: var(--kx-ink); font: 800 .8rem/1.15 Montserrat,sans-serif; }
.codex-kenjiro-effect p { margin: 0; color: var(--kx-soft); font-size: .66rem; line-height: 1.35; }
.codex-kenjiro-blade-rules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.codex-kenjiro-blade-rules span { display: grid; grid-template-columns: 30px minmax(0,1fr); column-gap: 8px; row-gap: 4px; align-content: start; padding: 10px; border: 1px solid color-mix(in srgb, var(--kx-c2) 28%, transparent); border-radius: 10px; background: rgba(0,0,0,.3); }
.codex-kenjiro-blade-rules span > img { grid-row: 1 / span 2; width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--kx-c2) 70%, transparent)); }
.codex-kenjiro-blade-rules b { color: var(--kx-hi); font: 800 .72rem/1.1 Montserrat,sans-serif; }
.codex-kenjiro-blade-rules small { color: var(--kx-soft); font-size: .66rem; line-height: 1.35; }
.codex-kenjiro-blade .ability-inline-icon { display: inline-block; width: 1.2em; height: 1.2em; margin: 0 .12em; vertical-align: -.22em; object-fit: contain; }
@keyframes codexKxBob { 50% { transform: translateY(-4px) rotate(-4deg); } }
@keyframes codexKxOrbit { from { transform: rotate(0) translateX(44px) rotate(0); } to { transform: rotate(360deg) translateX(44px) rotate(-240deg); } }
@keyframes codexKxFall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: .8; } 100% { opacity: 0; transform: translate(-40px, 560px) rotate(320deg); } }
@keyframes codexKxWind { 0% { opacity: 0; transform: translateX(0); } 20% { opacity: .7; } 100% { opacity: 0; transform: translateX(900px); } }
@keyframes codexKxRise { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: .8; } 100% { opacity: 0; transform: translate(20px, -600px); } }
@keyframes codexKxArc { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes codexKxShimmer { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 250% 0, 0 0, 0 0, 0 0; } }
@media (max-width: 900px) { .codex-kenjiro-blade__ladders { grid-template-columns: 1fr; } .codex-kenjiro-blade__stats { grid-template-columns: repeat(3,minmax(0,1fr)); } .codex-kenjiro-blade-rules { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .codex-kenjiro-blade { padding: 18px 16px; } .codex-kenjiro-blade > header { flex-direction: column; align-items: flex-start; } .codex-kenjiro-blade-grid { grid-template-columns: 1fr; } .codex-kenjiro-blade__stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .codex-kenjiro-blade__flow { grid-template-columns: 1fr; } .codex-kenjiro-blade__flow > i { display: none; } }
@media (prefers-reduced-motion: reduce) { .codex-kenjiro-blade, .codex-kenjiro-blade__emblem > img, .codex-kenjiro-blade__emblem b, .codex-kenjiro-effect > img, .codex-kenjiro-blade__vfx i { animation: none; } .codex-kenjiro-blade__vfx, .codex-kenjiro-blade__emblem b { display: none; } }

/* Yasmine · egyetlen Lámpafény-mechanika panel a Hőskódexben. */
.codex-yasmine-lamp {
    --ys-ink: #fff4df;
    --ys-soft: rgba(245, 238, 226, .78);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 22px 0 30px;
    padding: 26px 28px;
    color: var(--ys-ink);
    border: 1px solid color-mix(in srgb, var(--ys-c3) 80%, transparent);
    outline: 1px solid color-mix(in srgb, var(--ys-c1) 34%, transparent);
    outline-offset: -7px;
    background:
        radial-gradient(ellipse at 9% 0%, color-mix(in srgb, var(--ys-c1) 25%, transparent), transparent 42%),
        radial-gradient(ellipse at 95% 88%, color-mix(in srgb, var(--ys-c5) 28%, transparent), transparent 46%),
        radial-gradient(circle at 52% 42%, color-mix(in srgb, var(--ys-c3) 8%, transparent), transparent 40%),
        linear-gradient(135deg, #0e2735, #101522 48%, #1b1525 76%, #20180e);
    box-shadow: inset 0 0 36px color-mix(in srgb, var(--ys-c3) 10%, transparent), 0 20px 38px rgba(0,0,0,.38);
}
.codex-yasmine-lamp::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .23;
    pointer-events: none;
    background: radial-gradient(circle, var(--ys-c3) .8px, transparent 1.2px) 0 0 / 34px 34px;
    mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.codex-yasmine-lamp::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    top: -240px;
    right: -165px;
    border: 22px solid color-mix(in srgb, var(--ys-c3) 10%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--ys-c3) 33%, transparent);
    pointer-events: none;
}
.codex-yasmine-lamp > *:not(.codex-yasmine-lamp__dust) { position: relative; z-index: 1; }
.codex-yasmine-lamp__dust { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.codex-yasmine-lamp__dust i {
    position: absolute;
    left: calc(5% + (var(--ys-i) * 5.1%));
    top: calc(8% + (var(--ys-i) * 4.7%));
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--ys-c3);
    box-shadow: 0 0 9px 2px color-mix(in srgb, var(--ys-c1) 56%, transparent);
    animation: codexYasmineDust 4s ease-in-out infinite alternate;
    animation-delay: calc(var(--ys-i) * -.31s);
}
.codex-yasmine-lamp > header { display: flex; align-items: center; gap: 20px; }
.codex-yasmine-lamp__emblem { position: relative; flex: 0 0 118px; height: 108px; display: grid; place-items: center; }
.codex-yasmine-lamp__emblem i {
    position: absolute;
    inset: 9px 15px;
    border: 1px solid color-mix(in srgb, var(--ys-c3) 86%, transparent);
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--ys-c1) 38%, transparent), color-mix(in srgb, var(--ys-c2) 40%, transparent) 66%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--ys-c1) 52%, transparent), inset 0 0 18px color-mix(in srgb, var(--ys-c3) 28%, transparent);
}
.codex-yasmine-lamp__emblem img {
    position: relative;
    width: 94px;
    height: 94px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px var(--ys-c1));
    animation: codexYasmineFloat 3.6s ease-in-out infinite;
}
.codex-yasmine-lamp__emblem b { position: absolute; inset: 3px 8px; border-top: 1px solid var(--ys-c3); border-bottom: 1px solid var(--ys-c3); border-radius: 50%; transform: rotate(-24deg); opacity: .75; }
.codex-yasmine-lamp > header span:not(.codex-yasmine-lamp__emblem) { color: var(--ys-c3); font: 800 .61rem/1 Montserrat,sans-serif; letter-spacing: .18em; }
.codex-yasmine-lamp > header h3 { margin: 8px 0 5px; color: var(--ys-ink); font: 400 1.8rem/1.1 AOW,serif; text-shadow: 0 0 18px color-mix(in srgb, var(--ys-c3) 50%, transparent); }
.codex-yasmine-lamp > header p { margin: 0; color: var(--ys-soft); font-size: .76rem; line-height: 1.5; }
.codex-yasmine-lamp__stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; margin-top: 20px; }
.codex-yasmine-lamp__stats > span { min-height: 65px; display: grid; place-content: center; text-align: center; border: 1px solid color-mix(in srgb, var(--ys-c3) 44%, transparent); border-radius: 999px; background: linear-gradient(155deg, color-mix(in srgb, var(--ys-c2) 40%, transparent), rgba(0,0,0,.42)); }
.codex-yasmine-lamp__stats b { display: block; color: #fff1ba; font: 800 1.12rem/1.2 Montserrat,sans-serif; text-shadow: 0 0 10px var(--ys-c3); }
.codex-yasmine-lamp__stats small { display: block; margin-top: 4px; color: var(--ys-soft); font: 700 .59rem/1.2 Montserrat,sans-serif; text-transform: uppercase; }
.codex-yasmine-lamp__title { margin: 24px 0 10px; color: var(--ys-c3); font: 800 .68rem/1.2 Montserrat,sans-serif; letter-spacing: .17em; text-transform: uppercase; }
.codex-yasmine-lamp__states, .codex-yasmine-lamp__spells, .codex-yasmine-lamp__incense { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.codex-yasmine-lamp [data-flame="calm"] { --ys-flame: var(--ys-c3); }
.codex-yasmine-lamp [data-flame="bright"] { --ys-flame: var(--ys-c1); }
.codex-yasmine-lamp [data-flame="dark"] { --ys-flame: var(--ys-c5); }
.codex-yasmine-lamp__states article, .codex-yasmine-lamp__spells article, .codex-yasmine-lamp__incense article {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--ys-flame) 52%, transparent);
    border-radius: 16px;
    background: radial-gradient(circle at 50% -30%, color-mix(in srgb, var(--ys-flame) 25%, transparent), transparent 66%), linear-gradient(155deg, rgba(11,23,32,.8), rgba(11,8,19,.82));
    box-shadow: inset 0 0 18px color-mix(in srgb, var(--ys-flame) 7%, transparent);
}
.codex-yasmine-lamp__states article { position: relative; min-height: 174px; padding: 15px 14px 13px; text-align: center; }
.codex-yasmine-lamp__states img { display: block; width: 66px; height: 66px; margin: 0 auto 7px; object-fit: contain; filter: drop-shadow(0 0 11px var(--ys-flame)); }
.codex-yasmine-lamp__states small, .codex-yasmine-lamp__incense small { display: block; color: var(--ys-flame); font: 800 .57rem/1.2 Montserrat,sans-serif; letter-spacing: .1em; }
.codex-yasmine-lamp__states strong, .codex-yasmine-lamp__incense strong { display: block; margin: 5px 0 6px; color: #fff; font: 800 .91rem/1.2 Montserrat,sans-serif; }
.codex-yasmine-lamp__states p { margin: 0; color: var(--ys-soft); font-size: .67rem; line-height: 1.4; }
.codex-yasmine-lamp__spells article { padding: 12px; }
.codex-yasmine-lamp__spells header { display: flex; align-items: center; gap: 9px; min-height: 49px; padding-bottom: 9px; }
.codex-yasmine-lamp__spells header > img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 8px var(--ys-flame)); }
.codex-yasmine-lamp__spells header > div { min-width: 0; flex: 1; }
.codex-yasmine-lamp__spells header small { display: block; color: var(--ys-flame); font: 800 .55rem/1.2 Montserrat,sans-serif; text-transform: uppercase; }
.codex-yasmine-lamp__spells header strong { display: block; margin-top: 3px; color: #fff; font: 800 .81rem/1.2 Montserrat,sans-serif; }
.codex-yasmine-lamp__spells header > img.codex-yasmine-lamp__state-icon { width: 24px; height: 24px; }
.codex-yasmine-lamp__spells article > span { display: grid; gap: 4px; min-height: 51px; padding: 8px 9px; margin-bottom: 6px; border-left: 2px solid color-mix(in srgb, var(--ys-flame) 70%, transparent); border-radius: 0 10px 10px 0; background: rgba(0,0,0,.32); }
.codex-yasmine-lamp__spells article > span.is-awakened { background: color-mix(in srgb, var(--ys-flame) 16%, rgba(0,0,0,.65)); }
.codex-yasmine-lamp__spells article > span b { color: var(--ys-flame); font: 800 .56rem/1 Montserrat,sans-serif; letter-spacing: .07em; }
.codex-yasmine-lamp__spells article > span small { color: var(--ys-soft); font-size: .64rem; line-height: 1.35; }
.codex-yasmine-lamp__spells article > p { margin: 8px 2px 0; color: color-mix(in srgb, var(--ys-flame) 60%, #fff); font-size: .62rem; line-height: 1.3; }
.codex-yasmine-lamp__incense article { min-height: 190px; padding: 12px; }
.codex-yasmine-lamp__incense article > img { float: left; width: 52px; height: 52px; margin: 0 9px 8px 0; object-fit: contain; filter: drop-shadow(0 0 10px var(--ys-flame)); }
.codex-yasmine-lamp__incense article > small { padding-top: 6px; }
.codex-yasmine-lamp__incense article > span { display: block; clear: both; min-height: 48px; padding: 8px; margin-top: 6px; border-radius: 9px; background: rgba(0,0,0,.28); color: var(--ys-soft); font-size: .64rem; line-height: 1.38; }
.codex-yasmine-lamp__incense article > span b { display: block; margin-bottom: 3px; color: var(--ys-flame); font: 800 .55rem/1.1 Montserrat,sans-serif; letter-spacing: .05em; }
.codex-yasmine-lamp__ult-rule { margin: 8px 0 0; padding: 9px 12px; color: var(--ys-soft); font-size: .67rem; border: 1px dashed color-mix(in srgb, var(--ys-c3) 35%, transparent); border-radius: 10px; }
.codex-yasmine-lamp__effects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.codex-yasmine-lamp__effects article { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--ys-flame) 50%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--ys-flame) 10%, rgba(0,0,0,.62)); }
.codex-yasmine-lamp__effects img { flex: 0 0 65px; width: 65px; height: 65px; object-fit: contain; filter: drop-shadow(0 0 10px var(--ys-flame)); }
.codex-yasmine-lamp__effects strong { color: #fff; font: 800 .78rem/1.2 Montserrat,sans-serif; }
.codex-yasmine-lamp__effects p { margin: 5px 0 0; color: var(--ys-soft); font-size: .65rem; line-height: 1.4; }
.codex-yasmine-lamp .ability-inline-icon { display: inline-block; width: 1.15em; height: 1.15em; margin: 0 .12em; vertical-align: -.2em; object-fit: contain; }
@keyframes codexYasmineFloat { 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes codexYasmineDust { to { transform: translate(14px,-17px); opacity: .3; } }
@media (max-width: 1050px) {
    .codex-yasmine-lamp__spells, .codex-yasmine-lamp__incense { grid-template-columns: 1fr; }
    .codex-yasmine-lamp__stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 650px) {
    .codex-yasmine-lamp { padding: 20px 16px; }
    .codex-yasmine-lamp > header { align-items: flex-start; gap: 12px; }
    .codex-yasmine-lamp__emblem { flex-basis: 70px; height: 70px; }
    .codex-yasmine-lamp__emblem img { width: 65px; height: 65px; }
    .codex-yasmine-lamp__stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .codex-yasmine-lamp__states, .codex-yasmine-lamp__effects { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .codex-yasmine-lamp__dust i, .codex-yasmine-lamp__emblem img { animation: none; }
}