/* =====================================================
   story-order.css — Story Order (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-story-order- so the per-game sheets on one page cannot
   reach each other.

   Colour comes from var(--accent) / var(--accent-2), never var(--abby)
   directly — plus the four --so-* custom properties the game sets from the
   story's own art.palette. Those four are DECORATION ONLY and every one of
   them has a fallback here, because a story whose palette is missing or
   malformed must still get a board that looks deliberate.

   prefers-reduced-motion is already handled globally at css/style.css, 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; js/kidgames/games/
   story-order.js puts .kg-story-order-still on the root for that, from
   ctx.reducedMotion.

   THE SIZE DECISION THIS SHEET IS BUILT AROUND. The cards carry painterly
   1000x625 illustrations, and the whole game is looking at them and working
   out what happened first. Two columns on a 390px phone gives each picture
   about 164x102 CSS px, which is an app icon — enough to tell a beach from a
   forest and not enough to reason about. So the tray is ONE COLUMN below
   700px: ~283x177 of actual painting on a 390px phone, at the cost of
   scrolling. The box strip above stays small thumbnails, because that is a
   place to put things and not a place to read.
   ===================================================== */

.kg-story-order-still * { transition: none !important; }

/* ---------------- The line she is being talked to on ----------------
   .game-msg is shared and already reserves one line. This one reserves three,
   because the line under this board is not the same length twice: "One of your
   own stories, mixed up..." is three lines on a phone and "Nailed it. Box 1:
   ..." is two, so every pick and every placement changed the height of a
   paragraph sitting ABOVE the boxes and the tray and pushed both of them 25px
   down the page — after her tap and before her next one. Reserving the tallest
   state costs nothing where it matters (the board is at its tallest when this
   line is at its longest, at the top of a round) and the strip below it stops
   moving. Wide screens get the shared single line back: there the sentence
   fits on one or two lines and the board is not tall enough to care. */
.kg-story-order-msg {
  min-height: 4.1em;   /* three lines, for a browser with no lh unit */
  min-height: 3lh;
}

/* ---------------- The story card ----------------
   Title, the story's own four colours as a ribbon, and the round counter.
   The ribbon is the only place a palette colour is used at full strength, and
   nothing is ever printed on top of it: the packaged palettes run from four
   near-whites to four near-blacks, so neither ink nor paper is safe on all of
   them (see themeFrom() in the rules file). */
.kg-story-order-head {
  width: 100%;
  max-width: 620px;
  padding: 0 0 10px;
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: center;
  transition: box-shadow .25s var(--ease);
}

.kg-story-order-ribbon {
  display: block;
  height: 10px;
  background: linear-gradient(90deg, var(--so-ribbon, var(--accent), var(--accent-2)));
}

.kg-story-order-title {
  margin: 8px 16px 4px;
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
}

.kg-story-order-progress {
  margin: 0 16px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink-soft);
}

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

/* ---------------- Section headings ----------------
   Two zones, two names. "The story, in order" is where things go; "Pictures to
   place" is where they come from. Both are real headings so the two groups
   below them are labelled for a screen reader as well as for an eye.

   The negative margins pull each heading down onto the group it names and out
   of the 16px .game-area gap above it: the words belong to the boxes under
   them, and on a board this tall a gap that says nothing is a gap that pushes
   a picture off the screen. */
.kg-story-order-legend {
  width: 100%;
  max-width: 620px;
  margin: -6px 0 -8px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink-soft);
  text-align: left;
}

.kg-story-order-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;
  letter-spacing: .02em;
}

