/* L'arène — la page du hub. Aucun cadre, aucune dépendance : du CSS et rien d'autre,
   comme partout ailleurs dans ce dépôt. Les couleurs suivent celles de l'accueil. */

:root {
  --fond: #15110d;
  --panneau: #201a13;
  --trait: #3a2f22;
  --texte: #e8d9c0;
  --doux: #a4917a;
  --or: #d1a05f;
  --alerte: #d4744a;
  --bon: #79b36a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 4rem;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.55 system-ui, sans-serif;
}

.bandeau {
  padding: 2rem 2rem 1.2rem;
  border-bottom: 1px solid var(--trait);
}
.marque img { width: 170px; height: auto; display: block; margin-bottom: 1rem; }
h1 { margin: 0; font-size: 1.7rem; letter-spacing: .02em; }
.sous-titre { margin: .3rem 0 0; color: var(--doux); }

main { padding: 1.5rem 2rem; max-width: 1400px; }

.panneau {
  background: var(--panneau);
  border: 1px solid var(--trait);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.4rem;
}
h2 { margin: 0 0 .6rem; font-size: 1.15rem; color: var(--or); }
h3 { margin: 1.2rem 0 .4rem; font-size: .95rem; color: var(--or); }
.aide { color: var(--doux); font-size: .88rem; margin: .2rem 0 .9rem; }
code { background: #100d0a; padding: .08em .35em; border-radius: 3px; font-size: .9em; }

.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.liste li.vide { color: var(--doux); font-style: italic; }
.liste button {
  width: 100%; text-align: left; cursor: pointer;
  background: #2a2118; color: var(--texte);
  border: 1px solid var(--trait); border-radius: 6px;
  padding: .6rem .8rem; font: inherit;
}
.liste button:hover { border-color: var(--or); }
.liste .meta { color: var(--doux); font-size: .85rem; }
.liste .anormale { color: var(--alerte); }

.entete-partie { display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline; justify-content: space-between; }
.commandes { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.commandes button, .commandes select {
  background: #2a2118; color: var(--texte); border: 1px solid var(--trait);
  border-radius: 5px; padding: .35rem .7rem; font: inherit; cursor: pointer;
}
.commandes label { color: var(--doux); font-size: .85rem; display: flex; gap: .35rem; align-items: center; }

.curseur { width: 100%; margin: .8rem 0; accent-color: var(--or); }

.plateau { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: flex-start; }
canvas {
  background: #0b0906; border: 1px solid var(--trait); border-radius: 4px;
  image-rendering: pixelated; max-width: 100%; height: auto;
}
.cote { flex: 1 1 320px; min-width: 300px; }

.horloge { font-size: 1.3rem; font-variant-numeric: tabular-nums; margin-bottom: .8rem; }
.joueurs { width: 100%; border-collapse: collapse; font-size: .88rem; }
.joueurs th, .joueurs td { text-align: left; padding: .28rem .4rem; border-bottom: 1px solid var(--trait); }
.joueurs th { color: var(--doux); font-weight: 500; }
.joueurs .pastille { display: inline-block; width: .7em; height: .7em; border-radius: 2px; margin-right: .4em; }
.joueurs tr.mort td { opacity: .45; text-decoration: line-through; }

.verdict { margin: .9rem 0; font-size: .95rem; }
.hachage { font-family: ui-monospace, monospace; font-size: .85rem; }
.hachage.ok { color: var(--bon); }
.hachage.ko { color: var(--alerte); }

.anomalies { list-style: none; margin: 0; padding: 0; font-size: .85rem; }
.anomalies li { padding: .35rem 0; border-bottom: 1px solid var(--trait); color: var(--alerte); }
.anomalies li.vide { color: var(--doux); font-style: italic; }
.anomalies .code { font-family: ui-monospace, monospace; color: var(--or); }