/* === POLICE ARCADE === */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

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

body {
    font-family: 'Press Start 2P', cursive;
    background: #0a0a0a;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 0, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(128, 0, 128, 0.1) 0%, transparent 50%);
    color: #fff;
    min-height: 100vh;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='32' viewBox='0 0 36 32'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='1.5' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id='ghostGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff4444;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23cc0000;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M18 4 Q22 2 26 4 Q30 6 30 10 L30 20 Q30 24 28 26 Q26 28 24 28 Q22 30 20 28 Q18 30 16 28 Q14 30 12 28 Q10 30 8 28 Q6 30 4 28 Q2 26 2 22 L2 10 Q2 6 6 4 Q10 2 14 4 Q16 2 18 4 Z' fill='url(%23ghostGrad)' filter='url(%23glow)' stroke='%23ffffff' stroke-width='0.3'/%3E%3Cpath d='M8 22 Q6 24 8 26 Q9 24 8 22 M14 22 Q12 24 14 26 Q15 24 14 22 M20 22 Q18 24 20 26 Q21 24 20 22 M26 22 Q24 24 26 26 Q27 24 26 22' fill='url(%23ghostGrad)' filter='url(%23glow)'/%3E%3Ccircle cx='12' cy='10' r='3' fill='%23ffffff'/%3E%3Ccircle cx='24' cy='10' r='3' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='10' r='1.8' fill='%23000000'/%3E%3Ccircle cx='24' cy='10' r='1.8' fill='%23000000'/%3E%3Cellipse cx='12.5' cy='9.5' rx='0.6' ry='0.8' fill='%23ffffff'/%3E%3Cellipse cx='24.5' cy='9.5' rx='0.6' ry='0.8' fill='%23ffffff'/%3E%3C/svg%3E") 18 16, auto;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        url("data:image/svg+xml,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 20 Q60 10 70 20 Q80 30 70 40 Q60 50 50 40 Q40 50 30 40 Q20 30 30 20 Q40 10 50 20 Z' fill='%23ffffff' opacity='0.05'/%3E%3Ccircle cx='45' cy='30' r='3' fill='%23000000' opacity='0.3'/%3E%3Ccircle cx='55' cy='30' r='3' fill='%23000000' opacity='0.3'/%3E%3Cpath d='M50 40 Q45 45 50 50 Q55 45 50 40' fill='%23000000' opacity='0.2'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    background-repeat: repeat;
    pointer-events: none;
    z-index: 0;
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.02) 2px,
            rgba(255, 255, 255, 0.02) 4px
        );
    pointer-events: none;
    z-index: 0;
}

/* === ANIMATIONS === */
@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 5px #ffd700,
            0 0 10px #ffd700,
            0 0 20px #ff8c00,
            0 0 40px #ff8c00,
            0 0 80px #ff4500;
    }
    20%, 24%, 55% {
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }
}

