* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background:
        linear-gradient(
            rgba(5, 5, 9, 0.62),
            rgba(8, 5, 12, 0.72)
        ),
        url("../images/everveil-bg.png") center center / cover no-repeat fixed;

    color: #e8e5eb;
    font-family: Georgia, "Times New Roman", serif;
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

.hero-content {
    max-width: 900px;
}

.eyebrow {
    color: #9f7ab8;
    text-transform: uppercase;
    letter-spacing: 6px;
    font-size: 13px;
    margin-bottom: 20px;
}

h1 {
    font-size: clamp(60px, 11vw, 130px);
    letter-spacing: 8px;
    font-weight: normal;
    color: #ded9e2;
    text-shadow:
        0 0 15px rgba(137, 75, 173, 0.45),
        0 0 45px rgba(89, 38, 116, 0.25);
}

.tagline {
    margin-top: 10px;
    font-size: 22px;
    color: #aaa2ae;
    font-style: italic;
}

.divider {
    width: 120px;
    height: 1px;
    background: #76518b;
    margin: 30px auto;
}

.intro {
    max-width: 650px;
    margin: auto;
    line-height: 1.8;
    font-size: 17px;
    color: #aaa7ad;
}

.classes {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 35px;
}

.class {
    border: 1px solid #514459;
    background: rgba(255,255,255,0.025);
    padding: 12px 22px;
    min-width: 120px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 12px;
}

