:root {
    --primary: #6c5ce7;
    --primary-light: #a29bfe;
    --secondary: #e73c7e;
    --accent: #f1c40f;
    --success: #2ecc71;
    --danger: #e74c3c;
    --text: #ffffff;
    --text-dark: #2d3436;
    --bg-glass: rgba(255, 255, 255, 0.1);
    --bg-glass-heavy: rgba(255, 255, 255, 0.2);
    --border-glass: rgba(255, 255, 255, 0.3);
    --font: 'Poppins', sans-serif;
    --radius-lg: 24px;
    --radius-md: 16px;
    --shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}

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

body {
    font-family: var(--font);
    background: #1a1a2e;
    color: var(--text);
    /* Mobile Viewport Fix */
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

#app-container {
    width: 100%;
    height: 100%;
    max-width: 500px;
    background: #24243e;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

@media (min-width: 600px) {
    #app-container {
        height: 90vh;
        border-radius: 30px;
        border: 4px solid rgba(255, 255, 255, 0.1);
    }
}

/* --- SCREENS --- */
.screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: linear-gradient(to bottom, #24243e, #302b63, #0f0c29);
    z-index: 10;
    color: var(--text);
    padding: 20px;
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
    /* Add safe area */
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.screen.active {
    display: flex;
}

/* Glassmorphism Classes */
.glass-panel {
    background: var(--bg-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow);
    width: 100%;
    /* Ensure they fill container */
}

.glass-card {
    background: var(--bg-glass-heavy);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-glass);
    padding: 24px;
    width: 100%;
    max-width: 100%;
}

#start-screen {
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: white;
    text-align: center;
    overflow: hidden;
    position: absolute;
    /* Fixed from relative */
    flex-direction: column;
    justify-content: center;
    /* HOME screen stays centered */
    align-items: center;
    padding-bottom: 0;
    /* No scroll needed here */
}


@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Floating Shapes Decoration */
#start-screen::before {
    content: '⭐ 🎵 🇩🇪 ✨';
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.3;
    animation: spin 60s linear infinite;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    padding-top: 10%;
}

@keyframes spin {
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.game-title {
    font-size: 4rem;
    font-weight: 900;
    margin-bottom: 30px;
    letter-spacing: 2px;
    text-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
    animation: pulseTitle 2s infinite ease-in-out;
}

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

    50% {
        transform: scale(1.05);
    }

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

.subtitle {
    font-size: 1.2rem;
    margin-bottom: 40px;
    font-weight: 600;
    opacity: 0.9;
}

/* MENU SYSTEM */
.big-play-btn {
    position: relative;
    z-index: 200;
    /* FORCE ON TOP */
    padding: 15px 60px;
    font-size: 1.8rem;
    background: white;
    color: #e73c7e;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    margin-bottom: 20px;
    touch-action: manipulation;
}

@media (max-width: 480px) {
    .game-title {
        font-size: 2.8rem;
    }

    .big-play-btn {
        padding: 12px 40px;
        font-size: 1.5rem;
    }
}

.big-play-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.big-play-btn:active {
    transform: translateY(2px);
}

/* Remove old dashboard entry position to inline it */
#dashboard-entry {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    margin-bottom: 20px;
}

.glass-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: background 0.3s;
}

.glass-btn:hover {
    background: rgba(255, 255, 255, 0.4);
}

#game-screen {
    background: #f0f8ff;
    overflow: hidden;
    /* NO SCROLLING IN GAME */
    justify-content: space-between;
    /* HUD Top, Controls Bottom */
    /* Full screen game */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* HUD */
/* HUD - Vertical Stack on Left */
/* HUD - Split Layout */
#hud-left {
    position: absolute;
    top: calc(15px + env(safe-area-inset-top));
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 100;
}

#hud-right {
    position: absolute;
    top: calc(10px + env(safe-area-inset-top));
    right: 8px;
    /* Moved further right */
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

/* CENTER HUD (Level) */
#hud-center {
    position: static;
    transform: none;
    z-index: 100;
    width: auto;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    padding: 3px 10px !important;
    /* Smaller padding */
}

.hud-pill {
    background: white;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

/* GAME AREA - CRITICAL FIX */
#game-area {
    width: 100%;
    flex: 1;
    position: relative;
    background: linear-gradient(to bottom, #87CEEB, #E0F7FA);
    /* BLUE SKY RESTORED */
    border: 5px solid #bdc3c7;
    border-radius: 0 0 20px 20px;
    overflow: hidden;
    z-index: 50;
}

/* Cleaned up Castle CSS */

/* XP Bar Adjustment */
#hud-xp-bar-container {
    width: 80px !important;
    /* Shrunk from 120px */
    height: 6px !important;
}

#hud-level-text-parent {
    font-size: 0.7rem !important;
    /* Shrunk font */
}

/* FLOATING TEXT FX */
.floating-score {
    position: absolute;
    color: #f1c40f;
    font-weight: 800;
    font-size: 1.5rem;
    text-shadow: 2px 2px 0 #000;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    z-index: 100;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-50px) scale(1.5);
        opacity: 0;
    }
}

#ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #2ecc71;
    border-top: 5px solid #27ae60;
    z-index: 55;
}

/* MISSILES */
/* MISSILES - LARGE */
.falling-word {
    position: absolute;
    padding: 5px 11px;
    /* Reduced padding */
    border-radius: 10px;
    color: white;
    font-weight: 700;
    font-size: 0.9rem;
    /* Reduced font size */
    letter-spacing: 0.5px;
    background: #2c3e50;
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 70;
    white-space: normal;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    transition: transform 0.1s, top 0.016s linear;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 88px;
    max-width: 220px;
}

.fw-top {
    font-size: 0.98rem;
    font-weight: 800;
}

.fw-bottom {
    font-size: 0.72rem;
    opacity: 0.8;
    border-top: 1px solid rgba(255,255,255,0.2);
    margin-top: 3px;
    padding-top: 3px;
    width: 100%;
}

/* Gender Colors */
.falling-word.gender-der {
    background: #3498db !important;
}

/* Blue */
.falling-word.gender-die {
    background: #e74c3c !important;
}

/* Red */
.falling-word.gender-das {
    background: #2ecc71 !important;
}

/* Green */

/* CONTROLS */
#controls {
    width: 100%;
    padding: 20px;
    background: white;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
    z-index: 80;
}

#answers-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    max-width: 400px;
    margin: 0 auto;
}

.answer-btn {
    padding: 15px;
    border: none;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border-radius: 15px;
    font-weight: 800;
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    color: #333;
    transition: transform 0.1s, background 0.2s;
    text-transform: capitalize;
    touch-action: manipulation;
}

@media (max-width: 480px) {
    .answer-btn {
        padding: 12px;
        font-size: 0.95rem;
    }

    #answers-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
    }

    /* REMOVED FALLING WORD OVERRIDE TO KEEP THEM SMALL */
}

/* CASTLE RESTORED */
#castle {
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    /* Small Scale */
    height: 50px;
    z-index: 60;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.tower {
    width: 20px;
    height: 50px;
    background: #7f8c8d;
    border: 1px solid #2c3e50;
    border-radius: 2px 2px 0 0;
    position: relative;
    background-size: 7px 10px;
}

.tower::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -1px;
    width: 22px;
    height: 4px;
    background-image: linear-gradient(to right, #2c3e50 50%, transparent 50%);
    background-size: 5px 100%;
}

.gate {
    width: 35px;
    height: 35px;
    background: #95a5a6;
    border: 1px solid #2c3e50;
    position: relative;
    border-radius: 4px 4px 0 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.gate::after {
    content: '';
    width: 20px;
    height: 25px;
    background: #34495e;
    border-radius: 10px 10px 0 0;
    border: 1px solid #2c3e50;
}

/* SMALLER WORDS */
.falling-word {
    padding: 6px 12px !important;
    font-size: 0.9rem !important;
    min-width: 88px !important;
    max-width: 220px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.answer-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    background: white;
}

.answer-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Colorful variants (nth-child logic handled by CSS grid or generic optional classes, but keeping uniform white/clean is often better for reading text. Let's try uniform clean pop.) */

/* MODALS / DASHBOARD - GAME STYLE */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    /* Darker backdrop */
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 200;
    backdrop-filter: blur(5px);
}

.modal-card {
    background: linear-gradient(135deg, #2c3e50, #000000);
    color: white;
    padding: 24px;
    border-radius: 20px;
    text-align: center;
    border: 2px solid #3498db;
    box-shadow: 0 0 30px rgba(52, 152, 219, 0.5);
    width: 90%;
    max-width: 420px;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-card h2 {
    margin-bottom: 15px;
    /* Reduced */
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #3498db;
    font-size: 1.2rem;
    /* Smaller title */
}

.close-btn {
    color: white;
    border: 1px solid white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    background: transparent;
    cursor: pointer;
}

/* Dashboard Stats */
.level-circle {
    width: 70px;
    /* Reduced from 100px */
    height: 70px;
    /* Reduced from 100px */
    background: linear-gradient(to bottom, #f1c40f, #e67e22);
    color: #2d3436;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto 15px;
    border: 3px solid white;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.6);
}

.level-circle span {
    font-size: 1.8rem;
    /* Reduced */
    font-weight: 800;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 8px;
    /* Reduced */
    border-radius: 10px;
}

.stat-val {
    display: block;
    font-size: 1.2rem;
    /* Reduced */
    font-weight: bold;
    color: #3498db;
}

.stat-label {
    font-size: 0.75rem;
    /* Reduced */
    opacity: 0.8;
}

/* PROGRESS BAR */
.progress-bar-bg {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    width: 100%;
    height: 10px;
    overflow: hidden;
    margin: 10px auto;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(to right, #f1c40f, #e67e22);
    width: 0%;
    transition: width 0.5s ease-out;
}

/* MISTAKE CARDS */
.mistake-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    color: #1f2d3d;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-left: 5px solid #e74c3c;
    transition: transform 0.2s;
    font-weight: 700;
    line-height: 1.35;
    white-space: normal;
    word-break: break-word;
}

.mistake-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08);
}

#firebase-mistakes-list .mistake-card {
    border-left-color: #e74c3c;
}

#learned-words-list .mistake-card {
    border-left-color: #2ecc71;
    background: #f4fff8;
    color: #14532d;
}

.mistake-info {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.mistake-german {
    font-size: 1.1rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 2px;
}

.mistake-english {
    font-size: 0.9rem;
    color: #7f8c8d;
    font-style: italic;
    font-weight: 500;
}

.speak-btn-card {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f2f6;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    color: #34495e;
    transition: background 0.2s;
}

.speak-btn-card:hover {
    background: #dfe6e9;
    color: #2980b9;
}

@media (max-width: 480px) {

    #hud-left,
    #hud-right {
        top: 10px;
        gap: 5px;
    }

    .hud-pill {
        padding: 5px 12px;
        font-size: 0.85rem;
    }

    #game-area {
        border-width: 2px;
        border-radius: 0;
    }

    #hud-center {
        padding: 4px 10px !important;
    }
}

/* --- ONBOARDING STYLES --- */
.onboarding-container {
    width: 100%;
    max-width: 450px;
    padding: 20px;
    text-align: center;
}

.onboarding-step {
    display: none;
    flex-direction: column;
    gap: 20px;
    animation: fadeInSlideUp 0.5s ease-out;
}

.onboarding-step.active {
    display: flex;
}

/* --- FINAL TECHY COLOR OVERRIDES --- */
:root {
    --primary: #00c2ff;
    --primary-light: #6fe1ff;
    --secondary: #00f5b0;
    --accent: #ffb703;
    --success: #2af598;
    --danger: #ff5d8f;
    --bg-glass: rgba(8, 34, 68, 0.36);
    --bg-glass-heavy: rgba(9, 44, 88, 0.48);
    --border-glass: rgba(116, 219, 255, 0.35);
}

body {
    background:
        radial-gradient(1200px 500px at -5% -15%, rgba(0, 194, 255, 0.42), transparent 60%),
        radial-gradient(900px 420px at 108% 0%, rgba(0, 245, 176, 0.32), transparent 58%),
        radial-gradient(820px 340px at 50% 120%, rgba(255, 183, 3, 0.24), transparent 60%),
        #03111f;
}

#app-container {
    background: linear-gradient(160deg, #061a2e 0%, #082743 38%, #092f4b 68%, #0b2238 100%);
    border: 1px solid rgba(103, 215, 255, 0.32);
    box-shadow: 0 30px 80px rgba(0, 18, 35, 0.65), inset 0 1px 0 rgba(173, 242, 255, 0.14);
}

