/* Main CSS for Genius or Idiot - Neo-Brutalism Edition */
:root {
    /* Dimensions & Spacing */
    --border-width: 3px;
    --border-radius: 8px;
    /* Slightly rounded, or 0 for pure brutalism */
    --shadow-offset: 4px;
    --transition-speed: 0.15s;
    /* Snappy */
}

/* GLOBAL RESET */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 
   ========================================
   LIGHT THEME 
   ========================================
*/
:root,
[data-theme="light"] {
    /* Colors */
    --bg-color: #fce7f3;
    /* Light pinkish bg */
    --text-color: #000000;

    /* Primary Action */
    --primary-color: #3b82f6;
    /* Bright Blue */
    --primary-hover: #2563eb;

    /* Cards / Surfaces */
    --surface-color: #ffffff;
    --border-color: #000000;

    /* Shadows */
    --shadow-color: #000000;

    /* Alerts */
    --success-bg: #86efac;
    /* Green */
    --success-text: #000000;
    --error-bg: #fca5a5;
    /* Red */
    --error-text: #000000;
    --warning-bg: #fde047;
    /* Yellow */
    --warning-text: #000000;

    /* Input */
    --input-bg: #ffffff;
}

/* 
   ========================================
   DARK THEME 
   ========================================
*/
[data-theme="dark"] {
    /* Colors */
    --bg-color: #1e1b4b;
    /* Deep Indigo */
    --text-color: #ffffff;

    /* Primary Action */
    --primary-color: #f472b6;
    /* Pink */
    --primary-hover: #db2777;

    /* Cards / Surfaces */
    --surface-color: #312e81;
    /* Indigo 900 */
    --border-color: #ffffff;

    /* Shadows */
    --shadow-color: #000000;
    /* Keep black shadows for contrast or use white? Neo Brutalism usually uses black shadows even on dark, or high contrast. Let's try offset black shadow for "depth" or white if it looks better. Let's stick to black shadow if bg is light enough, but here bg is dark. Let's make shadow a dark solid block. */
    --shadow-color: #000000;

    /* Alerts */
    --success-bg: #22c55e;
    --success-text: #000000;
    --error-bg: #ef4444;
    --error-text: #000000;
    --warning-bg: #eab308;
    --warning-text: #000000;

    /* Input */
    --input-bg: #4338ca;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Courier New', Courier, monospace, system-ui;
    /* Monospace fits brutalism well, or a bold sans */
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 700;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding-top: 100px;
    /* Space for fixed header */
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
    position: relative;
    transition: background-color var(--transition-speed);
}

/* Background grid pattern for flair */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.15;
    z-index: -1;
    pointer-events: none;
}

/* Container */
body>* {
    max-width: 600px;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 10;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 0px var(--shadow-color);
    /* Hard text shadow */
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
    text-shadow: 2px 2px 0px #000;
    /* Ensure text shadow is visible on dark */
}

/* UTILS: Box with Hard Shadow */
.nb-box {
    background: var(--surface-color);
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);
    border-radius: var(--border-radius);
}

/* 
   GAME HEADER (Desktop Unified)
*/
.game-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none !important;
    height: 80px;
    background: var(--surface-color);
    border-bottom: var(--border-width) solid var(--border-color);
    box-shadow: 0px 4px 0px var(--shadow-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    z-index: 1000;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* 
   SCORE BOARD 
*/
.score-board {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
}

.score-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--surface-color);
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    min-width: 80px;
    transition: transform var(--transition-speed);
}

.score-item:hover {
    transform: translate(-2px, -2px);
    box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0px var(--shadow-color);
}

.score-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 900;
}

.score-value {
    font-size: 1.5rem;
    font-weight: 900;
}

/* Reset Button in Scoreboard */
.score-item.action {
    cursor: pointer;
    background: var(--warning-bg);
    /* Pop of color */
    color: var(--warning-text);
}

.score-item.action:active {
    transform: translate(2px, 2px);
    box-shadow: 0px 0px 0px var(--shadow-color);
}

