/* ── Shikaku ─────────────────────────────────────────────────────────────────
   Cut the grid into clued rectangles. The play chrome (.q-chrome / .q-stage /
   .q-foot) is the shared shell from queens.css; below is Shikaku's own board —
   the approved "tinted" look from sandbox-shikaku-style.html: pale/dark stock,
   each rectangle a soft tint cycled from the Flood palette, heavier ink walls
   where two rectangles meet (drawn per-side like Queens, so corners mitre), and
   a smooth tinted overlay that previews a rectangle as you drag it out. All
   colours come from the --sk-* tokens in tokens.css.                           */

.shikaku-play { display: flex; flex-direction: column; height: 100%; min-height: 0; }

/* ── the board ────────────────────────────────────────────────────────────── */
.sk-board {
  --n: 7;
  --sk-gap: 3px;      /* the grout between tiles */
  --sk-round: 9px;    /* tile + rectangle corner radius */
  --sk-inset: 0px;    /* extra inset beyond the grout — 0: a rectangle covers its
                         tiles EXACTLY (full tile face, never the grout), so
                         neighbouring rectangles are parted by the grout alone */
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  width: min(92vw, 66vh, 520px);
  aspect-ratio: 1;
  background: var(--sk-grout);
  border-radius: 16px;
  overflow: hidden;
  /* none, not manipulation: dragging a rectangle must not scroll or select */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* every cell is a rounded tile; the gap between tiles is a grout-coloured frame */
.sk-cell {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  background: var(--sk-cell);
  border: var(--sk-gap) solid var(--sk-grout);
  border-radius: var(--sk-round);
  cursor: crosshair;
  -webkit-tap-highlight-color: transparent;
}

.sk-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(12px, 3.4vw, 17px);
  color: var(--sk-num);
  /* a tile-coloured halo keeps the numeral crisp on the tile and legible on any
     rectangle fill; the z (needs a position) floats it above the overlays. */
  text-shadow: 0 0 2px var(--sk-cell), 0 0 3px var(--sk-cell);
  position: relative;
  z-index: 5;
}

/* A rectangle is ONE rounded, padded overlay spanning its cells — the committed
   overlay (.sk-rect) and the live drag preview (.sk-pv) share the look. It reads
   FAINT while the region is invalid or incomplete, and turns SOLID the moment it
   becomes a valid rectangle (exactly one clue whose value equals the area). */
.sk-rect,
.sk-pv {
  position: absolute;
  box-sizing: border-box;
  /* the transparent border keeps the overlay's GEOMETRY on the full covered
     cells (drag maths stay untouched) while the painted fill — clipped to the
     padding box — sits --sk-inset inside the tile edges, so every rectangle
     breathes instead of running edge-to-edge. The radius grows by the same
     amount so the visible fill keeps its original corner rounding. */
  border: calc(var(--sk-gap) + var(--sk-inset)) solid transparent;
  border-radius: calc(var(--sk-round) + var(--sk-inset));
  pointer-events: none;
  /* background-COLOR, never the `background` shorthand: the shorthand resets
     background-clip to border-box and the fill silently runs edge-to-edge
     again — exactly the bug this inset existed to fix. Clip declared last so
     nothing can override it by accident. */
  background-color: color-mix(in srgb, var(--rect-fill, var(--accent)) 22%, transparent);
  background-clip: padding-box;
  transition: background-color var(--duration-2) var(--ease);
}
.sk-rect.valid,
.sk-pv.valid { background-color: var(--rect-fill); }

.sk-rect { z-index: 1; }

/* the drag preview resizes smoothly and tracks the responsive board via % coords */
.sk-pv {
  left: 0; top: 0; width: 0; height: 0;
  z-index: 4;
  opacity: 0;
  transition:
    left .13s cubic-bezier(.3, .75, .3, 1),
    top .13s cubic-bezier(.3, .75, .3, 1),
    width .13s cubic-bezier(.3, .75, .3, 1),
    height .13s cubic-bezier(.3, .75, .3, 1),
    background var(--duration-2) var(--ease),
    opacity .1s var(--ease);
}

/* the hint pulse — the revealed rectangle's cells flash their accent outline */
.sk-cell.hinted { animation: sk-hint 1.6s var(--ease) 2; z-index: 3; }
@keyframes sk-hint {
  0%, 100% { box-shadow: inset 0 0 0 0 var(--accent); }
  50% { box-shadow: inset 0 0 0 3px var(--accent); }
}

/* a solved board settles with a quiet accent frame */
.sk-board.sk-solved { outline: 2px solid var(--accent); outline-offset: -2px; transition: outline-color 420ms var(--ease); }

/* ── landscape phone: keep the board sized to the short edge ───────────────── */
@media (orientation: landscape) and (max-height: 700px) {
  .sk-board { width: min(88vh, 78vw); }
}

/* ── level-card thumbnail: the clue grid, tinted rectangles once it's touched ── */
.sk-mini {
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  aspect-ratio: 1;
  width: 100%;
  background: var(--sk-paper);
  outline: 1.5px solid var(--sk-wall);
  border-radius: 2px;
  overflow: hidden;
}
.sk-mini i {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
}
.sk-mini-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(6px, 1.7vw, 11px);
  color: var(--sk-num);
}