.screen {
    background:
        radial-gradient(900px 360px at -12% -10%, rgba(0, 194, 255, 0.28), transparent 64%),
        radial-gradient(700px 300px at 112% 0%, rgba(0, 245, 176, 0.22), transparent 66%),
        linear-gradient(180deg, #06203a 0%, #0a2a46 52%, #0a1f34 100%);
}

.glass-panel,
.glass-card,
.modern-card-panel,
.account-card,
.m-stat-card,
.l-modern-card,
.category-card {
    background: linear-gradient(145deg, rgba(7, 44, 82, 0.62), rgba(9, 29, 58, 0.56));
    border-color: rgba(121, 228, 255, 0.36);
    box-shadow: 0 12px 26px rgba(0, 26, 55, 0.42), inset 0 1px 0 rgba(198, 245, 255, 0.13);
}

.modern-wide-btn,
.onboarding-btn,
.modern-play-btn {
    background: linear-gradient(135deg, #00b2ff, #00d9ff 40%, #00e7c0);
    color: #05253c;
    border: 1px solid rgba(182, 245, 255, 0.55);
    box-shadow: 0 14px 28px rgba(0, 194, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.modern-play-btn:hover,
.modern-wide-btn:hover,
.onboarding-btn:hover {
    background: linear-gradient(135deg, #00ccff, #58e4ff 44%, #3ff3ca);
    box-shadow: 0 16px 30px rgba(0, 194, 255, 0.42);
}

.modern-text-btn {
    color: #8ae9ff;
}

.category-card.active,
.l-modern-card.active {
    background: linear-gradient(145deg, rgba(0, 194, 255, 0.4), rgba(0, 245, 176, 0.3));
    border-color: rgba(179, 247, 255, 0.8);
    box-shadow: 0 10px 22px rgba(0, 194, 255, 0.38);
}

#game-screen {
    background: linear-gradient(180deg, #041a2f, #0a2b48);
}

#game-area {
    background:
        radial-gradient(650px 280px at 50% -15%, rgba(128, 228, 255, 0.5), rgba(128, 228, 255, 0)),
        linear-gradient(180deg, #4fc3ff 0%, #79ddff 36%, #b4ecff 62%, #c2f0ff 100%);
    border: 3px solid rgba(118, 220, 255, 0.85);
    box-shadow: inset 0 -35px 55px rgba(14, 75, 122, 0.3), 0 14px 28px rgba(0, 24, 48, 0.34);
}

#ground {
    background: linear-gradient(180deg, #14d8a0, #06b888);
    border-top: 5px solid #2af598;
}

#controls {
    background: linear-gradient(180deg, rgba(6, 33, 58, 0.88), rgba(8, 39, 67, 0.96));
    border-top: 1px solid rgba(120, 224, 255, 0.45);
    box-shadow: 0 -10px 24px rgba(0, 20, 42, 0.45);
}

.falling-word {
    background: linear-gradient(135deg, #124b7b, #1d5f96) !important;
    border: 2px solid rgba(176, 238, 255, 0.92) !important;
    box-shadow: 0 8px 18px rgba(0, 35, 68, 0.46), 0 0 0 1px rgba(0, 194, 255, 0.28) inset !important;
}

.falling-word.new-word {
    background: linear-gradient(135deg, #0077b6, #00b4d8, #00dca7) !important;
    color: #021f31;
    text-shadow: none;
}

.falling-word.gender-der {
    background: linear-gradient(135deg, #2b90ff, #12b8ff) !important;
}

.falling-word.gender-die {
    background: linear-gradient(135deg, #ff4f84, #ff6f8b) !important;
}

.falling-word.gender-das {
    background: linear-gradient(135deg, #15d79c, #36efb8) !important;
    color: #043127;
}

.answer-btn {
    border: 1px solid rgba(154, 236, 255, 0.48);
    background: linear-gradient(160deg, #f8fdff, #e4f8ff);
    color: #063958;
    box-shadow: 0 8px 16px rgba(0, 25, 48, 0.18);
}

.answer-btn:nth-child(4n + 1) {
    background: linear-gradient(160deg, #edfaff, #def8ff);
}

.answer-btn:nth-child(4n + 2) {
    background: linear-gradient(160deg, #f8f6ff, #ebf2ff);
}

.answer-btn:nth-child(4n + 3) {
    background: linear-gradient(160deg, #effffc, #ddfff7);
}

.answer-btn:nth-child(4n + 4) {
    background: linear-gradient(160deg, #fff8ef, #fff1dd);
}

.answer-btn:hover {
    border-color: rgba(97, 218, 255, 0.7);
    box-shadow: 0 10px 20px rgba(0, 30, 58, 0.24);
}

#hud-center {
    background: linear-gradient(145deg, rgba(3, 43, 70, 0.72), rgba(6, 33, 57, 0.72));
    border: 1px solid rgba(125, 224, 255, 0.62);
    box-shadow: 0 8px 18px rgba(0, 18, 36, 0.35);
}

.progress-bar-fill {
    background: linear-gradient(90deg, #00c2ff, #00f5b0);
    box-shadow: 0 0 10px rgba(0, 194, 255, 0.42);
}

#bottom-nav {
    background: linear-gradient(135deg, rgba(5, 32, 58, 0.96), rgba(6, 47, 78, 0.96));
    border-top: 1px solid rgba(127, 228, 255, 0.52);
    box-shadow: 0 -14px 30px rgba(0, 17, 34, 0.55);
}

.nav-item {
    color: rgba(167, 236, 255, 0.7);
}

.nav-item.active {
    color: #dffbff;
}

.nav-item.active i {
    color: #57d8ff;
    text-shadow: 0 0 12px rgba(87, 216, 255, 0.75);
}

/* --- TECHY COLOR THEME REFRESH --- */
:root {
    --primary: #00c2ff;
    --primary-light: #6fe1ff;
    --secondary: #00f5b0;
    --accent: #ffb703;
    --success: #2af598;
    --danger: #ff5d8f;
    --bg-glass: rgba(8, 34, 68, 0.36);
    --bg-glass-heavy: rgba(9, 44, 88, 0.48);
    --border-glass: rgba(116, 219, 255, 0.35);
    --shadow: 0 14px 36px rgba(0, 27, 52, 0.45);
}

body {
    background:
        radial-gradient(1200px 500px at -5% -15%, rgba(0, 194, 255, 0.42), transparent 60%),
        radial-gradient(900px 420px at 108% 0%, rgba(0, 245, 176, 0.32), transparent 58%),
        radial-gradient(820px 340px at 50% 120%, rgba(255, 183, 3, 0.24), transparent 60%),
        #03111f;
}

#app-container {
    background:
        linear-gradient(160deg, #061a2e 0%, #082743 38%, #092f4b 68%, #0b2238 100%);
    border: 1px solid rgba(103, 215, 255, 0.32);
    box-shadow: 0 30px 80px rgba(0, 18, 35, 0.65), inset 0 1px 0 rgba(173, 242, 255, 0.14);
}

#app-container::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 32%),
        repeating-linear-gradient(0deg, rgba(106, 218, 255, 0.04), rgba(106, 218, 255, 0.04) 1px, transparent 1px, transparent 6px);
    mix-blend-mode: screen;
    opacity: 0.85;
}

.screen {
    background:
        radial-gradient(900px 360px at -12% -10%, rgba(0, 194, 255, 0.28), transparent 64%),
        radial-gradient(700px 300px at 112% 0%, rgba(0, 245, 176, 0.22), transparent 66%),
        linear-gradient(180deg, #06203a 0%, #0a2a46 52%, #0a1f34 100%);
}

.glass-panel,
.glass-card,
.modern-card-panel,
.account-card,
.m-stat-card,
.l-modern-card,
.category-card {
    background: linear-gradient(145deg, rgba(7, 44, 82, 0.62), rgba(9, 29, 58, 0.56));
    border-color: rgba(121, 228, 255, 0.36);
    box-shadow: 0 12px 26px rgba(0, 26, 55, 0.42), inset 0 1px 0 rgba(198, 245, 255, 0.13);
}

.dashboard-header {
    background: linear-gradient(to bottom, rgba(0, 194, 255, 0.28), rgba(0, 194, 255, 0.02));
}

.profile-avatar-glow {
    background: linear-gradient(35deg, #00c2ff, #00f5b0, #ffb703);
    box-shadow: 0 0 18px rgba(0, 194, 255, 0.42);
}

.modern-wide-btn,
.onboarding-btn {
    background: linear-gradient(130deg, #0bb8ff, #00d8ff 40%, #00dca7);
    border: 1px solid rgba(185, 245, 255, 0.42);
    color: #02243e;
    box-shadow: 0 10px 24px rgba(0, 194, 255, 0.32);
}

.modern-wide-btn:hover,
.onboarding-btn:hover {
    box-shadow: 0 14px 28px rgba(0, 194, 255, 0.4);
}

.modern-play-btn {
    background: linear-gradient(135deg, #00b2ff, #00d9ff 40%, #00e7c0);
    color: #05253c;
    border: 1px solid rgba(182, 245, 255, 0.55);
    box-shadow: 0 14px 28px rgba(0, 194, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.modern-play-btn:hover {
    background: linear-gradient(135deg, #00ccff, #58e4ff 44%, #3ff3ca);
    box-shadow: 0 16px 30px rgba(0, 194, 255, 0.42);
}

.btn-icon {
    background: rgba(1, 33, 56, 0.24);
    color: #ffffff;
}

.modern-text-btn {
    color: #8ae9ff;
}

.category-card:hover,
.l-modern-card:hover {
    border-color: rgba(162, 238, 255, 0.62);
}

.category-card.active,
.l-modern-card.active {
    background: linear-gradient(145deg, rgba(0, 194, 255, 0.4), rgba(0, 245, 176, 0.3));
    border-color: rgba(179, 247, 255, 0.8);
    box-shadow: 0 10px 22px rgba(0, 194, 255, 0.38);
}

#game-screen {
    background: linear-gradient(180deg, #041a2f, #0a2b48);
}

#game-area {
    background:
        radial-gradient(650px 280px at 50% -15%, rgba(128, 228, 255, 0.5), rgba(128, 228, 255, 0)),
        linear-gradient(180deg, #4fc3ff 0%, #79ddff 36%, #b4ecff 62%, #c2f0ff 100%);
    border: 3px solid rgba(118, 220, 255, 0.85);
    box-shadow: inset 0 -35px 55px rgba(14, 75, 122, 0.3), 0 14px 28px rgba(0, 24, 48, 0.34);
}

#game-area::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.09) 1px, transparent 1px, transparent 28px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0));
    opacity: 0.44;
}

#ground {
    background: linear-gradient(180deg, #14d8a0, #06b888);
    border-top: 5px solid #2af598;
}

#controls {
    background: linear-gradient(180deg, rgba(6, 33, 58, 0.88), rgba(8, 39, 67, 0.96));
    border-top: 1px solid rgba(120, 224, 255, 0.45);
    box-shadow: 0 -10px 24px rgba(0, 20, 42, 0.45);
}

.falling-word {
    background: linear-gradient(135deg, #124b7b, #1d5f96);
    border: 2px solid rgba(176, 238, 255, 0.92);
    box-shadow: 0 8px 18px rgba(0, 35, 68, 0.46), 0 0 0 1px rgba(0, 194, 255, 0.28) inset;
}

.falling-word.new-word {
    background: linear-gradient(135deg, #0077b6, #00b4d8, #00dca7);
    color: #021f31;
    text-shadow: none;
}

.falling-word.gender-der {
    background: linear-gradient(135deg, #2b90ff, #12b8ff) !important;
}

.falling-word.gender-die {
    background: linear-gradient(135deg, #ff4f84, #ff6f8b) !important;
}

.falling-word.gender-das {
    background: linear-gradient(135deg, #15d79c, #36efb8) !important;
    color: #043127;
}

.answer-btn {
    border: 1px solid rgba(154, 236, 255, 0.48);
    background: linear-gradient(160deg, #f8fdff, #e4f8ff);
    color: #063958;
    box-shadow: 0 8px 16px rgba(0, 25, 48, 0.18);
}

.answer-btn:nth-child(4n + 1) {
    background: linear-gradient(160deg, #edfaff, #def8ff);
}

.answer-btn:nth-child(4n + 2) {
    background: linear-gradient(160deg, #f8f6ff, #ebf2ff);
}

.answer-btn:nth-child(4n + 3) {
    background: linear-gradient(160deg, #effffc, #ddfff7);
}

.answer-btn:nth-child(4n + 4) {
    background: linear-gradient(160deg, #fff8ef, #fff1dd);
}

.answer-btn:hover {
    border-color: rgba(97, 218, 255, 0.7);
    box-shadow: 0 10px 20px rgba(0, 30, 58, 0.24);
}

#hud-center {
    background: linear-gradient(145deg, rgba(3, 43, 70, 0.72), rgba(6, 33, 57, 0.72));
    border: 1px solid rgba(125, 224, 255, 0.62);
    box-shadow: 0 8px 18px rgba(0, 18, 36, 0.35);
}

.progress-bar-bg {
    background: rgba(145, 231, 255, 0.24);
}

.progress-bar-fill {
    background: linear-gradient(90deg, #00c2ff, #00f5b0);
    box-shadow: 0 0 10px rgba(0, 194, 255, 0.42);
}

#bottom-nav {
    background: linear-gradient(135deg, rgba(5, 32, 58, 0.96), rgba(6, 47, 78, 0.96));
    border-top: 1px solid rgba(127, 228, 255, 0.52);
    box-shadow: 0 -14px 30px rgba(0, 17, 34, 0.55);
}

.nav-item {
    color: rgba(167, 236, 255, 0.7);
}

.nav-item.active {
    color: #dffbff;
}

.nav-item.active i {
    color: #57d8ff;
    text-shadow: 0 0 12px rgba(87, 216, 255, 0.75);
}

/* --- ACCOUNT HUB & PROFILE CARD --- */
.dashboard-header.account-hub {
    padding: 30px 20px 0;
    background: none;
}

.account-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 25px;
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(162, 155, 254, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.account-profile {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-avatar-glow {
    position: relative;
    padding: 5px;
    background: linear-gradient(45deg, var(--primary-light), var(--accent));
    border-radius: 50%;
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.4);
}

.account-card .profile-avatar {
    width: 70px;
    height: 70px;
    background: var(--bg-glass-heavy);
    color: white;
    font-size: 2rem;
    border: none;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.user-info-stack h2 {
    font-size: 1.6rem;
    margin: 0;
    background: linear-gradient(to right, #fff, #a29bfe);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.status-badge {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-light);
    opacity: 0.8;
}

.account-actions {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
    display: flex;
    justify-content: center;
}

.primary-pulse {
    background: var(--primary);
    animation: pulse-border 2s infinite;
}

.modern-text-btn.danger {
    color: #ff7675;
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(108, 92, 231, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(108, 92, 231, 0);
    }
}

/* --- LEADERBOARD / RANKS STYLES --- */
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
}

.leader-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    gap: 15px;
    transition: transform 0.2s;
}

.leader-item:hover {
    transform: scale(1.02);
}

.leader-item.user-me {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.4), rgba(162, 155, 254, 0.2));
    border: 1px solid var(--primary-light);
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.3);
}

.leader-rank {
    font-size: 1.2rem;
    font-weight: 800;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-light);
}

.leader-item:nth-child(1) .leader-rank {
    background: #f1c40f;
    color: #000;
}

/* Gold */
.leader-item:nth-child(2) .leader-rank {
    background: #bdc3c7;
    color: #000;
}

/* Silver */
.leader-item:nth-child(3) .leader-rank {
    background: #e67e22;
    color: #000;
}

/* Bronze */

.leader-name {
    flex: 1;
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
}

.leader-score {
    font-weight: 800;
    color: var(--accent);
    font-size: 1rem;
}

.your-rank-banner {
    background: var(--bg-glass-heavy);
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 25px;
    border: 1px dashed var(--primary-light);
    width: 100%;
}

.your-rank-banner h3 {
    font-size: 0.9rem;
    opacity: 0.7;
    margin-bottom: 10px;
    text-align: center;
}

.rank-stat-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.rank-stat {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.rank-stat b {
    font-size: 1.5rem;
    color: white;
}

.rank-stat small {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.6;
}

.l-word-count {
    font-size: 0.7rem;
    opacity: 0.6;
    margin-top: 4px;
    display: block;
}

@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.onboarding-title {
    font-size: 2.2rem;
    font-weight: 800;
    margin-bottom: 8px;
    background: linear-gradient(to right, #fff, #a29bfe);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.onboarding-desc {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: 20px;
}

.input-group {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-weight: 600;
    font-size: 0.9rem;
    padding-left: 4px;
}

.modern-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    color: white;
    font-size: 1rem;
    font-family: var(--font);
    outline: none;
    transition: all 0.3s;
}

.modern-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--primary-light);
    box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.2);
}

.grid-select {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.lang-card,
.level-card,
.gender-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.lang-card:hover,
.level-card:hover,
.gender-card:hover,
.interest-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.lang-card.active,
.level-card.active,
.gender-card.active,
.interest-card.active {
    background: var(--primary);
    border-color: var(--primary-light);
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.4);
}

.interest-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.interest-card span:first-child {
    font-size: 1.5rem;
}

.flag-icon {
    display: inline-block;
    width: 1.4em;
    height: 1em;
    border-radius: 0.2em;
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    position: relative;
    flex: 0 0 auto;
}

.lang-flag {
    width: 1.7rem;
    height: 1.15rem;
}

.inline-lang-flag {
    width: 1.5rem;
    height: 1rem;
    margin-left: 2px;
}

#header-lang-flag {
    width: 1.4rem;
    height: 0.95rem;
    border-color: rgba(255, 255, 255, 0.8);
}

.flag-de {
    background: linear-gradient(to bottom, #000000 0 33.33%, #dd0000 33.33% 66.66%, #ffce00 66.66% 100%);
}

.flag-es {
    background: linear-gradient(to bottom, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%);
}

.flag-us {
    background:
        linear-gradient(90deg, #3c3b6e 0 40%, transparent 40% 100%) 0 0 / 45% 55% no-repeat,
        repeating-linear-gradient(to bottom, #b22234 0 8%, #ffffff 8% 16%);
}

.flag-jp {
    background: radial-gradient(circle at 50% 50%, #bc002d 0 35%, #ffffff 36% 100%);
}

.flag-kr {
    background: radial-gradient(circle at 50% 50%, #cd2e3a 0 28%, #0047a0 29% 56%, #ffffff 57% 100%);
}

.flag-tr {
    background: #e30a17;
}

.flag-tr::before {
    content: "";
    position: absolute;
    left: 33%;
    top: 50%;
    width: 38%;
    height: 38%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 7px 0 0 3px #e30a17;
}

.flag-tr::after {
    content: "★";
    position: absolute;
    left: 49%;
    top: 50%;
    transform: translate(-50%, -56%);
    color: #ffffff;
    font-size: 0.46em;
    line-height: 1;
}


.flag-fr {
    background: linear-gradient(to right, #0055a4 0 33.33%, #ffffff 33.33% 66.66%, #ef4135 66.66% 100%);
}

.flag-ru {
    background: linear-gradient(to bottom, #ffffff 0 33.33%, #0039a6 33.33% 66.66%, #d52b1e 66.66% 100%);
}

.flag-cn {
    background: #de2910;
}

.flag-cn::before {
    content: "★";
    position: absolute;
    left: 20%;
    top: 24%;
    transform: translate(-50%, -50%);
    color: #ffde00;
    font-size: 0.6em;
    line-height: 1;
}

.lang-name {
    font-weight: 700;
    font-size: 0.9rem;
}

.onboarding-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 50px;
    padding: 16px 32px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.onboarding-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
}

.onboarding-btn:active {
    transform: translateY(1px);
}

/* Category Cards (Dashboard) */
.category-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.category-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.category-card.active {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.4), rgba(162, 155, 254, 0.3));
    border-color: var(--primary-light);
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
}

.cat-icon {
    font-size: 1.8rem;
    min-width: 40px;
    text-align: center;
}

.cat-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cat-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: white;
}

.cat-count {
    font-size: 0.75rem;
    opacity: 0.7;
    color: rgba(255, 255, 255, 0.8);
}

/* Loading Spinner */
.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.1);
    border-top: 5px solid var(--primary);
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#loading-screen {
    background: #0f0c29;
    z-index: 1000;
}

.step-indicator {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
}

.step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.step-dot.active {
    background: var(--primary);
    width: 24px;
    border-radius: 4px;
}

/* --- BOTTOM NAVIGATION --- */
/* --- BOTTOM NAVIGATION --- */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 70px;
    height: auto;
    background: rgba(15, 12, 41, 0.95);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid var(--border-glass);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
    padding-top: 10px;
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.7rem;
    font-weight: 600;
}

.nav-item i {
    font-size: 1.5rem;
}

.nav-item.active {
    color: var(--primary-light);
    transform: translateY(-5px);
}

/* DROPDOWN MENU */
/* DROPDOWN MENU - FIXED MODAL STYLE FOR MOBILE RELIABILITY */
.dropdown-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 320px;
    max-height: 80vh;
    background: rgba(44, 62, 80, 0.98);
    border-radius: 16px;
    padding: 15px;
    z-index: 99999;
    /* Higher than everything */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 0;
    overflow-y: auto;
    animation: zoomIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(15px);
    display: none;
    /* Controlled by JS */
}

/* BACKDROP for Dropdown (Optional but good) - reusing .modal-overlay logic effectively by checking clicks */

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    font-size: 1rem;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

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

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(5px);
}

.dropdown-item .flag {
    font-size: 1.5rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

/* --- ADVENTURE MAP --- */
.map-container {
    padding: 20px;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-bottom: 100px;
}

.map-node {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--bg-glass-heavy);
    border: 3px solid var(--border-glass);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

.map-node.unlocked {
    background: var(--primary);
    border-color: var(--primary-light);
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.5);
}

.map-node::after {
    content: '';
    position: absolute;
    bottom: -40px;
    width: 4px;
    height: 40px;
    background: var(--border-glass);
}

.map-node:last-child::after {
    display: none;
}

.node-label {
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-weight: 700;
    background: var(--bg-glass-heavy);
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 0.7rem;
    border: 1px solid var(--border-glass);
    z-index: 10;
}

/* --- SHOP & SKINS --- */
.shop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 20px;
    width: 100%;
}

.skin-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}

.skin-card.active {
    border-color: var(--accent);
    background: rgba(241, 196, 15, 0.1);
}

.skin-preview {
    font-size: 3rem;
    margin-bottom: 10px;
}

/* ========================================
   CATEGORY WORD PREVIEW MODAL
   ======================================== */
.category-modal {
    background: var(--bg-secondary, #24243e);
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--primary-light, #a29bfe);
}

.modal-close {
    background: none;
    border: none;
    font-size: 2.5rem;
    color: white;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.1);
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.words-list {
    display: grid;
    gap: 10px;
}

.word-item {
    background: rgba(255, 255, 255, 0.05);
    padding: 12px 15px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.2s;
}

.word-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.word-text {
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
}

.word-meaning {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.btn-secondary {
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: white;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-primary {
    padding: 12px 24px;
    border: none;
    background: linear-gradient(135deg, var(--primary, #6c5ce7), var(--primary-light, #a29bfe));
    color: white;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(108, 92, 231, 0.4);
}

.btn-primary:active {
    transform: translateY(0);
}

@media (max-width: 480px) {
    .category-modal {
        width: 95%;
        max-height: 85vh;
    }
    
    .modal-header h2 {
        font-size: 1.2rem;
    }
    
    .word-text {
        font-size: 1rem;
    }
    
    .word-meaning {
        font-size: 0.85rem;
    }
    
    .modal-footer {
        flex-direction: column;
    }
    
    .btn-secondary,
    .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

.coin-badge {
    padding: 4px 12px;
    background: var(--accent);
    color: var(--text-dark);
    border-radius: 20px;
    font-weight: 800;
    font-size: 0.9rem;
}

/* --- LEADERBOARD --- */
.leaderboard-list {
    width: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.leader-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    background: var(--bg-glass);
    border-radius: var(--radius-md);
}

.leader-rank {
    width: 30px;
    font-weight: 900;
    font-size: 1.2rem;
    color: var(--accent);
}

.leader-name {
    flex: 1;
    font-weight: 600;
}

.leader-score {
    font-weight: 800;
    color: var(--primary-light);
}

/* --- STREAK BADGE --- */
.streak-pill {
    padding: 6px 15px;
    background: linear-gradient(to right, #ff7675, #fab1a0);
    border-radius: 20px;
    color: white;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 10px rgba(255, 118, 117, 0.4);
}

/* Ninja Mode Toggle */
.ninja-toggle {
    background: #2d3436;
    border: 1px solid #636e72;
    padding: 10px 20px;
    border-radius: 50px;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.ninja-toggle.active {
    background: var(--danger);
    border-color: #ff7675;
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.5);
}

/* --- PAUSE MODAL ENHANCEMENT --- */
#pause-modal .modal-card {
    background: rgba(15, 12, 41, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    border: 2px solid rgba(255, 255, 255, 0.1);
    padding: 40px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

#pause-modal h2 {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 30px;
    text-shadow: 0 0 10px rgba(241, 196, 15, 0.5);
}

.pause-btn-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.pause-action-btn {
    padding: 16px;
    border-radius: 50px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#resume-btn {
    background: var(--primary);
    color: white;
    border: none;
}

#resume-btn:hover {
    background: var(--primary-light);
    box-shadow: 0 0 20px rgba(108, 92, 231, 0.6);
    transform: scale(1.05);
}

#home-btn {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: white;
}

/* --- MODERN DASHBOARD --- */
#dashboard-screen {
    flex-direction: column;
    padding: 0;
    padding-top: env(safe-area-inset-top);
    /* Safe Area */
    overflow-y: auto;
}

.dashboard-header {
    background: linear-gradient(to bottom, rgba(108, 92, 231, 0.4), transparent);
    padding: 20px 20px 10px;
    /* Reduced top padding since screen has safe-area */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    /* Prevent crushing */
}

.user-profile-summary {
    display: flex;
    align-items: center;
    gap: 15px;
}

.profile-avatar {
    width: 60px;
    height: 60px;
    background: var(--bg-glass-heavy);
    border: 2px solid var(--primary-light);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    box-shadow: 0 0 15px rgba(108, 92, 231, 0.3);
}

.user-meta h2 {
    font-size: 1.4rem;
    color: white;
}

.level-badge {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--primary-light);
    background: rgba(108, 92, 231, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
}

.dashboard-content {
    padding: 10px 20px 100px;
}

/* MODERN DASHBOARD LAYOUT */
.dashboard-header {
    margin-bottom: 20px;
}

.account-hub {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.account-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px !important;
    /* REDUCED PADDING */
}

.account-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    /* REDUCED GAP */
    width: 100%;
}

.profile-avatar-glow {
    position: relative;
}

.profile-avatar {
    width: 40px;
    /* REDUCED SIZE */
    height: 40px;
    /* REDUCED SIZE */
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    /* REDUCED SIZE */
    border: 2px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.user-meta h2 {
    font-size: 1.1rem;
    /* REDUCED SIZE */
    margin: 0;
    font-weight: 700;
}

.level-badge {
    font-size: 0.7rem;
    /* REDUCED SIZE */
    opacity: 0.8;
    background: rgba(255, 255, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 2px;
}

input[type="text"] {
    position: relative;
    z-index: 10000;
    pointer-events: auto;
}

/* Modern Stats Hub */
.modern-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 30px;
}

.m-stat-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.m-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}

.m-stat-info small {
    display: block;
    font-size: 0.7rem;
    opacity: 0.6;
    text-transform: uppercase;
}

.m-stat-info b {
    font-size: 1.1rem;
    color: white;
}

/* Practice Hub (Language Cards) */
.language-hub {
    margin-bottom: 30px;
}

.hub-title {
    font-size: 1.1rem;
    margin-bottom: 15px;
    opacity: 0.9;
}

.lang-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

#language-screen #full-lang-switcher {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

#language-screen {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

#language-screen .language-hub-content {
    padding-bottom: calc(130px + env(safe-area-inset-bottom)) !important;
}

#language-screen #full-lang-switcher .l-modern-card {
    padding: 12px 6px;
    border-radius: 12px;
}

#language-screen #full-lang-switcher .l-modern-card span {
    font-size: 0.82rem;
    margin-bottom: 4px;
}

#language-screen #full-lang-switcher .l-word-count {
    font-size: 0.62rem;
}

@media (max-width: 380px) {
    #language-screen #full-lang-switcher {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.l-modern-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 20px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.l-modern-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.1);
}

.l-modern-card.active {
    border: 2px solid var(--primary-light);
    background: rgba(108, 92, 231, 0.2);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.l-flag-large {
    width: 2.2rem;
    height: 1.5rem;
    margin-bottom: 8px;
}

.l-modern-card span {
    display: block;
    font-weight: 700;
    margin-bottom: 5px;
}

.l-status {
    font-size: 0.65rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.1);
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    opacity: 0.7;
}

.l-modern-card.active .l-status {
    background: var(--primary-light);
    color: var(--primary-dark);
    opacity: 1;
}

.modern-wide-btn {
    width: 100%;
    background: var(--bg-glass-heavy);
    color: white;
    border: 1px solid var(--border-glass);
    padding: 15px;
    border-radius: var(--radius-md);
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.modern-wide-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    background: var(--bg-glass);
    color: white;
}

.modern-card-panel {
    background: var(--bg-glass-heavy);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 30px;
}

.quick-mistakes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.mistake-preview-card {
    background: rgba(231, 76, 60, 0.1);
    border-left: 3px solid var(--danger);
    padding: 10px 15px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.mistake-preview-card b {
    color: var(--danger);
}

.modern-text-btn {
    background: none;
    border: none;
    color: var(--primary-light);
    font-weight: 700;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0;
}

/* --- ENHANCED START BUTTON --- */
.main-cta-play {
    position: relative;
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    border: none;
    border-radius: 50px;
    padding: 20px 60px;
    color: white;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 2px;
    cursor: pointer;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.4);
    transition: all 0.3s;
    margin: 20px 0;
}

.main-cta-play:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(108, 92, 231, 0.6);
}

.cta-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: cta-pulse-anim 2s infinite;
}

@keyframes cta-pulse-anim {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* --- DEDICATED LANGUAGE SCREEN --- */
#language-screen {
    background: linear-gradient(to bottom, #1a1a2e, #16213e);
}

.screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 20px 20px;
}

.back-btn-modern {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
}

.language-hub-content {
    padding: 0 20px 100px;
}

.section-desc {
    opacity: 0.6;
    margin-bottom: 25px;
    font-size: 0.9rem;
}

.language-summary-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(108, 92, 231, 0.3);
}

.language-summary-card:hover {
    background: rgba(108, 92, 231, 0.1);
    border-color: var(--primary-light);
}

.l-summary-info small {
    display: block;
    font-size: 0.7rem;
    opacity: 0.6;
    margin-bottom: 4px;
}

.icon-btn-plain {
    background: none;
    border: none;
    color: white;
    opacity: 0.5;
    font-size: 1rem;
}

/* --- PROACTIVE LEARNING HUB STYLES --- */
.dash-cta-hub {
    background: linear-gradient(135deg, rgba(108, 92, 231, 0.2), rgba(162, 155, 254, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Daily Goal Ring */
.daily-goal-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.goal-ring-container {
    position: relative;
    width: 60px;
    height: 60px;
}

.goal-ring {
    width: 100%;
    height: 100%;
}

.ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
}

.ring-fill {
    fill: none;
    stroke: var(--primary-light);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.8s ease-out;
    transform: rotate(-90deg);
    transform-origin: center;
}

.goal-stats {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.goal-stats span {
    display: block;
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
}

.goal-stats small {
    font-size: 0.5rem;
    opacity: 0.6;
    letter-spacing: 1px;
}

.goal-info h3 {
    font-size: 1rem;
    margin-bottom: 2px;
}

.goal-info p {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Big Play Button */
.modern-play-btn {
    background: var(--primary);
    border: none;
    border-radius: 18px;
    padding: 12px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: white;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(108, 92, 231, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 100%;
}

.modern-play-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 25px rgba(108, 92, 231, 0.5);
    background: var(--primary-light);
}

.modern-play-btn:active {
    transform: translateY(0) scale(0.98);
}

.btn-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}

.btn-text {
    text-align: left;
}

.btn-text span {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 1px;
}

.btn-text small {
    font-size: 0.7rem;
    opacity: 0.8;
    text-transform: uppercase;
}

/* Learning history: floating practice button above bottom navigation */
#mistakes-screen .glass-panel {
    padding-bottom: 168px;
}

#mistakes-screen #btn-practice-mistakes,
#mistakes-screen #btn-practice-learned {
    position: fixed !important;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(78px + env(safe-area-inset-bottom));
    width: min(90vw, 500px) !important;
    max-width: min(90vw, 500px) !important;
    margin: 0 !important;
    z-index: 1101;
    box-sizing: border-box;
    padding: 12px 14px !important;
}

#mistakes-screen #btn-practice-mistakes .btn-icon,
#mistakes-screen #btn-practice-learned .btn-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 1rem;
}

#mistakes-screen #btn-practice-mistakes .btn-text span,
#mistakes-screen #btn-practice-learned .btn-text span {
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

#mistakes-screen #btn-practice-mistakes .btn-text small,
#mistakes-screen #btn-practice-learned .btn-text small {
    font-size: 0.64rem;
    line-height: 1.25;
}

/* Mini Progress Bars for Lang Cards */
.l-progress-mini {
    width: 80%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin: 10px auto;
    overflow: hidden;
}

.l-pb-fill {
    height: 100%;
    background: var(--primary-light);
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* --- ULTRA-SMALL DEVICE REFINEMENTS --- */
@media (max-width: 360px) {

    .grid-select,
    .shop-grid,
    #answers-container {
        grid-template-columns: 1fr !important;
    }

    .game-title {
        font-size: 2.2rem;
    }

    .main-cta-play {
        padding: 15px 40px;
        font-size: 1.2rem;
    }
}

/* --- BOTTOM NAVIGATION --- */
#bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    /* Standard accessible height */
    background: linear-gradient(135deg, rgba(8, 47, 73, 0.96), rgba(15, 23, 42, 0.95));
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid rgba(125, 211, 252, 0.35);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
    /* iOS Safe Area */
    box-shadow: 0 -10px 30px rgba(2, 6, 23, 0.55);
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(186, 230, 253, 0.58);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    flex: 1;
    /* Touch targets */
    height: 100%;
}

.nav-item i {
    font-size: 1.4rem;
    margin-bottom: 4px;
    transition: transform 0.3s ease;
}

.nav-item.active {
    color: #e0f2fe;
}

.nav-item.active i {
    transform: translateY(-3px);
    color: #7dd3fc;
    text-shadow: 0 0 10px rgba(125, 211, 252, 0.75);
}

/* Ensure onboarding content doesn't overflow */
.onboarding-step {
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 20px;
}

.onboarding-step.active {
    display: flex;
}

/* --- FINAL THEME ENFORCER (LAST RULES) --- */
:root {
    --primary: #00c2ff;
    --primary-light: #6fe1ff;
    --secondary: #00f5b0;
    --accent: #ffb703;
    --success: #2af598;
    --danger: #ff5d8f;
    --bg-glass: rgba(8, 34, 68, 0.36);
    --bg-glass-heavy: rgba(9, 44, 88, 0.48);
    --border-glass: rgba(116, 219, 255, 0.35);
}

body {
    background:
        radial-gradient(1200px 500px at -5% -15%, rgba(0, 194, 255, 0.42), transparent 60%),
        radial-gradient(900px 420px at 108% 0%, rgba(0, 245, 176, 0.32), transparent 58%),
        radial-gradient(820px 340px at 50% 120%, rgba(255, 183, 3, 0.24), transparent 60%),
        #03111f;
}

#app-container {
    background: linear-gradient(160deg, #061a2e 0%, #082743 38%, #092f4b 68%, #0b2238 100%);
    border: 1px solid rgba(103, 215, 255, 0.32);
    box-shadow: 0 30px 80px rgba(0, 18, 35, 0.65), inset 0 1px 0 rgba(173, 242, 255, 0.14);
}

.screen {
    background:
        radial-gradient(900px 360px at -12% -10%, rgba(0, 194, 255, 0.28), transparent 64%),
        radial-gradient(700px 300px at 112% 0%, rgba(0, 245, 176, 0.22), transparent 66%),
        linear-gradient(180deg, #06203a 0%, #0a2a46 52%, #0a1f34 100%);
}

.glass-panel,
.glass-card,
.modern-card-panel,
.account-card,
.m-stat-card,
.l-modern-card,
.category-card {
    background: linear-gradient(145deg, rgba(7, 44, 82, 0.62), rgba(9, 29, 58, 0.56));
    border-color: rgba(121, 228, 255, 0.36);
    box-shadow: 0 12px 26px rgba(0, 26, 55, 0.42), inset 0 1px 0 rgba(198, 245, 255, 0.13);
}

.modern-wide-btn,
.onboarding-btn,
.modern-play-btn {
    background: linear-gradient(135deg, #00b2ff, #00d9ff 40%, #00e7c0);
    color: #05253c;
    border: 1px solid rgba(182, 245, 255, 0.55);
    box-shadow: 0 14px 28px rgba(0, 194, 255, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.modern-play-btn:hover,
.modern-wide-btn:hover,
.onboarding-btn:hover {
    background: linear-gradient(135deg, #00ccff, #58e4ff 44%, #3ff3ca);
    box-shadow: 0 16px 30px rgba(0, 194, 255, 0.42);
}

.modern-text-btn {
    color: #8ae9ff;
}

.category-card.active,
.l-modern-card.active {
    background: linear-gradient(145deg, rgba(0, 194, 255, 0.4), rgba(0, 245, 176, 0.3));
    border-color: rgba(179, 247, 255, 0.8);
    box-shadow: 0 10px 22px rgba(0, 194, 255, 0.38);
}

#game-screen {
    background: linear-gradient(180deg, #041a2f, #0a2b48);
}

#game-area {
    background:
        radial-gradient(650px 280px at 50% -15%, rgba(128, 228, 255, 0.5), rgba(128, 228, 255, 0)),
        linear-gradient(180deg, #4fc3ff 0%, #79ddff 36%, #b4ecff 62%, #c2f0ff 100%);
    border: 3px solid rgba(118, 220, 255, 0.85);
    box-shadow: inset 0 -35px 55px rgba(14, 75, 122, 0.3), 0 14px 28px rgba(0, 24, 48, 0.34);
}

#ground {
    background: linear-gradient(180deg, #14d8a0, #06b888);
    border-top: 5px solid #2af598;
}

#controls {
    background: linear-gradient(180deg, rgba(6, 33, 58, 0.88), rgba(8, 39, 67, 0.96));
    border-top: 1px solid rgba(120, 224, 255, 0.45);
    box-shadow: 0 -10px 24px rgba(0, 20, 42, 0.45);
}

.falling-word {
    background: linear-gradient(135deg, #124b7b, #1d5f96) !important;
    border: 2px solid rgba(176, 238, 255, 0.92) !important;
    box-shadow: 0 8px 18px rgba(0, 35, 68, 0.46), 0 0 0 1px rgba(0, 194, 255, 0.28) inset !important;
}

.falling-word.new-word {
    background: linear-gradient(135deg, #0077b6, #00b4d8, #00dca7) !important;
    color: #021f31;
    text-shadow: none;
}

.falling-word.gender-der {
    background: linear-gradient(135deg, #2b90ff, #12b8ff) !important;
}

.falling-word.gender-die {
    background: linear-gradient(135deg, #ff4f84, #ff6f8b) !important;
}

.falling-word.gender-das {
    background: linear-gradient(135deg, #15d79c, #36efb8) !important;
    color: #043127;
}

.answer-btn {
    border: 1px solid rgba(154, 236, 255, 0.48);
    background: linear-gradient(160deg, #f8fdff, #e4f8ff);
    color: #063958;
    box-shadow: 0 8px 16px rgba(0, 25, 48, 0.18);
}

.answer-btn:nth-child(4n + 1) {
    background: linear-gradient(160deg, #edfaff, #def8ff);
}

.answer-btn:nth-child(4n + 2) {
    background: linear-gradient(160deg, #f8f6ff, #ebf2ff);
}

.answer-btn:nth-child(4n + 3) {
    background: linear-gradient(160deg, #effffc, #ddfff7);
}

.answer-btn:nth-child(4n + 4) {
    background: linear-gradient(160deg, #fff8ef, #fff1dd);
}

.answer-btn:hover {
    border-color: rgba(97, 218, 255, 0.7);
    box-shadow: 0 10px 20px rgba(0, 30, 58, 0.24);
}

#hud-center {
    background: linear-gradient(145deg, rgba(3, 43, 70, 0.72), rgba(6, 33, 57, 0.72));
    border: 1px solid rgba(125, 224, 255, 0.62);
    box-shadow: 0 8px 18px rgba(0, 18, 36, 0.35);
}

.progress-bar-fill {
    background: linear-gradient(90deg, #00c2ff, #00f5b0);
    box-shadow: 0 0 10px rgba(0, 194, 255, 0.42);
}

#bottom-nav {
    background: linear-gradient(135deg, rgba(5, 32, 58, 0.96), rgba(6, 47, 78, 0.96));
    border-top: 1px solid rgba(127, 228, 255, 0.52);
    box-shadow: 0 -14px 30px rgba(0, 17, 34, 0.55);
}

.nav-item {
    color: rgba(167, 236, 255, 0.7);
}

.nav-item.active {
    color: #dffbff;
}

.nav-item.active i {
    color: #57d8ff;
    text-shadow: 0 0 12px rgba(87, 216, 255, 0.75);
}

/* --- GAMEPLAY SPACE TUNING (FINAL OVERRIDES) --- */
#game-screen {
    padding: 0 !important;
    padding-top: env(safe-area-inset-top) !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
    justify-content: flex-start !important;
}

#game-area {
    flex: 1 1 auto !important;
    min-height: 58vh;
}

#controls {
    padding: 8px 10px 10px !important;
    max-height: 38vh;
    overflow-y: auto;
}

#answers-container {
    gap: 8px !important;
    padding: 4px !important;
}

.answer-btn {
    padding: 10px !important;
    font-size: 0.9rem !important;
    min-height: 46px;
}

#castle {
    bottom: 36px;
}

.falling-word {
    padding: 4px 9px;
    font-size: 0.82rem;
    max-width: 190px;
}

.fw-top {
    font-size: 0.9rem;
}

.fw-bottom {
    font-size: 0.64rem;
}

@media (max-width: 480px) {
    #game-area {
        min-height: 60vh;
    }

    #controls {
        max-height: 36vh;
        padding: 7px 8px 9px !important;
    }

    .answer-btn {
        min-height: 42px;
        font-size: 0.85rem !important;
        padding: 8px !important;
    }
}

/* --- UX REFRESH: TECH COMMAND CENTER --- */
:root {
    --ux-bg-0: #041321;
    --ux-bg-1: #06253c;
    --ux-bg-2: #0b3d5e;
    --ux-cyan: #40d9ff;
    --ux-teal: #2df7c4;
    --ux-amber: #ffc857;
    --ux-card: rgba(8, 31, 52, 0.72);
    --ux-border: rgba(128, 231, 255, 0.34);
}

body {
    font-family: 'Space Grotesk', var(--font);
    background: radial-gradient(circle at 25% 15%, #0f3a59 0%, #061523 42%, #02080e 100%);
}

#app-container {
    background: linear-gradient(180deg, #051425 0%, #071c31 36%, #030a13 100%);
}

#app-container::before {
    content: '';
    position: absolute;
    inset: -10% -20% auto -20%;
    height: 58%;
    background: radial-gradient(circle at 25% 25%, rgba(64, 217, 255, 0.28), transparent 55%),
        radial-gradient(circle at 78% 10%, rgba(45, 247, 196, 0.2), transparent 46%);
    pointer-events: none;
    z-index: 0;
}

#app-container::after {
    content: '';
    position: absolute;
    inset: auto -30% -15% -30%;
    height: 42%;
    background: radial-gradient(circle at 50% 100%, rgba(17, 130, 185, 0.26), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.screen {
    background: linear-gradient(180deg, rgba(7, 25, 41, 0.92) 0%, rgba(6, 24, 40, 0.95) 35%, rgba(2, 10, 17, 0.96) 100%);
}

#dashboard-screen,
#mistakes-screen,
#insights-screen,
#settings-screen,
#language-screen {
    position: relative;
    z-index: 1;
}

#dashboard-version-label {
    font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
    letter-spacing: 0.08em;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(208, 247, 255, 0.66) !important;
}

.dashboard-content {
    padding: 10px 14px calc(98px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dashboard-content > * {
    order: 10;
}

.dashboard-content > .language-summary-card {
    order: 1;
}

.dashboard-content > #lang-dropdown-menu {
    order: 2;
}

.dashboard-content > .dash-cta-hub {
    order: 3;
}

.dashboard-content > #dashboard-practice-categories {
    order: 4;
}

.dashboard-header.account-hub {
    margin-bottom: 8px;
}

.dashboard-header .account-card {
    position: relative;
    border: 1px solid rgba(114, 222, 255, 0.34);
    background: linear-gradient(142deg, rgba(6, 39, 64, 0.8), rgba(7, 29, 49, 0.82));
    box-shadow: 0 12px 24px rgba(1, 8, 15, 0.42);
}

.dashboard-header .account-profile {
    position: relative;
    padding-right: 118px;
}

.dashboard-header .dashboard-header-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    margin-left: 0 !important;
    z-index: 8;
}

.profile-avatar {
    background: linear-gradient(135deg, #0f7cc6, #11b7f7, #35e7d0);
}

.user-meta h2 {
    font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
    letter-spacing: 0.02em;
}

.level-badge {
    border: 1px solid rgba(138, 235, 255, 0.45);
    background: rgba(12, 63, 97, 0.56);
    color: #ccf5ff;
}

.dashboard-header-actions .lang-switch-btn-header,
.dashboard-header-actions #settings-btn-header {
    box-shadow: 0 8px 14px rgba(0, 10, 19, 0.3);
}

.dashboard-header-actions #settings-btn-header {
    position: relative;
    z-index: 3;
    border-color: rgba(150, 229, 255, 0.8) !important;
    background: linear-gradient(145deg, rgba(15, 76, 117, 0.95), rgba(8, 49, 84, 0.95)) !important;
    color: #f2fcff !important;
    box-shadow: 0 0 0 1px rgba(118, 220, 255, 0.38), 0 9px 16px rgba(0, 13, 24, 0.4) !important;
}

.dashboard-header-actions #settings-btn-header .settings-gear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    font-family: 'Segoe UI Symbol', 'Noto Sans Symbols', sans-serif;
}

.modern-card-panel,
.glass-card,
.account-card,
.m-stat-card,
.l-modern-card,
.category-card {
    border: 1px solid var(--ux-border);
    background: linear-gradient(150deg, var(--ux-card), rgba(9, 34, 56, 0.64));
    box-shadow: 0 12px 22px rgba(1, 8, 15, 0.42);
}

.dashboard-card {
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

.dashboard-level-card {
    border-left-color: #2df7c4 !important;
}

.dashboard-insight-card {
    border-left-color: #ffc857 !important;
}

.dashboard-history-card {
    border-left-color: #ff7a7a !important;
}

.dashboard-categories-card {
    border-left-color: #58b6ff !important;
}

.dashboard-section-title {
    font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
    font-size: 1rem !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(218, 248, 255, 0.92);
    margin-bottom: 2px !important;
}

.language-summary-card {
    border-left-color: #40d9ff !important;
}

.daily-goal-box {
    background: linear-gradient(145deg, rgba(9, 42, 68, 0.72), rgba(8, 29, 49, 0.68));
    border: 1px solid rgba(100, 212, 255, 0.32);
    border-radius: 14px;
}

.mission-chip {
    border-color: rgba(110, 223, 255, 0.35) !important;
    background: linear-gradient(140deg, rgba(9, 43, 70, 0.7), rgba(7, 32, 53, 0.74)) !important;
    color: #dcf8ff;
}

.modern-stats-grid {
    margin-bottom: 2px;
}

.m-stat-card {
    min-height: 76px;
}

.m-stat-icon {
    background: linear-gradient(145deg, rgba(16, 118, 174, 0.52), rgba(17, 195, 227, 0.32));
}

.m-stat-info b {
    color: #eafaff;
}

.category-card .cat-count {
    color: rgba(197, 245, 255, 0.88);
}

.category-card.active,
.l-modern-card.active {
    border-color: rgba(80, 227, 255, 0.78);
    box-shadow: 0 0 0 1px rgba(80, 227, 255, 0.35), 0 14px 24px rgba(0, 11, 20, 0.44);
}

.modern-play-btn {
    border: 1px solid rgba(137, 238, 255, 0.42);
    background: linear-gradient(135deg, rgba(16, 129, 192, 0.94), rgba(13, 83, 139, 0.94));
    box-shadow: 0 14px 24px rgba(0, 10, 18, 0.44);
}

#dash-start-btn {
    background: linear-gradient(135deg, #0fb9ff, #0a7fd4);
}

#dash-start-btn .btn-icon {
    background: rgba(255, 255, 255, 0.17);
}

#dash-practice-category-btn {
    min-height: 46px;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 13px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

#dash-practice-category-btn:hover,
#dash-practice-category-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(2, 19, 33, 0.42);
    filter: brightness(1.05);
}

#dashboard-practice-categories.category-highlight {
    box-shadow: 0 0 0 2px rgba(99, 225, 255, 0.5), 0 14px 24px rgba(0, 12, 20, 0.45);
    animation: categoryPulse 0.95s ease-in-out 2;
}

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

    50% {
        transform: scale(1.01);
    }

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

.screen-header h2 {
    font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
    letter-spacing: 0.04em;
}

#insights-screen .modern-card-panel,
#settings-screen .modern-card-panel {
    border-radius: 16px;
}

#mistakes-screen h1 {
    font-family: 'Rajdhani', 'Space Grotesk', sans-serif;
    letter-spacing: 0.04em;
}

.history-summary-row {
    margin-top: 6px;
}

.history-summary-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.history-tabs {
    border: 1px solid rgba(125, 216, 255, 0.24);
}

#mistakes-screen .glass-panel {
    border: 1px solid rgba(114, 223, 255, 0.34);
    background: linear-gradient(180deg, rgba(249, 252, 255, 0.94), rgba(241, 249, 255, 0.95));
    box-shadow: 0 16px 24px rgba(0, 11, 20, 0.35);
}

#mistakes-screen #btn-practice-mistakes,
#mistakes-screen #btn-practice-learned {
    bottom: calc(73px + env(safe-area-inset-bottom));
    width: min(92vw, 500px) !important;
    border-radius: 14px;
}

#mistakes-screen #btn-practice-mistakes {
    border: 1px solid rgba(255, 171, 171, 0.44);
}

#mistakes-screen #btn-practice-learned {
    border: 1px solid rgba(159, 246, 218, 0.48);
}

#bottom-nav {
    background: linear-gradient(135deg, rgba(4, 28, 46, 0.97), rgba(3, 40, 68, 0.97));
    border-top: 1px solid rgba(126, 230, 255, 0.44);
}

.nav-item {
    color: rgba(189, 244, 255, 0.68);
}

.nav-item.active {
    color: #e7fdff;
}

@media (max-width: 480px) {
    .dashboard-header .account-profile {
        padding-right: 112px;
    }

    .dashboard-header .dashboard-header-actions {
        top: 0;
        right: 0;
    }

    .dashboard-content {
        padding: 8px 10px calc(96px + env(safe-area-inset-bottom));
        gap: 9px;
    }

    .m-stat-card {
        min-height: 68px;
    }

    .dashboard-section-title {
        font-size: 0.9rem !important;
    }

    #mistakes-screen #btn-practice-mistakes,
    #mistakes-screen #btn-practice-learned {
        bottom: calc(71px + env(safe-area-inset-bottom));
    }
}

/* --- RESPONSIVE WEB FIT FIX (FINAL) --- */
@media (min-width: 501px) and (max-width: 767px) {
    body {
        justify-content: flex-start !important;
        align-items: stretch !important;
    }

    #app-container {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        border-width: 0 !important;
    }
}

@media (min-width: 768px) {
    body {
        justify-content: center !important;
        align-items: stretch !important;
        overflow-x: hidden !important;
    }

    #app-container {
        width: min(100vw, 1120px) !important;
        max-width: min(100vw, 1120px) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        border-radius: 0 !important;
        border-width: 0 !important;
        box-shadow: none !important;
    }

    .screen {
        padding-left: clamp(18px, 2.6vw, 30px) !important;
        padding-right: clamp(18px, 2.6vw, 30px) !important;
    }

    .dashboard-content,
    .language-hub-content,
    .onboarding-container,
    #mistakes-screen .glass-panel {
        width: min(100%, 980px) !important;
        max-width: min(100%, 980px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #game-screen {
        padding-left: clamp(12px, 2vw, 24px) !important;
        padding-right: clamp(12px, 2vw, 24px) !important;
    }

    #game-area {
        width: min(100%, 980px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        min-height: clamp(360px, 62vh, 760px) !important;
    }

    #controls {
        width: min(100%, 980px) !important;
        max-height: min(40vh, 420px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #answers-container {
        max-width: min(100%, 760px) !important;
    }

    #mistakes-screen #btn-practice-mistakes,
    #mistakes-screen #btn-practice-learned {
        width: min(92vw, 760px) !important;
    }
}

