/* ============================================================================
   COMPOSANTS AJOUTÉS
   Écrans compte, équipage, classement, historique et notifications.
   Tout réutilise les variables et le vocabulaire visuel de theme.css : mêmes
   ors, mêmes bordures, mêmes ornements, pour que rien ne trahisse l'ajout.
   ============================================================================ */

/* ---------------------------------------------------------------- STRUCTURE */
#screen-body { position: relative; z-index: 1; }

.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.topbar-spacer { flex: 1; }

.icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--btn-face);
  border: none;
  box-shadow: var(--btn-lift);
  color: var(--gold-bright);
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn .dot {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 19px; height: 19px;
  padding: 0 4px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--blood-bright), var(--blood));
  border: 1px solid #2a0b06;
  color: #ffe9c9;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ ONGLETS */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.tab {
  flex: 1;
  padding: 11px 6px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-faded);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
}
.tab.active {
  color: var(--gold-bright);
  border-bottom-color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(255, 140, 31, 0.35);
}

/* ---------------------------------------------------------- CHAMPS DE SAISIE */
.field { margin-bottom: 13px; }
.field label {
  display: block;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: 6px;
}
.field input {
  width: 100%;
  padding: 14px 18px;
  background: var(--field-bg);
  border: none;
  border-radius: var(--r-pill);
  box-shadow: var(--field-shadow);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 17px;
}
.field input:focus {
  outline: none;
  box-shadow: var(--field-shadow), 0 0 0 2px var(--gold);
}
.field .hint {
  margin-top: 5px;
  font-size: 13px;
  color: var(--ink-faded);
  font-style: italic;
}
/* ------------------------------------------------- AVANTAGES DU COMPTE
   Avant le formulaire : une route en pointillé se trace d'un avantage à
   l'autre jusqu'au bouton « Créer mon compte ». Composition à hauteur fixe : la
   route, les escales et les boutons tombent toujours aux mêmes endroits. */
/* Tout l'écran : un calque fixe, transparent sur le fond de page du thème.
   La scène est centrée ; si l'écran est trop court, on la fait défiler. */
.avantages {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Une marge de 16 px de chaque côté sur téléphone. */
.av-scene { position: relative; flex: none; width: calc(100% - 32px); max-width: 430px; height: 640px; margin: auto; }
/* La carte couvre tout l'écran, sous un voile de la couleur du fond du thème :
   uniforme et sombre sur le haut, il ne s'éclaircit qu'à l'approche des
   boutons, où la carte se laisse voir. Fixes, ils restent en place si la
   scène défile sur un écran court. */
.av-fond { position: fixed; inset: 0; background: var(--bg-deep) url("../media/carte-tresor.webp") center / cover no-repeat; }
/* Écrans de connexion : la même carte que « Pourquoi un compte ? », sous un
   voile uniforme, sans dégradé : la carte n'y transparaît qu'à 17 %. Le fond
   est opaque : ni le dégradé de la page ni le halo du haut ne s'y mêlent.
   z-index négatif : elle passe sous le contenu de .app. */
.compte-fond {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg-deep) url("../media/carte-tresor.webp") center / cover no-repeat;
}
.compte-fond::after {
  content: ''; position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg-deep) 83%, transparent);
}
/* Le pied de page n'assombrit pas la carte : le bouton de retour flotte dessus. */
.compte-fond ~ .action-footer { background: none; }
/* Titre et panneau centrés en hauteur ; le bouton de retour reste en bas.
   La marge haute et basse égale garde le centre exact, et le bas libre
   pour ce bouton quand l'écran est court. */
