/* jeu-labyrinthe/assets/css/maze_style.css */

/* ==========================================================================
   VARIABLES - Noir Premium, Or & Béton
   ========================================================================== */
:root {
    --bg-dark: #050505;
    --bg-panel: #111111;
    --text-main: #f5f5f5;
    --text-muted: #999999;
    
    --gold-primary: #d4af37;
    --gold-light: #f3e5ab;
    --gold-dark: #997a00;
    
    /* Nouvelles couleurs pour l'environnement 3D */
    --wall-base: #dcdcdc; /* Béton clair */
    --path-base: #1a1a1a; /* Sol sombre pour le contraste */
    
    --border-radius: 4px;
    --transition-speed: 0.3s;
    --font-family: inherit;

    /* VARIABLES 3D */
    --cell-size: 256px; /* Taille d'un bloc 3D (mur/couloir) */
    --cell-size-half: 128px;
}

/* ==========================================================================
   RESET, BASE & TYPOGRAPHIE
   ========================================================================== */
#sygnex-maze-container {
    margin-top: 20px;
    margin-bottom: 20px;
    color: var(--text-main);
    font-family: var(--font-family);
    line-height: 1.6;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
}

#sygnex-maze-container * {
    box-sizing: border-box;
}

#sygnex-maze-container a {
    color: var(--gold-primary);
    text-decoration: none;
    transition: color var(--transition-speed);
}

#sygnex-maze-container a:hover,
#sygnex-maze-container a.active {
    color: var(--gold-light);
    text-shadow: 0 0 5px rgba(212, 175, 55, 0.5);
}

#sygnex-maze-container h1, 
#sygnex-maze-container h2 {
    font-weight: 500;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    color: var(--gold-primary);
}

#sygnex-maze-container h1 {
    font-size: 1.8rem; 
    padding-bottom: 10px;
}

#sygnex-maze-container h2 {
    border-bottom: 1px solid var(--gold-dark);
    padding-bottom: 10px;
    margin-bottom: 20px;
    font-size: 1.2rem; 
}

/* ==========================================================================
   PANNEAUX, FORMULAIRES & BOUTONS
   ========================================================================== */
#sygnex-maze-container .panel {
    background-color: var(--bg-panel);
    border: 1px solid var(--gold-dark);
    border-radius: var(--border-radius);
    padding: 25px;
    margin-bottom: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: opacity 0.5s ease;
}

#sygnex-maze-container input[type="text"],
#sygnex-maze-container select {
    width: 100%;
    padding: 12px 15px;
    background-color: #000;
    border: 1px solid var(--gold-dark);
    color: var(--text-main);
    border-radius: var(--border-radius);
    font-size: 1rem;
    margin-bottom: 20px;
}

#sygnex-maze-container input[type="text"]:focus,
#sygnex-maze-container select:focus {
    outline: none;
    border-color: var(--gold-primary);
    box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);
}

#sygnex-maze-container .btn {
    display: inline-block;
    background-color: var(--gold-primary);
    color: #000;
    border: 1px solid var(--gold-primary);
    padding: 10px 25px;
    font-size: 0.95rem;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    text-align: center;
}

#sygnex-maze-container .btn:hover {
    background-color: var(--gold-light);
    border-color: var(--gold-light);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

#btn-quit-maze {
    background-color: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--text-muted) !important;
}

#btn-quit-maze:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-main) !important;
    border-color: var(--text-main) !important;
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.fade-in {
    opacity: 1;
    animation: fadeInAnimation 0.8s ease forwards;
}

@keyframes fadeInAnimation {
    0% { opacity: 0; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

/* ==========================================================================
   TABLEAU DE CLASSEMENT
   ========================================================================== */
#sygnex-maze-container .leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
    font-size: 0.95rem;
}

#sygnex-maze-container .leaderboard-table th, 
#sygnex-maze-container .leaderboard-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #333;
}

#sygnex-maze-container .leaderboard-table th {
    background-color: rgba(212, 175, 55, 0.1);
    color: var(--gold-primary);
}

#sygnex-maze-container .leaderboard-table tr:nth-child(1) td {
    color: var(--gold-primary);
    font-weight: bold;
}

/* ==========================================================================
   MOTEUR DE RENDU 3D (LABYRINTHE)
   ========================================================================== */
.maze-layout {
    display: flex; gap: 20px; align-items: stretch; width: 100%;
}

.maze-view-container {
    flex: 1;
    position: relative;
    background-color: #000; /* Le ciel/fond au loin */
    border: 4px solid var(--gold-primary);
    border-radius: var(--border-radius);
    overflow: hidden;
    height: 60vh;
    min-height: 400px;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.9);
    
    /* Curseur interactif indiquant la possibilité de cliquer pour se diriger */
    cursor: pointer;
    
    /* Focale de la caméra 3D */
    perspective: 600px;
}

/* Le "Board" devient la caméra physique qui va bouger en inverse des mouvements du joueur */
#maze-board {
    position: absolute;
    top: 50%; left: 50%; /* Centre optique */
    width: 0; height: 0;
    transform-style: preserve-3d;
    /* Transition fluide pour simuler la marche et la rotation de la tête */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Le monde qui contient tous les murs, sol et plafond */
.maze-world {
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 0;
    transform-style: preserve-3d;
}

/* ==========================================================================
   ÉLÉMENTS 3D (SOL, PLAFOND, MURS, AFFICHES)
   ========================================================================== */

