/* Galaxies on the pencil-puzzle kit (games/static/games/puzzles/kit/puzzles.css
   and kit.css, loaded before this): its accent, a deep night-sky blue beside
   Star Battle's indigo, Fillomino's terracotta, Hashi's teal and Yin-Yang's
   plum, with warm gold dots; and its board, galaxies washed in the kit's
   tints. Cell units: one cell is 1 wide. */
:root {
  --accent: #1e2b52;         /* the one filled button: 13.9:1 with white */
  --accent-ink: #ffffff;
  --dot: #e0a92e;            /* a dot: warm gold */
  --dot-rim: #1e2b52;        /* ringed in the night sky, 3:1 and more on every tint */
  --wall: var(--ink);        /* the walls: bold ink */
  /* The paint box (js/art.js, PAINTS): the Okabe-Ito colors, which most
     color-blind eyes tell apart, and a gray. A painted cell wears its color
     over the paper, light enough for the walls and dots to stay plain. */
  --gx-paint-1: #e69f00;     /* orange */
  --gx-paint-2: #56b4e9;     /* sky blue */
  --gx-paint-3: #009e73;     /* green */
  --gx-paint-4: #f0e442;     /* yellow */
  --gx-paint-5: #0072b2;     /* blue */
  --gx-paint-6: #d55e00;     /* red */
  --gx-paint-7: #cc79a7;     /* pink */
  --gx-paint-8: #8e8e8e;     /* gray */
  --gx-paint-strength: 58%;
}

/* ── the emblem ─────────────────────────────────────────────────────────── */
.mark { display: block; overflow: visible; }
.mark-sky { fill: var(--accent); }
.mark-galaxy { fill: var(--tint-3); stroke: var(--paper-2); stroke-width: .08; stroke-linejoin: round; }
.mark-dot { fill: var(--dot); stroke: var(--accent); stroke-width: .07; }

/* ── the board ──────────────────────────────────────────────────────────── */
/* Three kinds of line, told apart at a glance: the grid's faint dotted
   lines, the walls in bold ink, and the frame in the night sky, heavier. */
.galaxies .cell-lines, .galaxies-mini .cell-lines { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: .03; stroke-dasharray: .05 .07; stroke-linecap: round; }
.galaxies .my-walls, .galaxies .given-walls, .galaxies-mini .walls { fill: none; stroke: var(--wall); stroke-width: .12; stroke-linecap: round; }
.galaxies .frame, .galaxies-mini .frame { stroke: var(--accent); stroke-width: .16; }
/* Where a click would draw (a mouse), and the side a click would rub out. */
.galaxies .hover-side { fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: .12; stroke-linecap: round; pointer-events: none; }
.galaxies .hover-side.off { stroke: color-mix(in srgb, var(--bad) 55%, transparent); }
.galaxies .cross { fill: none; stroke: color-mix(in srgb, var(--ink) 60%, transparent); stroke-width: .045; stroke-linecap: round; pointer-events: none; }
.galaxies { cursor: crosshair; }
.galaxies.painting { cursor: cell; }

/* Paint: the player's own marks, under the lines. They give way once it's
   solved, so the finished galaxies wash in. */
.galaxies .paint { pointer-events: none; transition: opacity var(--m-fade, 300ms) ease; }
.galaxies.done .paint { opacity: 0; }
.galaxies .paint.c1, .gx-swatch.c1 .chip { --c: var(--gx-paint-1); }
.galaxies .paint.c2, .gx-swatch.c2 .chip { --c: var(--gx-paint-2); }
.galaxies .paint.c3, .gx-swatch.c3 .chip { --c: var(--gx-paint-3); }
.galaxies .paint.c4, .gx-swatch.c4 .chip { --c: var(--gx-paint-4); }
.galaxies .paint.c5, .gx-swatch.c5 .chip { --c: var(--gx-paint-5); }
.galaxies .paint.c6, .gx-swatch.c6 .chip { --c: var(--gx-paint-6); }
.galaxies .paint.c7, .gx-swatch.c7 .chip { --c: var(--gx-paint-7); }
.galaxies .paint.c8, .gx-swatch.c8 .chip { --c: var(--gx-paint-8); }
.galaxies .paint { fill: color-mix(in srgb, var(--c) var(--gx-paint-strength), var(--paper-2)); }

