/* =====================================================
   colour-creatures.css — 🎨 Pocket Creature Colours (Bella)

   The game is PAINTING: tap a well, tap a creature, the creature fills. This
   sheet's whole job is to make those three things read at a glance and with
   no words — a plan you can see, a picture you can fill, and a paint box.

   Loaded by bella-games.html after style.css, kid-games.css and kid-motion.css,
   which own the tokens, the paper card, .kg-choices and .kg-target. Nothing
   here restyles a shared class on its own: every selector introduces a
   kg-colour-creatures- class or qualifies a shared one with it, so six
   per-game sheets can sit on one page without colliding.

   Colour comes in per element as --kg-cc-ink / --kg-cc-deep / --kg-cc-soft,
   set inline by the game from the rules module's palette. The sheet knows
   nothing about which colours exist.

   Reduced motion is handled globally at style.css:558-561 (every animation and
   transition flattened to .001ms). No @media block is repeated here. So every
   moving state below ALSO carries a colour, rim or opacity change — what she
   sees when motion is off is a stepped state, never nothing at all.
   ===================================================== */

/* ---------------- The plan ----------------
   The reason a muted tablet can finish every round: a row of chips, each one
   a picture of a finished creature — the shape it is, in the colour it wants.
   She matches a chip to a well and a well to a creature. No words involved. */
.kg-colour-creatures-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 22px 14px;
  border-radius: var(--radius-lg);
  background: var(--paper);
  border: 4px solid var(--accent-2);
  box-shadow: var(--shadow);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease),
              border-color .2s var(--ease);
}

.kg-colour-creatures-planlabel {
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.kg-colour-creatures-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.kg-colour-creatures-chip {
  position: relative;
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 5px;
  border-radius: 20px;
  background: var(--kg-cc-soft, #fff);
  border: 4px solid transparent;
  transition: border-color .2s var(--ease), opacity .2s var(--ease),
              transform .2s var(--ease);
}

/* The chip she is on. A ring, not a wiggle, so it survives motion being off. */
.kg-colour-creatures-chip[data-active="yes"] {
  border-color: var(--accent);
  transform: scale(1.06);
}

/* Done. The tick is the state; the fade is the flourish. */
.kg-colour-creatures-chip[data-done="yes"] { opacity: .55; }
.kg-colour-creatures-chip[data-done="yes"] .kg-colour-creatures-tick { opacity: 1; }

.kg-colour-creatures-chipsvg {
  display: block;
  width: 100%;
  height: 100%;
}

.kg-colour-creatures-tick {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: .95rem;
  font-weight: 900;
  color: #fff;
  background: var(--teal);
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity .2s var(--ease);
}

/* What the replay, the idle repeat and every mismatch do visibly. The lift is
   the nice half; the ring is the half that survives motion being switched off. */
.kg-colour-creatures-pulse {
  box-shadow: 0 0 0 8px var(--accent-2), var(--shadow-lg);
  animation: kg-colour-creatures-throb .7s var(--ease) 1;
}
@keyframes kg-colour-creatures-throb {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.04); }
}

/* ---------------- The canvas ----------------
   A framed picture the creatures stand in, so the row reads as a scene and
   not as three answer cards. position: relative is also what the celebration
   particle layer anchors to. */
.kg-colour-creatures-canvas {
  position: relative;
  width: 100%;
  padding: 22px 14px 26px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 55%, #fdf4ea 100%);
  border: 5px solid var(--accent-2);
  box-shadow: var(--shadow-lg);
}

/* Decoration, never fillable, never in the tab order. */
.kg-colour-creatures-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 46%;
  pointer-events: none;
}
.kg-colour-creatures-far  { fill: var(--accent-2); opacity: .22; }
.kg-colour-creatures-near { fill: var(--accent); opacity: .16; }
.kg-colour-creatures-fleck { fill: var(--accent); opacity: .3; }

/* The gutter is the SHARED .kg-choices rule's, deliberately untouched: it
   already holds Brief §4's 30px floor at every width, and a per-game override
   here is how a game quietly ends up 26px apart on a phone. Three creatures
   wrap to a second row below 700px — which on a meadow reads as depth — and
   never crowd. */
.kg-colour-creatures-scene {
  position: relative;
  align-items: flex-end;
}

/* ---------------- The creatures ----------------
   .kg-target already carries the 76px minimum, the 18px hit slop, the
   touchdown :active state and the correct/wrong/dim/hint modifiers. This
   strips the card off it: a creature is part of a painting, not a button with
   a shadow, and the moment it looks like a card the game looks like a quiz. */
.kg-colour-creatures-region {
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  transition: transform .18s var(--ease), opacity .2s var(--ease),
              border-color .15s var(--ease);
}

/* The scene's lift and tilt land on the ARTWORK and never on the button. A
   creature standing 16px higher than its neighbour is the whole reason this
   reads as a place rather than a row — but a transform on the button moves
   its hit box too, and a box that has moved 16px up has closed 16px of the
   30px gutter underneath it. The lift is smaller than the button's own 18px
   of hit slop, so the drawing travels inside a target that never moves. */