body:has(.compte-fond) { padding-bottom: 16px; }
.compte-centre {
  display: flex; flex-direction: column; justify-content: center;
  min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px);
  padding-block: 56px;
}
.compte-centre .panel:last-child { margin-bottom: 0; }
/* Sur le parchemin clair, le sous-titre gris disparaîtrait : un halo sombre. */
.compte-fond ~ .header .subtitle {
  color: var(--ink);
  text-shadow: 0 1px 3px var(--bg-deep), 0 0 8px var(--bg-deep), 0 0 14px var(--bg-deep);
}
.av-voile {
  position: fixed; inset: 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--bg-deep) 93%, transparent) 0%,
    color-mix(in srgb, var(--bg-deep) 93%, transparent) 60%,
    color-mix(in srgb, var(--bg-deep) 50%, transparent) 100%);
}
.avantages .av-titre {
  position: absolute; top: 26px; left: 0; right: 0; margin: 0; text-align: center;
  font: 400 34px/1 var(--font-title); color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  animation: av-monter 0.5s ease both;
}
.av-trace { position: absolute; left: 0; top: 80px; width: 88px; height: 400px; overflow: visible; }
.av-devoile {
  stroke-dasharray: var(--av-long) var(--av-long); stroke-dashoffset: var(--av-long);
  animation: av-tracer var(--av-duree) linear var(--av-depart) forwards;
}
@keyframes av-tracer { to { stroke-dashoffset: 0; } }
/* Des tirets blancs, chacun doublé d'un tiret sombre plus large : la route se
   lit sur le voile comme sur la carte, quel que soit le thème. */
.av-halo, .av-chemin { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.av-halo { stroke: #000; stroke-opacity: 0.55; stroke-width: 7.5; }
.av-chemin { stroke: #fffaf0; stroke-width: 4; }

/* Chaque escale s'allume quand la route l'atteint. */
.av-escale {
  /* top donne le centre du cercle, quelle que soit la hauteur du texte : la
     route, dessinée par ces centres, s'efface au ras de chaque cercle. */
  position: absolute; left: 22px; right: 12px; transform: translateY(-50%);
  display: flex; align-items: center; gap: 12px;
  opacity: 0.18; filter: grayscale(1);
  animation: av-allumer 0.3s ease forwards var(--av-arrivee);
}
@keyframes av-allumer { to { opacity: 1; filter: none; } }
.av-rond {
  position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--gold-bright);
  background: var(--bg-card); box-shadow: 0 0 0 1.5px var(--gold), 0 0 18px rgba(255, 140, 31, 0.22);
}
.av-rond .ico { width: 21px; height: 21px; opacity: 1; }
.av-rond::after {
  content: ''; position: absolute; inset: -2px; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gold-bright); opacity: 0;
  animation: av-onde 0.5s ease-out var(--av-arrivee);
}
@keyframes av-onde { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.av-escale > div:last-child { min-width: 0; animation: av-glisser 0.3s ease both var(--av-arrivee); }
@keyframes av-glisser { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.av-escale b { display: block; font: 400 22px/1.05 var(--font-title); color: var(--gold-bright); }
.av-escale span { display: block; font-size: 13px; line-height: 1.35; color: var(--ink-dim); }
/* La dernière escale passe au-dessus du haut de la carte : un halo de la
   couleur du fond garde le texte lisible, quel que soit le thème. */
.av-escale b, .av-escale span { text-shadow: 0 1px 3px var(--bg-deep), 0 0 8px var(--bg-deep); }

/* Les boutons sont là dès le départ : c'est vers eux que va la route. Ils
   épousent leur texte, 25 px de chaque côté, et se centrent. */
.av-cta {
  position: absolute; left: 0; right: 0; top: 480px;
  display: grid; gap: 10px; justify-items: center;
  animation: av-monter 0.4s ease both var(--av-depart);
}
/* La route arrive : « Créer mon compte » s'illumine une fois. */
.av-cta #av-creer { animation: av-eclat 0.7s ease calc(var(--av-depart) + var(--av-duree)); }
@keyframes av-eclat {
  45% { transform: scale(1.03); box-shadow: var(--primary-lift), 0 0 0 5px color-mix(in srgb, var(--gold-bright) 35%, transparent), 0 0 30px var(--gold-bright); }
}
.av-cta .btn { padding-inline: 25px; }
/* Petit bouton blanc des actions secondaires : « Plus tard », « Retour ». */
.btn.btn-blanc,
.action-footer .btn.btn-blanc {
  flex: none; gap: 6px; padding: 6px 14px; font-size: 10.5px;
  background: #fff; color: var(--bg-deep);
}
@keyframes av-monter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .avantages *, .avantages *::after { animation: none !important; }
  .av-escale { opacity: 1; filter: none; }
  .av-devoile { stroke-dashoffset: 0; }
}

/* Lien d'appoint sous un bouton principal (« Mot de passe oublié ? »). */
.lien-discret {
  display: block;
  margin: 14px auto 0;
  padding: 6px 10px;
  background: none;
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lien-discret:hover { color: var(--gold-bright); }

.form-error {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 3px;
  background: rgba(139, 30, 15, 0.28);
  border: 1px solid var(--blood-bright);
  color: var(--erreur-ink);
  font-size: 14px;
}

.btn-danger {
  padding: 15px 22px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--blood-bright) 0%, var(--blood) 100%);
  color: #ffe9e2;
  border: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255, 190, 175, 0.25);
}
.btn-sm { padding: 9px 13px; font-size: 12px; }

