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

/* ==========================================
   DEPLOYMENT ROLE BANNER
   ========================================== */
.stage-role-authoring,
.stage-role-playground {
    --stage-role-banner-height: 3.5rem;
}

.stage-role-banner {
    position: fixed;
    z-index: 1200;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: var(--stage-role-banner-height);
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    padding: 0.4rem 1rem;
    border-bottom: 3px solid;
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.25;
    text-align: center;
}

.stage-role-banner strong {
    flex: 0 0 auto;
}

.stage-role-banner--authoring {
    color: #fff;
    background: #123f70;
    border-color: #83c5ff;
}

.stage-role-banner--playground {
    color: #3d2700;
    background: #ffdf70;
    border-color: #9b5d00;
}

@media (max-width: 560px) {
    .stage-role-banner {
        flex-direction: column;
        gap: 0.05rem;
        font-size: 0.72rem;
    }
}

/* ==========================================
   QUESTION PREVIEW (authenticated, record-free Show in Game mode)
   ========================================== */
.question-preview-banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1100;
    background: var(--color-gold);
    color: var(--color-dark-blue);
    border-radius: 0 0 12px 12px;
    padding: 0.35rem 1rem;
    font-family: var(--font-body);
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.preview-status-card {
    width: min(640px, 100%);
    background: white;
    border: 2px solid var(--color-dark-blue);
    border-radius: var(--border-radius);
    padding: var(--spacing-lg);
    text-align: center;
}

.preview-status-card h1 {
    color: var(--color-dark-blue);
    margin-bottom: var(--spacing-sm);
}

#question-preview-status-detail ul {
    margin: var(--spacing-sm) auto;
    max-width: 520px;
    text-align: left;
}

.question-preview-reveal {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: var(--spacing-sm);
}

.contextual-hint-badge {
    appearance: none;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 1.4rem;
    height: 1.35rem;
    margin: 0 0.25rem;
    padding: 0;
    vertical-align: 0.1em;
    border: 0;
    background: transparent;
    color: var(--color-dark-blue);
    font: 700 0.9rem/1 var(--font-body);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* The hit area extends beyond the compact inline layout box, so the control remains easy to
   tap without making the text line 44px tall. */
.contextual-hint-badge::before {
    content: '';
    position: absolute;
    inset: -0.75rem;
    border-radius: 50%;
}

.contextual-hint-badge:hover,
.contextual-hint-badge:active {
    color: var(--color-dark-blue);
}

.contextual-hint-badge:hover .contextual-hint-badge-icon,
.contextual-hint-badge:active .contextual-hint-badge-icon {
    background: var(--color-dark-blue);
    color: #fff;
}

.contextual-hint-badge:focus-visible,
.contextual-hint-dialog-close:focus-visible,
.contextual-sources-control:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 3px;
}

.contextual-hint-badge-icon {
    position: relative;
    z-index: 1;
    display: inline-grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: #fff2b8;
    font-size: 0.75rem;
    line-height: 1;
    pointer-events: none;
}

.contextual-sources-control {
    appearance: none;
    display: inline-block;
    margin: var(--spacing-sm) 0 0;
    padding: 0.55rem 1rem;
    border: 2px solid var(--color-dark-blue);
    border-radius: 999px;
    background: transparent;
    color: var(--color-dark-blue);
    font: 700 0.95rem/1.2 var(--font-body);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.contextual-sources-control:hover,
.contextual-sources-control:active {
    background: var(--color-dark-blue);
    color: #fff;
}

.contextual-hint-dialog {
    width: min(38rem, calc(100vw - 2rem));
    max-width: none;
    max-height: min(78vh, 46rem);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background: transparent;
    color: var(--color-ink);
    box-shadow: var(--shadow-lg);
}

.contextual-hint-dialog::backdrop {
    background: transparent;
}

.contextual-hint-dialog-card {
    display: flex;
    max-height: min(78vh, 46rem);
    flex-direction: column;
    background: #fff;
    border: 3px solid var(--color-gold);
    border-radius: 24px;
}

.contextual-hint-dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm);
    border-bottom: 1px solid var(--color-aged-paper);
}

.contextual-hint-dialog-header h2 {
    margin: 0;
    color: var(--color-dark-blue);
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 4vw, 1.75rem);
    line-height: 1.2;
}

.contextual-hint-dialog-close {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-aged-paper);
    color: var(--color-dark-blue);
    font: 700 1.75rem/1 var(--font-body);
    cursor: pointer;
}

.contextual-hint-dialog-body {
    overflow-y: auto;
    padding: var(--spacing-md);
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1.65;
    overscroll-behavior: contain;
}

.contextual-hint-dialog-body hr {
    margin: var(--spacing-md) 0;
    border: 0;
    border-top: 2px solid var(--color-aged-paper);
}

.contextual-hint-body-item-title {
    margin: 0 0 var(--spacing-xs);
    color: var(--color-dark-blue);
    font-family: var(--font-display);
    font-size: 1.05rem;
    line-height: 1.25;
}

