/* /arcades/css/stellaire_base.css */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

/* LE COCON BLINDÉ : Ce CSS n'affectera QUE la zone de jeu */
#stellaire-app {
    position: relative;
    width: 100%;
    max-width: 860px;
    margin: 40px auto;
    background-color: var(--neon-bg, #050914);
    font-family: 'Orbitron', sans-serif;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
    padding: 20px;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
}

#game-container {
    position: relative;
    width: 800px;
    height: 450px;
    margin: 0 auto;
    border: 2px solid var(--neon-main, #00ffff);
    box-shadow: 0 0 10px var(--neon-main, #00ffff), inset 0 0 15px var(--neon-main, #00ffff);
    border-radius: 8px;
    overflow: hidden;
    
    /* 🌟 LES NOUVELLES LIGNES POUR LE FOND DYNAMIQUE 🌟 */
    background-color: var(--neon-bg, #050914);
    background-image: var(--bg-image, none); /* Modifié par le Javascript ! */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

#hud { 
    position: absolute; top: 15px; left: 20px; right: 20px; display: flex; 
    justify-content: space-between; font-weight: bold; color: #fff; 
    pointer-events: none; letter-spacing: 1px; text-shadow: 0 0 10px var(--neon-main, #00ffff); z-index: 10; 
}
#lives span { color: #ff4d4d; text-shadow: 0 0 10px #ff4d4d; }
#powerup-status { color: #ffea00; font-size: 0.8em; text-shadow: 0 0 10px #ffea00; }

/* LA CLASSE MAGIQUE RÉPARÉE */
.stellaire-hidden { display: none !important; }

#main-menu, #game-over-screen {
    position: absolute; inset: 0; background: rgba(5, 9, 20, 0.95); backdrop-filter: blur(5px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: white; z-index: 100;
}
.menu-options { display: flex; gap: 30px; margin-bottom: 35px; }
.menu-block { background: rgba(11, 19, 43, 0.5); padding: 20px; border-radius: 8px; border: 2px solid var(--neon-sec, #ff007f); box-shadow: 0 0 15px var(--neon-sec, #ff007f); text-align: center; }
.menu-block select { padding:10px; background:#000; color:#fff; border:1px solid var(--neon-main, #00ffff); border-radius:4px; font-family:'Orbitron'; outline:none; cursor:pointer;}

.play-btn { background: transparent; color: #ffea00; border: 2px solid #ffea00; font-size: 1.5em; padding: 15px 40px; cursor: pointer; border-radius: 4px; box-shadow: 0 0 15px #ffea00; transition: 0.2s; font-family: 'Orbitron'; text-transform: uppercase; }
.play-btn:hover { background: #ffea00; color: #000; transform: scale(1.05); }

.stellaire-instructions {
    text-align: center; margin-top: 20px; color: var(--neon-main, #00ffff); font-family: 'Orbitron', sans-serif;
}
.stellaire-instructions kbd { background: transparent; color: var(--neon-main, #00ffff); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--neon-main, #00ffff); box-shadow: 0 0 5px var(--neon-main, #00ffff); }

/* Contrôles Audio (Sliders) */
.stellaire-audio-controls {
    display: flex; justify-content: center; gap: 40px; margin-top: 15px; 
    color: var(--neon-sec, #ff007f); font-family: 'Orbitron', sans-serif; font-size: 0.9em;
}
.stellaire-audio-controls label { 
    display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer;
}
.stellaire-audio-controls input[type="range"] { 
    accent-color: var(--neon-sec, #ff007f); cursor: pointer; width: 120px;
}