/* ===========================================
   FRIEREN — Beyond Journey's End Theme
   White hair, golden staff, ancient light
   Centuries of quiet, one mage walking alone
   =========================================== */

.frieren-theme {
    --panel-accent: #f0e8c0;   /* warm parchment gold — her staff, her age */
}

.frieren-theme .manga-show-content {
    background: radial-gradient(ellipse at top, rgba(240, 232, 192, 0.06) 0%, transparent 50%), radial-gradient(ellipse at bottom left, rgba(200, 220, 200, 0.04) 0%, transparent 50%);
}

.frieren-theme .dedication-card {
    border-color: #c8b870;
    background: linear-gradient(135deg, rgba(15, 16, 20, 0.96) 0%, rgba(22, 22, 28, 0.92) 100%);
    box-shadow: 0 0 40px rgba(200, 184, 112, 0.2), 0 0 80px rgba(240, 232, 192, 0.06), inset 0 0 40px rgba(200, 184, 112, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.frieren-theme .dedication-card::before {
    background: linear-gradient(90deg,
    transparent,
    rgba(200, 184, 112, 0.4),
    #f0e8c0,
    #ffffff,
    #f0e8c0,
    rgba(200, 184, 112, 0.4),
    transparent);
    background-size: 200% 100%;
    animation: staffLight 7s ease-in-out infinite;
}

/* Golden staff sweeping slowly — she walks unhurried */
@keyframes staffLight {
    0%   { background-position: 200% 50%; opacity: 0.4; }
    50%  { background-position: 0% 50%;   opacity: 1; }
    100% { background-position: -200% 50%; opacity: 0.4; }
}

/* Frieren speaks in understatement — warm white, not cold */
.frieren-theme .dedication-tagline {
    color: #faf6ec;
    text-shadow:
            0 0 20px rgba(255, 246, 202, 0.96),
            0 0 50px rgba(121, 97, 12, 0.35);
    font-style: italic;
    letter-spacing: 0.05em;
}

/* Dedication body slightly warmer than default */
.frieren-theme .dedication-body {
    color: #d8d4c8;
}

/* Icon — slow float, centuries-patient,
   pulses gold then whites out like ancient magic */
.frieren-theme .dedication-icon i {
    color: #f0e8c0;
    text-shadow:
            0 0 20px rgb(255, 248, 205),
            0 0 50px rgba(200, 184, 112, 0.3);
    animation: frierenEternal 9s ease-in-out infinite;
}

@keyframes frierenEternal {
    /* Long stillness — she has watched mountains form */
    0%, 70%, 100% {
        transform: translateY(0) scale(1);
        opacity: 0.7;
        color: #f0e8c0;
        text-shadow:
                0 0 20px rgba(240, 232, 192, 0.93),
                0 0 50px rgba(200, 184, 112, 0.2);
    }
    /* Gentle ascent — casting a spell quietly */
    35% {
        transform: translateY(-8px) scale(1.06);
        opacity: 1;
        color: #ffffff;
        text-shadow:
                0 0 30px rgba(255, 255, 255, 0.9),
                0 0 70px rgba(240, 232, 192, 0.82),
                0 0 120px rgba(94, 87, 5, 0.58);
    }
    /* Soft return — no drama */
    80% {
        transform: translateY(-2px) scale(1.01);
        opacity: 0.85;
    }
}

.frieren-theme .manga-hero-banner {
    filter: saturate(0.4) brightness(1.05) contrast(1.05);
}

.frieren-theme .manga-hero-overlay {
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(15, 14, 10, 0.5) 55%,
            rgba(30, 26, 16, 0.88) 100%
    );
}

.frieren-theme .panel-glow-bar {
    background: linear-gradient(90deg,
    transparent,
    rgba(200, 184, 112, 0.4),
    #f0e8c0,
    #ffffff,
    #f0e8c0,
    rgba(200, 184, 112, 0.4),
    transparent);
    background-size: 200% 100%;
    animation: staffLight 7s ease-in-out infinite;
}

.frieren-theme .manga-panel-frame {
    border-color: rgba(200, 184, 112, 0.43);
    filter: saturate(0.5) brightness(0.95);
}

.frieren-theme .manga-panel-frame:hover {
    border-color: #f0e8c0;
    box-shadow: 0 0 30px rgba(240, 232, 192, 0.4), 0 0 60px rgba(200, 184, 112, 0.15);
    filter: saturate(0.8) brightness(1.05);
}

/* Section titles — white fading to gold */
.frieren-theme .section-title {
    background: linear-gradient(45deg,
    #c8b870, #f0e8c0, #ffffff, #f0e8c0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.frieren-theme .section-line {
    background: linear-gradient(90deg,
    transparent, #c8b870, #f0e8c0, #ffffff, #f0e8c0, #c8b870, transparent);
    box-shadow: 0 0 15px rgba(240, 232, 192, 0.4), 0 0 40px rgba(200, 184, 112, 0.15);
}

/* Stat rows inherit golden glow */
.frieren-theme .stat-value {
    color: #f0e8c0;
    text-shadow: 0 0 8px rgba(166, 141, 12, 0.58);
}

.frieren-theme .cyber-button.secondary
{
    border-color: #fde68b;
    color: #faf6ec;
    box-shadow: 0 0 10px rgba(200, 184, 112, 0.2);
}

.frieren-theme .cyber-button.secondary:hover {
    background: rgba(240, 232, 192, 0.08);
    border-color: #fff4bf;
    box-shadow: 0 0 30px rgba(240, 232, 192, 0.4), 0 0 60px rgba(200, 184, 112, 0.15);
    color: #ffffff;
}

/* Recording mode */
.recording-mode .frieren-theme .dedication-icon i {
    animation: none !important;
    transform: none !important;
    color: #f0e8c0 !important;
    text-shadow: 0 0 10px rgba(240, 232, 192, 0.5) !important;
}

.recording-mode .frieren-theme .panel-glow-bar,
.recording-mode .frieren-theme .dedication-card::before {
    animation: none !important;
    background-position: 0% 50% !important;
}

/* ===========================================
   FRIEREN — Spellbook × Starfield Section
   =========================================== */

.frieren-spellbook {
    position: relative;
    width: 100%;
    min-height: 580px;
    margin-bottom: 3rem;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(253, 210, 20, 0.66);
    background: radial-gradient(
            ellipse at 30% 50%,
            rgba(20, 18, 10, 0.95) 0%,
            rgba(8, 8, 14, 0.98) 60%,
            rgba(4, 4, 10, 1) 100%
    );
    box-shadow:
            inset 0 0 100px rgba(200, 184, 112, 0.04),
            0 0 60px rgba(200, 184, 112, 0.08);
}

/* ── Starfield canvas layer ── */
.frieren-stars {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Generate 60 stars via repeated box-shadows on a tiny element */
.frieren-stars::before,
.frieren-stars::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: transparent;
    animation: starDrift 90s linear infinite;
}

.frieren-stars::before {
    box-shadow:
        /* Layer 1 — small dim stars */
            80px  40px 0 rgba(240, 232, 192, 0.35),
            150px 120px 0 rgba(255, 255, 240, 0.2),
            230px  60px 0 rgba(200, 184, 112, 0.4),
            310px 180px 0 rgba(240, 232, 192, 0.25),
            420px  30px 0 rgba(255, 255, 255, 0.15),
            500px 140px 0 rgba(200, 184, 112, 0.3),
            580px  80px 0 rgba(240, 232, 192, 0.2),
            660px 200px 0 rgba(255, 255, 240, 0.35),
            740px  50px 0 rgba(200, 184, 112, 0.25),
            820px 160px 0 rgba(240, 232, 192, 0.3),
            100px 260px 0 rgba(200, 184, 112, 0.2),
            190px 320px 0 rgba(255, 255, 240, 0.3),
            270px 290px 0 rgba(240, 232, 192, 0.4),
            360px 350px 0 rgba(200, 184, 112, 0.2),
            450px 280px 0 rgba(255, 255, 255, 0.18),
            540px 420px 0 rgba(240, 232, 192, 0.3),
            620px 360px 0 rgba(200, 184, 112, 0.35),
            710px 310px 0 rgba(255, 255, 240, 0.2),
            790px 440px 0 rgba(240, 232, 192, 0.25),
            870px 380px 0 rgba(200, 184, 112, 0.3),
            50px  480px 0 rgba(255, 255, 240, 0.2),
            140px 500px 0 rgba(200, 184, 112, 0.25),
            220px 460px 0 rgba(240, 232, 192, 0.3),
            300px 530px 0 rgba(255, 255, 255, 0.12),
            400px 490px 0 rgba(200, 184, 112, 0.2),
            480px 545px 0 rgba(240, 232, 192, 0.28),
            560px 510px 0 rgba(200, 184, 112, 0.22),
            640px 470px 0 rgba(255, 255, 240, 0.3),
            720px 550px 0 rgba(240, 232, 192, 0.18),
            800px 500px 0 rgba(200, 184, 112, 0.3);
    animation-duration: 90s;
}

.frieren-stars::after {
    box-shadow:
        /* Layer 2 — slightly brighter accent stars */
            60px  90px 1px rgba(240, 232, 192, 0.5),
            180px  20px 1px rgba(255, 255, 255, 0.4),
            340px 100px 1px rgba(200, 184, 112, 0.6),
            490px  70px 1px rgba(240, 232, 192, 0.45),
            630px 130px 1px rgba(255, 255, 240, 0.5),
            770px  40px 1px rgba(200, 184, 112, 0.55),
            120px 380px 1px rgba(240, 232, 192, 0.4),
            260px 430px 1px rgba(255, 255, 255, 0.35),
            400px 400px 1px rgba(200, 184, 112, 0.5),
            550px 460px 1px rgba(240, 232, 192, 0.4),
            700px 390px 1px rgba(255, 255, 240, 0.45),
            840px 430px 1px rgba(200, 184, 112, 0.5),
                /* Twinkling bright points */
            200px 240px 2px rgba(255, 255, 240, 0.7),
            500px 300px 2px rgba(240, 232, 192, 0.65),
            750px 200px 2px rgba(200, 184, 112, 0.7);
    animation-duration: 120s;
    animation-delay: -40s;
}

@keyframes starDrift {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* Constellation lines — SVG overlay */
.frieren-constellation {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.18;
}

.frieren-constellation line {
    stroke: rgba(200, 184, 112, 0.6);
    stroke-width: 0.6;
    stroke-dasharray: 3 5;
    animation: constellationBreath 8s ease-in-out infinite;
}

@keyframes constellationBreath {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 1; }
}

/* ── Inner spellbook layout ── */
.spellbook-inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 2px 1fr;
    gap: 0;
    min-height: 580px;
    padding: 0;
}

/* Centre spine */
.spellbook-spine {
    width: 2px;
    background: linear-gradient(to bottom, transparent 0%, rgba(200, 184, 112, 0.15) 15%, rgba(200, 184, 112, 0.4)  40%,
    rgba(240, 232, 192, 0.5)  50%,
    rgba(200, 184, 112, 0.4)  60%,
    rgba(200, 184, 112, 0.15) 85%,
    transparent 100%);
    align-self: stretch;
    animation: spineGlow 5s ease-in-out infinite;
    position: relative;
}

/* Spine glow orb at centre */
.spellbook-spine::after {
    content: '✦';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.835rem;
    color: rgba(255, 241, 180, 0.89);
    text-shadow: 0 0 12px rgba(200, 184, 112, 0.9),
    0 0 30px rgba(200, 184, 112, 0.4);
    animation: spineGlow 5s ease-in-out infinite;
}

@keyframes spineGlow {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1; }
}

/* ── LEFT PAGE — Portrait + Title ── */
.spellbook-left {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.8rem;
    position: relative;
}

/* Subtle aged-paper vignette on left page */
.spellbook-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(200, 184, 112, 0.03) 0%, transparent 70%);
    pointer-events: none;
}

