/* --- GLOBAL --- */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap'); /* Cinematic Movie Font */

/* Loading the Lightning Bolt Font */
@font-face {
    font-family: 'HarryPotter';
    src: url('harryp.TTF') format('truetype');
}

:root {
    /* Brand palette — pulled from the repeated literals in the file */
    --gold: #d4af37;
    --gold-bright: #ffd700;
    --slytherin-green: #1a472a;
    --silver: #c0c0c0;
    --teal-silver: #8faeb0;
    --cream: #e0e0e0;

    /* Font stacks */
    --font-display: 'Cinzel', serif;
    --font-magic: 'HarryPotter', sans-serif;
    --font-body: 'Georgia', serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-body);
}

body {
    background: linear-gradient(135deg, #020202 0%, #0a1930 50%, #081a10 100%);
    background-size: 400% 400%;
    animation: darkGradientBG 15s ease infinite;
    color: var(--cream);
    overflow-x: hidden;
    perspective: 1500px;
}

/* Default wand cursor everywhere */
html,
body {
    cursor: url("wand.png") 0 0, auto;
}

/* Force inheritance for every element */
*,
*::before,
*::after {
    cursor: inherit;
}

/* Interactive elements get glowing wand */
a,
button,
input,
textarea,
select,
label,
[onclick],
.book-cover,
.track-row,
.row-play-btn,
.trivia-btn,
.map-location,
.back-to-map-btn,
.map-pin,
.heart-pic:hover {
    cursor: url("wand-glow.png") 0 0, pointer !important;
}

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


/* Drives the "click to open" pulse and the typed-letter cursor blink.
   Both referenced this animation before, but it was never defined. */
@keyframes pulseText {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* --- THE BOOK COVER --- */

.book-cover {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right, #040b17, #0a1930);
    border-left: 20px solid #010408;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: left center;
    transition: transform 1.5s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 1.5s ease;
    box-shadow: inset 20px 0 50px rgba(0,0,0,0.8);
    cursor: pointer;
}

.book-content {
    text-align: center;
    padding: 40px;
    border: 2px solid rgba(192, 192, 192, 0.2);
    border-radius: 5px;
}

.author {
    color: var(--teal-silver);
    font-family: var(--font-display); /* Cinematic movie font */
    font-size: 1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hp-title {
    font-family: var(--font-magic); /* The Lightning Bolt Font! */
    font-size: clamp(2.75rem, 14vw, 7.5rem); /* scales down on small screens */
    color: var(--silver);
    text-shadow: 0 0 20px rgba(26, 71, 42, 0.8), 2px 2px 4px #000;
    letter-spacing: 3px;
    font-weight: normal;
    line-height: 1;
    margin-bottom: -10px;
}

.hp-subtitle {
    font-family: var(--font-display); /* Sharp, elegant movie poster font */
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--teal-silver);
    letter-spacing: 6px;
    margin-top: 15px;
    text-shadow: 1px 1px 5px #000;
}

.magic-wand-line {
    height: 2px;
    width: 80%;
    margin: 30px auto;
    background: linear-gradient(90deg, transparent, var(--slytherin-green), var(--silver), var(--slytherin-green), transparent);
}

.click-to-open {
    margin-top: 40px;
    font-style: italic;
    color: var(--silver);
    animation: pulseText 1.5s infinite;
}

.book-open-anim {
    transform: rotateY(-110deg);
    opacity: 0;
    pointer-events: none;
}

/* --- THE MAGICAL WORLD --- */
.hidden-world {
    opacity: 0;
    transition: opacity 2s ease;
}

.show-world {
    opacity: 1;
}

.hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.glow-text {
    font-size: 4rem;
    color: var(--cream);
    text-shadow: 0 0 25px rgba(26, 71, 42, 0.8), 0 0 10px rgba(79, 172, 254, 0.5);
    margin-bottom: 10px;
}

.subtitle {
    color: var(--teal-silver);
    font-style: italic;
}
/* =========================================
   POTTERHEAD GREETING SECTION
========================================= */

.potter-greeting-section {
    min-height: 100vh; /* Takes up the whole screen initially */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    position: relative;
}

/* The Glassmorphism Text Box */
.greeting-content {
    max-width: 800px;
    background: rgba(255, 255, 255, 0.02);
    padding: 50px;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 20px rgba(212, 175, 55, 0.05);
    backdrop-filter: blur(5px);
}

/* The Big Harry Potter Font */
.potter-callout {
    font-family: var(--font-magic);
    font-size: 4.5rem;
    color: var(--gold);
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.6);
    margin-bottom: 20px;
    text-align: center;
    letter-spacing: 3px;
    line-height: 1.1;
}

/* The Cinematic Subtext */
.greeting-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--silver); /* Silver */
    margin-bottom: 15px;
    line-height: 1.6;
}

