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

/* Fix for iOS Safari text size adjustment */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

:root {
    /* Light Theme (Default) */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --text-primary: #333333;
    --text-secondary: #666666;
    --accent: #4a90e2;
    --accent-hover: #357abd;
    --border: #dddddd;
    --cell-bg: #ffffff;
    --cell-fixed: #e8e8e8;
    --cell-selected: #b8d4ff;
    --cell-error: #ffcccc;
    --cell-hint: #ccffcc;
    --shadow: rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --accent: #2d2d2d;
    --accent-hover: #3a3a3a;
    --border: #444444;
    --cell-bg: #2d2d2d;
    --cell-fixed: #3a3a3a;
    --cell-selected: #3a4d66;
    --cell-error: #8b3a3a;
    --cell-hint: #3a6b3a;
    --shadow: rgba(0, 0, 0, 0.5);
    background: radial-gradient(1200px 800px at 20% 20%, #1a1a1a 0%, #fff0 60%),
                radial-gradient(900px 700px at 80% 80%, #4a90e2 0%, #fff0 55%),
                radial-gradient(800px 600px at 100% 0%, #6c5ce7 0%, #fff0 55%),
                #1a1a1a;
}

body[data-theme="grey"] {
    --bg-primary: #808080;
    --bg-secondary: #a0a0a0;
    --text-primary: #333333; /* Dark text for better contrast on grey */
    --text-secondary: #555555; /* Darker grey for secondary text */
    --accent: #606060;
    --accent-hover: #505050;
    --border: #707070;
    --cell-bg: #b0b0b0;
    --cell-fixed: #909090;
    --cell-selected: #707070;
    --cell-error: #d07070; /* Lighter red for better contrast with dark text */
    --cell-hint: #70d070; /* Lighter green for better contrast with dark text */
    --shadow: rgba(0, 0, 0, 0.4);
}

/* Skip to main content link for accessibility */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent);
    color: #ffffff;
    padding: 8px 16px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, top 0.2s;
}

.skip-to-content:focus {
    top: 10px;
    opacity: 1;
    pointer-events: auto;
    outline: 3px solid var(--accent-hover);
    outline-offset: 2px;
}

html {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

body {
    font-family: 'Nunito Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: radial-gradient(1200px 800px at 20% 20%, #f8f9ff 0%, #fff0 60%),
                radial-gradient(900px 700px at 80% 80%, #4a90e2 0%, #fff0 55%),
                radial-gradient(800px 600px at 100% 0%, #6c5ce7 0%, #fff0 55%),
                #f8f9ff;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    transition: background 0.3s ease;
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Hide default cursor - using custom JS cursor for smooth rendering (only for non-touch devices) */
}

/* Hero/Main Section */
.hero-section {
    min-height: 100vh;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* When game is active, hero section should fill viewport */
.game-screen.active ~ .hero-section,
.hero-section:has(.game-screen.active) {
    padding: 0;
    justify-content: center;
}

/* Default cursor - no custom cursor, use browser default */

/* Light theme background */
body[data-theme="light"] {
    background: radial-gradient(1200px 800px at 20% 20%, #f8f9ff 0%, #fff0 60%),
                radial-gradient(900px 700px at 80% 80%, #4a90e2 0%, #fff0 55%),
                radial-gradient(800px 600px at 100% 0%, #6c5ce7 0%, #fff0 55%),
                #f8f9ff;
}

/* Grey theme background */
body[data-theme="grey"] {
    background: radial-gradient(1200px 800px at 20% 20%, #808080 0%, #fff0 60%),
                radial-gradient(900px 700px at 80% 80%, #606060 0%, #fff0 55%),
                radial-gradient(800px 600px at 100% 0%, #707070 0%, #fff0 55%),
                #808080;
}


/* Vibe theme background */
body[data-theme="vibe"] {
    background: radial-gradient(1200px 800px at 20% 20%, #f8f9ff 0%, #fff0 60%),
                radial-gradient(900px 700px at 80% 80%, #4a90e2 0%, #fff0 55%),
                radial-gradient(800px 600px at 100% 0%, #6c5ce7 0%, #fff0 55%),
                #f8f9ff;
}

/* Beige theme variables */
body[data-theme="beige"] {
    --bg-primary: #F5F5DC;
    --bg-secondary: #F5F5DC; /* Beige container background */
    --text-primary: #333333;
    --text-secondary: #555555;
    --accent: #D4A574;
    --accent-hover: #C49664;
    --border: #E8E8D8;
    --cell-bg: #FAF9F6;
    --cell-fixed: #F0EDE5;
    --cell-selected: #E8D4B8;
    --cell-error: #E8B8B8;
    --cell-hint: #C8E8B8;
    --shadow: rgba(0, 0, 0, 0.2);
}

/* Beige theme background */
body[data-theme="beige"] {
    background: radial-gradient(1200px 800px at 20% 20%, #F5F5DC 0%, #fff0 60%),
                radial-gradient(900px 700px at 80% 80%, #D4A574 0%, #fff0 55%),
                radial-gradient(800px 600px at 100% 0%, #E8D4B8 0%, #fff0 55%),
                #F5F5DC;
}

/* Beige theme: beige background for mode cards */
body[data-theme="beige"] .mode-btn {
    background: #F5F5DC;
    border-color: #E0E0D0;
}

body[data-theme="beige"] .mode-btn:hover {
    background: #E8E8D8;
    border-color: #4a90e2;
}

/* Beige theme: dark text for descriptions */
body[data-theme="beige"] .mode-desc {
    color: #555555 !important;
}

/* Beige theme: dark text for buttons */
body[data-theme="beige"] .difficulty-btn {
    color: #333333 !important;
}

body[data-theme="beige"] .control-btn {
    color: #333333 !important;
}

body[data-theme="beige"] .back-btn {
    color: #333333 !important;
    background: #E8E8D8;
}

/* Vibe theme variables */
body[data-theme="vibe"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --accent: #4a90e2;
    --accent-hover: #6c5ce7;
    --border: #2a3a5e;
    --cell-bg: #1e2a47;
    --cell-fixed: #2d3d5e;
    --cell-selected: #3a4d7a;
    --cell-error: #8b3a5a;
    --cell-hint: #3a6b5a;
    --shadow: rgba(0, 0, 0, 0.6);
}

/* Vibe theme background gradient */
body[data-theme="vibe"] {
    background: radial-gradient(1200px 800px at 20% 20%, #1a1a2e 0%, #fff0 60%),
                radial-gradient(900px 700px at 80% 80%, #4a90e2 0%, #fff0 55%),
                radial-gradient(800px 600px at 100% 0%, #6c5ce7 0%, #fff0 55%),
                #1a1a2e;
}

/* Vibe theme: gradient cards */
body[data-theme="vibe"] .mode-btn {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    border-color: rgba(255, 255, 255, 0.2);
}

body[data-theme="vibe"] .mode-btn:hover {
    background: linear-gradient(135deg, #357abd 0%, #5a4dd4 50%, #8b9aff 100%);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Vibe theme: white text for card titles */
body[data-theme="vibe"] .mode-title {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
}

/* Vibe theme: white text for subtitles */
body[data-theme="vibe"] .mode-desc {
    color: #ffffff !important;
}

/* Vibe theme: greyish subtitle paragraph text */
body[data-theme="vibe"] .mode-selection p[data-translate="modeSelectionDesc"] {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Vibe theme: solid purple buttons */
body[data-theme="vibe"] .difficulty-btn,
body[data-theme="vibe"] .control-btn {
    background: #6c5ce7;
    color: #ffffff !important;
}

body[data-theme="vibe"] .difficulty-btn:hover,
body[data-theme="vibe"] .control-btn:hover {
    background: #5a4dd4;
}

/* Vibe theme: multiplayer buttons gradient */
body[data-theme="vibe"] .multiplayer-buttons .mode-btn {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
}

body[data-theme="vibe"] .multiplayer-buttons .mode-btn:hover {
    background: linear-gradient(135deg, #357abd 0%, #5a4dd4 50%, #8b9aff 100%);
}

/* Vibe theme: back button */
body[data-theme="vibe"] .back-btn {
    background: #6c5ce7;
    color: #ffffff !important;
}

body[data-theme="vibe"] .back-btn:hover {
    background: #5a4dd4;
}

/* Vibe theme: gradient container */
body[data-theme="vibe"] .container {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Vibe theme: white Sudovibe title */
body[data-theme="vibe"] header .header-top > div span:last-child {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    text-shadow: 0 4px 20px rgba(255, 255, 255, 0.3) !important;
}

/* Liquid Glass theme variables (Apple-inspired) */
body[data-theme="liquid"] {
    --bg-primary: rgba(255, 255, 255, 0.08);
    --bg-secondary: rgba(255, 255, 255, 0.04);
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --accent: rgba(74, 144, 226, 0.5);
    --accent-hover: rgba(74, 144, 226, 0.7);
    --border: rgba(255, 255, 255, 0.15);
    --cell-bg: rgba(255, 255, 255, 0.12);
    --cell-fixed: rgba(255, 255, 255, 0.1);
    --cell-selected: rgba(74, 144, 226, 0.25);
    --cell-error: rgba(255, 100, 100, 0.3);
    --cell-hint: rgba(100, 255, 100, 0.3);
    --shadow: rgba(0, 0, 0, 0.08);
}

/* Liquid Glass theme background */
body[data-theme="liquid"] {
    background: radial-gradient(1200px 800px at 20% 20%, rgba(240, 248, 255, 0.95) 0%, rgba(240, 248, 255, 0.4) 60%),
                radial-gradient(900px 700px at 80% 80%, rgba(74, 144, 226, 0.15) 0%, rgba(74, 144, 226, 0.03) 55%),
                radial-gradient(800px 600px at 100% 0%, rgba(108, 92, 231, 0.15) 0%, rgba(108, 92, 231, 0.03) 55%),
                linear-gradient(135deg, #f0f8ff 0%, #f8faff 100%);
}

/* Liquid Glass theme: fluid container with subtle tinting */
body[data-theme="liquid"] .container {
    /* Fallback background for browsers without backdrop-filter */
    background: rgba(240, 248, 255, 0.15);
    background-blend-mode: normal;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(85, 85, 85, 0.2),
        inset -1px -1px 0px -0.5px rgba(68, 68, 68, 0.15),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.4),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.4),
        inset 0px 0px 3px rgba(255, 255, 255, 0.4),
        inset 0px 0px 16px rgba(242, 242, 242, 0.25),
        0 8px 32px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: visible;
}

/* Liquid Glass: inset background layer (Rectangle 4 effect) */
body[data-theme="liquid"] .container::before {
    content: '';
    position: absolute;
    left: -4px;
    right: -2px;
    top: -4px;
    bottom: -2px;
    background: rgba(255, 255, 255, 0.04);
    background-blend-mode: normal;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

/* Liquid Glass: gradient white edges (lensing effect) */
body[data-theme="liquid"] .container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%, transparent 15%, transparent 85%, rgba(255, 255, 255, 0.4) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, transparent 15%, transparent 85%, rgba(255, 255, 255, 0.4) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Liquid Glass theme: fluid cards with subtle gradients */
body[data-theme="liquid"] .mode-btn {
    background: rgba(153, 153, 153, 0.06);
    background-blend-mode: normal;
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(85, 85, 85, 0.2),
        inset -1px -1px 0px -0.5px rgba(68, 68, 68, 0.15),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.4),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.4),
        inset 0px 0px 3px rgba(255, 255, 255, 0.4),
        inset 0px 0px 16px rgba(242, 242, 242, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.015);
    position: relative;
    overflow: visible;
}

/* Liquid Glass: inset background layer on cards (Rectangle 4 effect) */
body[data-theme="liquid"] .mode-btn::before {
    content: '';
    position: absolute;
    left: -4px;
    right: -2px;
    top: -4px;
    bottom: -2px;
    background: rgba(255, 255, 255, 0.03);
    background-blend-mode: normal;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

/* Liquid Glass: gradient white edges on cards */
body[data-theme="liquid"] .mode-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, transparent 20%, transparent 80%, rgba(255, 255, 255, 0.2) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, transparent 20%, transparent 80%, rgba(255, 255, 255, 0.2) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

body[data-theme="liquid"] .mode-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(240, 248, 255, 0.22) 100%);
    border-color: rgba(74, 144, 226, 0.5);
    border-width: 2.5px;
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(51, 51, 51, 0.2),
        inset -1px -1px 0px -0.5px rgba(38, 38, 38, 0.15),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset 0px 0px 3px rgba(255, 255, 255, 0.5),
        inset 0px 0px 14px rgba(242, 242, 242, 0.4),
        0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Liquid Glass theme: keep gradient for titles */
body[data-theme="liquid"] .mode-title {
    position: relative;
    z-index: 2;
}

body[data-theme="liquid"] .mode-desc {
    color: #4a4a4a !important;
    position: relative;
    z-index: 2;
}

body[data-theme="liquid"] .mode-icon {
    position: relative;
    z-index: 2;
}

/* Liquid Glass theme: fluid buttons */
body[data-theme="liquid"] .difficulty-btn,
body[data-theme="liquid"] .control-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(248, 250, 255, 0.18) 100%);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: #1a1a1a !important;
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(51, 51, 51, 0.15),
        inset -1px -1px 0px -0.5px rgba(38, 38, 38, 0.1),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.5),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.5),
        inset 0px 0px 2px rgba(255, 255, 255, 0.4),
        inset 0px 0px 10px rgba(242, 242, 242, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

body[data-theme="liquid"] .difficulty-btn > *,
body[data-theme="liquid"] .control-btn > * {
    position: relative;
    z-index: 2;
}

/* Liquid Glass: gradient white edges on buttons */
body[data-theme="liquid"] .difficulty-btn::before,
body[data-theme="liquid"] .control-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.4) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.4) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

body[data-theme="liquid"] .difficulty-btn:hover,
body[data-theme="liquid"] .control-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(240, 248, 255, 0.25) 100%);
    border-color: rgba(74, 144, 226, 0.6);
    border-width: 2.5px;
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(51, 51, 51, 0.2),
        inset -1px -1px 0px -0.5px rgba(38, 38, 38, 0.15),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset 0px 0px 3px rgba(255, 255, 255, 0.5),
        inset 0px 0px 12px rgba(242, 242, 242, 0.4),
        0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Liquid Glass theme: multiplayer buttons - match regular cards */
body[data-theme="liquid"] .multiplayer-buttons .mode-btn {
    background: rgba(153, 153, 153, 0.06);
    background-blend-mode: normal;
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(85, 85, 85, 0.2),
        inset -1px -1px 0px -0.5px rgba(68, 68, 68, 0.15),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.4),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.4),
        inset 0px 0px 3px rgba(255, 255, 255, 0.4),
        inset 0px 0px 16px rgba(242, 242, 242, 0.25),
        0 4px 16px rgba(0, 0, 0, 0.015);
    position: relative;
    overflow: visible;
}

/* Multiplayer buttons get the same pseudo-elements as regular cards */
body[data-theme="liquid"] .multiplayer-buttons .mode-btn::before {
    content: '';
    position: absolute;
    left: -4px;
    right: -2px;
    top: -4px;
    bottom: -2px;
    background: rgba(255, 255, 255, 0.03);
    background-blend-mode: normal;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

body[data-theme="liquid"] .multiplayer-buttons .mode-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, transparent 20%, transparent 80%, rgba(255, 255, 255, 0.2) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, transparent 20%, transparent 80%, rgba(255, 255, 255, 0.2) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

body[data-theme="liquid"] .multiplayer-buttons .mode-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(240, 248, 255, 0.22) 100%);
    border-color: rgba(74, 144, 226, 0.5);
    border-width: 2.5px;
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(51, 51, 51, 0.2),
        inset -1px -1px 0px -0.5px rgba(38, 38, 38, 0.15),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset 0px 0px 3px rgba(255, 255, 255, 0.5),
        inset 0px 0px 14px rgba(242, 242, 242, 0.4),
        0 6px 20px rgba(0, 0, 0, 0.1);
}

/* Liquid Glass theme: back button */
body[data-theme="liquid"] .back-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(248, 250, 255, 0.15) 100%);
    backdrop-filter: blur(8px) saturate(160%);
    -webkit-backdrop-filter: blur(8px) saturate(160%);
    border: 2px solid rgba(255, 255, 255, 0.25);
    color: #1a1a1a !important;
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(51, 51, 51, 0.15),
        inset -1px -1px 0px -0.5px rgba(38, 38, 38, 0.1),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.5),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.5),
        inset 0px 0px 2px rgba(255, 255, 255, 0.4),
        inset 0px 0px 10px rgba(242, 242, 242, 0.3);
    position: relative;
    overflow: hidden;
}

/* Liquid Glass: gradient white edges on back button */
body[data-theme="liquid"] .back-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.4) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.4) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

body[data-theme="liquid"] .back-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(240, 248, 255, 0.22) 100%);
    border-width: 2.5px;
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(51, 51, 51, 0.2),
        inset -1px -1px 0px -0.5px rgba(38, 38, 38, 0.15),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset 0px 0px 3px rgba(255, 255, 255, 0.5),
        inset 0px 0px 12px rgba(242, 242, 242, 0.4);
}

/* Liquid Glass theme: keep gradient title */
body[data-theme="liquid"] header h1 span:last-child {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Liquid Glass theme: fluid game board with layered transparency */
body[data-theme="liquid"] .game-board {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(248, 250, 255, 0.08) 100%) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 2.5px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(51, 51, 51, 0.18),
        inset -1px -1px 0px -0.5px rgba(38, 38, 38, 0.12),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.55),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.55),
        inset 0px 0px 3px rgba(255, 255, 255, 0.45),
        inset 0px 0px 14px rgba(242, 242, 242, 0.35),
        0 8px 32px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

/* Liquid Glass: gradient white edges on game board */
body[data-theme="liquid"] .game-board::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(to right, rgba(255, 255, 255, 0.35) 0%, transparent 12%, transparent 88%, rgba(255, 255, 255, 0.35) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, transparent 12%, transparent 88%, rgba(255, 255, 255, 0.35) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

/* Liquid Glass theme: fluid cells with subtle gradients */
body[data-theme="liquid"] .cell:not(.color-cell) {
    background: 
        /* Gradient white edges overlay */
        linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.3) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.3) 100%),
        /* Base gradient */
        linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(248, 250, 255, 0.12) 100%) !important;
    backdrop-filter: blur(6px) saturate(160%);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 
        inset 0.5px 0.5px 0px -0.3px rgba(51, 51, 51, 0.12),
        inset -0.5px -0.5px 0px -0.3px rgba(38, 38, 38, 0.08),
        inset 0.5px 0.5px 0.3px -0.8px rgba(255, 255, 255, 0.4),
        inset -0.5px -0.5px 0.3px -0.8px rgba(255, 255, 255, 0.4),
        inset 0px 0px 2px rgba(255, 255, 255, 0.35),
        inset 0px 0px 8px rgba(242, 242, 242, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.03);
    position: relative;
    z-index: 1;
    overflow: hidden;
}

body[data-theme="liquid"] .cell:not(.color-cell) > * {
    position: relative;
    z-index: 3;
}

/* Old liquid theme border rules removed - using overlay now */

/* Gradient white edges are now applied via background layers on the cell itself */
/* This ensures all cells get the gradient consistently, even those with border pseudo-elements */

/* The border ::before rules will override the gradient ::before for cells with bottom borders */
/* Instead, we'll apply the gradient as a background-image overlay on the cell itself */
/* This ensures all cells get the gradient consistently */

/* Liquid Glass theme: fixed cells should look the same as regular cells */
body[data-theme="liquid"] .cell:not(.color-cell).fixed {
    background: 
        /* Gradient white edges overlay - same as regular cells */
        linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.3) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.3) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.3) 100%),
        /* Base gradient - same as regular cells */
        linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(248, 250, 255, 0.12) 100%) !important;
    backdrop-filter: blur(6px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(6px) saturate(160%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 
        inset 0.5px 0.5px 0px -0.3px rgba(51, 51, 51, 0.12),
        inset -0.5px -0.5px 0px -0.3px rgba(38, 38, 38, 0.08),
        inset 0.5px 0.5px 0.3px -0.8px rgba(255, 255, 255, 0.4),
        inset -0.5px -0.5px 0.3px -0.8px rgba(255, 255, 255, 0.4),
        inset 0px 0px 2px rgba(255, 255, 255, 0.35),
        inset 0px 0px 8px rgba(242, 242, 242, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.03) !important;
    position: relative !important;
    z-index: 1 !important;
    overflow: hidden !important;
}

body[data-theme="liquid"] .cell:not(.color-cell).selected {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.22) 0%, rgba(108, 92, 231, 0.18) 100%) !important;
    border-color: rgba(74, 144, 226, 0.4) !important;
}

