/* Puzzle Nook — feuille de style unique (aucune ressource externe) */

:root {
  --paper: #eef2f1;
  --surface: #ffffff;
  --ink: #1f2a37;
  --muted: #566272;
  --line: #d5dddc;
  --honey: #f4b740;
  --honey-deep: #b97a06;
  --honey-soft: #fcefd2;
  --slime: #5fb0e0;
  --slime-deep: #2a6a96;
  --lab: #15283a;
  --lab-ink: #e6f0f7;
  --focus: #5b4b8a;

  /* Tuiles du logo : progression façon 2048 */
  --t1: #e4e0d6; --t1-ink: #4a4237;
  --t2: #ede0c8; --t2-ink: #4a4237;
  --t3: #f2b179; --t3-ink: #ffffff;
  --t4: #f59563; --t4-ink: #ffffff;
  --t5: #f67c5f; --t5-ink: #ffffff;
  --t6: #edcf72; --t6-ink: #ffffff;

  --font-display: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-tile: 10px;
  --radius-panel: 22px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141c24;
    --surface: #1c2631;
    --ink: #e8edf1;
    --muted: #a3afbb;
    --line: #2c3946;
    --honey-soft: #2b2416;
    --honey-deep: #f4c869;
    --lab: #0f1e2c;
    --focus: #b9aaf0;
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ---------- En-tête : le logo en tuiles ---------- */

.masthead {
  padding: clamp(40px, 9vw, 96px) 0 clamp(32px, 6vw, 56px);
}

.logo {
  margin: 0;
  display: grid;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
}

.logo-row { display: flex; gap: 8px; }

.tile {
  display: grid;
  place-items: center;
  width: clamp(44px, 11vw, 84px);
  aspect-ratio: 1;
  border-radius: var(--radius-tile);
  font-size: clamp(1.6rem, 6.2vw, 3.2rem);
  background: var(--t1);
  color: var(--t1-ink);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.08);
}

.tile.v2 { background: var(--t2); color: var(--t2-ink); }
.tile.v3 { background: var(--t3); color: var(--t3-ink); }
.tile.v4 { background: var(--t4); color: var(--t4-ink); }
.tile.v5 { background: var(--t5); color: var(--t5-ink); }
.tile.v6 { background: var(--t6); color: var(--t6-ink); }

