/* Pocket Puzzle — components.
   Every size inside a pack is a multiple of --u = 1% of the pack's width,
   so a pack scales from mobile (320px) to desktop (480px) and beyond.
   Colors come only from the pack-* role tokens: switch data-theme to switch pack. */

:root { --u: 4.8px; }

.pp-stage { background: var(--stage); color: var(--pack-ink); }

/* Every component sets its text in Space Grotesk; Savate is opted into per element below. */
.pp-pill, .pp-panel, .pp-frame, .pp-tagline, .pp-band, .pp-carousel { font-family: var(--font-text); }

/* ---------- Pack card ---------- */
.pp-pack {
  --u: 1cqw;
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 1110 / 1795;
  background: var(--pack-card); color: var(--pack-ink);
  border-radius: 9.9% / 6.12%; overflow: hidden; /* % of the pack itself: cqw here would read the parent */
  font-family: var(--font-text);
}
.pp-pack > * { position: absolute; }
.pp-pack .pp-tab { left: 42.1%; top: calc(var(--u) * 3.9); }
.pp-pack .pp-series { right: calc(var(--u) * 5.1); top: calc(var(--u) * 5); }
.pp-pack .pp-byline { left: calc(var(--u) * 20.5); top: calc(var(--u) * 16); translate: -50% -50%; }
.pp-pack .pp-title { left: calc(var(--u) * 6.3); top: calc(var(--u) * 18.8); }
.pp-pack .pp-play { left: 50%; top: calc(var(--u) * 54.6); translate: -50% 0; }
.pp-pack .pp-frame { left: calc(var(--u) * 21.3); top: calc(var(--u) * 68); }
.pp-pack .pp-panel { left: 0; top: calc(var(--u) * 80); width: calc(var(--u) * 21.3); height: calc(var(--u) * 52.7); }
.pp-pack .pp-tagline { left: 0; right: 0; top: calc(var(--u) * 144.5); text-align: center; }
.pp-pack .pp-band { left: 0; right: 0; bottom: 0; }

/* Niveau 2: 4x4 board, bigger frame with the puzzle's name, PLAY on the left, level pill */
.pp-pack--level2 .pp-byline { left: calc(var(--u) * 19.5); top: calc(var(--u) * 12); }
.pp-pack--level2 .pp-title { top: calc(var(--u) * 16.5); }
.pp-pack--level2 .pp-play { left: calc(var(--u) * 1.2); top: calc(var(--u) * 61.1); translate: 0 0; }
.pp-pack--level2 .pp-frame { left: calc(var(--u) * 22.2); top: calc(var(--u) * 56.8); }
.pp-pack--level2 .pp-panel { top: calc(var(--u) * 80.3); width: calc(var(--u) * 22.2); height: calc(var(--u) * 52.4); }
.pp-pack .pp-level { left: calc(var(--u) * 86.3); top: calc(var(--u) * 48.5); translate: -50% -50%; }

/* Niveau 3: 5x5 board, bigger frame still. ESTIMATED — no level-3 pack exists yet,
   these numbers are extrapolated from the level1→level2 deltas (same approach: PLAY
   stays on the left, frame pinned to the same bottom edge as level 2 so it never
   collides with .pp-tagline below). Recalibrate pixel-perfect once a real level-3
   pack + wireframe exists, the same way level 1/2 were measured against real assets. */
.pp-pack--level3 .pp-byline { left: calc(var(--u) * 18.5); top: calc(var(--u) * 7.5); }
.pp-pack--level3 .pp-title { top: calc(var(--u) * 12); }
.pp-pack--level3 .pp-play { left: calc(var(--u) * 1.2); top: calc(var(--u) * 57); translate: 0 0; }
.pp-pack--level3 .pp-frame { left: calc(var(--u) * 23); top: calc(var(--u) * 53); }
.pp-pack--level3 .pp-panel { top: calc(var(--u) * 80.5); width: calc(var(--u) * 23); height: calc(var(--u) * 52.2); }

/* ---------- Hang tab (cream hole with a bump) ---------- */
.pp-tab {
  width: calc(var(--u) * 15.8); height: calc(var(--u) * 4);
  background: var(--pack-ink); border-radius: var(--radius-pill);
}
.pp-tab::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--u) * -1.3);
  width: calc(var(--u) * 4); height: calc(var(--u) * 3); translate: -50% 0;
  background: inherit; border-radius: 50% 50% 0 0;
}

/* ---------- Title ---------- */
.pp-title {
  margin: 0; font-family: var(--font-display); font-weight: 600;
  font-size: calc(var(--u) * 18.5); line-height: 0.9; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--pack-ink); text-shadow: var(--title-offset);
  white-space: nowrap;
}

/* ---------- Pills ---------- */
.pp-pill {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  border-radius: var(--radius-pill); color: var(--pack-ink); line-height: 1;
}
.pp-byline {
  background: var(--pack-byline); rotate: -20deg;
  padding: calc(var(--u) * 2.3) calc(var(--u) * 3.2);
  font-weight: 600; font-size: calc(var(--u) * 2.7); letter-spacing: 0.02em; text-transform: uppercase;
}
.pp-series {
  background: var(--pack-series); height: calc(var(--u) * 7); padding: 0 calc(var(--u) * 1.8);
  font-family: var(--font-display); font-weight: 600; font-size: calc(var(--u) * 5.4);
}
.pp-level {
  background: var(--pack-level); rotate: -18deg;
  padding: calc(var(--u) * 1.6) calc(var(--u) * 3.6); font-size: calc(var(--u) * 3.6); font-weight: 500;
}
.pp-name {
  background: var(--pack-frame); padding: calc(var(--u) * 1.4) calc(var(--u) * 3.2);
  font-weight: 500; font-size: calc(var(--u) * 4.6);
}

