/*
 * Game-specific overrides for "Rectángulos" (Shikaku: split the board into
 * rectangles, each holding exactly one number that says how many squares
 * it has). The shared look, the hud/stage/pad grid and the background live
 * in shared/shell.css - only the board and its controls are defined here.
 *
 * Deliberately the same family as puzles/ (the red-block game): a cream
 * playfield in a deep purple frame, flat rounded tiles with a darker bottom
 * edge. No theme, no textures - an everyday game has to read at a glance.
 */

:root {
  --rk-frame: #6f4a86;
  --rk-ink: #553669;          /* numbers and outlines */
  --rk-floor: #fbf2e2;
  --rk-line: rgba(111, 74, 134, .16);
  --rk-good: #3cb54a;
  --rk-bad: #d8433e;
  --rk-hint: #e8912e;
  --rk-wall: 10px;
}

/* ---- start screen ---- */
.start-hint {
  margin: -6px 0 0;
  max-width: 34ch;
  font-size: clamp(15px, 3.6vw, 19px);
  line-height: 1.25;
  color: var(--purple-dark);
  opacity: .9;
}
.rk-steps {
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
  display: flex;
  gap: clamp(14px, 4vw, 34px);
  justify-content: center;
  counter-reset: step;
}
.rk-steps li {
  position: relative;
  width: clamp(88px, 26vw, 128px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  counter-increment: step;
}
.rk-steps svg { width: 100%; height: auto; display: block; }
.rk-steps span {
  font-size: clamp(13px, 3.3vw, 16px);
  line-height: 1.2;
  color: var(--purple-dark);
}
.rk-steps span::before {
  content: counter(step) ". ";
  opacity: .7;
}
/* a small arrow between the pictures */
.rk-steps li + li::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(14px, 4vw, 34px) / 2 - 5px);
  top: calc(clamp(88px, 26vw, 128px) / 2 - 6px);
  border: 6px solid transparent;
  border-left: 9px solid var(--purple-dark);
  opacity: .55;
}

/* ---- the rule / message line above the board ---- */
.rk-msg {
  flex: none;
  margin: 0 0 10px;
  min-height: 2.5em;
  max-width: 42ch;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(16px, 3.9vw, 21px);
  line-height: 1.2;
  color: var(--purple-dark);
}
.rk-msg.is-warn { color: var(--rk-bad); }
.rk-msg.is-hint { color: #b06d17; }

/* ---- board sizing ---------------------------------------------------
 * The board sits out of flow in .board-wrap, which just takes whatever room
 * the stage has left; game.js (fitBoard) measures that and sets --bw/--bh
 * to the largest square-celled board that fits. Pure-CSS aspect-ratio
 * sizing (puzles/'s trick) stretched the board on short landscape screens
 * once a per-cell size cap was added, so this game measures instead. */
.board-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 150px;
  width: 100%;
}
.rk-board {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--bw, 300px);
  height: var(--bh, 300px);
  transform: translate(-50%, -50%);
  container-type: inline-size;
  background-color: var(--rk-floor);
  background-image:
    linear-gradient(to right, var(--rk-line) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, var(--rk-line) 1.5px, transparent 1.5px);
  background-size: calc(100% / var(--cols, 5)) calc(100% / var(--rows, 5));
  border-radius: 10px;
  box-shadow:
    0 0 0 var(--rk-wall) var(--rk-frame),
    0 0 0 calc(var(--rk-wall) + 3px) rgba(85, 54, 105, .32),
    inset 0 2px 8px rgba(111, 74, 134, .14);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* cell size in container units, so the numbers scale with the board */
.rk-board { --cell: calc(100cqw / var(--cols, 5)); }

/* ---- layers: tiles under the cells (numbers), selection on top ---- */
.rk-tiles, .rk-cells { position: absolute; inset: 0; }
.rk-cells {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), 1fr);
  grid-template-rows: repeat(var(--rows, 5), 1fr);
}
.rk-cell {
  position: relative;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rk-cell:focus { outline: none; }
.rk-cell:focus-visible { outline: 3px solid var(--rk-ink); outline-offset: -4px; border-radius: 6px; }

/* a number: a white disc while its rectangle is still missing */
.rk-clue {
  width: 66%;
  height: 66%;
  max-width: 56px;
  max-height: 56px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px var(--rk-ink), 0 2px 0 2px rgba(85, 54, 105, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: min(calc(var(--cell) * .4), 30px);
  line-height: 1;
  color: var(--rk-ink);
  pointer-events: none;
  transition: background .2s, box-shadow .2s, transform .2s;
}
/* once its rectangle is placed, the number moves to the tile's centre */
.rk-cell.is-done .rk-clue { visibility: hidden; }
.rk-cell.is-hint .rk-clue { animation: rkPulse 1s ease-in-out 3; }

/* ---- a placed rectangle ---- */
.rk-tile {
  position: absolute;
  left: calc(var(--x) / var(--cols, 5) * 100%);
  top: calc(var(--y) / var(--rows, 5) * 100%);
  width: calc(var(--w) / var(--cols, 5) * 100%);
  height: calc(var(--h) / var(--rows, 5) * 100%);
  padding: 3px;
}
.rk-tile-face {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: min(calc(var(--cell) * .5), 40px);
  line-height: 1;
  color: var(--rk-ink);
  width: 100%;
  height: 100%;
  border-radius: 9px;
  /* faint cell lines stay visible inside a tile, so the squares can still
     be counted; offset by the tile's 3px padding to sit on the board grid */
  background-color: var(--face);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .5) 1.5px, transparent 1.5px),
    linear-gradient(to bottom, rgba(255, 255, 255, .5) 1.5px, transparent 1.5px);
  background-size: var(--cell) var(--cell);
  background-position: -3px -3px;
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, .35),
    inset 0 -4px 0 var(--face-dark);
}
.rk-tile.is-new .rk-tile-face { animation: rkDrop .26s ease-out; }
.rk-tile.is-review .rk-tile-face { animation: rkReview .9s ease-in-out 3; }
.rk-board.is-solved .rk-tile-face { animation: rkCheer .5s ease-out both; animation-delay: var(--delay, 0s); }

