/* ─────────────────────────────────────────────────────────────────────────────
   C'est l'heure — le jeu.

   Un téléphone tenu à une main, dans une pièce mal éclairée, qui passe de
   personne en personne. Tout découle de là : du très grand texte, des cibles
   qu'on n'a pas besoin de viser, et rien à lire en petit.

   Les couleurs et les polices sont dans « theme.css ».
   ───────────────────────────────────────────────────────────────────────────── */

html, body { height: 100%; }

body {
  overflow: hidden;
  /* Un appui long ne doit ni sélectionner du texte, ni ouvrir la loupe d'iOS :
     le geste d'entrée en dépend, et un joueur qui appuie fort sur un gage n'a
     rien à sélectionner non plus. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ── Les écrans ───────────────────────────────────────────────────────────── */

.ecran {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem 1.25rem;
  padding-top: max(2rem, env(safe-area-inset-top));
  padding-bottom: max(2rem, env(safe-area-inset-bottom));
  /* Caché NET, pas en fondu. Deux écrans qui se fondent l'un dans l'autre
     superposent leurs textes pendant une demi-seconde, et ce qu'on lit alors
     n'est ni l'un ni l'autre. Seul l'écran qui ARRIVE est animé. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ecran.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: paraitre .3s ease both;
}

@keyframes paraitre {
  from { opacity: 0; transform: translateY(.5rem); }
  to   { opacity: 1; transform: none; }
}

/* Une animation d'apparition est un agrément, pas une information : qui a
   demandé moins de mouvement n'en a pas besoin. */
@media (prefers-reduced-motion: reduce) {
  .ecran.visible { animation: none; }
}

/* Sur la façade, l'enseigne est un peu plus sobre : c'est le nombre qui doit
   attirer l'œil, pas le titre. */
/* Deux classes, pas une : « .enseigne » seule a la même spécificité et, comme
   elle est déclarée plus bas, sa marge nulle écrasait celle-ci sans bruit.
   L'espace au-dessus du nombre tombait à zéro.

   Le nombre doit se trouver à égale distance du titre au-dessus et de la
   légende en dessous. Mesuré : la boîte du texte déborde ses chiffres de 10 px
   des DEUX côtés — le débord étant symétrique, égaliser les boîtes suffit à
   égaliser ce que l'œil voit. D'où 2 × le rythme ici, et deux écarts de 1,3 rem
   plus bas qui font la même somme. */
.enseigne.enseigne-facade {
  --rythme: clamp(1rem, 2.6vh, 1.35rem);
  margin-bottom: calc(var(--rythme) * 2);
}

/* ── La façade : une horloge ──────────────────────────────────────────────── */

#unix {
  display: block;
  font-family: var(--mono);
  font-size: clamp(2.4rem, 13vw, 5.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  touch-action: manipulation;
  transition: color .25s ease, text-shadow .25s ease;
}

/* Le seul aveu de l'appui, et il n'arrive qu'après une seconde : un doigt posé
   par hasard lâche avant, et ne découvre donc jamais qu'il y avait quelque
   chose à découvrir. */
#unix.tenu {
  color: var(--accent);
  text-shadow: 0 0 2.5rem var(--accent-voile);
}

.jauge {
  /* 1,3 rem ici et autant sous le trait : les deux, plus l'épaisseur du filet,
     font la marge posée au-dessus du nombre. C'est ce qui le met à équidistance. */
  margin: 1.3rem auto 0;
  /* Le trait de l'appui. Au repos il ne doit presque pas se voir : c'est une
     jauge, pas un séparateur, et un filet trop net découpe la page en deux. */
  width: min(14rem, 60vw);
  height: 1px;
  background: var(--voile-trait);
  overflow: hidden;
}
.jauge span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width .1s linear;
}

.legende {
  margin-top: 1.3rem;
  color: var(--encre-faible);
  font-size: clamp(.8rem, 3.4vw, .95rem);
  letter-spacing: .06em;
}