.kg-colour-creatures-svg {
  display: block;
  width: clamp(80px, 24vw, 132px);
  height: clamp(80px, 24vw, 132px);
  transform: translateY(var(--kg-cc-lift, 0px));
  rotate: var(--kg-cc-tilt, 0deg);
  transition: filter .25s var(--ease), transform .18s var(--ease);
}

/* Unpainted: paper, with a dashed rim. That dash is the single strongest
   affordance on the screen — a five-year-old has seen a colouring book and
   knows on sight that a dashed outline is asking to be filled in. */
.kg-colour-creatures-body {
  fill: var(--kg-cc-ink, #f6f2ea);
  stroke: var(--kg-cc-deep, #b4ab99);
  stroke-width: 5;
  stroke-linejoin: round;
  transition: fill .25s var(--ease), stroke .25s var(--ease);
}
.kg-colour-creatures-region[data-filled="no"] .kg-colour-creatures-body {
  stroke-dasharray: 9 7;
  stroke-linecap: round;
}

/* The one small quirk that makes each body a creature rather than a swatch:
   a belly stripe, a tuft, a row of dots, a seam. No faces, no eyes. */
.kg-colour-creatures-mark {
  fill: none;
  stroke: var(--kg-cc-deep, #b4ab99);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: .5;
}
.kg-colour-creatures-blob {
  fill: var(--kg-cc-deep, #b4ab99);
  stroke: none;
  opacity: .45;
}

/* Wet paint. A ring that arrives with the fill and fades — one more channel
   saying "that one, just now", on top of the fill itself. */
.kg-colour-creatures-region.kg-colour-creatures-wet .kg-colour-creatures-svg {
  filter: drop-shadow(0 0 10px var(--kg-cc-ink, var(--accent)));
}

/* A finished scene. Every creature takes the shared correct rim, so the
   confirmation is a state and not an animation. */
.kg-colour-creatures-region.kg-correct {
  background: transparent;
  border-color: var(--teal);
}

/* The scaffold's one reserved highlight, on the creature the plan means. */
.kg-colour-creatures-region.kg-hint {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 5px var(--accent-2), var(--shadow-lg);
}

/* ---------------- The paint box ----------------
   Wells are the same real buttons at the same size, and each one IS its
   colour. No label needed, none given — the accessible name carries it. */
.kg-colour-creatures-palette {
  /* The canvas already ends in its own padding and rim, so this is on top of
     ~19px of dead space: the clear gap from the lowest creature to the
     nearest well measures well past the 30px floor, and every pixel saved
     here is a pixel of paint box above the fold. */
  margin-top: 22px;
  align-items: center;
}

/* Sized by arithmetic rather than by a guess: three wells and the two 30px
   gutters between them, and never wider than a comfortable pot. That keeps
   the paint box ONE ROW at every width — the two halves of the verb, "pick a
   colour" and "paint a creature", must be on screen together or a
   five-year-old has to scroll between them and the game stops being one act.
   border-box because the 18px hit slop and the 4px rim are inside the
   arithmetic; the button is still 80px at the narrowest phone, comfortably
   over the 76px floor. */
.kg-colour-creatures-well {
  position: relative;
  box-sizing: border-box;
  /* 64 and not 60: the two gutters are 30px each and the extra 4 is slack, so
     a subpixel container width can never round the gap down under the floor. */
  flex: 0 1 calc((100% - 64px) / 3);
  max-width: 170px;
  /* The whole button wears the colour, not just the blob in the middle: on a
     narrow phone the blob is the smallest it is allowed to be and the tinted
     face is what makes the well readable from across a room. */
  background: var(--kg-cc-soft, var(--paper));
  border-color: var(--kg-cc-deep, #999);
}

.kg-colour-creatures-pot {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%,
              color-mix(in srgb, var(--kg-cc-ink, #ccc) 72%, #fff),
              var(--kg-cc-ink, #ccc) 68%);
  /* color-mix is recent; the flat colour underneath is what an older engine
     paints, and it is the same hue. Nothing depends on the highlight. */
  background-color: var(--kg-cc-ink, #ccc);
  border: 5px solid var(--kg-cc-deep, #999);
  box-shadow: inset 0 -6px 12px rgba(53, 49, 94, .18);
  transition: transform .18s var(--ease);
}

/* Selected, and it STAYS selected: the brush appears, the rim thickens into
   the accent and the pot lifts. Three channels, two of which are still there
   when motion is off, because "which colour is on the brush" is the one piece
   of state she has to be able to read at any moment. */
.kg-colour-creatures-brush {
  position: absolute;
  top: -6px;
  right: -2px;
  font-size: 1.5rem;
  opacity: 0;
  transform: rotate(-12deg);
  transition: opacity .18s var(--ease);
}
.kg-colour-creatures-well.kg-colour-creatures-on {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 5px var(--accent-2), var(--shadow-lg);
}
/* The scaffold's reveal, on the well that goes with the highlighted creature.
   Same one reserved treatment as everywhere else, so the glow always means
   "this one". */
.kg-colour-creatures-well.kg-hint {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-2), var(--shadow-lg);
}
.kg-colour-creatures-well.kg-colour-creatures-on .kg-colour-creatures-pot {
  transform: scale(1.08);
}
.kg-colour-creatures-well.kg-colour-creatures-on .kg-colour-creatures-brush {
  opacity: 1;
}

/* The "you have not picked a paint yet" pulse goes round each WELL and never
   round the row. A box-shadow ring on a flex container with no corner radius
   draws a hard rectangle right across the screen, which reads as an error box
   rather than as "start here" — and this moment is the friendliest one in the
   game, not a warning. */
.kg-colour-creatures-palette.kg-colour-creatures-pulse {
  box-shadow: none;
  animation: none;
}
.kg-colour-creatures-palette.kg-colour-creatures-pulse .kg-colour-creatures-well {
  box-shadow: 0 0 0 6px var(--accent-2), var(--shadow);
  animation: kg-colour-creatures-throb .7s var(--ease) 1;
}

/* Nothing on the brush yet. The wells thicken their rims and breathe once a
   second — and the rim alone still says "start here" with motion off. */
.kg-colour-creatures-palette.kg-colour-creatures-waiting .kg-colour-creatures-well {
  border-color: var(--accent-2);
}
.kg-colour-creatures-palette.kg-colour-creatures-waiting .kg-colour-creatures-pot {
  animation: kg-colour-creatures-breathe 2.4s ease-in-out infinite;
}
@keyframes kg-colour-creatures-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

/* ---------------- Progress ----------------
   Six beads she can count. Two states, one filling marker, nothing to read —
   the entire progression surface a pre-reader gets (brief §2). */
.kg-colour-creatures-dots {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.kg-colour-creatures-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent-2);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.kg-colour-creatures-dot-on {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.15);
}

/* ---------------- Copy ---------------- */
.kg-colour-creatures-msg {
  font-size: 1.05rem;
  min-height: 1.6em;
  text-align: center;
}

/* The replay sits on its own line, well below the paint box, so reaching for
   it is never a mis-tap on a well. */
.kg-colour-creatures-bar {
  margin-top: 10px;
  justify-content: center;
}

/* ---------------- Breakpoints (only the ones style.css already uses) ------- */
@media (max-width: 560px) {
  .kg-colour-creatures-plan { padding: 8px 12px 10px; }
  /* Every row of vertical chrome on a phone is a row the paint box drops
     below the fold by. The label is a courtesy for a grown-up; the chips are
     the instruction, and they are still there. */
  .kg-colour-creatures-planlabel { display: none; }
  .kg-colour-creatures-chip { width: 56px; height: 56px; }
  /* Every horizontal pixel here is one the gutter cannot have, and the
     gutter has a hard floor. */
  .kg-colour-creatures-canvas { padding: 12px 6px 14px; }
  /* Sized so TWO creatures and one 30px gutter always fit the canvas on a
     phone. At 24vw they miss it by a pixel at 390 and the row breaks into a
     column of three, which is a scene no longer. The button stays 120px+ —
     well over the 76px floor — because the 18px slop and the 4px rim are
     added on top of whatever the drawing measures. */
  .kg-colour-creatures-svg { width: clamp(76px, 21vw, 108px); height: clamp(76px, 21vw, 108px); }
}

@media (max-width: 360px) {
  /* Never below the 76px floor: the artwork shrinks, the button does not, and
     three creatures wrap rather than crowd. */
  .kg-colour-creatures-chip { width: 52px; height: 52px; }
  .kg-colour-creatures-dot { width: 14px; height: 14px; }
}

@media (min-width: 700px) {
  .kg-colour-creatures-chip { width: 84px; height: 84px; }
  .kg-colour-creatures-svg { width: 132px; height: 132px; }
}

@media (hover: hover) {
  /* Decoration only, and everything it says is already said by :focus-visible
     and by the selected state — brief §4 forbids a hover-dependent anything.

     The shared .kg-target:hover paints an accent-2 rim, which on a creature
     with no card behind it is indistinguishable from the .kg-hint reveal. One
     reserved highlight means one: a mouse resting on a creature must not look
     like the scaffold pointing at it. So the rim is taken back off here and
     hover keeps only a lift in brightness. */
  /* :not() on all three state modifiers, and not a bare :hover — a bare one
     sits later in this sheet than .kg-correct and .kg-hint at the same
     specificity and quietly wipes the rim off whichever creature the mouse
     happens to be resting on. That is a finished creature with no finished
     mark, which is the confirmation the whole no-fail loop rests on. */
  .kg-colour-creatures-region:not(.kg-hint):not(.kg-correct):not(.kg-wrong):hover {
    border-color: transparent;
  }
  .kg-colour-creatures-region:hover .kg-colour-creatures-svg { filter: brightness(1.05); }
  .kg-colour-creatures-well:hover .kg-colour-creatures-pot { transform: scale(1.05); }
}