/* Thème "Crosstech Exodus" (docs/design/themes/01-crosstech-exodus.md) —
   IHM façon écran de contrôle/HUD de vaisseau : fond spatial sombre,
   cadres à coins coupés, repères d'angle, texte technique en monospace.
   Reste un CSS pur, aucune dépendance externe (pas de police/police
   d'icônes chargée depuis un CDN) — cohérent avec la philosophie
   "zéro build tooling" du client Phase 0 (cahier-des-charges-technique.md
   §4). Purement cosmétique : aucun `id`/`class` utilisé par app.js n'est
   renommé ici. */

:root {
  --bg: #080b12;
  --bg-panel: #0d1420;
  --accent: #4dd8e6;
  --accent-dim: #2a6b73;
  --warn: #ffb454;
  --success: #5eead4;
  --error: #ff6b6b;
  --text: #dce7f0;
  --text-dim: #7f92a3;
  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas,
    monospace;
}

* {
  box-sizing: border-box;
}

body {
  font-family: system-ui, sans-serif;
  max-width: 42rem;
  margin: 2rem auto;
  padding: 0 1rem 3rem;
  background: var(--bg);
  color: var(--text);
  /* Texture d'écran discrète : lignes de balayage horizontales très
     légères (scanlines) par-dessus un semis de points façon champ
     d'étoiles — deux dégradés répétés superposés, aucune image chargée. */
  background-image:
    repeating-linear-gradient(
      0deg,
      rgb(255 255 255 / 2%) 0px,
      rgb(255 255 255 / 2%) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(1px 1px at 10% 15%, rgb(255 255 255 / 40%), transparent),
    radial-gradient(1px 1px at 80% 30%, rgb(255 255 255 / 30%), transparent),
    radial-gradient(1px 1px at 40% 70%, rgb(255 255 255 / 25%), transparent),
    radial-gradient(1px 1px at 65% 85%, rgb(255 255 255 / 35%), transparent),
    radial-gradient(1px 1px at 25% 45%, rgb(255 255 255 / 20%), transparent);
  background-attachment: fixed;
}

h1,
h2 {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-shadow: 0 0 8px rgb(77 216 230 / 35%);
}

h1 {
  font-size: 1.4rem;
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: 0.75rem;
}

h2 {
  font-size: 1rem;
  margin-top: 2rem;
}

.warning {
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.9rem;
}

/* Panneaux principaux façon cockpit : coin supérieur droit et coin
   inférieur gauche coupés, bordure fine, léger fond distinct du corps de
   page. `clip-path` seul couperait aussi la bordure de façon disgracieuse
   sur certains navigateurs — on double avec un ::before de même forme,
   légèrement plus grand, posé derrière comme "cadre". */
#auth-section,
#game-section,
#units-table {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--accent-dim);
  clip-path: polygon(
    0 0,
    calc(100% - 1.2rem) 0,
    100% 1.2rem,
    100% 100%,
    1.2rem 100%,
    0 calc(100% - 1.2rem)
  );
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

#units-table {
  padding: 0;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

/* Repères d'angle façon réticule de visée, en haut-gauche et bas-droite —
   purement décoratif, un clin d'œil au HUD sans copier un design précis. */
#auth-section::before,
#game-section::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 0.9rem;
  height: 0.9rem;
  border-top: 2px solid var(--warn);
  border-left: 2px solid var(--warn);
}

#auth-section::after,
#game-section::after {
  content: "";
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 0.9rem;
  height: 0.9rem;
  border-bottom: 2px solid var(--warn);
  border-right: 2px solid var(--warn);
}

.status {
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--text-dim);
  background: var(--bg-panel);
  font-family: var(--mono);
  font-size: 0.9rem;
}

.status.error {
  border-left-color: var(--error);
  color: var(--error);
}

.status.error::before {
  content: "[ ALERTE ] ";
  font-weight: bold;
}

.status.success {
  border-left-color: var(--success);
  color: var(--success);
}

.status.success::before {
  content: "[ OK ] ";
  font-weight: bold;
}

form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 22rem;
}

label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

input,
select {
  font-family: var(--mono);
  font-size: 0.95rem;
  background: var(--bg);
  border: 1px solid var(--accent-dim);
  color: var(--text);
  padding: 0.5rem 0.6rem;
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

button {
  font-family: var(--mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.6rem 1rem;
  cursor: pointer;
  align-self: flex-start;
  transition:
    background-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}

button:hover {
  background: var(--accent);
  color: var(--bg);
  box-shadow: 0 0 12px rgb(77 216 230 / 50%);
}

#logout-button {
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-color: var(--warn);
  color: var(--warn);
}

#logout-button:hover {
  background: var(--warn);
  color: var(--bg);
  box-shadow: 0 0 12px rgb(255 180 84 / 50%);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--mono);
  font-size: 0.9rem;
}

th,
td {
  border-bottom: 1px solid var(--accent-dim);
  padding: 0.6rem 1rem;
  text-align: left;
}

th {
  color: var(--warn);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--warn);
}

tbody tr:hover {
  background: rgb(77 216 230 / 6%);
}

strong {
  color: var(--accent);
}