/* Alive play — the puzzles games' own rules, loaded after alive.css (the shared stage, friend,
 * bubble and card rules). Keep selectors scoped to a game (.game-room[data-slug="..."]) or a
 * class that only that game uses. */

/* ---- Color Splash ------------------------------------------------------------------------------ */
/* the color word in the question keeps its color; a pale one (white) gets an outline so it can be read */
#game-root[data-slug="color-splash"] .game-prompt h2 .big { -webkit-text-stroke: 1.5px #27484c3d; paint-order: stroke fill; }
#game-root[data-slug="color-splash"] .game-prompt h2 .big[data-color="white"] { -webkit-text-stroke: 2px #8b93a8; }
/* the meet card: a big color, with a thing that has it tucked in the corner */
.meet-art .meet-color { position: relative; display: inline-grid; place-items: center; width: 1em; height: 1em; }
.meet-art .meet-color > svg { width: 100%; height: 100%; }
.meet-art .meet-color .meet-anchor {
  position: absolute; right: -.16em; bottom: -.08em; display: grid; place-items: center; width: .44em; height: .44em;
  border-radius: 50%; background: #fff; border: 3px solid var(--skill-soft); line-height: 1;
}
.meet-art .meet-color .meet-anchor .emoji { font-size: .28em; }

/* ---- Shape Spotter ----------------------------------------------------------------------------- */
/* the meet card marks each corner of a pointed shape, one after the other as the friend counts them */
.meet-art .corner-dot {
  fill: #fff; stroke: #27484c; stroke-width: 3; transform-box: fill-box; transform-origin: center;
  animation: corner-pop .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * .22s + .3s);
}
@keyframes corner-pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .meet-art .corner-dot { animation: none; } }
.game-room[data-quiet="true"] .meet-art .corner-dot { animation: none; }

/* ---- Odd One Out ------------------------------------------------------------------------------- */
/* the meet card: a row of pictures with the odd one ringed */
.meet-art .meet-odd { display: inline-flex; align-items: center; gap: .1em; font-size: .5em; }
.meet-art .meet-odd-item { display: grid; place-items: center; padding: .05em; border-radius: 24%; line-height: 1; }
.meet-art .meet-odd-item.is-odd { background: #fff3c2; box-shadow: 0 0 0 .035em #f2b92f; }
/* what a wrong pick shares, in the friend's bubble: the pair, side by side */
.friend-bubble .bubble-art :is(.pair-art, .pair) { display: inline-flex; gap: .05em; font-size: .7em; line-height: 1; }
/* only two cards fit: the alike pair waits above them */
#game-root[data-slug="odd-one-out"] .focus-panel.pair-panel { gap: .3em; }
/* a group card: two examples and the group's name */
#game-root[data-slug="odd-one-out"] .choice .group-pic .pair { display: inline-flex; gap: .06em; font-size: .62em; line-height: 1; }
#game-root[data-slug="odd-one-out"] .choice .group-pic .caption { font-size: max(14px, .3em); font-weight: 700; }

/* ---- Pattern Party ------------------------------------------------------------------------------ */
/* the meet card: a pattern, each repeat of it underlined */
.meet-art .meet-pattern { display: inline-flex; align-items: flex-end; gap: .16em; font-size: .36em; }
.meet-art .meet-pattern .unit { display: inline-flex; align-items: center; gap: .06em; padding: 0 .08em .1em; border-bottom: .07em solid var(--skill); }
/* what a wrong answer is told, in the friend's bubble: the pieces before, an arrow, the piece that comes
   (Sort It Out tells a wrong box the same way: the picture, an arrow, the box it belongs in) */
.friend-bubble .bubble-art :is(.pattern-step, .sort-step) { display: inline-flex; align-items: center; gap: .04em; font-size: .5em; line-height: 1; white-space: nowrap; }
.friend-bubble .bubble-art :is(.pattern-step, .sort-step) .arrow { font-size: .8em; color: var(--skill-2); }
/* the strip round: the pieces already there and the blanks are one row of equal squares (four to a row on a phone) */
#game-root[data-slug="pattern-party"] .stage[data-alive] .bins.strip { flex-wrap: nowrap; gap: clamp(6px, 1.4vmin, 12px); }
#game-root[data-slug="pattern-party"] .stage[data-alive] .bins.strip :is(.bin-fixed, .bin.slot) {
  box-sizing: border-box; flex: 0 1 clamp(54px, min(11vmin, 8vw), 92px); min-width: 48px; min-height: 0; aspect-ratio: 1; padding: 0;
  container-type: inline-size; border-radius: 26px;
}
#game-root[data-slug="pattern-party"] .stage[data-alive] .bins.strip .bin-fixed {
  line-height: 1; background: #ffffffb0; border: 4px solid color-mix(in srgb, var(--skill) 20%, white);
}
/* cqw counts from the nearest container above, so the size goes on what is inside the square, not the square itself */
#game-root[data-slug="pattern-party"] .stage[data-alive] .bins.strip .bin-fixed > * { font-size: 56cqw; }
/* a blank waits with a question mark until a piece is dropped in it */
#game-root[data-slug="pattern-party"] .stage[data-alive] .bins.strip .bin.slot { justify-content: center; }
#game-root[data-slug="pattern-party"] .stage[data-alive] .bins.strip .bin.slot .bin-items { font-size: 56cqw; line-height: 1; }
#game-root[data-slug="pattern-party"] .stage[data-alive] .bins.strip .bin.slot .bin-items .placed { width: auto; font-size: 1em; }
#game-root[data-slug="pattern-party"] .stage[data-alive] .bins.strip .bin.slot:not(.filled) .bin-items::before {
  content: "?"; font-size: .8em; font-weight: 700; color: var(--skill); opacity: .5;
}
@media (max-width: 640px) {
  #game-root[data-slug="pattern-party"] .stage[data-alive] .bins.strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); justify-items: center; width: min(100%, 360px); margin-inline: auto; }
  #game-root[data-slug="pattern-party"] .stage[data-alive] .bins.strip :is(.bin-fixed, .bin.slot) { width: 100%; max-width: 88px; }
}