@keyframes rainbow {
    0% { color: #ff0000; }
    17% { color: #ff8000; }
    33% { color: #ffff00; }
    50% { color: #00ff00; }
    67% { color: #0080ff; }
    83% { color: #8000ff; }
    100% { color: #ff0000; }
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.25); }
    30% { transform: scale(1); }
    45% { transform: scale(1.15); }
}

@keyframes canvasGlow {
    from {
        box-shadow: 
            0 0 20px rgba(255, 215, 0, 0.5),
            0 0 40px rgba(255, 215, 0, 0.3),
            inset 0 0 60px rgba(0, 0, 255, 0.1);
    }
    to {
        box-shadow: 
            0 0 30px rgba(255, 215, 0, 0.7),
            0 0 60px rgba(255, 215, 0, 0.4),
            inset 0 0 80px rgba(0, 0, 255, 0.15);
    }
}


@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

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

@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes scoreUp {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); color: #00ff00; }
    100% { transform: scale(1); }
}

/* === MENU PRINCIPAL === */
.main-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #0a0a0a;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0, 0, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(128, 0, 128, 0.1) 0%, transparent 50%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: hidden;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='32' viewBox='0 0 36 32'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='1.5' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3ClinearGradient id='ghostGrad' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23ff4444;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23cc0000;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M18 4 Q22 2 26 4 Q30 6 30 10 L30 20 Q30 24 28 26 Q26 28 24 28 Q22 30 20 28 Q18 30 16 28 Q14 30 12 28 Q10 30 8 28 Q6 30 4 28 Q2 26 2 22 L2 10 Q2 6 6 4 Q10 2 14 4 Q16 2 18 4 Z' fill='url(%23ghostGrad)' filter='url(%23glow)' stroke='%23ffffff' stroke-width='0.3'/%3E%3Cpath d='M8 22 Q6 24 8 26 Q9 24 8 22 M14 22 Q12 24 14 26 Q15 24 14 22 M20 22 Q18 24 20 26 Q21 24 20 22 M26 22 Q24 24 26 26 Q27 24 26 22' fill='url(%23ghostGrad)' filter='url(%23glow)'/%3E%3Ccircle cx='12' cy='10' r='3' fill='%23ffffff'/%3E%3Ccircle cx='24' cy='10' r='3' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='10' r='1.8' fill='%23000000'/%3E%3Ccircle cx='24' cy='10' r='1.8' fill='%23000000'/%3E%3Cellipse cx='12.5' cy='9.5' rx='0.6' ry='0.8' fill='%23ffffff'/%3E%3Cellipse cx='24.5' cy='9.5' rx='0.6' ry='0.8' fill='%23ffffff'/%3E%3C/svg%3E") 18 16, auto;
}

/* === CANVAS ARRIERE-PLAN MENU === */
#menuBackgroundCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.3;
    pointer-events: none;
}

.menu-container {
    position: relative;
    z-index: 2;
    text-align: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 50px 40px;
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.8), 
        0 0 50px rgba(255, 0, 0, 0.2),
        inset 0 0 30px rgba(255, 215, 0, 0.05);
    animation: menuFadeIn 0.8s ease-out;
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.menu-container h1 {
    font-size: 3em;
    margin-bottom: 20px;
    letter-spacing: 5px;
    animation: neonFlicker 3s infinite, rainbow 8s linear infinite;
}

.menu-subtitle {
    font-size: 0.6em;
    color: #ffd700;
    margin-bottom: 25px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    animation: subtitleGlow 2s ease-in-out infinite;
    line-height: 1.6;
}

@keyframes subtitleGlow {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.best-score-display {
    font-size: 0.7em;
    color: #ffd700;
    margin-bottom: 30px;
    padding: 12px 25px;
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    display: inline-block;
}

.best-score-label {
    margin-right: 10px;
}

.best-score-value {
    color: #00ff00;
    font-size: 1.3em;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.menu-btn {
    padding: 20px 50px;
    font-size: 1em;
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%);
    color: #000;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
    min-width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    animation: buttonPulse 2s ease-in-out infinite;
}

@keyframes buttonPulse {
    0%, 100% {
        box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 5px 25px rgba(255, 215, 0, 0.7);
    }
}

.btn-icon {
    font-size: 0.9em;
}

.menu-btn:hover {
    background: linear-gradient(180deg, #ffed4e 0%, #ffa500 100%);
    transform: translateY(-3px);
    box-shadow: 
        0 8px 20px rgba(255, 215, 0, 0.6),
        0 0 30px rgba(255, 215, 0, 0.4);
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    animation: none;
}

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

/* === WRAPPER DE JEU === */
.game-wrapper {
    min-height: 100vh;
}

/* === HEADER DU JEU === */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.game-header h2 {
    font-size: 1.5em;
    margin: 0;
    flex: 1;
    text-align: center;
    letter-spacing: 3px;
    animation: neonFlicker 3s infinite, rainbow 8s linear infinite;
}

.back-btn {
    padding: 10px 20px;
    font-size: 0.7em;
    font-family: 'Press Start 2P', cursive;
    background: rgba(255, 255, 255, 0.1);
    color: #ffd700;
    border: 2px solid #ffd700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.back-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: translateX(-3px);
}

.fullscreen-btn {
    padding: 10px 20px;
    font-size: 0.7em;
    font-family: 'Press Start 2P', cursive;
    background: rgba(255, 255, 255, 0.1);
    color: #ffd700;
    border: 2px solid #ffd700;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    line-height: 1.2;
    white-space: nowrap;
}

.fullscreen-btn:hover {
    background: rgba(255, 215, 0, 0.2);
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* === MODAL CLASSEMENT === */
.leaderboard-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.3s ease-out;
}

.modal-content {
    background: rgba(0, 0, 0, 0.9);
    padding: 30px;
    border-radius: 20px;
    border: 3px solid rgba(255, 215, 0, 0.4);
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.8), 
        0 0 50px rgba(255, 0, 0, 0.2);
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header h2 {
    color: #ffd700;
    font-size: 1.5em;
    margin: 0;
}

.close-modal-btn, .close-leaderboard-btn {
    background: rgba(255, 0, 0, 0.3);
    color: #fff;
    border: 2px solid #ff0000;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    font-size: 1.2em;
    cursor: pointer;
    transition: all 0.3s;
}

.close-modal-btn:hover, .close-leaderboard-btn:hover {
    background: rgba(255, 0, 0, 0.5);
    transform: scale(1.1);
}

/* === MODAL RÈGLES === */
.rules-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    animation: fadeIn 0.3s ease-in;
}

.rules-content {
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 0.7em;
    line-height: 1.8;
}

.rules-content::-webkit-scrollbar {
    width: 8px;
}

.rules-content::-webkit-scrollbar-track {
    background: rgba(255, 215, 0, 0.1);
    border-radius: 4px;
}

.rules-content::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.5);
    border-radius: 4px;
}

.rules-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.7);
}

