/* ========================================
   MINIMALIST HARRY POTTER WEBSITE
   Clean, elegant, book-like design
   ======================================== */

/* ========================================
   COLOR VARIABLES - Subtle & Refined
   ======================================== */
:root {
    /* Primary Colors - Minimal */
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --background: #ffffff;
    --accent: #996515; /* Darker gold for better contrast */
    --dark-bg: #2a2a2a; /* Dark background for special sections */

    /* House Colors - WCAG AA compliant (4.5:1 contrast minimum) */
    --gryffindor: #740001;
    --gryffindor-gold: #996515; /* Updated: 4.97:1 contrast */
    --slytherin: #1a472a;
    --slytherin-silver: #6c757d; /* Updated: 4.69:1 contrast */
    --ravenclaw: #0e1a40;
    --ravenclaw-bronze: #704214; /* Updated: 8.47:1 contrast */
    --hufflepuff: #ecb939;
    --hufflepuff-black: #2a2a2a;

    /* Neutral Greys */
    --grey-light: #f5f5f5;
    --grey-mid: #e0e0e0;
    --grey-dark: #4a4a4a;
    --border-color: #d0d0d0;
}

/* ========================================
   RESET & BASE STYLES
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', 'Times New Roman', serif;
    line-height: 1.8;
    color: var(--text-primary);
    background-color: var(--background);
    font-size: 16px;
    max-width: 100%;
    overflow-x: hidden;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-family: 'Georgia', serif;
}

h1 {
    font-size: 2.5rem;
    border-bottom: 1px solid var(--accent);
    padding-bottom: 0.5rem;
    margin-bottom: 2rem;
}

h2 {
    font-size: 2rem;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--accent);
    padding-left: 1rem;
}

/* Remove border on headings inside gradient backgrounds or dark sections */
section[style*="linear-gradient"] h2,
section[style*="linear-gradient"] h3,
div[style*="linear-gradient"] h2,
div[style*="linear-gradient"] h3,
.dark-bg h2,
.dark-bg h3,
section.dark-bg h2,
section.dark-bg h3 {
    border-left: none;
    padding-left: 0;
}

h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

p {
    margin-bottom: 1.2rem;
    color: var(--text-primary);
}

a {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

a:hover {
    border-bottom-color: var(--accent);
}

/* ========================================
   HEADER - Magical & Inviting
   ======================================== */
header {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #2a1810 100%);
    padding: 3rem 0;
    margin-bottom: 0;
    border-bottom: 5px solid var(--accent);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    position: relative;
}

header::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--gryffindor) 0%,
        var(--gryffindor-gold) 25%,
        var(--ravenclaw) 50%,
        var(--hufflepuff) 75%,
        var(--slytherin) 100%);
    opacity: 0.8;
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.header-content h1 {
    font-size: 3.2rem;
    border: none;
    margin: 0;
    padding: 0;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: none;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0.5), 0 3px 6px rgba(0,0,0,0.8);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.3));
}

.tagline {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
    font-style: italic;
    margin-top: 1rem;
    letter-spacing: 0.03em;
    font-weight: 300;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/* ========================================
   NAVIGATION - Clean
   ======================================== */
.main-nav {
    background: linear-gradient(135deg,
        rgba(116, 0, 1, 0.05) 0%,
        rgba(14, 26, 64, 0.05) 25%,
        rgba(255, 215, 0, 0.05) 50%,
        rgba(26, 71, 42, 0.05) 75%,
        rgba(116, 0, 1, 0.05) 100%);
    border-bottom: 3px solid transparent;
    border-image: linear-gradient(90deg,
        var(--gryffindor) 0%,
        var(--ravenclaw) 33%,
        var(--hufflepuff) 66%,
        var(--slytherin) 100%) 1;
    margin-bottom: 3rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    position: relative;
}

.main-nav::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--gryffindor) 0%,
        var(--gryffindor-gold) 16%,
        var(--ravenclaw) 33%,
        var(--hufflepuff) 50%,
        var(--hufflepuff-black) 66%,
        var(--slytherin) 83%,
        var(--gryffindor) 100%);
}

.main-nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.main-nav li {
    padding: 0.5rem 0;
}

.main-nav a {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    padding: 0.75rem 1.25rem;
    white-space: nowrap;
    display: inline-block;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
    background: rgba(255,255,255,0.5);
    border: 1px solid rgba(0,0,0,0.05);
}

.main-nav a::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.3s ease;
}

.main-nav a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
    background: white;
    border-color: var(--accent);
}

.main-nav a:hover::before {
    width: 80%;
}

.main-nav a.active {
    background: white;
    border-color: var(--accent);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.main-nav .search-link {
    font-weight: 700;
    background: linear-gradient(135deg, var(--accent) 0%, var(--gryffindor-gold) 100%);
    color: white;
    border-color: var(--accent);
}

.main-nav .search-link:hover {
    background: linear-gradient(135deg, var(--gryffindor-gold) 0%, var(--accent) 100%);
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 12px rgba(212, 175, 55, 0.3);
}

/* ========================================
   BREADCRUMBS
   ======================================== */
.breadcrumbs {
    padding: 0;
    margin-bottom: 1.5rem;
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.05) 0%, rgba(212, 175, 55, 0.02) 100%);
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    overflow: hidden;
}

.breadcrumbs-inner {
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.breadcrumbs a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    background: transparent;
}

.breadcrumbs a:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--gryffindor);
    transform: translateY(-1px);
}

.breadcrumbs a::before {
    content: '🏠';
    margin-right: 0.4rem;
    font-size: 0.85em;
    opacity: 0.8;
}

.breadcrumbs a:not(:first-of-type)::before {
    content: '📄';
}

.breadcrumbs .separator {
    margin: 0 0.25rem;
    color: var(--accent);
    font-weight: bold;
    opacity: 0.4;
    user-select: none;
}

.breadcrumbs .current {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    background: rgba(212, 175, 55, 0.15);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.breadcrumbs .current::before {
    content: '📍';
    margin-right: 0.4rem;
    font-size: 0.85em;
}

/* Responsive breadcrumbs */
@media (max-width: 768px) {
    .breadcrumbs-inner {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    .breadcrumbs a,
    .breadcrumbs .current {
        font-size: 0.85rem;
    }
}

/* ========================================
   DROPDOWN - Minimal Style
   ======================================== */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: white;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    border: 2px solid var(--accent);
    border-radius: 8px;
    z-index: 1000;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    animation: dropdownSlide 0.3s ease;
}

@keyframes dropdownSlide {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.dropdown-content::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--accent);
}

