/* css/demo.css, the 5 minute demo (unit D1). Pairs with css/arcade.css and css/console.css.
   08/11/26: the demo lives in the fixed 16:9 console screen (css/console.css), so it always lays out as the phone layout against one
   logical size: the viewport-width media preludes below are pinned (max-width blocks always on, min-width blocks off). */
html, body { margin: 0; min-height: 100%; background: #14261c; color: #f3f7ee; font-family: 'Arcade Pixel', ui-monospace, Menlo, monospace; }
.demo { max-width: 560px; margin: 0 auto; padding: 0.5rem 0.75rem 1rem; box-sizing: border-box; display: flex; flex-direction: column; gap: 0.5rem; min-height: 100vh; }
.demo-top { display: flex; align-items: center; gap: 0.625rem; font-size: 0.8125rem; }
.demo-title { font-weight: 700; flex: 0 0 auto; }
.demo-prog { flex: 1; text-align: center; opacity: .9; }
.demo-exit { color: #cfe8c6; font-size: 0.75rem; text-decoration: underline; }
.demo-stage { display: flex; flex-direction: column; gap: 0.625rem; flex: 1; }
.demo-scene { width: 100%; max-width: 360px; align-self: center; aspect-ratio: 4 / 3; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: 0.5rem; background: #0b1710; }
.demo-scene[hidden] { display: none; }
.demo-body { display: flex; flex-direction: column; gap: 0.625rem; }
.demo-bubble { background: #f3f7ee; color: #14261c; border-radius: 0.75rem; padding: 0.625rem 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.demo-who { font-size: 0.75rem; text-transform: none; opacity: .75; }
.demo-say { margin: 0; font-size: 1.0625rem; line-height: 1.35; }
.demo-bubble[data-correct="0"] { background: #fff1d6; }
.demo-key { align-self: flex-end; font-size: 0.75rem; opacity: .8; border: 2px solid currentColor; border-radius: 0.375rem; padding: 1px 0.375rem; }
.demo-hear { align-self: flex-start; margin-top: 0.375rem; }
.demo-prompt { margin: 0; font-size: 1.25rem; line-height: 1.35; }
.demo-answer { display: flex; flex-direction: column; gap: 0.375rem; }
.demo-card { background: #f3f7ee; color: #14261c; border-radius: 0.75rem; padding: 0.75rem 0.875rem; }
.demo-card h2 { margin: 0 0 0.375rem; font-size: 1.25rem; }
.demo-card h3 { margin: 0.75rem 0 0.25rem; font-size: 0.9375rem; }
.demo-card ul { margin: 0; padding-left: 1.125rem; font-size: 0.875rem; line-height: 1.4; }
.demo-card p { margin: 0.25rem 0; font-size: 1.0625rem; }
.demo-card .demo-caveat { font-size: 0.8125rem; opacity: .85; margin-top: 0.75rem; }
.demo-pad { display: flex; justify-content: center; padding-top: 0.375rem; }

/* ---- round 1 fixes (07/11/26): the whole answer fits at 1024x768 and 390x844 ---- */
.demo { gap: 0.375rem; padding: 0.375rem 0.75rem 0.5rem; min-height: 100dvh; }
.demo-scene { background: #f4f1de; }
.demo-scene[data-size="big"] { max-width: 300px; }
.demo-scene[data-size="small"] { max-width: 150px; }
.demo-scene[data-size="clock"] { max-width: 170px; }
.demo-scene.demo-grey { filter: grayscale(1) contrast(.85) brightness(1.05); }
.demo-stage { gap: 0.375rem; }
.demo-body { gap: 0.375rem; }
.demo-bubble { padding: 0.4375rem 0.625rem; }
.demo-say { font-size: 1rem; line-height: 1.3; }
.demo-prompt { font-size: 1.1875rem; line-height: 1.3; }
.demo-key { font-size: 0.75rem; }
.demo-key.is-wait { opacity: .35; }

/* the garden row: grey plots, a coloured flower for each one actually earned */
.demo-garden { display: flex; justify-content: center; gap: 0.875rem; min-height: 1.875rem; align-items: flex-end; }
.demo-flower { position: relative; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #8b8f8a; opacity: .7; }
.demo-flower::after { content: ""; position: absolute; left: 50%; top: 100%; width: 3px; height: 0.5rem; margin-left: -1.5px; background: #7a7f78; }
.demo-flower.is-open { opacity: 1; background: radial-gradient(circle at 50% 50%, #ffd84d 0 28%, var(--petal) 30% 100%); box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.demo-flower.is-open::after { background: #3f9a4a; }
.demo-flower.is-new { animation: demo-bloom .9s ease-out; }
@keyframes demo-bloom { from { transform: scale(.3); } 60% { transform: scale(1.35); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .demo-flower.is-new { animation: none; } }

/* multiple choice: the highlighted choice is yellow with dark text, like the number pad's focused key */
.demo .arcade-choice.is-arcade-focus { background: var(--arcade-focus, #ffe14d); color: #1a1400; }
.demo .arcade-choices { min-width: 0; }
.demo .arcade-choice { padding-top: 0.3125rem; padding-bottom: 0.3125rem; }

/* pay with coins and set the clock: big labelled buttons, a running total */
.demo-coins, .demo-clockbox { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.demo-clockbox { flex-direction: row; justify-content: center; gap: 0.75rem; }
.demo-coin[data-paid]:not([data-paid="0"])::after { content: "paid " attr(data-paid); font-size: 0.6875rem; font-weight: 700; color: #ffe14d; }
.demo-coins .demo-key, .demo-clockbox + .demo-key { align-self: center; text-align: center; }
.demo-coin-row { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.demo-coin { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0.375rem 0.5rem; border-radius: 0.75rem; border: 0.25rem solid transparent; min-width: 64px; }
.demo-coin b { display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: #c9a227; color: #2b2100; font-size: 1.125rem; border: 3px solid #7a5f00; }
.demo-coin-n { font-size: 0.6875rem; opacity: .85; text-align: center; }
.demo-coin.is-sel { border-color: #ffe14d; background: rgba(255,225,77,.2); }
.demo-paid { margin: 0; font-size: 1.25rem; font-weight: 700; text-align: center; }
.demo-hand { padding: 0.625rem 0.875rem; border-radius: 0.625rem; border: 0.25rem solid transparent; background: #3a3670; font-size: 1.0625rem; font-weight: 700; }
.demo-hand.is-sel { background: #ffe14d; color: #1a1400; border-color: #fff; }

/* end screens and the report */
.demo-report, .demo-score { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.demo-report h2 { font-size: 1.375rem; }
.demo-summary p { font-size: 1rem; line-height: 1.4; margin: 0.375rem 0; }
.demo-cta { display: flex; flex-direction: column; gap: 2px; background: #1f6b3a; color: #fff; border-radius: 0.625rem; padding: 0.625rem 0.75rem; margin: 0.625rem 0; }
.demo-cta b { font-size: 1.0625rem; }
.demo-cta span { font-size: 0.8125rem; }
.demo-back { display: inline-block; margin-top: 0.75rem; padding: 0.75rem 1rem; background: #ffe14d; color: #1a1400; border-radius: 0.625rem; font-weight: 700; text-decoration: none; }
@media all {
  /* the six-button pad is docked at the bottom and never covers the answer: the content gets its own room */
  .demo { padding-bottom: 16rem; }
  .demo-pad { position: fixed; left: 0; right: 0; bottom: 0; padding: 0.25rem 0 0.625rem; background: #14261c; }
  .demo .arcade-key { min-height: 2.625rem; }
  .demo-prompt { font-size: 1rem; }
  .demo-say { font-size: 0.9375rem; }
}

/* ---- round 2 fixes (07/11/26) ---- */
/* hints and small labels are at least 0.875rem, also on a phone */
.demo-key, .demo-exit, .demo-who, .demo-coin-n, .demo-top { font-size: 0.875rem; }
.demo-coin[data-paid]:not([data-paid="0"])::after { font-size: 0.875rem; }
.demo-key { text-align: center; }
/* the question stays on screen while the Sprite explains it */
.demo-asked { padding: 0.375rem 0.625rem; background: rgba(255,255,255,.1); border-radius: 0.5rem; }
/* the report's way out is the first thing in the card */
.demo-exitrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0 0 0.5rem; }
.demo-exitrow .demo-key { align-self: center; opacity: 1; }
/* the end-of-quest garden: big coloured flowers on sky and grass */
.demo-biggarden { display: flex; flex-wrap: nowrap; /* item 5: the garden is ALWAYS one row at every width; the plants shrink, never wrap */ justify-content: center; align-items: flex-end; gap: 0.25rem 0.375rem; padding: 0.625rem 0.5rem 0.375rem; border-radius: 0.75rem; background: linear-gradient(#cfeaff 0 62%, #8fd18a 62% 100%); }
.demo-bigflower { width: 2.875rem; height: 4.3125rem; }
.demo-bigflower.is-open { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.demo-score .demo-biggarden { margin: 0.25rem 0 0.5rem; }
@media all {
  /* four coins stay on ONE line so Left and Right follow it (round 2: the 50c wrapped to a second row) */
  .demo-coin-row { flex-wrap: nowrap; gap: 0.25rem; }
  .demo-coin { min-width: 0; padding: 0.25rem 3px; border-width: 3px; flex: 1 1 0; }
  .demo-coin b { width: 2.75rem; height: 2.75rem; font-size: 1rem; }
  /* the on-screen pad never sticks out past the viewport */
  .demo-pad { box-sizing: border-box; max-width: 100vw; overflow: hidden; padding-left: 0.5rem; padding-right: 0.5rem; }
  .demo-pad > * { max-width: 100%; box-sizing: border-box; }
  .demo-key, .demo-top, .demo-exit { font-size: 0.875rem; }
}

/* ---- round 3 fixes (07/11/26) ---- */
/* hints are dark filled chips with white text: readable on the light bubble and on the dark page, never pale grey */
.demo-key { opacity: 1; background: #1f3a2b; color: #fff; border-color: #9bd8a0; font-weight: 700; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; white-space: normal; }
.demo-key.is-wait { opacity: .6; }
.demo-exitrow .demo-key { opacity: 1; }
.demo-mine { margin: 0; padding: 0.25rem 0.625rem; border-radius: 0.5rem; background: #ffe14d; color: #1a1400; font-size: 1.0625rem; font-weight: 700; align-self: flex-start; }
.demo-scene[data-size="small"] { max-width: 210px; }
/* the "." key on the decimal pad reads as a big dot */
.demo .arcade-key-symbol { font-size: 1.8rem; font-weight: 700; line-height: 1; }
@media all {
  .demo-scene[data-size="small"] { max-width: 96px; }
  .demo-garden { min-height: 1.375rem; }
  /* a key moved into view by the arrows is never left under the docked pad (round 3b: the "." row sat behind it) */
  html, body { scroll-padding-bottom: 14.375rem; }
  /* round 3b: the numpad is 4 rows of 46 px keys so its bottom row (0, OK) ends above the docked pad on a 390x844 phone */
  .demo .arcade-key { min-height: 0; height: 2.875rem; padding: 0 .3rem; }
  .demo .arcade-display { min-height: 0; padding: .25rem .6rem; font-size: 1.4rem; }
  .demo .arcade-widget { gap: .5rem; padding: .5rem; }
  /* the decimal pad has a fifth row (the dot key): its keys shrink once more so the whole pad stays above the docked one */
  /* the arrows-and-A hint under an answer pad would sit half behind the docked pad, which already shows those keys */
  .demo-hear { display: none; }
  .demo-answer:has(.arcade-key-symbol) .arcade-key { height: 2.25rem; }
  .demo-answer:has(.arcade-key-symbol) .arcade-display { padding: .1rem .6rem; font-size: 1.2rem; }
  .demo-answer:has(.arcade-key-symbol) .arcade-widget { gap: .35rem; padding: .35rem; }
  .demo-flower { width: 1rem; height: 1rem; }
  /* the pad fits 390 px: nothing clipped, the A button inside the viewport */
  .demo-pad .arcade-touchpad { gap: .4rem; padding: .3rem .5rem; justify-content: space-between; }
  .demo-pad .arcade-tbtn { min-width: 3.2rem; min-height: 3.2rem; font-size: 1.1rem; }
  .demo-pad .arcade-ab { gap: .5rem; }
  .demo { padding-bottom: 17.5rem; }
  .demo-exitrow { flex-direction: column; align-items: flex-start; }
}

/* ---- round 4 fixes (07/11/26) ---- */
/* one friendly rounded typeface for play, scores and the report; the pixel face stays for the title only */
html, body, .demo, .demo .mg, .demo .arcade-widget, .demo .arcade-key, .demo .arcade-choice { font-family: ui-rounded, "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
.demo-title { font-family: 'Arcade Pixel', ui-monospace, Menlo, monospace; }
/* the header stays on one line on a phone: the question number only (the garden dots already show the flowers) */
.demo-top { flex-wrap: nowrap; white-space: nowrap; }
.demo-prog { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media all { .demo-prog-fl { display: none; } }
/* the Sprite has a face beside what it says */
.demo-bubble { flex-direction: row; align-items: center; gap: 0.625rem; position: relative; }
.demo-talk { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.demo-face { flex: 0 0 auto; }
.demo-sprite { display: block; }
.demo-sprite.is-cheer { animation: demo-hop .5s ease-in-out 3; }
.demo-sprite.is-happy { animation: demo-nod 1.2s ease-in-out 1; }
.demo-sprite.is-think { animation: demo-nod 2s ease-in-out infinite; }
.demo-twinkle { animation: demo-twinkle .6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes demo-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.5625rem) scale(1.08); } }
@keyframes demo-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
@keyframes demo-twinkle { from { transform: scale(.6); opacity: .6; } to { transform: scale(1.2); opacity: 1; } }
.demo-bubble.is-cheer { background: #fff7c9; box-shadow: 0 0 0 3px #ffd84d; }
.demo-bubble.is-bud { background: #ffe8f0; }
.demo-confetti { position: relative; height: 0; overflow: visible; pointer-events: none; animation: demo-rewardline-fade 0.6s ease 6s forwards; }
@keyframes demo-rewardline-fade { to { opacity: 0; } }
.demo-confetti i { position: absolute; top: -0.25rem; left: var(--x); width: 0.5625rem; height: 0.8125rem; border-radius: 50% 50% 50% 0; background: var(--c); animation: demo-fall 1.4s ease-in var(--d) both; }
@keyframes demo-fall { from { transform: translateY(-1.25rem) rotate(0); opacity: 1; } to { transform: translateY(9.375rem) rotate(300deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .demo-sprite, .demo-twinkle, .demo-confetti i { animation: none; } .demo-confetti { display: none; } }
/* the garden row: a bud is a small green bud, a flower is coloured, a plot with nothing is grey */
.demo-flower.is-bud { opacity: 1; background: radial-gradient(circle at 50% 40%, #f2a0bd 0 45%, #4caf50 47% 100%); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; width: 0.875rem; height: 1.25rem; box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.demo-flower.is-bud::after { background: #3f9a4a; }
.demo-bigflower.is-bud { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
/* the arrival: Captain Lim and the Sprite as a real picture */
.demo-arrival-wrap { width: 100%; max-width: 520px; align-self: center; margin: 0 auto; }
.demo-arrival { width: 100%; height: auto; display: block; border-radius: 0.75rem; border: 3px solid #0b1710; }
.demo-arrival.is-wilt { animation: demo-wilt 1.6s ease-out 1; }
@keyframes demo-wilt { from { filter: saturate(1.4); } to { filter: saturate(1); } }
/* the ratio as a coloured bar with the share labelled */
.demo-ratio { display: flex; gap: 0.25rem; width: 100%; max-width: 420px; align-self: center; }
.demo-ratio-share { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.25rem; padding: 0.625rem 0.375rem; border-radius: 0.625rem; color: #fff; font-weight: 700; font-size: 0.9375rem; min-width: 0; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.demo-ratio-cells { display: flex; flex-wrap: wrap; gap: 0.25rem; justify-content: center; }
.demo-ratio-cells i { width: 1.125rem; height: 1.125rem; border-radius: 0.25rem; background: rgba(255,255,255,.85); }
/* the working of a miss: a column sum with the digits lined up */
.demo-working { margin: 0; align-self: flex-start; padding: 0.5rem 0.875rem; border-radius: 0.625rem; background: #f3f7ee; color: #14261c; font: 700 1.5rem/1.25 ui-monospace, Menlo, Consolas, monospace; border-left: 0.375rem solid #3f9a4a; }
/* seed catch: a big picture, a labelled timer, one counter, no unlabelled pill */
/* the grown-up report: short, plain, the same type as the game */
.demo-report .demo-summary p { font-size: 1.125rem; margin: 0.3125rem 0; }
.demo-rows { list-style: none; margin: 0.5rem 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.demo-rows li { display: flex; align-items: center; gap: 0.625rem; font-size: 1rem; }
.demo-mark { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 3px solid #1f6b3a; box-sizing: border-box; }
.demo-rows .is-tick .demo-mark { background: #2e9e4f; border-color: #1f6b3a; }
.demo-rows .is-dot .demo-mark { background: #f2a93b; border-color: #b87a12; }
.demo-rows .is-ring .demo-mark { background: transparent; border-color: #8b8f8a; }
.demo-contact { font-weight: 700; }
.demo-contact.is-placeholder { background: #fff7c9; color: #4a3b00; border-radius: 0.375rem; padding: 0.25rem 0.5rem; border: 2px dashed #b8860b; }
.demo-more { margin-top: 0.625rem; }
.demo-more summary { font-weight: 700; cursor: pointer; font-size: 0.9375rem; }
.demo-report h3 { font-size: 1.0625rem; }
.demo-report ul { font-size: 1rem; }
/* a wide screen uses its width: the picture beside the question, not a narrow column with a tiny picture */
@media not all {
  .demo { max-width: 1040px; }
  .demo-stage:has(.demo-scene:not([hidden])) { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; gap: 1.375rem; }
  .demo-scene[data-size="small"] { max-width: none; width: 100%; }
  .demo-scene[data-size="clock"] { max-width: 100%; width: 100%; }
  .demo-say { font-size: 1.25rem; }
  .demo-prompt { font-size: 1.5rem; }
  .demo-ratio { max-width: 100%; }
  .demo-arrival-wrap { max-width: 640px; }
}
@media not all { .demo-stage:has(.demo-scene:not([hidden])) .demo-scene { align-self: start; } }
@media all { .demo-face svg { width: 2.25rem; height: 2.25rem; } .demo-bubble { gap: 0.5rem; } }

/* ---- round 5 fixes (07/11/26) ---- */
/* the whole page scales with the screen: one rem is 16px on a phone and grows on a laptop, so a 1440x900 screen is filled and the
   type is readable from beside the desk. Every size above is in rem, so pictures, type and the answer pad grow together. */
/* (v0.6 U2: the window-scaled html font clamp is gone; html.console-page is a fixed 14px, set at the end of this file) */
/* the header: the question label and the flower count are two things, with a gap and a rule between them */
.demo-prog-fl { margin-left: .9rem; padding-left: .9rem; border-left: 2px solid rgba(255, 255, 255, .35); }
.demo-garden { padding-bottom: .65rem; }
/* pictures made of DOM: the analog clock, the stickers and the ratio bar */
.demo-pic { display: flex; flex-direction: column; align-items: center; gap: .4rem; margin: 0; }
.demo-clockface { width: 100%; max-width: 17rem; height: auto; display: block; }
.demo-clockpic figcaption { font-size: 1.15rem; font-weight: 700; text-align: center; }
.demo-stickers { width: 100%; max-width: 22rem; height: auto; display: block; background: #f4f1de; border-radius: .6rem; }
.demo-hand { min-width: 6.5rem; text-align: center; }
/* the streak: the open flowers dance, once */
.demo-garden.is-dance .demo-flower.is-open { animation: demo-dance .5s ease-in-out 3; }
.demo-garden.is-dance .demo-flower.is-open:nth-child(2n) { animation-delay: .12s; }
@keyframes demo-dance { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-.35rem) rotate(-14deg); } 70% { transform: translateY(-.15rem) rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .demo-garden.is-dance .demo-flower.is-open { animation: none; } }
/* the report: the exit hint stays on one line, and on a phone the six-button pad is gone (the page scrolls by touch) */
.demo-oneline { white-space: nowrap; }
.demo-nobreak { white-space: nowrap; } /* v0.6 U7: keeps "grown-up" together in the report title */
@media all {
  .demo-clockface { max-width: 12.5rem; }
  .demo-stickers { max-width: 15rem; }
  .demo-stage[data-phase="report"] ~ .demo-pad { display: none; }
  .demo:has(.demo-stage[data-phase="report"]) { padding-bottom: 11rem; }
  .demo-exitrow .demo-oneline { font-size: .85rem; }
}
/* a tablet or laptop: the question sits in the middle of the screen, not at the top of an empty one */
@media not all {
  .demo-stage { justify-content: center; }
  .demo-stage:has(.demo-scene:not([hidden])) { align-items: center; }
  .demo-body { gap: .7rem; }
  .demo-pic { align-self: center; }
  .demo-stage[data-phase="report"] { justify-content: flex-start; }
  .demo-bigflower { width: 4.4rem; height: 6.6rem; }
  .demo-score { padding: 1.2rem 1.6rem; }
  .demo-score p { font-size: 1.25rem; }
}

/* ---- round 6 fixes (07/11/26) ---- */
/* Seed Catch fits the screen: the field is as wide as the height left over allows, never below the fold (1280x800, 1440x900, 390x844) */
/* v0.6 (U5): the break is two columns inside the 640x360 screen: the words (Sprite, instruction, counter, plots) left, the 4:3 field (320x240, css/console.css) right */
/* the question counter says when the demo is adapting */
.demo-prog-tag { margin-left: .6rem; padding: .1rem .6rem; border-radius: 999px; background: #ffe14d; color: #1a1400; font-weight: 700; }
.demo-prog-tag[hidden] { display: none; }
@media all { .demo-title { display: none; } .demo-prog { text-align: left; } .demo-prog-tag { margin-left: .4rem; } }
/* "A: next" is a big bar a thumb can find, inside the bubble */
.demo-bubble .demo-key { align-self: stretch; display: flex; align-items: center; justify-content: center; min-height: 2.75rem; font-size: 1.125rem; border-radius: .625rem; margin-top: .25rem; }
/* on a phone the story, explain and feedback screens sit down next to the pad, not at the top with a gap below */
@media all {
  .demo-stage:not([data-phase="item"]):not([data-phase="report"]):not([data-phase="break"]) { justify-content: flex-end; }
  /* the report keeps the pad: the leave hint names the A button, so the A button is on screen */
  .demo-stage[data-phase="report"] ~ .demo-pad { display: flex; }
  .demo:has(.demo-stage[data-phase="report"]) { padding-bottom: 11rem; }
}
/* round 13: on a phone the report pad is a slim strip (the parent reads and taps there), and the garden row never wraps a flower alone into the grass */
@media all {
  .demo-stage[data-phase="report"] ~ .demo-pad { padding: .15rem 0 .35rem; }
  .demo-stage[data-phase="report"] ~ .demo-pad .arcade-touchpad { gap: .25rem; padding: .15rem .5rem; }
  .demo-stage[data-phase="report"] ~ .demo-pad .arcade-tbtn { min-width: 2.5rem; min-height: 2.5rem; font-size: .95rem; }
  .demo-biggarden { flex-wrap: nowrap; }
  .demo-biggarden .demo-bigflower { flex: 1 1 0; min-width: 0; max-width: 2.875rem; height: auto; aspect-ratio: 2 / 3; }
}
/* the clock: the hour hand and the minute hand are different colours, and their chips wear the same colour */
.demo-hand { border-bottom-width: .4rem; }
.demo-hand[data-hand="hour"] { border-bottom-color: #1f4fb4; }
.demo-hand[data-hand="minute"] { border-bottom-color: #d9480f; }
/* a right answer: a flower springs up in front of the Sprite and the new plot in the garden strip glows */
.demo-growup { position: relative; display: flex; justify-content: center; height: 4.75rem; pointer-events: none; animation: demo-rewardline-fade 0.6s ease 6s forwards; }
@keyframes demo-rewardline-fade { to { opacity: 0; } }
.demo-growup svg { height: 100%; width: auto; transform-origin: 50% 100%; animation: demo-grow .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.demo-growup i { position: absolute; left: 50%; top: 35%; width: .6rem; height: .6rem; margin-left: -.3rem; background: #ffd84d; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: demo-twink 1s .45s ease-out both; }
@keyframes demo-grow { from { transform: scale(.1) rotate(-30deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes demo-twink { from { opacity: 0; transform: rotate(var(--a)) translateY(-1rem) scale(.2); } 50% { opacity: 1; } to { opacity: 0; transform: rotate(var(--a)) translateY(-3.2rem) scale(1.1); } }
.demo-flower.is-new::before { content: ""; position: absolute; inset: -.45rem; border-radius: 50%; border: 3px solid #ffd84d; animation: demo-ring .9s ease-out both; }
@keyframes demo-ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .demo-growup svg, .demo-growup i, .demo-flower.is-new::before { animation: none; } .demo-growup i { display: none; } }
/* on a phone the celebration and the Sprite fill the room above the pad instead of leaving it empty */
@media all {
  .demo-growup { height: 8.5rem; }
  .demo-growup i { width: .85rem; height: .85rem; margin-left: -.42rem; }
  .demo-stage:not([data-phase="item"]) .demo-face svg { width: 3.25rem; height: 3.25rem; }
  .demo-bubble > .demo-key { flex: 0 0 auto; min-width: 6.5rem; }
}

/* ---- round 7 fixes (07/11/26) ---- */
/* the whole answer fits the screen height: the page type scales with the height as well as the width (1280x800, 1440x900, 1024x768) */
@media not all {
  /* a number pad is a pad, not a full-width bar: capped width and key height, centred under the question */
  .demo-answer:has(.arcade-key) { width: 100%; max-width: 25rem; align-self: center; }
  .demo .arcade-key { min-height: 0; height: 2.9rem; padding: 0 .3rem; }
  .demo .arcade-display { min-height: 0; padding: .2rem .6rem; font-size: 1.5rem; }
  .demo .arcade-widget { gap: .4rem; padding: .4rem; }
  .demo-answer:has(.arcade-key-symbol) .arcade-key { height: 2.45rem; }
  .demo .arcade-key-symbol { font-size: 2.1rem; }
  .demo .arcade-choice { padding-top: .3rem; padding-bottom: .3rem; }
}
@media all {
  .demo-stickers { max-width: 10rem; }
  .demo-scene[data-size="small"] { max-width: 9.5rem; }
}

/* ---- round 7 fixes, part 2 (07/11/26): the working is always drawn, the right-answer garden is big, no blank bands ---- */
.demo-arrival { aspect-ratio: 16 / 10; height: auto; }
/* on a phone the picture stands at the bottom of a taller sky, so no blank band opens above it */
@media all {
  .demo-arrival-wrap { max-width: none; position: relative; aspect-ratio: 1 / 1; border-radius: .75rem; overflow: hidden; border: 3px solid #0b1710; background: radial-gradient(ellipse 22% 7% at 24% 30%, #fff 60%, transparent 62%), radial-gradient(ellipse 28% 8% at 70% 18%, #fff 60%, transparent 62%), radial-gradient(ellipse 20% 6% at 56% 40%, #fff 60%, transparent 62%), #8fd3ff; }
  .demo-arrival { position: absolute; left: 0; bottom: 0; width: 100%; border: 0; border-radius: 0; aspect-ratio: 16 / 10; }
}
/* one worked step, large */
.demo-steps p, .demo-coinwork p { margin: .15rem 0; font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.demo-steps, .demo-coinwork { font-family: inherit; max-width: 100%; box-sizing: border-box; }
.demo-coinwork-head { font-size: 1rem !important; font-weight: 600 !important; opacity: .85; }
.demo-coinwork-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0; }
.demo-coin-c { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: #c9a227; color: #2b2100; font-size: 1.05rem; border: 3px solid #7a5f00; }
.demo-stage[data-phase="explain"] .demo-stickers, .demo-stage[data-phase="feedback"] .demo-stickers { max-width: 15rem; }
.demo-stage[data-phase="explain"] .demo-working, .demo-stage[data-phase="feedback"] .demo-working { align-self: stretch; }
/* a right answer: the whole garden, big, the new flower springs up with sparkles */
.demo-growgarden { position: relative; padding-top: 1.2rem; padding-bottom: .6rem; }
.demo-growgarden .demo-bigflower { width: 3.6rem; height: 5.4rem; }
.demo-growgarden .demo-bigflower.is-new { transform-origin: 50% 100%; animation: demo-grow .9s cubic-bezier(.2, 1.4, .4, 1) both; }
.demo-spark { position: absolute; top: 45%; width: .8rem; height: .8rem; margin-left: -.4rem; background: #ffd84d; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: demo-twink 1s .45s ease-out both; pointer-events: none; animation: demo-rewardline-fade 0.6s ease 6s forwards; }
@keyframes demo-rewardline-fade { to { opacity: 0; } }
@media not all { .demo-growgarden .demo-bigflower { width: 5rem; height: 7.5rem; } }
/* the score screen: the Sprite beside the title, the flowers grow in one after another */
.demo-scorehead { display: flex; align-items: center; gap: .6rem; }
.demo-scorehead h2 { margin: 0; }
/* round 9: a score flower is always on screen (it pops from a smaller size, never from nothing), so the picture and "You grew N flowers" agree from the first frame */
@keyframes demo-pop { from { transform: scale(.7); } to { transform: scale(1); } }
.demo-score .demo-bigflower.is-open { animation: demo-pop .35s cubic-bezier(.2, 1.4, .4, 1) both; transform-origin: 50% 100%; }
.demo-score .demo-bigflower:nth-child(2) { animation-delay: .04s; }
.demo-score .demo-bigflower:nth-child(3) { animation-delay: .08s; }
.demo-score .demo-bigflower:nth-child(4) { animation-delay: .12s; }
.demo-score .demo-bigflower:nth-child(5) { animation-delay: .16s; }
.demo-score .demo-bigflower:nth-child(6) { animation-delay: .2s; }
.demo-score .demo-bigflower:nth-child(7) { animation-delay: .24s; }
/* the coins the child paid, shown beside the right ones on a miss */
.demo-paidrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem; }
.demo-paidrow-head { flex-basis: 100%; margin: 0; text-align: center; font-weight: 700; }
/* round 9: a question screen sits at the top of the stage on a laptop (the centring left a large empty band above it) */
@media not all { .demo-stage[data-phase="item"] { justify-content: flex-start; padding-top: .5rem; } }
/* the seed catch result: the seeds drop into the basket */
.demo-basket { width: 100%; max-width: 22rem; height: auto; align-self: center; display: block; }
.demo-seed { transform-box: fill-box; animation: demo-seeddrop .55s ease-in calc(var(--i) * 70ms) both; }
@keyframes demo-seeddrop { from { transform: translateY(-5rem); opacity: 0; } 60% { opacity: 1; } to { transform: translateY(0); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .demo-seed, .demo-growgarden .is-new, .demo-spark, .demo-score .demo-bigflower.is-open { animation: none; } .demo-spark { display: none; } }
.demo-morekey { margin-left: .5rem; font-size: .85rem; }
.demo-more summary { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; }

@media all {
  .demo-growgarden { min-height: 15rem; align-items: flex-end; }
  .demo-growgarden .demo-bigflower { width: 4.4rem; height: 6.6rem; }
  .demo-stage[data-phase="explain"] .demo-scene[data-size="small"] { max-width: 14rem; }
  .demo-stage[data-phase="explain"] .demo-clockface { max-width: 14rem; }
}
/* round 7: on a phone the small screens sit in the middle of the room, and the garden and the basket fill it */
@media all {
  .demo-stage:not([data-phase="item"]):not([data-phase="report"]):not([data-phase="break"]) { justify-content: center; }
  .demo-stage[data-phase="break"]:has(.demo-basket) { justify-content: center; }
  .demo-growgarden { min-height: 19rem; }
  .demo-basket { max-width: 100%; }
}

/* ---- round 8 fixes (07/11/26): Pay button, real coin pictures, the garden fills empty bands, the Sprite hops on a right answer ---- */
.demo-pay { align-self: center; min-width: 9rem; text-align: center; padding: .5rem 1.4rem; border-radius: .75rem; border: .25rem solid transparent; background: #2a7f38; color: #fff; font-weight: 800; font-size: 1.2rem; }
.demo-pay.is-sel { border-color: #ffe14d; background: #2c8239; }
.demo-coinpic { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; max-width: 100%; }
.demo-fillgarden { margin-top: .4rem; }
.demo-fillgarden .demo-bigflower { width: 3.2rem; height: 4.8rem; }
@media not all { .demo-fillgarden .demo-bigflower { width: 4.4rem; height: 6.6rem; } }
.demo-bubble[data-correct="1"] .demo-face svg { animation: demo-hop .6s ease-out 3; transform-origin: 50% 100%; }
@keyframes demo-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-.7rem) scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .demo-bubble[data-correct="1"] .demo-face svg { animation: none; } }
/* round 10 fix: on a phone the question stays where it was on the item screen when the answer or the explain screen opens (the middle-of-the-room centring left about 100 px of empty band above a coin-miss feedback) */
@media all {
  /* the tripled class beats the three-:not centring rule above */
  .demo-stage.demo-stage.demo-stage[data-phase="feedback"], .demo-stage.demo-stage.demo-stage[data-phase="explain"] { justify-content: flex-start; }
}

/* ---- round 11 fix 1 (07/11/26): the six-button pad shows on every touch device, by capability and not by width ---- */
@media not all {
  .demo .demo-pad { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; justify-content: center; padding: 0.375rem 0 0.75rem; background: #14261c; }
  .demo { padding-bottom: 13rem; }
  .demo .demo-pad .arcade-tbtn { min-width: 3.6rem; min-height: 3.6rem; font-size: 1.2rem; }
  html:has(.demo), body:has(.demo) { scroll-padding-bottom: 11rem; }
}

/* ---- round 11 fix 4 (07/11/26): the parent report leads with three large plain lines, the sign-up box, then "More detail" ---- */
.demo-lead { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.5rem 0; }
.demo-lead p { margin: 0; font-size: 1.375rem; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.demo-lead .demo-lead-strength { color: #1f6b3a; }
.demo-lead .demo-lead-step { color: #3a2f8a; }
.demo-report .demo-more { margin-top: 0.5rem; }
.demo-report .demo-more > summary { font-size: 1.0625rem; font-weight: 700; cursor: pointer; overflow-wrap: anywhere; }
.demo-report .demo-more p, .demo-report .demo-more li { font-size: 0.9375rem; overflow-wrap: anywhere; }
.demo .demo-oneline { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }

/* ===== round 12 ===== */
/* the leave hint wraps inside the card at 390px and the one Back sits above it */
.demo-exitrow { flex-direction: column; align-items: flex-start; }
.demo .demo-exitrow .demo-oneline { white-space: normal; max-width: 100%; text-align: left; }
.demo-why { margin: 0.5rem 0 0.25rem; padding: 0.5rem 0.75rem; border-left: 4px solid #9bd8a0; background: rgba(155, 216, 160, .12); border-radius: 0.375rem; }
.demo-why h3 { margin: 0 0 0.25rem; font-size: 1rem; }
.demo-why ul { margin: 0; padding-left: 1.1rem; }
.demo-why li { font-size: 0.9375rem; }
/* score screen: a hero line, the tries as dots, flowers that grow one after another */
.demo-score .demo-hero { font-size: 1.5rem; font-weight: 800; text-align: center; margin: 0.25rem 0 0.5rem; }
.demo-tries { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; margin: 0.5rem 0 0.125rem; }
.demo-tries i { width: 0.875rem; height: 0.875rem; border-radius: 50%; background: #9bd8a0; border: 2px solid #3f9a4a; animation: demo-pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.demo-tries i:nth-child(2n) { animation-delay: .12s; } .demo-tries i:nth-child(3n) { animation-delay: .24s; } .demo-tries i:nth-child(5n) { animation-delay: .36s; }
.demo-triescap { text-align: center; font-size: 1rem; margin: 0.125rem 0 0.5rem; }
.demo-score .demo-bigflower { flex: 1 1 0; min-width: 0; max-width: 6rem; width: auto; height: auto; aspect-ratio: 2 / 3; }
.demo-score .demo-bigflower.is-open:nth-child(n+8) { animation-delay: .3s; }
/* Seed Catch: a sky-and-field frame, and a counter that pops */
/* a picture drawn on the small canvas keeps clear of the top edge */
.demo-stage canvas[data-size="small"] { margin-top: 0.5rem; }
/* Q-hzym: a bank scene that draws at x=0 (p3-measurement-021 bars) sat flush on the card edge; the scene is padded inside the card (the canvas background fills the padding) */
.demo-stage canvas[data-size="small"] { box-sizing: border-box; padding: 0.4rem; }
@media (prefers-reduced-motion: reduce) { .demo-tries i { animation: none; } }
/* the key chip under a question shows on a phone pad too, as on the tablet */
.demo .demo-hear { display: block; }

/* round 13: Seed Catch shows the sky (canvas cream multiplies into the gradient), seeds get contrast; the report ends on the final garden row */
.demo-reportgarden { margin: 0.5rem 0; }
.demo-reportgarden .demo-biggarden { flex-wrap: nowrap; }
.demo-reportgarden .demo-bigflower { flex: 0 1 auto; min-width: 0; height: clamp(3rem, 16vw, 5rem); width: auto; max-width: none; aspect-ratio: 2 / 3; }
.demo-gardencap { margin: 0.25rem 0 0; font-size: 1.0625rem; font-weight: 600; text-align: center; color: #1f6b3a; }
.demo-week { margin: 0.5rem 0; font-size: 1.375rem; line-height: 1.3; font-weight: 700; color: #3a2f8a; overflow-wrap: anywhere; }

/* the fixed garden goal (owner decision 07/11/26): the count sits beside the plots, the golden flower is the bonus prize */
.demo-garden { flex-wrap: wrap; align-items: flex-end; }
.demo-garden-count { align-self: center; margin-left: .35rem; padding: .1rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .35); font-weight: 700; font-size: .95rem; letter-spacing: .02em; white-space: nowrap; }
.demo-flower.is-golden { background: radial-gradient(circle at 50% 50%, #fff6c2 0 28%, #ffc400 30% 100%); box-shadow: 0 0 0 2px #fff, 0 0 .75rem #ffd84d; }
.demo-offer { display: flex; gap: .75rem; margin-top: .75rem; flex-wrap: wrap; }
.demo-offer-btn { flex: 1 1 8rem; min-height: 2.75rem; padding: .5rem 1rem; border-radius: .75rem; border: 3px solid rgba(255, 255, 255, .5); background: rgba(255, 255, 255, .14); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
/* the solid yellow fill IS the selection (owner 11/11/26): it follows is-focus, never a fixed button; no outline as the cue */
.demo-offer-btn.is-focus { background: #ffc400; color: #3a2a00; border-color: #fff; }
.demo-offer-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.demo-reward { margin: 0 0 .5rem; padding: .35rem .8rem; border-radius: 999px; background: #ffc400; color: #3a2a00; font-weight: 700; text-align: center; }
@media all { .demo-garden { gap: .5rem; } .demo-garden-count { font-size: .85rem; } }
/* goal offer: at phone width the Yes / Finish buttons drop under the Sprite text so the text keeps the full row (it was a 6 word column) */
@media all { .demo-bubble:has(.demo-offer) { flex-wrap: wrap; } .demo-bubble .demo-offer { flex: 1 1 100%; margin-top: .25rem; } }
/* ---- m-controls (07/11/26): the Game Boy console is part of the page flow, never a fixed overlay over content ---- */
/* The console sits at the end of the .demo column (the play area takes the space above it); sticky keeps it on screen while a long report scrolls,
   and the content above always ends where the console begins. It also stays above the Home menu layer so a click on it still lands. */
.demo .demo-pad, .demo-pad { position: sticky; left: auto; right: auto; bottom: 0; z-index: 950; margin-top: auto; flex: 0 0 auto; padding: 0.25rem 0 0.5rem; background: #14261c; }
.demo { padding-bottom: 0; }
.demo:has(.demo-stage[data-phase="report"]) { padding-bottom: 0; }
@media all {
  .demo { padding-bottom: 0; }
  .demo:has(.demo-stage[data-phase="report"]) { padding-bottom: 0; }
}
.arcade-touchpad { position: relative; z-index: 950; }
/* a tablet or desktop window: the console is sized from the window height (em on the pad, not the page-scaled rem) so it never grows past about 190 px,
   and the picture above it gives way, so the whole question fits in the space above the console (1280x800, 1440x900, 768x1024) */
@media not all {
  .demo .demo-pad { font-size: clamp(10px, 1.3vh, 14px); padding: 0.2em 0 0.4em; }
  .demo .demo-pad .arcade-touchpad { gap: 0.4em; padding: 0.2em 1.2em; }
  .demo .demo-pad .arcade-padrow { gap: 1em; }
  .demo .demo-pad .arcade-tbtn { min-width: 3em; min-height: 3em; font-size: 1.1em; }
  .demo .demo-pad .arcade-ab { gap: 0.7em; }
  .demo .demo-pad .arcade-ab .arcade-tbtn { min-width: 3.9em; min-height: 3.9em; }
  .demo .demo-pad .arcade-ab .arcade-tbtn-b { margin-top: 1.3em; }
  .demo .demo-pad .arcade-ab .arcade-tbtn-a { margin-bottom: 1.3em; }
  .demo .demo-pad .arcade-mid { gap: 1.4em; }
  .demo .demo-pad .arcade-mid .arcade-tbtn { min-width: 7.7em; min-height: 2.7em; font-size: 0.6em; }
  .demo .demo-pad .arcade-keycap { font-size: 0.6em; }
  .demo-scene:not([data-size="small"]):not([data-size="clock"]) { max-width: calc(30dvh * 4 / 3); }
}
/* a wide window: the console is one row (d-pad, Home, X Y A B) so it is about 140 px tall and the question keeps the room above it */
@media not all {
  .demo .demo-pad .arcade-touchpad { flex-direction: row; align-items: center; justify-content: space-between; max-width: 34em; }
  .demo .demo-pad .arcade-padrow { display: contents; }
  .demo .demo-pad .arcade-mid { order: 1; flex-direction: row; align-items: center; gap: 0.6em; align-self: flex-end; margin-bottom: 0.4em; }
  .demo .demo-pad .arcade-ab { order: 2; }
  .demo .demo-pad .arcade-tbtn { min-width: 2.6em; min-height: 2.6em; }
  .demo .demo-pad .arcade-ab .arcade-tbtn { min-width: 3.4em; min-height: 3.4em; }
  .demo .demo-pad .arcade-ab .arcade-tbtn-b { margin-top: 1em; }
  .demo .demo-pad .arcade-ab .arcade-tbtn-a { margin-bottom: 1em; }
}
/* ---- m-goal layout fix (07/11/26): the explain beat is taller than the sticky m-controls console leaves room for ---- */
/* the garden that fills the explain/feedback band uses the compact flower size at every width, so its wrapped second row (237 px tall at 1280x800)
   does not push the Sprite line and the "A: next" key down under the console */
.demo-stage[data-phase="explain"] .demo-fillgarden .demo-bigflower, .demo-stage[data-phase="feedback"] .demo-fillgarden .demo-bigflower { width: 3.2rem; height: 4.8rem; }
/* phone: the small picture on a question screen gives up a few px so the question, numpad and key hint all end above the console (390x844, "An easier try" Sprite line is 3 rows) */
@media all { .demo-stage[data-phase="item"] .demo-scene[data-size="small"] { max-width: 7.5rem; } }

/* round 14: a sum story drawn as the story, one labelled group per person, tens as columns of ten visible cells (compact: it must not push the number pad down) */
.demo-story { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .25rem 1.25rem; width: 100%; }
.demo-story-group { margin: 0; display: flex; flex-direction: column; gap: .1rem; align-items: flex-start; }
.demo-story-name { font-weight: 800; font-size: 1rem; color: #fff; line-height: 1.1; }
.demo-story-part { margin: 0; font-size: .75rem; font-weight: 700; color: #cfe8c6; line-height: 1.1; }
.demo-rods { display: flex; gap: 3px; align-items: flex-start; }
.demo-rod { display: flex; flex-direction: column; gap: 1px; padding: 1px; border-radius: .25rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35); }
.demo-cell { width: .625rem; height: .625rem; display: block; }
@media all { .demo-story { gap: .2rem .75rem; } .demo-cell { width: .5rem; height: .5rem; } .demo-story-name { font-size: .9375rem; } }
/* round 14b: the story picture never pushes the number pad down. Phone: one row about 100 px tall (each person's label beside the rods). Wide: in the left column where the scene canvas sat, the question and pad in the right column. */
@media all {
  .demo-story { max-height: 6.5rem; flex-wrap: nowrap; justify-content: center; align-items: center; }
  .demo-story-group { flex-direction: row; align-items: center; gap: .375rem; }
  .demo-story-name { white-space: nowrap; }
}
@media not all {
  .demo-stage:has(.demo-story) .demo-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 1.375rem; row-gap: 0; align-items: start; }
  .demo-stage:has(.demo-story) .demo-body > * { grid-column: 2; margin-bottom: .5rem; }
  .demo-stage:has(.demo-story) .demo-body > .demo-story { grid-column: 1; grid-row: 1 / span 6; margin-bottom: 0; flex-direction: column; align-items: center; gap: .75rem; }
  .demo-stage:has(.demo-story) .demo-body > .demo-story .demo-story-group { align-items: center; }
}
/* ---- item 6 (07/11/26): the grown-up report is about 80% visual; shared palette with the garden and the rows (green #2e9e4f, amber #f2a93b, grey #8b8f8a, indigo #3a2f8a) ---- */
.demo-report .rv-head { display: flex; align-items: center; gap: 0.75rem; margin: 0.25rem 0 0.5rem; }
.demo-report .rv-gardenbox { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.demo-report .rv-big { font-size: 2rem; line-height: 1; font-weight: 800; color: #1f6b3a; }
.demo-report .rv-ring { flex: 0 0 auto; width: clamp(4.5rem, 20vw, 6.5rem); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#3a2f8a var(--share, 0%), #dfe8d8 0); position: relative; }
.demo-report .rv-ring::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: #f3f7ee; }
.demo-report .rv-ring b { position: relative; font-size: 1.0625rem; color: #3a2f8a; }
.demo-report .rv-strip { display: flex; flex-direction: column; gap: 0.375rem; margin: 0.25rem 0 0.5rem; }
.demo-report .rv-row { display: flex; align-items: center; gap: 0.5rem; background: #fff; border-radius: 0.5rem; padding: 0.375rem 0.5rem; min-width: 0; }
.demo-report .rv-icon { flex: 0 0 auto; font-size: 1.375rem; width: 1.75rem; text-align: center; }
.demo-report .rv-name { flex: 1 1 auto; min-width: 0; font-size: 1.0625rem; overflow-wrap: anywhere; }
.demo-report .rv-chip { flex: 0 0 auto; font-size: 0.875rem; font-weight: 700; border-radius: 999px; padding: 0.1875rem 0.625rem; color: #14261c; background: #e4e8e0; border: 2px solid #8b8f8a; white-space: nowrap; }
.demo-report .rv-chip.is-first { background: #c9ecd2; border-color: #2e9e4f; }
.demo-report .rv-chip.is-first::before { content: "\2713  "; }
.demo-report .rv-chip.is-easier { background: #dcefc9; border-color: #6aa84f; }
.demo-report .rv-chip.is-easier::before { content: "\25D0  "; }
.demo-report .rv-chip.is-help { background: #fbe3b5; border-color: #b87a12; }
.demo-report .rv-chip.is-help::before { content: "\25D0  "; }
.demo-report .rv-chip.is-practice::before, .demo-report .rv-notreached::before { content: "\25CB  "; }
.demo-report .rv-notreached { align-self: flex-start; }
.demo-report .rv-next { display: inline-block; font-size: 1.0625rem; font-weight: 700; color: #3a2f8a; background: #e6e3fa; border: 2px solid #3a2f8a; border-radius: 999px; padding: 0.375rem 0.875rem; margin: 0 0 0.25rem; overflow-wrap: anywhere; }
.demo-report .rv-head, .demo-report .rv-strip, .demo-report .rv-next { margin-top: 0; margin-bottom: 0.25rem; }
.demo-report .demo-cta.rv-visual { margin: 0.25rem 0 0.375rem; }
.demo-report > h2 { margin: 0 0 0.25rem; font-size: 1.125rem; }
.demo .demo-report .demo-exitrow { flex-direction: row; align-items: center; gap: 0.25rem 0.5rem; margin: 0 0 0.25rem; }
.demo .demo-report .demo-exitrow .demo-oneline { font-size: 0.75rem; flex: 1 1 12rem; }
.demo-report .rv-row { padding: 0.5rem 0.625rem; }
@media all { .demo-report .rv-row { padding: 0.625rem 0.625rem; } .demo-report .rv-gardenbox .demo-biggarden { min-height: 6.5rem; } }
@media all { .demo-report { padding: 0.5rem 0.5rem 0.375rem; } .demo .demo-report .demo-exitrow .demo-oneline { font-size: 0.6875rem; line-height: 1.2; } .demo-report .rv-row { padding: 0.75rem 0.625rem; } }

/* ---- v0.6 U3 (08/11/26): HUD garden, arrival, report inside the fixed 640x360 screen (one rem is 14px here, see html.console-page:root) ---- */
/* the HUD is ONE row: title left, the garden plots and the "n of N" chip centred, the Back link right (the strip used to be a second row that ate 30px of every screen) */
.console .demo-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 0.5rem; min-height: 1.75rem; }
.console .demo-top .demo-prog { flex: none; text-align: left; justify-self: start; min-width: 0; }
.console .demo-top .demo-garden { justify-self: center; flex-wrap: nowrap; align-items: center; gap: 0.4375rem; min-height: 0; padding: 0.4rem 0 0.3125rem; /* top room so the cheer hop is not clipped by the screen top */ }
.console .demo-top .demo-flower { width: 1.0625rem; height: 1.0625rem; }
.console .demo-top .demo-flower::after { height: 0.3125rem; }
.console .demo-top .demo-garden-count { margin-left: 0.125rem; padding: 0 0.5rem; font-size: 0.8125rem; }
.console .demo-top .demo-exit { white-space: nowrap; }
/* Q-w63f: the "A step up" / "An easier try" chip lives at the right edge beside Back, never in the label cell where it ran over the dots; 8px gap everywhere in the row */
.console .demo-top { column-gap: 8px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.demo-top-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; justify-self: end; white-space: nowrap; }
.console .demo-top .demo-prog-tag { margin-left: 0; padding: 0 0.5rem; font-size: 0.8125rem; line-height: 1.4; }

/* the arrival: Captain Lim and the Sprite drawn whole (never a sky with the heads cropped) on the left, their words on the right */
.console .demo-stage[data-phase="arrival"] .demo-body { display: grid; grid-template-columns: 21rem minmax(0, 1fr); column-gap: 0.75rem; align-items: center; }
.console .demo-stage[data-phase="arrival"] .demo-arrival-wrap { grid-column: 1; position: static; width: 100%; max-width: none; height: auto; aspect-ratio: 16 / 10; overflow: visible; border: 0; background: none; margin: 0; }
.console .demo-stage[data-phase="arrival"] .demo-arrival { position: static; display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; box-sizing: border-box; border: 3px solid #0b1710; border-radius: 0.75rem; }
.console .demo-stage[data-phase="arrival"] .demo-bubble { grid-column: 2; }

/* the report: two columns (the score, ring, level and garden left; the skill rows, next step and sign-up right), More detail full width below; it scrolls inside the screen */
.console .demo-stage[data-phase="report"] { justify-content: flex-start; }
.console .demo-report { display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.25rem; align-items: stretch; padding: 0.3125rem 0.625rem 0.375rem; }
.console .demo-report .rv-score > h2 { margin: 0; font-size: 1rem; line-height: 1.2; }
.console .demo-report > .demo-exitrow { grid-column: 1 / -1; grid-row: 1; margin: 0; flex-wrap: nowrap; }
.console .demo-report .demo-exitrow .demo-oneline { flex: 1 1 0; min-width: 0; line-height: 1.2; }
.console .demo-report > .rv-left { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.console .demo-report > .rv-right { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 0.3125rem; min-width: 0; }
.console .demo-report .rv-head { margin: 0; justify-content: space-between; }
.console .demo-report .rv-score { display: flex; flex-direction: column; gap: 0.25rem; }
.console .demo-report .rv-ring { width: 6rem; }
.console .demo-report .rv-ring b { font-size: 0.9375rem; }
.console .demo-report .rv-level { margin: 0; }
.console .demo-report .rv-level p, .console .demo-report .rv-level li { font-size: 0.8125rem; line-height: 1.3; margin: 0.125rem 0; }
.console .demo-report .rv-level ul { padding-left: 1rem; }
.console .demo-report .rv-gardenrow { margin: 0; }
.console .demo-report .rv-gardenrow .demo-biggarden { padding: 0.375rem 0.3125rem 0.25rem; min-height: 0; }
.console .demo-report .rv-gardenrow .demo-bigflower { height: 3.375rem; width: auto; flex: 0 1 auto; }
.console .demo-report .rv-strip { gap: 0.25rem; margin: 0; }
.console .demo-report .rv-row { padding: 0.1875rem 0.5rem; }
.console .demo-report .rv-icon { font-size: 1.0625rem; line-height: 1.2; width: 1.5rem; }
.console .demo-report .rv-chip { font-size: 0.8125rem; padding: 0.0625rem 0.5rem; line-height: 1.25; }
.console .demo-report .rv-name { font-size: 0.9375rem; }
.console .demo-report .rv-next { display: block; margin: 0; font-size: 0.9375rem; padding: 0.25rem 0.75rem; }
.console .demo-report .demo-cta.rv-visual { margin: 0; }
.console .demo-report .demo-exitrow .demo-oneline { font-size: 0.6875rem; }

/* the story picture (two labelled groups of tens rods): each group is its caption over its rods, the two groups side by side inside the 20rem question column, never wider than it */
.console .demo-story { flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; max-height: none; width: 100%; min-width: 0; gap: 0.25rem 0.875rem; }
.console .demo-story .demo-story-group { flex-direction: column; align-items: flex-start; gap: 0.125rem; min-width: 0; }
.console .demo-story .demo-story-name { white-space: nowrap; font-size: 0.875rem; }
.console .demo-story .demo-story-part { white-space: nowrap; font-size: 0.6875rem; }

/* break mini-game result: Best and the board (owner decision 7B, 07/11/26; break mini-games only, never a maths screen) */
.demo-best { margin: 0.5rem 0 0; font-size: 1.5rem; font-weight: 700; text-align: center; color: #ffe14d; }
.demo-boardwrap { margin: 0.5rem auto 0; max-width: 20rem; width: 100%; }
.demo-boardhead { margin: 0 0 0.25rem; font-size: 0.875rem; font-weight: 700; text-align: center; opacity: 0.85; }
.demo-board { list-style: none; margin: 0; padding: 0; }
.demo-board li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0.75rem; border-radius: 0.5rem; background: rgba(255, 255, 255, 0.12); font-size: 1.125rem; font-weight: 700; }
.demo-board li + li { margin-top: 0.25rem; }
.demo-board li { align-items: baseline; padding: 0.125rem 0.5rem; font-size: 0.8125rem; }
.demo-board li + li { margin-top: 0.125rem; }
.demo-boardrank { flex: 0 0 1.5em; opacity: 0.8; }
.demo-boardname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.demo-boardscore { flex: 0 0 2.5em; text-align: right; }
.demo-boarddate { flex: 0 0 5.5em; text-align: right; font-weight: 400; opacity: 0.85; }

/* the golden flower shines (owner 08/11/26): a glint sweeps across it and four sparkles twinkle, looping; reduced motion keeps a static glow */
.demo-bigflower.is-golden { filter: drop-shadow(0 0 5px #ffd84d) drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.demo-bigflower .demo-glint { animation: demo-glint 2.2s ease-in-out infinite; }
.demo-bigflower .demo-sparkle { transform-box: fill-box; transform-origin: 50% 50%; animation: demo-twinkle-gold 1.4s ease-in-out infinite; }
@keyframes demo-glint { 0% { transform: translateX(0) skewX(-20deg); } 55%, 100% { transform: translateX(78px) skewX(-20deg); } }
@keyframes demo-twinkle-gold { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.2); } }
.demo-flower.is-golden { position: relative; overflow: hidden; animation: demo-pip-glow 1.6s ease-in-out infinite; }
.demo-flower.is-golden::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .95), transparent); transform: skewX(-20deg); animation: demo-pip-glint 2.2s ease-in-out infinite; }
@keyframes demo-pip-glint { 0% { left: -60%; } 55%, 100% { left: 130%; } }
@keyframes demo-pip-glow { 0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 .5rem #ffd84d; } 50% { box-shadow: 0 0 0 2px #fff, 0 0 1.1rem #fff2a8; } }
@media (prefers-reduced-motion: reduce) {
  .demo-bigflower .demo-glint { animation: none; opacity: 0; }
  .demo-bigflower .demo-sparkle { animation: none; opacity: 1; transform: none; }
  .demo-flower.is-golden { animation: none; }
  .demo-flower.is-golden::after { animation: none; left: 20%; opacity: .6; }
}

/* ---- v0.6 U2 (08/11/26): the fixed 640x360 screen ---- */
/* inside the console one rem is a fixed 14px: the screen is laid out at a logical size and scaled as a unit, so the window must not move the type */
html.console-page:root { font-size: 14px; }
/* the Seed Catch result: the basket is a picture beside the Sprite, never the whole screen */
.console .demo-basket { width: auto; max-width: 100%; height: 7.5rem; align-self: center; flex: 0 0 auto; }

/* ---- v0.6 U2: question screens are two columns inside the 640x360 screen ----
   left: the Sprite's words, the question and its picture (about 300px); right: the answer widget (choices, number pad, coins, clock).
   The grid has no row gap (the answer spans the left rows), so spacing is a bottom margin on the left items. */
.console .demo-stage[data-phase="item"] .demo-body { display: grid; grid-template-columns: 20rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0; align-items: start; }
.console .demo-stage[data-phase="item"] .demo-body > * { grid-column: 1; margin-bottom: 0.375rem; min-width: 0; }
.console .demo-stage[data-phase="item"] .demo-body > .demo-answer { grid-column: 2; grid-row: 1 / span 3; margin-bottom: 0; }
.console .demo-stage[data-phase="item"] .demo-scene[data-size="small"] { max-width: 9rem; }
/* v0.6 U2 fit pass: the answer column is its natural height (never stretched by the left column), the spare height goes to the last empty row, and the keys are sized to fit a 360px screen at true scale */
.console .demo-stage[data-phase="item"] .demo-body { grid-template-rows: repeat(5, auto) 1fr; }
.console .demo-stage[data-phase="item"] .demo-body > .demo-answer { grid-row: 1 / span 6; align-self: start; }
.console .demo-stage[data-phase="item"] .demo-answer .arcade-key { min-height: 0; height: 2.4rem; padding: 0 .3rem; }
.console .demo-stage[data-phase="item"] .demo-answer .arcade-display { min-height: 0; padding: .15rem .6rem; font-size: 1.3rem; }
.console .demo-stage[data-phase="item"] .demo-answer .arcade-widget { gap: .3rem; padding: .3rem; }
.console .demo-stage[data-phase="item"] .demo-answer:has(.arcade-key-symbol) .arcade-key { height: 2.1rem; }
/* v0.6 U2 fit pass 2: the stage itself is the two-column grid (the scene canvas is a sibling of .demo-body, so the body dissolves into it) */
.console .demo-stage[data-phase="item"] { display: grid; grid-template-columns: 20rem minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 1rem; row-gap: 0; align-items: start; align-content: start; }
.console .demo-stage[data-phase="item"] .demo-body { display: contents; }
.console .demo-stage[data-phase="item"] > .demo-scene { grid-column: 1; margin-bottom: 0.375rem; }
.console .demo-stage[data-phase="item"] .demo-body > .demo-answer { grid-row: 1 / span 7; }
/* v0.6 U2 fit pass 3: a 4-choice item (long prompt, ratio picture) was 4 percent too tall at true scale; the choices keep a 36px floor, a long choice still wraps and grows */
.console .demo-stage[data-phase="item"] .demo-answer .arcade-choice { min-height: 2.6rem; padding-top: .2rem; padding-bottom: .2rem; }
/* v0.6 U2 fit pass 4: the sum-story picture (names, rods) sits in the left column, left aligned, so a caption never overhangs the screen edge */
.console .demo-stage[data-phase="item"] .demo-body > .demo-story { grid-column: 1; grid-row: auto; width: 100%; min-width: 0; max-width: 100%; align-items: flex-start; justify-content: flex-start; }
.console .demo-stage[data-phase="item"] .demo-body > .demo-story .demo-story-group { align-items: flex-start; }

/* ---- 08/11/26 owner feedback on the report: no scroll bar on any page, plain labels, a 16px gap either side of the handheld (doubled from 8px, owner 09/11/26) ---- */
/* the shell keeps 16px clear of the window edge on every side: console.js sizes the screen from --pm (28px here = the 12px real padding
   plus the 16px edge gap, the ONE token to change; it is a literal because getComputedStyle does not resolve calc() in a custom property),
   while the real padding stays 12px, so the 16px is left over as a gap beside the centred shell */
html.console-page body .console.console { --pm: 28px; padding: 12px; width: calc(var(--sw) + 2 * var(--side) + 2 * var(--gap) + 24px); height: calc(var(--sh) + 24px); }
/* nothing of ours scrolls: the report is sized to fit the screen, and "More detail" is whole pages turned with Left and Right */
html.console-page .console .console__fit.is-scroll { overflow: hidden; scrollbar-width: none; }
.console .demo-report { padding: 0.125rem 0.5rem 0.125rem; row-gap: 0.125rem; }
.console .demo-report > .demo-exitrow { gap: 0.375rem; align-items: center; }
.console .demo-report .demo-exitrow .demo-oneline { font-size: 0.6875rem; padding: 0.125rem 0.375rem; }
.console .demo-report > .rv-left { gap: 0.1875rem; }
.console .demo-report > .rv-right { gap: 0.1875rem; }
.console .demo-report .rv-head { align-items: center; }
.console .demo-report .rv-score > h2 { font-size: 0.875rem; }
.console .demo-report .rv-big { font-size: 1.75rem; line-height: 1.1; }
.console .demo-report .rv-ring { width: 4.25rem; flex: none; }
.console .demo-report .rv-ring b { font-size: 0.75rem; }
.console .demo-report .rv-level p, .console .demo-report .rv-level li { font-size: 0.6875rem; line-height: 1.2; margin: 0; }
.console .demo-report .rv-level ul { margin: 0.125rem 0; padding-left: 0.875rem; }
.console .demo-report .rv-note { color: #3a2f8a; }
.console .demo-report .rv-gardenrow .demo-bigflower { height: 2.25rem; }
.console .demo-report .rv-gardenrow .demo-biggarden { padding: 0.25rem 0.25rem 0.125rem; }
.console .demo-report .rv-strip { gap: 0.1875rem; }
.console .demo-report .rv-row { padding: 0.0625rem 0.375rem; min-height: 0; }
.console .demo-report .rv-icon { font-size: 0.9375rem; width: 1.25rem; }
.console .demo-report .rv-name { font-size: 0.8125rem; }
.console .demo-report .rv-chip { font-size: 0.75rem; padding: 0 0.4375rem; }
.console .demo-report .rv-next { font-size: 0.8125rem; padding: 0.125rem 0.625rem; border-width: 2px; }
.console .demo-report .demo-cta.rv-visual { padding: 0.25rem 0.625rem; }

/* round 2 jony (09/11/26). The chip marks are one family, full, half, empty: \2713 right first time, \25D0 got there (after an
   easier step or help), \25CB not yet. The card fills the screen under the HUD, the skill rows share the height, the garden
   sits at the foot of the left column, and the key hint is a quiet line at the foot of the card that lights up only when armed. */
.console .demo-stage[data-phase="report"] { flex: 1 1 auto; min-height: 0; }
.console .demo-stage[data-phase="report"] > .demo-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.console .demo-stage[data-phase="report"] .demo-report { flex: 1 1 auto; min-height: 0; box-sizing: border-box; grid-template-rows: minmax(0, 1fr) auto; }
.console .demo-report > .rv-left, .console .demo-report > .rv-right { grid-row: 1; }
.console .demo-report > .demo-exitrow { grid-row: 2; display: flex; justify-content: flex-end; margin: 0; }
.console .demo-report .demo-exitrow .demo-key { flex: 0 1 auto; background: none; border: 0; color: #5d6b61; font-weight: 400; font-size: 0.6875rem; line-height: 1.2; padding: 0; }
.console .demo-report .demo-exitrow .demo-key.is-armed { background: #ffe14d; color: #1a1400; font-weight: 700; border-radius: 0.375rem; padding: 0.0625rem 0.5rem; }
.console .demo-report .rv-strip { flex: 1 1 auto; }
.console .demo-report .rv-row { flex: 1 1 0; }
.console .demo-report .rv-row .rv-chip { margin-left: auto; }
.console .demo-report .rv-gardenrow { flex: 0 0 auto; min-height: 0; display: flex; }
.console .demo-report .rv-gardenrow .demo-biggarden { flex: 1 1 auto; align-items: flex-end; padding-top: 0.625rem; }
/* round 3: the garden panel no longer grows into a tall empty sky; the left column shares its slack evenly between its blocks */
.console .demo-report > .rv-left { justify-content: space-between; }
.console .demo-report .rv-gardenrow .demo-bigflower { height: 2.75rem; }
.console .demo-report .rv-big { font-size: 2rem; }
.console .demo-report .rv-ring { width: 5rem; }
.console .demo-report .rv-ring b { font-size: 0.875rem; }
.console .demo-report .rv-note { font-size: 0.75rem; line-height: 1.25; margin: 0.125rem 0 0; }

/* round 4 no-scroll pass (owner 09/11/26, "no scroll bars in any of our pages"): feedback, explain and score fit the 640x360 screen at full size, so the console fit never has to shrink them */
.console .demo-stage[data-phase="feedback"] { min-height: 0; }
.console .demo-stage[data-phase="feedback"] > .demo-body { flex: 1 1 auto; min-height: 0; }
.console .demo-stage[data-phase="feedback"] .demo-growgarden { flex: 1 1 auto; min-height: 0; padding-top: 0.5rem; }
.console .demo-stage[data-phase="explain"]:has(> .demo-scene:not([hidden])) { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: repeat(7, auto) 1fr; column-gap: 0.75rem; row-gap: 0; align-items: start; align-content: start; }
.console .demo-stage[data-phase="explain"]:has(> .demo-scene:not([hidden])) > .demo-body { display: contents; }
.console .demo-stage[data-phase="explain"]:has(> .demo-scene:not([hidden])) > .demo-scene { grid-column: 1; grid-row: 2 / -1; align-self: start; width: 12rem; max-width: 12rem; margin: 0; }
.console .demo-stage[data-phase="explain"]:has(> .demo-scene:not([hidden])) > .demo-body > * { grid-column: 2; margin: 0 0 0.375rem; min-width: 0; }
.console .demo-stage[data-phase="explain"]:has(> .demo-scene:not([hidden])) > .demo-body > .demo-biggarden { grid-column: 1 / -1; grid-row: 1; }
.console .demo-score .demo-bigflower { max-width: 4.5rem; }
/* a missed question keeps its picture on screen: the picture takes a left column and the words the right, so the screen never stacks past 360 */
.console .demo-stage:is([data-phase="feedback"], [data-phase="explain"]) > .demo-body:has(> .demo-pic) { display: grid; grid-template-columns: 13rem minmax(0, 1fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 0.75rem; row-gap: 0; align-items: start; align-content: start; }
.console .demo-stage:is([data-phase="feedback"], [data-phase="explain"]) > .demo-body:has(> .demo-pic) > * { grid-column: 2; margin: 0 0 0.375rem; min-width: 0; }
.console .demo-stage:is([data-phase="feedback"], [data-phase="explain"]) > .demo-body:has(> .demo-pic) > .demo-pic { grid-column: 1; grid-row: 1 / -1; width: 100%; max-width: 100%; margin: 0; }

/* round 5 (09/11/26, R1 "no dead space"): the left column's blocks sit with even 0.5rem gaps instead of sharing the slack as uneven
   empty bands; the ring and the Next and Book pills take most of the room back, the garden takes the small remainder (flowers on the grass, a modest sky) */
.console .demo-report > .rv-left { justify-content: flex-start; gap: 0.5rem; }
.console .demo-report .rv-ring { width: 5.5rem; }
.console .demo-report .rv-ring b { font-size: 0.9375rem; }
.console .demo-report .rv-next { padding: 0.4375rem 0.75rem; }
.console .demo-report .demo-cta.rv-visual { padding: 1.125rem 0.75rem; }
.console .demo-report .rv-gardenrow { flex: 1 1 auto; }
/* 09/11/26 reportcard: nine plots (the golden bonus flower is the ninth) must fit the 17.5rem left column; the flowers shrink with the strip, never push past it */
.console .demo-report .rv-gardenrow, .console .demo-report .rv-gardenrow .demo-biggarden { min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.console .demo-report .rv-gardenrow .demo-bigflower { flex: 1 1 0; min-width: 0; width: auto; max-width: 2.25rem; }

/* seedcatch 09/11/26 (orion_jony): the mini-game result is two columns, not one narrow centre strip. Left: the score card, the Sprite line with the A key, Best. Right: the top 10, as wide as its column. Shared by every mini-game (the basket card only shows for Seed Catch; the rest of the column simply starts higher). */
.demo-body:has(> [data-result]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: auto auto auto 1fr; column-gap: 16px; row-gap: 8px; align-content: center; align-items: start; }
.demo-body:has(> [data-result]) > * { grid-column: 1; margin: 0; min-width: 0; }
.demo-body:has(> [data-result]) > .demo-boardslot { grid-column: 2; grid-row: 1 / -1; align-self: center; }
.demo-body:has(> [data-result]) .demo-boardwrap { max-width: none; margin: 0; }
.demo-body:has(> [data-result]) .demo-boardhead { font-size: 1rem; margin-bottom: 0.375rem; opacity: 1; }
.demo-body:has(> [data-result]) .demo-board li { font-size: 1rem; padding: 0.25rem 0.75rem; }
.demo-body:has(> [data-result]) .demo-board li + li { margin-top: 0.1875rem; }
.demo-body:has(> [data-result]) .demo-boarddate { flex-basis: 6em; }
.demo-body:has(> [data-result]) .demo-best { font-size: 1.75rem; text-align: left; }
.demo-body:has(> [data-result]) > [data-result] { flex-wrap: wrap; }
.demo-body:has(> [data-result]) > [data-result] .demo-key { flex: 1 1 100%; margin-top: 0.25rem; }
.demo-body:has(> [data-result]) .demo-basket { height: 8.5rem; align-self: start; justify-self: start; }

/* 09/11/26 (owner): per-question countdown. Text beside the question number, a slim bar along the foot of the HUD row; calm colour, warning colour in the last 25 percent (js/demo/item-clock.js WARN_SHARE) */
.demo-top { position: relative; }
.demo-qtime { font-weight: 700; font-size: 0.8125rem; color: #fff; }
.demo-qtime.is-warn { color: #ffd0a8; }
.demo-qtime[hidden], .demo-qbar[hidden] { display: none; }
.demo-qtime-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.demo-qbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .25); border-radius: 2px; overflow: hidden; }
.demo-qbar i { display: block; height: 100%; width: 100%; background: #9be3a8; }
.demo-qbar.is-warn i { background: #ff9d4d; }

/* fullscreen break (owner 09/11/26): during the Seed Catch break the field takes the whole console screen (the shell is the 480x360 box of css/console.css),
   the Sprite words and the demo header step behind it; the seed counter sits in the footer row of the shell. The intro card already told the rules. */
.console__content .demo-break { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: auto; padding: 0; border-radius: 0; background: #0b1710; }

/* the reward break's one framing line (engine.js REWARD_LINE), pinned in the empty band under the game's HUD, fades after the intro so it never covers play */
.console__content .demo-break .demo-rewardline { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); z-index: 25; margin: 0; max-width: 92%; padding: 0.25rem 0.625rem; border-radius: 0.75rem; background: #f3f7ee; color: #14261c; font-size: 0.8125rem; font-weight: 700; text-align: center; pointer-events: none; animation: demo-rewardline-fade 0.6s ease 6s forwards; }
@keyframes demo-rewardline-fade { to { opacity: 0; } }