:root {
    --bg-dark: #020617;
    --bg-card: rgba(30, 41, 59, 0.7);
    --bg-surface: #0f172a;

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-accent: #38bdf8;

    /* Neon Accents */
    --neon-blue: #0ea5e9;
    --neon-purple: #8b5cf6;
    --neon-gold: #f59e0b;
    --neon-red: #ef4444;

    --border-glass: rgba(255, 255, 255, 0.08);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-primary);
    height: 100vh;
    display: flex;
    justify-content: center;
    overflow: hidden;
    /* App like feel */
}

/* App Container - Mobile First Responsive */
.app-container {
    width: 100%;
    max-width: 100%;
    /* Fully Full Screen */
    height: 100%;
    background: var(--bg-surface);
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    margin: 0 auto;
    /* Center it */
}

/* GLOBAL FLOATING UTILITIES */
.global-floating-controls {
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    z-index: 10000;
    pointer-events: none;
}

.btn-fullscreen {
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-fullscreen:hover {
    background: rgba(15, 23, 42, 0.8);
    transform: scale(1.1);
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.3);
}

.btn-fullscreen:active {
    transform: scale(0.9);
}

/* Hide on mobile as per user request */
@media (max-width: 600px) {
    .global-floating-controls {
        display: none;
    }
}

/* HEADER */
.main-header {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-glass);
    z-index: 50;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-right-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo h1 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.highlight {
    color: var(--neon-blue);
}

.user-profile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.score-badge {
    background: linear-gradient(135deg, var(--neon-gold), #d97706);
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
    margin-left: 0.5rem;
}

.btn-icon,
.btn-music {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 0.2rem;
    transition: color 0.2s;
}

.btn-icon:hover,
.btn-music:hover {
    color: var(--text-primary);
}



/* MAIN CONTENT AREA */
#app-content {
    flex: 1;
    overflow-y: auto;
    position: relative;
    scrollbar-width: none;
    /* Firefox */
}

#app-content::-webkit-scrollbar {
    display: none;
    /* Chrome */
}

.view {
    height: 100%;
    /* Add safe area padding for mobile */
    padding-bottom: 80px !important;
    /* User requested a 'thin black line' at the bottom to push content up */
    border-bottom: 4px solid black;
    box-sizing: border-box;
}

.hidden {
    display: none !important;
}

/* DASHBOARD VIEW (Main Hub Background) */
#view-dashboard,
#view-list,
#view-global-leaderboard {
    position: relative;
    /* Ensure content stacks above */
    min-height: 100vh;
    z-index: 0;
}

#view-dashboard::before,
#view-list::before,
#view-global-leaderboard::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    /* Behind content */
}

#view-dashboard::before {
    background: linear-gradient(rgba(2, 6, 23, 0.7), rgba(2, 6, 23, 0.9)), url('../assets/game-bg-abstract.png') no-repeat center center/cover;
}

#view-list::before {
    background: linear-gradient(rgba(2, 6, 23, 0.8), rgba(2, 6, 23, 0.95)), url('../assets/library-bg.png') no-repeat center center/cover;
}

#view-global-leaderboard::before {
    background: linear-gradient(rgba(2, 6, 23, 0.8), rgba(2, 6, 23, 0.95)), url('../assets/game-bg-galaxy.png') no-repeat center center/cover;
}

.dashboard-hub {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
    animation: fadeIn 0.8s ease-out;
}



/* Header Section */
.hub-header {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrap */
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 1rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border-glass);
}

.dashboard-top-bar {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 1rem;
    gap: 0.5rem;
}

.profile-avatar-container {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.4rem 0.8rem;
    border-radius: 30px;
    border: 1px solid var(--border-glass);
    width: fit-content;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.dropdown-arrow {
    font-size: 0.7rem;
    opacity: 0.6;
}

.profile-dropdown {
    position: absolute;
    top: 120%;
    left: 0;
    min-width: 160px;
    z-index: 100;
}

.logo-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.logo h1 {
    font-size: 1.5rem;
    margin: 0;
}

.trophy-btn {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 30px;
    border: 1px solid var(--border-glass) !important;
    width: auto !important;
}

.trophy-icon {
    font-size: 1.2rem;
}

#header-total-score {
    font-weight: bold;
    font-size: 1rem;
    color: var(--neon-gold);
}

@media (max-width: 600px) {
    .dashboard-top-bar {
        grid-template-columns: 1fr 1fr;
        /* Two columns on mobile? Or stack? */
        /* Actually, let's try to keep it 3 columns but more compact */
        grid-template-columns: auto 1fr auto;
    }

    .logo h1 {
        font-size: 1.1rem;
    }

    .logo-icon {
        font-size: 1rem;
    }

    .user-name {
        display: none;
        /* Hide name on very small screens to save space? User might want to see it though. */
    }
}

@media (max-width: 400px) {
    .dashboard-top-bar {
        grid-template-columns: auto 1fr auto;
        gap: 0.2rem;
    }

    .profile-avatar-container {
        padding: 0.3rem 0.5rem;
    }

    .trophy-btn {
        padding: 0.3rem 0.5rem;
    }

    /* REDUCED ICONS ON MOBILE (User Request) */
    .module-card .icon-box {
        font-size: 2rem !important;
        /* Reduced from 2.5rem */
        margin-bottom: 0.5rem;
    }


}


.hub-welcome h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.quote-day {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.9rem;
}



/* Content Grid */
.dashboard-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .dashboard-content {
        grid-template-columns: 2fr 1fr;
    }
}

/* Module Cards (Normal) */
.modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.module-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
    /* Increased brightness: cyan border by default */
    border: 1px solid var(--neon-blue);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 160px;
    justify-content: center;
    /* Increased brightness: default glow */
    box-shadow: 0 0 15px rgba(14, 165, 233, 0.15);
}

.module-card:hover {
    transform: translateY(-5px) scale(1.02);
    /* Even brighter on hover */
    border-color: #38bdf8;
    box-shadow: 0 10px 30px rgba(14, 165, 233, 0.3), 0 0 20px rgba(14, 165, 233, 0.2);
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(15, 23, 42, 0.98));
}

.module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: radial-gradient(circle at top, rgba(14, 165, 233, 0.2), transparent 70%);
    opacity: 0.5;
    /* Always show some gradient */
    transition: opacity 0.3s;
}

.module-card:hover::before {
    opacity: 1;
}


.module-card .icon-box {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    transition: transform 0.3s;
}

.module-card:hover .icon-box {
    transform: scale(1.1);
}

.module-card h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.module-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.module-card.locked {
    opacity: 0.6;
    filter: grayscale(0.8);
    cursor: not-allowed;
}



.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-glass);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
}

.card:active {
    transform: scale(0.98);
}

/* Hero Card - Word Study */
.card-hero {
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 10px 40px -10px rgba(14, 165, 233, 0.3);
}

.card-image-wrapper {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card:hover .card-img {
    transform: scale(1.05);
}

.card-overlay {
    position: absolute;
    top: 1rem;
    left: 1rem;
}

.card-tag {
    background: rgba(14, 165, 233, 0.9);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.card-content {
    padding: 1.2rem;
}

.card-content h3 {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
    color: white;
}

.card-content p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Locked Cards */
.card-locked {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(30, 41, 59, 0.3);
}

.card-locked .lock-icon {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    opacity: 0.5;
}

/* MODAL / OVERLAY */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(2, 6, 23, 0.85);
    /* Dark blur */
    backdrop-filter: blur(12px);
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centered */
    padding: 1rem;
}

.modal-content {
    width: 100%;
    max-width: 400px;
    /* Tighter width */
    background: #0f172a;
    border-radius: var(--radius-xl);
    /* All round */
    padding: 2rem;
    position: relative;
    border: 1px solid var(--border-glass);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: zoomIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.mode-modal h2 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.modal-subtitle {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

/* Game Over Specific Spacing */
.final-score-text {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    /* Increased Space */
    text-align: center;
}

.final-score-text span {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.earnings-report {
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    /* Increased Space */
    text-align: center;
}

.btn-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* Mode Grid */
.mode-grid {
    display: grid;
    gap: 1rem;
}

.mode-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--neon-blue);
}

.mode-icon {
    font-size: 2rem;
}

.mode-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.2rem;
}

.mode-card p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* GAME UI */
.game-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-top: 1rem;
}

.live-score {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--neon-blue);
}

.game-lives {
    position: absolute;
    top: 5rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    /* Larger */
    z-index: 50;
    /* Bring to front */
    filter: drop-shadow(0 0 10px rgba(220, 38, 38, 0.8));
    /* Glow effect */
    letter-spacing: 5px;
    width: 100%;
    text-align: center;
    pointer-events: none;
}

