* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, sans-serif;
  background: #0f1420;
  color: #e6e9f0;
  min-height: 100vh;
}
.hidden { display: none !important; }
.error { color: #ff6b6b; margin-top: 8px; }
.note-warn { color: #ffc46b; font-size: 12px; line-height: 1.4; }
.join-card select {
  padding: 9px; border-radius: 6px; border: 1px solid #333e57;
  background: #0f1420; color: #e6e9f0; font-size: 13px; width: 100%;
}
.small { font-size: 11px; color: #8a93a8; font-weight: normal; }

/* --- écran de connexion --- */
#join-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
}
.join-card {
  background: #1a2233; padding: 32px; border-radius: 12px;
  width: 320px; display: flex; flex-direction: column; gap: 14px;
}
.join-card h1 { font-size: 28px; letter-spacing: 1px; }
.subtitle { color: #8a93a8; font-size: 13px; margin-top: -8px; }
.join-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.join-card input[type="text"] {
  padding: 10px; border-radius: 6px; border: 1px solid #333e57;
  background: #0f1420; color: #e6e9f0; font-size: 15px;
}
.team-pick { display: flex; gap: 8px; }
.team-btn {
  flex: 1; padding: 10px; border-radius: 6px; border: 2px solid transparent;
  background: #232d44; color: #e6e9f0; cursor: pointer; font-size: 13px;
}
.team-btn.blue.selected { border-color: #4da3ff; background: #16324f; }
.team-btn.red.selected  { border-color: #ff5c5c; background: #4a1d24; }
#join-btn {
  padding: 12px; border-radius: 6px; border: none; cursor: pointer;
  background: #4da3ff; color: #08101f; font-size: 16px; font-weight: bold;
}

/* --- app --- */
header {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px; background: #1a2233;
}
#room-label { font-weight: bold; }
.status { font-size: 13px; color: #8a93a8; flex: 1; }
.status.ok { color: #5dd39e; }
.status.bad { color: #ff6b6b; }
#mute-btn {
  padding: 8px 14px; border-radius: 6px; border: 1px solid #333e57;
  background: #232d44; color: #e6e9f0; cursor: pointer; font-size: 14px;
}
#mute-btn.muted { background: #4a1d24; border-color: #ff5c5c; }
kbd {
  background: #0f1420; border: 1px solid #333e57; border-radius: 3px;
  padding: 1px 5px; font-size: 11px;
}
#mute-banner {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  background: #c0392b; color: white; font-size: 20px; font-weight: bold;
  padding: 10px 24px; border-radius: 8px; z-index: 50;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}

main { display: flex; gap: 20px; padding: 20px; flex-wrap: wrap; }
.map-wrap { display: flex; flex-direction: column; gap: 8px; }
#map {
  border-radius: 8px; background: #17202f;
  cursor: grab; touch-action: none;
  max-width: 100%;
}
.hint { font-size: 12px; color: #8a93a8; max-width: 560px; }

aside { display: flex; flex-direction: column; gap: 18px; min-width: 280px; flex: 1; max-width: 380px; }
aside section { background: #1a2233; border-radius: 8px; padding: 14px; }
aside h2 { font-size: 14px; margin-bottom: 10px; color: #b8c0d4; }
aside label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin-bottom: 10px; }
aside label.inline { flex-direction: row; align-items: center; gap: 8px; }
aside select, aside input[type="range"] {
  width: 100%; padding: 6px; border-radius: 6px;
  border: 1px solid #333e57; background: #0f1420; color: #e6e9f0;
}

#players { list-style: none; display: flex; flex-direction: column; gap: 6px; }
#players li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 6px; background: #141b2b; font-size: 14px;
}
#players .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
#players .dot.blue { background: #4da3ff; }
#players .dot.red { background: #ff5c5c; }
#players .vol { margin-left: auto; font-size: 12px; color: #8a93a8; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
#players .peer-vol { width: 70px; margin-left: auto; }
#players .peer-vol + .vol { margin-left: 6px; }
#players li.speaking { outline: 2px solid #5dd39e; }
#players li.dead { opacity: .45; }