@charset "UTF-8";
/*
 * Caveat, l'écriture manuscrite des prédictions, embarquée avec l'app.
 *
 * Le fichier est servi par l'app elle-même (`public/fonts/`, donc `dist/fonts/`) : il part dans le
 * cache hors-ligne avec le reste, la Content-Security-Policy l'autorise (`font-src 'self'`), et
 * l'écriture est identique sur tous les appareils — sans elle, Android n'a aucune police
 * manuscrite à proposer et retombe sur une cursive quelconque.
 *
 * C'est une police variable : une seule graisse déclarée de 400 à 700 couvre tout ce dont l'app a
 * besoin. Le sous-ensemble latin suffit (lettres accentuées et apostrophe typographique comprises).
 *
 * Caveat, par The Caveat Project Authors, sous licence SIL Open Font License 1.1 — le texte de la
 * licence accompagne le fichier, dans `public/fonts/OFL.txt`.
 */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: block;
  src: url("fonts/caveat-latin.woff2") format("woff2");
}
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

#app {
  --app-w: 100vw;
  --app-h: 100vh;
  position: fixed;
  inset: 0;
  overflow: hidden;
}
#app[data-rotation="-90"], #app[data-rotation="90"] {
  inset: auto;
  top: 50%;
  left: 50%;
  width: var(--app-w);
  height: var(--app-h);
}
#app[data-rotation="-90"] {
  --safe-t: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-right, 0px);
  --safe-l: env(safe-area-inset-bottom, 0px);
  transform: translate(-50%, -50%) rotate(-90deg);
}
#app[data-rotation="90"] {
  --safe-t: env(safe-area-inset-right, 0px);
  --safe-r: env(safe-area-inset-bottom, 0px);
  --safe-b: env(safe-area-inset-left, 0px);
  --safe-l: env(safe-area-inset-top, 0px);
  transform: translate(-50%, -50%) rotate(90deg);
}

@supports (height: 1svh) {
  #app {
    --app-h: 100svh;
  }
}
/*
 * Écriture à la main des prédictions : Caveat, embarquée avec l'app (public/fonts/), et non
 * téléchargée depuis un serveur de polices — l'app est hors-ligne, et sa Content-Security-Policy
 * n'autorise que ses propres fichiers. Elle est donc la même sur tous les appareils.
 *
 * Les polices système suivent, au cas où le fichier manquerait : Bradley Hand et Noteworthy sur
 * iPhone et iPad, Segoe Script et Ink Free sur Windows, la cursive du système en dernier recours.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #071a0f;
  color: #f1ede4;
}

body {
  position: fixed;
  inset: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

[hidden] {
  display: none !important;
}

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

/*
 * Le tapis : un feutre vert de table de jeu, éclairé au centre et qui s'assombrit vers les bords,
 * avec un grain fin pour la texture du drap. Décor seulement — rien ne bouge pendant la routine,
 * et tout reste assez sombre pour que les cartes claires s'en détachent.
 */
#app {
  background: repeating-linear-gradient(58deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 3px), repeating-linear-gradient(-58deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px), radial-gradient(90% 62% at 50% 34%, rgba(255, 246, 214, 0.13), transparent 70%), radial-gradient(130% 95% at 50% 42%, #1a5130, #10361f 45%, #071a0f 100%);
}

#stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);
  touch-action: none;
  isolation: isolate;
}

/*
 * La carte, seule au centre du tapis : celle des six prédictions, en plus grand.
 *
 * Deux transformations se superposent, chacune sur son élément pour ne pas se gêner :
 *   .carte-pivot  la retourne (rotateY) ;
 *   .carte-face   le dos et l'avant, dos à dos (backface-visibility).
 */
#table {
  /*
   * La plus grande carte qui tienne dans la place disponible : le rapport 2,5 × 3,5 pouces
   * d'une carte à jouer commande sa largeur, et elle ne dépasse ni 94 % de la largeur ni 90 %
   * de la hauteur libre — qu'elle soit sur un téléphone haut, court, ou pivoté avec lui.
   */
  --ratio: .714;
  --dispo-h: calc(var(--app-h) - var(--safe-t) - var(--safe-b) - 32px);
  --carte-h: min(
  	calc(var(--app-w) * .94 / var(--ratio)),
  	calc(var(--dispo-h) * .9),
  	680px
  );
  --carte-w: calc(var(--carte-h) * var(--ratio));
  --rayon: clamp(12px, calc(var(--carte-w) * .055), 26px);
  --marge: clamp(7px, calc(var(--carte-w) * .038), 16px);
  position: relative;
  width: var(--carte-w);
  height: var(--carte-h);
}

/*
 * Les quatre couleurs de dos, pour la carte de la scène comme pour les vignettes du menu
 * (styles/_menu.scss).
 *   --dos-clair / --dos-fonce  le fond, du haut vers le bas ;
 *   --trait                    le dessin du dos (stage/dos.ts), doré sur fond sombre, encre sur blanc.
 */