.date {
  margin-top: .45rem;
  color: var(--encre-faible);
  font-size: clamp(.75rem, 3vw, .88rem);
  font-variant-numeric: tabular-nums;
}

/* ── Le tirage ────────────────────────────────────────────────────────────── */

/* Quatre lignes, du haut vers le bas : l'enseigne, les trois catégories, le
   curseur, l'action. Chacune occupe toute la largeur de la colonne — c'est cet
   alignement qui fait l'ordre, plus que les écarts. */
/* Un rythme UNIQUE entre toutes les lignes. Ce qui n'allait pas n'était pas la
   taille des éléments mais leurs écarts : un grand vide sous le titre, puis
   trois blocs tassés. L'œil lit d'abord les intervalles. */
.colonne {
  /* Un rythme unique, nommé une fois. Les écarts en découlent au lieu d'être
     choisis à l'œil : c'est la seule façon qu'ils restent proportionnés quand
     l'écran change de taille. */
  --rythme: clamp(1rem, 2.6vh, 1.35rem);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rythme);
  width: min(24rem, 92vw);
}

/* L'horloge au-dessus du nom : un logo, pas une puce de liste. */
.enseigne {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  /* Aucune marge : l'enseigne est séparée par le rythme, comme tout le reste.
     C'est la régularité qui fait tenir la colonne, pas la respiration qu'on
     croit devoir donner au titre — j'ai essayé 3 fois puis 2 fois le rythme,
     et les deux se voyaient. */
  margin-bottom: 0;
}

/* En trait plutôt qu'en aplat : un dessin plein devient une tache dès qu'il
   rapetisse, et c'est la même horloge que celle de la façade — ce qu'on voit
   en entrant est ce qu'on retrouve ici. */
.horloge {
  width: clamp(3.4rem, 16vw, 4.2rem);
  height: clamp(3.4rem, 16vw, 4.2rem);
  flex: 0 0 auto;
  fill: none;
  stroke: var(--accent);
  /* Le trait s'affine à mesure que le dessin grandit : à 4 rem, 1,5 px faisait
     lourd et le cercle paraissait dessiné au feutre. */
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.titre-jeu {
  font: 400 clamp(1.25rem, 5.2vw, 1.5rem)/1.15 var(--serif);
  letter-spacing: .03em;
  margin: 0;
  color: var(--encre-douce);
}
.titre-jeu span { color: var(--accent); font-weight: 600; }

/* ── Ligne 1 : les trois catégories ───────────────────────────────────────── */

/* Trois carrés, centrés, plus petits que le bouton Tirer : ce sont des
   raccourcis vers une catégorie précise, et ils ne doivent pas prétendre au
   même rang que l'action principale. */
/* Trois carrés centrés, à 72 % de la colonne. Pleine largeur ils faisaient
   7,4 rem et écrasaient le bouton qu'ils accompagnent ; à 4 rem ils passaient
   pour des réglages. Entre les deux, ils pèsent ce qu'ils valent. */
.forcer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
  width: 72%;
}

/* Carrés, et occupant toute la largeur de la colonne : ils déclenchent un
   tirage entier, comme le bouton, et des vignettes les faisaient passer pour
   des réglages. « aspect-ratio » les garde carrés quelle que soit la largeur —
   une hauteur fixe se décalerait dès que l'écran change. */
.forcer button {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--trait);
  border-radius: 1.4rem;
  background: var(--fond-releve);
  color: var(--encre-douce);
  cursor: pointer;
  padding: 0;
  transition: color .16s ease, border-color .16s ease, background .16s ease, transform .1s ease;
}

.forcer button svg {
  /* Les carrés ayant grandi, une icône à 45 % y flottait. À 58 %, le bloc est
     habité sans que le dessin touche les bords. */
  width: 58%;
  height: 58%;
  fill: currentColor;
}

.forcer button:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-voile);
}
.forcer button:active { transform: scale(.97); }

/* Éteint, et non caché : chercher un bouton disparu déroute plus que voir qu'il
   n'y a rien à en tirer. */
