/* Fillomino on the pencil-puzzle kit (games/static/games/puzzles/kit/puzzles.css
   and kit.css, loaded before this): its accent, a warm terracotta beside Star
   Battle's indigo; a wash for each number; and how its board and number pad
   are drawn. Cell units: one cell is 1 wide. */
:root {
  --accent: #a4472a;         /* the one filled button: 6.0:1 with white */
  --accent-ink: #ffffff;
  --pencil: #2a5fa0;         /* your numbers: signal blue a shade deeper, 5.3:1 or more on every wash */
  /* A finished piece is washed in its number's color: the kit's tints, and two more. */
  --fo-1: #ebe5d6;
  --fo-2: var(--tint-3);
  --fo-3: var(--tint-1);
  --fo-4: var(--tint-4);
  --fo-5: var(--tint-2);
  --fo-6: var(--tint-5);
  --fo-7: var(--tint-7);
  --fo-8: var(--tint-6);
  --fo-9: #f1dbe6;
}

/* ── the emblem ─────────────────────────────────────────────────────────── */
.mark { display: block; overflow: visible; }
.mark-three { fill: var(--accent); }
.mark-two { fill: var(--fo-2); }
.mark-one { fill: var(--fo-4); }
.mark-line { fill: none; stroke: var(--ink); stroke-width: .14; stroke-linejoin: round; }

/* ── the board ──────────────────────────────────────────────────────────── */
.fillomino .wash, .fillomino-mini .wash { fill: transparent; }
.fillomino .wash.n1, .fillomino-mini .wash.n1 { fill: var(--fo-1); }
.fillomino .wash.n2, .fillomino-mini .wash.n2 { fill: var(--fo-2); }
.fillomino .wash.n3, .fillomino-mini .wash.n3 { fill: var(--fo-3); }
.fillomino .wash.n4, .fillomino-mini .wash.n4 { fill: var(--fo-4); }
.fillomino .wash.n5, .fillomino-mini .wash.n5 { fill: var(--fo-5); }
.fillomino .wash.n6, .fillomino-mini .wash.n6 { fill: var(--fo-6); }
.fillomino .wash.n7, .fillomino-mini .wash.n7 { fill: var(--fo-7); }
.fillomino .wash.n8, .fillomino-mini .wash.n8 { fill: var(--fo-8); }
.fillomino .wash.n9, .fillomino-mini .wash.n9 { fill: var(--fo-9); }
.fillomino .bad-wash { fill: url(#fo-hatch); }
.fillomino .hatch-bg { fill: color-mix(in srgb, var(--bad) 8%, transparent); }
.fillomino .hatch-line { stroke: color-mix(in srgb, var(--bad) 55%, transparent); stroke-width: .04; }
.fillomino .sel { fill: color-mix(in srgb, var(--pick) 16%, transparent); stroke: var(--pick); stroke-width: .06; }
/* Several cells picked (a drag, Shift): washed in signal blue, yours, and ringed round the whole, not cell by cell. */
.fillomino .sel-many { fill: color-mix(in srgb, var(--pick) 17%, transparent); }
.fillomino .sel-ring { fill: none; stroke: var(--pick); stroke-width: .09; stroke-linecap: round; pointer-events: none; }

/* Heavy lines: between different numbers (the helper), yours, and a line that splits equal numbers. */
.fillomino .piece-lines, .fillomino-mini .piece-lines { fill: none; stroke: var(--line-bold); stroke-width: .08; stroke-linecap: square; }
.fillomino .my-lines { fill: none; stroke: var(--pencil); stroke-width: .08; stroke-linecap: round; }
.fillomino .bad-lines { fill: none; stroke: var(--bad); stroke-width: .09; stroke-linecap: round; stroke-dasharray: .16 .1; }
.fillomino.lining { cursor: crosshair; }

/* Numbers: printed ones in heavy graphite, yours in pencil blue. */
.fillomino .num, .fillomino-mini .num {
  font: 500 .6px/1 var(--ui); text-anchor: middle; dominant-baseline: alphabetic; fill: var(--pencil); pointer-events: none;
  font-variant-numeric: proportional-nums lining-nums;
}
.fillomino .num.given, .fillomino-mini .num.given { font-weight: 800; fill: var(--ink); }
.fillomino-mini .num { font-size: .62px; }

@media (prefers-reduced-motion: no-preference) {
  .fillomino .num.pop { animation: fo-pop var(--m-pop, 200ms) cubic-bezier(.2, .9, .3, 1.4); transform-box: fill-box; transform-origin: center; }
  /* Solved: the pieces wash in, one after another outward from the last number written. */
  .fillomino.win .wash { animation: fo-wash .5s ease-out var(--d, 0ms) both; }
}
@keyframes fo-pop { from { scale: .4; } 60% { scale: 1.15; } }
@keyframes fo-wash { from { opacity: 0; } }

/* ── the number pad, under the board ────────────────────────────────────── */
.fo-pad { display: grid; grid-template-columns: repeat(9, 44px) 52px auto; gap: 6px; }
.fo-key {
  min-height: 44px; min-width: 44px; padding: 0; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper-2);
  color: var(--ink); font: 700 20px/1 var(--ui); font-variant-numeric: tabular-nums; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 25%, transparent);
  transition: background-color var(--m-press, 120ms) ease, transform var(--m-press, 120ms) ease, box-shadow var(--m-press, 120ms) ease;
}
@media (hover: hover) { .fo-key:hover { background: var(--paper); } }
.fo-key:active { transform: translateY(2px); box-shadow: none; }
/* The number in the cell you've picked. */
.fo-key.on { color: var(--pencil); border-color: var(--pencil); background: color-mix(in srgb, var(--pick) 10%, var(--paper-2)); }
.fo-key svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.fo-rub svg { width: 24px; }
.fo-lines { padding: 0 12px; font-size: var(--t-note); }
.fo-lines svg .g { stroke-width: 1; opacity: .45; }
.fo-lines[aria-pressed="true"] { background: var(--ink); color: var(--paper-2); }
.pk .play:has(.grid.hidden) .fo-key { pointer-events: none; opacity: .45; }

/* Phones: two rows (1–5 and rub out; 6–9 and Lines). */
@media (max-width: 640px) {
  .fo-pad { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100%, 420px); }
  .fo-key { min-width: 0; }
  .fo-rub { grid-column: 6; grid-row: 1; }
  .fo-lines { grid-column: 5 / span 2; grid-row: 2; }
}
/* Phones on their side: a column beside the board. */
@media (orientation: landscape) and (max-height: 500px) {
  .fo-pad { grid-template-columns: repeat(3, 44px); width: auto; gap: 5px; }
  /* (drawn 40px tall to fit the rail; each still takes a finger's 44px, into the gaps) */
  .fo-key { min-height: 40px; position: relative; }
  .fo-key::before { content: ''; position: absolute; inset: -4px -2px; }
  .fo-rub { grid-column: auto; grid-row: auto; }
  .fo-lines { grid-column: 2 / span 2; grid-row: auto; padding: 0 6px; }
}

/* ── a small grid: a daily's card, How to play ──────────────────────────── */
.mini { display: block; overflow: visible; }
.fillomino-mini { background: var(--paper-2); }