/* Reading roles, not another visual theme. The individual palettes, print faces,
   fitted gameplay words and fixed paper tracks remain their existing owners.
   Only peripheral title/action ink becomes quieter; hit areas never shrink.
   Echo now shares these peripheral roles; its concept and gameplay fit stay intact. */
@media (min-width: 901px) and (min-height: 561px) {
  #zineApp,
  #zineRoyaleApp,
  #zineStoryApp,
  #zineCaseApp,
  #zineSandboxApp,
  #zineEstafetteApp,
  #zineEchoApp {
    --type-game-title: clamp(30px, 2.5vw, 38px);
    --type-setup-heading: clamp(36px, 3vw, 46px);
    --type-main-action: clamp(28px, 2.35vw, 36px);
    --type-side-action: clamp(22px, 1.9vw, 28px);
    --type-choice: clamp(24px, 2.1vw, 30px);
    --type-helper: clamp(22px, 1.9vw, 28px);
    --type-support: clamp(20px, 1.65vw, 25px);
    --type-caption: clamp(18px, 1.5vw, 22px);
  }
  /* The broad press sheet and Echo poster need a stronger question than the
     smaller setup slips. Echo consumes this token only in its idle question;
     its live word and countdown keep their existing fitted display size. */
  html[data-session-release] #zineApp[data-word-press],
  html #zineEchoApp {
    --type-setup-heading: clamp(48px, 4.2vw, 64px);
  }

  /* Peripheral signatures do not need to compete with the paper's content.
     No phase-specific resizing: start/play/end keep the same title track. */
  html[data-session-release] #zineApp[data-word-press] .wordstream-topline #zineGameHeading,
  #zineRoyaleApp.bomtafel .royale-heading .ink-label,
  #zineStoryApp .story-title,
  #zineCaseApp .case-title,
  #zineSandboxApp .fs-title,
  #zineEstafetteApp .fs-title,
  #zineEchoApp .cohesion-heading h1 {
    font-size: var(--type-game-title);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .005em;
  }

  /* Setup questions share a reading role. Case follows its printed cover
     content, so opening the folder never resizes ink on a moving cover. */
  html[data-session-release] #zineApp[data-word-press] #zineSceneTitle,
  #zineRoyaleApp #royaleSetupTitle,
  #zineCaseApp[data-cover-content="setup"] #caseCoverTitle,
  #zineEstafetteApp #estafetteGroup,
  #zineEchoApp[data-phase="idle"] #echoWord {
    font-size: var(--type-setup-heading);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: .005em;
  }

  #zineRoyaleApp.bomtafel .royale-setup .settings-choices button,
  #zineCaseApp .case-levels button,
  #zineSandboxApp .fs-profile .fs-choice,
  #zineEstafetteApp .fs-profile .fs-choice,
  #zineEstafetteApp .fs-count .fs-choice {
    font-size: var(--type-choice);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .015em;
  }

  /* Keep the native heavy cut-print face for primary verbs. Secondary verbs
     use its actual400 face, not opacity or a different clean UI font. */
  /* Wordstream controls now sit below the sheet. Their IDs also outrank
     the later stage layer's generic button shorthand without moving it. */
  html[data-session-release] #zineApp[data-word-press] .zine-controls #zineMainAction,
  #zineRoyaleApp .zine-controls #royaleMainAction,
  #zineStoryApp .story-next,
  #zineCaseApp .case-main,
  #zineSandboxApp .fs-action,
  #zineEstafetteApp .fs-action,
  #zineEchoApp .echo-controls #echoMainAction,
  #zineEchoApp .echo-reset-dialog #echoCancelReset {
    font-size: var(--type-main-action);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .015em;
  }
  html[data-session-release] #zineApp[data-word-press] .zine-controls #zineStopAction,
  html[data-session-release] #zineApp[data-word-press] .zine-controls #zinePauseAction,
  #zineRoyaleApp .zine-controls #royaleStopAction,
  #zineStoryApp .story-back,
  #zineCaseApp .case-secondary,
  #zineSandboxApp .fs-secondary,
  #zineEstafetteApp .fs-secondary,
  #zineRoyaleApp .royale-setup .session-edit-group,
  #zineEstafetteApp .fs-group-action,
  #zineEchoApp .echo-controls #echoUndoAction,
  #zineEchoApp .echo-controls #echoStopAction,
  #zineEchoApp .echo-reset-dialog #echoConfirmReset {
    font-size: var(--type-side-action);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .015em;
  }

  #zineApp .wordstream-topline #wordstreamGamesOpen,
  #zineRoyaleApp .cohesion-back,
  #zineStoryApp .cohesion-back,
  #zineCaseApp .cohesion-back,
  #zineSandboxApp .cohesion-back,
  #zineEstafetteApp .cohesion-back,
  #zineEchoApp .cohesion-back {
    font-size: var(--type-support);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .015em;
  }

  /* The addressee remains conspicuous through its blue paper and contrast.
     Its fitted name is subordinate to the four words, not a fifth word.
     min() preserves the existing long-name fit and its complete spelling. */
  #zineEstafetteApp .fs-player {
    font-size: min(var(--fs-fit, 48px), clamp(34px, 3.25vw, 48px));
  }
  #zineCaseApp .case-phase,
  #zineStoryApp .story-type,
  #zineRoyaleApp.bomtafel .royale-setup .settings-group legend,
  #zineEstafetteApp .fs-count legend {
    font-size: var(--type-support);
    font-weight: 400;
    line-height: 1.1;
  }
  html[data-session-release] #zineApp[data-word-press] #zineSceneHint,
  #zineCaseApp .case-hint,
  #zineCaseApp #caseReviewHint,
  #zineEchoApp[data-phase="idle"] #echoStarter {
    font-size: var(--type-helper);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .005em;
  }
  html[data-session-release] #zineApp[data-word-press] #zineChallengeScene .scene-best,
  #zineCaseApp .case-levels small,
  #zineEchoApp .cohesion-heading p,
  #zineEchoApp #echoInstruction,
  #zineEchoApp #echoKicker {
    font-size: var(--type-caption);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .005em;
  }

  /* Metadata stays readable rather than distressed. Word/result score sizes and
     Story's short open subtext are intentionally untouched. */
  #zineRoyaleApp.bomtafel .royale-result-label {
    font-size: var(--type-support);
    font-weight: 400;
    line-height: 1.1;
  }
}