/* Alive play — the numbers 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 a numbers game uses (nq-* : the shared pictures of js/games/number-art.js). */

/* ---- shared pictures: frames of counters, a counted group, a teen number, a pair ------------------------------
   They size themselves with vmin so the same picture reads in the friend's bubble (small) and on a meet card (large). */
.nq-quantity { display: inline-flex; flex-direction: column; align-items: center; gap: clamp(3px, .8vmin, 8px); vertical-align: middle; }
.nq-frame {
  --cell: clamp(10px, 3vmin, 17px);
  display: inline-grid; grid-template-columns: repeat(5, var(--cell)); gap: calc(var(--cell) * .16);
  padding: calc(var(--cell) * .18); border: max(2px, calc(var(--cell) * .1)) solid #bcd3e6; border-radius: calc(var(--cell) * .42); background: #fff;
}
.nq-cell { display: block; width: var(--cell); height: var(--cell); border-radius: 50%; background: #e6eff7; }
.nq-cell.on { background: #eb9676; box-shadow: inset calc(var(--cell) * .12) calc(var(--cell) * .16) 0 #ffffff55, 0 calc(var(--cell) * .08) 0 #c77566; }

.nq-counted { --dot: clamp(14px, 2.6vmin, 20px); display: inline-grid; grid-template-columns: repeat(var(--cols, 5), var(--dot)); gap: calc(var(--dot) * .2); vertical-align: middle; }
.nq-counted-dot {
  display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%; background: #eb9676;
  box-shadow: inset calc(var(--dot) * .1) calc(var(--dot) * .14) 0 #ffffff50, 0 calc(var(--dot) * .08) 0 #c77566;
  color: #fff; font-size: calc(var(--dot) * .64); font-weight: 800; line-height: 1;
}
.nq-counted-dot b { font: inherit; }

.nq-dice { --pip: clamp(18px, 4.4vmin, 34px); display: inline-grid; grid-template-columns: repeat(3, var(--pip)); gap: calc(var(--pip) * .32); padding: calc(var(--pip) * .5); vertical-align: middle;
  background: #fff; border: max(3px, calc(var(--pip) * .14)) solid var(--skill-soft, #bcd3e6); border-radius: calc(var(--pip) * .7); }
.nq-pip { display: block; width: var(--pip); height: var(--pip); border-radius: 50%; }
.nq-pip.on { background: var(--ink, #183d55); box-shadow: inset calc(var(--pip) * .1) calc(var(--pip) * .14) 0 #ffffff33; }
.meet-card .nq-dice { --pip: clamp(26px, 8vmin, 60px); }
.friend-bubble .nq-dice { --pip: clamp(14px, 3.4vmin, 22px); }

.nq-teen { display: inline-flex; align-items: center; gap: clamp(8px, 2.4vmin, 22px); }
.nq-teen-numeral { font-size: clamp(3.2rem, 15vmin, 6.5rem); font-weight: 800; line-height: 1; color: var(--skill-2); }

.nq-pair { display: inline-flex; align-items: baseline; justify-content: center; gap: .16em; }
.nq-pair b { font: inherit; }
.nq-pair i { font-size: .34em; font-style: normal; font-weight: 700; color: #5f7688; }

/* two rows lined up: the shorter row above, the longer below, and what the longer one has left over is ringed in gold.
   Both rows share the same columns, so a dot sits exactly under the one it is matched with. */
.nq-match { --dot: clamp(12px, 2.6vmin, 20px); display: inline-flex; flex-direction: column; gap: calc(var(--dot) * .34); vertical-align: middle; }
.nq-match-row { display: grid; grid-template-columns: repeat(var(--cols, 5), var(--dot)); gap: calc(var(--dot) * .2); padding: calc(var(--dot) * .12); border-radius: calc(var(--dot) * .5); }
.nq-match-dot {
  display: block; width: var(--dot); height: var(--dot); border-radius: 50%; background: #eb9676;
  box-shadow: inset calc(var(--dot) * .1) calc(var(--dot) * .14) 0 #ffffff50, 0 calc(var(--dot) * .08) 0 #c77566;
}
.nq-match-dot.extra { background: #f6c443; box-shadow: inset calc(var(--dot) * .1) calc(var(--dot) * .14) 0 #ffffff66, 0 0 0 max(2px, calc(var(--dot) * .14)) #e8a317; }
.nq-match[data-focus="fewer"] .nq-match-row.short { background: #dff3e5; }
.nq-versus { display: inline-flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2.6vmin, 26px); }
.nq-side { display: inline-flex; flex-direction: column; align-items: center; gap: clamp(3px, .8vmin, 8px); }
.nq-side b { font: inherit; font-size: .5em; font-weight: 800; line-height: 1; color: var(--skill-2, #2a6f97); }
.meet-card .nq-frame { --cell: clamp(15px, 4.2vmin, 34px); }
.meet-card .nq-match { --dot: clamp(22px, 6vmin, 46px); }
.friend-bubble .nq-match { --dot: min(12px, calc(108px / (var(--cols, 5) * 1.3))); gap: 3px; }
.friend-bubble .nq-versus { gap: 8px; }
.friend-bubble .nq-versus .nq-frame { --cell: 7px; }

/* on a meet card the same pictures are large. A counted group numbers itself one dot after another, quickly: a meet
   moves on when its words end (about two seconds when the sound is off), so the numbers never wait for the voice.
   The last number gets a ring: it is the one that says how many. */
.meet-card .nq-counted { --dot: clamp(34px, 9vmin, 76px); }
.meet-card .nq-counted-dot b { animation: nq-count-in .3s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.2s + var(--i, 0) * .18s); }
.meet-card .nq-counted > .nq-counted-dot:last-child { box-shadow: inset calc(var(--dot) * .1) calc(var(--dot) * .14) 0 #ffffff50, 0 calc(var(--dot) * .08) 0 #c77566, 0 0 0 max(3px, calc(var(--dot) * .08)) #f2b735; }
@keyframes nq-count-in { from { transform: scale(0); opacity: 0; } to { transform: none; opacity: 1; } }
/* a bubble holds art up to about 120px wide: keep the frames inside it */
.friend-bubble .nq-frame { --cell: clamp(10px, 2.8vmin, 16px); }
.friend-bubble .nq-quantity { gap: 3px; }

@media (prefers-reduced-motion: reduce) { .meet-card .nq-counted-dot b { animation: none; } }
.game-room[data-quiet="true"] .meet-card .nq-counted-dot b { animation: none; }

/* ---- shared: a glyph answer card, and anything carried to the friend (or to a place on a board) -------------------------
   alive.css styles only quiz cards (.choice) and sort pictures; the number games draw their own boards, so their
   answers say the same things with these classes: nq-card (how it looks) and nq-carry (how it is picked up). */
.nq-card {
  position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 0;
  border: 5px solid var(--skill-soft); border-radius: 28px; background: #fff; color: var(--ink, #183d55);
  box-shadow: 0 6px 0 color-mix(in srgb, var(--skill) 35%, white);
  font-family: inherit; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;
}
.nq-card.correct { border-color: var(--ok, #45b56b); background: #f1fff5; }
.nq-card.wrong { animation: shake .45s ease; opacity: .45; pointer-events: none; }
.nq-card.locked { pointer-events: none; }
.nq-card.modelled, .nq-card.hint { border-color: #f2b92f; box-shadow: 0 0 0 6px #ffe28a99, 0 6px 0 #e7cd7a; }
.nq-card:disabled { opacity: 1; }
.nq-card.wrong:disabled { opacity: .45; }
.nq-carry { cursor: grab; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; transition: transform .1s, border-color .15s, opacity .2s; }
.nq-carry.is-pressed { transform: translateY(-6px) scale(1.05); border-color: var(--skill); transition: transform .09s; }
.nq-carry.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); }
.carried-away { visibility: hidden; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .nq-carry:not(.wrong):not(.locked):not(.is-carried):not(:disabled):hover { transform: translateY(-4px); } }
/* the friend's dashed home shows while something is carried, exactly as it does for a quiz card */
#game-root .stage:has(.nq-carry.is-carried) > .friend-zone::before { opacity: 1; transform: scale(1); }

/* ---- Count It: the board shares the stage with the friend --------------------------------------------------------------- */
#game-root[data-slug="count-it"] .stage[data-alive] > .stage-inner { container-type: inline-size; }
#game-root[data-slug="count-it"] .count-learning { gap: clamp(8px, 1.8vmin, 16px); padding: clamp(6px, 1.4vmin, 14px) 4px 4px; }
/* a picture is as big as the width allows, but a tall board (four or five rows) also has to leave room for the numbers beneath
   it: without that cap the answers sit below the fold of a tablet held sideways */
#game-root[data-slug="count-it"] .count-learning .count-board {
  --count-cell: clamp(44px, min(calc((100cqw - 44px) / var(--count-cols, 5) - 6px), 12vmin, calc((100dvh - 500px) / var(--count-rows, 3))), 92px);
  background: #ffffffd9;
}
#game-root[data-slug="count-it"] .count-learning[data-form="give"] .count-board { background: linear-gradient(#fbf3e2, #f4e7cd); box-shadow: 0 3px 0 #dcc79b; }
#game-root[data-slug="count-it"] .count-learning .count-answers { width: min(100%, 520px); gap: clamp(8px, 2vmin, 16px); }
#game-root[data-slug="count-it"] .count-learning .count-answer {
  min-height: clamp(72px, 13vmin, 108px); padding: 0; font-size: clamp(2.6rem, 9vmin, 4.6rem); border-radius: 28px;
}
#game-root[data-slug="count-it"] .count-learning .count-answer:active { transform: none; box-shadow: 0 6px 0 color-mix(in srgb, var(--skill) 35%, white); }
#game-root[data-slug="count-it"] .count-learning .count-object.wrong { opacity: .5; }
#game-root[data-slug="count-it"] .count-learning .count-object.nq-carry.is-carried { background: #fff8e0; border-color: var(--skill); border-radius: 18px; }
/* the older "Count with me" button asks for a system font; every other button in the room speaks in the game's */
#game-root[data-slug="count-it"] .count-learning .count-aid { font-family: inherit; }
/* the friend's bubble says what the count is: the little line under the board is only for a screen reader here */
#game-root[data-slug="count-it"] .stage[data-alive] .count-status { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#game-root[data-slug="count-it"] .stage[data-alive] .count-support:has(.count-status:only-child) { display: none; }

/* ---- How Many?: the group and the numbers share the stage with the friend ------------------------------------------------- */
#game-root[data-slug="how-many"] .stage[data-alive] .count-status { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#game-root[data-slug="how-many"] .count-panel { gap: clamp(8px, 2vmin, 18px); }
/* the numbers are things to carry: bigger than the old strip, and the ones already tried step aside */
#game-root[data-slug="how-many"] .number-strip { width: min(100%, 700px); gap: clamp(5px, 1.2vmin, 10px); padding-bottom: 6px; }
#game-root[data-slug="how-many"] .strip-number {
  height: clamp(52px, 11vmin, 78px); border-radius: 16px; font-size: clamp(1.5rem, 5.6vmin, 2.4rem); line-height: 1;
  box-shadow: 0 5px 0 color-mix(in srgb, var(--skill) 35%, white); background: #fff;
}
#game-root[data-slug="how-many"] .strip-number:active { transform: none; }
#game-root[data-slug="how-many"] .strip-number.wrong { opacity: .45; pointer-events: none; }
#game-root[data-slug="how-many"] .strip-number.modelled, #game-root[data-slug="how-many"] .strip-number.hint { border-color: #f2b92f; box-shadow: 0 0 0 6px #ffe28a99, 0 5px 0 #e7cd7a; animation: none; }
#game-root[data-slug="how-many"] .strip-number.correct { animation: none; background: #f1fff5; border-color: var(--ok, #45b56b); }
#game-root[data-slug="how-many"] .strip-numeral { pointer-events: none; }
/* a fresh count: the next picture glows, and each one hops as it is counted */
#game-root[data-slug="how-many"] .count-panel :is(.obj, .ten-item, .pip).count-next { background: #fff0a8; border-color: #bc8617; box-shadow: 0 0 0 4px #ffde74; border-radius: 16px; }
#game-root[data-slug="how-many"] .count-panel .pip.count-next { border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px #ffde74, 0 0 14px 6px #ffde74aa; }
#game-root[data-slug="how-many"] .count-panel.count-complete :is(.field, .ten-frame, .dot-card) { box-shadow: 0 0 0 4px #b9e4c6, var(--shadow-sm); }
/* "put them in the frame": an empty frame, and a tray of things to carry into it */
#game-root[data-slug="how-many"] .make-board { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.4vmin, 22px); width: 100%; }
#game-root[data-slug="how-many"] .make-frame { width: min(100%, 420px); transition: box-shadow .15s, background .15s; }
#game-root[data-slug="how-many"] .make-frame.drop-ready { background: #fffbe8; box-shadow: 0 0 0 5px #ffe28a, var(--shadow-sm); }
#game-root[data-slug="how-many"] .make-frame .ten-cell { position: relative; }
#game-root[data-slug="how-many"] .ten-frame.big .placed { display: block; font-size: clamp(1.6rem, 7vmin, 3rem); line-height: 1; animation: popin .3s cubic-bezier(.34, 1.56, .64, 1) both; }
#game-root[data-slug="how-many"] .make-pile {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1.6vmin, 14px); width: min(100%, 560px); box-sizing: border-box; padding: clamp(8px, 1.8vmin, 14px);
  border-radius: 22px; background: linear-gradient(#fbf3e2, #f4e7cd); box-shadow: 0 3px 0 #dcc79b;
}
#game-root[data-slug="how-many"] .pile-item {
  display: grid; place-items: center; box-sizing: border-box; width: clamp(56px, 10.5vmin, 74px); aspect-ratio: 1; padding: 0; font-size: clamp(2rem, 6.6vmin, 3rem); line-height: 1;
  background: #fffdf4; border: 3px solid #efdcae; border-radius: 20px; box-shadow: 0 4px 0 #dcc79b; font-family: inherit;
}
#game-root[data-slug="how-many"] .pile-item:disabled { opacity: 1; }
#game-root[data-slug="how-many"] .pile-item.wrong { opacity: .5; }
#game-root[data-slug="how-many"] .pile-item.hint { border-color: #f2b92f; box-shadow: 0 0 0 6px #ffe28a99, 0 4px 0 #e7cd7a; }
#game-root[data-slug="how-many"] .pile-item .emoji { pointer-events: none; }
/* what is carried goes to the frame, not the friend: the friend's dashed home stays away */
#game-root[data-slug="how-many"] .stage:has(.make-pile .nq-carry.is-carried) > .friend-zone::before { opacity: 0; transform: none; }

/* ---- teach-first cards: "give me some" and "put them together" ---------------------------------------------------------------- */
.nq-give { display: inline-flex; align-items: flex-end; gap: clamp(8px, 2vmin, 18px); }
.nq-give-item { position: relative; width: clamp(56px, 13vmin, 112px); }
.nq-give-art, .nq-give-art svg { display: block; width: 100%; }
.nq-give-item b {
  position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; min-width: clamp(24px, 4.6vmin, 38px); height: clamp(24px, 4.6vmin, 38px);
  border-radius: 999px; background: #296c4a; border: 3px solid #fff; color: #fff; font-size: clamp(14px, 2.8vmin, 22px); font-weight: 700; line-height: 1;
  animation: nq-count-in .3s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.2s + var(--i, 0) * .18s);
}
.nq-add { --dot: clamp(30px, 7.5vmin, 58px); display: inline-flex; align-items: center; gap: clamp(8px, 2vmin, 18px); }
.nq-add-group { display: inline-grid; grid-template-columns: repeat(var(--n, 3), var(--dot)); gap: calc(var(--dot) * .2); }
.nq-add-sign { font-size: clamp(1.6rem, 6vmin, 3rem); font-style: normal; font-weight: 700; color: #5f7688; }
.nq-add-total { font-size: clamp(3rem, 12vmin, 5.5rem); font-weight: 800; line-height: 1; color: var(--skill-2); }
.meet-card .nq-add .nq-counted-dot b { animation: nq-count-in .3s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(.2s + var(--i, 0) * .18s); }
@media (prefers-reduced-motion: reduce) { .nq-give-item b, .meet-card .nq-add .nq-counted-dot b, #game-root[data-slug="how-many"] .ten-frame.big .placed { animation: none; } }
.game-room[data-quiet="true"] :is(.nq-give-item b, .meet-card .nq-add .nq-counted-dot b, #game-root[data-slug="how-many"] .ten-frame.big .placed) { animation: none; }

/* ---- More or Less: the two sides share the stage with the friend ------------------------------------------------------------ */
/* the friend's bubble says what the count is: the line beside the button is only for a screen reader here (it also holds
   when the dock moves the support row into the action bar, so this is not tied to the stage) */
.compare-status.is-quiet { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* "This side" is carried to the friend (or tapped, which carries it): it keeps its own green, and a side already tried steps aside */
.compare-game .compare-answer.nq-carry.is-pressed, .compare-game .compare-answer.nq-carry.is-carried { border-color: #346e62; }
.compare-game .compare-answer.nq-carry.is-carried { box-shadow: 0 22px 34px #1f3b5a3d, 0 0 0 6px #b9dccb; background: #2f7a6a; }
.compare-game .compare-answer.wrong, .compare-game .compare-answer.wrong:disabled { opacity: .4; animation: shake .45s ease; box-shadow: none; }
.compare-game .compare-answer.wrong .compare-choice-arrow { visibility: hidden; }

/* Short screens. The friend and its bubble share the height with two sets of up to ten pictures, and a picture is never smaller than
   44px to touch, so on a short screen it is the friend's row that gets smaller, and the board's headings and gaps. */
@media ((max-aspect-ratio: 1 / 1) or (max-width: 720px)) and (max-height: 680px) {
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .friend-zone { --friend-size: 46px; gap: 8px; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .friend-bubble { padding: 4px 9px; border-radius: 16px; font-size: 12.5px; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .friend-bubble .bubble-art { min-width: 28px; font-size: 1.5rem; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .compare-game { gap: 4px; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .compare-group { padding: 6px 5px; gap: 4px; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .compare-total { min-width: 30px; height: 28px; font-size: 19px; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .compare-set { gap: 3px 2px; }
}
/* A phone on its side: the friend keeps a narrow column and its bubble keeps its picture (the words are in the voice, and a line that has no
   picture to go with keeps them), and each set's heading shares a row with its answer. */
@media (orientation: landscape) and (max-height: 520px) {
  #game-root[data-slug="more-or-less"] .stage[data-alive]:has(.compare-game) { grid-template-columns: minmax(84px, 15%) minmax(0, 1fr); gap: 6px; padding: 4px; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .friend-zone { --friend-size: 58px; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .friend-bubble:has(.bubble-art:not([hidden])) .bubble-line { display: none; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .compare-game { gap: 4px; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .compare-group {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "pictures pictures" "heading answer";
    align-items: center; gap: 4px 8px; padding: 4px 6px;
  }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .compare-heading { grid-area: heading; width: auto; gap: 6px; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .compare-pictures { grid-area: pictures; align-self: stretch; }
  #game-root[data-slug="more-or-less"] .stage:has(.compare-game) .compare-answer { grid-area: answer; max-width: none; }
}

/* ---- Fix the Number Train: the train and the numbers share the stage with the friend ------------------------------------------- */
/* a little train of numbered carriages, drawn small: the friend's bubble and the meet card hold it (js/games/number-art.js trainArt) */
.nq-train { --car: clamp(30px, 7vmin, 52px); position: relative; display: inline-flex; align-items: flex-end; gap: calc(var(--car) * .24); padding-bottom: calc(var(--car) * .16); vertical-align: middle; }
.nq-train::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: calc(var(--car) * .3); height: max(2px, calc(var(--car) * .07)); background: #426b63; }
.nq-car {
  position: relative; z-index: 1; display: grid; place-items: center; width: var(--car); height: calc(var(--car) * .8); box-sizing: border-box;
  border: max(2px, calc(var(--car) * .05)) solid #426b63; border-radius: calc(var(--car) * .2) calc(var(--car) * .2) calc(var(--car) * .1) calc(var(--car) * .1);
  background: #f5c66e; box-shadow: inset 0 calc(var(--car) * -.12) #d9a953; color: #234b49;
}
.nq-car b { font: inherit; font-size: calc(var(--car) * .5); font-weight: 800; line-height: 1; }
.nq-car::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: calc(var(--car) * -.13); height: calc(var(--car) * .2);
  background:
    radial-gradient(circle calc(var(--car) * .1) at 24% 50%, #fff2cf 0 40%, #2e5553 44% 86%, transparent 90%),
    radial-gradient(circle calc(var(--car) * .1) at 76% 50%, #fff2cf 0 40%, #2e5553 44% 86%, transparent 90%);
}
.nq-car.mark { background: #ffe08a; border-color: #b9821b; box-shadow: inset 0 calc(var(--car) * -.12) #e8b64c, 0 0 0 max(2px, calc(var(--car) * .07)) #f6c443; transform: translateY(-4%) scale(1.08); }
.nq-car.blank { background: #fff9e9; border-style: dashed; border-color: #7b967f; box-shadow: none; color: #7b967f; }
.friend-bubble .nq-train { --car: clamp(22px, 7.4vw, 30px); }
.meet-card .nq-train { --car: clamp(46px, 11vmin, 92px); }
/* on a meet card the gap fills in after a moment, as the friend counts up to it; without motion it is simply filled */
@media (prefers-reduced-motion: no-preference) {
  .game-room:not([data-quiet="true"]) .meet-card .nq-car.mark { animation: nq-fill .45s ease both 1.7s; }
  .game-room:not([data-quiet="true"]) .meet-card .nq-car.mark b { animation: nq-count-in .3s cubic-bezier(.3, 1.6, .5, 1) both 1.7s; }
}
@keyframes nq-fill { from { background: #fff9e9; border-color: #7b967f; box-shadow: none; transform: none; } }

#game-root[data-slug="missing-numbers"] .rail-repair { position: relative; overflow: visible; }
/* the gap is where a carriage is carried to: it opens up as one comes near */
#game-root[data-slug="missing-numbers"] .rail-slot .rail-carriage { transition: transform .14s, background .14s, outline-color .14s; }
#game-root[data-slug="missing-numbers"] .rail-slot.drop-ready .rail-carriage { background: #e2f5d8; outline: 3px solid #467c63; outline-offset: 4px; transform: translateY(-5px) scale(1.06); }
#game-root[data-slug="missing-numbers"] .rail-slot.rail-help .rail-carriage { outline: 3px solid #467c63; outline-offset: 4px; }
/* A number to carry is a card (a place) with a carriage on it (the face): the carriage is what is picked up and flies to the gap, and
   the card stays where it is, empty. The face covers the whole card, so a press anywhere on the card picks the carriage up, and it
   is above the train, so it never flies behind it. */
#game-root[data-slug="missing-numbers"] .rail-answer { position: relative; }
#game-root[data-slug="missing-numbers"] .rail-answer .nq-face { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; border-radius: inherit; }
#game-root[data-slug="missing-numbers"] .rail-answer .nq-face.is-pressed, #game-root[data-slug="missing-numbers"] .rail-answer .nq-face.is-carried { box-shadow: none; border-color: transparent; }
#game-root[data-slug="missing-numbers"] .rail-answer .nq-face.is-carried .rail-carriage { filter: drop-shadow(0 14px 10px #1f3b5a55); }
#game-root[data-slug="missing-numbers"] .rail-answer.wrong .nq-face { transform: none; }
/* what has been tried, what the friend points at, and what is not wanted any more say what they are */
#game-root[data-slug="missing-numbers"] .rail-answer.nq-answer:disabled { opacity: 1; }
#game-root[data-slug="missing-numbers"] .rail-answer.wrong, #game-root[data-slug="missing-numbers"] .rail-answer.wrong:disabled { opacity: .4; animation: shake .45s ease; box-shadow: none; }
#game-root[data-slug="missing-numbers"] .rail-answer.modelled { border-color: #f2b92f; box-shadow: 0 0 0 6px #ffe28a99, 0 4px #dadbc4; }
#game-root[data-slug="missing-numbers"] .rail-answer.nq-away, #game-root[data-slug="missing-numbers"] .rail-answer.nq-away:disabled { opacity: .35; transition: opacity .25s; }
/* what the friend carries in its hand is a carriage: it is drawn at the size of the card, not of the words */
#game-root[data-slug="missing-numbers"] .hand-hint .hand-card .nq-face { display: contents; }
#game-root[data-slug="missing-numbers"] .hand-hint .hand-card .rail-carriage { width: 82%; height: 62%; font-size: inherit; }
#game-root[data-slug="missing-numbers"] .hand-hint .hand-card .rail-carriage::after { display: none; }
#game-root[data-slug="missing-numbers"] .hand-hint .hand-card .rail-wheels { left: 14%; width: 12%; height: 16%; border-width: 3px; bottom: -8%; }
#game-root[data-slug="missing-numbers"] .hand-hint .hand-card .rail-wheels::after { display: none; }
/* a carriage is carried to the gap, not to the friend: the friend's dashed home stays away */
#game-root[data-slug="missing-numbers"] .stage:has(.nq-face.is-carried) > .friend-zone::before { opacity: 0; transform: none; }
/* A phone on its side: the friend keeps a narrow column, so its bubble keeps the little train (the same words are above the train, and
   in the voice) and the carriages in it are drawn smaller. */
@media (orientation: landscape) and (max-height: 520px) {
  #game-root[data-slug="missing-numbers"] .friend-bubble:has(.bubble-art:not([hidden])) .bubble-line { display: none; }
  #game-root[data-slug="missing-numbers"] .friend-bubble .nq-train { --car: 20px; }
}