/* Couvre-feu — socle commun (propriétaire : agent « Écrans — coque »). Les jetons ci-dessous sont partagés par src/css/coque.css
   et src/css/jeu.css (agent « jeu ») : couleurs, hauteur de fenêtre, marge sous l'action principale, boutons.
   Règles de Fred : la page ne défile JAMAIS (seule une liste défile dans son cadre) ; l'action principale reste à 30 px au moins
   du bas ; aucun texte sous 11 px ; aucune cible sous 44 px. */
:root {
  color-scheme: dark;
  --bg: #0b0d14;
  --panel: #151925;
  --panel-2: #1d2232;
  --line: #2a3045;
  --fg: #ece9e1;
  --muted: #a3a9bd;
  --accent: #e3b04b;
  --accent-fg: #17120a;
  --danger: #e8736b;
  --ok: #78d39b;
  --quartier: #86b7ec;
  --rodeurs: #e8736b;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* la hauteur de la fenêtre : 100vh en repli, 100dvh quand le navigateur le sait (barre d'adresse qui se replie) */
  --hv: 100vh;
  /* sous l'action principale : 30 px au moins au-dessus de la zone sûre basse */
  --marge-bas: calc(var(--safe-b) + 30px);
  --cible: 44px;
  --bouton: 48px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}
@supports (height: 100dvh) { :root { --hv: 100dvh; } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; height: var(--hv); overflow: hidden; background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font); font-size: 16px; line-height: 1.35;
  -webkit-text-size-adjust: 100%; overscroll-behavior: none; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
input, textarea { -webkit-user-select: text; user-select: text; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* Le cadre : un en-tête, une bande d'état, et l'écran qui prend le reste. */
#app { position: relative; height: 100%; height: var(--hv); max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden; }
#screen { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; }
.play { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.noscript { padding: 24px; }

/* Boutons (partagés). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px;
  min-height: var(--bouton); padding: 8px 18px; border: 1px solid transparent; border-radius: 12px;
  background: var(--panel-2); color: var(--fg); font-size: 16px; font-weight: 600; line-height: 1.2; cursor: pointer;
}
.btn.primary { background: var(--accent); color: var(--accent-fg); }
.btn.ghost { background: transparent; border-color: var(--line); }
.btn.small { min-height: var(--cible); padding: 6px 14px; font-size: 15px; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible, .icon-btn:focus-visible, .input:focus-visible, .tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }