:root {
    --royal: #0A74B0;
    --navy: #075786;  /* Updated to lighter navy */
    --warm-red: #DE5340;
    --khaki-extra-light: #F6F0E2;
    --khaki-light: #F3EDDF;
    --taupe-light: #CFCBBE;
    --taupe-dark: #83807A;
    --bandage: #E7B89E;
    --turq: #5AB2B4;
    --mustard: #EEC046;
    --gray-linen: #858585;
    --pale-plum: #0095ad;
    --bubble: #5AB2B4;
}

/* Force portrait orientation lock for mobile and tablet */
@media screen and (max-width: 1024px) {
    html {
        -webkit-orientation: portrait;
        -moz-orientation: portrait;
        -ms-orientation: portrait;
        -o-orientation: portrait;
    }
    
    body {
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
        background-color: #064367 !important; /* Updated mobile background to match */
    }
    
    @media (orientation: landscape) and (max-height: 600px) {
        body::before {
            content: "📄 Please rotate your device to portrait mode for the best experience";
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(6, 67, 103, 0.95); /* Updated to match new background */
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            padding: 20px;
            z-index: 9999;
            box-sizing: border-box;
            backdrop-filter: blur(5px);
        }
        
        body > *:not(::before) {
            filter: blur(3px);
            pointer-events: none;
        }
    }
}

/* Top Navigation Section - FIXED: Changed from fixed to static */
.top-nav {
    position: static !important; /* Force static positioning */
    height: 42px;
    background-color: var(--navy);
    border-bottom: 1px solid #054167; /* Darker than navy */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.top-nav a {
    color: #CFCBBE;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin: 0 15px;
    transition: color 0.2s ease;
}

.top-nav a:hover {
    color: white;
}

/* Updated page background to new darker blue - REMOVED padding-top */
body {
    background-color: #064367 !important; /* Changed to new darker blue */
    font-family: 'Arial Rounded MT', Arial, sans-serif;
    min-height: 100vh;
    /* REMOVED: padding-top: 42px; - No longer needed since nav is not fixed */
}

#game-content {
    display: block;
    height: auto;
    padding: 0;
}

.game-grid-container {
    display: block;
    height: auto;
    flex: none;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 16px;
}

.controls-container {
    display: block;
    height: auto;
    max-width: none;
    min-width: 0;
    flex: none;
}

.game-controls,
.number-controls,
.user-account {
    display: block;
    height: auto;
    max-width: none;
    min-width: 0;
    order: initial;
    flex: none;
    margin-bottom: 1rem;
    border-radius: 16px;
}

.game-grid {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}

@media screen and (min-width: 1025px) {
    .game-grid-container {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .game-grid {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
    .game-grid-container {
        max-width: 90vw;
        margin: 0 auto;
    }
    
    .game-grid {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
    }
}

input[type="number"] {
    font-size: 16px !important;
}

/* Primary button styles */
.btn-primary {
    background-color: var(--royal) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3);
}
.btn-primary:hover:not(:disabled) {
    background-color: var(--turq) !important;
    box-shadow: 0 6px 16px rgba(90, 178, 180, 0.4);
    transform: translateY(-1px);
}

/* Timer button styles (when game is started) - All use Royal color */
.btn-timer-easy {
    background-color: var(--royal) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3);
}
.btn-timer-easy:hover:not(:disabled) {
    background-color: var(--navy) !important;
}

.btn-timer-medium {
    background-color: var(--royal) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3);
}
.btn-timer-medium:hover:not(:disabled) {
    background-color: var(--navy) !important;
}

.btn-timer-hard {
    background-color: var(--royal) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3);
}
.btn-timer-hard:hover:not(:disabled) {
    background-color: var(--navy) !important;
}

/* Success button styles (turquoise) */
.btn-success {
    background-color: var(--turq) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(90, 178, 180, 0.3);
}
.btn-success:hover:not(:disabled) {
    background-color: #4A9B9D !important;
    box-shadow: 0 6px 16px rgba(90, 178, 180, 0.4);
}

/* Danger button styles (warm red) */
.btn-danger {
    background-color: var(--warm-red) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(222, 83, 64, 0.3);
}
.btn-danger:hover:not(:disabled) {
    background-color: #C7462D !important;
    box-shadow: 0 6px 16px rgba(222, 83, 64, 0.4);
}

/* Number input button styles - All use Royal color */
.btn-easy {
    background-color: var(--royal) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3);
}
.btn-easy:hover:not(:disabled) {
    background-color: var(--navy) !important;
}

