/* --- CSS Variables --- */
:root {
    /* Core Palette */
    --bg-primary: #0D0F18; /* Near-black with a hint of blue */
    --bg-secondary: #1A1D2E; /* Slightly lighter dark blue for surfaces */
    --accent-primary: #00FFFF; /* Electric Cyan */
    --accent-primary-glow: rgba(0, 255, 255, 0.5);
    --accent-secondary: #FF00FF; /* Vibrant Magenta for contrast */
    --accent-secondary-glow: rgba(255, 0, 255, 0.5);

    /* Text Colors */
    --text-primary: #E0E5F6; /* Off-white for body text */
    --text-secondary: #8A94B3; /* Lighter grey for secondary info */
    --text-dark: #0D0F18; /* For use on light backgrounds (e.g., on accent colors) */
    --text-on-accent: #0D0F18; /* Text on top of cyan/magenta buttons */

    /* UI Surfaces & Glassmorphism */
    --surface-glass-bg: rgba(26, 29, 46, 0.6); /* Translucent dark blue */
    --surface-glass-border: rgba(138, 148, 179, 0.2); /* Faint border for glass */
    --surface-overlay-bg: rgba(13, 15, 24, 0.8); /* Darker overlay for modals */
    --surface-solid-bg: #1F233A; /* Solid dark background for some elements */

    /* Semantic Colors (Neon-infused) */
    --danger-primary: #FF4040; /* Bright Red */
    --danger-glow: rgba(255, 64, 64, 0.4);
    --success-primary: #39FF14; /* Neon Green */
    --success-glow: rgba(57, 255, 20, 0.4);
    --warning-primary: #FFD700; /* Gold/Amber */
    --warning-glow: rgba(255, 215, 0, 0.4);
    --info-primary: #5F9FFF; /* Sky Blue */
    --info-glow: rgba(95, 159, 255, 0.4);
    --shop-primary: var(--accent-secondary); /* Magenta */
    --shop-glow: var(--accent-secondary-glow);

    /* Neutral & Disabled States */
    --disabled-bg: rgba(45, 51, 78, 0.5);
    --disabled-text: #5A6382;
    --disabled-border: rgba(90, 99, 130, 0.5);

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'Roboto Mono', monospace;
    --font-size-base: 16px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.6;

    /* Borders & Shadows */
    --border-radius-small: 4px;
    --border-radius-standard: 8px;
    --border-radius-large: 12px;
    --shadow-glow-accent: 0 0 12px var(--accent-primary-glow), 0 0 20px var(--accent-primary-glow);
    --shadow-glow-danger: 0 0 12px var(--danger-glow);
    --shadow-inset: inset 0 2px 4px rgba(0,0,0,0.2);

    /* Board Grid Variables */
    --board-gap-vertical: 8px;
    --board-gap-horizontal: 8px;
    --board-row-min-height: 35px;
    --board-header-min-height: 40px;
    --board-cell-font-size: 1.4em;
    --board-header-font-size: 0.8em;
    --calculated-row-height: 1fr;

    /* Team Colors (for answered cells and scoreboard borders) */
    --team-0-color: #f44336; /* Red */
    --team-1-color: #03A9F4; /* Light Blue */
    --team-2-color: #4CAF50; /* Green */
    --team-3-color: #FF9800; /* Orange */
    --team-4-color: #9C27B0; /* Purple */
    --team-5-color: #A1887F; /* Brown */
    --team-6-color: #26A69A; /* Teal */
    --team-7-color: #7E57C2; /* Deep Purple */
}

/* --- Global Resets & Body --- */
html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
    height: 100%;
}

body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    /* New subtle grid background */
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- Core Elements & Helpers --- */
h1, h2, h3 {
    margin: 0;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--text-primary); /* Default for general headings */
}
h1 { font-size: 2.8rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.75rem; }
p { margin: 0; }
a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}
a:hover {
    color: white;
    text-shadow: 0 0 5px var(--accent-primary-glow);
}
.error-message {
    color: var(--danger-primary);
    font-weight: var(--font-weight-semibold);
    margin-top: 1em;
    text-align: center;
    min-height: 1.2em;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-shadow: 0 0 8px var(--danger-glow);
}
.error-message:not(:empty) {
    padding: 0.5em 0.75em;
    background-color: rgba(255, 64, 64, 0.1);
    border: 1px solid rgba(255, 64, 64, 0.3);
    border-radius: var(--border-radius-small);
}

/* --- Holographic Button Style --- */
button {
    font-family: inherit;
    font-size: 1rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    border: 1px solid var(--accent-primary);
    border-radius: var(--border-radius-small); /* Changed to small for sharper look */
    padding: 0.65em 1.25em;
    transition: all 0.2s ease;
    background-color: transparent;
    color: var(--accent-primary);
    text-align: center;
    box-shadow: none; /* Base state has no shadow, hover adds glow */
}
button:hover:enabled {
    background-color: var(--accent-primary-glow);
    color: var(--text-on-accent); /* Text becomes dark on light glow */
    box-shadow: var(--shadow-glow-accent);
    transform: translateY(-2px); /* Subtle lift */
}
button:active:enabled {
    transform: translateY(0);
    box-shadow: inset 0 0 5px var(--accent-primary-glow); /* Inset glow on click */
}
button:disabled {
    cursor: not-allowed !important;
    border-color: var(--disabled-border) !important;
    color: var(--disabled-text) !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 0.6;
}

/* --- Input Field Style --- */
input[type="number"],
input[type="text"],
select {
    font-family: var(--font-mono);
    font-size: 1rem;
    padding: 0.65em 0.85em;
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--border-radius-small); /* Changed to small for sharper look */
    background-color: var(--bg-secondary); /* Darker background for inputs */
    color: var(--text-primary);
    box-shadow: var(--shadow-inset);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    width: 100%;
    max-width: 350px;
}
input:focus,
select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-inset);
    outline: none;
    background-color: var(--surface-solid-bg); /* Slightly lighter on focus */
}


/* --- Title Screen Styles --- */
#title-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100vh;
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    /* Use a radial gradient to focus light in the center */
    background: radial-gradient(ellipse at center, var(--bg-secondary) 0%, var(--bg-primary) 70%);
    color: var(--text-primary);
    perspective: 1000px; /* For 3D animations */
}

/* Glitch Effect Wrapper */
.title-glitch-wrapper {
    margin-bottom: 80px;
}

/* The main H1 title - this is where the neon/glitch effect lives */
#title-screen h1 {
    font-family: var(--font-mono); /* Use the mono font for a techy feel */
    font-size: clamp(40px, 10vw, 120px);
    font-weight: 700;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    text-shadow:
        0 0 5px var(--accent-primary-glow),
        0 0 10px var(--accent-primary-glow),
        0 0 20px var(--accent-primary-glow),
        0 0 40px var(--accent-secondary-glow),
        0 0 70px var(--accent-secondary-glow);
    animation: flicker 3s infinite alternate;
}

/* The glitch pseudo-elements */
#title-screen h1::before,
#title-screen h1::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    clip-path: inset(50% 50% 50% 50%);
}

#title-screen h1::before {
    text-shadow: -2px 0 var(--accent-secondary);
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

#title-screen h1::after {
    text-shadow: 2px 0 var(--danger-primary);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