.game-timer {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(239, 68, 68, 0.2);
    color: var(--neon-red);
    padding: 0.3rem 1rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    z-index: 50;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.game-card {
    background: rgba(2, 6, 23, 0.5);
    /* More transparent for bg visibility */
    backdrop-filter: blur(8px);
    /* Glass effect for readability */
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    text-align: center;
    margin: 0 auto 1.5rem auto;
    /* Centered with bottom margin */
    max-width: 800px;
    /* Constrain width on wide screens */
    position: relative;
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

/* Enhanced Game Card for Grammar View */
#view-grammar .game-card {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(139, 92, 246, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.level-indicator {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.word-display h2 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
    line-height: 1.2;
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: auto;
}

/* WRITING MODE STYLES */
.writing-slot {
    width: 3.5rem;
    height: 3.5rem;
    border: 2px dashed rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}

.writing-slot.filled {
    border-style: solid;
    border-color: var(--neon-blue);
    background: rgba(56, 189, 248, 0.2);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}

.letter-tile {
    width: 3.5rem;
    height: 3.5rem;
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
    text-transform: uppercase;
}

.letter-tile:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.letter-tile.used {
    opacity: 0.2;
    pointer-events: none;
    transform: scale(0.9);
}

.option-btn {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border-glass);
    padding: 1.2rem;
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 1.1rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.option-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--neon-blue);
}

.option-btn.correct {
    background: var(--bg-dark);
    border-color: #22c55e;
    color: #22c55e;
}

.option-btn.wrong {
    background: var(--bg-dark);
    border-color: #ef4444;
    opacity: 0.5;
}

/* Buttons & Inputs */
.btn {
    padding: 1rem;
    border-radius: var(--radius-md);
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.btn-primary {
    background: linear-gradient(135deg, var(--neon-blue) 0%, #3b82f6 100%);
    color: white;
    box-shadow: 0 4px 20px rgba(14, 165, 233, 0.4);
}

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

.btn-text {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
}

.btn-joker {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    color: black;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

input {
    width: 100%;
    padding: 1rem;
    background: rgba(2, 6, 23, 0.5);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    color: white;
    font-family: inherit;
}

input:focus {
    outline: none;
    border-color: var(--neon-blue);
}

/* LIST & ADMIN */
.list-header {
    background: rgba(15, 23, 42, 0.95);
    padding: 0.8rem;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--border-glass);
}

.word-item {
    background: rgba(30, 41, 59, 0.4);
    padding: 0.8rem;
    margin-bottom: 0.6rem;
    border-radius: var(--radius-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.admin-grid .btn {
    height: 140px;
}

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

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

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

/* LANDING VIEW - APP STYLE */
.landing-container {
    position: fixed;
    /* Force full screen overlay */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: url('../assets/dark_login_bg.png') no-repeat center center/cover;
    padding: 2rem;
    z-index: 100;
    /* Ensure it covers everything */
}

.landing-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* Overlay */
    z-index: 1;
}

.landing-logo,
.landing-form {
    position: relative;
    z-index: 2;
}

.landing-logo {
    margin-bottom: 3rem;
    animation: fadeInDown 0.8s ease-out;
}

/* Avatar Selection */
.avatar-selection-container {
    margin-bottom: 2rem;
}

.avatar-label {
    display: block;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.avatar-grid {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.avatar-option {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
    position: relative;
    background: #0f172a;
}

.avatar-option img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-option:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.avatar-option.selected {
    transform: scale(1.15);
    border-color: var(--neon-blue);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.6);
    z-index: 10;
}

/* Premium Input */
.landing-input {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid var(--border-glass);
    padding: 1rem 1.5rem;
    border-radius: 50px;
    font-size: 1.1rem;
    text-align: center;
    color: white;
    width: 100%;
    max-width: 300px;
    margin-bottom: 1rem;
    /* Space between input and buttons */
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.landing-input:focus {
    outline: none;
    border-color: var(--neon-blue);
    background: rgba(15, 23, 42, 0.95);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
    transform: scale(1.02);
}

.landing-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Header Avatar */
.user-profile img.header-avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--neon-blue);
    object-fit: cover;
}

/* Current Avatar Display */
.current-avatar-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.avatar-option.large {
    width: 100px;
    height: 100px;
}

.btn-change-avatar {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--border-glass);
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    font-family: inherit;
}

.btn-change-avatar:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--neon-blue);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

/* Logout Button */
.btn-logout {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ef4444;
    transition: all 0.3s;
    padding: 0;
    margin-left: 0.5rem;
}

.btn-logout:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
}

.btn-logout svg {
    stroke: currentColor;
}

/* Profile Avatar Container */
.profile-avatar-container {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: 50px;
    transition: all 0.3s;
}

.profile-avatar-container:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Profile Dropdown Menu */
.user-profile {
    position: relative;
}

.profile-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.5rem;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 0.5rem;
    min-width: 150px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    z-index: 1000;
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.profile-dropdown.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.profile-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: transparent;
    border: none;
    color: #ef4444;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 0.9rem;
}

.profile-menu-item:hover {
    background: rgba(239, 68, 68, 0.1);
    transform: translateX(4px);
}

.profile-menu-item svg {
    flex-shrink: 0;
}

#view-level-map {
    /* Base for the view */
    background: url('../assets/sky-bg.png') no-repeat center center;
    background-color: #1e1b4b;
    /* Dark indigo fallback */
    background-size: cover;
    /* Fallback gradient */
    position: relative;
    overflow: hidden;
}

#view-level-map::before {
    /* Optional overlay if needed, currently removed to show clear sky */
    content: none;
}

/* GAME VIEW BACKGROUND */
/* GAME VIEW BACKGROUND - Consolidated at line 2061 */
/* #view-game {
    background: url('../assets/game-bg-galaxy.png') no-repeat center center/cover fixed;
    min-height: 100vh;
} */

/* =========================================
   NEW SPLIT MODE SELECTION (APP STYLE)
   ========================================= */
/* Peaceful Background */
#view-modes {
    background: url('../assets/modes-bg.png') no-repeat center center/cover;
    position: relative;
    /* Ensure content is readable over bg */
}

#view-modes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.7);
    /* Dark overlay */
    z-index: 0;
}

/* WRITING MODES BACKGROUND */
#view-writing-modes {
    background: url('../assets/writing-bg.png') no-repeat center center/cover;
    position: relative;
}

#view-writing-modes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.7);
    z-index: 0;
}

/* GRAMMAR MODE BACKGROUND */
#view-grammar-intro {
    background: url('../assets/modes-bg.png') no-repeat center center/cover;
    position: relative;
}

#view-grammar-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.85);
    /* Darker overlay */
    z-index: 0;
}

#view-grammar {
    background: url('../assets/grammar-bg-colorful.png') no-repeat center center/cover fixed;
    position: relative;
    min-height: 100%;
    height: auto;
}

#view-grammar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.4);
    /* Lighter overlay */
    z-index: 0;
}

/* Grammar Game Elements */
.grammar-gap {
    display: inline-block;
    min-width: 80px;
    border-bottom: 3px solid var(--neon-purple);
    color: var(--neon-purple);
    text-align: center;
    font-weight: bold;
    padding: 0 0.5rem;
    animation: pulseBorder 2s infinite;
}

@keyframes pulseBorder {
    0% {
        border-color: var(--neon-purple);
    }

    50% {
        border-color: rgba(139, 92, 246, 0.3);
    }

    100% {
        border-color: var(--neon-purple);
    }
}

.grammar-gap.filled {
    border-bottom-style: solid;
    animation: none;
}

.grammar-gap.correct {
    color: #22c55e;
    border-color: #22c55e;
}

.grammar-gap.wrong {
    color: #ef4444;
    border-color: #ef4444;
}

.grammar-option-btn {
    background: rgba(30, 41, 59, 0.8);
    border: 1px solid var(--border-glass);
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1.2rem;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 120px;
}

.grammar-option-btn:hover {
    background: rgba(139, 92, 246, 0.2);
    border-color: var(--neon-purple);
    transform: translateY(-2px);
}

.grammar-option-btn.correct {
    background: #22c55e;
    border-color: #22c55e;
    color: white;
}

.grammar-option-btn.wrong {
    background: #ef4444;
    border-color: #ef4444;
    color: white;
    opacity: 0.5;
}

/* Grammar Score Display */
#grammar-score-container {
    background: rgba(139, 92, 246, 0.2);
    border: 1px solid rgba(139, 92, 246, 0.4);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

#grammar-score {
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.8);
    font-size: 1.4rem !important;
}

/* Grammar Continue Buttons Enhancement */
#view-grammar #btn-grammar-pass {
    background: rgba(139, 92, 246, 0.3) !important;
    border: 2px solid rgba(139, 92, 246, 0.6) !important;
    color: white !important;
    font-weight: bold !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
    transition: all 0.3s ease;
}

#view-grammar #btn-grammar-pass:hover {
    background: rgba(139, 92, 246, 0.5) !important;
    border-color: var(--neon-purple) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.5);
}

#view-grammar #btn-grammar-next {
    background: linear-gradient(135deg, var(--neon-purple), #6d28d9) !important;
    border: 2px solid rgba(139, 92, 246, 0.8) !important;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    transition: all 0.3s ease;
}

