/* Scrollbar elrejtése (görgetés végig működik, csak a sáv nem látszik) */
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Háttérkép */
body {
    background: url('../main.png') no-repeat center center fixed;
    background-size: cover;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    color: white;
    margin: 0;
    padding: 20px;
}

/* Logo */
#logo-container {
    text-align: center;
    margin-bottom: 20px;
}

#main-logo {
    width: 300px;
    filter: drop-shadow(0 0 10px #00aaff);
}

/* Konzol */
#console {
    background: #01060c;
    border: 3px solid #00aaff;
    box-shadow: 0 0 20px #00aaff;
    padding: 20px;
    width: 1200px;
    margin: 0 auto;
    border-radius: 12px;
}

/* Felső kijelző */
#display {
    display: flex;
    justify-content: space-between;
    gap: 20px; /* távolság a két doboz között */
}

.panel {
    background: #02101a;
    border: 2px solid #00aaff;
    box-shadow: 0 0 15px #00aaff;
    padding: 20px;
    border-radius: 12px;
    width: 50%;
}


/* Csapat szerkesztő */
#team-editor {
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 20px;
}


#team-editor input {
    width: 90%;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: none;
}

#team-editor input#team-name {
    width: 60%;
    margin: 0 auto 10px;
    display: block;
    text-align: center;
    opacity: 0.7;
}

#team-name {
    width: 60%;
    padding: 6px 10px;
    font-size: 0.9rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #ddd;
    margin-bottom: 10px;
}

#team-name::placeholder {
    color: rgba(255,255,255,0.25);
}


#team-hero-slots {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.hero-slot {
    width: 140px;
    height: 140px;
    border: 2px dashed #00aaff;
    border-radius: 10px;
    box-shadow: 0 0 12px #00aaff55;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* ============================
   Opciósáv
============================ */

#setup-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    height: 250px;
}

#setup-options-left,
#setup-options-right {
    padding: 8px 10px;
    min-height: auto;
}

#left-options {
    width: 48%;
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* HERO INFO BOX – teljes paneles banner háttér */
#hero-info-box {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    padding: 18px;
    min-height: 180px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
}

/* halvány, blur-ös háttér a teljes dobozra */
#hero-info-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--hero-banner, none);
    background-size: cover;
    background-position: top center;
    opacity: 0;
    filter: brightness(0.40) blur(3px);
    transition: opacity 0.25s ease;
}


/* ha van aktív hős, mutassuk a hátteret */
#hero-info-box.has-hero::before {
    opacity: 1;
}

/* szöveg réteg */
.hero-info-content {
    position: relative;
    z-index: 1;
    text-align: left;
}

.hero-info-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.hero-info-meta {
    font-size: 0.95rem;
    opacity: 0.9;
}

.hero-info-placeholder {
    position: relative;
    z-index: 1;
    opacity: 0.7;
    font-size: 0.9rem;
}


/* Slot avatar animáció */
.hero-slot-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.slot-pop {
    animation: slotPop 0.2s ease-out;
}

@keyframes slotPop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}


/* ============================
   Tekken kártyák
============================ */

#hero-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
    margin-top: 20px;
}

.hero-card-tekken {
    width: 130px;
    height: 180px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    clip-path: polygon(10% 0%, 100% 0%, 100% 90%, 90% 100%, 0% 100%, 0% 10%);
    transition: transform 1ms ease, box-shadow 0.25s ease;
    background: rgba(255,255,255,0.05);
}

.hero-card-tekken:hover {
    transform: scale(1.08);
    box-shadow: 0 0 18px #00aaff;
}

.hero-card-tekken img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-card-name {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 4px;
    background: rgba(0,0,0,0.6);
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Tekken-szerű codex grid */

.tekken-card {
    width: 180px;
    height: 260px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.tekken-card {
    width: 150px;
    height: 500px;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    transform: skewX(-6deg);
    margin-left: -30px; /* egymásba folyás */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 1;
}

.tekken-card:first-child {
    margin-left: 0;
}

.tekken-card:hover {
    transform: skewX(-6deg) scale(1.05);
    box-shadow: 0 0 16px rgba(0, 200, 255, 0.8);
    z-index: 5;
}


/* ============================
   Alsó gombsor
============================ */

#bottom-buttons {
    
    display: flex;
    justify-content: space-between;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
    margin-top: 20px;
}

#left-buttons {
    display: inline-block;
    flex-direction: column;
    gap: 8px;
}

#right-button {
    
    align-items: center;
}

/* Gombok egymás mellett a csapat szerkesztőben */
#team-editor .yellow-btn {
    display: inline-block;
    margin-right: 6px;
    margin-top: 8px;
}

/* Csapat lista */
#team-list {
    margin-top: 15px;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
}

#team-list-container {
    list-style: none;
    padding: 0;
    margin: 0;
}

#team-list-container li {
    display: flex;
    justify-content: space-between;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

#team-list-container li:last-child {
    border-bottom: none;
}

.team-name {
    cursor: pointer;
}

.delete-team {
    cursor: pointer;
    color: #ff4444;
}


#team-list-container li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.placeholder {
    opacity: 0.5;
    font-style: italic;
}