/* ---------------- The box strip ----------------
   .kg-choices supplies the >=30px gutter floor; this only says how the boxes
   are laid out inside it.

   AND IT STAYS ON SCREEN. Six pictures at the size this game needs them to be
   is a board about three phone screens tall, and that is not a bug to fix: it
   is 6 x 177px of painting plus the 30px gutters between them, and shrinking
   the painting is the one thing that would make the game unplayable. What was
   a bug is what the game used to do about it — scroll the page up to the boxes
   the instant she picked a picture up, which moved the tray out from under the
   finger that had just tapped it (see pickUp() in the game file).

   So the boxes stop being somewhere she has to go. The strip sticks under the
   page's own sticky header (css/style.css:131 — a 48px row inside 10px of
   padding, plus the notch inset; the few pixels of overlap here are the
   strip's own padding tucking behind the blur rather than a gap for the tray
   to show through). Wherever she is in the tray, the box the picture goes in
   is already on screen, and nothing had to move to put it there.

   It carries its own paper because the tray now scrolls UNDER it, and the
   30px gutters between the boxes would otherwise be six slots of moving
   picture. Its span is the .kg-choices span, which is also the tray's, so a
   card passes behind the strip and not beside it. */
.kg-story-order-slots {
  max-width: 720px;
  position: sticky;
  top: calc(60px + var(--safe-top));
  z-index: 3;
  padding: 10px 0;
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 8px 14px -10px rgba(53, 49, 94, .5);
  /* A named column count, not flex-wrap. Four boxes left to wrap land 3 + 1,
     which reads as something gone wrong; the game sets --so-cols per round
     (js/kidgames/games/story-order.js) so four land 2 + 2 and six land 3 + 3. */
  display: grid;
  grid-template-columns: repeat(var(--so-cols, 3), minmax(0, 1fr));
  justify-items: stretch;
}

/* One row of thumbnail, not a row of number above a row of thumbnail: the
   number moved onto the corner of the frame (below), which took 34px off
   every row of the strip — 68px off a six-box round, and 68px that a sticky
   strip charges the tray for on every single screen. 72px is still a target
   and a half: Brief §4 is 57 for Abby. */