.actions {
    margin-top: 45px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.button {
    display: inline-block;
    text-decoration: none;
    color: #e6dbea;
    border: 1px solid #77518b;
    padding: 14px 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    transition: 0.25s;
}

.button:hover {
    background: #68417c;
    border-color: #a479ba;
}

.button.secondary {
    border-color: #49454d;
    color: #aaa5ad;
}

.button.secondary:hover {
    background: #252229;
}
/* =========================
   CHOOSE YOUR PATH
========================= */

.paths {
    min-height: 100vh;
    padding: 100px 7%;
    background:
        radial-gradient(circle at center, rgba(82, 40, 105, 0.15), transparent 50%),
        linear-gradient(180deg, #08070b 0%, #0d0911 50%, #060608 100%);
    border-top: 1px solid rgba(135, 91, 157, 0.25);
}

.paths-heading {
    max-width: 720px;
    margin: 0 auto 65px;
    text-align: center;
}

.section-eyebrow {
    display: block;
    margin-bottom: 15px;
    color: #9f7ab8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.paths-heading h2 {
    color: #e1dce5;
    font-size: clamp(38px, 5vw, 65px);
    font-weight: normal;
    letter-spacing: 4px;
}

.paths-heading p {
    color: #aaa5ad;
    font-size: 16px;
    line-height: 1.8;
}

.path-grid {
    max-width: 1250px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.path-card {
    position: relative;
    min-height: 390px;
    padding: 45px 30px 35px;
    overflow: hidden;

    border: 1px solid rgba(130, 96, 145, 0.35);

    background:
        linear-gradient(
            180deg,
            rgba(30, 23, 34, 0.9),
            rgba(12, 10, 15, 0.96)
        );

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.path-card:hover {
    transform: translateY(-8px);
    border-color: rgba(175, 116, 202, 0.7);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.45),
        0 0 25px rgba(100, 52, 125, 0.15);
}

.path-number {
    display: block;
    margin-bottom: 45px;

    color: #735781;
    font-size: 13px;
    letter-spacing: 3px;
}

.path-card h3 {
    margin-bottom: 20px;

    color: #e3dce7;
    font-size: 30px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.path-card p {
    min-height: 120px;

    color: #99949e;
    font-size: 15px;
    line-height: 1.7;
}

.path-link {
    display: inline-block;
    margin-top: 20px;

    color: #b99bc6;
    text-decoration: none;
    text-transform: uppercase;

    font-size: 10px;
    letter-spacing: 2px;

    border-bottom: 1px solid #725082;
    padding-bottom: 5px;
}

.path-link:hover {
    color: #eadff0;
    border-color: #b884ce;
}

/* Tablet */

@media (max-width: 1000px) {
    .path-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phone */

@media (max-width: 600px) {
    .paths {
        padding: 75px 20px;
    }

    .path-grid {
        grid-template-columns: 1fr;
    }

    .path-card {
        min-height: auto;
    }

    .path-card p {
        min-height: auto;
    }
}
/* Witch Path Artwork */

.witch-card {
    background:
        linear-gradient(
            180deg,
            rgba(10, 8, 13, 0.05) 0%,
            rgba(12, 9, 16, 0.35) 38%,
            rgba(12, 9, 16, 0.92) 68%,
            #0c0910 100%
        ),
        url("../images/witch-card.png") center top / cover no-repeat;
}

.witch-card:hover {
    border-color: rgba(175, 116, 202, 0.8);

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(112, 60, 139, 0.2);
}
/* =========================
   WARLOCK PATH ARTWORK
========================= */

.warlock-card {
    background:
        linear-gradient(
            180deg,
            rgba(10, 5, 6, 0.05) 0%,
            rgba(20, 5, 7, 0.35) 38%,
            rgba(14, 7, 9, 0.92) 68%,
            #0d080a 100%
        ),
        url("../images/warlock-card.png") center top / cover no-repeat;
}

.warlock-card:hover {
    border-color: rgba(190, 55, 65, 0.8);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(150, 25, 35, 0.20);
}


/* =========================
   ELVEN PATH ARTWORK
========================= */

.elven-card {
    background:
        linear-gradient(
            180deg,
            rgba(4, 12, 8, 0.05) 0%,
            rgba(5, 18, 11, 0.35) 38%,
            rgba(7, 15, 10, 0.92) 68%,
            #070d09 100%
        ),
        url("../images/elven-card.png") center top / cover no-repeat;
}

.elven-card:hover {
    border-color: rgba(76, 155, 100, 0.8);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(45, 130, 70, 0.20);
}


/* =========================
   FAE PATH ARTWORK
========================= */

.fae-card {
    background:
        linear-gradient(
            180deg,
            rgba(3, 10, 14, 0.05) 0%,
            rgba(4, 18, 23, 0.35) 38%,
            rgba(6, 14, 18, 0.92) 68%,
            #060c10 100%
        ),
        url("../images/fae-card.png") center top / cover no-repeat;
}

.fae-card:hover {
    border-color: rgba(67, 177, 190, 0.8);
    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(35, 145, 165, 0.20);
}
/* =========================
   HOW EVERVEIL WORKS
========================= */

.how-it-works {
    padding: 110px 7%;
    background:
        radial-gradient(circle at center, rgba(80, 45, 100, 0.12), transparent 55%),
        #070609;
    border-top: 1px solid rgba(135, 91, 157, 0.18);
}

.how-heading {
    max-width: 760px;
    margin: 0 auto 70px;
    text-align: center;
}

.how-heading h2 {
    color: #e1dce5;
    font-size: clamp(38px, 5vw, 65px);
    font-weight: normal;
    letter-spacing: 4px;
}

.how-heading p {
    color: #aaa5ad;
    font-size: 16px;
    line-height: 1.8;
}

.journey-grid {
    max-width: 1250px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.journey-step {
    position: relative;
    padding: 35px 28px;
    min-height: 240px;

    border-top: 1px solid rgba(145, 103, 163, 0.45);
    border-bottom: 1px solid rgba(145, 103, 163, 0.15);

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.025),
        rgba(255,255,255,0)
    );
}

.journey-number {
    display: block;
    margin-bottom: 30px;

    color: #765783;
    font-size: 12px;
    letter-spacing: 3px;
}

.journey-step h3 {
    margin-bottom: 15px;

    color: #ded8e2;
    font-size: 23px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.journey-step p {
    color: #97929b;
    font-size: 14px;
    line-height: 1.75;
}

/* Tablet */

@media (max-width: 900px) {
    .journey-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Phone */

@media (max-width: 550px) {
    .how-it-works {
        padding: 75px 20px;
    }

    .journey-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================
   RELICS
========================= */

.relics-section {
    min-height: 700px;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;

    background: #08070a;

    border-top: 1px solid rgba(135, 91, 157, 0.18);
}

.relics-image {
    position: relative;
    min-height: 700px;
    overflow: hidden;
}

.relics-image img {
    width: 100%;
    height: 100%;
    position: absolute;

    object-fit: cover;
    object-position: center;

    opacity: 0.78;
}

.relics-image::after {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(8, 7, 10, 0.05) 0%,
        rgba(8, 7, 10, 0.15) 60%,
        #08070a 100%
    );
}

.relics-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 80px 10% 80px 7%;
}

.relics-content h2 {
    color: #e2dce6;

    font-size: clamp(40px, 5vw, 68px);
    font-weight: normal;

    letter-spacing: 3px;

    margin-bottom: 20px;
}

.relic-divider {
    width: 80px;
    height: 1px;

    background: #76518b;

    margin-bottom: 25px;
}

.relics-intro {
    max-width: 580px;

    color: #aaa5ad;

    font-size: 16px;
    line-height: 1.8;

    margin-bottom: 40px;
}

.relic-feature {
    display: grid;
    grid-template-columns: 45px 1fr;

    gap: 15px;

    padding: 20px 0;

    border-top: 1px solid rgba(130, 96, 145, 0.18);
}

.relic-feature > span {
    color: #765783;

    font-size: 11px;
    letter-spacing: 2px;

    padding-top: 4px;
}

.relic-feature h3 {
    color: #dcd5e0;

    font-size: 16px;
    font-weight: normal;

    text-transform: uppercase;
    letter-spacing: 2px;

    margin-bottom: 7px;
}

.relic-feature p {
    color: #918c95;

    font-size: 14px;
    line-height: 1.6;
}


/* Mobile */

@media (max-width: 850px) {

    .relics-section {
        grid-template-columns: 1fr;
    }

    .relics-image {
        min-height: 450px;
    }

    .relics-image::after {
        background: linear-gradient(
            180deg,
            rgba(8, 7, 10, 0.05),
            #08070a
        );
    }

    .relics-content {
        padding: 60px 25px 80px;
    }
}
/* =========================
   EVERVEIL PROFILE PREVIEW
========================= */

.profile-preview {
    padding: 110px 7% 130px;
    background:
        radial-gradient(circle at 50% 55%, rgba(92, 48, 115, 0.13), transparent 45%),
        #09070b;
    border-top: 1px solid rgba(135, 91, 157, 0.18);
}

.profile-heading {
    max-width: 760px;
    margin: 0 auto 60px;
    text-align: center;
}

.profile-heading h2 {
    color: #e1dce5;
    font-size: clamp(38px, 5vw, 65px);
    font-weight: normal;
    letter-spacing: 4px;
}

.profile-heading p {
    color: #aaa5ad;
    font-size: 16px;
    line-height: 1.8;
}

/* Main Profile Panel */

.profile-demo {
    max-width: 1000px;
    margin: auto;
    padding: 40px;

    background:
        linear-gradient(
            135deg,
            rgba(27, 21, 31, 0.96),
            rgba(11, 9, 14, 0.98)
        );

    border: 1px solid rgba(132, 94, 150, 0.4);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.45),
        0 0 35px rgba(94, 47, 117, 0.08);
}

/* Profile Header */

.profile-top {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 22px;
    align-items: center;

    padding-bottom: 30px;
    border-bottom: 1px solid rgba(130, 96, 145, 0.22);
}

.profile-avatar {
    width: 78px;
    height: 78px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #76518b;

    background:
        radial-gradient(circle, #392244, #151019);

    color: #c9a7d7;

    font-size: 20px;
    letter-spacing: 3px;
}

.profile-label {
    color: #8d699d;
    font-size: 10px;
    letter-spacing: 3px;
}

.profile-identity h3 {
    margin: 6px 0;

    color: #e4dee7;

    font-size: 27px;
    font-weight: normal;

    letter-spacing: 1px;
}

.profile-identity p {
    color: #99939d;
    font-size: 14px;
}

.profile-level {
    text-align: center;
    min-width: 75px;
}

.profile-level span {
    display: block;

    color: #78617f;

    font-size: 9px;
    letter-spacing: 2px;
}

.profile-level strong {
    display: block;

    margin-top: 4px;

    color: #d8c5df;

    font-size: 36px;
    font-weight: normal;
}

/* XP */

.xp-area {
    padding: 28px 0;
}

.xp-info {
    display: flex;
    justify-content: space-between;

    margin-bottom: 9px;

    color: #8f8993;

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.xp-bar {
    height: 5px;

    background: #211b24;

    overflow: hidden;
}

.xp-progress {
    width: 74.5%;
    height: 100%;

    background: linear-gradient(
        90deg,
        #563366,
        #a16ab7
    );

    box-shadow: 0 0 12px rgba(150, 91, 178, 0.45);
}

/* Stats */

.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid rgba(130, 96, 145, 0.22);
    border-bottom: 1px solid rgba(130, 96, 145, 0.22);
}

.profile-stat {
    padding: 27px 15px;
    text-align: center;

    border-right: 1px solid rgba(130, 96, 145, 0.18);
}

.profile-stat:last-child {
    border-right: none;
}

.profile-stat strong {
    display: block;

    color: #ddd4e1;

    font-size: 28px;
    font-weight: normal;
}

.profile-stat span {
    display: block;

    margin-top: 7px;

    color: #7f7982;

    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* History */

.profile-history {
    padding-top: 30px;
}

.history-entry {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 12px;

    padding: 18px 0;

    border-bottom: 1px solid rgba(130, 96, 145, 0.14);
}

.history-icon {
    color: #8f5da4;
    font-size: 16px;
}

.history-entry strong {
    color: #cfc7d3;

    font-size: 13px;
    font-weight: normal;

    letter-spacing: 1px;
}

.history-entry p {
    margin-top: 5px;

    color: #77727b;

    font-size: 12px;
    line-height: 1.5;
}

/* Mobile */

@media (max-width: 650px) {

    .profile-preview {
        padding: 75px 20px;
    }

    .profile-demo {
        padding: 25px 20px;
    }

    .profile-top {
        grid-template-columns: auto 1fr;
    }

    .profile-level {
        display: none;
    }

    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-stat:nth-child(2) {
        border-right: none;
    }

    .profile-stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(130, 96, 145, 0.18);
    }
}
/* =========================
   FINAL CALL TO ACTION
========================= */

.final-cta {
    min-height: 480px;
    padding: 100px 20px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(105, 55, 130, 0.18),
            transparent 50%
        ),
        linear-gradient(
            180deg,
            #070609 0%,
            #0d0911 55%,
            #050506 100%
        );

    border-top: 1px solid rgba(135, 91, 157, 0.18);
}

.final-cta h2 {
    color: #e1dce5;

    font-size: clamp(42px, 6vw, 72px);
    font-weight: normal;

    letter-spacing: 4px;
}

.final-cta p {
    max-width: 600px;

    color: #aaa5ad;

    font-size: 17px;
    line-height: 1.8;
}

.cta-buttons {
    margin-top: 35px;

    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}
/* =====================================================
   EVERVEIL GAME DASHBOARD
   ===================================================== */

.game-page {
    margin: 0;
    min-height: 100vh;
    color: #eee7f5;
}

.game-nav {
    width: 100%;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 0 45px;
    box-sizing: border-box;

    background: rgba(5, 4, 10, 0.94);
    border-bottom: 1px solid rgba(150, 87, 200, 0.45);

    position: relative;
    z-index: 20;
}

.game-logo {
    color: #e7d8f5;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 32px;
    letter-spacing: 5px;
    text-decoration: none;
    white-space: nowrap;
}

.game-nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 32px;
    flex-wrap: wrap;
}

.game-nav-links a {
    color: #c8b9d7;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.game-nav-links a:hover {
    color: #ffffff;
}

.game-dashboard {
    width: min(1400px, calc(100% - 50px));
    margin: 0 auto;
    padding: 55px 0 80px;
}

.game-dashboard > h1 {
    margin: 0;
    font-size: clamp(42px, 6vw, 78px);
    letter-spacing: 8px;
    line-height: 1;
}

.game-dashboard > p {
    margin-top: 14px;
    color: #b9a9c7;
    font-size: 17px;
}

@media (max-width: 900px) {

    .game-nav {
        padding: 20px 25px;
        flex-direction: column;
        align-items: flex-start;
    }

    .game-nav-links {
        justify-content: flex-start;
        gap: 18px;
    }

    .game-dashboard {
        width: min(100% - 30px, 1400px);
        padding-top: 35px;
    }
}
/* =====================================================
   GAME WELCOME PANEL
   ===================================================== */

.game-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 42px 48px;

    background:
        linear-gradient(
            110deg,
            rgba(17, 10, 27, 0.96),
            rgba(8, 7, 14, 0.88)
        );

    border: 1px solid rgba(153, 88, 201, 0.35);
    border-radius: 6px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        inset 0 0 40px rgba(113, 52, 155, 0.05);
}

.game-welcome-info {
    min-width: 0;
}

.game-eyebrow {
    display: block;

    margin-bottom: 10px;

    color: #a974ce;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 3px;
}

.game-welcome h1 {
    margin: 0;

    color: #f0e8f7;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(34px, 5vw, 58px);
    font-weight: 400;

    letter-spacing: 2px;
    line-height: 1.05;
}

.game-welcome p {
    max-width: 650px;

    margin: 14px 0 20px;

    color: #b9acc5;

    font-size: 16px;
    line-height: 1.6;
}

.game-player-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.game-player-meta span {
    padding: 7px 13px;

    background: rgba(125, 70, 163, 0.12);

    border: 1px solid rgba(153, 88, 201, 0.25);
    border-radius: 20px;

    color: #d8c7e5;

    font-size: 12px;
    letter-spacing: 0.7px;
}

.game-welcome-actions {
    flex-shrink: 0;
}

.game-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;
    padding: 0 24px;

    background: rgba(120, 63, 158, 0.25);

    border: 1px solid rgba(180, 115, 224, 0.55);
    border-radius: 3px;

    color: #eee3f6;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.5px;
    text-decoration: none;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.game-primary-button:hover {
    background: rgba(143, 75, 190, 0.4);
    border-color: rgba(203, 151, 238, 0.85);
}

@media (max-width: 700px) {

    .game-welcome {
        flex-direction: column;
        align-items: flex-start;

        padding: 30px 25px;
    }

    .game-welcome-actions {
        width: 100%;
    }

    .game-primary-button {
        width: 100%;
        box-sizing: border-box;
    }
}
/* =====================================================
   MY PATHS
   ===================================================== */

.game-paths {
    margin-top: 55px;
}

.game-section-heading {
    margin-bottom: 24px;
}

.game-section-heading > span {
    display: block;
    margin-bottom: 6px;

    color: #9568b8;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 3px;
}

.game-section-heading h2 {
    margin: 0;

    color: #eee7f5;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 1px;
}

.game-path-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.game-path-card {
    min-height: 235px;
    padding: 25px;

    box-sizing: border-box;

    background: rgba(8, 7, 14, 0.88);

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 5px;

    position: relative;
    overflow: hidden;
}

.game-path-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: currentColor;

    opacity: 0.75;
}

.path-witch {
    color: #b574e8;
}

.path-warlock {
    color: #b95863;
}

.path-elven {
    color: #69a87b;
}

.path-fae {
    color: #68b9c8;
}

.path-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    margin-bottom: 30px;
}

.path-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.path-status {
    padding: 5px 8px;

    border: 1px solid currentColor;
    border-radius: 3px;

    font-size: 8px;
    letter-spacing: 1.3px;

    opacity: 0.8;
}

.game-path-card h3 {
    margin: 0 0 22px;

    color: #eee8f3;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    font-weight: 400;
}

.path-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 8px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.path-stat span {
    color: #928a9a;

    font-size: 11px;
    letter-spacing: 0.8px;
}

.path-stat strong {
    color: #e9e1ef;

    font-size: 12px;
    font-weight: 500;
}

.game-path-card.locked {
    opacity: 0.38;
    filter: grayscale(0.65);
}

.game-path-card.locked::after {
    content: "◇";

    position: absolute;
    right: 22px;
    bottom: 13px;

    color: rgba(255, 255, 255, 0.15);

    font-size: 55px;
}

.path-locked-text {
    max-width: 220px;
    margin: 0;

    color: #8c8492;

    font-size: 12px;
    line-height: 1.6;
}


/* TABLET */

