/* ==========================================
   GLOBAL UTILITY CLASSES
   ========================================== */
/* .hidden must win over component styles (display: flex/grid/block, etc.)
   so it needs !important — many elements set their own display value. */
.hidden {
    display: none !important;
}

/* ==========================================
   CSS CUSTOM PROPERTIES
   ========================================== */
:root {
    /* Colors - Inspired by historical American documents */
    --color-parchment: #fff3e6;
    --color-ink: #1a1611;
    --color-aged-paper: #e8e3d6;
    --color-dark-blue: #071d3e;
    --color-red: #ab3236;
    --color-gold: #c9a961;
    --color-success: #16619e;
    --color-error: #aa2227; /*#405374;*/

    /* Topic-specific background colors */
    --color-voting: #7F1E3E;
    --color-civics: #4a2554;
    --color-news: #3d5183;
    --color-constitution: #a59b6d;
    
    /* Typography */
    --font-display: 'Voces', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    
    /* Borders */
    --border-width: 2px;
    --border-radius: 30px;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(26, 22, 17, 0.1);
    --shadow-md: 0 4px 16px rgba(26, 22, 17, 0.15);
    --shadow-lg: 0 8px 24px rgba(26, 22, 17, 0.2);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* ==========================================
   NO JAVASCRIPT WARNING
   ========================================== */
.no-js-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-parchment);
    z-index: 10000;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-md);
}

.no-js-content {
    max-width: 600px;
    width: 100%;
    text-align: center;
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    border: 3px solid var(--color-red);
    box-shadow: var(--shadow-lg);
}

.no-js-icon {
    font-size: 4rem;
    margin-bottom: var(--spacing-md);
}

.no-js-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3rem);
    color: var(--color-red);
    margin-bottom: var(--spacing-md);
    font-weight: 900;
}

.no-js-message {
    font-family: var(--font-body);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    color: var(--color-ink);
    margin-bottom: var(--spacing-md);
    line-height: 1.6;
}

.no-js-instructions {
    background: var(--color-aged-paper);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    text-align: left;
    margin-top: var(--spacing-md);
}

.no-js-instructions h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-dark-blue);
    margin-bottom: var(--spacing-md);
    text-align: center;
}

.no-js-instructions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.no-js-instructions li {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-ink);
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-md);
    position: relative;
    line-height: 1.6;
}

.no-js-instructions li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-red);
    font-weight: bold;
}

.no-js-instructions li strong {
    color: var(--color-dark-blue);
    font-weight: 700;
}

@media (max-width: 768px) {
    .no-js-content {
        padding: var(--spacing-lg);
    }
    
    .no-js-instructions {
        padding: var(--spacing-md);
    }
    
    .no-js-instructions li {
        font-size: 0.9rem;
    }
}

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-y: visible;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: linear-gradient(135deg, var(--color-parchment) 0%, var(--color-aged-paper) 100%);
    color: var(--color-ink);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: auto;
}

/* ==========================================
   LIST FORMATTING (UL & OL)
   ========================================== */

/* Unordered Lists (Bullets) */
ul {
    list-style-type: disc;
    margin-left: 1.5rem;
    margin-bottom: var(--spacing-md);
    padding-left: 0.5rem;
}

ul li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.8;
}

/* Nested unordered lists */
ul ul {
    list-style-type: circle;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

ul ul ul {
    list-style-type: square;
}

/* Ordered Lists (Numbers) */
ol {
    list-style-type: decimal;
    margin-left: 1.5rem;
    margin-bottom: var(--spacing-md);
    padding-left: 0.5rem;
}

ol li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.8;
    padding-left: 0.25rem;
}

/* Nested ordered lists */
ol ol {
    list-style-type: lower-alpha;
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

ol ol ol {
    list-style-type: lower-roman;
}

/* Mixed nested lists */
ul ol,
ol ul {
    margin-top: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

/* List items with strong/bold text */
li strong,
li b {
    color: var(--color-dark-blue);
    font-weight: 600;
}

/* List items with links */
li a {
    color: var(--color-dark-blue);
    text-decoration: underline;
}

li a:hover {
    color: var(--color-gold);
}

/* Compact lists (no bottom margin on last item) */
li:last-child {
    margin-bottom: 0;
}

/* ==========================================
   SECTION DIVIDER (*****) 
   ========================================== */

.section-divider {
    display: block;
    text-align: center;
    margin: var(--spacing-md) 0;
    line-height: 1;
}

.section-divider span {
    color: var(--color-gold);
    font-size: 1rem;
    letter-spacing: 0.5rem;
    font-style: normal;
}

/* Background texture overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(26, 22, 17, 0.02) 2px, rgba(26, 22, 17, 0.02) 4px);
    pointer-events: none;
    z-index: 1;
}

/* ==========================================
   LAYOUT
   ========================================== */
.game-container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 2;
}

.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100vh;
    padding: var(--spacing-md);
    padding-top: calc(60px + var(--spacing-md)); /* Header height + spacing */
    padding-bottom: calc(var(--spacing-xs) * 1.1);  /* 10% extra */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px);
    transition: all var(--transition-normal);
    overflow: hidden;   /* clip content so inactive screens never bleed */
}

.screen.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    position: relative;
    overflow-y: auto;   /* active screen scrolls normally */
}

