/* La Quête du Cavalier — jetons de couleur, base et animations.
   Direction : table d'échecs éditoriale. Parchemin chaud, encre bleu nuit, or pour
   les sauts possibles, bleu héraldique pour le chemin parcouru. Thème sombre « château
   de nuit ». Polices système uniquement : le jeu reste identique hors connexion. */

:root {
  color-scheme: light;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bg: #f2ebdf;
  --bg-glow: #fdf8ef;
  --surface: #fffbf4;
  --surface-2: #f6efe2;
  --ink: #1b2130;
  --ink-soft: #596175;
  --line: #e2d7c4;
  --line-strong: #cbbda3;

  --tile-light: #efe4ce;
  --tile-dark: #dbc8a4;
  --tile-edge: rgba(92, 68, 36, 0.24);
  --rock-bed: #8e8679;
  --rock: #5d6169;
  --rock-hi: #9aa0aa;
  --visited: #2c5081;
  --visited-deep: #1e3a60;
  --visited-ink: #eef3fa;
  --gold: #d99a1e;
  --gold-bright: #efbc4c;
  --gold-soft: rgba(217, 154, 30, 0.26);
  --on-gold: #2a1c02;
  --star: var(--gold);
  --star-edge: #9a6508; /* contour foncé : l'étoile reste lisible (≥ 3:1) sur le parchemin */
  --star-empty: var(--line-strong);
  --hint: #13875f;
  --hint-soft: rgba(19, 135, 95, 0.2);
  --danger: #b73a2d;
  --on-danger: #fff;
  --success: #1e7a4c;
  --trail: rgba(248, 208, 122, 0.95);
  --knight-fill: #fcf7ec;
  --knight-stroke: #141925;
  --focus: #2f6fd6;

  --shadow-sm: 0 1px 2px rgba(49, 36, 17, 0.08);
  --shadow-md: 0 2px 4px rgba(49, 36, 17, 0.06), 0 12px 30px -14px rgba(49, 36, 17, 0.38);
  --radius-lg: 22px;
  --radius-md: 14px;
  --gutter: 16px;
  --app-max: 720px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0e131c;
    --bg-glow: #1a2539;
    --surface: #161e2b;
    --surface-2: #1c2636;
    --ink: #ede7da;
    --ink-soft: #a4adbd;
    --line: #283347;
    --line-strong: #37465e;
    --tile-light: #435168;
    --tile-dark: #2d3748;
    --tile-edge: rgba(0, 0, 0, 0.42);
    --rock-bed: #1f2631;
    --rock: #7f8591;
    --rock-hi: #b3b9c3;
    --visited: #3a6cae;
    --visited-deep: #2a548c;
    --gold: #f0b23a;
    --gold-bright: #ffd070;
    --gold-soft: rgba(240, 178, 58, 0.26);
    --star-edge: var(--gold-bright);
    --star-empty: #56657f;
    --hint: #2fc394;
    --hint-soft: rgba(47, 195, 148, 0.2);
    /* Rouge assez clair pour rester lisible en icône/bordure sur fond sombre ; le texte
       posé dessus (boutons de confirmation) utilise --on-danger, sombre, plutôt que du
       blanc : le blanc n'atteint que ≈3:1 sur ce rouge, sous le seuil AA de 4.5:1. */
    --danger: #f06a5b;
    --on-danger: #1a0a07;
    --success: #4cc387;
    --knight-stroke: #0b0f17;
    --focus: #86b5ff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 14px 32px -12px rgba(0, 0, 0, 0.75);
  }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-ui);
  color: var(--ink);
  background: radial-gradient(120% 60% at 50% -12%, var(--bg-glow), transparent 62%) fixed, var(--bg);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
}

/* L'attribut hidden doit l'emporter sur les display des composants (.btn, etc.). */
[hidden] {
  display: none !important;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Animations ---------- */

@keyframes breathe {
  0%, 100% { transform: scale(0.86); }
  50% { transform: scale(1); }
}

@keyframes hint-pulse {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--hint), 0 0 0 0 var(--hint-soft); }
  50% { box-shadow: inset 0 0 0 3px var(--hint), 0 0 0 6px var(--hint-soft); }
}

@keyframes refuse {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10%); box-shadow: inset 0 0 0 3px var(--danger); }
  40% { transform: translateX(8%); box-shadow: inset 0 0 0 3px var(--danger); }
  60% { transform: translateX(-5%); }
  80% { transform: translateX(2%); }
}

@keyframes hop {
  0% { transform: scale(1); }
  45% { transform: translateY(-14%) scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes glow {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.35) saturate(1.2); }
  100% { filter: brightness(1); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes bump {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}