/* ============================================================
   Le Val des Étoiles — Compagnon
   Thèmes : clair « papier » / sombre « nuit » (auto via système)
   ============================================================ */

@font-face {
  font-family: 'Goodchild';
  src: url('../assets/goodchild.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f4efe4;
  --paper-2: #ece5d4;
  --ink: #211d18;
  --muted: rgba(33, 29, 24, 0.55);
  --line: rgba(33, 29, 24, 0.28);
  --card-bg: #fdfbf4;
  --rouge: #a8232a;
  --accent: #8a6d1f;
  /* logo (gravure sur fond transparent) : léger sépia en thème clair */
  --logo-filter: sepia(0.3);
  --logo-blend: normal;
  --shadow: 0 6px 24px rgba(33, 29, 24, 0.18);
  --serif: 'Goodchild', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

[data-theme='dark'] {
  --paper: #14120f;
  --paper-2: #1d1a16;
  --ink: #e9e1cf;
  --muted: rgba(233, 225, 207, 0.55);
  --line: rgba(233, 225, 207, 0.28);
  --card-bg: #211d18;
  --rouge: #d4555b;
  --accent: #c9a84c;
  --logo-blend: screen;
  --shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #14120f;
    --paper-2: #1d1a16;
    --ink: #e9e1cf;
    --muted: rgba(233, 225, 207, 0.55);
    --line: rgba(233, 225, 207, 0.28);
    --card-bg: #211d18;
    --rouge: #d4555b;
    --accent: #c9a84c;
    --logo-filter: none;
    --logo-blend: screen;
    --shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  }
}

* { box-sizing: border-box; }

/* interrupteur haptique iOS : présent et rendu (opacity:0, pas display:none,
   sinon le haptique ne se déclenche pas), mais hors d'atteinte du doigt */
.haptic-switch {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overscroll-behavior: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.view[hidden] { display: none !important; }

/* ============================================================
   Compteur de Majestés
   ============================================================ */

#view-majestes {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.half {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.half-1 { transform: rotate(180deg); }

.zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  touch-action: none;
  color: var(--muted);
  font-size: 1.5rem;
  font-family: var(--serif);
}

.zone:active { background: rgba(127, 127, 127, 0.08); }

.zone-moins { left: 0; }
.zone-plus { right: 0; }

/* affordance discrète : glyphes aux coins extérieurs (la rotation de
   .half-1 envoie le « bottom » local vers le bord physique de l'écran) */
.zone::after {
  content: '';
  position: absolute;
  bottom: max(10px, env(safe-area-inset-bottom));
  font-size: 1.4rem;
  opacity: 0.5;
}
.zone-moins::after { content: '−'; left: 18px; }
.zone-plus::after { content: '+'; right: 18px; }
.zone-moins, .zone-plus { font-size: 0; } /* le libellé accessible reste pour les lecteurs d'écran */

.score-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.score {
  font-family: var(--serif);
  font-size: min(34svh, 52vw);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: color 0.4s ease-out;
}

.score.cent { font-size: min(26svh, 36vw); }
.score.min { opacity: 0.35; }
.score.max { color: var(--accent); }

/* éclair doré : on bascule en accent sans transition, puis le retrait de la
   classe laisse la transition ci-dessus ramener la couleur normale */
.score.flash { color: var(--accent); transition: none; }

.score-label {
  font-family: var(--serif);
  font-size: clamp(0.8rem, 2.2svh, 1.1rem);
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-top: 0.4em;
}

/* ---- bande centrale ---- */

.center-band {
  flex: none;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  position: relative;
}

.center-band::before,
.center-band::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
  margin: 0 14px;
}

.center-band { gap: 0; }

.band-btn {
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.15rem;
  color: var(--muted);
  display: grid;
  place-items: center;
  order: 0;
}

#btn-aide { order: 0; }
.center-band::before { order: 1; }
.logo-btn { order: 2; }
.center-band::after { order: 3; }
#btn-theme { order: 4; }

.band-btn:active { background: var(--paper-2); }

.logo-btn {
  flex: none;
  width: 114px;
  height: 114px;
  padding: 0;
  display: grid;
  place-items: center;
}

