/* ============================================================
   Lola et la Licorne — la course dans la montagne
   Palette froide, mais le même vocabulaire visuel que le jeu de Lilou.
   ============================================================ */

:root {
  --glace:      #a9dcf2;
  --nuit:       #4a2d5c;
  --violet:     #a76bff;
  --rose:       #ef7fa6;
  --blanc:      #fffaff;
  --ombre:      rgba(30, 20, 60, .35);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #2b2350;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

#jeu { position: relative; width: 100%; height: 100%; overflow: hidden; }
#canvas { display: block; width: 100%; height: 100%; }

/* La zone de saut couvre tout l'écran, sous l'ATH et sous les panneaux. */
#zone-tap {
  position: absolute;
  inset: 0;
  z-index: 1;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- ATH ---------- */

#ath {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 16px;
  padding-top: max(12px, env(safe-area-inset-top));
  pointer-events: none;
}

.bloc {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .62);
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 0 2px 8px var(--ombre);
  color: var(--nuit);
  font-weight: bold;
  font-size: 22px;
}

.coeur {
  width: 24px;
  height: 24px;
  background: #e03b6b;
  clip-path: path("M12 22 L2 12 A6 6 0 0 1 12 5 A6 6 0 0 1 22 12 Z");
}

.vies-bloc.alerte { animation: battement .7s ease-in-out infinite; }
@keyframes battement {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.score-bloc { font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.etiquette { font-size: 12px; opacity: .65; letter-spacing: 1px; }
#meilleur { opacity: .65; margin-right: 6px; }
#score { color: var(--violet); }

/* ---------- Consigne de départ ---------- */

#consigne {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  top: 34%;
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 5vw, 34px);
  font-weight: bold;
  color: var(--blanc);
  text-shadow: 0 3px 0 var(--nuit), 0 0 18px rgba(80, 40, 120, .8);
  pointer-events: none;
  animation: respire 1.6s ease-in-out infinite;
}
#consigne.cache { display: none; }
@keyframes respire {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(-8px); opacity: .75; }
}

/* ---------- Bouton retour ---------- */

#retour {
  position: absolute;
  z-index: 3;
  left: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  color: var(--nuit);
  font-size: 22px;
  text-decoration: none;
  box-shadow: 0 2px 8px var(--ombre);
}

/* ---------- Panneau de fin ---------- */

#overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(40, 25, 70, .62);
  backdrop-filter: blur(3px);
}
#overlay.cache { display: none; }

.panneau {
  background: #eef7ff;
  border: 6px solid var(--violet);
  border-radius: 28px;
  padding: 32px 40px;
  text-align: center;
  max-width: 88vw;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.panneau h1 {
  margin: 0 0 8px;
  font-size: clamp(28px, 6vw, 44px);
  color: #6a3fb5;
}

.panneau p {
  margin: 0 0 22px;
  font-size: clamp(16px, 3.5vw, 20px);
  color: #4a5a7a;
}

.gros-bouton {
  border: none;
  border-radius: 999px;
  padding: 14px 34px;
  font-size: clamp(18px, 4vw, 22px);
  font-weight: bold;
  color: var(--blanc);
  background: var(--violet);
  box-shadow: 0 4px 0 #6a3fb5;
  cursor: pointer;
}
.gros-bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 #6a3fb5; }

.lien-menu {
  display: block;
  margin-top: 18px;
  color: #6a3fb5;
  font-size: 16px;
}