/* ============================================================
   Leopar — feuille de styles commune
   Utilisée par toutes les pages (index.php, jeu.php)
   ============================================================ */

/* ============================================================
   1. RESET & BASE
   ============================================================ */

:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --preview-blue: #0066cc;
  --preview-green: #229922;
  --no-entry-red: #d92020;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Bloquer le pull-to-refresh et le bounce iOS au niveau du document */
  overscroll-behavior: none;
}

html, body {
  background: var(--paper) !important;
  color: var(--ink);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow-x: hidden;
  /* Bloquer pinch-zoom et gestes horizontaux, autoriser scroll vertical */
  touch-action: pan-y;
  /* Empêcher la sélection de texte au tap-hold sur iOS */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* ============================================================
   2. SCÈNE (stage, spacer, route)
   ============================================================ */

.scroll-spacer {
  height: 4000vh;
  position: relative;
  background: var(--paper);
}

.stage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  background: var(--paper);
  pointer-events: none;
  z-index: 1;
}

.road-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 5;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
}

.road-path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  will-change: d;
}

/* ============================================================
   3. VOITURES (joueur + obstacle)
   ============================================================ */

.car {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  z-index: 10;
  pointer-events: none;
  will-change: transform;
  transform: translate(-50%, -50%);
}

.obstacle-car {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  z-index: 12;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(-9999px, -9999px, 0);
}

/* ============================================================
   4. PROPS (arbres, éléments décoratifs)
   ============================================================ */

.props {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.prop {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform, opacity;
}

.prop.tree {
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-sizing: border-box;
}

.prop.placeholder {
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 14px 22px;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ============================================================
   5. ICÔNES MATERIAL SYMBOLS
   ============================================================
   Police chargée dans includes/header.php (variable font).
   Usage : <span class="material-symbols-outlined">arrow_upward</span>
*/

.material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
  color: inherit;
  user-select: none;
  pointer-events: none; /* le clic traverse jusqu'au <a> parent */
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* ============================================================
   6. BOUTONS DE BRANCHE (V de sortie)
   ============================================================
   - Mode visiteur : flèche (active) ou croix rouge (branche morte)
   - Mode preview  : crayon (édition) ou + (création)

   NOTE iOS : on sépare :hover (souris uniquement) et :active (touch).
   Sinon Safari mobile demande un double-tap pour activer le lien.
*/

/* --- Bouton de base --- */
.branch-btn {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent; /* supprime le flash gris iOS au tap */
  /* `manipulation` neutralise le délai iOS qui attend de voir si le tap
     est le début d'un swipe (à cause du `touch-action: pan-y` sur body).
     Sans ça, iOS Safari demande un double-tap pour activer le lien. */
  touch-action: manipulation;
  z-index: 50;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 0.5s ease, background 0.15s, color 0.15s;
  will-change: transform, opacity;
}

.branch-btn.visible {
  opacity: 1;
}

/* Hover : uniquement sur devices avec un vrai pointeur (souris/trackpad).
   Léger soulèvement du bouton (-2px) pour un feedback discret.
   Sur mobile (touch) : pas de feedback hover, le spinner au clic suffit.
   On utilise `margin-top` (et pas `transform`) pour ne pas écraser le
   transform calculé en JS qui positionne le bouton sur la branche. */
@media (hover: hover) {
  .branch-btn {
    transition: opacity 0.5s ease, margin-top 0.15s ease;
  }
  .branch-btn:hover {
    margin-top: -2px;
  }
}

/* --- Variante : croix rouge (branche sans tronçon enfant) --- */
.branch-btn.disabled {
  cursor: default;
  pointer-events: none;
}

.branch-btn.disabled .material-symbols-outlined {
  color: var(--no-entry-red);
}

/* --- État : loading (spinner pendant le chargement de la page cible) ---
   Activé en JS au clic sur un bouton de branche. L'icône (flèche, crayon
   ou +) est remplacée par `progress_activity` qui se met à tourner.
   Le bouton garde sa couleur de base (pas d'inversion noir/blanc même
   si l'utilisateur garde le doigt dessus). */
.branch-btn.loading {
  pointer-events: none; /* empêche les double-clics pendant le chargement */
  background: var(--paper);
  color: var(--ink);
}

.branch-btn.loading .material-symbols-outlined {
  animation: branch-btn-spin 1.5s linear infinite;
}

@keyframes branch-btn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* --- État : dismissed (autres boutons masqués pendant la navigation) ---
   Activé en JS sur les boutons NON cliqués au moment du choix. Clarifie
   visuellement le chemin choisi et bloque tout tap accidentel pendant
   les 800ms d'affichage du spinner.
   Masquage instantané (override de la transition opacity du .branch-btn). */
.branch-btn.dismissed {
  opacity: 0;
  pointer-events: none;
  transition: none;
}

/* --- Variante : preview édition (crayon bleu) --- */
.branch-btn.preview-edit {
  color: var(--preview-blue);
  border-color: var(--preview-blue);
}

/* --- Variante : preview création (+ vert) --- */
.branch-btn.preview-add {
  color: var(--preview-green);
  border-color: var(--preview-green);
}

/* ============================================================
   7. UI FIXE (breadcrumb, bouton klaxonner)
   ============================================================ */

.distance {
  position: fixed;
  top: 32px;
  left: 32px;
  z-index: 100;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--ink);
  opacity: 0.5;
  text-transform: uppercase;
  font-feature-settings: "tnum";
}

/* ============================================================
   8. BOUTON EDITER (mode preview uniquement)
   ============================================================
   Bouton circulaire en bas a droite, present sur les pages de troncons
   quand ?preview=1 est dans l'URL. Couleur bleue, coherente avec le mode
   preview (comme l'ancien crayon sur les branches).
*/

html {min-height:1000000px;}

.edit-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border: 2px solid var(--preview-blue);
  border-radius: 50%;
  background: var(--paper);
  color: var(--preview-blue);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  z-index: 120;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: margin-top 0.15s ease;
}

.edit-btn .material-symbols-outlined {
  font-size: 24px;
}

@media (hover: hover) {
  .edit-btn:hover {
    margin-top: -2px;
  }
}