/* Remove top padding on home screen (no header) */
#home-screen {
    padding-top: var(--spacing-sm);
    min-height: 100vh;  /* Full screen for home only */
    background: linear-gradient(135deg, #272a63 45%, #d71218 100%);
}

/* ==========================================
   HEADER
   ========================================== */
.game-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--color-parchment);
    /* border-bottom: 2px solid var(--color-gold); */
    box-shadow: var(--shadow-xs);
    z-index: 1000;
}

/* Enable transitions only when animation is ready */
.game-header.can-animate {
    transition: transform 0.3s ease, visibility 0s 0.3s linear;
}

/* Hide header on home screen */
.game-header.header-hidden-home {
    display: none;
}

/* Header becomes fixed and hidden after scrolling past first viewport */
.game-header.is-fixed {
    position: fixed;
    background: rgba(248, 245, 237, 0.5); /* Slightly transparent parchment */
    transform: translate3d(0, -100%, 0);
}

/* Show header when scrolling up */
.game-header.is-fixed.scroll-up {
    transform: translate3d(0, 0, 0);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-xs) var(--spacing-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo {
    display: flex;
    align-items: center;
}

.logo-image {
    height: 30px;
    width: auto;
    display: block;
}

.logo-image.logo-error {
    display: none;
}

.hamburger-menu {
    background: none;
    border: none;
    padding: var(--spacing-xs);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: all var(--transition-fast);
}

.hamburger-menu:hover {
    transform: scale(1.1);
}

.hamburger-line {
    width: 28px;
    height: 3px;
    background: var(--color-dark-blue);
    border-radius: 2px;
    transition: all var(--transition-fast);
}

.hamburger-menu:hover .hamburger-line {
    background: var(--color-red);
}

/* Menu Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(26, 22, 17, 0.9);
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.menu-overlay.menu-open {
    opacity: 1;
    visibility: visible;
}

.menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 100%;
    background: var(--color-parchment);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--transition-normal);
    overflow-y: auto;
}

.menu-overlay.menu-open .menu-content {
    transform: translateX(0);
}

.menu-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    font-size: 3rem;
    color: var(--color-dark-blue);
    cursor: pointer;
    line-height: 1;
    transition: color var(--transition-fast);
}

.menu-close:hover {
    color: var(--color-red);
}

.menu-nav {
    padding: var(--spacing-xl) var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

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

.menu-list li {
    margin-bottom: var(--spacing-md);
}

.menu-list a {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-dark-blue);
    text-decoration: none;
    display: block;
    padding: var(--spacing-sm);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}

.menu-list a:hover,
.menu-list a:focus {
    color: var(--color-red);
    border-bottom-color: var(--color-gold);
    transform: translateX(10px);
}

/* ==========================================
   TYPOGRAPHY
   ========================================== */
.game-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 900;
    color: white;
    text-align: center;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
    line-height: 1.1;
    text-shadow: 2px 2px 0 rgba(201, 169, 97, 0.3);
}

.game-subtitle {
    font-family: var(--font-body);
    font-size: clamp(1rem, 3vw, 1.25rem);
    color: white;
    text-align: center;
    font-style: italic;
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 700;
    color: var(--color-dark-blue);
    text-align: center;
    margin-bottom: var(--spacing-sm);
}

.section-subtitle {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    color: var(--color-red);
    text-align: center;
    margin-bottom: var(--spacing-lg);
    font-style: italic;
}

/* ==========================================
   HOME SCREEN
   ========================================== */
.home-content {
    text-align: center;
    color: white;
    font-weight: 700;
    max-width: 1200px;
    width: 100%;
    animation: fadeInUp 0.8s ease;
    margin-bottom: var(--spacing-xl);
}

.title-group {
    margin-bottom: var(--spacing-xl);
}

/* SVG Hero Image Container */
.home-hero-image {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto var(--spacing-xs);
    animation: fadeInUp 1s ease 0.3s backwards;
}

.hero-svg {
    width: 100%;
    height: auto;
    max-height: 70vh;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 4px 12px rgba(26, 22, 17, 0.15));
}

/* Fallback decorative seal (shown if SVG fails to load) */
.home-hero-fallback {
    display: none;
}

.hero-svg.error + .home-hero-fallback {
    display: block;
}

.decorative-seal {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto var(--spacing-md);
    animation: rotateIn 1s ease 0.3s backwards;
}

.seal-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid var(--color-gold);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-dark-blue),
                inset 0 0 0 2px var(--color-dark-blue);
}

.seal-stars {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: var(--color-gold);
}

/* ==========================================
   BUTTONS
   ========================================== */
.btn {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
    padding: var(--spacing-md) var(--spacing-xl);
    border: var(--border-width) solid var(--color-dark-blue);
    background: var(--color-parchment);
    color: var(--color-dark-blue);
    cursor: pointer;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    z-index: 1;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--color-dark-blue);
    transform: translate(-50%, -50%);
    transition: width var(--transition-normal), height var(--transition-normal);
    z-index: -1;  /* Overlay stays behind text */
}

.btn:hover::before,
.btn:active::before {
    width: 300%;
    height: 300%;
}