/* --- WEB GAME NO-SCROLL ANSWER FIX --- */
@media (min-width: 600px) {
    #game-screen {
        overflow: hidden !important;
    }

    #game-area {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
    }

    #controls {
        flex: 0 0 auto !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: 6px 10px calc(10px + env(safe-area-inset-bottom)) !important;
    }

    #voice-feedback {
        min-height: 26px !important;
        margin-bottom: 6px !important;
        padding: 6px 8px !important;
        font-size: 0.84rem !important;
    }

    #voice-live-box,
    #example-sentence-box {
        min-height: 34px !important;
        margin-bottom: 6px !important;
        padding: 6px 8px !important;
    }

    #answers-container {
        margin-top: 2px !important;
        gap: 6px !important;
    }

    .answer-btn {
        min-height: 40px !important;
        padding: 8px !important;
        font-size: 0.86rem !important;
    }
}

/* --- STABLE VOICE PANEL HEIGHTS (NO CASTLE JUMP) --- */
#voice-feedback {
    min-height: 30px !important;
    max-height: 30px !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#voice-live-box {
    min-height: 44px !important;
    max-height: 44px !important;
    overflow: hidden;
}

#voice-live-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#example-sentence-box {
    min-height: 52px !important;
    max-height: 52px !important;
    overflow: hidden;
}

