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

/* ---- Letter Hunt ---------------------------------------------------------------------------------- */

/* a letter sound's "something new" card: the big letter beside a picture that starts with that sound */
.letter-meet { display: flex; align-items: center; justify-content: center; gap: .14em; line-height: 1; }
.letter-meet .letter-meet-glyph { font-weight: 700; color: var(--skill-2); }
.letter-meet .letter-meet-picture { font-size: .66em; }

/* Big and little, the sort: the big letters are the homes (or the little ones are), so they are shown big, and
   the letters to carry are as bold as the letters on the cards of the other rounds */
#game-root[data-slug="letter-hunt"] .stage[data-alive] .bins .bin { min-height: clamp(128px, 30vmin, 210px); justify-content: center; gap: 2px; }
#game-root[data-slug="letter-hunt"] .stage[data-alive] .bins .bin-label span {
  font-size: clamp(3rem, 15vmin, 6rem); font-weight: 700; line-height: 1; color: var(--skill-2);
}
#game-root[data-slug="letter-hunt"] .stage[data-alive] .bins .bin .placed { width: auto; font-size: clamp(1.8rem, 6.4vmin, 3.2rem); font-weight: 700; color: var(--ink); }
#game-root[data-slug="letter-hunt"] .stage[data-alive] .sort-items .sort-item { font-weight: 700; color: var(--ink); }

/* ---- First Sounds and Rhyme Time: picture sorts and the "something new" card ----------------------------- */

/* the word that stands at home: its picture, large, with its name under it */
#game-root:is([data-slug="first-sounds"], [data-slug="rhyme-time"]) .stage[data-alive] .bins .bin {
  min-height: clamp(150px, 34vmin, 240px); justify-content: flex-start; gap: 4px;
}
#game-root:is([data-slug="first-sounds"], [data-slug="rhyme-time"]) .stage[data-alive] .bins .bin-label { flex-direction: column; gap: 0; }
#game-root:is([data-slug="first-sounds"], [data-slug="rhyme-time"]) .stage[data-alive] .bins .bin-label .emoji {
  width: auto; height: auto; font-size: clamp(3rem, 13vmin, 5.2rem); line-height: 1.05;
}
#game-root:is([data-slug="first-sounds"], [data-slug="rhyme-time"]) .stage[data-alive] .bins .bin-label span:not(.emoji) {
  font-size: clamp(1.05rem, 3.4vmin, 1.6rem); line-height: 1.1;
}
/* the pictures to carry keep their word under them, sized to the card */
#game-root:is([data-slug="first-sounds"], [data-slug="rhyme-time"]) .stage[data-alive] .sort-items .sort-item { width: clamp(84px, 24vmin, 150px); }
#game-root:is([data-slug="first-sounds"], [data-slug="rhyme-time"]) .stage[data-alive] .sort-item > .pic {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .04em; width: 100%; height: 100%; font-size: 40cqw; line-height: 1;
}
#game-root:is([data-slug="first-sounds"], [data-slug="rhyme-time"]) .stage[data-alive] .sort-item > .pic .caption {
  position: static; font-size: max(14px, .27em); font-weight: 600; line-height: 1.1; color: var(--ink-2); text-align: center;
}

/* a sound's "something new" card: the word's picture, large, and the word under it */
.fs-meet { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .04em; line-height: 1; }
.fs-meet .fs-meet-picture { font-size: 1em; }
.fs-meet .caption { position: static; font-size: .2em; font-weight: 600; color: var(--skill-2); }

/* "What is a rhyme": two pictures side by side, each with its word under it */
.rt-meet { display: flex; align-items: center; justify-content: center; gap: .3em; line-height: 1; }
.rt-meet .rt-meet-word { display: flex; flex-direction: column; align-items: center; gap: .05em; }
.rt-meet .rt-meet-picture { font-size: .8em; }
.rt-meet .caption { position: static; font-size: .2em; font-weight: 600; color: var(--skill-2); }

/* ---- Spell It: the board beside the friend ---------------------------------------------------------------------------- */

/* sizes follow the width of the play area (the friend's column is not part of it), so the board fits a tablet held
   sideways and a phone held upright with the same rules */