.rule-section {
    margin-bottom: 25px;
    padding: 15px;
    background: rgba(255, 215, 0, 0.1);
    border-left: 3px solid #ffd700;
    border-radius: 5px;
    animation: fadeIn 0.5s ease-in;
}

.rule-section h3 {
    color: #ffd700;
    font-size: 1em;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.rule-section p {
    color: #fff;
    margin: 8px 0;
}

.rule-section ul {
    list-style: none;
    padding-left: 0;
    margin: 10px 0;
}

.rule-section li {
    margin: 8px 0;
    padding-left: 20px;
    position: relative;
    color: #fff;
}

.rule-section li:before {
    content: "•";
    color: #ffd700;
    position: absolute;
    left: 0;
    font-size: 1.2em;
}

.rule-section strong {
    color: #ffd700;
}

.close-modal-btn:hover, .close-leaderboard-btn:hover {
    background: rgba(255, 0, 0, 0.5);
    transform: scale(1.1);
}

#menuLeaderboard {
    max-height: 60vh;
    overflow-y: auto;
}

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.leaderboard-header h2 {
    margin: 0;
}

/* === LAYOUT === */
.main-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 30px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.container {
    text-align: center;
    background: rgba(0, 0, 0, 0.8);
    padding: 30px;
    border-radius: 20px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.8), 
        0 0 50px rgba(255, 0, 0, 0.2),
        inset 0 0 30px rgba(255, 215, 0, 0.05);
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    border: 3px solid rgba(255, 215, 0, 0.4);
}

/* === TITRE ANIME AVEC 3D === */
h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    letter-spacing: 5px;
    animation: neonFlicker 3s infinite, rainbow 8s linear infinite;
}

/* === BARRE D'INFO AMELIOREE === */
.game-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,50,0.4) 100%);
    border-radius: 15px;
    border: 2px solid rgba(255, 215, 0, 0.4);
    box-shadow: 
        inset 0 0 20px rgba(255, 215, 0, 0.1);
    gap: 15px;
    flex-wrap: wrap;
}

.score, .level, .lives, .dots-remaining {
    font-size: 0.9em;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s;
}

.dots-remaining {
    color: #00ffff;
}

.combo-display {
    font-size: 1.2em;
    font-weight: bold;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.8), rgba(255, 140, 0, 0.8));
    padding: 10px 20px;
    border-radius: 10px;
    border: 2px solid #ffd700;
    color: #000;
    text-align: center;
    animation: pulse 0.5s ease-in-out infinite;
}

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