@media (max-width: 1050px) {

    .game-path-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .game-path-grid {
        grid-template-columns: 1fr;
    }

}
/* =====================================================
   EVERVEIL GAME HUB
   ===================================================== */

.game-hub {
    margin-top: 60px;
}

.game-hub-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.game-hub-card {
    min-height: 175px;
    padding: 28px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            rgba(18, 12, 27, 0.92),
            rgba(8, 7, 14, 0.92)
        );

    border: 1px solid rgba(150, 88, 195, 0.22);
    border-radius: 5px;

    color: #eee7f5;
    text-decoration: none;

    position: relative;
    overflow: hidden;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.game-hub-card:hover {
    transform: translateY(-3px);

    border-color: rgba(185, 120, 225, 0.6);

    background:
        linear-gradient(
            135deg,
            rgba(30, 17, 43, 0.96),
            rgba(10, 8, 16, 0.96)
        );
}

.hub-icon {
    display: block;

    margin-bottom: 20px;

    color: #a875c8;

    font-size: 30px;
    line-height: 1;
}

.game-hub-card h3 {
    margin: 0 0 9px;

    color: #eee6f4;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 21px;
    font-weight: 400;

    letter-spacing: 0.5px;
}

.game-hub-card p {
    max-width: 330px;
    margin: 0;

    color: #978da1;

    font-size: 12px;
    line-height: 1.6;
}

.game-hub-card::after {
    content: "›";

    position: absolute;
    right: 22px;
    bottom: 18px;

    color: rgba(185, 120, 225, 0.35);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;

    transition:
        right 0.2s ease,
        color 0.2s ease;
}

.game-hub-card:hover::after {
    right: 18px;
    color: rgba(210, 165, 240, 0.8);
}


/* TABLET */

@media (max-width: 900px) {

    .game-hub-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* MOBILE */

@media (max-width: 550px) {

    .game-hub-grid {
        grid-template-columns: 1fr;
    }

}
/* =====================================================
   EVERVEIL PLAYER PROFILE
   ===================================================== */

.profile-page {
    margin: 0;
    min-height: 100vh;
    color: #eee7f5;
}

.player-profile {
    width: min(1400px, calc(100% - 50px));
    margin: 0 auto;
    padding: 55px 0 90px;
}


/* PROFILE HERO */

.profile-hero {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 45px;

    padding: 35px;

    background:
        linear-gradient(
            120deg,
            rgba(20, 11, 30, 0.96),
            rgba(7, 6, 12, 0.92)
        );

    border: 1px solid rgba(157, 91, 204, 0.35);
    border-radius: 6px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35),
        inset 0 0 50px rgba(116, 55, 155, 0.04);
}


/* PORTRAIT */

.profile-portrait {
    width: 100%;
    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: rgba(5, 4, 9, 0.8);

    border: 1px solid rgba(172, 110, 215, 0.4);
    border-radius: 4px;

    position: relative;
}

.profile-portrait img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.profile-portrait-empty {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at center,
            rgba(103, 55, 133, 0.18),
            rgba(6, 5, 10, 0.95)
        );

    color: #756a7e;

    font-size: 10px;
    letter-spacing: 3px;
}


/* CHARACTER INFORMATION */

.profile-identity {
    min-width: 0;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-eyebrow {
    margin-bottom: 10px;

    color: #a875ca;

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 3px;
}

.profile-identity h1 {
    margin: 0;

    color: #f0e8f5;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 6vw, 70px);
    font-weight: 400;

    letter-spacing: 2px;
    line-height: 1;
}

.profile-title {
    margin-top: 12px;

    color: #a99aaf;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-style: italic;
}


/* PATHS */

.profile-path-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 28px;
}

.profile-path {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 8px 12px;

    background: rgba(255, 255, 255, 0.025);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 3px;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
}

.profile-path strong {
    color: #ded5e5;

    font-size: 9px;
    font-weight: 500;
}

.profile-path-witch {
    color: #bb7be8;
    border-color: rgba(187, 123, 232, 0.4);
}

.profile-path-warlock {
    color: #c16470;
    border-color: rgba(193, 100, 112, 0.4);
}

.profile-path-elven {
    color: #75b687;
    border-color: rgba(117, 182, 135, 0.4);
}

.profile-path-fae {
    color: #73c5d3;
    border-color: rgba(115, 197, 211, 0.4);
}


/* BIO */

.profile-bio {
    max-width: 760px;

    margin-top: 28px;
    padding-top: 24px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    color: #afa3b6;

    font-size: 14px;
    line-height: 1.8;
}

.profile-bio em {
    color: #786f80;
}


/* RESPONSIVE */

@media (max-width: 800px) {

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

    .profile-portrait {
        max-width: 300px;
    }

}

@media (max-width: 550px) {

    .player-profile {
        width: min(100% - 30px, 1400px);
        padding-top: 30px;
    }

    .profile-hero {
        padding: 22px;
        gap: 28px;
    }

}
/* =====================================================
   PROFILE STATS
   ===================================================== */

.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin-top: 18px;

    background:
        linear-gradient(
            90deg,
            rgba(14, 9, 21, 0.96),
            rgba(24, 12, 34, 0.96),
            rgba(14, 9, 21, 0.96)
        );

    border: 1px solid rgba(157, 91, 204, 0.28);
    border-radius: 5px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.25),
        inset 0 0 35px rgba(116, 55, 155, 0.035);
}

.profile-stat {
    min-height: 95px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 18px 15px;

    text-align: center;

    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.profile-stat:last-child {
    border-right: none;
}

.profile-stat-label {
    margin-bottom: 9px;

    color: #806d8c;

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 2px;
}

.profile-stat strong {
    color: #d8cedf;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 400;

    letter-spacing: 1px;
}

.profile-stat-faction strong {
    color: #a875ca;
}


/* SMALL HOVER EFFECT */

.profile-stat {
    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.profile-stat:hover {
    background: rgba(135, 70, 174, 0.07);
}


/* RESPONSIVE */

@media (max-width: 800px) {

    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-stat:nth-child(2) {
        border-right: none;
    }

    .profile-stat:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

}

@media (max-width: 480px) {

    .profile-stats {
        grid-template-columns: 1fr;
    }

    .profile-stat {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }

    .profile-stat:last-child {
        border-bottom: none;
    }

}
/* =====================================================
   PATH GEAR
   ===================================================== */

.path-gear-section {
    margin-top: 65px;
}

.profile-section-heading {
    margin-bottom: 28px;
}

.profile-section-heading > span {
    display: block;
    margin-bottom: 8px;

    color: #9668b4;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
}

.profile-section-heading h2 {
    margin: 0;

    color: #eee6f3;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 38px;
    font-weight: 400;

    letter-spacing: 1px;
}

.profile-section-heading p {
    max-width: 650px;

    margin: 10px 0 0;

    color: #887d90;

    font-size: 13px;
    line-height: 1.7;
}


/* WITCH GEAR PANEL */

.path-gear-panel {
    padding: 28px;

    background:
        linear-gradient(
            135deg,
            rgba(21, 11, 29, 0.96),
            rgba(8, 6, 12, 0.97)
        );

    border: 1px solid rgba(160, 89, 203, 0.28);
    border-radius: 5px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.28),
        inset 0 0 45px rgba(125, 60, 166, 0.035);
}


/* PANEL HEADER */

.path-gear-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 24px;
    padding-bottom: 20px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.path-gear-path {
    display: block;

    margin-bottom: 5px;

    color: #b575da;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 3px;
}

.path-gear-header h3 {
    margin: 0;

    color: #e2d8e8;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    font-weight: 400;
}

.path-gear-owned {
    padding: 7px 10px;

    color: #b67bdd;

    background: rgba(148, 78, 190, 0.08);

    border: 1px solid rgba(177, 105, 218, 0.28);
    border-radius: 3px;

    font-size: 8px;
    font-weight: 600;
    letter-spacing: 1.5px;
}


/* GEAR GRID */

.path-gear-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
}


/* INDIVIDUAL GEAR SLOT */

.gear-slot {
    position: relative;

    min-height: 190px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 20px;

    background:
        radial-gradient(
            circle at center,
            rgba(112, 55, 144, 0.08),
            rgba(5, 4, 8, 0.72) 70%
        );

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;

    text-align: center;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}

.gear-slot:hover {
    transform: translateY(-3px);

    border-color: rgba(172, 103, 211, 0.3);

    background:
        radial-gradient(
            circle at center,
            rgba(130, 65, 166, 0.13),
            rgba(5, 4, 8, 0.78) 70%
        );
}


/* TEMPORARY SILHOUETTE */

.gear-silhouette {
    width: 75px;
    height: 75px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    color: rgba(167, 104, 203, 0.28);

    border: 1px solid rgba(157, 91, 194, 0.13);
    border-radius: 50%;

    font-size: 28px;

    box-shadow:
        inset 0 0 25px rgba(123, 60, 160, 0.06);
}

.gear-slot > span {
    color: #cfc3d5;

    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
}

.gear-slot small {
    margin-top: 7px;

    color: #665e6b;

    font-size: 9px;
    letter-spacing: 0.5px;
}


/* EMPTY SLOT */

.gear-slot-empty {
    opacity: 0.72;
}

.gear-slot-empty:hover {
    opacity: 1;
}


/* RESPONSIVE */

@media (max-width: 900px) {

    .path-gear-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 520px) {

    .path-gear-grid {
        grid-template-columns: 1fr;
    }

    .path-gear-panel {
        padding: 20px;
    }

}
/* =====================================================
   PATH GEAR SELECTOR
   ===================================================== */

.path-gear-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;

    margin-bottom: 28px;
}

.gear-path-tab {
    position: relative;

    min-height: 68px;
    padding: 12px 16px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            rgba(35, 19, 46, 0.85),
            rgba(10, 7, 14, 0.95)
        );

    color: #b9aabd;

    border: 1px solid rgba(162, 95, 199, 0.18);
    border-radius: 3px;

    cursor: pointer;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.gear-path-tab span {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    letter-spacing: 2px;
}

.gear-path-tab small {
    margin-top: 6px;

    color: #75697b;

    font-size: 8px;
    letter-spacing: 1.5px;
}


/* HOVER */

.gear-path-tab:not(.locked):hover {
    transform: translateY(-2px);

    border-color: rgba(184, 110, 224, 0.45);

    background:
        linear-gradient(
            180deg,
            rgba(58, 28, 75, 0.9),
            rgba(15, 8, 21, 0.97)
        );
}


