/* --- Réinitialisation & Variables Globales --- */
:root {
    --font-primary: 'Orbitron', sans-serif; /* Police plus "tech/gaming" pour les titres */
    --font-secondary: 'Nunito', sans-serif;
    --color-background: #0a0f2c; /* Bleu nuit très sombre */
    --color-panel: rgba(18, 25, 68, 0.85); /* Bleu panel semi-transparent */
    --color-panel-border: rgba(60, 120, 255, 0.6);
    --color-text-primary: #e0e8ff;
    --color-text-secondary: #a0b0e0;
    --color-accent-primary: #00f2ff; /* Cyan vif */
    --color-accent-secondary: #ff40ff; /* Magenta vif */
    --color-highlight: #ffd700; /* Or */
    --button-glow-color: var(--color-accent-primary);
    --selected-glow-color: var(--color-highlight);
    --focus-outline-color: var(--color-accent-secondary);
}

html {
    box-sizing: border-box;
    height: 100%;
}
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-secondary);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1.5rem 0; /* Espace pour le scroll */
    position: relative;
    overflow-x: hidden; /* Empêche scroll horizontal */
}

/* --- Fond Étoilé (Conservé) --- */
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
.stars, .twinkling {
  position:fixed; /* Fixé pour rester en place même au scroll */
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}
.stars {
  background:var(--color-background) url(https://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:-2; /* Derrière tout */
}
.twinkling {
  background:transparent url(https://www.script-tutorials.com/demos/360/images/twinkling.png) repeat top center;
  z-index:-1; /* Au-dessus des étoiles fixes */
  animation:move-twink-back 200s linear infinite;
}

/* --- Conteneur Principal du Menu --- */
.menu-container {
    background: none; /* Retirer le fond du conteneur global */
    width: 90%;
    max-width: 1100px; /* Plus large pour le layout potentiel */
    padding: 0; /* Padding géré par les sections */
    border-radius: 0; /* Pas de bordure/radius ici */
    box-shadow: none; /* Pas d'ombre ici */
    border: none;
    backdrop-filter: none;
    text-align: center;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* --- Header (Titre, Contrôles, Notes) --- */
.menu-header {
    background: rgba(0, 0, 0, 0.3); /* Fond sombre semi-transparent pour le header */
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    border-radius: 20px;
    border: 1px solid var(--color-panel-border);
    box-shadow: 0 0 20px rgba(0, 180, 255, 0.2);
    position: relative;
    display: flex; /* Activer Flexbox */
    align-items: center; /* Aligner verticalement au centre */
    gap: 1rem; /* Réduit l'espace entre affiche et contenu */
}

.header-poster {
    /* display: none;  Retiré pour réafficher */
    height: 250px; /* Hauteur inchangée */
    /* width: auto;  Remplacé par max-width */
    max-width: 180px; /* Réduit encore la largeur max */
    width: auto; /* Garder auto pour ratio, mais limité par max-width */
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}

.header-content {
    flex-grow: 1;
    text-align: center;
    min-width: 0; /* Ajout pour éviter que le contenu ne dépasse */
}

.top-controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    z-index: 10; /* Au-dessus du titre */
}

.control-button {
    font-family: var(--font-secondary);
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-text-primary);
    border: 1px solid var(--color-panel-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
    appearance: none; /* Pour les selects */
    outline: none;
}

.control-button:hover {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 8px var(--color-accent-primary);
}

.language-select option {
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.sound-toggle.muted::after { /* Barre rouge sur l'icône muet */
     content: "";
     position: absolute;
     top: 50%;
     left: 50%;
     width: 110%;
     height: 2px;
     background-color: #ff4d4d;
     transform: translate(-50%, -50%) rotate(-45deg);
     pointer-events: none;
}

/* --- Typographie Header --- */
h1 {
    font-family: var(--font-primary);
    font-size: clamp(2.5rem, 6vw, 4rem); /* Responsive */
    margin-bottom: 0.2rem;
    color: var(--color-text-primary);
    text-shadow: 0 0 15px rgba(0, 242, 255, 0.5);
}

.rainbow-text {
    background: linear-gradient(90deg, var(--color-accent-primary), var(--color-accent-secondary), var(--color-highlight), var(--color-accent-primary));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rainbow-flow 4s linear infinite;
}

@keyframes rainbow-flow {
    to { background-position: -200% center; }
}

.subtitle {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
    font-style: italic;
}

.compatibility-notes {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}
.compatibility-notes p {
    margin: 0;
    background: rgba(0,0,0,0.2);
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
}
.compatibility-notes small {
    font-size: inherit;
}
.gamepad-note small {
    color: #99ff99; /* Vert manette */
}
.vr-note small {
    color: #87CEEB; /* Bleu VR */
}

/* --- Section Principale & Panneaux --- */
.menu-main {
    width: 100%;
}

.main-sections-wrapper {
    /* Par défaut (mode portrait), les colonnes s'empilent */
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.layout-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex-basis: 100%; /* Prend toute la largeur en mode portrait */
}

.menu-section.panel {
    background: var(--color-panel);
    border: 1px solid var(--color-panel-border);
    border-radius: 15px;
    padding: 1.5rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(0, 180, 255, 0.1);
    backdrop-filter: blur(3px);
    flex-grow: 1; /* Pour que les panneaux remplissent la colonne */
}

.panel h2 {
    font-family: var(--font-primary);
    font-size: clamp(1.3rem, 3vw, 1.6rem);
    color: var(--color-accent-primary);
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(60, 120, 255, 0.3);
    text-shadow: 0 0 8px rgba(0, 242, 255, 0.4);
    display: flex; /* Pour aligner icône et texte */
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* --- Grilles de Boutons (Mode & Vaisseau) --- */
.button-grid {
    display: grid;
    /* Auto-fit: crée autant de colonnes que possible avec une largeur min/max */
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1rem;
}

/* --- Boutons Généraux (Mode, Vaisseau) --- */
.menu-button {
    font-family: var(--font-secondary);
    font-weight: bold;
    padding: 0.7rem 1rem; /* Augmenté padding horizontal général */
    font-size: 0.95rem;
    border-radius: 10px;
    border: 1px solid transparent; /* Pour la transition */
    cursor: pointer;
    transition: all 0.25s ease-out;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(40, 60, 130, 0.8), rgba(25, 40, 100, 0.9));
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    /* white-space: nowrap;  On va gérer ça spécifiquement pour les modes */
    min-height: 50px; /* Donner une hauteur minimale pour aligner si texte sur 2 lignes */
}

/* Permettre le retour à la ligne pour les boutons de mode (Global) */
.mode-button span[data-translate-key] {
    white-space: normal;
    display: inline-block; /* Important */
    line-height: 1.2; /* Améliorer espacement si 2 lignes */
}

.menu-button .icon {
    font-size: 1.1em;
    line-height: 1;
}

/* Effet néon subtil au survol */
.menu-button:hover:not(.selected) {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5), 0 0 10px var(--button-glow-color);
    border-color: var(--button-glow-color);
    color: #fff;
}

/* Style sélectionné */
.menu-button.selected {
    background: linear-gradient(145deg, var(--color-accent-primary), var(--color-accent-secondary));
    color: var(--color-background);
    font-weight: bold;
    box-shadow: 0 0 15px var(--selected-glow-color), 0 2px 5px rgba(0,0,0,0.3);
    border-color: var(--color-highlight);
    transform: scale(1.03);
}

/* Ajustements spécifiques pour les boutons de mode */
.mode-button {
    --button-glow-color: var(--color-accent-secondary);
}

/* Ajustements spécifiques pour les boutons de vaisseau */
    .ship-button {
    --button-glow-color: var(--color-accent-primary);
}
.ship-button.selected {
    background: linear-gradient(145deg, var(--color-accent-primary), #4da6ff);
}

/* --- Section Configuration Personnalisée & Manette --- */
.custom-options-container {
    display: flex;
        flex-direction: column;
    gap: 1rem;
}

.custom-option {
    display: grid;
    grid-template-columns: auto 1fr; /* Label prend sa place, reste pour l'input */
    align-items: center;
    gap: 0.5rem 1rem;
    text-align: left;
}

.custom-option label {
    font-weight: bold;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    justify-self: start;
}

.custom-option select,
.custom-option input[type="range"] {
    width: 100%;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(60, 120, 255, 0.4);
    border-radius: 6px;
    color: var(--color-text-primary);
    font-family: var(--font-secondary);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-option select:focus,
.custom-option input[type="range"]:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 8px var(--color-accent-primary);
}

.custom-option select option {
    background: var(--color-background);
    color: var(--color-text-primary);
}

/* Conteneur pour slider + valeur */
.range-container {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.custom-option input[type="range"] {
    flex-grow: 1;
    cursor: pointer;
    padding: 0; /* Retirer padding pour apparence custom */
    height: 8px; /* Hauteur de la track */
    appearance: none;
    background: transparent;
    border-radius: 5px;
    background: linear-gradient(to right, var(--color-accent-primary), var(--color-accent-secondary));
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

/* Style du pouce (handle) du slider */
.custom-option input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--color-highlight);
    border-radius: 50%;
    border: 2px solid var(--color-background);
    box-shadow: 0 0 5px var(--color-highlight);
    cursor: pointer;
    margin-top: -5px; /* Centrer verticalement */
}
.custom-option input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--color-highlight);
    border-radius: 50%;
    border: 2px solid var(--color-background);
    box-shadow: 0 0 5px var(--color-highlight);
    cursor: pointer;
}

.custom-option .range-value {
    font-weight: bold;
    color: var(--color-highlight);
    min-width: 35px;
    text-align: right;
    font-size: 0.9rem;
}

/* Description Preset Manette */
.preset-description {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--color-text-secondary);
    margin-top: 0.8rem;
    min-height: 1.1em;
    text-align: center;
}