.power-ups-display {
    display: flex;
    gap: 10px;
    margin: 10px 0;
    flex-wrap: wrap;
    justify-content: center;
}

.power-up-item {
    font-size: 0.8em;
    padding: 8px 15px;
    background: rgba(255, 215, 0, 0.2);
    border: 2px solid #ffd700;
    border-radius: 8px;
    color: #ffd700;
    font-weight: bold;
}

.frenzy-indicator {
    margin: 15px auto;
    padding: 15px 30px;
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.8), rgba(255, 100, 0, 0.8));
    border: 3px solid #ff0000;
    border-radius: 15px;
    text-align: center;
    animation: frenzyPulse 0.3s ease-in-out infinite;
    max-width: 400px;
}

@keyframes frenzyPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 40px rgba(255, 0, 0, 1);
        transform: scale(1.05);
    }
}

.frenzy-text {
    font-size: 1em;
    color: #ffff00;
    text-shadow: 0 0 15px rgba(255, 255, 0, 1);
    font-weight: bold;
}

.score.updated {
    animation: scoreUp 0.3s ease-out;
}

.level {
    color: #ffd700;
}

/* === COEURS ANIMES === */
.lives .heart {
    display: inline-block;
    color: #ff0000;
    font-size: 1.2em;
    margin: 0 3px;
    transition: opacity 0.3s, transform 0.3s;
    animation: heartbeat 1.2s ease-in-out infinite;
    filter: drop-shadow(0 0 5px #ff0000);
}

.lives .heart:nth-child(2) { animation-delay: 0.15s; }
.lives .heart:nth-child(3) { animation-delay: 0.3s; }

#status {
    font-size: 0.8em;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* === INDICATEUR DE poursuite === */
.pursuit-indicator {
    margin: 15px auto;
    padding: 12px 25px;
    background: linear-gradient(180deg, rgba(255, 0, 0, 0.3), rgba(255, 0, 0, 0.1));
    border: 2px solid #ff0000;
    border-radius: 10px;
    text-align: center;
    animation: pursuitPulse 1s ease-in-out infinite;
    max-width: 300px;
}

@keyframes pursuitPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    }
}

.pursuit-text {
    font-size: 0.8em;
    color: #ff0000;
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.8);
}

#pursuitTimer {
    color: #ffff00;
    font-weight: bold;
    font-size: 1.2em;
}

/* === CANVAS AVEC GLOW ET EFFET 3D === */
#gameCanvas {
    border: 4px solid #ffd700;
    border-radius: 15px;
    background: #000;
    display: block;
    margin: 0 auto;
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.5),
        0 0 40px rgba(255, 215, 0, 0.3),
        inset 0 0 60px rgba(0, 0, 255, 0.1);
    animation: canvasGlow 3s ease-in-out infinite alternate;
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* === INPUT UTILISATEUR === */
.user-input-section {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.user-input-section label {
    font-size: 0.7em;
    font-weight: bold;
}

#username {
    padding: 10px 15px;
    font-size: 0.8em;
    font-family: 'Press Start 2P', cursive;
    border: 2px solid #ffd700;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    outline: none;
    max-width: 200px;
    transition: all 0.3s;
}

#username:focus {
    border-color: #ffed4e;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    background: rgba(0, 0, 0, 0.7);
}

#username:disabled {
    background: rgba(0, 255, 0, 0.1);
    border-color: #00ff00;
    color: #00ff00;
    cursor: not-allowed;
}