.highlight-text {
    color: var(--cream);
    font-weight: bold;
    font-size: 1.8rem;
    margin-top: 30px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Bouncing Scroll Hint */
.scroll-indicator {
    margin-top: 40px;
    font-family: sans-serif;
    font-size: 0.9rem;
    color: var(--gold);
    letter-spacing: 4px;
    text-transform: uppercase;
    animation: pulseDeciding 2s infinite ease-in-out;
    opacity: 0.7;
}

/* Makes the text gently pulse to build suspense */
@keyframes pulseDeciding {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); text-shadow: 0 0 25px rgba(26, 71, 42, 0.9); }
}

/* --- THE SORTING CEREMONY --- */
.sorting-section {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
}

.sorting-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    width: 100%;
}

/* The New Sorting Heading */
.sorting-title {
    font-family: var(--font-display); /* Cinematic movie font */
    font-size: 1.8rem;
    color: var(--silver);
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 3px;
    text-shadow: 0 0 15px rgba(26, 71, 42, 0.5); /* Faint Slytherin glow */
    animation: pulseDeciding 2s infinite ease-in-out;
}

/* Wrapper to keep hat and photo together.
   (Was previously defined twice — merged into one, keeping the
   larger top margin so the hat clears the heading above it.) */
.sorting-image-wrapper {
    position: relative;
    display: inline-block;
    margin: 80px auto 30px auto;
}

/* Photo style — slightly scaled for better visibility.
   width/aspect-ratio now scale together instead of a fixed height,
   so the photo doesn't stretch out of proportion on small screens. */
.sorting-img {
    width: min(320px, 80vw);
    aspect-ratio: 4 / 5;
    height: auto;
    object-fit: cover;
    border-radius: 15px;
    border: 2px solid var(--slytherin-green);
    box-shadow: 0 0 30px rgba(26, 71, 42, 0.6);
    display: block;
    transition: opacity 0.6s ease-in-out;
    opacity: 1;
}

/* The Hat - Adjusted for balance */
.floating-hat {
    position: absolute;
    top: -95px;
    left: 50%;
    transform: translateX(-50%);
    width: min(200px, 50vw);
    z-index: 10;
    filter: drop-shadow(0 15px 10px rgba(0,0,0,0.7));
    animation: floatHat 4s ease-in-out infinite;
}
@keyframes floatHat {
    0%, 100% { transform: translateX(-50%) translateY(0) rotate(-2deg); }
    50% { transform: translateX(-50%) translateY(-12px) rotate(3deg); }
}

.hat-dialogue-box {
    min-height: 120px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

#hat-text {
    font-size: 2rem;
    color: var(--silver);
    font-style: italic;
    transition: opacity 0.5s ease;
    text-shadow: 0 0 10px rgba(192, 192, 192, 0.3);
}

/* THE MAGICAL SILVER SLYTHERIN REVEAL */
.slytherin-shout {
    font-family: var(--font-magic) !important; /* Uses the lightning bolt font */
    font-size: clamp(2.5rem, 13vw, 6.5rem) !important; /* scales down on small screens */
    color: #e8f0f2 !important; /* Shimmering Silver — distinct shade, kept as-is */
    letter-spacing: 5px;
    font-weight: normal !important;
    font-style: normal !important;
    text-shadow:
        0 0 20px var(--slytherin-green),   /* Inner green glow */
        0 0 40px #2a623d,   /* Outer green glow */
        0 0 60px #000,      /* Dark shadow for contrast */
        2px 2px 5px rgba(255, 255, 255, 0.8) !important; /* Silver highlight edge */

    /* Adds the explosive zoom and a continuous magical pulse */
    animation: slytherinExplode 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards, silverShimmer 3s infinite alternate !important;
}