.forcer button:disabled {
  opacity: .28;
  cursor: default;
  transform: none;
}
.forcer button:disabled:hover {
  color: var(--encre-douce);
  border-color: var(--trait);
  background: var(--fond-releve);
}

/* ── Ligne 2 : le curseur ─────────────────────────────────────────────────── */

.curseur {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  padding: .2rem;
  border-radius: 999px;
  background: var(--fond-creux);
  border: 1px solid var(--trait);
  isolation: isolate;
}

/* La pastille glisse d'un tiers à l'autre : c'est elle qui donne l'allure d'un
   curseur à ce qui est, en vérité, trois cibles franches. */
.pastille {
  position: absolute;
  z-index: 0;
  top: .2rem;
  bottom: .2rem;
  left: .2rem;
  width: calc((100% - .4rem) / 3);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent-haut), var(--accent-bas));
  box-shadow: var(--ombre-pastille);
  transition: transform .26s cubic-bezier(.32, .72, .28, 1);
}

.curseur button {
  position: relative;
  z-index: 1;
  font: inherit;
  font-size: clamp(.78rem, 3.4vw, .88rem);
  min-height: 2.9rem;
  padding: .5rem .25rem;
  border: 0;
  background: none;
  color: var(--encre-douce);
  cursor: pointer;
  border-radius: 999px;
  transition: color .2s ease;
  white-space: nowrap;
}

.curseur button[aria-checked="true"] {
  color: var(--accent-encre);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .pastille { transition: none; }
}

/* ── Ligne 3 : l'action ───────────────────────────────────────────────────── */

.agir { width: 100%; }

#bouton-tirer {
  width: 100%;
  min-height: 4rem;
  font: 600 clamp(1rem, 4.2vw, 1.15rem)/1 var(--sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-encre);
  background: linear-gradient(180deg, var(--accent-haut), var(--accent-bas));
  border: 0;
  border-radius: 1.1rem;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--lustre) inset, var(--ombre-portee);
  transition: transform .1s ease, filter .16s ease;
}

#bouton-tirer:hover { filter: brightness(1.06); }
#bouton-tirer:active { transform: translateY(1px) scale(.995); }

#bouton-tirer:disabled {
  background: var(--fond-releve);
  color: var(--encre-faible);
  box-shadow: none;
  cursor: default;
  transform: none;
}

/* Sous le bouton, et discret : c'est une indication, pas une commande. */
.reste {
  margin: 1rem 0 0;
  text-align: center;
  color: var(--encre-faible);
  font-size: .8rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

/* ── Le gage ──────────────────────────────────────────────────────────────── */

/* Le blason dit la catégorie du gage sans l'écrire : celui qui tient le
   téléphone sait d'un coup d'œil dans quoi il vient de tirer, y compris quand
   il a forcé au-delà du curseur. */
.blason {
  display: block;
  width: clamp(2rem, 9vw, 2.5rem);
  height: clamp(2rem, 9vw, 2.5rem);
  margin: 0 auto 1.25rem;
  fill: var(--accent);
  opacity: .85;
}

.annonce {
  color: var(--accent);
  font: 600 clamp(.9rem, 4vw, 1.05rem)/1 var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 0 0 1.75rem;
  opacity: .9;
}

.gage {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6.8vw, 2.6rem);
  line-height: 1.26;
  margin: 0 auto;
  max-width: 20ch;
  text-wrap: balance;
}

.durees {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: 3rem;
}

.durees button {
  font: inherit;
  font-size: .95rem;
  /* 3 rem de haut : on vise avec le pouce, pas avec les yeux. */
  min-height: 3rem;
  padding: .75rem 1.2rem;
  border: 1px solid var(--trait);
  border-radius: .85rem;
  background: var(--fond-releve);
  color: var(--encre);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .1s ease;
}
.durees button:hover {
  border-color: var(--accent);
  background: var(--accent-voile);
}
.durees button:active { transform: scale(.97); }

/* « Sans minuteur » n'est pas une durée : le trait discontinu le dit sans
   l'écrire, et le met en retrait des quatre autres. */