/* CURRENTLY SELECTED PATH */

.gear-path-tab.active {
    color: #d8a7f3;

    border-color: rgba(194, 120, 235, 0.55);

    background:
        radial-gradient(
            circle at top,
            rgba(128, 58, 166, 0.28),
            rgba(15, 8, 21, 0.96) 70%
        );

    box-shadow:
        inset 0 -2px 0 rgba(187, 105, 229, 0.65),
        0 0 20px rgba(116, 50, 151, 0.08);
}

.gear-path-tab.active small {
    color: #ad82c4;
}


/* LOCKED PATH */

.gear-path-tab.locked {
    opacity: 0.35;
    cursor: default;
}

.gear-path-tab.locked span {
    color: #716a75;
}

.gear-path-tab.locked small {
    color: #504a54;
}


/* FAE OWNED TAB */

.gear-path-tab[data-path="fae"]:not(.locked) {
    border-color: rgba(100, 185, 199, 0.25);
}

.gear-path-tab[data-path="fae"]:not(.locked):hover {
    border-color: rgba(115, 197, 211, 0.55);
}


/* RESPONSIVE */

@media (max-width: 700px) {

    .path-gear-tabs {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 400px) {

    .path-gear-tabs {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   PROFILE BADGE SHOWCASE
========================================= */

.profile-badges-section {
    margin-top: 60px;
    padding: 35px;
    background: rgba(12, 7, 20, 0.78);
    border: 1px solid rgba(165, 110, 255, 0.22);
    border-radius: 18px;
    box-shadow: 0 0 35px rgba(100, 45, 160, 0.10);
}

.profile-badge-showcase {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
    margin-top: 30px;
}

.profile-badge-slot {
    min-height: 190px;
    padding: 20px 12px;
    border: 1px solid rgba(180, 140, 255, 0.18);
    border-radius: 14px;
    background:
        radial-gradient(
            circle at center,
            rgba(112, 60, 170, 0.12),
            rgba(10, 6, 17, 0.65) 70%
        );
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: 0.25s ease;
}

.profile-badge-slot:hover {
    transform: translateY(-4px);
    border-color: rgba(190, 145, 255, 0.42);
    box-shadow: 0 8px 25px rgba(92, 45, 145, 0.18);
}

.profile-badge-empty {
    width: 92px;
    height: 92px;
    margin-bottom: 16px;
    border-radius: 50%;
    border: 1px dashed rgba(195, 160, 255, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: rgba(205, 175, 255, 0.32);
    background: rgba(0, 0, 0, 0.22);
}

.profile-badge-slot span {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(225, 210, 245, 0.60);
}

.profile-badge-slot small {
    margin-top: 6px;
    font-size: 0.72rem;
    color: rgba(190, 175, 205, 0.45);
}


/* TABLET */

@media (max-width: 1000px) {

    .profile-badge-showcase {
        grid-template-columns: repeat(3, 1fr);
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .profile-badges-section {
        padding: 24px 16px;
    }

    .profile-badge-showcase {
        grid-template-columns: repeat(2, 1fr);
    }

}
/* =========================================
   PROFILE - MY STORY LINK
========================================= */

.profile-story-link {
    margin-top: 45px;
    margin-bottom: 60px;
}

.story-link-card {
    position: relative;

    display: flex;
    align-items: center;
    gap: 28px;

    padding: 32px 38px;

    text-decoration: none;

    background:
        radial-gradient(
            circle at 12% 50%,
            rgba(126, 68, 170, 0.18),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            rgba(18, 10, 28, 0.96),
            rgba(8, 5, 14, 0.96)
        );

    border: 1px solid rgba(177, 125, 235, 0.25);
    border-radius: 14px;

    overflow: hidden;

    box-shadow:
        inset 0 0 35px rgba(112, 54, 160, 0.06),
        0 12px 30px rgba(0, 0, 0, 0.25);

    transition: 0.3s ease;
}

/* Inner decorative border */

.story-link-card::before {
    content: "";
    position: absolute;
    inset: 7px;

    border: 1px solid rgba(192, 150, 240, 0.08);
    border-radius: 10px;

    pointer-events: none;
}

.story-link-card:hover {
    transform: translateY(-3px);

    border-color: rgba(194, 143, 250, 0.52);

    box-shadow:
        inset 0 0 40px rgba(125, 62, 180, 0.10),
        0 15px 38px rgba(0, 0, 0, 0.34),
        0 0 25px rgba(119, 57, 175, 0.12);
}


/* MOON SYMBOL */

.story-link-symbol {
    position: relative;
    z-index: 1;

    flex: 0 0 78px;

    width: 78px;
    height: 78px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(191, 145, 240, 0.28);
    border-radius: 50%;

    background: rgba(96, 44, 135, 0.12);

    color: rgba(215, 180, 250, 0.78);

    font-size: 40px;

    box-shadow:
        inset 0 0 20px rgba(145, 83, 195, 0.10),
        0 0 22px rgba(120, 60, 175, 0.08);
}


/* TEXT */

.story-link-content {
    position: relative;
    z-index: 1;

    flex: 1;
}

.story-link-content span {
    display: block;

    margin-bottom: 5px;

    color: rgba(181, 136, 220, 0.68);

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.story-link-content h2 {
    margin: 0 0 7px;

    color: rgba(240, 229, 247, 0.96);

    font-size: 1.7rem;
    font-weight: 500;
}

.story-link-content p {
    margin: 0;

    max-width: 650px;

    color: rgba(194, 180, 204, 0.68);

    font-size: 0.88rem;
    line-height: 1.6;
}


/* ENTER STORY */

.story-link-arrow {
    position: relative;
    z-index: 1;

    flex-shrink: 0;

    color: rgba(202, 165, 235, 0.70);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;

    transition: 0.25s ease;
}

.story-link-card:hover .story-link-arrow {
    color: rgba(228, 196, 255, 0.95);
    transform: translateX(5px);
}


/* MOBILE */

@media (max-width: 700px) {

    .story-link-card {
        flex-direction: column;
        text-align: center;

        padding: 30px 22px;
    }

    .story-link-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .story-link-arrow {
        margin-top: 5px;
    }

}
/* =========================================
   EVERVEIL CHARACTER STORY PAGE
========================================= */

.story-page {
    min-height: 100vh;
    background:
        linear-gradient(
            rgba(7, 4, 12, 0.72),
            rgba(7, 4, 12, 0.90)
        );
}

.character-story-page {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
    padding: 65px 0 100px;
}


/* =========================================
   STORY HEADER
========================================= */

.story-page-header {
    position: relative;

    padding: 35px 40px 45px;

    background:
        radial-gradient(
            circle at 15% 40%,
            rgba(120, 65, 170, 0.17),
            transparent 40%
        ),
        rgba(10, 6, 17, 0.82);

    border: 1px solid rgba(177, 125, 235, 0.24);
    border-radius: 16px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.32),
        inset 0 0 45px rgba(100, 50, 145, 0.06);
}


/* INNER DECORATIVE BORDER */

.story-page-header::before {
    content: "";
    position: absolute;
    inset: 8px;

    border: 1px solid rgba(200, 160, 245, 0.08);
    border-radius: 11px;

    pointer-events: none;
}


/* RETURN LINK */

.story-return-link {
    position: relative;
    z-index: 2;

    display: inline-block;
    margin-bottom: 30px;

    color: rgba(196, 158, 230, 0.68);

    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 2px;

    text-decoration: none;

    transition: 0.25s ease;
}

.story-return-link:hover {
    color: rgba(230, 200, 255, 0.95);
}


/* CHARACTER INTRO */

.story-character-intro {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    gap: 38px;
}


/* PORTRAIT */

.story-character-portrait {
    flex: 0 0 180px;

    width: 180px;
    height: 220px;

    padding: 7px;

    border: 1px solid rgba(190, 145, 235, 0.28);
    border-radius: 8px;

    background: rgba(0, 0, 0, 0.32);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.35),
        0 0 25px rgba(115, 55, 165, 0.08);
}

.story-character-portrait img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 4px;
}

.story-portrait-empty {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle,
            rgba(120, 65, 165, 0.16),
            rgba(6, 4, 10, 0.82)
        );

    color: rgba(205, 170, 240, 0.32);

    font-size: 58px;
}


/* CHARACTER DETAILS */

.story-character-details {
    flex: 1;
}

.story-eyebrow {
    display: block;

    margin-bottom: 9px;

    color: rgba(177, 129, 220, 0.68);

    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 3px;
}

.story-character-details h1 {
    margin: 0;

    color: rgba(242, 232, 248, 0.97);

    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    line-height: 1;

    letter-spacing: -1px;
}

.story-character-title {
    margin-top: 10px;

    color: rgba(208, 175, 235, 0.72);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    font-style: italic;
}

.story-character-details p {
    max-width: 600px;

    margin: 20px 0 0;

    color: rgba(198, 184, 207, 0.65);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1rem;
    line-height: 1.7;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .character-story-page {
        width: min(100% - 24px, 1180px);
        padding-top: 35px;
    }

    .story-page-header {
        padding: 28px 22px 35px;
    }

    .story-character-intro {
        flex-direction: column;
        text-align: center;
    }

    .story-character-portrait {
        flex-basis: auto;
        width: 150px;
        height: 185px;
    }

    .story-character-details p {
        margin-left: auto;
        margin-right: auto;
    }

}
/* =========================================
   STORY READING AREA
========================================= */

.story-page-content {
    position: relative;

    max-width: 960px;
    min-height: 420px;

    margin: 45px auto 0;
    padding: 65px 75px;

    background:
        radial-gradient(
            circle at center,
            rgba(95, 60, 105, 0.10),
            transparent 65%
        ),
        linear-gradient(
            135deg,
            rgba(24, 17, 27, 0.94),
            rgba(13, 9, 17, 0.97)
        );

    border: 1px solid rgba(177, 132, 205, 0.22);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        inset 0 0 70px rgba(95, 55, 110, 0.08);

    color: rgba(226, 214, 225, 0.88);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
    line-height: 1.95;
}


/* MANUSCRIPT INNER BORDER */

.story-page-content::before {
    content: "";

    position: absolute;
    inset: 12px;

    border: 1px solid rgba(190, 150, 215, 0.10);

    pointer-events: none;
}


/* DECORATIVE BOTTOM MARK */

.story-page-content::after {
    content: "☾  ✦  ☽";

    position: absolute;

    bottom: 22px;
    left: 50%;

    transform: translateX(-50%);

    color: rgba(194, 151, 220, 0.25);

    font-size: 13px;
    letter-spacing: 8px;
}


/* EMPTY STORY */

.story-page-empty {
    min-height: 290px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.story-page-empty > span {
    margin-bottom: 22px;

    color: rgba(200, 158, 230, 0.34);

    font-size: 20px;
    letter-spacing: 9px;
}

.story-page-empty h2 {
    margin: 0;

    color: rgba(231, 218, 235, 0.80);

    font-size: 1.45rem;
    font-weight: 400;
    font-style: italic;
}

.story-page-empty p {
    max-width: 430px;

    margin: 12px auto 0;

    color: rgba(190, 175, 195, 0.48);

    font-size: 0.9rem;
    line-height: 1.7;
}


/* MOBILE */

@media (max-width: 700px) {

    .story-page-content {
        min-height: 350px;

        margin-top: 28px;
        padding: 50px 28px;

        font-size: 0.98rem;
        line-height: 1.8;
    }

}
/* =========================================================
   EVERVEIL CHRONICLE — OPEN BOOK
   ========================================================= */

.chronicle-page {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(92, 40, 125, 0.24),
            transparent 38%
        ),
        radial-gradient(
            circle at center,
            #17101d 0%,
            #09070c 58%,
            #040305 100%
        );
    color: #d8cfdb;
}


/* MAIN AREA */

.chronicle {
    width: min(1400px, calc(100% - 40px));
    margin: 0 auto;
    padding: 65px 0 130px;
}


/* =========================================================
   CHRONICLE HEADER
   ========================================================= */

.chronicle-cover {
    max-width: 850px;
    margin: 0 auto 65px;
    text-align: center;
}

.chronicle-cover::before {
    content: "☾";
    display: block;
    margin-bottom: 12px;

    color: #b481cc;
    font-size: 32px;

    text-shadow:
        0 0 18px rgba(178, 116, 211, 0.6);
}

.chronicle-kicker,
.chronicle-section-label {
    color: #9e6fb6;
    font-size: 10px;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.chronicle-cover h1 {
    margin: 15px 0 5px;

    color: #eee7f0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 400;

    text-shadow:
        0 4px 25px rgba(0, 0, 0, 0.75);
}

.chronicle-title {
    margin-bottom: 22px;

    color: #ad85c0;

    font-family: Georgia, serif;
    font-size: 16px;
    font-style: italic;
}

.chronicle-cover p {
    max-width: 520px;
    margin: 0 auto;

    color: #8e8393;

    font-family: Georgia, serif;
    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   OPEN BOOK
   ========================================================= */

.chronicle-book {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    max-width: 1240px;
    min-height: 720px;

    margin: 0 auto;

    border-radius: 10px 10px 16px 16px;

    background: #09060b;

    box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.75),
        0 0 60px rgba(94, 42, 122, 0.12);
}


/* DARK LEATHER EDGE BEHIND PAGES */

.chronicle-book::before {
    content: "";

    position: absolute;
    inset: -15px;

    z-index: -1;

    border: 1px solid rgba(105, 64, 119, 0.35);
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #130d16,
            #080609
        );

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.8);
}


/* =========================================================
   INDIVIDUAL PAGES
   ========================================================= */

.chronicle-page-sheet {
    position: relative;

    min-width: 0;
    min-height: 720px;

    color: #332a36;

    background:
        radial-gradient(ellipse at 14% 18%, rgba(91, 52, 20, 0.22) 0%, rgba(111, 70, 31, 0.11) 12%, transparent 27%),
        radial-gradient(ellipse at 52% 86%, rgba(92, 53, 22, 0.18) 0%, transparent 24%),
        radial-gradient(circle at 84% 62%, rgba(105, 62, 24, 0.12) 0%, transparent 18%),
        radial-gradient(ellipse at 67% 24%, rgba(112, 75, 36, 0.10) 0%, transparent 21%),
        radial-gradient(ellipse at center, transparent 45%, rgba(102, 65, 31, 0.08) 65%, rgba(76, 43, 19, 0.22) 88%, rgba(43, 24, 13, 0.40) 110%),
        linear-gradient(115deg, #b99969 0%, #d2b582 10%, #dfc694 30%, #d9bd89 57%, #caaa76 82%, #a98558 100%);

    overflow: hidden;
}


/* LEFT PAGE */

.chronicle-page-left {
    border-radius: 8px 0 0 8px;

    box-shadow:
        inset -25px 0 35px rgba(50, 30, 53, 0.18),
        inset 8px 0 20px rgba(255, 255, 255, 0.10);
}


/* RIGHT PAGE */

.chronicle-page-right {
    border-radius: 0 8px 8px 0;

    box-shadow:
        inset 25px 0 35px rgba(50, 30, 53, 0.18),
        inset -8px 0 20px rgba(255, 255, 255, 0.08);
}


/* AGED PAGE TEXTURE */

.chronicle-page-sheet::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.45;

    background:
        radial-gradient(
            circle at 20% 18%,
            rgba(75, 48, 78, 0.08),
            transparent 18%
        ),
        radial-gradient(
            circle at 80% 75%,
            rgba(55, 35, 60, 0.08),
            transparent 20%
        ),
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 4px,
            rgba(60, 40, 65, 0.018) 5px
        );
}


