/* Desktop composition / 14 September 2026.
   Same notebook, envelope, native ink and moving carriers; no new game state.
   Compact layouts retain their separate, already tested geometry. */
@media (min-width: 901px) and (min-height: 561px) {
  /* The notebook is a reading object, not a full-width empty writing field.
     Keep the carrier insets intact: its page photograph is registered back
     to those exact insets in flowbot-material-craft.css. */
  #zineSandboxApp .fs-desk {
    width: min(100%, calc((100svh - 238px) * 1.62), 1100px);
  }

  #zineSandboxApp .fs-sandbox-words {
    padding-inline: 5%;
  }

  #zineSandboxApp .fs-word-line,
  #zineEstafetteApp .fs-word-line {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 26px;
    gap: 0;
  }

  #zineSandboxApp .fs-word-text,
  #zineEstafetteApp .fs-word-text {
    text-align: center;
  }

  /* Equal mark reserves on both sides keep a short word truly centred.
     The difficulty mark remains a separate, accessible annotation. */
  #zineSandboxApp .fs-hard-mark,
  #zineEstafetteApp .fs-hard-mark {
    position: absolute;
    inset: 50% 3px auto auto;
    margin: -9px 0 0;
  }

  #zineSandboxApp .fs-sandbox-words .fs-word:first-child::before {
    inset-inline: -2%;
  }

  /* Address first, words second, envelope as support. The longer sheet uses
     the former empty lower flap without covering its airmail border. */
  #zineEstafetteApp .fs-title,
  #zineEstafetteApp .fs-title-chevron {
    color: var(--accent);
  }

  #zineEstafetteApp .fs-letter {
    inset: 12% 10% 14%;
    padding: 20px 4% 24px;
    grid-template-rows: 70px minmax(0, 1fr);
    gap: 12px;
  }

  /* The photographed edge has its own trim allowance. Keep the address
     strip inside that edge instead of letting it sit across the top tear.
     Only the playing letter needs this; setup stays optically centred. */
  #zineEstafetteApp .fs-estafette-paper[data-has-words="true"] .fs-letter {
    padding-top: 36px;
  }

  #zineEstafetteApp .fs-player {
    width: 60%;
    font-size: var(--fs-fit, clamp(42px, 4vw, 62px));
    padding-block: 5px 9px;
  }

  #zineEstafetteApp .fs-estafette-words {
    gap: 8px 28px;
  }

  #zineEstafetteApp .fs-estafette-words .fs-word {
    padding-inline: 0;
  }

  #zineEstafetteApp .fs-estafette-words .fs-word-text {
    font-size: var(--fs-fit, clamp(36px, 3.3vw, 50px));
  }

  /* Two through four words form one readable column. Long words no longer
     have to squeeze into half a sheet beside a much larger short word.
     Five/six retain two columns, with the same quiet base size per cell. */
  #zineEstafetteApp:is([data-word-count="2"], [data-word-count="3"], [data-word-count="4"]) .fs-estafette-words {
    grid-template-columns: minmax(0, 1fr);
  }

  #zineEstafetteApp:is([data-word-count="2"], [data-word-count="3"], [data-word-count="4"]) .fs-estafette-words .fs-word-text {
    font-size: var(--fs-fit, clamp(44px, 4.2vw, 64px));
  }

  #zineEstafetteApp[data-word-count="3"] .fs-estafette-words .fs-word:nth-child(3) {
    width: 100%;
  }

  #zineEstafetteApp[data-word-count="5"] .fs-estafette-words .fs-word:nth-child(5) {
    width: calc(50% - 14px);
  }

  #zineEstafetteApp .fs-count {
    margin-block: 18px 20px;
  }
}

@media (min-width: 901px) and (min-height: 561px) and (max-height: 800px) {
  #zineSandboxApp .fs-desk {
    width: min(100%, calc((100svh - 218px) * 1.62), 1100px);
  }

  #zineSandboxApp .fs-sandbox-words .fs-word-text {
    font-size: var(--fs-fit, 64px);
  }

  #zineSandboxApp .fs-sandbox-words .fs-word:not(:first-child) .fs-word-text {
    font-size: var(--fs-fit, 48px);
  }

  #zineEstafetteApp .fs-letter {
    padding: 15px 4% 18px;
    grid-template-rows: 54px minmax(0, 1fr);
    gap: 8px;
  }

  #zineEstafetteApp .fs-estafette-paper[data-has-words="true"] .fs-letter {
    padding-top: 27px;
  }

  #zineEstafetteApp .fs-player {
    font-size: var(--fs-fit, 45px);
    padding-block: 4px 7px;
  }

  #zineEstafetteApp .fs-estafette-words .fs-word-text {
    font-size: var(--fs-fit, 40px);
  }

  #zineEstafetteApp:is([data-word-count="2"], [data-word-count="3"], [data-word-count="4"]) .fs-estafette-words .fs-word-text {
    font-size: var(--fs-fit, 46px);
  }

  #zineEstafetteApp .fs-count {
    margin-block: 10px 12px;
  }
}

@media (forced-colors: active) {
  #zineEstafetteApp .fs-title,
  #zineEstafetteApp .fs-title-chevron {
    color: ButtonText;
  }
}