/* ============================================================================
   ASTROPOST — Socle
   ----------------------------------------------------------------------------
   Remise à zéro minimale, fond de ciel, typographie de base, accessibilité.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Le jeu n'a qu'une apparence : on le déclare au navigateur, pour que les
     contrôles natifs (champs, cases) s'accordent au lieu de trancher. */
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--app-background);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--line-normal);
  -webkit-font-smoothing: antialiased;
}

/* ── Le fond de ciel ──────────────────────────────────────────────────────
   DESIGN.md demande un fond de ciel étoilé SOUS TOUS LES ÉCRANS, panneaux et
   pages poussées comprises. Deux dégradés radiaux et un linéaire suffisent à
   le suggérer sans charger une image.

   `background-attachment: fixed` : le ciel ne défile pas avec le contenu.
   C'est ce qui donne l'impression d'un décor, et non d'un papier peint. */

.ap-sky {
  background-image:
    radial-gradient(1100px 620px at 78% -8%, rgba(89, 140, 242, .20), transparent 62%),
    radial-gradient(760px 520px at 12% 4%,  rgba(179, 153, 242, .13), transparent 60%),
    linear-gradient(180deg, var(--sky-deep), var(--app-background) 46%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Les étoiles : des points FIXES. Aucune animation — DESIGN.md demande des
   mouvements lents, et un fond qui scintille se lit mal. Purement
   décoratives, donc `aria-hidden` sur l'élément et `pointer-events: none`. */
.ap-stars {
  position: fixed;
  inset: 0;
  z-index: var(--z-stars);
  pointer-events: none;
  opacity: .55;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, var(--star-tint), transparent),
    radial-gradient(1.1px 1.1px at 28% 62%, var(--star-tint), transparent),
    radial-gradient(1.6px 1.6px at 44% 12%, var(--star-tint), transparent),
    radial-gradient(1px   1px   at 58% 78%, var(--star-tint), transparent),
    radial-gradient(1.5px 1.5px at 71% 32%, var(--star-tint), transparent),
    radial-gradient(1.1px 1.1px at 86% 68%, var(--star-tint), transparent),
    radial-gradient(1.3px 1.3px at 92% 14%, var(--star-tint), transparent),
    radial-gradient(1px   1px   at  6% 84%, var(--star-tint), transparent),
    radial-gradient(1.2px 1.2px at 36% 92%, var(--star-tint), transparent),
    radial-gradient(1px   1px   at 64% 48%, var(--star-tint), transparent),
    radial-gradient(1.2px 1.2px at 52% 26%, var(--star-tint), transparent),
    radial-gradient(1px   1px   at 18% 44%, var(--star-tint), transparent);
}

/* ── Typographie ────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: var(--weight-semibold);
  line-height: var(--line-tight);
}

h1 { font-size: var(--text-large-title); }
h2 { font-size: var(--text-title); }
h3 { font-size: var(--text-headline); }
h4 { font-size: var(--text-subheadline); }

p { margin: 0; }

/* Un paragraphe qui se lit d'une traite mérite un interlignage plus large et
   une largeur bornée. */
.ap-prose {
  max-width: var(--reading-width);
  line-height: var(--line-relaxed);
  color: var(--text-secondary);
}
.ap-prose > * + * { margin-top: var(--space-md); }

a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Les chiffres qui changent EN PLACE doivent être en chasse fixe : un compte
   à rebours dont les chiffres sautent est désagréable. */
.ap-numeric { font-variant-numeric: tabular-nums; }

.ap-text-secondary { color: var(--text-secondary); }
.ap-caption  { font-size: var(--text-caption);  color: var(--text-secondary); }
.ap-footnote { font-size: var(--text-footnote); color: var(--text-secondary); }

/* ── Accessibilité ──────────────────────────────────────────────────────── */

/* Un anneau de focus VISIBLE, et le même partout. Le jeu se joue aussi au
   clavier sur le web, ce qui n'existait pas sur iOS : c'est la seule chose
   que le web doit AJOUTER au design, et non adapter. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--field-radius);
}

/* Réservé aux lecteurs d'écran. */
.ap-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Deux réglages doivent être respectés : celui du système, et celui du jeu
   (AppSettings.reducedMotion, qui pose l'attribut sur <html>). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

html[data-reduced-motion="true"] *,
html[data-reduced-motion="true"] *::before,
html[data-reduced-motion="true"] *::after {
  animation-duration: 1ms !important;
  transition-duration: 1ms !important;
}

/* Une cible tactile ne descend pas sous 44 px : c'est la recommandation
   d'Apple, et elle vaut autant pour un doigt sur un navigateur.
   
   Appliquée aux CLASSES de contrôle, et non à `button` tout court : une règle
   sur l'élément écrasait la taille des repères de la carte du ciel, qui sont
   des boutons de 14 px et qui devenaient des ellipses de 44. Ceux-là gagnent
   leur cible tactile autrement — par une zone invisible autour d'eux, ce que
   fait déjà `contentShape` sur iOS. */
.ap-button,
.ap-tabbar__item,
.ap-pane-selector__item,
.ap-sidebar__item,
.ap-toggle__switch,
.ap-card--interactive {
  min-height: 44px;
}
.ap-compact-target { min-height: 32px; }