#example-sentence-text,
#example-sentence-helper {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 2026 MODERN VISUAL REFRESH (WEB + APP) --- */
:root {
    --ux-bg-top: #e8f7ff;
    --ux-bg-mid: #f7fbff;
    --ux-bg-bottom: #eef6fb;
    --ux-ink: #0f2133;
    --ux-muted: #4c6276;
    --ux-brand: #0ea5e9;
    --ux-brand-2: #14b8a6;
    --ux-accent: #ff8a4c;
    --ux-border-soft: rgba(100, 140, 173, 0.26);
    --ux-glass: rgba(255, 255, 255, 0.74);
    --ux-glass-strong: rgba(255, 255, 255, 0.9);
    --ux-shadow-soft: 0 14px 32px rgba(30, 68, 104, 0.14);
    --ux-shadow-deep: 0 22px 48px rgba(17, 42, 69, 0.18);
}

body {
    font-family: 'Space Grotesk', 'Poppins', sans-serif !important;
    color: var(--ux-ink) !important;
    background:
        radial-gradient(860px 320px at -4% -6%, rgba(14, 165, 233, 0.2), transparent 60%),
        radial-gradient(820px 340px at 104% -8%, rgba(20, 184, 166, 0.17), transparent 63%),
        radial-gradient(620px 280px at 56% 110%, rgba(255, 138, 76, 0.13), transparent 66%),
        linear-gradient(180deg, var(--ux-bg-top), var(--ux-bg-mid) 42%, var(--ux-bg-bottom));
}