.btn:hover,
.btn:active {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn span {
    transition: color var(--transition-fast);
}

.btn:hover span,
.btn:active span {
    color: var(--color-parchment);
}

.btn:hover,
.btn:active {
    color: var(--color-parchment); 
}

.btn-primary {
    background: var(--color-dark-blue);
    color: white;
    border-color: var(--color-dark-blue);
    font-size: 1.5rem;
    padding: var(--spacing-sm) var(--spacing-md);
    min-width: 200px;
}

.btn-primary::before {
    background: var(--color-success);
    z-index: -1;
}

.btn-primary:hover,
.btn-primary:active {
    color: white;
}

.btn-secondary {
    background: var(--color-dark-blue);
    color: white;
    border-color: var(--color-dark-blue);
    width: 100%;
    font-size: 1.5rem;
    margin-top: var(--spacing-sm);
}

.btn-secondary::before {
    background: var(--color-success);
    z-index: -1;
}

.btn-secondary:hover,
.btn-secondary:active {
    color: white;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn:disabled:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
}

/* Pulse animation for play button */
.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ==========================================
   TOPIC SCREEN
   ========================================== */
.topic-content {
    max-width: 600px;
    width: 100%;
    animation: fadeInUp 0.5s ease;
}

.topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

/* "How Do You Want to Play?" screen: Solo must always sit above
   Multiplayer, at every screen size — never side-by-side, which reads
   ambiguously about which option is "first" on wide screens. */
#mode-screen .topic-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.btn-topic {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    min-height: 1em;
    background: white;
    border: 3px solid var(--color-gold);
    transition: all var(--transition-normal);
}

.btn-topic::before {
    background: linear-gradient(135deg, var(--color-dark-blue), var(--color-red));
}

.topic-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-xs);
}

.topic-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark-blue);
}

.topic-desc {
    font-size: 1rem;
    color: var(--color-red);
    font-style: italic;
}

/* ==========================================
   DIFFICULTY SCREEN
   ========================================== */
.difficulty-content {
    max-width: 600px;
    width: 100%;
    animation: fadeInUp 0.5s ease;
}

.difficulty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xs);
    margin-top: var(--spacing-xs);
}

.btn-difficulty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs);
    min-height: 1em;
    background: white;
    border: 3px solid var(--color-gold);
    transition: all var(--transition-normal);
}

.btn-difficulty::before {
    background: linear-gradient(135deg, var(--color-dark-blue), var(--color-red));
}

.difficulty-icon {
    font-size: 2.5rem;
    margin-bottom: var(--spacing-xs);
}

.difficulty-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark-blue);
}

.difficulty-desc {
    font-size: 0.9rem;
    color: var(--color-red);
    font-style: italic;
}

/* ==========================================
   QUESTION SCREEN
   ========================================== */
.question-content {
    max-width: 800px;
    width: 100%;
    animation: fadeInUp 0.5s ease;
}

.question-header {
    position: relative;
    text-align: center;
    margin-bottom: var(--spacing-md);
    padding-top: 0;
    display: grid;
    grid-template-columns: 50px 1fr 50px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.topic-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: var(--color-dark-blue);
    margin-bottom: 0;
    width: 100%;
    grid-column: 2;
    text-align: center;
}

.progress-bar {
    position: relative;
    width: 100%;
    height: 8px;
    background: rgba(44, 74, 107, 0.2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--spacing-xs);
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-dark-blue), var(--color-gold));
    transition: width var(--transition-normal);
    border-radius: 4px;
}

.progress-text {
    display: block;
    font-size: 0.9rem;
    color: var(--color-red);
    text-align: center;
    margin-top: var(--spacing-xs);
}

/* Optional Question Header (above image) */
.question-header-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: white;
    border: 2px solid var(--color-gold);
    border-radius: var(--border-radius);
}

.question-header-section.hidden {
    display: none;
}

.question-header-text {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    color: var(--color-colonial-blue);
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.info-popup-btn {
    background: var(--color-colonial-blue);
    color: var(--color-dark-blue);
    border: 0px solid var(--color-dark-blue);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.info-popup-btn:hover {
    background: var(--color-burgundy);
    transform: scale(1.1);
}

.info-popup-btn.hidden {
    display: none;
}

.hero-image-container {
    position: relative;
    width: 100%;
    height: 200px;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius);
    overflow: hidden;
    /* border: 3px solid var(--color-gold); */
    background: white;
    box-shadow: var(--shadow-sm);
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Expand Image Button */
.expand-image-btn {
    position: absolute;
    bottom: var(--spacing-sm);
    right: var(--spacing-sm);
    background: var(--color-dark-blue);
    color: white;
    /* border: 2px solid var(--color-gold); */
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    /* box-shadow: var(--shadow-xs); */
    transition: all var(--transition-fast);
    z-index: 10;
}

.expand-image-btn:hover,
.expand-image-btn:active {
    background: var(--color-red);
    transform: scale(1.05);
    box-shadow: var(--shadow-sm);
}

.expand-image-btn.hidden {
    display: none;
}

/* Full Screen Image Overlay */
.image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.image-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease forwards;
}

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

.image-overlay-content {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-overlay-img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}

.image-fallback,
.explanation-image-fallback {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    background: linear-gradient(135deg, var(--color-aged-paper), white);
}

.hero-image.loaded + .image-fallback,
.explanation-image.loaded + .explanation-image-fallback {
    display: none;
}

.question-card {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-gold);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-sm);
}