/* Keyframe animations for the glitch and flicker */
@keyframes glitch-anim-1 {
    0% { clip-path: inset(40% 0 60% 0); }
    20% { clip-path: inset(10% 0 85% 0); }
    40% { clip-path: inset(50% 0 30% 0); }
    60% { clip-path: inset(70% 0 10% 0); }
    80% { clip-path: inset(30% 0 50% 0); }
    100% { clip-path: inset(50% 0 50% 0); }
}
@keyframes glitch-anim-2 {
    0% { clip-path: inset(70% 0 15% 0); }
    20% { clip-path: inset(90% 0 5% 0); }
40% { clip-path: inset(40% 0 45% 0); }
    60% { clip-path: inset(20% 0 70% 0); }
    80% { clip-path: inset(60% 0 30% 0); }
    100% { clip-path: inset(80% 0 10% 0); }
}
@keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow:
            0 0 4px var(--accent-primary-glow),
            0 0 11px var(--accent-primary-glow),
            0 0 19px var(--accent-primary-glow),
            0 0 40px var(--accent-secondary-glow),
            0 0 80px var(--accent-secondary-glow);
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* Button container and individual buttons */
.title-buttons {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.title-buttons button {
    font-size: 1.4em;
    font-weight: 500;
    color: var(--accent-primary);
    background-color: transparent;
    border: 2px solid var(--accent-primary);
    border-radius: var(--border-radius-small);
    padding: 15px 40px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    box-shadow: inset 0 0 10px 0 var(--accent-primary-glow), 0 0 10px 0 var(--accent-primary-glow);
}

.title-buttons button:hover:enabled {
    background-color: var(--accent-primary);
    color: var(--text-on-accent);
    box-shadow: var(--shadow-glow-accent);
    transform: translateY(-3px) scale(1.05); /* Add scale for more pop */
}

.title-buttons button:active:enabled {
    transform: translateY(0);
}

.title-buttons button:disabled {
    border-color: var(--disabled-border);
    color: var(--disabled-text);
    box-shadow: none;
    background-color: transparent;
    opacity: 0.5;
}

/* Footer styling */
.title-footer {
    margin-top: 60px;
    font-size: 0.9em;
    color: var(--text-secondary);
    letter-spacing: 0.05em;
}

.title-footer a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.title-footer a:hover {
    text-decoration: none;
    color: var(--text-primary);
    text-shadow: 0 0 8px var(--accent-primary-glow);
}

/* --- Config Screen Styles --- */
#config-screen {
    display: none;
    flex-direction: column;
    align-items: center;
    padding: 30px 40px;
    margin: 30px auto;
    width: 90%;
    max-width: 750px;
    position: relative;
    box-sizing: border-box;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;

    /* Glassmorphism Effect */
    background: var(--surface-glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* For Safari */
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--border-radius-large);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

/* Custom scrollbar for the panel */
#config-screen::-webkit-scrollbar {
    width: 8px;
}
#config-screen::-webkit-scrollbar-track {
    background: transparent;
}
#config-screen::-webkit-scrollbar-thumb {
    background-color: var(--accent-primary);
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

#config-screen h1 {
    color: var(--text-primary);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 35px;
    font-size: 2em;
    border-bottom: 1px solid var(--accent-primary);
    padding-bottom: 15px;
    text-shadow: 0 0 5px var(--accent-primary-glow);
}

#config-screen h2 {
    color: var(--accent-primary);
    margin-top: 25px;
    margin-bottom: 20px;
    width: 100%;
    text-align: left;
    font-size: 1.3em;
    font-weight: 600;
    padding-left: 10px;
    border-left: 3px solid var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.config-section {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 10px;
}

.config-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 18px;
}

.config-item label {
    font-weight: var(--font-weight-medium);
    margin-right: 20px;
    color: var(--text-secondary);
    flex-basis: 45%;
    text-align: right;
    font-size: 1em;
}

#team-details-container {
    width: 100%;
    margin-top: 10px;
}

#team-details-container .config-item label {
    flex-basis: 30%;
    font-size: 0.95em;
}

#team-details-container h3 {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 15px;
    width: 100%;
    text-align: center;
}

/* Game ID Display Area */
.config-section-full-width {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
}

#game-id-display-area {
    background: var(--bg-primary) !important; /* Override inline style */
    border: 1px solid var(--accent-primary);
    border-radius: var(--border-radius-standard) !important; /* Override inline style */
    padding: 20px !important; /* Override inline style */
    text-align: center !important; /* Override inline style */
    box-shadow: inset 0 0 15px var(--accent-primary-glow);
}

#game-id-display-area p:first-of-type {
    color: var(--text-primary) !important; /* Override inline style */
    font-weight: 600 !important; /* Override inline style */
    margin: 0 0 10px 0 !important; /* Override inline style */
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#game-id-code {
    font-family: var(--font-mono);
    font-size: 2.2em !important; /* Override inline style */
    color: var(--accent-primary) !important; /* Override inline style */
    background: transparent !important; /* Override inline style */
    padding: 5px 10px !important; /* Override inline style */
    letter-spacing: 0.1em;
    text-shadow: 0 0 8px var(--accent-primary-glow);
    user-select: all;
}

#game-id-display-area p:last-of-type {
    color: var(--text-secondary) !important; /* Override inline style */
    font-size: 0.9em !important; /* Override inline style */
    line-height: 1.5 !important; /* Override inline style */
    margin: 15px 0 0 0 !important; /* Override inline style */
}

#game-id-display-area p:last-of-type strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Start Game Button */
#start-game-btn {
    padding: 14px 35px;
    font-size: 1.1em;
    margin-top: 15px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-on-accent);
    background-color: var(--accent-primary);
    border: none;
    border-radius: var(--border-radius-small);
    transition: all 0.3s ease;
    box-shadow: 0 0 15px var(--accent-primary-glow);
}

#start-game-btn:hover:enabled {
    transform: translateY(-2px);
    box-shadow: 0 0 25px var(--accent-primary-glow);
}

/* Back Button */
.back-button {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--surface-glass-border);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.8em;
    line-height: 38px;
    text-align: center;
    padding: 0;
    transition: all 0.3s ease;
}

.back-button:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    transform: scale(1.1);
    text-shadow: 0 0 8px var(--accent-primary-glow);
}


#game-area {
    width: 100%;
    padding: 0 20px 20px 20px; /* Remove top padding, handled by header */
    box-sizing: border-box;
    display: none; /* JS will change this */
    flex-grow: 1;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    gap: 15px; /* Space between header, scoreboard, and board */
}

/* New Game Header */
#game-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    width: 100%;
    border-bottom: 1px solid var(--surface-glass-border);
}
.header-buttons-left, .header-buttons-right {
    display: flex;
    gap: 15px;
    flex: 1;
}
.header-buttons-right {
    justify-content: flex-end;
}
#game-title {
    font-family: var(--font-mono);
    font-size: 1.8em;
    color: var(--text-primary);
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    flex: 2;
    white-space: nowrap;
    text-shadow: 0 0 5px var(--accent-primary-glow);
}
.header-icon-btn {
    font-size: 1.2em;
    background: transparent;
    border: 1px solid var(--surface-glass-border);
    color: var(--text-secondary);
    border-radius: var(--border-radius-small); /* Changed to small */
    width: 45px;
    height: 45px;
    padding: 0;
    transition: all 0.2s ease;
}
.header-icon-btn:hover:enabled {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background-color: var(--accent-primary-glow);
    transform: translateY(-2px);
}
#open-shop-btn.header-icon-btn:hover:enabled {
    color: var(--accent-secondary);
    border-color: var(--accent-secondary);
    background-color: var(--accent-secondary-glow);
}


/* Scoreboard Redesign */
#scoreboard {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    border: none;
    flex-shrink: 0;
}