/* Portrait — arched window shape */
.frieren-portrait-arch {
    width: 200px;
    height: 260px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    /* Gothic arch clip */
    clip-path: polygon(
            0% 100%,
            0% 35%,
            5% 20%,
            15% 8%,
            30% 2%,
            50% 0%,
            70% 2%,
            85% 8%,
            95% 20%,
            100% 35%,
            100% 100%
    );
    position: relative;
    box-shadow: 0 0 30px rgba(200, 184, 112, 0.3), 0 0 60px rgba(200, 184, 112, 0.1);
    transition: box-shadow 0.5s ease;
}

.frieren-portrait-arch:hover {
    box-shadow: 0 0 50px rgba(200, 184, 112, 0.5), 0 0 100px rgba(200, 184, 112, 0.2);
}

/* Arch frame border overlay */
.frieren-arch-frame {
    position: relative;
    width: 200px;
}

.frieren-arch-frame::before {
    content: '';
    position: absolute;
    inset: -3px;
    clip-path: polygon(
            0% 100%,
            0% 35%,
            5% 20%,
            15% 8%,
            30% 2%,
            50% 0%,
            70% 2%,
            85% 8%,
            95% 20%,
            100% 35%,
            100% 100%
    );
    background: linear-gradient(180deg, rgba(240, 232, 192, 0.89) 0%, rgba(173, 149, 34, 0.76) 100%);
    z-index: -1;
}

