/* ===== Slide Puzzle — game-specific styles =====
   Generic glass chrome comes from shared/css/glass.css (fixed theme, no
   light/dark mode). This file re-tints the accent to spring green and lays
   out the tile board. Tile geometry is measured in JS (px), not CSS calc,
   so nothing here needs to know the board size. */

:root {
  /* Slide Puzzle wears spring green over the default indigo glass. */
  --accent-1: #3ddc84;
  --accent-2: #7ef0a4;
  --on-accent: #05230f;
}

.c-app { --fpad: clamp(12px, 4vw, 36px); }

/* ---------- Board ---------- */
.sl-board {
  position: relative;
  width: min(92vw, 460px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  padding: 10px;              /* keep in sync with PAD in slide.js */
  border-radius: 16px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .15);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* ---------- Tiles ---------- */
.sl-tile {
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(160deg, #ffffff, #eef1f7);
  color: #1c2233;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .35), inset 0 0 0 1px var(--card-edge);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: left .13s ease, top .13s ease, box-shadow .15s ease, background .15s ease;
}
.sl-tile:hover { box-shadow: 0 5px 12px rgba(0, 0, 0, .4), inset 0 0 0 1px var(--card-edge); }
.sl-tile:active { transform: scale(.97); }

/* Tile already sitting in its final spot: subtle green tint as a signpost. */
.sl-tile.is-correct {
  background: linear-gradient(160deg, #eafff2, #cdeeda);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(61, 220, 132, .7);
}

/* Winning pose: the whole wall gives one happy pulse. */
.sl-board.is-win .sl-tile { animation: slWin .5s ease; }
@keyframes slWin { 50% { transform: scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .sl-tile { transition: none; }
  .sl-board.is-win .sl-tile { animation: none; }
}