.team-score {
    text-align: left;
    padding: 10px 15px;
    border-radius: var(--border-radius-standard);
    border: 1px solid var(--surface-glass-border);
    border-left-width: 5px; /* Keep the colored left border */
    min-width: 140px;
    flex-grow: 1;
    flex-basis: 120px;
    font-size: 0.9em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
    transition: all 0.3s ease-out;
    background: var(--surface-glass-bg);
    backdrop-filter: blur(5px);
}
.team-score:hover {
    transform: translateY(-3px);
    background: rgba(26, 29, 46, 0.8);
    border-color: var(--surface-glass-border);
}

/* Team Colors applied to the left border */
#team-score-0 { border-left-color: var(--team-0-color); }
#team-score-1 { border-left-color: var(--team-1-color); }
#team-score-2 { border-left-color: var(--team-2-color); }
#team-score-3 { border-left-color: var(--team-3-color); }
#team-score-4 { border-left-color: var(--team-4-color); }
#team-score-5 { border-left-color: var(--team-5-color); }
#team-score-6 { border-left-color: var(--team-6-color); }
#team-score-7 { border-left-color: var(--team-7-color); }

.team-score .team-name {
    font-size: 1.2em;
    font-weight: var(--font-weight-bold);
    margin-bottom: 8px;
    display: block;
    text-shadow: none;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.team-score .team-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: var(--text-secondary);
}
.team-score .stat-item {
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.1em;
    font-weight: var(--font-weight-normal);
}
.team-score .stat-item .value {
    color: var(--text-primary);
    font-weight: 700;
}
.team-score .score-stat::before { content: "pts"; margin-right: 4px; font-size: 0.8em; color: var(--text-secondary); }
.team-score .connection-stat::before { content: "#"; color: var(--accent-primary); }
.team-score .key-stat::before { content: "key"; margin-right: 4px; font-size: 0.8em; color: var(--text-secondary); }

/* Active Buzz Highlight - A glowing border */
.team-score.active-buzz {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow-accent);
    transform: scale(1.05);
    z-index: 10;
    background: rgba(0, 255, 255, 0.1);
}

/* NEW: Scoreboard Power-Up Highlights */
.team-score.has-action-token {
    border-color: var(--accent-primary);
    animation: token-pulse 2s infinite ease-in-out;
}
.team-score.has-action-token .team-name::after {
    content: 'TOKEN';
    font-family: var(--font-mono);
    font-size: 0.6em;
    font-weight: 700;
    color: var(--accent-primary);
    background-color: var(--accent-primary-glow);
    padding: 2px 6px;
    border-radius: var(--border-radius-small);
    margin-left: 8px;
    vertical-align: middle;
}

.team-score.has-shop-pick {
    border-color: var(--shop-primary);
    box-shadow: 0 0 15px var(--shop-glow);
}
.team-score.has-shop-pick .team-name::after {
    content: 'PICK';
    font-family: var(--font-mono);
    font-size: 0.6em;
    font-weight: 700;
    color: var(--shop-primary);
    background-color: var(--accent-secondary-glow);
    padding: 2px 6px;
    border-radius: var(--border-radius-small);
    margin-left: 8px;
    vertical-align: middle;
}

/* Game Board Container & Board */
#game-board-container {
    width: 100%;
    box-sizing:border-box;
    overflow: hidden;
    border: none;
    background-color: transparent;
    padding: 0;
    margin: 0;
    border-radius: 0;
    flex-grow: 1;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

#game-board {
    display: grid;
    grid-auto-rows: minmax(var(--board-row-min-height), var(--calculated-row-height));
    gap: var(--board-gap-vertical) var(--board-gap-horizontal);
    background-color: transparent;
    margin: 0 auto;
    width: 100%;
    height: 100%;
}

/* Grid Cell Base Style - The "Off" State */
.grid-cell {
    background-color: var(--surface-glass-bg);
    backdrop-filter: blur(2px);
    color: var(--accent-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-mono);
    font-size: var(--board-cell-font-size);
    font-weight: var(--font-weight-bold);
    border-radius: var(--border-radius-small);
    transition: all 0.2s ease-out;
    text-align: center;
    padding: 4px;
    box-sizing: border-box;
    position: relative;
    border: 1px solid var(--surface-glass-border);
    text-shadow: 0 0 8px var(--accent-primary-glow);
    /* --- 3D PROPERTIES --- */
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.3, 1.2, 0.6, 1);
	backface-visibility: hidden; /* Hides the front face (the numbers) when it's flipped away */
}



.grid-cell.question-cell {
    cursor: pointer;
}

/* Hover effect for available questions */
/* MODIFIED: Removed .board-challenge-select-active from this selector */
.grid-cell.question-cell:not(.answered):not(.dead-question):not(.pending):hover {
    border-color: var(--accent-primary);
    background-color: rgba(0, 255, 255, 0.1);
    transform: scale(1.05);
    box-shadow: var(--shadow-glow-accent);
    z-index: 2;
}

/* Category Headers */
.grid-cell.category-header {
    background: transparent;
    backdrop-filter: none;
    
    /* --- CHANGE 1: Use the high-contrast YELLOW color --- */
    color: var(--warning-primary); 
    
    font-family: var(--font-primary);
    
    /* Keep the increased font size for legibility */
    font-size: 1.1em;
    
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    min-height: var(--board-header-min-height);
    border: none;
    border-bottom: 1px solid var(--surface-glass-border);
    border-radius: 0;
    cursor: default;
    
    /* --- CHANGE 2: Use the YELLOW glow effect --- */
    text-shadow: 0 0 6px var(--warning-glow);
    
    align-items: flex-end;
    padding-bottom: 8px;
    transition: text-shadow 0.3s ease;
}

/* Clean and Professional Answered Cell Style */

/* Clean and Professional Answered Cell Style */

/* Base style for answered cells - much cleaner approach */
.grid-cell.answered {
    transform: none !important;
    cursor: default !important;
    position: relative;
    border-radius: 8px;
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Clean team colors without all the visual clutter */
.grid-cell.team-0.answered {
    background-color: var(--team-0-color);
    color: white;
    border: 2px solid rgba(244, 67, 54, 0.8);
}
.grid-cell.team-1.answered {
    background-color: var(--team-1-color);
    color: white;
    border: 2px solid rgba(3, 169, 244, 0.8);
}
.grid-cell.team-2.answered {
    background-color: var(--team-2-color);
    color: white;
    border: 2px solid rgba(76, 175, 80, 0.8);
}
.grid-cell.team-3.answered {
    background-color: var(--team-3-color);
    color: white;
    border: 2px solid rgba(255, 152, 0, 0.8);
}
.grid-cell.team-4.answered {
    background-color: var(--team-4-color);
    color: white;
    border: 2px solid rgba(156, 39, 176, 0.8);
}
.grid-cell.team-5.answered {
    background-color: var(--team-5-color);
    color: white;
    border: 2px solid rgba(161, 136, 127, 0.8);
}
.grid-cell.team-6.answered {
    background-color: var(--team-6-color);
    color: white;
    border: 2px solid rgba(38, 166, 154, 0.8);
}
.grid-cell.team-7.answered {
    background-color: var(--team-7-color);
    color: white;
    border: 2px solid rgba(126, 87, 194, 0.8);
}

/* Simple checkmark - clean and visible */
.grid-cell.answered::after {
    content: '✓';
    font-size: 2.5em;
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Subtle hover effect */
.grid-cell.answered:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Remove all the extra visual effects that were causing issues */
.grid-cell.answered::before {
    display: none;
}

/* Dead/Used Cells */
.grid-cell.dead-question {
    background-color: var(--disabled-bg) !important;
    color: var(--danger-primary) !important;
    border-color: var(--disabled-border) !important;
    font-weight: bold;
    font-size: 2em !important;
    text-shadow: 0 0 8px var(--danger-glow) !important;
    /* MODIFIED: Removed cursor pointer, dead cells are not clicked by host anymore */
    cursor: default !important;
}
/* MODIFIED: Removed hover effect for dead cells - host doesn't click them */
/* .grid-cell.dead-question:hover {
    border-color: var(--danger-primary) !important;
    background-color: rgba(255, 64, 64, 0.2) !important;
} */


/* Pending Question Animation */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 8px var(--accent-primary-glow); }
    50% { box-shadow: 0 0 20px var(--accent-primary-glow), 0 0 30px var(--accent-primary-glow); }
    100% { box-shadow: 0 0 8px var(--accent-primary-glow); }
}
.grid-cell.pending {
    animation: pulse-glow 1.5s infinite ease-in-out;
    border-color: var(--accent-primary);
    cursor: default;
    transform: none;
    z-index: 3;
}

