/* CODEBREAKOUT - Styles */
:root {
    --bg-dark: #0a0a0f;
    --bg-surface: #12121a;
    --text-primary: #e0e0e0;
    --text-secondary: #888;
    --accent: #00ff88;
    --accent-dim: #00aa55;
    --accent-rgb: 0, 255, 136;
    --danger: #ff4455;
    --warning: #ffaa00;
    --purple: #aa55ff;
    --blue: #5588ff;

    /* Level colors */
    --html: #e44d26;
    --css: #264de4;
    --javascript: #f7df1e;
    --python: #3776ab;
    --php: #777bb4;
    --ruby: #cc342d;
    --java: #007396;
    --csharp: #68217a;
    --typescript: #3178c6;
    --c: #555555;
    --cpp: #00599c;
    --go: #00add8;
    --rust: #dea584;
    --haskell: #5e5086;
    --assembly: #00ff00;
}

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

body {
    font-family: 'JetBrains Mono', monospace;
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

#game-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.screen {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

.screen.hidden {
    display: none;
}

.hidden {
    display: none !important;
}

.overlay {
    background: rgba(10, 10, 15, 0.95);
    z-index: 100;
}

/* ==========================================
   ANIMATION KEYFRAMES
   ========================================== */

/* Animated gradient background */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Title glow animation */
@keyframes glowPulse {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(var(--accent-rgb), 0.5),
            0 0 20px rgba(var(--accent-rgb), 0.3),
            0 0 40px rgba(var(--accent-rgb), 0.2);
    }
    50% {
        text-shadow:
            0 0 20px rgba(var(--accent-rgb), 0.8),
            0 0 40px rgba(var(--accent-rgb), 0.5),
            0 0 60px rgba(var(--accent-rgb), 0.3),
            0 0 80px rgba(var(--accent-rgb), 0.2);
    }
}

/* Text shimmer effect */
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Floating animation for particles */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    25% { transform: translateY(-20px) rotate(5deg); opacity: 0.8; }
    50% { transform: translateY(-10px) rotate(-5deg); opacity: 0.6; }
    75% { transform: translateY(-25px) rotate(3deg); opacity: 0.7; }
}

@keyframes floatAlt {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.5; }
    33% { transform: translateY(-30px) rotate(-8deg) scale(1.1); opacity: 0.8; }
    66% { transform: translateY(-15px) rotate(8deg) scale(0.9); opacity: 0.6; }
}

/* Pulse border animation */
@keyframes pulseBorder {
    0%, 100% {
        border-color: rgba(var(--accent-rgb), 0.3);
        box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.1);
    }
    50% {
        border-color: rgba(var(--accent-rgb), 0.8);
        box-shadow: 0 0 40px rgba(var(--accent-rgb), 0.3);
    }
}

/* Button glow animation */
@keyframes buttonGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3); }
    50% { box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.6); }
}

/* Vignette pulse */
@keyframes vignettePulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Score counter glow */
@keyframes scoreGlow {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(var(--accent-rgb), 0.6),
            0 0 20px rgba(var(--accent-rgb), 0.4);
        transform: scale(1);
    }
    50% {
        text-shadow:
            0 0 20px rgba(var(--accent-rgb), 0.8),
            0 0 40px rgba(var(--accent-rgb), 0.5),
            0 0 60px rgba(var(--accent-rgb), 0.3);
        transform: scale(1.02);
    }
}

/* Frame animation */
@keyframes frameGlow {
    0%, 100% {
        box-shadow:
            inset 0 0 30px rgba(255, 68, 85, 0.1),
            0 0 20px rgba(255, 68, 85, 0.2);
    }
    50% {
        box-shadow:
            inset 0 0 50px rgba(255, 68, 85, 0.2),
            0 0 40px rgba(255, 68, 85, 0.3);
    }
}

/* Press to play pulse */
@keyframes pressToPlay {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* Leaderboard entry slide in */
@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==========================================
   REUSABLE ANIMATION CLASSES
   ========================================== */

.animated-bg {
    background: linear-gradient(
        -45deg,
        var(--bg-dark),
        var(--bg-surface),
        #0d1a14,
        #0a0f14,
        var(--bg-dark)
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

.glow-text {
    animation: glowPulse 2s ease-in-out infinite;
}

/* Theme switcher in title */
.theme-switcher {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.theme-switcher:hover {
    opacity: 0.8;
}

.theme-switcher:hover::after {
    content: '↻';
    position: absolute;
    font-size: 0.4em;
    top: -0.5em;
    right: -0.8em;
    opacity: 0.6;
}

.theme-switcher:active {
    transform: scale(0.95);
}

.shimmer {
    background: linear-gradient(
        90deg,
        var(--text-primary) 0%,
        var(--accent) 25%,
        #fff 50%,
        var(--accent) 75%,
        var(--text-primary) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

.float-animation {
    animation: float 6s ease-in-out infinite;
}

.float-animation-alt {
    animation: floatAlt 8s ease-in-out infinite;
}

.pulse-border {
    border: 2px solid rgba(var(--accent-rgb), 0.5);
    animation: pulseBorder 2s ease-in-out infinite;
}

.pulse-effect {
    animation: pressToPlay 1.5s ease-in-out infinite;
}

/* ==========================================
   START SCREEN
   ========================================== */

/* Start Screen */
#start-screen {
    background: linear-gradient(
        -45deg,
        var(--bg-dark),
        var(--bg-surface),
        #0d1a14,
        #0a0f14,
        var(--bg-dark)
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Matrix rain background effect */
#start-screen::before {
    content: '01001000 { } const let => () 10101010 async await function return 11110000 import export class new 01100110 for while if else switch 00110011 try catch throw finally 11001100 typeof instanceof void 10011001 null undefined NaN true false';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    line-height: 2.2;
    letter-spacing: 0.3em;
    color: rgba(var(--accent-rgb), 0.06);
    word-wrap: break-word;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    animation: matrixRain 8s linear infinite;
}

@keyframes matrixRain {
    0% {
        transform: translateY(-10%);
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(10%);
        opacity: 0.5;
    }
}

/* Additional floating particles layer */
#start-screen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(2px 2px at 20% 30%, rgba(var(--accent-rgb), 0.4), transparent),
        radial-gradient(2px 2px at 80% 20%, rgba(85, 136, 255, 0.4), transparent),
        radial-gradient(3px 3px at 40% 70%, rgba(170, 85, 255, 0.3), transparent),
        radial-gradient(2px 2px at 90% 80%, rgba(var(--accent-rgb), 0.4), transparent),
        radial-gradient(2px 2px at 10% 90%, rgba(85, 136, 255, 0.3), transparent),
        radial-gradient(3px 3px at 60% 10%, rgba(170, 85, 255, 0.4), transparent),
        radial-gradient(2px 2px at 30% 50%, rgba(var(--accent-rgb), 0.3), transparent),
        radial-gradient(2px 2px at 70% 60%, rgba(85, 136, 255, 0.4), transparent),
        radial-gradient(2px 2px at 50% 40%, rgba(170, 85, 255, 0.3), transparent),
        radial-gradient(3px 3px at 15% 15%, rgba(var(--accent-rgb), 0.4), transparent),
        radial-gradient(2px 2px at 85% 45%, rgba(85, 136, 255, 0.3), transparent),
        radial-gradient(2px 2px at 45% 85%, rgba(170, 85, 255, 0.4), transparent);
    pointer-events: none;
    z-index: 0;
    animation: floatAlt 12s ease-in-out infinite;
}

.title {
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
    animation: glowPulse 2s ease-in-out infinite;
}

.title .accent {
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        #66ffbb 25%,
        #fff 50%,
        #66ffbb 75%,
        var(--accent) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 3s linear infinite;
}

.accent {
    color: var(--accent);
}

.tagline {
    color: var(--text-secondary);
    font-size: clamp(0.8rem, 2vw, 1rem);
    margin-bottom: 2rem;
    position: relative;
    z-index: 1;
}

.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.btn {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    position: relative;
    overflow: hidden;
}

/* Button shine effect on hover */
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.btn:hover::before {
    left: 100%;
}

.btn.primary {
    background: var(--accent);
    color: var(--bg-dark);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
}

.btn.primary:hover {
    background: #00ffaa;
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        0 6px 30px rgba(var(--accent-rgb), 0.5),
        0 0 40px rgba(var(--accent-rgb), 0.3);
}

.btn.primary:active {
    transform: translateY(-1px) scale(0.98);
}

/* Pulsing play button effect */
#start-screen .btn.primary {
    animation: buttonGlow 2s ease-in-out infinite;
}

#start-screen .btn.primary:hover {
    animation: none;
}

.btn.secondary {
    background: var(--bg-surface);
    color: var(--text-primary);
    border: 1px solid var(--text-secondary);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.btn.secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px) scale(1.02);
    box-shadow:
        0 4px 20px rgba(var(--accent-rgb), 0.2),
        inset 0 0 20px rgba(var(--accent-rgb), 0.05);
}

.btn.secondary:active {
    transform: translateY(-1px) scale(0.98);
}

.high-score-preview {
    display: flex;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
}

#high-score-display {
    color: var(--accent);
    font-weight: 600;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.controls-hint {
    position: absolute;
    bottom: 2rem;
    color: var(--text-secondary);
    font-size: 0.8rem;
    z-index: 1;
    animation: pressToPlay 2s ease-in-out infinite;
}

.credits {
    position: absolute;
    bottom: 4rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    z-index: 1;
}

.credits a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.credits a:hover {
    color: #00ffaa;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
}

.icon-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.icon-btn:hover {
    opacity: 1;
}

#sound-toggle {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* Game Screen */
#game-screen {
    background: var(--bg-dark);
    padding: 0;
}

/* ===== CLEAN MINIMAL HUD ===== */

#hud {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1rem;
    padding-top: calc(0.75rem + env(safe-area-inset-top));
    gap: 0;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
}