.btn-medium {
    background-color: var(--royal) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3);
}
.btn-medium:hover:not(:disabled) {
    background-color: var(--navy) !important;
}

.btn-hard {
    background-color: var(--royal) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3);
}
.btn-hard:hover:not(:disabled) {
    background-color: var(--navy) !important;
}

/* Disabled button styles */
.btn-disabled {
    background-color: var(--taupe-light) !important;
    color: var(--taupe-dark) !important;
    border: none !important;
    box-shadow: none;
}

.btn-disabled:disabled {
    background-color: var(--taupe-light) !important;
    color: var(--taupe-dark) !important;
    cursor: not-allowed;
}

.btn-easy:disabled, .btn-medium:disabled, .btn-hard:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary:disabled, .btn-success:disabled, .btn-danger:disabled,
.btn-disabled:disabled {
    background-color: var(--taupe-light) !important;
    color: var(--taupe-dark) !important;
}

/* Difficulty button styles for nav */
.btn-difficulty-easy {
    background-color: var(--turq) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(90, 178, 180, 0.3);
}
.btn-difficulty-easy:hover:not(:disabled) {
    background-color: #4A9B9D !important;
}

.btn-difficulty-medium {
    background-color: var(--pale-plum) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 149, 173, 0.3);
}
.btn-difficulty-medium:hover:not(:disabled) {
    background-color: #007A8A !important;
}

.btn-difficulty-hard {
    background-color: var(--royal) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3);
}
.btn-difficulty-hard:hover:not(:disabled) {
    background-color: var(--navy) !important;
}

/* Sudoku grid styling with candidate support */
.game-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: min(8px, 2vw);
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
    background: var(--khaki-extra-light);
    padding: min(16px, 4vw);
    box-shadow: 0 25px 50px -12px rgba(7, 63, 114, 0.25);
    border: 2px solid var(--taupe-light);
    border-radius: 12px;
    box-sizing: border-box;
}

.grid-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background-color: var(--taupe-light);
    padding: min(4px, 1vw);
    aspect-ratio: 1;
    border-radius: 6px;
}

.grid-cell {
    width: 100%;
    height: 100%;
    min-width: 25px;
    min-height: 25px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Arial Rounded MT', Arial, sans-serif;
    box-sizing: border-box;
    border-radius: 4px;
}

/* Main number display */
.main-number {
    font-weight: 900;
    font-size: clamp(14px, 4vw, 18px);
    color: var(--navy);
    z-index: 2;
    position: relative;
}

/* Candidates grid - 3x3 layout within each cell */
.candidates-grid {
    position: absolute;
    inset: 2px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1px;
    pointer-events: none;
    z-index: 1;
}

/* Individual candidate number styling */
.candidate-number {
    font-size: clamp(6px, 1.2vw, 9px);
    font-weight: 300;
    color: rgba(45, 69, 116, 0.65); /* Navy with transparency */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
    opacity: 0;
    line-height: 1;
    font-family: 'Arial Rounded MT', Arial, sans-serif;
}

/* Mobile optimization for candidates */
@media screen and (max-width: 768px) {
    .candidate-number {
        font-size: clamp(7px, 1.5vw, 10px);
    }
    
    .candidates-grid {
        inset: 3px;
        gap: 0.5px;
    }
}

/* Grid cell hover and interaction states */
.grid-cell:hover:not(:disabled) {
    background-color: #0A74B0; /* Royal Blue instead of turquoise */
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(7, 63, 114, 0.15);
}

.grid-cell:hover:not(:disabled) .main-number {
    color: white;
}

.grid-cell:disabled {
    background-color: var(--khaki-light);
    cursor: not-allowed;
}

.grid-cell:disabled .main-number {
    color: var(--navy);
}

/* Original puzzle cells - special styling but still clickable */
.grid-cell[data-original="true"] {
    background-color: var(--khaki-light) !important;
    cursor: pointer !important; /* Allow clicking for highlighting */
}

.grid-cell[data-original="true"] .main-number {
    color: var(--navy) !important;
    font-weight: 900 !important;
}

.grid-cell.selected {
    background-color: var(--warm-red) !important; /* Warm red background for selected cell */
    color: white !important; /* White text */
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(222, 83, 64, 0.4);
}

.grid-cell.selected .main-number {
    color: white !important;
}

/* Row/column/section highlighting with light pink background and Navy text */
.grid-cell.highlighted {
    background-color: #fce2e0 !important; /* Light pink background */
}

