/* =========================================
   LIGHT THEME
========================================= */

body[data-theme="light"] {
    background-color: #f4f4f5;
    color: #18181b;
}

/* Header */
body[data-theme="light"] header {
    background-color: white;
    color: #18181b;
    border-bottom: 1px solid #e4e4e7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
body[data-theme="light"] header a,
body[data-theme="light"] header button {
    color: #18181b;
}

/* Sidebar */
body[data-theme="light"] aside {
    background-color: white;
    color: #18181b;
    border-right: 1px solid #e4e4e7;
    box-shadow: 2px 0 8px rgba(0,0,0,0.08);
}
body[data-theme="light"] aside a {
    color: #18181b;
}
body[data-theme="light"] aside a:hover {
    background-color: #f4f4f5;
}

/* Settings dropdown */
body[data-theme="light"] #settingsDropdown {
    background-color: white;
    color: #18181b;
    border: 1px solid #e4e4e7;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
body[data-theme="light"] #settingsDropdown button,
body[data-theme="light"] #settingsDropdown div {
    color: #18181b;
}
body[data-theme="light"] #settingsDropdown button:hover,
body[data-theme="light"] #settingsDropdown div:hover {
    background-color: #f4f4f5;
}

/* Homepage game cards */
body[data-theme="light"] .game-card {
    background-color: white;
    color: #18181b;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    border: 1px solid #e4e4e7;
}
body[data-theme="light"] .game-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    transform: translateY(-2px);
    border-color: #d4d4d8;
}
body[data-theme="light"] .game-card-desc {
    color: #71717a;
}
body[data-theme="light"] .game-card-arrow {
    color: #a1a1aa;
}

/* Game elements */
body[data-theme="light"] .game-result {
    background-color: #e4e4e7;
    color: #18181b;
}
body[data-theme="light"] .game-cell {
    border-color: #d1d5db;
    color: #18181b;
}
body[data-theme="light"] .page-description {
    color: #71717a;
}

/* Submit button — indigo, prominent */
body[data-theme="light"] .game-button {
    background-color: #4f46e5;
    color: white;
    font-weight: 600;
}
body[data-theme="light"] .game-button:hover {
    background-color: #4338ca;
}

/* Text input */
body[data-theme="light"] .game-input {
    background-color: white;
    color: #18181b;
    border: 2px solid #d4d4d8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
body[data-theme="light"] .game-input::placeholder {
    color: #a1a1aa;
}
body[data-theme="light"] .game-input:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}

/* City guess input (uses #guessInput, not .game-input) */
body[data-theme="light"] #guessInput {
    background-color: white;
    color: #18181b;
    border: 2px solid #d4d4d8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
body[data-theme="light"] #guessInput:focus {
    outline: none;
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79,70,229,0.12);
}

body[data-theme="light"] main a:not(.game-button):not(.game-card) {
    color: #4f46e5;
}


/* =========================================
   DARK THEME
========================================= */

body[data-theme="dark"] {
    background-color: #18181b;
    color: white;
}

/* Header */
body[data-theme="dark"] header {
    background-color: #09090b;
    color: white;
    border-bottom: 1px solid #27272a;
}
body[data-theme="dark"] header a,
body[data-theme="dark"] header button {
    color: white;
}

/* Sidebar */
body[data-theme="dark"] aside {
    background-color: #09090b;
    color: white;
    border-right: 1px solid #27272a;
}
body[data-theme="dark"] aside a {
    color: white;
}
body[data-theme="dark"] aside a:hover {
    background-color: #27272a;
}

/* Homepage game cards */
body[data-theme="dark"] .game-card {
    background-color: #27272a;
    color: white;
    border: 1px solid #3f3f46;
}
body[data-theme="dark"] .game-card:hover {
    background-color: #3f3f46;
    transform: translateY(-1px);
}
body[data-theme="dark"] .game-card-desc {
    color: #a1a1aa;
}
body[data-theme="dark"] .game-card-arrow {
    color: #52525b;
}

/* Game elements */
body[data-theme="dark"] .game-result {
    background-color: #27272a;
    color: white;
}
body[data-theme="dark"] .game-cell {
    border-color: #52525b;
    color: white;
}
body[data-theme="dark"] .page-description {
    color: #a1a1aa;
}

/* Submit button — indigo in dark mode too */
body[data-theme="dark"] .game-button {
    background-color: #4f46e5;
    color: white;
    font-weight: 600;
}
body[data-theme="dark"] .game-button:hover {
    background-color: #4338ca;
}

/* Text input */
body[data-theme="dark"] .game-input {
    background-color: #27272a;
    color: white;
    border: 2px solid #3f3f46;
}
body[data-theme="dark"] .game-input::placeholder {
    color: #71717a;
}
body[data-theme="dark"] .game-input:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129,140,248,0.2);
}

/* City guess input */
body[data-theme="dark"] #guessInput {
    background-color: #27272a;
    color: white;
    border: 2px solid #3f3f46;
}
body[data-theme="dark"] #guessInput:focus {
    outline: none;
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129,140,248,0.2);
}

body[data-theme="dark"] main a:not(.game-button):not(.game-card) {
    color: #818cf8;
}