/* -------------------------------------------------------------- LISTE SIMPLE */
.row-list { display: flex; flex-direction: column; gap: 8px; }
.row-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  background: var(--btn-face);
  border: none;
  box-shadow: var(--btn-lift);
  border-radius: var(--r-card);
  text-align: left;
  width: 100%;
  color: var(--ink);
}
.row-item:active { transform: scale(0.99); }
.row-item .grow { flex: 1; min-width: 0; }
.row-item .title {
  font-family: var(--font-title);
  font-size: 21px;
  color: var(--gold-bright);
  line-height: 1.1;
}
.row-item .sub {
  font-size: 13px;
  color: var(--ink-faded);
  margin-top: 2px;
}
.row-item .chev { color: var(--gold); font-size: 18px; }

.empty-note {
  text-align: center;
  padding: 26px 14px;
  color: var(--ink-faded);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
}

/* ---------------------------------------------------------------- CLASSEMENT */
.board { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.board th {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-faded);
  font-weight: 700;
  text-align: right;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border);
}
.board th:nth-child(1), .board th:nth-child(2) { text-align: left; }
.board td {
  padding: 11px 0;
  border-bottom: 1px solid rgba(90, 58, 30, 0.45);
  text-align: right;
  font-size: 15px;
}
.board td:nth-child(2) {
  text-align: left;
  font-family: var(--font-ui);
  font-size: 17px;
}
.board .pos {
  width: 30px;
  text-align: left;
  font-family: var(--font-title);
  font-size: 20px;
  color: var(--gold);
}
.board tr.leader td { color: var(--gold-bright); }
.board tr.leader .pos { color: var(--gold-bright); text-shadow: 0 0 10px rgba(255, 140, 31, 0.5); }
.board tr.me td { background: rgba(245, 169, 58, 0.07); }
.board .main { font-weight: 700; }

.board-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-faded);
  font-style: italic;
}

/* -------------------------------------------------------------- INVITATION */
.invite-code {
  font-family: var(--font-ui);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-align: center;
  color: var(--gold-bright);
  padding: 15px 8px;
  background: var(--bg-deep);
  border: 1px solid var(--border-gold);
  border-radius: 3px;
  text-shadow: 0 0 16px rgba(255, 140, 31, 0.35);
  word-break: break-all;
}
.qr-frame {
  display: flex;
  justify-content: center;
  padding: 14px;
  background: var(--parchment);
  border: 1px solid var(--border);
  border-radius: 3px;
  margin: 12px 0;
}
.qr-frame svg { display: block; width: 100%; height: auto; max-width: 260px; }
.invite-actions { display: flex; gap: 8px; }
.invite-actions .btn { flex: 1; }

/* ------------------------------------------------------------ NOTIFICATIONS */
.notif {
  padding: 13px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: 3px;
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-mid) 100%);
  margin-bottom: 8px;
}
.notif.unread {
  border-left-color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(245, 169, 58, 0.09) 0%, var(--bg-card) 100%);
}
.notif .n-title {
  font-family: var(--font-title);
  font-size: 20px;
  color: var(--gold-bright);
  line-height: 1.15;
}
.notif .n-body { font-size: 14px; color: var(--ink-dim); margin-top: 5px; line-height: 1.45; }
.notif .n-date { font-size: 11px; color: var(--ink-faded); margin-top: 7px; font-family: var(--font-ui); }

/* ------------------------------------------------------- FORMAT DE PARTIE */
.choice-list { display: flex; flex-direction: column; gap: 8px; }
.choice-card {
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  background: var(--btn-face);
  border: none;
  box-shadow: var(--btn-lift);
  border-radius: var(--r-card);
  color: var(--ink);
}
.choice-card.selected {
  background: var(--btn-sel);
  box-shadow: var(--btn-sel-lift);
}
/* Option à cocher : la marque à gauche, rond pour un choix unique, carré quand
   plusieurs se cumulent. Elle s'aligne sur la première ligne du titre. */