#username::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* === BOUTON DE CONFIRMATION === */
.confirm-btn {
    padding: 10px 20px;
    font-size: 0.7em;
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(180deg, #00ff00 0%, #00cc00 100%);
    color: #000;
    border: 2px solid #00ff00;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 255, 0, 0.3);
}

.confirm-btn:hover {
    background: linear-gradient(180deg, #00ff88 0%, #00ff00 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 255, 0, 0.5);
}

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

.confirm-btn:disabled {
    background: rgba(100, 100, 100, 0.5);
    border-color: #666;
    cursor: not-allowed;
    opacity: 0.5;
}

/* Message de confirmation */
.username-confirmed {
    font-size: 0.6em;
    color: #00ff00;
    margin-top: 5px;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
    animation: fadeIn 0.3s ease-out;
    width: 100%;
    text-align: center;
}

.instructions {
    margin-top: 20px;
    font-size: 0.7em;
    color: #aaa;
}

/* === CLASSEMENT AVEC MEDAILLES === */
.leaderboard-container {
    background: rgba(0, 0, 0, 0.8);
    padding: 25px;
    border-radius: 20px;
    box-shadow: 
        0 10px 30px rgba(0, 0, 0, 0.8), 
        0 0 50px rgba(255, 0, 0, 0.2),
        inset 0 0 30px rgba(255, 215, 0, 0.05);
    min-width: 320px;
    max-height: 700px;
    position: relative;
    z-index: 1;
    border: 3px solid rgba(255, 215, 0, 0.4);
}

.leaderboard-container h2 {
    color: #ffd700;
    text-align: center;
    margin: 0;
    font-size: 1.2em;
    text-shadow: 
        0 0 10px rgba(255, 215, 0, 0.5),
        2px 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 2px;
}

#leaderboard {
    max-height: 600px;
    overflow-y: auto;
}

#leaderboard::-webkit-scrollbar {
    width: 8px;
}

#leaderboard::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

#leaderboard::-webkit-scrollbar-thumb {
    background: #ffd700;
    border-radius: 4px;
}

.leaderboard-item {
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 4px solid #ffd700;
    transition: all 0.3s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.leaderboard-item:hover {
    transform: translateX(5px);
    background: rgba(255, 215, 0, 0.15);
    box-shadow: 
        0 0 20px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Médailles top 3 */
.leaderboard-item:nth-child(1) .leaderboard-rank::before { content: '🥇 '; }
.leaderboard-item:nth-child(2) .leaderboard-rank::before { content: '🥈 '; }
.leaderboard-item:nth-child(3) .leaderboard-rank::before { content: '🥉 '; }

.leaderboard-item:nth-child(1) { 
    border-left-color: #ffd700; 
    background: linear-gradient(90deg, rgba(255,215,0,0.2) 0%, rgba(255,215,0,0.05) 100%);
}
.leaderboard-item:nth-child(2) { 
    border-left-color: #c0c0c0; 
    background: linear-gradient(90deg, rgba(192,192,192,0.15) 0%, rgba(192,192,192,0.05) 100%);
}
.leaderboard-item:nth-child(3) { 
    border-left-color: #cd7f32; 
    background: linear-gradient(90deg, rgba(205,127,50,0.15) 0%, rgba(205,127,50,0.05) 100%);
}

.leaderboard-item.top {
    font-weight: bold;
}

.leaderboard-rank {
    font-size: 0.9em;
    font-weight: bold;
    color: #ffd700;
    min-width: 60px;
}

.leaderboard-name {
    flex: 1;
    text-align: left;
    margin-left: 10px;
    font-size: 0.7em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.leaderboard-level {
    font-size: 0.7em;
    font-weight: bold;
    color: #00ff00;
    min-width: 60px;
    text-align: center;
    margin-right: 10px;
}

.leaderboard-score {
    font-size: 0.8em;
    font-weight: bold;
    color: #ffd700;
    min-width: 70px;
    text-align: right;
}

/* === CLASSEMENT DANS LE JEU (à droite) === */
.game-leaderboard {
    background: rgba(0, 0, 0, 0.85);
    padding: 15px;
    border-radius: 15px;
    border: 2px solid rgba(255, 215, 0, 0.4);
    box-shadow: 
        0 5px 20px rgba(0, 0, 0, 0.6), 
        0 0 30px rgba(255, 0, 0, 0.1);
    width: 250px;
    max-height: 600px;
    overflow-y: auto;
}

.game-leaderboard-header {
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
}

.game-leaderboard-header h3 {
    color: #ffd700;
    font-size: 0.9em;
    margin: 0;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

.game-leaderboard-content {
    max-height: 550px;
    overflow-y: auto;
}

.game-leaderboard-content::-webkit-scrollbar {
    width: 6px;
}

.game-leaderboard-content::-webkit-scrollbar-track {
    background: rgba(255, 215, 0, 0.1);
    border-radius: 3px;
}

.game-leaderboard-content::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.5);
    border-radius: 3px;
}

.game-leaderboard-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.7);
}

