body { 
    font-family: 'Courier New', Courier, monospace; /* Style dossier criminel */
    background: #121212; /* Noir profond */
    color: #e0e0e0; 
    margin: 0; 
}

.container { 
    max-width: 400px; 
    margin: 50px auto; 
    background: #1e1e1e; 
    padding: 20px; 
    border: 2px solid #d35400; /* Orange prison */
    box-shadow: 0 0 15px rgba(211, 84, 0, 0.2);
}

h1, h2, h3 {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #e67e22;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

input, select { 
    background: #333; 
    border: 1px solid #555; 
    color: #fff; 
    width: 100%; 
    padding: 10px; 
    margin: 10px 0; 
    box-sizing: border-box; 
}

button { 
    cursor: pointer; 
    background: #d35400; 
    border: 1px solid #a04000; 
    color: white; 
    font-weight: bold; 
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 100%; 
    padding: 10px; 
    margin: 10px 0; 
    box-sizing: border-box;
    transition: background 0.2s;
}

button:hover { background: #e67e22; }

/* Dashboard */
nav { 
    background: #000; 
    padding: 15px; 
    display: flex; 
    justify-content: space-between; 
    border-bottom: 3px solid #d35400; 
}

nav span { color: #fff; font-weight: bold; }
nav a { color: #e74c3c; text-decoration: none; font-weight: bold; }
nav a:hover { text-decoration: underline; }

.game-layout { display: flex; padding: 20px; gap: 20px; flex-wrap: wrap; }
.stats-panel { width: 250px; background: #1e1e1e; padding: 15px; border: 1px solid #333; }
.stats-panel ul { list-style: none; padding: 0; }
.stats-panel li { padding: 8px 0; border-bottom: 1px dashed #444; color: #bbb; }
.stats-panel li span { color: #fff; font-weight: bold; float: right; }

.main-panel { flex-grow: 1; background: #252525; color: #ddd; padding: 20px; border: 1px solid #333; }

/* Locations & Actions */
.locations { display: flex; gap: 5px; margin-bottom: 20px; background: #111; padding: 5px; }
.loc-btn { background: #333; color: #888; flex: 1; border: none; margin: 0; }
.loc-btn:hover { background: #444; color: #fff; }
.loc-btn.active { background: #d35400; color: #fff; }

.action-btn { padding: 20px; font-size: 1.1em; margin-bottom: 10px; border-left: 5px solid transparent; text-align: left; background: #333; }
.action-btn:hover { background: #444; }
.btn-safe { border-left-color: #27ae60; }
.btn-normal { border-left-color: #f39c12; }
.btn-danger { border-left-color: #c0392b; }

#message-box { margin-top: 20px; padding: 10px; border: 1px solid #444; background: #000; text-align: center; font-weight: bold; }
.success { color: #2ecc71; }
.error { color: #e74c3c; }

/* Chat System */
#chat-box { margin-top: 30px; border-top: 2px solid #d35400; padding-top: 10px; }
#chat-messages { height: 200px; overflow-y: auto; background: #080808; border: 1px solid #333; padding: 10px; margin-bottom: 10px; font-size: 0.9em; font-family: 'Courier New', monospace; }
.chat-msg { margin-bottom: 6px; border-bottom: 1px solid #1a1a1a; padding-bottom: 2px; }
.chat-meta { font-size: 0.75em; color: #666; }
.chat-user { color: #e67e22; font-weight: bold; }
.chat-gang { color: #7f8c8d; font-style: italic; margin-right: 5px; }
.chat-text { color: #ccc; display: block; margin-top: 2px; }

#chat-form { display: flex; gap: 10px; }
#chat-input { flex-grow: 1; margin: 0; background: #222; border: 1px solid #444; }
#chat-btn { width: auto; margin: 0; padding: 0 20px; }

/* Couleurs des Gangs */
.gang-Crips { color: #33ccff; font-weight: bold; }   /* Bleu clair */
.gang-Bloods { color: #ff0000; font-weight: bold; }  /* Rouge vif sang */
.gang-MS13 { color: #3366cc; font-weight: bold; }    /* Bleu foncé (lisible) */
.gang-18Th { color: #b30000; font-weight: bold; }    /* Rouge bordeaux */