/* Import Fonts */
@font-face {
    font-family: 'Share Tech Mono';
    src: url('../fonts/ShareTechMono-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik';
    src: url('../fonts/Rubik-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Archivo Black';
    src: url('../fonts/ArchivoBlack-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Pip-Boy Theme - authentic refined */
body.pipboy {
    --bg-color: #1a2f1a;          /* Keep murky/olive green background */
    --text-color: #2ed62e;        /* Slightly less saturated bright green */
    --dim-text: #1a5c1a;          /* Keep dimmer green for secondary */
    --primary-color: #2ed62e;     /* Match main text */
    --secondary-color: #182818;   /* Darker green for block backgrounds */
    --box-bg-color: #182818;      /* Match STAT/INV sections */
    --font-family: 'Share Tech Mono', monospace;
    --glow-color: none;           /* Keep flat look */
    --button-bg: #182818;
    --button-border: #2ed62e;     /* Match text color */
    --card-bg: var(--bg-color);
    --border-color: #1f3f1f;      /* Dimmer borders for non-interactive elements */
}

/* Add very subtle scanlines */
body.pipboy .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        transparent 50%,
        rgba(0, 0, 0, 0.05) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.15;
    z-index: 1;
}

/* Non-interactive elements */
body.pipboy .value-box,
body.pipboy .bit-box,
body.pipboy .target-display,
body.pipboy .stat-box {
    text-shadow: none;
    box-shadow: none;
    border: 1px solid var(--border-color);
    background-color: var(--box-bg-color);
}

/* Interactive elements keep brighter border and text */
body.pipboy .button,
body.pipboy .bit-box {
    text-shadow: none;
    box-shadow: none;
    border: 1px solid var(--border-color);
    background-color: var(--box-bg-color);
    color: var(--text-color);
    transition: all 0.2s ease;  /* Smooth transition for hover */
}

body.pipboy .button:hover,
body.pipboy .bit-box:hover {
    background-color: var(--text-color);  /* Bright green background on hover */
    color: var(--box-bg-color);          /* Dark text on hover */
}

/* Text elements - no effects */
body.pipboy .message,
body.pipboy .current-value,
body.pipboy .controls {
    text-shadow: none;
    color: var(--dim-text);
    border: none;
}

/* Default theme - clean, no effects */
body.default {
    /* Core colors */
    --page-bg: #f8fafc;          /* Light gray page background */
    --bg-color: #ffffff;         /* White background */
    --text-color: #000000;       /* Black text */
    --primary-color: #0066cc;    /* Blue for primary elements */
    --secondary-color: #d0d0d0;  /* Border color from base theme */
    --accent-color: #009933;     /* Green accent */
    
    /* Component colors */
    --card-bg: #ffffff;          /* White card background */
    --box-bg-color: #f5f5f5;     /* Light grey from game-item */
    --border-color: #d0d0d0;     /* From base theme */
    --box-border-color: #d0d0d0; /* Matching border color */
    
    /* Button colors */
    --button-bg: #f5f5f5;        /* Light grey background */
    --button-text: #000000;      /* Black text */
    --button-hover-bg: #e5e5e5;  /* Slightly darker on hover */
    --button-hover-text: #000000;/* Keep black text on hover */
    --button-border: #d0d0d0;    /* Match border color */
    
    /* Effects */
    --font-family: 'Inter', sans-serif;
    --glow-color: none;          /* No glow effect */
    --flash-color: #666666;      /* Dark grey flash */
}

/* High Contrast theme - clean, no effects */
body.highcontrast {
    --page-bg: #000000;      /* Black page background */
    --bg-color: #000000;     /* Black card background */
    --text-color: #ffffff;   /* White text */
    --primary-color: #ffff00;
    --secondary-color: #ffffff;
    --accent-color: #ffff00;
    --font-family: Arial, sans-serif;
    --glow-color: none;      /* Remove glow */
    --card-bg: #000000;
    --flash-color: #ffff00;  /* Yellow for maximum contrast */
}

/* Ensure all text is white in high contrast theme */
body.highcontrast .value-box,
body.highcontrast .bit-box,
body.highcontrast .target-display,
body.highcontrast .stat-box,
body.highcontrast .button,
body.highcontrast .message,
body.highcontrast .current-value,
body.highcontrast .controls,
body.highcontrast .title,
body.highcontrast #currentValue,
body.highcontrast #message,
body.highcontrast div.controls {
    color: var(--text-color);
    text-shadow: none;  /* Remove any text shadows */
    box-shadow: none;   /* Remove any box shadows */
}

/* Duck Theme */
body.ducks {
    --page-bg: #87CEEB;          /* Sky blue background */
    --bg-color: #FFEB3B;         /* Bright yellow for main elements */
    --text-color: #4E342E;       /* Warm brown for text */
    --primary-color: #FF9800;    /* Orange for duck's bill */
    --secondary-color: #8D6E63;  /* Brown for accents */
    --accent-color: #4CAF50;     /* Green for grass/nature elements */
    --font-family: 'Inter', sans-serif;
    --glow-color: rgba(255, 152, 0, 0.2);  /* Subtle orange glow */
    --card-bg: #FFF9C4;          /* Light yellow for cards */
    --button-bg: #FF9800;        /* Orange buttons */
    --button-text: #4E342E;      /* Brown text on buttons */
    --button-hover-bg: #FFA726;  /* Lighter orange on hover */
    --button-hover-text: #3E2723;/* Darker brown on hover */
    --flash-color: #FF9800;      /* Orange flash */
    --box-border-color: #8D6E63; /* Brown borders */
}

/* Add specific styles for duck theme elements */
body.ducks .card {
    border: 2px solid var(--box-border-color);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

body.ducks .button {
    border: 2px solid var(--box-border-color);
    font-weight: 600;
}

body.ducks .value-box,
body.ducks .bit-box,
body.ducks .target-display,
body.ducks .stat-box {
    border: 2px solid var(--box-border-color);
    background-color: var(--bg-color);
}

/* Unicorn Theme - with better contrast */
body.unicorn {
    --page-bg: #87CEEB;          /* Keep sky blue background */
    --box-bg-color: #5FB6E5;     /* Blue for bit/value boxes */
    --stat-box-bg: #2F7CAD;      /* Much darker blue for stat boxes */
    --text-gradient: linear-gradient(
        90deg,
        #ff0099,   /* Hot pink */
        #00ffff,   /* Cyan */
        #ffff00,   /* Yellow */
        #ff0099    /* Back to pink */
    );
    --border-gradient: linear-gradient(
        45deg,
        #ff0000,   /* Pure red */
        #ffff00,   /* Pure yellow */
        #00ff00,   /* Pure green */
        #00ffff,   /* Pure cyan */
        #ff00ff,   /* Pure magenta */
        #ff0000    /* Back to red */
    );
    --button-bg: #2F7CAD;        /* Dark blue from stat boxes */
    --button-text: #ffffff;      /* White text for contrast */
    --button-hover-bg: #5FB6E5;  /* Lighter blue on hover */
    --button-hover-text: #ffffff; /* Keep white text on hover */
    --button-border: #ff0099;    /* Hot pink border from text gradient */
    --flash-color: #00ffff;      /* Cyan flash from text gradient */
    position: relative;
}

/* Add standardized text classes */
.stat-label {
    font-size: 0.875rem;
}

.stat-value {
    font-size: 1.875rem;
}

/* Update unicorn theme text selectors to catch all elements */
body.unicorn .value-box,
body.unicorn .bit-box,
body.unicorn .target-display,
body.unicorn .stat-box,
body.unicorn .button,
body.unicorn .message,
body.unicorn .current-value,
body.unicorn .controls,
body.unicorn .title,
body.unicorn .instructions,
body.unicorn .feedback,
body.unicorn .stat-label,     /* Added */
body.unicorn .stat-value,     /* Added */
body.unicorn .your-value,
body.unicorn .description,
body.unicorn .control-text,
body.unicorn h2,              /* Added for Game Over heading */
body.unicorn .close-button,    /* Added for overlay close button */
body.unicorn #currentValue,     /* Added for "Your Value: 0" */
body.unicorn #message,         /* Added the actual controls class */
body.unicorn .controls,    /* The class */
body.unicorn div.controls {  /* Added - explicit div selector */
    background: var(--text-gradient);
    background-size: 300% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: rainbow-text 6s linear infinite;
}

/* Fix flash color for unicorn theme */
body.unicorn .message[style*="background-color"] {
    background: var(--text-gradient);
    color: var(--box-bg-color) !important;
}

/* Bit/value boxes */
body.unicorn .bit-box,
body.unicorn .value-box {
    background-color: var(--box-bg-color);
    border: none;
}

/* Much darker boxes for stats */
body.unicorn .target-display,
body.unicorn .stat-box,
body.unicorn .button {
    background-color: var(--stat-box-bg);
    border: none;
}

/* Sparkle effect overlay */
body.unicorn::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #ffffff, rgba(255,255,255,0)),
        radial-gradient(2px 2px at 40px 70px, #ffffff, rgba(255,255,255,0)),
        radial-gradient(2px 2px at 50px 160px, #ffffff, rgba(255,255,255,0)),
        radial-gradient(2px 2px at 90px 40px, #ffffff, rgba(255,255,255,0)),
        radial-gradient(2px 2px at 130px 80px, #ffffff, rgba(255,255,255,0)),
        radial-gradient(2px 2px at 160px 120px, #ffffff, rgba(255,255,255,0));
    background-repeat: repeat;
    animation: sparkle 6s linear infinite;
    opacity: 0.5;
}

/* Sparkle animation */
@keyframes sparkle {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

/* Add text gradient animation */
@keyframes rainbow-text {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Keep existing rainbow-border animation */
@keyframes rainbow-border {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Text elements */
body.unicorn .message,
body.unicorn .current-value,
body.unicorn .controls {
    color: var(--text-color);
    border: none;
}

/* Remove CRT effect for default theme */
body.default .card::before {
    display: none;
}

/* Clean styling for Ice White */
body.default .card {
    background-color: var(--card-bg);
    border: none;  /* Remove outer border */
    box-shadow: none;
}

body.default .value-box,
body.default .bit-box,
body.default .target-display,
body.default .stat-box {
    background-color: var(--box-bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-shadow: none;
}

body.default .button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--button-border);
    transition: all 0.2s ease;
}

body.default .button:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
}

/* Remove all text shadows and glows */
body.default .title,
body.default .controls,
body.default .message,
body.default .value-box,
body.default .bit-box,
body.default .target-display,
body.default .stat-box,
body.default .button {
    text-shadow: none;
    box-shadow: none;
}

/* Remove scanlines and any other CRT effects */
body.default * {
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Header layout */
.header {
    text-align: center;
    margin-bottom: 0.5rem;  /* Reduced margin */
}

.user-banner {
    margin-bottom: 1rem;
}

.save-prompt {
    text-align: center;
    margin-bottom: 1rem;
    font-family: var(--font-family);
    color: var(--text-color);
}

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

/* Theme Selector Styling */
.theme-selector {
    position: relative;
    width: 200px;
    margin: 1rem auto;
    z-index: 1000;
}

.theme-dropdown-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--secondary-color);
    border-radius: 0.5rem;
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.theme-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background: var(--card-bg);
    border: 1px solid var(--secondary-color);
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    max-height: none;        /* Override any max-height */
    overflow: visible;       /* Override any overflow settings */
}

/* Remove hover-based display toggle */
.theme-selector:hover .theme-dropdown-content {
    display: none;
}

.theme-selector.active .theme-dropdown-content {
    display: block;
}

.theme-category {
    padding: 0.5rem;
}

.category-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--text-color);
    opacity: 0.7;
    padding: 0.25rem 0.5rem;
}

.theme-option {
    width: 100%;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    user-select: none;
    /* Completely remove radio button styling */
    list-style: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Ensure no pseudo-elements are adding radio buttons */
.theme-option::before,
.theme-option::after {
    content: none !important;
    display: none !important;
}

/* Force all buttons to have the same styling */
button.theme-option {
    all: unset; /* Reset all default styles */
    width: 100%;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    user-select: none;
}

.theme-option:hover {
    background: var(--secondary-color);
}

/* Add transition for smoother hover */
.theme-option {
    transition: background-color 0.2s ease;
}

.theme-preview {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--secondary-color);
}

/* Theme-specific preview colors */
.theme-preview.pipboy { background: #00ff00; }
.theme-preview.default { background: #ffffff; }
.theme-preview.github-dark { background: #0d1117; }
/* ... etc for other themes ... */

/* Separator between categories */
.theme-category:not(:last-child) {
    border-bottom: 1px solid var(--secondary-color);
    margin-bottom: 0.5rem;
}

/* Update title style */
.title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 2rem;
}

.theme-btn {
    padding: 8px 12px;
    border: 2px solid var(--text-color);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.theme-btn.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 5px var(--glow-color);
}

.theme-btn:hover {
    background-color: var(--primary-color);
    color: var(--bg-color);
}

/* Add all Binary Blast specific styles */
/* Game Layout */
.card {
    max-width: var(--card-max-width);
    margin: 0 auto;
    padding: 1.5rem;
    background-color: var(--card-bg);
    border: 1px solid var(--primary-color);
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}

/* Add scanlines only for Pip-Boy theme */
body.pipboy .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        transparent 50%,
        rgba(0, 0, 0, 0.05) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    opacity: 0.15;
    z-index: 1;
}

/* Game Components */
.binary-grid {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.binary-column {
    position: relative;
}

/* Base value box and bit box styling - explicitly rectangular */
.value-box {
    width: 3rem;          
    height: 2rem;         
    border: 1px solid var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;      
    color: var(--text-color);
    background-color: var(--bg-color);
    border-radius: 4px;
    margin-bottom: 0.8rem;  /* Increased from 0.5rem for more space */
}

.bit-box {
    width: 3rem;          /* Same width as value box */
    height: 4rem;         /* Double height for taller rectangle */
    border: 1px solid var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;    /* Slightly larger font for 0/1 */
    color: var(--text-color);
    background-color: var(--bg-color);
    border-radius: 4px;
    cursor: pointer;
}

/* Game UI Elements */
.button-container {
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.current-value {
    margin-bottom: 1.5rem;
    text-align: center;
}

.message {
    padding: 10px;
    margin: 10px 0;
    border-radius: 4px;
    text-align: center;
    min-height: 2rem;
    transition: background-color 0.2s ease;
    /* Force the space to always exist */
    display: block;
    width: 100%;
    /* Debug styles to verify dimensions */
    border: 1px solid transparent;
}

.button {
    padding: 0.5rem 1rem;
    background-color: var(--button-bg);
    color: var(--text-color);
    border: 1px solid var(--button-border);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.button:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
}

/* Stats and Display */
.game-stats {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.target-display {
    border: 2px solid var(--text-color);
    padding: 1rem;
    border-radius: 0.25rem;
    color: var(--text-color);
    width: 12rem;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    text-shadow: 0 0 8px var(--text-color);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 12rem;
}

.stat-box {
    border: 2px solid var(--text-color);
    padding: 1rem;
    border-radius: 0.25rem;
    color: var(--text-color);
    text-align: center;
    background-color: rgba(0, 0, 0, 0.8);
    text-shadow: 0 0 8px var(--text-color);
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
}

.controls {
    text-align: center;
    color: var(--text-color);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

/* Force font-family on all game elements */
.card,
.title,
.binary-grid,
.value-box,
.bit-box,
.current-value,
.button,
.game-stats,
.target-display,
.stat-box,
.message,
.controls {
    font-family: var(--font-family) !important;
}

/* Game List Styles */
.games-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 1rem; /* Spacing between items */
}

.game-item {
    margin-bottom: 1rem;
    background-color: var(--card-bg);
    border-radius: 8px;
    width: 100%;
    max-width: 600px; /* Limit width of game items */
}

.game-link {
    display: block;
    padding: 1rem;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-color);
    width: 100%;
    transition: background-color 0.3s ease;
}

.game-link:hover {
    background-color: var(--button-hover-bg);
}

.game-title {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.game-desc {
    color: var(--secondary-text-color, var(--text-color));
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.spec-tags {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.spec-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--text-color);
    border-radius: 0.25rem;
    color: var(--text-color);
    background: var(--bg-color);
}

/* Glow effect for Pip-Boy theme */
.glow-effect {
    text-shadow: 0 0 5px var(--glow-color);
}

/* Binary Blast-specific styles */
.binary-blast-container {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-family);
}

.binary-blast-button {
    background-color: var(--button-bg);
    border: 2px solid var(--button-border);
    color: var(--text-color);
    font-family: var(--font-family);
    transition: all 0.3s ease;
}

.binary-blast-button:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
}

/* Specification Filter */
.spec-filter {
    text-align: center;
    margin: 1rem 0;
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.spec-btn {
    padding: 0.5rem 1rem;
    border: 1px solid var(--text-color);
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    font-family: var(--font-family);
}

.spec-btn.active {
    background: var(--text-color);
    color: var(--bg-color);
}

/* Success Message */
.success-message {
    color: var(--text-color);
    text-align: center;
    padding: 1rem;
}

/* Specification tags */
.spec-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.spec-tag {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--text-color);
    border-radius: 0.25rem;
    color: var(--text-color);
    background: var(--bg-color);
}

/* Specific exam board colors */
body.pipboy .spec-tag {
    border-color: var(--text-color);
    color: var(--text-color);
}

body.default .spec-tag {
    border-color: #666;
    color: #666;
}

/* Ensure background color applies to full viewport */
html, body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    background-color: var(--page-bg);  /* New variable for page background */
}

/* Mario Theme */
body.mario {
    --bg-color: #e74c3c;          /* Mario red */
    --text-color: #ffffff;        /* White text */
    --primary-color: #f1c40f;     /* Coin gold */
    --secondary-color: #27ae60;   /* Pipe green */
    --accent-color: #3498db;      /* Sky blue */
    --font-family: 'Press Start 2P', 'Share Tech Mono', monospace;
    --glow-color: rgba(241, 196, 15, 0.3);
    --card-bg: #c0392b;           /* Darker red */
    --flash-color: #f1c40f;  /* Coin gold */
}

/* Dark Theme - professional, easy on the eyes */
body.dark {
    --page-bg: #121212;          /* Dark page background */
    --bg-color: #1e1e1e;         /* Slightly lighter card background */
    --text-color: #6b7280;       /* Much more muted gray for all text */
    --primary-color: #9ca3af;    /* Neutral gray */
    --secondary-color: #6b7280;  /* Darker gray */
    --accent-color: #d1d5db;     /* Light gray accent */
    --font-family: var(--font-family);
    --glow-color: none;
    --card-bg: #1e1e1e;          /* VS Code-style dark */
    --button-bg: #1e1e1e;
    --button-border: #9ca3af;
    --button-hover-bg: #9ca3af;
    --button-hover-text: #121212;
    --box-bg-color: #1e1e1e;     /* For consistency */
    --link-color: #6b7280;       /* Same muted gray for links */
    --flash-color: #6b7280;  /* Match text color */
}

/* Elements with visible borders and consistent coloring for Dark theme */
body.dark .value-box,
body.dark .bit-box,
body.dark .target-display,
body.dark .stat-box,
body.dark .button {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Soft gray for boxed elements */
    border: 1px solid #9ca3af;  /* Match border to text color */
    border-radius: 8px;  /* Rounded corners */
}

/* Elements without visible borders - using consistent color */
body.dark .message,
body.dark .current-value,
body.dark .controls,
body.dark .feedback {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Same soft gray as other elements */
    border: 1px solid transparent;  /* Transparent border to maintain spacing */
}

/* Just ensure the title uses the softer white */
body.dark .title {
    color: var(--text-color);    /* Use the softer white */
}

/* Remove effects and ensure consistent text color */
body.dark .value-box,
body.dark .bit-box,
body.dark .target-display,
body.dark .stat-box,
body.dark .button,
body.dark .game-link,
body.dark .save-prompt {
    text-shadow: none;
    box-shadow: none;
    color: #e2e2e2;              /* Consistent soft white */
}

/* Make ALL text elements use the muted color */
body.dark .title,
body.dark .game-link,
body.dark .spec-tag {
    color: #6b7280;              /* Consistent muted gray */
}

/* Slightly brighter for hover states */
body.dark .game-link:hover {
    color: #9ca3af;              /* Brighten slightly on hover */
}

/* Improve dark mode text readability */
body.dark .title,
body.dark .game-link,
body.dark .spec-tag,
body.dark .save-prompt {
    color: #6b7280;
    font-weight: 500;        /* Medium weight for better readability */
    letter-spacing: 0.01em;  /* Slightly increased spacing */
}

/* Color Blind Safe Theme */
body.colorblind {
    --page-bg: #ffffff;          /* White background */
    --bg-color: #f4f4f4;         /* Light gray background */
    --text-color: #2e2e2e;       /* Dark gray text */
    --primary-color: #0077bb;    /* Blue - distinguishable from all colors */
    --secondary-color: #ee7733;   /* Orange - contrasts well with blue */
    --accent-color: #009988;      /* Teal - distinct from both */
    --font-family: 'Inter', sans-serif;
    --glow-color: none;          /* No glow effects */
    --card-bg: var(--bg-color);
    --button-bg: var(--primary-color);
    --button-text: #ffffff;
    --button-hover-bg: #005599;  /* Darker blue */
    --button-hover-text: #ffffff;
    --flash-color: #0077bb;      /* Use blue for feedback */
}

/* Remove ALL shadows and effects */
body.colorblind .value-box,
body.colorblind .bit-box,
body.colorblind .target-display,
body.colorblind .stat-box,
body.colorblind .button,
body.colorblind .message,
body.colorblind .current-value,
body.colorblind .controls,
body.colorblind .title,
body.colorblind #currentValue,
body.colorblind #message,
body.colorblind div.controls {
    text-shadow: none !important;
    box-shadow: none !important;
    border: 2px solid var(--primary-color);
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Remove borders from specific elements */
body.colorblind .title,
body.colorblind .message,
body.colorblind .controls,
body.colorblind #message,
body.colorblind div.controls,
body.colorblind .current-value,
body.colorblind #currentValue {
    text-shadow: none !important;
    box-shadow: none !important;
    border: none;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Cyberpunk Theme - properly flat */
body.cyberpunk {
    --page-bg: #130b2c;           /* Rich purple background */
    --bg-color: #130b2c;          /* Match page background */
    --text-color: #00ffd9;        /* Cyan for main text */
    --dim-text: #005f87;          /* Dimmer cyan for secondary */
    --primary-color: #00ffd9;     /* Use cyan consistently */
    --secondary-color: #00ffd9;   /* Keep cyan for highlights */
    --box-bg-color: #1f1147;      /* Saturated purple for boxes */
    --font-family: 'Share Tech Mono', monospace;
    --border-color: #00ffd9;      /* Cyan borders */
    --button-bg: #1f1147;         /* Match box background */
    --button-text: #00ffd9;
    /* Add missing variables */
    --button-hover-bg: #00ffd9;   /* Cyan on hover - inverted from normal */
    --button-hover-text: #1f1147; /* Purple text on hover - inverted from normal */
    --button-border: #00ffd9;     /* Cyan border to match theme */
    --flash-color: #00ffd9;       /* Cyan flash effect */
}

/* Box styling - properly flat */
body.cyberpunk .value-box,
body.cyberpunk .bit-box,
body.cyberpunk .target-display,
body.cyberpunk .stat-box,
body.cyberpunk .button {
    text-shadow: none;
    box-shadow: none;
    border: 1px solid var(--border-color);
    background-color: var(--box-bg-color);
    color: var(--text-color);
    transition: all 0.2s ease;
}

/* Text elements - flat */
body.cyberpunk .message,
body.cyberpunk .current-value,
body.cyberpunk .controls {
    text-shadow: none;
    color: var(--text-color);
    border: none;
}

/* GitHub Dark Theme */
body.github-dark {
    --page-bg: #0d1117;          /* GitHub's dark background */
    --bg-color: #161b22;         /* Slightly lighter */
    --text-color: #e6edf3;       /* Lighter text for better contrast */
    --primary-color: #58a6ff;    /* GitHub's blue */
    --secondary-color: #30363d;  /* GitHub's border color */
    --accent-color: #238636;     /* GitHub's green */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --glow-color: none;
    --card-bg: var(--bg-color);
    --button-bg: #21262d;
    --button-border: rgba(240,246,252,0.1);
    --button-text: #e6edf3;      /* Lighter text for buttons */
    --flash-color: #238636;      /* GitHub's green */
}

/* Elements with visible borders and consistent coloring for GitHub Dark theme */
body.github-dark .value-box,
body.github-dark .bit-box,
body.github-dark .target-display,
body.github-dark .stat-box,
body.github-dark .button {
    text-shadow: none;
    box-shadow: none;
    color: #8b949e;  /* Soft gray for all text elements */
    border: 1px solid #8b949e;  /* Consistent border style */
    border-radius: 8px;  /* Rounded corners like countdown */
}

/* Elements without visible borders */
body.github-dark .message,
body.github-dark .current-value,
body.github-dark .controls {
    text-shadow: none;
    box-shadow: none;
    color: #8b949e;
    border: 1px solid transparent;  /* Transparent border to maintain spacing */
}

/* VS Code Dark Theme */
body.vscode-dark {
    --page-bg: #1e1e1e;          /* VS Code background */
    --bg-color: #252526;         /* Slightly lighter */
    --text-color: #d4d4d4;       /* VS Code text */
    --primary-color: #007acc;    /* VS Code blue */
    --secondary-color: #404040;  /* VS Code inactive */
    --accent-color: #6a9955;     /* VS Code green */
    --font-family: 'Consolas', 'Courier New', monospace;
    --glow-color: none;
    --card-bg: var(--bg-color);
    --button-bg: #37373d;
    --button-text: #ffffff;
    --flash-color: #6a9955;  /* VS Code green */
}

/* Elements with visible borders and consistent coloring for VS Code Dark theme */
body.vscode-dark .value-box,
body.vscode-dark .bit-box,
body.vscode-dark .target-display,
body.vscode-dark .stat-box,
body.vscode-dark .button {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Soft gray instead of bright white */
    border: 1px solid #9ca3af;  /* Match border to text color */
    border-radius: 8px;  /* Rounded corners */
}

/* Elements without visible borders */
body.vscode-dark .message,
body.vscode-dark .current-value,
body.vscode-dark .controls {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Same soft gray */
    border: 1px solid transparent;  /* Transparent border to maintain spacing */
}

/* Ensure specific text elements are visible in VS Code Dark theme */
body.vscode-dark .current-value,
body.vscode-dark .message {
    color: #d4d4d4;  /* Force light text color for these elements */
}

/* Material Dark Theme */
body.material-dark {
    --page-bg: #121212;          /* Material dark background */
    --bg-color: #1e1e1e;         /* Surface color */
    --text-color: rgba(255,255,255,0.87); /* Primary text */
    --primary-color: #bb86fc;    /* Material primary */
    --secondary-color: #03dac6;  /* Material secondary */
    --accent-color: #cf6679;     /* Material error */
    --font-family: 'Roboto', sans-serif;
    --glow-color: none;
    --card-bg: #2d2d2d;          /* Elevated surface */
    --button-bg: var(--primary-color);
    --button-text: #000000;
    --flash-color: #bb86fc;  /* Material primary */
}

/* Elements with visible borders and consistent coloring for Material Dark theme */
body.material-dark .value-box,
body.material-dark .bit-box,
body.material-dark .target-display,
body.material-dark .stat-box,
body.material-dark .button {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Soft gray for display elements */
    border: 1px solid #9ca3af;  /* Match border to text color */
    border-radius: 8px;  /* Rounded corners */
}

/* Elements without visible borders */
body.material-dark .message,
body.material-dark .current-value,
body.material-dark .controls {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Same soft gray */
    border: 1px solid transparent;  /* Transparent border to maintain spacing */
}

/* Specific button styling for Material Dark */
body.material-dark .button {
    color: #1a1a1a;  /* Dark text for buttons */
}

/* Ensure specific text elements are visible in Material Dark theme */
body.material-dark .current-value,
body.material-dark .message {
    color: rgba(255,255,255,0.87);  /* Force light text color for these elements */
}

/* Solarized Dark Theme */
body.solarized {
    --page-bg: #002b36;          /* Base03 */
    --bg-color: #073642;         /* Base02 */
    --text-color: #839496;       /* Base0 */
    --primary-color: #2aa198;    /* Cyan */
    --secondary-color: #859900;  /* Green */
    --accent-color: #cb4b16;     /* Orange */
    --font-family: 'Source Code Pro', monospace;
    --glow-color: none;
    --card-bg: var(--bg-color);
    --button-bg: var(--bg-color);
    --button-text: var(--primary-color);
    --button-border: var(--primary-color);
    --flash-color: #2aa198;  /* Solarized cyan */
}

/* Elements with visible borders and consistent coloring for Solarized theme */
body.solarized .value-box,
body.solarized .bit-box,
body.solarized .target-display,
body.solarized .stat-box,
body.solarized .button {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Soft gray for boxed elements */
    border: 1px solid #9ca3af;  /* Match border to text color */
    border-radius: 8px;  /* Rounded corners */
}

/* Elements without visible borders - using consistent color */
body.solarized .message,
body.solarized .current-value,
body.solarized .controls,
body.solarized .feedback {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Same soft gray as other elements */
    border: 1px solid transparent;  /* Transparent border to maintain spacing */
}

/* Common hover effects for all dark themes */
body.github-dark .button:hover,
body.vscode-dark .button:hover,
body.material-dark .button:hover,
body.solarized .button:hover,
body.cyberpunk .button:hover {
    filter: brightness(1.2);
}

/* Special effects for Cyberpunk theme */
body.cyberpunk .title,
body.cyberpunk .button {
    text-shadow: 0 0 10px var(--primary-color);
}

body.cyberpunk .card {
    border: 1px solid var(--primary-color);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
}

/* Title colors for each theme */

/* Light Theme */
body.default .title {
    color: #000000;    /* Black on light */
}

/* Dark Themes */
body.dark .title {
    color: #6b7280;    /* Muted gray */
    font-weight: 500;
}

body.github-dark .title {
    color: #c9d1d9;    /* GitHub text color */
}

body.vscode-dark .title {
    color: #d4d4d4;    /* VS Code text color */
}

body.material-dark .title {
    color: rgba(255,255,255,0.87);  /* Material Design text */
}

body.solarized .title {
    color: #839496;    /* Solarized base0 */
}

/* Special Themes */
body.pipboy .title {
    color: #00ff00;    /* Pip-Boy green */
}

body.cyberpunk .title {
    color: #00ffff;    /* Cyan */
    text-shadow: 0 0 10px #00ffff;  /* Cyberpunk glow */
}

body.ducks .title {
    color: #212121;    /* Dark on duck yellow */
}

body.unicorn .title {
    color: #7B2CBF;    /* Purple */
}

/* Accessibility Themes */
body.highcontrast .title {
    color: #ffffff;    /* Pure white for High Contrast */
}

body.colorblind .title {
    color: #2e2e2e;    /* Dark on light */
}

/* Main Layout */
.main-layout {
    display: flex;
    gap: 2rem;
    max-width: 1200px; /* Add max-width to center content */
    margin: 0 auto; /* Center the layout */
    justify-content: center; /* Center the columns */
}

.games-section {
    flex: 2;
    max-width: 800px;
}

.scores-awards-section {
    flex: 1;
    max-width: 300px;
}

.scores-section, .awards-section {
    border: 2px solid var(--secondary-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background-color: var(--card-bg);
}

.score-filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.filter-btn {
    flex: 1;
    padding: 0.5rem;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.filter-btn:hover {
    background-color: var(--button-hover-bg);
}

.filter-btn.active {
    background-color: var(--button-active-bg);
}

.score-tables {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem; /* Add spacing between tables */
}

.score-table {
    padding: 1rem;
    border: 1px solid var(--secondary-color);
    border-radius: 0.5rem;
    background: var(--card-bg);
    color: var(--text-color);
}

.score-table h3 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 1rem;
    color: var(--text-color);
}

.score-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--secondary-color);
}

.score-entry:last-child {
    border-bottom: none;
}

.player, .score, .game {
    font-size: 1rem;
    color: var(--text-color);
}

.player {
    font-weight: 500;
}

.score {
    font-weight: 600;
    color: var(--primary-color);
}

.game {
    font-style: italic;
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-layout {
        flex-direction: column;
    }
    
    .scores-section {
        position: static;
    }
} 

.selector-container {
    display: flex;
    gap: 1rem;
    justify-content: center;  /* Center the items */
    align-items: center;
    margin: 1rem auto;
    width: fit-content;      /* Contain the width to the content */
    max-width: 100%;
    padding: 0 1rem;         /* Add some padding on the sides */
}

.theme-selector,
.exam-board-selector {
    position: relative;
    width: 200px;           /* Set fixed width for both selectors */
    flex-shrink: 0;         /* Prevent selectors from shrinking */
}

.theme-dropdown-btn,
.exam-board-dropdown-btn {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: var(--button-bg);
    color: var(--text-color);
    border: 1px solid var(--button-border);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exam-board-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    background-color: #4B0082 !important;  /* Force button-purple background */
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-height: none;
    overflow: visible;
    z-index: 1001;
}

/* Also remove scrollbars from any child elements */
.exam-board-dropdown-content * {
    overflow: visible;
    
}

.exam-board-selector.active .exam-board-dropdown-content {
    display: block;
}

.exam-board-option {
    width: 100%;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
    background: none;
    color: var(--text-color);
    cursor: pointer;
    text-align: left;
    user-select: none;
}

.exam-board-option:hover {
    background: var(--secondary-color);
    cursor: pointer;
}

.awards-section {
    margin-top: 2rem;
    padding: 1rem;
    background-color: var(--card-bg);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.awards-section h3 {
    margin-bottom: 1rem;
    color: var(--text-color);
}

.award-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

.award-icon {
    font-size: 1.5rem;
    margin-right: 0.5rem;
}

.award-name {
    font-weight: bold;
    margin-right: 0.5rem;
    color: var(--text-color);
}

.award-description {
    color: var(--secondary-color);
}

.feed-section {
    max-width: 800px;
    margin: 2rem auto; /* Center the feed section */
    padding: 1rem;
    background-color: var(--card-bg);
    border-radius: 8px;
    border: 2px solid var(--secondary-color);
}

.feed-section h3 {
    margin-bottom: 1rem;
    color: var(--text-color);
}

.exam-board-dropdown-content .category-label {
    padding: 0.5rem 1rem;
    color: var(--text-color);
    font-weight: bold;
    border-bottom: 1px solid var(--secondary-color);
}

/* Title styling */
.title {
    text-align: center;
    font-size: 1.5rem;
    margin: 1rem 0;
    color: var(--text-color);
}

/* Form group styling */
.form-group {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1rem;
}

/* Save prompt styling */
.save-prompt {
    text-align: center;
    color: var(--text-color);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* Score entry styling */
.score-entry {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem;
    border-bottom: 1px solid var(--secondary-color);
}

.score-entry:last-child {
    border-bottom: none;
}

/* Section headings */
.scores-section h3,
.awards-section h3,
.feed-section h3 {
    color: var(--text-color);
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

/* Award items */
.award-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--secondary-color);
}

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

/* Input styling */
input[type="email"] {
    padding: 0.5rem;
    border: 1px solid var(--secondary-color);
    border-radius: 4px;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Button styling */
.button {
    padding: 0.5rem 1rem;
    background-color: var(--button-bg);
    color: var(--button-text);
    border: 1px solid var(--button-border);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: var(--button-hover-bg);
}

/* Show dropdown content when parent has active class */
.theme-selector.active .theme-dropdown-content,
.exam-board-selector.active .exam-board-dropdown-content {
    display: block;
}

.newsletter-signup {
    display: flex;
    align-items: center;
    justify-content: center;  /* Center horizontally */
    gap: 0.5rem;
    margin: 0.5rem auto;     /* Center with auto margins */
    color: var(--text-color);
    font-size: 0.9rem;
}

.newsletter-checkbox {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.newsletter-signup label {
    cursor: pointer;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);  /* Changed from --card-background to --bg-color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.overlay-content {
    background-color: var(--card-bg);
    padding: 3rem;
    border-radius: 15px;
    position: relative;
    min-width: 400px;
    text-align: center;
    border: 1px solid var(--secondary-color);
}

.close-button {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.7;
    transition: opacity 0.2s;
}

.close-button:hover {
    opacity: 1;
}

.game-summary {
    display: flex;
    flex-direction: column;
    align-items: center;  /* Center children horizontally */
    gap: 3rem;  /* More space between sections */
}

.game-summary h2 {
    color: var(--text-color);
    font-size: 2rem;
    margin-bottom: 1.5rem;
}

.game-summary p {
    color: var(--text-color);
    margin: 1rem 0;
    font-size: 1.2rem;
    line-height: 1.5;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;  /* Increased gap between boxes */
    width: 100%;  /* Take full width of container */
    max-width: 500px;  /* Limit maximum width */
    margin: 0 auto;  /* Center the grid */
}

.target-display {
    margin-bottom: 2rem;  /* More space after final score */
    width: 100%;  /* Full width */
    max-width: 500px;  /* Match stats-grid width */
}

.stat-box {
    background-color: var(--card-bg);
    border: 1px solid var(--secondary-color);
    padding: 1.5rem;  /* More padding */
    border-radius: 8px;
}

/* Dark Theme - ensure instruction text is visible */
body.dark .message,
body.dark .current-value {
    color: #9ca3af;  /* Soft gray that's readable on dark background */
}

/* Elements with visible borders and consistent coloring for VS Code Dark theme */
body.vscode-dark .value-box,
body.vscode-dark .bit-box,
body.vscode-dark .target-display,
body.vscode-dark .stat-box,
body.vscode-dark .button {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Softer gray instead of bright white */
    border: 1px solid #9ca3af;  /* Match border to text color */
    border-radius: 8px;  /* Rounded corners */
}

/* Elements without visible borders */
body.vscode-dark .message,
body.vscode-dark .current-value,
body.vscode-dark .controls {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Same soft gray */
    border: 1px solid transparent;  /* Transparent border to maintain spacing */
}

/* Elements with visible borders and consistent coloring for Material Dark theme */
body.material-dark .value-box,
body.material-dark .bit-box,
body.material-dark .target-display,
body.material-dark .stat-box,
body.material-dark .button {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Soft gray for display elements */
    border: 1px solid #9ca3af;  /* Match border to text color */
    border-radius: 8px;  /* Rounded corners */
}

/* Elements without visible borders */
body.material-dark .message,
body.material-dark .current-value,
body.material-dark .controls {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Same soft gray */
    border: 1px solid transparent;  /* Transparent border to maintain spacing */
}

/* Specific button styling for Material Dark */
body.material-dark .button {
    color: #1a1a1a;  /* Dark text for buttons */
}

/* Elements with visible borders and consistent coloring for Solarized theme */
body.solarized .value-box,
body.solarized .bit-box,
body.solarized .target-display,
body.solarized .stat-box,
body.solarized .button {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Soft gray for boxed elements */
    border: 1px solid #9ca3af;  /* Match border to text color */
    border-radius: 8px;  /* Rounded corners */
}

/* Elements without visible borders - using consistent color */
body.solarized .message,
body.solarized .current-value,
body.solarized .controls,
body.solarized .feedback {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Same soft gray as other elements */
    border: 1px solid transparent;  /* Transparent border to maintain spacing */
}

/* Elements with visible borders and consistent coloring for Dark theme */
body.dark .value-box,
body.dark .bit-box,
body.dark .target-display,
body.dark .stat-box,
body.dark .button {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Soft gray for boxed elements */
    border: 1px solid #9ca3af;  /* Match border to text color */
    border-radius: 8px;  /* Rounded corners */
}

/* Elements without visible borders - using consistent color */
body.dark .message,
body.dark .current-value,
body.dark .controls,
body.dark .feedback {
    text-shadow: none;
    box-shadow: none;
    color: #9ca3af;  /* Same soft gray as other elements */
    border: 1px solid transparent;  /* Transparent border to maintain spacing */
}

/* Add subtle shimmer to boxes */
body.unicorn .value-box,
body.unicorn .bit-box,
body.unicorn .target-display,
body.unicorn .stat-box,
body.unicorn .button {
    backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

/* Binary Fun Theme - Fixed place values and circle styling */
body.binary-fun {
    --page-bg: #9B5523;
    --header-color: #00F5E9;
    --box-blue: #2828FF;
    --circle-red: #E60000;
    --text-white: #FFFFFF;
    --button-purple: #4B0082;
    --stat-yellow: #FFD700;
    /* Add missing standard variables */
    --button-bg: var(--button-purple);      /* Use existing purple */
    --button-text: var(--text-white);       /* White text for contrast */
    --button-hover-bg: #6B2092;             /* Lighter purple on hover */
    --button-hover-text: var(--text-white); /* Keep white text on hover */
    --button-border: var(--box-blue);       /* Blue border */
    --flash-color: var(--header-color);     /* Use cyan for flash effect */
}

/* Header */
body.binary-fun .title,
body.binary-fun .card .title {  /* Added more specific selector */
    background-color: var(--header-color);
    color: #000000;
    padding: 1rem;
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    font-size: 1.5rem;
    letter-spacing: 6px;  /* Reduced from 12px since Archivo Black is naturally wider */
    text-transform: uppercase;
    font-family: 'Archivo Black', sans-serif !important; /* Added !important for testing */
    border: 2px solid red; /* Test border to verify CSS is being applied */
}

/* Binary grid */
body.binary-fun .binary-grid {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding-top: 2rem;
}

/* Binary boxes with place values */
body.binary-fun .bit-box {
    background-color: var(--box-blue);
    border: 2px solid var(--text-white);
    color: var(--text-white);
    height: 120px;
    width: 80px;
    font-size: 2rem;
    margin-top: 1.5rem;
}

/* Place value circles */
body.binary-fun .bit-box::before {
    display: none;
}

/* Target display */
body.binary-fun .target-display {
    background-color: rgba(0, 0, 0, 0.7);
    color: var(--text-white);
    padding: 1rem;
    margin: 2rem 0;
    text-align: center;
}

/* Stat boxes */
body.binary-fun .stat-box {
    background-color: var(--stat-yellow);
    border: 2px solid var(--box-blue);
    color: #000000;
    padding: 1rem;
    text-align: center;
    margin: 1rem;
}

/* Buttons */
body.binary-fun .button {
    background-color: var(--button-purple);
    color: var(--text-white);
    border: none;
    padding: 0.75rem 1.5rem;
    text-transform: uppercase;
    margin: 1rem;
}

/* Remove effects */
body.binary-fun::before {
    display: none;
}

body.binary-fun .card {
    border: none;
    box-shadow: none;
}

/* Commodore 64 Theme */
body.commodore64 {
    --page-bg: #4040e0;          /* Classic C64 blue */
    --bg-color: #4040e0;
    --text-color: #a0a0ff;       /* Light blue text */
    --primary-color: #ffffff;     /* White for emphasis */
    --secondary-color: #8080ff;   /* Mid blue for borders */
    --accent-color: #c0c0ff;      /* Lighter blue for accents */
    --font-family: 'Share Tech Mono', monospace;
    --card-bg: #4040e0;
    --button-bg: #6060ff;
    --button-text: #ffffff;
    --button-hover-bg: #8080ff;
    --flash-color: #ffffff;
    font-smooth: never;          /* Prevent font smoothing */
    -webkit-font-smoothing: none;
}

/* C64 specific styling with larger, crisp text */
body.commodore64 .title {
    font-size: 2rem;
    letter-spacing: 1px;
    text-shadow: none;
}

body.commodore64 .current-value,  /* Added styling for Your Value display */
body.commodore64 .message {       /* Added styling for Not quite right message */
    font-size: 1.8rem;
    color: var(--text-color);
    text-shadow: none;
    text-align: center;
    margin: 1rem 0;
}

body.commodore64 .stat-box,
body.commodore64 .target-display,
body.commodore64 .bit-box,
body.commodore64 .value-box {
    font-size: 1.8rem;
    border: 1px solid var(--text-color);
    box-shadow: none;
    background-color: #000033;
}

body.commodore64 .controls {
    font-size: 1.4rem;
    line-height: 1.4;
}

/* Apple II Theme */
body.apple2 {
    --page-bg: #000000;
    --bg-color: #000000;
    --text-color: #33ff33;
    --primary-color: #33ff33;
    --secondary-color: #226622;
    --accent-color: #44aa44;
    --font-family: 'Share Tech Mono', monospace;
    --card-bg: #000000;
    --button-bg: #226622;
    --button-text: #33ff33;
    --button-hover-bg: #338833;
    --flash-color: #33ff33;
}

/* Common styles for all retro themes */
body.binary-fun .card,
body.commodore64 .card,
body.apple2 .card {
    border: 2px solid var(--text-color);
    box-shadow: 0 0 20px rgba(var(--text-color), 0.2);
}

/* CRT screen effect for retro themes */
body.binary-fun::before,
body.commodore64::before,
body.apple2::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        rgba(18, 16, 16, 0) 50%,
        rgba(0, 0, 0, 0.25) 50%
    );
    background-size: 100% 4px;
    pointer-events: none;
    z-index: 1000;
}

/* Retro theme title styles */
body.binary-fun .title,
body.commodore64 .title,
body.apple2 .title {
    text-shadow: 0 0 10px var(--text-color);
    letter-spacing: 2px;
}

/* Place values - in red circles with white text */
.value-box {
    color: var(--text-white);  /* White text */
    background: var(--circle-red);  /* Red circle background */
    border-radius: 50%;  /* Make it circular */
    border: 2px solid var(--text-white);  /* White border */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

/* Remove empty red circles */
.binary-column .value-box:empty {
    display: none;
}

/* Update stat boxes styling */
body.binary-fun .stat-box,
body.binary-fun .target-display {
    background-color: #000000;
    border: 2px solid var(--box-blue);
    color: #33ff33;  /* Digital green */
    padding: 1rem;
    text-align: center;
    margin: 1rem;
    font-family: 'Share Tech Mono', monospace;
}

/* Style game messages and controls */
body.binary-fun .current-value,
body.binary-fun .message,
body.binary-fun .controls {
    color: #ffffff;  /* White text */
    text-align: center;
    font-family: 'Share Tech Mono', monospace;
    margin: 1rem 0;
}

/* Update all game text elements */
body.binary-fun .title,
body.binary-fun .target-display,
body.binary-fun .controls,
body.binary-fun .message,
body.binary-fun .stat-box,
body.binary-fun .button,
body.binary-fun .game-stats,
body.binary-fun h2 {
    font-family: 'Archivo Black', sans-serif !important;
}

/* Keep monospace font for numbers */
body.binary-fun .bit-box,
body.binary-fun .value-box,
body.binary-fun #timer,
body.binary-fun #score,
body.binary-fun #highScore,
body.binary-fun #globalHighScore,
body.binary-fun #targetNumber,
body.binary-fun #currentValue {
    font-family: 'Share Tech Mono', monospace !important;
}

/* Adjust title specific styling */
body.binary-fun .title {
    font-size: 1.5rem;
    letter-spacing: 6px;  /* Reduced from 12px since Archivo Black is naturally wider */
    text-transform: uppercase;
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    padding: 1rem;
    background-color: var(--header-color);
    color: #000000;
}

/* Style the current value display */
body.binary-fun .current-value {
    font-family: 'Share Tech Mono', monospace !important;
    color: #ffffff;  /* White text like the controls */
    font-size: 1.5rem;
    text-align: center;
    margin: 1rem 0;
}

/* Base value box styling - explicitly rectangular */
.value-box {
    width: 3rem;          /* Keep original width */
    height: 2rem;         /* Keep original height */
    border: 1px solid var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;      /* Keep original font size */
    color: var(--text-color);
    background-color: var(--bg-color);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.bit-box {
    width: 3rem;          /* Same width as value box */
    height: 4rem;         /* Double height for taller rectangle */
    border: 1px solid var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;    /* Slightly larger font for 0/1 */
    color: var(--text-color);
    background-color: var(--bg-color);
    border-radius: 4px;
    cursor: pointer;
}

/* Binary Fun theme specific overrides */
body.binary-fun .bit-box {
    background-color: var(--box-blue);
    border: 2px solid var(--text-white);
    color: var(--text-white);
    height: 120px;
    width: 80px;
    font-size: 2rem;
    margin-top: 1.5rem;
}

body.binary-fun .value-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--circle-red);
    color: var(--text-white);
    border: 2px solid var(--text-white);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

/* Inside the existing binary-fun theme section */
body.binary-fun .binary-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0.25rem;
    position: relative;  /* For circle positioning */
}

body.binary-fun .value-box {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: var(--circle-red);
    color: var(--text-white);
    border: 2px solid var(--text-white);
    position: absolute;
    top: 0;  /* Changed from -1rem to 0 to overlap more */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

body.binary-fun .bit-box {
    background-color: var(--box-blue);
    border: 2px solid var(--text-white);
    color: var(--text-white);
    height: 120px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-top: 1.5rem;  /* Space for the overlapping circle */
}

/* Force background color for Binary Fun dropdowns */
body.binary-fun .exam-board-dropdown-content,
body.binary-fun .theme-dropdown-content {
    background-color: #4B0082 !important;  /* Force button-purple background */
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: 0.5rem;
    padding: 0.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    max-height: none;
    overflow: visible;
    z-index: 1001;
}

.byte-display {
    display: none;  /* Hide by default */
    gap: 4px;
    justify-content: center;
}

.binary-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.value-box {
    margin-bottom: 0;  /* Remove margin since we're using gap */
    width: 40px;
    height: 40px;
}

.bit-box {
    width: 40px;
    height: 40px;
}

/* Game layout and components */
.nibble-container {
    display: flex;
    gap: 4px;
    margin: 0 8px;
}

.binary-grid {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.byte-values,
.byte-display {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 4px 0;
    flex-direction: row;
}

.decimal-input {
    margin: 16px 0;
    text-align: center;
}

.decimal-input input {
    padding: 8px;
    font-size: 1rem;
    width: 100px;
    margin-right: 8px;
}

/* Hex Blast specific styles */
.hex-blast .target-display {
    text-align: center;
    margin: 40px auto;
    max-width: 500px;
    padding: 20px;
    border: 1px solid var(--secondary-color);
    border-radius: 8px;
}

.hex-blast .target-display div:first-child {
    font-size: 0.875rem;
    margin-bottom: 10px;
}

.hex-blast .target-display div:last-child {
    font-size: 2.5rem;
    font-weight: 500;
}

.hex-blast .message {
    text-align: center;
    margin: 15px 0;
    font-size: 1.125rem;
}

.hex-blast .instruction {
    text-align: center;
    margin: 20px 0;
    font-size: 1.125rem;
}

.hex-blast .value-box,
.hex-blast .bit-box {
    width: 40px;
    height: 40px;
    border: 1px solid var(--secondary-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Share Tech Mono', monospace;
}

.byte-container {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 1rem 0;
}

.byte-display {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.binary-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
} 

/* Pip-Boy theme */
body.pipboy .bit-box {
    height: 6rem;  /* Added height */
    width: 3rem;   /* Added width */
}

/* Default theme */
body.default .bit-box {
    height: 6rem;  /* Added height */
    width: 3rem;   /* Added width */
}

/* GitHub Dark theme */
body.github-dark .bit-box {
    height: 6rem;  /* Added height */
    width: 3rem;   /* Added width */
}

/* Pip-Boy theme */
body.pipboy .value-box {
    margin-bottom: 0.8rem;
}

/* Default theme */
body.default .value-box {
    margin-bottom: 0.8rem;
}

/* GitHub Dark theme */
body.github-dark .value-box {
    margin-bottom: 0.8rem;
}

/* High Contrast theme */
body.highcontrast .value-box {
    margin-bottom: 0.8rem;
}

/* Unicorn theme */
body.unicorn .value-box {
    margin-bottom: 0.8rem;
}

/* Dark theme */
body.dark .value-box {
    margin-bottom: 0.8rem;
}

/* VS Code Dark theme */
body.vscode-dark .value-box {
    margin-bottom: 0.8rem;
}

/* Material Dark theme */
body.material-dark .value-box {
    margin-bottom: 0.8rem;
}

/* Solarized theme */
body.solarized .value-box {
    margin-bottom: 0.8rem;
}

/* Cyberpunk theme */
body.cyberpunk .value-box {
    margin-bottom: 0.8rem;
}

/* Colorblind theme */
body.colorblind .value-box {
    margin-bottom: 0.8rem;
}

/* High Contrast theme */
body.highcontrast .bit-box {
    height: 6rem;
    width: 3rem;
}

/* Unicorn theme */
body.unicorn .bit-box {
    height: 6rem;
    width: 3rem;
}

/* Dark theme */
body.dark .bit-box {
    height: 6rem;
    width: 3rem;
}

/* VS Code Dark theme */
body.vscode-dark .bit-box {
    height: 6rem;
    width: 3rem;
}

/* Material Dark theme */
body.material-dark .bit-box {
    height: 6rem;
    width: 3rem;
}

/* Solarized theme */
body.solarized .bit-box {
    height: 6rem;
    width: 3rem;
}

/* Cyberpunk theme */
body.cyberpunk .bit-box {
    height: 6rem;
    width: 3rem;
}

/* Colorblind theme */
body.colorblind .bit-box {
    height: 6rem;
    width: 3rem;
}

.online-users-section {
    background: var(--bg-color);
    border: 1px solid var(--secondary-color);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.online-users-section h3 {
    margin-bottom: 1rem;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 500;
}

.online-users-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.online-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
}

.online-indicator {
    width: 6px;
    height: 6px;
    background-color: #4CAF50;
    border-radius: 50%;
    display: inline-block;
}

.username {
    color: var(--text-color);
    font-size: 0.875rem;
    opacity: 0.9;
}

/* Theme-specific colors */
body.pipboy .username { color: #00ff00; }
body.dark .username { color: #9ca3af; }
body.github-dark .username { color: #c9d1d9; }
body.vscode-dark .username { color: #d4d4d4; }
body.material-dark .username { color: rgba(255,255,255,0.87); }
body.solarized .username { color: #839496; }
body.cyberpunk .username { color: #00ffd9; }
body.ducks .username { color: #4E342E; }
body.unicorn .username {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
body.highcontrast .username { color: #ffffff; }
body.colorblind .username { color: #2e2e2e; }

.score-tables {
    margin: 1.5rem 0;
}

.score-table h3 {
    margin-bottom: 1rem;
    color: var(--text-color);
    font-size: 1.1rem;
    font-weight: 500;
}

.score-entry {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.score-entry:last-child {
    border-bottom: none;
}

.score-entry .player {
    flex: 1;
    color: var(--text-color);
}

.score-entry .score {
    color: var(--accent-color);
    font-weight: 500;
    margin: 0 1rem;
}

.score-entry .game {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Default theme (Ice White) specific styling for index page */
body.default .game-item {
    background-color: #f5f5f5;  /* Subtle grey for game boxes */
    border-radius: 8px;
}

body.default .scores-awards-section,
body.default .feed-section {
    background-color: #f5f5f5;  /* Same subtle grey for scores/feed sections */
    border-radius: 8px;
}

/* Base theme - game items and score boxes outline */
.game-item,
.scores-awards-section > div,
.my-updates,
.my-high-scores {
    border: 1px solid #d0d0d0;  /* Same grey outline */
    border-radius: 8px;         /* Maintain existing border radius */
}

/* Theme-specific styles will override these as needed */