#view-grammar #btn-grammar-next:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
}

.modes-split-layout {
    position: relative;
    z-index: 1;
    /* Content above overlay */
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 1rem;
    color: var(--text-primary);
    padding: 1rem;
    overflow: hidden;
}

.leaderboard-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible !important;
    /* Ensure content is seen */
    min-height: 200px;
}

.modes-header-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

/* FIX: Bright styling for Quit Button */
.btn-text {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    /* Ensure it floats above potential overlays */
    z-index: 1000;
}

.btn-text:hover {
    background: #ffffff;
    color: #0f172a;
    /* Dark text on white bg */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

.back-btn-top {
    font-size: 1.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid var(--border-glass);
    transition: background 0.2s;
}

.back-btn-top:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Star Button Polish (Premium Gold) */
.btn-star {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #94a3b8;
    /* Inactive Gray */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-star:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1) rotate(5deg);
    color: white;
}

.btn-star.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    /* Gold Gradient */
    border-color: #fcd34d;
    color: white;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.6);
    animation: starPulse 2s infinite;
}

.btn-star svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

@keyframes starPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(245, 158, 11, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
    }
}

.back-btn-top {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 50;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-btn-top:hover {
    background: var(--neon-purple) !important;
    transform: scale(1.1);
}

/* Grammar Level Cards */
.grammar-level-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.grammar-level-card {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 16px;
    color: white;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.grammar-level-card:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.level-a1 {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
}

.level-a2 {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
}

.level-b1 {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
}

.level-b2 {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
}

/* Compact Mode Grid */
.mode-grid-compact {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /* Tighter gap */
    overflow-y: auto;
    padding: 0.5rem;
    /* Space for hover effects */
}

.level-node {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    /* White/Light bg */
    border: 3px solid rgba(0, 0, 0, 0.6);
    /* Dark border */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    color: #000;
    /* Black Text */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
}

.mode-card.compact {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    /* Reduced padding */
    background: rgba(30, 41, 59, 0.6);
    /* Slightly more transparent */
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.mode-card.compact:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
    border-color: rgba(14, 165, 233, 0.5);
    background: rgba(30, 41, 59, 0.8);
}

.mode-card.compact:active {
    transform: scale(0.98);
}

/* Floating Animation */
@keyframes floatY {

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

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

/* Add shimmer effect */
.mode-card.compact::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: 0.5s;
}

.mode-card.compact:hover::after {
    left: 100%;
}

.mode-card.compact .mode-icon {
    font-size: 1.5rem;
    /* Smaller icon */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

.mode-card.compact h3 {
    font-size: 0.95rem;
    /* Smaller Font */
    margin: 0;
    font-weight: 700;
}

.mode-card.compact p {
    font-size: 0.75rem;
    /* Smaller description */
    color: var(--text-secondary);
    margin: 0;
}

/* Leaderboard Card & Table */
.leaderboard-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    padding: 1rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.lb-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.badge-rush {
    background: rgba(245, 158, 11, 0.2);
    color: var(--neon-gold);
    padding: 0.2rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: bold;
}

.table-wrapper {
    flex: 1;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-md);
}

.lb-table {
    width: 100%;
    border-collapse: collapse;
}

.lb-table th {
    text-align: left;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.03);
    position: sticky;
    top: 0;
    z-index: 10;
}

.lb-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--border-glass);
    font-size: 0.9rem;
}

.lb-table tr:last-child td {
    border-bottom: none;
}

/* Modes Split Layout - Base */
/* Modes Split Layout - Base Container */
/* Modes Split Layout - Base Container */
.modes-split-layout {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
    padding: 1rem;
    padding-top: 5rem;
    /* Increased top padding to clear absolute button */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* MOBILE FIRST: Flex Column Layout for #view-modes */
#view-modes .modes-split-layout {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
    justify-content: flex-start;
    padding-top: 6rem;
    height: 100vh;
    overflow-y: auto;
    /* Allow scrolling entire view if needed */
}

/* Area 1: Leaderboard (Top) */
.area-leaderboard {
    order: 1;
    flex: 0 0 auto;
    /* Don't grow, just fit content */
    width: 100%;
}

/* Area 2: Modes (Middle) */
.area-modes {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Area 3: Footer (Bottom) */
.area-footer {
    order: 3;
    flex: 0 0 auto;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
    width: 100%;
}

/* Area 2: Modes (Middle) */
.area-modes {
    order: 2;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Area 3: Footer (Bottom) */
.area-footer {
    order: 3;
    flex: 0 0 auto;
    padding-top: 0.5rem;
    padding-bottom: 2rem;
    width: 100%;
}

.modes-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    height: 100%;
    padding-bottom: 2rem;
    scrollbar-width: none;
    min-width: 0;
    width: 100%;
}

/* MOBILE: Hide rows > 3 in leaderboard */
#view-modes .lb-table tbody tr:nth-child(n+4) {
    display: table-row !important;
    /* Temporarily show to check alignment issues user mentioned */
}

/* Align ranks 4 and 5 (which have no medal) to look better */
/* Align ranks 4 and 5 (which have no medal) to look better */
#view-modes .lb-table tbody tr:nth-child(n+4) td:first-child {
    padding-left: 0.8rem;
    font-weight: bold;
    color: var(--text-base);
}

/* Force equal font size for ALL rows (User request) */
#view-modes .lb-table td {
    font-size: 0.85rem !important;
}

/* Mobile Leaderboard Styling */
.leaderboard-card {
    padding: 0.8rem !important;
    background: rgba(30, 41, 59, 0.6);
}

.lb-table td,
.lb-table th {
    padding: 0.4rem;
    font-size: 0.85rem;
    max-width: none !important;
    /* Reset truncation for single column */
}

/* Ensure header stays compact */
.modes-header-group {
    margin-bottom: 0.5rem;
    padding-left: 0.2rem;
}

.modes-header-group h2 {
    font-size: 1rem;
    margin-bottom: 0;
    white-space: nowrap;
}

/* Back button positioning for mobile grid */
/* Back button positioning for mobile grid */
#view-modes .modes-header-group .back-btn-top {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 50;
    /* Ensure high z-index */
    background: rgba(15, 23, 42, 0.8);
    /* Add background to ensure visibility if overlap persists */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}


/* Mobile Mode Grid */
.mode-grid-compact {
    display: flex;
    /* Changed from grid to flex column for better list view */
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
}

.mode-card.compact {
    display: flex;
    flex-direction: row;
    /* Icon left, text right */
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    padding: 1.2rem;
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    height: auto;
    /* Allow growth */
    min-height: 80px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.mode-card.compact .mode-icon {
    font-size: 2rem;
    margin-bottom: 0;
    margin-right: 1rem;
    flex-shrink: 0;
}

.mode-card.compact .mode-info {
    flex: 1;
}

.mode-card.compact h3 {
    font-size: 1rem;
    margin: 0 0 0.2rem 0;
    line-height: 1.2;
    color: white;
}

.mode-card.compact p {
    display: block;
    /* Show description */
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.3;
}

/* Leaderboard Compact */
.leaderboard-card {
    padding: 0.5rem 0.2rem !important;
    width: 100%;
    overflow: hidden;
}

.lb-header {
    display: flex;
    flex-direction: column;
    /* Stack on tiny screens */
    align-items: center;
    margin-bottom: 0.4rem;
    gap: 0.2rem;
}

.lb-header h3 {
    font-size: 0.75rem;
    white-space: nowrap;
}

.badge-rush {
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
}

/* Table Compact Logic */
.table-wrapper {
    overflow-x: auto;
    width: 100%;
}

.lb-table {
    font-size: 0.7rem;
    width: 100%;
}

.lb-table th {
    padding: 0.2rem;
    font-size: 0.65rem;
    white-space: nowrap;
}

.lb-table td {
    padding: 0.2rem;
    font-size: 0.7rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Force name truncation */
.lb-table td:nth-child(2) {
    max-width: 60px;
    /* Very aggressive truncation */
}

/* Specific Mobile Styles (very small) */
@media (max-width: 400px) {
    #view-modes .modes-split-layout {
        gap: 0.2rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
    }

    .mode-card.compact .mode-icon {
        font-size: 1.2rem;
    }
}

/* Desktop Override */
@media (min-width: 1024px) {

    /* Apply desktop grid logic nicely */
    #view-modes .modes-split-layout {
        grid-template-columns: 2fr 1fr;
        padding: 3rem;
        gap: 2rem;
        max-width: 1200px;
        margin: 0 auto;
        height: auto;
        overflow: visible;
    }

    /* General override for others if needed */
    .modes-split-layout {
        flex-direction: row;
    }

    .modes-column {
        height: auto;
        overflow: visible;
    }

    .leaderboard-column {
        height: auto;
        overflow: visible;
    }

    .mode-card.compact {
        flex-direction: row;
        text-align: left;
        padding: 1.2rem;
    }

    .mode-card.compact .mode-icon {
        margin-bottom: 0;
        font-size: 2rem;
    }

    .mode-card.compact p {
        display: block;
        font-size: 0.85rem;
    }
}