.game-leaderboard .leaderboard-item {
    padding: 8px 10px;
    margin-bottom: 8px;
    font-size: 0.7em;
}

.game-leaderboard .leaderboard-rank {
    min-width: 40px;
    font-size: 0.8em;
}

.game-leaderboard .leaderboard-name {
    font-size: 0.65em;
    margin-left: 5px;
}

.game-leaderboard .leaderboard-level {
    min-width: 50px;
    font-size: 0.65em;
}

.game-leaderboard .leaderboard-score {
    min-width: 60px;
    font-size: 0.7em;
}

.empty-leaderboard {
    text-align: center;
    color: #aaa;
    padding: 20px;
    font-size: 0.7em;
}

/* === BOUTON REJOUER === */
#restartBtn {
    margin-top: 15px;
    padding: 15px 30px;
    font-size: 0.9em;
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%);
    color: #000;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

#restartBtn:hover {
    background: linear-gradient(180deg, #ffed4e 0%, #ffa500 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.6);
}

#restartBtn:active {
    transform: translateY(0) scale(0.98);
}

/* === OVERLAY GAME OVER === */
.game-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: 17px;
    animation: fadeIn 0.5s ease-out;
}

.game-overlay.active {
    display: flex;
}

.overlay-content {
    text-align: center;
    padding: 30px;
}

.game-over-title {
    font-size: 2em;
    color: #ff0000;
    text-shadow: 
        0 0 10px #ff0000,
        0 0 20px #ff0000,
        0 0 40px #ff0000;
    animation: shake 0.5s ease-in-out, pulse 1.5s ease-in-out infinite;
    margin-bottom: 30px;
}

.final-score, .final-level {
    font-size: 0.9em;
    margin: 15px 0;
    color: #ffd700;
}

.final-score span, .final-level span {
    color: #00ff00;
    font-size: 1.2em;
}

#overlayRestartBtn {
    margin-top: 25px;
    padding: 15px 30px;
    font-size: 0.9em;
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(180deg, #ffd700 0%, #ff8c00 100%);
    color: #000;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

#overlayRestartBtn:hover {
    background: linear-gradient(180deg, #ffed4e 0%, #ffa500 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.6);
}

#overlayRestartBtn:active {
    transform: translateY(0) scale(0.98);
}

.game-over-username-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

.game-over-username-section label {
    font-size: 0.7em;
    color: #ffd700;
    font-weight: bold;
}

#gameOverUsername {
    padding: 10px 15px;
    font-size: 0.8em;
    font-family: 'Press Start 2P', cursive;
    border: 2px solid #ffd700;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    outline: none;
    max-width: 250px;
    width: 100%;
    text-align: center;
    transition: all 0.3s;
}

#gameOverUsername:focus {
    border-color: #ffed4e;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    background: rgba(0, 0, 0, 0.9);
}

