/* PuzzleFit styling, the same palette the other eight games use: a black page,
   the board on a lighter grey rounded panel, one light pill button, and that
   app's outline.

   This game is nearly monochrome, the way Arrows is. The line is the drawing and
   it is drawn in `--text`; colour is feedback only — `--accent` for a hint or
   the square the keyboard is about to take, `--bad` for a stretch the Check
   button says has to go, `--good` for the stretch it says is fine. Green still
   never means "correct" anywhere but in that transient answer. */
:root {
  --bg: #0a0a0a;
  --board-panel: #242424;      /* the tray the board sits on */
  --card: #000000;             /* outlined cards */
  --outline: rgba(255, 255, 255, .92);
  --square: #2f2f2f;           /* an empty square */
  --grid: rgba(0, 0, 0, .35);  /* the hairline between two of them */
  --filled: #3c4a58;           /* a square the line already runs through */
  --accent: #ab8dfa;
  --good: #4ed35e;
  --bad: #ff5722;
  --light: #e3e3e3;            /* the primary button */
  --primary-text: #0a0a0a;     /* ...and the text on it */
  --text: #ffffff;
  --muted: #9b9b9b;
  --clue: #e3e3e3;             /* the disc a number sits on */
  --clue-text: #0a0a0a;
}

/* A PGSDK host can report that it is running light; everything inverts except
   the roles above, which are the brand. Set by applyDarkMode(). */
body.light {
  --bg: #f1f1f4;
  --board-panel: #dededf;
  --card: #ffffff;
  --outline: rgba(0, 0, 0, .88);
  --square: #dfe6ee;
  --grid: rgba(0, 0, 0, .10);
  --filled: #b9cadb;
  --light: #14141a;
  --primary-text: #f4f4f6;
  --text: #101014;
  --muted: #5c5c66;
  --clue: #ffffff;
  --clue-text: #0a0a0a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;                       /* the game owns the viewport */
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* One screenful: the header takes what it needs and the board gets whatever is
   left. Anything added here comes straight off the board — put it in the
   overlay instead. */
.app {
  max-width: 460px;
  height: 100vh;
  height: 100dvh;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;                        /* narrow phones drop the tools to a second line */
}

.tools {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}

[hidden] { display: none; }

select {
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--outline);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 700;
}

.clock {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.left {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* There is no pan and no zoom: every level fits, so the square size picked by
   fitBoard() is the whole layout. That is what leaves the one finger free for
   drawing, which is the whole of this game. */
.viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;                          /* let it shrink inside the column */
  overflow: hidden;
  border-radius: 26px;
  background: var(--board-panel);
  touch-action: none;
  overscroll-behavior: contain;
  display: grid;
  place-items: center;
}

/* The padding is part of the arithmetic cellAt() undoes, so it lives here as
   --pad and is written out by game.js rather than being a number in two places. */
.stage {
  position: relative;
  padding: var(--pad);
}

/* The keyboard's answer to an arrow the line cannot follow. The finger needs
   none: a drag that will not go simply leaves the line where it was. */
.stage.shake { animation: shake .3s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* The board draws itself in grid units and is sized here, so a change of square
   size is one number and the whole picture follows it. */
.board {
  display: block;
  width: calc(var(--cols, 6) * var(--cell));
  height: calc(var(--rows, 6) * var(--cell));
}

/* Every part of the drawing is a class on an SVG element, so the palette above
   is the only place a colour is written. */
.sq { fill: var(--square); stroke: var(--grid); stroke-width: .02; }
.sq.on { fill: var(--filled); }

/* The line. Round caps and joins so a bend reads as one continuous stroke
   rather than as two squares meeting at a corner. */
.ink {
  fill: none;
  stroke: var(--text);
  stroke-width: .17;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The answer to Check, and the only place on this board a mark means "right".
   It fades again after a moment — the line never carries a standing verdict. */
.ink.right { stroke: var(--good); }
.ink.wrong { stroke: var(--bad); }

/* A wall. Heavier than the line and square-capped, so it reads as part of the
   grid rather than as something drawn on it. */
.wall {
  stroke: var(--text);
  stroke-width: .13;
  stroke-linecap: round;
}

.clue-disc { fill: var(--clue); }
.clue-disc.first { fill: var(--accent); }
.clue-text {
  fill: var(--clue-text);
  font-size: .44px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}

.btn {
  background: var(--card);
  color: var(--text);
  border: 2px solid var(--outline);
  border-radius: 999px;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}

/* The header row: small enough that four of them cost the board a few pixels. */
.btn.mini {
  padding: 5px 9px;
  font-size: 12px;
  border-width: 1px;
}

.btn:active { transform: scale(.97); }
.btn.primary { background: var(--light); border-color: var(--light); color: var(--primary-text); }
.btn.hidden { display: none; }

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 30;
}

.overlay.hidden { display: none; }

.panel {
  background: var(--card);
  border-radius: 22px;
  border: 2px solid var(--outline);
  padding: 26px 22px;
  text-align: center;
  max-width: 320px;
  width: 100%;
}

.panel h2 { margin: 0 0 8px; font-size: 28px; font-weight: 800; }
.panel p { margin: 0 0 18px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.panel .btn { width: 100%; }
.panel .btn + .btn { margin-top: 10px; }