/* Star Battle on the pencil-puzzle kit (games/static/games/puzzles/kit/puzzles.css
   and kit.css, loaded before this): its accent, a night indigo, and its gold
   stars; and how its board is drawn. Cell units: one cell is 1 wide. */
:root {
  --accent: #33378a;         /* the one filled button: 10.2:1 with white */
  --accent-ink: #ffffff;
  --star: #e0a21a;           /* a placed star */
  --star-edge: #86580a;      /* its outline: 5.2:1 on --paper-2, so a star reads on any tint */
  --star-shine: #fbe6a6;
}

/* ── the emblem ─────────────────────────────────────────────────────────── */
.mark { display: block; overflow: visible; }
.mark-star { fill: var(--star); stroke: var(--star-edge); stroke-width: .07; stroke-linejoin: round; }
.mark-shine { fill: var(--star-shine); opacity: .85; }
.wordmark-h .mark-star { stroke-width: .09; }

/* ── the board ──────────────────────────────────────────────────────────── */
.star-battle path { transform-box: fill-box; transform-origin: center; }
.star-battle .star-body, .mini .star { fill: var(--star); stroke: var(--star-edge); stroke-width: .05; stroke-linejoin: round; }
.star-battle .star-shine { fill: var(--star-shine); opacity: .8; }
.star-battle .star .halo { fill: var(--star); opacity: 0; }
.star-battle .star.bad .halo { fill: none; opacity: 1; stroke: var(--bad); stroke-width: .06; stroke-dasharray: .13 .09; }
.star-battle .star.bad .star-body { stroke: var(--bad); }
.star-battle .dot { fill: var(--ink); opacity: .74; }
.star-battle .dot.auto { fill: var(--soft); opacity: .5; }
.star-battle .bad-wash { fill: url(#sb-hatch); }
.hatch-bg { fill: color-mix(in srgb, var(--bad) 8%, transparent); }
.hatch-line { stroke: color-mix(in srgb, var(--bad) 55%, transparent); stroke-width: .04; }

/* Counters: a pip for each star a row, column or region needs. Outlined while
   empty, inked as stars go in, gold and lit when full, red when too many. */
.star-battle .pip { fill: none; stroke: var(--soft); stroke-width: .04; stroke-linejoin: round; transition: fill var(--m-quick, 150ms) ease, stroke var(--m-quick, 150ms) ease; }
.star-battle .pip.on { fill: var(--soft); }
.star-battle .ctr.full .pip { fill: var(--star); stroke: var(--star-edge); }
.star-battle .ctr.over .pip { fill: var(--bad); stroke: var(--bad); }
.star-battle .region-ctr .pip { stroke-width: .045; }

/* A star lands: a small pop. */
@media (prefers-reduced-motion: no-preference) {
  .star-battle .star.pop .star-body, .star-battle .star.pop .star-shine { animation: star-pop var(--m-pop, 200ms) cubic-bezier(.2, .9, .3, 1.4); }
  .star-battle .ctr.lit .pip { animation: pip-light var(--m-arrive, 350ms) ease-out; }
  /* Solved: the stars shine one after another outward from the last one. */
  .star-battle.win .star .halo { animation: star-glow var(--m-celebrate, 1000ms) ease-in-out var(--d, 0ms) both; }
  .star-battle.win .star .star-body, .star-battle.win .star .star-shine { animation: star-shine .6s ease-out var(--d, 0ms) both; }
}
.star-battle.done .star .halo { opacity: .22; }
.star-battle.done .dot { opacity: .22; transition: opacity .6s ease; }
@keyframes star-pop { from { scale: .35; } 60% { scale: 1.2; } }
@keyframes pip-light { 40% { scale: 1.5; } }
@keyframes star-shine { 45% { scale: 1.3; } }
@keyframes star-glow { 0% { opacity: 0; } 40% { opacity: .55; } 100% { opacity: .22; } }

/* ── a small grid: a daily's card, How to play ──────────────────────────── */
.mini { display: block; overflow: visible; }
.mini .dot { fill: var(--ink); opacity: .5; }
.mini.solved .star { fill: var(--star); }