/* --top: the header, once a track plays; --strip: the words won, from the games until writing;
   --tray: the tray's height, set from the page as it changes */
:root { --top: 0px; --strip: 0px; --tray: 0px; }
/* --u: 1px up to a 2560 × 1440 window; past it, grows with the window, so a bigger screen shows that layout
   scaled up (UNIT in main.js is the same) */
:root { --u: max(1px, min(100vw / 2560, 100vh / 1440)); }
:root { --mute-w: calc(34 * var(--u)); }  /* the on button's width, and the gutter left of the lines that matches it */
body.with-header { --top: calc(45 * var(--u)); }
body.with-strip { --strip: calc(58 * var(--u)); }
body { font: calc(16 * var(--u)) var(--hand); margin: 16px; }
/* the game's font, Times condensed, everywhere but the on buttons and − / + (Arial) */
/*@font-face { font-family: "Just Another Hand"; src: url(../fonts/JustAnotherHand-Regular.ttf) format("truetype"); font-display: block;
             size-adjust: 140%; }  /* it runs small: bigger letters in the same boxes */
@font-face { font-family: "Times New Roman Condensed"; font-display: block;
             src: url(../fonts/times-new-roman-mt-condensed-opentype-1_ufonts.com.woff2) format("woff2"),
                  url(../fonts/times-new-roman-mt-condensed-opentype-1_ufonts.com.woff) format("woff"); }
@font-face { font-family: "Times New Roman Condensed"; font-weight: bold; font-display: block;
             src: url(../fonts/times-new-roman-mt-bold-condensed-opentype-1_ufonts.com.woff2) format("woff2"),
                  url(../fonts/times-new-roman-mt-bold-condensed-opentype-1_ufonts.com.woff) format("woff"); }
:root { --hand: /*"Just Another Hand", */"Times New Roman Condensed", "Times New Roman", Times, serif; }
html { overscroll-behavior: none; }  /* no rubber-banding of a page that doesn't scroll (iOS) */
* { touch-action: manipulation; }  /* no double-tap zoom (pinch still zooms); .handle sets its own */
/* nothing selects, so quick taps (iOS) don't highlight text; no callout on a long press either */
html { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* the story's screens: text and button centred on the page, the text shown a line at a time */
#screen { position: fixed; inset: var(--top) 0 var(--strip) 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; padding: 1em; text-align: center; }
#screen-text { max-width: 32em; }
#screen-text:empty { display: none; }
/* a page's images: in the text, a row up to 40% of the screen high, half a line above and below; a page that's one image, up to 60% */
#screen-text img { display: block; margin: .5lh auto; max-width: 100%; max-height: 40svh; }
#screen-text.whole { max-width: 100%; }
#screen-text.click { cursor: pointer; }  /* no button: the image moves on */
#screen-text.whole img { max-height: 60svh; margin: 0 auto; }
#screen-go[hidden] { display: none; }
#screen-text .new { animation: line-in .4s ease-out backwards; }  /* backwards: hidden while it waits its turn (LINE_GAP) */
@keyframes line-in { from { opacity: 0; } }
#screen.dark { background: black; color: #ccc; }  /* a page: dark */
/* the button reads as the story's text, underlined to show it can be clicked; so do retry and next task */
#screen-go, #mg-buttons button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
#screen-go:disabled { text-decoration: none; cursor: default; }
#screen[hidden], #game[hidden] { display: none; }

/* when writing, always on top: at the left play / pause; in the middle the tracks unlocked, each a toggle
   looking like a word in grey; at the right submit */
#ui-header { position: fixed; top: 0; left: 0; right: 0; height: var(--top); z-index: 12; box-sizing: border-box; background: white;
          padding: 0 calc(16 * var(--u)); display: flex; justify-content: space-between; align-items: center; }
#ui-header[hidden] { display: none; }
/* centred whatever is either side */
#toggles { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: calc(2 * var(--u)); }
#play[hidden] { display: none; }
/* the bars' colours change as a dark page comes and goes, as long as the tray takes to grow (MORPH_MS) */
#ui-header, #strip, .toggle, .chip, #play, #submit { transition: background-color .9s, color .9s, border-color .9s, -webkit-text-stroke-color .9s; }
.toggle { box-sizing: border-box; height: 2em; line-height: calc(2em - 2px); padding: 0 .5em; border: 1px solid black; border-radius: 0;
          background: lightgray; color: black; font: 1em var(--hand); white-space: nowrap; cursor: pointer; user-select: none; }