.carte,
.vignette {
  --dos-clair: #23242b;
  --dos-fonce: #0e0f13;
  --trait: #c8a15a;
}
.carte[data-couleur=rouge],
.vignette[data-couleur=rouge] {
  --dos-clair: #93222a;
  --dos-fonce: #430e13;
  --trait: #e8ca88;
}
.carte[data-couleur=bleu],
.vignette[data-couleur=bleu] {
  --dos-clair: #23508f;
  --dos-fonce: #0b1c38;
  --trait: #ddc88c;
}
.carte[data-couleur=blanc],
.vignette[data-couleur=blanc] {
  --dos-clair: #f4eee2;
  --dos-fonce: #d9d0bc;
  --trait: #2f3442;
}

.carte {
  --fit: 1;
  position: absolute;
  inset: 0;
  perspective: 1200px;
}

.carte-pivot {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.62s cubic-bezier(0.4, 0.02, 0.2, 1);
}

.carte.retournee .carte-pivot {
  transform: rotateY(180deg);
}

.carte-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: var(--rayon);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 36px rgba(0, 0, 0, 0.45);
}

/* ---------- Le dos ---------- */
.dos {
  background: linear-gradient(155deg, var(--dos-clair), var(--dos-fonce));
  box-shadow: inset 0 0 0 var(--marge) #f3ecdd, inset 0 0 0 calc(var(--marge) + 1px) rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 36px rgba(0, 0, 0, 0.45);
  color: var(--trait);
}

/**
 * Le motif du dos, dessiné à l'intérieur de la marge de papier. Il occupe exactement la place
 * qu'il lui reste, quelle que soit la taille de la carte (le SVG s'étire avec elle).
 */
.dos-motif {
  position: absolute;
  inset: calc(var(--marge, 3px) + 1px);
  display: block;
  width: auto;
  height: auto;
}

/* ---------- L'avant : la prédiction ---------- */
.avant {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: clamp(14px, 7%, 34px) clamp(6px, 2.5%, 14px);
  transform: rotateY(180deg);
  background: radial-gradient(120% 90% at 50% 30%, #fbf6ea, #f3ecdd 58%, #ded3bd 140%);
  box-shadow: inset 0 0 0 1px rgba(28, 39, 67, 0.16), 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 36px rgba(0, 0, 0, 0.45);
  color: #1c2743;
  text-align: center;
}

.carte-corps {
  width: 100%;
  position: relative;
  z-index: 1;
}

/*
 * Le bloc écrit : la prédiction et son soulignement. Il se serre sur le texte (largeur du contenu)
 * pour être mesuré tel quel (stage/carte.ts : fit).
 */
.ecriture {
  display: inline-block;
  font-size: calc(var(--fit) * 38px);
}

.soulignement {
  display: block;
  width: 100%;
  height: 0.26em;
  margin-top: -0.03em;
  color: inherit;
  overflow: visible;
  /*
   * Le trait a la grosseur des lettres. Deux précautions pour cela : l'épaisseur est donnée en
   * `em`, donc relative à la taille du texte, et « non-scaling-stroke » l'empêche de suivre
   * l'étirement du repère du dessin — sans quoi le trait s'amincirait sur les mots longs et
   * s'épaissirait sur les courts.
   */
}
.soulignement path {
  stroke-width: 0.075em;
  vector-effect: non-scaling-stroke;
}

/*
 * La pièce de 20 centimes, dessinée sous la prédiction (stage/dessin-piece.ts). Sa taille est
 * donnée en `em` : elle grandit avec le texte, et l'ajustement (stage/carte.ts) la mesure avec lui.
 */
.piece {
  display: block;
  width: 2.7em;
  height: 2.7em;
  margin: 0.18em auto 0;
  color: inherit;
  overflow: visible;
}

.prediction {
  margin: 0;
  /*
   * Une écriture penchée déborde de la case que le navigateur mesure : l'encre d'un « ! » ou
   * d'une majuscule inclinée sort de sa largeur d'avance, et le mot venait frôler le bord de la
   * carte. Cette marge entre dans la mesure de l'ajustement (stage/carte.ts), et comme elle est
   * donnée en `em`, elle grandit avec le texte.
   */
  padding: 0.06em 0.14em;
  font-family: "Caveat", "Bradley Hand", "Noteworthy", "Segoe Script", "Ink Free", cursive;
  font-weight: 600;
  line-height: 1.22;
  color: #1c2743;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  /*
   * Jamais de coupure automatique : une ligne reste d'un seul tenant, et c'est le retour à la
   * ligne écrit dans content/predictions.ts qui décide où ça casse. L'ajustement (stage/carte.ts)
   * réduit alors la taille jusqu'à ce que la plus large des lignes tienne dans la carte.
   */
  white-space: nowrap;
  hyphens: none;
}

#table.no-anim .carte-pivot {
  transition: none;
}