/* Game View Background */
/* Game View Background - Fullscreen Overlay Fix */
#view-game {
    /* Default - Galaxy Theme */
    background: url('../assets/game-bg-galaxy.png') no-repeat center center;
    background-size: cover;
    position: fixed;
    /* Force full screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    /* Raised to cover .main-header (z-index 50) */
    /* Above dashboard */
    overflow-y: auto;
    /* Internal scrolling */
    -webkit-overflow-scrolling: touch;
    transition: background-image 0.5s ease-in-out;
}

#view-game.bg-survival {
    background-image: url('../assets/bg-survival.png') !important;
}

#view-game.bg-rush {
    background-image: url('../assets/bg-rush.png') !important;
}

#view-game.bg-favorites {
    background-image: url('../assets/bg-favorites.png') !important;
}

#view-game.bg-adventure {
    background-image: url('../assets/library-bg.png') !important;
}

#view-game::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(2, 6, 23, 0.85);
    z-index: 0;
}

/* FIX: Transparent header for all game modes to prevent background gap */
#view-game .game-header-bar {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 100;
}

/* =========================================
   LIST VIEW IMPROVEMENTS
   ========================================= */
.filter-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.3rem;
    border-radius: 12px;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-glass);
}

.filter-tab {
    flex: 1;
    padding: 0.8rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.filter-tab:hover {
    color: white;
    background: rgba(255, 255, 255, 0.05);
}

.filter-tab.active {
    background: rgba(14, 165, 233, 0.15);
    color: var(--neon-blue);
    border: 1px solid rgba(14, 165, 233, 0.3);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
}

/* Level Filter Chips */
.level-filters {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.2rem 0.2rem 0.8rem 0.2rem;
    margin-bottom: 0.5rem;
    scrollbar-width: none;
    /* Hide scrollbar Firefox */
}

.level-filters::-webkit-scrollbar {
    display: none;
    /* Hide scrollbar Chrome */
}

.level-chip {
    padding: 0.5rem 1.2rem;
    border: 1px solid var(--border-glass);
    background: rgba(30, 41, 59, 0.4);
    color: var(--text-secondary);
    border-radius: 50px;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
    transition: all 0.2s;
    font-weight: 500;
}

.level-chip:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
    transform: translateY(-1px);
}

.level-chip.active {
    background: var(--neon-gold);
    color: #000;
    border-color: var(--neon-gold);
    font-weight: 800;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

/* Fix Leaderboard Visibility */
.leaderboard-column {
    overflow: visible !important;
}

.leaderboard-card {
    overflow: visible !important;
}

.table-wrapper {
    min-height: 200px;
}

/* =========================================
   WRITING MODE OPTIMIZATIONS
   ========================================= */

/* Override inline styles for better control */
#writing-target-meaning {
    font-size: 2.2rem !important;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

#view-writing .game-card {
    justify-content: flex-start !important;
    /* Move content to top */
    padding-top: 2rem;
    gap: 1.5rem !important;
    /* Reduce gap */
}

/* Slots Area */
#writing-slots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem !important;
    margin-bottom: 1rem;
}

.writing-slot {
    width: 45px;
    height: 55px;
    font-size: 1.8rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.writing-slot:hover {
    border-bottom-color: rgba(255, 255, 255, 0.6);
}

.writing-slot.filled {
    border-bottom-color: var(--neon-blue);
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.5);
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Letter Pool Area */
#writing-pool {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem !important;
    margin-top: 0.5rem;
}

.letter-tile {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    transition: all 0.2s;
    user-select: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.letter-tile:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.letter-tile:active {
    transform: translateY(-1px);
}

.letter-tile.used {
    background: rgba(0, 0, 0, 0.2);
    color: rgba(255, 255, 255, 0.2);
    border-color: transparent;
    box-shadow: none;
    pointer-events: none;
    transform: scale(0.9);
}

/* Animation for filled slots */
@keyframes popIn {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    70% {
        transform: scale(1.2);
    }

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

/* MOBILE RESPONSIVENESS */
@media (max-width: 768px) {
    #writing-target-meaning {
        font-size: 1.6rem !important;
        margin-top: 0.5rem;
    }

    #view-writing .game-card {
        padding: 1rem;
        padding-top: 1rem;
        gap: 1rem !important;
        width: 95%;
        /* Use more width on mobile */
    }

    .writing-slot {
        width: 32px;
        height: 42px;
        font-size: 1.4rem;
        border-bottom-width: 2px;
    }

    #writing-slots {
        gap: 0.3rem !important;
    }

    .letter-tile {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        border-radius: 8px;
    }

    #writing-pool {
        gap: 0.4rem !important;
    }

    .btn-star {
        width: 40px;
        /* Smaller speak button */
        height: 40px;
    }

    .btn-star svg {
        width: 20px;
        height: 20px;
    }
}

/* Very small screens */
@media (max-width: 380px) {
    .writing-slot {
        width: 28px;
        height: 36px;
        font-size: 1.2rem;
    }

    .letter-tile {
        width: 34px;
        height: 34px;
        font-size: 0.9rem;
    }
}

/* --- MOBILE SPLIT SCREEN FIX --- */
@media (max-width: 768px) {
    .split-screen-container {
        flex-direction: column;
        overflow-y: auto;
        /* Allow scroll if needed overall, though panes handle it */
    }

    .task-pane {
        width: 100%;
        flex: 1;
        /* Takes available space, usually pushes chat down */
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 1rem;
        min-height: 50%;
        /* Ensure it takes at least half */
    }

    .chat-pane {
        width: 100%;
        height: 45%;
        /* Fixed height for chat at bottom */
        border-left: none;
        flex: none;
        /* Don't shrink */
    }

    .task-question-text {
        font-size: 1.8rem;
    }

    .task-textarea {
        font-size: 1.2rem;
        padding: 1rem;
    }
}

/* --- SPLIT SCREEN AI MODE --- */
/* --- SPLIT SCREEN AI MODE --- */
.split-screen-container {
    display: flex;
    height: 100%;
    width: 100%;
    /* Peaceful Nature Background with readable overlay */
    background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.85)), url('../assets/game-bg-nature.png') no-repeat center center/cover;
    overflow: hidden;
    position: absolute;
    /* Changed from fixed to absolute */
    top: 0;
    left: 0;
    z-index: 50;
    /* Lower z-index to be safe within view */
}

/* FIX: Force hide when parent view is hidden (Safety Net) */
.view.hidden .split-screen-container {
    display: none !important;
}

/* FIX: Force hide when parent view is hidden */
.view.hidden .split-screen-container {
    display: none !important;
    pointer-events: none;
    z-index: -9999;
}

/* Left: Task Pane */
.task-pane {
    flex: 1;
    /* Takes remaining space */
    display: flex;
    flex-direction: column;
    padding: 2rem 3rem;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    background: radial-gradient(circle at 10% 20%, rgba(14, 165, 233, 0.05) 0%, transparent 40%);
}

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.back-btn-simple {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.back-btn-simple:hover {
    background: white;
    color: black;
}

.score-display {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--neon-blue);
}

.task-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
}

.task-label {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.task-question-text {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    line-height: 1.2;
}

.task-input-wrapper {
    margin-top: 1rem;
}

.task-textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 1.5rem;
    font-size: 1.5rem;
    color: white;
    resize: none;
    font-family: inherit;
    transition: all 0.3s;
}

.task-textarea:focus {
    outline: none;
    border-color: var(--neon-blue);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.1);
}

.task-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.btn-action.check {
    width: 100%;
    padding: 1.2rem;
    background: white;
    color: black;
    border: none;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.1s;
}

.btn-action.check:hover {
    transform: translateY(-2px);
    background: #f8fafc;
}

.sub-actions {
    display: flex;
    gap: 1rem;
}

.btn-action.sub {
    flex: 1;
    padding: 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-action.sub:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Right: AI Chat Pane */
.chat-pane {
    width: 450px;
    /* Fixed width for chat */
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(15, 23, 42, 0.5);
}

.ai-avatar {
    font-size: 2rem;
    background: rgba(255, 255, 255, 0.1);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.ai-info {
    display: flex;
    flex-direction: column;
}

.ai-name {
    font-weight: 700;
    color: white;
}

.ai-status {
    font-size: 0.8rem;
    color: #22c55e;
}

.chat-messages {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Scrollbar for chat */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* Bubbles */
.chat-bubble {
    padding: 1rem;
    border-radius: 16px;
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 90%;
    animation: fadeIn 0.3s ease;
    margin-bottom: 0.5rem;
}

.chat-bubble.ai {
    background: rgba(30, 41, 59, 0.8);
    color: #e2e8f0;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.chat-bubble.user {
    background: var(--neon-blue);
    color: black;
    font-weight: 500;
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* --- PREMIUM LANGUAGE TOGGLE --- */
.task-header {
    gap: 1rem;
}

.lang-toggle-btn {
    position: relative;
    padding: 0.5rem 1rem;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Hover Effect */
.lang-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.3);
}

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

/* Content wrapper */
.toggle-content {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

/* Gradient Backgrounds based on state */
/* Default (EN -> TR): Blue to Red Gradient */
.lang-toggle-btn.mode-en-tr {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2) 0%, rgba(220, 38, 38, 0.2) 100%);
    border-color: rgba(14, 165, 233, 0.4);
}

/* Swapped (TR -> EN): Red to Blue Gradient */
.lang-toggle-btn.mode-tr-en {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.3) 0%, rgba(37, 99, 235, 0.3) 100%);
    border-color: rgba(220, 38, 38, 0.5);
}