/* Name beneath arch */
.frieren-arch-name {
    text-align: center;
    margin-top: 1rem;
}

.frieren-arch-name .arch-title {
    font-family: var(--font-ghost);
    font-size: 0.76rem;
    letter-spacing: 0.45em;
    color: rgba(218, 185, 28, 0.98);
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.3rem;
}

.frieren-arch-name .arch-name {
    font-family: var(--font-ghost);
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    color: #f0e8c0;
    text-shadow: 0 0 20px rgba(200, 184, 112, 0.6);
    display: block;
}

/* Rune divider */
.frieren-rune-divider {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    max-width: 240px;
}

.frieren-rune-divider::before,
.frieren-rune-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(200, 184, 112, 0.4));
}

.frieren-rune-divider::after {
    background: linear-gradient(to left, transparent, rgba(200, 184, 112, 0.4));
}

.frieren-rune-divider span {
    font-size: 0.72rem;
    color: rgba(200, 184, 112, 0.68);
    letter-spacing: 0.3em;
    white-space: nowrap;
    font-family: var(--font-ghost);
}

/* Left page quote */
.frieren-left-quote
{
    text-align: center;
    max-width: 260px;
}

.frieren-left-quote p
{
    font-size: 0.78rem;
    font-style: italic;
    color: rgba(240, 232, 192, 0.7);
    line-height: 1.8;
}

