/* RESET ET BASE */
body, html { 
    margin: 0; padding: 0; width: 100%; height: 100%; 
    overflow: hidden; background: #000; 
}

/* ÉCRAN D'OUVERTURE (CENTRÉ POUR IPAD) */
#opening-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.9); display: flex; flex-direction: column;
    justify-content: center; align-items: center; z-index: 9999;
    color: white; font-family: 'Arial Black', sans-serif; text-align: center;
}

.title-drop { font-size: 80px; color: #ff8c00; margin: 0; text-shadow: 0 0 20px #ff8c00; }
.subtitle { font-size: 20px; letter-spacing: 3px; margin-bottom: 30px; }
.team-intro { display: flex; gap: 20px; margin-bottom: 30px; font-size: 18px; }
.intro-us { color: #ff8c00; }
.intro-enemy { color: #b026ff; }

#opening-screen button {
    padding: 20px 50px; font-size: 25px; background: #ff8c00; color: white;
    border: 4px solid white; border-radius: 50px; cursor: pointer;
    font-weight: bold; box-shadow: 0 8px 0 #cc7000;
}

.hidden { display: none !important; }

/* HUD CENTRAL (TIMER ET SCORES) */
#inkshotter-hud {
    position: fixed; top: 10px; left: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center;
    z-index: 100; font-family: 'Arial Black', sans-serif; pointer-events: none;
}

.time-box {
    background: #222; color: white; padding: 5px 20px; border-radius: 5px;
    font-size: 28px; margin-bottom: 5px; border: 2px solid #444;
}

.scores-container { display: flex; gap: 15px; }

.score-box {
    width: 70px; height: 45px; display: flex; justify-content: center; align-items: center;
    font-size: 32px; border-radius: 4px; text-shadow: 2px 2px 0px #000;
    background: rgba(0,0,0,0.5); border: 2px solid transparent; transition: all 0.3s ease;
}

.team-us { color: #ff8c00; }
.team-enemy { color: #b026ff; }

/* LE RETOUR DE LA GROSSE BRILLANCE */
.team-us.controlling {
    background: #ff8c00; color: white;
    box-shadow: 0 0 20px #ff8c00, 0 0 40px #ff8c00; 
    transform: scale(1.15); border: 2px solid white; z-index: 10;
}

.team-enemy.controlling {
    background: #b026ff; color: white;
    box-shadow: 0 0 20px #b026ff, 0 0 40px #b026ff;
    transform: scale(1.15); border: 2px solid white; z-index: 10;
}

/* MESSAGES STYLE SPLATOON (FIXÉ À 30% POUR ÊTRE VISIBLE) */
#game-state {
    position: fixed; top: 30%; left: 0; width: 100%; text-align: center;
    font-size: 40px; font-family: 'Arial Black', sans-serif; color: white;
    text-shadow: 3px 3px 0px #000, 0 0 10px rgba(0,0,0,0.5);
    opacity: 0; transition: opacity 0.2s; z-index: 1000; pointer-events: none;
}
.show-message { opacity: 1 !important; }

/* CONTRÔLES MOBILES */
#mobile-controls {
    position: fixed; bottom: 30px; left: 0; right: 0; width: 100%; height: 120px;
    display: none; justify-content: space-between; padding: 0 40px;
    box-sizing: border-box; z-index: 500;
}

.show-mobile { display: flex !important; }

.joy-container { display: flex; align-items: center; gap: 30px; }
.joy-base { 
    width: 120px; height: 120px; background: rgba(255,255,255,0.1); 
    border: 3px solid rgba(255,255,255,0.4); border-radius: 50%; 
    position: relative; touch-action: none; 
}
.joy-knob { 
    width: 60px; height: 60px; background: #ff8c00; 
    border-radius: 50%; position: absolute; top: 30px; left: 30px; 
    pointer-events: none; box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.action-btn { 
    width: 80px; height: 80px; border-radius: 50%; 
    background: rgba(0,0,0,0.5); color: white; border: 3px solid white; 
    font-weight: bold; font-family: 'Arial Black'; font-size: 14px; touch-action: none;
}
.action-btn:active { background: #ff8c00; transform: scale(0.95); }

#crosshair { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border: 2px solid white; border-radius: 50%; pointer-events: none; z-index: 50; }

/* --- NOUVEAUTÉS : EFFETS DE DÉGÂTS ET MORT --- */
#damage-flash {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(255,0,0,0) 40%, rgba(255,0,0,0.4) 100%);
    pointer-events: none; opacity: 0; transition: opacity 0.1s; z-index: 2000;
}

#black-screen {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: black; opacity: 0; pointer-events: none; transition: opacity 0.5s; z-index: 5000;
}
/* NOUVEAUTÉ : KILL FEED (Message miniature) */
#kill-feed {
    position: fixed;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-family: 'Arial Black', sans-serif;
    font-size: 18px;
    border-left: 5px solid #ff8c00;
    z-index: 1500;
    display: none; /* Caché par défaut */
}