/* ---- Sort It Out --------------------------------------------------------------------------------- */
/* the meet card: the two boxes, each with two pictures in it */
.meet-art .meet-sort { display: inline-flex; align-items: stretch; gap: .22em; font-size: .34em; }
.meet-art .meet-sort .mini-box {
  display: grid; justify-items: center; align-content: start; gap: .14em; min-width: 2.3em; padding: .2em .18em .24em;
  border: .07em solid var(--skill-soft); border-radius: .32em; background: color-mix(in srgb, var(--skill) 8%, white);
}
.meet-art .meet-sort .mini-icon { display: grid; place-items: center; width: 1.15em; height: 1.15em; line-height: 1; }
.meet-art .meet-sort .mini-things { display: flex; gap: .08em; line-height: 1; }

/* ---- Listen and Do -------------------------------------------------------------------------------- */
/* the picture plan is help, shown beside the spoken words: the shared caption rule hides the prompt's own line whenever
   words show, so the plan is let through (it only exists once help is on) */
#game-root[data-slug="listen-and-do"] .game-prompt:has(.speech-caption:not([hidden])) #bubble-text:has(.plan) {
  position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal;
}
#game-root[data-slug="listen-and-do"] #bubble-text .plan { display: inline-flex; align-items: center; gap: .1em; font-size: clamp(30px, 4.4vw, 42px); line-height: 1.1; }
#game-root[data-slug="listen-and-do"] #bubble-text .plan .arrow { font-size: .5em; font-weight: 700; color: var(--skill-2, #51409e); }
/* a step that is done is dimmed and ticked, the step to do next is ringed */
#game-root[data-slug="listen-and-do"] #bubble-text .step { position: relative; display: inline-block; padding: 0 .1em; border-radius: .3em; line-height: 1.15; }
#game-root[data-slug="listen-and-do"] #bubble-text .step.done { opacity: .5; }
#game-root[data-slug="listen-and-do"] #bubble-text .step.done::after { content: "✓"; position: absolute; right: -.1em; bottom: -.2em; font-size: .5em; font-weight: 800; color: #1c8a4a; }
#game-root[data-slug="listen-and-do"] #bubble-text .step.now { background: #fff3c2; box-shadow: 0 0 0 .06em #f2b92f; }