.logo-btn img {
  width: 109px;
  height: 99px;
  object-fit: contain;
  filter: var(--logo-filter);
  mix-blend-mode: var(--logo-blend);
  pointer-events: none;
}

/* Compteur plein écran (tactile) : jamais d'anneau de focus sur ses contrôles
   — il réapparaît sinon au retour de focus après fermeture d'une modale, et
   son rectangle jure avec le logo carré. Les anneaux clavier restent actifs
   dans les panneaux d'aide et les dialogues (accessibilité). */
.zone:focus,
.zone:focus-visible,
.band-btn:focus,
.band-btn:focus-visible,
.logo-btn:focus,
.logo-btn:focus-visible {
  outline: none;
}

/* ============================================================
   Vue Aides de jeu
   ============================================================ */

.view-aide {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}

.aide-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding: max(6px, env(safe-area-inset-top)) 10px 6px;
}

.menu-btn {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  color: var(--ink);
}

.aide-titre {
  margin: 0;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.3rem;
  color: var(--ink);
}

/* ---- tiroir de navigation ---- */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 49;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  width: min(80vw, 300px);
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); box-shadow: var(--shadow); }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.drawer-logo {
  width: 40px;
  height: 36px;
  object-fit: contain;
  filter: var(--logo-filter);
  mix-blend-mode: var(--logo-blend);
}

.drawer-titre {
  font-family: var(--serif);
  font-size: 1.15rem;
}

.drawer-sep {
  padding: 14px 18px 4px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.drawer-link {
  display: block;
  padding: 13px 18px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1rem;
  border-left: 3px solid transparent;
}

.drawer-link:active { background: var(--paper-2); }

.drawer-link.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.drawer-reglages {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
}

.reglages-titre {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

/* titre retiré : on collapse l'espace fantôme pour garder la ligne centrée */
.reglages-titre:empty { display: none; }

.reglage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  cursor: pointer;
}

.reglage-row > span:first-child { flex: 1; font-size: 0.98rem; }

/* interrupteur (toggle) */
.reglage-row input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.reglage-row .switch {
  flex: none;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--line);
  border: 1px solid var(--line);
  position: relative;
  transition: background 0.2s ease;
}

.reglage-row .switch::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 2px;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--paper);
  transform: translateY(-50%);
  transition: left 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.reglage-row input:checked + .switch {
  background: var(--accent);
  border-color: var(--accent);
}
.reglage-row input:checked + .switch::after { left: calc(100% - 1.2rem - 2px); }
.reglage-row input:focus-visible + .switch { box-shadow: 0 0 0 2px var(--accent); }

.aide-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 16px calc(24px + env(safe-area-inset-bottom));
}

.panel { max-width: 720px; margin: 0 auto; }

.panel h2 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.5rem;
  text-align: center;
  margin: 0.6em 0 0.8em;
}

.panel h2:first-child { margin-top: 0; }

.panel .intro {
  color: var(--muted);
  text-align: center;
  font-size: 0.95rem;
  margin: -0.4em 0 1.2em;
}

/* ---- cartes & formations ---- */

.formation {
  --cw: 2.1rem;
  --ch: 2.9rem;
  display: grid;
  /* pistes fixes 3×3 : chaque être occupe la même empreinte qu'un Accompli ;
     les emplacements manquants gardent la taille d'une carte, d'où une place
     constante pour chaque ressource (et des .carte toujours identiques). */
  grid-template-columns: repeat(3, var(--cw));
  grid-template-rows: repeat(3, var(--ch));
  gap: 5px;
  justify-content: center;
  align-content: center;
}

.formation.grande {
  --cw: 3rem;
  --ch: 4.2rem;
  gap: 7px;
}

.carte {
  width: var(--cw);
  height: var(--ch);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--card-bg);
  position: relative;
  display: grid;
  place-items: center;
}

.carte-esprit  { grid-area: 1 / 2; }
.carte-coeur   { grid-area: 2 / 1; }
.carte-figure  { grid-area: 2 / 2; }
.carte-arme    { grid-area: 2 / 3; }
.carte-pouvoir { grid-area: 3 / 2; }