/* ── RIGHT PAGE — Spell Catalogue ── */
.spellbook-right {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    position: relative;
}

/* Chapter heading */
.spell-chapter {
    font-family: var(--font-ghost);
    font-size: 0.65rem;
    letter-spacing: 0.5em;
    color: rgba(255, 233, 138, 0.91);
    text-transform: uppercase;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.spell-chapter::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(200, 184, 112, 0.3), transparent);
}

/* Individual spell entry — ledger row */
.spell-entry {
    display: grid;
    grid-template-columns: 1.5rem 1fr auto;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(200, 184, 112, 0.64);
    cursor: default;
    transition: all 0.3s ease;
    position: relative;
}

.spell-entry:hover {
    border-bottom-color: rgba(200, 184, 112, 0.63);
    background: rgba(100, 87, 31, 0.53);
    padding-left: 0.4rem;
    border-radius: 4px;
}

.spell-entry:last-of-type {
    border-bottom: none;
}

/* Rune glyph column */
.spell-glyph
{
    font-size: 0.84rem;
    color: rgba(255, 222, 63, 0.7);
    text-align: center;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    font-family: var(--font-ghost);
}

.spell-entry:hover .spell-glyph {
    color: rgba(240, 232, 192, 0.88);
    text-shadow: 0 0 10px rgba(145, 128, 48, 0.76);
}

/* Spell name */
.spell-name {
    font-family: var(--font-ghost);
    font-size: 0.82rem;
    color: #e8dfc0;
    letter-spacing: 0.08em;
    transition: color 0.3s ease;
}

.spell-entry:hover .spell-name {
    color: #faf6ec;
}

/* Dotted fill between name and classification */
.spell-dots
{
    flex: 1;
    border-bottom: 1px dotted rgba(200, 184, 112, 0.46);
    margin: 0 0.4rem 3px;
    min-width: 20px;
}

/* Classification tag */
.spell-class {
    font-family: var(--font-ghost);
    font-size: 0.73rem;
    letter-spacing: 0.12em;
    color: rgba(239, 218, 131, 0.8);
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.spell-entry:hover .spell-class {
    color: rgba(240, 232, 192, 0.8);
}

/* Lost spell — special variant */
.spell-entry.lost-spell .spell-name {
    color: rgba(234, 188, 35, 0.84);
    text-decoration: line-through;
    text-decoration-color: rgba(200, 184, 112, 0.2);
}

.spell-entry.lost-spell .spell-class {
    color: rgba(86, 73, 15, 0.75);
    font-style: italic;
}

.spell-entry.lost-spell:hover .spell-name {
    color: rgba(255, 243, 184, 0.83);
}

/* ── Footnote at bottom of right page ── */
.spellbook-footnote {
    margin-top: 1.8rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(200, 184, 112, 0.32);
    font-size: 0.74rem;
    color: rgba(245, 219, 105, 0.82);
    font-family: var(--font-ghost);
    font-style: italic;
    line-height: 1.6;
}

/* ── Mist overlay — bottom fade ── */
.spellbook-mist {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to top, rgba(4, 4, 10, 0.6) 0%, transparent 100%);
    z-index: 3;
    pointer-events: none;
}

/* ── Responsive ── */
@media (max-width: 780px) {
    .spellbook-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto 2px auto;
    }

    .spellbook-spine {
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, transparent 0%, rgba(218, 196, 99, 0.65) 50%, transparent 100%);
    }

    .spellbook-spine::after {
        top: 50%;
        left: 50%;
    }

    .spellbook-left,
    .spellbook-right {
        padding: 2rem 1.5rem;
    }
}