.save-score-btn {
    padding: 10px 20px;
    font-size: 0.7em;
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(180deg, #00ff00 0%, #00cc00 100%);
    color: #000;
    border: 2px solid #00ff00;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 255, 0, 0.3);
}

.save-score-btn:hover {
    background: linear-gradient(180deg, #00ff88 0%, #00ff00 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 255, 0, 0.5);
}

.save-score-btn:active {
    transform: translateY(0) scale(0.98);
}

.save-score-btn:disabled {
    background: rgba(100, 100, 100, 0.5);
    border-color: #666;
    cursor: not-allowed;
    opacity: 0.5;
}

/* === CONTROLES TACTILES MOBILE === */
.mobile-controls {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 20px;
}

.ctrl-row {
    display: flex;
    gap: 50px;
}

.ctrl-btn {
    width: 60px;
    height: 60px;
    font-size: 1.5em;
    background: linear-gradient(145deg, rgba(255,215,0,0.2), rgba(255,215,0,0.1));
    border: 3px solid #ffd700;
    border-radius: 15px;
    color: #ffd700;
    cursor: pointer;
    transition: all 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.ctrl-btn:active {
    background: rgba(255, 215, 0, 0.4);
    transform: scale(0.9);
    box-shadow: 
        0 0 15px rgba(255, 215, 0, 0.5),
        inset 0 0 10px rgba(255, 215, 0, 0.3);
}

/* === FOOTER === */
footer {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    color: #ffd700;
    font-size: 0.7em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
    .main-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .game-leaderboard {
        width: 100%;
        max-width: 600px;
        margin-top: 20px;
    }
    
    .leaderboard-container {
        width: 100%;
        max-width: 600px;
    }
}

@media (max-width: 700px) {
    .menu-container {
        padding: 30px 20px;
    }
    
    .menu-container h1 {
        font-size: 2em;
    }
    
    .menu-subtitle {
        font-size: 0.5em;
        margin-bottom: 20px;
    }
    
    .best-score-display {
        font-size: 0.6em;
        padding: 10px 15px;
        margin-bottom: 25px;
    }
    
    .best-score-value {
        font-size: 1.1em;
    }
    
    .menu-btn {
        min-width: 200px;
        padding: 15px 30px;
        font-size: 0.8em;
    }
    
    #gameCanvas {
        width: 100%;
        height: auto;
    }
    
    h1 {
        font-size: 1.5em;
    }
    
    .game-info {
        flex-direction: column;
        gap: 10px;
    }
    
    .user-input-section {
        flex-direction: column;
        gap: 8px;
    }
    
    .mobile-controls {
        display: flex;
    }
    
    .game-over-title {
        font-size: 1.5em;
    }
    
    .final-score, .final-level {
        font-size: 0.7em;
    }
    
    .modal-content {
        padding: 20px;
        width: 95%;
    }
    
    .rules-content {
        font-size: 0.6em;
        padding: 15px;
    }
    
    .rule-section {
        margin-bottom: 15px;
        padding: 10px;
    }
    
    .rule-section h3 {
        font-size: 0.9em;
    }
}

/* === MODAL PERSONNALISATION === */
.customize-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease-out;
}

.customize-modal.active {
    display: flex;
}

.customize-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.customize-section {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 15px;
    border: 2px solid #ffd700;
}

.customize-section h3 {
    color: #ffd700;
    font-size: 1em;
    margin-bottom: 15px;
    text-align: center;
}

.color-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.color-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.color-option:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: #ffd700;
    transform: scale(1.05);
}

.color-option.active {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.color-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.rainbow-preview {
    background: linear-gradient(45deg, #ff0000, #ff8800, #ffff00, #00ff00, #0088ff, #0000ff, #8800ff);
    animation: rainbowRotate 3s linear infinite;
}

@keyframes rainbowRotate {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

.color-option span {
    font-size: 0.7em;
    color: #fff;
    text-align: center;
}

.customize-preview {
    background: rgba(0, 0, 0, 0.6);
    padding: 20px;
    border-radius: 15px;
    border: 2px solid #ffd700;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.customize-preview h3 {
    color: #ffd700;
    font-size: 1em;
    margin-bottom: 15px;
}

#playerPreviewCanvas {
    border: 3px solid #ffd700;
    border-radius: 10px;
    background: #000;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
}

.save-customize-btn {
    padding: 15px 30px;
    font-size: 0.9em;
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(180deg, #00ff00 0%, #00cc00 100%);
    color: #000;
    border: 2px solid #00ff00;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0, 255, 0, 0.3);
    align-self: center;
}

.save-customize-btn:hover {
    background: linear-gradient(180deg, #00ff88 0%, #00ff00 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 255, 0, 0.5);
}

.save-customize-btn:active {
    transform: translateY(0) scale(0.98);
}

.shape-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

.shape-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.shape-option:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: #ffd700;
    transform: scale(1.05);
}

.shape-option.active {
    background: rgba(255, 215, 0, 0.2);
    border-color: #ffd700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
}

.shape-preview {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.round-preview {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ffd700;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.triangle-preview {
    width: 0;
    height: 0;
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    border-bottom: 45px solid #ffd700;
    border-top: none;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

.shape-option span {
    font-size: 0.7em;
    color: #fff;
    text-align: center;
}