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

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

:root {
    /* Brand palette  */
    --gold: #d4af37;
    --gold-bright: #ffd700;
    --slytherin-green: #0a140f; /* Dark emerald — matches Ministry of Time tone */
    --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);
}

html {
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

body {
    background: linear-gradient(135deg, #09111c 0%, #050811 50%, #02050a 100%);
    background-size: 400% 400%;
    animation: darkGradientBG 15s ease infinite;
    color: var(--cream);
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

/* CINEMATIC PRELOADER */
#cinematic-preloader {
    position: fixed;
    flex-direction: column;
    inset: 0;
    background: #030508; 
    z-index: 9999999; 
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 1.5s ease;
}

.preloader-text {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 4vw, 2rem);
    color: var(--silver);
    letter-spacing: 4px;
    animation: pulseText 1.5s infinite; 
}

/* The Tap to Enter Button */
.enter-site-btn {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: var(--gold-bright);
    font-family: var(--font-display);
    font-size: 1.2rem;
    padding: 12px 40px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 40px;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    
    /* Fades in smoothly after the page loads */
    opacity: 0;
    animation: fadeInBtn 2s ease forwards 1s; 
}

.enter-site-btn:hover {
    background: rgba(212, 175, 55, 0.2);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
}

@keyframes fadeInBtn {
    to { opacity: 1; }
}

/* when loading is finished */
#cinematic-preloader.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Default wand cursor  */
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%; }
}


/* click to open pulse and the typed-letter cursor blink */
@keyframes pulseText {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}


/* CANVAS AMBIENT DUST */
.magic-canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    pointer-events: none;
}
.background-canvas { z-index: 0; opacity: 0.8; } 
.foreground-canvas { z-index: 9999; opacity: 0.8; }

/* 3D ENTRANCE GATES */
.book-scene {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px; 
    overflow: hidden;
    background: #02050a; 
}

/* The two halves of the gate */
.gate {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(135deg, #040b17, #0a1930);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.9);
    transition: transform 2s cubic-bezier(0.25, 1, 0.4, 1), opacity 2s ease;
    z-index: 1;
}

.gate-left {
    left: 0;
    transform-origin: left center;
    border-right: 2px solid var(--gold);
    box-shadow: 10px 0 30px rgba(0,0,0,0.8);
}

.gate-right {
    right: 0;
    transform-origin: right center;
    border-left: 2px solid var(--gold);
    box-shadow: -10px 0 30px rgba(0,0,0,0.8);
}

/* The Floating Glass Box */
#gate-text {
    position: relative;
    z-index: 10;
    background: rgba(4, 11, 23, 0.7);
    padding: 50px;
    border-radius: 15px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 40px rgba(0,0,0,0.9);
    transition: all 3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    text-align: center;
}

/* THE CINEMATIC 3D ANIMATION WHEN CLICKED */
.book-scene.open-anim .gate-left {
    transform: rotateY(-110deg) translateZ(100px); /* Swings open toward the camera */
    opacity: 0.2;
}

.book-scene.open-anim .gate-right {
    transform: rotateY(110deg) translateZ(100px); /* Swings open toward the camera */
    opacity: 0.2;
}

.book-scene.open-anim #gate-text {
    transform: scale(3.5) translateZ(400px); /* Zooms into the screen and fades */
    opacity: 0;
    filter: blur(15px);
    pointer-events: none;
}

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

.hp-title {
    font-family: var(--font-magic); 
    font-size: clamp(2.75rem, 14vw, 10rem); 
    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 {
    text-shadow: 0 0 20px rgba(26, 71, 42, 0.8), 2px 2px 4px #000;
    font-family: var(--font-magic);
    font-weight: 700;
    font-size: 2.8rem;
    color: var(--silver);
    letter-spacing: 6px;
    margin-top: 15px;   
}

.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;
}

/* 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; 
    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;
}

/* pulse effect*/
@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%;
}

/* New Sorting Heading */
.sorting-title {
    font-family: var(--font-display);
    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); 
    animation: pulseDeciding 2s infinite ease-in-out;
}

/* Image and Hat wrapper*/
.sorting-image-wrapper {
    position: relative;
    display: inline-block;
    margin: 80px auto 30px auto;
}

/* Photo style  */
.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 */
.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; 
    font-size: clamp(2.5rem, 13vw, 6.5rem) !important; 
    color: #e8f0f2 !important; 
    letter-spacing: 5px;
    font-weight: normal !important;
    font-style: normal !important;
    text-shadow:
        0 0 20px var(--slytherin-green),  
        0 0 40px #2a623d,
        0 0 60px #000,
        2px 2px 5px rgba(255, 255, 255, 0.8) !important; 

    /* 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  */

.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;
}

/* Special Text and Effect  */
.pensieve-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: min(380px, 100%); 
}

.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 */
#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; }

/* Letter */
.pensieve-right {
    flex: 1;
    min-width: min(380px, 100%); 
    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; 
}

#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 */
.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; 
    gap: 15px;
    margin: 0 auto;
}

/* 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);
}

/* Song Rows */
.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);
}

/* INTERACTIVE WAND SPARKLES */
.wand-sparkle {
    position: 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; }
}

/* DYNAMIC SLYTHERIN THEME SHIFT */
body.slytherin-theme-active {
    transition: background-color 3s ease-in-out, background-image 3s ease-in-out !important;
    background: linear-gradient(135deg, #020a06 0%, #0a140f 50%, #030805 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;
}

/* THE TRIVIA QUIZ 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: none; }
}

/* THE GREAT HALL */
.heart-collage-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 1 / 1; 
    margin: -30px auto 40px auto;
}

.heart-pic {
    position: absolute;
    width: clamp(46px, 15vw, 100px);
    height: clamp(46px, 15vw, 100px);
    object-fit: cover;
    border-radius: 50%; 
    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); 
}

.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;
}

/* HEART COORDINATES */
/* Row 1 */
.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 */
.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 */
.pic-10 { top: 59%; left: 23%; }
.pic-11 { top: 60%; left: 50%; }
.pic-12 { top: 59%; left: 77%; }
/* Row 4 */
.pic-13 { top: 73%; left: 35%; }
.pic-14 { top: 73%; left: 65%; }
/* Row 5 */
.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  */
.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: none; }
}

.golden-border {
    border: none !important;
    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; 
}
@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);
    }
}


/* 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); 
    font-size: 1.4rem;
    margin-bottom: 15px;
    margin-top: 20px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

#magic-world {
    min-height: 100vh; 
    min-height: 100dvh; 
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: 50px;
}

.map-buttons-container {
    margin-bottom: 40px;
}

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

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

.aesthetic-playlist {
    margin-top: 10px; 
    margin-bottom: 50px; 
}

.sorting-section { position: relative; }
#great-hall { position: relative; }

/* STARFIELD (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); }
}

/* MARAUDER'S MAP (Chapter 5) */
.map-section.visible-room {
    position: fixed !important;
    inset: 0;
    z-index: 9999;
    background-image: url('map-bg.png');
    background-size: 100% 100%; 
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transform-origin: center center;
    animation: parchmentUnfold 1.8s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}