/* ===========================================
   FRIEREN — Journey Timeline
   =========================================== */

.frieren-timeline-section {
    position: relative;
    padding: 2rem 0 4rem;
    margin-bottom: 3rem;
    overflow: hidden;
}

/* Fade-in track line */
.frieren-timeline-track {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0 2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* The vertical spine */
.frieren-timeline-track::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent 0%, rgba(200, 184, 112, 0.7) 10%, rgba(126, 108, 36, 0.63) 90%, transparent 100%);
}

/* Each timeline node row */
.timeline-node {
    display: grid;
    grid-template-columns: 1fr 60px 1fr;
    align-items: center;
    gap: 0;
    min-height: 90px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.timeline-node.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Alternate left/right layout */
.timeline-node:nth-child(odd) .timeline-content {
    grid-column: 1;
    text-align: right;
    padding-right: 2rem;
}

.timeline-node:nth-child(odd) .timeline-empty {
    grid-column: 3;
}

.timeline-node:nth-child(even) .timeline-content {
    grid-column: 3;
    text-align: left;
    padding-left: 2rem;
    order: 3;
}

.timeline-node:nth-child(even) .timeline-empty {
    grid-column: 1;
    order: 1;
}

.timeline-node:nth-child(even) .timeline-pip-col {
    order: 2;
}

/* Centre pip column */
.timeline-pip-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.timeline-pip {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(200, 184, 112, 0.75);
    background: rgba(8, 8, 5, 1);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.timeline-pip::after {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: rgba(200, 184, 112, 0);
    transition: background 0.3s ease;
}

.timeline-pip:hover,
.timeline-pip.active {
    border-color: #f0e8c0;
    background: rgba(200, 184, 112, 0.3);
    box-shadow: 0 0 12px rgba(200, 184, 112, 0.7),
    0 0 25px rgba(200, 184, 112, 0.3);
}

.timeline-pip:hover::after,
.timeline-pip.active::after {
    background: rgba(200, 184, 112, 0.1);
}

/* Year badge */
.timeline-year {
    font-family: var(--font-ghost);
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    color: rgba(208, 175, 18, 0.87);
    text-transform: uppercase;
    margin-top: 0.4rem;
    white-space: nowrap;
}

/* Content card */
.timeline-content {
    cursor: pointer;
}

.timeline-card {
    display: inline-block;
    padding: 0.8rem 1.2rem;
    border: 1px solid rgba(200, 184, 112, 0.66);
    border-radius: 8px;
    background: rgba(10, 9, 5, 0.6);
    transition: all 0.3s ease;
    max-width: 320px;
}

.timeline-content:hover .timeline-card,
.timeline-node.active .timeline-card
{
    border-color: rgba(204, 180, 70, 0.95);
    background: rgba(20, 18, 10, 0.85);
    box-shadow: 0 0 20px rgba(200, 184, 112, 0.12);
}

.timeline-card-title {
    font-family: var(--font-ghost);
    font-size: 0.83rem;
    color: #fff7f1;
    letter-spacing: 0.08em;
    margin-bottom: 0.3rem;
    display: block;
}

.timeline-card-body {
    font-size: 0.765rem;
    color: rgba(213, 182, 28, 0.93);
    line-height: 1.6;
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.4s ease;
    opacity: 0;
}

.timeline-node.active .timeline-card-body {
    max-height: 100px;
    opacity: 1;
}

.timeline-empty {
    /* spacer */
}

/* ===========================================
   FRIEREN — Memory Fragment Gallery
   =========================================== */

.frieren-memories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
    perspective: 1000px;
}

.memory-card {
    aspect-ratio: 3 / 4;
    position: relative;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Random tilts per card */
.memory-card:nth-child(1) { transform: rotate(-2.5deg); }
.memory-card:nth-child(2) { transform: rotate(1.5deg); }
.memory-card:nth-child(3) { transform: rotate(-1deg); }
.memory-card:nth-child(4) { transform: rotate(2deg); }
.memory-card:nth-child(5) { transform: rotate(-1.5deg); }
.memory-card:nth-child(6) { transform: rotate(3deg); }

.memory-card:hover {
    transform: rotate(0deg) scale(1.03) !important;
    z-index: 5;
}

.memory-card.flipped {
    transform: rotate(0deg) rotateY(180deg) scale(1.03) !important;
    z-index: 5;
}

/* Front face */
.memory-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 4px;
    overflow: hidden;
}

.memory-front {
    background: rgba(12, 11, 7, 0.95);
    border: 1px solid rgba(200, 184, 112, 0.68);
    display: flex;
    flex-direction: column;
}

/* Polaroid image area */
.memory-photo {
    flex: 1;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    filter: saturate(0.25) sepia(0.3) brightness(0.75);
    transition: filter 0.4s ease;
    position: relative;
}

.memory-card:hover .memory-photo {
    filter: saturate(0.45) sepia(0.15) brightness(0.9);
}

/* Polaroid bottom strip */
.memory-label {
    padding: 0.7rem 0.8rem 0.8rem;
    background: rgba(8, 8, 5, 0.95);
    border-top: 1px solid rgba(200, 184, 112, 0.87);
    font-family: var(--font-ghost);
}

.memory-label-name {
    display: block;
    font-size: 0.83rem;
    color: #e8dfc0;
    letter-spacing: 0.12em;
    margin-bottom: 0.2rem;
}

.memory-label-sub {
    display: block;
    font-size: 0.735rem;
    color: rgba(150, 131, 39, 0.84);
    letter-spacing: 0.08em;
    font-style: italic;
}

/* Back face */
.memory-back {
    background: linear-gradient(135deg, rgba(14, 13, 8, 0.98) 0%, rgba(20, 18, 10, 0.98) 100%);
    border: 1px solid rgba(200, 184, 112, 0.47);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1.2rem;
    gap: 1rem;
    text-align: center;
}

.memory-back-rune {
    font-size: 2.6rem;
    color: rgba(232, 208, 102, 0.65);
    line-height: 1;
}

.memory-back-quote {
    font-family: var(--font-ghost);
    font-size: 0.84rem;
    font-style: italic;
    color: rgba(240, 232, 192, 0.87);
    line-height: 1.8;
}

.memory-back-attr {
    font-family: var(--font-ghost);
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    color: rgba(200, 184, 112, 0.84);
    text-transform: uppercase;
}

.memory-flip-hint {
    position: absolute;
    bottom: 0.5rem;
    right: 0.6rem;
    font-family: var(--font-ghost);
    font-size: 0.715rem;
    letter-spacing: 0.2em;
    color: rgba(200, 184, 112, 0.63);
    text-transform: uppercase;
    transition: opacity 0.3s ease;
    opacity: 0;
    backface-visibility: hidden;
    z-index: 2;
}

.memory-card:hover .memory-flip-hint {
    opacity: 1;
}

/* ===========================================
   FRIEREN — Mana Sense Visualiser
   =========================================== */

.frieren-mana-field {
    position: relative;
    width: 100%;
    min-height: 480px;
    margin-bottom: 3rem;
    border-radius: 16px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 50%, rgba(14, 13, 20, 0.98) 0%, rgba(6, 6, 10, 1) 100%);
    border: 1px solid rgba(200, 184, 112, 0.4);
}

