:root {
    /* Base Variables (Default Light Theme) */
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-variant: #f1f5f9;
    --border: #e2e8f0;
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary: #0891b2;
    --accent: #e11d48;
    --text-main: #0f172a;
    --text-muted: #64748b;
    --success: #16a34a;
    --warning: #ca8a04;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --radius: 12px;
    --font: 'Outfit', -apple-system, sans-serif;

    /* Theme Toggle Transitions */
    --theme-transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Dark Theme Overrides */
[data-theme="dark"] {
    --bg: #0f172a;
    --surface: #1e293b;
    --surface-variant: #334155;
    --border: #334155;
    --primary: #60a5fa;
    --primary-hover: #3b82f6;
    --secondary: #22d3ee;
    --accent: #fb7185;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
}

body {
    font-family: var(--font);
    background-color: var(--bg);
    color: var(--text-main);
    min-height: 100vh;
    transition: var(--theme-transition);
}

/* Background Pattern */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(var(--border) 1px, transparent 1px);
    background-size: 32px 32px;
    opacity: 0.5;
    z-index: -1;
}

#app {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.screen {
    position: absolute;
    inset: 0;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bg);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, visibility 0.4s;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

@media (max-width: 768px) {
    .screen {
        padding: 0.5rem;
        /* Drastically reduced to make room for grid */
    }
}

.screen.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    z-index: 10;
}

.screen.hidden {
    display: none !important;
}

/* Cards */
.card {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem;
    width: 100%;
    max-width: 500px;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin: 1rem;
    transition: var(--theme-transition);
}

@media (max-width: 768px) {
    .card {
        padding: 1.5rem;
        /* Reduced from 2.5rem */
        width: 100%;
        max-width: 100%;
        margin: 0.5rem;
    }
}

@media (min-width: 1024px) {
    .card {
        max-width: 600px;
        padding: 4rem;
    }

    .setup-card {
        max-width: 900px !important;
    }
}

.panel {
    background-color: var(--surface-variant);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    width: 100%;
    transition: var(--theme-transition);
}

/* Typography */
h1 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    text-align: center;
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
}

h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    text-align: center;
    margin-bottom: 0.5rem;
}

p {
    color: var(--text-muted);
    text-align: center;
    line-height: 1.6;
}

.highlight {
    color: var(--primary);
    font-weight: 700;
}

/* Theme Toggle Button */
.theme-toggle-btn {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: var(--shadow);
    transition: var(--theme-transition), transform 0.2s;
}

@media (max-width: 768px) {
    .theme-toggle-btn {
        top: auto;
        bottom: 1rem;
        right: 1rem;
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
        opacity: 0.8;
        /* Subtle transparency to be less obtrusive */
    }
}

.theme-toggle-btn:hover {
    transform: scale(1.1);
}

.theme-toggle-btn:active {
    transform: scale(0.95);
}

.theme-toggle-btn .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle-btn .icon-sun {
    display: none;
}

[data-theme="dark"] .theme-toggle-btn .icon-moon {
    display: block;
}

/* Buttons */
.btn {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.btn.primary {
    background-color: var(--primary);
    color: #ffffff;
}

.btn.primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .btn.primary:hover {
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.4);
}

.btn.secondary {
    background-color: var(--surface);
    color: var(--text-main);
    border: 2px solid var(--border);
}

.btn.secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.btn.outline {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
}

.btn.outline:hover {
    background-color: var(--surface-variant);
    color: var(--text-main);
}

.btn.success {
    background-color: var(--success);
    color: #ffffff;
}

.btn.success:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.btn-back {
    align-self: flex-start;
    margin-bottom: -0.5rem;
    padding: 0.5rem 1rem;
}

.full {
    width: 100%;
}

/* Form Controls */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
}

input[type="text"],
input[type="number"] {
    width: 100%;
    padding: 0.875rem;
    border-radius: 10px;
    border: 2px solid var(--border);
    background-color: var(--surface);
    color: var(--text-main);
    font-size: 1rem;
    outline: none;
    transition: var(--theme-transition), border-color 0.2s;
}

input:focus {
    border-color: var(--primary);
}

/* Range Input */
.range-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
}

input[type="range"] {
    flex: 1;
    accent-color: var(--primary);
    cursor: pointer;
}

.range-val {
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

/* Lobby */
.room-code {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--text-main);
    background-color: var(--surface-variant);
    padding: 1.5rem;
    border-radius: var(--radius);
    text-align: center;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    border: 2px dashed var(--border);
    margin: 1rem 0;
}

.player-list {
    list-style: none;
    max-height: 250px;
    overflow-y: auto;
}

.player-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

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

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--text-muted);
    transition: background-color 0.3s;
}

.status-dot.ready {
    background-color: var(--success);
    box-shadow: 0 0 8px var(--success);
}

/* Setup Layout */
.setup-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.setup-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

@media (min-width: 1024px) {
    .setup-layout {
        flex-direction: row-reverse;
        align-items: flex-start;
        justify-content: center;
    }

    .setup-sidebar {
        width: 320px;
    }
}

/* Bingo Grid */
.bingo-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Max width should match the desired aesthetic, but for mobile grid alignment 
       we often want the header to not be wider than the grid if visually connected.
       However, grid size varies (5x5 vs 10x10). 
    */
    max-width: 1100px;
    gap: 1rem;
    padding: 1rem;
    align-items: center;
    /* Center everything */
}