.dropdown-content a {
    color: var(--text-primary);
    padding: 0.85rem 1.5rem;
    text-decoration: none;
    display: block;
    border: none;
    border-bottom: 1px solid var(--grey-light);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    background: white;
    transition: all 0.2s ease;
    position: relative;
}

.dropdown-content a::before {
    content: '▸';
    position: absolute;
    left: 0.75rem;
    opacity: 0;
    transition: all 0.2s ease;
    color: var(--accent);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background: linear-gradient(90deg, var(--grey-light) 0%, white 100%);
    padding-left: 2rem;
    color: var(--accent);
    border-bottom-color: var(--grey-light);
}

.dropdown-content a:hover::before {
    opacity: 1;
    left: 1rem;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown .dropbtn {
    position: relative;
}

.dropdown:hover .dropbtn {
    background: white;
    border-color: var(--accent);
}

/* ========================================
   CONTAINER & LAYOUT
   ======================================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem 4rem 2rem;
}

/* ========================================
   HERO SECTION - Minimal
   ======================================== */
.hero {
    text-align: center;
    padding: 3rem 2rem;
    margin-bottom: 3rem;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    background: var(--grey-light);
}

.hero h2 {
    font-size: 2.2rem;
    border: none;
    padding: 0;
    margin: 0 0 0.5rem 0;
    font-weight: 400;
}

.intro {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Hero section variant - for full-width hero sections */
.hero-section {
    padding: 3rem 0;
    margin-bottom: 3rem;
}

.hero-section .page-title {
    font-size: 2.5rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    border: none;
    padding: 0;
}

.hero-section .subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin: 0;
}

.hero-section.dark-bg .subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* Gradient text effect */
.gradient-text {
    background: linear-gradient(135deg, var(--accent) 0%, #f0c75e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dark-bg .gradient-text {
    background: linear-gradient(135deg, #ffd700 0%, #fff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* House-specific hero sections - with house color gradients */
.hero.gryffindor {
    background: linear-gradient(135deg, var(--gryffindor) 0%, var(--gryffindor-gold) 100%);
    border-top-color: var(--gryffindor);
    color: white;
}

.hero.gryffindor h2,
.hero.gryffindor .intro {
    color: white !important;
}

.hero.slytherin {
    background: linear-gradient(135deg, var(--slytherin) 0%, var(--slytherin-silver) 100%);
    border-top-color: var(--slytherin);
    color: white;
}

.hero.slytherin h2,
.hero.slytherin .intro {
    color: white !important;
}

.hero.ravenclaw {
    background: linear-gradient(135deg, var(--ravenclaw) 0%, var(--ravenclaw-bronze) 100%);
    border-top-color: var(--ravenclaw);
    color: white;
}

.hero.ravenclaw h2,
.hero.ravenclaw .intro {
    color: white !important;
}

.hero.hufflepuff {
    background: linear-gradient(135deg, var(--hufflepuff-black) 0%, #856404 100%);
    border-top-color: var(--hufflepuff);
    color: white;
}

.hero.hufflepuff h2,
.hero.hufflepuff .intro {
    color: white !important;
}

/* House color backgrounds for quiz results and cards */
.gryffindor {
    background: linear-gradient(135deg, var(--gryffindor) 0%, var(--gryffindor-gold) 100%);
}

.slytherin {
    background: linear-gradient(135deg, var(--slytherin) 0%, var(--slytherin-silver) 100%);
}

.ravenclaw {
    background: linear-gradient(135deg, var(--ravenclaw) 0%, var(--ravenclaw-bronze) 100%);
}

.hufflepuff {
    background: linear-gradient(135deg, var(--hufflepuff-black) 0%, #856404 100%);
}

/* Ensure text is readable on house backgrounds - SPECIFIC TARGETING */
/* Only apply white text to components that actually use house color backgrounds */

/* ========================================
   DARK BACKGROUND UTILITY CLASS
   Simple, bulletproof solution for white text on dark backgrounds
   ======================================== */
.dark-bg {
    background: var(--dark-bg) !important;
}

.dark-bg,
.dark-bg *,
.dark-bg h1,
.dark-bg h2,
.dark-bg h3,
.dark-bg h4,
.dark-bg h5,
.dark-bg h6,
.dark-bg p,
.dark-bg li,
.dark-bg a,
.dark-bg strong,
.dark-bg em,
.dark-bg span,
.dark-bg blockquote,
.dark-bg td,
.dark-bg th {
    color: white !important;
}

/* Link cards with house colors - apply dark-bg behavior */
.link-card.gryffindor,
.link-card.slytherin,
.link-card.ravenclaw,
.link-card.hufflepuff {
    color: white;
}

.link-card.gryffindor *,
.link-card.slytherin *,
.link-card.ravenclaw *,
.link-card.hufflepuff * {
    color: white !important;
}

/* House badges - small labels for characters */
.house-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 3px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white !important;
}

.house-badge.gryffindor {
    background: linear-gradient(135deg, var(--gryffindor) 0%, var(--gryffindor-gold) 100%);
}

.house-badge.slytherin {
    background: linear-gradient(135deg, var(--slytherin) 0%, var(--slytherin-silver) 100%);
}

.house-badge.ravenclaw {
    background: linear-gradient(135deg, var(--ravenclaw) 0%, var(--ravenclaw-bronze) 100%);
}

.house-badge.hufflepuff {
    background: linear-gradient(135deg, var(--hufflepuff-black) 0%, #856404 100%);
}

/* ========================================
   SECTIONS
   ======================================== */
section {
    margin-bottom: 4rem;
}

/* ========================================
   BOOK CARDS - Simplified
   ======================================== */
.book-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

.book-card {
    border: 1px solid var(--border-color);
    padding: 2rem;
    transition: border-color 0.3s ease;
}

.book-card:hover {
    border-color: var(--accent);
}

.book-card h3 {
    font-size: 1.3rem;
    margin: 0 0 0.5rem 0;
}

.book-card .year {
    font-size: 0.9rem;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 1rem;
}

.book-card p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.book-card .btn {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.book-card .btn:hover {
    background: var(--text-primary);
    color: var(--background);
    border-bottom: 1px solid var(--text-primary);
}

/* ========================================
   STATS - Clean Grid
   ======================================== */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.stat-box {
    text-align: center;
    padding: 2rem 1rem;
    border: 1px solid var(--border-color);
}

/* When stat-box contains lists, adjust alignment */
.stat-box:has(ul),
.stat-box:has(ol) {
    text-align: left;
}

.stat-box:has(ul) h3,
.stat-box:has(ul) h4,
.stat-box:has(ol) h3,
.stat-box:has(ol) h4 {
    text-align: center;
}

/* Stat boxes with house color classes */
.stat-box.gryffindor {
    background: linear-gradient(135deg, var(--gryffindor) 0%, var(--gryffindor-gold) 100%);
    border: none;
}

.stat-box.slytherin {
    background: linear-gradient(135deg, var(--slytherin) 0%, var(--slytherin-silver) 100%);
    border: none;
}

.stat-box.ravenclaw {
    background: linear-gradient(135deg, var(--ravenclaw) 0%, var(--ravenclaw-bronze) 100%);
    border: none;
}

.stat-box.hufflepuff {
    background: linear-gradient(135deg, var(--hufflepuff) 0%, var(--hufflepuff-black) 100%);
    border: none;
}

.stat-box h3 {
    font-size: 2rem;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.stat-box p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
}

.stat-box h4 {
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 0.5rem;
}

.stat-box ul,
.stat-box ol {
    margin: 0;
}

.stat-box li {
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.8;
}

/* White text for house-colored stat boxes */
.stat-box.gryffindor h3,
.stat-box.gryffindor p,
.stat-box.slytherin h3,
.stat-box.slytherin p,
.stat-box.ravenclaw h3,
.stat-box.ravenclaw p,
.stat-box.hufflepuff h3,
.stat-box.hufflepuff p {
    color: white !important;
}

/* ========================================
   STAT ITEMS - For text-heavy content boxes
   Used on creature pages for abilities/powers
   ======================================== */
.stat-item {
    padding: 2rem;
    text-align: left;
    border-radius: 8px;
}

.stat-item h3 {
    font-size: 1.3rem;
    margin: 0 0 1rem 0;
    font-weight: 600;
}

.stat-item p {
    font-size: 1rem;
    line-height: 1.8;
    margin: 0;
}

/* Force wider columns for stat-items with lots of text */
.stats:has(.stat-item) {
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
}

/* On smaller screens, stack in single column */
@media (max-width: 768px) {
    .stats:has(.stat-item) {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   CHARACTER GRID - Minimal Cards
   ======================================== */
.character-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.character-card {
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    transition: border-color 0.3s ease;
}

/* ========================================
   LINK CARDS - For Quick Links Section
   ======================================== */
.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.link-card {
    padding: 2rem;
    border-radius: 5px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: var(--grey-light);
    border: 1px solid var(--border-color);
}

/* House-colored link-cards */
.link-card.gryffindor {
    background: linear-gradient(135deg, var(--gryffindor) 0%, var(--gryffindor-gold) 100%);
    border: none;
}

.link-card.slytherin {
    background: linear-gradient(135deg, var(--slytherin) 0%, var(--slytherin-silver) 100%);
    border: none;
}

.link-card.ravenclaw {
    background: linear-gradient(135deg, var(--ravenclaw) 0%, var(--ravenclaw-bronze) 100%);
    border: none;
}

.link-card.hufflepuff {
    background: linear-gradient(135deg, var(--hufflepuff) 0%, var(--hufflepuff-black) 100%);
    border: none;
}

.link-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.link-card h3 {
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
}

.link-card p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.link-card .btn {
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    background: transparent;
    transition: all 0.3s ease;
}

.link-card .btn:hover {
    background: var(--text-primary) !important;
    color: var(--background) !important;
    border-bottom: 1px solid var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Buttons with light backgrounds on dark gradient cards - improve hover contrast */
.link-card[style*="gradient"] .btn[style*="background: white"]:hover,
.link-card[style*="linear-gradient"] .btn[style*="background: white"]:hover {
    background: rgba(0,0,0,0.95) !important;
    color: white !important;
    border: 2px solid white;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    filter: brightness(1.1);
}

/* Buttons with dark backgrounds on light gradient cards - improve hover contrast */
.link-card[style*="gradient"] .btn[style*="background: #2a2a2a"]:hover,
.link-card[style*="linear-gradient"] .btn[style*="background: #2a2a2a"]:hover {
    background: rgba(255,255,255,0.98) !important;
    color: #1a1a1a !important;
    border: 2px solid #2a2a2a;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    filter: brightness(1.1);
}

/* Specific fix for red/blue colored buttons (Battles & Duels section) */
.link-card .btn[style*="color: #740001"]:hover,
.link-card .btn[style*="color: #0e1a40"]:hover,
.link-card .btn[style*="color: #1a472a"]:hover {
    background: rgba(0,0,0,0.95) !important;
    color: white !important;
    border: 2px solid white !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

/* House-colored cards get white buttons */
.link-card.gryffindor .btn,
.link-card.slytherin .btn,
.link-card.ravenclaw .btn,
.link-card.hufflepuff .btn {
    background: rgba(255,255,255,0.2);
    border: 1px solid white;
    color: white !important;
}

.link-card.gryffindor .btn:hover,
.link-card.slytherin .btn:hover,
.link-card.ravenclaw .btn:hover,
.link-card.hufflepuff .btn:hover {
    background: white !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid white;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
}

.character-card:hover {
    border-color: var(--accent);
}

.character-card h3 {
    font-size: 1.2rem;
    margin: 0 0 1rem 0;
    border-left: 2px solid var(--accent);
    padding-left: 0.75rem;
}

.character-card p {
    font-size: 0.95rem;
    line-height: 1.6;
}

.character-card strong {
    color: var(--text-primary);
}

/* ========================================
   TABLES - Clean Design
   ======================================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    border: 1px solid var(--border-color);
}

th {
    text-align: left;
    padding: 1rem;
    background: var(--grey-light);
    border-bottom: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.95rem;
}

td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

tr:last-child td {
    border-bottom: none;
}

tr:hover {
    background: var(--grey-light);
}

/* ========================================
   TIMELINE - Simplified
   ======================================== */
.timeline {
    margin: 2rem 0;
    padding-left: 0;
}

.timeline-item {
    padding: 1.5rem 0 1.5rem 2rem;
    border-left: 1px solid var(--border-color);
    margin-bottom: 2rem;
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 2rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
}

.timeline-item:hover {
    border-left-color: var(--accent);
}

.timeline-year {
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.5rem;
}

.timeline-item h3 {
    font-size: 1.2rem;
    margin: 0 0 0.75rem 0;
}

.timeline-item p {
    margin-bottom: 0.5rem;
}

/* Timeline items on dark backgrounds */
[style*="background: var(--dark-bg)"] .timeline-year,
[style*="background: var(--dark-bg)"] .timeline-item h3,
[style*="background: var(--dark-bg)"] .timeline-item p {
    color: white !important;
}

[style*="background: var(--dark-bg)"] .timeline-item {
    border-left-color: rgba(255,255,255,0.3);
}

/* All text elements on dark backgrounds should be white */
[style*="background: var(--dark-bg)"] h2,
[style*="background: var(--dark-bg)"] h3,
[style*="background: var(--dark-bg)"] h4,
[style*="background: var(--dark-bg)"] p,
[style*="background: var(--dark-bg)"] li,
[style*="background: var(--dark-bg)"] span,
[style*="background: var(--dark-bg)"] strong,
[style*="background: var(--dark-bg)"] em,
[style*="background: var(--dark-bg)"] blockquote,
[style*="background: var(--dark-bg)"] .year,
[style*="background: var(--dark-bg)"] td,
[style*="background: var(--dark-bg)"] th {
    color: white !important;
}

[style*="background: var(--dark-bg)"] a {
    color: var(--accent);
    border-bottom-color: rgba(255,255,255,0.3);
}

[style*="background: var(--dark-bg)"] a:hover {
    color: white;
    border-bottom-color: white;
}

/* All text on DARK gradient backgrounds (house colors) should be white */
[style*="background: linear-gradient"][style*="#740001"] h2,
[style*="background: linear-gradient"][style*="#740001"] h3,
[style*="background: linear-gradient"][style*="#740001"] h4,
[style*="background: linear-gradient"][style*="#740001"] p,
[style*="background: linear-gradient"][style*="#0e1a40"] h2,
[style*="background: linear-gradient"][style*="#0e1a40"] h3,
[style*="background: linear-gradient"][style*="#0e1a40"] h4,
[style*="background: linear-gradient"][style*="#0e1a40"] p,
[style*="background: linear-gradient"][style*="#1a472a"] h2,
[style*="background: linear-gradient"][style*="#1a472a"] h3,
[style*="background: linear-gradient"][style*="#1a472a"] h4,
[style*="background: linear-gradient"][style*="#1a472a"] p,
[style*="background: linear-gradient"][style*="#2a623d"] h2,
[style*="background: linear-gradient"][style*="#2a623d"] h3,
[style*="background: linear-gradient"][style*="#2a623d"] h4,
[style*="background: linear-gradient"][style*="#2a623d"] p,
[style*="background: linear-gradient"][style*="#60605c"] h2,
[style*="background: linear-gradient"][style*="#60605c"] h3,
[style*="background: linear-gradient"][style*="#60605c"] h4,
[style*="background: linear-gradient"][style*="#60605c"] p,
[style*="background: linear-gradient"][style*="#5d5d5d"] h2,
[style*="background: linear-gradient"][style*="#5d5d5d"] h3,
[style*="background: linear-gradient"][style*="#5d5d5d"] h4,
[style*="background: linear-gradient"][style*="#5d5d5d"] p,
[style*="background: linear-gradient"][style*="var(--accent)"] h2,
[style*="background: linear-gradient"][style*="var(--accent)"] h3,
[style*="background: linear-gradient"][style*="var(--accent)"] h4,
[style*="background: linear-gradient"][style*="var(--accent)"] p,
[style*="background: linear-gradient"] li,
[style*="background: linear-gradient"] span,
[style*="background: linear-gradient"] strong,
[style*="background: linear-gradient"] em,
[style*="background: linear-gradient"] blockquote,
[style*="background: linear-gradient"] .timeline-year,
[style*="background: linear-gradient"] .timeline-item h3,
[style*="background: linear-gradient"] .timeline-item p {
    color: white !important;
}

/* Exception for light gradients (grey-light to white) */
[style*="background: linear-gradient"][style*="var(--grey-light)"] h2,
[style*="background: linear-gradient"][style*="var(--grey-light)"] h3,
[style*="background: linear-gradient"][style*="var(--grey-light)"] h4,
[style*="background: linear-gradient"][style*="var(--grey-light)"] p {
    color: var(--text-primary) !important;
}

[style*="background: linear-gradient"][style*="#740001"] a,
[style*="background: linear-gradient"][style*="#0e1a40"] a,
[style*="background: linear-gradient"][style*="#1a472a"] a,
[style*="background: linear-gradient"][style*="var(--accent)"] a {
    color: white;
    border-bottom-color: rgba(255,255,255,0.5);
}

[style*="background: linear-gradient"][style*="#740001"] a:hover,
[style*="background: linear-gradient"][style*="#0e1a40"] a:hover,
[style*="background: linear-gradient"][style*="#1a472a"] a:hover,
[style*="background: linear-gradient"][style*="var(--accent)"] a:hover {
    border-bottom-color: white;
}

/* ========================================
   LISTS
   ======================================== */
ul, ol {
    margin: 1rem 0;
    padding-left: 2rem;
    line-height: 1.8;
}

li {
    margin-bottom: 0.5rem;
}

/* Lists inside boxes and containers */
.stat-box ul,
.stat-box ol,
.timeline-item ul,
.timeline-item ol,
[class*="box"] ul,
[class*="box"] ol,
section[style*="padding"] ul,
section[style*="padding"] ol,
div[style*="padding"] ul,
div[style*="padding"] ol {
    text-align: left;
    margin: 1rem 0;
    padding-left: 1.5rem;
}

/* Better bullet styling */
ul li {
    position: relative;
    padding-left: 0.5rem;
}

ul li::marker {
    color: var(--accent);
    font-size: 1.2em;
}

/* Ordered list numbers */
ol li::marker {
    color: var(--accent);
    font-weight: 600;
}

/* Nested lists */
ul ul,
ol ol,
ul ol,
ol ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

/* Lists in dark backgrounds */
.dark-bg ul li::marker,
.dark-bg ol li::marker {
    color: var(--gryffindor-gold);
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-block;
    padding: 0.75rem 2rem;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    text-align: center;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    cursor: pointer;
    background: transparent;
}

.btn:hover {
    background: var(--text-primary);
    color: var(--background);
    border-bottom: 1px solid var(--text-primary);
}

/* ========================================
   BLOCKQUOTES
   ======================================== */
blockquote {
    border-left: 2px solid var(--accent);
    padding-left: 2rem;
    margin: 2rem 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* ========================================
   FOOTER - Simple
   ======================================== */
footer {
    background: var(--grey-light);
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    margin-top: 4rem;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.footer-content p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0.5rem 0;
    text-align: center;
}

/* Footer list styling - override general list styles */
footer ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left;
}

footer li {
    margin-bottom: 0.5rem;
    padding-left: 0 !important;
    position: static;
}

footer li::marker {
    display: none;
    content: none;
}

footer li::before {
    display: none;
    content: none;
}

footer h4 {
    text-align: left;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 700;
}

footer a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-block;
}

footer a:hover {
    color: var(--accent);
}

.disclaimer {
    font-style: italic;
}

/* ========================================
   SEARCH INPUT
   ======================================== */
input[type="text"],
input[type="search"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    font-family: Georgia, serif;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus,
input[type="search"]:focus {
    outline: none;
    border-color: var(--accent);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem 2rem 1rem;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .main-nav {
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .main-nav ul {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    .main-nav li {
        text-align: center;
        padding: 0;
    }

    .main-nav a {
        display: block;
        width: 100%;
        padding: 1rem;
        font-size: 0.95rem;
    }

    .character-grid,
    .book-grid {
        grid-template-columns: 1fr;
    }

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

/* ========================================
   QUIZ STYLES - Minimal
   ======================================== */
.option-button {
    display: block;
    width: 100%;
    padding: 1rem;
    margin: 0.75rem 0;
    background: var(--background);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-family: Georgia, serif;
    font-size: 1rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.option-button:hover {
    border-color: var(--accent);
    background: var(--grey-light);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */
.text-center {
    text-align: center;
}

.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }

.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }

/* Remove emoji decorations in minimal mode */
.hero h2::before,
.hero h2::after {
    content: none;
}

/* ========================================
   ENHANCED MOBILE RESPONSIVENESS
   ======================================== */

/* Mobile menu toggle button */
.mobile-menu-toggle {
    display: none;
    background: var(--accent);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: 5px;
    margin: 1rem auto;
    transition: background 0.3s ease;
}

.mobile-menu-toggle:hover {
    background: var(--text-primary);
}

@media (max-width: 768px) {
    /* Show mobile toggle button */
    .mobile-menu-toggle {
        display: block;
    }

    /* Hide menu by default on mobile */
    .main-nav ul {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--background);
        border-top: 1px solid var(--border-color);
    }

    /* Show menu when toggled */
    .main-nav ul.mobile-open {
        display: flex;
    }

    /* Better touch targets for mobile */
    .main-nav a {
        padding: 1rem;
        display: block;
        font-size: 1rem;
        border-radius: 4px;
    }

    /* Mobile dropdowns */
    .dropdown-content {
        position: static;
        display: none;
        box-shadow: none;
        border: 2px solid var(--accent);
        border-radius: 6px;
        margin-top: 0.5rem;
        background: white;
        transform: none;
        animation: none;
    }

    .dropdown-content::before {
        display: none;
    }

    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content {
        display: block;
    }

    .dropdown-content a:hover {
        padding-left: 1.5rem;
    }

    /* Larger buttons for mobile */
    .btn {
        padding: 1rem 2rem;
        font-size: 1rem;
    }

    /* Better quiz button sizes */
    .option-button {
        padding: 1.5rem;
        font-size: 1.1rem;
    }

    /* Header adjustments */
    header {
        padding: 2rem 0;
    }

    .header-content h1 {
        font-size: 2.2rem;
    }

    .tagline {
        font-size: 1rem;
    }

    /* Links grid responsive */
    .links-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   LOADING STATES
   ======================================== */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.page-loader.visible {
    opacity: 1;
}

.loader-content {
    text-align: center;
    color: white;
}

.wand-spinner {
    font-size: 4rem;
    animation: wandSpin 1.5s ease-in-out infinite;
    display: inline-block;
}

@keyframes wandSpin {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    25% {
        transform: rotate(-15deg) scale(1.1);
    }
    50% {
        transform: rotate(15deg) scale(0.9);
    }
    75% {
        transform: rotate(-10deg) scale(1.1);
    }
}

.loader-content p {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: var(--accent);
}

/* ========================================
   AJAX SEARCH SUGGESTIONS
   ======================================== */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid var(--accent);
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
}

.search-results-list {
    padding: 0;
}

.search-result-item {
    display: block;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s ease;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: var(--grey-light);
    border-bottom-color: var(--grey-mid);
}

.search-result-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.search-result-title strong {
    color: var(--accent);
    background: rgba(153, 101, 21, 0.1);
    padding: 0 2px;
}

.search-result-category {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.search-loading,
.search-no-results,
.search-error {
    padding: 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.search-see-all {
    padding: 1rem;
    text-align: center;
    background: var(--grey-light);
    border-top: 1px solid var(--border-color);
}

.search-see-all a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

/* ========================================
   SMOOTH ANIMATIONS
   ======================================== */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

/* Card hover effects */
.character-card,
.book-card,
.link-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.character-card:hover,
.book-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ========================================
   IMPROVED TOUCH TARGETS (Mobile)
   ======================================== */
@media (max-width: 768px) {
    /* All clickable elements should be at least 44x44px */
    a, button, input, .option-button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Search input container needs relative positioning */
    form:has(input[name="q"]) {
        position: relative;
    }
}

/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */
/* Focus states */
a:focus,
button:focus,
input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Skip to main content link (for screen readers) */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 10000;
    transition: top 0.3s ease;
    text-align: center;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid white;
    outline-offset: 2px;
}

/* ========================================
   USER PREFERENCES & SETTINGS PANEL
   ======================================== */

/* Settings Panel */
.settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.settings-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.settings-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.settings-header h3 {
    margin: 0;
}

.close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.5rem;
    line-height: 1;
}

.close-btn:hover {
    color: var(--text-primary);
}

.settings-body {
    padding: 2rem;
}

.setting-group {
    margin-bottom: 2rem;
}

.setting-label {
    display: block;
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.setting-options {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--border-color);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.radio-label:hover {
    border-color: var(--accent);
}

.radio-label input[type="radio"] {
    margin: 0;
}

.radio-label input[type="radio"]:checked + span {
    font-weight: 600;
}

.radio-label:has(input:checked) {
    border-color: var(--accent);
    background: rgba(153, 101, 21, 0.1);
}

.setting-label input[type="checkbox"] {
    margin-right: 0.5rem;
}

.setting-help {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.settings-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
}

/* ========================================
   CHARACTER PORTRAITS
   ======================================== */
.character-portrait {
    float: right;
    margin: 0 0 1.5rem 1.5rem;
    padding: 0.75rem;
    background: var(--grey-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    max-width: 200px;
}

.character-portrait img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .character-portrait {
        float: none;
        margin: 1.5rem auto;
        max-width: 180px;
    }
}

/* ========================================
   HOGWARTS MAP
   ======================================== */
#hogwarts-map-container {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
    background: #f4e8d0;
    border: 2px solid #8B7355;
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#hogwarts-map-container svg {
    width: 100%;
    height: auto;
    display: block;
}

.map-tooltip {
    position: absolute;
    background: rgba(255, 255, 255, 0.98);
    border: 2px solid #8B7355;
    border-radius: 8px;
    padding: 1rem;
    max-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    pointer-events: none;
    font-family: Georgia, serif;
}

.map-tooltip strong {
    display: block;
    font-size: 1.1rem;
    color: #2a2a2a;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #d4c4a0;
    padding-bottom: 0.3rem;
}

.map-tooltip p {
    margin: 0.5rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #4a4a4a;
}

@media (max-width: 768px) {
    #hogwarts-map-container {
        padding: 0.5rem;
    }

    .map-tooltip {
        max-width: 200px;
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}

/* ========================================
   TIMELINE STYLES
   ======================================== */
#hp-timeline {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
}

.timeline-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.timeline-btn {
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--accent);
    background: var(--background);
    color: var(--text-primary);
    font-family: Georgia, serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.timeline-btn:hover {
    background: var(--accent);
    color: #ffffff;
}

.timeline-btn.active {
    background: var(--accent);
    color: #ffffff;
}

.timeline-historical {
    position: relative;
    padding: 4rem 0;
    min-height: 400px;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--border-color);
}

.timeline-event {
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
}

.timeline-marker {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--background);
    position: relative;
    z-index: 2;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.timeline-event:hover .timeline-marker {
    transform: scale(1.5);
}

.timeline-label {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    background: var(--background);
    border: 1px solid var(--border-color);
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.timeline-event:hover .timeline-label {
    opacity: 1;
}

.timeline-year {
    font-weight: bold;
    color: var(--accent);
    margin-bottom: 0.5rem;
}

.timeline-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.timeline-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.category-founding .timeline-marker { background: #FFD700; }
.category-competition .timeline-marker { background: #4169e1; }
.category-dark .timeline-marker { background: #8B0000; }
.category-harry .timeline-marker { background: #740001; }

.timeline-lifespans {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lifespan-row {
    display: grid;
    grid-template-columns: 200px 1fr 150px;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    border-radius: 4px;
    border-left: 4px solid var(--grey-mid);
}

.lifespan-row.house-gryffindor { border-left-color: var(--gryffindor); }
.lifespan-row.house-slytherin { border-left-color: var(--slytherin); }
.lifespan-row.house-ravenclaw { border-left-color: var(--ravenclaw); }
.lifespan-row.house-hufflepuff { border-left-color: var(--hufflepuff); }

.lifespan-name {
    font-weight: 600;
}

.lifespan-bar-container {
    background: var(--grey-light);
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
}

.lifespan-bar {
    height: 100%;
    background: var(--accent);
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    transition: width 0.5s ease;
}

.lifespan-years {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
}

.lifespan-dates {
    text-align: right;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.timeline-books {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.book-section {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
    background: var(--grey-light);
}

.book-header {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent);
}

.book-number {
    font-weight: bold;
    color: var(--accent);
    margin-right: 0.5rem;
}

.book-title {
    font-size: 1.2rem;
    font-weight: 600;
}

.book-year {
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

.book-events {
    list-style: none;
    padding: 0;
    margin: 0;
}

.book-events li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

.book-events li:before {
    content: "⚡";
    position: absolute;
    left: 0;
    color: var(--accent);
}

/* ========================================
   INFOGRAPHIC STYLES
   ======================================== */
#hp-infographics {
    width: 100%;
    max-width: 1200px;
    margin: 2rem auto;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 2rem;
}

.infographic-controls {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.infographic-btn {
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--accent);
    background: var(--background);
    color: var(--text-primary);
    font-family: Georgia, serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.infographic-btn:hover {
    background: var(--accent);
    color: #ffffff;
}

.infographic-btn.active {
    background: var(--accent);
    color: #ffffff;
}

.house-comparison-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.house-card {
    border: 3px solid;
    border-radius: 8px;
    padding: 1.5rem;
    background: var(--background);
}

.house-card.house-gryffindor { border-color: var(--gryffindor); }
.house-card.house-slytherin { border-color: var(--slytherin); }
.house-card.house-ravenclaw { border-color: var(--ravenclaw); }
.house-card.house-hufflepuff { border-color: var(--hufflepuff); }

.house-header {
    text-align: center;
    margin-bottom: 1rem;
}

.house-crest-small {
    width: 80px;
    height: auto;
    margin-bottom: 0.5rem;
}

.house-stats {
    margin: 1rem 0;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--grey-light);
}

.stat-label {
    font-weight: 600;
}

.house-traits {
    margin: 1rem 0;
}

.trait-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.trait-tag {
    padding: 0.25rem 0.75rem;
    background: var(--grey-light);
    border-radius: 12px;
    font-size: 0.85rem;
}

.house-metrics {
    margin-top: 1rem;
}

.metric {
    margin: 1rem 0;
}

.metric-label {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.metric-bar {
    background: var(--grey-light);
    height: 20px;
    border-radius: 10px;
    overflow: hidden;
}

.metric-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.5s ease;
}

.metric-value {
    text-align: right;
    font-size: 0.9rem;
    margin-top: 0.25rem;
    color: var(--text-secondary);
}

.difficulty-chart, .complexity-chart, .danger-chart {
    width: 100%;
}

.chart-bars {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.chart-bar-row {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 1rem;
    align-items: center;
}

.chart-label {
    display: flex;
    flex-direction: column;
}

.chart-sublabel {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.chart-bar-container {
    background: var(--grey-light);
    height: 30px;
    border-radius: 4px;
    overflow: hidden;
}

.chart-bar {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    transition: width 0.5s ease;
    position: relative;
}

.chart-value {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
}

.chart-effect {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.chart-note {
    color: var(--text-secondary);
    font-style: italic;
    margin-bottom: 1rem;
}

.classification-legend {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--grey-light);
    border-radius: 4px;
    border-left: 4px solid var(--accent);
}

@media (max-width: 768px) {
    .lifespan-row {
        grid-template-columns: 1fr;
    }

    .chart-bar-row {
        grid-template-columns: 1fr;
    }

    .chart-effect {
        grid-column: 1;
    }
}

/* ========================================
   INTERACTIVE FEATURES - PHASE 2
   ======================================== */

/* Sorting Ceremony */
.sorting-ceremony {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 2rem;
}

.sorting-hat-container {
    text-align: center;
    margin-bottom: 3rem;
}

.sorting-hat {
    display: inline-block;
    animation: float 3s ease-in-out infinite;
}

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

.sorting-hat.thinking {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}

.hat-speech {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(139, 69, 19, 0.1);
    border-radius: 8px;
    font-style: italic;
    animation: fadeIn 0.3s ease;
}

.ceremony-intro, .ceremony-question {
    text-align: center;
    padding: 2rem;
}

.hat-quote {
    font-style: italic;
    color: var(--text-secondary);
    margin: 2rem 0;
    line-height: 1.8;
}

.ceremony-btn {
    padding: 1rem 2rem;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: Georgia, serif;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0.5rem;
}

.ceremony-btn:hover {
    background: #7a4d10;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.ceremony-btn.secondary {
    background: var(--grey-mid);
    color: var(--text-primary);
}

.question-number {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.answer-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 500px;
    margin: 2rem auto;
}

.answer-btn {
    padding: 1.5rem;
    background: var(--background);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-family: Georgia, serif;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.answer-btn:hover {
    border-color: var(--accent);
    background: rgba(153, 101, 21, 0.05);
    transform: translateX(10px);
}

.sorting-result {
    text-align: center;
    padding: 2rem;
}

.result-announcement {
    margin-bottom: 2rem;
}

.result-announcement h2 {
    font-size: 3rem;
    margin: 1rem 0;
    transition: all 0.3s ease;
}

.result-crest {
    width: 200px;
    height: auto;
    margin: 2rem auto;
    display: block;
    animation: scaleIn 0.5s ease;
}

@keyframes scaleIn {
    from { transform: scale(0); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.result-quote {
    font-size: 1.2rem;
    font-style: italic;
    margin: 2rem 0;
    color: var(--text-secondary);
}

.result-traits, .result-description, .result-famous {
    text-align: left;
    max-width: 600px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: var(--grey-light);
    border-radius: 8px;
}

.trait-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.trait-badge {
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: #ffffff;
    border-radius: 20px;
    font-size: 0.9rem;
}

.result-famous ul {
    list-style: none;
    padding: 0;
}

.result-famous li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.result-actions {
    margin-top: 2rem;
}

/* Wand Selection */
.wand-selection {
    max-width: 1000px;
    margin: 2rem auto;
}

.ollivander-shop {
    background: #2a2a2a;
    color: #f5f5f5;
    padding: 2rem;
    border-radius: 8px 8px 0 0;
    text-align: center;
}

.shop-interior {
    margin-top: 1rem;
}

.ollivander-quote {
    font-style: italic;
    color: #d4c4a0;
    margin-top: 1.5rem;
}

.wand-btn {
    padding: 1rem 2rem;
    background: #8B4513;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: Georgia, serif;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0.5rem;
}

.wand-btn:hover {
    background: #654321;
    transform: translateY(-2px);
}

.wand-btn.secondary {
    background: var(--grey-mid);
    color: var(--text-primary);
}

.selection-content {
    padding: 2rem;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
}

.selection-intro, .selection-question {
    text-align: center;
}

.selection-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.option-btn {
    padding: 1.5rem;
    background: var(--background);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: Georgia, serif;
}

.option-btn:hover {
    border-color: #8B4513;
    background: rgba(139, 69, 19, 0.05);
    transform: scale(1.05);
}

.wand-result {
    padding: 2rem;
}

.wand-presentation {
    text-align: center;
    margin-bottom: 2rem;
}

.wand-visual {
    margin: 2rem 0;
}

.wand-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 2rem auto;
    max-width: 800px;
}

.spec-item {
    padding: 1rem;
    background: var(--grey-light);
    border-radius: 8px;
    text-align: center;
}

.wand-description {
    max-width: 800px;
    margin: 2rem auto;
}

.wood-description, .core-description, .compatibility {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--grey-light);
    border-radius: 8px;
}

.power-bar {
    background: var(--grey-mid);
    height: 30px;
    border-radius: 15px;
    overflow: hidden;
    margin-top: 1rem;
}

.power-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFD700, #FFA500);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: bold;
    transition: width 0.5s ease;
}

/* Spell Practice */
.spell-practice {
    max-width: 1000px;
    margin: 2rem auto;
    padding: 2rem;
}

.practice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.practice-stats {
    display: flex;
    gap: 2rem;
}

.stat {
    font-weight: bold;
}

.spell-info {
    text-align: center;
    padding: 1.5rem;
    background: var(--grey-light);
    border-radius: 8px;
    margin-bottom: 2rem;
}

.spell-name {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.spell-incantation {
    color: var(--accent);
    font-size: 1.2rem;
    margin: 0.5rem 0;
}

.spell-instruction {
    margin-top: 1rem;
    color: var(--text-secondary);
}

.practice-canvas-container {
    position: relative;
    text-align: center;
    margin: 2rem 0;
}

#spell-canvas {
    border: 3px solid var(--border-color);
    border-radius: 8px;
    cursor: crosshair;
    background: #fafafa;
    max-width: 100%;
    height: auto;
}

.canvas-instruction {
    margin-top: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

.practice-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}

.practice-btn {
    padding: 0.75rem 1.5rem;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-family: Georgia, serif;
    cursor: pointer;
    transition: all 0.3s ease;
}

.practice-btn:hover {
    background: #7a4d10;
}

.practice-btn.secondary {
    background: var(--grey-mid);
    color: var(--text-primary);
}

.spell-feedback {
    text-align: center;
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 8px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.spell-feedback.show {
    opacity: 1;
}

.feedback-success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.feedback-fail {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.points {
    font-size: 1.2rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

/* Potion Brewing */
.potion-brewing {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 2rem;
}

.brewing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.potion-selector {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.potion-option {
    padding: 1rem;
    background: var(--background);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: Georgia, serif;
}

.potion-option:hover {
    border-color: var(--accent);
}

.potion-option.active {
    border-color: var(--accent);
    background: rgba(153, 101, 21, 0.1);
}

.difficulty {
    display: block;
    font-size: 0.85rem;
    color: var(--accent);
    margin-top: 0.25rem;
}

.brewing-workspace {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.ingredients-shelf, .recipe-book {
    padding: 1.5rem;
    background: var(--grey-light);
    border-radius: 8px;
}

.ingredients-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ingredient-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.ingredient-icon {
    font-size: 1.5rem;
}

.ingredient-name {
    flex: 1;
    font-size: 0.9rem;
}

.add-ingredient-btn {
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
}

.cauldron-area {
    text-align: center;
}

.cauldron {
    width: 200px;
    height: 200px;
    margin: 0 auto 2rem;
    background: #2a2a2a;
    border-radius: 0 0 100px 100px;
    position: relative;
    overflow: hidden;
    border: 3px solid #1a1a1a;
}

.cauldron-liquid {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: #ccc;
    transition: all 0.5s ease;
}

.cauldron.hot .cauldron-liquid {
    animation: boil 1s ease-in-out infinite;
}

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

.cauldron-bubbles {
    display: none;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
}

.temperature-control, .stirring-controls {
    margin: 1.5rem 0;
}

.temp-buttons {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.5rem;
}

#temp-slider {
    width: 100%;
    margin: 0.5rem 0;
}

.stir-btn {
    padding: 0.75rem 1.5rem;
    margin: 0.5rem;
    background: var(--accent);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: Georgia, serif;
}

.stir-count {
    margin-top: 1rem;
    font-weight: bold;
}

#recipe-steps ol {
    padding-left: 1.5rem;
}

#recipe-steps li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.active-step {
    font-weight: bold;
    color: var(--accent);
}

.completed-step {
    text-decoration: line-through;
    opacity: 0.6;
}

.current-step {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(153, 101, 21, 0.1);
    border-left: 4px solid var(--accent);
    border-radius: 4px;
}

.sparkle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #FFD700;
    border-radius: 50%;
    animation: sparkleRise 1s ease-out forwards;
}

@keyframes sparkleRise {
    to {
        transform: translateY(-100px);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    .brewing-workspace {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   DARK MODE
   ======================================== */
body.dark-mode {
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --background: #1a1a1a;
    --grey-light: #2a2a2a;
    --grey-mid: #3a3a3a;
    --border-color: #404040;
    --dark-bg: #0a0a0a;
}

body.dark-mode header {
    background: linear-gradient(135deg, #000000 0%, #0a0a0a 50%, #1a0f08 100%);
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

body.dark-mode .main-nav {
    background: var(--background);
}

body.dark-mode .dropdown-content {
    background: var(--grey-mid);
}

body.dark-mode .settings-content {
    background: var(--grey-light);
}

body.dark-mode footer {
    background: var(--grey-mid);
}

body.dark-mode .breadcrumbs {
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.1) 0%, rgba(212, 175, 55, 0.05) 100%);
    border-left-color: var(--gryffindor-gold);
}

body.dark-mode .breadcrumbs a:hover {
    background: rgba(212, 175, 55, 0.2);
}

body.dark-mode .breadcrumbs .current {
    background: rgba(212, 175, 55, 0.25);
    color: white;
}

body.dark-mode .hero {
    background: var(--grey-mid);
}

body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode textarea,
body.dark-mode select {
    background: var(--grey-mid);
    color: var(--text-primary);
    border-color: var(--border-color);
}

body.dark-mode .stat-box,
body.dark-mode .character-card,
body.dark-mode .book-card {
    background: var(--grey-mid);
    color: var(--text-primary);
}

/* ========================================
   FONT SIZE OPTIONS
   ======================================== */
body.font-small {
    font-size: 14px;
}

body.font-medium {
    font-size: 16px;
}

body.font-large {
    font-size: 18px;
}

/* ========================================
   READING MODE
   ======================================== */
body.reading-mode header,
body.reading-mode .main-nav,
body.reading-mode footer,
body.reading-mode .breadcrumbs,
body.reading-mode .related-pages {
    display: none;
}

body.reading-mode .container {
    max-width: 800px;
    margin: 2rem auto;
}

/* Keep settings button visible in reading mode */
body.reading-mode .settings-btn {
    display: block !important;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    background: var(--accent);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    50% {
        box-shadow: 0 4px 20px rgba(212, 175, 55, 0.6);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ========================================
   NO ANIMATIONS
   ======================================== */
body.no-animations *,
body.no-animations *::before,
body.no-animations *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

/* ========================================
   NOTIFICATION ANIMATIONS
   ======================================== */
@keyframes slideIn {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

/* ========================================
   SHARE BUTTONS
   ======================================== */
.share-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .settings-content {
        width: 95%;
        max-height: 95vh;
    }

    .settings-header,
    .settings-body,
    .settings-footer {
        padding: 1rem;
    }

    .setting-options {
        flex-direction: column;
    }

    .radio-label {
        width: 100%;
    }
}