/* Separator between HUD items */
.hud-sep {
    width: 1px;
    height: 1.2rem;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 1rem;
}

/* Base HUD item */
.hud-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0;
    background: none;
    border: none;
}

/* HUD Value styling */
.hud-item span {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
}

/* ===== SCORE ===== */
.hud-item.score span {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

/* ===== LEVEL ===== */
.hud-item.level span {
    color: var(--level-color, var(--blue));
    font-weight: 600;
}

/* Level color themes */
.hud-item.level.level-html { --level-color: var(--html); }
.hud-item.level.level-css { --level-color: var(--css); }
.hud-item.level.level-javascript { --level-color: var(--javascript); }
.hud-item.level.level-python { --level-color: var(--python); }
.hud-item.level.level-php { --level-color: var(--php); }
.hud-item.level.level-ruby { --level-color: var(--ruby); }
.hud-item.level.level-java { --level-color: var(--java); }
.hud-item.level.level-csharp { --level-color: var(--csharp); }
.hud-item.level.level-typescript { --level-color: var(--typescript); }
.hud-item.level.level-c { --level-color: var(--c); }
.hud-item.level.level-cpp { --level-color: var(--cpp); }
.hud-item.level.level-go { --level-color: var(--go); }
.hud-item.level.level-rust { --level-color: var(--rust); }
.hud-item.level.level-haskell { --level-color: var(--haskell); }
.hud-item.level.level-assembly { --level-color: var(--assembly); }

/* ===== LIVES ===== */
.hud-item.lives .hearts {
    display: flex;
    gap: 0.25rem;
    font-size: 0.9rem;
}

/* ===== MULTIPLIER ===== */
.hud-item.multiplier span {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    transition: color 0.2s ease;
}

.hud-item.multiplier.active span {
    color: var(--accent);
}

/* ===== BONUS TIMER ===== */
.hud-item.bonus-timer span {
    color: #f39c12;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.hud-item.bonus-timer.low-time span {
    color: #e74c3c;
    animation: timerPulse 0.5s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.bonus-timer-sep.hidden,
.bonus-timer.hidden {
    display: none;
}

#pause-btn {
    position: absolute;
    right: 1rem;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

#pause-btn:hover {
    opacity: 1;
}

#menu-btn {
    position: absolute;
    left: 1rem;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    color: var(--danger);
}

#menu-btn:hover {
    opacity: 1;
}

#game-canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
}

.hint {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-align: center;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    z-index: 50;
    pointer-events: none;
    white-space: nowrap;
    opacity: 0.8;
}

.hint.hidden {
    display: none;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Pause Screen */
#pause-screen h2 {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: var(--accent);
}

#pause-screen .btn {
    margin: 0.5rem;
    min-width: 150px;
}

/* Audio Controls */
.audio-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    min-width: 280px;
}

.audio-control {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-content: space-between;
}

.audio-control label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-width: 80px;
    text-align: left;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 10px var(--accent);
    transition: transform 0.1s ease;
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.volume-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px var(--accent);
}

.audio-control span {
    font-size: 0.75rem;
    color: var(--accent);
    min-width: 35px;
    text-align: right;
}

.toggle-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    min-width: 50px;
}

.toggle-btn.active {
    background: var(--accent);
    color: var(--bg-dark);
}

.toggle-btn:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.haptic-control {
    display: none;
}

/* Show haptic control only on touch devices */
@media (pointer: coarse) {
    .haptic-control {
        display: flex;
    }
}

/* Level Intro Screen */
#level-intro-screen {
    background: rgba(10, 10, 15, 0.95);
    animation: fadeIn 0.3s ease;
}

.level-intro-content {
    text-align: center;
    animation: introSlide 0.5s ease;
}


@keyframes introSlide {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

#intro-level-number {
    font-size: 0.9rem;
    color: var(--text-secondary);
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 0.5rem;
}

#intro-level-name {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 8px currentColor;
}

#intro-level-desc {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* Level Complete Screen */
#level-complete-screen h2 {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
}

#level-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

.stat {
    display: flex;
    flex-direction: column;
    padding: 0.8rem;
    background: var(--bg-surface);
    border-radius: 4px;
}

.stat .label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 0.3rem;
}

.stat span:not(.label) {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent);
}

#next-level-name {
    color: var(--text-secondary);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

/* ==========================================
   GAME OVER SCREEN
   ========================================== */