#kill-feed-name {
    color: #ff8c00;
}
#kill-ui {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 350px; height: 350px;
    /* On simule une grosse tache d'encre orange */
    background: radial-gradient(circle, rgba(255, 140, 0, 0.9) 30%, rgba(255, 140, 0, 0) 70%);
    color: white; display: none; flex-direction: column;
    justify-content: center; align-items: center; text-align: center;
    font-family: 'Arial Black', sans-serif; text-shadow: 2px 2px 0 #000;
    z-index: 900; /* Plus bas que game-state ! */
}

.killer-name { font-size: 30px; line-height: 1.2; text-transform: uppercase; }
.weapon-info { font-size: 18px; color: #fff; margin-top: 10px; }

/* ========================================= */
/* --- STYLES SPÉCIFIQUES PAGE DE LOGIN ---  */
/* ========================================= */

#login-body {
    /* Un fond animé ou un dégradé très stylé */
    background: linear-gradient(135deg, #1a0033 0%, #000000 50%, #331a00 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Arial Black', sans-serif;
    color: white;
}

.login-container {
    text-align: center;
    width: 90%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.login-title {
    font-size: 70px;
    margin: 0;
    color: #ff8c00;
    text-shadow: 0 0 20px #ff8c00, 4px 4px 0px #000;
    letter-spacing: 2px;
}

.login-subtitle {
    font-size: 18px;
    margin: 0;
    color: #b026ff;
    letter-spacing: 5px;
    text-shadow: 2px 2px 0px #000;
}

/* La boite centrale avec effet verre dépoli */
.login-box {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#password {
    width: 100%;
    padding: 15px;
    font-size: 20px;
    font-family: 'Arial Black', sans-serif;
    text-align: center;
    border: 2px solid #555;
    border-radius: 10px;
    background: #111;
    color: white;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

#password:focus {
    border-color: #ff8c00;
}

#enterBtn {
    width: 100%;
    padding: 15px;
    font-size: 22px;
    background: #ff8c00;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Arial Black', sans-serif;
    text-transform: uppercase;
    box-shadow: 0 5px 0 #cc7000;
    transition: transform 0.1s, box-shadow 0.1s;
}

#enterBtn:active {
    transform: translateY(5px);
    box-shadow: 0 0px 0 #cc7000;
}

#error {
    color: #ff0000;
    font-size: 14px;
    background: rgba(255, 0, 0, 0.2);
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ff0000;
}

.policy-box {
    font-family: 'Arial', sans-serif;
    font-size: 12px;
    color: #aaa;
    line-height: 1.5;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #333;
}

.policy-box a {
    color: #ff8c00;
    text-decoration: none;
    font-weight: bold;
}

.policy-box a:hover {
    text-decoration: underline;
}
/* --- NOUVEAUX STYLES POUR LE BOUTON JOIN --- */
.separator {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 2px;
    margin: 5px 0;
}

#joinBtn {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    background: transparent;
    color: #b026ff;
    border: 2px solid #b026ff;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'Arial Black', sans-serif;
    text-transform: uppercase;
    transition: all 0.2s ease;
}

#joinBtn:hover {
    background: #b026ff;
    color: white;
    box-shadow: 0 0 15px #b026ff;
}

#joinBtn:active {
    transform: translateY(3px);
}
/* ========================================= */
/* --- STYLES DU SALON D'ATTENTE (LOBBY) --- */
/* ========================================= */

#lobby-screen {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: linear-gradient(135deg, rgba(26,0,51,0.95) 0%, rgba(0,0,0,0.95) 50%, rgba(51,26,0,0.95) 100%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 9999; font-family: 'Arial Black', sans-serif; text-align: center;
    backdrop-filter: blur(5px);
}