/* INNER ORNATE BORDER */

.chronicle-page-sheet::after {
    content: "";

    position: absolute;

    inset: 22px;

    border: 1px solid rgba(74, 47, 82, 0.23);

    pointer-events: none;
}


/* =========================================================
   PAGE CONTENT
   ========================================================= */

.chronicle-page-inner {
    position: relative;
    z-index: 2;

    padding: 70px 65px 80px;
}

.chronicle-page-number {
    position: absolute;

    top: 25px;

    color: rgba(67, 45, 72, 0.55);

    font-family: Georgia, serif;
    font-size: 12px;
    font-style: italic;
}

.chronicle-page-left .chronicle-page-number {
    left: 40px;
}

.chronicle-page-right .chronicle-page-number {
    right: 40px;
}

.chronicle-page-sheet .chronicle-section-label {
    color: #6d427b;
}

.chronicle-page-sheet h2 {
    margin: 13px 0 12px;

    color: #35263b;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 400;
}

.chronicle-ornament {
    margin: 20px 0 25px;

    color: #764783;

    font-size: 17px;
    letter-spacing: 8px;
}

.chronicle-page-intro {
    max-width: 470px;

    color: #655769;

    font-family: Georgia, serif;
    font-size: 15px;
    font-style: italic;
    line-height: 1.8;
}


/* =========================================================
   CENTER BINDING
   ========================================================= */

.chronicle-book-spine {
    position: absolute;

    z-index: 10;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 44px;

    transform: translateX(-50%);

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(38, 21, 42, 0.10) 15%,
            rgba(30, 17, 34, 0.28) 42%,
            rgba(22, 13, 25, 0.36) 50%,
            rgba(30, 17, 34, 0.28) 58%,
            rgba(38, 21, 42, 0.10) 85%,
            transparent 100%
        );
}


/* =========================================================
   PROLOGUE
   ========================================================= */

.chronicle-placeholder {
    margin-top: 40px;
    padding: 45px 25px;

    text-align: center;

    color: #756778;

    font-family: Georgia, serif;
    font-style: italic;

    border:
        1px dashed rgba(85, 53, 91, 0.30);

    background:
        rgba(80, 54, 85, 0.035);
}


/* =========================================================
   STORY
   ========================================================= */

.chronicle-story {
    margin-top: 35px;
}

.chronicle-entry {
    padding: 25px 0 32px;

    border-bottom:
        1px solid rgba(76, 48, 82, 0.17);
}

.chronicle-entry:last-child {
    border-bottom: 0;
}

.chronicle-entry time {
    display: block;

    margin-bottom: 9px;

    color: #795985;

    font-size: 9px;
    letter-spacing: 2px;

    text-transform: uppercase;
}

.chronicle-entry h3 {
    margin: 0 0 16px;

    color: #3c2b42;

    font-family: Georgia, serif;
    font-size: 25px;
    font-weight: 400;
}

.chronicle-entry p {
    margin: 0;

    color: #55495a;

    font-family: Georgia, serif;
    font-size: 15px;
    line-height: 1.9;
}

.chronicle-entry p::first-letter {
    float: left;

    margin: 7px 8px 0 0;

    color: #70437c;

    font-family: Georgia, serif;
    font-size: 48px;
    line-height: 35px;
}


/* =========================================================
   EMPTY CHAPTER
   ========================================================= */

.chronicle-empty {
    padding: 55px 15px;

    text-align: center;

    color: #766979;
}

.chronicle-empty > div {
    margin-bottom: 18px;

    color: #70457d;

    font-size: 18px;
    letter-spacing: 9px;
}

.chronicle-empty h3 {
    margin: 0 0 12px;

    color: #504054;

    font-family: Georgia, serif;
    font-size: 20px;
    font-weight: 400;
}

.chronicle-empty p {
    margin: 0;

    color: #756a78;

    font-family: Georgia, serif;
    font-size: 14px;
    font-style: italic;
    line-height: 1.7;
}


/* =========================================================
   PAGE TURN BUTTONS
   ========================================================= */

.chronicle-turn {
    position: absolute;

    z-index: 20;

    bottom: 20px;

    width: 45px;
    height: 45px;

    border: 1px solid rgba(78, 47, 86, 0.28);
    border-radius: 50%;

    background:
        rgba(82, 54, 88, 0.08);

    color: #684174;

    font-family: Georgia, serif;
    font-size: 28px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.chronicle-turn:hover {
    transform: scale(1.08);

    background:
        rgba(91, 54, 102, 0.16);
}

.chronicle-turn-back {
    left: 28px;
}

.chronicle-turn-next {
    right: 28px;
}


/* =========================================================
   CHAPTER LINK TARGET
   ========================================================= */

#chapter-one {
    scroll-margin-top: 90px;
}


/* =========================================================
   MOBILE — SINGLE PAGE
   ========================================================= */

