/* Woordstroom / one paper workshop, not a list plus an illustration sidebar.
   Composition only. The existing four reading tracks, fitter, material travel
   and registered wheel assembly remain the sole owners of their geometry.
   Load after press-polish and the shared visual-finish styles. */
@media (min-width: 901px) and (min-height: 561px) {
  #zineApp[data-word-press] {
    --press-control-height: 76px;
    --press-control-gap: 14px;
    --press-matte-ink: color-mix(in srgb, var(--dark) 90%, transparent);
    /* Give the operator a real place in the composition. The resulting paper
       remains wide enough for the existing long-word fitter; no fixed aspect. */
    grid-template-columns: minmax(220px, 29%) minmax(0, 1fr);
    gap: clamp(12px, 1vw, 18px);
    padding-inline: clamp(28px, 3.8vw, 70px);
  }
  #zineApp[data-word-press] .zine-game {
    grid-template-rows: minmax(0, 1fr) var(--press-control-height);
    gap: var(--press-control-gap);
  }
  /* The large font's cap height sits high in its line box. Centre the visible
     ink in the aperture, not that line box. The outgoing ghost intentionally
     inherits this too; the three preview selectors retain translate: none. */
  #zineApp[data-word-press] .word-text { translate: 0 8px; }
  /* Settings/result paper used to paint over the front of both cylinders.
     Its existing layout and hit areas stay untouched; only excess material
     outside the roll opening is cut away, restoring the assembly's depth. */
  #zineApp[data-word-press] .settings-paper,
  #zineApp[data-word-press] .scene-paper {
    /* Four pixels retain contact through the source cutout's alpha padding. */
    clip-path: inset(max(0px, calc(var(--roller-height) * .28 - 4px)) 0 max(0px, calc(var(--feed-height) * .45 - 4px))) !important;
  }

  /* The game's title already identifies the screen; the gallery owns the
     large brand signature. Removing a second floating label makes the host
     and working crank the identity of this particular game. */
  #zineApp[data-word-press] .zine-logo { display: none; }
  #zineApp[data-word-press] .press-drive {
    right: 0;
    bottom: calc(var(--press-control-height) + var(--press-control-gap));
    width: min(100cqw, calc((100cqh - 110px) / 1.5));
  }
  #zineApp[data-word-press] .zine-character {
    width: 70%;
    left: 7%;
    top: -52%;
  }
  #zineApp[data-word-press] .zine-poster::before {
    bottom: calc(var(--press-control-height) + var(--press-control-gap) + 10px);
    background: linear-gradient(var(--press-matte-ink), var(--press-matte-ink)), var(--xerox) 20px 60px / 360px;
    background-blend-mode: normal;
  }
  #zineApp[data-word-press] .press-roller-top::before {
    background: linear-gradient(var(--press-matte-ink), var(--press-matte-ink)), var(--xerox) 65px 80px / 360px;
    background-blend-mode: normal;
  }

  /* One narrow mounting strip joins the output roll to its paper controls.
     No dark frame surrounds the buttons: that read as a digital panel in the
     first browser pass. The strip uses quiet stock, not enlarged xerox scars. */
  #zineApp[data-word-press] .zine-controls {
    position: relative;
    isolation: isolate;
    align-items: stretch;
    padding: 1px 18px 8px;
    gap: 14px;
  }
  #zineApp[data-word-press] .zine-controls::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    inset: -15px 20px auto;
    height: 25px;
    background: linear-gradient(var(--press-matte-ink), var(--press-matte-ink)), var(--xerox) 73px 61px / 360px;
    background-blend-mode: normal;
    clip-path: polygon(.5% 1%, 24% 2%, 44% 0, 80% 1%, 99.6% 0,
      100% 94%, 75% 98%, 40% 97%, .2% 100%, 0 35%);
    filter: drop-shadow(1px 3px 1px #21152c65);
  }
  #zineApp[data-word-press] .zine-controls .main-action {
    flex: 1 1 auto;
    max-width: 76%;
    padding-inline: 20px;
    font-size: clamp(29px, 3vw, 45px);
  }
  #zineApp[data-word-press] .zine-controls .pause-action,
  #zineApp[data-word-press] .zine-controls .stop-action {
    flex: 0 0 clamp(112px, 10vw, 158px);
    font-size: clamp(25px, 2.25vw, 34px);
  }
  #zineApp[data-word-press][data-has-rewind="true"] .zine-controls .main-action {
    min-width: 0;
    max-width: none;
    flex-basis: 45%;
    font-size: clamp(26px, 2.5vw, 38px);
  }
  #zineApp[data-word-press] .zine-controls .rewind-action {
    min-width: 0;
    flex: 0 1 25%;
    font-size: clamp(23px, 2.25vw, 34px);
  }
  #zineApp[data-word-press] .zine-controls .zine-button {
    min-height: 48px;
  }
  #zineApp[data-word-press] .zine-controls .zine-button:focus-visible {
    outline-color: var(--paper);
    outline-offset: 4px;
  }
  #zineApp[data-word-press] .press-pause-slip {
    left: -25%;
    top: 6%;
  }
}

/* Compact desktop preserves the same paper/control relationship without
   borrowing reading height to accommodate the decorative foot. */
@media (min-width: 901px) and (min-height: 561px) and (max-height: 780px) {
  #zineApp[data-word-press] {
    --press-control-height: 60px;
    --press-control-gap: 12px;
    padding-inline: clamp(24px, 3vw, 52px);
  }
  #zineApp[data-word-press] .press-drive {
    width: min(100cqw, calc((100cqh - 96px) / 1.5));
  }
  #zineApp[data-word-press] .zine-controls { padding-block: 0 5px; }
  #zineApp[data-word-press] .zine-controls::before { top: -13px; }
  #zineApp[data-word-press] .zine-controls .main-action { font-size: clamp(28px, 2.8vw, 37px); }
}

@media (forced-colors: active) {
  #zineApp[data-word-press] .zine-controls::before { display: none; }
  #zineApp[data-word-press] .zine-controls .zine-button:focus-visible { outline-color: Highlight; }
}