/* ============================================================
   Esportdle — feuille de style
   ============================================================ */

:root {
  --bg: #0b0e17;
  --bg-soft: #121728;
  --panel: rgba(23, 29, 48, 0.72);
  --panel-border: rgba(120, 140, 200, 0.16);
  --text: #eef1f8;
  --text-dim: #97a1bd;
  --accent: #6c5ce7;
  --accent-2: #00d1ff;

  --good: #1d9e5e;
  --good-border: #2ee08b;
  --partial: #b07d12;
  --partial-border: #f5c451;
  --bad: #b23446;
  --bad-border: #ff6b81;

  --radius: 14px;
  --cell-min: 96px;
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);

  color-scheme: dark;
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit primer sur les `display` posés par les composants.
   Sans cette règle, `.view`, `.result-panel` et `.legend-item` — qui déclarent
   un `display` — restent affichés alors que le JS les a marqués `hidden`. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  padding: 0 clamp(0.75rem, 3vw, 2rem) 3rem;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Halo décoratif en arrière-plan */
.glow {
  position: fixed;
  inset: -30% -10% auto -10%;
  height: 60vh;
  background:
    radial-gradient(45% 60% at 25% 40%, rgba(108, 92, 231, 0.35), transparent 70%),
    radial-gradient(40% 55% at 75% 30%, rgba(0, 209, 255, 0.22), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

.site-header,
.site-main,
.site-footer {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin-inline: auto;
}

/* ------------------------------ En-tête ------------------------------ */

.site-header {
  text-align: center;
  padding: clamp(1.75rem, 5vw, 3rem) 0 1.5rem;
}

.logo {
  margin: 0;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.logo span {
  background: linear-gradient(100deg, var(--accent) 10%, var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.tagline {
  margin: 0.4rem 0 0;
  color: var(--text-dim);
  font-size: clamp(0.9rem, 2.5vw, 1.05rem);
}

/* Le bloc ouvre le panneau de jeu : il lui faut de l'air en dessous, pas
   au-dessus (le padding du panneau s'en charge). */
.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
}

.stat {
  min-width: 108px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel);
}

.stat dt {
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.stat dd {
  margin: 0.15rem 0 0;
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ Panneaux ------------------------------ */

/* --------------------------- Barre de profil --------------------------- */

.profile-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.level-badge {
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  background: linear-gradient(100deg, var(--accent), #8b7bff);
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

.level-badge b { font-size: 1rem; }

.xp-track {
  position: relative;
  flex: 1 1 240px;
  max-width: 380px;
  height: 26px;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(8, 11, 20, 0.75);
  overflow: hidden;
}

.xp-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.xp-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.pill {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--panel);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ------------------------------- Onglets ------------------------------- */

.tabs {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
}

.tab {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text-dim);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.07); }

.tab.is-active {
  color: var(--text);
  border-color: transparent;
  background: linear-gradient(100deg, var(--accent), #8b7bff);
  box-shadow: 0 10px 24px -16px var(--accent);
}

.site-main {
  display: grid;
  gap: 1.25rem;
}

/* Chaque onglet est un élément de grille : min-width:0 pour que les tableaux
   larges défilent à l'intérieur au lieu d'élargir la page. */
.view {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.panel {
  /* Élément de grille : sans min-width:0, le plateau large déborderait la page
     au lieu de déclencher le défilement interne de .board-scroll. */
  min-width: 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  background: var(--panel);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
}

/* `backdrop-filter` crée un contexte d'empilement : tout ce qui dépasse d'un
   panneau reste prisonnier de sa boîte, et le panneau suivant, qui en crée un
   lui aussi, se peint par-dessus. C'est ce qui faisait passer la liste
   d'autocomplétion SOUS la légende du plateau dès qu'elle dépassait. Un
   z-index sur le panneau de saisie remonte son contexte entier au-dessus des
   suivants ; ils ne se chevauchent nulle part ailleurs. */
.search-panel {
  position: relative;
  z-index: 2;
}

/* --------------------------- Barre de saisie --------------------------- */

.search-wrap {
  position: relative;
  display: flex;
  gap: 0.6rem;
}

#guess-input,
#duel-input {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--panel-border);
  border-radius: 11px;
  background: rgba(8, 11, 20, 0.75);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#guess-input::placeholder,
#duel-input::placeholder { color: #6b7593; }

#guess-input:focus,
#duel-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.28);
}

.btn {
  padding: 0.85rem 1.25rem;
  border: 1px solid transparent;
  border-radius: 11px;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s, filter 0.15s, background 0.15s;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: linear-gradient(100deg, var(--accent), #8b7bff);
  box-shadow: 0 10px 24px -14px var(--accent);
}

.btn-primary:hover { filter: brightness(1.12); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--panel-border);
  padding: 0.55rem 0.95rem;
  font-size: 0.9rem;
}

.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

.btn-danger { color: #ff9aa8; }
.btn-danger:hover { background: rgba(255, 107, 129, 0.14); }

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* --------------------------- Autocomplétion --------------------------- */

.suggestions {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 288px;
  overflow-y: auto;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: #141a2c;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.95);
}

.suggestions li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
}

.suggestions li:hover,
.suggestions li[aria-selected="true"] {
  background: rgba(108, 92, 231, 0.28);
}

.suggestions .sug-name { font-weight: 600; }

.suggestions .sug-meta {
  color: var(--text-dim);
  font-size: 0.8rem;
  text-align: right;
}

/* ------------------------- Retours & barre outils ------------------------- */

.feedback {
  min-height: 1.25rem;
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  color: var(--bad-border);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--panel-border);
}

.remaining {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 0.82rem;
}

/* ------------------------------- Légende ------------------------------- */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1rem;
  color: var(--text-dim);
  font-size: 0.82rem;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.chip {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 5px;
  font-size: 0.7rem;
  font-style: normal;
}

.chip-good { background: var(--good); }
.chip-partial { background: var(--partial); }
.chip-bad { background: var(--bad); }
.chip-arrow { background: var(--bad); color: #fff; }

.chip-unknown {
  background: var(--bad);
  color: #fff;
  border: 1px dashed var(--bad-border);
  font-weight: 700;
}

/* ------------------------------- Plateau ------------------------------- */

.board-scroll {
  overflow-x: auto;
  padding-bottom: 0.4rem;
}

/* 8 colonnes × --cell-min + les gouttières : en dessous, .board-scroll défile. */
.board { min-width: 818px; }

.board-head,
.guess-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(var(--cell-min), 1fr));
  gap: 0.4rem;
}

.board-head {
  margin-bottom: 0.5rem;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.board-head span { padding: 0 0.25rem; text-align: center; }

.board-body {
  display: grid;
  gap: 0.4rem;
}

.cell {
  position: relative;
  display: grid;
  place-content: center;
  gap: 0.15rem;
  min-height: 74px;
  padding: 0.5rem 0.4rem;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
  animation: reveal 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

.cell-good {
  background: var(--good);
  border-color: var(--good-border);
  color: #f2fff8;
}

/* Correspondance partielle : au moins un rôle en commun, mais pas les mêmes. */
.cell-partial {
  background: var(--partial);
  border-color: var(--partial-border);
  color: #fffaf0;
}

.cell-bad {
  background: var(--bad);
  border-color: var(--bad-border);
  color: #fff1f3;
}

/* Donnée absente de la fiche : la case reste rouge (elle ne peut pas être
   déclarée identique) mais s'affiche en hachuré pour la distinguer d'un vrai
   « critère différent ». */
.cell-unknown {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.12) 0 6px,
    transparent 6px 12px
  );
  border-style: dashed;
}

.cell-unknown .val { opacity: 0.85; }

.cell-name { font-weight: 800; font-size: 0.92rem; }

.cell .arrow {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.9;
}

.cell-label { display: none; }

@keyframes reveal {
  from { opacity: 0; transform: translateY(-10px) scale(0.9); }
  to { opacity: 1; transform: none; }
}

.empty-state {
  margin: 0.75rem 0 0;
  color: var(--text-dim);
  text-align: center;
  font-size: 0.9rem;
}

/* ------------------------- Panneau de résultat ------------------------- */

.result-panel {
  display: grid;
  gap: 1rem;
  border-color: rgba(46, 224, 139, 0.35);
  background: linear-gradient(180deg, rgba(29, 158, 94, 0.16), var(--panel));
  text-align: center;
}

.result-panel.is-loss {
  border-color: rgba(255, 107, 129, 0.35);
  background: linear-gradient(180deg, rgba(178, 52, 70, 0.16), var(--panel));
}

.result-title {
  margin: 0;
  font-size: clamp(1.3rem, 4vw, 1.8rem);
  font-weight: 800;
}

.result-sub { margin: 0; color: var(--text-dim); }

.result-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.5rem;
  margin-inline: auto;
  padding: 0.9rem;
  max-width: 780px;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(8, 11, 20, 0.5);
  text-align: left;
}

.result-card div {
  display: grid;
  gap: 0.1rem;
}

.result-card dt,
.result-card .k {
  color: var(--text-dim);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.result-card .v { font-weight: 600; font-size: 0.92rem; }

.result-actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ------------------------------- Cartes ------------------------------- */

.section-title {
  margin: 0;
  font-size: clamp(1.1rem, 3vw, 1.35rem);
}

.completion { margin-bottom: 1.25rem; }

.completion-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}

.completion-count {
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.completion-track { max-width: none; }

.rarity-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.rarity-chip {
  padding: 0.25rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  opacity: 0.85;
}

.rarity-chip.is-complete { background: rgba(46, 224, 139, 0.16); }

/* Couleurs de rareté, partagées par les puces et les cartes. */
.r-commune { --rar: #8b98b8; }
.r-rare { --rar: #4aa3ff; }
.r-epique { --rar: #b06cff; }
.r-legendaire { --rar: #ffb422; }

.rarity-chip { color: var(--rar); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.85rem;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid color-mix(in srgb, var(--rar) 55%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rar) 16%, transparent), transparent 55%),
    #141a2c;
  overflow: hidden;
  box-shadow: 0 10px 26px -18px var(--rar);
  transition: transform 0.15s, box-shadow 0.15s;
}

.card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -16px var(--rar); }

.card-art {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  background: hsl(var(--hue, 260) 40% 22%);
  overflow: hidden;
}

.card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.card-art-fallback {
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  background:
    radial-gradient(circle at 30% 25%, hsl(var(--hue, 260) 55% 34%), hsl(var(--hue, 260) 45% 18%));
}

.card-body { padding: 0.6rem 0.7rem 0.5rem; }

.card-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.card-meta {
  margin: 0.15rem 0 0;
  color: var(--text-dim);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.card-rarity {
  padding: 0.3rem 0.7rem 0.55rem;
  color: var(--rar);
  font-size: 0.66rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.card-count,
.card-new {
  position: absolute;
  top: 0.5rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 800;
}

.card-count {
  right: 0.5rem;
  padding: 0.15rem 0.45rem;
  background: rgba(8, 11, 20, 0.85);
  border: 1px solid var(--panel-border);
}

.card-new {
  left: 0.5rem;
  padding: 0.15rem 0.5rem;
  background: var(--good);
  color: #f2fff8;
  letter-spacing: 0.06em;
}

/* Carte non obtenue : silhouette neutre, aucun spoiler. */
.card.is-locked {
  border-style: dashed;
  border-color: rgba(120, 140, 200, 0.3);
  background: rgba(8, 11, 20, 0.4);
  box-shadow: none;
}

.card.is-locked .card-art {
  background: rgba(255, 255, 255, 0.03);
  color: #4d566f;
  font-size: 2.6rem;
}

.card.is-locked .card-name,
.card.is-locked .card-meta { color: #626d8a; }

.card-craft {
  margin: 0 0.7rem 0.7rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}

.card-craft:hover:not(:disabled) { background: rgba(108, 92, 231, 0.3); }
.card-craft:disabled { opacity: 0.4; cursor: not-allowed; }

.select,
.checkbox {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: rgba(8, 11, 20, 0.75);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  white-space: nowrap;
}

/* -------------------------------- Packs -------------------------------- */

.packs-panel { text-align: center; }

.packs-intro { margin: 0.5rem 0 0; color: var(--text-dim); }

.packs-hint {
  margin: 0.75rem auto 0;
  max-width: 58ch;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.pack-visual { margin: 1.5rem 0 0.5rem; }

.pack-card {
  position: relative;
  width: 168px;
  height: 236px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background:
    linear-gradient(150deg, var(--accent) 5%, #2b1c6b 45%, var(--accent-2) 130%);
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 24px 44px -26px var(--accent);
  transition: transform 0.15s, filter 0.15s;
}

.pack-card:hover:not(:disabled) { transform: translateY(-4px) scale(1.02); filter: brightness(1.1); }
.pack-card:disabled { opacity: 0.45; cursor: not-allowed; }

.pack-shine {
  position: absolute;
  inset: -40% -120%;
  background: linear-gradient(75deg, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%);
  animation: shine 3.5s ease-in-out infinite;
}

@keyframes shine {
  0%, 65% { transform: translateX(-40%); }
  100% { transform: translateX(40%); }
}

.pack-label { position: relative; }

.pack-count {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  min-width: 1.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  background: rgba(8, 11, 20, 0.8);
  font-size: 0.85rem;
}

/* --------------------------- Codes promotionnels --------------------------- */

.code-form {
  max-width: 420px;
  margin: 1.5rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--panel-border);
}

.code-title {
  margin: 0 0 0.6rem;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.code-row { display: flex; gap: 0.5rem; }

#code-input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: rgba(8, 11, 20, 0.75);
  color: var(--text);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

#code-input::placeholder {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: #6b7593;
}

#code-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.28);
}

.code-feedback {
  min-height: 1.4rem;
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  font-weight: 600;
}

.code-feedback.is-error { color: var(--bad-border); }
.code-feedback.is-ok { color: var(--good-border); }

.pack-result { margin-top: 1.5rem; }

.card-grid-reveal .card {
  animation: reveal 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}

.pack-dust {
  margin: 1rem 0;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ------------------------- Récompense de partie ------------------------- */

.reward {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.reward span {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

.reward-xp { background: rgba(108, 92, 231, 0.35); border: 1px solid var(--accent); }
.reward-level { background: rgba(0, 209, 255, 0.22); border: 1px solid var(--accent-2); }
.reward-pack { background: rgba(255, 180, 34, 0.22); border: 1px solid #ffb422; }

.tab-badge {
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(8, 11, 20, 0.45);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.linklike {
  border: 0;
  background: none;
  padding: 0;
  color: var(--text-dim);
  font: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.linklike:hover { color: var(--bad-border); }

/* ------------------- Onglet « Base de données » : écran de code ------------------- */

.lock-panel { text-align: center; }

.lock-title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.15rem, 3.5vw, 1.5rem);
}

.lock-text {
  max-width: 52ch;
  margin: 0 auto 1.1rem;
  color: var(--text-dim);
  font-size: 0.92rem;
}

.lock-row {
  display: flex;
  gap: 0.6rem;
  max-width: 420px;
  margin-inline: auto;
}

#db-code {
  flex: 1;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--panel-border);
  border-radius: 11px;
  background: rgba(8, 11, 20, 0.75);
  color: var(--text);
  font: inherit;
  letter-spacing: 0.18em;
  text-align: center;
}

#db-code:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.28);
}

#db-feedback { text-align: center; }

/* ------------------- Onglet « Base de données » : tableau ------------------- */

.db-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.db-search { flex: 1 1 220px; min-width: 0; }

#db-filter {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: rgba(8, 11, 20, 0.75);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}

#db-filter:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.28);
}

.db-count {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.db-columns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin-bottom: 0.75rem;
}

.db-columns-title {
  color: var(--text-dim);
  font-size: 0.8rem;
  white-space: nowrap;
}

.db-columns-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1 1 auto;
}

/* La case native est masquée : c'est la pastille qui porte l'état visuel. */
.db-col-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(8, 11, 20, 0.6);
  color: var(--text-dim);
  font-size: 0.78rem;
  cursor: pointer;
  user-select: none;
}

.db-col-toggle:hover { border-color: var(--accent); }

.db-col-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.db-col-toggle::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--panel-border);
}

.db-col-toggle.is-on {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(108, 92, 231, 0.18);
}

.db-col-toggle.is-on::before { background: var(--accent-2); }

.db-col-toggle.is-locked {
  cursor: default;
  opacity: 0.75;
}

.db-col-toggle:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-small {
  padding: 0.3rem 0.7rem;
  font-size: 0.78rem;
}

.db-gaps {
  margin: 0 0 0.85rem;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.db-scroll {
  overflow-x: auto;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
}

.db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  white-space: nowrap;
}

.db-th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.6rem 0.7rem;
  background: #182036;
  color: var(--text-dim);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.db-th:hover { color: var(--text); }
.db-th.is-sorted { color: var(--accent-2); }

.db-th:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.db-table td {
  padding: 0.55rem 0.7rem;
  border-top: 1px solid rgba(120, 140, 200, 0.12);
}

.db-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.025); }
.db-table tbody tr:hover { background: rgba(108, 92, 231, 0.14); }

.db-name { font-weight: 700; color: var(--text); }

.db-missing {
  color: #6b7593;
  text-align: center;
}

.db-note {
  margin: 0.85rem 0 0;
  color: var(--text-dim);
  font-size: 0.78rem;
}

.db-note code {
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
}

.db-note .db-missing { display: inline; }

/* ------------------------------- Pied ------------------------------- */

.site-footer {
  margin-top: 2rem;
  color: var(--text-dim);
  font-size: 0.78rem;
  text-align: center;
}

.site-footer code {
  padding: 0.1rem 0.35rem;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.95em;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ============================== Responsive ==============================
   Sous 760px, chaque tentative devient une carte « libellé → valeur »
   plutôt qu'une ligne de tableau à faire défiler horizontalement.        */

@media (max-width: 760px) {
  .board-scroll { overflow-x: visible; }
  .board { min-width: 0; }
  .board-head { display: none; }

  .board-body { gap: 1rem; }

  .guess-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    padding: 0.5rem;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: rgba(8, 11, 20, 0.4);
  }

  /* La case du pseudo occupe toute la largeur, et met le portrait à côté du
     nom plutôt qu’au-dessus : sinon la carte gagne une ligne pour rien. */
  .guess-row .cell:first-child {
    grid-column: 1 / -1;
    grid-template-columns: auto 1fr;
    column-gap: 0.55rem;
  }

  .guess-row .cell:first-child .avatar {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .guess-row .cell:first-child .val {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
  }

  .cell {
    min-height: 0;
    padding: 0.5rem 0.6rem;
    text-align: left;
    place-content: stretch;
    grid-template-columns: 1fr auto;
    align-items: center;
  }

  .cell-label {
    display: block;
    grid-column: 1 / -1;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.75;
  }

  .cell .val { grid-column: 1; }
  .cell .arrow { grid-column: 2; }

  .search-wrap { flex-direction: column; }
  .btn-primary { width: 100%; }
  .remaining { margin-left: 0; width: 100%; }

  .tabs { flex-wrap: wrap; }
  .lock-row { flex-direction: column; }
  .db-toolbar > .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------------------------- Crédits photo -------------------------------- */

/* Dans l'onglet Base de données, sous le tableau : c'est la page de travail
   sur les données, pas l'écran de jeu. */
.credits {
  margin: 0.9rem 0 0;
  max-width: 80ch;
  text-align: left;
  font-size: 0.78rem;
  color: var(--text-dim);
}

.credits-summary {
  cursor: pointer;
  padding: 0.3rem 0;
  font-weight: 600;
}

.credits-summary:hover { color: var(--text); }

.credits-intro { margin: 0.5rem 0 0.7rem; line-height: 1.5; }

.credits-list {
  /* La liste peut compter plusieurs centaines d'entrées : on la borne. */
  max-height: 22rem;
  overflow-y: auto;
  margin: 0;
  padding: 0 0 0 1.1rem;
  line-height: 1.5;
}

.credits-list li { margin-bottom: 0.45rem; }

.credits-note {
  display: block;
  font-size: 0.72rem;
  opacity: 0.7;
}

/* ----------------------------- Portraits ---------------------------------- */

/* Un portrait carré, arrondi, qui ne déforme jamais la photo (object-fit) et
   retombe sur les initiales quand il n'y a pas d'image — 21 joueurs du
   catalogue n'en ont pas sur Liquipedia. */
.avatar {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: hsl(var(--hue, 260) 40% 24%);
  flex: none;
  line-height: 1;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Les photos sont cadrées en pied : on privilégie le haut, donc le visage. */
  object-position: 50% 22%;
  display: block;
}

.avatar-fallback {
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  background:
    radial-gradient(circle at 30% 25%, hsl(var(--hue, 260) 55% 36%), hsl(var(--hue, 260) 45% 20%));
}

/* Sur le plateau : petit, au-dessus du pseudo. */
.avatar-sm {
  width: 30px;
  height: 30px;
  margin: 0 auto 0.1rem;
  font-size: 0.7rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

/* À l'écran de fin : le portrait de la réponse. */
.avatar-lg {
  width: 92px;
  height: 92px;
  margin: 0 auto 0.6rem;
  font-size: 2rem;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18), 0 12px 26px -14px #000;
}

/* Sur une carte de collection : occupe toute la vignette, sans arrondi propre,
   le cadre de la carte s'en charge. */
.avatar-card {
  width: 100%;
  height: 100%;
  border-radius: 0;
  font-size: 2.4rem;
}

@media (max-width: 720px) {
  .avatar-sm { width: 24px; height: 24px; font-size: 0.62rem; }
  .avatar-lg { width: 74px; height: 74px; font-size: 1.6rem; }
}

/* ------------------------- Filtres de tirage ------------------------------ */

.filters {
  margin: 0 0 0.85rem;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(8, 11, 20, 0.45);
  font-size: 0.82rem;
}

.filters-summary {
  cursor: pointer;
  padding: 0.55rem 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filters-summary:hover { color: var(--accent-2); }

.filters-badge {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.filters-intro {
  margin: 0 0.8rem 0.6rem;
  color: var(--text-dim);
  font-size: 0.76rem;
  line-height: 1.5;
}

.filters-groups {
  display: grid;
  gap: 0.7rem;
  padding: 0 0.8rem;
}

/* Chaque axe est un dépliant : fermé, il ne montre que son nom et le nombre
   de valeurs actives. Équipe en compte 51, les dérouler d’emblée noierait le
   reste du panneau. */
.filters-group {
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: rgba(8, 11, 20, 0.35);
}

.filters-group[open] { background: rgba(8, 11, 20, 0.55); }

.filters-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.45rem 0.6rem;
  color: var(--text-dim);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.filters-group-title:hover { color: var(--text); }

.filters-group-nom { font-weight: 700; }

.filters-group-n {
  text-transform: none;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* Un axe partiellement décoché se repère sans avoir à l’ouvrir. */
.filters-group-n.is-partiel { color: var(--accent-2); opacity: 1; }

.filters-group .filters-all { margin-left: auto; }

.filters-all {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.74rem;
}

.filters-chips {
  padding: 0 0.6rem 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  /* L'axe Équipe compte une cinquantaine de valeurs : on borne la hauteur
     plutôt que de repousser le plateau hors de l'écran. */
  max-height: 8.5rem;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(8, 11, 20, 0.6);
  color: var(--text-dim);
  font-size: 0.75rem;
  cursor: pointer;
  user-select: none;
}

.filter-chip:hover { border-color: var(--accent); }

.filter-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.filter-chip::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--panel-border);
  flex: none;
}

.filter-chip.is-on {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(108, 92, 231, 0.18);
}

.filter-chip.is-on::before { background: var(--accent-2); }

.filter-chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.filter-chip-n {
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
}

.filters-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem 0.8rem;
}

.filters-count {
  color: var(--text-dim);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

.filters-count.is-empty { color: var(--partial-border, #e0a030); }

/* ---------------------------- Modes de jeu -------------------------------- */

/* `is-hidden` plutôt que l'attribut `hidden` : les panneaux du jeu sont masqués
   par l'écran de choix, mais l'attribut sert déjà au panneau de résultat, qui a
   sa propre logique. Deux mécanismes sur le même élément se marcheraient dessus. */
.is-hidden { display: none !important; }

.modes-panel { padding: 1.1rem 1.2rem 1.3rem; }

.modes-titre {
  margin: 0 0 0.3rem;
  font-size: 1.15rem;
}

.modes-intro {
  margin: 0 0 1.1rem;
  color: var(--text-dim);
  font-size: 0.84rem;
  line-height: 1.5;
}

.modes-groupe + .modes-groupe { margin-top: 1.1rem; }

.modes-groupe-titre {
  margin: 0 0 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-dim);
}

.modes-groupe-aide {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  opacity: 0.75;
}

.modes-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.55rem;
}

.mode-carte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(8, 11, 20, 0.55);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s, border-color 0.12s, background 0.12s;
}

.mode-carte:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  background: rgba(108, 92, 231, 0.16);
}

.mode-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Le mode maison : mis en avant sans crier. */
.mode-carte.is-vedette {
  border-color: var(--accent);
  background: linear-gradient(180deg, rgba(108, 92, 231, 0.24), rgba(8, 11, 20, 0.55));
}

.mode-carte-nom { font-weight: 700; font-size: 0.95rem; }

.mode-carte-n {
  color: var(--text-dim);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

/* Barre rappelant le mode en cours, une fois le jeu lancé. */
.mode-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  background: rgba(8, 11, 20, 0.45);
  font-size: 0.82rem;
}

.mode-bar-label {
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.mode-bar-n {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.mode-bar > .btn { margin-left: auto; }

@media (max-width: 760px) {
  .modes-grille { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .mode-bar > .btn { margin-left: 0; width: 100%; }
}

/* ------------------ Réglage croisé jeu × région (discret) ------------------ */

.croisement { margin: 0.6rem 0.8rem 0; }

/* Une ligne de texte, pas un bouton : elle doit se remarquer si on la cherche,
   et se laisser oublier sinon. */
.croisement-lien {
  cursor: pointer;
  display: inline-block;
  padding: 0.2rem 0;
  color: var(--text-dim);
  font-size: 0.74rem;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.croisement-lien:hover { color: var(--accent-2); }

.croisement-aide {
  margin: 0.4rem 0 0.6rem;
  color: var(--text-dim);
  font-size: 0.74rem;
  line-height: 1.5;
}

.croisement-grille { overflow-x: auto; }

.croisement-table {
  border-collapse: collapse;
  font-size: 0.74rem;
}

.croisement-table th {
  padding: 0.25rem 0.5rem;
  color: var(--text-dim);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.croisement-table thead th { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; }
.croisement-table td { padding: 0.15rem 0.2rem; text-align: center; }

.croisement-case {
  min-width: 2.6rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: rgba(8, 11, 20, 0.6);
  color: var(--text-dim);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.croisement-case:hover { border-color: var(--accent); }
.croisement-case:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.croisement-case.is-on {
  border-color: var(--accent);
  background: rgba(108, 92, 231, 0.2);
  color: var(--text);
}

/* Case retirée : barrée, pour qu'on lise l'état sans compter les couleurs. */
.croisement-case:not(.is-on) { text-decoration: line-through; opacity: 0.55; }

.croisement-vide { color: var(--text-dim); opacity: 0.35; }

/* ------------------------------ Logos ------------------------------------- */

/* Sur une carte de mode : à gauche du nom, taille fixe pour que les cartes
   restent alignées quelles que soient les proportions du logo. */
.mode-carte {
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
}

.mode-carte-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: none;
}

/* Repli des modes sans logo — « Tout le catalogue », « Personnalisé ». */
.mode-carte-puce {
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  font-size: 1rem;
}

.mode-carte-texte {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.mode-bar-logo { display: inline-flex; }

.mode-bar-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

/* Filigrane dans les cases Jeu et Équipe du plateau.
   Volontairement discret : la couleur de la case porte l'information, le logo
   n'est qu'un repère. Un fond trop présent rendrait le texte illisible. */
.cell-filigrane::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Le logo sert de MASQUE, pas d’image : on n’en garde que la silhouette,
     peinte en blanc. Posé tel quel, un logo sombre disparaît sur une case
     rouge et un logo blanc sur une case verte ; la silhouette, elle, se lit
     partout et de la même façon. */
  background-color: #fff;
  -webkit-mask-image: var(--filigrane);
  mask-image: var(--filigrane);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 46px auto;
  mask-size: 46px auto;
  opacity: 0.22;
  pointer-events: none;
  border-radius: inherit;
}

.cell-filigrane > * { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .cell-filigrane::after {
    -webkit-mask-position: right 0.5rem center;
    mask-position: right 0.5rem center;
    -webkit-mask-size: 30px auto;
    mask-size: 30px auto;
  }
  .mode-carte-logo { width: 28px; height: 28px; }
}

/* Le filigrane ne doit pas survivre à un mode « contraste élevé ». */
@media (prefers-contrast: more) {
  .cell-filigrane::after { display: none; }
}


/* --------------------------- Page « Mentions légales » --------------------------- */
/* Une page de texte, pas un écran de jeu : on borne la ligne à une longueur
   lisible plutôt que d'étirer les paragraphes sur toute la largeur. */

.legal {
  max-width: 72ch;
  margin: 1.5rem auto 0;
  line-height: 1.65;
}

.legal h2 {
  margin: 1.8rem 0 0.6rem;
  color: var(--accent-2);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.legal h2:first-of-type { margin-top: 0.5rem; }

.legal p, .legal li { color: var(--text-dim); font-size: 0.9rem; }
.legal strong { color: var(--text); }
.legal ul { margin: 0.5rem 0 0.9rem; padding-left: 1.2rem; }
.legal li { margin-bottom: 0.25rem; }

.legal a { color: var(--accent-2); }

.legal-maj {
  margin: 0 0 1.4rem;
  font-size: 0.78rem !important;
  opacity: 0.75;
}

.legal-retour {
  margin-top: 2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--panel-border);
}

.site-header .logo a { color: inherit; text-decoration: none; }

/* ------------------------------ Mode Duel ------------------------------ */

.duel-titre { margin: 0 0 0.4rem; font-size: 1.15rem; }

.duel-intro {
  margin: 0 0 1.4rem;
  max-width: 60ch;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.duel-choix {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.duel-carte {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(8, 11, 20, 0.45);
}

.duel-carte h3 { margin: 0; font-size: 0.95rem; }
.duel-aide { margin: 0; color: var(--text-dim); font-size: 0.8rem; min-height: 2.4em; }

.duel-champ {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.duel-champ input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--panel-border);
  border-radius: 9px;
  background: rgba(8, 11, 20, 0.75);
  color: var(--text);
  font: inherit;
  text-transform: none;
  letter-spacing: normal;
}

.duel-champ input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.28);
}

#duel-code { text-transform: uppercase; letter-spacing: 0.22em; font-weight: 700; }

.duel-erreur { margin: 1rem 0 0; min-height: 1.2rem; color: var(--partial-border); font-size: 0.85rem; }

/* --- Le salon --- */

.duel-bandeau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.duel-code-bloc { display: flex; align-items: center; gap: 0.6rem; }

.duel-code-label {
  color: var(--text-dim);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Le code se lit à voix haute à quelqu'un d'à côté : il doit être le plus
   gros élément de l'écran tant que la partie n'a pas commencé. */
.duel-code {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.duel-joueurs {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 0.9rem;
}

.duel-joueur {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--panel-border);
  border-radius: 11px;
  background: rgba(8, 11, 20, 0.4);
  transition: border-color 0.2s, background 0.2s;
}

/* Celui qui a la main est signalé par la couleur d'accent : à deux, savoir à
   qui c'est le tour prime sur tout le reste. */
.duel-joueur.a-la-main {
  border-color: var(--accent);
  background: rgba(108, 92, 231, 0.14);
}

.duel-joueur.est-moi .duel-pseudo::after {
  content: ' (toi)';
  color: var(--text-dim);
  font-weight: 400;
  font-size: 0.8em;
}

.duel-joueur.absent { opacity: 0.5; }

.duel-pseudo {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  border-radius: 5px;
  outline-offset: 2px;
}

.duel-pseudo[contenteditable="true"]:hover,
.duel-pseudo[contenteditable="true"]:focus {
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.duel-score {
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.duel-absent { color: var(--text-dim); font-size: 0.72rem; }

.duel-etat {
  margin: 0 0 0.9rem;
  min-height: 1.3rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.duel-form { position: relative; z-index: 2; }

.duel-fin {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--good-border);
  border-radius: 12px;
  background: rgba(29, 158, 94, 0.16);
  text-align: center;
}

.duel-fin.est-perdu {
  border-color: var(--bad-border);
  background: rgba(178, 52, 70, 0.16);
}

.duel-fin-titre { margin: 0 0 0.3rem; font-size: 1.05rem; font-weight: 700; }
.duel-fin-reponse { margin: 0 0 0.9rem; color: var(--text-dim); font-size: 0.88rem; }

/* Sur le plateau partagé, une bordure latérale dit d'un coup d'œil qui a
   proposé quoi — sans ajouter de colonne ni décaler l'alignement. */
.guess-row.duel-a-moi > .cell:first-child { box-shadow: inset 3px 0 0 var(--accent-2); }
.guess-row.duel-a-lui > .cell:first-child { box-shadow: inset 3px 0 0 var(--text-dim); }

@media (max-width: 560px) {
  .duel-joueurs { grid-template-columns: 1fr; }
  .duel-code { font-size: 1.3rem; }
}

/* --- Réglages de la partie, dans le salon --- */

.duel-reglages {
  margin-bottom: 1rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(8, 11, 20, 0.4);
}

.duel-reglages-titre {
  margin: 0 0 0.7rem;
  color: var(--text-dim);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Le duel réutilise les cartes du solo, en plus resserré : le panneau tient
   dans le salon sans repousser le plateau hors de l'écran. */
.duel-modes {
  margin-bottom: 0.9rem;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 0.3rem;
}

.duel-modes .modes-groupe { margin-bottom: 0.8rem; }
.duel-modes .modes-groupe-titre { font-size: 0.68rem; margin-bottom: 0.4rem; }
.duel-modes .modes-grille { gap: 0.4rem; }
.duel-modes .mode-carte { padding: 0.5rem 0.7rem; }
.duel-modes .mode-carte-logo { width: 26px; height: 26px; }
.duel-modes .mode-carte-nom { font-size: 0.85rem; }

/* La carte retenue pour le salon : c'est la règle en vigueur, elle doit se
   distinguer du simple survol. */
.mode-carte.is-choisi {
  border-color: var(--accent-2);
  background: rgba(0, 209, 255, 0.14);
}

.duel-champ-chrono { max-width: 180px; margin-bottom: 0.9rem; }

#duel-lancer { width: 100%; }
#duel-lancer:disabled { opacity: 0.45; cursor: not-allowed; }

.duel-reglages-lecture {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.duel-attente-hote {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.82rem;
}

@media (max-width: 560px) {
  .duel-reglages-grille { grid-template-columns: 1fr; }
}