.score-reset-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 
   GAME CONTENT 
*/

/* Question Box */
.question-text {
    background: var(--surface-color);
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);
    border-radius: var(--border-radius);
    padding: 2rem;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    color: var(--text-color);
}

.question-text h3 {
    text-shadow: 2px 2px 0px var(--primary-color);
}

/* Choices Grid */
form.choices-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    width: 100%;
}

button.choice-btn {
    width: 100%;
    background: var(--surface-color);
    color: var(--text-color);
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    font-size: 2.5rem;
    font-weight: 900;
    cursor: pointer;
    transition: all var(--transition-speed);
    aspect-ratio: 1.5/1;
}

button.choice-btn:hover {
    background: var(--primary-color);
    color: #fff;
    /* White text on hover for contrast */
    transform: translate(-2px, -2px);
    box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0px var(--shadow-color);
}

button.choice-btn:active {
    transform: translate(var(--shadow-offset), var(--shadow-offset));
    box-shadow: 0px 0px 0px var(--shadow-color);
}

/* ALERTS */
.message-container {
    margin-bottom: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

.alert {
    padding: 1rem 2rem;
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);
    border-radius: var(--border-radius);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 1.2rem;
    min-width: 300px;
}

.alert-success {
    background-color: var(--success-bg);
    color: var(--success-text);
}

.alert-danger {
    background-color: var(--error-bg);
    color: var(--error-text);
}

.alert-warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

/* THEME TOGGLE */
.theme-toggle {
    background: var(--surface-color);
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.5rem;
    transition: all var(--transition-speed);
}

.theme-toggle:hover {
    transform: translate(-2px, -2px);
    box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0px var(--shadow-color);
}

.theme-toggle:active {
    transform: translate(var(--shadow-offset), var(--shadow-offset));
    box-shadow: 0px 0px 0px var(--shadow-color);
}

/* ANIMATIONS */
.fade-out {
    animation: fadeOut 0.3s forwards;
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}



/* Navigation Header Standard */
/* Navigation Header Standard */
.main-nav {
    font-family: sans-serif;
    display: flex;
    gap: 15px;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: inherit;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: background-color var(--transition-speed);
}

.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.nav-icon {
    font-size: 1.2rem;
}

.nav-text {
    font-size: 1rem;
}

/* Leaderboard Box */
.leaderboard-box {
    padding: 2rem;
    max-width: 800px;
    margin: 4rem auto 2rem;
    /* Added top margin to not overlap with nav */
    text-align: left;
}

/* Responsive Table */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Auth Pages */
.auth-box {
    padding: 2rem;
    max-width: 400px;
    margin: 4rem auto 2rem;
    text-align: left;
}

.form-group {
    margin-bottom: 1rem;
}

.form-group.last {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.5rem;
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
}

.auth-btn {
    width: 100%;
    font-size: 1.5rem;
    aspect-ratio: unset;
    padding: 0.5rem;
}

.auth-link-container {
    text-align: center;
    margin-top: 1.5rem;
}

.auth-link {
    color: var(--primary-color);
    font-weight: bold;
}


/* Global Links */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed);
}

a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

th,
td {
    padding: 1rem;
    text-align: left;
    border-bottom: var(--border-width) solid var(--border-color);
}

th {
    background-color: var(--primary-color);
    color: #fff;
}

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

/* Small Button (for Play Now etc) */
.btn-small {
    display: inline-block;
    background: var(--surface-color);
    color: var(--text-color);
    border: var(--border-width) solid var(--border-color);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);
    border-radius: var(--border-radius);
    padding: 0.5rem 1rem;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    margin-top: 0.5rem;
}

.btn-small:hover {
    transform: translate(-2px, -2px);
    box-shadow: calc(var(--shadow-offset) + 2px) calc(var(--shadow-offset) + 2px) 0px var(--shadow-color);
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
}