/* Game Over Screen - Dramatic background with vignette */
#game-over-screen {
    background:
        radial-gradient(
            ellipse at center,
            transparent 0%,
            rgba(10, 10, 15, 0.7) 50%,
            rgba(10, 10, 15, 0.95) 100%
        ),
        linear-gradient(
            -45deg,
            var(--bg-dark),
            #1a0a0a,
            #0a0a14,
            var(--bg-dark)
        );
    background-size: 100% 100%, 400% 400%;
    animation: gradientShift 20s ease infinite, vignettePulse 3s ease-in-out infinite;
    overflow: hidden;
}

/* Dramatic vignette overlay */
#game-over-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at center,
        transparent 30%,
        rgba(255, 68, 85, 0.05) 60%,
        rgba(255, 68, 85, 0.1) 100%
    );
    pointer-events: none;
    z-index: 0;
    animation: vignettePulse 4s ease-in-out infinite;
}

/* Game Over content wrapper with animated border */
#game-over-screen > * {
    position: relative;
    z-index: 1;
}

.game-over-content {
    padding: 2rem 2.5rem;
    border: 2px solid rgba(255, 68, 85, 0.3);
    border-radius: 12px;
    background: rgba(10, 10, 15, 0.8);
    animation: frameGlow 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Animated corner accents */
.game-over-content::before,
.game-over-content::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid var(--danger);
    opacity: 0.5;
}

.game-over-content::before {
    top: -2px;
    left: -2px;
    border-right: none;
    border-bottom: none;
    animation: pulseBorder 2s ease-in-out infinite;
}

.game-over-content::after {
    bottom: -2px;
    right: -2px;
    border-left: none;
    border-top: none;
    animation: pulseBorder 2s ease-in-out infinite 0.5s;
}

#game-over-screen h2 {
    font-size: 2.5rem;
    color: var(--danger);
    margin-bottom: 1rem;
    text-shadow:
        0 0 10px rgba(255, 68, 85, 0.5),
        0 0 20px rgba(255, 68, 85, 0.3),
        0 0 40px rgba(255, 68, 85, 0.2);
    animation: glowPulse 2s ease-in-out infinite;
    letter-spacing: 0.15em;
}

/* Override glow color for game over title */
@keyframes dangerGlow {
    0%, 100% {
        text-shadow:
            0 0 10px rgba(255, 68, 85, 0.5),
            0 0 20px rgba(255, 68, 85, 0.3),
            0 0 40px rgba(255, 68, 85, 0.2);
    }
    50% {
        text-shadow:
            0 0 20px rgba(255, 68, 85, 0.8),
            0 0 40px rgba(255, 68, 85, 0.5),
            0 0 60px rgba(255, 68, 85, 0.3);
    }
}

#game-over-screen h2 {
    animation: dangerGlow 2s ease-in-out infinite;
}

.final-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1rem;
}

.final-score .label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

#final-score {
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent);
    animation: scoreGlow 2s ease-in-out infinite;
}

.reached-level {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

#reached-level {
    color: var(--text-primary);
    font-weight: 600;
    text-shadow: 0 0 10px rgba(224, 224, 224, 0.3);
}

/* Modern input field styling */
.name-input {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    justify-content: center;
    align-items: center;
}

#player-name {
    font-family: inherit;
    font-size: 1rem;
    padding: 0.8rem 1.2rem;
    background: rgba(18, 18, 26, 0.8);
    border: 2px solid rgba(136, 136, 136, 0.3);
    border-radius: 8px;
    color: var(--text-primary);
    width: 180px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

#player-name::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

#player-name:hover {
    border-color: rgba(var(--accent-rgb), 0.3);
}

#player-name:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(var(--accent-rgb), 0.2),
        0 0 40px rgba(var(--accent-rgb), 0.1);
}

/* Save button in name input */
.name-input .btn {
    border-radius: 8px;
}

#leaderboard-preview {
    margin-bottom: 1.5rem;
    text-align: center;
}

#leaderboard-preview h3 {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

#leaderboard-list {
    list-style: none;
    font-size: 0.85rem;
    max-height: 180px;
    overflow-y: auto;
    border-radius: 8px;
    padding: 4px;
    background: rgba(10, 10, 15, 0.5);
}

/* Custom scrollbar for leaderboard */
#leaderboard-list::-webkit-scrollbar {
    width: 6px;
}

#leaderboard-list::-webkit-scrollbar-track {
    background: rgba(18, 18, 26, 0.5);
    border-radius: 3px;
}

#leaderboard-list::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 3px;
}

#leaderboard-list::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.5);
}

#leaderboard-list li {
    padding: 0.6rem 1rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-surface);
    margin-bottom: 4px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    animation: slideIn 0.3s ease backwards;
}

/* Staggered animation for list items */
#leaderboard-list li:nth-child(1) { animation-delay: 0.05s; }
#leaderboard-list li:nth-child(2) { animation-delay: 0.1s; }
#leaderboard-list li:nth-child(3) { animation-delay: 0.15s; }
#leaderboard-list li:nth-child(4) { animation-delay: 0.2s; }
#leaderboard-list li:nth-child(5) { animation-delay: 0.25s; }
#leaderboard-list li:nth-child(6) { animation-delay: 0.3s; }
#leaderboard-list li:nth-child(7) { animation-delay: 0.35s; }
#leaderboard-list li:nth-child(8) { animation-delay: 0.4s; }
#leaderboard-list li:nth-child(9) { animation-delay: 0.45s; }
#leaderboard-list li:nth-child(10) { animation-delay: 0.5s; }

#leaderboard-list li:hover {
    background: rgba(18, 18, 26, 0.9);
    border-color: rgba(var(--accent-rgb), 0.2);
    transform: translateX(4px);
    box-shadow: -4px 0 10px rgba(var(--accent-rgb), 0.1);
}

#leaderboard-list li.highlight {
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    box-shadow:
        inset 0 0 20px rgba(var(--accent-rgb), 0.1),
        0 0 15px rgba(var(--accent-rgb), 0.2);
}

#leaderboard-list li.highlight:hover {
    background: rgba(var(--accent-rgb), 0.2);
}

/* Rank number styling */
#leaderboard-list .rank {
    color: var(--text-secondary);
    min-width: 24px;
}

#leaderboard-list li:nth-child(1) .rank { color: #ffd700; }
#leaderboard-list li:nth-child(2) .rank { color: #c0c0c0; }
#leaderboard-list li:nth-child(3) .rank { color: #cd7f32; }

#leaderboard-list .name {
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#leaderboard-list .score {
    color: var(--accent);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}

/* Game over buttons */
.game-over-buttons {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    margin-top: 0.5rem;
}

#game-over-screen .btn {
    margin-top: 0.5rem;
}

#game-over-screen .btn.primary {
    animation: buttonGlow 2.5s ease-in-out infinite;
}

#game-over-screen .btn.primary:hover {
    animation: none;
}

/* ==========================================
   EASTER EGG QUOTES
   ========================================== */

.easter-egg-quote {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: clamp(1.2rem, 4vw, 2rem);
    font-weight: 800;
    color: var(--quote-color, #fff);
    text-shadow:
        0 0 20px var(--quote-color, #fff),
        0 0 40px var(--quote-color, #fff),
        2px 2px 0 rgba(0, 0, 0, 0.8);
    z-index: 1000;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
    animation: quoteAppear 2s ease-out forwards;
    letter-spacing: 0.05em;
}

@keyframes quoteAppear {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    15% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    25% {
        transform: translate(-50%, -50%) scale(1);
    }
    75% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.8) translateY(-30px);
        opacity: 0;
    }
}

/* Quote with character attribution */
.easter-egg-quote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
}