/* The subtle magical shimmer after it explodes onto the screen */
@keyframes silverShimmer {
    0% { filter: brightness(1) drop-shadow(0 0 15px var(--slytherin-green)); }
    100% { filter: brightness(1.3) drop-shadow(0 0 30px #2a623d); }
}

@keyframes slytherinExplode {
    0% { transform: scale(0.1); opacity: 0; filter: blur(10px); }
    50% { transform: scale(1.1); opacity: 1; filter: blur(0); }
    100% { transform: scale(1); opacity: 1; filter: blur(0); }
}


/* =========================================
   A PENSIEVE OF PRECIOUS MOMENTS (SIDE-BY-SIDE)
========================================= */

.timeline-section {
    padding: 100px 20px;
    text-align: center;
    border-top: 1px solid rgba(26, 71, 42, 0.3);
}

.section-title {
    font-size: 2.8rem;
    text-align: center;
    color: var(--gold);
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    margin-bottom: 50px;
}

/* The Master Grid: Left (Image/Text) & Right (Letter) */
.pensieve-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

/* --- LEFT SIDE: Image & Golden Text --- */
.pensieve-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 380px;
}

.slideshow-container {
    width: 100%;
    max-width: 380px;
    aspect-ratio: 4/5;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8), 0 0 30px rgba(26, 71, 42, 0.3);
    border: 1px solid rgba(192, 192, 192, 0.2);
    transition: box-shadow 1.5s ease, border-color 1.5s ease;
}

.pensieve-slider-container {
    width: 100%;
    max-width: 320px;
    margin-top: 20px;
}

.pensieve-slider {
    width: 100%;
    appearance: none;
    height: 6px;
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.25);
    outline: none;
    cursor: pointer;
}

.pensieve-slider::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 15px rgba(212,175,55,0.8);
    cursor: pointer;
}

.pensieve-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--gold);
    border: none;
    box-shadow: 0 0 15px rgba(212,175,55,0.8);
    cursor: pointer;
}

.fade-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1.5s ease, transform 4.5s linear;
    transform: scale(1);
    opacity: 1;
}

.fade-img.hidden { opacity: 0; transition: opacity 1.5s ease; }
.fade-img.zooming { transform: scale(1.08); }

/* The Golden Pop Effects */
.slideshow-container.golden-frame {
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.6), 0 0 100px rgba(255, 140, 0, 0.4) !important;
    border-color: var(--gold-bright) !important;
}

.fade-img.special-pop {
    transform: scale(1.1) !important;
    filter: sepia(40%) contrast(120%) brightness(110%) saturate(150%);
}

/* Golden text centered perfectly below the image.
   This was previously defined a second time, later in the file
   (under "Room Visibility Toggles"), with a smaller font-size,
   a creamier gold, and an unexplained opacity: 0. Consolidated
   into one rule here — kept the larger size + brighter gold since
   it matches the golden-frame reveal theme used right above it.
   If your JS expects the smaller/creamier version, swap the
   color/font-size back and see the note further down the file. */
#special-text {
    font-family: var(--font-magic);
    font-size: clamp(1.8rem, 7vw, 3rem);
    color: var(--gold-bright);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 2px 2px 4px rgba(0,0,0,0.8);
    margin-top: 25px;
    min-height: 60px;
    letter-spacing: 4px;
    text-align: center;
    opacity: 1;
    transition: opacity 0.8s ease-in-out;
}

#special-text::after {
    content: '|';
    animation: pulseText 0.8s infinite;
    color: var(--gold-bright);
    opacity: 0;
}

#special-text.typing-active::after { opacity: 1; }