/* --- Section Couleurs --- */
.color-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
    gap: 0.8rem;
    justify-content: center;
    max-width: 450px; /* Limite largeur pour éviter trop d'étalement */
    margin: 0 auto; /* Centrer la grille */
}

.color-option {
    width: 100%; /* Prend la largeur de la colonne de grille */
    padding-bottom: 100%; /* Crée un carré (hauteur = largeur) */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    border: 3px solid transparent;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.color-preview {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #555), var(--secondary-color, #888));
    transition: transform 0.2s ease;
}

.color-option:hover .color-preview {
    transform: scale(1.1);
}

.color-option:hover {
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.6);
}

.color-option.selected {
    border-color: var(--color-highlight);
    box-shadow: 0 0 12px var(--color-highlight), 0 2px 5px rgba(0,0,0,0.3);
}
.color-option.selected .color-preview {
    transform: scale(0.9); /* Effet d'enfoncement */
}

/* Application des couleurs via JS dans le HTML (style inchangé) */

/* --- Footer (Bouton Start) --- */
.menu-footer {
    padding: 1rem;
    text-align: center;
    }

    .start-button {
    font-family: var(--font-primary);
    font-weight: bold;
    padding: 1rem 2.5rem;
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
    position: relative;
    overflow: hidden;
    background: linear-gradient(45deg, #1fcc44, #56ff7a); /* Vert néon */
    color: #05300f; /* Vert très sombre */
    text-shadow: 0 1px 1px rgba(255,255,255,0.3);
    min-width: 250px;
    max-width: 90%;
    display: inline-flex; /* Pour aligner span et icône */
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
}

.start-button .rocket {
    display: inline-block;
    transition: transform 0.3s ease-out;
}

.start-button:not(:disabled):hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6), 0 0 25px #39ff6a;
}
.start-button:not(:disabled):hover .rocket {
    transform: translateX(5px) rotate(-15deg);
}

