/* The reserve is a cassette bolted to its own spot in the workshop. Its body
   stays whole: two visible cardboard hubs carry the automatic reverse stroke. */
#zineApp .rewind-badge[data-rewind-material="cassette"] {
  --cassette-height: calc(100cqw * 1008 / 1561);
  container-type: inline-size;
  display: block;
  height: auto;
  min-height: 0;
  max-width: none;
  padding: 0;
  color: var(--paper);
  pointer-events: none;
  isolation: isolate;
  filter: none;
  transform-origin: 50% 76%;
}
#zineApp .rewind-badge[data-rewind-material="cassette"] .rewind-cassette {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1561 / 1008;
  transform-origin: 50% 88%;
  margin-bottom: 4px;
}
#zineApp .rewind-cassette-body {
  position: absolute;
  inset: 0;
  display: block;
  background: url("assets/nachtzine/wordstream-theatre/rewind-cassette-v1.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(1px 3px 1px #180f2570) drop-shadow(4px 8px 3px #180f2540);
}
#zineApp .rewind-reel {
  position: absolute;
  top: 49.1%;
  width: 13.5%;
  aspect-ratio: 1;
  display: block;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
#zineApp .rewind-reel-left { left: 28.9%; --reel-crop-x: 25.6069%; }
#zineApp .rewind-reel-right { left: 70.3%; --reel-crop-x: 73.468%; }
#zineApp .rewind-spool {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 50%;
  /* A registered circular crop of the real photographed hub, not a second
     graphic laid on top. Scale and positions use the1561×1008 source. */
  background: url("assets/nachtzine/wordstream-theatre/rewind-cassette-v1.webp") var(--reel-crop-x) 48.862% / 740.7407% auto no-repeat;
  transform-origin: 50% 50%;
}
#zineApp .rewind-badge[data-rewind-material="cassette"] .rewind-badge-copy {
  position: static;
  display: contents;
  padding: 0;
  filter: none;
  rotate: none;
  animation: none;
}
#zineApp .rewind-badge[data-rewind-material="cassette"] .rewind-badge-copy::before { content: none; }
#zineApp .rewind-badge[data-rewind-material="cassette"] .rewind-badge-copy strong {
  position: absolute;
  top: calc(var(--cassette-height) * .205);
  left: 10%;
  right: 10%;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  clip-path: none;
  margin: 0;
  color: var(--ink);
  text-align: center;
  font: 900 clamp(14px, 7.4cqw, 23px)/1.05 var(--print-face);
  white-space: nowrap;
}
#zineApp .rewind-badge[data-rewind-material="cassette"] #zineRewindBadgeState {
  position: absolute;
  top: calc(var(--cassette-height) * .79);
  left: 22%;
  right: 22%;
  color: var(--paper);
  text-align: center;
  font: 900 clamp(16px, 8.3cqw, 26px)/1 var(--print-face);
}
#zineApp .rewind-badge[data-rewind-material="cassette"] #zineRewindBadgeDetail {
  position: relative;
  display: block;
  min-height: 2.4em;
  margin: 2px 3% 0;
  padding: .4em 5%;
  color: var(--ink);
  background: var(--paper) var(--stock) 21px 48px / 300px;
  clip-path: polygon(1% 4%, 24% 0, 48% 4%, 71% 0, 99% 3%, 100% 44%, 98% 98%, 72% 96%, 49% 100%, 20% 96%, 0 100%);
  font: 400 clamp(11px, 5.7cqw, 16px)/1.2 var(--print-face);
  text-align: center;
}
#zineApp .rewind-badge[data-rewind-material="cassette"][data-charge="empty"] .rewind-cassette-body {
  filter: saturate(.22) brightness(.79) drop-shadow(1px 3px 1px #180f254f);
}
#zineApp .rewind-badge[data-rewind-material="cassette"][data-charge="empty"] .rewind-spool { filter: saturate(.22) brightness(.79); }
#zineApp .rewind-operator-body {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 86%;
}
/* A short printed receipt sits on the upper roller, close to the reading
   axis. Stage CSS places it; the press adapter owns its finite held poses. */
#zineApp .rewind-read-cue {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  padding: 5px 14px 6px;
  color: var(--ink);
  text-align: left;
  pointer-events: none;
  isolation: isolate;
  rotate: -.8deg;
  filter: drop-shadow(1px 2px .6px #160e2466) drop-shadow(2px 4px 1.5px #160e2430);
}
#zineApp .rewind-read-cue::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--paper) var(--stock) 41px 18px / 300px;
  box-shadow: inset 0 1px #fff5de9c, inset 0 -2px #a588555e;
  clip-path: polygon(1% 3%, 26% 0, 49% 3%, 72% 0, 99% 3%, 100% 58%, 99% 96%, 73% 100%, 48% 97%, 23% 100%, 0 96%);
}
#zineApp .rewind-read-symbol {
  align-self: center;
  grid-row: 1 / 3;
  font: 900 21px/1 var(--print-face);
  letter-spacing: -4px;
  padding-right: 4px;
}
#zineApp .rewind-read-cue strong {
  font: 900 clamp(19px, 1.65vw, 24px)/1 var(--print-face);
  white-space: nowrap;
}
#zineApp #zineRewindReadCueDetail {
  font: 400 clamp(12px, 1.05vw, 15px)/1.2 var(--print-face);
  white-space: nowrap;
}
#zineApp[data-rewind-cue="earned"] .rewind-read-cue::before {
  background-color: var(--action);
  background-blend-mode: multiply;
}
#zineApp .rewind-read-cue[hidden],
#zineApp[data-rewind-cue="none"] .rewind-read-cue,
#zineApp:not([data-phase="running"]) .rewind-read-cue {
  display: none;
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  #zineApp .rewind-badge[data-rewind-material="cassette"], #zineApp .rewind-cassette, #zineApp .rewind-spool,
  #zineApp .rewind-badge[data-rewind-material="cassette"] .rewind-badge-copy strong, #zineApp .rewind-read-cue {
    animation: none !important;
  }
}
@media (forced-colors: active) {
  #zineApp .rewind-badge[data-rewind-material="cassette"] { background: Canvas; border: 1px solid CanvasText; }
  #zineApp .rewind-cassette-body { background: Canvas; border: 2px solid CanvasText; filter: none !important; }
  #zineApp .rewind-reel { background: Canvas; border: 1px solid CanvasText; box-shadow: none; }
  #zineApp .rewind-spool { background: Canvas !important; border: 3px dashed CanvasText; box-shadow: none; filter: none !important; }
  #zineApp .rewind-badge[data-rewind-material="cassette"] .rewind-badge-copy strong,
  #zineApp .rewind-badge[data-rewind-material="cassette"] #zineRewindBadgeState,
  #zineApp .rewind-badge[data-rewind-material="cassette"] #zineRewindBadgeDetail { color: CanvasText; }
  #zineApp .rewind-badge[data-rewind-material="cassette"] #zineRewindBadgeDetail { background: Canvas; clip-path: none; border-top: 1px solid CanvasText; }
  #zineApp .rewind-read-cue { color: CanvasText; background: Canvas; border: 1px solid CanvasText; filter: none; rotate: none; }
  #zineApp .rewind-read-cue::before { background: Canvas !important; clip-path: none; box-shadow: none; }
}