/* --- RIGHT SIDE: The Final Letter --- */
.pensieve-right {
    flex: 1;
    min-width: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.letter-content {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    padding: 45px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    text-align: left;
    margin-top: -90px; /* Pulls the letter up to align with the photo beside it */
}

#typing-text {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--cream);
    line-height: 1.8;
    min-height: 200px;
}
/* =========================================
   THE AESTHETIC MUSIC PLAYER
========================================= */

.music-player-section {
    padding: 60px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-top: 1px solid rgba(26, 71, 42, 0.3);
}

.player-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--gold);
    margin-bottom: 70px;
    text-align: center;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

/* Glassmorphism Playlist Box.
   (Was previously defined with several properties repeated inside
   itself, and max-width set twice — 450px then 500px. Folded down
   to one clean block; 500px kept since that was the value that was
   actually winning before.) */
.aesthetic-playlist {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 25px;
    padding: 20px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(212, 175, 55, 0.05);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers everything */
    gap: 15px;
    margin: 0 auto;
}

/* FORCE TRANSPARENT BUTTONS */
.back-to-map-btn {
    background: transparent !important;
    border: 1px solid var(--gold) !important;
    color: var(--gold) !important;
    padding: 10px 20px;
    cursor: pointer;
    font-family: var(--font-display);
}

/* Individual Song Rows.
   (Was previously defined twice as two separate blocks — merged
   into one, keeping every property from both.) */
.track-row {
    display: flex;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}

.track-row:hover {
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

/* When a song is actively playing */
.track-row.playing-now {
    border-color: var(--gold);
    background: rgba(212, 175, 55, 0.15);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.track-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.song-name {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--gold);
    font-weight: bold;
    letter-spacing: 1px;
}

.artist-name {
    font-family: sans-serif;
    font-size: 0.75rem;
    color: #a0a0a0;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* The small play/pause icon on the right of each row */
.row-play-btn {
    background: transparent;
    color: var(--gold);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.track-row:hover .row-play-btn {
    transform: scale(1.2);
}

/* =========================================
   DYNAMIC TRACK PROGRESS BAR
========================================= */
/* Hides the slider by default */
.track-progress-container {
    display: none; 
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}

/* Reveals the slider ONLY when the row is playing */
.track-row.playing-now .track-progress-container {
    display: flex;
    animation: fadeInProgress 0.4s ease forwards;
}

@keyframes fadeInProgress {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Timestamp Text */
.time-current, .time-total {
    font-size: 0.7rem;
    color: var(--silver);
    font-family: monospace;
    min-width: 30px;
    text-align: center;
}

/* The Magic Slider Bar */
.track-slider {
    flex-grow: 1;
    appearance: none;
    height: 4px;
    background: rgba(212, 175, 55, 0.2); /* Faded Gold */
    border-radius: 5px;
    outline: none;
}

.track-slider::-webkit-slider-thumb {
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 10px var(--gold);
    transition: transform 0.2s ease;
}

.track-slider:hover::-webkit-slider-thumb {
    transform: scale(1.3);
}

/* =========================================
   FEATURE 4: INTERACTIVE WAND SPARKLES
========================================= */
.wand-sparkle {
    position: absolute; /* 👇 THE FIX: Changed from fixed to absolute */
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, var(--gold) 0%, rgba(255,255,255,0) 70%);
    box-shadow: 0 0 10px var(--gold), 0 0 20px #fff;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: fadeSparkle 0.8s ease-out forwards;
}

@keyframes fadeSparkle {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0.2) translateY(30px); opacity: 0; }
}

/* =========================================
   FEATURE 3: DYNAMIC SLYTHERIN THEME SHIFT
========================================= */
body.slytherin-theme-active {
    transition: background-color 3s ease-in-out, background-image 3s ease-in-out !important;
    /* Shifts the entire waving background to deep emerald greens */
    background: linear-gradient(135deg, #010a05 0%, #0a2113 50%, #031409 100%) !important;
    background-size: 400% 400% !important;
}

body.slytherin-theme-active .glow-text,
body.slytherin-theme-active .sorting-title {
    color: #2f8f53 !important;
    text-shadow: 0 0 20px rgba(47, 143, 83, 0.8) !important;
}

/* =========================================
   THE SLYTHERIN BANNERS
========================================= */

.slytherin-banner {
    position: absolute;
    top: -120vh; 
    width: 12vw; 
    min-width: 100px;
    max-width: 160px;
    height: 70vh; 
    background: linear-gradient(180deg, var(--slytherin-green) 0%, #0a2113 100%);
    border-left: 3px solid var(--silver);
    border-right: 3px solid var(--silver);
    z-index: 100;
    display: flex;
    justify-content: center;
    padding-top: 32vh; 
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 88%, 0% 100%);
    pointer-events: none; 
    visibility: hidden; 
    transition: top 1.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 1.2s;
}

.banner-left { left: 4%; }
.banner-right { right: 4%; }

.slytherin-banner img {
    width: 75%;
    height: fit-content;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.15));
}