/* A finished galaxy: washed in its tint, its dot lit gold. */
.galaxies .dot, .galaxies-mini .dot { fill: var(--paper-2); stroke: var(--dot-rim); stroke-width: .07; pointer-events: none; }
.galaxies .dot.lit, .galaxies-mini .dot { fill: var(--dot); }
.galaxies .dot.bad { stroke: var(--bad); stroke-width: .1; }

/* What the helpers flag: hatched red. */
.galaxies .bad-wash { fill: url(#gx-hatch); }
.galaxies .hatch-bg { fill: color-mix(in srgb, var(--bad) 10%, transparent); }
.galaxies .hatch-line { stroke: color-mix(in srgb, var(--bad) 60%, transparent); stroke-width: .04; }
.galaxies.done .frame { stroke: var(--good); }

@media (prefers-reduced-motion: no-preference) {
  /* Solved: the galaxies wash in, outward from the last wall drawn. */
  .galaxies.win .tint { animation: gx-wash .5s ease-out var(--d, 0ms) both; }
  .galaxies.win .dot { animation: gx-shine .6s ease-out .2s both; transform-box: fill-box; transform-origin: center; }
}
@keyframes gx-wash { from { opacity: 0; } }
@keyframes gx-shine { 40% { scale: 1.35; } }

/* ── the tray under the board: Lines | Paint, and Paint's colors ─────────── */
/* The tool is the kit's segmented choice (house.css, .house-seg); the eight
   colors and the rubber show beside it only while Paint is picked, their
   room kept (visibility), so neither the board nor the choice moves. */
.gx-tray { display: grid; grid-template-columns: auto auto; align-items: center; gap: 8px 14px; }
.gx-tools { width: 10em; }
.gx-box { display: grid; grid-template-columns: repeat(9, 44px); gap: 6px; }
.gx-box.off { visibility: hidden; }
.gx-tool {
  min-height: 44px; min-width: 44px; padding: 0; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper-2);
  color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  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) { .gx-tool:hover { background: var(--paper); } }
.gx-tool:active { transform: translateY(2px); box-shadow: none; }
.gx-tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
/* A color: its chip, as it paints; the one picked ringed in ink. */
.gx-swatch .chip { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 35%, transparent); }
.gx-swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); transform: none; }
.gx-rub svg { width: 24px; }
.pk .play:has(.grid.hidden) :is(.gx-tool, .gx-tools) { pointer-events: none; opacity: .45; }

/* Phones: two rows of six, so the board keeps its room on a short screen:
   the choice and three colors, then five colors and the rubber (each still
   a finger wide at 320px; the box's own box steps aside for the grid). */
@media (max-width: 640px) {
  .gx-tray { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px 4px; width: min(100%, 360px); }
  .gx-tools { grid-column: span 3; width: auto; }
  .gx-box { display: contents; }
  .gx-tool { min-width: 0; }
}
/* Phones on their side: a column beside the board, the choice stacked. */
@media (orientation: landscape) and (max-height: 500px) {
  .gx-tray { grid-template-columns: auto; justify-items: stretch; width: auto; gap: 6px; }
  .gx-tools { grid-column: auto; width: auto; grid-auto-flow: row; }
  .gx-box { display: grid; grid-template-columns: repeat(2, 44px); width: auto; gap: 5px; }
  /* (drawn 40px tall to fit the rail; each still takes a finger's 44px, into the gaps) */
  .gx-tool { min-height: 40px; position: relative; }
  .gx-tool::before { content: ''; position: absolute; inset: -4px -2px; }
}

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