/* ============================================================
   HALL OF LEGENDS — FFECEL  |  Premium Edition
   ============================================================ */

.legends-page {
    background: #05060f;
    min-height: 100vh;
}

/* ---------- Hero Section ---------- */
.legends-hero {
    position: relative;
    min-height: 62vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10rem 1.5rem 5rem;
    overflow: hidden;
}

.legends-hero__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 45% at 50% -5%, rgba(240, 165, 0, 0.08) 0%, transparent 55%),
        #05060f;
    z-index: 0;
}

.legends-hero__bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(255, 255, 255, 0.012) 2px,
        rgba(255, 255, 255, 0.012) 4px
    );
    pointer-events: none;
}

.legends-hero__bg::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(to bottom, transparent, #05060f);
}

.legends-hero__inner {
    position: relative;
    z-index: 1;
}

.legends-hero__selection {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.18);
    margin-bottom: 1.75rem;
}

.legends-hero__selection i {
    color: rgba(240, 165, 0, 0.5);
    font-size: 0.8rem;
}

.legends-hero__eyebrow {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(240, 165, 0, 0.65);
    margin-bottom: 0.6rem;
}

.legends-hero__title {
    font-size: clamp(2.8rem, 7vw, 5rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 0.85rem;
}

.text-gold {
    background: linear-gradient(135deg, #f0a500 0%, #e8c96a 48%, #c97d08 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.legends-hero__sub {
    font-size: 1rem;
    color: #9ca3af;
    max-width: 440px;
    margin: 0 auto 0.85rem;
    font-weight: 400;
    line-height: 1.65;
}

.legends-hero__divider {
    width: 56px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f0a500, transparent);
    margin: 0 auto 2rem;
}

.legends-hero__stats {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 0.75rem 0.5rem;
    backdrop-filter: blur(12px);
}

.legends-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.4rem;
}

.legends-hero__stat-num {
    font-size: 2rem;
    font-weight: 900;
    color: #f0a500;
    line-height: 1;
}

.legends-hero__stat-label {
    font-size: 0.7rem;
    color: #4b5563;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
    font-weight: 600;
    white-space: nowrap;
}

.legends-hero__stat-divider {
    width: 1px;
    height: 38px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

/* ---------- Filter Tabs ---------- */
.legends-filters {
    padding: 0 1.5rem;
    margin-bottom: 2rem;
}

.legends-tab-bar {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    max-width: 500px;
    margin: 0 auto;
}

.legends-tab {
    background: transparent;
    border: none;
    color: #6b7280;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.legends-tab:hover {
    color: #d1d5db;
    background: rgba(255, 255, 255, 0.05);
}

.legends-tab.active {
    background: linear-gradient(135deg, #fbbf24, #d97706);
    color: #000;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}

/* ---------- Empty State ---------- */
.legends-empty {
    padding: 4rem 1.5rem;
}

.legends-empty__box {
    text-align: center;
    padding: 4rem 2rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(251, 191, 36, 0.2);
    border-radius: 16px;
    max-width: 500px;
    margin: 0 auto;
}

.legends-empty__box i {
    font-size: 3rem;
    color: #333;
    margin-bottom: 1rem;
    display: block;
}

.legends-empty__box h2 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.legends-empty__box p {
    color: #6b7280;
    font-size: 0.9rem;
}

/* ---------- Section Headers ---------- */
.legends-section {
    padding: 2rem 0 3rem;
}

.legends-section__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.legends-section__icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fbbf24;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.legends-section__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    white-space: nowrap;
}

.legends-section__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.3), transparent);
}

/* ---------- Legends Grid ---------- */
.legends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1.75rem;
}