#app-container {
    background:
        linear-gradient(164deg, rgba(255, 255, 255, 0.9), rgba(246, 251, 255, 0.88) 40%, rgba(236, 247, 255, 0.9) 100%) !important;
    border: 1px solid rgba(137, 188, 228, 0.32) !important;
    box-shadow: 0 22px 56px rgba(23, 63, 96, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

#app-container::before,
#app-container::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(12px);
}

#app-container::before {
    width: 340px;
    height: 340px;
    top: -150px;
    right: -120px;
    background: radial-gradient(circle at 30% 30%, rgba(20, 184, 166, 0.26), rgba(20, 184, 166, 0));
}

#app-container::after {
    width: 300px;
    height: 300px;
    bottom: -120px;
    left: -110px;
    background: radial-gradient(circle at 68% 68%, rgba(14, 165, 233, 0.24), rgba(14, 165, 233, 0));
}

.screen {
    color: var(--ux-ink);
    background:
        radial-gradient(900px 360px at -12% -14%, rgba(14, 165, 233, 0.13), transparent 62%),
        radial-gradient(860px 320px at 112% -8%, rgba(20, 184, 166, 0.12), transparent 66%),
        linear-gradient(180deg, rgba(251, 253, 255, 0.95), rgba(241, 250, 255, 0.94) 44%, rgba(237, 247, 255, 0.95));
}

#dashboard-screen,
#mistakes-screen,
#settings-screen,
#insights-screen,
#language-screen {
    position: relative;
}

.onboarding-title,
.hub-title,
.screen-header h2,
.dashboard-section-title,
.user-meta h2 {
    font-family: 'Rajdhani', 'Space Grotesk', sans-serif !important;
    color: #102a40 !important;
    letter-spacing: 0.04em;
}

