/* Mazeguard — site vitrine. La page est la mer de l'accueil du jeu ; le seul élément fort est le plateau jouable. */
:root {
  --lagoon: #2a8fd0;
  --deep: #13466f;
  --ivory: #f6ebcf;
  --gold: #ffc93c;
  --ink: #1c2b4b;
  --grass: #7cc242;
  --grass-dark: #5a9a2c;
  --wood: #8a5a2e;
  --text: #ffffff;
  --text-soft: #d7ecfa;
  --display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--deep); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 600 1.0625rem/1.6 var(--body);
  background:
    radial-gradient(120% 60% at 50% 0%, #4fb4ea 0%, transparent 60%),
    linear-gradient(180deg, var(--lagoon) 0%, #1f78b8 45%, var(--deep) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.wrap { width: min(100% - 32px, 760px); margin-inline: auto; }

/* ── En-tête ── */
.top {
  display: flex; justify-content: flex-end;
  padding-top: 16px;
}
.lang {
  font: 800 0.9375rem var(--body);
  color: var(--ink);
  background: var(--ivory);
  border: 3px solid var(--ink);
  border-radius: 999px;
  padding: 6px 16px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.lang:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

.hero { text-align: center; padding: 8px 0 24px; }
.logo { width: min(86%, 520px); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 8px 0 rgba(19, 70, 111, 0.45)); }
.tagline {
  font: 400 clamp(1.4rem, 4.6vw, 2rem)/1.2 var(--display);
  margin: 12px auto 0;
  max-width: 22ch;
  text-shadow: 0 3px 0 var(--ink);
  letter-spacing: 0.01em;
}

/* ── Plateau jouable ── */
.board-shell {
  margin: 28px auto 0;
  width: min(100%, 460px);
  padding: 14px;
  background: var(--wood);
  border: 4px solid var(--ink);
  border-radius: 28px;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.25), 0 10px 0 rgba(19, 70, 111, 0.6);
}
.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 3px;
  padding: 6px;
  background: var(--grass-dark);
  border-radius: 16px;
  touch-action: manipulation;
}
.cell {
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: 6px;
  background: var(--grass);
  cursor: pointer;
  position: relative;
}
.cell:nth-child(odd) { background: #84c94a; }
.cell.path { background: #e9c98a; }
.cell.path:nth-child(odd) { background: #efd196; }
.cell.gate { background: var(--gold); cursor: default; }
.cell.tower { background: #6aa33a; cursor: pointer; }
.cell.tower::after {
  content: "";
  position: absolute; inset: 12% 14% 8%;
  background:
    linear-gradient(var(--ivory), var(--ivory)) 0 0 / 30% 22% no-repeat,
    linear-gradient(var(--ivory), var(--ivory)) 100% 0 / 30% 22% no-repeat,
    linear-gradient(var(--ivory), var(--ivory)) 50% 0 / 30% 22% no-repeat,
    linear-gradient(var(--ivory), #e2d2aa) 0 100% / 100% 82% no-repeat;
  border-radius: 3px;
  filter: drop-shadow(0 2px 0 var(--ink));
}
.cell.denied { animation: shake 0.3s; }
@keyframes shake { 25% { translate: -3px 0; } 75% { translate: 3px 0; } }

.goblin {
  position: absolute;
  top: 0; left: 0;
  width: var(--g); height: var(--g);
  margin: calc(var(--g) / -2) 0 0 calc(var(--g) / -2);
  pointer-events: none;
  will-change: transform;
}

.board-status {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 12px;
  color: var(--ivory);
  font-weight: 800;
}
.board-status strong { font: 400 1.5rem var(--display); color: var(--gold); text-shadow: 0 2px 0 var(--ink); }
.reset {
  font: 800 0.9375rem var(--body);
  color: var(--ink); background: var(--gold);
  border: 3px solid var(--ink); border-radius: 14px;
  padding: 6px 14px; cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
}
.reset:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.board-hint { text-align: center; color: var(--text-soft); margin: 14px auto 0; max-width: 40ch; }

/* ── Le jeu ── */
.about { padding: 56px 0 8px; text-align: center; }
.about h2, .worlds h2 { font: 400 clamp(1.6rem, 5vw, 2.25rem)/1.15 var(--display); margin: 0 0 12px; text-shadow: 0 3px 0 var(--ink); }
.about p { max-width: 52ch; margin: 0 auto 12px; color: var(--text-soft); }

/* ── Mondes : îlots empilés comme sur l'accueil du jeu ── */
.worlds { padding: 48px 0 16px; text-align: center; }
.isles { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 8px; }
.isle { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 16px; }
.isle img { width: 100%; max-width: 300px; height: auto; justify-self: center; animation: float 6s ease-in-out infinite; }
.isle:nth-child(even) img { order: 2; animation-delay: -3s; }
.isle h3 { font: 400 1.5rem/1.2 var(--display); margin: 0; text-shadow: 0 2px 0 var(--ink); }
.isle p { margin: 4px 0 0; color: var(--text-soft); }
.isle div { text-align: left; }
.isle:nth-child(even) div { text-align: right; }
@keyframes float { 50% { translate: 0 -8px; } }

/* ── Téléchargement ── */
.get { text-align: center; padding: 48px 0 24px; }
.get img { width: 120px; height: 120px; border-radius: 27px; border: 4px solid var(--ink); box-shadow: 0 6px 0 var(--ink); }
.get p { font: 400 1.5rem var(--display); margin: 18px 0 0; text-shadow: 0 2px 0 var(--ink); }

footer { padding: 32px 0 40px; text-align: center; color: var(--text-soft); font-size: 0.9375rem; }
footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 10px; }
footer a { color: var(--ivory); font-weight: 800; }

/* ── Pages de texte (confidentialité, assistance) ── */
.doc { padding: 16px 0 24px; }
.doc .back { display: inline-block; margin: 8px 0 20px; }
.doc .back img { width: 200px; height: auto; }
.paper {
  background: var(--ivory);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 24px;
  padding: clamp(20px, 5vw, 40px);
  box-shadow: 0 8px 0 rgba(19, 70, 111, 0.6);
  font-weight: 600;
}
.paper h1 { font: 400 clamp(1.8rem, 6vw, 2.5rem)/1.1 var(--display); margin: 0 0 4px; }
.paper h2 { font: 400 1.35rem/1.25 var(--display); margin: 28px 0 6px; }
.paper p, .paper li { max-width: 68ch; }
.paper a { color: #1f63a8; font-weight: 800; }
.paper .updated { color: #5b6680; margin: 0 0 20px; }
.paper hr { border: 0; border-top: 3px dashed rgba(28, 43, 75, 0.25); margin: 36px 0; }

[hidden] { display: none !important; }

@media (max-width: 560px) {
  .isle { grid-template-columns: 1fr; text-align: center; }
  .isle:nth-child(even) img { order: 0; }
  .isle div, .isle:nth-child(even) div { text-align: center; }
  .isle img { max-width: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .isle img { animation: none; }
  .cell.denied { animation: none; }
}