/* Field label */
.mana-field-label {
    position: absolute;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-ghost);
    font-size: 0.74rem;
    letter-spacing: 0.5em;
    color: rgba(255, 221, 75, 0.91);
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 5;
}

/* Each mana orb */
.mana-orb {
    position: absolute;
    border-radius: 50%;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.4s ease;
    z-index: 3;
}

.mana-orb:hover {
    transform: translate(-50%, -50%) scale(1.15);
    z-index: 10;
}

.mana-orb-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
}

/* Ripple rings */
.mana-orb-ring {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid;
    animation: manaRipple 3s ease-out infinite;
    pointer-events: none;
}

.mana-orb-ring:nth-child(2) { animation-delay: 1s; }
.mana-orb-ring:nth-child(3) { animation-delay: 2s; }

@keyframes manaRipple {
    0%   { width: 100%; height: 100%; opacity: 0.6; }
    100% { width: 300%; height: 300%; opacity: 0; }
}

/* Orb label — appears on hover */
.mana-orb-label {
    position: absolute;
    top: calc(100% + 0.8rem);
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.mana-orb:hover .mana-orb-label {
    opacity: 1;
}

.mana-orb-name {
    display: block;
    font-family: var(--font-ghost);
    font-size: 0.70rem;
    letter-spacing: 0.15em;
    color: #f0e8c0;
    text-shadow: 0 0 10px rgba(200, 184, 112, 0.68);
    margin-bottom: 0.2rem;
}

.mana-orb-desc {
    display: block;
    font-family: var(--font-ghost);
    font-size: 0.645rem;
    color: rgba(200, 184, 112, 0.7);
    font-style: italic;
    max-width: 160px;
    line-height: 1.5;
    text-align: center;
}

/* Frieren orb — central, largest */
.mana-orb-frieren {
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
}

.mana-orb-frieren .mana-orb-inner {
    background: radial-gradient(circle at 40% 35%,
    rgba(240, 232, 192, 0.6) 0%,
    rgba(200, 184, 112, 0.3) 40%,
    rgba(140, 128, 80, 0.1) 100%);
    box-shadow:
            0 0 20px rgba(200, 184, 112, 0.5),
            0 0 50px rgba(200, 184, 112, 0.2),
            inset 0 0 15px rgba(255, 248, 220, 0.3);
    animation: frierenManaFloat 7s ease-in-out infinite;
}

.mana-orb-frieren .mana-orb-ring
{
    border-color: rgba(200, 184, 112, 0.8);
}

@keyframes frierenManaFloat {
    0%, 100% { transform: translateY(0px); box-shadow: 0 0 20px rgba(200,184,112,0.5), 0 0 50px rgba(200,184,112,0.2); }
    50%       { transform: translateY(-6px); box-shadow: 0 0 30px rgba(200,184,112,0.7), 0 0 70px rgba(200,184,112,0.3); }
}

/* Fern orb */
.mana-orb-fern {
    width: 55px;
    height: 55px;
    top: 30%;
    left: 68%;
}

.mana-orb-fern .mana-orb-inner {
    background: radial-gradient(circle at 40% 35%,
    rgba(180, 230, 180, 0.5) 0%,
    rgba(100, 180, 100, 0.2) 60%,
    transparent 100%);
    box-shadow: 0 0 15px rgba(120, 200, 120, 0.4),
    0 0 35px rgba(80, 160, 80, 0.15);
    animation: fernManaFloat 5s ease-in-out infinite;
    animation-delay: 1s;
}

.mana-orb-fern .mana-orb-ring { border-color: rgba(120, 200, 120, 0.76); }

@keyframes fernManaFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-5px); }
}