/* Connect 4 Win Animation */
@keyframes connect4-pulse {
    from { box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px var(--accent-primary); }
    to { box-shadow: 0 0 20px #fff, 0 0 30px var(--accent-primary), 0 0 40px var(--accent-primary); }
}
.grid-cell.connect4-win {
    z-index: 5;
    animation: connect4-pulse 1s infinite alternate;
}

/* Trap Animation */
@keyframes trap-flash {
    0%, 100% { background-color: var(--danger-primary); border-color: var(--danger-primary); }
    50% { background-color: var(--warning-primary); border-color: var(--warning-primary); }
}
.trap-exploding-revised {
    animation: trap-flash 0.2s 4; /* Flash 4 times */
    pointer-events: none;
    z-index: 10;
    color: transparent !important;
    text-shadow: none !important;
}

/* Scoreboard Flash on Negative Reset */
@keyframes flash-scoreboard {
    from { box-shadow: 0 0 15px var(--warning-glow); }
    to { box-shadow: none; }
}
.scoreboard-flashing {
    animation: flash-scoreboard 1.5s ease-in-out 1;
}

/* Challenge Mode Board Overlay */
/* REMOVED: Host board selection styles */
/* .board-challenge-select-active .grid-cell:not(.challenge-targetable) {
    opacity: 0.4;
    pointer-events: none;
}
.grid-cell.challenge-targetable {
    cursor: crosshair !important;
    opacity: 1.0 !important;
    pointer-events: all !important;
    border: 2px solid var(--danger-primary);
    box-shadow: 0 0 15px var(--danger-glow);
}
.grid-cell.challenge-targetable:hover {
    transform: scale(1.05);
    background-color: rgba(255, 64, 64, 0.2);
} */


/* --- Modal System Redesign --- */

/* Modal Backdrop */
@keyframes fadeInBackdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal {
    display: none; /* Controlled by JS */
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--surface-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}
.modal[style*="display: flex"] {
    opacity: 1;
    animation: fadeInBackdrop 0.3s ease-out forwards;
}

/* Modal Content Base - The Glass Panel */
@keyframes slideInUp {
    from { transform: translateY(50px) scale(0.98); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.modal-content {
    background: var(--surface-glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--border-radius-large);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    color: var(--text-primary);
    margin: 0;
    padding: 30px 35px; /* Standard padding */
    width: auto;
    min-width: 320px;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: slideInUp 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

/* Modal Header Styles */
.modal-content h2 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.8em;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--surface-glass-border);
}
.modal-content p {
    margin-top: 10px;
    margin-bottom: 15px;
    text-align: center;
    line-height: var(--line-height-base);
    color: var(--text-secondary);
}
.modal-content p strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}
.modal-content hr {
    border: none;
    border-top: 1px solid var(--surface-glass-border);
    margin: 25px 0;
}

/* --- Specific Modal: Question --- */
#question-modal .modal-content {
	min-width: 600px;
    max-width: 1000px;
    min-height: 350px;
    /* REMOVE padding-top as wrapper handles content layout */
    padding: 30px 35px; /* Use standard modal padding */
    position: relative;
    overflow: visible; /* Allow timer to extend outside if needed */
    /* Keep flex, direction, and centering for the wrapper */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the wrapper horizontally */
    justify-content: center; /* Centers the wrapper vertically */
}

/* NEW: Style for the Question Content Wrapper */
.question-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content horizontally within the wrapper */
    justify-content: center; /* Centers content vertically within the wrapper */
    width: 100%; /* Take full width of the parent modal-content */
    flex-grow: 1; /* Allow wrapper to take up available space */
    box-sizing: border-box;
}


#question-modal h2 { /* Category & Points */
    font-size: 1.5em;
    color: var(--accent-primary);
    text-shadow: 0 0 8px var(--accent-primary-glow);
    border-bottom-color: var(--accent-primary);
    margin-top: 0; /* Ensure no extra margin at the top of the wrapper */
    margin-bottom: 25px;
}
#question-text {
    font-size: clamp(1.4em, 2.5vw, 2.2em);
    margin: 20px 0 30px 0;
    line-height: 1.5;
    color: var(--text-primary);
    text-align: center;
    font-weight: var(--font-weight-medium);
    /* flex-grow: 1; REMOVED - flex-grow is on the wrapper now */
}
#question-image {
    display: none;
    max-width: 90%;
    max-height: 350px;
    height: auto;
    margin: 15px auto 20px auto; /* Use auto margins for horizontal centering */
    border-radius: var(--border-radius-standard);
    border: 1px solid var(--surface-glass-border);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
#question-audio-container {
    display: none;
    margin: 15px auto 20px auto; /* Use auto margins for horizontal centering */
}
#question-audio-player {
    width: clamp(280px, 70%, 450px);
    border-radius: var(--border-radius-small); /* Sharper corners */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    background-color: var(--bg-secondary); /* Darker player background */
}
#question-answer {
    font-weight: var(--font-weight-bold);
    color: var(--success-primary);
    font-size: 1.4em;
    background-color: rgba(57, 255, 20, 0.1);
    padding: 8px 15px;
    border-radius: var(--border-radius-small);
    border: 1px solid var(--success-primary);
    display: inline-block;
    text-shadow: 0 0 8px var(--success-glow);
}

/* Timer Circle Container - Fixed positioning */
#timer-circle {
    position: absolute;
    top: 20px; /* Position in the top padding area */
    right: 20px;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    /* Add a subtle glow background */
    background: radial-gradient(circle, rgba(255, 64, 64, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    /* IMPORTANT: Ensure it doesn't get clipped */
    overflow: visible;
}

/* Timer Display Number - adjusted for smaller container */
#question-timer-display {
    font-family: var(--font-mono);
    font-size: 1.8em;
    font-weight: var(--font-weight-bold);
    color: var(--danger-primary);
    text-shadow:
        0 0 8px var(--danger-glow),
        0 0 15px var(--danger-glow),
        0 2px 4px rgba(0,0,0,0.5);
    position: relative;
    z-index: 3;
    background: rgba(13, 15, 24, 0.95); /* More opaque for better contrast */
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--danger-primary);
    box-shadow:
        inset 0 0 10px rgba(255, 64, 64, 0.3),
        0 0 15px var(--danger-glow);
}

/* Timer SVG Container - ensure it's properly contained */
.timer-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(-180deg) rotateZ(-90deg);
    z-index: 2;
    filter: drop-shadow(0 0 8px var(--danger-glow));
    overflow: visible; /* Make sure SVG isn't clipped */
}

.timer-svg path {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
}