@media (max-width: 600px) {
    .contextual-hint-dialog {
        width: 100%;
        max-height: 86dvh;
        margin: auto 0 0;
        border-radius: 24px 24px 0 0;
    }

    .contextual-hint-dialog-card {
        max-height: 86dvh;
        border-width: 3px 0 0;
        border-radius: 24px 24px 0 0;
        animation: contextual-hint-sheet-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    }
}

@keyframes contextual-hint-sheet-in {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .contextual-hint-dialog-card {
        animation: none;
    }
}

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

.stage-role-authoring .screen,
.stage-role-playground .screen {
    padding-top: calc(60px + var(--stage-role-banner-height) + var(--spacing-md));
}

.stage-role-authoring #home-screen,
.stage-role-playground #home-screen {
    padding-top: calc(var(--stage-role-banner-height) + var(--spacing-sm));
}

.stage-role-authoring .game-header,
.stage-role-playground .game-header,
.stage-role-authoring .question-preview-banner,
.stage-role-playground .question-preview-banner {
    top: var(--stage-role-banner-height);
}

/* ==========================================
   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;
    /* Cross-browser normalization: without this, Safari in particular
       renders its own native button/form-control chrome (a system-tinted
       ring, sometimes reading as a blue "radio button" style) underneath
       or alongside our custom styling. Chrome and Firefox already reset
       most of this by default, which is why the same CSS previously
       looked correct in Firefox but not Safari. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Suppress each browser's own default focus outline (shown on click
       in some engines, not just keyboard nav) so it can't render or blend
       with our custom colors — e.g. a semi-transparent native focus ring
       overlapping a colored background can visually read as an unintended
       blended color. Keyboard accessibility is preserved deliberately via
       the :focus-visible rule further down, not lost here. */
    outline: none;
}

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

/* NOTE: --color-colonial-blue is referenced here (and by .info-popup-btn and
   .question-text a below) but is not defined anywhere in :root — a
   pre-existing gap in the source, not something introduced during this
   reconstruction. Left as-is rather than guessing a replacement value. */
.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%;
    max-width: 600px;
    margin: 0 auto var(--spacing-sm);
    height: 340px;
    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). Background/border made
       explicit here (matching .answer-btn's own resting state) rather than
       left implicit — with animation-fill-mode: forwards and a transition
       also active on .answer-btn, leaving this ambiguous meant different
       engines could resolve the "starting" computed value differently. */
    0%, 53.33% {
        background: var(--color-parchment);
        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) 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) 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) 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(10px) 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(-10px) 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: 340px;
    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-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);
}

/* ==========================================
   PER-QUESTION SCORE SUMMARY (end-of-game recap)
   Solo final screen (#question-summary-list) and each team's own
   competitive final screen (#comp-question-summary) share these classes.
   ========================================== */
.question-summary {
    max-width: 480px;
    margin: var(--spacing-md) auto;
    text-align: left;
}

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

.question-summary-row.missed {
    border-color: var(--color-red);
}

.question-summary-num {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--color-gold);
    text-align: center;
}

.question-summary-row.missed .question-summary-num {
    color: var(--color-red);
}

.question-summary-topic {
    font-size: 0.95rem;
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.question-summary-result {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--color-success);
    white-space: nowrap;
}

.question-summary-row.missed .question-summary-result {
    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) {
    /* Image panes keep the Studio's fixed 340px height at all widths (ADR-0034 WYSIWYG). */
}

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

.lobby-code-label {
    display: block;
    font-size: 0.9rem;
    color: var(--color-red);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-xs);
}

.lobby-code {
    font-family: var(--font-display);
    display: block;
    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;
}

/* Between-question follow-up (correct answer + explanation + sources + image),
   shown above the standings on the competitive leaderboard screen (FE-4). */
.comp-followup {
    max-width: 640px;
    margin: var(--spacing-md) auto;
    background: white;
    border: 2px solid var(--color-dark-blue);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    text-align: left;
    animation: fadeInUp 0.3s ease;
}
.comp-followup-image-container {
    /* Fixed-height cover window so image framing (offset/scale) renders WYSIWYG, matching the
       Studio crop editor (ADR-0034): height fixed at the Studio pane (340px), width floats. */
    position: relative;
    width: 100%;
    height: 340px;
    overflow: hidden;
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius);
}
.comp-followup-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.comp-followup-answer {
    font-weight: 700;
    color: var(--color-dark-blue);
    margin: 0 0 var(--spacing-sm);
}
.comp-followup-explanation {
    margin-bottom: var(--spacing-sm);
    line-height: 1.5;
}
.comp-followup-sources {
    margin-top: var(--spacing-sm);
}

.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).
   Uses box-shadow rather than outline: outline is the same CSS property
   browsers use for their own native focus indicators, and a negative
   outline-offset (pulling it inward over the border) is exactly the kind
   of usage where each rendering engine's own native/default outline can
   show through or blend with it inconsistently. An inset box-shadow
   produces the same visual "gold ring inside the border" look without
   ever touching the property browsers reserve for native focus styling. */
.answer-btn.selected {
    box-shadow: var(--shadow-sm), inset 0 0 0 4px var(--color-gold);
}

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