/* Alsó panel */
#bottom-panel {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* Új setup opciósáv */
#settings {
    width: 40%;
    background: rgba(255,255,255,0.05);
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #ccc;
    font-size: 0.9rem;
}

.settings-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
}

.settings-col {
    flex: 1;
}

.settings-select {
    width: 100%;
    padding: 6px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    color: #ddd;
}

.settings-select option {
    background: #111;
}

.settings-filters {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-title {
    opacity: 0.7;
    margin-right: 6px;
}

.filter-group input[type="radio"] {
    accent-color: #00aaff;
    transform: scale(1.1);
}


/* Avatar konténer */
#hero-container {
    width: 55%;
    background: #02101a;
    padding: 15px;
    border: 2px solid #00aaff;
    box-shadow: 0 0 10px #00aaff;
    border-radius: 12px;
}



.hero-avatar {
    width: 60px;
    height: 60px;
    border: 2px solid #00aaff;
    box-shadow: 0 0 10px #00aaff;
    cursor: grab;
    border-radius: 8px;
}

/* Gombok */
.yellow-btn {
    background: transparent;
    border: 2px solid rgb(18, 27, 27);
    box-shadow: 0 0 10px rgb(24, 28, 29);
    color: white;
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 8px;
    font-family: "Outfit", sans-serif;
    font-weight: 400;
}

.red-btn {
    background: transparent;
    border: 2px solid red;
    box-shadow: 0 0 10px red;
    color: white;
    padding: 10px;
    cursor: pointer;
    border-radius: 8px;
    font-family: 'AOW', serif;
    font-size: 14px;
    width: 200px;
    align-self: center;
}

/* ===========================
   BATTLE PAGE LAYOUT
   =========================== */





/* Felső sáv */

















/* Gombok – igazítsd az index stílusához */

.btn {
    padding: 8px 18px;
    border-radius: 4px;
    border: 1px solid #00d9ff;
    background: rgba(5, 20, 40, 0.9);
    color: #e4f9ff;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    transition: box-shadow 0.2s, transform 0.1s, background 0.2s;
}

.btn:hover {
    box-shadow: 0 0 10px #00d9ff;
    background: rgba(10, 40, 70, 1);
    transform: translateY(-1px);
}





/* Középső rész – csapatok elrendezése */





/* Bal / jobb oldal – két-két team panel */

.team-side {
    display: contents;
}







/* Hős kártya */

.hero-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: 6px;
    background: rgba(10, 10, 30, 0.85);
    padding: 8px;
    border: 1px solid rgba(0, 255, 255, 0.2);
    width: 100%; /* ne lógjon ki */
    box-sizing: border-box;
}




/* Hős fejléc + banner + ability ikonok */

/* A hero-header mostantól a banner jobb alsó sarkára kerül */




/* A név + ikon együtt mozogjon */



.hero-abilities-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.ability-icon {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
}

.ability-icon:hover {
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
}



/* Ability ikon overlay */


.hero-abilities-overlay .ability-icon {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
    cursor: pointer;
}

/* HP/Mana csíkok */

/* HP/Mana csíkok – továbbfejlesztett verzió */



/* A csík teljes kerete */




/* A csík háttér + fekete körvonal */
.bar {
    position: relative;
    height: 16px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(20, 20, 40, 0.9);

    /* ⭐ Fekete körvonal */
    border: 2px solid rgba(0, 0, 0, 0.9);

    /* Finom árnyék */
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.6);
}

/* A töltött rész – animált folyadék */
.bar-fill {
    height: 100%;
    width: 50%;
    border-radius: inherit;
    background-size: 200% 100%;
    animation: barShimmer 2.5s linear infinite;
    transition: width .45s ease, box-shadow .3s ease;
    position: relative;
    overflow: hidden;
}

.bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.35) 45%, transparent 60%);
    background-size: 250% 100%;
    animation: barSweep 3.2s ease-in-out infinite;
}

@keyframes barShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

@keyframes barSweep {
    0% { background-position: 150% 0; }
    60%, 100% { background-position: -50% 0; }
}

/* HP szín */


/* Mana szín */


/* Szöveg a csík közepén */


/* Regen érték – kerekített számok */


/* 30% HP alatt piros keret */
.bar.low-hp {
    border: 2px solid #ff2b2b !important;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.7);
}


/* Stat ikonok + színezett számok */



.stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
}

.stat-icon {
    width: 15px;
    height: 15px;
    object-fit: contain;
}

/* Színek a stat számokra */

.stat-value {
    font-weight: 600;
}

.stat-attack {
    color: #ff8080;           /* halványpiros */
}

.stat-magic {
    color: #4cb3ff;           /* kék */
}

.stat-crit-attack {
    color: #b3003b;           /* bordó */
}

.stat-crit-magic {
    color: #9933ff;           /* sötétkék */
}

.stat-crit-chance {
    color: #ff5e00;           /* vörös */
}

.stat-armor {
    color: #ffd84c;           /* sárga */
}

.stat-mr {
    color: #8cfff9;           /* lila */
}

.stat-speed {
    color: #fff2a8;           /* halványsárga */
}

.stat-lethality {
    color: #690b0b;           /* szürke */
}