/* Background track - more subtle */
.timer-track {
    stroke: rgba(138, 148, 179, 0.3);
    stroke-width: 2;
}

/* Progress bar - enhanced with gradient effect */
.timer-progress {
    stroke: var(--danger-primary);
    stroke-dasharray: 251; /* Adjusted for smaller radius (2 * PI * 40) */
    stroke-dashoffset: 251;
    transition: stroke-dashoffset 1s linear;
    filter: drop-shadow(0 0 5px var(--danger-glow));
}

/* Update the corner brackets for smaller size */
#timer-circle::before,
#timer-circle::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid var(--accent-primary);
    opacity: 0.6;
}

#timer-circle::before {
    top: -5px;
    left: -5px;
    border-right: none;
    border-bottom: none;
}

#timer-circle::after {
    bottom: -5px;
    right: -5px;
    border-left: none;
    border-top: none;
}

/* Ensure the modal content doesn't clip the timer */
#question-modal .modal-content {
    overflow: visible; /* Allow timer to extend outside if needed */
    position: relative;
}

/* Make sure the timer SVG uses the correct radius */
.timer-svg path {
    /* Update the path to use radius 40 instead of 45 */
}
/* Buzzer Lights */
/* --- REPLACEMENT for Buzzer Lights --- */
#buzzer-lights-container {
    margin: 25px 0 15px 0; /* Adjust margin */
    padding: 15px;
    text-align: center;
    background-color: rgba(13, 15, 24, 0.5); /* Dark panel background */
    border-radius: var(--border-radius-standard);
    border: 1px solid var(--surface-glass-border);
    box-shadow: var(--shadow-inset);
    width: 100%; /* Ensure it takes full width within the wrapper */
    max-width: 500px; /* Limit width for better centering */
}

#buzzer-lights-container p {
    margin-bottom: 15px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    font-size: 0.9em;
}

#buzzer-lights {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    min-height: 50px; /* Increased height */
}

.buzzer-light {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-standard); /* From circle to rounded square */
    background-color: var(--disabled-bg);
    transition: all 0.3s ease;
    border: 1px solid var(--disabled-border);
    /* NEW: Inset shadow for 3D button effect */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(255,255,255,0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.2em;
    color: var(--disabled-text);
    font-family: var(--font-mono);
	opacity: 0.5;
}

/* Base style for an active (but not yet buzzed) participant */
.buzzer-light.buzzed, .buzzer-light.next-turn, .buzzer-light.active-turn {
    color: var(--text-primary);
    /* Use the team color for the background, but darkened */
    background-color: color-mix(in srgb, currentColor 30%, var(--bg-primary));
    border-color: currentColor;
}

/* A team that has buzzed in and is waiting in the queue */
.buzzer-light.buzzed {
	opacity: 1;
    transform: scale(1.05);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 12px var(--info-primary);
    border-color: var(--info-primary);
}

/* The next team in the queue */
.buzzer-light.next-turn {
	opacity: 1;
    border-color: var(--warning-primary);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 0 15px var(--warning-glow);
    animation: pulseWarning 1.5s infinite;
}

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

/* The team whose turn it is to answer RIGHT NOW */
.buzzer-light.active-turn {
	opacity: 1;
    background-color: var(--accent-primary); /* Bright cyan background */
    color: var(--text-on-accent); /* Dark text */
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow-accent), var(--shadow-inset);
    transform: scale(1.15);
    z-index: 1;
}

/* --- Specific Modal: Shop --- */
#shop-modal .modal-content {
    background-color: var(--surface-solid-bg);
    /* NEW: Subtle grid background for a terminal feel */
    background-image:
        linear-gradient(rgba(0, 255, 255, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.07) 1px, transparent 1px);
    background-size: 25px 25px;
    backdrop-filter: none;
    max-width: 800px; /* A bit wider */
    padding: 25px 35px;
    border-color: var(--shop-primary); /* Use magenta for the border */
    box-shadow: 0 0 25px var(--shop-glow), inset 0 0 15px rgba(255, 0, 255, 0.2);
}

#shop-modal h2 {
    color: var(--shop-primary);
    text-shadow: 0 0 8px var(--shop-glow);
    border-bottom: 1px solid var(--shop-primary);
    padding-bottom: 12px;
    margin-bottom: 30px;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.1em; /* Increased spacing */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 2em;
}

.shop-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.shop-item-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--surface-glass-border);
    border-radius: var(--border-radius-standard);
    padding: 20px;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2), inset 0 0 0 1px transparent;
    display: flex;
    flex-direction: column;
}

.shop-item-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-primary);
    box-shadow: 0 5px 20px rgba(0,0,0,0.4), var(--shadow-glow-accent);
}

.shop-item-card h3 {
    color: var(--text-primary);
    font-size: 1.35em;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    border-bottom: 1px solid var(--surface-glass-border);
    padding-bottom: 10px;
}

.item-icon {
    font-style: normal;
    font-size: 1.5em;
    color: var(--accent-primary);
    text-shadow: 0 0 8px var(--accent-primary-glow);
}

.shop-item-cost {
    font-weight: var(--font-weight-semibold);
    margin-bottom: 15px;
    color: var(--text-secondary);
    font-size: 0.9em;
}

.shop-item-cost strong {
    color: var(--warning-primary); /* Amber for cost */
    font-family: var(--font-mono);
    font-size: 1.3em;
    text-shadow: 0 0 5px var(--warning-glow);
}

.shop-item-description {
    font-size: 0.9em;
    color: var(--text-secondary);
    flex-grow: 1;
    line-height: 1.5;
    margin-bottom: 20px;
}

.shop-team-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 10px;
    margin-top: auto; /* Pushes buttons to the bottom of the card */
}

.shop-item-card .team-buy-button {
    font-size: 0.9em;
    padding: 10px 5px;
    border: 1px solid;
    background-color: transparent !important;
    color: currentColor !important;
    box-shadow: none !important;
    transition: all 0.2s ease-in-out;
}

.shop-item-card .team-buy-button:hover:enabled {
    background-color: currentColor !important;
    color: var(--text-dark) !important;
    /* NEW: Add a glow effect using the team's color */
    box-shadow: 0 0 12px currentColor, 0 0 5px currentColor !important;
    transform: translateY(-2px);
}

/* Generic Modal Close Button */
.modal-close-button {
    border-color: var(--text-secondary);
    color: var(--text-secondary);
    margin-top: 25px;
    align-self: center; /* Center the button */
}
.modal-close-button:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
    background-color: rgba(224, 229, 246, 0.1);
    box-shadow: 0 0 8px rgba(224, 229, 246, 0.2);
}

/* REMOVED: Dead Cell Modal Styles - Host no longer uses this modal */
/* #dead-cell-modal .modal-content {
    max-width: 650px;
    border-color: var(--info-primary);
    box-shadow: 0 0 25px var(--info-glow), inset 0 0 15px rgba(95, 159, 255, 0.2);
}
#dead-cell-modal h2 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--info-primary);
    text-shadow: 0 0 8px var(--info-glow);
    margin-bottom: 20px;
}
#dead-cell-modal p {
    color: var(--text-secondary);
    font-size: 1.1em;
    text-align: center;
}
#dead-cell-modal p strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 600;
}
#dead-cell-options {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}
#dead-cell-options .team-buy-button {
    padding: 10px 18px;
    font-size: 0.95em;
    border: 1px solid;
    background-color: transparent !important;
    color: currentColor !important;
    box-shadow: none !important;
    transition: all 0.2s ease-out;
}
#dead-cell-options .team-buy-button:hover:enabled {
    background-color: currentColor !important;
    color: var(--text-dark) !important;
    box-shadow: 0 0 12px currentColor !important;
    transform: translateY(-2px);
}
#cancel-dead-cell-btn {
    align-self: center;
    margin-top: 20px;
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}
#cancel-dead-cell-btn:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
    background-color: rgba(224, 229, 246, 0.1);
} */