/* Flag Images */
.flag-img {
    width: 24px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.lang-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-text {
    font-weight: 800;
    font-size: 1rem;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.arrow-icon {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-block;
}

/* Animation on Toggle */
.rotate-anim {
    animation: spin 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

    100% {
        transform: rotate(180deg);
    }
}

/* Admin Grid Layout */
.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Ensure full width on mobile */
@media (max-width: 600px) {
    .admin-grid {
        grid-template-columns: 1fr;
    }
}

/* Force Admin View Center */
#view-admin {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

/* --- MISSING LAYOUT STYLES restored --- */
.modes-split-layout {
    display: flex;
    gap: 2rem;
    height: 100%;
    align-items: flex-start;
}

.modes-column {
    flex: 1;
}

.leaderboard-column {
    width: 320px;
}

.modes-header-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.hidden {
    display: none !important;
}

.profile-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.8rem 1rem;
    background: none;
    border: none;
    color: white;
    font-size: 0.95rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.profile-menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--neon-gold);
}

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

/* Ensure compact grid displays correctly */
.mode-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.mode-card.compact {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
}

/* Ensure compact grid displays correctly */
/* Writing Modes Section (Cleaned) */
#view-writing-modes {
    background: url('../assets/dashboard-bg.png') no-repeat center center/cover fixed;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}

.writing-modes-container {
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.writing-modes-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding-left: 0.5rem;
}

.writing-modes-header .back-btn-top {
    font-size: 1.2rem;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.writing-modes-title h2 {
    font-size: 1.5rem;
    margin: 0;
    line-height: 1.2;
    color: white;
}

.writing-modes-title p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: normal !important;
    /* Override inline styles */
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Vertical Stack Layout - ABSOLUTE OVERRIDE */
#view-writing-modes .writing-modes-grid,
.writing-modes-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    /* CRITICAL: Reset all grid properties */
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-auto-flow: initial !important;
}

/* Colorful Rectangular Cards */
.writing-mode-card {
    border-radius: 16px;
    padding: 1rem 1.5rem;
    display: flex !important;
    flex-direction: row !important;
    /* Icon | Text */
    align-items: center;
    text-align: left;
    gap: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    min-height: 80px;
}

/* Card 1: Puzzle (Harf Birleştirme) - Blue/Cyan Gradient */
.writing-mode-card:nth-child(1) {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(6, 182, 212, 0.2)) !important;
    border-color: rgba(14, 165, 233, 0.4);
}

.writing-mode-card:nth-child(1):hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.3), rgba(6, 182, 212, 0.3)) !important;
    transform: translateX(5px);
}

/* Card 2: Typing (Kelime Yazma) - Purple/Pink Gradient */
.writing-mode-card:nth-child(2) {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2)) !important;
    border-color: rgba(139, 92, 246, 0.4);
}

.writing-mode-card:nth-child(2):hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3)) !important;
    transform: translateX(5px);
}

.writing-mode-card .mode-card-icon {
    font-size: 2rem !important;
    margin-bottom: 0 !important;
    min-width: 50px;
    display: flex;
    justify-content: center;
}

.writing-mode-card h3 {
    font-size: 1.1rem;
    margin: 0 0 0.2rem 0;
    color: white;
}

.writing-mode-card p {
    font-size: 0.8rem;
    opacity: 0.8;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

/* Middle duplicate block removed */

/* Game Over Modal Styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Dark transparent bg */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: rgba(30, 41, 59, 1);
    border: 1px solid var(--neon-gold);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    text-align: center;
    max-width: 90%;
    width: 400px;
    box-shadow: 0 0 40px rgba(245, 158, 11, 0.3);
    animation: zoomIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes zoomIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }

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

#view-writing {
    background: url('../assets/game-bg-galaxy.png') no-repeat center center;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 200;
    /* Raised to cover header */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start !important;
    /* Force content to start from top */
    padding-top: 140px !important;
    /* Large padding to clear button */
}

#view-writing .game-card {
    margin-top: 1rem !important;
    /* Extra separation */
}

/* Visibility enhancements for Writing Mode */
#view-writing .back-btn-top {
    position: fixed;
    left: 10px;
    /* Minimal offset for absolute top-left */
    top: 10px;
    background: rgba(15, 23, 42, 0.95) !important;
    /* Nearly opaque dark */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    z-index: 9999 !important;
    /* Nuclear z-index */
    color: white !important;
    width: 45px;
    height: 45px;
    font-size: 1.5rem;
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    z-index: 1000;
    color: white !important;
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#view-writing .game-header-bar {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0;
    min-height: 0;
    /* CRITICAL FIX: Break stacking context so fixed button works */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    filter: none !important;
    perspective: none !important;
}

#view-writing #writing-score-container {
    display: none !important;
    background: rgba(15, 23, 42, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

#view-writing .btn-secondary {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

#view-writing .btn-secondary:hover {
    background: rgba(30, 41, 59, 1);
    transform: translateY(-2px);
}

/* Old conflicting styles removed */

/* NUCLEAR FIX: Force Writing Mode Layout */
#view-writing-modes .writing-modes-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    /* Reset grid */
    gap: 1rem !important;
}

#view-writing-modes .writing-mode-card {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    padding: 1rem 1.5rem !important;
    align-items: center !important;
    min-height: 80px !important;
    border-radius: 16px !important;
    text-align: left !important;
    justify-content: flex-start !important;
}

#view-writing-modes .writing-mode-card .mode-card-icon {
    font-size: 2rem !important;
    margin-bottom: 0 !important;
    margin-right: 1.5rem !important;
}

#view-writing-modes .writing-mode-card h3 {
    font-size: 1.1rem !important;
    margin: 0 !important;
}

#view-writing-modes .writing-mode-card p {
    font-size: 0.8rem !important;
    margin: 0 !important;
}

/* Force Colors */
#view-writing-modes .writing-mode-card:nth-child(1) {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(6, 182, 212, 0.2)), rgba(2, 6, 23, 0.9) !important;
    border: 1px solid rgba(14, 165, 233, 0.6) !important;
}

#view-writing-modes .writing-mode-card:nth-child(2) {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2)), rgba(2, 6, 23, 0.9) !important;
    border: 1px solid rgba(139, 92, 246, 0.6) !important;
}

/* ========================================
   MOBILE OPTIMIZATION - WRITING INPUT MODE
   ======================================== */