.toggle[aria-pressed="false"] { opacity: .4; }  /* off */

/* the lines centred between the header and the tray, scrolling only if they don't fit (the auto margins
   centre them without cutting off the top when they overflow) */
#game { position: fixed; inset: 0; box-sizing: border-box; padding: calc(var(--top) + 16 * var(--u)) calc(8 * var(--u)) calc(var(--tray) + 16 * var(--u));
        overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; }
#game::before, #game::after { content: ''; margin: auto; }
/* when they scroll, the lines fade out under the header and over the tray, as the tray's words do (.scrolled,
   .more: fades() in main.js); fixed to the screen, over the lines, under the tray */
#lines::before, #lines::after { content: ''; position: fixed; z-index: 4; left: 0; right: 0; height: calc(32 * var(--u)); pointer-events: none;
                                opacity: 0; transition: opacity .2s; }
#lines::before { top: var(--top); background: linear-gradient(var(--page-bg, white), transparent); }
#lines::after { bottom: var(--tray); background: linear-gradient(transparent, var(--page-bg, white)); }
#game.scrolled #lines::before, #game.more #lines::after { opacity: 1; }
@media (max-width: 640px) { #lines::before, #lines::after { height: 24px; } }
#status { margin-bottom: 1em; }
#status:empty { display: none; }
#submit { margin-left: calc(12 * var(--u)); white-space: nowrap; }
@media (max-width: 640px) {
  /* smaller toggles, left after play / pause rather than centred, so they fit before submit */
  .toggle { font-size: 12px; height: 26px; line-height: 24px; padding: 0 4px; }
  #toggles { position: static; transform: none; margin: 0 auto 0 10px; }  /* the room left goes after them */
}
/* plain bold text: play / pause, submit, and the − / + under the lines that removes or adds one */
#play { width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none; }  /* a play or pause icon, never squeezed by the toggles */
#play svg { display: block; width: 100%; height: 100%; }
#play, #submit, #more, #fewer { background: none; border: 0; padding: 0; font: bold 1em var(--hand); color: black; cursor: pointer; }
#more, #fewer { font-family: Arial, sans-serif; }
/* − and + together at the right, + under the on buttons; each keeps its place when hidden, so + never moves */
#more-lines { display: flex; justify-content: flex-end; align-items: center; gap: calc(4 * var(--u)); margin-top: calc(8 * var(--u)); }
#more, #fewer { font-size: calc(20 * var(--u)); }
#fewer { width: calc(20 * var(--u)); text-align: center; }
#more { width: var(--mute-w); text-align: left; }   /* on's width, starting where its text does */
#more[hidden], #fewer[hidden] { display: block; visibility: hidden; }
#submit[hidden], #more-lines[hidden] { display: none; }
/* a nudge under the lines, now and then (startNudges() in main.js); its room kept, so nothing moves as it comes and goes */
#nudge { flex: none; height: 1.4em; margin-top: calc(16 * var(--u)); font: calc(28 * var(--u))/1.4 var(--hand); text-align: center;
         white-space: nowrap; opacity: 0; transition: opacity .5s; pointer-events: none; }