.grid-cell.highlighted .main-number {
    color: var(--navy) !important; /* Navy text */
}

.grid-cell.highlighted:disabled .main-number,
.grid-cell.highlighted[data-original="true"] .main-number {
    color: var(--navy) !important; /* Navy text */
}

/* Same-number highlighting with Royal Blue */
.grid-cell.same-number {
    background-color: #0A74B0 !important; /* Royal Blue */
}

.grid-cell.same-number .main-number {
    color: white !important;
    font-weight: 900 !important;
}

.grid-cell.same-number:disabled .main-number,
.grid-cell.same-number[data-original="true"] .main-number {
    color: white !important;
    font-weight: 900 !important;
}

.grid-cell.error {
    background-color: var(--warm-red) !important;
    animation: errorPulse 0.5s ease-in-out;
}

.grid-cell.error .main-number {
    color: white !important;
}

.grid-cell.error:disabled .main-number {
    color: white !important;
}

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

/* Auto-Candidate Toggle Button Styles */
.auto-candidate-toggle {
    width: 100%;
    height: 48px;
    border: 2px solid var(--taupe-light);
    border-radius: 8px;
    background: var(--khaki-extra-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Arial Rounded MT', Arial, sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--taupe-dark);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.auto-candidate-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    border-color: var(--royal);
}

.auto-candidate-toggle[data-active="true"] {
    background: var(--royal);
    color: white;
    border-color: var(--navy);
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3);
}

.auto-candidate-toggle[data-active="true"]:hover {
    background: var(--navy);
    box-shadow: 0 6px 16px rgba(10, 116, 176, 0.4);
}

.toggle-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.auto-candidate-toggle[data-active="true"] .toggle-icon {
    transform: scale(1.1);
}

.toggle-label {
    font-weight: 500;
    user-select: none;
}

/* Mobile optimization for toggle button */
@media screen and (max-width: 768px) {
    .auto-candidate-toggle {
        height: 52px;
        font-size: 15px;
    }
    
    .toggle-icon {
        width: 20px;
        height: 20px;
    }
}

.error-message {
    background-color: var(--warm-red);
    color: white;
    padding: 1rem;
    margin: 1rem 0;
    font-weight: bold;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(222, 83, 64, 0.3);
}

.loading-message {
    color: white;
    padding: 1rem;
    margin: 1rem 0;
    font-weight: bold;
    text-align: center;
    border-radius: 8px;
    /* Default background - will be overridden by difficulty-specific classes */
    background-color: var(--royal);
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3);
}

.loading-message-easy {
    background-color: var(--turq) !important;
    box-shadow: 0 4px 12px rgba(90, 178, 180, 0.3) !important;
}

.loading-message-medium {
    background-color: var(--pale-plum) !important;
    box-shadow: 0 4px 12px rgba(0, 149, 173, 0.3) !important;
}

.loading-message-hard {
    background-color: var(--royal) !important;
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3) !important;
}

/* Time bonus badge styles */
.time-bonus-badge {
    background: linear-gradient(135deg, var(--mustard), var(--bandage));
    color: var(--navy);
    font-weight: bold;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    margin: 0.5rem 0;
    box-shadow: 0 4px 8px rgba(238, 192, 70, 0.3);
}

/* Enhanced container styles */
.game-panel {
    background: var(--khaki-extra-light);
    border: 2px solid var(--taupe-light);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(7, 63, 114, 0.15);
}

/* Player account specific styles */
.player-account-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--navy);
}

.player-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.player-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.player-avatar {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--royal), var(--turq));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 900;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(10, 116, 176, 0.3);
}

.player-details h3 {
    color: var(--navy);
    font-weight: 900;
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.2;
}

.player-details .player-title {
    color: var(--taupe-dark);
    font-size: 0.75rem;
    margin: 0;
    line-height: 1.2;
}