@media (max-width: 480px) {

    /* Language Toggle Button - Make it smaller/Compact for Header */
    #btn-lang-toggle {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        min-height: 32px;
        gap: 6px !important;
    }

    #btn-lang-toggle .flag-img {
        width: 18px !important;
        height: 13px !important;
    }

    #btn-lang-toggle .lang-text {
        font-size: 0.8rem !important;
    }

    #btn-lang-toggle .arrow-icon {
        font-size: 0.8rem !important;
    }

    /* English Sentence Display - Reduce massive text */
    #input-target-meaning {
        font-size: clamp(1rem, 3.5vw, 1.3rem) !important;
        line-height: 1.3 !important;
        padding: 1rem !important;
        word-wrap: break-word;
        overflow-wrap: anywhere;
        /* User Requested: Frame and Light Background */
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border-radius: 12px !important;
        backdrop-filter: blur(5px);
    }

    /* Writing Input Container - Better spacing */
    #view-writing-input {
        padding: 0.75rem !important;
    }

    /* AI Chat Messages - More compact */
    #ai-chat-messages {
        max-height: 35vh !important;
        padding: 0.5rem !important;
    }

    .chat-bubble {
        padding: 0.6rem 0.8rem !important;
        font-size: 0.85rem !important;
        max-width: 85% !important;
    }

    .chat-bubble.ai {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    /* Input Field - Touch target */
    #writing-direct-input {
        font-size: 1rem !important;
        padding: 0.75rem !important;
        min-height: 44px;
    }

    /* Buttons - Ensure touch targets */
    #btn-check-answer {
        font-size: 0.95rem !important;
        padding: 0.75rem 1.25rem !important;
        min-height: 48px;
        font-weight: 600;
    }

    .writing-input-actions button {
        min-height: 44px;
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
    }

    /* Back button spacing */
    .back-btn-top {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Mobile Keyboard Optimization */
@media (max-width: 480px) {

    /* Task Header (Removed/Consolidated into Chat Header) */

    /* Consolidated Chat Header for Mobile */
    .chat-header {
        justify-content: space-between !important;
        padding: 0.5rem 1rem !important;
        background: rgba(15, 23, 42, 0.95) !important;
        /* Keep it semi-transparent dark or transparent as per user preference? User asked to remove dark backgound from the PREVIOUS header location. 
        But text needs contrast against galaxy background? 
        The chat pane has `order: -1`.
        If I make it transparent, does it overlap weirdly? 
        The user said "clean dark background" earlier, then "remove dark background". 
        Let's try transparent first as per last request, or minimal. 
        Actually, the chat pane itself might have background.
        Let's stick to transparent for the header to match the request "place it where AI assistant is". 
        Wait, AI assistant pane has its own background.
        The user said "move to the place where AI assistant writes".
        If I move it there, I should probably keep the AI assistant header style but just spaced out.
        The AI assistant header usually has a background.
        Let's keep the existing AI header background but spread items. */
    }

    /* Task Content - Remove label spacing since we deleted it */
    .task-content {
        padding: 1rem 0.75rem !important;
        gap: 0.75rem !important;
    }

    /* Question text - More compact */
    .task-question-text {
        margin-top: 0 !important;
        margin-bottom: 0.75rem !important;
    }

    /* Task input wrapper - Prevent keyboard overlap issues */
    .task-input-wrapper {
        margin-bottom: 0.5rem !important;
    }

    .task-textarea {
        font-size: 1rem !important;
        padding: 0.75rem !important;
        min-height: 70px;
    }

    /* Task Actions - Ensure visible above keyboard */
    .task-actions {
        padding: 0.75rem !important;
        padding-bottom: 1.5rem !important;
        /* Extra bottom space for iOS */
        background: rgba(15, 23, 42, 0.95);
        position: sticky;
        bottom: 0;
    }

    .sub-actions {
        gap: 0.5rem !important;
        margin-top: 0.5rem !important;
    }

    /* Split Screen - Stack vertically on mobile */
    .split-screen-container {
        flex-direction: column !important;
        height: auto !important;
    }

    .task-pane {
        width: 100% !important;
        min-height: auto !important;
    }

    .chat-pane {
        width: 100% !important;
        max-height: 40vh !important;
        order: -1;
        /* Move chat ABOVE task on mobile */
    }
}

/* iOS Safe Area (notch devices) */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 480px) {

        /* NUCLEAR FIX: Force Writing Mode Layout */
        #view-writing-modes .writing-modes-grid {
            display: flex !important;
            flex-direction: column !important;
            grid-template-columns: none !important;
            /* Reset grid */
            gap: 1rem !important;
        }

        #view-writing-modes .writing-mode-card {
            display: flex !important;
            flex-direction: row !important;
            width: 100% !important;
            padding: 1rem 1.5rem !important;
            align-items: center !important;
            min-height: 80px !important;
            border-radius: 16px !important;
            text-align: left !important;
            justify-content: flex-start !important;
        }

        #view-writing-modes .writing-mode-card .mode-card-icon {
            font-size: 2rem !important;
            margin-bottom: 0 !important;
            margin-right: 1.5rem !important;
        }

        #view-writing-modes .writing-mode-card h3 {
            font-size: 1.1rem !important;
            margin: 0 !important;
        }

        #view-writing-modes .writing-mode-card p {
            font-size: 0.8rem !important;
            margin: 0 !important;
        }

        /* Force Colors */
        #view-writing-modes .writing-mode-card:nth-child(1) {
            background: linear-gradient(135deg, rgba(14, 165, 233, 0.4), rgba(6, 182, 212, 0.4)) !important;
            border: 1px solid rgba(14, 165, 233, 0.6) !important;
        }

        #view-writing-modes .writing-mode-card:nth-child(2) {
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.4), rgba(236, 72, 153, 0.4)) !important;
            border: 1px solid rgba(139, 92, 246, 0.6) !important;
        }

        /* ========================================
   MOBILE OPTIMIZATION - WRITING INPUT MODE
   ======================================== */

        @media (max-width: 480px) {

            /* Language Toggle Button - Make it smaller */
            #btn-lang-toggle {
                font-size: 0.85rem !important;
                padding: 0.4rem 0.8rem !important;
                min-height: 36px;
            }

            /* English Sentence Display - Reduce massive text */
            #input-target-meaning {
                font-size: clamp(1rem, 3.5vw, 1.3rem) !important;
                line-height: 1.3 !important;
                padding: 1rem !important;
                word-wrap: break-word;
                overflow-wrap: anywhere;
            }

            /* Writing Input Container - Better spacing */
            #view-writing-input {
                padding: 0.75rem !important;
            }

            /* AI Chat Messages - More compact */
            #ai-chat-messages {
                max-height: 35vh !important;
                padding: 0.5rem !important;
            }

            .chat-bubble {
                padding: 0.6rem 0.8rem !important;
                font-size: 0.85rem !important;
                max-width: 85% !important;
            }

            .chat-bubble.ai {
                font-size: 0.85rem !important;
                line-height: 1.4 !important;
            }

            /* Input Field - Touch target */
            #writing-direct-input {
                font-size: 1rem !important;
                padding: 0.75rem !important;
                min-height: 44px;
            }

            /* Buttons - Ensure touch targets */
            #btn-check-answer {
                font-size: 0.95rem !important;
                padding: 0.75rem 1.25rem !important;
                min-height: 48px;
                font-weight: 600;
            }

            .writing-input-actions button {
                min-height: 44px;
                padding: 0.6rem 1rem !important;
                font-size: 0.85rem !important;
            }

            /* Back button spacing */
            .back-btn-top {
                min-width: 44px;
                min-height: 44px;
            }
        }

        /* Mobile Keyboard Optimization */
        @media (max-width: 480px) {

            /* Task Header - Move to top, compact */
            .task-header {
                padding: 0.5rem 0.75rem !important;
                gap: 0.75rem !important;
                background: rgba(15, 23, 42, 0.98);
                position: sticky;
                top: 0;
                z-index: 10;
                border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }

            /* Task Content - Remove label spacing since we deleted it */
            .task-content {
                padding: 1rem 0.75rem !important;
                gap: 0.75rem !important;
            }

            /* Question text - More compact */
            .task-question-text {
                margin-top: 0 !important;
                margin-bottom: 0.75rem !important;
            }

            /* Task input wrapper - Prevent keyboard overlap issues */
            .task-input-wrapper {
                margin-bottom: 0.5rem !important;
            }

            .task-textarea {
                font-size: 1rem !important;
                padding: 0.75rem !important;
                min-height: 70px;
            }

            /* Task Actions - Ensure visible above keyboard */
            .task-actions {
                padding: 0.75rem !important;
                padding-bottom: 1.5rem !important;
                /* Extra bottom space for iOS */
                background: rgba(15, 23, 42, 0.95);
                position: sticky;
                bottom: 0;
            }

            .sub-actions {
                gap: 0.5rem !important;
                margin-top: 0.5rem !important;
            }

            /* Split Screen - Stack vertically on mobile */
            .split-screen-container {
                flex-direction: column !important;
                min-height: 100vh !important;
            }

            .task-pane {
                width: 100% !important;
                min-height: auto !important;
            }

            .chat-pane {
                width: 100% !important;
                max-height: 40vh !important;
                order: -1;
                /* Move chat ABOVE task on mobile */
            }
        }

        /* iOS Safe Area (notch devices) */
        @supports (padding: env(safe-area-inset-bottom)) {
            @media (max-width: 480px) {
                .task-actions {
                    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
                }
            }
        }

        #view-writing-modes {
            background: url('../assets/game-bg-galaxy.png') no-repeat center center/cover;
            position: relative;
            z-index: 1;
        }

        #view-writing-modes::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: -1;
        }
    }

    /* =========================================
   LEADERBOARD IMPROVEMENTS
   ========================================= */

    .leaderboard-card {
        background: rgba(15, 23, 42, 0.6);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 1.5rem;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        max-width: 100%;
        margin-bottom: 2rem;
        display: flex;
        flex-direction: column;
    }

    /* =========================================
       GLOBAL LEADERBOARD (PREMIUM ZINC-AMBER THEME)
       ========================================= */
    #view-global-leaderboard {
        background: #09090b;
        /* Zinc 950 - Almost Black but rich */
        color: #f4f4f5;
        overflow-y: auto;
        padding-bottom: 2rem;
    }

    .global-leaderboard-header {
        position: relative;
        padding: 4rem 2rem 2rem;
        background: #18181b;
        /* Zinc 900 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        text-align: center;
        margin-bottom: 2rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

    .global-leaderboard-header .back-btn-top {
        position: absolute;
        top: 2rem;
        left: 2rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #a1a1aa;
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    .global-leaderboard-header .back-btn-top:hover {
        background: rgba(245, 158, 11, 0.1);
        border-color: #f59e0b;
        color: #f59e0b;
        transform: scale(1.05);
    }

    .global-leaderboard-header .header-title {
        font-size: 2rem;
        font-weight: 800;
        color: #ffffff;
        letter-spacing: -0.5px;
        margin-bottom: 0.5rem;
    }

    .global-leaderboard-header .header-subtitle {
        color: #71717a;
        font-size: 0.95rem;
        font-weight: 400;
    }

    .global-leaderboard-container {
        max-width: 750px;
        margin: 0 auto;
        padding: 0 1.5rem;
    }

    .leaderboard-card-main {
        background: #18181b;
        /* Zinc 900 */
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        overflow: hidden;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    }

    .table-header-row {
        display: grid;
        grid-template-columns: 70px 1fr 120px;
        padding: 1.25rem 1.5rem;
        background: rgba(255, 255, 255, 0.03);
        border-bottom: 2px solid rgba(255, 255, 255, 0.05);
        color: #a1a1aa;
        font-weight: 700;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1.5px;
    }


    #global-leaderboard-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .leaderboard-item {
        display: grid;
        grid-template-columns: 70px 1fr 120px;
        padding: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        align-items: center;
        transition: all 0.2s ease;
    }

    .leaderboard-item:hover {
        background: rgba(255, 255, 255, 0.03);
        transform: scale(1.01);
    }

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

    .leaderboard-item.active {
        background: rgba(245, 158, 11, 0.08);
        border-left: 4px solid #f59e0b;
    }

    /* Column Styles */
    .col-rank {
        justify-self: center;
        font-weight: 800;
        font-size: 1.25rem;
        color: #71717a;
    }

    .col-player {
        font-weight: 600;
        font-size: 1.1rem;
        color: #f4f4f5;
    }

    .col-score {
        justify-self: end;
        font-weight: 800;
        color: #f59e0b;
        /* Amber */
        font-size: 1.2rem;
        font-variant-numeric: tabular-nums;
    }


    .loading-state {
        padding: 4rem;
        text-align: center;
        color: #71717a;
        font-style: italic;
    }

    /* Rank Medals */
    .rank-medal {
        display: inline-flex;
        width: 32px;
        height: 32px;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
    }

    .lb-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.9rem;
    }

    .lb-table th {
        position: sticky;
        top: 0;
        background: rgba(30, 41, 59, 0.95);
        /* Opaque enough to hide scroll content */
        backdrop-filter: blur(4px);
        color: var(--text-secondary);
        font-weight: 600;
        text-align: left;
        padding: 1rem;
        z-index: 10;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .lb-table td {
        padding: 0.8rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
        color: var(--text-primary);
    }

    .lb-table tr:last-child td {
        border-bottom: none;
    }

    .lb-table tr:hover {
        background: rgba(255, 255, 255, 0.03);
    }

    /* Rank Medals/Colors */
    .lb-rank {
        font-weight: bold;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
    }

    .lb-table tr:nth-child(1) .lb-rank {
        content: '';
        /* Fallback if no icon */
    }

    /* Specific styling for top 3 rows if we want highlight */
    .lb-table tr:nth-child(1) td {
        color: var(--neon-gold);
        font-weight: bold;
        text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
    }

    .lb-table tr:nth-child(2) td {
        color: #e2e8f0;
        /* Silverish */
        font-weight: 600;
    }

    .lb-table tr:nth-child(3) td {
        color: #ae7146;
        /* Bronze */
        font-weight: 600;
    }



    /* Writing Modes - Space Background */
    #view-writing-modes {
        background-image: url('../assets/game-bg-galaxy.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
    }

    #view-writing-modes::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.6);
        z-index: 0;
    }

    #view-writing-modes>* {
        position: relative;
        z-index: 1;
    }

    /* READING MODE IMPROVEMENTS */
    #reading-library {
        width: 100%;
        overflow-x: hidden;
        padding: 1rem;
    }

    #library-grid {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }

    .book-card {
        /* Reduce size as requested */
        transform: scale(0.9);
        transform-origin: center;
        margin: 0.5rem;
    }


    /* READER MODE NAVIGATION & FOOTER */

    /* Create a solid/glassy footer bar background */

    /* READER MODE NAVIGATION & FOOTER */

    /* Fixed Footer removed to use centered pill from reading.css */

    /* DICTIONARY TOAST (Re-implementation due to missing HTML) */
    .dict-toast {
        position: fixed;
        bottom: 100px;
        /* Above footer */
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: rgba(15, 23, 42, 0.95);
        border: 1px solid var(--neon-blue);
        border-radius: 12px;
        padding: 1rem 1.5rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
        color: white;
        z-index: 10001;
        /* Above footer z-index */
        display: flex;
        align-items: center;
        gap: 1rem;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        pointer-events: none;
        min-width: 300px;
        backdrop-filter: blur(10px);
    }

    .dict-toast.show {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    .dict-content {
        flex: 1;
    }

    .dict-header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 0.2rem;
    }

    .dict-word {
        font-size: 1.2rem;
        font-weight: bold;
        color: var(--neon-gold);
        text-transform: capitalize;
    }

    .dict-level {
        background: rgba(255, 255, 255, 0.1);
        font-size: 0.7rem;
        padding: 2px 6px;
        border-radius: 4px;
        color: var(--text-secondary);
    }

    .dict-meaning {
        font-size: 1rem;
        color: var(--text-primary);
        line-height: 1.3;
    }

    .dict-actions {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Dictionary Star Button */
    .btn-dict-star {
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.3);
        transition: all 0.2s ease;
    }

    .btn-dict-star svg {
        width: 28px;
        height: 28px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
    }

    .btn-dict-star.active {
        color: var(--accent-gold);
        transform: scale(1.1);
    }

    .btn-dict-star.active svg {
        fill: currentColor;
    }

    /* SEARCH SUGGESTIONS STAR */
    .suggestion-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.8rem 1rem;
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        transition: background 0.2s;
    }

    .suggestion-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .suggestion-star {
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 1.5rem;
        color: rgba(255, 255, 255, 0.3);
        padding: 0 0.5rem;
        transition: all 0.2s;
        margin-left: 0.5rem;
    }

    .suggestion-star:hover {
        transform: scale(1.2);
    }

    .suggestion-star.active {
        color: var(--accent-gold);
    }

    /* =========================================
   UI REFINEMENTS (User Request)
   ========================================= */

    /* Force B&W for Profile Avatars */
    .avatar-option img,
    .header-avatar-img,
    .current-avatar-display img {
        filter: grayscale(100%);
        transition: all 0.3s ease;
    }

    /* Remove Neon/Purple Glows from Profile */
    .avatar-option.selected img {
        border-color: #ffffff !important;
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.2) !important;
    }

    .profile-avatar-container {
        border-color: rgba(255, 255, 255, 0.2) !important;
        background: rgba(0, 0, 0, 0.2) !important;
        box-shadow: none !important;
    }

    .profile-avatar-container:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        border-color: rgba(255, 255, 255, 0.4) !important;
    }

    /* Change Button Styling (Simple) */
    .btn-change-avatar {
        background: #000000 !important;
        border: 1px solid rgba(255, 255, 255, 0.3) !important;
        color: #ffffff !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .btn-change-avatar:hover {
        background: #333333 !important;
        border-color: #ffffff !important;
    }

    /* Simple Welcome Text */
    .landing-logo .subtitle {
        font-family: 'Outfit', sans-serif;
        /* Clean font */
        font-weight: 300;
        letter-spacing: 1px;
        opacity: 0.8;
        text-shadow: none !important;
        /* Remove glow */
    }
}