#nudge.on { opacity: 1; }
body:not(.writing) #nudge { display: none; }
@media (max-width: 640px) { #nudge { font-size: 18px; margin-top: 8px; } }
/* phones: the lines' on / off as a row of squares at the left, one per line, with − / + just after them, so they
   move right as lines are added; − takes no room while it's hidden */
#active { display: none; }
@media (max-width: 640px) {
  /* the squares, − and + evenly spaced, about 6px apart: less the glyphs' own side space, which is wider left of + */
  #more-lines { justify-content: flex-start; gap: 5px; }
  #fewer { width: auto; }
  #more { margin-left: -4px; }
  #fewer[hidden] { display: none; }
  #active:not([hidden]) { display: flex; align-items: center; padding: 2px 0 4px 0;
                          font: 10px Arial, sans-serif;}
  #active-boxes { display: flex; gap: 6px; }
  /* on: filled with the ink; off: faded as its line is */
  #active-boxes button { width: 12px; height: 12px; padding: 0; border: 1px solid var(--ink, black); border-radius: 0; background: var(--ink, black); cursor: pointer; }
  #active-boxes button[aria-pressed="false"] { opacity: .3; }
  #active-boxes button[hidden] { display: none; }
}
@media (max-width: 640px) { #submit { font-size: 14px; margin-left: 8px; } }  /* after five toggles, it just fits at 390px */

/* phones: the word being said, above the lines, as big as submit's; its height kept when there's none */
#now-word { display: none; }
@media (max-width: 640px) {
  /* at the top, with #game's 16px padding over it; the lines and − / + centred in the space left under it (its
     margin and ::after's share it), rising until they meet its 8px + #lines' 8px padding, then running on below */
  #now-word { display: block; font: clamp(22px, 4vw, 40px)/1.4 var(--hand); flex: none; height: 1.4em; padding-bottom: 8px; margin-bottom: auto; text-align: center; white-space: nowrap; } /* flex: none, or when the lines overflow it shrinks away while empty, and pushes them down as a word shows */
  #game::before { margin: 0; }
  #game::after { margin: auto 0 0; }
}
#lines { position: relative; padding: calc(8 * var(--u)) 0; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
/* a line's row: the line, then its on button, standing on the line; the gutter on the left (as wide as
   on) keeps the lines centred. The handles (.handle) are switched off in buildLines(). */
.row { display: flex; gap: calc(8 * var(--u)); align-items: flex-end; padding-left: calc(var(--mute-w) + 8 * var(--u)); }
.row[hidden] { display: none; }
.row .line { flex: 1; min-width: 0; }
.handle { flex: none; width: 1em; text-align: center; font: 20px var(--hand); cursor: grab;
          user-select: none; -webkit-user-select: none; touch-action: none; }
.row.moving { opacity: .4; }
#row-marker { position: absolute; left: 0; right: 0; height: 2px; background: var(--ink, black); display: none; pointer-events: none; }
/* on: small uppercase, greyed out (faded as its line is) while the line's off */
.line-on { flex: none; width: var(--mute-w); padding: 0; border: 0; background: none; color: inherit; font: calc(12 * var(--u)) Arial, sans-serif; text-transform: uppercase; text-align: left; cursor: pointer;
           line-height: 1; position: relative; top: 1px; }  /* its letters' foot on the line's bottom edge, not its box's */
.line-on[aria-pressed="false"] { opacity: .3; }
.line.off { opacity: .3; }
/* phones: no on buttons (#active has them) and no gutter, the lines 2px from the screen's edges (the line
   drawn 3px past the words' room) */
@media (max-width: 640px) {
  #game { padding-left: 5px; padding-right: 5px; }
  .row { padding-left: 0; }
  .line-on { display: none; }
  #more { width: 20px; text-align: center; }
}
/* a line in a notebook, with ticks standing on it: grey for the 8 beats, black and wider at both ends
   and the bar line after 4. The line reaches 3px past the words' room at each end, and words sit 2px
   above it. The beat ticks are placed in the words' room, 3px in. */
.line {
  position: relative; display: flex; height: 2em; margin: 0 -3px; padding: 0 3px 2px; border-bottom: calc(2 * var(--u)) solid var(--ink, black);
  background:
    linear-gradient(var(--ink, black), var(--ink, black)) left bottom / 2px calc(6 * var(--u)) no-repeat,
    linear-gradient(var(--ink, black), var(--ink, black)) right bottom / 2px calc(6 * var(--u)) no-repeat,
    linear-gradient(var(--ink, black), var(--ink, black)) calc(3px + var(--beat) * 4px - 1px) bottom / 2px calc(6 * var(--u)) no-repeat,
    repeating-linear-gradient(to right, transparent 0 calc(var(--beat) * 1px - 1px), #888 calc(var(--beat) * 1px - 1px) calc(var(--beat) * 1px))
      3px bottom / calc(var(--beat) * 7px) calc(6 * var(--u)) no-repeat;  /* the first 7 beats: the 8th is the end's */
}
/* a word in a line takes up its duration, its block 2px narrower, so there's 2px between words */
.line .word { width: calc(var(--d) * var(--pps) * 1px - 2px); margin: 0 1px; border: 0; line-height: 2em; }  /* no border in a line */
.marker { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--ink, black); display: none; pointer-events: none; }
.playhead { position: absolute; z-index: 1; top: 0; bottom: 0; width: 1px; background: red; display: none; pointer-events: none; }  /* over the words, which their rotate lifts into the same layer */

/* the tray, fixed to the bottom: every word in one panel, scrolling up and down when they don't fit */
#palette { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; box-sizing: border-box;
           max-height: 66svh; background: white; border-top: 1px solid black; overflow-y: auto; overscroll-behavior: contain; }
