/*
  Feuille commune aux quatre pages statiques : la landing et la politique de
  confidentialité, chacune servie en anglais sous /en et en français sous /fr.

  Aucun sélecteur de balise nue : chaque bloc porte une classe, et les balises
  du texte rédigé ne sont stylées que sous .prose, le conteneur de rédaction
  des pages-documents, l'équivalent du conteneur wysiwyg que la convention
  d'intégration exempte.

  Les pages la référencent en absolu (href="/style.css") : elles vivent une
  profondeur plus bas que la feuille, un chemin relatif y résoudrait vers
  /en/style.css.
*/

:root {
  /* Ascenseurs et controles natifs suivent le theme sombre de la page. */
  color-scheme: dark;
  --bg: #06070c;
  --panel: rgba(255, 255, 255, 0.035);
  --line: rgba(255, 255, 255, 0.12);
  --text: #d7dbe6;
  --dim: #8d93a4;
  --cyan: #99ffd9;
  --gold: #ffd933;
}

* { box-sizing: border-box; }

.page {
  margin: 0;
  /* Le fond du body est propagé au canvas, mais reste dimensionné sur la boîte
     du body. Sans cette hauteur minimale, une page courte laisse un canvas plus
     grand que sa boîte, et le no-repeat ci-dessous découvrirait la couleur de
     fond nue sous la lueur. */
  min-height: 100vh;
  padding: clamp(1.5rem, 5vw, 4rem) 1.25rem 4rem;
  background-color: var(--bg);
  /* La lueur est une image unique, posée en haut de page : sans no-repeat elle
     se répète verticalement dès que le canvas dépasse la boîte du body. */
  background-image: radial-gradient(ellipse 90% 55% at 50% 0%, #121631 0%, transparent 70%);
  background-repeat: no-repeat;
  color: var(--text);
  font: 400 clamp(1rem, 0.97rem + 0.15vw, 1.06rem)/1.75 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 46rem; margin: 0 auto; }

/* Sélecteur de langue, en tête de page et aligné à droite. Il est posé dans le
   flux plutôt qu'en position: absolute : sur mobile, un bloc flottant en haut à
   droite recouvrirait le logo, qui occupe toute la largeur. */
.lang {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: clamp(1rem, 3vw, 1.75rem);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
}

.lang a {
  padding: 0.15rem 0.1rem;
  color: var(--dim);
  text-decoration: none;
}

/* La langue courante reste un lien, pour que la cible de clic ne se déplace pas
   d'une page à l'autre. Sa couleur et aria-current disent laquelle est active. */
.lang [aria-current="page"] { color: var(--cyan); }

.lang .sep { color: var(--line); }

@media (hover: hover) {
  .lang a:hover { color: #fff; }
}

.masthead { text-align: center; margin-bottom: clamp(2rem, 6vw, 3.5rem); }

.logo {
  width: min(21rem, 78%);
  height: auto;
  filter: drop-shadow(0 0 2.5rem rgba(153, 255, 217, 0.28));
}

.page-title {
  margin: 1.5rem 0 0.4rem;
  font-size: clamp(1.45rem, 1.1rem + 1.6vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

.updated {
  margin: 0;
  font-size: 0.875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.prose h2,
.board-title {
  margin: 3rem 0 0.9rem;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.01em;
}

.prose h2::before,
.board-title::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.6rem;
  border: 2px solid var(--gold);
  transform: rotate(45deg) translateY(-0.1rem);
  opacity: 0.8;
}

.prose p,
.prose li { margin: 0 0 0.9rem; }
.prose ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.prose li::marker { color: var(--cyan); }
.prose strong { color: #fff; font-weight: 600; }

.prose a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

@media (hover: hover) {
  .prose a:hover { color: #fff; }
}

/* Le focus clavier couvre tous les liens, les onglets du classement et le
   panneau qu'ils pilotent, chacun designe par sa classe. */
.lang a:focus-visible,
.action:focus-visible,
.prose a:focus-visible,
.board-tab:focus-visible,
.board-panel:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 0.1rem;
}

.prose code,
.domain {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: var(--gold);
  /* break-word et non anywhere : les <wbr> posés après les points font céder les
     domaines sur une frontière lisible plutôt qu'au milieu d'un mot. */
  overflow-wrap: break-word;
}

.site-footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9em;
  color: var(--dim);
  text-align: center;
}

/* Landing. Le logo tient lieu de titre a l'ecran ; le <h1> porte aussi le texte,
   masque ici et revele a l'impression ou le logo ne ressort pas. */

.hero { margin-bottom: clamp(2.5rem, 8vw, 4rem); }

.hero .hero-title { margin: 0; }

.hero-title-text { display: none; }

.hero .logo { width: min(26rem, 84%); }

.tagline {
  margin: 1.75rem auto 0;
  max-width: 32rem;
  font-size: 1.08em;
  color: var(--text);
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
}

.features li { margin: 0; }

.features li::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.55rem;
  border: 1px solid var(--cyan);
  transform: rotate(45deg) translateY(-0.05rem);
}

.actions { margin: 0 0 0.9rem; text-align: center; }

/* Dans le hero, le lien Google Play suit la liste des atouts : il reprend leur
   respiration verticale au lieu de la marge serrée du bas de page. */
.hero .actions { margin: 1.75rem 0 0; }

/* Lien mis en avant. Bordure plutôt que fond plein : la page reste sombre et
   le lien ne se confond pas avec un bouton d'action du jeu. */
.action {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--panel);
  color: var(--cyan);
  text-decoration: none;
  font-size: 0.95em;
  letter-spacing: 0.04em;
  transition: border-color 200ms ease-in-out, color 200ms ease-in-out, background-color 200ms ease-in-out;
}

@media (hover: hover) {
  .action:hover {
    border-color: var(--cyan);
    background: rgba(153, 255, 217, 0.08);
    color: #fff;
  }
}

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

/* Tableau des scores, rempli par /scoreboard.js. La section entière est masquée
   tant que le script n'a pas pris la main, et un seul de ses états est visible
   à la fois. */

.board { margin: 0 0 clamp(2.5rem, 8vw, 4rem); }

/* [hidden] ne pèse rien face au display posé sur la liste : la règle est reprise
   ici, plus spécifique, pour que l'état masqué l'emporte. */
.board[hidden],
.board [hidden] { display: none; }

/* Onglets du classement. Le libellé du top 100 ne tient pas dans une rangée
   d'onglets soulignés dès 320 px : sur mobile les onglets sont des boutons
   centrés, qui passent à la ligne sans se serrer. À partir de la tablette, la
   largeur suffit et ils redeviennent des onglets soulignés. */
.board-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

/* font: inherit parce qu'un bouton ne prend pas la police de la page. */
.board-tab {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  background: var(--panel);
  color: var(--dim);
  font: inherit;
  font-size: 0.88em;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: border-color 200ms ease-in-out, color 200ms ease-in-out;
}

/* L'onglet actif prend la couleur d'accent. Le sélecteur s'accroche à
   aria-selected, que le script tient déjà à jour : une classe posée en plus
   dirait la même chose une seconde fois, et pourrait en diverger. */
.board-tab[aria-selected="true"] {
  border-color: var(--cyan);
  color: #fff;
}

/* À partir de la tablette, les onglets posent sur une ligne de base commune,
   sans boîte ni fond pour ne pas ressembler aux liens .action : seul un trait
   sous l'onglet actif marque la sélection. La marge négative fait chevaucher le
   soulignement sur la ligne de base du bandeau, plutôt que de l'empiler dessus. */
@media (min-width: 768px) {
  .board-tabs {
    justify-content: flex-start;
    gap: 0.4rem 1.4rem;
    border-bottom: 1px solid var(--line);
  }

  .board-tab {
    margin-bottom: -1px;
    padding: 0.45rem 0.2rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
  }

  .board-tab[aria-selected="true"] {
    border-color: transparent;
    border-bottom-color: var(--cyan);
  }
}

@media (hover: hover) {
  .board-tab:hover {
    color: #fff;
  }
}

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

/* Chargement, classement vide, erreur : les trois messages partagent la boîte
   d'une ligne du classement, la page ne bouge donc pas quand l'un cède la place
   à la liste. */
.board-state {
  margin: 0;
  padding: 1.35rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  color: var(--dim);
  text-align: center;
}

.board-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.board-row {
  display: grid;
  /* Colonne de rang à largeur fixe, juste de quoi loger deux chiffres : chaque
     ligne est sa propre grille, une colonne auto ferait démarrer les pseudos
     plus loin sur les rangs à deux chiffres que sur les autres. */
  grid-template-columns: 1.4rem 1fr auto;
  align-items: baseline;
  gap: 0 0.9rem;
  margin: 0;
  padding: 0.6rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.35rem;
}

/* Le rang est calé à gauche : aligné à droite dans sa colonne, un rang à un
   chiffre décrochait du bord de la ligne. */
.board-rank {
  color: var(--dim);
  font-size: 0.85em;
  letter-spacing: 0.06em;
}

/* Le podium prend la couleur d'accent. nth-child plutôt qu'une classe posée par
   le script : le rang est déjà la position dans la liste. */
.board-row:nth-child(-n + 3) .board-rank { color: var(--gold); }

/* anywhere et non break-word : un pseudo est un mot unique, sans espace où
   céder, et il peut aller jusqu'à vingt caractères. */
.board-pseudo {
  color: #fff;
  overflow-wrap: anywhere;
}

.board-score {
  color: var(--cyan);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.95em;
  /* Chiffres de largeur fixe : les scores s'alignent d'une ligne à l'autre. */
  font-variant-numeric: tabular-nums;
}

/* Politique de confidentialité. */

.summary {
  margin: 0;
  padding: 1.35rem 1.5rem 0.6rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cyan);
  border-radius: 0.35rem;
}

.lead { font-size: 1.05em; }

.note {
  padding: 0.9rem 1.1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0.35rem;
  font-size: 0.95em;
  color: var(--dim);
}

.note strong { color: var(--text); }

@media print {
  .page { background: #fff; color: #000; padding: 1cm; }
  /* Sur papier, changer de langue ne veut rien dire. */
  .lang { display: none; }
  /* Le logo est blanc cerne de cyan : sur papier blanc il ne reste rien. Le texte
     du titre, masque a l'ecran, prend sa place. */
  .logo { display: none; }
  .hero-title-text { display: block; }
  .page-title, .prose strong { color: #000; }
  .prose h2, .board-title { color: #000; }
  .prose h2::before, .board-title::before { border-color: #000; }
  .prose a { color: #000; }
  .updated { color: #333; }
  .prose li::marker { color: #000; }
  .tagline { color: #000; }
  .features { color: #333; }
  .features li::before { border-color: #000; }
  .action { border-color: #999; background: none; color: #000; }
  .board-state, .board-row { background: none; border-color: #999; color: #000; }
  /* L'onglet actif est blanc à l'écran : sur papier il ne resterait rien. */
  .board-tabs { border-color: #999; }
  .board-tab { border-color: #999; background: none; color: #000; }
  .board-tab[aria-selected="true"] { border-color: #000; }
  .board-rank, .board-pseudo, .board-score { color: #000; }
  .summary, .note { background: none; border-color: #999; color: #000; }
  .summary { border-left-color: #999; }
  .prose code, .domain { color: #000; }
  .site-footer { color: #000; }
}