@keyframes parchmentUnfold {
    0% { opacity: 0; transform: perspective(1200px) rotateX(80deg) scale(0.8); filter: brightness(1.5) sepia(0.5); }
    40% { opacity: 1; transform: perspective(1200px) rotateX(-10deg) scale(1.05); filter: brightness(1.2) sepia(0.2); }
    100% { opacity: 1; transform: perspective(1200px) rotateX(0deg) scale(1); filter: brightness(1) sepia(0); }
}

.reopen-map-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9998;
    background: rgba(10, 15, 25, 0.95);
    border: 2px solid var(--gold);
    color: var(--gold);
    font-family: var(--font-display);
    padding: 12px 25px;
    font-size: 1.1rem;
    border-radius: 30px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8), inset 0 0 10px rgba(212, 175, 55, 0.3);
    transition: transform 0.3s ease, background 0.3s ease;
    display: none; /* Initially hidden */
}

.reopen-map-btn.active {
    display: block;
    animation: fadeInRoom 0.5s ease forwards;
}

.reopen-map-btn:hover {
    transform: scale(1.05);
    background: var(--gold);
    color: #000;
}

.map-close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--gold);
    border-radius: 50%;
    color: var(--gold);
    font-size: 1.5rem;
    width: 45px;
    height: 45px;
    cursor: pointer;
    z-index: 10000;
    transition: transform 0.3s ease, background 0.3s ease;
}
.map-close-btn:hover {
    transform: scale(1.1);
    background: var(--gold);
    color: #000;
}

.parchment-map {
    position: relative;
    width: 100vw;
    height: 100vh;
    margin: 0;
    background: transparent;
    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: clamp(2rem, 4vw, 3rem);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
    transition: transform 0.3s ease;
}

/* Update your existing label class */
.map-pin-label {
    font-family: var(--font-display);
    font-size: clamp(0.8rem, 1.5vw, 1.2rem);
    letter-spacing: 1px;
    color: #2b1d0e;
    background: rgba(255, 250, 235, 0.9);
    border-radius: 20px;
    white-space: nowrap;
    
    max-width: 0;
    padding: 2px 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.8s steps(15), padding 0.4s ease, opacity 0.4s ease;
}

.map-pin:hover .map-pin-label {
    max-width: 500px; 
    padding: 2px 10px;
    opacity: 1;
}

.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;
}

/* MAGICAL THEME-SHIFTING SCROLLBAR */
/* 1. The total width of the scrollbar */
::-webkit-scrollbar {
    width: 14px; 
    background: transparent;
}

/* 2. DEFAULT THEME */
::-webkit-scrollbar-track {
    background: #02050a; 
    border-left: 2px solid #000;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #09111c 0%, #050811 50%, #030810 100%); 
    border: 2px solid #02050a; 
    border-radius: 10px; 
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.05); 
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #122136 0%, #0a1324 50%, #040912 100%); 
    cursor: pointer;
}

/* 3. SLYTHERIN REVEAL OVERRIDES */
body.slytherin-theme-active::-webkit-scrollbar-track {
    background: #010a05; 
    border-left: 2px solid #000;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}

body.slytherin-theme-active::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #0e2918 0%, #07190d 50%, #020a05 100%); 
    border: 2px solid #010a05;
    border-radius: 10px;
    box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.05); 
}

body.slytherin-theme-active::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #163d24 0%, #0a2113 50%, #051209 100%); 
    cursor: pointer;
}

/* 4. TEMPORARY BLUE OVERRIDE FOR EASTER EGGS */
body.slytherin-theme-active.override-blue-scrollbar::-webkit-scrollbar-track {
    background: #020202; 
}

body.slytherin-theme-active.override-blue-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2a475e 0%, #1c3243 100%); 
    border: 2px solid #020202; 
}

body.slytherin-theme-active.override-blue-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #83adc2 0%, #688fa6 100%); 
}


/* MOBILE COMAPTIBLE */
@media (max-width: 820px) {
    .letter-content { margin-top: 0; }
}

@media (max-width: 768px) {
    /* 1. Preloader Fixes */
    #cinematic-preloader { text-align: center; padding: 0 20px; }
    .preloader-text { line-height: 1.5; }

    /* 2. Chapter 0 / Auth Fixes */
    .auth-panel { padding: 35px 20px; width: 90%; }
    .auth-subtitle { font-size: clamp(0.9rem, 4vw, 1.2rem); letter-spacing: 2px; text-align: center; }
    .auth-desc { font-size: clamp(0.8rem, 3.5vw, 0.95rem); margin-bottom: 25px; text-align: center; }
    .auth-submit-btn { padding: 10px 30px; font-size: 1rem; }
    #auth-identity { font-size: clamp(1rem, 4vw, 1.5rem); letter-spacing: 2px; margin-bottom: 10px; }
    #auth-welcome { font-size: clamp(1.8rem, 7vw, 2.5rem); line-height: 1.2; padding: 0 10px; }
    .auth-whisper { font-size: clamp(1.5rem, 7vw, 2.5rem); text-align: center; width: 90%; }
    .snape-silhouette { width: 200px; height: 350px; right: -20px; }

    /* 3. Typography Scaling for Main Rooms */
    .glow-text { font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: 1.2; }
    .potter-callout { font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: 1.2; padding: 0 10px; }
    .greeting-text { font-size: clamp(1rem, 4vw, 1.3rem); }
    .highlight-text { font-size: clamp(1.15rem, 4.5vw, 1.5rem); }
    .hp-subtitle { font-size: clamp(0.9rem, 3.5vw, 1.3rem); letter-spacing: 3px; line-height: 1.4; }
    .section-title { font-size: clamp(1.3rem, 5.5vw, 1.8rem); line-height: 1.3; padding: 0 15px; }
    #hat-text { font-size: clamp(1.2rem, 5vw, 1.8rem); }
    .sorting-title { font-size: clamp(1.1rem, 4.5vw, 1.5rem); line-height: 1.4; padding: 0 10px; }
    .player-title { font-size: clamp(1.15rem, 5vw, 1.6rem); margin-bottom: 40px; }
    .trivia-question { font-size: clamp(1rem, 4.5vw, 1.3rem); line-height: 1.4; }
    #typing-text { font-size: clamp(1rem, 4vw, 1.3rem); line-height: 1.6; }
    
    /* 4. Universal Titles (Headmaster / Common Room / Great Hall) */
    h1[style*="font-family: var(--font-display)"] {
        font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important;
        line-height: 1.3;
        padding: 0 15px;
    }

    /* 5. Layout & Spacing Fixes */
    .greeting-content { padding: 32px 20px; width: 90%; margin: 0 auto; }
    .letter-content { padding: 28px 20px; }
    .trivia-lock-overlay { padding: 28px 20px; width: 90%; }
    .exam-candles, .hall-candles { gap: 20px; }
    
    /* 6. Sorting Hat Positioning */
    .floating-hat { top: -55px; width: 130px; }

    /* 7. Slytherin Banners */
    .slytherin-banner { min-width: 60px; padding-top: 30vh; }

    /* 8. Floating Hogwarts Letters - Less Obtrusive */
    .floating-letter {
        width: 130px !important; 
        padding: 8px 10px !important;
        font-size: 0.65rem !important;
        opacity: 0.65 !important; /* Makes them slightly transparent so they don't block UI */
    }
    .floating-letter::after {
        width: 18px !important; height: 18px !important;
        line-height: 18px !important; font-size: 9px !important;
        bottom: -6px !important; right: -6px !important;
    }
}

