/* --- CONFIGURATION GLOBALE --- */
body, html {
    height: 100%;
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    overflow: hidden;
    background: #000;
    user-select: none;
}

/* FOND D'ECRAN */
.background-layer {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: url('image/ecran.jpg') no-repeat center center fixed;
    background-size: cover;
    z-index: 0;
    transition: filter 0.8s ease;
}
.background-layer.blurred { filter: brightness(0.4) blur(5px); }

.ui-container {
    display: flex; justify-content: center; align-items: center;
    height: 100vh; width: 100%; position: relative; z-index: 10;
}

/* --- MENUS TRANSPARENTS --- */
.panel {
    background: linear-gradient(to bottom, rgba(139, 0, 0, 0.85) 0%, rgba(60, 0, 0, 0.9) 100%);
    border: 4px solid #ffd700;
    box-shadow: 0 0 30px rgba(0,0,0,0.8), inset 0 0 50px rgba(0,0,0,0.5);
    border-radius: 30px;
    padding: 40px;
    width: 90%; max-width: 900px;
    text-align: center;
    color: #fff;
    display: none;
    position: relative; z-index: 20;
    animation: popIn 0.5s ease;
}

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

h2 { font-family: 'Berkshire Swash', cursive; font-size: 3.5rem; margin-bottom: 30px; color: #ffd700; text-shadow: 3px 3px 0 #000; }

.input-std {
    background: rgba(74, 0, 0, 0.8); border: 2px solid #ffd700; color: #ffd700;
    padding: 15px; font-size: 1.8rem; text-align: center; border-radius: 10px; width: 70%;
    font-family: 'Rajdhani'; font-weight: bold; text-transform: uppercase;
}
.btn {
    padding: 12px 40px; border-radius: 10px; font-family: 'Berkshire Swash', cursive; font-size: 1.5rem;
    cursor: pointer; margin: 15px; border: 2px solid #fff; text-transform: uppercase; transition: transform 0.1s;
}
.btn:active { transform: scale(0.95); }
.btn-green { background: #006400; color: white; text-shadow: 1px 1px 0 #000; } 
.btn-gold { background: #daa520; color: black; font-weight: bold; }

/* LOBBY */
.clickable-code {
    cursor: pointer; border: 3px dashed #fff; padding: 15px 40px;
    display: inline-block; margin: 20px; font-size: 3.5rem; font-family: 'Rajdhani'; font-weight: 800;
    color: #fff; background: rgba(0,0,0,0.4); border-radius: 15px; text-shadow: 0 0 10px #ffd700;
}
.lobby-vs-name { font-size: 2.5rem; font-weight: bold; text-shadow: 2px 2px 5px #000; }

/* --- JEU (MAP) --- */
#screen-map { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; background: url('image/map.jpg') center/cover; }

/* SCORE & TIMER */
#game-info {
    position: absolute; top: 2%; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; justify-content: center; gap: 20px;
    z-index: 50; background: rgba(0,0,0,0.6); padding: 10px 40px;
    border-radius: 0 0 20px 20px; border: 2px solid #ffd700; border-top: none;
}
.score-side { font-family: 'Berkshire Swash'; font-size: 4rem; color: #ffd700; text-shadow: 2px 2px 5px #000; min-width: 60px; text-align: center; }
#timer-display { font-family: 'Rajdhani'; font-size: 3rem; color: #00ff00; text-shadow: 0 0 10px #006400; font-weight: bold; }

/* --- ELEMENTS DE JEU (TERRAIN, BALLE) --- */
#field-line {
    position: absolute; bottom: 15%; left: 10%; width: 80%; height: 4px;
    background: rgba(255, 255, 255, 0.3); z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
}
.field-marker { width: 2px; height: 15px; background: rgba(255,255,255,0.5); }

#game-ball {
    position: absolute; bottom: 15%; left: 50%; /* Centre */
    width: 120px; height: 120px;
    transform: translate(-50%, 50%); /* Centré sur la ligne */
    z-index: 10;
    transition: left 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Effet rebond fluide */
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
}

.game-car { position: absolute; bottom: 8%; width: 22%; height: 20%; z-index: 5; transition: transform 0.5s; }
.p1-pos { left: 12%; } .p2-pos { right: 12%; }

.shield-zone {
    position: absolute; top: 25%; height: 45%; width: 8%; z-index: 1;
    border-radius: 10px; border: 3px solid currentColor;
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(0,0,0,0));
    box-shadow: 0 0 30px currentColor; transition: opacity 0.5s;
}
.shield-blue { left: 1%; color: #00eaff; transform: perspective(600px) rotateY(15deg); }
.shield-orange { right: 1%; color: #ff6600; transform: perspective(600px) rotateY(-15deg); }

.cage-hp-bar { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 120%; height: 10px; background: #333; border: 1px solid #fff; }
.cage-fill { height: 100%; width: 100%; transition: width 0.5s; }

/* --- HUD COMPLET (HP + BOOST) --- */
.hud-player {
    position: absolute; bottom: 28%; width: 20%; text-align: center; z-index: 20;
    color: white; font-weight: bold; text-shadow: 1px 1px 2px #000; font-size: 1.2rem;
}
.hp-container {
    width: 100%; height: 20px; background: #222; border: 2px solid #fff;
    border-radius: 5px; overflow: hidden; margin-top: 5px; position: relative;
}
.hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #0f0, #ff0); transition: width 0.5s; }
.hp-text { position: absolute; top:0; left:0; width:100%; line-height:20px; color:#000; font-weight:800; z-index:2; }

/* BARRE DE BOOST */
.boost-container {
    width: 100%; height: 10px; background: #111; border: 1px solid #777;
    border-radius: 5px; overflow: hidden; margin-top: 3px; position: relative;
}
.boost-fill {
    height: 100%; width: 50%;
    background: linear-gradient(90deg, #ff00ff, #00ffff);
    box-shadow: 0 0 10px #ff00ff; transition: width 0.5s;
}

/* DECKS */
.power-bar { position: absolute; bottom: 2%; display: flex; gap: 15px; z-index: 100; padding: 15px; background: rgba(0,0,0,0.8); border-radius: 20px; border: 2px solid #ffd700; }
.disabled-bar { opacity: 0.5; pointer-events: none; filter: grayscale(1); }

.slot {
    width: 65px; height: 65px; border-radius: 50%; border: 3px solid #888; background: #333;
    cursor: pointer; position: relative; display: flex; justify-content: center; align-items: center;
    font-size: 2rem; transition: 0.2s; box-shadow: 0 0 10px #000;
}
.slot:hover { border-color: #fff; transform: translateY(-8px); box-shadow: 0 0 20px #ffd700; }

.slot.blocked { filter: grayscale(100%); opacity: 0.4; cursor: not-allowed; border-color: #444 !important; pointer-events: none; }
.slot.on-cooldown { filter: grayscale(100%); opacity: 0.5; pointer-events: none; }

/* Indicateurs sur les cartes */
.status-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2rem; font-weight: 800; color: #ff0000; text-shadow: 1px 1px 0 #fff; z-index: 10; }
.boost-cost {
    position: absolute; top: -5px; right: -5px;
    background: #ff00ff; color: #fff; font-size: 0.8rem; font-weight: bold;
    padding: 2px 6px; border-radius: 10px; border: 1px solid #fff;
    box-shadow: 0 0 5px #ff00ff; z-index: 15;
}
#timer-box {
    border: 1px solid #555;
    padding: 5px 15px;
    background: #222;
    border-radius: 5px;
    min-width: 80px;
}
.tooltip { position: absolute; bottom: 130%; left: 50%; transform: translateX(-50%); width: 180px; background: rgba(0,0,0,0.95); border: 1px solid #ffd700; color: #fff; padding: 10px; font-size: 0.9rem; border-radius: 8px; display: none; pointer-events: none; text-align: center; z-index: 200; }
.slot:hover .tooltip { display: block; }

#turn-indicator { position: absolute; top: 18%; left: 50%; transform: translateX(-50%); font-family: 'Berkshire Swash'; font-size: 3.5rem; color: #fff; text-shadow: 0 0 20px #000; z-index: 50; }
.float-msg { position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%); font-size: 4rem; font-family: 'Berkshire Swash'; color: gold; text-shadow: 0 0 15px #000; animation: floatUp 2s forwards; z-index: 999; white-space: nowrap; }
@keyframes floatUp { 0% {opacity:0; transform:translate(-50%,-50%);} 10% {opacity:1;} 100% {opacity:0; transform:translate(-50%,-200px);} }

#screen-start { position: fixed; top:0; left:0; width:100%; height:100%; display:flex; justify-content:center; align-items:center; background:rgba(0,0,0,0.4); z-index:1000; cursor:pointer; }
#press-to-continue { font-family:'Berkshire Swash'; font-size:3rem; color:gold; text-shadow:0 0 20px #000; animation:blink 1.5s infinite; }
@keyframes blink { 50% { opacity:0.5; } }
.carousel-container { display:flex; align-items:center; justify-content:center; height:350px; width:100%; }
.model-stage { width:80%; height:100%; } .arrow { font-size:4rem; color:gold; cursor:pointer; padding:0 20px; }