#hold-ring {
  position: fixed;
  pointer-events: none;
  z-index: 30;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  opacity: 0;
}
#hold-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
#hold-ring circle {
  fill: none;
  stroke-width: 6;
}
#hold-ring .track {
  stroke: rgba(241, 237, 228, 0.18);
}
#hold-ring .fill {
  stroke: #c8a15a;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
}
#hold-ring.run {
  animation: ring-show 0.2s ease var(--ring-delay) forwards;
}
#hold-ring.run .fill {
  animation: ring-fill var(--ring-duration) linear var(--ring-delay) forwards;
}

@keyframes ring-show {
  to {
    opacity: 1;
  }
}
@keyframes ring-fill {
  to {
    stroke-dashoffset: 0;
  }
}
#menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  background: #071a0f;
  color: #f1ede4;
}

.sheet {
  width: 100%;
  max-width: 560px;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
  padding: calc(var(--safe-t) + 22px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 32px) calc(var(--safe-l) + 16px);
}
.sheet button {
  min-height: 46px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 15px;
  color: #f1ede4;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(241, 237, 228, 0.14);
  cursor: pointer;
}
.sheet button.primary {
  border-color: transparent;
  background: #c8a15a;
  color: #1b1408;
  font-weight: 600;
}
.sheet button.link {
  width: 100%;
  margin-top: 6px;
  border: none;
  background: none;
  color: rgba(241, 237, 228, 0.6);
  font-size: 13px;
  text-decoration: underline;
}

.menu-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}
.menu-head h1 {
  margin: 0;
  font: 400 30px/1.1 "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "Noto Serif", Georgia, serif;
}
.menu-head span {
  color: rgba(241, 237, 228, 0.6);
  font-variant-numeric: tabular-nums;
}

.menu-version {
  -webkit-user-select: text;
  user-select: text;
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(241, 237, 228, 0.6);
  font-variant-numeric: tabular-nums;
}

.card {
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #151518;
  border: 1px solid rgba(241, 237, 228, 0.08);
}

.row-label {
  margin-bottom: 10px;
  font-size: 15px;
  color: rgba(241, 237, 228, 0.6);
}

.hint {
  margin: 0 0 8px;
  font-size: 13px;
  color: rgba(241, 237, 228, 0.6);
}

.slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.slider-label output {
  color: #c8a15a;
  font-variant-numeric: tabular-nums;
}

input[type=range] {
  width: 100%;
  height: 32px;
  margin: 0;
  accent-color: #c8a15a;
}

.slider-hint {
  margin: 6px 0 0;
}

.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.35);
}
.sheet .seg button {
  min-height: 40px;
  border-color: transparent;
  background: transparent;
}
.sheet .seg button[aria-checked=true] {
  background: rgba(200, 161, 90, 0.18);
  color: #c8a15a;
  box-shadow: inset 0 0 0 1px #c8a15a;
}

.options {
  display: grid;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
  font-size: 15px;
  cursor: pointer;
}
.toggle-row + .toggle-row {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(241, 237, 228, 0.08);
}
.toggle-row input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #c8a15a;
}

.status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}
.status small {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: rgba(241, 237, 228, 0.6);
}

.dot {
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #5d5a55;
}
.dot.lock {
  background: #7fe0a0;
  box-shadow: 0 0 10px rgba(127, 224, 160, 0.7);
}
.dot.video {
  background: #f0c36a;
  box-shadow: 0 0 10px rgba(240, 195, 106, 0.6);
}

.about {
  display: grid;
  gap: 8px;
}

.about-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 14px;
  color: rgba(241, 237, 228, 0.6);
}
.about-row span {
  -webkit-user-select: text;
  user-select: text;
  color: #f1ede4;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 12px;
}

.help {
  font-size: 14px;
  color: rgba(241, 237, 228, 0.6);
}
.help summary {
  cursor: pointer;
}
.help ul {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.6;
}

/*
 * Choix du dos et de la couleur : on regarde les cartes, on ne lit pas leurs noms. Chaque bouton
 * porte une petite carte face cachée, dessinée exactement comme celles de la scène (stage/dos.ts).
 * Le nom du style reste en aria-label, pour les lecteurs d'écran.
 */
.vignettes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sheet .vignettes button {
  min-height: 0;
  padding: 6px;
  border-radius: 10px;
  border-color: transparent;
  background: rgba(0, 0, 0, 0.3);
}
.sheet .vignettes button[aria-checked=true] {
  border-color: #c8a15a;
  background: rgba(200, 161, 90, 0.16);
}
.vignettes.couleurs {
  grid-template-columns: repeat(4, 1fr);
}

.vignette {
  --marge: 3px;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 5/7;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(155deg, var(--dos-clair), var(--dos-fonce));
  box-shadow: inset 0 0 0 var(--marge) #f3ecdd, inset 0 0 0 calc(var(--marge) + 1px) rgba(0, 0, 0, 0.3);
  color: var(--trait);
}

.mes-tours {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin: 4px 0 12px;
  border-radius: 12px;
  font-size: 15px;
  color: #f1ede4;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(241, 237, 228, 0.14);
  text-decoration: none;
}