/* ---- Echo Echo ---------------------------------------------------------------------------------- */
/* the pads share one row, whatever the number (the friend takes a column of the stage, so four of the general size would wrap
   as three and one); four on a phone are two and two */
#game-root[data-slug="echo-echo"] .stage[data-alive] .pads {
  grid-template-columns: repeat(var(--pads, 4), minmax(0, 1fr)); max-width: calc(var(--pads, 4) * 200px + (var(--pads, 4) - 1) * 24px);
}
@media (max-width: 600px) {
  #game-root[data-slug="echo-echo"] .stage[data-alive] .pads[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 380px; }
}
/* the pads are paler while the run is shown and wake up for the child's turn */
#game-root[data-slug="echo-echo"] .pad { position: relative; transition: transform .1s, background .1s, filter .1s, opacity .25s; }
#game-root[data-slug="echo-echo"] .pads.locked .pad:not(.lit, .demo-lit) { opacity: .6; filter: saturate(.75); }
#game-root[data-slug="echo-echo"] .pads:not(.locked) .pad { opacity: 1; }
/* a pad the friend "plays" in the demonstration shines like a played one (its own class, so it never counts as the run) */
#game-root[data-slug="echo-echo"] .pad.demo-lit { background: var(--pad, var(--skill)); transform: scale(1.06); opacity: 1; filter: brightness(1.05); }
/* the finger that taps a pad in the demonstration (cqw counts from the pad, which is a container) */
#game-root[data-slug="echo-echo"] .pad .echo-finger { position: absolute; right: 8%; bottom: -6%; font-size: 34cqw; line-height: 1; pointer-events: none; animation: echo-tap .45s ease-out both; }
@keyframes echo-tap { from { transform: translateY(45%) scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
/* the run as pictures in the friend's bubble, above the words and as wide as the bubble; steps done are dimmed and ticked,
   the step at hand is ringed. The pictures shrink with the length of the run so that all of it fits the bubble's width
   (--room is what the bubble has inside, --need how many picture-widths the run takes). */
.friend-bubble:has(.echo-steps) { flex-wrap: wrap; row-gap: 4px; }
.friend-bubble .bubble-art:has(.echo-steps) { flex: 1 1 100%; max-width: none; }
.friend-bubble .bubble-art .echo-steps {
  --room: calc(22vw - 38px); --need: 3.4;
  display: inline-flex; align-items: center; justify-content: center; gap: .1em; line-height: 1; white-space: nowrap;
  font-size: clamp(16px, calc(var(--room) / var(--need)), 46px);
}
.friend-bubble .bubble-art .echo-steps[data-n="3"] { --need: 5.5; }
.friend-bubble .bubble-art .echo-steps[data-n="4"] { --need: 7.6; }
.friend-bubble .bubble-art .echo-steps[data-n="5"] { --need: 9.7; }
@media (max-aspect-ratio: 1 / 1), (max-width: 720px) { .friend-bubble .bubble-art .echo-steps { --room: calc(100vw - 215px); } }
@media (orientation: landscape) and (max-height: 520px) { .friend-bubble .bubble-art .echo-steps { --room: calc(20vw - 30px); } }
.friend-bubble .bubble-art .echo-step { position: relative; padding: .05em; border-radius: .28em; }
.friend-bubble .bubble-art .echo-step.done { opacity: .5; }
.friend-bubble .bubble-art .echo-step.done::after { content: "✓"; position: absolute; right: -.05em; bottom: -.15em; font-size: .5em; font-weight: 800; color: #1c8a4a; }
.friend-bubble .bubble-art .echo-step.now { background: #fff3c2; box-shadow: 0 0 0 .05em #f2b92f; }
.friend-bubble .bubble-art .echo-steps .arrow { font-size: .55em; font-weight: 700; color: var(--skill-2, #51409e); }