:root {
    --primary: #00ff9d;   /* Vert Arcade */
    --secondary: #ff0055; /* Rouge Nourriture */
    --alert: #ff0000;     /* Rouge Pac-Man */
    --bg-body: #111;
    --bg-panel: #000;
    --border: #444;
}

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

body {
    /* Couleur de fond principale (Noir gris très sombre) */
    background-color: #000000;
    
    /* Grille style papier millimétré sombre */
    background-image: 
        linear-gradient(rgba(0, 255, 157, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 157, 0.05) 1px, transparent 1px);
    background-size: 20px 20px; /* Taille des cases de la grille de fond */

    /* Police Pixel Art */
    font-family: 'Press Start 2P', cursive;
    
    /* Centrage */
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    overflow: hidden;
}

/* Effet Vignette (Coins sombres) pour l'ambiance */
body::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, transparent 40%, #000 150%);
    pointer-events: none;
    z-index: 0;
}

.main-wrapper {
    position: relative; z-index: 10;
    display: flex; flex-direction: column; align-items: center; gap: 20px;
}

/* Titre principal */
.page-header h1 { 
    text-align: center; 
    font-size: 1.5rem; /* Plus petit car la police est large */
    line-height: 1.5;
    text-shadow: 4px 4px 0px #00442a; 
    margin-bottom: 10px;
}
.version { 
    font-size: 0.5rem; 
    vertical-align: super; 
    color: var(--secondary); 
    text-shadow: 2px 2px 0px #550000; 
}

/* === FULLSCREEN === */
.fs-root { display: flex; justify-content: center; align-items: center; }
.fs-root:fullscreen { width: 100vw; height: 100vh; background: #000; }

/* === GAME BOX === */
.game-box {
    width: 808px;
    background: #000;
    border: 4px solid var(--border); /* Bordures plus épaisses style rétro */
    box-shadow: 0 0 0 4px #000, 0 0 20px rgba(0, 255, 157, 0.2);
    display: flex; flex-direction: column;
}

/* === TOOLBAR === */
.toolbar {
    height: 50px;
    background: var(--bg-panel);
    border-bottom: 2px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px;
}

.toolbar-left, .toolbar-right { display: flex; align-items: center; gap: 20px; }

/* Texte plus petit pour cette police */
.sys-text { color: #888; font-size: 0.6rem; }
#speedDisplay { font-size: 0.6rem; color: #fff; }

.status-light { 
    width: 12px; height: 12px; background: var(--primary); 
    box-shadow: 0 0 5px var(--primary); 
    animation: blink 1s steps(2, start) infinite; /* Clignotement "numérique" sec */
}

.tool-btn {
    background: none; border: none; color: #666; font-size: 1rem; cursor: pointer;
    transition: color 0.2s; display: flex; align-items: center; justify-content: center;
}
.tool-btn:hover { color: #fff; }

/* === SLIDER === */
.volume-wrapper { display: flex; align-items: center; gap: 10px; }
.volume-slider {
    width: 0px; opacity: 0; height: 8px; background: #333; /* Plus épais */
    outline: none; transition: all 0.3s ease; cursor: pointer;
    appearance: none; -webkit-appearance: none; border-radius: 0; border: 1px solid #555;
}
.volume-wrapper:hover .volume-slider { width: 80px; opacity: 1; margin-right: 5px; }
.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 8px; height: 16px; /* Curseur rectangulaire */
    background: var(--primary); cursor: pointer; border: none;
}

/* === CANVAS === */
.canvas-wrapper {
    position: relative;
    width: 800px; height: 576px;
    background: #000;
    overflow: hidden;
}
canvas { display: block; image-rendering: pixelated; }

/* === HUD === */
.hud { position: absolute; top: 20px; left: 20px; pointer-events: none; }
.hud-item {
    display: flex; align-items: center; gap: 15px;
    color: #fff; font-size: 1rem; 
    text-shadow: 2px 2px 0 #000;
}
.icon-svg { width: 30px; height: 30px; color: var(--secondary); filter: drop-shadow(2px 2px 0px #000); }

/* === FOOTER === */
.footer-bar {
    height: 30px; background: var(--bg-panel); border-top: 2px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.6rem; color: #555;
}

/* === ECRANS (OVERLAYS) === */
.overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex; justify-content: center; align-items: center;
    z-index: 50;
}
.hidden { display: none; }

.panel {
    background: #000; 
    border: 4px solid var(--primary);
    padding: 40px; text-align: center; min-width: 400px;
    box-shadow: 10px 10px 0px rgba(0,0,0,0.5); /* Ombre dure rétro */
}

/* Styles spécifiques textes */
.panel h2 { 
    color: #fff; margin-bottom: 20px; font-size: 1.5rem; 
    text-transform: uppercase;
}
.panel p { 
    color: var(--secondary); margin-bottom: 30px; 
    font-size: 0.8rem; line-height: 1.5; 
}

/* === STYLE GAME OVER (ROUGE ET GROS) === */
.error { border-color: var(--alert); }
.error h2 { 
    color: var(--alert); 
    font-size: 2.5rem; /* Trés gros */
    text-shadow: 4px 4px 0px #500;
    margin-bottom: 30px;
    animation: shake 0.5s ease-in-out;
}
.error p { color: #fff; font-size: 1rem; }

/* Touches */
.keys-hint { display: flex; gap: 30px; justify-content: center; align-items: center; margin-bottom: 30px; }
.k-group { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.k-row { display: flex; gap: 4px; }
.k { 
    width: 30px; height: 30px; border: 2px solid #444; color: #888; 
    display: flex; justify-content: center; align-items: center; font-size: 0.6rem; 
    background: #111;
}
.or { font-size: 0.5rem; color: #444; }

/* Boutons Rétro */
button {
    background: var(--primary); color: #000; border: none;
    padding: 15px 20px; font-family: inherit; font-size: 0.8rem; 
    cursor: pointer; width: 100%; text-transform: uppercase; 
    box-shadow: 4px 4px 0px #00442a; /* Ombre dure */
    transition: all 0.1s;
}
button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px #00442a; }
button:active { transform: translate(4px, 4px); box-shadow: none; }

.error button { background: var(--alert); color: #fff; box-shadow: 4px 4px 0px #500; }
.error button:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0px #500; }

/* Animations */
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes shake {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/* === STAMINA BAR (DASH) === */
.stamina-container {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
}

.stamina-bar-bg {
    width: 150px;
    height: 8px;
    background: #111;
    border: 1px solid #444;
    padding: 1px;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.stamina-bar-fill {
    width: 100%;
    height: 100%;
    background: #00ffff; /* Cyan électrique */
    box-shadow: 0 0 8px #00ffff;
    transition: width 0.1s linear, background 0.3s;
}

/* Quand le dash est vide/en recharge */
.stamina-low {
    background: #555 !important;
    box-shadow: none !important;
}

/* === AJOUT POUR L'INDICATION DASH === */
.action-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px; /* Espace avant le bouton Start */
}

/* Touche Espace plus large */
.k-space {
    width: 120px !important;
    height: 30px;
    font-size: 0.6rem;
}

/* Texte "= DASH" en bleu néon */
.action-label {
    color: #00ffff;
    font-size: 0.8rem;
    font-family: 'Press Start 2P', cursive;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
    animation: blink 2s infinite;
}