/* Stark orb */
.mana-orb-stark {
    width: 45px;
    height: 45px;
    top: 65%;
    left: 72%;
}

.mana-orb-stark .mana-orb-inner {
    background: radial-gradient(circle at 40% 35%,
    rgba(255, 180, 100, 0.5) 0%,
    rgba(200, 120, 50, 0.2) 60%,
    transparent 100%);
    box-shadow: 0 0 12px rgba(220, 140, 60, 0.4),
    0 0 30px rgba(200, 120, 50, 0.15);
    animation: fernManaFloat 6s ease-in-out infinite;
    animation-delay: 2s;
}

.mana-orb-stark .mana-orb-ring { border-color: rgba(220, 140, 60, 0.8); }

/* Serie orb */
.mana-orb-serie {
    width: 95px;
    height: 95px;
    top: 25%;
    left: 22%;
}

.mana-orb-serie .mana-orb-inner
{
    background: radial-gradient(circle at 40% 35%,
    rgba(200, 160, 255, 0.45) 0%,
    rgba(140, 80, 220, 0.2) 50%,
    transparent 100%);
    box-shadow: 0 0 25px rgba(160, 100, 240, 0.4),
    0 0 60px rgba(120, 60, 200, 0.15);
    animation: serieManaFloat 9s ease-in-out infinite;
}

.mana-orb-serie .mana-orb-ring { border-color: rgba(160, 100, 240, 0.84); }

@keyframes serieManaFloat {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%       { transform: translateY(-4px) scale(1.02); }
}

/* Aureole orb */
.mana-orb-aureole {
    width: 70px;
    height: 70px;
    top: 70%;
    left: 25%;
}

.mana-orb-aureole .mana-orb-inner {
    background: radial-gradient(circle at 40% 35%,
    rgba(255, 220, 220, 0.4) 0%,
    rgba(255, 100, 100, 0.15) 50%,
    transparent 100%);
    box-shadow: 0 0 18px rgba(255, 150, 150, 0.35),
    0 0 40px rgba(220, 80, 80, 0.12);
    animation: fernManaFloat 8s ease-in-out infinite;
    animation-delay: 3s;
}

.mana-orb-aureole .mana-orb-ring { border-color: rgba(255, 150, 150, 0.87); }

/* Connecting threads between orbs — SVG overlay */
.mana-threads {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.mana-thread {
    stroke: rgba(200, 184, 112, 0.45);
    stroke-width: 1;
    stroke-dasharray: 4 8;
    animation: threadBreath 6s ease-in-out infinite;
}

.mana-thread:nth-child(2) { animation-delay: 2s; }
.mana-thread:nth-child(3) { animation-delay: 4s; }
.mana-thread:nth-child(4) { animation-delay: 1s; }

@keyframes threadBreath {
    0%, 100% { opacity: 0.4; }
    50%       { opacity: 1; }
}

/* ===========================================
   FRIEREN — Era Comparison Slider
   =========================================== */

.frieren-era-slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    min-height: 300px;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 3rem;
    border: 1px solid rgba(200, 184, 112, 0.62);
    cursor: ew-resize;
    user-select: none;
}