.choice-card.option { display: flex; align-items: flex-start; gap: 14px; }
.choice-card.option:active { transform: scale(0.98); }
.opt-body { flex: 1; min-width: 0; }
.opt-mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--ink-faded);
  transition: border-color .15s ease, background .15s ease;
}
.opt-mark.check { border-radius: 6px; }
.choice-card.selected .opt-mark { border-color: var(--gold-bright); }
.choice-card.selected .opt-mark.radio::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold-bright);
}
.choice-card.selected .opt-mark.check { background: var(--gold-bright); }
.choice-card.selected .opt-mark.check::after {
  content: '';
  width: 5px;
  height: 10px;
  margin-top: -2px;
  border: solid var(--bg-deep);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
/* En-tête de panneau à choix. Le choix retenu EST le titre : la catégorie
   passe en étiquette au-dessus, et rien n'est répété dans un bloc dessous.
   Le trait de séparation n'apparaît qu'une fois la liste ouverte, sinon il
   soulignerait le vide. */
.panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.panel-head.ouvert {
  border-bottom: 1px solid var(--border);
  padding-bottom: 13px;
}
/* Titre et choix côte à côte. Sur un écran étroit le choix passe à la ligne
   plutôt que d'écraser le titre — d'où le retour à la ligne autorisé. */
.ph-text {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px 11px;
}
.ph-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-family: var(--font-title);
  font-size: 22px;
  line-height: 1.1;
  color: var(--gold-bright);
  text-shadow: var(--glow-text);
}
.ph-cat .ico { width: 0.74em; height: 0.74em; stroke-width: 1.9; }
/* Le choix retenu : une pastille ambrée, lue comme une valeur et non comme
   un second titre. */
.ph-value {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gold-bright);
  background: var(--pill-bg);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  align-self: center;
}
/* Sur un écran étroit, le bouton reste au ras du titre et c'est la pastille
   qui descend : mieux vaut cela qu'un « Changer » relégué en bas du bloc. */
.panel-head { align-items: flex-start; }
.panel-head .btn { margin-top: 1px; }
/* Sur téléphone, les trois éléments se disputent 310 px : on resserre le titre,
   la pastille et le bouton pour que le choix reste à côté du titre. Quand le
   nom retenu est vraiment long, la pastille passe dessous plutôt que d'être
   tronquée — un format à moitié lisible ne renseigne personne. */
/* ------------------------------------------------- SAISIE PAR GRILLE
   Disposition d'origine conservée : le pari à gauche, la mise main/poing au
   centre, les plis réalisés à droite. Les deux grilles tiennent sur trois
   colonnes pour que les deux joueurs restent visibles sans défiler.
   Au-delà du nombre de cartes distribuées, la valeur est grisée : à la
   manche 1, on ne peut pas annoncer 3. */
/* La mise main/poing est remontée sur la ligne du prénom : elle libère toute
   la largeur pour les deux grilles, qui tiennent alors chacune sur une ligne. */
/* La mise main/poing tient sur la ligne du prénom : elle libère toute la
   largeur pour les deux grilles et se voit avant même de baisser les yeux. */
