/* =====================================================
   word-trek.css — Trailhead Word Trek (Abby)

   Loaded after css/style.css and css/kid-games.css, which own the tokens, the
   paper card, .kg-choices, .kg-target and its correct / wrong / dim / hint
   states. Nothing here restyles any of those: every selector introduces a
   class prefixed kg-word-trek- so the per-game sheets on one page cannot
   reach each other. Colour comes from var(--accent) / var(--accent-2), never
   var(--abby) directly.

   prefers-reduced-motion is already handled globally at css/style.css:546, so
   there is deliberately no media query for it here. The one thing CSS cannot
   see is that a picked-up card should not LIFT and a chip should not pop;
   js/kidgames/games/word-trek.js puts .kg-word-trek-still on the root for
   that, from ctx.reducedMotion.

   THE TWO SIZE DECISIONS THIS SHEET IS BUILT AROUND, both at the biggest
   round — eight words over four packs, on a 360px phone:

   1. THE TRAY IS TWO COLUMNS AND NEVER THREE. .kg-choices already sets a 30px
      gutter floor (brief §4), so three columns of card on a 360px screen would
      leave about 82px of box for a word like "kindling" and force it to wrap.
      Two columns give ~139px, and the same card size in every round, so a word
      never changes shape between rounds. Eight cards then stand four rows
      tall and the packs sit below the fold — which is why picking a word
      scrolls the packs into view, and why the tray keeps its empty frames:
      the packs must not slide up the page while she is reaching for one.

   2. A CARD'S HEIGHT IS FIXED, A PACK'S IS NOT. Cards are all the same height
      whatever word is on them, so the grid never re-flows. Packs grow as words
      land in them — they are the last thing on the page above the toolbar, so
      the only thing their growth pushes is the 🔊 button.
   ===================================================== */

.kg-word-trek-still *,
.kg-word-trek-still *::before,
.kg-word-trek-still *::after { transition: none !important; animation: none !important; }

/* ---------------- The trail card ----------------
   What this round is, how far through it she is, and — on demand — what the
   word in her hand means. */
.kg-word-trek-head {
  width: 100%;
  max-width: 620px;
  padding: 14px 16px 12px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
  transition: box-shadow .25s var(--ease);
}