/* ---------- Legend Card ---------- */
.legend-card {
    position: relative;
    background: linear-gradient(160deg, #0e0f1c 0%, #090a14 100%);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    animation: cardEnter 0.55s ease both;
}

@keyframes cardEnter {
    from { opacity: 0; transform: translateY(28px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.legend-card:hover {
    transform: translateY(-7px);
    border-color: rgba(240, 165, 0, 0.22);
    box-shadow:
        0 28px 60px -12px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(240, 165, 0, 0.06),
        0 0 55px -15px rgba(240, 165, 0, 0.22);
}

.legend-card__glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #f0a500, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.legend-card:hover .legend-card__glow {
    opacity: 1;
}

/* Number badge — lives inside the image overlay */
.legend-card__number {
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #000;
    background: linear-gradient(135deg, #f0a500, #d4870b);
    padding: 0.22rem 0.55rem;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(240, 165, 0, 0.4);
    white-space: nowrap;
}

/* ---------- Card Image ---------- */
.legend-card__image-wrap {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
    background: #07080e;
}

.legend-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.5s ease;
}

.legend-card:hover .legend-card__image {
    transform: scale(1.06);
}

.legend-card__image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #131422, #0b0c17);
    color: rgba(240, 165, 0, 0.12);
    font-size: 4rem;
}

/* ── Picture Frame ─────────────────────────────────────────── */
.legend-card__frame {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

/* Concentric ring frame: bright inner line → dark mat → amber body → dark outer → faint outer */
.legend-card__frame::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        145deg,
        rgba(255, 218, 90, 0.06) 0%,
        transparent 38%,
        rgba(0, 0, 0, 0.10) 100%
    );
    box-shadow:
        inset 0 0 0 2px  rgba(242, 202, 62, 0.80),
        inset 0 0 0 5px  rgba(4,   5,  12, 0.96),
        inset 0 0 0 14px rgba(144, 91,  9, 0.50),
        inset 0 0 0 16px rgba(4,   5,  12, 0.88),
        inset 0 0 0 18px rgba(218, 166, 36, 0.28);
}

/* Four corner L-bracket accents inside the mat area */
.legend-card__frame::after {
    content: '';
    position: absolute;
    inset: 22px;
    background:
        /* Top-left — horizontal */
        linear-gradient(rgba(242,202,62,.72), rgba(242,202,62,.72)) 0 0 / 14px 1.5px no-repeat,
        /* Top-left — vertical */
        linear-gradient(rgba(242,202,62,.72), rgba(242,202,62,.72)) 0 0 / 1.5px 14px no-repeat,
        /* Top-right — horizontal */
        linear-gradient(rgba(242,202,62,.72), rgba(242,202,62,.72)) 100% 0 / 14px 1.5px no-repeat,
        /* Top-right — vertical */
        linear-gradient(rgba(242,202,62,.72), rgba(242,202,62,.72)) 100% 0 / 1.5px 14px no-repeat,
        /* Bottom-left — horizontal */
        linear-gradient(rgba(242,202,62,.72), rgba(242,202,62,.72)) 0 100% / 14px 1.5px no-repeat,
        /* Bottom-left — vertical */
        linear-gradient(rgba(242,202,62,.72), rgba(242,202,62,.72)) 0 100% / 1.5px 14px no-repeat,
        /* Bottom-right — horizontal */
        linear-gradient(rgba(242,202,62,.72), rgba(242,202,62,.72)) 100% 100% / 14px 1.5px no-repeat,
        /* Bottom-right — vertical */
        linear-gradient(rgba(242,202,62,.72), rgba(242,202,62,.72)) 100% 100% / 1.5px 14px no-repeat;
}
.legend-card__image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    pointer-events: none;
}

.legend-card__overlay-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.legend-card__flag {
    width: 26px;
    height: 18px;
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.14);
    object-fit: cover;
}

/* Bottom gradient fade + name overlay */
.legend-card__overlay-bottom {
    background: linear-gradient(0deg, rgba(6, 8, 16, 0.96) 0%, rgba(6, 8, 16, 0.55) 55%, transparent 100%);
    margin: -10px;
    padding: 2.2rem 0.9rem 0.9rem;
    margin-top: auto;
}

.legend-card__eyebrow {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(240, 165, 0, 0.7);
    margin-bottom: 0.2rem;
}

.legend-card__name {
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
    margin: 0;
}

/* ---------- Card Body ---------- */
.legend-card__body {
    padding: 1rem 1.1rem 0.85rem;
}

.legend-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.legend-card__role,
.legend-card__team,
.legend-card__era {
    font-size: 0.72rem;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    font-weight: 600;
}