body.slytherin-theme-active .slytherin-banner {
    top: -10vh;
    visibility: visible; 
    transition: top 1.2s cubic-bezier(0.25, 1, 0.5, 1), visibility 0s linear 0s;
}

/* =========================================
   FEATURE 2: THE TRIVIA GATEWAY LOCK
========================================= */
.trivia-lock-overlay {
    background: rgba(11, 13, 16, 0.95);
    border: 2px solid rgba(212, 175, 55, 0.2);
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    max-width: 500px;
    margin: 50px auto;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 40px rgba(0,0,0,0.8);
    transition: all 0.5s ease;
}

.trivia-question {
    font-family: var(--font-display);
    color: var(--gold);
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-align: center;
}

.trivia-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trivia-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: #fff;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    font-family: sans-serif;
    transition: all 0.3s ease;
}

.trivia-btn:hover {
    background: rgba(212, 175, 55, 0.2);
    border-color: var(--gold);
    transform: scale(1.02);
}

/* =========================================
   MARAUDER'S MAP & ROOMS
========================================= */
.map-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    margin-top: 40px;
}

.map-location {
    background: rgba(212, 175, 55, 0.1);
    border: 2px solid var(--gold);
    color: var(--cream);
    font-family: var(--font-display);
    font-size: 1.5rem;
    padding: 15px 40px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.4s ease;
    width: min(350px, 90vw);
    box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.2);
}

.map-location:hover {
    background: rgba(212, 175, 55, 0.4);
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
}

.magic-room {
    min-height: 100vh;
    padding: 50px 20px;
    animation: roomFadeIn 2s ease forwards;
}

@keyframes roomFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* =========================================
   THE GREAT HALL (15-PHOTO HEART)
========================================= */
.heart-collage-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1; /* was a fixed height:600px — squished on phones when width shrank */
    margin: -30px auto 40px auto;
}

.heart-pic {
    position: absolute;
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50%; /* Makes them aesthetic bubbles */
    border: 2px solid var(--gold);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy pop-in */
}