.carte .suit { font-size: calc(var(--cw) * 0.62); line-height: 1; }
.carte .lettre {
  font-family: var(--serif);
  font-size: calc(var(--cw) * 0.66);
  line-height: 1;
}

.carte .bonus {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: calc(var(--cw) * 0.30);
  font-weight: 600;
  color: var(--ink);
}

.rouge { color: var(--rouge); }

/* Goodchild a des chiffres proportionnels (le « 1 » fait 0,343 em, le « 0 »
   0,506 em) : chaque chiffre est posé dans une cellule de la largeur du plus
   large pour que les valeurs ne sautent pas quand elles changent. */
.chiffre {
  display: inline-block;
  width: 0.506em;
  text-align: center;
}

/* ---- grille des êtres ---- */

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

.etre-btn {
  padding: 14px 6px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg) 40%, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.etre-btn:active { background: var(--paper-2); }

/* Le Damné n'existe pas dans l'aide de jeu officielle : légèrement estompé
   (30 % de transparence) pour bien le distinguer des êtres canoniques. */
.etre-btn[data-id='damne'] { opacity: 0.7; }

.etre-btn .nom {
  font-family: var(--serif);
  font-size: 1.05rem;
}

.badge-helios {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
}

/* ---- panneau arcanes / antarès : tuiles ---- */

.grid-tuiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 1.4em;
}

.grid-tuiles.quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.grid-tuiles .tuile:only-child { grid-column: 1 / -1; }

@media (max-width: 360px) {
  .grid-tuiles.quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tuile {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card-bg) 40%, transparent);
  padding: 16px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tuile:active { background: var(--paper-2); }

.tuile .icone {
  font-size: 2.4rem;
  line-height: 1.1;
  font-family: var(--serif);
}

.tuile .icone .petit-suit { font-size: 1.5rem; vertical-align: 0.12em; }

.tuile .nom { font-size: 0.98rem; }

/* ---- panneau tour du jeu ---- */

.bloc {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--card-bg) 40%, transparent);
}

.bloc h3 {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.12rem;
  color: var(--accent);
}

.bloc p { margin: 0; line-height: 1.5; font-size: 0.95rem; }

.credits {
  margin-top: 2em;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

.credits a { color: inherit; }

/* ---- panneau Force Céleste (feuille de score) ---- */

.fc-total {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 10px;
  font-family: var(--serif);
  font-size: 1.5rem;
  text-align: center;
  padding: 0.45em 0.7em;
  margin: 0 0 1em;
  /* masque le contenu qui défile dans le padding haut de .aide-body */
  box-shadow: 0 -22px 0 var(--paper);
}

.fc-total .fc-eq { color: var(--muted); }
.fc-total #fc-total { font-variant-numeric: tabular-nums; }

.fc-grp {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.15rem;
  color: var(--accent);
  margin: 1.1em 0 0.2em;
}

.fc-liste { display: flex; flex-direction: column; }

.fc-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.55em 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.fc-lbl { flex: 1; font-size: 0.98rem; line-height: 1.3; }
.fc-mult { color: var(--muted); font-size: 0.85em; white-space: nowrap; }

.fc-field {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.fc-field input[type='number'] {
  width: 3.3em;
  font-family: var(--serif);
  font-size: 1.25rem;
  text-align: center;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  outline: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.fc-field input::-webkit-outer-spin-button,
.fc-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fc-field input:focus { border-bottom-color: var(--accent); }

.fc-calc {
  min-height: 0.95em;
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* case à cocher stylée (input réel masqué mais accessible) */
.fc-check input[type='checkbox'] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.fc-box {
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  display: grid;
  place-items: center;
}

.fc-check input:checked + .fc-box {
  border-color: var(--accent);
  background: var(--accent);
}

.fc-check input:checked + .fc-box::after {
  content: '✓';
  color: var(--paper);
  font-size: 1.05rem;
  line-height: 1;
}

.fc-check input:focus-visible + .fc-box {
  box-shadow: 0 0 0 2px var(--accent);
}

/* ============================================================
   Dialogs
   ============================================================ */

.dlg {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow);
  padding: 22px 22px 16px;
  max-width: min(92vw, 26rem);
  width: max-content;
  min-width: min(86vw, 20rem);
}

.dlg::backdrop { background: rgba(0, 0, 0, 0.45); }

.dlg h2 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: 1.4rem;
  margin: 0 0 0.5em;
  text-align: center;
}

.dlg p { margin: 0 0 1em; text-align: center; line-height: 1.5; }

.dlg.rotated { transform: rotate(180deg); }

.dlg-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 1.2em 0 0;
  padding: 0;
}

.dlg-actions button {
  flex: 1;
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 1rem;
}

.btn-ghost { border: 1px solid var(--line); color: var(--muted); }
.btn-fort { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); }