/* CLEAN AUTH DESIGN (User Request: Human-Like, Non-Neon) */
#view-login-modal .modal-content {
    background: #18181b;
    /* Zinc 950 - Neutral Dark */
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border-radius: 24px;
    /* Standard Modern Radius */
    padding: 2.5rem;
}

#view-login-modal h2 {
    color: #f4f4f5;
    /* Zinc 100 */
    font-weight: 600;
}

#view-login-modal p {
    color: #a1a1aa;
    /* Zinc 400 */
}

/* Override Inputs */
#view-login-modal .landing-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    /* Standard rounded corners */
    color: #fff;
    padding: 1rem;
    font-size: 1rem;
    box-shadow: none;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

#view-login-modal .landing-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-gold);
    /* Warm focus */
    outline: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#view-login-modal .landing-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Override Buttons */
#view-login-modal .btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    /* Warm Gold/Orange */
    border: none;
    border-radius: 12px;
    font-weight: 600;
    color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.2s;
}

#view-login-modal .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.3);
}

#view-login-modal .btn-text {
    color: #a1a1aa;
    text-decoration: none;
    border-radius: 8px;
}

#view-login-modal .btn-text:hover {
    color: var(--accent-gold);
    background: rgba(245, 158, 11, 0.1);
}

/* Tabs */
#auth-tabs button {
    border-radius: 0;
    padding: 0.5rem 1rem;
}