.sign-out-btn {
    background: transparent;
    border: 1px solid var(--taupe-light);
    color: var(--taupe-dark);
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.sign-out-btn:hover {
    background: var(--taupe-light);
    color: var(--navy);
}

/* Stats grid layout */
.stats-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.stats-difficulty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.stat-card {
    background: white;
    border: 1px solid var(--taupe-light);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(7, 63, 114, 0.08);
    transition: all 0.2s ease;
}

.stat-card:hover {
    box-shadow: 0 4px 12px rgba(7, 63, 114, 0.15);
    transform: translateY(-1px);
}

.stat-card.main-stat {
    padding: 1.25rem 1rem;
}

.stat-card.difficulty-stat {
    padding: 0.75rem 0.5rem;
}

.stat-value {
    font-weight: 900;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.stat-value.large {
    font-size: 2.25rem;
}

.stat-value.medium {
    font-size: 1.5rem;
}

.stat-value.small {
    font-size: 1.25rem;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--taupe-dark);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.stat-label.main {
    font-size: 0.8rem;
}

/* Difficulty-specific colors */
.stat-value.total-wins {
    color: var(--turq);
}

.stat-value.high-score {
    color: var(--royal);
}

.stat-value.easy-wins {
    color: var(--turq);
}

.stat-value.medium-wins {
    color: var(--pale-plum);
}

.stat-value.hard-wins {
    color: var(--navy);
}

.stat-value.total-points {
    color: var(--warm-red);
}

/* Career points card */
.career-points-card {
    background: linear-gradient(135deg, var(--mustard), var(--bandage));
    border: none;
    color: var(--navy);
    text-align: center;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(238, 192, 70, 0.3);
}

.career-points-card .stat-value {
    color: var(--navy);
    font-size: 2rem;
    margin-bottom: 0.25rem;
}

.career-points-card .stat-label {
    color: var(--navy);
    font-weight: 700;
}

/* Responsive adjustments */
@media screen and (max-width: 480px) {
    .max-w-md {
        max-width: 95vw;
        padding: 2px;
    }
    
    .p-3 {
        padding: 0.5rem;
    }
    
    .p-4 {
        padding: 0.75rem;
    }
    
    .p-6 {
        padding: 1rem;
    }
    
    .gap-3 {
        gap: 0.5rem;
    }
    
    .mb-4 {
        margin-bottom: 0.75rem;
    }
    
    .mb-8 {
        margin-bottom: 1.5rem;
    }
}

/* Sync status indicator - UPDATED: No longer accounts for fixed nav */
.sync-status {
    position: fixed;
    top: 10px; /* CHANGED: Was 52px when nav was fixed */
    right: 10px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    z-index: 1000;
    transition: all 0.3s ease;
}

.sync-status.syncing {
    background-color: var(--mustard);
    color: var(--navy);
}

.sync-status.synced {
    background-color: var(--turq);
    color: white;
}

.sync-status.error {
    background-color: var(--warm-red);
    color: white;
}

/* Modal enhancements */
.modal-content {
    background: var(--khaki-extra-light);
    border: 2px solid var(--taupe-light);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(7, 63, 114, 0.3);
}

/* Input field styling */
input[type="email"], input[type="password"], input[type="number"], input[type="tel"] {
    background-color: white;
    border: 2px solid var(--taupe-light);
    border-radius: 8px;
    transition: all 0.2s ease;
}

input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="tel"]:focus {
    border-color: var(--royal);
    box-shadow: 0 0 0 3px rgba(10, 116, 176, 0.1);
    outline: none;
}

/* Tab button styling */
.tab-active {
    background-color: var(--royal) !important;
    color: white !important;
}

.tab-inactive {
    background-color: var(--taupe-light) !important;
    color: var(--taupe-dark) !important;
}

/* Logo and header styling */
.header-text {
    color: var(--khaki-extra-light);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

/* Navigation button enhancements */
.nav-btn {
    transition: all 0.2s ease;
    border-radius: 8px;
}

.nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* Special styling for auth messages */
.auth-success {
    color: var(--turq) !important;
}

.auth-error {
    color: var(--warm-red) !important;
}

.auth-info {
    color: var(--royal) !important;
}

/* How to Play section font styling */
#how-to-play-section p,
#how-to-play-section li {
    font-family: 'Roboto', sans-serif !important;
}
/* Mobile input improvements */
input[type="email"], 
input[type="password"], 
input[type="text"], 
input[type="number"],
textarea {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

/* Ensure mobile keyboards work properly */
@media (max-width: 768px) {
    input[type="email"], 
    input[type="password"], 
    input[type="text"], 
    input[type="number"],
    textarea {
        font-size: 16px !important; /* Prevents zoom on iOS */
        -webkit-appearance: none;
    }
}

/* Fix forgot password button visibility */
#forgot-btn {
    background-color: #f97316 !important; /* Orange */
    color: white !important;
    border: none !important;
}

#forgot-btn:hover {
    background-color: #ea580c !important; /* Darker orange */
}

/* Ensure all auth buttons are visible */
.auth-button {
    background-color: var(--royal) !important;
    color: white !important;
    border: none !important;
}