.heart-pic.revealed {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.heart-pic.revealed:hover {
    transform: translate(-50%, -50%) scale(2.2) !important; 
    z-index: 99 !important; 
    box-shadow: 0 0 30px var(--gold-bright) !important;
    cursor: pointer;
}

/* THE MATHEMATICAL HEART COORDINATES */
/* Row 1 (Top Humps) */
.pic-1 { top: 23%; left: 18%; }
.pic-2 { top: 22%; left: 37%; }
.pic-3 { top: 22%; left: 63%; }
.pic-4 { top: 23%; left: 82%; }
/* Row 2 (Widest Part) */
.pic-5 { top: 42%; left: 14%; }
.pic-6 { top: 40%; left: 32.5%; }
.pic-7 { top: 40%; left: 50%; }
.pic-8 { top: 40%; left: 67.5%; }
.pic-9 { top: 42%; left: 85%; }
/* Row 3 (Tapering) */
.pic-10 { top: 59%; left: 23%; }
.pic-11 { top: 60%; left: 50%; }
.pic-12 { top: 59%; left: 77%; }
/* Row 4 (Lower Point) */
.pic-13 { top: 73%; left: 35%; }
.pic-14 { top: 73%; left: 65%; }
/* Row 5 (The Tip) */
.pic-15 { top: 85%; left: 50%; }

/* =========================================
   TRIVIA NONCHALANT POPUP
========================================= */
.nonchalant-feedback {
    font-family: var(--font-display);
    color: var(--gold);
    font-size: 1.2rem;
    margin-top: 20px;
    min-height: 30px;
    font-style: italic;
    opacity: 0;
    transition: opacity 0.3s;
}
/* =========================================
   ROOM VISIBILITY TOGGLES (Required for JS)
========================================= */
.hidden-room {
    display: none !important;
}

.visible-room {
    display: block !important;
    animation: fadeInRoom 0.8s ease forwards;
}

@keyframes fadeInRoom {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.golden-border {
    /* No solid border here, just the soft aura */
    border: none !important;
    /* Soft, wide glow that pulses slightly */
    box-shadow: 0 0 40px 15px rgba(212, 175, 55, 0.6),
                0 0 80px 25px rgba(212, 175, 55, 0.3) !important;
    transition: all 0.8s ease-in-out;
    animation: glow-pulse 2s infinite alternate;
    position: relative; /* Essential for shadows to render correctly */
}
@keyframes glow-pulse {
    from {
        box-shadow: 0 0 30px 10px rgba(212, 175, 55, 0.4);
    }
    to {
        box-shadow: 0 0 60px 25px rgba(212, 175, 55, 0.8);
    }
}

/* #special-text was consolidated into a single rule above, near
   .pensieve-left — this is where the conflicting duplicate used
   to live. See the comment there for which values were kept. */

/* =========================================
   ROOM TRANSITION STYLES
   ========================================= */
.room-transition {
    width: 100%;
    text-align: center;
    margin-top: 40px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.magical-transition-text {
    color: var(--gold) !important;
    font-family: var(--font-display); /* Keeps it matching your HP theme */
    font-size: 1.4rem;
    margin-bottom: 15px;
    margin-top: 20px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* FORCE THE MAP TO FIT THE SCREEN PERFECTLY */
#magic-world {
    min-height: 100vh; /* 100% of the screen height */
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers the map and buttons vertically */
    align-items: center;     /* Centers everything horizontally */
    box-sizing: border-box;
    padding-bottom: 50px;    /* Adds that missing space at the very bottom */
}

/* If you have a container specifically for your map buttons, ensure it has space */
.map-buttons-container {
    margin-bottom: 40px;
}

/* SLYTHERIN ROOM LAYOUT */
#slytherin-common-room {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centers the whole room vertically */
    align-items: center;
}

/* ADD SPACE BETWEEN HEADING AND MUSIC PLAYER */
#slytherin-common-room h1,
#slytherin-common-room h2 {
    margin-bottom: 60px !important; /* Forces a large gap under the heading */
    text-align: center;
}

.aesthetic-playlist {
    margin-top: 10px; /* Slight adjustment for perfect centering */
    margin-bottom: 40px; /* Space before the 'All set?' transition text */
}

/* =========================================================
   CHAPTER REDESIGN — NEW COMPONENTS
   ---------------------------------------------------------
   Everything below this point is new: starfield, book-opening
   particles, the hero "wand writing" sequence, the darkened/
   shaking Sorting reveal, the Examination Chamber (candles +
   seals), the parchment Marauder's Map, the Pensieve fog/sepia/
   pan effects, and the Great Hall finale (candles + stars).
   Nothing above this line was touched.
   ========================================================= */

/* Anchors for absolutely-positioned overlays added below */
.sorting-section { position: relative; }
#great-hall { position: relative; }

/* ---------- STARFIELD (reused for hero + finale) ---------- */
.starfield {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #fff;
    border-radius: 50%;
    opacity: 0.3;
    animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.5); }
}

.finale-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 2.5s ease;
    pointer-events: none;
    z-index: 0;
}
.finale-stars.active { opacity: 1; }

/* ---------- BOOK-OPENING PARTICLES (Chapter 1) ---------- */
.book-particles {
    position: absolute;
    inset: 0;
    overflow: visible;
    pointer-events: none;
    z-index: 5;
}

