/* ============================================================
   KINÉZETEK — prémium megjelenés-archívum
   ============================================================ */

#codex-tab-skins { position: relative; isolation: isolate; }
#codex-tab-skins.codex-tab-panel.is-active { display: block; padding: 0 2px 48px; overflow-x: hidden; }
.csk-ambient { position: fixed; z-index: -2; inset: 0; background: radial-gradient(circle at 16% 20%, rgba(196,111,255,.1), transparent 35%), radial-gradient(circle at 82% 65%, rgba(46,179,223,.08), transparent 34%); pointer-events: none; }

/* ---- Galériafejléc ---- */

.csk-intro {
    position: relative; display: flex; align-items: center; justify-content: space-between; gap: 32px;
    width: min(100%, 1250px); min-height: 116px; margin: 0 auto 16px; padding: 22px 27px; box-sizing: border-box; overflow: hidden;
    border: 1px solid rgba(199,183,222,.15); border-radius: 3px;
    background: linear-gradient(108deg, rgba(20,15,32,.93), rgba(6,10,18,.96));
    box-shadow: 0 16px 38px rgba(0,0,0,.3), inset 0 1px rgba(255,255,255,.025);
}
.csk-intro::before { position: absolute; top: 0; left: 25px; width: 200px; height: 2px; content: ""; background: linear-gradient(90deg, transparent, #c678ff, #e6bc58, transparent); box-shadow: 0 0 15px rgba(198,120,255,.42); }
.csk-intro::after { position: absolute; right: -84px; bottom: -145px; width: 330px; height: 330px; content: ""; border: 1px solid rgba(198,120,255,.07); border-radius: 50%; box-shadow: 0 0 0 38px rgba(198,120,255,.012), 0 0 0 39px rgba(198,120,255,.04); }
.csk-intro-copy, .csk-collection-status { position: relative; z-index: 1; }
.csk-album-button { position:relative;z-index:2;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid rgba(231,189,89,.34);background:rgba(3,8,13,.58);color:#f2d678;text-decoration:none;font-size:.55rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:.2s; }
.csk-album-button img { width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 0 7px rgba(96,220,244,.35)); }
.csk-album-button:hover { border-color:rgba(231,189,89,.75);color:#fff0b4;transform:translateY(-2px);box-shadow:0 0 18px rgba(231,189,89,.12); }
.csk-kicker, .skin-card-overline { color: rgba(211,158,255,.72); font-size: .56rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.csk-kicker { display: flex; align-items: center; gap: 8px; }
.csk-kicker i { width: 24px; height: 1px; background: currentColor; box-shadow: 0 0 7px currentColor; }
.csk-intro h2 { margin: 6px 0 3px; color: #f8f0e2; font-family: "AOW", serif; font-size: 1.65rem; font-weight: 400; letter-spacing: .04em; }
.csk-intro p { margin: 0; color: rgba(170,188,201,.62); font-size: .68rem; line-height: 1.4; }
.csk-collection-status { display: flex; align-items: stretch; border: 1px solid rgba(255,255,255,.075); background: rgba(2,6,12,.36); }
.csk-collection-status > div { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 7px; min-width: 108px; padding: 12px 16px; }
.csk-collection-status > div + div { border-left: 1px solid rgba(255,255,255,.07); }
.csk-collection-status span { grid-column: 1 / -1; color: rgba(159,179,194,.48); font-size: .46rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.csk-collection-status strong { color: #f2e9d8; font-family: "AOW", serif; font-size: 1.3rem; font-weight: 400; line-height: 1; }
.csk-collection-status small { color: rgba(211,158,255,.55); font-size: .48rem; letter-spacing: .07em; text-transform: uppercase; }

/* ---- Galériarács és közös kártya ---- */

#codex-skins { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; width: min(100%,1250px); margin: 0 auto; }

#codex-skins .skin-card {
    --csk-accent: #9fdfee; --csk-accent-rgb: 159,223,238;
    position: relative; isolation: isolate; min-width: 0; min-height: 310px; overflow: hidden;
    border: 1px solid rgba(var(--csk-accent-rgb),.18); border-radius: 3px;
    background: #050910; box-shadow: 0 17px 38px rgba(0,0,0,.3), inset 0 0 28px rgba(var(--csk-accent-rgb),.025);
    transition: border-color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid);
}
#codex-skins .skin-card::before { position: absolute; z-index: 5; top: -1px; left: -1px; width: 34px; height: 34px; border-top: 1px solid rgba(var(--csk-accent-rgb),.72); border-left: 1px solid rgba(var(--csk-accent-rgb),.72); content: ""; pointer-events: none; }
#codex-skins .skin-card::after { position: absolute; z-index: 2; inset: 0; content: ""; background: linear-gradient(0deg, rgba(3,6,11,.98) 0%, rgba(3,6,11,.82) 15%, rgba(3,6,11,.16) 48%, rgba(3,6,11,.04) 72%), linear-gradient(90deg, rgba(3,6,11,.24), transparent 35% 70%, rgba(3,6,11,.18)); pointer-events: none; }
#codex-skins .skin-card:hover { border-color: rgba(var(--csk-accent-rgb),.48); transform: translateY(-4px); box-shadow: 0 23px 48px rgba(0,0,0,.38), 0 0 24px rgba(var(--csk-accent-rgb),.08); }
#codex-skins .skin-card--showcase { cursor: zoom-in; }
#codex-skins .skin-card--showcase:focus-visible { border-color: rgba(var(--csk-accent-rgb),.72); outline: 2px solid rgba(var(--csk-accent-rgb),.5); outline-offset: 3px; box-shadow: 0 0 30px rgba(var(--csk-accent-rgb),.18); }

#codex-skins .skin-card > .skin-card-art { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center; filter: saturate(.92) contrast(1.02); transition: transform 700ms var(--ease-premium), filter var(--t-mid), opacity var(--t-mid); }
#codex-skins .skin-card:hover > .skin-card-art { transform: scale(1.035); filter: saturate(1.05) contrast(1.04) brightness(1.04); }
.skin-card-motion { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #02060b; filter: saturate(.96) contrast(1.03); }
.skin-card-motion[hidden], .skin-card-motion-toggle[hidden] { display: none !important; }
.skin-card-motion-toggle { position: absolute; z-index: 8; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 7px; min-height: 27px; padding: 5px 9px; border: 1px solid rgba(var(--csk-accent-rgb),.34); border-radius: 1px; background: rgba(3,7,13,.76); color: rgba(238,245,249,.82); cursor: pointer; font: 700 .48rem/1 "Montserrat", sans-serif; letter-spacing: .09em; text-transform: uppercase; backdrop-filter: blur(7px); box-shadow: 0 5px 16px rgba(0,0,0,.28), 0 0 12px rgba(var(--csk-accent-rgb),.08); transition: border-color var(--t-mid), color var(--t-mid), background var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid); }
.skin-card-motion-toggle:hover, .skin-card-motion-toggle:focus-visible { border-color: rgba(var(--csk-accent-rgb),.72); outline: 0; background: rgba(5,14,23,.9); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.36), 0 0 18px rgba(var(--csk-accent-rgb),.17); }
.skin-card-motion-toggle.is-playing { border-color: rgba(112,235,180,.62); color: #8ff1c1; box-shadow: 0 0 18px rgba(112,235,180,.14); }
.skin-card-motion-icon { position: relative; display: block; width: 10px; height: 11px; flex: 0 0 auto; }
.skin-card-motion-icon::before { position: absolute; top: 1px; left: 2px; width: 0; height: 0; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; border-left: 7px solid currentColor; content: ""; filter: drop-shadow(0 0 5px currentColor); }
.skin-card-motion-toggle.is-playing .skin-card-motion-icon::before { top: 1px; left: 1px; width: 3px; height: 9px; border: 0; background: currentColor; box-shadow: 6px 0 currentColor, 0 0 5px currentColor; }
.skin-card.has-motion .skin-card-zoom-cue { right: 126px; }
.skin-card--collectible .skin-card-motion-toggle { right: auto; left: 16px; }
#codex-skins .skin-card.is-locked > .skin-card-motion { filter: grayscale(.9) brightness(.43) contrast(1.08); }
#codex-skins .skin-card.is-locked:hover > .skin-card-motion { filter: grayscale(.68) brightness(.54) contrast(1.08); }
#codex-skins .skin-card--signature > .skin-card-motion { object-fit: contain; }
.skin-card-frame { position: absolute; z-index: 4; inset: 8px; border: 1px solid rgba(255,255,255,.045); pointer-events: none; }
.skin-card-frame::before, .skin-card-frame::after { position: absolute; content: ""; background: rgba(var(--csk-accent-rgb),.45); }
.skin-card-frame::before { top: -1px; right: 14px; width: 60px; height: 1px; }
.skin-card-frame::after { right: -1px; bottom: 14px; width: 1px; height: 46px; }

.skin-card-copy { position: absolute; z-index: 4; right: 20px; bottom: 17px; left: 20px; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
#codex-skins .skin-card-copy > img.skin-family-logo { width: clamp(104px, 36%, 168px); height: auto; aspect-ratio: auto; margin-bottom: 8px; border-radius: 0; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.85)) drop-shadow(0 0 7px rgba(255,228,170,.16)); }
.skin-card-zoom-cue { position: absolute; z-index: 6; top: 16px; right: 16px; display: flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(var(--csk-accent-rgb),.28); background: rgba(3,7,13,.67); color: rgba(235,242,247,.72); font-size: .48rem; font-weight: 700; letter-spacing: .1em; opacity: .62; pointer-events: none; text-transform: uppercase; backdrop-filter: blur(6px); transition: opacity var(--t-mid), border-color var(--t-mid), transform var(--t-mid); }
.skin-card-zoom-cue i { position: relative; width: 11px; height: 11px; border: 1px solid currentColor; border-radius: 50%; }
.skin-card-zoom-cue i::after { position: absolute; right: -4px; bottom: -3px; width: 5px; height: 1px; content: ""; background: currentColor; transform: rotate(45deg); transform-origin: left center; }
.skin-card--showcase:hover .skin-card-zoom-cue, .skin-card--showcase:focus-visible .skin-card-zoom-cue { border-color: rgba(var(--csk-accent-rgb),.55); opacity: 1; transform: translateY(-2px); }
.skin-card-overline { margin-bottom: 5px; color: rgba(var(--csk-accent-rgb),.72); font-size: .5rem; text-shadow: 0 1px 8px #000; }
#codex-skins .skin-card-label { padding: 0; color: #fff4df; font-family: "AOW", serif; font-size: 1.17rem; font-weight: 400; letter-spacing: .035em; line-height: 1.15; text-shadow: 0 2px 15px #000; }

/* Kiemelt alapkinézet */
.skin-card--signature { grid-column: 1 / -1; min-height: 0 !important; --csk-accent: #e7bd59 !important; --csk-accent-rgb: 231,189,89 !important; }
#codex-skins .skin-card--signature > .skin-card-art { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; object-position: center; transform: none; }
#codex-skins .skin-card--signature:hover > .skin-card-art { transform: none; }
.skin-card--signature .skin-card-label { font-size: 1.55rem !important; }
.skin-card--ultimate { --csk-accent: #d56cff !important; --csk-accent-rgb: 213,108,255 !important; }
.skin-card--retro { --csk-accent: #dfaa6a !important; --csk-accent-rgb: 223,170,106 !important; }
.skin-card--portrait { --csk-accent: #78d9ff !important; --csk-accent-rgb: 120,217,255 !important; }

/* Skin-dependent battle artwork, directly below the signature splash. */
.csk-assets { grid-column: 1 / -1; min-width: 0; padding: 20px; border: 1px solid rgba(231,189,89,.22); border-radius: 3px; background: linear-gradient(115deg,rgba(23,19,30,.94),rgba(5,12,18,.96)); }
.csk-assets header { margin-bottom: 16px; }
.csk-assets .csk-kicker { color: #d6b767; }
.csk-assets h3 { margin: 6px 0; color: #fff4df; font: 400 1.3rem "AOW",serif; }
.csk-assets header p { margin: 0; color: #a8b6c0; font-size: .72rem; line-height: 1.5; }
.csk-assets-row { display: grid; grid-template-columns: 135px minmax(0,1fr); align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(199,183,222,.1); }
.csk-assets-row h4 { margin: 0; color: #decda9; font-size: .72rem; line-height: 1.5; }
.csk-assets-variants { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.csk-asset { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; width: 112px; margin: 0; padding: 10px 6px; box-sizing: border-box; border: 1px solid rgba(145,181,207,.15); background: rgba(2,8,14,.55); }
.csk-asset--base { border-color: rgba(231,189,89,.35); background: rgba(231,189,89,.045); }
.csk-asset img { width: 68px; height: 68px; object-fit: contain; filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
.csk-asset figcaption { color: #bacbd5; text-align: center; font-size: .58rem; line-height: 1.4; overflow-wrap: anywhere; }
.csk-asset--base figcaption { color: #e7cc89; }
.csk-assets-row--sequence .csk-assets-variants { flex-wrap: nowrap; overflow-x: auto; padding: 3px 2px 10px; scrollbar-width: thin; scrollbar-color: #806b45 #080e15; }
.csk-assets-row--sequence .csk-asset { flex: 0 0 112px; }
.csk-assets-row--compact .csk-asset { flex-basis: 100px; }
.csk-asset-preview { position: relative; display: grid; place-items: center; width: 100%; padding: 0 0 13px; border: 0; background: transparent; color: #bacbd5; cursor: zoom-in; }
.csk-asset-preview span { position: absolute; bottom: 0; font: 600 8px/1.2 "Montserrat",sans-serif; letter-spacing: .03em; opacity: .65; }
.csk-asset-preview:hover img { filter: drop-shadow(0 0 9px rgba(198,120,255,.45)); }
.csk-asset-preview:hover span { opacity: 1; color: #f2d678; }
.csk-asset-preview:focus-visible { outline: 2px solid #d6b767; outline-offset: 3px; }
.csk-asset-preview > svg { width: 68px; height: 68px; overflow: visible; }
.csk-asset-preview > .zh-ultimate-stone-asset { width: 96px; height: 68px; }
.csk-asset-preview > .al-fly__svg { position: static; inset: auto; }
.csk-asset-preview > svg, .csk-asset-preview > svg * { animation: none !important; transition: none !important; }
.csk-asset-preview .fk-tank__bubble, .csk-asset-preview .pk-flask__bubble { opacity: .7; }
.csk-asset-preview .pk-flask__steam path { opacity: .55; }
.csk-asset-preview .csk-vector-flask .pk-flasks__shadow, .csk-asset-preview .csk-vector-flask .pk-flasks__runes, .csk-asset-preview .csk-vector-flask .pk-flasks__flow, .csk-asset-preview .csk-vector-flask .pk-flasks__arcs { display: none; }
@media (max-width: 650px) {
    .csk-assets { padding: 14px; }
    .csk-assets-row { grid-template-columns: minmax(0,1fr); gap: 10px; }
    .csk-asset { width: 96px; }
    .csk-asset img { width: 58px; height: 58px; }
    .csk-asset-preview > svg { width: 58px; height: 58px; }
    .csk-asset-preview > .zh-ultimate-stone-asset { width: 82px; height: 58px; }
    .csk-assets-row--sequence .csk-asset { flex-basis: 96px; }
}

/* ---- Ritkaságok ---- */

.skin-card--epic { --csk-accent: #bc84ff !important; --csk-accent-rgb: 188,132,255 !important; }
.skin-card--legendary { --csk-accent: #f0c452 !important; --csk-accent-rgb: 240,196,82 !important; }
.skin-card--mythic { --csk-accent: #62dfff !important; --csk-accent-rgb: 98,223,255 !important; }
.skin-card--ultra { --csk-accent: #f5cf70 !important; --csk-accent-rgb: 245,207,112 !important; }
.skin-card--special { --csk-accent: #ffabda !important; --csk-accent-rgb: 255,171,218 !important; }
.skin-card--vip { --csk-accent: #f4d36d !important; --csk-accent-rgb: 244,211,109 !important; }
.skin-card--vip .skin-card-overline::before { display:inline-block;width:28px;height:13px;margin-right:7px;content:"";vertical-align:-2px;background:url("../image/ui/vip.webp") center/contain no-repeat;filter:drop-shadow(0 0 6px rgba(244,211,109,.45)); }

.skin-card-topline { position: absolute; z-index: 6; top: 16px; right: 16px; display: flex; flex-direction: column; align-items: flex-end; gap: 7px; pointer-events: none; }
#codex-skins .skin-tier-badge { padding: 4px 9px; border-radius: 1px; background: rgba(3,7,13,.68); font-size: .52rem; letter-spacing: .09em; backdrop-filter: blur(6px); }
.skin-card-owned-badge { position: static; display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid rgba(114,238,171,.35); border-radius: 1px; background: rgba(3,13,10,.68); color: #79edb0; font-size: .5rem; letter-spacing: .09em; backdrop-filter: blur(6px); }
.skin-card-owned-badge i { width: 6px; height: 6px; border-radius: 50%; background: #79edb0; box-shadow: 0 0 8px rgba(121,237,176,.7); }

/* ---- Zárolt és megszerzett állapot ---- */

#codex-skins .skin-card.is-locked { cursor: pointer; }
#codex-skins .skin-card.is-locked > .skin-card-art { filter: grayscale(.9) brightness(.43) contrast(1.08); }
#codex-skins .skin-card.is-locked:hover > .skin-card-art { filter: grayscale(.68) brightness(.54) contrast(1.08); transform: scale(1.025); }
#codex-skins .skin-card.is-owned { cursor: default; border-color: rgba(var(--csk-accent-rgb),.4); }
#codex-skins .skin-card.is-owned::before { box-shadow: 0 0 13px rgba(var(--csk-accent-rgb),.35); }

#codex-skins .skin-card-lock { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; color: rgba(222,230,236,.7); pointer-events: none; }
.skin-lock-ring { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border: 1px solid rgba(var(--csk-accent-rgb),.3); border-radius: 50%; background: rgba(3,7,13,.62); box-shadow: 0 0 25px rgba(var(--csk-accent-rgb),.1), inset 0 0 18px rgba(var(--csk-accent-rgb),.07); backdrop-filter: blur(5px); }
.skin-lock-ring::before { position: absolute; inset: -7px; border: 1px dashed rgba(var(--csk-accent-rgb),.18); border-radius: 50%; content: ""; animation: cskLockOrbit 12s linear infinite; }
#codex-skins .skin-card.is-locked .skin-card-lock .skin-lock-ring img { width: 27px; height: 27px; aspect-ratio: auto; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(0,0,0,.85)); }
#codex-skins .skin-card-lock small { color: rgba(205,216,224,.58); font-size: .49rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 8px #000; }

.skin-card-ready, .skin-card-exclusive-label { margin-top: 6px; color: rgba(121,237,176,.68); font-size: .49rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.skin-card-exclusive-label { color: rgba(232,190,77,.72); }

#codex-skins .skin-card-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 9px; padding: 8px 0 0; border-top: 1px solid rgba(255,255,255,.08); color: rgba(183,199,211,.56); font-size: .5rem; letter-spacing: .1em; text-transform: uppercase; }
#codex-skins .skin-card-price-row strong { display: flex; align-items: center; gap: 6px; color: #f1e7d2; font-size: .66rem; letter-spacing: .03em; }
#codex-skins .skin-card.is-locked .skin-card-price-row img { width: 18px; height: 18px; aspect-ratio: auto; border-radius: 50%; object-fit: contain; filter: drop-shadow(0 0 6px rgba(var(--csk-accent-rgb),.22)); }

@keyframes cskLockOrbit { to { transform: rotate(360deg); } }

/* ---- Teljes képes nézegető — bemutatóképek és harci assetek ---- */

/* Size the Codex skin purchase dialog in layout, keeping mobile text readable.
   Height also limits desktop width so the full 3:2 artwork leaves room for controls. */
body.codex-page .hero-purchase-modal .hero-purchase-modal-window--skin {
    --hpm-scale: 1;
    box-sizing: border-box;
    width: min(920px, calc(100vw - 32px), max(560px, calc(135vh - 400px)));
    width: min(920px, calc(100vw - 32px), max(560px, calc(135dvh - 400px)));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-x: hidden;
    overscroll-behavior: contain;
    transform: translateY(10px);
}

body.codex-page .hero-purchase-modal.is-visible .hero-purchase-modal-window--skin {
    transform: translateY(0);
}

body.codex-page .hero-purchase-modal-window--skin .hero-purchase-modal-body {
    padding: 12px clamp(16px, 3vw, 32px) clamp(16px, 3vw, 28px);
    overflow-wrap: anywhere;
}

body.codex-page .hero-purchase-modal-window--skin .hero-purchase-modal-title {
    font-size: clamp(1.4rem, 2.2vw, 2rem);
}

body.codex-page .hero-purchase-modal-window--skin .hero-purchase-modal-eyebrow,
body.codex-page .hero-purchase-modal-window--skin .hero-purchase-modal-tier,
body.codex-page .hero-purchase-modal-window--skin .hero-purchase-modal-balance {
    font-size: clamp(.75rem, 1vw, .875rem);
}

body.codex-page .hero-purchase-modal-window--skin .hero-purchase-modal-message,
body.codex-page .hero-purchase-modal-window--skin .hero-purchase-modal-levelreq {
    font-size: clamp(.8125rem, 1vw, .9375rem);
    line-height: 1.5;
}

body.codex-page .hero-purchase-modal-window--skin .hero-purchase-modal-price-row {
    flex-wrap: wrap;
    gap: 8px 16px;
}

body.codex-page .hero-purchase-modal-window--skin .hero-purchase-modal-actions {
    flex-wrap: wrap;
}

body.codex-page .hero-purchase-modal-window--skin .hero-purchase-modal-btn {
    flex: 1 1 140px;
    min-height: 44px;
    padding: 10px 12px;
    box-sizing: border-box;
}

body.codex-page .hero-purchase-modal-window--skin .hero-purchase-modal-close {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}

body.csk-image-modal-open { overflow: hidden; }
.csk-image-modal { position: fixed; z-index: 12000; inset: 0; display: grid; place-items: center; padding: 26px; box-sizing: border-box; }
.csk-image-modal.is-hidden { display: none; }
.csk-image-modal-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(20,14,32,.58), rgba(1,3,7,.94) 72%); backdrop-filter: blur(13px); cursor: zoom-out; }
.csk-image-modal-stage { --csk-modal-accent: 198,120,255; position: relative; z-index: 1; display: flex; flex-direction: column; width: min(94vw, 1500px); height: min(91vh, 940px); margin: 0; padding: 10px; box-sizing: border-box; border: 1px solid rgba(var(--csk-modal-accent),.38); background: rgba(3,6,11,.94); box-shadow: 0 30px 90px rgba(0,0,0,.72), 0 0 48px rgba(var(--csk-modal-accent),.12), inset 0 1px rgba(255,255,255,.04); animation: cskModalReveal 260ms var(--ease-premium) both; }
.csk-image-modal-stage::before, .csk-image-modal-stage::after { position: absolute; z-index: 3; width: 72px; height: 72px; content: ""; pointer-events: none; }
.csk-image-modal-stage::before { top: -1px; left: -1px; border-top: 2px solid rgba(231,189,89,.72); border-left: 2px solid rgba(231,189,89,.72); }
.csk-image-modal-stage::after { right: -1px; bottom: -1px; border-right: 2px solid rgba(var(--csk-modal-accent),.72); border-bottom: 2px solid rgba(var(--csk-modal-accent),.72); }
.csk-image-modal-artwork { position: relative; display: grid; flex: 1 1 auto; min-height: 0; place-items: center; overflow: hidden; background: radial-gradient(circle, rgba(var(--csk-modal-accent),.07), transparent 60%), #02050a; }
.csk-image-modal-artwork img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; filter: saturate(1.04) contrast(1.02); }
.csk-image-modal.is-asset-preview .csk-image-modal-stage { width: min(760px, calc(100vw - 32px)); height: min(840px, calc(100vw + 80px), calc(100dvh - 40px)); }
.csk-image-modal.is-asset-preview .csk-image-modal-artwork { margin: 12px; }
.csk-image-modal.is-asset-preview .csk-image-modal-artwork img { padding: 12px; filter: none; }
.csk-image-modal.is-asset-preview .csk-image-modal-caption strong { font-size: 1rem; overflow-wrap: anywhere; }
.csk-image-modal-caption { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 24px; min-height: 58px; padding: 8px 58px 4px 16px; box-sizing: border-box; border-top: 1px solid rgba(255,255,255,.065); }
.csk-image-modal-caption span { color: rgba(211,158,255,.68); font-size: .52rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.csk-image-modal-caption strong { color: #fff2dc; font-family: "AOW", serif; font-size: 1.23rem; font-weight: 400; letter-spacing: .04em; text-align: right; }
.csk-image-modal-close { position: absolute; z-index: 5; right: 18px; bottom: 18px; display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid rgba(231,189,89,.35); border-radius: 50%; background: rgba(3,7,13,.82); color: #e9d6aa; cursor: pointer; transition: border-color var(--t-mid), color var(--t-mid), transform var(--t-mid), box-shadow var(--t-mid); }
.csk-image-modal-close:hover, .csk-image-modal-close:focus-visible { border-color: rgba(231,189,89,.8); outline: 0; color: #fff3cf; transform: rotate(90deg); box-shadow: 0 0 20px rgba(231,189,89,.2); }
@keyframes cskModalReveal { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

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

@media (max-width: 820px) {
    .csk-intro { align-items: flex-start; flex-direction: column; }
    .csk-collection-status { width: 100%; }
    .csk-collection-status > div { flex: 1; }
    #codex-skins { grid-template-columns: 1fr; }
    .skin-card--signature { grid-column: 1; }
}

@media (max-width: 560px) {
    .csk-intro { padding: 20px 18px; }
    .csk-collection-status { flex-direction: column; }
    .csk-collection-status > div + div { border-top: 1px solid rgba(255,255,255,.07); border-left: 0; }
    #codex-skins .skin-card { min-height: 265px; }
    .skin-card--signature { min-height: 0 !important; }
    .csk-image-modal { padding: 10px; }
    .csk-image-modal-stage { width: 100%; height: min(88vh, 760px); padding: 6px; }
    .csk-image-modal-caption { align-items: flex-start; flex-direction: column; gap: 3px; min-height: 72px; padding: 10px 48px 8px 11px; }
    .csk-image-modal-caption strong { font-size: 1rem; text-align: left; }
    .csk-image-modal-close { right: 13px; bottom: 22px; }
    .skin-card-motion-label { display: none; }
    .skin-card-motion-toggle { min-width: 29px; padding: 5px 8px; justify-content: center; }
    .skin-card.has-motion .skin-card-zoom-cue { right: 58px; }
}

@media (prefers-reduced-motion: reduce) {
    #codex-skins .skin-card, #codex-skins .skin-card > .skin-card-art, .skin-card-motion-toggle { transition: none; }
    .skin-lock-ring::before { animation: none; }
    .csk-image-modal-stage { animation: none; }
}