/* fades over the tray's bottom and top, about a word high, while there's more to scroll to that way (.more,
   .scrolled: fades() in main.js) */
#palette::before, #palette::after { content: ''; position: sticky; display: block; height: calc(32 * var(--u)); pointer-events: none; opacity: 0; transition: opacity .2s; }
#palette::before { top: 0; margin-bottom: calc(-32 * var(--u)); z-index: 1; background: linear-gradient(var(--tray-bg, white), transparent); }
#palette::after { bottom: 0; margin-top: calc(-32 * var(--u)); background: linear-gradient(transparent, var(--tray-bg, white)); }
#palette.scrolled::before, #palette.more::after { opacity: 1; }
@media (max-width: 640px) {
  #palette::before { height: 24px; margin-bottom: -24px; }
  #palette::after { height: 24px; margin-top: -24px; }
}
.tray-words { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(4 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); }

.word {
  box-sizing: border-box; flex: none; height: 2em; line-height: calc(2em - 2px);
  width: calc(var(--d) * var(--pps) * 1px);
  border: 1px solid black; padding: 0 1px; background: white; overflow: hidden; white-space: nowrap; text-align: center;
  font-family: var(--hand);
  cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  rotate: var(--tilt, 0deg);  /* set per word by tilt() */
}
/* a word's text leans apart from its box, in the tray, the lines and the strip */
.word > span, .chip > span, #show-lines span { display: inline-block; rotate: var(--text-tilt, 0deg); }
/* dragged by a finger: the word stays behind, faded, and a copy follows the finger */
.word.lifted { opacity: .3; }
.word.dragged { z-index: 13; box-shadow: 0 4px 8px rgb(0 0 0 / .3); }

/* in the tray a word is at least as wide as its text, so it can be read; in the lines it's its duration */
#palette .word, .word.dragged, .word.peek { min-width: max-content; padding: 0 .25em; }
/* a word in a line too short for it is squeezed across from its left edge, where text too wide for its box starts;
   the peek shows it (markCut() in main.js) */
.line .word.cut > span { transform-origin: left; }
/* narrow screens: smaller text in the tray, where words are narrow, the box keeping its height; and the
   tray no more than 40% of the screen */