/* Both era layers */
.era-layer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Past — warm sepia */
.era-past {
    background: url('/images/manga/frieren/era-past.jpg') center/cover no-repeat;
    filter: sepia(0.6) saturate(0.7) brightness(0.75) contrast(1.1);
    z-index: 1;
}

/* Fallback gradient when no image */
.era-past-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(80, 60, 30, 0.9) 0%, rgba(50, 38, 18, 0.95) 100%);
}

/* Present — cooler, sharper */
.era-present {
    background: url('/images/manga/frieren/era-present.jpg') center/cover no-repeat;
    filter: saturate(0.4) brightness(0.85) contrast(1.05);
    z-index: 2;
    /* Clipped to right of divider */
    clip-path: inset(0 0 0 50%);
    transition: clip-path 0s; /* JS controls this */
}

.era-present-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(20, 30, 50, 0.9) 0%, rgba(10, 15, 30, 0.95) 100%);
}

/* Era label overlays */
.era-label {
    position: absolute;
    bottom: 1.2rem;
    font-family: var(--font-ghost);
    font-size: 0.73rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    padding: 0.3rem 0.8rem;
    border-radius: 3px;
    z-index: 6;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.era-label-past {
    left: 1.5rem;
    color: rgba(240, 200, 120, 0.7);
    border: 1px solid rgba(200, 160, 80, 0.47);
    background: rgba(0, 0, 0, 0.4);
}

.era-label-present {
    right: 1.5rem;
    color: rgba(200, 220, 240, 0.7);
    border: 1px solid rgba(160, 190, 220, 0.42);
    background: rgba(0, 0, 0, 0.4);
}

/* Divider handle */
.era-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: linear-gradient(to bottom, transparent 0%, rgba(240, 232, 192, 0.8) 15%, rgba(240, 232, 192, 0.9) 50%, rgba(240, 232, 192, 0.8) 85%, transparent 100%);
    z-index: 5;
    transform: translateX(-50%);
    pointer-events: none;
    transition: left 0s;
}

/* Handle grip circle */
.era-divider::after {
    content: '◈';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: rgba(8, 8, 5, 0.95);
    border: 1px solid rgba(200, 184, 112, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.83rem;
    color: rgba(200, 184, 112, 0.8);
    box-shadow: 0 0 15px rgba(200, 184, 112, 0.3);
    line-height: 36px;
    text-align: center;
}

/* Drag instruction */
.era-drag-hint {
    position: absolute;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-ghost);
    font-size: 0.63rem;
    letter-spacing: 0.4em;
    color: rgba(200, 184, 112, 0.4);
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 6;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.frieren-era-slider.dragging .era-drag-hint,
.frieren-era-slider.has-moved .era-drag-hint {
    opacity: 0;
}

/* Era text cards — sit on each side */
.era-text-card {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    pointer-events: none;
    max-width: 200px;
    padding: 0.8rem 1rem;
    border-radius: 6px;
    background: rgba(4, 4, 3, 0.7);
    backdrop-filter: blur(4px);
}

.era-text-past {
    left: 1.5rem;
    border: 1px solid rgba(200, 160, 80, 0.62);
}

.era-text-present {
    right: 1.5rem;
    border: 1px solid rgba(160, 190, 220, 0.42);
    text-align: right;
}

.era-text-title {
    font-family: var(--font-ghost);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
    display: block;
}

.era-text-past .era-text-title { color: rgba(240, 200, 120, 0.8); }
.era-text-present .era-text-title { color: rgba(200, 220, 240, 0.8); }

.era-text-body {
    font-family: var(--font-ghost);
    font-size: 0.62rem;
    line-height: 1.6;
    color: rgba(200, 184, 112, 0.7);
    display: block;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .frieren-memories-grid,
    .demon-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .frieren-timeline-track::before { left: 20px; }

    .timeline-node {
        grid-template-columns: 40px 1fr;
        grid-template-rows: auto;
    }

    .timeline-node:nth-child(odd) .timeline-content,
    .timeline-node:nth-child(even) .timeline-content {
        grid-column: 2;
        text-align: left;
        padding-left: 1rem;
        padding-right: 0;
        order: 2;
    }

    .timeline-pip-col {
        grid-column: 1;
        order: 1;
    }

    .timeline-empty { display: none; }

    .era-text-card { display: none; }

    .frieren-era-slider { aspect-ratio: 16 / 9; }
}

@media (max-width: 480px) {
    .frieren-memories-grid,
    .demon-cards-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }
}