.start-button:disabled {
    background: linear-gradient(45deg, #555, #888);
    color: #bbb;
    cursor: not-allowed;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.3);
    text-shadow: none;
} 

/* --- Gestion du Focus Clavier/Manette --- */
.focused-by-input {
    outline: 3px solid var(--focus-outline-color);
    outline-offset: 3px;
    box-shadow: 0 0 15px var(--focus-outline-color);
}

/* Ajustements spécifiques */
.color-option.focused-by-input {
    outline-offset: 2px;
}
.custom-option input[type="range"].focused-by-input {
    outline: none; /* Pas d'outline sur le range */
    box-shadow: 0 0 10px var(--focus-outline-color); /* Ombre sur le range */
}
.custom-option input[type="range"].focused-by-input::-webkit-slider-thumb {
    box-shadow: 0 0 10px var(--focus-outline-color); /* Ombre sur le pouce */
}
.custom-option input[type="range"].focused-by-input::-moz-range-thumb {
    box-shadow: 0 0 10px var(--focus-outline-color);
}
.control-button.focused-by-input,
.custom-option select.focused-by-input {
     outline-offset: 1px;
}

/* --- Layout Paysage --- */
/* Déclenché via JS en ajoutant la classe au body */
body.layout-landscape .main-sections-wrapper {
    flex-direction: row;
    align-items: flex-start; /* Aligner en haut */
    gap: 1rem; /* Réduit gap entre colonnes */
}

body.layout-landscape .layout-column {
    flex: 1 1 0; /* Les colonnes partagent l'espace équitablement */
    min-width: 0; /* Important pour flex-basis 0 */
}