@media (max-width: 640px) {
  #palette { max-height: 40svh; }
  #palette .word, .word.dragged, .word.peek, .line .word { font-size: 12px; height: 24px; line-height: 22px; }  /* the lines' as the tray's */
  .line .word { line-height: 24px; }  /* no border */
  .line { height: 24px; }  /* as high as its words, so they stand on it */
  /* thin grey ticks at the very ends, not thick black ones, and the words' room 2px wider each side (1px in, not
     3px); the beat ticks between are the first 7 beats' */
  .line {
    padding: 0 1px 2px;
    background:
      linear-gradient(#888, #888) left bottom / 1px 6px no-repeat,
      linear-gradient(#888, #888) right bottom / 1px 6px no-repeat,
      linear-gradient(var(--ink, black), var(--ink, black)) calc(1px + var(--beat) * 4px - 1px) bottom / 2px 6px no-repeat,
      repeating-linear-gradient(to right, transparent 0 calc(var(--beat) * 1px - 1px), #888 calc(var(--beat) * 1px - 1px) calc(var(--beat) * 1px))
        1px bottom / calc(var(--beat) * 7px) 6px no-repeat;
  }
  #lines { gap: 10px; }  /* the lines as far apart as before the words were shortened */
}
/* phones on their side: the phone's small words (their blocks 2em, so 24px high, as the lines are), and the
   tray no more than 40% of the screen, as on phones */
@media (orientation: landscape) and (max-height: 500px) {
  #palette { max-height: 40svh; }
  #palette .word, .word.dragged, .word.peek, .line { font-size: 12px; }
}


/* words won in the games pop into the tray one after another (delay set per word) */
.word.entering { animation: enter 0.35s ease-out backwards; }
@keyframes enter { from { opacity: 0; transform: scale(0.6); } }

/* the games cover the page between the header and the words strip; over the header, so the timer bar can be
   (words and points flying are later in the page, so over them) */
#minigame { position: fixed; top: var(--top); bottom: var(--strip); left: 0; right: 0; z-index: 13; display: flex; flex-direction: column; }
/* behind the games and the strip: the photos being played, blurred and paled (setBackdrop in main.js); the page
   underneath is hidden by its white. Its layers overhang the screen by more than the blur, so their edges don't fade in */
#mg-backdrop { position: fixed; top: var(--top); bottom: 0; left: 0; right: 0; z-index: 11; overflow: hidden; background: white; pointer-events: none; }
#minigame[hidden] + #mg-backdrop { display: none; }
#mg-backdrop::after { content: ''; position: absolute; inset: 0; background: rgb(255 255 255 / .4); }  /* how pale */
#mg-backdrop > div { position: absolute; inset: -120px; display: flex; flex-wrap: wrap; filter: blur(40px); animation: backdrop-in .6s backwards; }
#mg-backdrop > div > div { flex: 1 0 calc(100% / var(--cols) - 1px); height: calc(100% / var(--rows)); background: center / cover no-repeat; }
@keyframes backdrop-in { from { opacity: 0; } }
#mg-backdrop > div { display: none; }  /* the photos hidden, leaving plain white: delete this line to bring them back */
#minigame:not([hidden]) ~ #strip { background: transparent; }
#minigame[hidden], #mg-card[hidden], #mg-retry[hidden] { display: none; }
body:has(#minigame:not([hidden])), body:has(#show:not([hidden])) { overflow: hidden; }  /* the page underneath doesn't scroll */
#mg-body { position: relative; flex: 1; overflow: hidden; }
#mg-card { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; padding: 1em; text-align: center; }
#mg-card p { margin: 0; font-family: var(--hand); max-width: 32em; white-space: pre-line; }
#mg-buttons { display: flex; gap: 1.5em; }

/* the words won in the games, newest on the right, the oldest pushed off the left */
#strip { position: fixed; left: 0; right: 0; bottom: 0; height: var(--strip); z-index: 12; box-sizing: border-box; background: white;
         padding: 0 calc(16 * var(--u)); display: flex; justify-content: flex-end; align-items: center; gap: calc(4 * var(--u)); overflow: hidden; }
#strip[hidden] { display: none; }
/* a word won is bold text in one of its photo's strip colours (--hue, set by chip()); it becomes a block in the tray */
.chip { flex: none; box-sizing: border-box; height: 2em; line-height: calc(2em - 2px); padding: 0 8px; border: 1px solid transparent; background: none;
        color: var(--hue, black); white-space: nowrap; font: bold calc(20 * var(--u)) var(--hand); }
/* on a dark page (where the header hides) the strip inverts, and the words won go grey */
body.dark #strip { background: black; border-color: #ccc; color: #ccc; }
body.dark .chip, .chip.grey, body.writing .chip.grey[data-bin] { background: transparent; border-color: transparent; color: #777; }
/* writing (the cutup, and submit) is light grey (#ccc) on black: --ink is the lines' and the marker's colour */
body.writing { --ink: #ccc; --page-bg: black; background: black; color: #ccc; }
body.writing #ui-header { background: black; border-bottom: 1px solid #ccc; color: #ccc; }
body.writing #play, body.writing #submit, body.writing #more, body.writing #fewer { color: #ccc; }
body.writing .toggle { background: #444; border-color: #ccc; color: #ccc; }
body.writing .word, body.writing .chip { background: black; border-color: black; color: #ccc; }
body.writing .chip { font-weight: normal; }  /* flying from the strip into the tray, a block like the tray's words */
/* a word's colour by its bin, from config/word-colours.yaml (loadWordColours() sets the --bin-s); these are its
   original scheme, for when it can't be read. Black text on them */
body.writing :is(.word, .chip)[data-bin="noun"] { background: var(--bin-noun, #bf5c5c); color: black; }
body.writing :is(.word, .chip)[data-bin="verb"] { background: var(--bin-verb, #57a16b); color: black; }
body.writing :is(.word, .chip):is([data-bin="adjective"], [data-bin="describer"]) { background: var(--bin-adjective, #5f89bf); color: black; }
body.writing :is(.word, .chip)[data-bin="yeah"] { background: var(--bin-yeah, #bfa238); color: black; }
body.writing :is(.word, .chip)[data-bin="glue"] { background: var(--bin-glue, #737373); color: black; }
body.writing :is(.word, .chip)[data-bin="pronoun"] { background: var(--bin-pronoun, var(--bin-glue, #737373)); color: black; }
body.writing .word[data-bin="rest"] { background: var(--bin-pause, #bfbfbf); color: black; }
/* a word under the mouse lights up, whatever its colour (not on touch, where hover sticks after a tap) */
@media (hover: hover) { body.writing .word:hover { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, .3); } }
body.writing #palette { --tray-bg: black; background: black; border-color: #ccc; }
body.writing #show { background: black; }
body.writing #show-lines span { color: #555; }
body.writing #show-lines span.said { color: #ccc; }
/* leaving a dark page, the page fades from black; under the header, over everything else */
.cover { position: fixed; inset: 0; z-index: 11; background: black; pointer-events: none; }
/* a word on its way to the strip, or a point bursting from a click */
.flying { position: fixed; z-index: 13; margin: 0; pointer-events: none; }
/* a word won flies as outlined text cycling through the flash colours (flashAnimation() in main.js), and gets its
   block when it lands; it's scaled by its font size, so its padding is in em and its outline stays 6px */
.chip.bare { padding: 0 .5em; font-weight: normal; background: none; border-color: transparent; color: transparent; -webkit-text-stroke-width: calc(6 * var(--u)); }
/* each +1: bare text with a black outline, green unless config/colours.json says otherwise */
.point { font: calc(20 * var(--u)) var(--hand); color: #00ff00; -webkit-text-stroke: calc(4 * var(--u)) black; paint-order: stroke fill; white-space: nowrap; }


/* submit: the lines on their own, centred, lit word by word as they play */
#show { position: fixed; inset: var(--top) 0 0 0; z-index: 11; background: white; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 2em; padding: 1em; text-align: center; overflow-y: auto; }
#show[hidden] { display: none; }
#show-buttons { display: flex; gap: 1.5em; }
#show-buttons button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
#show-buttons button:disabled { cursor: default; }
#show-buttons button.done { text-decoration: none; }  /* submitted: plain text */
/* under the buttons: story.yaml's submitted text, left-aligned paragraphs; the screen scrolls if it has to */
#show-text { flex: none; max-width: 34em; margin-top: 4.2em; text-align: left; font-size: calc(14 * var(--u)); line-height: 1.4; }  /* 3 lines lower */
#show-text:empty { display: none; }
#show-text p { margin: 0 0 1em; }
#show-text a { color: inherit; }
#show-lines { display: flex; flex-direction: column; gap: 16px; font: clamp(22px, 4vw, calc(40 * var(--u))) var(--hand); }
#show-lines span { color: #bbb; transition: color .1s; }
#show-lines span.said { color: black; }

/* after submitting: theirs, then everyone else's, as submit shows them, each lit as it plays, with play / stop
   under it; over everything, header included, scrolling for more (openListen() in main.js) */
#listen { position: fixed; inset: 0; z-index: 14; overflow-y: auto; overscroll-behavior: contain; background: black; color: #ccc; padding: 0 1em; text-align: center; }
#listen[hidden] { display: none; }
body:has(#listen:not([hidden])) { overflow: hidden; }
.listen-item { display: flex; flex-direction: column; align-items: center; gap: 1em; padding: calc(64 * var(--u)) 0; }
.listen-lines { display: flex; flex-direction: column; gap: 16px; font: clamp(22px, 4vw, calc(40 * var(--u))) var(--hand); }
.listen-lines span { display: inline-block; color: #555; transition: color .1s; }
.listen-lines span.said { color: #ccc; }
.listen-play { width: calc(28 * var(--u)); height: calc(28 * var(--u)); min-width: 24px; min-height: 24px; padding: 0; border: 0; background: none; color: #555; cursor: pointer; }  /* the grey of the words not yet said */
.listen-play svg { display: block; width: 100%; height: 100%; }
#listen-more { height: 1px; }

/* the holding page, until the game opens (OPENS in index.html): the image and the countdown on black, over everything */
#holding { display: none; }
html.holding body > :not(#holding) { display: none; }
html.holding #holding { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center;
  justify-content: center; background: #000; color: #fff; font-family: Times, "Times New Roman", serif; }
#holding img { width: 50vw; height: 50vh; object-fit: contain; display: block; }
#countdown { margin-top: 5vh; font-size: clamp(24px, 3vw, 48px); line-height: 1; white-space: nowrap; text-align: center; }
@media (max-width: 600px) {
  #holding img { width: 80vw; }
  #countdown { font-size: 7vw; }
}