.quote-text {
    font-style: italic;
}

.quote-char {
    font-size: 0.6em;
    font-weight: 400;
    opacity: 0.8;
    font-style: normal;
}

/* Screen flash for HIGH/EPIC tier quotes */
.streak-flash {
    animation: streakFlash 0.3s ease-out;
}

@keyframes streakFlash {
    0% { filter: brightness(1); }
    50% { filter: brightness(1.5) saturate(1.3); }
    100% { filter: brightness(1); }
}

/* ==========================================
   SPECIAL ATTACKS
   ========================================== */

.special-attack {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: clamp(1.5rem, 5vw, 2.5rem);
    font-weight: 900;
    color: var(--attack-color, #fff);
    text-shadow:
        0 0 30px var(--attack-color, #fff),
        0 0 60px var(--attack-color, #fff),
        3px 3px 0 rgba(0, 0, 0, 0.9);
    z-index: 1001;
    pointer-events: none;
    text-align: center;
    animation: specialAttackAppear 2.5s ease-out forwards;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
}

.attack-text {
    font-style: italic;
    letter-spacing: 0.1em;
}

.attack-char {
    font-size: 0.5em;
    font-weight: 400;
    opacity: 0.9;
}

@keyframes specialAttackAppear {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    10% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    20% {
        transform: translate(-50%, -50%) scale(1);
    }
    70% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Kamehameha beam effect (vertical column) */
.kamehameha-beam {
    position: absolute;
    width: 50px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--beam-color, #44aaff) 20%,
        #ffffff 50%,
        var(--beam-color, #44aaff) 80%,
        transparent 100%
    );
    box-shadow:
        0 0 40px var(--beam-color, #44aaff),
        0 0 80px var(--beam-color, #44aaff),
        0 0 120px var(--beam-color, #44aaff);
    transform: translateX(-50%) scaleY(0);
    transform-origin: bottom center;
    animation: beamBlast 0.8s ease-out forwards;
    z-index: 50;
    pointer-events: none;
}

@keyframes beamBlast {
    0% {
        transform: translateX(-50%) scaleY(0);
        opacity: 0;
        filter: brightness(2);
    }
    15% {
        transform: translateX(-50%) scaleY(1);
        opacity: 1;
        filter: brightness(2);
    }
    30% {
        filter: brightness(1);
    }
    75% {
        transform: translateX(-50%) scaleY(1);
        opacity: 1;
    }
    100% {
        transform: translateX(-50%) scaleY(1);
        opacity: 0;
    }
}

/* Hadouken wave effect (horizontal row) */
.hadouken-wave {
    position: absolute;
    height: 40px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--wave-color, #44ff88) 20%,
        #ffffff 50%,
        var(--wave-color, #44ff88) 80%,
        transparent 100%
    );
    box-shadow:
        0 0 40px var(--wave-color, #44ff88),
        0 0 80px var(--wave-color, #44ff88);
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    animation: waveBlast 0.8s ease-out forwards;
    z-index: 50;
    pointer-events: none;
}

@keyframes waveBlast {
    0% {
        transform: translateY(-50%) scaleX(0);
        opacity: 0;
        filter: brightness(2);
    }
    15% {
        transform: translateY(-50%) scaleX(1);
        opacity: 1;
        filter: brightness(2);
    }
    30% {
        filter: brightness(1);
    }
    75% {
        transform: translateY(-50%) scaleX(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-50%) scaleX(1);
        opacity: 0;
    }
}

/* 1UP effect - giant text when gaining extra life */
.one-up-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 6rem;
    font-weight: 800;
    color: #00ff00;
    text-shadow:
        0 0 20px #00ff00,
        0 0 40px #00ff00,
        0 0 80px #00ff00,
        4px 4px 0 #006600;
    z-index: 100;
    pointer-events: none;
    animation: oneUpPop 1.5s ease-out forwards;
}

@keyframes oneUpPop {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    40% {
        transform: translate(-50%, -50%) scale(1);
    }
    70% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -60%) scale(1.2);
        opacity: 0;
    }
}

/* ==========================================
   RESPONSIVE MOBILE DESIGN
   ========================================== */

/* Tablet and small laptops */
@media (max-width: 900px) {
    #game-canvas {
        max-width: 95vw;
        max-height: calc(100vh - 120px);
    }

    #hud {
        padding: 0.5rem 0.75rem;
    }

    .hud-sep {
        margin: 0 0.75rem;
    }
}

/* Mobile landscape and small tablets */
@media (max-width: 768px) {
    .title {
        font-size: clamp(1.8rem, 6vw, 2.5rem);
    }

    .tagline {
        font-size: 0.9rem;
    }

    #hud {
        padding: 0.5rem;
    }

    .hud-sep {
        margin: 0 0.5rem;
        height: 1rem;
    }

    .hud-item span {
        font-size: 0.85rem;
    }

    .hud-item.score span {
        font-size: 1rem;
    }

    .hud-item.lives .hearts {
        font-size: 0.75rem;
        gap: 0.15rem;
    }

    .btn {
        padding: 0.7rem 1.8rem;
        font-size: 0.95rem;
        min-width: 140px;
    }

    #active-powerups {
        top: 40px;
        gap: 0.3rem;
    }

    .powerup-indicator {
        padding: 0.2rem 0.4rem;
        font-size: 0.6rem;
    }

    .hint {
        font-size: 0.75rem;
        bottom: 5%;
        padding: 6px 12px;
    }

    /* Game over responsive */
    .game-over-content {
        padding: 1.5rem 1.2rem;
        margin: 0.8rem;
        max-width: 95vw;
    }

    #game-over-screen h2 {
        font-size: 1.6rem;
        margin-bottom: 0.8rem;
    }

    #final-score {
        font-size: 2rem;
    }

    .final-score .label {
        font-size: 0.7rem;
    }

    .name-input {
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
    }

    #player-name {
        width: 100%;
        max-width: 220px;
    }

    #leaderboard-list {
        max-height: 100px;
        font-size: 0.8rem;
    }

    #leaderboard-list li {
        padding: 0.4rem 0.6rem;
    }

    /* Level intro */
    #intro-level-name {
        font-size: 2rem;
    }

    #intro-level-number {
        font-size: 0.75rem;
    }
}