.rk-c0 { --face: #8dbde3; --face-dark: #5f93bf; }
.rk-c1 { --face: #f4d077; --face-dark: #cfa646; }
.rk-c2 { --face: #8fd09a; --face-dark: #5ca669; }
.rk-c3 { --face: #f3a9bf; --face-dark: #cf7d96; }
.rk-c4 { --face: #c4addf; --face-dark: #9478bb; }
.rk-c5 { --face: #f7bb82; --face-dark: #d28e52; }

/* ---- the rectangle being drawn ---- */
.rk-sel, .rk-ghost {
  position: absolute;
  left: calc(var(--x) / var(--cols, 5) * 100%);
  top: calc(var(--y) / var(--rows, 5) * 100%);
  width: calc(var(--w) / var(--cols, 5) * 100%);
  height: calc(var(--h) / var(--rows, 5) * 100%);
  pointer-events: none;
}
.rk-sel::before, .rk-ghost::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 9px;
  border: 3px dashed var(--rk-ink);
  background: rgba(111, 74, 134, .12);
}
.rk-sel.is-good::before { border-color: var(--rk-good); border-style: solid; background: rgba(60, 181, 74, .18); }
.rk-sel.is-bad::before { border-color: var(--rk-bad); border-style: solid; background: rgba(216, 67, 62, .16); }
/* still being drawn, but already can't work (two numbers, or too big) */
.rk-sel.is-over::before { border-color: var(--rk-bad); background: rgba(216, 67, 62, .1); }
.rk-sel.is-over .rk-sel-chip { background: var(--rk-bad); }
.rk-sel.is-bad { animation: rkShake .36s ease-in-out; }
.rk-sel-chip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -55%);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--rk-ink);
  color: #fff;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: clamp(13px, 3.4vw, 17px);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  z-index: 2;
}
.rk-sel.is-good .rk-sel-chip { background: var(--rk-good); }
.rk-sel.is-bad .rk-sel-chip { background: var(--rk-bad); }

/* Pista: where the next rectangle goes */
.rk-ghost::before {
  border-color: var(--rk-hint);
  background: rgba(232, 145, 46, .16);
  animation: rkGhost 1.1s ease-in-out infinite;
}

/* the demo finger on the very first lesson board */
.rk-finger {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: var(--pink);
  border: 3px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  pointer-events: none;
  z-index: 3;
}

/* ---- controls (pad area) ---- */
.rk-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.rk-count {
  flex-basis: 100%;
  margin: 0;
  text-align: center;
  font-size: 16px;
  color: var(--purple-dark);
  opacity: .85;
}
.rk-btn {
  font-family: inherit;
  font-size: 18px;
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform .05s, filter .12s;
}
.rk-btn:active { transform: translateY(3px); }
.rk-btn[disabled] { filter: grayscale(.6); opacity: .55; cursor: default; }
.rk-btn-undo, .rk-btn-restart { background: var(--purple); box-shadow: 0 5px 0 var(--purple-dark); }
.rk-btn-undo:active, .rk-btn-restart:active { box-shadow: 0 2px 0 var(--purple-dark); }
.rk-btn-hint { background: var(--orange); box-shadow: 0 5px 0 #b06d17; }
.rk-btn-hint:active { box-shadow: 0 2px 0 #b06d17; }

@media (min-width: 640px) and (orientation: landscape) {
  .rk-controls { flex-direction: column; }
  .rk-btn { width: min(210px, 100%); }
  .rk-count { flex-basis: auto; }
}
/* narrow phones: three buttons must still sit on one row */
@media (max-width: 400px) {
  .rk-btn { font-size: 15px; padding: 9px 14px; }
  .rk-controls { gap: 8px; }
}
/* phone on its side: the rule line sits in the side column (see placeMsg) */
.rk-controls .rk-msg { flex-basis: 100%; margin: 0; min-height: 0; font-size: 14px; }
@media (max-height: 430px) {
  .feedback { min-height: 32px; }
  .rk-count { font-size: 14px; }
  .rk-btn { font-size: 15px; padding: 7px 16px; }
  .rk-steps li { width: 76px; }
  .rk-steps li + li::before { top: 32px; }
}

@keyframes rkDrop {
  0% { transform: scale(.9); opacity: .4; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes rkCheer {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.06); filter: brightness(1.08); }
}
@keyframes rkShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@keyframes rkPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@keyframes rkGhost {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes rkReview {
  0%, 100% { box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 var(--face-dark), 0 0 0 0 var(--rk-bad); }
  50% { box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 var(--face-dark), 0 0 0 4px var(--rk-bad); }
}

@media (prefers-reduced-motion: reduce) {
  .rk-tile-face, .rk-sel, .rk-ghost::before, .rk-cell.is-hint .rk-clue { animation: none !important; }
}