.dust-particle, .spark-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.dust-particle {
    width: 4px;
    height: 4px;
    background: rgba(192, 192, 192, 0.55);
    animation: dustFloat 1.8s ease-out forwards;
}

.spark-particle {
    width: 5px;
    height: 5px;
    background: radial-gradient(circle, var(--gold-bright) 0%, transparent 70%);
    box-shadow: 0 0 10px var(--gold-bright);
    animation: sparkFly 1.3s ease-out forwards;
}

@keyframes dustFloat {
    0% { opacity: 0.8; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, -60px)) scale(0.4); }
}

@keyframes sparkFly {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.2); }
}

/* ---------- HERO: WAND WRITING + MATERIALIZING TITLE (Chapter 2) ---------- */
.wand-text {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    color: var(--silver);
    letter-spacing: 2px;
    min-height: 2.4rem;
    margin-bottom: 20px;
    opacity: 0;
    transition: opacity 0.6s ease;
    text-align: center;
}
.wand-text.visible { opacity: 1; }

.materializing .letter {
    display: inline-block;
    opacity: 0;
    filter: blur(6px);
    transform: translateY(10px) scale(0.85);
    animation: materializeLetter 0.6s ease forwards;
}

@keyframes materializeLetter {
    to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

/* ---------- SORTING CEREMONY: DARKENING + SHAKE + GREEN PARTICLES (Chapter 3) ---------- */
.dim-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 2.5s ease;
    pointer-events: none;
    z-index: 1;
}
.dim-overlay.active { background: rgba(0, 0, 0, 0.55); }

@keyframes cameraShake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-6px, 3px); }
    40% { transform: translate(5px, -4px); }
    60% { transform: translate(-4px, 4px); }
    80% { transform: translate(6px, -2px); }
}
.camera-shake { animation: cameraShake 0.45s ease; }

.green-particle {
    position: fixed;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle, #4fdc7d 0%, transparent 70%);
    box-shadow: 0 0 8px #2f8f53;
    pointer-events: none;
    z-index: 1500;
    animation: floatUpGreen 2.5s ease-out forwards;
}

@keyframes floatUpGreen {
    0% { opacity: 0.9; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-160px) scale(0.3); }
}

/* ---------- CANDLES (reused: Examination Chamber + Great Hall) ---------- */
.exam-candles, .hall-candles {
    display: flex;
    gap: 40px;
    justify-content: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
    margin-top: -20px;
}

.candle {
    width: 14px;
    height: 50px;
    background: linear-gradient(#fdf6e3, #e8dcb8);
    border-radius: 3px;
    position: relative;
}

.candle::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 20px;
    background: radial-gradient(circle, #a8ffc8 0%, #2f8f53 60%, transparent 100%);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0.2;
    filter: blur(0.5px);
    transition: opacity 0.8s ease;
    animation: flameFlicker 2.2s ease-in-out infinite;
}

.candle.lit::before { opacity: 1; }
.candle.flicker-hard::before { animation: flameFlickerHard 0.5s ease-in-out 2; }

@keyframes flameFlicker {
    0%, 100% { transform: translateX(-50%) scale(1) rotate(0deg); }
    50% { transform: translateX(-50%) scale(1.08) rotate(2deg); }
}

@keyframes flameFlickerHard {
    0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); }
    25% { opacity: 0.25; transform: translateX(-50%) scale(0.7) rotate(-6deg); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(5deg); }
    75% { opacity: 0.3; transform: translateX(-50%) scale(0.8) rotate(-4deg); }
}

/* ---------- TRIVIA: WRONG-ANSWER RED FLASH + SEALS (Chapter 4) ---------- */
.flash-red { animation: redFlash 0.6s ease; }

@keyframes redFlash {
    0%, 100% { color: inherit; text-shadow: none; }
    30% { color: #ff5c6c; text-shadow: 0 0 15px rgba(255, 60, 60, 0.8); }
}

.seal-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 22px;
}

.seal {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.25);
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.5s ease;
}

.seal.unlocked {
    border-color: var(--gold);
    background: radial-gradient(circle, var(--gold-bright) 0%, var(--gold) 70%);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.7);
    animation: sealPop 0.5s ease;
}

