/* =======================================
   BATTLE V3 — Hero-card reshape demó
   Csak a battlev3.html-hez tartozik. A hero-card BELSŐ tartalma
   (bar-fill/hp-fill, ability-icon-wrapper, item-slot stb.) a battle.css-ből
   öröklődik (createHeroCard() újrahasznosítva, lásd js/ui/battlev3UI.js) –
   itt csak a V3-specifikus elrendezés/pozicionálás él.
   ======================================= */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }

body.v3-body {
    margin: 0;
    font-family: "Outfit", sans-serif;
    color: #f4f4ff;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: #000;
    --v3-button-padding-y: 10px;
    --v3-button-padding-x: 24px;
    --v3-button-font-size: .85rem;
}

.v3-page {
    position: relative;
    height: var(--battle-layout-height, 100vh);
    width: var(--battle-layout-width, 100vw);
    transform: scale(var(--battle-viewport-scale, 1));
    transform-origin: top left;
    display: flex;
    flex-direction: column;
}

/* Laptop módban a Chromium layout-zoomja a teljes vásznat újrarajzolja a
   célméreten. Ez az egész oldal transform-skálázásánál élesebb szöveget és
   kártyaképeket ad, miközben ugyanazt a 1920-as tervezési rácsot tartja meg. */
body.v3-laptop-mode .v3-page {
    transform: none;
    zoom: var(--battle-viewport-scale, 1);
}

/* ===== ARENA HÁTTÉR ===== */
.v3-arena {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: url('../image/backgrounds/battlev3_vs.png') center center / cover no-repeat;
    overflow: hidden;
}
.v3-arena::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,10,0.4) 0%, rgba(0,0,10,0.05) 32%, rgba(0,0,10,0.05) 68%, rgba(0,0,10,0.5) 100%);
    pointer-events: none;
}