.stat-endurance {
    color: #c9ff4c;           /* kék */
}

.stat-lifesteal {
    color: #ff4c7d;           /* vörösesrózsaszín */
}

.stat-powerplus {
    color: #ffdf3b;           /* aranysárga */
}

.stat-hp-regen-plus {
    color: #7df77d;           /* zöld */
}

.stat-mana-regen-plus {
    color: #4cb3ff;           /* kék */
}

/* Buff ikon sor */



.buff-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    cursor: pointer;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

.buff-icon:hover {
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.9));
}

.buff-icon--buff {
    filter: drop-shadow(0 0 4px rgba(80, 255, 120, 0.85)) drop-shadow(0 0 8px rgba(80, 255, 120, 0.5));
}

.buff-icon--buff:hover {
    filter: drop-shadow(0 0 6px rgba(80, 255, 120, 1)) drop-shadow(0 0 10px rgba(80, 255, 120, 0.7));
}

.buff-icon--debuff {
    filter: drop-shadow(0 0 4px rgba(255, 70, 70, 0.85)) drop-shadow(0 0 8px rgba(255, 70, 70, 0.5));
}

.buff-icon--debuff:hover {
    filter: drop-shadow(0 0 6px rgba(255, 70, 70, 1)) drop-shadow(0 0 10px rgba(255, 70, 70, 0.7));
}

/* Dice oszlop */



.hero-dice-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    justify-content: center;
    width: 48px;
}




/* színes kockák */















/* Reszponzív fix – kisebb képernyőn egymás alá rendezés */


@media (max-width: 768px) {

    .hero-card {
        grid-template-columns: 1fr;
    }

    .hero-dice-column {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        margin-top: 6px;
    }

}



/* ===========================
   BATTLE POPUP
   =========================== */





/* LOGÓ A FEJLÉCBEN */


#main-logo {
    width: 180px;
    height: auto;
}

/* LOG TARTALOM */


.log-debuff-icon {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 8px;
}

.debuff-skip {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* BEZÁRÁS GOMB */





/* Debuff ikonok */
.log-debuff-icon {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    margin-right: 8px;
}

.debuff-skip {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* BEZÁRÁS GOMB */





/* ===========================
   ÚJ LÁTVÁNYOS LOG BLOKKOK
   =========================== */

/* Szekciócímek */
.log-header {
    text-align: center;
    font-size: 1.4rem;
    margin: 25px 0 10px 0;
    font-weight: bold;
    color: #00d9ff;
}

/* Ability blokkok */








.defender-shake {
    animation: defenderShake 0.25s infinite linear;
}

@keyframes defenderShake {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-2px, 1px); }
    40%  { transform: translate(2px, -1px); }
    60%  { transform: translate(-1px, 2px); }
    80%  { transform: translate(1px, -2px); }
    100% { transform: translate(0, 0); }
}


.crit-attacker {
    animation: critBorderPulse 1.2s infinite ease-in-out;
}

@keyframes critBorderPulse {
    0% {
        border-color: #ff8c00; /* narancs */
        box-shadow: 0 0 10px #ff8c00;
        transform: scale(1);
    }
    50% {
        border-color: #ff0000; /* piros */
        box-shadow: 0 0 18px #ff0000;
        transform: scale(1.08);
    }
    100% {
        border-color: #ff8c00; /* narancs */
        box-shadow: 0 0 10px #ff8c00;
        transform: scale(1);
    }
}


.crit-shake {
    animation: shakeCrit 0.4s ease-in-out 2;
}

@keyframes shakeCrit {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(-4px); }
    40%  { transform: translateX(4px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(3px); }
    100% { transform: translateX(0); }
}




/* Támadási fázis */


.log-vs-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 10px;
}

.log-vs-row .side {
    text-align: center;
}