.pname { align-items: center; gap: 10px; }
.pn-nom { min-width: 0; flex: 1; }
.pname .runtotal { flex: 0 0 auto; }
.pn-mise {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Au repos, les deux poses sont de même taille et de même teinte : aucune ne
   doit passer pour déjà choisie tant que le joueur n'a pas tranché. Le fond
   discret dit qu'elles se cliquent, le halo qu'elles attendent une réponse. */
.pn-mise .choice-btn {
  width: 46px;
  height: 46px;
  background: var(--btn-face);
  box-shadow: var(--btn-lift);
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pn-mise.neutre .choice-btn { animation: mise-attend 1.9s ease-in-out infinite; }
.pn-mise.neutre .choice-btn:nth-child(2) { animation-delay: .95s; }
@keyframes mise-attend {
  0%, 100% { box-shadow: var(--btn-lift); }
  50% { box-shadow: var(--btn-lift), 0 0 14px rgba(255, 148, 51, 0.38); }
}
@media (prefers-reduced-motion: reduce) {
  .pn-mise.neutre .choice-btn { animation: none; }
}
/* Choisi : orange plein, les deux poses de la même couleur — c'est le geste
   qui distingue, pas la teinte. Le non-retenu s'efface sans disparaître. */
.pn-mise .choice-btn.selected {
  background: var(--sel-pari);
  box-shadow: var(--sel-pari-lift);
  color: var(--sel-pari-ink);
  transform: scale(1.06);
}
.pn-mise .choice-btn.selected .ico { color: var(--sel-pari-ink); }
.pn-mise.choisie .choice-btn:not(.selected) { opacity: .45; transform: scale(.86); }
/* Le thème règle la taille au sélecteur d'attribut : ici les deux poses sont
   à égalité, il faut donc reprendre la main sur ces règles. */
.pn-mise .choice-btn[data-val="grapeshot"],
.pn-mise .choice-btn[data-val="cannonball"],
.pn-mise:has(.choice-btn[data-val="cannonball"].selected) .choice-btn[data-val="grapeshot"],
.pn-mise:has(.choice-btn[data-val="cannonball"].selected) .choice-btn[data-val="cannonball"] {
  width: 46px;
  height: 46px;
}

.round-body { display: block; }
.rb-cols { min-width: 0; }

.pick-block + .pick-block { margin-top: 9px; }
.pick-block .section-tag-row { min-height: 24px; align-items: center; margin: 0 0 5px; }

/* L'étoile des bonus quitte la ligne du titre pour se poser sous la grille :
   elle appartient aux plis ramassés, elle se lit donc après eux. */
.bonus-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 7px;
}

/* Les onze valeurs sur une seule ligne. Le chiffre est composé dans la bâton
   plutôt que dans la Pirata One : ses chiffres sont bien plus étroits, donc
   le bouton se resserre autour d'eux au lieu de flotter dans du vide. Sur un
   grand écran les cases sont plafonnées, sinon elles s'étirent bêtement. */
/* Onze colonnes égales qui remplissent la largeur : l'espace disponible passe
   dans les touches plutôt qu'entre elles. La rangée se lit comme une réglette,
   là où des colonnes `auto` espacées laissaient onze chiffres flotter. */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 3px;
}
/* Sous 360 px, les onze ne tiennent plus : on repasse à deux lignes,
   0 à 5 puis 6 à 10. */
@media (max-width: 359px) {
  .pick-grid { grid-template-columns: repeat(6, 1fr); gap: 4px; }
}