@media (max-width: 480px) {
    .book-content { padding: 28px 20px; }
    .author { letter-spacing: 2px; }

    .slytherin-banner { min-width: 56px; }
    .banner-left { left: 2%; }
    .banner-right { right: 2%; }

    .heart-collage-container { margin-top: -10px; }

    .track-info { min-width: 0; }
    .song-name { font-size: 1rem; }
}

/* FLOATING HOGWARTS LETTERS */

.floating-letter {
    position: absolute;
    z-index: 1500; 
    background: #eaddc5; 
    border: 1px solid #c4a47c;
    color: #3a2618; 
    font-family: var(--font-magic), sans-serif; 
    font-size: 1.8rem; 
    font-weight: bold;
    animation-duration: 8s !important; 
    padding: 15px 20px;
    width: 260px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 3px 5px 15px rgba(0, 0, 0, 0.6);
    pointer-events: none; 
    opacity: 0;
}
/* The Red Wax Seal */
.floating-letter::after {
    content: "H";
    position: absolute;
    bottom: -12px;
    right: -10px;
    background: #8b0000;
    color: #ffcccc;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 16px;
    line-height: 28px;
    font-family: serif;
    font-weight: bold;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* The Flight Paths */
@keyframes letterFlyRight {
    0% { opacity: 0; transform: translateX(0) translateY(50px) rotate(-15deg) scale(0.8); }
    15% { opacity: 0.95; }
    85% { opacity: 0.95; }
    100% { opacity: 0; transform: translateX(110vw) translateY(-50px) rotate(15deg) scale(1.1); }
}

@keyframes letterFlyLeft {
    0% { opacity: 0; transform: translateX(0) translateY(50px) rotate(15deg) scale(0.8); }
    15% { opacity: 0.95; }
    85% { opacity: 0.95; }
    100% { opacity: 0; transform: translateX(-110vw) translateY(-50px) rotate(-15deg) scale(1.1); }
}

/* EASTER EGG: ALOHOMORA SHATTER */

/* The sequential text for the Alohomora Easter Egg */
.alohomora-secret-text {
    font-family: var(--font-magic);
    font-size: clamp(1.5rem, 4vw, 3.5rem);
    color: var(--silver);
    text-shadow: 0 0 15px rgba(26, 71, 42, 0.8); /* Faint Slytherin glow */
    letter-spacing: 2px;
    text-align: center;
    
    position: absolute; 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.alohomora-secret-text.visible {
    opacity: 1;
}

.alohomora-shatter {
    /* Locks the element so she can't click it while it explodes */
    pointer-events: none !important; 
    animation: unlockShatter 1.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards !important;
}

@keyframes unlockShatter {
    0% { transform: scale(1); box-shadow: 0 0 20px rgba(212, 175, 55, 0); }
    /* The violent magical shaking */
    10%, 30%, 50% { transform: scale(1.05) translate(-8px, 4px) rotate(-2deg); box-shadow: 0 0 40px rgba(212, 175, 55, 0.6); background: rgba(212, 175, 55, 0.2); }
    20%, 40%, 60% { transform: scale(1.05) translate(8px, -4px) rotate(2deg); box-shadow: 0 0 60px rgba(212, 175, 55, 0.8); background: rgba(212, 175, 55, 0.4); }
    /* The golden flash and shatter */
    80% { transform: scale(1.1); opacity: 1; filter: brightness(2); }
    100% { transform: scale(0.3) translateY(100px); opacity: 0; filter: blur(10px); }
}


/* EASTER EGG: LUMOS & NOX */

body.lumos-cursor-active,
body.lumos-cursor-active * {
    cursor: url('wand-glow.png'), auto !important; 
}

/* MISCHIEF MANAGED */

/* The delayed fade-in for the final word */
.delayed-always {
    display: block; 
    margin-top: 15px;
    font-size: 1.5em; 
    color: var(--teal-silver); 
    font-family: var(--font-display);
    letter-spacing: 4px;
    opacity: 0;
    transition: opacity 3s ease-in-out;
    transition-delay: 3.5s; 
}

/* Always delayed */
.mischief-managed-text.visible .delayed-always {
    opacity: 1;
}

.mischief-managed-overlay {
    position: fixed;
    inset: 0;
    background: #020202; 
    z-index: 99999; 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    
    opacity: 0;
    pointer-events: none; 
    transition: opacity 3s ease-in-out; 
}

.mischief-managed-overlay.active {
    opacity: 1;
    pointer-events: all; 
}

.mischief-managed-text {
    font-family: var(--font-magic);
    font-size: clamp(3.5rem, 12vw, 7rem);
    color: var(--silver);
    letter-spacing: 2px;
    
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 3s ease, transform 5s ease-out; /* Slow zoom and fade */
}

.mischief-managed-text.visible {
    opacity: 1;
    transform: scale(1);
}

.hp-metallic-text {
    background: linear-gradient(to bottom, #e1effa 0%, #83adc2 45%, #2a475e 50%, #688fa6 60%, #d1e4f2 100%);
    font-family: var(--font-magic);
    
    /* Forces the background to only show inside the text characters */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    
    display: inline-block;
    
    filter: drop-shadow(0 0 15px rgba(131, 173, 194, 0.4));
}

/* EASTER EGG: EXPECTO PATRONUM */

.patronus-overlay {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(4, 15, 30, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 99995; 
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    opacity: 0;
    pointer-events: none;
    transition: opacity 2.5s ease-in-out; 
}

.patronus-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.patronus-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    
    /* Starts slightly small and grows into place */
    transform: scale(0.9);
    transition: transform 3s ease-out;
}

.patronus-overlay.active .patronus-container {
    transform: scale(1);
}

.patronus-img {
    max-width: 85vw;
    max-height: 55vh;
    border-radius: 12px;
    
    /* The magical silvery-blue Patronus glow */
    border: 2px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 40px rgba(154, 214, 240, 0.7), 0 0 80px rgba(255, 255, 255, 0.3);
    
    /* Makes the light pulse softly */
    animation: patronusPulse 3s infinite alternate ease-in-out;
}

.patronus-text {
    margin-top: 40px;
    font-family: var(--font-magic);
    font-size: clamp(1.8rem, 4vw, 3.2rem); 
    color: #b0d4eb;
    text-shadow: 0 0 15px rgba(154, 214, 240, 0.8);
    line-height: 1.4; /* Gives the text room to breathe */
    
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 2s ease, transform 2s ease;
    transition-delay: 1.5s; 
}

.patronus-overlay.active .patronus-text {
    opacity: 1;
    transform: translateY(0);
}

.patronus-highlight {
    font-size: 0.6em; /* Makes the bottom line purposefully larger */
    color: #ffffff;
    display: block;
    margin-top: 15px;
    letter-spacing: 3px; 
    text-shadow: 0 0 25px rgba(255, 255, 255, 0.9), 0 0 10px rgba(154, 214, 240, 0.6);
}

/* The breathing light effect on the photo */
@keyframes patronusPulse {
    0% { box-shadow: 0 0 30px rgba(154, 214, 240, 0.5), 0 0 60px rgba(255, 255, 255, 0.2); }
    100% { box-shadow: 0 0 50px rgba(154, 214, 240, 0.9), 0 0 100px rgba(255, 255, 255, 0.5); }
}

/* FLOATING MUSIC PLAYER */
.floating-music-player {
    position: fixed !important; 
    bottom: -150px !important; 
    left: 50%;
    transform: translateX(-50%);
    background: rgba(4, 15, 30, 0.85); 
    border: 1px solid rgba(212, 175, 55, 0.4); 
    border-radius: 25px;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.9), inset 0 0 15px rgba(212, 175, 55, 0.2);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 2147483647 !important; 
    
    transition: bottom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    pointer-events: none; 
    opacity: 0;
}

.floating-music-player.active {
    bottom: 30px !important; 
    pointer-events: all;
    opacity: 1;
}

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

.float-song {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--gold);
    font-weight: bold;
    letter-spacing: 1px;
    white-space: nowrap;
}

.float-artist {
    font-family: sans-serif;
    font-size: 0.65rem;
    color: #a0a0a0;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.float-play-btn {
    background: transparent;
    color: var(--gold);
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    transition: transform 0.2s ease, text-shadow 0.2s ease;
    outline: none;
}

.float-play-btn:hover {
    transform: scale(1.15);
    text-shadow: 0 0 10px var(--gold);
}

/* Mobile sizing */
@media (max-width: 768px) {
    .floating-music-player {
        width: 90%;
        justify-content: space-between;
        padding: 12px 20px;
    }
}

/* Container for the player buttons */
.float-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto; /* Pushes the buttons to the right side */
}

