/* Design : tout l'habillage est ici. Le format est 9:16 (1080x1920 dans le canvas). */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: #15171d;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #f3efe6;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cadre 9:16 : prend le maximum de la fenêtre sans déborder */
#wrap {
  position: relative;
  width: min(100vw, calc(100vh * 9 / 16));
  overflow: hidden;
}

canvas {
  display: block;
  width: 100%;
  height: auto;   /* ratio 9:16 imposé par les attributs du canvas */
  touch-action: none;
  user-select: none;
  background: #ece6d6;
  cursor: crosshair;
}

/* HUD en haut, dans la zone libre au-dessus de la carte */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 15%;
  padding: 4% 4% 0;
  pointer-events: none;
}

.hud-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-weight: 700;
  font-size: clamp(11px, 2.6vmin, 18px);
}

#hud span {
  background: rgba(20, 20, 25, 0.82);
  padding: 4px 10px;
  border-radius: 6px;
}

#hud button {
  pointer-events: auto;
  margin-left: auto;
  font-size: inherit;
  padding: 4px 10px;
}

button {
  background: #e63946;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

button:disabled { opacity: 0.5; cursor: default; }
button:hover:not(:disabled) { filter: brightness(1.1); }
button.ghost { background: #3a3f4b; }

#screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 14, 0.75);
}

#screen.hidden { display: none; }

/* Fin de partie : la carte-résultat est sur le canvas, on ne pose que les boutons en bas */
#screen.end {
  background: transparent;
  align-items: flex-end;
  pointer-events: none;
}
#screen.end #panel {
  pointer-events: auto;
  background: transparent;
  border: 0;
  width: 100%;
  max-width: none;
  padding: 0 3% 6%;
}
/* Les 3 boutons de fin tiennent sur une seule ligne, sous le texte du bandeau bas */
#screen.end .btns {
  flex-wrap: nowrap;
  gap: 2%;
}
#screen.end .btns button {
  flex: 1 1 0;
  min-width: 0;
  padding: 3.2% 2%;
  font-size: clamp(11px, 3.4vmin, 16px);
  white-space: nowrap;
}
button.x { background: #000; border: 2px solid #fff; }

#panel {
  width: 88%;
  max-width: 520px;
  padding: 22px 24px;
  text-align: center;
  background: #1b1d24;
  border: 3px solid #e63946;
  border-radius: 14px;
}

#panel h1 {
  margin: 0 0 12px;
  font-size: clamp(24px, 5vmin, 36px);
  letter-spacing: 2px;
}

#panel h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 4.5vmin, 30px);
  color: #ffb703;
}

#panel p {
  line-height: 1.5;
  font-size: clamp(13px, 2.4vmin, 16px);
}

#panel .sub { font-size: 14px; color: #c9c4b8; }
#panel .big { font-size: clamp(16px, 3.2vmin, 22px); }
#panel .big b { color: #ffb703; }
#panel .attr { font-size: 11px; color: #7d8290; margin-top: 14px; }

#panel .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 14px;
}

/* Annuler le trajet prévu : collé au bout du tracé, bien visible */
#toast {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  background: #ffb703;
  color: #111;
  padding: 6px 12px;
  border-radius: 6px;
  font-weight: 700;
  display: none;
  width: max-content;
  max-width: 88%;
  text-align: center;
  font-size: clamp(12px, 3.4vmin, 17px);
}