.lobby-teams {
    display: flex; gap: 40px; margin-bottom: 40px;
    flex-wrap: wrap; justify-content: center;
}

.team-panel {
    background: rgba(255, 255, 255, 0.05);
    padding: 20px; border-radius: 15px; width: 350px; min-height: 250px;
    border: 2px solid transparent; box-sizing: border-box;
}

.team-orange-panel {
    border-color: rgba(255, 140, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.2);
}

.team-violet-panel {
    border-color: rgba(176, 38, 255, 0.5);
    box-shadow: 0 0 20px rgba(176, 38, 255, 0.2);
}

.team-panel h3 {
    margin-top: 0; border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px; font-size: 22px;
}

.team-panel ul {
    list-style: none; padding: 0; margin: 0;
    color: white; font-size: 18px;
}

.team-panel li {
    margin: 10px 0; padding: 15px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 8px; text-align: left;
    display: flex; align-items: center; gap: 10px;
}

.team-panel li::before {
    content: "👤"; font-size: 20px;
}

#start-match-btn {
    padding: 20px 50px; font-size: 25px; background: #ff8c00; color: white;
    border: 4px solid white; border-radius: 50px; cursor: pointer;
    font-weight: bold; box-shadow: 0 8px 0 #cc7000; transition: transform 0.1s;
    text-transform: uppercase;
}

#start-match-btn:active {
    transform: translateY(5px); box-shadow: 0 3px 0 #cc7000;
}
/* --- LOBBY E-SPORTS --- */
.esports-panel {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at center, #1a1a2e 0%, #0f0f1a 100%);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    z-index: 9999; font-family: 'Arial Black', sans-serif; text-align: center;
}

.esports-input {
    padding: 15px; font-size: 20px; font-family: 'Arial Black'; text-align: center;
    border-radius: 8px; border: 2px solid #00e5ff; background: rgba(0,0,0,0.5);
    color: white; width: 250px; outline: none; transition: box-shadow 0.3s;
}
.esports-input:focus { box-shadow: 0 0 15px #00e5ff; }

.match-settings { display: flex; gap: 20px; margin-top: 10px; background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px; border: 1px solid #333; }
.match-settings label { color: #aaa; font-size: 14px; margin-right: 10px; }
.esports-select { padding: 10px; background: #111; color: white; border: 1px solid #00e5ff; font-family: 'Arial Black'; border-radius: 5px; outline: none; }

.btn-orange { padding: 15px 40px; font-size: 20px; background: #ff8c00; color: white; border: 3px solid white; border-radius: 30px; cursor: pointer; text-transform: uppercase; box-shadow: 0 6px 0 #cc7000; transition: transform 0.1s; }
.btn-orange:active { transform: translateY(4px); box-shadow: 0 2px 0 #cc7000; }
.btn-violet { padding: 15px 40px; font-size: 20px; background: #b026ff; color: white; border: 3px solid white; border-radius: 30px; cursor: pointer; text-transform: uppercase; box-shadow: 0 6px 0 #7a12b8; transition: transform 0.1s; }
.btn-violet:active { transform: translateY(4px); box-shadow: 0 2px 0 #7a12b8; }
.btn-gray { padding: 10px 30px; font-size: 16px; background: transparent; color: #aaa; border: 2px solid #555; border-radius: 20px; cursor: pointer; text-transform: uppercase; }

/* --- READY? GO!!! --- */
#ready-go-ui {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    z-index: 8000; pointer-events: none;
    background: rgba(0,0,0,0.6);
}
#ready-text {
    font-size: 100px; font-family: 'Arial Black', sans-serif;
    color: #ff007f; text-shadow: 0 0 30px #ff007f, 5px 5px 0 #000;
    transform: scale(0.1); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.show-ready { transform: scale(1) !important; opacity: 1 !important; }
.text-go { color: #00e5ff !important; text-shadow: 0 0 40px #00e5ff, 5px 5px 0 #000 !important; font-size: 150px !important; }
.kick-team-btn {
    background: #ff0044; border: 1px solid white; color: white;
    border-radius: 5px; padding: 5px 10px; cursor: pointer; font-size: 12px; margin-left: 5px;
}
.kick-team-btn:hover { background: #cc0033; }