/* Styling for the next track button */
.float-track-btn {
    background: transparent;
    color: var(--silver);
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
    outline: none;
}

.float-track-btn:hover {
    transform: scale(1.15);
    color: var(--gold);
    text-shadow: 0 0 10px var(--gold);
}

/* Mobile tweak to keep it perfectly spaced */
@media (max-width: 768px) {
    .float-controls { gap: 12px; }
    .float-track-btn { font-size: 1.1rem; }
}

/* LUMOS FLASHLIGHT OVERLAY */
#lumos-overlay {
    position: fixed;
    top: 0; left: 0; 
    width: 100vw; height: 100vh;
    z-index: 99999 !important; /* Forces it over absolutely everything */
    pointer-events: none; 
    opacity: 0;
    transition: opacity 0.8s ease;
    
    /* The cinematic pitch-black gradient */
    background: radial-gradient(
        circle 350px at var(--mx, 50%) var(--my, 50%), 
        transparent 0%, 
        rgba(0, 0, 0, 0.85) 40%, 
        rgba(0, 0, 0, 0.98) 70%, 
        #000000 100%
    );
}

/* The new trigger class */
#lumos-overlay.darkness-falling {
    opacity: 1;
}

/* NEW CENTRALIZED SLYTHERIN PLAYLIST */
.central-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 15px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* The Glowing Green Sphere */
.album-orb {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(circle, #63a983 0%, #3a7957 60%, #1e4530 100%);
    box-shadow: 0 0 50px rgba(58, 121, 87, 0.5), inset 0 0 25px rgba(0, 0, 0, 0.6);
    margin: 15px 0 25px 0;
    animation: orbPulse 4s infinite alternate;
}

@keyframes orbPulse {
    0% { box-shadow: 0 0 50px rgba(58, 121, 87, 0.3), inset 0 0 25px rgba(0, 0, 0, 0.6); transform: scale(1); }
    100% { box-shadow: 0 0 70px rgba(99, 169, 131, 0.6), inset 0 0 30px rgba(0, 0, 0, 0.7); transform: scale(1.03); }
}

.central-song-name {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: #fff;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.central-artist-name {
    font-family: sans-serif;
    font-size: 0.85rem;
    color: #a0a0a0;
    margin-bottom: 25px;
}

/* The centralized progress bar */
.central-progress {
    display: flex;
    align-items: center;
    width: 90%;
    gap: 15px;
    margin-bottom: 20px;
}

.seek-slider {
    flex-grow: 1;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(255, 255, 255, 0.1);
    height: 4px;
    border-radius: 2px;
    outline: none;
}

.seek-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #88d4ab;
    box-shadow: 0 0 10px #5ca07c;
    cursor: pointer;
    transition: transform 0.2s;
}
.seek-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }

/* Playback Buttons */
.central-controls { display: flex; align-items: center; gap: 30px; }

.central-ctrl-btn {
    background: none; border: none; color: #888; font-size: 1.2rem; cursor: pointer; transition: 0.2s;
}
.central-ctrl-btn:hover { color: #fff; transform: scale(1.15); }

.central-play-btn {
    background: #88d4ab;
    color: #000;
    border: none;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 1.4rem;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(136, 212, 171, 0.3);
    transition: 0.2s;
}
.central-play-btn:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(136, 212, 171, 0.5); }

/* The Playlist Rows */
.playlist-tracks { width: 100%; display: flex; flex-direction: column; gap: 5px; }

.simple-track {
    padding: 12px 15px;
    border-radius: 8px;
    color: #a0a0a0;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}
.simple-track:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }

/* The highlighted state for the active song */
.simple-track.active {
    background: #233a2d; /* Dark Slytherin Green highlight */
    color: #fff;
    font-weight: bold;
}

/* SPELL CAPTION POPUP */
.spell-caption {
    position: fixed;
    left: 50%;
    bottom: 100px; 
    transform: translate(-50%, 20px);
    z-index: 999999;
    font-family: var(--font-magic); 
    font-size: 1.5rem;
    color: var(--gold-bright);
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.8), 2px 2px 5px rgba(0,0,0,0.9);
    letter-spacing: 3px;
    pointer-events: none; 
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.spell-caption.show {
    opacity: 1;
    transform: translate(-50%, 0); /* Floats up slightly */
}

