/* ── Arrows : mode soirée ─────────────────────────────────────────
   Un seul téléphone posé entre les joueurs. Deux jeux :
   - le Duel, deux moitiés d'écran tournées chacune vers son joueur ;
   - le Relais, une scène qu'on se passe de main en main.
   Même palette que le reste d'Arrows (crème, brun, corail) : les jetons de
   style.css servent ici tels quels, seuls les jetons propres au mode soirée
   sont déclarés plus bas. */

:root {
  /* Le joueur 1 est corail, le joueur 2 brun. Le corail des TEXTES est le
     plus foncé de la charte : #b64b2b ne donne que 4,4:1 sur le crème, le
     survol 5,4:1. */
  --so-j1: var(--accent-deep);
  --so-j1-texte: var(--accent-deep-hover);
  --so-j2: var(--ink);
  --so-voile: rgba(243, 236, 223, 0.96);
  --so-gel: #dde8eb;
  --so-gel-bord: #6f8b95;
}

/* La parade `[hidden]` : toute règle qui pose un `display` dans ce fichier
   ne doit jamais défaire l'attribut. */
.so-screen [hidden] { display: none !important; }
.so-screen { background: var(--bg); }

/* La sonde des zones sûres : hors du flux, invisible, jamais cliquable. */
.so-sonde {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* ── Accueil du mode et réglages : défilent comme le menu ─────── */
#screen-soiree, #screen-duelreglages, #screen-relaisreglages { overflow-y: auto; }

.so-corps {
  width: min(500px, 100%);
  margin: 0 auto;
  padding: 6px 18px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.so-intro {
  margin: 0;
  color: var(--ink-2);
  font-size: .95rem;
  line-height: 1.5;
}
.so-note, .so-aide {
  margin: 0;
  color: var(--ink-2);
  font-size: .8rem;
  line-height: 1.45;
  text-align: center;
}

.so-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.so-jeu {
  width: 100%;
  border: none;
  text-align: left;
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 14px;
  row-gap: 3px;
  align-items: start;
  background: var(--card);
  color: var(--ink);
  border-radius: 18px;
  padding: 16px 18px;
  min-height: 44px;
  transition: transform .12s ease, background .15s ease;
}
.so-jeu:active { transform: scale(0.98); }
@media (hover: hover) { .so-jeu:hover { background: var(--bg-soft); } }
.so-jeu-icone {
  grid-row: 1 / span 3;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent-deep);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.so-jeu-nom { font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
.so-jeu-sous { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.so-jeu-texte { font-size: .88rem; line-height: 1.45; color: var(--ink-2); }

.so-reprise {
  width: 100%;
  border: 2px solid var(--accent-deep);
  background: var(--card);
  color: var(--ink);
  border-radius: 16px;
  padding: 14px 18px;
  min-height: 56px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.so-reprise-titre { font-weight: 700; font-size: 1rem; color: var(--accent-deep-hover); }
.so-reprise-sous { font-size: .84rem; color: var(--ink-2); }

/* ── Les choix : de vrais boutons radio, peints en pastilles ───── */
.so-groupe { border: 0; margin: 0; padding: 0; min-width: 0; }
.so-groupe legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.so-choix { display: grid; gap: 8px; }
.so-choix--2 { grid-template-columns: repeat(2, 1fr); }
.so-choix--3 { grid-template-columns: repeat(3, 1fr); }
.so-choix--4 { grid-template-columns: repeat(2, 1fr); }
.so-choix--5 { grid-template-columns: repeat(5, 1fr); }
.so-choix label { position: relative; display: block; min-width: 0; }
.so-choix input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.so-pastille {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 8px 6px;
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  transition: background .15s, color .15s;
}
.so-pastille small { font-size: .72rem; font-weight: 500; }
.so-choix input:checked + .so-pastille { background: var(--ink); color: var(--bg); }
.so-choix input:focus-visible + .so-pastille { outline: 3px solid var(--ink); outline-offset: 2px; }
/* Un palier que l'écran ne permet pas (le Duel plafonne seul sa grille) : grisé et
   dit tel quel dans la pastille, jamais caché. */
.so-choix input:disabled { cursor: not-allowed; }
.so-choix input:disabled + .so-pastille { opacity: .6; background: transparent; box-shadow: inset 0 0 0 1px var(--dot); }

/* Les prénoms du Relais */
.so-joueurs { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.so-joueur { display: grid; grid-template-columns: 28px 1fr 44px; gap: 8px; align-items: center; }
.so-joueur-rang {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  font-size: .8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.so-joueur input {
  width: 100%;
  min-height: 48px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
}
.so-retirer { background: transparent; }
.so-ajout { width: 100%; flex-direction: row; gap: 8px; }
.so-lancer { width: 100%; }

/* ── Les parties : tout l'écran, rien ne défile ──────────────── */
.so-partie { overflow: hidden; }
.pb-plateau {
  display: block;
  overflow: visible;
  touch-action: none;
  -webkit-user-select: none;
          user-select: none;
  -webkit-touch-callout: none;
}
.pb-point { fill: var(--dot); pointer-events: none; }

/* ═════════════════════════ DUEL ═════════════════════════════
   La grille de l'écran : une moitié, une bande de 44 px (le menu), l'autre
   moitié. En portrait, la moitié du haut est retournée de 180 degrés ; en
   paysage les moitiés sont à gauche et à droite, tournées de 90 degrés l'une
   vers l'autre. Le contenu d'une moitié (.duel-pane) est toujours dessiné
   « debout » : seul son conteneur sait de quel côté de la table il est. */
.duel {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr 44px 1fr;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.duel-moitie {
  --joueur: var(--so-j1);
  --joueur-texte: var(--so-j1-texte);
  position: relative;
  container-type: size;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.duel-moitie[data-joueur="1"] { --joueur: var(--so-j2); --joueur-texte: var(--so-j2); }
.duel-milieu {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
}

.duel-pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 8px 0;
}
.duel-moitie[data-joueur="1"] .duel-pane { transform: rotate(180deg); }

@media (orientation: landscape) {
  .duel {
    grid-template-rows: none;
    grid-template-columns: 1fr 44px 1fr;
  }
  .duel-pane {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 100cqh;
    height: 100cqw;
    transform: translate(-50%, -50%) rotate(-90deg);
  }
  .duel-moitie[data-joueur="1"] .duel-pane { transform: translate(-50%, -50%) rotate(90deg); }
}

/* La zone du plateau est un conteneur à part : le plateau y prend le plus
   grand carré possible, sans que le JavaScript mesure quoi que ce soit. */
.duel-zone {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s, filter .2s;
}
.duel-plateau { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }

/* L'en-tête est au bord du joueur : manches gagnées, nom, flèches restantes. */
.duel-tete {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 3px solid var(--joueur);
  padding: 0 2px;
  font-size: .82rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.duel-nom { flex: 1; text-align: center; font-weight: 700; color: var(--joueur-texte); }
.duel-pastilles { display: inline-flex; gap: 6px; min-width: 48px; }
.duel-pastille {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--joueur);
}
.duel-pastille.is-on { background: var(--joueur); }
.duel-reste { min-width: 48px; text-align: right; }

/* Collision : la grille du fautif est gelée. Elle reste visible, grisée :
   on a le droit de réfléchir, pas de toucher. */
.duel-moitie.is-gel .duel-zone { opacity: .42; filter: saturate(.5); }
.duel-moitie.is-gel .duel-plateau { pointer-events: none; }
.duel-gel {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 22px;
  border-radius: 18px;
  background: var(--so-gel);
  border: 2px solid var(--so-gel-bord);
  color: var(--ink);
  pointer-events: none;
}
.duel-moitie.is-gel .duel-gel { display: flex; }
.duel-gel-titre { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.duel-gel-temps { font-size: 1.9rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }

/* Les voiles : prêt, compte à rebours, résultat, menu. Ils couvrent la zone du
   plateau et laissent l'en-tête (manches gagnées, nom) visible : on sait
   toujours qui est de quel côté. 33 px = les 30 px de l'en-tête et son filet. */
.duel-voile {
  position: absolute;
  inset: 0 0 33px 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  text-align: center;
  background: var(--so-voile);
}
.duel-voile.is-on { display: flex; }
.duel-etiquette {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--joueur-texte);
}
.duel-gros {
  margin: 0;
  font-size: clamp(72px, 34cqmin, 180px);
  font-weight: 800;
  line-height: 1;
  color: var(--joueur-texte);
  font-variant-numeric: tabular-nums;
}
.duel-titre { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: var(--ink); }
.duel-texte { margin: 0; max-width: 20em; font-size: .92rem; line-height: 1.45; color: var(--ink-2); }
.duel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; }
.duel-actions .btn { min-width: 150px; flex-direction: row; gap: 8px; }
.duel-etiquette:empty, .duel-gros:empty, .duel-titre:empty, .duel-texte:empty, .duel-actions:empty { display: none; }
/* « Prêt » une fois touché : le bouton reste, grisé, et dit qu'on attend l'autre. */
.duel-actions .btn:disabled { opacity: .55; }

/* ═════════════════════════ RELAIS ═══════════════════════════ */
.rl { background: var(--bg); }
.rl-scene {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 18px 24px;
}
.rl-carte {
  width: min(440px, 100%);
  margin-block: auto;
  background: var(--card);
  border-radius: 22px;
  padding: 24px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
  box-shadow: var(--shadow);
}
.rl-sur {
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.rl-titre { margin: 0; font-size: 1.55rem; font-weight: 800; line-height: 1.2; color: var(--ink); }
.rl-texte { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-2); }
.rl-resultat {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg-soft);
  font-size: .9rem;
  line-height: 1.4;
  color: var(--ink);
}
.rl-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.rl-actions .btn { width: 100%; flex-direction: row; gap: 8px; }

/* Le classement d'une manche et le podium final. */
.rl-liste { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.rl-ligne {
  display: grid;
  grid-template-columns: 30px minmax(5.5em, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}
.rl-ligne.is-premier { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--card); }
.rl-rang { font-weight: 800; color: var(--ink-2); }
.rl-ligne.is-premier .rl-rang { color: var(--accent-deep-hover); }
.rl-joueur { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rl-temps { font-size: .84rem; color: var(--ink-2); text-align: right; }
.rl-points { font-weight: 800; min-width: 3.4em; text-align: right; }
.rl-total { font-size: .72rem; font-weight: 600; color: var(--ink-2); }
.rl-regle { margin: 4px 0 0; font-size: .78rem; color: var(--ink-2); line-height: 1.4; }

/* Le compte à rebours : plein écran, un seul gros chiffre. */
.rl-compte {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
}
.rl-compte-etiquette { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink-2); }
.rl-chiffre {
  margin: 0;
  font-size: clamp(120px, 42vmin, 260px);
  font-weight: 800;
  line-height: 1;
  color: var(--accent-deep-hover);
  font-variant-numeric: tabular-nums;
}

/* Le tour : en-tête, état, plateau. */
.rl-jeu { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rl-tete {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 4px;
}
.rl-identite { min-width: 0; text-align: center; }
.rl-nom { margin: 0; font-size: 1.05rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-manche { margin: 0; font-size: .76rem; color: var(--ink-2); }
.rl-chrono {
  margin: 0;
  min-width: 5.2em;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--card);
  text-align: right;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.rl-etat {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px 6px;
  font-size: .82rem;
  color: var(--ink-2);
  min-height: 22px;
  font-variant-numeric: tabular-nums;
}
.rl-penalite { color: var(--bad-ink); font-weight: 700; }
.rl-zone {
  flex: 1;
  min-height: 0;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px 14px;
}
.rl-plateau { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }

@media (orientation: landscape) and (max-height: 520px) {
  .rl-tete { padding-top: 6px; }
  .rl-zone { padding-bottom: 8px; }
  .rl-scene { padding: 10px 18px 12px; }
  .rl-carte { padding: 16px 18px 16px; gap: 8px; }
  /* Les boutons d'une carte se rangent côte à côte : le podium tient sans défiler. */
  .rl-actions { flex-direction: row; flex-wrap: wrap; }
  .rl-actions .btn { width: auto; flex: 1 1 170px; }
  .rl-actions .btn-primary { flex-grow: 2; }
}

/* Une carte de moins de 370 px ne tient plus un classement sur une ligne : le prénom reste en
   haut, le temps passe dessous, les points restent à droite. */
@media (max-width: 410px) {
  .rl-ligne {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    grid-template-areas: "rang joueur points" "rang temps points";
    row-gap: 0;
  }
  .rl-rang { grid-area: rang; }
  .rl-joueur { grid-area: joueur; }
  .rl-temps { grid-area: temps; text-align: left; }
  .rl-points { grid-area: points; }
}

/* ── Mouvement réduit ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .so-jeu, .so-pastille, .duel-zone { transition: none; }
  .so-jeu:active { transform: none; }
}

/* ── Téléphone : aucun champ sous 16 px ───────────────────────── */
@media (max-width: 760px) {
  .so-joueur input { font-size: 16px; }
}