.onboarding-desc,
.section-desc,
#dash-available-words,
.cat-count {
    color: var(--ux-muted) !important;
}

.glass-panel,
.glass-card,
.modern-card-panel,
.account-card,
.m-stat-card,
.l-modern-card,
.category-card,
.history-summary-card {
    background: linear-gradient(160deg, var(--ux-glass), rgba(243, 250, 255, 0.78)) !important;
    border: 1px solid var(--ux-border-soft) !important;
    box-shadow: var(--ux-shadow-soft) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.dashboard-header .account-card {
    background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(240, 250, 255, 0.86)) !important;
    box-shadow: var(--ux-shadow-deep) !important;
}

.profile-avatar {
    background: linear-gradient(145deg, #0ea5e9, #14b8a6) !important;
    border: 2px solid rgba(255, 255, 255, 0.86) !important;
}

.level-badge {
    background: rgba(12, 97, 148, 0.1) !important;
    border-color: rgba(14, 165, 233, 0.34) !important;
    color: #0d6f9a !important;
}

.modern-wide-btn,
.onboarding-btn,
.modern-play-btn,
.big-play-btn {
    background: linear-gradient(135deg, #14b8a6, #0ea5e9 52%, #7dd3fc) !important;
    color: #05263c !important;
    border: 1px solid rgba(136, 219, 247, 0.75) !important;
    box-shadow: 0 12px 24px rgba(26, 104, 148, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
    border-radius: 16px !important;
}

.modern-wide-btn:hover,
.onboarding-btn:hover,
.modern-play-btn:hover,
.big-play-btn:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.modern-text-btn {
    background: rgba(255, 255, 255, 0.72) !important;
    color: #16516f !important;
    border: 1px solid rgba(101, 180, 214, 0.4) !important;
    border-radius: 14px !important;
}

.modern-text-btn.danger {
    background: rgba(255, 245, 245, 0.9) !important;
    border-color: rgba(230, 119, 119, 0.45) !important;
    color: #a23b3b !important;
}

#dash-start-btn {
    background: linear-gradient(135deg, #14b8a6, #0ea5e9, #3b82f6) !important;
}

#dash-start-btn .btn-icon {
    background: rgba(255, 255, 255, 0.26) !important;
    color: #08334f !important;
}

#dash-practice-category-btn {
    background: linear-gradient(135deg, #ffffff, #ebf8ff) !important;
    color: #156289 !important;
    border-color: rgba(94, 182, 221, 0.5) !important;
}

.dashboard-card {
    border-left-width: 5px !important;
}

.dashboard-level-card {
    border-left-color: #13b7a8 !important;
}

.dashboard-insight-card {
    border-left-color: #ff9557 !important;
}

.dashboard-history-card {
    border-left-color: #ef6f6f !important;
}

.dashboard-categories-card {
    border-left-color: #33b7f2 !important;
}

.category-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.category-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 18px rgba(20, 78, 114, 0.18) !important;
}

.category-card.active,
.l-modern-card.active {
    background: linear-gradient(145deg, rgba(20, 184, 166, 0.2), rgba(14, 165, 233, 0.2)) !important;
    border-color: rgba(30, 172, 219, 0.6) !important;
    box-shadow: 0 0 0 1px rgba(39, 176, 223, 0.25), 0 12px 20px rgba(25, 87, 127, 0.18) !important;
}

.m-stat-icon {
    background: linear-gradient(145deg, rgba(14, 165, 233, 0.18), rgba(20, 184, 166, 0.16)) !important;
}

.m-stat-info b {
    color: #0f3d5a !important;
}

.language-summary-card {
    border-left-color: #1ab8df !important;
}

#bottom-nav {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(240, 249, 255, 0.94)) !important;
    border-top: 1px solid rgba(118, 176, 208, 0.32) !important;
    box-shadow: 0 -10px 28px rgba(25, 72, 107, 0.16) !important;
}

.nav-item {
    color: rgba(67, 100, 128, 0.9) !important;
}

.nav-item.active {
    color: #0d84c5 !important;
}

.nav-item.active i {
    color: #0ea5e9 !important;
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.34);
}

#game-area {
    border: 2px solid rgba(133, 198, 228, 0.78) !important;
    box-shadow: inset 0 -24px 42px rgba(18, 88, 135, 0.22), 0 10px 22px rgba(28, 73, 108, 0.24) !important;
}

#controls {
    background: linear-gradient(180deg, rgba(244, 251, 255, 0.94), rgba(234, 246, 255, 0.94)) !important;
    border-top: 1px solid rgba(126, 189, 224, 0.46) !important;
}

.answer-btn {
    border: 1px solid rgba(122, 186, 219, 0.45) !important;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.95), rgba(241, 250, 255, 0.96)) !important;
    color: #194665 !important;
    border-radius: 12px !important;
}

.answer-btn:hover {
    border-color: rgba(57, 166, 218, 0.62) !important;
    box-shadow: 0 8px 16px rgba(31, 106, 148, 0.2) !important;
}

.falling-word {
    background: linear-gradient(145deg, #0f729d, #1498c1) !important;
    border: 2px solid rgba(219, 245, 255, 0.92) !important;
    box-shadow: 0 8px 16px rgba(16, 74, 105, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.26) !important;
}

.falling-word.new-word {
    background: linear-gradient(145deg, #16a085, #2dd4bf) !important;
    color: #062d27 !important;
}

.screen.active .modern-card-panel,
.screen.active .glass-card,
.screen.active .account-card {
    animation: modernRise 0.32s ease-out both;
}

@keyframes modernRise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@media (max-width: 520px) {
    .onboarding-title,
    .screen-header h2 {
        letter-spacing: 0.03em;
    }

    .modern-wide-btn,
    .modern-play-btn,
    .onboarding-btn,
    .big-play-btn {
        border-radius: 14px !important;
    }
}

/* --- CONTRAST + COLOR BOOST PATCH --- */
:root {
    --ux-text-strong: #10334a;
    --ux-text-soft: #3f5f76;
    --ux-input-bg: rgba(255, 255, 255, 0.96);
    --ux-input-border: rgba(78, 155, 201, 0.42);
}

#dashboard-version-label {
    color: rgba(15, 57, 85, 0.74) !important;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(113, 179, 216, 0.36);
    border-radius: 8px;
    padding: 2px 6px;
}

#onboarding-screen .glass-card {
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.95), rgba(240, 249, 255, 0.94)) !important;
    border: 1px solid rgba(110, 177, 214, 0.34) !important;
}

#onboarding-screen .onboarding-title {
    background: none !important;
    color: var(--ux-text-strong) !important;
    -webkit-text-fill-color: var(--ux-text-strong) !important;
}

#onboarding-screen .onboarding-desc,
#onboarding-screen .input-group label,
#onboarding-screen .lang-name {
    color: var(--ux-text-soft) !important;
}

#onboarding-screen .modern-input,
input.modern-input {
    background: var(--ux-input-bg) !important;
    border: 1px solid var(--ux-input-border) !important;
    color: #173b53 !important;
    caret-color: #0b86c5;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

#onboarding-screen .modern-input::placeholder,
input.modern-input::placeholder {
    color: #6b8396 !important;
    opacity: 1;
}

#onboarding-screen .modern-input:focus,
input.modern-input:focus {
    border-color: rgba(14, 165, 233, 0.7) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18) !important;
}

#onboarding-screen .lang-card,
#onboarding-screen .level-card,
#onboarding-screen .gender-card,
#onboarding-screen .interest-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.9), rgba(241, 250, 255, 0.88)) !important;
    border: 1px solid rgba(114, 183, 219, 0.36) !important;
    color: #1a4663 !important;
}

#onboarding-screen .lang-card.active,
#onboarding-screen .level-card.active,
#onboarding-screen .gender-card.active,
#onboarding-screen .interest-card.active {
    background: linear-gradient(145deg, #0ea5e9, #14b8a6) !important;
    border-color: rgba(118, 224, 255, 0.92) !important;
    color: #ecfbff !important;
}

#onboarding-screen .lang-card.active .lang-name,
#onboarding-screen .level-card.active .lang-name,
#onboarding-screen .gender-card.active .lang-name,
#onboarding-screen .interest-card.active .lang-name {
    color: #ecfbff !important;
}

#dashboard-screen .dashboard-level-card {
    background: linear-gradient(155deg, rgba(19, 183, 168, 0.2), rgba(14, 165, 233, 0.12), rgba(255, 255, 255, 0.82)) !important;
}

#dashboard-screen .dashboard-insight-card {
    background: linear-gradient(155deg, rgba(255, 149, 87, 0.2), rgba(255, 196, 110, 0.13), rgba(255, 255, 255, 0.82)) !important;
}

#dashboard-screen .dashboard-history-card {
    background: linear-gradient(155deg, rgba(239, 111, 111, 0.18), rgba(255, 157, 157, 0.12), rgba(255, 255, 255, 0.82)) !important;
}

#dashboard-screen .dashboard-categories-card {
    background: linear-gradient(155deg, rgba(51, 183, 242, 0.19), rgba(20, 184, 166, 0.12), rgba(255, 255, 255, 0.82)) !important;
}

#dashboard-screen .modern-card-panel h3,
#dashboard-screen .modern-card-panel p,
#dashboard-screen .modern-card-panel small,
#dashboard-screen .modern-card-panel b,
#settings-screen .modern-card-panel h3,
#settings-screen .modern-card-panel p,
#settings-screen .modern-card-panel small,
#insights-screen .modern-card-panel h3,
#insights-screen .modern-card-panel p,
#insights-screen .modern-card-panel small {
    color: var(--ux-text-strong) !important;
}

#dashboard-screen .category-card .cat-icon {
    font-size: 1.08rem;
    filter: saturate(1.28);
}

#mistakes-screen h1 {
    color: #0f2f44 !important;
}

#mistakes-screen .history-summary-mistakes {
    background: linear-gradient(145deg, rgba(255, 126, 126, 0.32), rgba(236, 77, 77, 0.28)) !important;
    border-color: rgba(224, 78, 78, 0.52) !important;
}

#mistakes-screen .history-summary-learned {
    background: linear-gradient(145deg, rgba(71, 214, 186, 0.32), rgba(25, 177, 148, 0.28)) !important;
    border-color: rgba(30, 160, 138, 0.5) !important;
}

#mistakes-screen .glass-panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(242, 250, 255, 0.96)) !important;
    color: #173b53 !important;
}

#mistakes-screen #history-total-label,
#mistakes-screen #full-mistakes-count {
    color: #15415d !important;
}

#mistakes-screen small {
    color: #4f6f86 !important;
}

#mistakes-screen .icon-btn-plain {
    background: rgba(20, 88, 127, 0.16) !important;
    color: #0f4566 !important;
    border: 1px solid rgba(63, 145, 190, 0.35) !important;
}

#bottom-nav {
    background: linear-gradient(145deg, rgba(242, 252, 255, 0.97), rgba(229, 245, 255, 0.98)) !important;
}

.nav-item.active {
    color: #0d84c5 !important;
    background: linear-gradient(145deg, rgba(14, 165, 233, 0.12), rgba(20, 184, 166, 0.1));
    border-radius: 12px;
}

/* --- FINAL MONOCHROME THEME (BLACK + WHITE) --- */
:root {
    --mono-bg-0: #040404;
    --mono-bg-1: #0a0a0a;
    --mono-bg-2: #131313;
    --mono-surface: rgba(255, 255, 255, 0.06);
    --mono-surface-2: rgba(255, 255, 255, 0.1);
    --mono-border: rgba(255, 255, 255, 0.2);
    --mono-text: #f5f5f5;
    --mono-text-soft: #c8c8c8;
    --mono-text-dim: #9b9b9b;
}

body {
    background:
        radial-gradient(900px 360px at -10% -12%, rgba(255, 255, 255, 0.08), transparent 62%),
        radial-gradient(740px 300px at 110% -8%, rgba(255, 255, 255, 0.06), transparent 65%),
        linear-gradient(180deg, #090909, #040404 48%, #101010) !important;
    color: var(--mono-text) !important;
}

#app-container {
    background: linear-gradient(170deg, #080808, #0e0e0e 48%, #060606) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-shadow: 0 26px 50px rgba(0, 0, 0, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

#app-container::before,
#app-container::after {
    display: none !important;
}

.screen {
    background:
        radial-gradient(800px 320px at -12% -16%, rgba(255, 255, 255, 0.07), transparent 62%),
        radial-gradient(840px 310px at 112% -8%, rgba(255, 255, 255, 0.05), transparent 68%),
        linear-gradient(180deg, #121212, #0a0a0a 52%, #050505) !important;
    color: var(--mono-text) !important;
}

#dashboard-version-label {
    color: rgba(255, 255, 255, 0.78) !important;
    background: rgba(0, 0, 0, 0.44) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

.onboarding-title,
.hub-title,
.screen-header h2,
.dashboard-section-title,
.user-meta h2,
#mistakes-screen h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: none !important;
}

.onboarding-desc,
.section-desc,
#dash-available-words,
.cat-count,
.input-group label,
.lang-name,
.goal-info p,
.m-stat-info small,
.nav-item span {
    color: var(--mono-text-soft) !important;
}

.glass-panel,
.glass-card,
.modern-card-panel,
.account-card,
.m-stat-card,
.l-modern-card,
.category-card,
.history-summary-card {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
    border: 1px solid var(--mono-border) !important;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#onboarding-screen .modern-input,
input.modern-input {
    background: rgba(0, 0, 0, 0.52) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #f5f5f5 !important;
    caret-color: #ffffff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

#onboarding-screen .modern-input::placeholder,
input.modern-input::placeholder {
    color: #a9a9a9 !important;
    opacity: 1;
}

#onboarding-screen .modern-input:focus,
input.modern-input:focus {
    border-color: rgba(255, 255, 255, 0.66) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14) !important;
}

#onboarding-screen .lang-card,
#onboarding-screen .level-card,
#onboarding-screen .gender-card,
#onboarding-screen .interest-card {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04)) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    color: var(--mono-text) !important;
}

#onboarding-screen .lang-card.active,
#onboarding-screen .level-card.active,
#onboarding-screen .gender-card.active,
#onboarding-screen .interest-card.active,
.category-card.active,
.l-modern-card.active {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.16)) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.26), 0 12px 20px rgba(0, 0, 0, 0.42) !important;
    color: #ffffff !important;
}