@media (max-width: 800px) {

    .chronicle {
        width: min(100% - 22px, 1400px);
        padding-top: 35px;
    }

    .chronicle-cover {
        margin-bottom: 40px;
    }

    .chronicle-book {
        display: block;

        min-height: 0;
    }

    .chronicle-book-spine {
        display: none;
    }

    .chronicle-page-sheet {
        min-height: 620px;

        margin-bottom: 25px;

        border-radius: 8px;
    }

    .chronicle-page-left,
    .chronicle-page-right {
        box-shadow:
            inset 0 0 30px rgba(50, 30, 53, 0.13);
    }

    .chronicle-page-inner {
        padding:
            65px 35px
            80px;
    }

    .chronicle-page-sheet::after {
        inset: 14px;
    }

    .chronicle-turn {
        display: none;
    }

}
/* =========================================================
   EVERVEIL CHRONICLE — DISTRESSED PARCHMENT EDGES
   ========================================================= */

/* LEFT PAGE — torn outer edges with missing chunks */
.chronicle-page-left {
    clip-path: polygon(
        /* TOP EDGE */
        2% 1%,
        7% 0%,
        13% 0.7%,
        19% 0%,
        25% 0.5%,
        32% 0%,
        39% 0.8%,
        46% 0.1%,
        54% 0.6%,
        62% 0%,
        70% 0.7%,
        78% 0.1%,
        86% 0.6%,
        94% 0%,
        100% 0%,

        /* CENTER BINDING */
        100% 100%,

        /* BOTTOM EDGE */
        94% 99.4%,
        88% 100%,
        82% 99.2%,
        76% 99.8%,

        /* LARGE BOTTOM TEAR */
        71% 97.8%,
        68% 99.4%,
        64% 98.2%,
        60% 100%,

        52% 99.3%,
        44% 100%,
        36% 99.1%,
        29% 99.8%,
        22% 98.8%,
        15% 100%,
        8% 99.1%,
        2% 99.5%,

        /* OUTER LEFT EDGE */
        1% 94%,
        0% 88%,
        1.2% 82%,

        /* TORN-OUT SIDE CHUNK */
        0.4% 76%,
        2.5% 72%,
        0.3% 68%,

        1% 61%,
        0% 54%,
        1.3% 47%,
        0.2% 40%,

        /* DEEPER SIDE TEAR */
        2.2% 35%,
        0.5% 31%,
        1.4% 27%,

        0.2% 20%,
        1.2% 14%,
        0% 8%,
        2% 1%
    );
}


/* RIGHT PAGE — separate damage pattern */
.chronicle-page-right {
    clip-path: polygon(
        /* CENTER BINDING */
        0% 0%,

        /* TOP EDGE */
        7% 0.5%,
        14% 0%,
        21% 0.7%,
        28% 0.1%,
        35% 0.8%,
        43% 0%,
        51% 0.6%,
        59% 0.1%,
        67% 0.8%,
        74% 0%,

        /* MISSING TOP CHUNK */
        79% 0.4%,
        82% 2.2%,
        85% 0.3%,

        91% 0.7%,
        97% 0%,
        99% 1%,

        /* OUTER RIGHT EDGE */
        98.8% 7%,
        100% 13%,
        98.7% 19%,
        99.6% 26%,

        /* LARGE SIDE TEAR */
        97.4% 31%,
        99.4% 35%,
        97.8% 40%,

        99.5% 47%,
        98.6% 54%,
        100% 61%,
        98.8% 68%,

        /* SMALL SIDE NOTCH */
        99.5% 74%,
        97.7% 78%,
        99.2% 82%,

        98.6% 89%,
        100% 95%,
        98% 99%,

        /* BOTTOM EDGE */
        92% 99.3%,
        85% 100%,
        78% 99.2%,
        70% 99.8%,
        63% 98.9%,

        /* BOTTOM-RIGHT DAMAGE */
        58% 100%,
        54% 97.7%,
        50% 99.5%,
        46% 98.5%,
        42% 100%,

        34% 99.3%,
        26% 100%,
        18% 99.1%,
        10% 99.8%,
        0% 100%
    );
}


/* Weight and shadow beneath the damaged parchment */
.chronicle-page-left,
.chronicle-page-right {
    filter:
        drop-shadow(0 3px 2px rgba(47, 25, 10, 0.55))
        drop-shadow(0 10px 8px rgba(19, 9, 4, 0.35))
        drop-shadow(0 20px 25px rgba(0, 0, 0, 0.30));
}
/* =========================================================
   EVERVEIL CHRONICLE — PARCHMENT AGE & STAINS
   ========================================================= */

.chronicle-page-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background:

        /* LARGE FADED WATER STAIN */
        radial-gradient(
            ellipse at 17% 19%,
            transparent 0%,
            transparent 8%,
            rgba(91, 52, 24, 0.10) 9%,
            rgba(91, 52, 24, 0.16) 11%,
            rgba(91, 52, 24, 0.05) 14%,
            transparent 18%
        ),

        /* OLD BROWN BLOTCH */
        radial-gradient(
            ellipse at 82% 76%,
            rgba(80, 43, 17, 0.15) 0%,
            rgba(102, 62, 28, 0.09) 11%,
            transparent 24%
        ),

        /* SMALL UNEVEN STAIN */
        radial-gradient(
            circle at 26% 71%,
            rgba(82, 44, 17, 0.13) 0%,
            rgba(105, 67, 31, 0.06) 7%,
            transparent 15%
        ),

        /* TOP EDGE AGE */
        linear-gradient(
            to bottom,
            rgba(55, 29, 12, 0.26) 0%,
            rgba(89, 52, 23, 0.09) 3%,
            transparent 9%
        ),

        /* BOTTOM EDGE AGE */
        linear-gradient(
            to top,
            rgba(48, 25, 10, 0.32) 0%,
            rgba(88, 49, 20, 0.12) 4%,
            transparent 11%
        );

    mix-blend-mode: multiply;
}


/* LEFT PAGE gets its own dirt pattern */
.chronicle-page-left::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background:
        radial-gradient(
            ellipse at 4% 42%,
            rgba(55, 28, 10, 0.28),
            transparent 16%
        ),

        radial-gradient(
            ellipse at 15% 94%,
            rgba(65, 34, 12, 0.24),
            transparent 18%
        ),

        radial-gradient(
            circle at 72% 13%,
            rgba(93, 54, 23, 0.11),
            transparent 13%
        );
}


/* RIGHT PAGE gets different wear */
.chronicle-page-right::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;

    background:
        radial-gradient(
            ellipse at 96% 30%,
            rgba(52, 27, 10, 0.30),
            transparent 17%
        ),

        radial-gradient(
            ellipse at 89% 91%,
            rgba(65, 34, 12, 0.25),
            transparent 20%
        ),

        radial-gradient(
            circle at 24% 17%,
            rgba(101, 59, 24, 0.10),
            transparent 14%
        );
}


/* Keep all Chronicle writing above the aging */
.chronicle-page-inner {
    position: relative;
    z-index: 2;
}
/* =========================================================
   EVERVEIL CHRONICLE — DARK AGED EDGES
   ========================================================= */

/* Age the LEFT page around its outer perimeter */
.chronicle-page-left {
    box-shadow:
        inset 18px 0 24px -16px rgba(54, 27, 9, 0.75),
        inset 0 18px 22px -17px rgba(63, 32, 11, 0.62),
        inset 0 -20px 25px -17px rgba(45, 22, 8, 0.72);
}


/* Age the RIGHT page around its outer perimeter */
.chronicle-page-right {
    box-shadow:
        inset -18px 0 24px -16px rgba(54, 27, 9, 0.75),
        inset 0 18px 22px -17px rgba(63, 32, 11, 0.62),
        inset 0 -20px 25px -17px rgba(45, 22, 8, 0.72);
}


/* Stronger centuries-old discoloration near LEFT outer edge */
.chronicle-page-left::after {
    background:
        radial-gradient(
            ellipse at 0% 28%,
            rgba(47, 22, 7, 0.42) 0%,
            rgba(74, 39, 14, 0.20) 8%,
            transparent 22%
        ),

        radial-gradient(
            ellipse at 3% 76%,
            rgba(55, 27, 8, 0.38) 0%,
            rgba(82, 45, 16, 0.17) 10%,
            transparent 24%
        ),

        radial-gradient(
            ellipse at 22% 100%,
            rgba(51, 25, 8, 0.34) 0%,
            transparent 22%
        ),

        radial-gradient(
            circle at 72% 13%,
            rgba(93, 54, 23, 0.11),
            transparent 13%
        );
}


/* Different centuries-old damage on RIGHT page */
.chronicle-page-right::after {
    background:
        radial-gradient(
            ellipse at 100% 24%,
            rgba(46, 21, 7, 0.43) 0%,
            rgba(77, 40, 13, 0.21) 9%,
            transparent 23%
        ),

        radial-gradient(
            ellipse at 97% 68%,
            rgba(53, 25, 8, 0.39) 0%,
            rgba(83, 45, 16, 0.18) 10%,
            transparent 24%
        ),

        radial-gradient(
            ellipse at 80% 100%,
            rgba(49, 23, 7, 0.35) 0%,
            transparent 23%
        ),

        radial-gradient(
            circle at 24% 17%,
            rgba(101, 59, 24, 0.10),
            transparent 14%
        );
}
/* =========================================================
   EVERVEIL CHRONICLE — OLD PAPER CREASES
   ========================================================= */

/* Fine age lines across BOTH pages */
.chronicle-page-inner::before {
    content: "";
    position: absolute;
    inset: -35px;
    pointer-events: none;
    z-index: -1;

    background:
        /* faint diagonal crease */
        linear-gradient(
            32deg,
            transparent 0%,
            transparent 46%,
            rgba(82, 48, 21, 0.07) 47%,
            rgba(255, 240, 190, 0.09) 48%,
            transparent 49%,
            transparent 100%
        ),

        /* second soft crease */
        linear-gradient(
            148deg,
            transparent 0%,
            transparent 67%,
            rgba(73, 41, 17, 0.06) 68%,
            rgba(255, 239, 187, 0.07) 69%,
            transparent 70%,
            transparent 100%
        );
}