.question-text-group {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.question-text {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2vw, 1rem);
    color: var(--color-ink);
    margin-bottom: 0;
    line-height: 1.5;
    flex: 1;
}

/* Hyperlinks in question text */
.question-text a {
    color: var(--color-colonial-blue);
    text-decoration: underline;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.question-text a:hover,
.question-text a:focus {
    color: var(--color-red);
}

/* Line breaks in question text */
.question-text br {
    display: block;
    content: "";
    margin-top: var(--spacing-sm);
}

.answers-grid {
    display: grid;
    gap: var(--spacing-sm);
}

.answer-btn {
    text-align: left;
    padding: var(--spacing-md);
    font-size: 1rem;
    background: var(--color-parchment);
    border: 2px solid var(--color-dark-blue);
    transition: all var(--transition-fast);
}

.answer-btn::before {
    background: var(--color-dark-blue);
}

.answer-btn.correct {
    background: var(--color-success);
    border-color: var(--color-success);
    color: white;
    animation: correctPulse 1.5s ease;
}

.answer-btn.incorrect {
    /* background: var(--color-error);
    border-color: var(--color-error); */
    color: white;
    animation: incorrectRubberBand 1.5s ease;
    animation-fill-mode: forwards;
}

.answer-btn.incorrect::before {
    display: none;
}

@keyframes incorrectRubberBand {
    /* 0-800ms: Static (53.33% of 1.5s = 800ms) */
    0%, 53.33% {
        /* background: transparent;
        border-color: var(--color-dark-blue); */
        transform: scale(1);
    }
    /* 800ms mark: Start rubber band - expand */
    56% {
        background: var(--color-error);
        border-color: var(--color-error);
        transform: scale(1.2);
        transform: translateX(-10px);
    }
    /* Contract */
    62% {
        background: var(--color-error);
        border-color: var(--color-error);
        transform: scale(0.85);
    }
    /* Expand again */
    68% {
        background: var(--color-error);
        border-color: var(--color-error);
        transform: scale(1.15);
    }
    /* Contract */
    74% {
        background: var(--color-error);
        border-color: var(--color-error);
        transform: scale(0.92);
    }
    /* Small expand */
    80% {
        background: var(--color-error);
        border-color: var(--color-error);
        transform: scale(1.08);
        transform: translateX(10px);
    }
    /* Small contract */
    86% {
        background: var(--color-error);
        border-color: var(--color-error);
        transform: scale(0.96);
    }
    /* Tiny expand */
    92% {
        background: var(--color-error);
        border-color: var(--color-error);
        transform: scale(1.02);
    }
    /* Settle */
    98%, 100% {
        background: var(--color-error);
        border-color: var(--color-error);
        transform: scale(1);
        transform: translateX(0);
    }
}

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

@keyframes correctPulse {
        0%, 61.5% {
        background: transparent;
        border-color: var(--color-dark-blue);
        transform: scale(1);
    }
    /* 800ms */
    61.6% {
        background: var(--color-success);
        border-color: var(--color-success);
        transform: translateY(10),scale(1);
    }
    /* Start pulse */
    70% {
        background: var(--color-success);
        border-color: var(--color-success);
        transform: translateY(0),scale(1.02);
    }
    80% {
        background: var(--color-success);
        border-color: var(--color-success);
        transform: translateY(-10),scale(1);
    }
    90% {
        background: var(--color-success);
        border-color: var(--color-success);
        transform: translateY(0),scale(1.02);
    }
    100% {
        background: var(--color-success);
        border-color: var(--color-success);
        transform: scale(1);
    }
}

.score-display {
    display: inline-block;
    margin: var(--spacing-sm) auto 0;
    background: var(--color-dark-blue);
    color: var(--color-gold);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: 1rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--color-gold);
    text-align: center;
}

.score-label {
    margin-right: var(--spacing-xs);
}

.score-value {
    font-family: var(--font-display);
    font-size: 1rem;
}

/* ==========================================
   EXPLANATION SCREEN
   ========================================== */
.explanation-content {
    max-width: 700px;
    width: 100%;
    animation: fadeInUp 0.5s ease;
    padding-bottom: 100px; /* Buffer space below Continue button for folder tab */
}

.success-banner {
    text-align: center;
    animation: slideDown 0.5s ease;
}

.success-icon {
    font-size: 2rem;
    color: white;
    /* margin-right: var(--spacing-sm); */
}

.success-text {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

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

.explanation-image-container {
    position: relative;
    width: 100%;
    height: 250px;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius);
    overflow: hidden;
    /* border: 3px solid var(--color-gold); */
    background: white;
    box-shadow: var(--shadow-md);
}

.explanation-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.explanation-card {
    position: relative;               /* ← For absolute positioned button */
    background: white;
    padding-top: calc(28px + 1.5rem + 1rem);    /* ← Extra space for button */
    padding-right: var(--spacing-md);           /* ← 1.5rem */
    padding-bottom: var(--spacing-md);          /* ← 1.5rem */
    padding-left: var(--spacing-md);            /* ← 1.5rem */
    border-radius: var(--border-radius);
    border: 2px solid var(--color-gold);
    box-shadow: var(--shadow-sm);
}

.explanation-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-dark-blue);
    margin-bottom: var(--spacing-md);
}