.durees button.sans {
  border-style: dashed;
  color: var(--encre-faible);
}

.secondaire {
  margin-top: 2rem;
  background: none;
  border: 0;
  color: var(--encre-faible);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  padding: .75rem 1rem;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.secondaire:hover { color: var(--encre-douce); }

/* ── Le compte à rebours ──────────────────────────────────────────────────── */

.rappel {
  color: var(--encre-douce);
  font-family: var(--serif);
  font-size: clamp(1rem, 4vw, 1.2rem);
  max-width: 26ch;
  margin: 0 auto 2.5rem;
  line-height: 1.35;
}

#chiffres {
  font-family: var(--mono);
  font-size: clamp(4rem, 26vw, 11rem);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.03em;
  transition: color .3s ease;
}

/* Les dix dernières secondes. Le changement doit se voir du bout de la pièce. */
#chiffres.bientot { color: var(--accent); }
#chiffres.fini { color: var(--bien); }

.commandes {
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin-top: 3rem;
}

.commandes button {
  font: inherit;
  min-height: 3rem;
  padding: .75rem 1.6rem;
  border: 1px solid var(--trait);
  border-radius: .85rem;
  background: var(--fond-releve);
  color: var(--encre);
  cursor: pointer;
  transition: border-color .16s ease, filter .16s ease, transform .1s ease;
}
.commandes button:hover { border-color: var(--accent); }
.commandes button:active { transform: scale(.97); }

.commandes button.premier {
  background: linear-gradient(180deg, var(--accent-haut), var(--accent-bas));
  border-color: transparent;
  color: var(--accent-encre);
  font-weight: 600;
  box-shadow: 0 1px 0 var(--lustre) inset;
}
.commandes button.premier:hover { filter: brightness(1.06); }

/* « Sans minuteur » : rien ne court, et le gage reprend toute la place. Il faut
   qu'il reste lisible tant que le joueur s'en occupe. */
#ecran-minuteur.sans-minuteur #chiffres,
#ecran-minuteur.sans-minuteur #pause { display: none; }

#ecran-minuteur.sans-minuteur .rappel {
  color: var(--encre);
  font-size: clamp(1.6rem, 7.5vw, 3rem);
  line-height: 1.22;
  max-width: 22ch;
  margin-bottom: 1rem;
  text-wrap: balance;
}

/* ── Un mot quand quelque chose manque ────────────────────────────────────── */

.souci {
  color: var(--encre-douce);
  max-width: 32ch;
  margin: 0 auto;
  line-height: 1.5;
}
.souci strong { color: var(--encre); display: block; margin-bottom: .75rem; }

/* ── La porte de l'administration ─────────────────────────────────────────── */
/*
   L'horloge de l'enseigne s'ouvre sur l'administration après trois secondes
   d'appui. Deux précautions tactiles, et ce ne sont pas des détails : sans
   « touch-action: none », un appui maintenu sur un téléphone fait défiler la
   page ou ouvre le menu du navigateur, et le geste ne va jamais au bout.
*/
#porte-admin {
  touch-action: none;
  -webkit-touch-callout: none;
  cursor: default;
}

/* L'anneau qui se remplit. Il tourne de -90° pour partir de midi, comme une
   aiguille — 57.8 est la circonférence du cercle de rayon 9,2. */
#porte-admin .anneau {
  /* Pas la couleur du cercle qu'il recouvre : deux traits dorés l'un sur
     l'autre ne font qu'un trait qui épaissit, et on ne lit plus où en est le
     remplissage. En clair, il se détache et la progression se voit d'un coup
     d'œil. */
  stroke: var(--encre);
  stroke-width: 2.4;
  stroke-linecap: round;
  /* Posées ici pour l’état de repos ; le script les recalcule sur la longueur
     réelle du tracé dès le premier appui. */
  stroke-dasharray: 57.8;
  stroke-dashoffset: 57.8;
  transform: rotate(-90deg);
  transform-origin: 12px 12px;
  opacity: 0;
}

#porte-admin.tenu .anneau { opacity: 1; }