#auth-tabs button.active {
    color: var(--accent-gold) !important;
    border-bottom: 2px solid var(--accent-gold) !important;
}

/* =========================================
   GLOBAL LEADERBOARD BACKGROUND
   ========================================= */
#view-global-leaderboard {
    background: url('../assets/game-bg-galaxy.png') no-repeat center center/cover fixed;
    position: relative;
    min-height: 100vh;
}

#view-global-leaderboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.75);
    /* Dark blue/slate overlay */
    z-index: 0;
    pointer-events: none;
}

/* Ensure content is above overlay */
.global-leaderboard-header,
.global-leaderboard-container {
    z-index: 1;
}

/* Fix Header Transparency & Style */
.global-leaderboard-header {
    background: transparent !important;
    /* Remove black bg */
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    /* Subtle glass effect */
}

.global-leaderboard-header .header-title {
    color: white;
    font-size: 2rem;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
    /* Neon glow */
}

.global-leaderboard-header .header-subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.global-leaderboard-header .back-btn-top {
    position: static !important;
    /* Reset absolute positioning for flex layout */
    margin-right: 1rem;
    margin-right: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Brighten Leaderboard Table */
.leaderboard-card-main {
    background: rgba(255, 255, 255, 0.1) !important;
    /* Light glass */
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.table-header-row {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--accent-gold);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

#global-leaderboard-list li {
    background: rgba(0, 0, 0, 0.2) !important;
    /* Lighter than before */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s;
}

#global-leaderboard-list li:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    /* Bright hover */
}

#global-leaderboard-list li .player-name {
    color: white !important;
    font-weight: 600;
}

#global-leaderboard-list li .player-score {
    color: var(--neon-blue) !important;
    font-weight: bold;
    text-shadow: 0 0 5px rgba(14, 165, 233, 0.5);
}

/* =========================================
   LISTENING MODE (The Focus Room)
   ========================================= */
#view-listening {
    background: #0f172a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* Move content up */
    min-height: 100vh;
    padding: 8rem 2rem 2rem 2rem;
    /* Increased top padding to accommodate fixed header */
    position: relative;
    overflow: hidden;
}

#view-listening::before {
    /* Subtle ambient glow */
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.05) 0%, transparent 70%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.listening-header {
    position: absolute;
    top: 2rem;
    left: 1.5rem;
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    pointer-events: none;
    z-index: 20;
}

.listening-header>* {
    pointer-events: auto;
}

.listening-container {
    width: 100%;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    z-index: 10;
}

/* Audio Visualizer (Simple CSS) */
.visualizer-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-wave {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 40px;
}

.audio-wave span {
    display: block;
    width: 6px;
    height: 10%;
    background: var(--neon-blue);
    /* Default inactive color */
    border-radius: 4px;
    transition: all 0.2s ease;
    animation: none;
}

.audio-wave.playing span {
    background: var(--neon-green);
    animation: waveAnim 0.5s ease-in-out infinite alternate;
}

/* Randomize animation delays for nature feel */
.audio-wave span:nth-child(1) {
    animation-delay: 0.1s;
}

.audio-wave span:nth-child(2) {
    animation-delay: 0.3s;
}

.audio-wave span:nth-child(3) {
    animation-delay: 0.0s;
}

.audio-wave span:nth-child(4) {
    animation-delay: 0.4s;
}

.audio-wave span:nth-child(5) {
    animation-delay: 0.2s;
}

@keyframes waveAnim {
    0% {
        height: 10%;
        background: #3b82f6;
    }

    100% {
        height: 100%;
        background: #22c55e;
        box-shadow: 0 0 10px #22c55e;
    }
}

/* Playback Controls */
.playback-controls {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.btn-round-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-round-large {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--neon-blue);
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(14, 165, 233, 0.5);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 5px;
    /* Visual center fix for play icon */
}

.btn-round-large:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(14, 165, 233, 0.8);
}

.btn-round-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Sentence Display */
.sentence-display {
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.8;
    color: #e2e8f0;
    font-weight: 500;
    min-height: 80px;
}

.word.gap {
    display: inline-block;
    min-width: 80px;
    border-bottom: 2px solid var(--neon-gold);
    color: transparent;
    /* Hide text */
    margin: 0 0.3rem;
    position: relative;
    transition: all 0.3s;
}

.word.gap.revealed {
    color: var(--neon-green);
    border-bottom-color: var(--neon-green);
    animation: fadeIn 0.5s ease;
}

/* Input Area */
.listening-input-area {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    max-width: 500px;
    flex-wrap: wrap;
    /* Mobile friendly */
}

#listening-input {
    flex: 1;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid var(--border-glass);
    padding: 1rem;
    font-size: 1.1rem;
    color: white;
    border-radius: 12px;
}

#listening-input:focus {
    border-color: var(--neon-blue);
    outline: none;
    background: rgba(15, 23, 42, 0.8);
}

/* Shake Animation for Wrong Answer */
.shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

/* Voice Selector (Hidden but styled just in case) */
.voice-select {
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Progress */
.listening-progress {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.9rem;
    margin-top: 2rem;
    letter-spacing: 2px;
}

@keyframes pulseWave {
    from {
        transform: scaleY(1);
        opacity: 0.2;
    }

    to {
        transform: scaleY(2.2);
        opacity: 0.6;
    }
}

/* --- SCENARIO CHAT ENHANCEMENTS --- */
.scenario-player-container {
    padding-top: 2rem !important;
}

.scenario-msg-container {
    display: flex;
    align-self: stretch;
    align-items: flex-end;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    width: 100%;
    animation: fadeIn 0.4s ease-out;
}

.scenario-msg-container.left {
    flex-direction: row;
}

.scenario-msg-container.right {
    flex-direction: row-reverse;
}

.scenario-avatar-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    background: var(--bg-dark);
    transition: all 0.3s;
}

.scenario-avatar-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Override existing chat-bubble for better glass look */
.chat-bubble {
    border-radius: 18px !important;
    padding: 1rem 1.25rem !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    max-width: 75% !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s;
}

.left .chat-bubble {
    border-bottom-left-radius: 4px !important;
    background: rgba(30, 41, 59, 0.85) !important;
    backdrop-filter: blur(10px);
}

.right .chat-bubble {
    border-bottom-right-radius: 4px !important;
    background: rgba(51, 65, 85, 0.85) !important;
    backdrop-filter: blur(10px);
}

/* Speaker Label inside bubble */
.bubble-speaker {
    font-weight: 800;
    font-size: 0.7rem;
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.3rem;
    display: block;
}

/* Active Highlight */
.scenario-msg-container.active {
    opacity: 1 !important;
}

.scenario-msg-container.active .chat-bubble {
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
    transform: scale(1.02);
    background: rgba(30, 41, 59, 0.95) !important;
}

.scenario-msg-container.active .scenario-avatar-box {
    border-color: var(--accent-gold);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

/* Inactive State */
.scenario-msg-container:not(.active) {
    opacity: 0.6;
}


#view-scenarios,
#view-scenario-player {
    position: relative;
    min-height: 100vh;
    z-index: 0;
    overflow-y: auto !important;
    background: transparent !important;
    /* Managed by pseudo-element */
}

#view-scenarios::before,
#view-scenario-player::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(2, 6, 23, 0.95)), url('../assets/game-bg-city.png') no-repeat center center/cover;
    z-index: -1;
}

#view-scenario-player::before {
    background: linear-gradient(rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0.98)), url('../assets/game-bg-office.png') no-repeat center center/cover;
}

/* --- SCENARIO PLAYER STYLES --- */
.dialogue-bubble {
    max-width: 85%;
    margin-bottom: 1.5rem;
    padding: 1.2rem 1.5rem;
    border-radius: 1.5rem;
    position: relative;
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    animation: fadeInDialog 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.speaker-1 {
    align-self: flex-start !important;
    background: rgba(30, 41, 59, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom-left-radius: 0.2rem !important;
}

.speaker-2 {
    align-self: flex-end !important;
    background: rgba(212, 175, 55, 0.15) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    border-bottom-right-radius: 0.2rem !important;
    text-align: right;
}

@keyframes fadeInDialog {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

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

#scenario-dialogue-area {
    padding: 1.5rem;
    padding-bottom: 120px;
    display: flex;
    flex-direction: column;
}

/* Voice Settings Modal Styles */
.voice-options-grid {
    padding-right: 5px;
    /* Scrollbar space */
}

.voice-option-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.voice-option-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(5px);
}

.voice-option-card.selected {
    background: rgba(245, 158, 11, 0.15);
    /* Gold tint */
    border-color: var(--accent-gold);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.1);
}

.voice-icon {
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.2);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.voice-info {
    flex: 1;
}

.voice-name {
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.voice-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.voice-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-icon-small {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-icon-small:hover {
    background: var(--accent-gold);
    color: black;
}

.check-mark {
    color: var(--accent-gold);
    font-weight: bold;
    font-size: 1.2rem;
}