/* Liquid Glass theme: hover should match regular cells (no visual change except on selection) */
body[data-theme="liquid"] .cell:not(.color-cell):hover:not(.selected) {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(248, 250, 255, 0.12) 100%) !important; /* Same as regular cells */
}

/* Liquid Glass theme: fluid number pad */
body[data-theme="liquid"] .number-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(248, 250, 255, 0.15) 100%) !important;
    backdrop-filter: blur(6px) saturate(160%);
    -webkit-backdrop-filter: blur(6px) saturate(160%);
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    color: #1a1a1a !important;
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(51, 51, 51, 0.15),
        inset -1px -1px 0px -0.5px rgba(38, 38, 38, 0.1),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.5),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.5),
        inset 0px 0px 2px rgba(255, 255, 255, 0.4),
        inset 0px 0px 10px rgba(242, 242, 242, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
}

body[data-theme="liquid"] .number-btn > * {
    position: relative;
    z-index: 2;
}

/* Liquid Glass: gradient white edges on number buttons */
body[data-theme="liquid"] .number-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(to right, rgba(255, 255, 255, 0.35) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.35) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.35) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, 0.35) 100%);
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
}

body[data-theme="liquid"] .number-btn:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(240, 248, 255, 0.22) 100%) !important;
    border-color: rgba(74, 144, 226, 0.5) !important;
    border-width: 2.5px !important;
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(51, 51, 51, 0.2),
        inset -1px -1px 0px -0.5px rgba(38, 38, 38, 0.15),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset 0px 0px 3px rgba(255, 255, 255, 0.5),
        inset 0px 0px 12px rgba(242, 242, 242, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

body[data-theme="liquid"] .number-btn.active {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.3) 0%, rgba(108, 92, 231, 0.25) 100%) !important;
    border-color: rgba(74, 144, 226, 0.6) !important;
    border-width: 2.5px !important;
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(51, 51, 51, 0.2),
        inset -1px -1px 0px -0.5px rgba(38, 38, 38, 0.15),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.6),
        inset 0px 0px 3px rgba(255, 255, 255, 0.5),
        inset 0px 0px 12px rgba(242, 242, 242, 0.4),
        0 4px 12px rgba(74, 144, 226, 0.2) !important;
}