.kg-word-trek-task {
  margin: 0 0 4px;
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.kg-word-trek-progress {
  margin: 0;
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* The progression surface, countable with zero reading: one pip per word in
   the round, and it only ever fills up. The line above says the same thing in
   words, so this is decoration and carries no state of its own. */
.kg-word-trek-pips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 0;
}

.kg-word-trek-pip {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--kg-tint, #f4efff);
  box-shadow: inset 0 0 0 2px var(--accent-2);
  transition: background .25s var(--ease);
}

.kg-word-trek-pip-on { background: var(--accent); }

/* The clue panel is NEVER empty, and it is sized against the definitions it
   has to hold: 25 of the 32 run to three lines at 390px and 28 of 32 at 360px,
   so it reserves three from the moment the game opens. A panel sized for the
   idle line would grow the instant she asked what a word means, and the thing
   it would push down the page is the tray she is reaching for. A blank box
   would read as a bug, so it always says something. */
.kg-word-trek-clue {
  margin: 10px 0 0;
  min-height: 5.2em;
  display: grid;
  align-content: center;
  padding: 8px 12px;
  border-radius: 14px;
  background: var(--kg-tint, #f4efff);
  font-size: .98rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* Replay flashes this rather than saying nothing on a muted device. */
.kg-word-trek-pulse {
  box-shadow: 0 0 0 5px var(--accent-2), var(--shadow-lg);
}

/* ---------------- Section headings ----------------
   Two zones, two names, and the DOM order is the order of the action: the
   tray she takes a word FROM comes before the packs she puts it IN, so Tab
   walks the same path her finger does. Both are real headings, so the two
   groups below them are labelled for a screen reader as well as for an eye. */
.kg-word-trek-legend {
  width: 100%;
  max-width: 620px;
  margin: 4px 0 -4px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink-soft);
  text-align: left;
}

.kg-word-trek-legend-mark {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--kg-tint, #f4efff);
  color: var(--accent);
  font-size: .85rem;
  font-weight: 800;
}

/* ---------------- The tray ----------------
   .kg-choices supplies the >=30px gutter floor in both directions; this only
   says how many columns those gutters sit between. */
.kg-word-trek-tray {
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

/* The slot is the grid cell and the card is what sits in it. When a word is
   packed the card leaves and the slot stays behind as an empty frame: the
   tray keeps its shape, so the packs below it never jump up the page. */
.kg-word-trek-slot {
  display: grid;
  min-height: 88px;
  border-radius: var(--radius);
}

.kg-word-trek-slot.kg-word-trek-empty {
  border: 3px dashed var(--accent-2);
  opacity: .5;
}

.kg-word-trek-card {
  width: 100%;
  height: 100%;
  align-content: center;
  gap: 2px;
  line-height: 1.15;
}

.kg-word-trek-icon {
  font-size: 1.7rem;
  line-height: 1;
}

.kg-word-trek-word {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}

/* The picked-up state, said three ways: a ring, a badge and aria-pressed on
   the button itself. The lift is the only part that moves, and the root class
   takes it away for reduced motion. */
.kg-word-trek-hand {
  display: none;
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 1rem;
  line-height: 1;
}

.kg-word-trek-card.kg-word-trek-picked {
  border-color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-2), var(--shadow-lg);
  transform: translateY(-4px);
}

.kg-word-trek-still .kg-word-trek-card.kg-word-trek-picked { transform: none; }

.kg-word-trek-card.kg-word-trek-picked .kg-word-trek-hand { display: block; }

/* She tapped a pack with nothing in her hand. The tray answers, visibly. */
.kg-word-trek-callout {
  outline: 4px solid var(--accent-2);
  outline-offset: 8px;
  border-radius: var(--radius-lg);
}

/* ---------------- The packs ----------------
   Two columns on a phone. Three packs leave an odd one out, and a half-width
   box on its own row reads as something that failed to load, so the last of
   an odd row takes the whole width instead. */
.kg-word-trek-bins {
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.kg-word-trek-bins > .kg-word-trek-bin:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.kg-word-trek-bin {
  width: 100%;
  min-height: 112px;
  padding: 12px 10px;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 8px;
  border: 3px dashed var(--accent-2);
  background: var(--kg-tint, #f4efff);
}

.kg-word-trek-bin-head {
  display: grid;
  justify-items: center;
  gap: 2px;
}

.kg-word-trek-bin-icon {
  font-size: 1.6rem;
  line-height: 1;
}

.kg-word-trek-bin-name {
  font-size: .98rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

/* A word that has landed. Not a button: it is where it belongs now, and there
   is nothing left to decide about it. */
.kg-word-trek-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  align-content: start;
}

.kg-word-trek-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--teal);
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
}

.kg-word-trek-chip-icon { font-size: .95rem; line-height: 1; }

/* The only travel in the game, and it is 12px of scale rather than a card
   flying across the screen. .kg-word-trek-still never adds this class. */
.kg-word-trek-pop { animation: kg-word-trek-pop .3s var(--ease); }

@keyframes kg-word-trek-pop {
  from { transform: scale(.6); opacity: 0; }
}

/* Something is in her hand, so every pack is somewhere it could go. A solid
   border and a ring, not a colour change alone. The glowing pack at the third
   miss keeps its own treatment — .kg-hint is the ONE reserved highlight and
   nothing here is allowed to flatten it. */
.kg-word-trek-armed .kg-word-trek-bin:not(.kg-hint) {
  border-style: solid;
  box-shadow: 0 0 0 3px var(--accent-2), var(--shadow);
}

/* The wrong pack, for the 450ms settle. Louder than the shared border colour
   on its own, because a dashed box that has just gone solid is already busy. */
.kg-word-trek-bins .kg-word-trek-bin.kg-wrong {
  border-style: solid;
  box-shadow: 0 0 0 4px var(--amber), var(--shadow);
}

/* Every word packed. Colour and weight, no motion. */
.kg-word-trek-solved .kg-word-trek-bin {
  box-shadow: 0 0 0 3px var(--teal), var(--shadow);
}

.kg-word-trek-bar { justify-content: center; }

/* ---------------- Celebration ----------------
   Built only when ctx.reducedMotion is false; the win banner, the chime and
   the token are the host's and happen either way. */
.kg-word-trek-confetti {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.kg-word-trek-spark {
  position: absolute;
  top: -8%;
  font-size: 1.6rem;
  animation: kg-word-trek-fall 1.6s var(--ease) forwards;
}

@keyframes kg-word-trek-fall {
  to { transform: translateY(112vh) rotate(220deg); opacity: .12; }
}

/* ---------------- Breakpoints ----------------
   Only the widths css/style.css already uses. */
@media (max-width: 560px) {
  .kg-word-trek-legend { font-size: .95rem; }
}

@media (max-width: 360px) {
  /* The narrowest phone this site targets. Nothing shrinks below the 57px
     target floor or the 30px gutter floor — both are owned by kid-games.css
     and neither is touched here; only the type comes down a step so a long
     pack name like "What it's like" still fits on two lines. */
  .kg-word-trek-word { font-size: 1rem; }
  .kg-word-trek-bin-name { font-size: .92rem; }
  .kg-word-trek-clue { font-size: .94rem; }
}

@media (min-width: 700px) {
  /* Room for the whole tray and the whole row of packs on one line each,
     which is what a tray and a row are for. The game sets the two counts per
     round (js/kidgames/games/word-trek.js) because CSS cannot ask JavaScript
     how many words this round has. */
  .kg-word-trek-head,
  .kg-word-trek-legend,
  .kg-word-trek-tray,
  .kg-word-trek-bins { max-width: 760px; }
  .kg-word-trek-tray { grid-template-columns: repeat(var(--wt-cols-wide, 4), minmax(0, 1fr)); }
  .kg-word-trek-bins { grid-template-columns: repeat(var(--wt-bin-cols-wide, 4), minmax(0, 1fr)); }
  .kg-word-trek-bins > .kg-word-trek-bin:last-child:nth-child(odd) { grid-column: auto; }
  .kg-word-trek-bin { min-height: 132px; }
}

@media (hover: hover) {
  .kg-word-trek-card:hover .kg-word-trek-word { color: var(--accent); }
}