/* THE GOLDEN SNITCH MINIGAME */
.golden-snitch {
    position: fixed; 
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, #ffeaa7 0%, #d4af37 60%, #997300 100%);
    border-radius: 50%;
    box-shadow: 0 0 15px #ffd700, 0 0 30px #d4af37;
    cursor: crosshair !important; 
    z-index: 99999;
    opacity: 0; 
    pointer-events: none;
    transition: top 0.9s cubic-bezier(0.25, 1, 0.4, 1), left 0.9s cubic-bezier(0.25, 1, 0.4, 1), opacity 0.5s ease;
}

.golden-snitch.active {
    opacity: 1;
    pointer-events: all;
}

.snitch-wing {
    position: absolute;
    top: 2px;
    width: 35px;
    height: 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
    filter: blur(1px); 
}

.left-wing {
    right: 90%;
    transform-origin: right center;
    animation: flutterLeft 0.04s infinite alternate;
}

.right-wing {
    left: 90%;
    transform-origin: left center;
    animation: flutterRight 0.04s infinite alternate;
}

@keyframes flutterLeft { 0% { transform: rotate(15deg); } 100% { transform: rotate(-55deg); } }
@keyframes flutterRight { 0% { transform: rotate(-15deg); } 100% { transform: rotate(55deg); } }


.golden-snitch.caught {
    pointer-events: none;
    transition: none !important;
    animation: snitchBurst 0.5s ease-out forwards;
}

@keyframes snitchBurst {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(3); filter: brightness(2); opacity: 1; }
    100% { transform: scale(0); filter: brightness(3); opacity: 0; }
}


.snitch-points {
    position: fixed;
    font-family: var(--font-magic);
    font-size: clamp(3rem, 8vw, 5rem);
    color: var(--gold-bright);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.9), 2px 2px 8px #000;
    pointer-events: none;
    opacity: 0;
    z-index: 100000;
    transform: translate(-50%, -50%) scale(0.5);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    letter-spacing: 2px;
    white-space: nowrap;
}

.snitch-points.show {
    opacity: 1;
    transform: translate(-50%, -150px) scale(1); /* Floats up into the air */
}

/* =========================================================================
   CHAPTER 0: AUTHORIZATION (THE RESTRICTED ARCHIVES)
========================================================================= */
.auth-section {
    position: fixed;
    inset: 0;
    z-index: 150000; /* Sits above the book cover, below the preloader */
    background: #02050a;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: opacity 2s ease, filter 2s ease;
}

/* Ambient Background Magic */
.auth-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.auth-fog {
    position: absolute; inset: -50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    animation: slowFog 20s infinite alternate linear;
    filter: blur(20px);
}
@keyframes slowFog { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.2) translate(5%, 5%); } }

/* The Glassmorphism Panel */
.auth-panel {
    position: relative;
    z-index: 10;
    background: rgba(10, 15, 25, 0.6);
    padding: 60px 40px;
    border-radius: 20px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.9), inset 0 0 30px rgba(212, 175, 55, 0.05);
    backdrop-filter: blur(15px);
    text-align: center;
    max-width: 600px;
    width: 90%;
    transition: all 1s ease;
}

/* The Hogwarts Seal & Spell Circle */
.auth-seal-container {
    position: relative;
    width: 100px; height: 100px;
    margin: 0 auto 30px auto;
    display: flex; justify-content: center; align-items: center;
}
.auth-seal {
    width: 70px; height: 70px;
    background: #8b0000; color: #ffcccc;
    border-radius: 50%; font-family: 'Georgia', serif;
    font-size: 40px; line-height: 70px; font-weight: bold;
    box-shadow: 0 0 15px rgba(0,0,0,0.8), inset 0 0 10px rgba(255,255,255,0.2);
    transition: all 1.5s ease;
}
.spell-circle-svg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    transform: rotate(-90deg); /* Start at top */
    pointer-events: none;
}
#spell-circle-path {
    fill: none;
    stroke: var(--gold-bright);
    stroke-width: 2;
    stroke-dasharray: 302; /* 2 * PI * 48 */
    stroke-dashoffset: 302;
    filter: drop-shadow(0 0 8px var(--gold));
    transition: stroke-dashoffset 1.5s linear, stroke 0.5s ease;
}
#spell-circle-path.drawing { stroke-dashoffset: 0; }
#spell-circle-path.spell-fail { stroke: #2f8f53; filter: drop-shadow(0 0 8px #2f8f53); opacity: 0; transition: stroke 0.2s, opacity 1s ease 0.5s; }

/* Typography */
.auth-title { font-size: clamp(2rem, 8vw, 4rem); margin-bottom: 5px; color: var(--gold); }
.auth-subtitle { font-family: var(--font-display); font-size: 1.2rem; color: var(--silver); letter-spacing: 3px; margin-bottom: 15px; }
.auth-desc { font-style: italic; color: #a0a0a0; font-size: 0.95rem; margin-bottom: 35px; }

/* The Input Field & Typing Magic */
.auth-input-container { position: relative; margin-bottom: 30px; }
#auth-input {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: none; border-bottom: 2px solid rgba(212, 175, 55, 0.4);
    color: var(--cream);
    font-family: var(--font-display);
    font-size: 1.2rem; padding: 15px; text-align: center; outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}
#auth-input::placeholder { color: #555; font-style: italic; }
#auth-input:focus { border-bottom: 2px solid var(--gold-bright); box-shadow: 0 10px 15px -10px rgba(212,175,55,0.5); }
.glow-typing { box-shadow: inset 0 0 20px rgba(212,175,55,0.3) !important; border-bottom: 2px solid var(--gold-bright) !important; }

/* The Magical Submit Button */
.auth-submit-btn {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.5);
    color: var(--gold-bright);
    font-family: var(--font-magic);
    font-size: 1.2rem;
    padding: 12px 40px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin: 0 auto;
    display: block;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.auth-submit-btn:hover {
    background: rgba(212, 175, 55, 0.25);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);
    transform: translateY(-2px);
}

/* Casting State (Button pulses while the spell circle draws) */
.auth-submit-btn.casting {
    pointer-events: none;
    animation: pulseButton 1.5s infinite;
}

@keyframes pulseButton {
    0%, 100% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.2); transform: scale(1); }
    50% { box-shadow: 0 0 40px rgba(212, 175, 55, 0.8); transform: scale(1.05); }
}