/* Sol et Plafond : Des plans géants répétés à l'infini */
.maze-floor, .maze-ceiling {
    position: absolute;
    width: 10000px; height: 10000px;
    margin-left: -5000px; margin-top: -5000px;
    background-size: var(--cell-size) var(--cell-size);
}

.maze-floor {
    /* On le couche à 90° et on le descend sous les pieds (axe Y) */
    transform: translateY(var(--cell-size-half)) rotateX(90deg);
    background-color: var(--path-base);
    background-image: radial-gradient(rgba(212, 175, 55, 0.1) 4px, transparent 4px);
    background-size: 64px 64px;
}

.maze-ceiling {
    /* On le couche à -90° et on le monte au-dessus de la tête */
    transform: translateY(calc(var(--cell-size-half) * -1)) rotateX(-90deg);
    background-color: #020202; /* Plafond très sombre pour l'ambiance urbaine nocturne */
    box-shadow: inset 0 0 1000px rgba(0,0,0,0.9);
}

/* Les faces des murs (Béton clair) */
.maze-wall-face {
    position: absolute;
    width: var(--cell-size);
    height: var(--cell-size);
    margin-left: calc(var(--cell-size-half) * -1);
    margin-top: calc(var(--cell-size-half) * -1);
    
    background-color: var(--wall-base);
    /* Texture subtile de béton/crépis */
    background-image: 
        linear-gradient(335deg, rgba(0,0,0,0.03) 23px, transparent 23px),
        linear-gradient(155deg, rgba(0,0,0,0.03) 23px, transparent 23px);
    background-size: 58px 58px;
    
    border: 1px solid #a0a0a0; /* Ligne de jointure claire entre les blocs */
    box-shadow: inset 0 0 60px rgba(0,0,0,0.3); /* Ombre douce pour préserver la clarté */
    backface-visibility: hidden; /* Ne rend pas le dos du mur pour les performances */
}

/* Effet de Tags / Graffiti sur les murs clairs */
.maze-wall-face::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Tag Noir et Or adapté au mur clair pour un contraste fort */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><text x="10" y="40" fill="%23d4af37" font-family="impact" font-size="20" opacity="0.45" transform="rotate(-15)">SYGNEX</text><text x="40" y="80" fill="%23111111" font-family="impact" font-size="15" opacity="0.3" transform="rotate(10)">URBAN</text></svg>');
    background-size: cover;
    pointer-events: none;
}

/* Masquer le tag si le mur possède une affiche */
.maze-wall-face.has-poster::after {
    display: none;
}

/* Galerie Virtuelle : Affiches 16:9 */
.maze-poster {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%; /* Occupe 80% de la largeur du bloc de béton */
    aspect-ratio: 16 / 9; /* Contraint l'image au format 16:9 */
    transform: translate(-50%, -50%); /* Centrage parfait vertical et horizontal */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: 0 5px 15px rgba(0,0,0,0.6); /* Ombre portée pour décoller l'affiche du mur */
    border: 4px solid #111; /* Cadre sombre d'exposition */
    border-radius: 2px;
    backface-visibility: hidden;
    z-index: 5;
}

/* Mur de Sortie (Lumineux) */
.maze-exit-face {
    background-color: rgba(76, 175, 80, 0.4);
    box-shadow: 0 0 100px rgba(76, 175, 80, 0.8), inset 0 0 50px rgba(0,0,0,0.5);
    border: 2px solid #4CAF50;
}
.maze-exit-face::after { display: none; } /* Pas de tag sur la sortie */

/* Mur d'Escaliers (Monte/Descend) */
.maze-stairs-face {
    background: repeating-linear-gradient(45deg, var(--gold-dark), var(--gold-dark) 20px, #111 20px, #111 40px);
    box-shadow: inset 0 0 50px #000;
}
.maze-stairs-face::after { display: none; }

/* ==========================================================================
   MINI-MAP & SIDEBAR
   ========================================================================== */
.maze-sidebar { 
    width: 220px; flex-shrink: 0; background: rgba(0,0,0,0.8); border: 1px solid var(--gold-dark); 
    border-radius: var(--border-radius); padding: 15px; display: flex; flex-direction: column; 
}
.minimap-container { 
    width: 100%; aspect-ratio: 1 / 1; background: #000; border: 2px solid #333; 
    border-radius: var(--border-radius); position: relative; overflow: hidden; 
}

/* ==========================================================================
   CONTRÔLES TACTILES (Visuels de secours, conservés par précaution)
   ========================================================================== */
.mobile-controls { display: none; margin-top: auto; flex-direction: column; align-items: center; gap: 8px; }
.ctrl-btn { 
    background: var(--bg-panel); border: 2px solid var(--gold-dark); color: var(--gold-primary); 
    font-size: 1.5rem; width: 50px; height: 50px; border-radius: 8px; cursor: pointer; 
    display: flex; justify-content: center; align-items: center; transition: all 0.1s ease; 
    user-select: none; touch-action: manipulation; 
}
.ctrl-btn:active { background: var(--gold-primary); color: #000; transform: scale(0.9); }

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 900px) {
    .maze-layout { flex-direction: column; }
    .maze-view-container { height: 50vh; min-height: 300px; }
    .maze-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
    .minimap-container { width: 150px; margin-bottom: 0; }
    .minimap-legend { flex: 1; min-width: 120px; margin-left: 15px; }
    /* Les contrôles via boutons classiques peuvent être désactivés si la navigation cliquable suffit */
    .mobile-controls { display: none; } 
}
@media (max-width: 600px) { .hud-stats { flex-direction: column; gap: 5px; width: 100%; } }