/* Mobile portrait */
@media (max-width: 600px) {
    .title {
        font-size: clamp(1.5rem, 8vw, 2rem);
        letter-spacing: 0.05em;
    }

    .tagline {
        font-size: 0.8rem;
        margin-bottom: 1.5rem;
    }

    .menu {
        gap: 1rem;
    }

    /* Compact HUD for small screens */
    #hud {
        padding: 0.4rem;
    }

    .hud-sep {
        margin: 0 0.4rem;
        height: 0.9rem;
    }

    .hud-item span {
        font-size: 0.8rem;
    }

    .hud-item.score span {
        font-size: 0.9rem;
    }

    .hud-item.lives .hearts {
        font-size: 0.7rem;
    }

    #pause-btn {
        font-size: 0.9rem;
        right: 0.5rem;
    }

    .btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.85rem;
        min-width: 120px;
    }

    .btn.primary {
        padding: 0.8rem 2rem;
    }

    /* Fix mobile start screen - make footer elements flow normally */
    .controls-hint {
        position: static;
        margin-top: 1rem;
        font-size: 0.7rem;
    }

    .credits {
        position: static;
        margin-top: 0.5rem;
        margin-bottom: 1rem;
    }

    #start-screen .menu {
        padding-bottom: 1rem;
    }

    #sound-toggle {
        top: 0.5rem;
        right: 0.5rem;
    }

    /* Game over mobile */
    .game-over-content {
        padding: 1rem;
        margin: 0.5rem;
        border-radius: 8px;
    }

    .game-over-content::before,
    .game-over-content::after {
        width: 20px;
        height: 20px;
    }

    #game-over-screen h2 {
        font-size: 1.4rem;
        letter-spacing: 0.1em;
    }

    #final-score {
        font-size: 1.8rem;
    }

    .reached-level {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    #leaderboard-preview h3 {
        font-size: 0.75rem;
    }

    #leaderboard-list {
        max-height: 80px;
    }

    /* Level stats on complete screen */
    #level-stats {
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    .stat {
        padding: 0.5rem;
    }

    .stat .label {
        font-size: 0.6rem;
    }

    .stat span:not(.label) {
        font-size: 1rem;
    }

    #next-level-name {
        font-size: 0.85rem;
        margin-bottom: 1rem;
    }

    /* Pause screen */
    #pause-screen h2 {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }

    #pause-screen .btn {
        margin: 0.3rem;
        min-width: 120px;
    }
}

/* Very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
    .title {
        font-size: 1.3rem;
    }

    #hud {
        padding: 0.3rem;
    }

    .hud-sep {
        margin: 0 0.3rem;
        height: 0.8rem;
    }

    .hud-item span {
        font-size: 0.7rem;
    }

    .hud-item.score span {
        font-size: 0.8rem;
    }

    .hud-item.lives .hearts {
        font-size: 0.6rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
        min-width: 100px;
    }

    #game-over-screen h2 {
        font-size: 1.2rem;
    }

    #final-score {
        font-size: 1.5rem;
    }

    .game-over-content {
        padding: 0.8rem;
    }

    #intro-level-name {
        font-size: 1.5rem;
    }
}

/* Landscape mobile optimization */
@media (max-height: 500px) and (orientation: landscape) {
    #hud {
        padding: 0.3rem 0.5rem;
    }

    .hud-sep {
        margin: 0 0.4rem;
    }

    #game-canvas {
        max-height: calc(100vh - 50px);
        margin-top: 40px;
    }

    .hint {
        bottom: 5%;
        font-size: 0.7rem;
    }

    #active-powerups {
        top: 35px;
    }

    /* Compact overlays */
    .screen.overlay {
        padding: 0.5rem;
    }

    #level-intro-screen .level-intro-content {
        transform: scale(0.85);
    }

    #intro-level-name {
        font-size: 1.8rem;
    }
}

/* Touch-friendly button sizes */
@media (pointer: coarse) {
    .btn {
        min-height: 44px;
        min-width: 44px;
    }

    .icon-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #pause-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #game-canvas {
        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Powerup indicators - second row below HUD */
#active-powerups {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    z-index: 10;
    min-height: 24px;
}

.powerup-indicator {
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    animation: powerupPulse 1s ease-in-out infinite;
}

@keyframes powerupPulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

.powerup-indicator.positive {
    background: rgba(var(--accent-rgb), 0.3);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.powerup-indicator.negative {
    background: rgba(255, 68, 85, 0.3);
    color: var(--danger);
    border: 1px solid var(--danger);
}

/* Quit confirmation dialog */
#quit-confirm {
    z-index: 200;
    background: rgba(0, 0, 0, 0.9);
}

.confirm-dialog {
    background: rgba(20, 20, 30, 0.98);
    border: 2px solid var(--danger);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    max-width: 350px;
}

.confirm-dialog h3 {
    color: var(--danger);
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.confirm-dialog p {
    color: var(--text-dim);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.confirm-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.btn.danger {
    background: rgba(255, 68, 85, 0.2);
    border-color: var(--danger);
    color: var(--danger);
}

.btn.danger:hover {
    background: rgba(255, 68, 85, 0.4);
    box-shadow: 0 0 15px rgba(255, 68, 85, 0.5);
}

/* ==========================================
   HIGH SCORES SCREEN
   ========================================== */

#highscores-screen {
    z-index: 100;
}

.highscores-content {
    padding: 2rem 2.5rem;
    border-radius: 12px;
    background: rgba(10, 10, 15, 0.95);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.highscores-content h2 {
    font-size: 1.8rem;
    color: var(--accent);
    margin-bottom: 1.5rem;
    text-align: center;
    letter-spacing: 0.15em;
}

.highscores-header {
    display: grid;
    grid-template-columns: 40px 1fr 80px 100px;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.5rem;
}

#highscores-full-list {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

#highscores-full-list::-webkit-scrollbar {
    width: 6px;
}

#highscores-full-list::-webkit-scrollbar-track {
    background: rgba(18, 18, 26, 0.5);
    border-radius: 3px;
}

#highscores-full-list::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 3px;
}

#highscores-full-list li {
    display: grid;
    grid-template-columns: 40px 1fr 80px 100px;
    gap: 0.5rem;
    padding: 0.8rem 1rem;
    background: var(--bg-surface);
    margin-bottom: 4px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    animation: slideIn 0.3s ease backwards;
}

#highscores-full-list li:nth-child(1) { animation-delay: 0.05s; }
#highscores-full-list li:nth-child(2) { animation-delay: 0.1s; }
#highscores-full-list li:nth-child(3) { animation-delay: 0.15s; }
#highscores-full-list li:nth-child(4) { animation-delay: 0.2s; }
#highscores-full-list li:nth-child(5) { animation-delay: 0.25s; }
#highscores-full-list li:nth-child(6) { animation-delay: 0.3s; }
#highscores-full-list li:nth-child(7) { animation-delay: 0.35s; }
#highscores-full-list li:nth-child(8) { animation-delay: 0.4s; }
#highscores-full-list li:nth-child(9) { animation-delay: 0.45s; }
#highscores-full-list li:nth-child(10) { animation-delay: 0.5s; }

#highscores-full-list li:hover {
    background: rgba(18, 18, 26, 0.9);
    border-color: rgba(var(--accent-rgb), 0.2);
    transform: translateX(4px);
}

#highscores-full-list .rank {
    color: var(--text-secondary);
    font-weight: 600;
}

#highscores-full-list li:nth-child(1) .rank {
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

#highscores-full-list li:nth-child(2) .rank {
    color: #c0c0c0;
    text-shadow: 0 0 8px rgba(192, 192, 192, 0.5);
}

#highscores-full-list li:nth-child(3) .rank {
    color: #cd7f32;
    text-shadow: 0 0 8px rgba(205, 127, 50, 0.5);
}