.log-vs-row img.hero {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

.log-vs-icon {
    width: 60px;
    height: auto;
    animation: vsPulse 1.2s infinite ease-in-out;
}

@keyframes vsPulse {
    0%   { transform: scale(1) rotate(0deg); opacity: 1; }
    50%  { transform: scale(1.15) rotate(3deg); opacity: 0.85; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}


/* Kiesett játékosok */









/* Szövegek */








.ability-icon-wrapper {
    position: relative;
    display: inline-block;
}

/* Még el nem ért szintű képesség: szürkített ikon + szükséges szint kiírva */
.ability-icon-wrapper.locked .ability-icon {
    filter: grayscale(1) brightness(0.45);
}
.ability-icon-wrapper.locked:hover .ability-icon {
    filter: grayscale(1) brightness(0.6);
}
.ability-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 8px;
    pointer-events: none;
}
.ability-lock-level {
    font-size: 0.72rem;
    font-weight: 800;
    color: #ffd86b;
    text-shadow: 0 0 4px #000, 0 0 8px rgba(0,0,0,0.9);
    letter-spacing: .3px;
}
.ability-lock-hint {
    color: #ffb0b0;
}





/* Színezett kulcsszavak */

.hero {
    color: #4cd4ff;
}

.target {
    color: #ff4c4c;
}

.damage {
    color: #ff8080;
    font-weight: bold;
    animation: damageFlash 0.4s ease-out;
}

@keyframes damageFlash {
    0%   { transform: scale(1.4); color: #ffb3b3; text-shadow: 0 0 10px #ff4c4c; }
    100% { transform: scale(1); color: #ff8080; text-shadow: none; }
}




.crit-hit {
    color: #ff3030;
    font-weight: bold;
    margin-bottom: 6px;
    animation: critLoop 1.2s infinite ease-in-out;
}

@keyframes critLoop {
    0%   { transform: scale(1);     text-shadow: 0 0 6px #ff0000; opacity: 1; }
    50%  { transform: scale(1.25);  text-shadow: 0 0 12px #ff4c4c; opacity: 0.85; }
    100% { transform: scale(1);     text-shadow: 0 0 6px #ff0000; opacity: 1; }
}

.crit-vs {
    animation: vsFlame 1.4s infinite ease-in-out;
    filter: brightness(1.4);
}

@keyframes vsFlame {
    0% {
        filter: drop-shadow(0 0 6px #ff8c00) brightness(1.3);
        transform: scale(1);
    }
    25% {
        filter: drop-shadow(0 0 12px #ff4500) brightness(1.5);
        transform: scale(1.1) rotate(-2deg);
    }
    50% {
        filter: drop-shadow(0 0 18px #ff0000) brightness(1.6);
        transform: scale(1.15) rotate(2deg);
    }
    75% {
        filter: drop-shadow(0 0 12px #ff4500) brightness(1.5);
        transform: scale(1.1) rotate(-1deg);
    }
    100% {
        filter: drop-shadow(0 0 6px #ff8c00) brightness(1.3);
        transform: scale(1);
    }
}



.heal {
    color: #80ff80;
}

.mana {
    color: #4cb3ff;
}

.ability {
    color: #ffd700;
}

.ability-change {
    margin-left: 20px;
    color: #9cd3ff;
    font-size: 0.9em;
}

.hero-card.dead {
    opacity: 0.4;
    filter: grayscale(100%);
}





























.replay-round {
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333;
}

.replay-event {
    margin-left: 10px;
    padding: 4px 0;
}

/* HERO CREATOR POPUP STYLES (illeszkedik a battle popuphoz) */
#hero-creator-popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

#hero-creator-window {
  width: 760px;
  max-height: 86vh;
  background: #0a0a1a;
  border: 2px solid #00d9ff;
  box-shadow: 0 0 20px #00d9ff;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#hero-creator-header { text-align:center; margin-bottom:8px; }
#hero-creator-content { flex:1; overflow-y:auto; padding-right:8px; }

.creator-section { margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid #222; }
.creator-section h3 { margin:6px 0 8px 0; color:#88e0ff; }

.file-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.file-label { min-width:120px; opacity:0.9; }
.preview-row img { width:84px; height:84px; object-fit:cover; border:2px solid #00aaff; border-radius:6px; }

.stats-grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; }
.stats-grid label { font-size:0.85rem; opacity:0.9; }
.stats-grid input { padding:6px; border-radius:6px; border:none; background:#07101a; color:#dff; }

#abilities-container { display:flex; flex-direction:column; gap:10px; }

.ability-block {
  border:1px solid rgba(255,255,255,0.06);
  padding:10px;
  border-radius:8px;
  background: linear-gradient(180deg, rgba(10,10,20,0.6), rgba(5,5,10,0.6));
  display:grid;
  grid-template-columns: 60px 1fr 120px;
  gap:8px;
  align-items:start;
}

.ability-left { display:flex; flex-direction:column; gap:6px; align-items:center; }
.ability-left img { width:48px; height:48px; object-fit:cover; border:1px solid rgba(255,255,255,0.2); border-radius:6px; }
.ability-mid { display:flex; flex-direction:column; gap:6px; }
.ability-right { display:flex; flex-direction:column; gap:6px; }

.ability-row { display:flex; gap:8px; align-items:center; }
.ability-row input[type="text"], .ability-row input[type="number"], .ability-row select {
  padding:6px; border-radius:6px; border:none; background:#07101a; color:#dff; width:100%;
}

.creator-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }

.hint { font-size:0.8rem; opacity:0.8; margin-top:6px; color:#bcd; }

.log-powerplus {
    color: #4af0ff;
    font-weight: bold;
    margin-top: 4px;
}






.log-section-spacing {
    margin-top: 10px;
    margin-bottom: 10px;
}

/* ============================
   PowerPlus ragyogás
============================ */


@keyframes glowPulse {
    0% { box-shadow: 0 0 6px #00eaff; }
    50% { box-shadow: 0 0 16px #00eaff; }
    100% { box-shadow: 0 0 6px #00eaff; }
}


/* ============================
   Általános spacing
============================ */


/* ============================
   Avatar + VS layout
============================ */













@keyframes vsPulse {
    0%   { transform: scale(1) rotate(0deg); opacity: 1; }
    50%  { transform: scale(1.15) rotate(3deg); opacity: 0.85; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}





/* ============================
   Támadási eredmény
============================ */


/* ============================
   Kétoszlopos stat grid
============================ */








/* ============================
   Képesség-hatás kártyák
============================ */
.effect-card-container {
    margin-top: 20px;
}



@keyframes slideIn {
    from { transform: translateX(-12px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}


.effect-ability-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0,0,0,0.6);
}






.effect-card.buff { border-left: 4px solid #4da6ff; }

.effect-card.damage { border-left: 4px solid #ff4d4d; }
.effect-card.heal { border-left: 4px solid #4dff88; }


/* Kritikus csapás = PowerPlus glow */


@keyframes critPulse {
    0%   { box-shadow: 0 0 6px #ff3030; }
    50%  { box-shadow: 0 0 16px #ff0000; }
    100% { box-shadow: 0 0 6px #ff3030; }
}

/* Stun / Silence / Polymorph */
/* Purple stun */
.glow-purple {
    animation: glowPulsePurple 1.6s infinite ease-in-out;
}
@keyframes glowPulsePurple {
    0% { box-shadow: 0 0 6px #b066ff; }
    50% { box-shadow: 0 0 16px #d699ff; }
    100% { box-shadow: 0 0 6px #b066ff; }
}

/* Yellow stun */
.glow-yellow {
    animation: glowPulseYellow 1.6s infinite ease-in-out;
}
@keyframes glowPulseYellow {
    0% { box-shadow: 0 0 6px #ffdd33; }
    50% { box-shadow: 0 0 16px #ffee88; }
    100% { box-shadow: 0 0 6px #ffdd33; }
}

/* Blue stun */
.glow-blue {
    animation: glowPulseBlue 1.6s infinite ease-in-out;
}
@keyframes glowPulseBlue {
    0% { box-shadow: 0 0 6px #33aaff; }
    50% { box-shadow: 0 0 16px #88ccff; }
    100% { box-shadow: 0 0 6px #33aaff; }
}

/* Red stun */
.glow-red {
    animation: glowPulseRed 1.6s infinite ease-in-out;
}
@keyframes glowPulseRed {
    0% { box-shadow: 0 0 6px #ff4444; }
    50% { box-shadow: 0 0 16px #ff8888; }
    100% { box-shadow: 0 0 6px #ff4444; }
}

/* Green stun */
.glow-green {
    animation: glowPulseGreen 1.6s infinite ease-in-out;
}
@keyframes glowPulseGreen {
    0% { box-shadow: 0 0 6px #44ff88; }
    50% { box-shadow: 0 0 16px #88ffbb; }
    100% { box-shadow: 0 0 6px #44ff88; }
}

/* Lightblue stun */
.glow-lightblue {
    animation: glowPulseLightblue 1.6s infinite ease-in-out;
}
@keyframes glowPulseLightblue {
    0% { box-shadow: 0 0 6px #66ddff; }
    50% { box-shadow: 0 0 16px #aeeeff; }
    100% { box-shadow: 0 0 6px #66ddff; }
}

/* Alap skip card */


/* Purple stun */


/* Yellow stun */


/* Blue stun */


/* Red stun */


/* Green stun */


/* Lightblue stun */


/* Purple stun text */
.glow-purple-text {
    color: #d699ff;
}

/* Yellow stun text */
.glow-yellow-text {
    color: #ffee88;
}

/* Blue stun text */
.glow-blue-text {
    color: #88ccff;
}

/* Red stun text */
.glow-red-text {
    color: #ff8888;
}

/* Green stun text */
.glow-green-text {
    color: #88ffbb;
}

/* Lightblue stun text */
.glow-lightblue-text {
    color: #aeeeff;
}













.log-ability-block .ability {
    color: #ffdd55;
}

/* Összesítő blokk kerete */
.summary-block {
  background: #1a1a1a;
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Összesítő cím */


.summary-subtitle {
  font-size: 15px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 4px;
  color: #ccc;
}







.dot-total {
  margin-top: 10px;
  padding: 6px;
  background: #330000;
  color: #ff6666;
  border-radius: 6px;
  font-weight: bold;
}

.status-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
}

/* Két blokk egymás alatt (mobilbarát), ha akarod, media queryvel teheted egymás mellé */
.status-section {
  border-radius: 6px;
  padding: 6px 8px;
  background: rgba(10, 10, 20, 0.85);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

/* Pozitív – zöldes keret, finom gradient */
.status-section.status-positive {
  border: 1px solid rgba(80, 200, 120, 0.9);
  background: linear-gradient(
    135deg,
    rgba(20, 60, 30, 0.9),
    rgba(10, 20, 15, 0.9)
  );
}

/* Negatív – vöröses keret, finom gradient */
.status-section.status-negative {
  border: 1px solid rgba(220, 80, 80, 0.9);
  background: linear-gradient(
    135deg,
    rgba(60, 20, 20, 0.9),
    rgba(20, 10, 10, 0.9)
  );
}

.status-section-title {
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
  text-transform: uppercase;
  font-size: 11px;
  opacity: 0.9;
}

.status-section.status-positive .status-section-title {
  color: #9fffbf;
}

.status-section.status-negative .status-section-title {
  color: #ff9f9f;
}

.status-section-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Egy-egy összesített sor (pl. "☠️ Méregzés -340 (8 buff)") */
.status-agg-line {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Ha szeretnél kis színes pöttyöt a sor elejére */
.status-agg-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.status-positive .status-agg-dot {
  background: #7dffb0;
}

.status-negative .status-agg-dot {
  background: #ff6b6b;
}

/* Elválasztó a részletes sorok előtt */



/* HELP BUTTON */




/* POPUP OVERLAY */


#help-popup.hidden {
    display: none;
}

/* POPUP CONTENT */


/* TABLE */








/* CLOSE BUTTON */






.item-slot img.item-icon {
    width: 38px;
    height: 38px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(150, 235, 255, 0.35);
}

#item-tooltip {
    position: absolute;
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    pointer-events: none;
    z-index: 9999;
    white-space: pre-line;
    border: 1px solid #00aaff;
    box-shadow: 0 0 10px #00aaff;
}










.hero-collect-badge.hidden {
    display: none;
}





.hero-card.blood-collector .hero-collect-badge {
    background: rgba(120, 0, 0, 0.65);
    border: 1px solid rgba(255, 0, 0, 0.45);
}

.hero-card.blood-collector .collect-icon {
    filter: drop-shadow(0 0 4px red);
}

.hero-card.blood-collector .collect-amount {
    color: #ff4d4d;
    font-weight: bold;
}


.item-icon-wrapper {
    position: relative;
    display: inline-block;
}

.item-tooltip {
    position: absolute;
    top: 110%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: normal;
    width: 180px;
    border: 1px solid #00aaff;
    box-shadow: 0 0 10px #00aaff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 999;
}

.item-tooltip-desc {
    opacity: 0.8;
    font-size: 0.78rem;
    margin: 4px 0 6px;
}

.item-tooltip-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.item-tooltip-stat {
    font-size: 0.8rem;
    color: #9fe6ff;
}

.item-tooltip-stat strong {
    color: #4cff88;
}

.item-tooltip-stat.has-icon {
    display: flex;
    align-items: center;
    gap: 6px;
}

.item-tooltip-stat.has-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex: 0 0 auto;
}

/* A JS document.body-ba portálja ezt a példányt, fixed pozícióval és nagyon
   magas z-indexszel, hogy semmilyen kártya/panel overflow:hidden-je vagy
   z-indexe ne takarhassa el – a pozícióját (top/left) is JS állítja be. */
.item-tooltip-floating {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
}

/* --- Rúna pecsét tooltip (hero-card): felszerelt runák ikonja + statjai --- */

.item-tooltip:has(.rune-badge-tooltip-list) {
    width: 260px;
}

.rune-badge-tooltip-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}

.rune-badge-tooltip-rune {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.rune-badge-tooltip-icon {
    width: 32px;
    height: 32px;
    object-fit: cover;
    clip-path: polygon(50% 6%, 94% 50%, 50% 94%, 6% 50%);
    flex: 0 0 auto;
}

.rune-badge-tooltip-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}













.hero-scroll-mask {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.hero-scroll-container {
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 20px 40px;
    scrollbar-width: none;
}

.hero-scroll-container::-webkit-scrollbar {
    display: none;
}

.tekken-grid {
    display: flex !important;
    flex-direction: row;
    gap: 12px;
    flex-wrap: nowrap;
}

.hero-scroll-mask::before,
.hero-scroll-mask::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.hero-scroll-mask::before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), transparent);
}

.hero-scroll-mask::after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), transparent);
}

/* A viewport – csak 10 kártya fér bele */
.hero-carousel {
    position: relative;
    width: 100%;
    max-width: 1000px; /* vagy 1300, 1200 – ízlés szerint */
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 40px;
}

/* ============================
   COMPACT VIEW – teljesen külön layout
============================ */

.hero-carousel.compact-view {
    overflow: visible !important;
}

.hero-carousel.compact-view .hero-track {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    padding: 10px;
    white-space: normal !important;
    overflow: visible !important;
}

/* Compact stat grid */
.compact-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 10px;
    padding: 6px;
}

/* Egy stat sor */
.compact-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
}

/* Ikon */
.compact-stat-icon {
    width: 16px !important;
    height: 16px !important;
    object-fit: contain !important;
    filter: drop-shadow(0 0 3px rgba(255,255,255,0.4));
}


/* Érték */
.compact-stat-value {
    font-weight: 600;
    color: #e0e0e0;
}



/* Fade-out a széleken */
.hero-carousel::before,
.hero-carousel::after {
    content: "";
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.hero-carousel::before {
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0), transparent);
}

.hero-carousel::after {
    right: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), transparent);
}


.settings-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 8px 36px 8px 12px;
    border-radius: 6px;
    font-size: 15px;
    cursor: pointer;
    transition: 0.15s ease;
    backdrop-filter: blur(4px);
    outline: none;
    min-width: 160px;
}

/* Hover */
.settings-select:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Focus */
.settings-select:focus {
    border-color: #4da3ff;
    box-shadow: 0 0 6px rgba(77, 163, 255, 0.6);
}

/* Custom arrow */
.settings-select {
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='12' width='12' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'><polygon points='0,0 20,0 10,12'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

.view-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    background-color: #777;
    border-radius: 26px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: .3s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .3s;
}

input:checked + .slider {
    background-color: #6a00ff;
}

input:checked + .slider:before {
    transform: translateX(24px);
}

/* ============================
   COMPACT VIEW – teljesen külön layout
============================ */

/* 1) A carousel teljes kikapcsolása compact módban */
.hero-carousel.compact-view {
    overflow: visible !important;
}

.hero-carousel.compact-view .hero-track {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    padding: 10px;
    white-space: normal !important;
    overflow: visible !important;

    /* carousel maradványok kiiktatása */
    flex-wrap: wrap !important;
    flex-direction: initial !important;
    scroll-snap-type: none !important;
    transform: none !important;
}

/* 2) Tekken kártyák eltűnnek compact módban */
.hero-carousel.compact-view .tekken-card {
    display: none !important;
}

/* 3) Kompakt kártyák */

.compact-card {
    width: 100%;
    height: 180px;
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    perspective: 800px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.compact-card:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 0 18px rgba(0, 255, 255, 0.45);
}

.compact-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.hero-carousel.tekken-view {
    overflow-x: auto;
    white-space: nowrap;
}

.hero-carousel.tekken-view .hero-track {
    display: flex;
    gap: 0;
}

.hero-carousel.tekken-view .compact-card {
    display: none !important;
}

/* Scrollbar eltüntetése minden böngészőben */
.hero-carousel::-webkit-scrollbar,
.hero-track::-webkit-scrollbar {
    display: none;
}

.hero-carousel,
.hero-track {
    -ms-overflow-style: none;  /* IE, Edge */
    scrollbar-width: none;     /* Firefox */
}



/* ============================
   FLIP STRUCTURE
============================ */

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform .45s ease;
}

.compact-card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front,
.card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
}

/* ============================
   FRONT SIDE
============================ */

.card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Vignette */
.card-front::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center,
        rgba(0,0,0,0) 40%,
        rgba(0,0,0,0.55) 100%
    );
    z-index: 1;
}

.compact-card:hover .card-front img {
    opacity: 0.3;
    filter: brightness(0.4) blur(1px);
}


/* Név neon csík */
.compact-name {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 6px 0;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: white;
    letter-spacing: 0.5px;
    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.55),
        rgba(0,255,255,0.55)
    );
    backdrop-filter: blur(3px);
    text-shadow: 0 0 6px rgba(255,255,255,0.6);
}

/* Class ikon */
.class-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    background: rgba(0,0,0,0.45);
    border-radius: 6px;
    padding: 3px;
    backdrop-filter: blur(3px);
    z-index: 3;
}

.class-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== CLASS SZÍNEK A NÉVCSÍKHOZ ===== */

/* Mágus – lila */
.compact-name.magus {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(220,120,255,0.6));
}

/* Közelharcos – vörös */
.compact-name.kozelharcos {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(255,120,120,0.6));
}

/* Support – zöld */
.compact-name.support {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(120,255,120,0.6));
}

/* Tank – sárga */
.compact-name.tank {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(255,240,120,0.6));
}

/* Szörnyeteg – sötétzöld */
.compact-name.szorny {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,150,0,0.6));
}

/* Lővész – kék */
.compact-name.lovesz {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(120,200,255,0.6));
}

/* Orrgyilkos – világoszöld */
.compact-name.orrgyilkos {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(150,255,200,0.6));
}

/* Mennyei – fehér */
.compact-name.mennyei {
    background: linear-gradient(90deg, rgba(0,0,0,0.7), rgba(200,200,200,0.7));
}

/* Alvilági – dark lila */
.compact-name.alvilagi {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(150,0,200,0.6));
}


/* ===== Kódex kaszt színezés ===== */

#codex-subinfo {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Ikon */
.codex-class-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(0,0,0,0.45);
    padding: 3px;
    backdrop-filter: blur(3px);
}

/* ===== Kódex kaszt színezés (ugyanaz, mint compact-name) ===== */

.codex-class-text {
    padding: 4px 10px;
    border-radius: 6px;
    color: white;
    text-shadow: 0 0 6px rgba(255,255,255,0.6);
    font-weight: 600;
}

/* Mágus – lila */
.codex-class-text.magus {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(220,120,255,0.6));
}

/* Közelharcos – vörös */
.codex-class-text.kozelharcos {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(255,120,120,0.6));
}

/* Support – zöld */
.codex-class-text.support {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(120,255,120,0.6));
}

/* Tank – sárga */
.codex-class-text.tank {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(255,240,120,0.6));
}

/* Szörnyeteg – sötétzöld */
.codex-class-text.szorny {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(0,150,0,0.6));
}

/* Lővész – kék */
.codex-class-text.lovesz {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(120,200,255,0.6));
}

/* Orrgyilkos – világoszöld */
.codex-class-text.orrgyilkos {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(150,255,200,0.6));
}

/* Mennyei – fehér */
.codex-class-text.mennyei {
    background: linear-gradient(90deg, rgba(0,0,0,0.7), rgba(200,200,200,0.7));
}

/* Alvilági – dark lila */
.codex-class-text.alvilagi {
    background: linear-gradient(90deg, rgba(0,0,0,0.6), rgba(150,0,200,0.6));
}


/* ============================
   BACK SIDE (stats)
============================ */

.card-back {
    background: rgba(0,0,0,0.75);
    padding: 10px;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    color: #fff;
    text-shadow: 0 0 4px #00ffff;
}

.stat-line {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ============================
   FULLSCREEN ABILITY POPUP
============================ */

.ability-fullscreen {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.ability-fullscreen.hidden {
    display: none;
}

.ability-fullscreen-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
}

#ability-fullscreen-img {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0,255,255,0.6);
    animation: abilityZoomIn .25s ease-out;
}

@keyframes abilityZoomIn {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ============================
   ABILITY POPUP
============================ */

.ability-popup {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

.ability-popup.hidden {
    display: none;
}

.ability-popup-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(4px);
}

/* Popup ablak */
.ability-popup-window {
    position: relative;
    z-index: 2;
    background: rgba(10, 10, 30, 0.9);
    border: 2px solid #00d9ff;
    box-shadow: 0 0 25px #00d9ff;
    border-radius: 12px;
    padding: 20px;
    max-width: 420px;
    text-align: center;
    animation: popupFadeIn .25s ease-out;
}

@keyframes popupFadeIn {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Ability ikon nagy méretben */
#ability-popup-img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 15px;

    /* ⭐ Aura animáció */
    animation: abilityAura 2.2s infinite ease-in-out;
    box-shadow: 0 0 20px rgba(0,255,255,0.6);
}

@keyframes abilityAura {
    0%   { box-shadow: 0 0 12px rgba(0,255,255,0.4); transform: scale(1); }
    50%  { box-shadow: 0 0 28px rgba(0,255,255,0.8); transform: scale(1.05); }
    100% { box-shadow: 0 0 12px rgba(0,255,255,0.4); transform: scale(1); }
}

/* Ability infó */
.ability-popup-info {
    color: #d0eaff;
    font-size: 0.95rem;
}

.ability-popup-info h2 {
    margin-bottom: 8px;
    color: #00eaff;
    text-shadow: 0 0 6px #00eaff;
}




/* Kaszt ikon */


/* A név továbbra is kaszt-színű */
.hero-name {
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
}

/* Kaszt-színű háttér a wrapperre */



















/* ============================
   KASZT-SZÍNŰ BANNER KERET
============================ */



















/* Összesítő blokk kerete */
.summary-block {
    background: rgba(255, 255, 255, 0.08);
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Összesítő cím */


/* Összesítő sorok */


/* Buff ikon az összesítőben */


/* Buff count badge */


/* Elválasztó a részletes sorok előtt */
















.details-content.hidden {
    display: none;
}



/* Ability táblázat */

.ability-entry {
    border: 1px solid #444;
    margin-bottom: 8px;
    border-radius: 6px;
    overflow: hidden;
}

.ability-header {
    background: #222;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ability-header img {
    width: 32px;
    height: 32px;
}

.ability-body {
    display: none;
    background: #111;
    padding: 10px;
}

.ability-body.open {
    display: block;
}

.ability-table {
    width: 100%;
    border-collapse: collapse;
}

.ability-table td {
    border: 1px solid #333;
    padding: 6px;
    vertical-align: top;
}

/* ============================
   ULTIMATE EFFECTS
============================ */



/* Csak a fő ulti képre */


/* Állandó videó */
.ult-fx-global {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: screen;
    opacity: 0.6;
    z-index: 9;
    pointer-events: none;
}

/* Egyedi ulti videó */


/* A fő ulti kép */


/* Villám / energia réteg */


@keyframes ultPulse {
    0%   { transform: scale(1); opacity: 0.6; }
    50%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 0.6; }
}

/* Színek */
.ult-red       { filter: drop-shadow(0 0 12px red); }
.ult-yellow    { filter: drop-shadow(0 0 12px yellow); }
.ult-green     { filter: drop-shadow(0 0 12px #00ff66); }
.ult-lightgreen { filter: drop-shadow(0 0 12px #2fff00); }
.ult-darkgreen { filter: drop-shadow(0 0 12px #045f05); }
.ult-purple    { filter: drop-shadow(0 0 12px #b300ff); }
.ult-blue      { filter: drop-shadow(0 0 12px #0099ff); }
.ult-lightblue { filter: drop-shadow(0 0 12px #66e0ff); }
.ult-white     { filter: drop-shadow(0 0 12px white); }
.ult-darkpurple{ filter: drop-shadow(0 0 12px #4b0082); }
.ult-orange    { filter: drop-shadow(0 0 12px #ff7700); }
.ult-greenblue { filter: drop-shadow(0 0 12px #0ac596); }
.ult-pink { filter: drop-shadow(0 0 12px #d805df); }



@keyframes ultBannerPulse {
    0%   { transform: scale(1);     filter: brightness(1.2); }
    50%  { transform: scale(1.05);  filter: brightness(1.6); }
    100% { transform: scale(1);     filter: brightness(1.2); }
}
















/* Rúna réteg */


/* Alap rúna stílus */



/* Lebegés */
@keyframes runeFloat {
    0%   { transform: translateY(0px) scale(1); }
    50%  { transform: translateY(-12px) scale(1.05); }
    100% { transform: translateY(0px) scale(1); }
}

/* Forgás */
@keyframes runeRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}