/* --- C4 Choice Modal: "System Reward" Theme --- */
#c4-choice-modal .modal-content {
    max-width: 650px;
    border-color: var(--success-primary);
    box-shadow: 0 0 25px var(--success-glow), inset 0 0 15px rgba(57, 255, 20, 0.2);
}

#c4-choice-modal h2 {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--success-primary);
    text-shadow: 0 0 8px var(--success-glow);
    margin-bottom: 20px;
}

#c4-choice-modal p {
    color: var(--text-secondary);
    font-size: 1.1em;
    text-align: center;
}

#c4-choice-modal p strong {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 600;
}

#c4-choice-options {
    margin-top: 25px;
    display: flex;
    flex-direction: column; /* Stack choices vertically */
    align-items: center;
    gap: 15px;
}

#c4-choice-options button {
    border-color: var(--success-primary);
    color: var(--success-primary);
    font-family: var(--font-mono);
    letter-spacing: 0.03em;
    font-size: 1.1em;
    width: 80%; /* Make buttons wider */
    padding: 12px;
}

#c4-choice-options button:hover {
    background-color: var(--success-primary);
    color: var(--text-on-accent);
    box-shadow: 0 0 15px var(--success-glow);
}

/* --- Generic Modal Close Button (Cancel/Abort) --- */
/* This style is used by cancelChallengeBtn */
/* #cancel-dead-cell-btn {
    align-self: center;
    margin-top: 20px;
    border-color: var(--text-secondary);
    color: var(--text-secondary);
}
#cancel-dead-cell-btn:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
    background-color: rgba(224, 229, 246, 0.1);
} */


/* Challenge Setup Modal */
/* --- REPLACEMENT for Challenge Setup Modal --- */
#challenge-setup-modal .modal-content {
    max-width: 750px;
    border-color: var(--danger-primary);
    box-shadow: 0 0 25px var(--danger-glow), inset 0 0 15px rgba(255, 64, 64, 0.2);
}

#challenge-setup-title {
    color: var(--danger-primary);
    text-shadow: 0 0 8px var(--danger-glow);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--danger-primary);
    padding-bottom: 15px;
    font-size: 1.8em;
}

.challenge-participants {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 15px;
}

.team-name-display {
    font-size: 1.5em;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    padding: 8px 15px;
    border-radius: var(--border-radius-small);
    border: 1px solid var(--surface-glass-border);
}

.vs-text {
    font-family: var(--font-mono);
    font-size: 1.2em;
    color: var(--danger-primary);
    font-weight: var(--font-weight-bold);
}

.challenge-info {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.challenge-info strong {
    color: var(--warning-primary);
    font-family: var(--font-mono);
    font-weight: 600;
    text-shadow: 0 0 5px var(--warning-glow);
}

#challenge-category-instruction {
    font-size: 1em;
    color: var(--text-secondary);
    margin-bottom: 20px;
    text-align: center;
    font-weight: var(--font-weight-medium);
}

.challenge-category-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin: 15px 0 30px 0;
    width: 100%;
}

/* This rule now targets the buttons populated by JS */
#challenge-category-options button {
    padding: 18px 12px;
    font-size: 1.1em;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--surface-glass-border);
    box-shadow: var(--shadow-inset);
    min-height: 70px;
    text-align: center;
    border-radius: var(--border-radius-small);
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    transition: all 0.2s ease-out;
}

#challenge-category-options button:hover:enabled {
    background-color: var(--accent-primary-glow);
    color: var(--text-on-accent);
    box-shadow: var(--shadow-glow-accent);
    border-color: var(--accent-primary);
    transform: translateY(-3px);
}

#cancel-challenge-btn {
    align-self: center;
    margin-top: 10px;
    border-color: var(--danger-primary);
    color: var(--danger-primary);
    font-family: var(--font-primary);
    padding: 12px 30px;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

#cancel-challenge-btn:hover {
    background-color: var(--danger-primary);
    color: var(--text-on-accent);
    box-shadow: 0 0 15px var(--danger-glow);
}


/* --- Toast Notifications --- */
/* --- REPLACEMENT for Toast Notifications --- */
#toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Fine-tune the centering */
    z-index: 2000;
    display: flex;
    flex-direction: column-reverse; /* New toasts appear on top */
    align-items: center; /* Center toasts within the container */
    gap: 12px;
    width: auto;
    max-width: 90%; /* Use max-width for responsiveness */
    pointer-events: none;
}

.toast {
    /* NEW: Glassmorphism effect */
    background-color: var(--surface-glass-bg);
    backdrop-filter: blur(8px);
    color: var(--text-primary);
    padding: 14px 22px;
    border-radius: var(--border-radius-standard);
    border: 1px solid var(--surface-glass-border);
    border-left-width: 5px; /* Thicker accent border */
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 300px;
    opacity: 0;
    /* NEW: Slide-in animation from the right */
    transform: translateY(100%);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-weight: var(--font-weight-medium);
    pointer-events: auto;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast-icon {
    font-size: 1.6em;
    line-height: 1;
    text-shadow: 0 0 8px currentColor; /* Add a subtle glow to the icon */
}

.toast-message {
    flex-grow: 1;
    font-size: 0.95em;
    line-height: 1.4;
}

/* Define colors for each toast type */
.toast-success { border-left-color: var(--success-primary); }
.toast-success .toast-icon { color: var(--success-primary); }

.toast-error   { border-left-color: var(--danger-primary); }
.toast-error .toast-icon { color: var(--danger-primary); }

.toast-info    { border-left-color: var(--info-primary); }
.toast-info .toast-icon { color: var(--info-primary); }

.toast-warning { border-left-color: var(--warning-primary); }
.toast-warning .toast-icon { color: var(--warning-primary); }

.toast-shop    { border-left-color: var(--shop-primary); }
.toast-shop .toast-icon { color: var(--shop-primary); }

.toast-c4      { border-left-color: var(--accent-primary); }
.toast-c4 .toast-icon { color: var(--accent-primary); }

.toast-trap    { border-left-color: var(--danger-primary); }
.toast-trap .toast-icon { color: var(--danger-primary); }

.toast-challenge { border-left-color: var(--danger-primary); }
.toast-challenge .toast-icon { color: var(--danger-primary); }

/* --- NEW: Challenge Mode Alert Overlay --- */
#challenge-alert-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 15, 24, 0.85); /* Dark, semi-transparent overlay */
    backdrop-filter: blur(4px);
    z-index: 20; /* Sits above the board but below modals */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--danger-primary);
    /* MODIFIED: pointer-events auto -> none, host doesn't click through this */
    pointer-events: none; /* Allows clicks to pass through to the board */
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

#challenge-alert-overlay.hidden {
    opacity: 0;
}

#challenge-alert-overlay:not(.hidden) {
    opacity: 1;
}

#challenge-alert-overlay h1 {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 6vw, 4rem);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 0 0 15px var(--danger-glow);
    animation: flicker 1.5s infinite alternate; /* Reuse the title flicker */
}

#challenge-alert-overlay p {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: var(--text-secondary);
    margin-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* The animated scanline */
.scanline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to bottom, transparent, var(--danger-primary), transparent);
    box-shadow: 0 0 15px var(--danger-glow);
    animation: scan 4s linear infinite;
}