#highscores-full-list .name {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#highscores-full-list .level {
    color: var(--text-secondary);
    font-size: 0.85rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#highscores-full-list .score {
    color: var(--accent);
    font-weight: 600;
    text-align: right;
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}

.empty-message {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem;
    font-style: italic;
}

.empty-message.hidden {
    display: none;
}

#highscores-back-btn {
    align-self: center;
    margin-top: 0.5rem;
}

/* Mobile responsive for high scores */
@media (max-width: 600px) {
    .highscores-content {
        padding: 1.5rem 1rem;
        max-height: 85vh;
    }

    .highscores-content h2 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .highscores-header {
        grid-template-columns: 30px 1fr 60px 70px;
        font-size: 0.6rem;
        padding: 0.4rem 0.5rem;
    }

    #highscores-full-list li {
        grid-template-columns: 30px 1fr 60px 70px;
        padding: 0.6rem 0.5rem;
        font-size: 0.85rem;
    }

    #highscores-full-list .level {
        font-size: 0.75rem;
    }
}

/* ============================================================================
   BONUS MODE SELECTION SCREEN
   ============================================================================ */

#bonus-select-screen {
    z-index: 100;
}

.bonus-select-content {
    padding: 2rem 2.5rem;
    border-radius: 12px;
    background: rgba(10, 10, 15, 0.95);
    max-width: 450px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.bonus-select-content h2 {
    font-size: 1.8rem;
    color: var(--accent);
    text-align: center;
    letter-spacing: 0.15em;
}

.bonus-subtitle {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: -1rem;
}

.bonus-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.bonus-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.bonus-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.bonus-btn.roguelike {
    border-color: #9b59b6;
}
.bonus-btn.roguelike:hover {
    background: rgba(155, 89, 182, 0.2);
    box-shadow: 0 4px 20px rgba(155, 89, 182, 0.3);
}

.bonus-btn.zen {
    border-color: #27ae60;
}
.bonus-btn.zen:hover {
    background: rgba(39, 174, 96, 0.2);
    box-shadow: 0 4px 20px rgba(39, 174, 96, 0.3);
}

.bonus-btn.bounce {
    border-color: #e74c3c;
}
.bonus-btn.bounce:hover {
    background: rgba(231, 76, 60, 0.2);
    box-shadow: 0 4px 20px rgba(231, 76, 60, 0.3);
}

.bonus-btn.bullet {
    border-color: #ff0066;
}
.bonus-btn.bullet:hover {
    background: rgba(255, 0, 102, 0.2);
    box-shadow: 0 4px 20px rgba(255, 0, 102, 0.3);
}

.bonus-btn.gravity {
    border-color: #9933ff;
}
.bonus-btn.gravity:hover {
    background: rgba(153, 51, 255, 0.2);
    box-shadow: 0 4px 20px rgba(153, 51, 255, 0.3);
}

.bonus-btn.tower {
    border-color: #ff6600;
}
.bonus-btn.tower:hover {
    background: rgba(255, 102, 0, 0.2);
    box-shadow: 0 4px 20px rgba(255, 102, 0, 0.3);
}

.bonus-btn.madness {
    border-color: #00ffff;
}
.bonus-btn.madness:hover {
    background: rgba(0, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
}

.bonus-btn.boss {
    border-color: #ff0000;
}
.bonus-btn.boss:hover {
    background: rgba(255, 0, 0, 0.2);
    box-shadow: 0 4px 20px rgba(255, 0, 0, 0.3);
}

.bonus-btn.speed {
    border-color: #ffff00;
}
.bonus-btn.speed:hover {
    background: rgba(255, 255, 0, 0.2);
    box-shadow: 0 4px 20px rgba(255, 255, 0, 0.3);
}

.bonus-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.1em;
}

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

#bonus-back-btn {
    margin-top: 0.5rem;
}

/* Gravity Flip Effect */
.gravity-flip-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 3rem;
    font-weight: 800;
    color: #9933ff;
    text-shadow:
        0 0 20px #9933ff,
        0 0 40px #9933ff,
        0 0 60px #9933ff;
    z-index: 1000;
    pointer-events: none;
    animation: gravityFlipAppear 1.5s ease-out forwards;
}

@keyframes gravityFlipAppear {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
        opacity: 1;
    }
    40% {
        transform: translate(-50%, -50%) scale(1) rotate(-5deg);
    }
    60% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(180deg);
        opacity: 0;
    }
}

/* Scrollable bonus options for mobile */
.bonus-options {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.5rem;
}

.bonus-options::-webkit-scrollbar {
    width: 6px;
}

.bonus-options::-webkit-scrollbar-track {
    background: rgba(18, 18, 26, 0.5);
    border-radius: 3px;
}

.bonus-options::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.3);
    border-radius: 3px;
}

/* Bullet hell active effect */
.bullet-hell-active {
    animation: bulletHellPulse 2s ease-in-out infinite;
}

@keyframes bulletHellPulse {
    0%, 100% {
        box-shadow: inset 0 0 50px rgba(255, 0, 102, 0.1);
    }
    50% {
        box-shadow: inset 0 0 100px rgba(255, 0, 102, 0.2);
    }
}

/* Mobile responsive for bonus select */
@media (max-width: 600px) {
    .bonus-select-content {
        padding: 1.5rem 1rem;
        max-height: 90vh;
    }

    .bonus-select-content h2 {
        font-size: 1.4rem;
    }

    .bonus-options {
        max-height: 65vh;
        gap: 0.6rem;
    }

    .bonus-btn {
        padding: 0.6rem 0.8rem;
        min-height: auto;
    }

    .bonus-icon {
        font-size: 1.5rem;
    }

    .bonus-name {
        font-size: 0.9rem;
        white-space: nowrap;
    }

    .bonus-desc {
        font-size: 0.65rem;
        white-space: nowrap;
        overflow: visible;
    }
}

@media (max-width: 375px) {
    .bonus-options {
        max-height: 60vh;
        gap: 0.4rem;
    }

    .bonus-btn {
        padding: 0.5rem 0.6rem;
    }

    .bonus-name {
        font-size: 0.8rem;
    }

    .bonus-desc {
        font-size: 0.6rem;
    }
}

/* ============================================================================
   MOBILE CONTROLS
   ============================================================================ */

/* Hide mobile controls on desktop */
.mobile-only {
    display: none;
}