/* Réduire l'espace vertical en paysage */
body.layout-landscape .menu-container,
body.layout-landscape .layout-column {
    gap: 0.8rem; /* Réduit gap entre panels dans une colonne */
}
body.layout-landscape .menu-header {
    padding: 0.5rem 1rem 0.8rem 1rem; /* Padding vertical réduit */
    border-radius: 15px; /* Moins arrondi */
}
body.layout-landscape h1 {
    font-size: clamp(2rem, 4vw, 3rem); /* Taille réduite */
    margin-bottom: 0.1rem;
}
body.layout-landscape .subtitle {
    font-size: clamp(0.9rem, 2vw, 1.1rem); /* Taille réduite */
    margin-bottom: 0.5rem;
}
body.layout-landscape .compatibility-notes {
    gap: 0.5rem 1rem; /* Espacement réduit */
    font-size: 0.75rem; /* Taille réduite */
}
body.layout-landscape .menu-section.panel {
    padding: 0.8rem 1rem; /* Padding vertical réduit */
    border-radius: 12px; /* Moins arrondi */
}
body.layout-landscape .panel h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem); /* Taille réduite */
    margin-bottom: 0.8rem; /* Marge réduite */
    padding-bottom: 0.3rem;
}
body.layout-landscape .menu-footer {
    padding: 0.3rem; /* Padding très réduit */
}
/* Réduire aussi le bouton start en paysage */
body.layout-landscape .start-button {
    padding: 0.6rem 1.8rem;
    font-size: clamp(1rem, 3vw, 1.3rem);
    min-width: 200px;
}

/* --- Responsive Design --- */

/* Tablettes (max 768px) */
@media (max-width: 768px) {
    body {
        padding: 1rem 0;
    }
    .menu-container {
        width: 95%;
        gap: 1rem;
    }
    .menu-header {
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
        padding: 1rem;
    }
    .header-poster {
        height: auto;
        width: 50%;
        max-width: 180px;
        margin-bottom: 0.5rem;
    }
    .header-content {
        width: 100%;
    }
    .top-controls {
        position: static;
        margin-bottom: 1rem;
        justify-content: center;
    }
    h1 {
        margin-top: 0;
    }
    .menu-section.panel {
        padding: 1rem;
    }
    .panel h2 {
        font-size: 1.4rem;
    }
    .button-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: 0.8rem;
    }
    .menu-button {
        font-size: 0.9rem;
        padding: 0.7rem 0.8rem;
    }
    .color-options {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 0.6rem;
        max-width: 350px;
    }
    .custom-option {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 0.3rem;
    }
    .custom-option label { justify-self: center; }
    .range-container { flex-direction: column; gap: 0.5rem; }
    .custom-option input[type="range"] { width: 80%; margin: 0 auto; }
    .custom-option .range-value { text-align: center; }
    .start-button {
        padding: 0.8rem 2rem;
    }
}

/* Petits Mobiles (max 480px) */
@media (max-width: 480px) {
    body {
        padding: 0.5rem 0;
        display: block;
        min-height: auto;
    }
    .menu-container {
        width: 95%;
        gap: 0.8rem;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }
    .menu-header {
        padding: 0.8rem 1rem 1rem 1rem;
        border-radius: 15px;
        width: 100%;
        text-align: center;
        flex-direction: column;
        align-items: center;
        gap: 0.8rem;
    }
    .header-poster {
        display: block;
        height: auto;
        width: 60%;
        max-width: 160px;
        margin: 0 auto 0 auto;
    }
    .header-content {
        width: 100%;
    }
    .top-controls {
        margin-bottom: 0.8rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
    }
    .control-button { padding: 5px 8px; font-size: 0.8rem; }
    .compatibility-notes { gap: 0.5rem 1rem; font-size: 0.75rem; }
    .panel h2 { font-size: 1.2rem; margin-bottom: 0.8rem; }
    .menu-section.panel { padding: 0.8rem; border-radius: 10px; }
    .button-grid {
        grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
        gap: 0.5rem;
    }
    .menu-button { 
        font-size: 0.7rem;
        padding: 0.6rem 0.6rem;
        border-radius: 8px; 
        gap: 0.3rem; 
        min-height: 45px;
    }
    .menu-button .icon { font-size: 1em; }
    .color-options {
        grid-template-columns: repeat(6, 1fr);
        gap: 0.5rem;
        max-width: 100%;
    }
    .color-option { border-width: 2px; }
    .custom-option label { font-size: 0.85rem; }
    .custom-option select, .custom-option input[type="range"] { font-size: 0.85rem; padding: 6px 8px; }
    .custom-option input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -4px; }
    .custom-option input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; }
    .custom-option .range-value { font-size: 0.85rem; }
    .preset-description { font-size: 0.8rem; }
    .start-button {
        padding: 0.7rem 1.5rem;
        min-width: 200px;
    }
    body.layout-landscape .main-sections-wrapper { flex-direction: column; }
    body.layout-landscape .layout-column { flex-basis: 100%; }
}

/* --- Layout Paysage --- */
/* Déclenché via JS en ajoutant la classe au body */
body.layout-landscape .main-sections-wrapper {
    /* ... */
}
/* ... (reste du fichier) ... */