@keyframes sealPop {
    0% { transform: scale(0.3); }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ---------- THE PARCHMENT MARAUDER'S MAP (Chapter 5) ---------- */
.parchment-map {
    position: relative;
    width: 100%;
    max-width: 700px;
    aspect-ratio: 4 / 3;
    margin: 40px auto 0;
    border-radius: 8px;
    background-image: url('map-bg.jpg');
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 6px #4a3a22, 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(80, 55, 20, 0.4);
    overflow: hidden;
}

.parchment-map::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.04) 0px, rgba(0, 0, 0, 0.04) 1px, transparent 1px, transparent 3px);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.map-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    text-align: center;
    z-index: 2;
}

.map-pin-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

.map-pin-label {
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 1px;
    color: #2b1d0e;
    background: rgba(255, 250, 235, 0.8);
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

.map-pin:hover .map-pin-icon { transform: scale(1.25) rotate(-4deg); }

.map-you-are-here {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.3rem;
    opacity: 0.85;
}

.footprint-layer { position: absolute; inset: 0; pointer-events: none; z-index: 1; }

.footprint {
    position: absolute;
    font-size: 0.85rem;
    opacity: 0;
    animation: footstepAppear 0.6s ease forwards;
}

@keyframes footstepAppear {
    0% { opacity: 0; transform: scale(0.5); }
    40% { opacity: 0.85; transform: scale(1); }
    100% { opacity: 0.45; transform: scale(1); }
}

/* ---------- PENSIEVE: FOG + SEPIA TIERS + PAN (Chapter 6) ---------- */
.fog-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    filter: blur(8px);
    transition: opacity 0.5s ease;
}
.fog-overlay.active { opacity: 0.85; }

.memory-vintage-2 { filter: sepia(70%) contrast(95%) brightness(95%) saturate(70%); }
.memory-vintage-1 { filter: sepia(35%) contrast(100%) saturate(85%); }
.memory-vintage-0 { filter: none; }

.fade-img.pan-a { transform: scale(1.08) translate(1%, -1%); }
.fade-img.pan-b { transform: scale(1.08) translate(-1%, 1%); }

/* ---------- GREAT HALL FINALE (Chapter 7) ---------- */
#great-hall .section-title {
    margin-bottom: -10px !important; 
}

.finale-text {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 3vw, 1.6rem);
    color: var(--cream);
    text-align: center;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 1.6s ease;
    letter-spacing: 1px;
}
.finale-text.visible { opacity: 1; }

.finale-text-final {
    font-family: var(--font-magic);
    font-size: clamp(1.8rem, 6vw, 3rem);
    color: var(--gold-bright);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
    margin-top: 14px;
}

/* =========================================
   THE QUILL'S ANCHOR SCROLLBAR
   ========================================= */
/* 1. The total width of the scrollbar */
::-webkit-scrollbar {
    width: 14px; /* Slightly wider to show the detail */
    background: transparent;
}

/* 2. The track (The 'Leather' Channel) */
::-webkit-scrollbar-track {
    background: #3a2618; /* Dark, aged leather brown */
    border-left: 2px solid #1a110b; /* Deep shadow to separate it from the page */
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8); /* Makes it look indented */
}

/* 3. The thumb (The 'Brass' Slider) */
::-webkit-scrollbar-thumb {
    /* Aged brass metallic gradient */
    background: linear-gradient(180deg, #8a733f 0%, #b89c56 20%, #7d6531 80%, #4a3a18 100%); 
    border: 2px solid #2e230f; /* Dark tarnished metal edging */
    border-radius: 10px; /* Smooth, rounded edges like a crafted handle */
    box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.2), /* Subtle top highlight */
                0 0 5px rgba(0, 0, 0, 0.8); /* Drop shadow into the leather track */
}

/* 4. Hover effect (When she grabs it) */
::-webkit-scrollbar-thumb:hover {
    /* Brighter brass glow when hovered */
    background: linear-gradient(180deg, #a3894a 0%, #d4b563 20%, #91763a 80%, #5c471c 100%); 
    cursor: pointer;
}