.explanation-text-wrapper {
    position: relative;
    max-height: 200px;
    overflow: hidden;
    transition: max-height var(--transition-normal);
}

.explanation-text-wrapper.expanded {
    max-height: none;
}

.explanation-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-ink);
}

/* Hyperlinks in explanation text */
.explanation-text a {
    color: var(--color-dark-blue);
    text-decoration: underline;
    font-weight: 600;
    transition: color var(--transition-fast);
}

.explanation-text a:hover,
.explanation-text a:focus {
    color: var(--color-gold);
}

/* Read More overlay - gradient fade at bottom */
.read-more-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.95) 50%,
        rgba(255, 255, 255, 1) 100%
    );
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--spacing-sm);
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--transition-normal);
}

.explanation-text-wrapper.expanded .read-more-overlay {
    opacity: 0;
    pointer-events: none;
}

.read-more-overlay.hidden {
    display: none;
}

.read-more-btn {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-dark-blue);
    background: transparent; /* var(--color-parchment) */
    border: 0px solid var(--color-dark-blue);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--border-radius);
    cursor: pointer;
    pointer-events: all;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.read-more-btn:hover,
.read-more-btn:active {
    background: var(--color-dark-blue);
    color: var(--color-parchment);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.read-more-btn:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
}

.info-popup-btn-explanation {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
}

/* ==========================================
   NEXT QUESTION SCREEN
   ========================================== */
.next-question-content {
    max-width: 500px;
    width: 100%;
    text-align: center;
    animation: fadeInUp 0.5s ease;
}

.progress-circle {
    width: 180px;
    height: 180px;
    margin: 0 auto var(--spacing-xl);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-dark-blue), var(--color-red));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
    position: relative;
    animation: scaleIn 0.6s ease;
}

.progress-circle::before {
    content: '';
    position: absolute;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: var(--color-parchment);
}

.circle-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.current-question-number {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 900;
    color: var(--color-dark-blue);
    line-height: 1;
}

.total-questions-label {
    font-size: 1.25rem;
    color: var(--color-red);
    margin-top: var(--spacing-xs);
}

.next-question-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    color: var(--color-dark-blue);
    margin-bottom: var(--spacing-lg);
}

.current-score-display {
    background: white;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius);
    border: 3px solid var(--color-gold);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.current-score-label {
    font-size: 1rem;
    color: var(--color-red);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.current-score-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-dark-blue);
    line-height: 1;
}

/* ==========================================
   FINAL SCORE SCREEN
   ========================================== */
.final-content {
    max-width: 600px;
    width: 100%;
    text-align: center;
    animation: fadeInUp 0.5s ease;
}

.final-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3rem);
    color: var(--color-dark-blue);
    margin-bottom: var(--spacing-xl);
}

.final-score-card {
    background: white;
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    border: 3px solid var(--color-gold);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-sm);
}

.score-circle {
    width: 200px;
    height: 200px;
    margin: 0 auto var(--spacing-sm);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-dark-blue), var(--color-red));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    animation: scaleIn 0.6s ease 0.3s backwards;
}

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

.final-score-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-gold);
    line-height: 1;
}

.final-score-label {
    font-size: 2rem;
    color: white;
    margin-top: var(--spacing-xs);
}

.final-message {
    font-size: 1.5rem;
    color: var(--color-red);
    font-style: italic;
    line-height: 1.2;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.stat-item {
    background: white;
    padding: var(--spacing-xs);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-gold);
    box-shadow: var(--shadow-sm);
}

.stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-dark-blue);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    display: block;
    font-size: 1rem;
    color: var(--color-red);
}

/* ==========================================
   ANIMATIONS
   ========================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */
