/* Woordstroom / static print reference, 22 September 2026.
   One sheet, one reading axis. This layer changes no transport, timing,
   transforms, paper contours or engine state. Compact layouts stay flexible. */

#zineApp[data-word-press] #zineChallengeScene .scene-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  justify-items: center;
  align-content: center;
  text-align: center;
}
#zineApp[data-word-press] #zineChallengeScene .scene-content > * {
  grid-area: auto;
  margin-inline: 0;
}
#zineApp[data-word-press] #zineSceneHint { text-wrap: balance; }

@media (min-width: 901px) and (min-height: 561px) {
  html[data-session-release] #zineApp[data-word-press] {
    --press-stage-width: min(76vw, 1280px);
    --sheet-inset: clamp(32px, 3.4vw, 60px);
  }

  /* The main action stays on the sheet's centreline, even when Stop appears.
     Equal side tracks reserve space rather than pushing the main button left. */
  html[data-session-release] #zineApp[data-word-press] .zine-game > .zine-controls {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 350px) minmax(0, 1fr);
    column-gap: 24px;
  }
  #zineApp[data-word-press] .zine-controls #zineMainAction { grid-column: 2; }
  #zineApp[data-word-press] .zine-controls #zineStopAction { grid-column: 3; justify-self: start; }

  /* Display type, small functional text, restrained lavender participant ink:
     no extra card frames, icons or explanatory copy inside the printed page. */
  html[data-session-release] #zineApp[data-word-press] #zineChallengeScene .scene-content {
    width: min(100%, 780px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    gap: clamp(12px, 1.8vh, 20px);
    padding: 12px 0;
  }
  html[data-session-release] #zineApp[data-word-press][data-phase="idle"] #zineSceneTitle {
    grid-row: 1;
    max-width: 8.2ch;
    font-size: clamp(52px, 9.6vh, 100px);
    line-height: .95;
    letter-spacing: -.012em;
    text-wrap: balance;
    margin-block: 0;
  }
  html[data-session-release] #zineApp[data-word-press][data-phase="idle"] #zineSceneHint {
    grid-row: 2;
    max-width: 31ch;
    font-size: clamp(23px, 2.8vh, 30px);
    line-height: 1.2;
    margin: 0 0 8px;
  }
  #zineApp[data-word-press][data-phase="idle"] #zineParticipant { grid-row: 4; }
  #zineApp[data-word-press][data-phase="idle"] #zineChallengeScene .scene-best {
    grid-row: 3;
    border: 0;
    padding: 0;
    margin: 2px 0 0;
    font-size: clamp(20px, 2.35vh, 25px);
    line-height: 1.2;
  }

  /* The result is a single score impression, not two drifting columns.
     Long scores retain the controller's digit-count fit; names may wrap. */
  html[data-session-release] #zineApp[data-word-press]:is([data-phase="ending"], [data-phase="ended"]) #zineChallengeScene .scene-content {
    gap: clamp(8px, 1.15vh, 13px);
    padding-block: 8px;
  }
  html[data-session-release] #zineApp[data-word-press]:is([data-phase="ending"], [data-phase="ended"]) #zineSceneTitle {
    grid-row: 1;
    font-size: clamp(34px, 5.3vh, 56px);
    line-height: 1;
    margin: 0 0 4px;
  }
  #zineApp[data-word-press]:is([data-phase="ending"], [data-phase="ended"]) #zineFinalScore {
    grid-row: 2;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 2px;
    width: min(100%, 620px);
    margin: 0;
    padding: 0;
  }
  #zineApp[data-word-press] #zineFinalScore #zineAttemptName {
    grid-area: 1 / 1 / 2 / -1;
    max-width: 26ch;
    justify-self: center;
    font-size: clamp(23px, 3.2vh, 32px);
    line-height: 1.1;
    margin: 0;
  }
  #zineApp[data-word-press] #zineFinalScore #zineScoreNumber {
    grid-area: 2 / 1;
    font-size: min(clamp(86px, 15vh, 164px), calc(140cqw / var(--score-length, 2)));
    line-height: .9;
    letter-spacing: -.035em;
    margin: 0;
  }
  #zineApp[data-word-press] #zineFinalScore #zineScoreUnit {
    grid-area: 2 / 2;
    font-size: clamp(23px, 3.2vh, 32px);
    line-height: 1;
  }
  #zineApp[data-word-press]:is([data-phase="ending"], [data-phase="ended"]) #zineMissed {
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    column-gap: .35em;
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: clamp(21px, 2.6vh, 27px);
    line-height: 1.2;
  }
  #zineApp[data-word-press] #zineMissed #zineMissedWord {
    max-width: 100%;
    font-size: inherit;
    overflow-wrap: anywhere;
  }
  #zineApp[data-word-press]:is([data-phase="ending"], [data-phase="ended"]) #zineChallengeScene .scene-best {
    grid-row: 4;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: clamp(20px, 2.35vh, 25px);
    line-height: 1.2;
  }
  #zineApp[data-word-press]:is([data-phase="ending"], [data-phase="ended"]) #zineParticipant {
    grid-row: 5;
    margin-top: 8px;
  }

  /* Label above a centred name keeps the same axis with 2 or 8 people.
     The expanded list remains in flow and can grow the original sheet. */
  html[data-session-release] #zineApp[data-word-press] .wordstream-sheet #zineParticipant {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 420px);
    gap: 8px;
    margin-bottom: 0;
  }
  #zineApp[data-word-press] #zineParticipant > label {
    grid-column: 1;
    padding: 0;
    font-size: 19px;
    line-height: 1.1;
    text-align: center;
  }
  #zineApp[data-word-press] #zineParticipant .participant-trigger {
    grid-column: 1;
    min-height: 48px;
    padding: .5rem 1.3rem .6rem;
    font-size: clamp(24px, 2.9vh, 30px);
    line-height: 1.1;
    text-align: center;
    border: 0;
    filter: var(--wp-shadow-rest);
  }
  #zineApp[data-word-press] #zineParticipantValue { padding-left: .7em; }
  #zineApp[data-word-press] #zineParticipant .participant-trigger::before {
    inset: -3px -5px;
    background: #dfd0ec var(--stock) 71px 133px / 470px;
    background-blend-mode: multiply;
  }

  /* Same four equal tracks and same dynamic fit. Upcoming words gain ink
     presence without competing with the current word's physical guide. */
  html[data-session-release] #zineApp[data-word-press] #zineWords [data-word-index]:not([data-word-index="0"]) .word-text {
    font-size: calc(var(--word-size, 76px) * .82);
  }
}

@media (forced-colors: active) {
  #zineApp[data-word-press] #zineParticipant .participant-trigger { color: ButtonText; }
  #zineApp[data-word-press] #zineParticipant .participant-trigger::before { background: ButtonFace; }
}