.kg-story-order-slot {
  width: 100%;
  min-height: 72px;
  padding: 8px;
  grid-template-rows: auto;
  align-content: center;
  justify-items: center;
  gap: 0;
  border: 3px dashed var(--so-edge-soft, var(--accent-2));
  background: var(--so-wash, var(--kg-tint, #f4efff));
}

/* The number is the box's identity, so it sits ON the box's picture the way
   the page icon sits on the card's — never underneath it, where it would be
   paying for a whole row of strip. Theme tokens, not palette: this one carries
   meaning, and a pastel palette would leave it unreadable. The white ring is
   what keeps it readable once the box has a painting in it. */
.kg-story-order-num {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px #fff;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
}

/* The frame is ALWAYS there, empty or full. Two reasons, and the second is the
   one that matters: an empty picture-shaped hole says "a picture goes here"
   far better than the word "empty" did, and a box that is the same height
   before and after it is filled cannot shift the tray down the page under a
   child mid-round. */
.kg-story-order-thumb {
  display: block;
  width: 100%;
  max-width: 96px;
  aspect-ratio: 1.6;
  border-radius: 8px;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 2px var(--so-edge-soft, var(--accent-2));
}

/* Something is in her hand, so every empty box is somewhere it could go. A
   solid border change, not only a glow — css/style.css flattens animation for
   reduced motion and this still has to read. */
.kg-story-order-armed .kg-story-order-slot:not(.kg-story-order-filled) {
  border-style: solid;
  border-color: var(--accent-2);
  background: #fff;
}

.kg-story-order-slot.kg-story-order-filled {
  border-style: solid;
  padding: 10px 8px;
  cursor: default;
}

.kg-story-order-slot.kg-story-order-filled .kg-story-order-thumb {
  background-color: var(--paper);
  box-shadow: 0 2px 8px rgba(53, 49, 94, .22);
}

.kg-story-order-slot.kg-story-order-filled .kg-story-order-num {
  background: var(--teal);
}

/* The whole strip, once the last picture lands. Colour and weight, no motion. */
.kg-story-order-solved .kg-story-order-slot {
  box-shadow: 0 0 0 3px var(--teal), var(--shadow);
}

/* ---------------- The tray ----------------
   One column below 700px. See the note at the top of this file: this is the
   difference between a picture she can reason about and a thumbnail she
   cannot. */
.kg-story-order-tray {
  max-width: 720px;
  align-items: stretch;
}

/* A card the KEYBOARD moves to is scrolled into view by the browser, and the
   sticky strip above would be what it scrolled under. This keeps the browser's
   own scroll clear of it: the strip plus the header it hangs from, and a
   little air. Nothing in the game scrolls the page — this is only ever the
   browser answering a Tab. */
.kg-story-order-card {
  scroll-margin-top: 280px;
  flex: 1 1 100%;
  max-width: 380px;
  justify-items: stretch;
  align-content: start;
  gap: 8px;
  text-align: left;
}

.kg-story-order-art {
  width: 100%;
  border-radius: 14px;
  background-repeat: no-repeat;
  background-color: var(--paper);
  box-shadow: 0 3px 12px rgba(53, 49, 94, .2);
}

/* The page's own icon, on the corner of the painting. See the note where the
   game builds it: inside one story two pages can share a street and a pose, and
   this is the cheapest discriminator the library already owns. */
.kg-story-order-icon {
  position: absolute;
  top: 26px;
  left: 26px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(53, 49, 94, .3);
  font-size: 1.15rem;
  line-height: 1;
  pointer-events: none;
}

.kg-story-order-caption {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  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.

   THE BADGE IS ON THE PICTURE, NOT UNDER IT. In the flow of the card it was a
   grid row that only existed once she had picked the card up, so the card grew
   38px the instant she tapped it and shoved every card below it 38px down the
   page — the same "it moved while I was reaching" bug as the scroll jump this
   game just lost, in miniature and on every single pick. Absolute, so picking
   a picture up changes nothing's size and nothing's place. Top-right, mirroring
   the page icon at top-left, both clear of the caption. */
.kg-story-order-badge {
  display: none;
  position: absolute;
  top: 26px;
  right: 26px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
}

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

.kg-story-order-still .kg-story-order-card.kg-story-order-picked { transform: none; }

.kg-story-order-card.kg-story-order-picked .kg-story-order-badge { display: inline-block; }

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

.kg-story-order-bar { justify-content: center; }

/* ---------------- Breakpoints (only the ones style.css already uses) ------- */
@media (max-width: 560px) {
  .kg-story-order-legend { font-size: .95rem; }
  .kg-story-order-thumb { max-width: 88px; }
}

@media (max-width: 360px) {
  .kg-story-order-num { width: 26px; height: 26px; font-size: .85rem; }
  .kg-story-order-caption { font-size: .95rem; }
}

@media (min-width: 700px) {
  /* Two columns of picture once there is room for both to stay large, and the
     whole box strip on one line, which is what a strip is for. */
  .kg-story-order-msg { min-height: 1.5em; }
  .kg-story-order-card { flex: 0 1 320px; max-width: 340px; }
  .kg-story-order-slots { grid-template-columns: repeat(var(--so-cols-wide, 4), minmax(0, 1fr)); }
  .kg-story-order-slot { min-height: 92px; }
  .kg-story-order-thumb { max-width: 110px; }
}

/* A landscape phone has no height to lend. The strip is two rows and the
   header is another 60px, which on a 500px-tall viewport would leave less than
   one picture of tray: below that the strip goes back in the flow and the
   board is one deliberate scroll, which is the trade this game can afford and
   the moving tray was never worth. */
@media (max-height: 620px) {
  .kg-story-order-slots { position: static; box-shadow: none; }
  .kg-story-order-card { scroll-margin-top: 0; }
}

@media (hover: hover) {
  .kg-story-order-card:hover .kg-story-order-art { box-shadow: 0 6px 18px rgba(53, 49, 94, .28); }
}