.legend-card__role i { color: #ef4444; }
.legend-card__team i { color: #60a5fa; }
.legend-card__era  i { color: #f0a500; }

.legend-card__desc {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Achievements ---------- */
.legend-card__achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.legend-card__ach {
    font-size: 0.7rem;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.12);
    padding: 0.2rem 0.55rem;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
}

.legend-card__ach i {
    font-size: 0.6rem;
}

/* ---------- Inducted Footer ---------- */
.legend-card__inducted {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(240, 165, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.legend-card__inducted::before {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(240, 165, 0, 0.15));
}

/* ---------- Player vs Team Card Variants ---------- */
.legend-card--player:hover {
    border-color: rgba(240, 165, 0, 0.22);
}

/* Teams share the same gold prestige treatment as players */

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .legends-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .legends-hero {
        min-height: 52vh;
        padding: 8rem 1rem 4rem;
    }

    .legends-hero__stats {
        padding: 0.6rem 0.25rem;
    }

    .legends-hero__stat {
        padding: 0 0.85rem;
    }

    .legends-hero__stat-num {
        font-size: 1.65rem;
    }

    .legends-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .legend-card__image-wrap {
        height: 220px;
    }

    .legends-section__header {
        gap: 0.75rem;
    }

    .legends-section__title {
        font-size: 1.2rem;
    }

    .legends-section {
        padding: 1.5rem 0 2.5rem;
    }
}

@media (max-width: 480px) {
    .legends-hero__title {
        font-size: clamp(1.9rem, 8vw, 2.6rem);
    }

    .legends-hero__sub {
        font-size: 0.9rem;
    }

    .legends-hero__stats {
        flex-direction: column;
        gap: 0.6rem;
        align-items: center;
        background: transparent;
        border: none;
        backdrop-filter: none;
        padding: 0;
    }

    .legends-hero__stat {
        padding: 0;
    }

    .legends-hero__stat-divider {
        width: 40px;
        height: 1px;
    }

    .legends-tab {
        padding: 0.45rem 0.75rem;
        font-size: 0.78rem;
    }
}


/* ════════════════════════════════════════════════
   HALL OF LEGENDS — CINEMATIC STORY INTRO
   ════════════════════════════════════════════════ */

#legendsIntro {
    position: fixed;
    inset: 0;
    z-index: 9996;
    background: #03020a;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

#legendsIntro.li--done { display: none; }

/* Particles canvas */
#legendsParticles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Cinematic vignette */
.li-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 50%,
        transparent 30%,
        rgba(0,0,0,0.55) 65%,
        rgba(0,0,0,0.85) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* ── Story container ── */
.li-story {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

/* Each phrase: fullscreen centered, stacked */
.li-phrase {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.75s ease, transform 0.75s ease;
    padding: 2rem;
}

.li-phrase.li--active {
    opacity: 1;
    transform: scale(1);
}

.li-phrase.li--out {
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

/* White small line above */
.li-phrase__small {
    display: block;
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.06em;
    text-align: center;
}

/* Big bold line */
.li-phrase__big {
    display: block;
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: clamp(3.2rem, 9vw, 7rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #ffffff;
    text-align: center;
    line-height: 1.1;
    text-shadow:
        0 0 40px rgba(255,255,255,0.08),
        0 4px 30px rgba(0,0,0,0.7);
}

/* Italic em in phrases = white/silver */
.li-phrase__big em {
    font-style: normal;
    color: #e8e8e8;
    text-shadow: 0 0 60px rgba(255,255,255,0.4), 0 4px 30px rgba(0,0,0,0.7);
}

/* Phase 4 special: full gold */
.li-phrase--gold .li-phrase__big--gold {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: clamp(3.5rem, 10vw, 8rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #f0d870;
    text-shadow:
        0 0 60px rgba(240,200,60,0.7),
        0 0 120px rgba(200,160,60,0.4),
        0 4px 40px rgba(0,0,0,0.6);
    animation: liGoldPulse 2.5s ease-in-out infinite;
}

.li-phrase--gold .li-phrase__big--gold em {
    color: #fff8a0;
    text-shadow:
        0 0 40px rgba(255,248,160,0.9),
        0 0 100px rgba(240,200,60,0.6);
}

@keyframes liGoldPulse {
    0%,100% { text-shadow: 0 0 60px rgba(240,200,60,0.7), 0 0 120px rgba(200,160,60,0.4), 0 4px 40px rgba(0,0,0,0.6); }
    50%      { text-shadow: 0 0 90px rgba(255,230,80,0.95), 0 0 180px rgba(240,200,60,0.6), 0 4px 40px rgba(0,0,0,0.6); }
}

/* ── Grand reveal ── */
.li-reveal {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    padding: 2rem;
    text-align: center;
}

.li-reveal.li--active {
    opacity: 1;
    transform: scale(1);
}

/* Rays behind the crown */
.li-reveal__rays {
    position: absolute;
    inset: -100px;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,   rgba(240,210,60,0.06) 5deg,   transparent 10deg,
        transparent 24deg,  rgba(240,210,60,0.06) 29deg,  transparent 34deg,
        transparent 50deg,  rgba(240,210,60,0.09) 55deg,  transparent 60deg,
        transparent 72deg,  rgba(240,210,60,0.06) 77deg,  transparent 82deg,
        transparent 96deg,  rgba(240,210,60,0.06) 101deg, transparent 106deg,
        transparent 120deg, rgba(240,210,60,0.06) 125deg, transparent 130deg,
        transparent 144deg, rgba(240,210,60,0.09) 149deg, transparent 154deg,
        transparent 168deg, rgba(240,210,60,0.06) 173deg, transparent 178deg,
        transparent 192deg, rgba(240,210,60,0.06) 197deg, transparent 202deg,
        transparent 216deg, rgba(240,210,60,0.06) 221deg, transparent 226deg,
        transparent 240deg, rgba(240,210,60,0.09) 245deg, transparent 250deg,
        transparent 264deg, rgba(240,210,60,0.06) 269deg, transparent 274deg,
        transparent 288deg, rgba(240,210,60,0.06) 293deg, transparent 298deg,
        transparent 312deg, rgba(240,210,60,0.09) 317deg, transparent 322deg,
        transparent 336deg, rgba(240,210,60,0.06) 341deg, transparent 346deg
    );
    animation: liRaysRotate 20s linear infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes liRaysRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Crown */
.li-reveal__crown-wrap {
    position: relative;
    margin-bottom: 1.4rem;
}

.li-reveal__halo {
    position: absolute;
    inset: -50px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(240,216,112,0.32) 0%,
        rgba(200,160,60,0.14) 45%,
        transparent 70%
    );
    animation: liHaloPulse 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes liHaloPulse {
    0%,100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.35); opacity: 1; }
}

.li-reveal__crown {
    font-size: clamp(4rem, 9vw, 7rem);
    color: #f0d870;
    display: block;
    position: relative;
    z-index: 1;
    animation: liCrownGlow 3s ease-in-out infinite;
}

@keyframes liCrownGlow {
    0%,100% { filter: drop-shadow(0 0 18px rgba(240,216,112,0.7)); }
    50%      { filter: drop-shadow(0 0 50px rgba(255,230,80,1)) drop-shadow(0 0 90px rgba(200,160,60,0.5)); }
}

/* "Hall of" — small elegant serif line */
.li-reveal__hallof {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: clamp(1.4rem, 3.5vw, 2.8rem);
    font-weight: 400;
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 0.1em;

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.li-reveal.li--p-hallof .li-reveal__hallof {
    opacity: 1;
    transform: translateY(0);
}

/* "LEGENDS" — the hero word, massive */
.li-reveal__legends {
    font-family: 'Cinzel', 'Georgia', serif;
    font-size: clamp(5.5rem, 17vw, 13rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 0.9;
    text-transform: uppercase;
    background: linear-gradient(170deg,
        #6b4e10 0%,
        #c9a84c 15%,
        #f0d870 30%,
        #fff8d0 48%,
        #f0d870 65%,
        #c9a84c 82%,
        #6b4e10 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: liLegShimmer 4s linear infinite;
    filter: drop-shadow(0 6px 40px rgba(200,160,60,0.4));
    margin-bottom: 1.2rem;

    opacity: 0;
    transform: scale(0.85) translateY(30px);
    transition: opacity 0.9s ease 0.15s, transform 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.15s;
}

.li-reveal.li--p-legends .li-reveal__legends {
    opacity: 1;
    transform: scale(1) translateY(0);
}

@keyframes liLegShimmer {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* Gold divider */
.li-reveal__divider {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: min(560px, 80vw);
    margin-bottom: 1.1rem;
    opacity: 0;
    transform: scaleX(0.15);
    transition: opacity 0.8s ease 0.3s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.li-reveal.li--p-sub .li-reveal__divider { opacity: 1; transform: scaleX(1); }

.li-reveal__dline {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
        transparent, #c9a84c 30%, #f0d870 50%, #c9a84c 70%, transparent
    );
}

.li-reveal__dgem {
    font-size: 0.8rem;
    color: #f0d870;
    filter: drop-shadow(0 0 10px rgba(240,216,112,0.95));
    animation: liCrownGlow 2.5s ease-in-out infinite;
}

/* Sub label */
.li-reveal__sub {
    font-size: clamp(0.7rem, 1.5vw, 0.95rem);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 1.8rem;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease 0.55s, transform 0.7s ease 0.55s;
}

.li-reveal.li--p-sub .li-reveal__sub { opacity: 1; transform: translateY(0); }

/* Progress bar */
.li-reveal__progress {
    width: min(340px, 65vw);
    height: 2px;
    background: rgba(200,160,60,0.1);
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.6s ease 0.75s;
}

.li-reveal.li--p-sub .li-reveal__progress { opacity: 1; }

.li-reveal__pbar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8b6914, #f0d870, #c9a84c);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(240,200,60,0.7);
    transition: width linear;
}

/* ── Skip button ── */
.li-skip {
    position: fixed;
    bottom: 1.8rem;
    right: 2rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(200,160,60,0.16);
    color: rgba(200,160,60,0.4);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.45rem 1rem;
    border-radius: 2px;
    cursor: pointer;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.5s ease, color 0.2s, border-color 0.2s, background 0.2s;
    font-family: inherit;
}

.li-skip:hover {
    color: #f0d870;
    border-color: rgba(200,160,60,0.5);
    background: rgba(200,160,60,0.1);
}

.li-skip.li--visible { opacity: 1; }