/* ---------- PLAY ---------- */
.pp-play {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(var(--u) * 8.3); padding: 0 calc(var(--u) * 2.6);
  background: var(--play-fill); color: var(--pack-ink);
  border: calc(var(--u) * 0.5) solid var(--play-ring); border-radius: var(--radius-pill);
  font-family: var(--font-display); font-weight: 600; font-size: calc(var(--u) * 5.4); line-height: 1;
  cursor: pointer;
}
.pp-play:hover { filter: brightness(1.08); }
.pp-play:active { translate: 0 calc(var(--u) * 0.3); }
.pp-pack .pp-play:active { translate: -50% calc(var(--u) * 0.3); }
.pp-pack--level2 .pp-play:active { translate: 0 calc(var(--u) * 0.3); }
.pp-play:focus-visible { outline: calc(var(--u) * 0.6) solid var(--play-ring); outline-offset: calc(var(--u) * 0.6); }

/* ---------- Frame + board ---------- */
.pp-frame {
  --n: 3;
  width: calc(var(--u) * 57.1); height: calc(var(--u) * 71);
  background: var(--pack-frame); border-radius: calc(var(--u) * 4.5);
}
.pp-frame--4 { --n: 4; width: calc(var(--u) * 68.5); height: calc(var(--u) * 84.4); }
/* Niveau 3 (5x5) — estimated, see note above .pp-pack--level3. */
.pp-frame--5 { --n: 5; width: calc(var(--u) * 75); height: calc(var(--u) * 88); }
.pp-frame__thumb {
  position: absolute; right: calc(var(--u) * 3.1); top: calc(var(--u) * 2.5);
  width: calc(var(--u) * 9.9); aspect-ratio: 1; object-fit: cover; display: block;
}
.pp-frame--4 .pp-frame__thumb,
.pp-frame--5 .pp-frame__thumb { right: calc(var(--u) * 4.3); top: calc(var(--u) * 3.2); width: calc(var(--u) * 11.7); }
.pp-frame__name {
  position: absolute; left: 0; right: 0; top: calc(var(--u) * 8.3); translate: 0 -50%; margin: 0;
  text-align: center; font-weight: 600; font-size: calc(var(--u) * 5.9); color: var(--pack-ink);
}
.pp-board {
  position: absolute; left: calc(var(--u) * 3.3); top: calc(var(--u) * 14.1);
  width: calc(var(--u) * 50.7); aspect-ratio: 1; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: calc(var(--u) * 0.45);
  background: var(--seam); border: calc(var(--u) * 0.9) solid var(--pack-slot);
}
.pp-frame--4 .pp-board { left: calc(var(--u) * 4); top: calc(var(--u) * 16.9); width: calc(var(--u) * 60.3); }
.pp-frame--5 .pp-board { left: calc(var(--u) * 4.6); top: calc(var(--u) * 17.5); width: calc(var(--u) * 66); }
.pp-tile {
  background-image: var(--pp-art); background-size: calc(var(--n) * 100%) calc(var(--n) * 100%);
  background-position: calc(var(--x) * 100% / (var(--n) - 1)) calc(var(--y) * 100% / (var(--n) - 1));
  background-color: var(--grey-300);
}
.pp-tile--empty { background: var(--pack-slot); }

/* ---------- Solution-time panel ---------- */
.pp-panel {
  background: var(--pack-panel); color: var(--pack-ink); box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: space-evenly; align-items: center;
  margin: 0; padding: calc(var(--u) * 2) calc(var(--u) * 0.5); list-style: none;
  font-size: calc(var(--u) * 3.1); line-height: 1.4; text-align: center;
}
.pp-panel li { display: block; }
.pp-panel span { display: block; }

/* ---------- Tagline + band ---------- */
.pp-tagline { margin: 0; font-weight: 500; font-size: calc(var(--u) * 4); letter-spacing: 0.12em; white-space: nowrap; }
.pp-band {
  height: calc(var(--u) * 9.9); background: var(--pack-band); display: flex; align-items: center;
  padding: 0 calc(var(--u) * 5.2); font-size: calc(var(--u) * 2.5); margin: 0;
}

/* ---------- Carousel (site home) ---------- */
.pp-carousel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: var(--space-2); background: var(--stage); padding: var(--space-2); overflow: hidden;
}
.pp-carousel__track { display: flex; justify-content: center; gap: var(--space-5); }
.pp-carousel__item { flex: 0 0 var(--pack-width-mobile); }
.pp-carousel__item[aria-hidden="true"] { opacity: 1; }
.pp-arrow {
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  background: none; border: 0; cursor: pointer; color: var(--arrow); border-radius: 8px;
}
.pp-arrow svg { width: 28px; height: 40px; }
.pp-arrow:focus-visible { outline: 3px solid var(--arrow); outline-offset: 2px; }
@media (min-width: 900px) {
  .pp-carousel__item { flex-basis: var(--pack-width-desktop); }
}

/* Illustrations with no seams baked in: a thin, neutral gap keeps the pieces legible
   (especially once shuffled) without competing with the art's own lines. */
.pp-board--baked { gap: 2px; background: rgba(0, 0, 0, 0.15); }
.pp-board--baked .pp-tile:not(.pp-tile--empty) { background-color: transparent; }