@keyframes scan {
    from { top: 0; }
    to { top: 100%; }
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    :root { --font-size-base: 15px; }
    #title-screen h1 { font-size: 10vw; }
    .title-buttons button { font-size: 1.1em; padding: 14px 30px;}

    #config-screen { margin-top: 20px; padding: 20px; max-height: calc(100vh - 40px); }
    .back-button { width: 32px; height: 32px; font-size: 1.6em; line-height: 30px; }
    #config-screen h1 { font-size: 1.8em; }
    #config-screen h2 { font-size: 1.2em; }
    #game-id-code { font-size: 1.8em !important; }
    #start-game-btn { font-size: 1.1em; padding: 12px 30px; }

    #game-header { padding: 8px 0; }
    #game-title { font-size: 1.5em; }
    .header-icon-btn { width: 40px; height: 40px; font-size: 1.1em; }

    #scoreboard { gap: 10px; }
    .team-score { font-size: 0.85em; min-width: 110px; padding: 8px 12px; flex-basis: 90px; }
    .team-score .team-name { font-size: 1.1em; margin-bottom: 6px;}
    .team-score .team-stats { font-size: 0.95em; gap: 4px; }

    #game-board-container { padding: 8px; }
    .grid-cell.category-header { font-size: 0.75em; padding-bottom: 6px; }
    .grid-cell.question-cell { font-size: 1.2em; }
    .grid-cell.dead-question { font-size: 1.8em !important; }

    .modal-content { width: 95%; padding: 25px 20px; margin: 0; max-height: 90vh; } /* Use standard mobile padding */

    /* --- UPDATED MOBILE STYLES FOR QUESTION MODAL & TIMER (768px) --- */
    #question-modal .modal-content {
        /* REMOVE padding-top */
        padding: 25px 20px; /* Use standard mobile padding */
        min-height: 300px; /* Kept existing min-height */
    }

    #timer-circle {
        top: 15px;
        right: 15px;
        width: 60px;
        height: 60px;
    }
    #buzzer-lights-container {
         max-width: 400px; /* Adjust max-width for smaller screens */
    }
    /* --- END UPDATED MOBILE STYLES (768px) --- */

    #question-image { max-height: 280px; }
    #buzzer-lights { gap: 12px; }
    .buzzer-light { width: 32px; height: 32px; font-size: 0.9em; }

    #shop-modal .modal-content, #c4-choice-modal .modal-content, #challenge-setup-modal .modal-content { padding-top: 25px; } /* REMOVED deadCellModal */
    #shop-modal .modal-content { max-width: 95%; }
    .shop-item-card .team-buy-button, .modal-close-button, #c4-choice-options button, .challenge-category-buttons button { padding: 10px 16px; font-size: 0.95em; margin: 0; } /* REMOVED deadCellOptions */
    .shop-items-grid { gap: 20px; }
    .shop-item-card { padding: 20px; max-width: 100%; }
    .shop-item-card h3 { font-size: 1.3em; }
    .shop-item-cost { font-size: 1.1em; }
    .shop-team-buttons { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px;} /* Adjusted minmax for smaller screens */
    .challenge-category-buttons { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
    .challenge-category-buttons button { font-size: 1em; min-height: 60px; padding: 12px 10px; }
    #shop-item-area-dead-cell .team-buy-button { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));} /* Smaller minmax for dead cell buttons */


    #toast-container { bottom: 15px; gap: 10px; }
    .toast { min-width: 250px; padding: 10px 15px; }
    .toast-icon { font-size: 1.3em; }
    .toast-message { font-size: 0.9em; }
}

@media (max-width: 480px) {
    :root { --font-size-base: 14px; }
    #game-area { padding: 0 10px 10px 10px; }
    #game-header { padding: 5px 0; }
    #game-title { font-size: 1.3em; }
    .header-icon-btn { width: 36px; height: 36px; font-size: 1em; }

    #scoreboard { gap: 8px; }
    .team-score { font-size: 0.75em; min-width: 65px; flex-basis: 60px; padding: 8px 10px;}
    .team-score .team-name { font-size: 1em; margin-bottom: 6px;}
    .team-score .team-stats { flex-direction: column; align-items: flex-start; gap: 2px; }
    .team-score .stat-item { font-size: 0.9em; gap: 3px; }

    #game-board-container { padding: 5px; }
    .grid-cell.category-header { font-size: 0.65em; padding-bottom: 4px; }
    .grid-cell.question-cell { font-size: 1.1em; }
    .grid-cell.dead-question { font-size: 1.6em !important; }

    .modal-content { padding-left: 15px; padding-right: 15px; } /* Use standard mobile padding */

    /* --- UPDATED MOBILE STYLES FOR QUESTION MODAL & TIMER (480px) --- */
    #question-modal .modal-content {
        /* REMOVE padding-top */
        padding: 25px 15px; /* Use standard mobile padding */
        min-height: 250px; /* Kept existing min-height */
    }

    #timer-circle {
        top: 12px;
        right: 12px;
        width: 55px;
        height: 55px;
    }
     #buzzer-lights-container {
         max-width: 300px; /* Adjust max-width for smaller screens */
     }
    /* --- END UPDATED MOBILE STYLES (480px) --- */

    #question-image { max-height: 220px; }
    .buzzer-light { width: 28px; height: 28px; font-size: 0.8em; border-radius: var(--border-radius-small); }

    #toast-container { width: 100%; left: 0; transform: none; bottom: 0; padding: 10px; box-sizing: border-box; align-items: stretch; }
    .toast { min-width: initial; width: 100%; margin-bottom: 8px; }
    .toast-icon { font-size: 1.3em; }
    .toast-message { font-size: 0.9em; }
    .challenge-category-buttons { grid-template-columns: 1fr; }
    .challenge-category-buttons button { font-size: 0.9em; min-height: 55px; }
    #shop-modal .modal-content { max-width: 100%; }
    .shop-item-card { padding: 15px; max-width: 100%; }
    .shop-item-card h3 { font-size: 1.2em; }
    .shop-item-cost { font-size: 1em; }
    .shop-team-buttons { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px;}
    .shop-item-card .team-buy-button { font-size: 0.8em; padding: 10px 5px; }
    #shop-item-area-dead-cell .team-buy-button { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));} /* Even smaller minmax for dead cell buttons */
}

@keyframes token-pulse {
    0% { box-shadow: 0 0 8px var(--accent-primary-glow); }
    50% { box-shadow: 0 0 20px var(--accent-primary-glow), 0 0 30px var(--accent-primary-glow); }
    100% { box-shadow: 0 0 8px var(--accent-primary-glow); }
}

@keyframes simpleCapture {
    0% {
        transform: scale(1);
        box-shadow: 0 0 5px var(--accent-primary-glow);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 25px currentColor, 0 0 35px currentColor;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
}

/* Animation class that gets applied to the cell */
.grid-cell.simple-capture-animation {
    animation: simpleCapture 0.6s ease-out;
    z-index: 10;
}

@keyframes timerPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px var(--danger-glow));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px var(--danger-glow));
    }
}

/* Apply pulsing when timer is low */
.timer-low #question-timer-display {
    animation: timerPulse 0.8s infinite;
    color: #FF6040; /* Orange-red for warning */
    border-color: #FF6040;
    box-shadow: 
        inset 0 0 15px rgba(255, 96, 64, 0.5),
        0 0 25px #FF6040;
}

.timer-low .timer-progress {
    stroke: #FF6040;
    filter: drop-shadow(0 0 10px #FF6040);
}

/* Very low timer (≤5 seconds) - more dramatic */
@keyframes timerCritical {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px #FF0000);
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 20px #FF0000);
    }
}