.pick-btn {
  padding: 7px 2px;
  min-width: 0;
  border: none;
  border-radius: 7px;
  background: var(--btn-face);
  box-shadow: var(--btn-lift);
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
/* Chaque ligne porte sa teinte, choix ou pas : le pari tire vers l'ambre,
   les plis vers le rouge. On reconnaît la ligne sans lire l'étiquette. */
.pick-btn { background: var(--btn-face-pari); color: var(--ink-pari); }
.pick-plis .pick-btn { background: var(--btn-face-plis); color: var(--ink-plis); }
/* Le choix est franc : orange plein pour le pari, rouge plein pour les plis.
   Sur l'orange, texte sombre ; sur le rouge, plus foncé, un texte clair se
   lit mieux. */
.pick-btn.selected {
  background: var(--sel-pari);
  box-shadow: var(--sel-pari-lift);
  color: var(--sel-pari-ink);
  text-shadow: var(--sel-pari-text-shadow);
}
.pick-plis .pick-btn.selected {
  background: var(--sel-plis);
  box-shadow: var(--sel-plis-lift);
  color: var(--sel-plis-ink);
  text-shadow: var(--sel-plis-text-shadow);
}
/* `.section-tag-row .lbl` fixe déjà une couleur : il faut la même portée pour
   la reprendre, sinon l'étiquette resterait grise. */
.section-tag-row .lbl-plis { color: var(--ink-plis-titre); }
.pick-btn:disabled {
  opacity: 0.22;
  box-shadow: none;
  cursor: not-allowed;
}
.pick-btn:disabled:active { transform: none; }
.tag-spacer { flex: 1; }
.section-tag-row .bonus-fab { width: 26px; height: 26px; font-size: 12px; }
.section-tag-row .bonus-fab .badge { width: 15px; height: 15px; font-size: 9px; top: -3px; right: -3px; }
.bonus-row .bonus-fab { width: 34px; height: 34px; }

/* ------------------------------------------------- TÉMOIN DE SIMULATION SONORE
   Les musiques et les voix off ne sont pas encore enregistrées. En attendant,
   chaque déclenchement laisse cette trace en bas de l'écran : on vérifie que
   la bande-son part au bon moment sans avoir un seul fichier. À retirer en
   même temps que `SIMULATION` dans js/audio.js. */
.son-temoin {
  position: fixed;
  left: 12px;
  bottom: 96px;
  z-index: 90;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: rgba(12, 10, 20, 0.88);
  border: 1px solid rgba(245, 169, 58, 0.45);
  color: var(--gold-bright);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.06em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}
.son-temoin.show { opacity: 1; transform: translateY(0); }

.ph-court { display: none; }
@media (max-width: 480px) {
  .ph-cat { font-size: 20px; gap: 7px; }
  .panel-head { gap: 9px; }
  .ph-text { gap: 4px 9px; }
  .ph-value { font-size: 11.5px; padding: 3px 10px; }
  .panel-head .btn-sm { font-size: 10px; padding: 8px 13px; letter-spacing: 0.08em; }
  .ph-long { display: none; }
  .ph-court { display: inline; }
}
.panel-head .btn { flex: 0 0 auto; }

/* Les blocs de texte à l'intérieur d'un bouton-carte sont des phrases, pas
   des libellés : ils ne suivent pas la mise en capitales des boutons. */
.cc-title, .cc-sum, .cc-desc,
.row-item .title, .row-item .sub,
.mode-card-title, .mode-card-desc,
.chip-player, .empty-note {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.cc-sum { font-weight: 600; }
:is(.choice-card, .choice-now) .cc-title {
  font-family: var(--font-title);
  font-size: 22px;
  color: var(--gold-bright);
  line-height: 1.1;
}
:is(.choice-card, .choice-now) .cc-sum { font-size: 14px; color: var(--ink-dim); margin-top: 3px; }
:is(.choice-card, .choice-now) .cc-desc {
  font-size: 13px;
  color: var(--ink-faded);
  margin-top: 6px;
  line-height: 1.45;
  font-style: italic;
}
.cards-strip { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.cards-strip span {
  min-width: 24px;
  padding: 3px 6px;
  text-align: center;
  border-radius: var(--r-pill);
  background: var(--creux);
  border: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
}

/* ------------------------------------------------------------- HISTORIQUE */
.history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 4px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(90, 58, 30, 0.45);
  color: var(--ink);
  text-align: left;
}
.history-row .hr-num {
  font-family: var(--font-title);
  font-size: 19px;
  color: var(--gold);
  width: 42px;
  flex-shrink: 0;
}
.history-row .hr-scores { flex: 1; display: flex; flex-wrap: wrap; gap: 4px; }
.history-row .hr-edit { color: var(--gold); font-size: 15px; }

/* --------------------------------------------------------------- DIALOGUE */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.modal-overlay.show { opacity: 1; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.modal-popup {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0;
}
.modal-title {
  font-family: var(--font-title);
  font-size: 26px;
  color: var(--gold-bright);
  margin-bottom: 8px;
}
.modal-message { font-size: 15px; color: var(--ink-dim); line-height: 1.5; margin-bottom: 16px; }
.modal-actions { display: flex; gap: 8px; }
.modal-actions .btn { flex: 1; }

/* ------------------------------------------------------------------ TOAST */
.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 14px);
  z-index: 130;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--bg-card-hi), var(--bg-card));
  border: 1px solid var(--border-gold);
  color: var(--ink);
  font-size: 14px;
  text-align: center;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast-error { border-color: var(--blood-bright); background: linear-gradient(180deg, #3a1109, #240a05); }
.toast-success { border-color: #4f8f4a; }

/* ------------------------------------------------------------------ INTRO */
/* La vidéo occupe tout l'écran, le logo se pose dessus, puis un voile assombrit
   l'image pour que les boutons restent lisibles. */
.intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow: hidden;
  background: var(--bg-deep);
}
.intro-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Léger recadrage vers le haut : le sujet des vidéos verticales y est presque
     toujours, et le bas est masqué par les boutons. */
  object-position: 50% 35%;
}
.intro-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 32%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.7) 100%),
    linear-gradient(180deg, rgba(11,13,18,0.45) 0%, rgba(11,13,18,0.15) 30%, rgba(11,13,18,0.85) 78%, #0b0d12 100%);
  opacity: 0;
  transition: opacity 1.6s ease;
}
.intro.veiled .intro-veil { opacity: 1; }