/* Show mobile controls on touch devices */
@media (pointer: coarse), (max-width: 768px) {
    .mobile-only {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        padding: 0.5rem;
        margin-top: 0.5rem;
        width: 100%;
        max-width: 800px;
    }

    #mobile-controls {
        position: relative;
        z-index: 100;
    }

    #swipe-zone {
        flex: 1;
        height: 70px;
        background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.05));
        border: 2px solid rgba(var(--accent-rgb), 0.3);
        border-radius: 12px;
        position: relative;
        overflow: hidden;
        touch-action: pan-x;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #swipe-zone:active {
        background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.1));
        border-color: rgba(var(--accent-rgb), 0.5);
    }

    #swipe-indicator {
        width: 60px;
        height: 8px;
        background: var(--accent);
        border-radius: 4px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        transition: left 0.05s ease-out;
        box-shadow: 0 0 10px var(--accent);
    }

    .swipe-hint {
        font-size: 0.7rem;
        color: var(--text-secondary);
        text-transform: uppercase;
        letter-spacing: 2px;
        position: absolute;
        bottom: 8px;
        pointer-events: none;
    }

    .shoot-button {
        width: 90px;
        height: 70px;
        background: linear-gradient(135deg, var(--accent), var(--accent-dim));
        border: none;
        border-radius: 12px;
        color: var(--bg-dark);
        font-family: 'JetBrains Mono', monospace;
        font-size: 0.8rem;
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        touch-action: manipulation;
        box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
        transition: transform 0.1s, box-shadow 0.1s;
    }

    .shoot-button:active {
        transform: scale(0.95);
        box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.5);
    }

    .shoot-button.laser-mode {
        background: linear-gradient(135deg, #ff4455, #cc2233);
        box-shadow: 0 4px 15px rgba(255, 68, 85, 0.3);
    }

    .shoot-button.laser-mode:active {
        box-shadow: 0 2px 10px rgba(255, 68, 85, 0.5);
    }

    /* Hide desktop launch hint on mobile */
    #launch-hint {
        display: none !important;
    }
}

/* ============================================================================
   EASY MODE BUTTON
   ============================================================================ */

.btn.easy-mode {
    border-color: #27ae60;
    background: rgba(39, 174, 96, 0.1);
}

.btn.easy-mode:hover {
    background: rgba(39, 174, 96, 0.3);
    border-color: #2ecc71;
    color: #2ecc71;
    box-shadow: 0 4px 20px rgba(46, 204, 113, 0.3);
}

/* ============================================================================
   SHARE BUTTONS
   ============================================================================ */

.share-buttons {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.share-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.share-btn-row {
    display: flex;
    gap: 0.5rem;
}

.btn.share-btn {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: auto;
}

.share-icon {
    font-weight: 700;
}

.btn.share-btn.facebook {
    border-color: #1877f2;
    background: rgba(24, 119, 242, 0.1);
    color: #1877f2;
}

.btn.share-btn.facebook:hover {
    background: rgba(24, 119, 242, 0.3);
    box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
}

.btn.share-btn.link {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
}

.btn.share-btn.link:hover {
    background: rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.btn.share-btn.copied {
    background: rgba(var(--accent-rgb), 0.3);
    border-color: var(--accent);
    color: var(--accent);
}

/* Mobile responsive for share buttons */
@media (max-width: 600px) {
    .share-buttons {
        margin-top: 0.8rem;
    }

    .share-label {
        font-size: 0.65rem;
    }

    .btn.share-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.7rem;
    }
}

/* ============================================================================
   STATISTICS DASHBOARD - MY STATS SCREEN
   ============================================================================ */

/* Stats Screen */
#stats-screen {
    background: var(--bg-dark);
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#stats-screen h1 {
    color: var(--accent);
    margin-bottom: 20px;
    font-size: 2rem;
    text-align: center;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 600px;
    margin: 0 auto 20px;
}

.stats-section {
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px solid var(--grid, rgba(255, 255, 255, 0.1));
    border-radius: 8px;
    padding: 15px;
}

.stats-section h3 {
    color: var(--accent);
    margin-bottom: 10px;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    color: var(--text-dim, var(--text-secondary));
}

.stat-value {
    color: var(--text-primary);
    font-weight: bold;
}

.stats-section.playstyle {
    grid-column: span 2;
    text-align: center;
}

.playstyle-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(0, 136, 255, 0.2));
    padding: 15px 30px;
    border-radius: 30px;
    margin: 10px 0;
}

.playstyle-icon {
    font-size: 2em;
}

.playstyle-name {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--accent);
}

.playstyle-desc {
    color: var(--text-dim, var(--text-secondary));
    font-style: italic;
}

.stats-section.global-stats {
    grid-column: span 2;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(155, 89, 182, 0.1));
    border-color: rgba(52, 152, 219, 0.3);
}

.stats-section.global-stats h3 {
    color: #5dade2;
}

.global-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 15px;
}

.global-stats-grid .stat-row {
    padding: 6px 8px;
}