@media (max-width: 768px) {
    .screen {
        padding: var(--spacing-sm);
        padding-top: calc(50px + var(--spacing-sm)); /* Smaller header on mobile */
        padding-bottom: calc(var(--spacing-sm) * 1.1);
    }
    
    .explanation-content {
        padding-bottom: 120px; /* Extra buffer on mobile for folder tab */
    }
    
    .topic-grid,
    .difficulty-grid {
        grid-template-columns: 1fr;
    }
    
    .score-display {
        font-size: 1rem;
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .score-value {
        font-size: 1.25rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* Header mobile styles */
    .header-content {
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    .logo-image {
        height: 32px;
    }
    
    .menu-content {
        width: 80%;
        max-width: 300px;
    }

    /* Image overlay mobile styles */
    .image-overlay {
        padding: var(--spacing-md);
    }
    
    .expand-image-btn {
        font-size: 0.8rem;
        padding: 6px 10px;
    }
}

@media (min-width: 769px) {
    .hero-image-container {
        height: 300px;
    }
    
    .explanation-image-container {
        height: 350px;
    }
}

/* ==========================================
   ACCESSIBILITY
   ========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.btn:focus-visible,
.answer-btn:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
}

/* ==========================================
   INFO POPUP MODAL
   ========================================== */
.info-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.info-popup-overlay.active {
    display: flex;
    animation: fadeIn 0.3s ease forwards;
}

.info-popup-modal {
    background: white;
    border-radius: var(--border-radius);
    border: 3px solid var(--color-gold);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    animation: slideUp 0.3s ease;
}

.info-popup-close {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid var(--color-dark-blue);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.75rem;
    color: var(--color-dark-blue);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: all var(--transition-fast);
    z-index: 1;
}

.info-popup-close:hover {
    background: var(--color-red);
    color: white;
    border-color: var(--color-red);
    transform: rotate(90deg);
}

.info-popup-content {
    padding: var(--spacing-xl);
}

.info-popup-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--color-dark-blue);
    margin: 0 0 var(--spacing-md) 0;
    padding-right: var(--spacing-xl);
}

.info-popup-text {
    font-family: var(--font-body);
    font-size: 1.1rem;
    color: var(--color-ink);
    line-height: 1.6;
}

/* Hyperlinks in popup text */
.info-popup-text a {
    color: var(--color-dark-blue);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.info-popup-text a:hover {
    color: var(--color-red);
}

.info-popup-text p {
    margin-bottom: var(--spacing-sm);
}

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

@media (max-width: 768px) {
    .info-popup-modal {
        max-width: 100%;
        max-height: 90vh;
    }
    
    .info-popup-content {
        padding: var(--spacing-lg) var(--spacing-md);
    }
    
    .info-popup-title {
        font-size: 1.2rem;
    }
    
    .info-popup-text {
        font-size: 1rem;
    }
    
    .info-popup-close {
        width: 32px;
        height: 32px;
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .info-popup-btn-explanation {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
    }
}

/* ==========================================
   TOPIC-BASED BACKGROUNDS
   ========================================== */

/* Apply topic background to screens */
body.topic-voting #question-screen,
body.topic-voting #explanation-screen {
    background: linear-gradient(135deg, var(--color-voting) 0%, color-mix(in srgb, var(--color-voting) 80%, black) 100%);
}

body.topic-civics #question-screen,
body.topic-civics #explanation-screen {
    background: linear-gradient(135deg, var(--color-civics) 0%, color-mix(in srgb, var(--color-civics) 80%, black) 100%);
}

body.topic-news #question-screen,
body.topic-news #explanation-screen {
    background: linear-gradient(135deg, var(--color-news) 0%, color-mix(in srgb, var(--color-news) 80%, black) 100%);
}

body.topic-constitution #question-screen,
body.topic-constitution #explanation-screen {
    background: linear-gradient(135deg, var(--color-constitution) 0%, color-mix(in srgb, var(--color-constitution) 80%, black) 100%);
}

/* Ensure text is readable on colored backgrounds */

body[class*="topic-"] .topic-title {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

body[class*="topic-"] .question-text,
body[class*="topic-"] .explanation-text {
    color: black;
}

body[class*="topic-"] .question-card,
body[class*="topic-"] .explanation-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
}

body[class*="topic-"] .progress-text {
    color: white;
}

/* ==========================================
   SMALL PROGRESS CIRCLE (Question Screen)
   ========================================== */

.progress-circle-small {
    position: relative;
    grid-column: 1;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    z-index: 10;
    background: rgba(0, 0, 0, 0.3); /* DEBUG: Make it visible */
    border-radius: 50%;
}

.progress-circle-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 6;
}

.progress-circle-fill {
    fill: none;
    stroke: var(--color-gold);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 283; /* 2 * PI * 45 */
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.5s ease;
}

.progress-circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.progress-circle-number {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

/* ==========================================
   MOBILE SCROLL FIX
   ========================================== */

/* Prevent scroll bounce on iOS */
html {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Prevent momentum scrolling issues on mobile */
.screen.active {
    position: relative;
}

@supports (-webkit-touch-callout: none) {
    /* iOS-specific fixes */
    body {
        position: fixed;
        overflow: hidden;
        width: 100%;
    }
    
    .game-container {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile */
    }
}

/* ==========================================
   HINT POPUP (Non-Modal Slide-In)
   ========================================== */

.hint-popup {
    position: fixed;
    top: 50%;
    left: -400px; /* Start off-screen to the left */
    transform: translateY(-50%);
    width: 350px;
    max-width: 90vw;
    background: white;
    border: 3px solid var(--color-gold);
    border-radius: var(--border-radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    transition: left 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0;
    pointer-events: none;
}

.hint-popup.active {
    left: 20px; /* Slide to visible position */
    opacity: 1;
    pointer-events: all;
}

.hint-popup-content {
    padding: var(--spacing-md);
}

.hint-popup-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-dark-blue);
    margin-bottom: var(--spacing-sm);
    text-align: center;
}

.hint-popup-buttons {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    width: 100%;
}

.hint-popup-buttons .btn {
    flex: 1;
    font-size: 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    min-width: 0;                   /* ← Override default min-width */
    width: auto;                    /* ← Override default width: 100% */
    margin: 0;                      /* ← Override default margin-top */
    white-space: nowrap;            /* ← Prevent text wrapping */
}

.hint-text-display {
    background: var(--color-aged-paper);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-gold);
    margin-top: var(--spacing-md);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-ink);
}

.hint-text-display.hidden {
    display: none;
}

.hint-close-btn {
    font-size: 1rem !important;                        
    padding: var(--spacing-sm) var(--spacing-md) !important;  
    min-width: 0 !important;                             
    width: auto !important;                             
    margin: var(--spacing-md) auto 0 auto !important;                    
    display: block;                           
}