/* Feedback & Failures */
.auth-feedback {
    margin-top: 25px; min-height: 25px;
    font-family: var(--font-display); font-size: 1rem; color: #ff5c6c;
    opacity: 0; transition: opacity 0.4s ease;
}
.auth-shake { animation: authShake 0.4s ease forwards; }
@keyframes authShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 50% { transform: translateX(10px); } 75% { transform: translateX(-10px); } }
.auth-fail-flash { box-shadow: inset 0 0 40px rgba(255,0,0,0.3) !important; border-color: #ff5c6c !important; }

/* Easter Eggs */
.snape-silhouette {
    position: absolute; right: -50px; bottom: 0;
    width: 300px; height: 500px;
    background: url('snape.png') no-repeat bottom center; background-size: contain;
    opacity: 0; filter: blur(5px); transition: opacity 2s ease, filter 2s ease, transform 4s ease;
    pointer-events: none; z-index: 5; transform: translateX(50px);
}
.snape-silhouette.show { 
    opacity: 0.6; 
    filter: blur(0px); 
    transform: translateX(0); 
}

.auth-blackout { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 900; pointer-events: none; transition: opacity 2s ease; }
.auth-whisper {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: var(--font-magic); font-size: 3rem; color: #a0a0a0; z-index: 901;
    opacity: 0; transition: opacity 2s ease; pointer-events: none; text-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* Cinematic Success Sequence */
.auth-success-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: 999; text-align: center; pointer-events: none; width: 100%;
}
#auth-identity, #auth-welcome {
    font-family: var(--font-display); font-size: 2rem; color: var(--gold-bright);
    opacity: 0; text-shadow: 0 0 20px var(--gold); transition: opacity 1.5s ease, filter 1.5s ease;
}
#auth-identity { margin-bottom: 20px; letter-spacing: 4px; }
#auth-welcome { font-family: var(--font-magic); font-size: 4rem; letter-spacing: 2px; }

.auth-seal.success-glow { background: var(--gold-bright); box-shadow: 0 0 60px var(--gold-bright); color: #000; transform: scale(1.2); }
.auth-panel.dissolve { opacity: 0; filter: blur(20px); transform: scale(1.1); }

/* =========================================================================
   CHAPTER VIII: THE MINISTRY OF TIME (CINEMATIC)
========================================================================= */
body.ministry-theme-active {
    background: #000000 !important;
}

body.ministry-theme-active #magic-world {
    padding-bottom: 0 !important; 
}

.cinematic-time-room {
    position: relative;
    overflow: hidden; 
    margin-bottom: 0 !important; 
    padding-bottom: 80px !important;
}

.cinematic-back {
    position: absolute; top: 20px; left: 20px; z-index: 1000;
}

/* 1. Lumos Ignition Sequence */
.time-lumos-overlay {
    position: fixed; inset: 0;
    background: #000;
    z-index: 500; display: flex;
    justify-content: center; align-items: center;
    transition: opacity 2s ease, visibility 2s ease;
}

.lumos-orb-container {
    position: relative; z-index: 501;
    display: flex; flex-direction: column; align-items: center;
    cursor: pointer; transition: transform 0.3s ease;
}
.lumos-orb-container:hover { transform: scale(1.1); }

.lumos-orb-spark {
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 20px #eaddc5, 0 0 40px #d4af37;
    animation: lumosPulse 3s infinite alternate;
}

.lumos-hint {
    margin-top: 25px; font-family: var(--font-display);
    color: #eaddc5; letter-spacing: 4px; font-size: 0.9rem;
    opacity: 0.6; text-shadow: 0 0 10px rgba(212,175,55,0.5);
}

@keyframes lumosPulse {
    0% { transform: scale(0.9); box-shadow: 0 0 10px #d4af37; }
    100% { transform: scale(1.2); box-shadow: 0 0 30px #eaddc5, 0 0 60px #fff; }
}

/* The slow light spread */
.lumos-spread {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 1px; height: 1px; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.4) 0%, transparent 70%);
    pointer-events: none; transition: all 4s cubic-bezier(0.25, 1, 0.5, 1);
}
.lumos-spread.ignite {
    width: 200vw; height: 200vw;
    background: radial-gradient(circle, rgba(212,175,55,0) 0%, transparent 70%);
}

/* 2. Background Environment (Giant Time Turner) */
.ministry-environment {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background: radial-gradient(circle at center, #0a140f 0%, #030805 60%, #000000 100%);
    opacity: 0; transition: opacity 3s ease 1s; 
    overflow: hidden;
}
.cinematic-time-room.room-lit .ministry-environment { opacity: 1; }

.giant-time-turner {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 120vh; height: 120vh;
    perspective: 1000px; opacity: 0.15;
}

.tt-ring {
    position: absolute; inset: 0;
    border-radius: 50%; border: 4px solid var(--gold);
    box-shadow: 0 0 30px var(--gold-bright), inset 0 0 30px var(--gold);
}
.outer-ring { animation: rotateRingX 40s linear infinite; }
.middle-ring { transform: scale(0.85); animation: rotateRingY 30s linear infinite; border-width: 8px; border-color: #a88222; }
.inner-ring { transform: scale(0.7); animation: rotateRingZ 25s linear infinite; border-style: dashed; }

@keyframes rotateRingX { 100% { transform: rotateX(360deg) rotateY(180deg); } }
@keyframes rotateRingY { 100% { transform: scale(0.85) rotateY(360deg) rotateZ(90deg); } }
@keyframes rotateRingZ { 100% { transform: scale(0.7) rotateZ(360deg) rotateX(120deg); } }

/* 3. Ceremonial Text Reveal */
.ceremony-text-wrapper {
    position: relative; z-index: 50; margin-top: 20px;
    display: flex; flex-direction: column; gap: 20px; align-items: center;
    min-height: 150px;
}
.ceremony-line {
    font-family: var(--font-display); font-size: clamp(1.2rem, 4vw, 2rem);
    color: var(--gold-bright); letter-spacing: 3px; text-shadow: 0 0 15px rgba(212,175,55,0.6);
    text-align: center;
}
.ceremony-line .letter {
    display: inline-block; opacity: 0; filter: blur(10px); transform: translateY(10px);
}
.ceremony-line .letter.reveal {
    animation: goldenWrite 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes goldenWrite {
    100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}
.ceremony-line.fade-out { transition: opacity 1s ease, filter 1s ease; opacity: 0; filter: blur(5px); }

/* 4. Magical Artifacts Layout */
.artifact-gallery {
    position: relative; z-index: 60;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: clamp(20px, 4vw, 50px); max-width: 1000px; margin: 10px auto 60px auto;
    padding: 0 20px;
}

.artifact-pod {
    display: flex; flex-direction: column; align-items: center; gap: 15px;
    opacity: 0; transform: scale(0.8) translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.artifact-pod.revealed { 
    opacity: 1; 
    transform: scale(1) translateY(0); 
}

.artifact-label {
    font-family: var(--font-display); font-size: 0.8rem;
    color: var(--gold); letter-spacing: 2px; text-transform: uppercase;
    text-shadow: 0 0 10px rgba(0,0,0,0.9);
}

.time-value {
    font-family: var(--font-display); font-size: 2.2rem;
    color: #fff; text-shadow: 0 0 15px var(--gold-bright), 2px 2px 5px #000;
    position: relative; z-index: 10; transition: text-shadow 0.3s;
}

/* --- THE UNIQUE ARTIFACT DESIGNS --- */
.relic {
    position: relative; display: flex; justify-content: center; align-items: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.6); animation: artifactFloat 6s ease-in-out infinite alternate;
}
@keyframes artifactFloat { 0% { transform: translateY(0); } 100% { transform: translateY(-10px); } }

/* Years: Brass Hourglass */
.relic-hourglass {
    width: 80px; height: 120px;
    background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(5px);
    clip-path: polygon(0% 0%, 100% 0%, 80% 50%, 100% 100%, 0% 100%, 20% 50%);
    border-top: 6px solid #a88222; border-bottom: 6px solid #a88222;
    box-shadow: inset 0 0 20px rgba(212,175,55,0.2);
}

/* Months: Glowing Moon */
.relic-moon {
    width: 100px; height: 100px; border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff, #c2d1c6 50%, #1a2e22 100%);
    box-shadow: 0 0 30px rgba(194, 209, 198, 0.6), inset -10px -10px 20px rgba(0,0,0,0.8);
}

/* Days: Golden Compass */
.relic-compass {
    width: 110px; height: 110px; border-radius: 50%;
    background: rgba(10, 20, 15, 0.8); border: 8px solid #a88222;
    box-shadow: 0 0 20px rgba(0,0,0,0.8), inset 0 0 15px var(--gold);
}
.compass-ring {
    position: absolute; inset: 5px; border-radius: 50%; border: 1px dashed var(--gold);
    animation: rotateRingZ 20s linear infinite;
}

/* Hours: Pocket Watch */
.relic-watch {
    width: 100px; height: 100px; border-radius: 50%;
    background: #050a07; border: 4px solid var(--silver);
    box-shadow: 0 0 20px rgba(192,192,192,0.3), inset 0 0 20px rgba(192,192,192,0.2);
}
.watch-crown {
    position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
    width: 20px; height: 15px; background: var(--silver); border-radius: 5px 5px 0 0;
}

/* Minutes: Crystal Vial */
.relic-vial {
    width: 60px; height: 130px; border-radius: 30px;
    background: rgba(255,255,255,0.05); backdrop-filter: blur(8px);
    border: 2px solid rgba(212,175,55,0.3); overflow: hidden;
}
.vial-liquid {
    position: absolute; bottom: 0; left: 0; width: 100%; height: 60%;
    background: linear-gradient(to top, #1a472a, #d4af37);
    opacity: 0.6; filter: blur(2px);
}

/* Seconds: Pulsing Orb */
.relic-orb {
    width: 90px; height: 90px; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.8) 0%, transparent 70%);
    box-shadow: 0 0 40px rgba(212,175,55,0.4); display: flex; justify-content: center; align-items: center;
}
.relic-orb .time-value { font-size: 3rem; }

/* Dynamic Pulse Animation on value change */
.artifact-pod.pulse .relic {
    animation: relicPulse 0.5s ease-out forwards;
}
@keyframes relicPulse {
    0% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.15); filter: brightness(1.5); box-shadow: 0 0 50px var(--gold-bright); }
    100% { transform: scale(1); filter: brightness(1); }
}