/* Weekly chart */
.weekly-chart, .mode-stats {
    display: none;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.weekly-chart h4, .mode-stats h4 {
    font-size: 0.75em;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.chart-bars {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 60px;
    gap: 4px;
}

.chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

.chart-bar .bar-fill {
    width: 80%;
    background: linear-gradient(to top, #3498db, #5dade2);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}

.chart-bar span {
    font-size: 0.65em;
    color: var(--text-secondary);
    margin-top: 4px;
    flex-shrink: 0;
}

/* Mode bars */
.mode-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mode-bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mode-bar-label {
    font-size: 0.7em;
    color: var(--text-secondary);
    width: 70px;
    text-align: right;
}

.mode-bar-track {
    flex: 1;
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.mode-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.mode-bar-fill.campaign { background: linear-gradient(to right, #00ff88, #00cc66); }
.mode-bar-fill.easy { background: linear-gradient(to right, #5dade2, #3498db); }
.mode-bar-fill.roguelike { background: linear-gradient(to right, #e74c3c, #c0392b); }
.mode-bar-fill.relax { background: linear-gradient(to right, #9b59b6, #8e44ad); }
.mode-bar-fill.other { background: linear-gradient(to right, #f39c12, #e67e22); }

.mode-bar-value {
    font-size: 0.7em;
    color: var(--text-primary);
    width: 40px;
}

#stats-back-btn {
    display: block;
    margin: 20px auto 40px;
    min-width: 120px;
    flex-shrink: 0;
}

/* Stats button style */
.btn.stats {
    border-color: #3498db;
    background: rgba(52, 152, 219, 0.1);
}

.btn.stats:hover {
    background: rgba(52, 152, 219, 0.3);
    border-color: #5dade2;
    color: #5dade2;
    box-shadow: 0 4px 20px rgba(52, 152, 219, 0.3);
}

/* Mobile responsive for stats */
@media (max-width: 600px) {
    #stats-screen {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .stats-container {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 0 10px;
    }

    .stats-section.playstyle,
    .stats-section.global-stats {
        grid-column: span 1;
    }

    .global-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-bars {
        height: 50px;
    }

    .playstyle-badge {
        padding: 10px 20px;
        flex-direction: column;
    }

    .playstyle-name {
        font-size: 1.2em;
    }

    #stats-screen h1 {
        font-size: 1.5rem;
    }
}

/* ============================================================================
   CUSTOMIZE SCREEN
   ============================================================================ */

#customize-screen,
#achievements-screen {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    justify-content: flex-start;
    padding-top: 40px;
}

#achievements-back-btn,
#customize-back-btn {
    margin-top: auto;
    margin-bottom: 20px;
    flex-shrink: 0;
}

#customize-screen h1,
#achievements-screen h1 {
    color: var(--accent);
    margin-bottom: 20px;
    font-size: 2rem;
    text-align: center;
}

.customize-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    justify-content: center;
}

.tab-btn {
    padding: 10px 20px;
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.tab-btn.active {
    background: var(--accent);
    color: var(--bg-dark);
}

.cosmetic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    max-width: 500px;
    margin: 0 auto 20px;
}

.cosmetic-item {
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.cosmetic-item:hover {
    border-color: var(--accent);
}

.cosmetic-item.selected {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}

.cosmetic-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.cosmetic-item .icon {
    font-size: 2em;
    margin-bottom: 5px;
}

.cosmetic-item .name {
    font-weight: bold;
    margin-bottom: 5px;
}

.cosmetic-item .requirement {
    font-size: 0.8em;
    color: var(--text-secondary);
}

.cosmetic-preview {
    margin: 20px auto;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    width: fit-content;
}

/* ============================================================================
   ACHIEVEMENTS SCREEN
   ============================================================================ */

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    max-width: 600px;
    margin: 0 auto 20px;
}

.achievement-item {
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    text-align: center;
    transition: all 0.2s;
}

.achievement-item.unlocked {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
}

.achievement-item.locked {
    opacity: 0.4;
}

.achievement-item .icon {
    font-size: 2em;
    margin-bottom: 5px;
}

.achievement-item .name {
    font-weight: bold;
    font-size: 0.9em;
}

.achievement-item .desc {
    font-size: 0.75em;
    color: var(--text-secondary);
    margin-top: 5px;
}

.achievements-progress {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.2em;
    color: var(--accent);
}

/* Achievement Toast */
.achievement-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid var(--accent);
    border-radius: 12px;
    padding: 15px 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 1000;
    animation: toastSlideIn 0.5s ease forwards, toastSlideOut 0.5s ease 2.5s forwards;
    box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.3);
}

.achievement-toast .toast-icon {
    font-size: 2.5em;
}

.achievement-toast .toast-content {
    text-align: left;
}

.achievement-toast .toast-title {
    color: var(--accent);
    font-size: 0.9em;
    margin-bottom: 3px;
}

.achievement-toast .toast-name {
    font-size: 1.2em;
    font-weight: bold;
}

@keyframes toastSlideIn {
    to { transform: translateX(-50%) translateY(0); }
}

@keyframes toastSlideOut {
    to { transform: translateX(-50%) translateY(-100px); opacity: 0; }
}

/* Mobile responsive for customize and achievements */
@media (max-width: 600px) {
    .customize-tabs {
        gap: 5px;
    }

    .tab-btn {
        padding: 8px 12px;
        font-size: 0.8rem;
    }

    .cosmetic-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        max-width: 90%;
    }

    .cosmetic-item {
        padding: 10px;
    }

    .cosmetic-item .icon {
        font-size: 1.5em;
    }

    .cosmetic-item .name {
        font-size: 0.85em;
    }

    .achievements-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        max-width: 90%;
    }

    .achievement-item {
        padding: 10px;
    }

    .achievement-item .icon {
        font-size: 1.5em;
    }

    .achievement-item .name {
        font-size: 0.75em;
    }

    .achievement-item .desc {
        font-size: 0.65em;
    }

    .achievement-toast {
        padding: 10px 15px;
        gap: 10px;
    }

    .achievement-toast .toast-icon {
        font-size: 2em;
    }

    .achievement-toast .toast-name {
        font-size: 1em;
    }
}

@media (max-width: 375px) {
    .cosmetic-grid {
        grid-template-columns: 1fr 1fr;
    }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   THEMED BACKGROUNDS
   ========================================== */

/* CODE Theme - Matrix/Tech (default) */
.theme-code #start-screen {
    background: linear-gradient(-45deg, #0a0f0d, #0d1a14, #0a1510, #0d0f14, #0a0f0d);
    background-size: 400% 400%;
}

.theme-code #start-screen::before {
    content: '01001000 { } const let => () 10101010 async await function return 11110000 import export class new 01100110 for while if else switch 00110011 try catch throw finally 11001100 typeof instanceof void 10011001 null undefined NaN true false';
    color: rgba(0, 255, 136, 0.06);
}

.theme-code #game-screen {
    background: radial-gradient(ellipse at center, #0d1a14 0%, #0a0f0d 100%);
}

/* CAKE Theme - Warm Pastry Colors */
.theme-cake #start-screen {
    background: linear-gradient(-45deg, #1a0a14, #1f0d18, #1a0f14, #14080f, #1a0a14);
    background-size: 400% 400%;
}

.theme-cake #start-screen::before {
    content: '🧁 🍪 🍰 🎂 🍩 🍮 🥐 🍫 🧇 🥧 🧁 🍪 🍰 🎂 🍩 🍮 🥐 🍫 🧇 🥧 🧁 🍪 🍰 🎂 🍩 🍮 🥐 🍫 🧇 🥧';
    color: rgba(255, 105, 180, 0.08);
    font-size: 1.5rem;
    letter-spacing: 0.5em;
    line-height: 3;
}

.theme-cake #game-screen {
    background: radial-gradient(ellipse at center, #1f0d18 0%, #1a0a14 100%);
}

/* ASTRO Theme - Deep Space */
.theme-astro #start-screen {
    background: linear-gradient(-45deg, #0a0a1a, #0d0d24, #0f0a1f, #0a0814, #0a0a1a);
    background-size: 400% 400%;
}

.theme-astro #start-screen::before {
    content: '✦ ★ ✧ ☆ ✦ ✵ ✶ ✷ ✸ ✹ ✺ ★ ✦ ✧ ☆ ✦ ✵ ✶ ✷ ✸ ✹ ✺ ★ ✦ ✧ ☆ ✦ ✵ ✶ ✷ ✸ ✹ ✺ ★';
    color: rgba(147, 112, 219, 0.1);
    font-size: 1.2rem;
    letter-spacing: 0.8em;
    line-height: 2.5;
}

.theme-astro #game-screen {
    background: radial-gradient(ellipse at center, #0d0d24 0%, #0a0a1a 100%);
}

/* Subtle themed glow on game canvas area */
.theme-code #game-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 255, 136, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.theme-cake #game-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(255, 105, 180, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.theme-astro #game-screen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(147, 112, 219, 0.03) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* ==========================================
   MOBILE UI IMPROVEMENTS
   ========================================== */

/* Fix level name overflow in HUD */
.hud-item.level span {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .hud-item.level span {
        max-width: 80px;
    }

    /* Make sure achievements screen is fully scrollable */
    #achievements-screen {
        padding-top: 20px;
        padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    }

    #achievements-screen h1 {
        font-size: 1.5rem;
        margin-bottom: 10px;
    }

    .achievements-progress {
        font-size: 1rem;
        margin-bottom: 15px;
    }

    #achievements-back-btn,
    #customize-back-btn {
        margin-bottom: 30px;
        min-height: 44px;
    }
}

@media (max-width: 375px) {
    .hud-item.level span {
        max-width: 60px;
    }
}

/* ==========================================
   PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* Reduce animation complexity on low-power devices */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Optimize heavy animations for mobile */
@media (max-width: 768px) {
    /* Simplify matrix rain background */
    #start-screen::before {
        animation: none;
        opacity: 0.5;
    }

    /* Reduce particle layer complexity */
    #start-screen::after {
        animation: none;
        opacity: 0.3;
    }

    /* Simplify gradient animation */
    #start-screen {
        animation: none;
        background-position: 0% 50%;
    }

    /* Simplify glow effects */
    .glow-text {
        text-shadow: 0 0 10px var(--accent);
    }

    .glow-btn {
        box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
    }
}