.hint-close-btn.hidden {
    display: none;            /* Hidden until hint is shown */
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .hint-popup {
        width: 90vw;
        left: -100vw; /* Start completely off-screen on mobile */
    }
    
    .hint-popup.active {
        left: 5%;
        right: 5%;
        width: 90vw;
    }
    
    .hint-popup-content {
        padding: var(--spacing-md);
    }
    
    .hint-popup-title {
        font-size: 1.25rem;
    }
    
    .hint-popup-buttons {
        flex-direction: column;
    }
}
/* ==========================================
   ADDITIONAL INFO SLIDE-UP PANEL
   ========================================== */
/* Folder Tab at Bottom of Screen */
.additional-info-tab {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.additional-info-tab.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(10px);
}

.folder-tab {
    background: var(--color-gold);
    color: var(--color-dark-blue);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    transition: all 0.3s ease;
    border: 3px solid var(--color-dark-blue);
    border-bottom: none;
    min-width: 180px;
    justify-content: center;
}

.folder-tab:hover {
    background: var(--color-dark-blue);
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3);
}

.folder-tab:active {
    transform: translateY(-3px);
}

.folder-icon {
    font-size: 1.3rem;
    transition: transform 0.3s ease;
}

.folder-tab:hover .folder-icon {
    transform: scale(1.1);
}

.folder-label {
    white-space: nowrap;
}

.additional-info-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80vh;
    background: white;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.additional-info-panel.open {
    transform: translateY(0);
}

.additional-info-content {
    padding: var(--spacing-xl);
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.additional-info-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: transparent;
    border: none;
    font-size: 2.5rem;
    line-height: 1;
    cursor: pointer;
    color: var(--color-dark-blue);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    border-radius: 50%;
}

.additional-info-close:hover {
    background: var(--color-aged-paper);
    transform: rotate(90deg);
}

.additional-info-title {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-dark-blue);
    margin-bottom: var(--spacing-lg);
    padding-right: 60px; /* Space for close button */
}

.additional-info-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-ink);
}

.additional-info-text p {
    margin-bottom: var(--spacing-md);
}

.btn-additional-info {
    background: var(--color-gold);
    color: var(--color-dark-blue);
    border-color: var(--color-gold);
    font-size: 1.2rem;
    padding: var(--spacing-sm) var(--spacing-lg);
    margin: var(--spacing-md) 0;
    width: 100%;
    font-weight: 600;
}

.btn-additional-info::before {
    background: var(--color-dark-blue);
    z-index: -1;
}

.btn-additional-info:hover,
.btn-additional-info:active {
    color: white;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .folder-tab {
        font-size: 0.9rem;
        padding: var(--spacing-xs) var(--spacing-md);
        min-width: 150px;
    }
    
    .folder-icon {
        font-size: 1.1rem;
    }
    
    .additional-info-panel {
        height: 90vh;
    }
    
    .additional-info-content {
        padding: var(--spacing-lg);
    }
    
    .additional-info-title {
        font-size: 1.5rem;
    }
    
    .additional-info-text {
        font-size: 1rem;
    }
}
/* ==========================================
   COMPETITIVE MODE
   ========================================== */

/* Forms (join + host setup) */
.comp-form {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    text-align: left;
}

.comp-form label {
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: var(--color-dark-blue);
    margin-top: var(--spacing-sm);
}

.comp-input {
    font-family: var(--font-body);
    font-size: 1.1rem;
    padding: var(--spacing-sm);
    border: 2px solid var(--color-dark-blue);
    border-radius: var(--border-radius);
    background: white;
    color: var(--color-ink);
    width: 100%;
}

.comp-input:focus {
    outline: 3px solid var(--color-gold);
    outline-offset: 1px;
}

.comp-hint {
    font-size: 0.85rem;
    color: var(--color-ink);
    opacity: 0.7;
    margin-top: calc(var(--spacing-xs) * -0.5);
    margin-bottom: var(--spacing-xs);
}

.comp-form .btn {
    margin-top: var(--spacing-md);
}

.host-rounds-nav {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.host-rounds-nav .btn {
    flex: 1;
    margin-top: 0;
}

/* Host setup: per-round configuration cards */
#host-rounds-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: var(--spacing-sm) 0;
}

.host-round-card {
    background: var(--color-aged-paper);
    border: 2px solid var(--color-dark-blue);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
}

