/* B / De drukpers. Only Woordstroom changes; the other paper games keep their
   palettes and layouts. Reading tracks stay fixed between all three variants. */
#zineApp[data-word-press] {
  --field: #7952b3; --dark: #251f2b; --ink: #211d24;
  --paper: #f2e5cf; --action: #dbef65; --time: #211d24;
  --accent: #dfd0ec; --face-accent: #dbef65;
  --roller-height: clamp(52px, 7.5vh, 82px);
  --feed-height: clamp(44px, 7vh, 74px);
  --guide-foot: clamp(26px, 4.5vh, 42px);
  grid-template-columns: minmax(180px, 23%) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 32px);
  padding: 108px clamp(24px, 3vw, 54px) 32px 26px;
  min-height: 580px;
}
#zineApp .zine-game { grid-template-rows: minmax(0, 1fr) 72px; gap: 22px; }
#zineApp .zine-heading {
  position: absolute; z-index: 8; inset: 26px 36px auto 30px;
  grid-area: auto;
  padding: 0; justify-content: space-between; align-items: center; gap: 20px;
}
#zineApp .ink-label { color: var(--ink); font-size: clamp(28px, 2.7vw, 44px); padding: 9px 22px 13px; }
#zineApp .ink-label::before { background: var(--paper) var(--stock) 90px 50px / 560px; background-blend-mode: multiply; filter: drop-shadow(1px 3px 1px #1e132750); }
#zineApp .variant-label { font-size: clamp(23px, 2.1vw, 34px); }
#zineApp .game-toggle { color: var(--ink); }
#zineApp .zine-poster { margin: 0; min-height: 0; container-type: size; }
#zineApp .zine-logo { top: 0; left: 3%; right: auto; width: 48%; max-width: 162px; transform: rotate(-6deg); z-index: 5; }
#zineApp .press-drive {
  /* Every mechanical landmark lives in this ONE proportional coordinate
     system. The mounting point can never drift away from the wheel at resize. */
  --mount-x: 51.99405%; --mount-y: 47.01157%;
  position: absolute; right: -6%; bottom: 94px;
  width: min(112cqw, calc((100cqh - 110px) / 1.5));
  aspect-ratio: 1250 / 1069; isolation: isolate;
}
#zineApp .press-housing { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 2; pointer-events: none; filter: drop-shadow(2px 4px 1px #1c102b90) drop-shadow(7px 12px 7px #1c102b50); }
#zineApp .press-mount { position: absolute; left: var(--mount-x); top: var(--mount-y); width: 0; height: 0; }
#zineApp .zine-poster::before { content: ""; position: absolute; right: -2%; top: 24px; bottom: 105px; width: 13%; background: var(--dark) var(--xerox) 0 0 / 460px; clip-path: polygon(7% 0, 90% 1%, 100% 100%, 0 100%); }
#zineApp .zine-character { z-index: 1; width: 67%; left: 5%; top: -52%; transform: rotate(-8deg); }
#zineApp .character-backing { display: none; }
#zineApp .character-sprite { filter: drop-shadow(2px 5px 2px #1c102b85); }
#zineApp .press-crank {
  position: absolute; z-index: 4; width: 84%; aspect-ratio: 1;
  left: var(--mount-x); top: var(--mount-y); translate: -50% -50%; padding: 0; border: 0; background: none;
  border-radius: 50%; touch-action: manipulation;
  filter: drop-shadow(2px 3px 1px #160e2360) drop-shadow(5px 10px 5px #160e2350);
}
#zineApp .press-crank img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transform-origin: 50% 50%; }
#zineApp .press-crank:not(:disabled):hover { filter: drop-shadow(2px 3px 1px #160e2390) drop-shadow(7px 13px 6px #160e2370); }
#zineApp .press-crank:focus-visible { outline: 4px solid var(--action); outline-offset: 2px; }
#zineApp .press-crank:not(:disabled):active { filter: drop-shadow(1px 2px 1px #160e2390) drop-shadow(3px 6px 3px #160e2370); }
#zineApp .press-assembly { grid-area: 1 / 1; position: relative; min-width: 0; min-height: 0; isolation: isolate; }
#zineApp .press-window {
  position: absolute; inset: calc(var(--roller-height) * .7) 10px calc(var(--feed-height) * .6);
  overflow: hidden; isolation: isolate;
  background: transparent;
  filter: drop-shadow(2px 3px 1px #1b142750) drop-shadow(4px 7px 5px #1b142730);
}
#zineApp .press-stock {
  position: absolute; inset: 0; z-index: 0;
  /* The extra row above/below travels with the text; no stationary texture
     underneath moving letters. The timer/reading aperture stay on the frame. */
  pointer-events: none;
}
#zineApp .press-stock::before {
  content: ""; position: absolute; inset: -25% 0;
  background: var(--paper) var(--stock) 0 var(--press-paper-offset, 0px) / 560px;
  /* Sampled alpha fibers, not a stretched photograph or a new random outline.
     Their repeat follows the same cumulative offset as the paper pigment. */
  /* Six pitches cover the four visible rows plus one overscan row at each
     end. Mask the oversized material, NOT its four-row carrier: masking the
     carrier would cut off the outgoing word's paper during the first pose. */
  mask-image: radial-gradient(circle at 50% calc(100% - 4px), transparent 0 1.8px, #000 2.6px), url("assets/nachtzine/press/paper-edge-left-v2.webp"), linear-gradient(#000, #000), url("assets/nachtzine/press/paper-edge-right-v2.webp");
  mask-size: 20px calc(100% / 6), 28px 274px, calc(100% - 54px) 100%, 28px 274px;
  mask-position: 0 0, left var(--press-paper-offset, 0px), center, right var(--press-paper-offset, 0px);
  mask-repeat: repeat, repeat-y, no-repeat, repeat-y;
  mask-composite: intersect, add, add, add;
}
#zineApp .press-aperture-track { position: absolute; z-index: 4; inset: calc(var(--roller-height) * .7) 10px calc(var(--feed-height) * .6); pointer-events: none; }
#zineApp .press-current {
  position: absolute; inset: -2px -10px auto; height: calc(25% + 2px);
  background: transparent; pointer-events: none;
  filter: drop-shadow(1px 3px 1px #1b142787) drop-shadow(2px 6px 4px #1b14273b);
}
#zineApp .press-current > span, #zineApp .press-guide-bottom { position: absolute; background: var(--action) var(--stock) 100px 100px / 560px; background-blend-mode: multiply; }
#zineApp .press-guide-top { top: 0; left: 0; right: 0; height: 13px; clip-path: polygon(0 9%, 22% 0, 40% 15%, 77% 0, 100% 12%, 99.4% 89%, 60% 100%, 15% 90%, 0 100%); }
#zineApp .press-guide-left, #zineApp .press-guide-right { top: 8px; bottom: 6px; width: 18px; }
#zineApp .press-guide-left { left: 0; clip-path: polygon(6% 0, 93% 0, 100% 29%, 88% 66%, 98% 100%, 3% 100%, 0 48%); }
#zineApp .press-guide-right { right: 0; clip-path: polygon(5% 0, 95% 0, 100% 46%, 89% 100%, 0 100%, 6% 63%, 0 25%); }
#zineApp .press-guide-bottom { inset: auto 0 -2px; height: var(--guide-foot); clip-path: polygon(0 3%, 14% 6%, 30% 0, 48% 5%, 78% 0, 100% 7%, 99.5% 89%, 84% 100%, 51% 91%, 20% 100%, .4% 87%); }
#zineApp .press-guide-left::after, #zineApp .press-guide-right::after { content: ""; position: absolute; top: 31%; left: 1px; right: 1px; height: 8px; background: var(--dark) var(--xerox) 0 0 / 160px; transform: rotate(-5deg); box-shadow: 0 1px 0 #b7a987; }
#zineApp .time-paper {
  --fill: 0%; inset: 50% auto auto 50%; width: min(82%, 620px); height: clamp(14px, 2vh, 21px); translate: -50% -50%; clip-path: none;
  display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: clamp(3px, .5vw, 7px);
  background: none; mask: none;
}
#zineApp .time-paper > span { position: relative; border: 1.6px solid var(--ink); background: transparent; transform: rotate(-1deg); }
#zineApp .time-paper > span:nth-child(3n) { transform: rotate(1deg); }
#zineApp .time-paper > span::after { content: ""; position: absolute; inset: 0 auto 0 0; width: clamp(0%, calc((var(--fill) - var(--cell-start)) * 20), 100%); background: var(--ink) var(--xerox) 20px 100px / 360px; }
#zineApp[data-phase="idle"] .time-paper,
#zineApp[data-phase="loading"] .time-paper { visibility: hidden; }
#zineApp .zine-words { position: relative; z-index: 2; width: 100%; height: 100%; gap: 0; --word-fit-ratio: 1.18; }
#zineApp .zine-words li { margin: 0; padding: 0; }
#zineApp .paper-row {
  padding: 20px clamp(32px, 4vw, 70px) calc(var(--guide-foot) + 5px);
  justify-content: center; text-align: center; isolation: auto;
}
#zineApp .paper-row::after {
  content: ""; position: absolute; left: 18px; right: 18px; bottom: 1px; height: 6px;
  background: radial-gradient(circle, transparent 0 1.8px, #a28c6d80 2px 2.7px, transparent 3px) -18px 0 / 20px 6px repeat-x;
}
#zineApp .paper-shadow { display: none; }
#zineApp .word-text { position: relative; z-index: 1; }
#zineApp [data-press-ghost] { position: absolute!important; top: -25%; left: 0; width: 100%; height: 25%; pointer-events: none; }
#zineApp .press-roller {
  position: absolute; z-index: 5; left: -5px; right: -5px; height: var(--roller-height);
  display: flex; pointer-events: none;
  filter: drop-shadow(1px 4px 1px #1b142774) drop-shadow(3px 9px 5px #1b142743);
}
#zineApp .press-roller-top { top: 0; }
#zineApp .press-roller-top::before { content: ""; position: absolute; right: 98%; top: 35%; width: var(--roller-height); height: 30%; background: var(--dark) var(--xerox) 60px 100px / 450px; z-index: -1; clip-path: polygon(0 12%, 99% 0, 100% 94%, 0 100%); }
#zineApp .press-roller-top::after { content: ""; position: absolute; left: 12%; right: 12%; top: 34%; height: 2px; background: #b59f7850; opacity: 0; mask: var(--ink-grain-mask, none) 0 0 / 192px 160px; }
#zineApp .press-roller span {
  height: 100%; flex: 0 0 calc(var(--roller-height) * 1.06);
  background: url("assets/nachtzine/press/roller-v1.webp") left center / auto 100% no-repeat;
}
#zineApp .press-roller span:nth-child(2) { flex: 1; background-image: url("assets/nachtzine/press/roller-middle-v1.webp"); background-position: center; background-repeat: repeat-x; }
#zineApp .press-roller span:last-child { background-position: right center; }
#zineApp .press-roller-bottom { bottom: 0; height: var(--feed-height); }
#zineApp .press-roller-bottom span { background-image: url("assets/nachtzine/press/feed-roll-v1.webp"); flex-basis: calc(var(--feed-height) * .8); }
#zineApp .press-roller-bottom span:nth-child(2) { flex: 1; background-image: url("assets/nachtzine/press/feed-roll-middle-v1.webp"); }
#zineApp .zine-controls { grid-area: 2 / 1; padding: 0; gap: 18px; justify-content: center; }
#zineApp[data-word-press] .main-action { flex: 0 1 62%; font-size: clamp(29px, 3.2vw, 52px); }
#zineApp .pause-action, #zineApp .stop-action { --button-paper: var(--paper); flex: 0 1 150px; font-size: clamp(24px, 2.1vw, 34px); }
#zineApp .rewind-action { flex: 0 1 210px; font-size: clamp(23px, 2.3vw, 36px); }
#zineApp[data-has-rewind="true"] .main-action { flex-basis: 48%; font-size: clamp(24px, 2.8vw, 43px); }
#zineApp .settings-panel, #zineApp .challenge-scene { grid-area: 1 / 1; z-index: 6; margin: calc(var(--roller-height) * .72) 10px calc(var(--feed-height) * .55); }
#zineApp .settings-panel { z-index: 7; }
#zineApp:is([data-press-motion="feed"], [data-press-motion="step"], [data-press-motion="start"]) .press-roller-top::after { animation: press-roller-seam 200ms steps(1, end) both; }
#zineApp[data-press-motion="start"] .zine-character { animation: press-host-start 200ms steps(1, end) both; }
#zineApp:is([data-press-motion="feed"], [data-press-motion="step"]) .main-action::before { animation: press-key-ink 200ms steps(1, end) both; }
@keyframes press-roller-seam { 0% { translate: 0 -8px; opacity: 0; } 27% { translate: 0 0; opacity: .8; } 55% { translate: 0 14px; opacity: .5; } 80%, 100% { translate: 0 24px; opacity: 0; } }
@keyframes press-host-start { 0% { transform: rotate(-8deg); } 27% { transform: rotate(-11deg); } 55% { transform: rotate(-6deg); } 80%, 100% { transform: rotate(-8deg); } }
@keyframes press-key-ink { 0% { background-position: 81px 390px; } 55% { background-position: 70px 410px; } 80%, 100% { background-position: 61px 420px; } }
#zineApp .settings-paper, #zineApp .scene-paper { clip-path: none!important; inset: 0; filter: none; }
#zineApp .scene-content { justify-items: center; text-align: center; padding: 26px 38px; gap: 16px; }
#zineApp .scene-title { font-size: clamp(42px, 5.5vw, 92px); }
#zineApp .scene-content .scene-score { justify-content: center; }
#zineApp .scene-hint { max-width: 26ch; }
#zineApp:has(.settings-panel:not([hidden])) .press-window, #zineApp:has(.settings-panel:not([hidden])) .press-aperture-track { visibility: hidden; }
#zineApp[data-scene="challenge"] .press-current { visibility: hidden; }
@media (min-width: 901px) and (max-height: 780px) {
  #zineApp[data-word-press] { padding-top: 92px; padding-bottom: 22px; gap: 20px; }
  #zineApp .zine-heading { top: 18px; }
  #zineApp .zine-game { grid-template-rows: minmax(0, 1fr) 60px; gap: 16px; }
  #zineApp .press-drive { bottom: 76px; width: min(112cqw, calc((100cqh - 96px) / 1.5)); }
  #zineApp .paper-row { padding-block: 14px calc(var(--guide-foot) + 3px); }
  #zineApp .settings-scroll { gap: 12px; padding: 20px; }
  #zineApp .settings-group legend { font-size: 25px; }
}
@media (max-width: 900px) and (orientation: portrait) {
  #zineApp[data-word-press] { display: block; padding: 158px 18px 24px; min-height: 690px; height: 100svh; max-height: none; --roller-height: 42px; --feed-height: 38px; --guide-foot: 24px; }
  #zineApp .zine-heading { inset: 18px 20px auto; gap: 10px; }
  #zineApp .ink-label { font-size: clamp(23px, 4vw, 32px); padding: 8px 12px 12px; }
  #zineApp .variant-label { font-size: clamp(18px, 3vw, 24px); }
  #zineApp .zine-poster { position: absolute; inset: 76px 20px auto; height: 76px; width: auto; }
  #zineApp .press-housing { display: none; }
  #zineApp .zine-poster::before { display: none; }
  #zineApp .zine-logo { top: 6px; left: 0; width: 100px; }
  #zineApp .press-drive { inset: -4px 3px auto auto; width: 82px; aspect-ratio: 1; --mount-y: 50%; }
  #zineApp .zine-character { top: 0; left: -96px; width: 78px; }
  #zineApp .press-crank { width: 100%; }
  #zineApp .zine-game { height: 100%; grid-template-rows: minmax(0, 1fr) 57px; gap: 18px; }
  #zineApp .paper-row { padding: 14px 24px 29px; }
  #zineApp .time-paper { width: 88%; height: 12px; gap: 3px; }
  #zineApp .zine-controls { gap: 9px; }
  #zineApp[data-word-press] .main-action { flex: 1; white-space: normal; font-size: 28px; }
  #zineApp .pause-action, #zineApp .stop-action { flex-basis: 24%; font-size: 23px; padding-inline: 10px; }
  #zineApp .rewind-action { flex-basis: 28%; font-size: 23px; padding-inline: 8px; }
  #zineApp .scene-content { padding: 22px 18px; gap: 14px; }
  #zineApp .scene-title { font-size: 46px; }
  #zineApp .settings-scroll { padding: 18px; gap: 16px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  #zineApp[data-word-press] { padding: 68px 18px 12px; height: 100svh; min-height: 340px; grid-template-columns: 18% minmax(0, 1fr); gap: 14px; --roller-height: 26px; --feed-height: 28px; --guide-foot: 15px; }
  #zineApp .zine-heading { inset: 10px 20px auto; }
  #zineApp .ink-label { padding: 5px 12px 8px; font-size: 24px; }
  #zineApp .variant-label { font-size: 20px; }
  #zineApp .zine-game { grid-template-rows: minmax(0, 1fr) 44px; gap: 9px; }
  #zineApp .zine-logo { width: 66%; }
  #zineApp .press-drive { bottom: 40px; width: min(108cqw, calc((100cqh - 50px) / 1.5)); }
  #zineApp .zine-character { width: 66%; }
  #zineApp .paper-row { padding: 8px 22px 19px; }
  #zineApp .press-guide-top { height: 8px; }
  #zineApp .time-paper { height: 10px; gap: 3px; }
  #zineApp .zine-controls { gap: 12px; }
  #zineApp[data-word-press] .main-action { font-size: 25px; }
  #zineApp .pause-action, #zineApp .stop-action { font-size: 22px; }
  #zineApp .scene-content { padding: 12px 20px; gap: 8px; grid-template-columns: 1fr 1fr; }
  #zineApp .scene-title { font-size: 38px; grid-column: 1 / -1; }
  #zineApp .scene-score strong { font-size: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  #zineApp .zine-character, #zineApp .press-roller-top::after, #zineApp .main-action::before { animation: none!important; }
}
@media (forced-colors: active) {
  #zineApp .press-stock::before { background: Canvas; mask: none; }
  #zineApp .press-stock { mask: none; }
  #zineApp .press-current { background: transparent; border: 3px solid Highlight; filter: none; }
  #zineApp .press-current > span, #zineApp .press-guide-bottom { background: Canvas; }
  #zineApp .press-crank { border: 3px solid ButtonText; forced-color-adjust: none; }
  #zineApp .press-crank:focus-visible { outline-color: Highlight; }
  #zineApp .time-paper { forced-color-adjust: none; --ink: Highlight; opacity: 1; }
  #zineApp .time-paper > span::after { background: Highlight; }
  #zineApp .paper-row::after { background: none; border-bottom: 1px dashed CanvasText; }
}