/* Yin-Yang on the pencil-puzzle kit (games/static/games/puzzles/kit/puzzles.css
   and kit.css, loaded before this): its accent, a deep plum beside Star
   Battle's indigo, Fillomino's terracotta and Hashi's teal; and its board,
   black and white stones on the kit's paper. Cell units: one cell is 1 wide. */
:root {
  --accent: #7a3a6a;         /* the one filled button: 8.6:1 with white */
  --accent-ink: #ffffff;
  --stone-black: #22262b;    /* graphite, as the ink */
  --stone-white: #fffdf7;    /* the sheet's own white, ringed in ink */
  --given-wash: color-mix(in srgb, var(--accent) 11%, transparent);   /* under a printed stone */
}

/* ── the emblem ─────────────────────────────────────────────────────────── */
.mark { display: block; overflow: visible; }
.mark-dark { fill: var(--stone-black); }
.mark-light { fill: var(--stone-white); }
.mark-ring { fill: none; stroke: var(--accent); stroke-width: .1; }

/* ── the board ──────────────────────────────────────────────────────────── */
.yin-yang .given-cell, .yin-yang-mini .given-cell { fill: var(--given-wash); }
.yin-yang .stone, .yin-yang-mini .stone { stroke: var(--stone-black); stroke-width: .05; pointer-events: none; }
.yin-yang .stone.black, .yin-yang-mini .stone.black { fill: var(--stone-black); }
.yin-yang .stone.white, .yin-yang-mini .stone.white { fill: var(--stone-white); }
/* Printed stones: a heavier rim, and the accent wash under them. */
.yin-yang .stone.given, .yin-yang-mini .stone.given { stroke-width: .09; }
.yin-yang .stone.black.given, .yin-yang-mini .stone.black.given { stroke: color-mix(in srgb, var(--stone-black) 70%, var(--accent)); }

/* What the helpers show: a 2×2 of one color hatched, a cut-off group ringed, a full grid that doesn't solve framed in red. */
.yin-yang .bad-wash { fill: url(#yy-hatch); }
.yin-yang .hatch-bg { fill: color-mix(in srgb, var(--bad) 10%, transparent); }
.yin-yang .hatch-line { stroke: color-mix(in srgb, var(--bad) 60%, transparent); stroke-width: .04; }
.yin-yang .sealed { fill: none; stroke: var(--bad); stroke-width: .07; stroke-dasharray: .14 .09; pointer-events: none; }
.yin-yang .frame.wrong { stroke: var(--bad); }
.yin-yang.done .frame { stroke: var(--good); }

@media (prefers-reduced-motion: no-preference) {
  .yin-yang .stone.pop { animation: yy-pop var(--m-pop, 200ms) cubic-bezier(.2, .9, .3, 1.4); transform-box: fill-box; transform-origin: center; }
  /* Solved: the stones swell in turn, outward from the last cell shaded. */
  .yin-yang.win .stone { animation: yy-shine .5s ease-out var(--d, 0ms) both; transform-box: fill-box; transform-origin: center; }
}
@keyframes yy-pop { from { scale: .4; } 60% { scale: 1.12; } }
@keyframes yy-shine { 40% { scale: 1.18; } }

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