.host-round-card-title {
    font-family: var(--font-display);
    color: var(--color-dark-blue);
    font-size: 1.1rem;
    margin: 0 0 var(--spacing-xs) 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.host-round-card label {
    margin-top: var(--spacing-xs);
    font-size: 0.85rem;
}

.host-round-card .comp-input {
    padding: calc(var(--spacing-xs) * 0.8) var(--spacing-sm);
    font-size: 1rem;
}

.host-round-format-hint {
    font-size: 0.8rem;
    color: var(--color-ink);
    opacity: 0.75;
    font-style: italic;
    margin-top: var(--spacing-xs);
    line-height: 1.3;
}

.comp-error {
    color: #b3261e;
    font-weight: 600;
    margin-top: var(--spacing-sm);
    text-align: center;
}

.comp-error.hidden { display: none; }

/* Lobby */
.lobby-code-display {
    text-align: center;
    margin: var(--spacing-lg) auto;
    background: white;
    border: 3px solid var(--color-gold);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    /* Hug the code's actual width (short auto-generated codes stay compact)
       but never exceed the viewport on a phone screen for long custom codes. */
    width: fit-content;
    max-width: min(92vw, 500px);
}

.lobby-code-display.hidden { display: none; }

.lobby-code-label {
    display: block;
    font-size: 0.9rem;
    color: var(--color-ink);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.lobby-code {
    display: block;
    font-family: var(--font-display);
    /* Default/fallback size — JS sets an inline font-size based on the
       code's actual character count (see sizeLobbyCode in competitive.js),
       since CSS alone can't distinguish "long code" from "narrow screen":
       a viewport-only clamp() would shrink a short 6-char code just as
       much as a long 15-char one on the same phone. */
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-dark-blue);
    letter-spacing: 0.05em;
    margin-top: var(--spacing-xs);
    /* Safety net for extreme edge cases — never overflow or break layout */
    overflow-wrap: break-word;
    word-break: break-word;
}

.lobby-team-list {
    /* Host-only, plain unordered list — no card/box styling */
    list-style: disc;
    padding-left: 1.5em;
    max-width: 420px;
    margin: var(--spacing-md) auto;
    text-align: left;
}

.lobby-team-list li {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-ink);
    padding: calc(var(--spacing-xs) * 0.5) 0;
    animation: fadeInUp 0.3s ease;
}

/* Host-only moderation controls (rename/remove) next to each team name */
.lobby-team-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.lobby-team-name {
    flex: 1;
}

.lobby-team-action {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: calc(var(--spacing-xs) * 0.5);
    opacity: 0.55;
    transition: opacity 0.15s ease, color 0.15s ease;
    color: var(--color-dark-blue);
}

.lobby-team-action:hover,
.lobby-team-action:focus-visible {
    opacity: 1;
}

.lobby-team-remove:hover,
.lobby-team-remove:focus-visible {
    color: var(--color-red);
}

.lobby-waiting-msg {
    text-align: center;
    font-style: italic;
    color: var(--color-ink);
    margin-top: var(--spacing-md);
}

.lobby-waiting-msg.hidden { display: none; }

/* Center the Start Game button in the lobby */
#lobby-screen .btn {
    display: block;
    margin: var(--spacing-md) auto 0 auto;
    min-width: 200px;
    width: fit-content;
}

/* Host dashboard */
.host-question-preview {
    background: white;
    border: 2px solid var(--color-dark-blue);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
    font-size: 1.15rem;
    line-height: 1.6;
    min-height: 80px;
}

.host-answer-count {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--color-dark-blue);
    margin: var(--spacing-sm) 0;
    min-height: 1.5em;
}

.host-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
    margin: var(--spacing-md) 0;
}

.host-controls .btn {
    min-width: 0;
    width: auto;
    margin: 0;
    font-size: 1rem;
    padding: var(--spacing-sm) var(--spacing-md);
}

.host-controls .btn.hidden { display: none; }

/* Standings */
.comp-standings {
    max-width: 480px;
    margin: var(--spacing-md) auto;
}

.standings-row {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: var(--spacing-sm);
    background: white;
    border: 2px solid var(--color-dark-blue);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-xs);
    animation: fadeInUp 0.3s ease;
}

.standings-row-you {
    border-color: var(--color-gold);
    border-width: 3px;
    background: var(--color-aged-paper);
}

.standings-rank {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-gold);
    text-align: center;
}

.standings-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standings-score {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-dark-blue);
}

/* Selected answer state (One Answer rounds allow changing) */
.answer-btn.selected {
    outline: 4px solid var(--color-gold);
    outline-offset: -2px;
}

/* Mobile */
@media (max-width: 768px) {
    .comp-form { max-width: 100%; }
    .host-controls { flex-direction: column; }
    .host-controls .btn { width: 100%; }
}

/* ==========================================
   MODE SCREEN SUB-BUTTONS (Multiplayer)
   ========================================== */
.mode-sub-buttons {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
    animation: fadeInUp 0.3s ease;
}

.mode-sub-buttons.hidden {
    display: none;
}

.mode-sub-btn {
    min-width: 180px;
}

/* ==========================================
   HOST DASHBOARD STATUS BAR
   ========================================== */
.host-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin: var(--spacing-sm) 0;
    min-height: 2rem;
}

.host-timer {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-dark-blue);
    min-width: 3rem;
    text-align: right;
    transition: color 0.3s;
}

.host-timer.urgent {
    color: #c0392b;
}

.host-timer.hidden {
    display: none;
}

/* ==========================================
   COMPETITIVE FINAL SCREEN BUTTON FIXES
   ========================================== */

/* Center the Play Again button on the host leaderboard screen */
#leaderboard-screen .btn {
    display: block;
    margin: var(--spacing-md) auto 0 auto;
    min-width: 200px;
    width: fit-content;
}

/* Center the Play Again button on the host's dedicated final results screen */
#comp-host-final-screen .btn {
    display: block;
    margin: var(--spacing-md) auto 0 auto;
    min-width: 200px;
    width: fit-content;
}

/* Ensure comp-final-screen buttons match solo final screen */
#comp-final-screen .btn {
    display: block;
    width: 100%;
    margin-top: var(--spacing-md);
}