@media (min-width: 1024px) {
    .bingo-container {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
    }

    .game-header {
        flex-direction: column;
        width: 280px;
        gap: 1.5rem;
        position: sticky;
        top: 2rem;
    }

    .stat-box {
        width: 100%;
        padding: 2rem;
    }

    /* Desktop Vertical Gap for Last Item */
    .game-header .stat-box:last-child {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid var(--border);
        width: 100%;
        /* Reset Row Styles */
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--surface);
    padding: 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    transition: var(--theme-transition);
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

/* Base separation for last item (Tablet / Default Row) */
.stat-box:last-child {
    margin-left: 2rem;
    padding-left: 2rem;
    border-left: 1px solid var(--border);
}

.stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
}

.bingo-grid {
    display: grid;
    gap: 0.75rem;
    width: 100%;
    max-width: 650px;
    aspect-ratio: 1;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .bingo-grid {
        gap: 2px;
        width: 100%;
        max-width: 100vw;
        /* Strict max width */
        margin: 0 auto;
        /* Ensure centering */
        padding: 0 4px;
        /* Tiny padding from edges */
        align-content: center;
        justify-content: center;
        /* Center the grid items if they don't fill width */
    }

    .grid-cell,
    .grid-input {
        /* Mobile font scaling based on grid dimension */
        --dim: var(--grid-dim, 5);
        /* 
           Calculation: 
           (Screen Width - Gap Total) / Grid Size 
           Gap is 2px. For 10x10, gaps take ~18px.
           We'll be conservative with 92vw to leave margin.
        */
        font-size: clamp(0.5rem, calc(85vw / var(--dim) * 0.4), 1.2rem);
        border-width: 1px;
        border-radius: 3px;
        height: auto;
        /* Let aspect ratio handle height */
        aspect-ratio: 1;
        /* Force square */
        width: 100%;
        padding: 0;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Dense mode for 8x8+ on mobile */
    .grid-cell.dense,
    .grid-input.dense {
        border-width: 1px;
        box-shadow: none;
        border-radius: 2px;
    }

    .bingo-container {
        padding: 0;
        gap: 0.5rem;
        min-height: 100vh;
        justify-content: flex-start;
    }

    .game-header {
        background-color: #0f172a;
        /* Darker Navy/Black per image */
        padding: 1rem 0.5rem;
        /* Slightly taller */
        margin-bottom: 0.75rem;
        border-radius: 16px;
        /* slightly more rounded */
        border: 1px solid #1e293b;
        width: 100%;
        max-width: 100vw;
        gap: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.6);
        /* Even deeper shadow */
        z-index: 20;
        /* Ensure it stays on top */
        border: 1px solid rgba(255, 255, 255, 0.05);
        /* subtler border */
    }

    .stat-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        text-align: center;
        position: relative;
    }

    .stat-box:last-child {
        margin-left: 1.5rem;
        padding-left: 1rem;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
        max-width: 35%;
        /* Ensure it doesn't get too squished or huge */
    }

    .stat-label {
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: #64748b;
        /* Muted Slate */
        margin-bottom: 4px;
        text-transform: uppercase;
        opacity: 1;
        /* reset opacity */
    }

    .stat-value {
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1;
    }

    /* Force specific colors for the header context */
    #turn-display {
        color: #3b82f6 !important;
    }

    /* Blue */
    #last-called {
        color: #3b82f6 !important;
    }

    /* Blue dash */
}

.grid-cell,
.grid-input {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;

    /* Desktop/Default scaling */
    --dim: var(--grid-dim, 5);
    font-size: clamp(1rem, calc(30rem / var(--dim)), 2.5rem);

    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    padding: 0;
    aspect-ratio: 1;

    /* "Unpressed" Button Look */
    box-shadow: 0 4px 0 var(--border), 0 5px 10px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    margin-bottom: 4px;
}

/* Hover Effect */
.grid-cell:hover:not(.called) {
    transform: translateY(-6px);
    box-shadow: 0 6px 0 var(--border), 0 8px 15px rgba(0, 0, 0, 0.1);
    border-color: var(--primary);
}

/* Click / Active Effect (The "Press") */
.grid-cell:active:not(.called) {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 var(--border), 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Called / Selected State */
.grid-cell.called {
    background-color: var(--primary);
    color: #ffffff;
    border-color: var(--primary-hover);

    /* "Pressed" Look */
    transform: translateY(0);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.2);
    margin-bottom: 4px;
}

input.grid-input {
    background-color: var(--surface-variant);
    box-shadow: none;
    transform: none;
    margin-bottom: 0;
}

input.grid-input:focus {
    background-color: var(--surface);
    border-color: var(--primary);
    transform: scale(1.05);
    z-index: 10;
    box-shadow: var(--shadow);
}

/* Win Overlay */
#win-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.win-content {
    background-color: var(--surface);
    padding: 4rem;
    border-radius: 24px;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid var(--border);
    max-width: 90%;
    width: 500px;
    /* Slightly wider for multiple names */
    animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.win-title {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

#winner-name {
    word-wrap: break-word;
    max-height: 30vh;
    overflow-y: auto;
    line-height: 1.3;
    padding: 0 1rem;
}

@keyframes popIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Waiting List Tags */
.waiting-box {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.waiting-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.player-tag {
    background-color: var(--surface-variant);
    border: 1px solid var(--border);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-muted);
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Toast */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: var(--text-main);
    color: var(--bg);
    padding: 1rem 2rem;
    border-radius: 50px;
    box-shadow: var(--shadow);
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 2000;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Pulse Animation */
.pulse-text {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.hidden {
    display: none !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Winner Line Style */
.grid-cell.win-line {
    background-color: var(--success) !important;
    color: #ffffff !important;
    border-color: var(--success);
    text-decoration: line-through;
    /* "Overline" interpretation */
    text-decoration-thickness: 3px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2) !important;
    animation: pulseWin 2s infinite;
}

@keyframes pulseWin {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }

    100% {
        transform: scale(1);
    }
}