/* LEFT PAGE — old vertical fold */
.chronicle-page-left .chronicle-page-inner::after {
    content: "";
    position: absolute;

    top: -35px;
    bottom: -35px;
    left: 29%;

    width: 5px;

    pointer-events: none;
    z-index: -1;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(75, 42, 17, 0.10),
            rgba(242, 217, 164, 0.12),
            transparent
        );

    filter: blur(1px);
    opacity: 0.7;
}


/* RIGHT PAGE — different old fold */
.chronicle-page-right .chronicle-page-inner::after {
    content: "";
    position: absolute;

    left: -35px;
    right: -35px;
    top: 63%;

    height: 5px;

    pointer-events: none;
    z-index: -1;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(73, 40, 16, 0.11),
            rgba(242, 217, 164, 0.12),
            transparent
        );

    filter: blur(1px);
    opacity: 0.7;
}
/* =========================================================
   EVERVEIL CHRONICLE — ANCIENT BOOK SPINE
   ========================================================= */

.chronicle-book-spine {
    position: absolute;
    top: 1.5%;
    bottom: 1.5%;
    left: 50%;

    width: 34px;
    transform: translateX(-50%);

    z-index: 8;
    pointer-events: none;

    border-radius: 45% 45% 35% 35%;

    background:
        /* faint purple magical highlight */
        linear-gradient(
            to right,
            transparent 0%,
            rgba(122, 72, 150, 0.16) 28%,
            rgba(191, 135, 210, 0.22) 48%,
            rgba(88, 42, 112, 0.18) 68%,
            transparent 100%
        ),

        /* old leather spine */
        linear-gradient(
            to right,
            #241421 0%,
            #43213f 18%,
            #63335f 42%,
            #3d1d3a 67%,
            #1b101b 100%
        );

    box-shadow:
        -14px 0 20px rgba(31, 15, 8, 0.45),
        14px 0 20px rgba(31, 15, 8, 0.45),
        inset 5px 0 7px rgba(255, 218, 170, 0.08),
        inset -6px 0 9px rgba(0, 0, 0, 0.50),
        0 8px 15px rgba(0, 0, 0, 0.45);
}


/* worn decorative line running down the spine */
.chronicle-book-spine::before {
    content: "";
    position: absolute;

    top: 5%;
    bottom: 5%;
    left: 50%;

    width: 2px;
    transform: translateX(-50%);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(215, 173, 221, 0.45) 12%,
            rgba(124, 69, 143, 0.28) 48%,
            rgba(215, 173, 221, 0.38) 86%,
            transparent
        );

    box-shadow:
        0 0 7px rgba(151, 78, 181, 0.30);

    opacity: 0.8;
}


/* dark gutter where each page disappears into the binding */
.chronicle-page-left {
    box-shadow:
        inset -24px 0 28px -22px rgba(30, 14, 8, 0.75),
        inset 18px 0 24px -16px rgba(54, 27, 9, 0.75),
        inset 0 18px 22px -17px rgba(63, 32, 11, 0.62),
        inset 0 -20px 25px -17px rgba(45, 22, 8, 0.72);
}

.chronicle-page-right {
    box-shadow:
        inset 24px 0 28px -22px rgba(30, 14, 8, 0.75),
        inset -18px 0 24px -16px rgba(54, 27, 9, 0.75),
        inset 0 18px 22px -17px rgba(63, 32, 11, 0.62),
        inset 0 -20px 25px -17px rgba(45, 22, 8, 0.72);
}
/* =========================================================
   EVERVEIL CHRONICLE — WORN PAGE CORNERS
   ========================================================= */

/* LEFT PAGE — battered upper-left and lower-left corners */
.chronicle-page-left .chronicle-page-inner {
    background:
        radial-gradient(
            ellipse at 0% 0%,
            rgba(55, 27, 9, 0.26) 0%,
            rgba(88, 49, 18, 0.12) 8%,
            transparent 19%
        ),
        radial-gradient(
            ellipse at 0% 100%,
            rgba(45, 21, 7, 0.34) 0%,
            rgba(82, 43, 14, 0.15) 10%,
            transparent 22%
        );
}


/* RIGHT PAGE — different corner damage */
.chronicle-page-right .chronicle-page-inner {
    background:
        radial-gradient(
            ellipse at 100% 0%,
            rgba(52, 25, 8, 0.31) 0%,
            rgba(91, 50, 18, 0.13) 9%,
            transparent 20%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            rgba(43, 20, 7, 0.38) 0%,
            rgba(79, 41, 13, 0.17) 10%,
            transparent 23%
        );
}


/* Slight curled-paper highlight inside the bottom corners */
.chronicle-page-left .chronicle-page-inner {
    box-shadow:
        inset 8px -9px 13px -12px rgba(255, 231, 177, 0.45);
}

.chronicle-page-right .chronicle-page-inner {
    box-shadow:
        inset -8px -9px 13px -12px rgba(255, 231, 177, 0.45);
}
/* =========================================================
   EVERVEIL CHRONICLE — MAGICAL PAGE ORNAMENTS
   ========================================================= */

/* Decorative crescent above the Prologue */
.chronicle-page-left .chronicle-page-number::before {
    content: "☾";
    display: block;

    margin-bottom: 10px;

    font-size: 30px;
    line-height: 1;

    color: rgba(92, 43, 105, 0.72);

    text-shadow:
        0 0 6px rgba(122, 64, 145, 0.20);

    transform: rotate(-8deg);
}


/* Decorative crescent above Chapter One */
.chronicle-page-right .chronicle-page-number::before {
    content: "☽";
    display: block;

    margin-bottom: 10px;

    font-size: 30px;
    line-height: 1;

    color: rgba(92, 43, 105, 0.72);

    text-shadow:
        0 0 6px rgba(122, 64, 145, 0.20);

    transform: rotate(8deg);
}


/* Faded occult marking in bottom-left parchment */
.chronicle-page-left .chronicle-page-inner::before {
    content: "✦  ☾  ✧";

    position: absolute;
    left: 18px;
    bottom: 12px;

    width: auto;
    height: auto;
    inset: auto auto 12px 18px;

    background: none;

    font-size: 22px;
    letter-spacing: 7px;

    color: rgba(77, 37, 85, 0.18);

    transform: rotate(-7deg);

    pointer-events: none;
    z-index: -1;
}


/* Different faded marking on right parchment */
.chronicle-page-right .chronicle-page-inner::before {
    content: "✧  ☽  ✦";

    position: absolute;
    right: 18px;
    bottom: 12px;

    width: auto;
    height: auto;
    inset: auto 18px 12px auto;

    background: none;

    font-size: 22px;
    letter-spacing: 7px;

    color: rgba(77, 37, 85, 0.18);

    transform: rotate(6deg);

    pointer-events: none;
    z-index: -1;
}


/* Give the existing center ornaments a little enchanted ink */
.chronicle-ornament {
    color: #673b72;

    text-shadow:
        0 0 7px rgba(111, 58, 133, 0.20);

    letter-spacing: 8px;
}


/* Thin antique divider beneath each page heading */
.chronicle-page-sheet h2::after {
    content: "";

    display: block;

    width: 115px;
    height: 1px;

    margin: 14px auto 4px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(88, 45, 96, 0.60),
            rgba(119, 70, 126, 0.80),
            rgba(88, 45, 96, 0.60),
            transparent
        );
}
/* =========================================================
   EVERVEIL CHRONICLE — PAGE TURN CONTROLS
   ========================================================= */

.chronicle-turn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 52px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid rgba(150, 91, 166, 0.55);
    border-radius: 50% 50% 45% 45%;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(119, 63, 133, 0.38),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #3b2639 0%,
            #1d121d 48%,
            #0d090e 100%
        );

    color: #c79bd0;

    font-family: Georgia, serif;
    font-size: 42px;
    line-height: 1;

    cursor: pointer;

    z-index: 15;

    box-shadow:
        inset 0 1px 1px rgba(255, 220, 255, 0.12),
        inset 0 -5px 9px rgba(0, 0, 0, 0.55),
        0 5px 12px rgba(0, 0, 0, 0.55),
        0 0 12px rgba(113, 52, 135, 0.15);

    text-shadow:
        0 0 7px rgba(194, 124, 211, 0.55);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        color 0.2s ease;
}


/* LEFT TURN CONTROL */
.chronicle-turn-back {
    left: -27px;
}


/* RIGHT TURN CONTROL */
.chronicle-turn-next {
    right: -27px;
}


/* Magical response when hovered */
.chronicle-turn:hover {
    color: #ead3ef;

    border-color: rgba(205, 145, 220, 0.90);

    box-shadow:
        inset 0 1px 2px rgba(255, 225, 255, 0.18),
        inset 0 -5px 9px rgba(0, 0, 0, 0.55),
        0 7px 15px rgba(0, 0, 0, 0.60),
        0 0 18px rgba(146, 72, 170, 0.48),
        0 0 30px rgba(112, 50, 139, 0.20);

    text-shadow:
        0 0 9px rgba(224, 167, 237, 0.75);
}


/* Preserve vertical centering while button lifts slightly */
.chronicle-turn-back:hover {
    transform: translateY(-50%) translateX(-3px) scale(1.06);
}

.chronicle-turn-next:hover {
    transform: translateY(-50%) translateX(3px) scale(1.06);
}


/* Pressed feeling */
.chronicle-turn:active {
    filter: brightness(0.85);
}


/* Small decorative diamond */
.chronicle-turn::after {
    content: "◆";

    position: absolute;
    bottom: 7px;
    left: 50%;

    transform: translateX(-50%);

    font-size: 7px;

    color: rgba(190, 126, 203, 0.65);

    text-shadow:
        0 0 5px rgba(157, 78, 181, 0.45);
}
/* =========================================================
   EVERVEIL CHRONICLE — LEATHER BOOK BENEATH PAGES
   ========================================================= */