.btn-small:active {
    transform: translate(var(--shadow-offset), var(--shadow-offset));
    box-shadow: 0px 0px 0px var(--shadow-color);
}

/* MOBILE RESPONSIVE */
/* MOBILE RESPONSIVE */
/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
    body {
        /* Top padding for scoreboard, Bottom padding for nav */
        padding: 90px 10px 100px 10px;
        justify-content: flex-start;
        min-height: 100vh;
    }

    /* Unwrap the header so children can fly free */
    .game-header,
    .header-right {
        display: contents;
    }

    /* 
       TOP SCOREBOARD 
    */
    .score-board {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background: var(--surface-color);
        border-bottom: var(--border-width) solid var(--border-color);
        padding: 0 10px;
        box-shadow: 0px 4px 0px var(--shadow-color);
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* Distrib space */
        gap: 0.5rem;
        border-radius: 0;
        z-index: 900;
        overflow-x: auto;
    }

    .score-item {
        box-shadow: none;
        border: none;
        background: transparent;
        min-width: auto;
        padding: 0 5px;
        flex-shrink: 0;
    }

    .score-item:hover {
        transform: none;
        box-shadow: none;
    }

    .score-label {
        font-size: 0.6rem;
    }

    .score-value {
        font-size: 1.1rem;
    }

    /* Move theme toggle into scoreboard or keep absolute? 
       Let's keep it absolute but move it slightly to fit. 
    */
    /* Move theme toggle into scoreboard or keep absolute? 
       Let's keep it absolute but move it slightly to fit. 
    */
    .theme-toggle {
        position: fixed;
        /* Restore fixed/absolute for mobile */
        top: 15px;
        right: 10px;
        width: 40px;
        height: 40px;
        z-index: 1000;
    }

    /* Make room for theme toggle in scoreboard */
    .score-board {
        padding-right: 60px;
    }

    /* 
       BOTTOM NAVIGATION 
    */
    .main-nav {
        position: fixed;
        bottom: 0;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: 80px;
        background: var(--surface-color);
        border-top: var(--border-width) solid var(--border-color);
        display: flex;
        justify-content: space-around;
        align-items: center;
        /* Center items vertically */
        padding: 0.5rem;
        z-index: 1000;
        box-shadow: 0px -4px 0px var(--shadow-color);
        gap: 0;
        /* Let space-around handle it */
    }

    .nav-link {
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        padding: 0.5rem;
        flex: 1;
        /* Equal width tap targets */
        text-align: center;
        height: 100%;
        margin-right: 0;
        border-radius: 0;
    }

    .nav-link:hover {
        background-color: transparent;
        /* No hover bg on touch usually */
    }

    .nav-link:active {
        opacity: 0.7;
        transform: scale(0.95);
    }

    .nav-icon {
        font-size: 1.5rem;
        display: block;
    }

    .nav-text {
        font-size: 0.7rem;
        font-weight: 700;
        display: block;
    }

    /* 
       GAME CONTENT 
    */
    #game-content {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;
        /* Center content vertically in the available space */
    }

    .question-text {
        padding: 1.5rem;
        font-size: 1.3rem;
        margin-top: 0;
        /* Remove top margin as we have body padding */
        margin-bottom: 1.5rem;
    }

    form.choices-grid {
        gap: 1rem;
        align-content: center;
        /* Helper for grid alignment */
    }

    button.choice-btn {
        font-size: 1.8rem;
        min-height: 100px;
        padding: 0.5rem;
        /* Better touch targets */
    }

    /* Leaderboard / Auth Tables */
    .leaderboard-box,
    .auth-box {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem !important;
        box-shadow: none;
        /* Simplify box for mobile */
        border: none;
        background: transparent;
    }

    .leaderboard-box table,
    .auth-box form {
        background: var(--surface-color);
        border: var(--border-width) solid var(--border-color);
        box-shadow: var(--shadow-offset) var(--shadow-offset) 0px var(--shadow-color);
        border-radius: var(--border-radius);
        padding: 1rem;
    }
}