/* 5. Final Details */
.time-final-message {
    font-family: 'Georgia', serif; font-style: italic; font-size: clamp(1.2rem, 4vw, 1.5rem);
    color: var(--gold); text-align: center; margin-top: 50px; opacity: 0;
    text-shadow: 0 0 15px rgba(212,175,55,0.4); transition: opacity 2s ease;
    position: relative; z-index: 100;
}
.time-final-message.revealed { opacity: 1; }

.foreground-blur-candles {
    position: absolute; bottom: -50px; width: 100%; height: 150px;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.8) 100%);
    pointer-events: none; z-index: 90;
}

@media (max-width: 768px) {
    .artifact-gallery { gap: 20px; }
    .artifact-pod:nth-child(even) { margin-top: 20px; }
    .time-value { font-size: 1.8rem; }
    .giant-time-turner { width: 100vw; height: 100vw; }
}

/* Official Ministry Title Card Styles */
.ministry-title-wrapper {
    text-align: center;
    padding-top: 40px;
    margin-bottom: 20px;
    position: relative;
    z-index: 100; /* Stays above the background atmosphere */
}

.ministry-kicker {
    font-family: var(--font-display);
    font-size: clamp(0.7rem, 2vw, 1rem);
    color: var(--gold);
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.8;
}

.ministry-main-heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.5rem);
    color: var(--gold-bright);
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: normal;
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.4), 2px 2px 4px rgba(0,0,0,0.9);
    margin-bottom: 15px;
}

/* Fading Divider */
.ministry-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 60%;
    max-width: 400px;
    margin: 0 auto;
}

.divider-line {
    height: 1px;
    flex-grow: 1;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.5;
}

.divider-star {
    color: var(--gold);
    font-size: 1rem;
    filter: drop-shadow(0 0 5px var(--gold));
}

.mpandey-marker {
    width: 200px; 
    height: auto;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.6));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    animation: floating-animation 4s ease-in-out infinite;
}

@keyframes floating-animation {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); } /* Floats up 10px */
    100% { transform: translateY(0px); }  /* Floats back down */
}

.mpandey-marker:hover {
    transform: scale(1.1) rotate(-1deg);
}

.map-you-are-here {
    position: absolute;
    bottom: 5%; 
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
}

/* The magical expanding ink reveal */
#marauders-map.visible-room #parchment-map {
    /* Triggers the exact moment she enters the map room */
    animation: inkSpread 3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* The physical animation engine */
@keyframes inkSpread {
    0% { 
        clip-path: circle(2% at 50% 95%); /* Starts as a tiny dot behind the ribbon */
        opacity: 0;
    }
    10% {
        opacity: 1; /* Fades in quickly */
    }
    100% { 
        clip-path: circle(150% at 50% 95%); /* Bleeds outward to reveal everything */
        opacity: 1;
    }
}

.idle-secret-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-magic);
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: #4a3a22; /* Dark ink color */
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    text-align: center;
    letter-spacing: 3px;
    mix-blend-mode: multiply; /* Makes it look like real ink soaking into the paper */
    filter: blur(4px);
    transition: opacity 3s ease-in, filter 3s ease-in;
}

.idle-secret-message.reveal-ink {
    opacity: 0.6;
    filter: blur(0px);
}

/* =========================================================================
   MOBILE RESPONSIVENESS — COMPREHENSIVE OVERHAUL
   Added to make every section beautiful on phones (320px–480px)
   ========================================================================= */

/* ── Base fixes (all screen sizes) ── */
.floating-music-player {
    max-width: 500px;
}