/* ---- barrel picker (Nouveau Crépuscule) ----
   Tonneau iOS : scroll-snap vertical + animations pilotées par le défilement
   (chaque item pivote en rotateX en traversant le scrollport). La lecture de
   la valeur ne dépend que de scrollTop : l'effet 3D est purement décoratif. */

.barrel-wrap {
  --bi: 2.75rem;           /* hauteur d'un item */
  --visibles: 5;
  position: relative;
  width: 9rem;
  margin: 0 auto;
}

.barrel-wrap::before,
.barrel-wrap::after {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  height: 1px;
  background: var(--accent);
  opacity: 0.65;
  pointer-events: none;
  z-index: 1;
}

.barrel-wrap::before { top: calc(50% - var(--bi) / 2); }
.barrel-wrap::after { top: calc(50% + var(--bi) / 2); }

.barrel {
  height: calc(var(--bi) * var(--visibles));
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  /* centre les valeurs extrêmes (1 et 99) */
  padding-block: calc(var(--bi) * (var(--visibles) - 1) / 2);
  perspective: 30rem;
  mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  scrollbar-width: none;
  overscroll-behavior: contain;
  outline: none;
}

.barrel::-webkit-scrollbar { display: none; }

.barrel:focus-visible { box-shadow: inset 0 0 0 1px var(--accent); border-radius: 8px; }

/* drag souris en cours : snap suspendu pour suivre le pointeur librement */
.barrel { cursor: grab; }
.barrel.drag { scroll-snap-type: none; cursor: grabbing; }
.barrel.drag .barrel-item { cursor: grabbing; }

.barrel-item {
  height: var(--bi);
  display: grid;
  place-items: center;
  scroll-snap-align: center;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* effet tonneau : pivote autour de X en traversant le scrollport */
@supports (animation-timeline: view()) {
  .barrel-item {
    animation: barrel-tour linear both;
    animation-timeline: view();
  }

  @keyframes barrel-tour {
    0%   { transform: rotateX(-58deg) scale(0.82); opacity: 0.2; }
    50%  { transform: rotateX(0deg) scale(1); opacity: 1; }
    100% { transform: rotateX(58deg) scale(0.82); opacity: 0.2; }
  }
}

/* repli sans scroll-driven animations : fondu via le masque seulement */

/* dialog de détail */

.dlg-detail {
  padding: 0;
  width: min(92vw, 24rem);
}

.detail-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.detail-entete h2 {
  flex: 1;
  text-align: left;
  margin: 0;
  font-size: 1.3rem;
}

.detail-icone {
  font-size: 1.9rem;
  font-family: var(--serif);
  line-height: 1;
}

.detail-icone:empty { display: none; }

.btn-fermer {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--muted);
  font-size: 1.05rem;
}

.detail-corps { padding: 16px 18px 20px; }

.detail-corps p {
  text-align: left;
  margin: 0 0 0.7em;
  line-height: 1.5;
  font-size: 0.95rem;
}

.detail-corps .formation { margin: 14px auto 6px; }

.detail-corps .note-helios {
  margin-top: 1em;
  padding-top: 0.8em;
  border-top: 1px dashed var(--line);
}

.detail-corps .note-helios p {
  margin: 0.5em 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

@keyframes dlg-in {
  from { opacity: 0; translate: 0 10px; }
}

.dlg[open] { animation: dlg-in 0.16s ease-out; }
.dlg.rotated[open] { animation: none; }