.chronicle-book {
    position: relative;

    padding: 16px 20px 20px;

    border-radius: 18px 18px 22px 22px;

    background:
        /* subtle worn patches */
        radial-gradient(
            ellipse at 12% 18%,
            rgba(113, 66, 76, 0.18) 0%,
            transparent 24%
        ),

        radial-gradient(
            ellipse at 88% 76%,
            rgba(88, 42, 66, 0.16) 0%,
            transparent 27%
        ),

        /* faint purple age */
        radial-gradient(
            ellipse at 50% 50%,
            rgba(91, 43, 104, 0.12) 0%,
            transparent 58%
        ),

        /* dark leather */
        linear-gradient(
            135deg,
            #24151f 0%,
            #321c2b 18%,
            #1c111a 48%,
            #2b1726 74%,
            #140c13 100%
        );

    border:
        2px solid rgba(83, 48, 70, 0.80);

    box-shadow:
        inset 0 0 0 3px rgba(15, 8, 13, 0.65),
        inset 0 0 28px rgba(0, 0, 0, 0.72),

        0 8px 12px rgba(0, 0, 0, 0.42),
        0 20px 35px rgba(0, 0, 0, 0.48),
        0 32px 60px rgba(0, 0, 0, 0.32);
}


/* Inner decorative leather border */
.chronicle-book::before {
    content: "";

    position: absolute;
    inset: 7px;

    border:
        1px solid rgba(129, 75, 111, 0.34);

    border-radius: 13px 13px 17px 17px;

    box-shadow:
        inset 0 0 7px rgba(0, 0, 0, 0.65);

    pointer-events: none;

    z-index: 0;
}


/* Worn outer leather rim */
.chronicle-book::after {
    content: "";

    position: absolute;
    inset: 2px;

    border-radius: 16px 16px 20px 20px;

    border:
        1px solid rgba(31, 15, 25, 0.95);

    box-shadow:
        inset 0 0 5px rgba(167, 99, 139, 0.13),
        inset 0 0 14px rgba(0, 0, 0, 0.55);

    pointer-events: none;

    z-index: 0;
}


/* Keep parchment and spine above the leather */
.chronicle-page-sheet {
    z-index: 2;
}

.chronicle-book-spine {
    z-index: 8;
}
/* =========================================================
   EVERVEIL CHRONICLE — CLOSED BOOK COVER
   ========================================================= */

.chronicle-closed-cover {
    position: relative;
    width: min(620px, 92%);
    min-height: 720px;

    margin: 45px auto 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 24px;

    border-radius: 10px 24px 24px 10px;

    background:
        radial-gradient(
            ellipse at 35% 25%,
            rgba(111, 55, 108, 0.18),
            transparent 34%
        ),
        radial-gradient(
            ellipse at 72% 78%,
            rgba(92, 43, 84, 0.15),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #291622 0%,
            #3a1d31 22%,
            #21121d 55%,
            #321827 78%,
            #170c14 100%
        );

    border: 3px solid #160b12;

    box-shadow:
        inset 18px 0 25px rgba(0, 0, 0, 0.58),
        inset -8px 0 15px rgba(104, 57, 91, 0.13),
        inset 0 0 55px rgba(0, 0, 0, 0.70),
        0 8px 8px rgba(0, 0, 0, 0.38),
        0 25px 35px rgba(0, 0, 0, 0.50),
        0 40px 70px rgba(0, 0, 0, 0.34);

    overflow: hidden;
}


/* worn leather texture */
.chronicle-closed-cover::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            17deg,
            transparent 0px,
            transparent 13px,
            rgba(255, 255, 255, 0.012) 14px,
            transparent 15px
        ),
        repeating-linear-gradient(
            103deg,
            transparent 0px,
            transparent 21px,
            rgba(0, 0, 0, 0.055) 22px,
            transparent 24px
        );

    opacity: 0.75;
}


/* thick book spine */
.chronicle-closed-cover::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 38px;

    background:
        linear-gradient(
            to right,
            #0e070c,
            #24121e 28%,
            #4a2441 55%,
            #23111d 80%,
            #0c060a
        );

    border-right: 1px solid rgba(146, 85, 132, 0.25);

    box-shadow:
        8px 0 15px rgba(0, 0, 0, 0.45),
        inset -3px 0 5px rgba(173, 95, 153, 0.10);
}


/* ornate inset frame */
.chronicle-cover-frame {
    position: relative;
    z-index: 2;

    width: 100%;
    min-height: 660px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 55px 45px;

    text-align: center;

    border:
        1px solid rgba(164, 105, 167, 0.52);

    outline:
        1px solid rgba(82, 47, 84, 0.60);

    outline-offset: -9px;

    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.58),
        0 0 16px rgba(115, 58, 130, 0.10);
}


/* large moon seal */
.chronicle-cover-symbol {
    position: relative;

    width: 112px;
    height: 112px;

    margin-bottom: 30px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(181, 119, 188, 0.52);

    border-radius: 50%;

    box-shadow:
        inset 0 0 22px rgba(118, 60, 137, 0.18),
        0 0 20px rgba(105, 47, 130, 0.16);
}

.cover-moon {
    font-size: 72px;
    line-height: 1;

    color: #a878ad;

    text-shadow:
        0 0 8px rgba(177, 106, 194, 0.35);
}

.cover-star {
    position: absolute;

    font-size: 20px;

    color: #d1a7d5;

    transform: translate(14px, 1px);

    text-shadow:
        0 0 8px rgba(213, 151, 226, 0.50);
}


/* typography */

.chronicle-cover-small-title {
    margin-bottom: 6px;

    font-size: 11px;
    letter-spacing: 8px;

    color: rgba(205, 167, 206, 0.60);
}

.chronicle-cover-frame h1 {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: clamp(42px, 7vw, 70px);
    font-weight: normal;

    letter-spacing: 7px;

    color: #c6a0c5;

    text-shadow:
        0 2px 2px #090408,
        0 0 11px rgba(151, 83, 160, 0.28);
}

.chronicle-cover-divider {
    margin: 15px 0;

    color: #8f6094;

    letter-spacing: 10px;

    opacity: 0.75;
}

.chronicle-cover-frame h2 {
    margin: 0 0 42px;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 25px;
    font-weight: normal;

    letter-spacing: 13px;

    color: #9d779f;
}


/* character stamped into cover */

.chronicle-cover-owner {
    font-family: Georgia, "Times New Roman", serif;

    font-size: 18px;

    letter-spacing: 3px;

    color: #c2a5be;
}

.chronicle-cover-player-title {
    margin-top: 7px;

    font-size: 10px;

    letter-spacing: 5px;

    text-transform: uppercase;

    color: rgba(183, 145, 181, 0.58);
}


/* OPEN button */

.chronicle-open-button {
    margin-top: 48px;

    padding: 13px 29px;

    border:
        1px solid rgba(168, 102, 179, 0.55);

    border-radius: 3px;

    background:
        linear-gradient(
            145deg,
            rgba(73, 36, 70, 0.80),
            rgba(24, 12, 23, 0.95)
        );

    color: #cda9d0;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 11px;

    letter-spacing: 4px;

    cursor: pointer;

    box-shadow:
        inset 0 0 12px rgba(131, 65, 145, 0.13),
        0 5px 13px rgba(0, 0, 0, 0.45);

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease;
}

.chronicle-open-button:hover {
    color: #f0d9f2;

    border-color: rgba(210, 145, 220, 0.90);

    box-shadow:
        inset 0 0 15px rgba(151, 75, 169, 0.20),
        0 5px 15px rgba(0, 0, 0, 0.50),
        0 0 20px rgba(137, 62, 158, 0.32);

    transform: translateY(-2px);
}
/* =========================================================
   EVERVEIL CHRONICLE — OPEN / CLOSED STATES
   ========================================================= */

.chronicle-book {
    display: none;
}

.chronicle-page.is-open .chronicle-closed-cover {
    display: none;
}

.chronicle-page.is-open .chronicle-book {
    display: grid;
}
/* =========================================================
   EVERVEIL CHRONICLE — DAILY MARKS
   ========================================================= */

.daily-marks {
    width: 100%;
    margin-top: 22px;
}


/* DAILY MARKS heading + counter */
.daily-marks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 14px;
    padding-bottom: 7px;

    border-bottom: 1px solid rgba(78, 42, 67, 0.28);

    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 3px;

    color: #5d365f;
}

.daily-marks-count {
    font-size: 9px;
    letter-spacing: 2px;

    color: rgba(74, 47, 60, 0.65);
}


/* Two columns × five rows */
.daily-marks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 8px 10px;
}


/* Individual Mark */
.daily-mark {
    min-width: 0;
    min-height: 62px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 7px 8px;

    border: 1px solid rgba(77, 45, 62, 0.22);
    border-radius: 4px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 245, 213, 0.16),
            rgba(91, 54, 30, 0.05)
        );

    box-shadow:
        inset 0 0 9px rgba(75, 40, 20, 0.06);
}


/* Circular badge seal */
.daily-mark-seal {
    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(92, 51, 96, 0.48);
    border-radius: 50%;

    color: #68416c;

    font-family: Georgia, serif;
    font-size: 17px;

    background:
        radial-gradient(
            circle,
            rgba(113, 69, 117, 0.13),
            rgba(65, 38, 54, 0.03) 68%,
            transparent 70%
        );

    box-shadow:
        inset 0 0 7px rgba(75, 39, 77, 0.10);
}


/* Mark text */
.daily-mark-info {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;

    text-align: left;
}

.daily-mark-info strong {
    overflow: hidden;

    color: #4a3443;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 10px;

    letter-spacing: 0.5px;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.daily-mark-info span {
    color: rgba(63, 48, 54, 0.62);

    font-size: 8px;
    line-height: 1.25;
}


/* LOCKED MARKS */
.daily-mark.locked {
    opacity: 0.60;
}

.daily-mark.locked .daily-mark-seal {
    filter: grayscale(0.65);

    color: rgba(65, 50, 59, 0.50);

    border-color: rgba(70, 53, 61, 0.30);
}


/* View complete collection */
.view-all-marks {
    display: block;

    margin: 16px auto 0;
    padding: 8px 17px;

    border: 1px solid rgba(91, 48, 96, 0.42);
    border-radius: 3px;

    background:
        rgba(81, 44, 83, 0.07);

    color: #603b64;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 9px;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.view-all-marks:hover {
    color: #412344;

    background:
        rgba(102, 55, 107, 0.13);

    border-color:
        rgba(91, 48, 96, 0.68);

    box-shadow:
        0 0 9px rgba(89, 45, 99, 0.12);
}
.daily-mark-mastery {
    display: block;
    margin-top: 3px;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.72;
}

.daily-mark.earned .daily-mark-mastery {
    opacity: 1;
    font-weight: 700;
}