#onboarding-screen .lang-card.active .lang-name,
#onboarding-screen .level-card.active .lang-name,
#onboarding-screen .gender-card.active .lang-name,
#onboarding-screen .interest-card.active .lang-name {
    color: #ffffff !important;
}

.modern-wide-btn,
.onboarding-btn,
.modern-play-btn,
.big-play-btn {
    background: linear-gradient(140deg, #f4f4f4, #d2d2d2 52%, #ffffff) !important;
    color: #111111 !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.modern-wide-btn:hover,
.onboarding-btn:hover,
.modern-play-btn:hover,
.big-play-btn:hover {
    filter: brightness(1.05);
}

.modern-text-btn,
#dash-practice-category-btn {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)) !important;
    color: #f0f0f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.34) !important;
}

.modern-text-btn.danger {
    background: linear-gradient(140deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.1)) !important;
    color: #f4f4f4 !important;
}

#dash-start-btn {
    background: linear-gradient(140deg, #f8f8f8, #dadada 50%, #ffffff) !important;
}

#dash-start-btn .btn-icon {
    background: rgba(0, 0, 0, 0.12) !important;
    color: #121212 !important;
}

.m-stat-icon {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)) !important;
}

.m-stat-info b,
.goal-stats span,
.goal-info h3,
#p-level,
#dash-level-current,
#dash-level-next,
#dash-score,
#dash-words,
#dash-streak,
#dash-coins {
    color: #ffffff !important;
}

#mistakes-screen .history-summary-mistakes,
#mistakes-screen .history-summary-learned {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

#mistakes-screen .glass-panel {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.96), rgba(9, 9, 9, 0.97)) !important;
    color: #f0f0f0 !important;
}

#mistakes-screen #history-total-label,
#mistakes-screen #full-mistakes-count,
#mistakes-screen small {
    color: #d8d8d8 !important;
}

#mistakes-screen .icon-btn-plain {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
}

#bottom-nav {
    background: linear-gradient(145deg, rgba(18, 18, 18, 0.98), rgba(6, 6, 6, 0.98)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.55) !important;
}

.nav-item {
    color: #b8b8b8 !important;
}

.nav-item.active {
    color: #ffffff !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.08)) !important;
    border-radius: 12px;
}

.nav-item.active i {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.35);
}

#game-screen {
    background: linear-gradient(180deg, #101010, #030303) !important;
}

#game-area {
    background:
        radial-gradient(620px 260px at 50% -12%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, #2f2f2f 0%, #222222 34%, #161616 62%, #0e0e0e 100%) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: inset 0 -26px 42px rgba(0, 0, 0, 0.48), 0 10px 22px rgba(0, 0, 0, 0.45) !important;
}

#controls {
    background: linear-gradient(180deg, rgba(20, 20, 20, 0.97), rgba(8, 8, 8, 0.97)) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.22) !important;
}

.answer-btn {
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.07)) !important;
    border: 1px solid rgba(255, 255, 255, 0.26) !important;
    color: #f2f2f2 !important;
}

.answer-btn:hover {
    border-color: rgba(255, 255, 255, 0.56) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45) !important;
}

.falling-word {
    background: linear-gradient(145deg, #f0f0f0, #cecece) !important;
    border: 2px solid rgba(255, 255, 255, 0.92) !important;
    color: #111111 !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.42), inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
}

.falling-word.new-word,
.falling-word.gender-der,
.falling-word.gender-die,
.falling-word.gender-das {
    background: linear-gradient(145deg, #ffffff, #d8d8d8) !important;
    color: #111111 !important;
}

/* --- MONOCHROME CONTRAST RESCUE --- */
.modern-wide-btn,
.onboarding-btn,
.modern-play-btn,
.big-play-btn,
.pause-action-btn,
.btn-primary,
.btn-secondary,
.modern-text-btn,
#dash-start-btn,
#dash-practice-category-btn,
#tab-mistakes,
#tab-learned,
#btn-practice-mistakes,
#btn-practice-learned,
#restart-btn,
#gameover-dashboard-btn,
#resume-btn,
#home-btn {
    background: linear-gradient(145deg, #2b2b2b, #111111) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.38) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.modern-wide-btn .btn-text,
.onboarding-btn .btn-text,
.modern-play-btn .btn-text,
.modern-text-btn .btn-text,
.big-play-btn .btn-text,
.pause-action-btn .btn-text,
.btn-primary .btn-text,
.btn-secondary .btn-text,
.modern-wide-btn .btn-text span,
.onboarding-btn .btn-text span,
.modern-play-btn .btn-text span,
.modern-text-btn .btn-text span,
.big-play-btn .btn-text span,
.pause-action-btn .btn-text span,
.btn-primary .btn-text span,
.btn-secondary .btn-text span,
.modern-wide-btn .btn-text small,
.onboarding-btn .btn-text small,
.modern-play-btn .btn-text small,
.modern-text-btn .btn-text small,
.big-play-btn .btn-text small,
.pause-action-btn .btn-text small,
.btn-primary .btn-text small,
.btn-secondary .btn-text small,
.modern-wide-btn .btn-icon,
.onboarding-btn .btn-icon,
.modern-play-btn .btn-icon,
.modern-text-btn .btn-icon,
.big-play-btn .btn-icon,
.pause-action-btn .btn-icon,
.btn-primary .btn-icon,
.btn-secondary .btn-icon {
    color: #ffffff !important;
}

.modal-close,
.close-btn,
.icon-btn-plain,
#mic-btn,
.glass-btn {
    color: #ffffff !important;
}

/* --- GLOBAL BUTTON LOCK: BLACK BG + WHITE TEXT --- */
button {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

button:hover,
button:focus-visible {
    background: #111111 !important;
    color: #ffffff !important;
}

button:active {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

button:disabled {
    background: #222222 !important;
    color: #9f9f9f !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
}

button span,
button small,
button i,
button strong,
button b,
button .btn-text,
button .btn-icon {
    color: #ffffff !important;
}

/* Global text lock removed.
   Text colors are now controlled by component-level modern theme files. */

input,
textarea,
select {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(255, 255, 255, 0.78) !important;
    opacity: 1 !important;
}

/* Keep white text readable on falling words */
.falling-word,
.falling-word.new-word,
.falling-word.gender-der,
.falling-word.gender-die,
.falling-word.gender-das {
    background: linear-gradient(145deg, #1b1b1b, #060606) !important;
    border: 2px solid rgba(255, 255, 255, 0.84) !important;
    color: #ffffff !important;
}

/* --- DASHBOARD TEXT HARD OVERRIDE (WHITE) --- */
#dashboard-screen .modern-card-panel h1,
#dashboard-screen .modern-card-panel h2,
#dashboard-screen .modern-card-panel h3,
#dashboard-screen .modern-card-panel h4,
#dashboard-screen .modern-card-panel p,
#dashboard-screen .modern-card-panel small,
#dashboard-screen .modern-card-panel span,
#dashboard-screen .modern-card-panel b,
#dashboard-screen .modern-card-panel strong,
#dashboard-screen .modern-card-panel label,
#dashboard-screen .modern-card-panel li,
#dashboard-screen .modern-card-panel .cat-count,
#dashboard-screen .modern-card-panel .cat-name,
#dashboard-screen .modern-card-panel .hub-title,
#dashboard-screen .modern-card-panel .m-stat-info b,
#dashboard-screen #dash-level-current,
#dashboard-screen #dash-level-next,
#dashboard-screen #dash-active-lang-display,
#dashboard-screen #dash-available-words,
#dashboard-screen #daily-goal-current,
#dashboard-screen #daily-goal-target,
#dashboard-screen #mission-goal-20-text,
#dashboard-screen #mission-combo-5-text,
#dashboard-screen #mission-voice-3-text {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* --- DASHBOARD HEADER CARD FIX (MONOCHROME + CONTRAST) --- */
#dashboard-screen .dashboard-header .account-card {
    background: linear-gradient(155deg, #121212, #090909 52%, #050505) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.5) !important;
}

#dashboard-screen .dashboard-header .user-meta h2,
#dashboard-screen #p-level {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#dashboard-screen .dashboard-header .level-badge {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
}

#dashboard-screen .dashboard-header .dashboard-header-actions .lang-switch-btn-header,
#dashboard-screen .dashboard-header .dashboard-header-actions #settings-btn-header {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
}

#dashboard-screen .dashboard-header .dashboard-header-actions #settings-btn-header i,
#dashboard-screen .dashboard-header .dashboard-header-actions #settings-btn-header span,
#dashboard-screen .dashboard-header .dashboard-header-actions .lang-switch-btn-header span {
    color: #ffffff !important;
}

#dashboard-screen .dashboard-header .dashboard-header-actions #settings-btn-header .settings-icon {
    display: block;
    width: 16px;
    height: 16px;
    color: #ffffff !important;
}

/* --- LEARNING HISTORY LIST READABILITY FIX --- */
#mistakes-screen #firebase-mistakes-list .mistake-card,
#mistakes-screen #learned-words-list .mistake-card {
    background: linear-gradient(145deg, #181818, #080808) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.24) !important;
    border-left-width: 5px !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.36) !important;
}

#mistakes-screen #firebase-mistakes-list .mistake-card {
    border-left-color: #ffffff !important;
}

#mistakes-screen #learned-words-list .mistake-card {
    border-left-color: #cfcfcf !important;
}

/* --- BEST THEME 2026: POLAR NIGHT (FINAL OVERRIDE) --- */
:root {
    --best-bg-top: #070b11;
    --best-bg-mid: #0c1420;
    --best-bg-bottom: #06090f;
    --best-surface: #101a27;
    --best-surface-2: #0d1723;
    --best-border: rgba(146, 178, 210, 0.28);
    --best-text: #f7fbff;
    --best-text-soft: #b8c6d6;
    --best-accent: #3cc8ff;
    --best-accent-2: #34d399;
    --best-shadow: 0 16px 32px rgba(0, 0, 0, 0.38);
}

body {
    background:
        radial-gradient(900px 360px at -8% -12%, rgba(60, 200, 255, 0.12), transparent 62%),
        radial-gradient(820px 320px at 108% -6%, rgba(52, 211, 153, 0.1), transparent 66%),
        linear-gradient(180deg, var(--best-bg-top), var(--best-bg-mid) 52%, var(--best-bg-bottom)) !important;
    color: var(--best-text) !important;
}

#app-container {
    background: linear-gradient(170deg, #0b141f, #0f1b2a 48%, #08111b) !important;
    border: 1px solid var(--best-border) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#app-container::before,
#app-container::after {
    display: none !important;
}

.screen {
    background:
        radial-gradient(860px 320px at -12% -14%, rgba(60, 200, 255, 0.1), transparent 62%),
        radial-gradient(760px 280px at 112% -8%, rgba(52, 211, 153, 0.08), transparent 66%),
        linear-gradient(180deg, #101a27, #0a1421 55%, #070d16) !important;
    color: var(--best-text) !important;
}

#dashboard-version-label {
    background: rgba(2, 8, 15, 0.7) !important;
    border: 1px solid rgba(166, 196, 226, 0.34) !important;
    color: #e9f6ff !important;
}

/* Legacy universal text override removed to prevent contrast conflicts. */

.onboarding-desc,
.section-desc,
.cat-count,
.goal-info p,
.lang-name,
.m-stat-info small,
.word-meaning,
#history-total-label,
#dash-available-words,
#dashboard-screen p {
    color: var(--best-text-soft) !important;
}

.glass-panel,
.glass-card,
.modern-card-panel,
.account-card,
.m-stat-card,
.l-modern-card,
.category-card,
.history-summary-card,
.modal-card,
.category-modal,
.word-item {
    background: linear-gradient(165deg, rgba(19, 31, 46, 0.9), rgba(12, 23, 36, 0.88)) !important;
    border: 1px solid var(--best-border) !important;
    box-shadow: var(--best-shadow) !important;
}

.dashboard-card {
    border-left-width: 5px !important;
}

.dashboard-level-card {
    border-left-color: #37c8ff !important;
}

.dashboard-insight-card {
    border-left-color: #ffb454 !important;
}

.dashboard-history-card {
    border-left-color: #ff8d8d !important;
}

.dashboard-categories-card {
    border-left-color: #34d399 !important;
}

#dashboard-screen .dashboard-header .account-card {
    background: linear-gradient(155deg, #101b29, #0a141f 52%, #070f18) !important;
}

#dashboard-screen .dashboard-header .level-badge {
    background: rgba(60, 200, 255, 0.18) !important;
    border: 1px solid rgba(95, 210, 255, 0.52) !important;
    color: #eaf8ff !important;
}

.category-card.active,
.l-modern-card.active {
    background: linear-gradient(150deg, rgba(60, 200, 255, 0.28), rgba(52, 211, 153, 0.24)) !important;
    border-color: rgba(106, 217, 255, 0.7) !important;
    box-shadow: 0 0 0 1px rgba(106, 217, 255, 0.34), 0 14px 24px rgba(0, 0, 0, 0.35) !important;
}