.v3-empty-state {
    position: relative;
    z-index: 20;
    margin: auto;
    max-width: 480px;
    text-align: center;
    background: rgba(5,5,15,0.85);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;
    padding: 24px;
    line-height: 1.6;
}
.v3-empty-state a { color: #7fd4ff; }
.v3-empty-state.hidden { display: none; }

.v3-row {
    position: relative;
    z-index: 3;
    flex: 1 1 0;
    display: flex;
    /* flex-start, NEM center: a .v3-card mostantól fix px magas (565px,
       lásd .v3-card), nem vh-hoz igazodó – kis ablakmagasságnál a sor
       alacsonyabb lehet, mint a kártya. center-nél a túllógás fele a sor
       teteje FÖLÉ esne, ami scrollal sem érhető el (böngésző nem enged
       negatív scrollTop-ot), és pont ez okozta a kártya tetejének
       "kilógását". flex-start-tal a teljes túllógás lefelé esik, ahol az
       overflow-y:auto miatt görgethető. */
    align-items: flex-start;
    justify-content: center;
    gap: 70px;
    /* Extra padding-top: a kártyák kicsit lejjebb kerüljenek a sorban (nem
       lógnak flush a viewport tetejéhez/aljához). Ha többet/kevesebbet
       akarsz, ezt az első értéket (padding-top) állítsd. */
    padding: 24px 34px 12px;
    flex-wrap: wrap;
    overflow-y: auto;
}

/* ===== ELVÁLASZTÓ + SKIP ===== */
.v3-divider {
    position: relative;
    z-index: 10;
    height: 0;
    flex-shrink: 0;
    border-top: 2px solid rgba(0,0,0,0.6);
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
}
.v3-divider-left {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
}
.v3-skip-btn {
    padding: var(--v3-button-padding-y) var(--v3-button-padding-x);
    border-radius: 6px;
    border: none;
    font-family: inherit;
    font-weight: 800;
    font-size: var(--v3-button-font-size);
    letter-spacing: 1.5px;
    cursor: pointer;
    color: #10121c;
    background: linear-gradient(90deg, #ff6bd8, #7dffb0);
    box-shadow: 0 0 16px rgba(255,255,255,0.3), 0 4px 10px rgba(0,0,0,0.5);
    transition: filter .15s ease, transform .1s ease;
}
.v3-skip-btn:hover { filter: brightness(1.1); }
.v3-skip-btn:active { transform: scale(0.96); }

.v3-basic-attack-btn {
    padding: var(--v3-button-padding-y) var(--v3-button-padding-x);
    border: 1px solid rgba(255, 126, 92, .78);
    border-radius: 6px;
    font-family: inherit;
    font-weight: 800;
    font-size: var(--v3-button-font-size);
    letter-spacing: 1.2px;
    cursor: pointer;
    color: #fff4e9;
    background: linear-gradient(90deg, #7a1f27, #cf512f);
    box-shadow: 0 0 16px rgba(255, 91, 50, .28), 0 4px 10px rgba(0,0,0,.5);
    transition: filter .15s ease, transform .1s ease;
}
.v3-basic-attack-btn:hover { filter: brightness(1.14); }
.v3-basic-attack-btn:active { transform: scale(.96); }

.v3-roll-btn {
    padding: var(--v3-button-padding-y) var(--v3-button-padding-x);
    border-radius: 6px;
    border: none;
    font-family: inherit;
    font-weight: 800;
    font-size: var(--v3-button-font-size);
    letter-spacing: 1.5px;
    cursor: pointer;
    color: #10121c;
    background: linear-gradient(90deg, #7dc8ff, #ffe27a);
    box-shadow: 0 0 16px rgba(255,255,255,0.3), 0 4px 10px rgba(0,0,0,0.5);
    transition: filter .15s ease, transform .1s ease;
}
.v3-roll-btn:hover { filter: brightness(1.1); }
.v3-roll-btn:active { transform: scale(0.96); }

.v3-auto-battle-btn {
    padding: var(--v3-button-padding-y) var(--v3-button-padding-x);
    border-radius: 6px;
    border: 1px solid rgba(140, 150, 170, .55);
    font-family: inherit;
    font-weight: 800;
    font-size: var(--v3-button-font-size);
    letter-spacing: 1.2px;
    cursor: pointer;
    color: #cfd6e6;
    background: linear-gradient(90deg, #2a2f42, #3a4160);
    box-shadow: 0 4px 10px rgba(0,0,0,.5);
    transition: filter .15s ease, transform .1s ease, background .15s ease, color .15s ease;
}
.v3-auto-battle-btn:hover { filter: brightness(1.15); }
.v3-auto-battle-btn:active { transform: scale(0.96); }
.v3-auto-battle-btn.v3-auto-battle-active {
    color: #10121c;
    background: linear-gradient(90deg, #7dffb0, #7dc8ff);
    box-shadow: 0 0 16px rgba(125, 255, 176, .45), 0 4px 10px rgba(0,0,0,.5);
}

/* ===== JOBB OLDAL: KÖR-KOCKA + SHOP GOMB ===== */
.v3-divider-right {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
}

.v3-round-dice {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, #ffffff22, #000000aa);
    border: 2px solid rgba(255,255,255,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.6);
}
.v3-round-amount {
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    color: #eef2f6;
    text-shadow: 0 0 6px rgba(255,255,255,.9), 0 2px 3px rgba(0,0,0,.85);
}

.v3-shop-btn {
    position: relative;
    z-index: 2;
    padding: var(--v3-button-padding-y) calc(var(--v3-button-padding-x) + 4px);
    border-radius: 6px;
    border: none;
    font-family: inherit;
    font-weight: 800;
    font-size: var(--v3-button-font-size);
    letter-spacing: 1.5px;
    cursor: pointer;
    color: #3a2600;
    background: linear-gradient(90deg, #ffd84c, #ffb300);
    box-shadow: 0 0 16px rgba(255,216,76,0.5), 0 4px 10px rgba(0,0,0,0.5);
    transition: filter .15s ease, transform .1s ease;
    overflow: hidden;
}
.v3-shop-btn:hover { filter: brightness(1.1); }
.v3-shop-btn:active { transform: scale(0.96); }

/* Aranyszikra animáció: apró fénypontok, amik felvillannak és felfelé
   sodródnak a gomb felszínén, végtelenítve, egymáshoz képest eltolt
   késleltetéssel/pozícióval. */
.v3-shop-sparkle {
    position: absolute;
    left: 20%;
    bottom: 10%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff8d6;
    box-shadow: 0 0 6px 2px #fff2a8;
    opacity: 0;
    pointer-events: none;
    animation: v3-shop-sparkle-rise 1.6s ease-in infinite;
}
.v3-shop-sparkle-2 { left: 50%; animation-delay: .5s; }
.v3-shop-sparkle-3 { left: 78%; animation-delay: 1.05s; }

@keyframes v3-shop-sparkle-rise {
    0%   { opacity: 0; transform: translateY(0) scale(0.6); }
    15%  { opacity: 1; }
    80%  { opacity: .8; }
    100% { opacity: 0; transform: translateY(-22px) scale(1.1); }
}

/* ===== KÁRTYA ===== */
.v3-card {
    /* Fix pixel magasság, NEM vh-alapú clamp többé: a .v3-rank-frame (lásd
       lent) kézzel belőtt fix px méretre állt (290x565), így a kártya
       tartalmának (flip-inner, portré, HUD-elemek) is fix px magasságúnak
       kell lennie, pontosan ugyanazzal az értékkel – különben a kettő nem
       fedi egymást, és a kártya teteje kilóg a keret fölé (vagy fordítva).
       Ha a keret méretét (.v3-rank-frame width/height) állítod, ezt az
       értéket is állítsd vele egyszerre. A szélesség változatlanul a
       flip-inner aspect-ratio-jából adódik automatikusan (lásd lent), hogy a
       banner-fotó ne torzuljon. */
    height: 565px;
    width: auto;
    flex: 0 0 auto;
    position: relative;
    /* A .hero-card alap szabálya (style.css) grid/padding/border/border-radius-t
       ad – ez felelős a kártya körüli extra lekerekített/keretezett dobozért és
       egy rejtett "auto" grid-oszlopért, ami elvette a szélesség egy részét.
       V3-ban nincs szükség rá: a flip-inner önmagában a teljes kártya. */
    display: block;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
}
.v3-card.dead { opacity: .4; filter: grayscale(.85); }
.v3-card:hover { z-index: 30; }

/* --- Méretezés: a kártya mérete a banner-card art natív arányából
   (900x1290) jön (lásd .v3-flip-inner aspect-ratio), NEM a sor-magasság
   stretch-eléséből. Mivel minden kártya azonos szélességű és arányú, a
   magasságuk is automatikusan egyenlő lesz – nincs szükség flex-stretch
   trükkre. A hero-card-main flex:1-gyel tölti ki a face-front-ot (ami
   maga a flip-inner 100%-a), a hero-banner-wrapper pedig flex:1-gyel
   tölti ki a hero-card-main-t (a dice-row testvér display:none). --- */
.v3-main.hero-card-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* --- Portré: a teljes kártyát kitölti (nem csak egy részét), semmilyen
   lekerekítés/szegély nincs rajta – minden UI-elem (badge-ek, item/spell
   slotok, bar-ok, ability sor) rá van pozicionálva absolute-tal, a
   felhasználó Photoshop-mockupja szerint (LoL-stílusú kártya). --- */
.v3-card .hero-banner-wrapper {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    border-radius: 0;
    overflow: hidden;
    background: #05060c;
    box-shadow: 0 0 14px rgba(0,0,0,0.5);
}
.v3-card .hero-banner-wrapper::before { display: none; } /* alap dísz-szalag kikapcsolva, nincs hely rá */

/* --- Vektoros HUD-keret (.hud-frame, lásd buildHudFrameSvg() a
   battlev2UI.js-ben, ugyanaz a komponens mint az aréna-kártyán) a teljes
   banner-en, a rang szerint mindig átszíneződve (--frame-color/--frame-glow),
   ugyanazokkal az árnyalatokkal mint a battlev2 aréna-kártyáján
   (.arena-card[data-rank] .hud-panel, lásd battlev2.css). --- */
.v3-card .hero-banner-wrapper { --frame-color: #8fe8ff; --frame-glow: #eaffff; }
.v3-card[data-rank="iron"] .hero-banner-wrapper { --frame-color: #b9c2cc; --frame-glow: #f4f7fa; }
.v3-card[data-rank="bronze"] .hero-banner-wrapper { --frame-color: #cd7f32; --frame-glow: #ffcd9a; }
.v3-card[data-rank="silver"] .hero-banner-wrapper { --frame-color: #d7ecff; --frame-glow: #ffffff; }
.v3-card[data-rank="gold"] .hero-banner-wrapper { --frame-color: #ffcf4d; --frame-glow: #fff3c2; }
.v3-card[data-rank="platinum"] .hero-banner-wrapper { --frame-color: #2de8a3; --frame-glow: #baffe4; }
.v3-card[data-rank="diamond"] .hero-banner-wrapper { --frame-color: #4d8dff; --frame-glow: #b8d4ff; }
.v3-card[data-rank="master"] .hero-banner-wrapper { --frame-color: #b34aff; --frame-glow: #e6c2ff; }
.v3-card[data-rank="grandmaster"] .hero-banner-wrapper { --frame-color: #ff3b3b; --frame-glow: #ffb3b3; }
.v3-card[data-rank="challenger"] .hero-banner-wrapper { --frame-color: #ffd24c; --frame-glow: #8fe8ff; }

/* A .hud-frame SVG (buildHudFrameSvg(), battleUI.js) alap pozicionáló/animáció
   szabályai a battlev2.css-ben élnek (.hud-frame { position:absolute; ... }),
   de battlev3.html NEM tölti be a battlev2.css-t – enélkül az SVG a böngésző
   default replaced-elem méretén (kb. 300x150) jelenik meg statikusan, a
   banner bal-felső sarkába ékelve, ahelyett hogy a teljes hero-banner-wrapper-t
   kitöltené. Ezért itt, battlev3.css-ben duplikáljuk (battlev2.css-t nem
   érinti, a két oldal külön CSS-fájlt használ). */
.v3-card .hud-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}
.v3-card .hud-frame .hud-frame-line {
    fill: none;
    stroke: var(--frame-color);
    stroke-width: 2;
    opacity: .85;
    filter: drop-shadow(0 0 3px var(--frame-color));
}
.v3-card .hud-frame .hud-frame-line-inner {
    fill: none;
    stroke: var(--frame-color);
    stroke-width: 1;
    opacity: .3;
}
.v3-card .hud-frame .hud-frame-chase {
    fill: none;
    stroke: var(--frame-glow);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 0.05 0.95;
    filter: drop-shadow(0 0 5px var(--frame-color));
    animation: v3HudChase 5s linear infinite;
}
@keyframes v3HudChase {
    to { stroke-dashoffset: -1; }
}
.v3-card .hud-frame .hud-frame-ticks line {
    stroke: var(--frame-color);
    stroke-width: 2;
    opacity: .55;
}
.v3-card .hud-frame .hud-frame-nodes circle {
    fill: var(--frame-glow);
    filter: drop-shadow(0 0 3px var(--frame-color));
    animation: v3HudNodePulse 3s ease-in-out infinite;
}
.v3-card .hud-frame .hud-frame-nodes circle:nth-child(2n) { animation-delay: .6s; }
.v3-card .hud-frame .hud-frame-nodes circle:nth-child(3n) { animation-delay: 1.1s; }
@keyframes v3HudNodePulse {
    0%, 100% { opacity: .4; r: 1.8; }
    50%      { opacity: 1; r: 2.8; }
}

.v3-card .hero-banner {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: unset;
    z-index: 1;
}

/* Ability-overlay KIVÉVE a portréból (lásd .v3-abilities-row lent) */
.v3-card .hero-abilities-overlay {
    position: static;
}

/* --- TOP zóna: bal-felül a szint-jelvény, jobb-felül a golden badge, alatta
   (jobb szélen, függőlegesen) a 6 item-slot + 1 fogyóeszköz-slot. --- */
.v3-card .hero-level-badge {
    position: absolute; top: 14px; left: 12px; bottom: auto;
    width: 76px; height: 74px;
    z-index: 700;
}
.v3-card .hero-gold-badge,
.v3-card .hero-banner-wrapper:has(.hero-collect-badges:not(.hidden)) .hero-gold-badge {
    position: absolute; top: 240px; right: 60px; bottom: auto; left: auto;
    /* Keskenyebb, mint az alap (battle.css .hero-gold-badge fix 92px
       szélessége) – a tartalomhoz igazodik, nem húzza ki a sárga jelvényt. */
    width: auto;
    padding: 3px 8px;
    font-size: .8rem;
    gap: 4px;
    z-index: 7;
    /* Sárgás "gold badge" stílus 1:1 átemelve a battlev2 aréna-kártyájáról
       (.arena-card .arena-corner-badges .hero-gold-badge, battlev2.css). */
    background: linear-gradient(180deg, rgba(255,224,140,0.28), rgba(90,64,10,0.4));
    border: 1px solid rgba(255,210,110,0.9);
    box-shadow: 0 0 6px rgba(255,193,66,0.45), inset 0 0 4px rgba(255,224,140,0.25);
}
.v3-card .hero-gold-badge .gold-icon { width: 16px; height: 16px; }

/* Ereklye-jelvény – pontosan az arany jelvény fölött, középre igazítva
   hozzá (right: 60px, mint a hero-gold-badge-nél), izzó fény-glow
   háttérrel, hogy elüssön a portrétól akkor is, ha a hős Ereklyéje épp
   nincs feloldva egy másik hősnél (csak akkor jelenik meg egyáltalán, ha
   isHeroRelicUnlocked igaz, lásd buildRelicCornerBadge, battleUI.js). */
.v3-card .arena-relic-badge {
    position: absolute; top: 190px; right: 60px; bottom: auto; left: auto;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: visible;
    z-index: 7;
    cursor: pointer;
}
.v3-card .arena-relic-badge::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190,150,255,0.55), rgba(190,150,255,0) 70%);
    filter: blur(1px);
    animation: v3RelicGlowPulse 2.4s ease-in-out infinite;
    z-index: -1;
}
@keyframes v3RelicGlowPulse {
    0%, 100% { opacity: .6; transform: scale(0.94); }
    50%      { opacity: 1; transform: scale(1.08); }
}
.v3-card .arena-relic-badge img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(190,150,255,0.9);
    box-shadow: 0 0 8px rgba(160,110,255,0.6), inset 0 0 5px rgba(200,170,255,0.35);
}

/* Jobb szélen, egymás alatt (NEM rács) a 6 item-slot + 1 fogyóeszköz-slot –
   nagy kockaikonok, amik a jobb oldal nagy részét kitöltik fentről egészen a
   .v3-bottom-zone föléig (space-between osztja szét egyenletesen). */
.v3-card .hero-item-slots {
    position: absolute;
    top: 12px; right: 10px; left: auto;
    /* A .v3-bottom-zone (badge-sor + HP/MANA stb.) TETEJÉIG ér, hogy ne
       lógjon bele/takarja a jelvény-sort. */
    bottom: 246px;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding-right: 1px;
}
.v3-card .hero-item-slots .item-slot,
.v3-card .hero-item-slots .hero-consumable-slot {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,8,16,.5);
    border: 1px solid rgba(255,255,255,.25);
}
/* Az item ikon a TELJES kockát kitöltse (nem egy kis ikon a közepén), és
   legyen kicsit áttetsző – felülírja a style.css fix 38x38-as .item-icon
   szabályát, ami nélküle levágná/középre húzná a képet. */
.v3-card .hero-item-slots .item-slot img.item-icon,
.v3-card .hero-item-slots .hero-consumable-slot img.item-icon {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    opacity: .82;
    box-shadow: none;
}
/* Item-cooldown: mint a summoner spelleknél (.v3-left-mid-col
   .spell-slot-cooldown-overlay) – elszürkített ikon + középre igazított
   szám, NEM egy jobbra csúszott felirat (a .spell-slot-cooldown-overlay
   div itt korábban semmilyen saját szabályt nem kapott, ezért a
   .item-slot flexbox-a egyszerű inline elemként a kép mellé, jobbra
   tördelte). */
.v3-card .hero-item-slots .item-slot.on-cooldown img.item-icon,
.v3-card .hero-item-slots .hero-consumable-slot.on-cooldown img.item-icon {
    filter: grayscale(0.9) brightness(0.5);
}
.v3-card .hero-item-slots .item-slot .spell-slot-cooldown-overlay,
.v3-card .hero-item-slots .hero-consumable-slot .spell-slot-cooldown-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    text-shadow: 0 0 4px #000;
    border-radius: inherit;
    pointer-events: none;
}
/* Ogerpon Kalapács-fejlesztésű item: narancssárga keret a jobb oldali
   item-oszlopban is – a .v3-card .hero-item-slots .item-slot alapszabály
   (fenti, fehér keret) specifikusabb, mint a battle.css-beli
   .item-slot.item-upgraded, ezért itt külön felül kell írni. */
.v3-card .hero-item-slots .item-slot.item-upgraded {
    border-color: rgba(255, 152, 0, 0.85);
    box-shadow:
        inset 0 0 6px rgba(255, 152, 0, 0.35),
        0 0 8px rgba(255, 160, 40, 0.55);
}
.v3-card .hero-item-slots .consumable-slot-plus {
    font-size: 1.1rem;
    line-height: 1;
    color: rgba(255,255,255,.5);
}
.v3-card .hero-item-slots .hero-consumable-count {
    position: absolute;
    bottom: -2px; right: -2px;
    min-width: 14px;
    font-size: .6rem;
    line-height: 1.3;
    text-align: center;
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(0,0,0,.85);
    color: #ffe8a8;
}

/* --- Summoner-spell slotok: az item-slot oszlop BAL oldalán, egy sorban,
   annak aljához igazítva – mintha az item-oszlop oldalirányú folytatása
   lenne (kockaikonok, nem körök). (A passzíva/rúna/collect jelvények innen
   elköltöztek a .v3-badge-row-ba, lásd lejjebb). --- */
.v3-left-mid-col {
    position: absolute;
    right: 62px; left: auto; top: auto;
    bottom: 246px;
    z-index: 7;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 6px;
}
.v3-left-mid-col .hero-spell-slots {
    position: static;
    display: flex;
    flex-direction: row;
    gap: 6px;
}
.v3-left-mid-col .spell-slot {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0,8,16,.5);
    border: 1px solid rgba(255,255,255,.25);
}
/* A kör alakú prizmatikus keretgrafika (.spell-slot-frame) nem illik a
   kocka alakhoz – elrejtve, a sima szegély (lásd fent) adja a kockakeretet,
   ugyanúgy mint az item-sloton. */
.v3-left-mid-col .spell-slot-frame {
    display: none;
}

/* --- Jelvény-sor a HP csík jobb-felső sarka fölött (a .v3-bottom-zone
   ELSŐ sora, lásd battlev3UI.js .v3-badge-row) – balról jobbra: régi
   egykulcsos gyűjtögetős jelvény (ha van) → kulcsonkénti gyűjtögetős
   jelvények (max 2) → rúna pecsét → passzíva-jelvény (legnagyobb, jobb
   szélen, animált rang-fénnyel futó kerettel, lásd lejjebb). --- */
.v3-badge-row {
    flex: 0 0 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    /* A sor picit balra tolva a jobb szélről – ha többet/kevesebbet akarsz,
       ezt az értéket állítsd. */
    padding-right: 6px;
}
.v3-badge-row .hero-collect-passive-badge,
.v3-badge-row .hero-rune-badge {
    position: static;
    transform: none;
    width: 36px; height: 36px;
    align-self: flex-end;
}
.v3-badge-row .hero-collect-badges {
    position: static;
    display: flex;
    align-items: flex-end;
    align-self: flex-end;
    gap: 3px;
}
/* A natív .hero-collect-badge egy ikon+szám "pill" (kb. 58px széles) – a
   keskeny V3-kártyán kicsinyítéssel fér el a sorban. */
.v3-badge-row .hero-collect-badge { transform: scale(.85); transform-origin: right center; }

/* Passzíva-jelvény: nagyobb, mint a sor többi eleme, jobb szélen, a
   rang-színéhez igazodó (--frame-color/--frame-glow, öröklődik a
   .hero-banner-wrapper-ről) körbefutó "energia-fénnyel" – ugyanaz a
   conic-gradient/@property trükk, mint az ultimate ability-keretnél
   (lásd .v3-abilities-row .ability-icon-wrapper.ultimate fent), csak
   rang-színben (nem szivárvánnyal), a HUD-keret hud-frame-chase
   animációjához hasonló hatásért. */
.v3-badge-row .hero-passive-badge {
    position: static;
    transform: none;
    margin-bottom: 0;
    width: 54px; height: 54px;
    flex: 0 0 auto;
}
@property --badge-chase-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.v3-badge-row .hero-passive-badge .passive-icon {
    border: 3px solid transparent;
    border-radius: 6px;
    background:
        linear-gradient(#0b0f16, #0b0f16) padding-box,
        conic-gradient(from var(--badge-chase-angle), var(--frame-color) 0deg, var(--frame-color) 300deg, var(--frame-glow) 330deg, var(--frame-color) 360deg) border-box;
    box-shadow: 0 0 6px rgba(0,0,0,.6), 0 0 9px var(--frame-color);
    animation: v3BadgeChase 3.5s linear infinite;
}
@keyframes v3BadgeChase {
    to { --badge-chase-angle: 360deg; }
}

/* --- Rang-kard: a kártya bal szélén lóg ki, kissé ráúszva a keretre
   (lásd js/ui/battlev3UI.js .v3-rank-sword, mintája a battlev2 aréna
   splash-kardja, image/gui_ranked/kardok/<rang>.png). --- */
.v3-rank-sword {
    position: absolute;
    left: -45px; top: 39%;
    transform: translateY(-50%);
    height: 58%;
    width: auto;
    /* Alacsonyabb, mint a bal-közép oszlop (spell/passzíva ikonok, z-index:7),
       hogy ahol a kard grafika a kártyára "lóg", ott a funkcionális UI
       ikonok mindig LÁTHATÓAK maradjanak a kard fölött, ne fordítva. */
    z-index: 100;
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.65));
}
.v3-rank-sword img { height: 100%; width: auto; display: block; }
/* A kard a .v3-card-on kívül/felett lóg (nem a .v3-flip-inner része), így
   flip közben nem fordulna vele – statokra fordításnál inkább eltüntetjük,
   hogy ne lógjon rá zavaróan a hátoldali stat-panelra. */
.v3-card.v3-flipped .v3-rank-sword {
    opacity: 0;
    transition: opacity .2s ease;
}

/* --- Rang-keret: a TELJES kártyát körbevevő dísz-keret, rangonként más
   (image/gui_ranked/keretek/), NEM kaszt szerint színezett. Pontosan a
   kártya (.v3-card) méretére van szabva – a .v3-flip-inner natív aránya
   (886x1775) EZT a keret-PNG-t követi, ezért itt torzítás nélkül tölti ki
   a teljes kártyát. A kard (.v3-rank-sword) fölé nyúlik egy kicsit
   (magasabb z-index), ahogy a referenciaképen is a dísz-elem ráfed a
   kardra. Kattintás nem megy át rajta (pointer-events:none). */
.v3-rank-frame {
    position: absolute;
    top: -15px;
    left: -4px;
    width: 290px;
    height: 585px;
    z-index: 12;
    pointer-events: none;
}

/* --- STAT gomb: kicsi, a felső badge-sor ALATT, kártyaközépre igazítva.
   Mért adatok szerint a szint- és gold-badge közti rés a nagyobb badge-
   méreteknél már túl szűk egy központi gombhoz (átfedne a szint-jelvénnyel),
   ezért a gomb a badge-sor alá került, ahol minden kártyaszélességnél
   (clamp 400-560px magasság) szabad sáv van a bal-közép oszlop fölött. */
.v3-stats-btn {
    position: absolute;
    top: 44px; left: 50%;
    transform: translateX(-50%);
    z-index: 9;
    background: rgba(6,8,18,0.85);
    border: 1px solid rgba(255,255,255,0.35);
    color: #cfe6ff;
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 9px;
    border-radius: 999px;
    cursor: pointer;
    opacity: .5;
    transition: opacity .15s ease, background .15s ease;
}
.v3-card:hover .v3-stats-btn,
.v3-stats-btn:hover { opacity: 1; background: rgba(20,30,60,0.95); }

/* --- Kártya-fordítás: a statok a kártya hátoldalán élnek (nem lógnak ki
   a kártyából egy lebegő popoverben), a STAT gombra kattintva fordul a
   kártya, hogy helyet spóroljunk. --- */
.v3-card { perspective: 1200px; }

/* A kártya SZÉLESSÉGE innen ered: fix magasság (.v3-card, lásd fent) + a
   rang-keret PNG natív aránya (886x1775 – image/gui_ranked/keretek/), NEM a
   banner-fotó natív arányából. Így a keret SOHA nem torzul (pontosan
   ráfeszül a kártyára, lásd .v3-rank-frame), a banner-fotó pedig
   object-fit:cover-rel tölti ki a (magasabb, keskenyebb) helyet – egy fotó
   kicsit erősebb oldalsó vágása sokkal kevésbé zavaró, mint egy díszes
   fémkeret vizuális torzítása lenne. */
.v3-flip-inner {
    position: relative;
    height: 100%;
    width: auto;
    aspect-ratio: 886 / 1775;
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.4, .15, .2, 1);
}
.v3-card.v3-flipped .v3-flip-inner { transform: rotateY(180deg); }
/* Flip közben az előlap elemei (item/spell slotok, HP/Mana/XP sáv stb.)
   backface-visibility:hidden miatt NEM látszanak, de bizonyos böngészőkben
   a hit-testing/mouseover event-jeik ATTÓL FÜGGETLENÜL még lefutnának,
   mert ugyanazon a képernyő-területen fedik a hátlapot – emiatt a
   feléjük tartozó lebegő tooltipek (item, spell, HP/Mana, XP stb.)
   véletlenül felugorhattak a stat-lista fölött hoverelve. pointer-events:
   none-nal az előlap teljesen "átlátszóvá" válik az egérnek flip közben. */
.v3-card.v3-flipped .v3-face-front { pointer-events: none; }
.v3-card:not(.v3-flipped) .v3-face-back { pointer-events: none; }

.v3-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.v3-face-front { display: flex; flex-direction: column; }

/* --- Kártya-hátoldal: a "banner_card" portré MARAD látható a háttérben
   (JS-ből kap background-image-et, lásd battlev3UI.js buildV3Card), de csak
   kb. 5%-ban derengve át egy 95%-os fekete fátyol alól – gyakorlatilag
   fekete alap, hogy a stat-lista jól olvasható legyen. A lista feljebb
   kezdődik (nincs külön "Statok" label többé, csak a .v3-back-tag), hogy
   minden sor (a Burokkal együtt) kiférjen görgetés nélkül is. */
.v3-face-back {
    position: relative;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    gap: 3px;
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(120,180,255,0.5);
    border-radius: 8px;
    padding: 6px 8px 8px;
    padding-top: 72px;
    overflow-y: auto;
    cursor: pointer;
    box-shadow: 0 0 14px rgba(0,0,0,0.5);
}
/* "Vissza" jelvény – vizuálisan az előlapi .v3-stats-btn 1:1 mása, pontosan
   ugyanazon a pozíción (top:44px, középre igazítva), hogy flip közben a
   szem ugyanott találja a gombot. */
.v3-back-tag {
    position: absolute;
    top: 44px; left: 50%;
    transform: translateX(-50%);
    background: rgba(6,8,18,0.85);
    border: 1px solid rgba(255,255,255,0.35);
    color: #cfe6ff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 9px;
    border-radius: 999px;
}

/* --- Stat-lista: egy oszlopban, soronként ikon + megnevezés + érték,
   vékony elválasztóval soronként (nem 2-oszlopos rács többé), keskenyebb
   sormagassággal, hogy mind a 15 sor (Burokkal együtt) kiférjen. A
   megnevezés a .stat-item::after content:attr(data-label)-ből jön (lásd
   js/ui/battleUI.js generateStatIcons – data-label attribútum), flex
   order-rel ékelve az ikon és az érték KÖZÉ, DOM-módosítás nélkül. --- */
.v3-face-back .hero-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
}
.v3-face-back .stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(255,255,255,.12);
    /* Egyedi stat-színt kap a data-stat alapján (lásd a szín-mapping
       szabályokat lejjebb) – az ikon-izzás ÉS a megnevezés-szöveg ebből a
       változóból veszi a színét (6. kérés), az ÉRTÉK-szám színe viszont a
       battlev2.html-lel megegyező, meglévő .stat-<name> osztályból jön
       (style.css), változatlanul (3. kérés). */
    --stat-glow: rgba(143,232,255,.55);
}
.v3-face-back .stat-item:last-child { border-bottom: none; }
.v3-face-back .stat-icon {
    order: 1;
    width: 16px; height: 16px;
    flex-shrink: 0;
}
.v3-face-back .stat-item::after {
    content: attr(data-label);
    order: 2;
    flex: 1 1 auto;
    font-weight: 600;
    letter-spacing: .2px;
    text-transform: uppercase;
    font-size: .6rem;
    color: var(--stat-glow);
    filter: brightness(1.6) saturate(1.3);
}
/* Az érték-szám mérete/vastagsága a hero-level-badge szintszámát idézi
   (.level-amount, battle.css), a SZÍNE viszont a battlev2.html-lel
   megegyező, meglévő .stat-<name> osztályokból jön (style.css) – itt csak
   a méret/súly/árnyék van felülírva, szín NEM. */
.v3-face-back .stat-value {
    order: 3;
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,.85);
}

/* Stat-onkénti izzás-szín (data-stat kulcs alapján) az ikonhoz/megnevezéshez
   – ugyanazok az árnyalatok, mint a style.css .stat-<name> szín-mappingje. */
.v3-face-back .stat-item[data-stat="attackPower"]      { --stat-glow: #ff8080; }
.v3-face-back .stat-item[data-stat="magicPower"]        { --stat-glow: #4cb3ff; }
.v3-face-back .stat-item[data-stat="critAttackPower"]   { --stat-glow: #b3003b; }
.v3-face-back .stat-item[data-stat="critMagicPower"]    { --stat-glow: #9933ff; }
.v3-face-back .stat-item[data-stat="critChance"]        { --stat-glow: #ff5e00; }
.v3-face-back .stat-item[data-stat="armor"]             { --stat-glow: #ffd84c; }
.v3-face-back .stat-item[data-stat="magicResist"]       { --stat-glow: #8cfff9; }
.v3-face-back .stat-item[data-stat="speed"]             { --stat-glow: #fff2a8; }
.v3-face-back .stat-item[data-stat="lethality"]         { --stat-glow: #ff5c5c; }
.v3-face-back .stat-item[data-stat="endurance"]         { --stat-glow: #c9ff4c; }
.v3-face-back .stat-item[data-stat="lifestealPercent"]  { --stat-glow: #ff4c7d; }
.v3-face-back .stat-item[data-stat="powerPlus"]         { --stat-glow: #ffdf3b; }
.v3-face-back .stat-item[data-stat="hpRegenPlus"]       { --stat-glow: #7df77d; }
.v3-face-back .stat-item[data-stat="manaRegenPlus"]     { --stat-glow: #4cb3ff; }
.v3-face-back .stat-item[data-stat="shieldPool"]        { --stat-glow: #ff8fd6; }

/* --- Alsó zóna: HP/Mana csík, alatta az ability sor, legalul a buff/debuff
   hely – mind a portré ALJÁRA úszik (nem alatta, dokumentum-flow-ban), sötét
   scrim-gradienssel az olvashatóságért, a felhasználó Photoshop-mockupja szerint.
   MINDHÁROM alzóna (bars/abilities/buffs) fix magasságú (flex-shrink:0, ill. a
   buffs-row flex:1-gyel tölti ki a maradékot egy fix teljes zóna-magasságon
   belül) – így a HP/MANA sáv és az ability-ikonok MINDIG ugyanott jelennek meg
   minden kártyán, függetlenül attól, hogy hány buff/debuff aktív épp. */
.v3-bottom-zone {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 8;
    /* Magasabb, mint korábban: a HP/MANA sáv alá bekerült egy vékony XP csík,
       az ability-sor alá pedig egy külön chargebar-sor, LEGFELÜL pedig egy
       jelvény-sor (passzíva/rúna/collect, lásd .v3-badge-row) – a zóna
       teljes magasságát ennyivel megnöveltem, hogy minden alzóna elférjen
       fixen, és a HP/MANA sáv emiatt automatikusan feljebb kerül a kártyán
       (a zóna teteje a bottom:0-hoz képest ennyivel nyúlik feljebb). */
    height: 246px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 8px 6px;
    background: linear-gradient(180deg, rgba(0,0,10,0) 0%, rgba(0,0,10,.55) 35%, rgba(0,0,10,.85) 100%);
}

/* --- Ability sor: fix magasságú, nagyobb ikonok, NEM tördel (nowrap) –
   így a sor magassága sosem változik az ability-számtól függően. --- */
.v3-abilities-row {
    position: relative;
    z-index: 4;
    flex: 0 0 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    /* A READY/selected ikon scale + translate transzformációja néhány pixellel
       túlnyúlik az 52px-es soron. Hidden overflow esetén ezért az ikon felső
       és alsó széle levágódott. A kártya külső maszkolása továbbra is megmarad. */
    overflow: visible;
}
/* A battle.css-ből örökölt .hero-abilities-overlay flex-column doboza
   "kicsomagolva" (display:contents), hogy az ikonok közvetlenül a
   .v3-abilities-row vízszintes flex-sorába kerüljenek – enélkül a doboz
   megtartja az eredeti oszlop-irányú (column) elrendezést, és az ikonok
   egymás alá tornyosulva lógnak ki a kártyából/sorból. */
.v3-abilities-row .hero-abilities-overlay {
    display: contents;
}
.v3-abilities-row .ability-icon-wrapper {
    position: relative;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
}
.v3-abilities-row .ability-icon {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.3);
    display: block;
}
/* Rang szerinti körvonal-szín az első három (nem ultimate) képességen –
   1:1 a battlev2 arena-kártyájának logikájával (.arena-card[data-rank]
   .ability-icon-wrapper:not(.ultimate) .ability-icon), csak itt a már
   meglévő --frame-color/--frame-glow CSS-változókat használjuk fel (lásd
   .v3-card[data-rank] .hero-banner-wrapper fent), nem kell rangonként
   külön szabály, mert ez a változó úgyis öröklődik a bannerWrapper-től. */
.v3-abilities-row .ability-icon-wrapper:not(.ultimate) .ability-icon {
    border-width: 2px;
    border-color: var(--frame-color);
    box-shadow: 0 0 6px rgba(0,0,0,0.6), 0 0 8px var(--frame-color);
}
/* Ultimate: szivárványos, forgó körvonal – 1:1 átemelve a battlev2.css-ből
   (.arena-card .ability-icon-wrapper.ultimate:not(.locked) .ability-icon). */
@property --ulti-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.v3-abilities-row .ability-icon-wrapper.ultimate:not(.locked) .ability-icon {
    border: 3px solid transparent;
    background:
        linear-gradient(#0b0f16, #0b0f16) padding-box,
        conic-gradient(from var(--ulti-angle), #ff3b6e, #ffb347, #fff58a, #6dffb3, #5ec8ff, #b18aff, #ff3b6e) border-box;
    animation: v3UltiRainbowSpin 5s linear infinite;
    transition: box-shadow .2s ease;
}
@keyframes v3UltiRainbowSpin {
    to { --ulti-angle: 360deg; }
}
.v3-abilities-row .ability-icon-wrapper.ultimate:not(.locked):hover .ability-icon {
    box-shadow: 0 0 14px 3px rgba(255,255,255,0.45);
    animation-duration: 1.4s;
}
.v3-abilities-row .ability-icon-wrapper.locked .ability-icon { filter: grayscale(1) brightness(.5); }
.v3-abilities-row .ability-lock-overlay {
    border-radius: 5px;
    font-size: .58rem;
    overflow: hidden;
}
.v3-abilities-row .ability-lock-level {
    font-size: .46rem;
    letter-spacing: 0;
}

.v3-ability-cost-badge {
    position: absolute;
    top: 2px; right: 2px;
    opacity: .68;
    min-width: 16px;
    text-align: center;
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0 2px;
    border-radius: 4px;
    background: rgba(0,20,40,0.9);
    border: 1px solid rgba(76,212,255,0.6);
    color: #a8e4ff;
    pointer-events: none;
}

/* A hover-tooltip marad (leírás/mana/aktiválás), csak kisebb kártyához igazítva */
.v3-abilities-row .ability-tooltip {
    width: 180px;
    font-size: .72rem;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    top: auto;
}
.v3-abilities-row .ability-icon-wrapper:hover .ability-tooltip { display: block; }
.v3-abilities-row .ability-tooltip { display: none; }

.v3-card .hero-passive-chargebar { margin-top: 2px; }

/* --- HP / Mana csík (XP sáv itt nem jelenik meg, a mockup nem tartalmazza).
   Fix magasságú (flex-shrink:0) – lásd .v3-bottom-zone komment fent. A
   "HP"/"MANA" felirat (.bar-label) el van rejtve, ezért a grid-template-
   columns-ból is kikerül az őt tartó oszlop (különben üres rés maradna a
   sáv elején). A számszerű érték (.bar-text, pl. "3900/3900") MARAD, csak
   a szöveges címke tűnik el. --- */
.v3-bars {
    flex: 0 0 auto;
}
.v3-bars .hero-stats-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 0;
}
.v3-bars .bar-label { display: none; }
/* A sor végi regen-jelvény (pl. "+186") is elrejtve, kérésre – a HP/MANA
   sáv így egyetlen, teljes szélességű csík, semmilyen szöveg a sor elején
   vagy végén. */
.v3-bars .regen-text { display: none; }
.v3-bars .hp-bar-wrapper,
.v3-bars .mana-bar-wrapper {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    font-size: .8rem;
}
.v3-bars .bar { height: 20px; }
.v3-bars .bar-text { font-size: .76rem; }
.v3-bars .hero-stats-grid { display: none; } /* a grid ténylegesen a kártya hátoldalán (.v3-face-back) él, itt csak biztonsági fallback */

/* --- XP csík: a HP/MANA sáv alatt, kérésre CSAK a csík maga (nem a
   bal oldali XP-ikon, nem a jobb oldali rang-kristály dísz) – hoverre a
   böngésző natív title-tooltipje mutatja a szint+XP infót (lásd
   updateXpBar() a battleUI.js-ben, kiegészítve a battlev3UI.js-ben a
   "Szint N" előtaggal, csak V3-on). --- */
.v3-bars .xp-bar-wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 3px;
    margin-bottom: 3px;
}
.v3-bars .xp-bar-wrapper .xp-bar-label,
.v3-bars .xp-bar-wrapper .hero-rank-crystal { display: none; }
.v3-bars .xp-bar { height: 10px; border-radius: 3px; }

/* --- Chargebar-sor: a gyűjtögetős passzívák töltet-sávja, kérésre az
   ability-ikonok ÉS a buff/debuff sor KÖZÖTT (nem az ability-sorba
   ágyazva, ahonnan a .hero-abilities-overlay display:contents miatt
   automatikusan bekerülne) – lásd a JS-oldali kiemelést
   (battlev3UI.js, .v3-chargebar-row). Üres, ha a hősnek nincs
   chargebar-os passzívája (a JS ekkor nem tesz bele semmit). --- */
.v3-chargebar-row {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    min-height: 0;
    margin-top: 6px;
}
.v3-chargebar-row .hero-passive-chargebar { margin-top: 0; }

/* A chargebar kerete a csapat színét követi: az alsó (0.) csapat kék,
   a felső (1.) csapat lila, az új image/ui assetpárral. */
.v3-card[data-team-index="0"] .hero-passive-chargebar .chargebar-bg {
    background-image: url("../image/ui/progressionbar_bg_blue.png");
    filter: drop-shadow(0 0 6px rgba(61, 188, 255, .8));
}
.v3-card[data-team-index="1"] .hero-passive-chargebar .chargebar-bg {
    background-image: url("../image/ui/progressionbar_bg_lila.png");
    filter: drop-shadow(0 0 6px rgba(190, 76, 255, .8));
}

/* A .spell-slot-icon/.spell-slot-frame sehol máshol nincs globálisan
   méretezve (csak a battlev2 .arena-card alatt), ezért itt kap saját
   méretet – enélkül az img a natív (nagy) méretén jelenik meg. */
.v3-left-mid-col .spell-slot-icon {
    position: absolute;
    inset: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    object-fit: cover;
    border-radius: 6px;
    opacity: .92;
}
.v3-left-mid-col .spell-slot-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.v3-left-mid-col .spell-slot-cooldown-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-weight: 700;
    font-size: .5rem;
    border-radius: 6px;
}
.v3-left-mid-col .spell-slot.on-cooldown .spell-slot-icon,
.v3-left-mid-col .spell-slot.locked .spell-slot-icon {
    filter: grayscale(0.9) brightness(0.45);
}

/* Buff/debuff zóna: legfeljebb három sor. A rács balról jobbra tölti fel
   az első sort, majd ugyanígy a másodikat és a harmadikat. Az auto-fill
   a kártya aktuális szélességéből számolja ki a soronként elférő ikonokat;
   ha szűkül a hely, a minmax(0, 20px) sávok az ikonokkal együtt zsugorodnak. */
.v3-card .hero-buffs-row {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(0, 20px));
    grid-template-rows: repeat(3, minmax(0, 20px));
    grid-auto-flow: row;
    align-content: center;
    justify-content: center;
    gap: 2px;
    min-height: 0;
    margin-top: 0;
    /* A buff/debuff ikonok drop-shadow aurája túlnyúlik a 20px-es gridcellán.
       Hidden overflow mellett főleg a felső fénye vágódott le. */
    overflow: visible;
}
.v3-card .hero-buffs-row .buff-icon {
    min-width: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    cursor: pointer;
}

/* Buff/debuff ikon zoom-popup (lásd wireBuffIconPopups(), battlev3UI.js):
   kattintásra nagyított ikon + leírás + hátralévő kör + forrás. Ugyanazt a
   sötét HUD-paletta konvenciót követi, mint a .v3-turn-order-strip. */
.v3-buff-popup {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 5, 12, .68);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease;
}
.v3-buff-popup.v3-buff-popup-visible {
    opacity: 1;
    pointer-events: auto;
}
.v3-buff-popup-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: min(420px, calc(100vw - 40px));
    padding: 18px 22px;
    border-radius: 12px;
    border: 1px solid rgba(151, 219, 255, .35);
    background: rgba(4, 9, 21, .92);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .6), 0 0 22px rgba(97, 200, 255, .25);
    transform: scale(.92);
    transition: transform .14s ease;
}
.v3-buff-popup-visible .v3-buff-popup-card { transform: scale(1); }
.v3-buff-popup--debuff .v3-buff-popup-card {
    border-color: rgba(255, 110, 90, .4);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .6), 0 0 22px rgba(255, 90, 70, .3);
}
.v3-buff-popup-icon {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(151, 219, 255, .6));
}
.v3-buff-popup--debuff .v3-buff-popup-icon {
    filter: drop-shadow(0 0 10px rgba(255, 110, 90, .65));
}
.v3-buff-popup-body { min-width: 0; }
.v3-buff-popup-name {
    font: 700 1rem "Montserrat", sans-serif;
    color: #fff;
    margin-bottom: 4px;
}
.v3-buff-popup-duration {
    font-size: .78rem;
    color: #97dbff;
    margin-bottom: 6px;
}
.v3-buff-popup--debuff .v3-buff-popup-duration { color: #ff9a8c; }
.v3-buff-popup-desc {
    font-size: .82rem;
    line-height: 1.35;
    color: #d7e4f2;
    margin-bottom: 6px;
}
.v3-buff-popup-source {
    font-size: .74rem;
    color: #b8c6d6;
    font-style: italic;
}
.v3-buff-popup-close {
    position: absolute;
    top: 6px;
    right: 8px;
    background: none;
    border: none;
    color: #97dbff;
    font-size: 1rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.v3-buff-popup-close:hover { color: #fff; }

/* A lebegő tooltip-példányok közvetlenül a body alá kerülnek, ezért nem
   részei a .v3-page laptopon lekicsinyített design-canvasának. Kisebb
   viewporton külön kompakt méretet kapnak, hogy ne takarják el a kártyát. */
@media (max-width: 1919px), (max-height: 1079px) {
    body.v3-body > .ability-tooltip-floating {
        width: min(170px, calc(100vw - 20px));
        max-height: min(52vh, 330px);
        overflow-y: auto;
        padding: 7px 8px;
        font-size: .68rem;
        line-height: 1.28;
        box-shadow: 0 0 7px rgba(0, 217, 255, .8);
    }

    body.v3-body > .item-tooltip-floating {
        width: min(160px, calc(100vw - 20px));
        max-height: min(52vh, 330px);
        overflow-y: auto;
        padding: 6px 8px;
        font-size: .7rem;
        line-height: 1.25;
        box-shadow: 0 0 7px rgba(0, 170, 255, .75);
    }

    body.v3-body > .item-tooltip-floating .item-tooltip-desc,
    body.v3-body > .item-tooltip-floating .item-tooltip-stat {
        font-size: .66rem;
    }

    body.v3-body .tooltip-box {
        width: min(230px, calc(100vw - 20px));
        max-height: 52vh;
        overflow-y: auto;
        padding: 7px 8px;
        font-size: 10px;
        border-width: 1px;
    }
}

/* A dice-row mostantól nem a kártyán belül, hanem alatta jelenik meg –
   lásd .v3-card-slot lejjebb – ezért itt nincs több elrejtő szabály. */

/* ===== KEZDEMÉNYEZÉSI SORREND SÁV – V3 (függőleges, bal alsó sarok) =====
   A markup 1:1 ugyanaz, mint amit a battlev2UI.js renderTurnOrder()-je
   generál (lásd js/ui/battlev3UI.js renderV3TurnOrder – ugyanaz a
   turn-chip/turn-chip-diamond/turn-index struktúra). Mivel battlev3.html
   nem tölti be a battlev2.css-t, az alap (vízszintes) szabályokat is
   idemásoltuk a battlev2.css-ből, alattuk pedig a v3-specifikus
   felülírás forgatja vízszintesből függőlegesbe, és cseréli a "current"
   jelölést pirosról sárga, animált keretre. Logika (valódi körsorrend)
   még nincs mögötte, csak a hely és a vizuál van előkészítve. */
.turn-order-strip {
    position: absolute; z-index: 8;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(6,6,16,0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 6px 18px 6px 6px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.5);
}
.turn-order-strip:empty { display: none; }

.turn-chip {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.turn-chip:not(:first-child) { margin-left: -12px; }

.turn-chip-diamond {
    position: absolute;
    inset: 0;
    transform: rotate(45deg);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(5,5,15,0.85);
    border: 2px solid rgba(255,255,255,0.25);
    box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.turn-chip img {
    position: absolute;
    top: 50%; left: 50%;
    width: 150%; height: 150%;
    object-fit: cover;
    transform: translate(-50%,-50%) rotate(-45deg);
}
.turn-chip.team-0 .turn-chip-diamond { border-color: #4cb3ff; box-shadow: 0 0 12px rgba(76,179,255,.7); }
.turn-chip.team-1 .turn-chip-diamond { border-color: #c68cff; box-shadow: 0 0 12px rgba(198,140,255,.7); }
.turn-chip.current .turn-chip-diamond { border-color: #ff5a5a; box-shadow: 0 0 16px rgba(255,80,80,.85); }

.turn-index {
    position: absolute;
    left: -2px; bottom: -2px;
    font-size: .58rem;
    font-weight: 700;
    background: rgba(0,0,0,.7);
    color: #fff;
    padding: 1px 4px;
    border-radius: 4px;
    z-index: 3;
    letter-spacing: .5px;
}

.v3-turn-order-strip {
    position: fixed;
    z-index: 15;
    left: 20px;
    bottom: 20px;
    top: auto;
    transform: none;
    flex-direction: column;
    padding: 18px 6px 6px;
}
.v3-turn-order-strip .turn-chip:not(:first-child) {
    margin-left: 0;
    margin-top: -12px;
}
.v3-turn-order-strip .turn-chip.current .turn-chip-diamond {
    border-color: #ffe066;
    box-shadow: 0 0 16px rgba(255,224,102,.9);
    animation: v3-turn-current-pulse 1.1s ease-in-out infinite;
}
@keyframes v3-turn-current-pulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255,224,102,.6); }
    50%      { box-shadow: 0 0 22px rgba(255,224,102,1); }
}

/* ===== KÁRTYA-SLOT (kártya + alatta a dice-sor) ===== */
.v3-card-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
}
.v3-card-slot .hero-dice-row {
    display: flex;
    justify-content: center;
    gap: 5px;
    margin: 0;
}
.v3-card-slot .dice {
    width: 24px;
    height: 24px;
    font-size: .72rem;
    border-radius: 5px;
}

/* A normál nézetben a dobások a kártya alatt maradnak. Laptop módban a két
   teljes kártyasor magasságából nem vesznek el helyet: függőlegesen, a kártya
   jobb szélén jelennek meg. */
body.v3-laptop-mode .v3-row {
    align-items: center;
    flex-wrap: nowrap;
    gap: 70px;
    padding-block: 10px;
    overflow: hidden;
}
body.v3-laptop-mode .v3-card-slot {
    position: relative;
    gap: 0;
}
body.v3-laptop-mode .v3-card-slot .hero-dice-row {
    position: absolute;
    z-index: 18;
    top: 50%;
    right: -31px;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 4px;
    padding: 5px 4px;
    border: 1px solid rgba(151, 219, 255, .24);
    border-radius: 8px;
    background: rgba(4, 9, 21, .72);
    box-shadow: 0 4px 13px rgba(0, 0, 0, .48);
    backdrop-filter: blur(3px);
}
body.v3-laptop-mode .v3-card-slot .dice {
    width: 22px;
    height: 22px;
    font-size: .68rem;
}
body.v3-laptop-mode .v3-card .hero-banner,
body.v3-laptop-mode .v3-card .v3-rank-frame,
body.v3-laptop-mode .v3-card .v3-rank-sword img {
    image-rendering: auto;
}

/* A laptop profil kizárólag a dekoratív HUD-futófényt állítja le. A harci
   VFX külön kapcsolót kapott a panelen. */
body.v3-laptop-mode .v3-card .hud-frame .hud-frame-chase,
body.v3-laptop-mode .v3-card .hud-frame .hud-frame-nodes circle {
    animation: none !important;
}

/* ===== V3 INTERAKTÍV HARCI ÁLLAPOT ===== */
.v3-card { transition: opacity .18s ease, filter .18s ease; }
.v3-card.v3-current-actor .v3-rank-frame {
    filter: drop-shadow(0 0 8px #ffe066) drop-shadow(0 0 18px rgba(255, 224, 102, .75));
}
.v3-card.v3-valid-target { cursor: crosshair; transform: translateY(-3px); }
.v3-card.v3-target-ally .v3-rank-frame {
    filter: drop-shadow(0 0 8px #60f6b3) drop-shadow(0 0 24px rgba(58, 255, 174, .95));
    animation: v3-target-pulse-ally .9s ease-in-out infinite alternate;
}
.v3-card.v3-target-enemy .v3-rank-frame {
    filter: drop-shadow(0 0 8px #ff554c) drop-shadow(0 0 24px rgba(255, 39, 39, .95));
    animation: v3-target-pulse-enemy .78s ease-in-out infinite alternate;
}
.v3-card.v3-invalid-target { opacity: .32; filter: grayscale(.75); }
.v3-card.v3-defeated { opacity: .3; filter: grayscale(1); }
@keyframes v3-target-pulse-ally { to { filter: drop-shadow(0 0 14px #8affc8) drop-shadow(0 0 30px rgba(58, 255, 174, 1)); } }
@keyframes v3-target-pulse-enemy { to { filter: drop-shadow(0 0 14px #ff7972) drop-shadow(0 0 32px rgba(255, 32, 32, 1)); } }

/* ===== TELJES KÁRTYÁS STUN / HARD-CC ÁLLAPOT =====
   A kezelőszervek eltűnnek, de a hősportré és a rangdísz áttetszően látható
   marad. Az overlay pointer-events:none, ezért a stunolt kártya továbbra is
   szabályosan célozható. */
.v3-card.v3-stunned .hero-banner-wrapper > :not(.hero-banner) {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.v3-card.v3-stunned .hero-banner {
    visibility: visible;
    opacity: .78;
    filter: brightness(.48) saturate(.62) contrast(1.08);
}
.v3-card.v3-stunned .v3-face-back {
    visibility: hidden;
    opacity: 0;
}
.v3-card.v3-stunned .v3-rank-frame {
    visibility: visible;
    opacity: .48;
    filter: drop-shadow(0 0 8px var(--v3-stun-color, #ffd34e));
}
.v3-card.v3-stunned .v3-rank-sword {
    visibility: visible;
    opacity: .32;
    filter: saturate(.7) drop-shadow(0 0 7px var(--v3-stun-color, #ffd34e));
}

.v3-stun-overlay {
    position: absolute;
    inset: -8px -5px;
    z-index: 1000;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 3px solid var(--v3-stun-color, #ffd34e);
    border-radius: 18px;
    color: #fff;
    background: rgba(3, 5, 13, .42);
    background:
        radial-gradient(circle at 50% 43%, color-mix(in srgb, var(--v3-stun-color, #ffd34e) 25%, transparent) 0 17%, transparent 47%),
        linear-gradient(150deg, rgba(3, 5, 13, .48) 0%, color-mix(in srgb, var(--v3-stun-color, #ffd34e) 16%, rgba(5, 8, 18, .54)) 52%, rgba(2, 3, 10, .5) 100%);
    box-shadow:
        inset 0 0 30px color-mix(in srgb, var(--v3-stun-color, #ffd34e) 36%, transparent),
        0 0 14px var(--v3-stun-color, #ffd34e),
        0 0 34px color-mix(in srgb, var(--v3-stun-color, #ffd34e) 72%, transparent);
    pointer-events: none;
    isolation: isolate;
    animation: v3-stun-overlay-pulse 1.15s ease-in-out infinite alternate;
}
.v3-stun-overlay[hidden] { display: none !important; }
.v3-stun-overlay::before,
.v3-stun-overlay::after {
    content: "";
    position: absolute;
    width: 190%;
    aspect-ratio: 1;
    border: 3px dashed var(--v3-stun-color, #ffd34e);
    border-radius: 50%;
    opacity: .2;
    filter: drop-shadow(0 0 9px var(--v3-stun-color, #ffd34e));
    animation: v3-stun-ring-spin 4.8s linear infinite;
}
.v3-stun-overlay::after {
    width: 128%;
    border-style: dotted;
    opacity: .3;
    animation-duration: 3.2s;
    animation-direction: reverse;
}
.v3-stun-aura {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 8px;
    width: 88%;
    padding: 28px 12px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 2px 4px #000, 0 0 14px var(--v3-stun-color, #ffd34e);
}
.v3-stun-icon {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border: 4px solid color-mix(in srgb, var(--v3-stun-color, #ffd34e) 82%, #fff);
    border-radius: 24px;
    background: rgba(0, 0, 0, .48);
    box-shadow:
        0 0 12px #fff,
        0 0 30px var(--v3-stun-color, #ffd34e),
        inset 0 0 20px color-mix(in srgb, var(--v3-stun-color, #ffd34e) 42%, transparent);
    animation: v3-stun-icon-float .9s ease-in-out infinite alternate;
}
.v3-stun-name {
    max-width: 100%;
    color: color-mix(in srgb, var(--v3-stun-color, #ffd34e) 42%, #fff);
    font: 800 .76rem/1.2 "Montserrat", sans-serif;
    letter-spacing: 1.8px;
}
.v3-stun-state {
    color: #fff;
    font: 1000 1.65rem/1 "Montserrat", sans-serif;
    letter-spacing: 4px;
}
.v3-stun-duration {
    padding: 8px 13px;
    border: 1px solid var(--v3-stun-color, #ffd34e);
    border-radius: 999px;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font: 900 .72rem/1 "Montserrat", sans-serif;
    letter-spacing: 1.2px;
    box-shadow: 0 0 13px color-mix(in srgb, var(--v3-stun-color, #ffd34e) 56%, transparent);
}
@keyframes v3-stun-overlay-pulse {
    to { filter: brightness(1.18) saturate(1.2); }
}
@keyframes v3-stun-ring-spin {
    to { transform: rotate(360deg); }
}
@keyframes v3-stun-icon-float {
    to { transform: translateY(-7px) scale(1.05); }
}

.v3-combat-feedback {
    position: absolute;
    z-index: 40;
    left: 50%;
    top: 42%;
    display: grid;
    justify-items: center;
    color: #ffac89;
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    text-shadow: 0 2px 4px #000, 0 0 14px rgba(255, 61, 38, .9);
    pointer-events: none;
    animation: v3-damage-float 1.1s ease-out forwards;
}
.v3-combat-feedback strong { color: #ffe56b; font-size: 1rem; letter-spacing: 1px; }
.v3-combat-feedback span { font-size: 2rem; line-height: 1; }
.v3-combat-feedback small { color: #9df8ff; font-size: .66rem; letter-spacing: .8px; }
.v3-combat-feedback-crit span { color: #fff08b; font-size: 2.35rem; }
.v3-combat-feedback-power { text-shadow: 0 2px 4px #000, 0 0 18px rgba(66, 224, 255, .95); }
@keyframes v3-damage-float {
    0% { opacity: 0; transform: translate(-50%, 12px) scale(.7); }
    18% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
    100% { opacity: 0; transform: translate(-50%, -62px) scale(1); }
}

/* Generic Ranked action animation layer: a resolver csak szemantikus eventet
   küld; a UI ugyanebből rajzol cast/hit/projectile/heal/item feedbacket. */
.v3-card.v3-fx-cast .v3-rank-frame { animation: v3-fx-cast-pulse .7s ease-out; }
.v3-card.v3-fx-hit .v3-face-front { animation: v3-fx-hit-shake .42s ease-out; }
.v3-card.v3-fx-heal .v3-rank-frame { animation: v3-fx-heal-pulse .72s ease-out; }
.v3-card.v3-fx-item .v3-rank-frame { animation: v3-fx-item-pulse .72s ease-out; }
@keyframes v3-fx-cast-pulse { 45% { filter: drop-shadow(0 0 18px #b76cff) drop-shadow(0 0 34px #5fc8ff); } }
@keyframes v3-fx-hit-shake { 25% { transform: translateX(-5px); filter: brightness(1.5) sepia(.35); } 55% { transform: translateX(4px); } }
@keyframes v3-fx-heal-pulse { 50% { filter: drop-shadow(0 0 18px #69ffb1) drop-shadow(0 0 38px rgba(65,255,153,.95)); } }
@keyframes v3-fx-item-pulse { 50% { filter: drop-shadow(0 0 18px #ffe270) drop-shadow(0 0 38px rgba(255,165,42,.95)); } }

.v3-generic-projectile {
    position: fixed;
    z-index: 80;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    pointer-events: none;
    animation: v3-projectile-flight .58s cubic-bezier(.2,.75,.25,1) forwards;
}

.v3-ability-vfx-host {
    position: fixed;
    inset: 0;
    z-index: 78;
    overflow: visible;
    pointer-events: none;
    contain: layout style;
}
.v3-ability-vfx-host .generic-vfx-root.intensity-ultimate {
    filter: saturate(1.3) contrast(1.08) brightness(1.06);
}
.v3-ability-vfx-host .generic-vfx-root .generic-vfx-delivery-layer,
.v3-ability-vfx-host .generic-vfx-root .generic-vfx-impact-layer,
.v3-ability-vfx-host .generic-vfx-root .generic-vfx-status-layer,
.v3-ability-vfx-host .generic-vfx-root .generic-vfx-ultimate-layer {
    mix-blend-mode: screen;
}
.v3-ability-vfx-host .generic-vfx-root.signature-ability-232 .generic-vfx-delivery-layer {
    mix-blend-mode: normal;
}
.v3-generic-projectile-magic { background: #b967ff; box-shadow: 0 0 8px #fff, 0 0 24px #6aa8ff; }
.v3-generic-projectile-heal { background: #72ffac; box-shadow: 0 0 8px #fff, 0 0 24px #38e98a; }
.v3-generic-projectile-attack { background: #ffcf66; box-shadow: 0 0 8px #fff, 0 0 24px #ff5f43; }
@keyframes v3-projectile-flight { to { transform: translate(var(--v3-projectile-x), var(--v3-projectile-y)) scale(.35); opacity: .15; } }

.v3-action-delta {
    position: absolute;
    z-index: 45;
    left: 50%;
    top: 45%;
    font: 900 .82rem "Montserrat", sans-serif;
    text-shadow: 0 2px 3px #000, 0 0 10px currentColor;
    pointer-events: none;
    animation: v3-action-delta-float 1.05s ease-out forwards;
}
.v3-action-delta-hp.is-negative { color: #ff806c; }
.v3-action-delta-hp.is-positive { color: #73ffab; }
.v3-action-delta-mana { color: #62d5ff; }
@keyframes v3-action-delta-float {
    0% { opacity: 0; transform: translate(-50%, 8px) scale(.75); }
    18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
    100% { opacity: 0; transform: translate(-50%, -48px) scale(1); }
}

.v3-abilities-row .ability-icon-wrapper.v3-usable::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: -3px;
    width: 9px;
    height: 9px;
    border: 1px solid #fff2a4;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fffbd0, #ffc928 48%, #8b4b00 100%);
    box-shadow: 0 0 7px #ffd43c, 0 0 14px rgba(255,197,38,.9);
    animation: v3-ready-orb 1s ease-in-out infinite alternate;
}
@keyframes v3-ready-orb { to { transform: scale(1.32); filter: brightness(1.3); } }

.v3-card.v3-current-actor .spell-slot.v3-ranked-ready,
.v3-card.v3-current-actor .item-slot.v3-ranked-ready,
.v3-card.v3-current-actor .hero-consumable-slot.v3-ranked-ready {
    cursor: pointer;
    filter: drop-shadow(0 0 8px #ffe16a);
    animation: v3-ready-control 1s ease-in-out infinite alternate;
}
@keyframes v3-ready-control { to { transform: scale(1.08); filter: drop-shadow(0 0 13px #fff19a); } }

.v3-abilities-row .ability-icon-wrapper { transition: opacity .16s ease, transform .16s ease, filter .16s ease; }
.v3-current-actor .v3-abilities-row .ability-icon-wrapper:not(.v3-usable):not(.v3-selected) { opacity: .38; filter: grayscale(.65); }
.v3-card .v3-ranked-disabled {
    cursor: not-allowed;
    opacity: .38;
    filter: grayscale(.72) brightness(.7);
}
.v3-card .v3-ranked-disabled .spell-slot-cooldown-overlay { opacity: 1; }
.v3-abilities-row .ability-icon-wrapper.v3-usable {
    cursor: pointer;
    transform: translateY(-3px) scale(1.06);
    filter: drop-shadow(0 0 8px rgba(255, 226, 93, .95));
}
.v3-abilities-row .ability-icon-wrapper.v3-selected {
    transform: translateY(-5px) scale(1.1);
    filter: drop-shadow(0 0 10px rgba(96, 246, 179, 1));
}

/* Az AI által éppen aktivált képesség jól követhető villanása. */
.v3-abilities-row .ability-icon-wrapper.v3-ai-ability-cue {
    z-index: 12;
    animation: v3AiAbilityCue 1.15s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes v3AiAbilityCue {
    0%   { transform: scale(1); filter: brightness(1); }
    18%  { transform: translateY(-7px) scale(1.18); filter: brightness(1.65) drop-shadow(0 0 12px #8ff7ff); }
    55%  { transform: translateY(-4px) scale(1.1); filter: brightness(1.35) drop-shadow(0 0 16px #ffe77a); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* Többcélpontos, véletlen kiválasztás: a tényleges célpontok maradnak
   fényesek, a kimaradt élő hősök rövid időre háttérbe húzódnak. */
.v3-card .v3-face-front {
    transition: filter .16s ease, opacity .16s ease;
}
.v3-card.v3-fx-not-targeted .v3-face-front {
    filter: grayscale(.95) brightness(.42);
    opacity: .5;
}
.v3-card.v3-fx-chosen-target .v3-face-front {
    filter: brightness(1.14) saturate(1.2) drop-shadow(0 0 9px rgba(113, 239, 255, .9));
}

.v3-skip-btn:disabled,
.v3-basic-attack-btn:disabled,
.v3-roll-btn:disabled,
.v3-shop-btn:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.7); }

.v3-live-log {
    position: fixed;
    z-index: 16;
    right: 12px;
    bottom: 18px;
    width: var(--v3-live-log-width, 180px);
    max-height: 260px;
    overflow: hidden;
    border: 1px solid rgba(132, 189, 255, .28);
    border-radius: 10px;
    background: rgba(5, 9, 20, .84);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .42);
    backdrop-filter: blur(9px);
}
.v3-live-log.v3-live-log-compact .v3-live-log-title {
    padding-inline: 7px;
    font-size: .54rem;
    letter-spacing: .9px;
}
.v3-live-log.v3-live-log-compact .v3-live-log-list { padding-inline: 6px; }
.v3-live-log.v3-live-log-compact .v3-log-entry { font-size: .58rem; overflow-wrap: anywhere; }
.v3-live-log-title {
    padding: 8px 11px;
    color: #7dd3ff;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 1.7px;
}
.v3-live-log-list { max-height: 222px; overflow-y: auto; padding: 6px 9px 9px; }
.v3-log-entry { padding: 5px 2px; border-bottom: 1px solid rgba(255, 255, 255, .07); color: #dce7f5; font-size: .66rem; line-height: 1.35; }
.v3-log-entry:last-child { border-bottom: 0; }
.v3-log-ability { color: #dfc7ff; }
.v3-log-attack { color: #ffb9a5; }
.v3-log-round { color: #8edcff; }
.v3-log-winner { color: #ffe066; font-weight: 800; }
.v3-log-muted { color: #8693a6; }
.v3-turn-order-strip .turn-chip.completed { opacity: .42; filter: grayscale(.7); }

body.v3-live-log-hidden .v3-live-log { display: none !important; }
body.v3-battle-popup-disabled #battle-popup { display: none !important; }

body[data-v3-button-size="small"] {
    --v3-button-padding-y: 7px;
    --v3-button-padding-x: 17px;
    --v3-button-font-size: .7rem;
}
body[data-v3-button-size="large"] {
    --v3-button-padding-y: 13px;
    --v3-button-padding-x: 31px;
    --v3-button-font-size: 1rem;
}

/* ===== BATTLE V3 BEÁLLÍTÁSOK ===== */
.v3-settings-toggle {
    position: fixed;
    z-index: 1200;
    top: max(12px, env(safe-area-inset-top));
    right: max(14px, env(safe-area-inset-right));
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(166, 215, 255, .18);
    border-radius: 10px;
    color: rgba(231, 246, 255, .62);
    background: rgba(4, 10, 25, .22);
    box-shadow: 0 5px 18px rgba(0, 0, 0, .16);
    backdrop-filter: blur(5px);
    opacity: .42;
    cursor: pointer;
    transition: opacity .18s ease, background .18s ease, border-color .18s ease;
}
.v3-settings-toggle span { font-size: 19px; line-height: 1; }
.v3-settings-toggle:hover,
.v3-settings-toggle:focus-visible,
.v3-settings-toggle[aria-expanded="true"] {
    opacity: .96;
    color: #effaff;
    border-color: rgba(119, 218, 255, .58);
    background: rgba(5, 14, 34, .78);
    outline: none;
}

.v3-settings-panel {
    position: fixed;
    z-index: 1201;
    top: max(58px, calc(env(safe-area-inset-top) + 48px));
    right: max(14px, env(safe-area-inset-right));
    width: min(340px, calc(100vw - 28px));
    max-height: calc(100vh - 74px);
    padding: 17px;
    overflow-y: auto;
    border: 1px solid rgba(110, 202, 255, .3);
    border-radius: 14px;
    color: #eaf6ff;
    background: linear-gradient(155deg, rgba(8, 17, 38, .96), rgba(3, 7, 20, .94));
    box-shadow: 0 18px 55px rgba(0, 0, 0, .58), 0 0 26px rgba(57, 174, 255, .08);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.98);
    transform-origin: top right;
    transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.v3-settings-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
}
.v3-settings-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 0 1px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.v3-settings-eyebrow {
    color: #78d9ff;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 2px;
}
.v3-settings-header h2 { margin: 3px 0 0; font-size: 1.08rem; letter-spacing: .2px; }
.v3-settings-close {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: #cfeaff;
    background: rgba(255,255,255,.04);
    font: 400 22px/1 "Outfit", sans-serif;
    cursor: pointer;
}

.v3-setting-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    min-height: 58px;
    padding: 10px 1px;
    border-bottom: 1px solid rgba(255,255,255,.065);
    cursor: pointer;
}
.v3-setting-row > span { min-width: 0; }
.v3-setting-row strong { display: block; font-size: .82rem; font-weight: 700; }
.v3-setting-row small { display: block; margin-top: 2px; color: #8ea4b9; font-size: .64rem; line-height: 1.25; }
.v3-setting-row input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.v3-setting-row i {
    position: relative;
    flex: 0 0 auto;
    width: 38px;
    height: 21px;
    border: 1px solid rgba(173, 204, 224, .26);
    border-radius: 999px;
    background: rgba(125, 145, 164, .18);
    transition: background .16s ease, border-color .16s ease;
}
.v3-setting-row i::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #a7b4c0;
    box-shadow: 0 2px 5px rgba(0,0,0,.42);
    transition: transform .16s ease, background .16s ease;
}
.v3-setting-row input:checked + i {
    border-color: rgba(69, 221, 255, .68);
    background: rgba(30, 173, 209, .36);
}
.v3-setting-row input:checked + i::after { transform: translateX(17px); background: #bff7ff; }
.v3-setting-row input:focus-visible + i { outline: 2px solid #7bdcff; outline-offset: 2px; }

.v3-setting-group { padding: 12px 1px; border-bottom: 1px solid rgba(255,255,255,.065); }
.v3-setting-group-label { display: block; margin-bottom: 8px; font-size: .76rem; font-weight: 700; }
.v3-size-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.v3-size-options button {
    padding: 7px 5px;
    border: 1px solid rgba(151, 194, 222, .18);
    border-radius: 7px;
    color: #9eb3c5;
    background: rgba(255,255,255,.035);
    font: 600 .68rem "Outfit", sans-serif;
    cursor: pointer;
}
.v3-size-options button.is-active {
    color: #eaffff;
    border-color: rgba(77, 218, 255, .68);
    background: rgba(34, 157, 199, .25);
    box-shadow: inset 0 0 12px rgba(66, 205, 255, .1);
}

.v3-history-section {
    margin: 0 0 18px;
    padding: 0 0 12px;
    border-bottom: 1px solid rgba(114, 203, 255, .22);
}
.v3-history-row {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 5px 7px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #dce8f7;
    font-size: .78rem;
}
.v3-history-row img { width: 28px; height: 28px; border-radius: 5px; object-fit: cover; }
.v3-history-ability { color: #e2caff; }
.v3-history-spell { color: #79d9ff; }
.v3-history-item, .v3-history-shop { color: #ffe093; }
.v3-history-basic-attack { color: #ffad96; }
.v3-history-skip { color: #8995a5; }

@media (prefers-reduced-motion: reduce) {
    .v3-card.v3-fx-cast .v3-rank-frame,
    .v3-card.v3-fx-hit .v3-face-front,
    .v3-card.v3-fx-heal .v3-rank-frame,
    .v3-card.v3-fx-item .v3-rank-frame,
    .v3-generic-projectile,
    .v3-action-delta,
    .v3-abilities-row .ability-icon-wrapper.v3-usable::after,
    .v3-card.v3-current-actor .v3-ranked-ready {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}