.timer-critical #question-timer-display {
    animation: timerCritical 0.4s infinite; /* Faster pulse for urgency */
    color: #FF0000; /* Bright red for critical */
    border-color: #FF0000;
    box-shadow: 
        inset 0 0 20px rgba(255, 0, 0, 0.8),
        0 0 30px #FF0000;
    background: rgba(255, 0, 0, 0.1); /* Slight red background tint */
}

.timer-critical .timer-progress {
    stroke: #FF0000;
    filter: drop-shadow(0 0 15px #FF0000);
}

/* Make the corner brackets pulse too for extra drama */
.timer-critical #timer-circle::before,
.timer-critical #timer-circle::after {
    border-color: #FF0000;
    animation: timerCritical 0.4s infinite;
}

/* --- NEW: Host Board Clicks Disabled --- */
/* Ensure the board is not interactive for selection on the host side */
#game-board-container {
    pointer-events: auto; /* Default */
}
#game-board {
    pointer-events: auto; /* Default */
}
/* Disable clicks on specific cell types if needed, but handle most in JS now */
.grid-cell.answered,
.grid-cell.dead-question,
.grid-cell.pending,
.grid-cell.category-header {
    cursor: default;
    pointer-events: auto; /* Allow hover effects, but JS prevents click action */
}
.grid-cell.question-cell:not(.answered):not(.dead-question):not(.pending) {
     cursor: pointer; /* Only question cells are clickable by host */
}

/* In style.css, add to the end */

@keyframes timerPulse {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 8px var(--danger-glow));
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 15px var(--danger-glow));
    }
}

/* Apply pulsing when timer is low */
.timer-low #question-timer-display {
    animation: timerPulse 0.8s infinite;
    color: #FF6040; /* Orange-red for warning */
    border-color: #FF6040;
    box-shadow: 
        inset 0 0 15px rgba(255, 96, 64, 0.5),
        0 0 25px #FF6040;
}

.timer-low .timer-progress {
    stroke: #FF6040;
    filter: drop-shadow(0 0 10px #FF6040);
}

/* Very low timer (≤5 seconds) - more dramatic */
@keyframes timerCritical {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px #FF0000);
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 20px #FF0000);
    }
}

.timer-critical #question-timer-display {
    animation: timerCritical 0.4s infinite; /* Faster pulse for urgency */
    color: #FF0000; /* Bright red for critical */
    border-color: #FF0000;
    box-shadow: 
        inset 0 0 20px rgba(255, 0, 0, 0.8),
        0 0 30px #FF0000;
    background: rgba(255, 0, 0, 0.1); /* Slight red background tint */
}

.timer-critical .timer-progress {
    stroke: #FF0000;
    filter: drop-shadow(0 0 15px #FF0000);
}

/* Make the corner brackets pulse too for extra drama */
.timer-critical #timer-circle::before,
.timer-critical #timer-circle::after {
    border-color: #FF0000;
    animation: timerCritical 0.4s infinite;
}

/* In style.css, add to the end */
@keyframes simpleCapture {
    0% {
        transform: scale(1);
        box-shadow: 0 0 5px var(--accent-primary-glow);
    }
    50% {
        transform: scale(1.15);
        box-shadow: 0 0 25px currentColor, 0 0 35px currentColor;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
}

/* Animation class that gets applied to the cell */
.grid-cell.simple-capture-animation {
    animation: simpleCapture 0.6s ease-out;
    z-index: 10;
}

/* --- NEW: In-Game Header Title Styling --- */

/* This is the new wrapper we added in index.html */
.game-title-glitch-wrapper {
    flex: 2; /* Keeps the layout balanced */
    text-align: center; /* Ensures h1 is centered within it */
}

/* Target the h1 inside the game header */
#game-header #game-title {
    font-family: var(--font-mono);
    font-size: 1.8em; /* Kept the original size, it's a good fit */
    color: var(--accent-primary); /* Change from plain white to neon cyan */
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative; /* Crucial for the pseudo-elements */
    display: inline-block; /* Ensures wrapper fits the text width */

    /* Scaled-down neon text-shadow effect */
    text-shadow:
        0 0 2px var(--accent-primary-glow),
        0 0 5px var(--accent-primary-glow),
        0 0 10px var(--accent-primary-glow),
        0 0 20px var(--accent-secondary-glow);
    
    /* Reuse the flicker animation from the title screen */
    animation: flicker 3s infinite alternate;
}

/* Create the glitch pseudo-elements, just like the title screen */
#game-header #game-title::before,
#game-header #game-title::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    clip-path: inset(50% 50% 50% 50%);
}

/* Style the first glitch layer (magenta) */
#game-header #game-title::before {
    text-shadow: -1px 0 var(--accent-secondary); /* Reduced shadow size for smaller text */
    animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

/* Style the second glitch layer (red) */
#game-header #game-title::after {
    text-shadow: 1px 0 var(--danger-primary); /* Reduced shadow size */
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}


/* ADD this CSS to your HOST/DISPLAY styles for cell preview effects */

@keyframes previewPulse {
    0% {
        transform: scale(1);
        opacity: 0.9;
    }
    100% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes previewBlink {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }
    100% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.cell-preview-active {
    position: relative;
    z-index: 5;
    transition: all 0.3s ease;
}

.preview-indicator {
    pointer-events: none;
}

/* Ensure cells have position relative for absolute positioning of indicators */
.grid-cell, .cell, [data-row][data-col] {
    position: relative;
}

/* Ensure cells are always clickable and have proper hover states */
.grid-cell.question-cell {
    position: relative;
    cursor: pointer;
    pointer-events: auto;
    z-index: 1;
}

.grid-cell.question-cell:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

/* Preview elements should never block mouse events */
.preview-indicator {
    pointer-events: none !important;
}

/* Cell preview styling should not interfere with clickability */
.cell-preview-active {
    pointer-events: auto !important;
}

.cell-preview-active::before,
.cell-preview-active::after {
    pointer-events: none !important;
}

/* Make sure all child elements in cells don't block clicks */
.grid-cell * {
    pointer-events: none;
}

/* But keep the main cell clickable */
.grid-cell {
    pointer-events: auto;
}

/* Animation keyframes for preview effects */
@keyframes previewPulse {
    0% { opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes previewBlink {
    0% { opacity: 0.6; }
    100% { opacity: 1; }
}

/* PERMANENT FIX - Replace the debug CSS with this clean version */

/* Ensure cells are always properly clickable */
.grid-cell.question-cell {
    pointer-events: auto !important;
    cursor: pointer;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    padding: 8px;
    text-align: center;
}

/* Prevent child elements from blocking clicks */
.grid-cell * {
    pointer-events: none;
}

/* Ensure pseudo-elements don't interfere */
.grid-cell::before,
.grid-cell::after {
    pointer-events: none;
}

/* Proper hover effect */
.grid-cell.question-cell:hover {
    transform: scale(1.02);
    transition: transform 0.2s ease;
}

/* Ensure answered cells remain clickable for dead cell purchases */
.grid-cell.answered {
    pointer-events: auto !important;
}

/* Make sure dead cells are clickable */
.grid-cell.dead-question {
    pointer-events: auto !important;
    cursor: pointer;
}

/* Ensure challenge/shop states don't break clicking */
.grid-cell.challenge-targetable {
    pointer-events: auto !important;
}

/* Fix any board state issues */
#game-board {
    pointer-events: auto;
}

#game-board.board-challenge-select-active .grid-cell.question-cell {
    pointer-events: auto !important;
}