/* Glass theme variables */
body[data-theme="glass"] {
    --bg-primary: rgba(255, 255, 255, 0.1);
    --bg-secondary: rgba(255, 255, 255, 0.05);
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --accent: rgba(74, 144, 226, 0.6);
    --accent-hover: rgba(74, 144, 226, 0.8);
    --border: rgba(255, 255, 255, 0.3);
    --cell-bg: rgba(255, 255, 255, 0.2);
    --cell-fixed: rgba(255, 255, 255, 0.15);
    --cell-selected: rgba(74, 144, 226, 0.3);
    --cell-error: rgba(255, 100, 100, 0.4);
    --cell-hint: rgba(100, 255, 100, 0.4);
    --shadow: rgba(0, 0, 0, 0.1);
}

/* Glass theme background */
body[data-theme="glass"] {
    background: radial-gradient(1200px 800px at 20% 20%, rgba(240, 248, 255, 0.9) 0%, rgba(240, 248, 255, 0.3) 60%),
                radial-gradient(900px 700px at 80% 80%, rgba(74, 144, 226, 0.2) 0%, rgba(74, 144, 226, 0.05) 55%),
                radial-gradient(800px 600px at 100% 0%, rgba(108, 92, 231, 0.2) 0%, rgba(108, 92, 231, 0.05) 55%),
                linear-gradient(135deg, #e8f4f8 0%, #f0f8ff 100%);
}

/* Glass theme: glassmorphic container */
body[data-theme="glass"] .container {
    /* Fallback background for browsers without backdrop-filter */
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Glass theme: glassmorphic cards */
body[data-theme="glass"] .mode-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body[data-theme="glass"] .mode-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(74, 144, 226, 0.5);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Glass theme: keep gradient for titles */

body[data-theme="glass"] .mode-desc {
    color: #4a4a4a !important;
}

/* Glass theme: glassmorphic buttons */
body[data-theme="glass"] .difficulty-btn,
body[data-theme="glass"] .control-btn {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #1a1a1a !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body[data-theme="glass"] .difficulty-btn:hover,
body[data-theme="glass"] .control-btn:hover {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(74, 144, 226, 0.5);
}

/* Glass theme: multiplayer buttons */
body[data-theme="glass"] .multiplayer-buttons .mode-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
}

body[data-theme="glass"] .multiplayer-buttons .mode-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Glass theme: back button */
body[data-theme="glass"] .back-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #1a1a1a !important;
}

body[data-theme="glass"] .back-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

/* Glass theme: keep gradient title */
body[data-theme="glass"] header h1 span:last-child {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Glass theme: glassmorphic game board */
body[data-theme="glass"] .game-board {
    background: rgba(255, 255, 255, 0.1) !important; /* More transparent glass */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 2px solid rgba(255, 255, 255, 0.25) !important; /* Softer glass border */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Glass theme: glassmorphic cells */
body[data-theme="glass"] .cell:not(.color-cell) {
    background: rgba(255, 255, 255, 0.18) !important; /* More transparent glass cells */
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.25) !important; /* Softer glass borders */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.04);
    position: relative; /* Ensure cells are above the grid lines */
    z-index: 1;
}

/* Old glass theme border rules removed - using overlay now */

/* Glass theme: fixed cells should look the same as regular cells */
body[data-theme="glass"] .cell:not(.color-cell).fixed {
    background: rgba(255, 255, 255, 0.18) !important; /* Same as regular cells */
    backdrop-filter: blur(10px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 4px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    z-index: 1 !important;
}

body[data-theme="glass"] .cell:not(.color-cell).selected {
    background: rgba(74, 144, 226, 0.25) !important;
    border-color: rgba(74, 144, 226, 0.5) !important;
}

/* Glass theme: hover should match regular cells (no visual change except on selection) */
body[data-theme="glass"] .cell:not(.color-cell):hover:not(.selected) {
    background: rgba(255, 255, 255, 0.18) !important; /* Same as regular cells */
}

/* Glass theme: glassmorphic number pad */
body[data-theme="glass"] .number-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(8px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #1a1a1a !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

body[data-theme="glass"] .number-btn:hover {
    background: rgba(255, 255, 255, 0.28) !important;
    border-color: rgba(74, 144, 226, 0.5) !important;
}

body[data-theme="glass"] .number-btn.active {
    background: rgba(74, 144, 226, 0.35) !important;
    border-color: rgba(74, 144, 226, 0.6) !important;
}

#bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
}

.container {
    background: var(--bg-secondary);
    border-radius: 20px;
    box-shadow: 0 20px 60px var(--shadow);
    max-width: 800px;
    width: 100%;
    padding: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 20px;
    margin-bottom: 40px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Larger container for competitive mode */
.game-screen.active .container {
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
    margin-top: 20px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Desktop: Remove max-height constraint, use margins/padding for spacing */
@media (min-width: 1025px) {
    .container {
        max-height: none;
    }
    
    .game-screen.active .container {
        max-height: none;
    }
}

header {
    margin-bottom: 30px;
    position: relative;
    z-index: 10;
}

/* Hide header when game screen is active */
.container.game-active header {
    display: none !important;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    position: relative;
    z-index: 10;
}

/* Ensure header h1 and theme selector are above liquid glass effects */
body[data-theme="liquid"] header h1,
body[data-theme="liquid"] .header-top,
body[data-theme="liquid"] .theme-selector,
body[data-theme="liquid"] .theme-circles {
    position: relative;
    z-index: 10;
    opacity: 1 !important;
}

/* header h1 styles moved to inline in HTML for easy editing */

.header-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.language-selector {
    position: relative;
    display: inline-block;
}

.language-btn {
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s;
    color: var(--text-primary);
    min-width: 45px;
    position: relative;
    isolation: isolate;
}

.language-btn::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 8px;
    padding: 2px;
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    z-index: -1;
}

.language-btn:hover::before {
    background: linear-gradient(135deg, #3d7cc7 0%, #5a4dd4 50%, #8b9aff 100%);
}

.language-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(74, 144, 226, 0.3);
}

.language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    z-index: 1000;
    overflow: hidden;
}

/* Mobile: Center the dropdown if it appears */
@media (max-width: 767px) {
    .language-dropdown {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        min-width: 180px;
        max-width: 90vw;
    }
}

/* Glass and Liquid themes: white background for dropdown */
body[data-theme="glass"] .language-dropdown,
body[data-theme="liquid"] .language-dropdown {
    background: #ffffff !important;
    border: 2px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

body[data-theme="glass"] .language-option,
body[data-theme="liquid"] .language-option {
    color: #1a1a1a;
}

body[data-theme="glass"] .language-option:hover,
body[data-theme="liquid"] .language-option:hover {
    background: rgba(74, 144, 226, 0.1);
}

body[data-theme="glass"] .language-option[data-lang][data-selected="true"],
body[data-theme="liquid"] .language-option[data-lang][data-selected="true"] {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%) !important;
    color: #ffffff !important;
}

.language-option {
    display: block;
    width: 100%;
    padding: 10px 15px;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
    font-size: 0.95em;
}

.language-option:hover {
    background: var(--cell-selected);
}

.language-option[data-lang][data-selected="true"] {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    color: #ffffff;
    font-weight: 600;
}

.theme-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-selector label {
    color: var(--text-primary);
    font-weight: 600;
}

.theme-select {
    background: var(--cell-bg);
    color: var(--text-primary);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s;
}

.theme-select:hover {
    border-color: var(--accent);
}

.theme-select:focus {
    outline: none;
    border-color: var(--accent);
}

.theme-circles {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-circle {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s;
    padding: 0;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.theme-circle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.theme-circle:focus,
.theme-circle:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.theme-circle.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1.5px rgba(74, 144, 226, 0.3);
    transform: scale(1.15);
}

/* Mode Selection */
.mode-selection, .difficulty-selection, .multiplayer-mode-selection, .room-selection, .game-explanation {
    display: none;
    text-align: center;
    animation: fadeIn 0.3s;
    overflow-y: visible;
    min-height: fit-content;
}

.mode-selection.active, .difficulty-selection.active, 
.multiplayer-mode-selection.active, .room-selection.active, .game-explanation.active {
    display: block;
}

.room-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.mode-selection h1, .mode-selection h2, .difficulty-selection h2, .game-explanation h2 {
    color: var(--text-primary);
    margin-bottom: 30px;
}

.mode-selection h2, .difficulty-selection h2, .game-explanation h2 {
    font-size: 2em;
}

.explanation-content {
    text-align: left;
    max-width: 600px;
    margin: 0 auto 25px;
}

.explanation-content ul {
    margin: 15px 0;
    padding-left: 25px;
}

.explanation-content li {
    margin: 8px 0;
}

.mode-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 30px;
}

/* Responsive mode buttons - handled in comprehensive responsive section below */

/* Ensure multiplayer buttons stay in one row */
.multiplayer-buttons {
    grid-template-columns: repeat(3, 1fr);
}

/* Responsive multiplayer buttons - handled in comprehensive responsive section below */

.mode-btn {
    background: var(--accent);
    color: white;
    border: 2px solid var(--border);
    border-radius: 15px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mode-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-5px);
    border-color: var(--accent);
}

.mode-btn:focus {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.mode-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

/* Hide Color Sudoku and Music Sudoku - will be re-added for pro accounts */
.mode-btn[data-mode="color"],
.mode-btn[data-mode="music"] {
    display: none !important;
}

/* Light theme: white background for mode cards */
body[data-theme="light"] .mode-btn,
body:not([data-theme]) .mode-btn {
    background: #ffffff;
    border-color: #e0e0e0;
}

body[data-theme="light"] .mode-btn:hover,
body:not([data-theme]) .mode-btn:hover {
    background: #f0f0f0;
    border-color: #4a90e2;
}

/* Grey theme: grey background for mode cards */
body[data-theme="grey"] .mode-btn {
    background: #a0a0a0;
    border-color: #909090;
}

body[data-theme="grey"] .mode-btn:hover {
    background: #8f8f8f;
    border-color: #4a90e2;
}

.mode-icon {
    font-size: 3.5em;
}

.mode-title {
    font-size: 1.3em;
    font-weight: 600;
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Grey theme: add shadow to titles */
body[data-theme="grey"] .mode-title {
    text-shadow: 0 2px 10px rgba(74, 144, 226, 0.4);
}

.mode-desc {
    font-size: 0.85em;
    opacity: 0.9;
    color: white;
    font-weight: 600; /* Semibold */
}

/* Light theme: darker text for descriptions on white background */
body[data-theme="light"] .mode-desc,
body:not([data-theme]) .mode-desc {
    color: #666666 !important;
}

/* Grey theme: dark text for descriptions on grey background */
body[data-theme="grey"] .mode-desc {
    color: #555555 !important;
}

/* Difficulty Selection */
.difficulty-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.difficulty-btn {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 15px 25px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

/* Grey theme: dark text for difficulty buttons */
body[data-theme="grey"] .difficulty-btn {
    color: #333333 !important;
}

.difficulty-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px var(--shadow);
}

.difficulty-btn:focus,
.difficulty-btn:focus-visible {
    outline: 3px solid var(--accent-hover);
    outline-offset: 2px;
}

/* Light theme: white buttons with shadow instead of gradient */
body[data-theme="light"] .difficulty-btn,
body:not([data-theme]) .difficulty-btn {
    background: #ffffff !important;
    color: #333333 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

body[data-theme="light"] .difficulty-btn:hover,
body:not([data-theme]) .difficulty-btn:hover {
    background: #f5f5f5 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

body[data-theme="light"] .control-btn,
body:not([data-theme]) .control-btn {
    background: #ffffff !important;
    color: #333333 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

body[data-theme="light"] .control-btn:hover,
body:not([data-theme]) .control-btn:hover {
    background: #f5f5f5 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

body[data-theme="light"] .back-btn,
body:not([data-theme]) .back-btn {
    background: #ffffff !important;
    color: #333333 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

body[data-theme="light"] .back-btn:hover,
body:not([data-theme]) .back-btn:hover {
    background: #f5f5f5 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.15);
    opacity: 1;
    transform: translateY(-2px);
}

/* Dark theme: gradient buttons */
body[data-theme="dark"] .mode-selection h1 {
    color: #ffffff !important;
}

body[data-theme="dark"] .difficulty-btn,
body[data-theme="dark"] .control-btn {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    color: #ffffff !important;
}

body[data-theme="dark"] .difficulty-btn:hover,
body[data-theme="dark"] .control-btn:hover {
    background: linear-gradient(135deg, #3d7cc7 0%, #5a4dd4 50%, #8b9aff 100%);
}

body[data-theme="dark"] .back-btn {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    color: #ffffff !important;
}

body[data-theme="dark"] .back-btn:hover {
    background: linear-gradient(135deg, #3d7cc7 0%, #5a4dd4 50%, #8b9aff 100%);
    opacity: 1;
}

/* Multiplayer buttons (Create Room, Browse Rooms, Join Room) - keep solid blue like mode cards */

.back-btn {
    background: var(--text-secondary);
    color: white;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s;
}

/* Grey theme: dark text for back buttons */
body[data-theme="grey"] .back-btn {
    color: #333333 !important;
    background: #d0d0d0;
}

.back-btn:hover {
    background: var(--text-primary);
    opacity: 0.8;
}

.back-btn:focus,
.back-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* Game Screen */
.game-screen {
    display: none;
}

.game-screen.active {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    animation: fadeIn 0.3s;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
    position: relative;
    z-index: 10;
    flex-shrink: 0;
}

/* Ensure game-header elements are above liquid glass effects */
body[data-theme="liquid"] .game-header,
body[data-theme="liquid"] .game-info,
body[data-theme="liquid"] .game-controls {
    position: relative;
    z-index: 10;
    opacity: 1 !important;
}

.game-info {
    display: flex;
    gap: 20px;
}

.timer, .errors {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    z-index: 10;
    opacity: 1 !important;
}

.game-controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.control-btn {
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

/* Grey theme: dark text for control buttons */
body[data-theme="grey"] .control-btn {
    color: #333333 !important;
}

.control-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-2px);
}

.control-btn:focus,
.control-btn:focus-visible {
    outline: 3px solid var(--accent-hover);
    outline-offset: 2px;
}

/* Sound toggle button styling */
.sound-toggle-btn {
    font-size: 1.2em;
    padding: 10px 15px;
    min-width: 45px;
}

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

/* Game Board */
.game-board-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 30px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.game-board-wrapper {
    position: relative;
    max-width: 540px;
    width: 100%;
    max-height: 100%;
    display: inline-block;
    flex-shrink: 1;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 0;
    background: var(--border);
    border: 3px solid var(--border);
    border-radius: 5px;
    padding: 3px;
    max-width: min(540px, 70vh, 90vw);
    width: 100%;
    max-height: min(540px, 70vh, 90vw);
    aspect-ratio: 1;
    box-sizing: border-box;
    position: relative;
}

/* Continuous border lines overlay - above everything */
.grid-lines-overlay {
    position: absolute;
    /* Account for game-board border (3px) and padding (3px) = 6px total offset */
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    pointer-events: none;
    z-index: 999999 !important;
    /* Create 2 vertical and 2 horizontal lines using linear gradients */
    background-image: 
        /* Vertical line 1: between columns 3-4 */
        linear-gradient(to right, transparent calc(33.333% - 1px), var(--text-primary) calc(33.333% - 1px), var(--text-primary) calc(33.333% + 1px), transparent calc(33.333% + 1px)),
        /* Vertical line 2: between columns 6-7 */
        linear-gradient(to right, transparent calc(66.667% - 1px), var(--text-primary) calc(66.667% - 1px), var(--text-primary) calc(66.667% + 1px), transparent calc(66.667% + 1px)),
        /* Horizontal line 1: between rows 3-4 */
        linear-gradient(to bottom, transparent calc(33.333% - 1px), var(--text-primary) calc(33.333% - 1px), var(--text-primary) calc(33.333% + 1px), transparent calc(33.333% + 1px)),
        /* Horizontal line 2: between rows 6-7 */
        linear-gradient(to bottom, transparent calc(66.667% - 1px), var(--text-primary) calc(66.667% - 1px), var(--text-primary) calc(66.667% + 1px), transparent calc(66.667% + 1px));
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 0 0, 0 0, 0 0;
}

/* Use aspect-ratio for modern browsers */
@supports (aspect-ratio: 1) {
    .game-board {
        aspect-ratio: 1;
    }
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1) {
    .game-board {
        height: calc(100vw - 40px); /* Approximate based on width, minus padding */
        max-height: 540px;
    }
    
    @media (min-width: 580px) {
        .game-board {
            height: 540px; /* Fixed height when width is constrained */
        }
    }
}

.game-board .cell {
    min-height: 0;
    min-width: 0;
    aspect-ratio: 1;
}

.cell {
    background: var(--cell-bg);
    border: 1px solid var(--border);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    padding: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}

.cell > * {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
}

/* Scale down font size for smaller cells or when needed */
@media (max-width: 1200px) {
    .cell {
        font-size: 1.3em;
    }
}

@media (max-width: 900px) {
    .cell {
        font-size: 1.2em;
    }
}

.cell:hover:not(.color-cell) {
    background: var(--cell-fixed);
}

.cell.selected:not(.color-cell) {
    background: var(--cell-selected);
}

.cell:focus,
.cell:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    z-index: 10;
}

.cell.fixed:not(.color-cell) {
    background: var(--cell-fixed);
}

.cell.fixed {
    color: var(--text-primary);
    font-weight: 700;
    cursor: default;
}

/* Color mode: don't override inline background, just adjust opacity/shadow */
/* Inline styles have highest priority, so we just need to prevent CSS from overriding */
/* Override all theme-specific borders for color cells - they use inline borders from JavaScript */
.game-board[data-mode="color"] .cell.color-cell,
body[data-theme="liquid"] .game-board[data-mode="color"] .cell.color-cell,
body[data-theme="glass"] .game-board[data-mode="color"] .cell.color-cell,
body[data-theme="vibe"] .game-board[data-mode="color"] .cell.color-cell,
body[data-theme="dark"] .game-board[data-mode="color"] .cell.color-cell,
body[data-theme="light"] .game-board[data-mode="color"] .cell.color-cell,
body[data-theme="grey"] .game-board[data-mode="color"] .cell.color-cell,
body[data-theme="beige"] .game-board[data-mode="color"] .cell.color-cell {
    /* Remove default borders - only use inline border styles set by JavaScript */
    border: none !important;
}

.game-board[data-mode="color"] .cell.color-cell:hover {
    opacity: 0.7;
}

.game-board[data-mode="color"] .cell.color-cell.selected {
    opacity: 0.9;
    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.5);
}

.cell.error {
    background: var(--cell-error) !important;
    color: #ff0000 !important; /* Red text for wrong numbers/emojis */
    font-weight: 700; /* Make wrong numbers bold for emphasis */
}

/* Don't apply red text to color mode cells (they don't have text) */
.cell.error.color-cell {
    color: inherit !important;
}

.cell.hint {
    animation: pulse 0.5s;
    background: var(--cell-hint);
}

.cell.solved {
    background: var(--cell-hint);
}

/* Remove old per-cell borders - now using continuous overlay lines */
/* Old border styles removed - grid-lines-overlay handles continuous lines */

/* Hide overlay in color mode */
.game-board-wrapper[data-mode="color"] .grid-lines-overlay,
.game-board[data-mode="color"] ~ .grid-lines-overlay {
    display: none !important;
}

/* Liquid Glass theme: update overlay colors */
body[data-theme="liquid"] .grid-lines-overlay {
    background-image: 
        linear-gradient(to right, transparent calc(33.333% - 0.75px), rgba(255, 255, 255, 0.25) calc(33.333% - 0.75px), rgba(255, 255, 255, 0.25) calc(33.333% + 0.75px), transparent calc(33.333% + 0.75px)),
        linear-gradient(to right, transparent calc(66.667% - 0.75px), rgba(255, 255, 255, 0.25) calc(66.667% - 0.75px), rgba(255, 255, 255, 0.25) calc(66.667% + 0.75px), transparent calc(66.667% + 0.75px)),
        linear-gradient(to bottom, transparent calc(33.333% - 0.75px), rgba(255, 255, 255, 0.25) calc(33.333% - 0.75px), rgba(255, 255, 255, 0.25) calc(33.333% + 0.75px), transparent calc(33.333% + 0.75px)),
        linear-gradient(to bottom, transparent calc(66.667% - 0.75px), rgba(255, 255, 255, 0.25) calc(66.667% - 0.75px), rgba(255, 255, 255, 0.25) calc(66.667% + 0.75px), transparent calc(66.667% + 0.75px));
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 0 0, 0 0, 0 0;
}

/* Glass theme: update overlay colors */
body[data-theme="glass"] .grid-lines-overlay {
    background-image: 
        linear-gradient(to right, transparent calc(33.333% - 1px), rgba(255, 255, 255, 0.5) calc(33.333% - 1px), rgba(255, 255, 255, 0.5) calc(33.333% + 1px), transparent calc(33.333% + 1px)),
        linear-gradient(to right, transparent calc(66.667% - 1px), rgba(255, 255, 255, 0.5) calc(66.667% - 1px), rgba(255, 255, 255, 0.5) calc(66.667% + 1px), transparent calc(66.667% + 1px)),
        linear-gradient(to bottom, transparent calc(33.333% - 1px), rgba(255, 255, 255, 0.5) calc(33.333% - 1px), rgba(255, 255, 255, 0.5) calc(33.333% + 1px), transparent calc(33.333% + 1px)),
        linear-gradient(to bottom, transparent calc(66.667% - 1px), rgba(255, 255, 255, 0.5) calc(66.667% - 1px), rgba(255, 255, 255, 0.5) calc(66.667% + 1px), transparent calc(66.667% + 1px));
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: 0 0, 0 0, 0 0, 0 0;
}

/* Killer Sudoku Cages */
.cell.killer-cell {
    position: relative;
    border: 1px solid var(--border);
}

/* Dotted borders for cage boundaries - override all other borders */
/* Use theme-specific colors directly for better visibility */

/* Light theme */
body[data-theme="light"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-right,
body:not([data-theme]) .game-board[data-killer="true"] .cell.killer-cell.killer-border-right {
    border-right: 2px dashed #4a90e2 !important;
}

body[data-theme="light"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-bottom,
body:not([data-theme]) .game-board[data-killer="true"] .cell.killer-cell.killer-border-bottom {
    border-bottom: 2px dashed #4a90e2 !important;
}

body[data-theme="light"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-left,
body:not([data-theme]) .game-board[data-killer="true"] .cell.killer-cell.killer-border-left {
    border-left: 2px dashed #4a90e2 !important;
}

body[data-theme="light"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-top,
body:not([data-theme]) .game-board[data-killer="true"] .cell.killer-cell.killer-border-top {
    border-top: 2px dashed #4a90e2 !important;
}

/* Dark theme */
body[data-theme="dark"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-right {
    border-right: 2px dashed #ffffff !important;
}

body[data-theme="dark"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-bottom {
    border-bottom: 2px dashed #ffffff !important;
}

body[data-theme="dark"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-left {
    border-left: 2px dashed #ffffff !important;
}

body[data-theme="dark"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-top {
    border-top: 2px dashed #ffffff !important;
}

/* Grey and Beige themes */
body[data-theme="grey"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-right,
body[data-theme="beige"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-right {
    border-right: 2px dashed #333333 !important;
}

body[data-theme="grey"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-bottom,
body[data-theme="beige"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-bottom {
    border-bottom: 2px dashed #333333 !important;
}

body[data-theme="grey"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-left,
body[data-theme="beige"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-left {
    border-left: 2px dashed #333333 !important;
}

body[data-theme="grey"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-top,
body[data-theme="beige"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-top {
    border-top: 2px dashed #333333 !important;
}

/* Liquid Glass theme */
body[data-theme="liquid"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-right {
    border-right: 1.5px dashed rgba(74, 144, 226, 0.5) !important;
}

body[data-theme="liquid"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-bottom {
    border-bottom: 1.5px dashed rgba(74, 144, 226, 0.5) !important;
}

body[data-theme="liquid"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-left {
    border-left: 1.5px dashed rgba(74, 144, 226, 0.5) !important;
}

body[data-theme="liquid"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-top {
    border-top: 1.5px dashed rgba(74, 144, 226, 0.5) !important;
}

/* Glass theme */
body[data-theme="glass"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-right {
    border-right: 2px dashed #4a90e2 !important;
}

body[data-theme="glass"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-bottom {
    border-bottom: 2px dashed #4a90e2 !important;
}

body[data-theme="glass"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-left {
    border-left: 2px dashed #4a90e2 !important;
}

body[data-theme="glass"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-top {
    border-top: 2px dashed #4a90e2 !important;
}

/* Vibe theme */
body[data-theme="vibe"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-right {
    border-right: 2px dashed #ffffff !important;
}

body[data-theme="vibe"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-bottom {
    border-bottom: 2px dashed #ffffff !important;
}

body[data-theme="vibe"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-left {
    border-left: 2px dashed #ffffff !important;
}

body[data-theme="vibe"] .game-board[data-killer="true"] .cell.killer-cell.killer-border-top {
    border-top: 2px dashed #ffffff !important;
}

/* For killer cells, don't use the standard 3x3 box thick borders */
.game-board[data-killer="true"] .cell:nth-child(3n) {
    border-right: 1px solid var(--border);
}

.game-board[data-killer="true"] .cell:nth-child(n+19):nth-child(-n+27),
.game-board[data-killer="true"] .cell:nth-child(n+46):nth-child(-n+54) {
    border-bottom: 1px solid var(--border);
}

/* Killer sum number in top-left corner */
.cell .killer-sum {
    position: absolute;
    top: 2px;
    left: 2px;
    font-size: 0.65em;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    z-index: 10;
    pointer-events: none;
}

/* Ensure sum numbers are visible in all themes */
body[data-theme="vibe"] .cell .killer-sum {
    color: #ffffff !important; /* White for vibe theme */
}

body[data-theme="dark"] .cell .killer-sum {
    color: #ffffff !important; /* White for dark theme */
}

/* Number Pad */
.number-pad-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.number-pad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    max-width: 400px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.number-btn {
    background: var(--cell-bg);
    border: 2px solid var(--border);
    color: var(--text-primary);
    border-radius: 10px;
    padding: 15px;
    font-size: 1.8em;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

.number-btn:hover {
    background: var(--cell-fixed);
    transform: scale(1.05);
}

.number-btn:focus,
.number-btn:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.number-btn.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

.number-btn.clear {
    font-size: 1.8em;
    color: #ff0000 !important;
    border-color: #ff0000 !important;
}

.number-btn.clear,
.number-btn.clear * {
    color: #ff0000 !important;
}

.number-btn.clear:hover {
    background: rgba(255, 0, 0, 0.1) !important;
    border-color: #ff0000 !important;
    color: #ff0000 !important;
}

/* Ensure clear button stays red in all themes */
body[data-theme="glass"] .number-btn.clear,
body[data-theme="liquid"] .number-btn.clear,
body[data-theme="vibe"] .number-btn.clear,
body[data-theme="dark"] .number-btn.clear {
    color: #ff0000 !important;
    border-color: #ff0000 !important;
}

body[data-theme="glass"] .number-btn.clear:hover,
body[data-theme="liquid"] .number-btn.clear:hover,
body[data-theme="vibe"] .number-btn.clear:hover,
body[data-theme="dark"] .number-btn.clear:hover {
    background: rgba(255, 0, 0, 0.1) !important;
    border-color: #ff0000 !important;
    color: #ff0000 !important;
}

/* Game Status */
.game-status {
    text-align: center;
    min-height: 30px;
    font-weight: 600;
    color: var(--accent);
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999999 !important; /* Ensure modal is above all other elements */
    justify-content: center;
    align-items: center;
}

.modal.active {
    display: flex;
    animation: fadeIn 0.3s;
}

.modal-content {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 40px;
    border-radius: 15px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px var(--shadow);
    position: relative;
    z-index: 1; /* Above the modal backdrop */
}

/* Glass theme: increase modal opacity */
body[data-theme="glass"] .modal-content {
    background: rgb(255 255 255 / 94%) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Liquid theme: increase modal opacity */
body[data-theme="liquid"] .modal-content {
    background: rgb(255 255 255 / 94%) !important;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border: 2px solid rgba(255, 255, 255, 0.4);
}

.modal-content h2 {
    color: var(--accent);
    margin-bottom: 20px;
    font-size: 2em;
}

.modal-content p {
    margin-bottom: 15px;
    font-size: 1.1em;
    color: var(--text-primary);
}

.final-time {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--accent);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* Multiplayer Styles */
.room-selection {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.room-section {
    padding: 20px;
    border-radius: 15px;
    background: var(--cell-bg);
    border: 2px solid var(--border);
}

.room-section h2 {
    color: var(--text-primary);
    margin-bottom: 20px;
    font-size: 1.5em;
}

.waiting-room {
    margin-top: 20px;
    padding: 20px;
    background: var(--cell-fixed);
    border-radius: 10px;
}

.room-code-display {
    font-size: 1.3em;
    margin-bottom: 10px;
    color: var(--text-primary);
}

.room-code {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 3px;
    font-family: monospace;
}

.waiting-text {
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.join-room-input-section {
    padding: 20px;
    background: var(--cell-bg);
    border-radius: 15px;
    border: 2px solid var(--border);
    animation: fadeIn 0.3s;
}

.join-room-input {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.join-room-input input {
    padding: 12px 20px;
    font-size: 1.2em;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--cell-bg);
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 3px;
    font-family: monospace;
    max-width: 200px;
}

.join-room-input input:focus {
    outline: none;
    border-color: var(--accent);
}

.error-message {
    color: var(--cell-error);
    font-weight: 600;
    padding: 10px;
    border-radius: 5px;
    background: rgba(255, 204, 204, 0.3);
}

/* Browse Rooms Styles */
.browse-rooms-section {
    padding: 20px;
    background: var(--cell-bg);
    border-radius: 15px;
    border: 2px solid var(--border);
    animation: fadeIn 0.3s;
}

.browse-rooms-section h3 {
    color: var(--text-primary);
    margin-bottom: 0;
}

.rooms-list {
    display: grid;
    gap: 15px;
    margin-top: 15px;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 5px;
}

/* Scrollbar styling for rooms list */
.rooms-list::-webkit-scrollbar {
    width: 8px;
}

.rooms-list::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 4px;
}

.rooms-list::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 4px;
}

.rooms-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent-hover);
}

.room-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 10px;
    transition: all 0.3s;
}

.room-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
}

.room-info {
    flex: 1;
}

.room-code {
    font-weight: 700;
    font-size: 1.3em;
    color: var(--accent);
    font-family: monospace;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.room-details {
    color: var(--text-secondary);
    font-size: 0.9em;
    margin-bottom: 5px;
}

.room-players {
    color: var(--text-secondary);
    font-size: 0.85em;
    font-weight: 600;
}

.join-room-btn {
    padding: 10px 24px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1em;
    transition: all 0.3s;
    white-space: nowrap;
}

.join-room-btn:hover {
    background: var(--accent-hover);
    transform: scale(1.05);
}

.join-room-btn:active {
    transform: scale(0.98);
}

/* Collaborative Mode Styles */
.collaborative-container {
    display: none;
    width: 100%;
    max-width: 540px;
}

.collaborative-header {
    margin-bottom: 20px;
    text-align: center;
}

.player-info {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.player-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1em;
    transition: all 0.3s;
}

.you-badge {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.opponent-badge {
    background: linear-gradient(135deg, #6c5ce7 0%, #5a4fcf 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
}

.player-icon {
    font-size: 1.2em;
}

.player-name {
    font-size: 1em;
}

.collaborative-status {
    color: var(--text-secondary);
    font-size: 0.95em;
    font-style: italic;
    min-height: 20px;
}

.collaborative-board {
    box-shadow: 0 8px 25px var(--shadow);
}

.cell.player-move {
    position: relative;
}

.cell.your-move {
    background: linear-gradient(135deg, #b8d4ff 0%, #9bc4ff 100%);
    animation: yourMovePulse 0.6s;
}

.cell.partner-cell {
    background: linear-gradient(135deg, #d4b8ff 0%, #c49bff 100%);
}

@keyframes yourMovePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(74, 144, 226, 0);
    }
}

.cell.opponent-move {
    background: var(--cell-hint);
    animation: partnerMovePulse 0.6s;
}

@keyframes partnerMovePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 8px rgba(108, 92, 231, 0);
    }
}

/* Competitive Mode Styles */
.competitive-boards {
    display: none;
    flex-direction: row;
    gap: 30px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.competitive-boards[style*="flex"] {
    display: flex;
}

/* Ensure proper ordering: "You" board on left, "Opponent" board on right */
.competitive-boards .player-board.order-left {
    order: 1;
}

.competitive-boards .player-board.order-right {
    order: 2;
}

/* Hide single-player gameBoard in competitive multiplayer mode */
.game-board-container:has(.competitive-boards[style*="flex"]) > #gameBoard {
    display: none !important;
}

/* Fallback for browsers without :has() support */
.competitive-boards[style*="flex"] {
    flex-direction: row;
}

.player-board {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    min-width: 0; /* Prevents flex shrinking issues */
    width: 100%;
    padding: 20px;
    border-radius: 15px;
    transition: all 0.3s;
}

/* "You" board styling - Blue theme */
.competitive-boards .player-board.your-board {
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.05) 0%, rgba(53, 122, 189, 0.05) 100%);
    border: 2px solid rgba(74, 144, 226, 0.3);
}

/* "Opponent" board styling - Purple theme */
.competitive-boards .player-board.opponent-board {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.05) 0%, rgba(90, 79, 207, 0.05) 100%);
    border: 2px solid rgba(108, 92, 231, 0.3);
}

.player-board .number-pad-container {
    margin-top: 10px;
    max-width: 100%;
}

.opponent-pad-container .number-pad {
    opacity: 0.5;
    pointer-events: none;
}

.number-pad.locked-pad .number-btn.locked {
    background: var(--cell-fixed);
    color: var(--text-secondary);
    cursor: not-allowed;
    font-size: 0.9em;
    padding: 12px;
}

.player-label {
    font-size: 1.3em;
    font-weight: 700;
    text-align: center;
    padding: 8px 20px;
    border-radius: 20px;
}

/* "You" label - Blue */
.competitive-boards .player-board.your-board .player-label {
    color: #4a90e2;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.15) 0%, rgba(53, 122, 189, 0.15) 100%);
}

/* "Opponent" label - Purple */
.competitive-boards .player-board.opponent-board .player-label {
    color: #6c5ce7;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.15) 0%, rgba(90, 79, 207, 0.15) 100%);
}

.player-stats {
    display: flex;
    gap: 15px;
    font-size: 1em;
    font-weight: 600;
}

/* "You" stats - Blue accent */
.competitive-boards .player-board.your-board .player-stats {
    color: #357abd;
}

/* "Opponent" stats - Purple accent */
.competitive-boards .player-board.opponent-board .player-stats {
    color: #5a4fcf;
}

#player1Board, #player2Board {
    width: 100%;
    max-width: 540px;
    aspect-ratio: 1;
    min-width: 280px;
    min-height: 280px;
}

#player1Board .game-board,
#player2Board .game-board {
    width: 100%;
    height: 100%;
}

/* Ensure both boards have consistent sizing */
.competitive-boards .game-board {
    width: 100%;
    max-width: 540px;
    aspect-ratio: 1;
}

/* Board border colors for distinction */
.competitive-boards .player-board.your-board .game-board {
    border-color: rgba(74, 144, 226, 0.4);
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.2);
}

.competitive-boards .player-board.opponent-board .game-board {
    border-color: rgba(108, 92, 231, 0.4);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.2);
}

.cell.opponent-move {
    background: var(--cell-hint);
    animation: pulse 0.5s;
}

.cell.opponent-cell {
    background: var(--cell-selected);
    opacity: 0.7;
}

.player-board .number-pad-container {
    width: 100%;
    max-width: 540px;
    margin-top: 10px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

/* Match number pad styling to player theme */
.competitive-boards .player-board.your-board .number-pad-container {
    background: rgba(74, 144, 226, 0.05);
    border-color: rgba(74, 144, 226, 0.2);
}

.competitive-boards .player-board.opponent-board .number-pad-container {
    background: rgba(108, 92, 231, 0.05);
    border-color: rgba(108, 92, 231, 0.2);
}

.player-board .number-pad {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Responsive Design */
@media (max-width: 1000px) {
    .competitive-boards {
        grid-template-columns: 1fr;
        max-width: 540px;
    }
    
    .game-screen.active .container {
        max-width: 800px;
    }
}

/* Tablet (iPad) - 768px to 1024px */
@media (max-width: 1024px) and (min-width: 768px) {
    .container {
        padding: 20px;
        padding-top: 30px;
        padding-bottom: 40px;
        max-width: 95%;
        max-height: none;
        margin-top: 15px;
        margin-bottom: 40px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .game-screen.active .container {
        max-height: none;
        padding: 20px;
        padding-top: 30px;
        padding-bottom: 40px;
        margin-top: 15px;
        margin-bottom: 40px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .game-screen.active {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
    }

    .mode-buttons:not(.multiplayer-buttons) {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .mode-btn {
        padding: 25px 20px;
    }

    .mode-selection h2, .difficulty-selection h2, .game-explanation h2 {
        font-size: 2.3em; /* Bigger subtitle for tablet */
    }

    .mode-icon {
        font-size: 4.5em; /* Bigger icon for tablet */
    }

    .mode-title {
        font-size: 1.7625em; /* 10px less than 2.3em subtitle (approximately) */
    }

    .mode-desc {
        font-size: 1.1em; /* Smaller than title */
    }

    .game-screen.active .game-board {
        max-width: min(540px, 60vh, 85vw);
        max-height: min(540px, 60vh, 85vw);
    }

    .cell {
        font-size: 1.4em;
        min-height: 40px;
    }

    .number-btn {
        font-size: 1.6em;
        padding: 14px;
        min-width: 50px;
    }

    .number-pad {
        gap: 10px;
        padding: 15px;
    }

    .theme-circles {
        gap: 15px;
    }

    .theme-circle {
        width: 45px;
        height: 45px;
    }

    header h1 {
        font-size: 2.5em;
    }
}

/* Mobile - below 768px */
@media (max-width: 767px) {
    .container {
        padding: 15px;
        max-width: 100%;
    }

    header h1 {
        font-size: 3em;
        margin-bottom: 15px;
    }

    .mode-selection h2, .difficulty-selection h2, .game-explanation h2 {
        font-size: 2.2em;
    }

    .mode-buttons:not(.multiplayer-buttons) {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mode-btn {
        padding: 25px 20px;
    }

    .mode-icon {
        font-size: 4.7em;
    }

    .mode-title {
        font-size: 1.8875em;
    }

    .mode-desc {
        font-size: 1.2em;
    }

    .difficulty-buttons {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .difficulty-btn {
        padding: 15px 18px;
        font-size: 1.1em;
    }

    .game-screen.active {
        justify-content: flex-start;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 10px;
    }
    
    .game-screen.active .container {
        padding: 10px;
        max-height: none;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        margin: 10px auto;
    }
    
    .container {
        max-height: none;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
        margin: 10px auto;
    }
    
    html, body {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        height: auto;
        position: relative;
    }
    
    .hero-section {
        overflow-y: visible;
        min-height: auto;
    }
    
    .game-screen.active .game-board {
        max-width: min(540px, 55vh, 90vw);
        max-height: min(540px, 55vh, 90vw);
        gap: 2px;
        border-width: 2px;
    }
    
    .game-screen.active .game-header {
        margin-bottom: 10px;
        gap: 8px;
    }
    
    .game-screen.active .game-board-container {
        margin-bottom: 10px;
    }
    
    .game-screen.active .number-pad-container {
        margin-bottom: 5px;
    }
    
    .game-board {
        max-width: 95vw;
        gap: 2px;
        border-width: 2px;
    }

    .cell {
        font-size: 1.6em;
        min-height: 40px;
        padding: 4px;
    }

    .number-pad {
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px;
        padding: 15px;
        max-width: 100%;
    }

    .number-btn {
        font-size: 1.8em;
        padding: 15px 10px;
        min-width: 50px;
        aspect-ratio: 1;
    }

    .game-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;
    }

    .game-controls {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .control-btn {
        padding: 15px 25px;
        font-size: 1.1em;
        flex: 1 1 auto;
        min-width: 120px;
    }

    .theme-circles {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .theme-circle {
        width: 40px;
        height: 40px;
    }
    
    /* Hide glass and liquid themes on mobile to prevent overlapping */
    .theme-circle[data-theme="glass"],
    .theme-circle[data-theme="liquid"] {
        display: none !important;
    }

    .stats {
        font-size: 1em;
        gap: 15px;
    }

    .stats-item {
        padding: 10px 15px;
        font-size: 1em;
    }

    .back-btn {
        padding: 12px 25px;
        font-size: 1.1em;
    }

    /* Multiplayer adjustments */
    .multiplayer-buttons {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .competitive-boards {
        max-width: 100%;
    }

    .player-board {
        padding: 15px;
    }

    .player-board .number-pad {
        gap: 8px;
        padding: 10px;
    }

    .player-board .number-btn {
        font-size: 1.2em;
        padding: 10px;
    }
}

/* Small Mobile - below 480px */
@media (max-width: 480px) {
    .container {
        padding: 10px;
    }

    header h1 {
        font-size: 2.8em;
    }

    .mode-selection h2, .difficulty-selection h2, .game-explanation h2 {
        font-size: 2em;
    }

    .number-btn {
        font-size: 1.6em;
        padding: 12px 8px;
        min-width: 45px;
    }

    .mode-btn {
        padding: 20px 15px;
    }

    .mode-icon {
        font-size: 4.25em;
    }

    .mode-title {
        font-size: 1.6875em;
    }

    .mode-desc {
        font-size: 1.1em;
    }

    .difficulty-btn {
        font-size: 1em;
        padding: 12px 15px;
    }

    .control-btn {
        font-size: 1em;
        padding: 12px 20px;
        min-width: 100px;
    }

    .stats {
        font-size: 0.95em;
    }

    .stats-item {
        font-size: 0.95em;
    }

    .back-btn {
        font-size: 1em;
    }

    .theme-circle {
        width: 35px;
        height: 35px;
    }
}

/* iPhone-specific breakpoints for better text sizing */
/* iPhone SE, 8, X, 11 (375px and similar) */
@media (max-width: 390px) {
    .mode-selection h2, .difficulty-selection h2, .game-explanation h2 {
        font-size: 2.4em; /* Bigger on iPhone */
    }

    .mode-icon {
        font-size: 5.2em; /* Larger icon */
    }

    .mode-title {
        font-size: 2.0625em; /* 5px less than 2.4em subtitle (approximately) */
    }
}

/* iPhone 12/13/14 (390px-430px) - slightly adjust if needed */
@media (min-width: 391px) and (max-width: 430px) {
    .mode-selection h2, .difficulty-selection h2, .game-explanation h2 {
        font-size: 2.3em;
    }

    .mode-icon {
        font-size: 5em;
    }

    .mode-title {
        font-size: 1.975em; /* 5px less than 2.3em subtitle (approximately) */
    }
}

/* Footer Styles */
.site-footer {
    position: relative;
    width: 100%;
    margin-top: 60px;
    padding: 40px 20px 20px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    clear: both;
    flex-shrink: 0;
    border-radius: 20px;
    z-index: 10001;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-logo {
    font-family: 'Nunito', sans-serif;
    font-size: 1.5em;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-brand-name {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-beta-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.5em;
    font-weight: 600;
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    color: #ffffff;
    border-radius: 8px;
    line-height: 1.4;
    margin-left: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.footer-tagline {
    font-size: 0.9em;
    color: var(--text-secondary);
    margin: 0;
}

.footer-links {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9em;
    transition: color 0.3s ease;
    position: relative;
    cursor: pointer !important;
    z-index: 10000;
}

.footer-link:hover {
    color: var(--accent);
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.3s ease;
}

.footer-link:hover::after {
    width: 100%;
}

.footer-social {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 24px;
    border-radius: 50px;
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    font-weight: 500;
    font-size: 0.95em;
    cursor: pointer !important;
    z-index: 10000;
}

.footer-social-link:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, #3d7cc7 0%, #5a4dd4 50%, #8b9aff 100%);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
}

.footer-social-link svg {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.footer-social-text {
    white-space: nowrap;
}

.footer-company {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.footer-made-by {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin: 0;
}

.anvibe-logo {
    font-family: 'Nunito', sans-serif;
    font-size: 1.2em;
    font-weight: 700;
}

.anvibe-text {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.company-names {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 1.2em;
    font-weight: 700;
}

.company-separator {
    color: var(--text-secondary);
    font-weight: 400;
}

.nocodo-text {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-company-info {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
    width: 100%;
}

.company-info-title {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.company-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.company-details p {
    font-size: 0.8em;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.footer-copyright {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
    text-align: center;
}

.footer-copyright p {
    font-size: 0.85em;
    color: var(--text-secondary);
    margin: 0;
}

/* Theme-specific footer styles */

/* Light theme: default footer styling uses var(--bg-secondary) */
body[data-theme="light"] .site-footer,
body:not([data-theme]) .site-footer {
    background: var(--bg-secondary);
    border-top-color: var(--border);
}

body[data-theme="light"] .footer-copyright,
body:not([data-theme]) .footer-copyright {
    border-top-color: var(--border);
}

body[data-theme="light"] .footer-company-info,
body:not([data-theme]) .footer-company-info {
    border-top-color: var(--border);
}

/* Dark theme: dark footer with subtle borders */
body[data-theme="dark"] .site-footer {
    background: var(--bg-secondary);
    border-top-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
}

body[data-theme="dark"] .footer-copyright {
    border-top-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="dark"] .footer-company-info {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Grey theme: grey footer matching container */
body[data-theme="grey"] .site-footer {
    background: var(--bg-secondary);
    border-top-color: var(--border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}

body[data-theme="grey"] .footer-copyright {
    border-top-color: var(--border);
}

body[data-theme="grey"] .footer-company-info {
    border-top-color: var(--border);
}

/* Vibe theme: gradient purple footer matching container */
body[data-theme="vibe"] .site-footer {
    background: linear-gradient(135deg, #4a90e2 0%, #6c5ce7 50%, #aab4ff 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 -4px 20px rgba(74, 144, 226, 0.3);
    color: #ffffff;
}

body[data-theme="vibe"] .site-footer * {
    color: #ffffff;
}

body[data-theme="vibe"] .footer-link {
    color: rgba(255, 255, 255, 0.9);
}

body[data-theme="vibe"] .footer-link:hover {
    color: #ffffff;
}

body[data-theme="vibe"] .footer-social-link {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

body[data-theme="vibe"] .footer-social-link:hover {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

body[data-theme="vibe"] .footer-made-by,
body[data-theme="vibe"] .company-details p,
body[data-theme="vibe"] .footer-copyright p {
    color: rgba(255, 255, 255, 0.9);
}

body[data-theme="vibe"] .company-info-title {
    color: #ffffff;
}

/* Vibe theme: ensure gradient text is visible on purple background */
body[data-theme="vibe"] .anvibe-text,
body[data-theme="vibe"] .nocodo-text {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-theme="vibe"] .footer-brand-name {
    background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.8) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-theme="vibe"] .footer-beta-badge {
    background: rgba(255, 255, 255, 0.95);
    color: #6c5ce7;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body[data-theme="vibe"] .footer-copyright {
    border-top-color: rgba(255, 255, 255, 0.1);
}

body[data-theme="vibe"] .footer-company-info {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Beige theme: beige footer matching container */
body[data-theme="beige"] .site-footer {
    background: var(--bg-secondary);
    border-top-color: var(--border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

body[data-theme="beige"] .footer-copyright {
    border-top-color: var(--border);
}

body[data-theme="beige"] .footer-company-info {
    border-top-color: var(--border);
}

/* Liquid Glass theme: footer with liquid glass effect */
body[data-theme="liquid"] .site-footer {
    background: rgba(153, 153, 153, 0.06);
    background-blend-mode: normal;
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    border-top: 2px solid rgba(255, 255, 255, 0.25);
    box-shadow: 
        inset 1px 1px 0px -0.5px rgba(85, 85, 85, 0.2),
        inset -1px -1px 0px -0.5px rgba(68, 68, 68, 0.15),
        inset 1px 1px 0.5px -1px rgba(255, 255, 255, 0.4),
        inset -1px -1px 0.5px -1px rgba(255, 255, 255, 0.4),
        inset 0px 0px 3px rgba(255, 255, 255, 0.4),
        inset 0px 0px 16px rgba(242, 242, 242, 0.25),
        0 8px 32px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: visible;
}

body[data-theme="liquid"] .site-footer::before {
    content: '';
    position: absolute;
    left: -4px;
    right: -2px;
    top: -4px;
    bottom: -2px;
    background: rgba(255, 255, 255, 0.04);
    background-blend-mode: normal;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
}

body[data-theme="liquid"] .site-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(to right, rgba(255, 255, 255, 0.4) 0%, transparent 15%, transparent 85%, rgba(255, 255, 255, 0.4) 100%),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 0%, transparent 15%, transparent 85%, rgba(255, 255, 255, 0.4) 100%);
    pointer-events: none;
    z-index: 0;
    border-radius: inherit;
}

body[data-theme="liquid"] .footer-copyright {
    border-top-color: rgba(255, 255, 255, 0.25);
}

body[data-theme="liquid"] .footer-company-info {
    border-top-color: rgba(255, 255, 255, 0.25);
}

/* Glass theme: footer with glassmorphic effect */
body[data-theme="glass"] .site-footer {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body[data-theme="glass"] .footer-copyright {
    border-top-color: rgba(255, 255, 255, 0.35);
}

body[data-theme="glass"] .footer-company-info {
    border-top-color: rgba(255, 255, 255, 0.35);
}

/* Responsive footer */
@media (max-width: 768px) {
    
    .footer-links {
        flex-direction: column;
        gap: 16px;
    }
    
    .footer-content {
        gap: 24px;
    }
    
    .site-footer {
        padding: 30px 15px 15px;
    }
    
    .company-info-title {
        font-size: 0.85em;
    }
    
    .company-details p {
        font-size: 0.75em;
    }
    
    .footer-social-link {
        padding: 10px 18px;
        font-size: 0.85em;
        gap: 10px;
    }
    
    .footer-social-link svg {
        width: 28px;
        height: 28px;
    }
    
    .footer-social-text {
        white-space: normal;
        text-align: center;
    }
}

/* Hide cursor on touch devices */
@media (hover: none) and (pointer: coarse) {
    #custom-cursor {
        display: none !important;
    }

    * {
        cursor: auto !important;
    }
}