input,
textarea,
select {
    background: rgba(8, 14, 22, 0.82) !important;
    border: 1px solid rgba(157, 190, 224, 0.34) !important;
    color: var(--best-text) !important;
    -webkit-text-fill-color: var(--best-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: #a8b7c9 !important;
    opacity: 1 !important;
}

button {
    background: linear-gradient(145deg, #151f2d, #090f18) !important;
    color: #ffffff !important;
    border: 1px solid rgba(174, 205, 234, 0.42) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

button:hover,
button:focus-visible {
    background: linear-gradient(145deg, #1a2a3d, #101927) !important;
    border-color: rgba(140, 219, 255, 0.65) !important;
    color: #ffffff !important;
}

button:disabled {
    background: #1a1f27 !important;
    color: #92a1b2 !important;
    border-color: rgba(144, 166, 190, 0.28) !important;
}

#dash-start-btn,
.modern-play-btn,
.onboarding-btn,
.modern-wide-btn,
.btn-primary,
#btn-practice-mistakes,
#btn-practice-learned,
#restart-btn {
    background: linear-gradient(145deg, #1d2f44, #112233 48%, #0d1b2b) !important;
    border-color: rgba(122, 205, 255, 0.58) !important;
}

#dash-practice-category-btn,
.modern-text-btn,
.btn-secondary,
#gameover-dashboard-btn,
#home-btn {
    background: linear-gradient(145deg, #111a27, #0b131d) !important;
    border-color: rgba(171, 198, 226, 0.4) !important;
}

#resume-btn {
    background: linear-gradient(145deg, #1c3f2f, #132a21) !important;
    border-color: rgba(110, 225, 170, 0.5) !important;
}

#tab-mistakes,
#tab-learned {
    background: linear-gradient(145deg, #131f2d, #0b131d) !important;
    color: #ffffff !important;
}

#bottom-nav {
    background: linear-gradient(145deg, rgba(10, 16, 24, 0.98), rgba(6, 10, 16, 0.98)) !important;
    border-top: 1px solid rgba(145, 180, 214, 0.3) !important;
    box-shadow: 0 -12px 24px rgba(0, 0, 0, 0.46) !important;
}

.nav-item {
    color: #aab8c8 !important;
}

.nav-item.active {
    color: #ffffff !important;
    background: linear-gradient(145deg, rgba(60, 200, 255, 0.22), rgba(52, 211, 153, 0.18)) !important;
    border-radius: 12px;
}

.nav-item.active i {
    color: #dff5ff !important;
}

#mistakes-screen .glass-panel {
    background: linear-gradient(180deg, #0f1722, #0a1119) !important;
}

#mistakes-screen #firebase-mistakes-list .mistake-card,
#mistakes-screen #learned-words-list .mistake-card {
    background: linear-gradient(145deg, #1a2533, #101824) !important;
    color: #f8fbff !important;
    border: 1px solid rgba(163, 196, 227, 0.3) !important;
    border-left-width: 5px !important;
}

#mistakes-screen #firebase-mistakes-list .mistake-card {
    border-left-color: #7ed3ff !important;
}

#mistakes-screen #learned-words-list .mistake-card {
    border-left-color: #6ee7b7 !important;
}

#game-screen {
    background: linear-gradient(180deg, #07111a, #03080f) !important;
}

#game-area {
    background:
        radial-gradient(640px 260px at 50% -12%, rgba(95, 210, 255, 0.26), rgba(95, 210, 255, 0)),
        linear-gradient(180deg, #23405a 0%, #1b3349 34%, #152838 62%, #0f1b27 100%) !important;
    border: 2px solid rgba(152, 199, 233, 0.52) !important;
}

#controls {
    background: linear-gradient(180deg, rgba(11, 19, 29, 0.96), rgba(8, 14, 22, 0.97)) !important;
    border-top: 1px solid rgba(150, 184, 218, 0.32) !important;
}

.answer-btn {
    background: linear-gradient(160deg, #182434, #111b29) !important;
    border: 1px solid rgba(163, 194, 223, 0.38) !important;
    color: #f4f9ff !important;
}

.answer-btn:hover {
    border-color: rgba(136, 219, 255, 0.62) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35) !important;
}

#app-container .falling-word,
#app-container .falling-word.new-word,
#app-container .falling-word.gender-der,
#app-container .falling-word.gender-die,
#app-container .falling-word.gender-das {
    background: linear-gradient(145deg, #1c2d41, #101c2d) !important;
    border: 2px solid rgba(196, 224, 250, 0.9) !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}

#app-container .falling-word .fw-top,
#app-container .falling-word .fw-bottom {
    color: #ffffff !important;
}

#game-screen .answer-btn.feedback-wrong {
    background: linear-gradient(145deg, #7a1010, #4f0606) !important;
    border: 2px solid #ff6262 !important;
    color: #ffffff !important;
}

#game-screen .answer-btn.feedback-correct {
    background: linear-gradient(145deg, #0e4d2d, #083820) !important;
    border: 2px solid #5dff9a !important;
    color: #ffffff !important;
}

/* --- GAME VOICE UI SIMPLIFY + EXAMPLE VISIBILITY --- */
#voice-feedback,
#voice-live-box {
    display: none !important;
}

#mic-btn {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    padding: 0 !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2200 !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
}

#mic-control-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: relative !important;
    z-index: 2200 !important;
}

#mic-status-text {
    display: inline-block !important;
    min-width: 74px !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #cfe3f5 !important;
    text-align: left !important;
    user-select: none !important;
}

#mic-live-box {
    min-width: 170px !important;
    max-width: min(54vw, 260px) !important;
    height: 34px !important;
    border: 1px solid rgba(194, 225, 248, 0.62) !important;
    border-radius: 10px !important;
    background: rgba(5, 15, 26, 0.85) !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

#mic-live-text {
    display: block !important;
    width: 100% !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#example-sentence-box {
    display: block !important;
    min-height: 52px !important;
    max-height: 52px !important;
    height: 52px !important;
    overflow: hidden !important;
}

#example-sentence-text,
#example-sentence-helper {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* --- SETTINGS READABILITY FIX (FOR DARK THEME) --- */
#settings-screen .modern-card-panel h3,
#settings-screen .modern-card-panel p,
#settings-screen .modern-card-panel small,
#settings-screen #cloud-sync-status,
#settings-screen #cloud-backup-time,
#settings-screen #review-reminder-status,
#settings-screen #review-reminder-next,
#settings-screen #adaptive-pool-status {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#settings-screen #cloud-sync-status,
#settings-screen #cloud-backup-time,
#settings-screen #review-reminder-status,
#settings-screen #review-reminder-next,
#settings-screen #adaptive-pool-status {
    opacity: 1 !important;
}

/* --- ONBOARDING SELECTED BOX AQUA VISIBILITY FIX --- */
#onboarding-screen .modern-input:focus,
#onboarding-screen input.modern-input:focus {
    background: linear-gradient(145deg, rgba(22, 67, 92, 0.88), rgba(10, 37, 56, 0.9)) !important;
    border-color: rgba(92, 225, 255, 0.95) !important;
    box-shadow: 0 0 0 3px rgba(83, 213, 255, 0.26), 0 8px 18px rgba(0, 0, 0, 0.38) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#onboarding-screen .modern-input:-webkit-autofill,
#onboarding-screen .modern-input:-webkit-autofill:hover,
#onboarding-screen .modern-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 1000px #12344a inset !important;
    -webkit-box-shadow: 0 0 0 1000px #12344a inset !important;
    border: 1px solid rgba(92, 225, 255, 0.85) !important;
}

#onboarding-screen .lang-card.active,
#onboarding-screen .level-card.active,
#onboarding-screen .gender-card.active,
#onboarding-screen .interest-card.active {
    background: linear-gradient(145deg, rgba(28, 140, 176, 0.9), rgba(13, 76, 106, 0.92)) !important;
    border-color: rgba(100, 230, 255, 0.98) !important;
    box-shadow: 0 0 0 1px rgba(107, 225, 255, 0.45), 0 12px 24px rgba(0, 0, 0, 0.42) !important;
    color: #ffffff !important;
}

#onboarding-screen .lang-card.active .lang-name,
#onboarding-screen .level-card.active .lang-name,
#onboarding-screen .gender-card.active .lang-name,
#onboarding-screen .interest-card.active .lang-name {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* --- MIC LISTENING VISUAL STATE --- */
@keyframes micListeningPulse {
    0% {
        transform: scale(1.04);
        box-shadow: 0 0 0 2px rgba(255, 110, 110, 0.2), 0 0 10px rgba(255, 110, 110, 0.28);
    }
    50% {
        transform: scale(1.12);
        box-shadow: 0 0 0 5px rgba(255, 110, 110, 0.28), 0 0 24px rgba(255, 110, 110, 0.45);
    }
    100% {
        transform: scale(1.04);
        box-shadow: 0 0 0 2px rgba(255, 110, 110, 0.2), 0 0 10px rgba(255, 110, 110, 0.28);
    }
}

#mic-btn.mic-listening {
    animation: micListeningPulse 0.95s ease-in-out infinite !important;
}

#mic-btn.mic-armed,
#mic-btn.mic-off,
#mic-btn.mic-error {
    animation: none !important;
}

/* --- GAME BOTTOM SPACE TUNING (NO GREEN GROUND STRIP) --- */
#ground {
    display: none !important;
    height: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#castle {
    bottom: 8px !important;
    transform: translateX(-50%) scale(0.88) !important;
    transform-origin: bottom center !important;
}

/* --- TRIAL GATE REDESIGN (AUTO VERIFICATION UI) --- */
#trial-gate-screen.trial-gate-screen {
    background:
        radial-gradient(520px 220px at 15% -10%, rgba(79, 198, 255, 0.30), rgba(79, 198, 255, 0)),
        radial-gradient(560px 260px at 90% 4%, rgba(255, 115, 138, 0.24), rgba(255, 115, 138, 0)),
        linear-gradient(165deg, #071227 0%, #0c1933 42%, #07111f 100%) !important;
    align-items: stretch !important;
    padding: 22px 16px calc(92px + env(safe-area-inset-bottom)) !important;
}

#trial-gate-screen .trial-gate-shell {
    width: min(100%, 470px);
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#trial-gate-screen .trial-gate-hero {
    text-align: left;
    padding: 8px 6px 2px;
}

#trial-gate-screen .trial-gate-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid rgba(255, 193, 117, 0.48);
    background: linear-gradient(140deg, rgba(255, 181, 87, 0.24), rgba(255, 111, 146, 0.18));
    color: #ffe8bf;
    letter-spacing: 0.08em;
    font-size: 0.66rem;
    font-weight: 800;
}

#trial-gate-screen .trial-gate-hero h2 {
    margin: 12px 0 6px;
    font-size: clamp(1.42rem, 4.8vw, 1.9rem);
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.15;
    color: #ffffff;
}

#trial-gate-screen .trial-gate-hero p {
    margin: 0;
    font-size: 0.86rem;
    color: rgba(233, 243, 255, 0.84);
    line-height: 1.45;
}

#trial-gate-screen .trial-gate-card {
    width: 100%;
    border-radius: 22px;
    padding: 16px;
    border: 1px solid rgba(153, 195, 229, 0.30);
    background:
        linear-gradient(160deg, rgba(23, 43, 74, 0.93), rgba(9, 21, 40, 0.94)),
        linear-gradient(100deg, rgba(106, 183, 255, 0.12), rgba(255, 138, 172, 0.10));
    box-shadow:
        0 24px 42px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(11px);
}

#trial-gate-screen .trial-step-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 6px 0 10px;
}

#trial-gate-screen .trial-step-dot {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.73rem;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(145deg, #2e8fff, #1f6ee0);
    box-shadow: 0 6px 14px rgba(37, 124, 235, 0.42);
}

#trial-gate-screen .trial-step-row h3 {
    margin: 0 0 2px;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    color: #f7fbff;
}

#trial-gate-screen .trial-step-row p {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.45;
    color: rgba(210, 229, 247, 0.88);
}

#trial-gate-screen .trial-signin-btn,
#trial-gate-screen .trial-open-btn {
    width: 100%;
    justify-content: center;
    margin-top: 8px;
}

#trial-gate-screen .trial-signin-btn {
    border: 1px solid rgba(127, 197, 255, 0.62) !important;
    background: linear-gradient(145deg, rgba(17, 42, 73, 0.95), rgba(12, 32, 58, 0.95)) !important;
    color: #e8f5ff !important;
}

#trial-gate-screen .trial-open-btn {
    border: 0;
    margin-bottom: 10px;
    background: linear-gradient(102deg, #2e8fff 0%, #4fd0ff 45%, #6df4d0 100%) !important;
    color: #05233a !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em;
    text-shadow: none !important;
}

#trial-gate-screen .trial-open-btn:hover {
    filter: brightness(1.04);
}

#trial-gate-screen .trial-email-warning {
    margin: 8px 0 12px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 201, 124, 0.56);
    background: linear-gradient(145deg, rgba(84, 54, 15, 0.55), rgba(52, 30, 7, 0.48));
    color: #ffe8be;
    font-size: 0.74rem;
    line-height: 1.35;
    font-weight: 800;
}

#trial-gate-screen .trial-sync-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid rgba(173, 205, 232, 0.36);
    background: rgba(10, 24, 43, 0.78);
    padding: 9px 10px;
    margin-top: 4px;
}

#trial-gate-screen .trial-sync-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #8ea7bb;
    box-shadow: 0 0 0 0 rgba(142, 167, 187, 0.4);
}

#trial-gate-screen .trial-sync-indicator[data-state="syncing"] .trial-sync-dot {
    background: #5fd2ff;
    animation: trialSyncPulse 1.2s ease-in-out infinite;
}

#trial-gate-screen .trial-sync-indicator[data-state="active"] .trial-sync-dot {
    background: #62f6ba;
}

#trial-gate-screen .trial-sync-indicator[data-state="error"] .trial-sync-dot {
    background: #ff8f97;
}

#trial-gate-screen #trial-sync-text {
    font-size: 0.76rem;
    line-height: 1.35;
    font-weight: 700;
    color: #e8f2fb;
}

#trial-gate-screen .trial-status-grid {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

#trial-gate-screen .trial-status-card {
    border-radius: 12px;
    border: 1px solid rgba(176, 203, 227, 0.30);
    background: rgba(8, 20, 36, 0.72);
    padding: 10px;
    min-height: 62px;
}

#trial-gate-screen .trial-status-card small {
    display: block;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    opacity: 0.72;
    margin-bottom: 4px;
}

#trial-gate-screen .trial-status-card strong {
    display: block;
    font-size: 0.84rem;
    line-height: 1.32;
    word-break: break-word;
    color: #f5fbff;
}

#trial-gate-screen .trial-gate-hint {
    margin: 11px 2px 1px;
    font-size: 0.77rem;
    line-height: 1.45;
    color: rgba(224, 239, 252, 0.86);
}

@keyframes trialSyncPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(95, 210, 255, 0.50);
    }
    70% {
        transform: scale(1.08);
        box-shadow: 0 0 0 8px rgba(95, 210, 255, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(95, 210, 255, 0);
    }
}

@media (max-width: 420px) {
    #trial-gate-screen .trial-gate-card {
        border-radius: 18px;
        padding: 14px;
    }

    #trial-gate-screen .trial-status-grid {
        grid-template-columns: 1fr;
    }
}