.float-song {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

/* ── Expanded 480px breakpoint ── */
@media (max-width: 480px) {

    /* Gate / Book Entrance */
    #gate-text {
        padding: 28px 20px !important;
    }

    /* Auth Section */
    .auth-panel {
        padding: 25px 15px !important;
    }
    .snape-silhouette {
        width: 150px !important;
        height: 280px !important;
    }
    .auth-seal {
        font-size: 28px !important;
    }
    #auth-welcome {
        font-size: clamp(1.5rem, 8vw, 2.5rem) !important;
    }
    #auth-identity {
        font-size: clamp(1rem, 5vw, 1.6rem) !important;
    }

    /* Sorting Ceremony */
    .sorting-image-wrapper {
        margin-top: 40px !important;
    }
    .floating-hat {
        top: -40px !important;
    }

    /* Pensieve Layout */
    .pensieve-layout {
        gap: 20px !important;
    }
    .letter-content {
        padding: 20px 15px !important;
    }

    /* Music Player */
    .album-orb {
        width: 120px !important;
        height: 120px !important;
    }
    .central-controls {
        gap: 20px !important;
    }
    .central-song-name {
        font-size: 1.1rem !important;
    }

    /* Floating Player */
    .floating-music-player {
        padding: 8px 15px !important;
    }
    .float-song {
        max-width: 100px !important;
        font-size: 0.85rem !important;
    }

    /* Map Section */
    .map-location {
        padding: 10px 20px !important;
        font-size: 1.2rem !important;
    }
    .map-pin {
        min-width: 44px;
        min-height: 44px;
    }
    .map-pin-icon {
        font-size: 1.5rem !important;
    }
    .map-pin-label {
        font-size: 0.65rem !important;
    }

    /* Ministry Artifact Gallery — 2 column grid */
    .artifact-gallery {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }
    .artifact-pod {
        margin: 0 !important;
    }

    /* Relic size reductions */
    .relic-hourglass {
        width: 55px !important;
        height: 85px !important;
    }
    .relic-moon {
        width: 70px !important;
        height: 70px !important;
    }
    .relic-compass {
        width: 75px !important;
        height: 75px !important;
    }
    .relic-watch {
        width: 70px !important;
        height: 70px !important;
    }
    .relic-vial {
        width: 42px !important;
        height: 90px !important;
    }
    .relic-orb {
        width: 65px !important;
        height: 65px !important;
    }
    .relic-orb .time-value {
        font-size: 2rem !important;
    }
    .time-value {
        font-size: 1.4rem !important;
    }
    .artifact-label {
        font-size: 0.65rem !important;
    }

    /* Ceremony text */
    .ceremony-line {
        font-size: clamp(0.9rem, 3.5vw, 1.5rem) !important;
    }

    /* Ministry title */
    .ministry-main-heading {
        font-size: clamp(1.2rem, 5vw, 2rem) !important;
    }
    .ministry-kicker {
        font-size: clamp(0.7rem, 2.5vw, 1rem) !important;
    }

    /* Slytherin Banners — further reduce */
    .slytherin-banner {
        min-width: 40px !important;
        width: 8vw !important;
    }

    /* Spell Caption — avoid floating player overlap */
    .spell-caption {
        bottom: 60px !important;
        font-size: 1.1rem !important;
    }

    /* Snitch Points */
    .snitch-points {
        white-space: normal !important;
        font-size: clamp(1.5rem, 6vw, 3rem) !important;
    }

    /* Back to Map buttons */
    .back-to-map-btn {
        font-size: 0.85rem !important;
        padding: 8px 16px !important;
    }

    /* Time final message */
    .time-final-message {
        font-size: clamp(0.85rem, 3vw, 1.2rem) !important;
        padding: 0 15px !important;
    }

    /* Heart collage */
    .heart-collage-container {
        max-width: 90vw !important;
    }

    /* Trivia */
    .trivia-question {
        font-size: 1.1rem !important;
    }
    .nonchalant-feedback {
        font-size: 1rem !important;
    }

    /* Section titles (now controlled by CSS since inline was removed) */
    .section-title {
        font-size: clamp(1rem, 4vw, 1.5rem) !important;
    }

    /* Greeting */
    .greeting-content {
        padding: 20px 15px !important;
    }

    /* Idle secret message on map */
    .idle-secret-message {
        font-size: 0.7rem !important;
    }
}

/* ── New 360px breakpoint for very small phones ── */
@media (max-width: 360px) {

    /* Heart collage — reduce hover scale to prevent overflow */
    .heart-pic.revealed:hover {
        transform: scale(1.5) !important;
    }

    /* Artifact gallery — single column */
    .artifact-gallery {
        grid-template-columns: 1fr !important;
    }

    /* Further font reductions */
    .glow-text {
        font-size: clamp(1.2rem, 6vw, 2rem) !important;
    }
    .potter-callout {
        font-size: clamp(1.2rem, 5vw, 2rem) !important;
    }
    .hp-subtitle {
        font-size: clamp(0.7rem, 3vw, 1rem) !important;
    }

    /* Map pins tighter */
    .map-pin-icon {
        font-size: 1.3rem !important;
    }

    /* Float song even more compact */
    .float-song {
        max-width: 70px !important;
        font-size: 0.75rem !important;
    }

    /* Auth */
    .auth-panel {
        padding: 20px 10px !important;
    }
    .snape-silhouette {
        width: 120px !important;
        height: 220px !important;
    }
}

/* ── Touch device support (no hover) ── */
@media (hover: none) {

    /* Heart collage pics — show a subtle glow on tap instead of hover scale */
    .heart-pic.revealed {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .heart-pic.revealed:active {
        transform: scale(1.8);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.6);
        z-index: 100;
    }

    /* Map pin labels — visible on tap via JS-added class */
    .map-pin.label-visible .map-pin-label {
        max-width: 200px !important;
        opacity: 1 !important;
        padding: 4px 10px !important;
    }

    /* Simple track — active state instead of hover */
    .simple-track:active {
        background: rgba(212, 175, 55, 0.1);
    }

    /* Map pin hover effects should work on active/tap */
    .map-pin:active .map-pin-icon {
        transform: scale(1.3);
    }

    /* Back-to-map button — active feedback */
    .back-to-map-btn:active {
        transform: scale(0.95);
    }
}

/* ── Mobile Spell Book UI ── */
.spell-book-toggle {
    position: fixed;
    bottom: 80px;
    right: 15px;
    z-index: 9999;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(10px);
    color: var(--gold);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: spellBookPulse 3s infinite alternate;
}
.spell-book-toggle:active {
    transform: scale(0.9);
}
@keyframes spellBookPulse {
    0% { box-shadow: 0 0 10px rgba(212, 175, 55, 0.15); }
    100% { box-shadow: 0 0 25px rgba(212, 175, 55, 0.4); }
}

.spell-book-menu {
    position: fixed;
    bottom: 135px;
    right: 15px;
    z-index: 9998;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 12px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.spell-book-menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.spell-book-btn {
    background: transparent;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: 0.8rem;
    padding: 10px 18px;
    cursor: pointer;
    text-align: left;
    letter-spacing: 1px;
    transition: background 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}
.spell-book-btn:active {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.5);
}