#game-root[data-slug="spell-it"] .stage[data-alive] > .stage-inner { container-type: inline-size; }
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-learning { gap: clamp(16px, 4.2vmin, 40px); padding: clamp(4px, 1.2vmin, 12px) 0; align-content: center; }
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-word { padding: clamp(8px, 2.2cqw, 20px) clamp(12px, 3cqw, 28px); gap: clamp(8px, 2.4cqw, 22px); border-width: 4px; }
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-picture { font-size: clamp(2.6rem, 12cqw, 5.6rem); }
/* the fewer the letters, the bigger the slots (a short word on a phone should not sit small in a big space) */
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-slots { --spell-size: clamp(48px, 16.5cqw, 88px); gap: clamp(5px, 1.4cqw, 12px); }
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-slots[data-n="4"] { --spell-size: clamp(46px, 14.2cqw, 88px); }
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-slots[data-n="5"] { --spell-size: clamp(42px, 12cqw, 78px); }
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-slots[data-n="6"] { --spell-size: clamp(40px, 10.4cqw, 78px); }
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-slots:is([data-n="7"], [data-n="8"]) { --spell-size: clamp(34px, 8.6cqw, 66px); }
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-tiles { max-width: 100%; gap: clamp(6px, 1.6cqw, 14px); }
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-tile { --spell-tile: clamp(48px, 14.6cqw, 100px); border-radius: 20px; }

/* the place a letter is carried to: the word lights up while a tile is over it, and the slot that is next is marked */
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-word.drop-ready { border-color: #f2b92f; background: #fff8e0; box-shadow: 0 0 0 6px #ffe28a99, var(--shadow-sm); }
#game-root[data-slug="spell-it"] .stage[data-alive]:has(.spell-tile.is-carried) .spell-slot.next:not(.filled) { border-color: #f2b92f; background: #fff3c2; }
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-slot.next:not(.filled) {
  border-color: color-mix(in srgb, var(--skill) 65%, white); background: #fffbea; animation: spell-next 1.6s ease-in-out infinite;
}
@keyframes spell-next { 0%, 100% { box-shadow: 0 0 0 0 #ffe28a00; } 50% { box-shadow: 0 0 0 6px #ffe28a99; } }

/* the letters are things to pick up: the same lift and carry as a card, and a tile that has gone into its slot is gone from the row.
   (The tiles drop in once, with the `drop-in` class from alive.css.) */
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-tile {
  cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-tile.is-pressed { transform: translateY(-6px) scale(1.06); border-color: var(--skill); transition: transform .09s; }
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-tile.is-carried {
  z-index: 40; cursor: grabbing; transition: none; border-color: var(--skill);
  box-shadow: 0 22px 34px #1f3b5a3d, 0 0 0 6px color-mix(in srgb, var(--skill) 30%, white);
}
#game-root[data-slug="spell-it"] .stage[data-alive] .spell-tile.carried-away { visibility: hidden; pointer-events: none; }
#game-root[data-slug="spell-it"] .spell-learning.is-demo { pointer-events: none; }

/* the hand that shows the way carries a copy of the tile: inside its card the copy is only the letter */
#game-root[data-slug="spell-it"] .hand-hint .hand-card .spell-tile {
  width: auto; height: auto; padding: 0; border: 0; background: transparent; box-shadow: none; animation: none; font-size: 1em;
  color: var(--skill-2); transform: none; opacity: 1;
}

/* "Two letters, one sound": the letters side by side, and the word they are in */
.spell-meet { display: flex; align-items: center; justify-content: center; gap: .16em; line-height: 1; }
.spell-meet .spell-meet-letters { font-weight: 700; color: var(--skill-2); letter-spacing: -.02em; }
.spell-meet .spell-meet-picture { font-size: .62em; }

/* quiet play and reduced motion: the marker stays, the pulse does not */
#game-root[data-slug="spell-it"][data-quiet="true"] .stage[data-alive] .spell-slot.next { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #game-root[data-slug="spell-it"] .stage[data-alive] .spell-slot.next { animation: none; }
}