.intro-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 26px 22px calc(30px + env(safe-area-inset-bottom));
  text-align: center;
}
.intro-logo {
  width: min(78vw, 340px);
  max-height: 42vh;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.9);
  filter: drop-shadow(0 6px 26px rgba(0,0,0,0.85)) drop-shadow(0 0 34px rgba(255,140,31,0.3));
  transition: opacity 1.4s ease, transform 1.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.intro.logo-in .intro-logo { opacity: 1; transform: scale(1); }

.intro-actions {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.intro.actions-in .intro-actions { opacity: 1; transform: none; pointer-events: auto; }
.intro-actions .btn {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
}
.btn-ico {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* La barre est tracée deux fois : un liseré épais au ton du bouton, puis le
   trait par-dessus. Sans le liseré elle se confond avec le pictogramme
   qu'elle traverse. */
.btn-ico .bar-halo { stroke: #20262f; stroke-width: 4.2; }
.btn-ico .bar { stroke: currentColor; stroke-width: 1.7; }

/* ------------------------------------------------------- CHAMPS EN DÉFAUT
   Plus d'avertissement écrit au-dessus du formulaire : le champ fautif se
   signale lui-même. L'état « invalide » est permanent tant que le problème
   dure ; le clignotement ne sert qu'au moment de la validation, pour dire
   « c'est ici », une fois remonté jusqu'au champ. */
.player-row input.invalid {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1.6px rgba(200, 52, 28, 0.8);
  color: var(--erreur-ink);
}
@keyframes champFautif {
  0%, 100% { box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 1.6px rgba(200,52,28,.8); }
  50%      { box-shadow: inset 0 1px 3px rgba(0,0,0,.5), 0 0 0 2.5px var(--blood-bright), 0 0 20px rgba(200,52,28,.6); }
}
.player-row input.clignote { animation: champFautif 0.55s ease-in-out 3; }

/* Frappe refusée : la case est pleine, une secousse brève le dit. */
@keyframes caseP1eine {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
.player-row input.pleine { animation: caseP1eine 0.22s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
  /* L'information reste, seul le mouvement disparaît. */
  .player-row input.clignote,
  .player-row input.pleine { animation: none; }
}

.intro-hint {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(12px + env(safe-area-inset-bottom));
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faded);
  opacity: 0.75;
  transition: opacity 0.4s ease;
}
.intro.actions-in .intro-hint { opacity: 0; pointer-events: none; }

/* Un utilisateur qui a demandé moins d'animations voit l'écran final tout de suite. */
@media (prefers-reduced-motion: reduce) {
  .intro-veil, .intro-logo, .intro-actions { transition: none; }
}

/* ------------------------------------------------- JOUEURS CONNUS (jetons) */
.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-player {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: var(--r-pill);
  background: var(--btn-face);
  border: none;
  box-shadow: var(--btn-lift);
  color: var(--ink-dim);
  font-family: var(--font-ui);
  font-size: 15px;
}
.chip-player .mark { color: var(--gold); font-size: 13px; }
.chip-player.picked {
  background: var(--btn-sel);
  color: var(--ink);
  box-shadow: var(--btn-sel-lift);
}
.chip-player.crew .mark { color: var(--gold-bright); }
.chip-player:disabled { opacity: 0.35; }

/* ------------------------------------------------- PARAMÈTRES : THÈMES
   Un damier de vignettes. L'aperçu de chacune porte son propre data-theme :
   il prend ses couleurs dans son thème, la légende dans celui de l'écran. */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 8px 12px;
  border-radius: var(--r-card);
  background: var(--btn-face);
  box-shadow: var(--btn-lift);
  color: var(--ink);
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.theme-tile:active { transform: scale(0.97); }
.theme-tile.selected { box-shadow: var(--btn-lift), 0 0 0 2px var(--gold-bright); }
.tt-apercu {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--page-bg);
  overflow: hidden;
}
.tt-titre {
  font-family: var(--font-title);
  font-size: 21px;
  line-height: 1.05;
  background: var(--title-fill);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: var(--title-filter);
}
.tt-ligne { display: flex; gap: 3px; }
.tt-case {
  display: grid;
  place-items: center;
  width: 21px;
  height: 19px;
  border-radius: 5px;
  font: 700 10px/1 var(--font-ui);
}
.tt-case.pari { background: var(--btn-face-pari); color: var(--ink-pari); }
.tt-case.plis { background: var(--btn-face-plis); color: var(--ink-plis); }
.tt-case.pari.on { background: var(--sel-pari); color: var(--sel-pari-ink); }
.tt-case.plis.on { background: var(--sel-plis); color: var(--sel-plis-ink); }
.tt-bouton {
  margin-top: 3px;
  padding: 6px 18px;
  border-radius: var(--r-pill);
  background: var(--primary-face);
  color: var(--primary-ink);
  font: 700 9px/1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tt-nom {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
}
.tt-nom .ico { width: 15px; height: 15px; color: var(--gold-bright); opacity: 1; }
.tt-desc { padding: 0 4px; font-size: 12px; line-height: 1.35; color: var(--ink-faded); }

/* Paramètres et son, dans les coins de l'écran d'accueil animé. */
.intro-reglages, .intro-son {
  position: absolute;
  top: calc(14px + env(safe-area-inset-top));
  z-index: 5;
}
.intro-reglages { right: 14px; }
.intro-son { left: 14px; }

/* Bouton haut-parleur : son coupé, l'icône s'efface d'un ton. */
.footer-left { display: flex; align-items: center; gap: 8px; }
#btn-son.son-coupe { color: var(--ink-faded); }
.intro-theme { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 66px; z-index: 5; }

/* Liste rapide des thèmes, ouverte par le bouton palette. Chaque pastille
   porte son propre data-theme : le fond du thème et ses deux couleurs de jeu. */
.theme-pop {
  position: fixed;
  z-index: 200;
  display: grid;
  gap: 2px;
  min-width: 190px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--bg-card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.tp-choix {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
.tp-choix:hover, .tp-choix.actif { background: var(--btn-face); }
.tp-choix .ico { width: 16px; height: 16px; margin-left: auto; color: var(--gold-bright); opacity: 1; }
.tp-pastille {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--page-bg);
}
.tp-pastille::before, .tp-pastille::after {
  content: '';
  position: absolute;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}
.tp-pastille::before { left: 4px; background: var(--sel-pari); }
.tp-pastille::after { right: 4px; background: var(--sel-plis); }

/* ------------------------------------------------- AJOUT D'UN PIRATE
   Le champ prend la place du bouton ; la liste se déroule dessous, dans le
   flux de la page : elle pousse les panneaux suivants au lieu de les masquer. */
.add-field { display: flex; gap: 8px; align-items: center; }
.add-field input { flex: 1; min-width: 0; }
.add-field input.pleine { animation: caseP1eine 0.22s ease-in-out; }
.add-list {
  margin-top: 8px;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  border-radius: var(--r-card);
  background: var(--bg-deep);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.add-row { display: flex; align-items: center; gap: 2px; }
/* Sous une case de pirate : alignée sur le champ, pas sur son numéro. */
.case-suggest { display: grid; margin: -2px 0 8px 38px; }
.add-opt {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-dim);
  font-size: 16px;
  font-weight: 400;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
.add-opt:active { transform: none; }
.add-opt strong { color: var(--gold-bright); font-weight: 700; }
.add-opt .mark {
  display: inline-flex;
  justify-content: center;
  width: 16px;
  color: var(--gold);
  font-size: 15px;
}
.add-opt .mark .ico { width: 15px; height: 15px; }
.add-opt:hover, .add-opt.actif { background: var(--btn-face); color: var(--ink); }
.add-new, .add-new .mark { color: var(--gold-bright); }
.add-forget {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faded);
  font-size: 13px;
  letter-spacing: 0;
}
.add-forget:hover { color: var(--blood-bright); background: rgba(200, 52, 28, 0.12); }
.add-note {
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-faded);
}
@media (prefers-reduced-motion: reduce) {
  .add-field input.pleine { animation: none; }
}

/* --------------------------------------------------------------- DIVERS */
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: rgba(227, 155, 92, 0.16);
  border: none;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--gold-bright);
}
.pill-muted { background: rgba(125, 132, 143, 0.16); color: var(--ink-faded); }
.mt { margin-top: 12px; }
.center { text-align: center; }
.muted { color: var(--ink-faded); }
.small { font-size: 13px; line-height: 1.5; }
.sync-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-faded);
}