/* Le seul mouvement de la page : les tuiles glissent en place au chargement */
@media (prefers-reduced-motion: no-preference) {
  .tile {
    animation: slide-in 420ms cubic-bezier(.2, .9, .3, 1.25) both;
    animation-delay: calc(var(--i) * 55ms);
  }
  @keyframes slide-in {
    from { transform: translateX(-28px) scale(.6); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
}

.intro {
  margin: clamp(20px, 4vw, 32px) 0 0;
  max-width: 36ch;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  line-height: 1.45;
  color: var(--muted);
}

/* ---------- Les deux jeux ---------- */

.games {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-bottom: clamp(48px, 8vw, 88px);
}

@media (min-width: 760px) {
  .games { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.game {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.game-art {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
}

.game-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  padding: 24px clamp(20px, 3.5vw, 32px) 28px;
}

.game h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.game p { margin: 0; max-width: 46ch; }

.game .meta { font-size: .95rem; }

.play {
  align-self: flex-start;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: transform 120ms ease;
}

.play:hover { transform: translateY(-2px); }
.play:active { transform: translateY(0); }

/* 2048 : panneau miel, plateau 6×6 dessiné en CSS */

.game--2048 {
  background: var(--honey-soft);
  border: 1px solid color-mix(in srgb, var(--honey) 45%, transparent);
}

.game--2048 .game-art { background: var(--honey); }

.board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 5px;
  height: 76%;
  aspect-ratio: 1;
  padding: 6px;
  border-radius: 12px;
  background: #bbada0;
  transform: rotate(-4deg);
  box-shadow: 0 14px 0 -6px rgb(0 0 0 / .12);
}

.board span {
  border-radius: 5px;
  background: rgb(238 228 218 / .4);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(.6rem, 1.5vw, .9rem);
}

.board .n2    { background: #eee4da; color: #776e65; }
.board .n4    { background: #ede0c8; color: #776e65; }
.board .n8    { background: #f2b179; color: #fff; }
.board .n16   { background: #f59563; color: #fff; }
.board .n64   { background: #f65e3b; color: #fff; }
.board .n2048 { background: #edc22e; color: #fff; font-size: clamp(.45rem, 1.1vw, .62rem); }

.game--2048 .meta { color: var(--muted); }

.game--2048 .play { background: var(--ink); color: var(--paper); }

/* Lab Escape : panneau laboratoire sombre, slime en SVG */

.game--lab {
  background: var(--lab);
  color: var(--lab-ink);
  border: 1px solid transparent;
}

@media (prefers-color-scheme: dark) {
  .game--lab { border-color: #2a4560; }
}

.game--lab .game-art {
  background:
    repeating-linear-gradient(-45deg, #e8c547 0 14px, #1b1b1b 14px 28px) bottom / 100% 14px no-repeat,
    radial-gradient(120% 90% at 50% 100%, #24496a 0%, #15283a 70%);
}

.slime { width: min(46%, 190px); height: auto; }

.game--lab .meta { color: #a8c3d8; }

.game--lab .play { background: var(--slime); color: #0d2233; }

/* Jeu mystère : carte pleine largeur, nuit violette, compte à rebours en tuiles */

.game--mystery {
  background: #2b2340;
  color: #ece8f7;
}

@media (min-width: 760px) {
  .game--mystery {
    grid-column: 1 / -1;
    flex-direction: row;
  }
  .game--mystery .game-art {
    flex: 0 0 40%;
    aspect-ratio: auto;
    min-height: 240px;
  }
  .game--mystery .game-body { justify-content: center; }
}

.game--mystery .game-art {
  background: radial-gradient(120% 100% at 30% 20%, #4a3d6e 0%, #2b2340 70%);
}

.mystery-tiles {
  display: flex;
  gap: 10px;
}

.mystery-tiles span {
  display: grid;
  place-items: center;
  width: clamp(52px, 9vw, 72px);
  aspect-ratio: 1;
  border-radius: var(--radius-tile);
  background: #3d3259;
  color: #b8a9e6;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / .2);
}

.mystery-tiles span:nth-child(2) { transform: translateY(-10px) rotate(4deg); background: #4a3d6e; }
.mystery-tiles span:nth-child(3) { transform: rotate(-3deg); }

.game--mystery .meta { color: #b9b0d6; }

.countdown {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 2px;
}

.countdown[hidden] { display: none; }

.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cd-value {
  display: grid;
  place-items: center;
  min-width: 64px;
  height: 64px;
  padding: 0 8px;
  border-radius: var(--radius-tile);
  background: var(--t6);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.9rem;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / .12);
}

.cd-unit:nth-child(2) .cd-value { background: var(--t3); }
.cd-unit:nth-child(3) .cd-value { background: var(--t4); }
.cd-unit:nth-child(4) .cd-value { background: var(--t5); }

.cd-label { font-size: .9rem; color: #b9b0d6; }

/* ---------- Page 404 ---------- */

.notfound {
  padding: clamp(40px, 9vw, 96px) 0 clamp(56px, 9vw, 96px);
}

.notfound .logo-row { margin-bottom: 32px; }

.notfound h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
}

.notfound p { max-width: 46ch; color: var(--muted); font-size: 1.15rem; }

.notfound .play {
  margin-top: 12px;
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Pied de page ---------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 40px;
  font-size: .95rem;
  color: var(--muted);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  justify-content: space-between;
}

.site-footer p { margin: 0; }

/* ---------- Page légale ---------- */

.legal {
  padding: clamp(32px, 6vw, 64px) 0 clamp(48px, 8vw, 80px);
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  text-decoration: none;
}

.back .tile {
  width: 36px;
  font-size: 1.1rem;
  animation: none;
}

.legal h1 {
  margin: 36px 0 8px;
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.1;
}

.legal h2 {
  margin: 40px 0 10px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.25;
}

.legal p, .legal ul { max-width: 68ch; }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }

.summary {
  max-width: 68ch;
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.summary h2 { margin-top: 0; }
.summary p:last-child { margin-bottom: 0; }

.updated { color: var(--muted); font-size: .95rem; }