/* A single physical stock family for the three games that still used coarse
   polygon teeth on their actions. Royale already has photographed tickets.
   Only the material child is masked: live text, hit targets and focus stay
   native. The opaque inner mask is deliberate degraded-network protection. */
:is(#zineApp, #zineStoryApp, #zineCaseApp) {
  --action-fibre-edge: url("assets/nachtzine/release/score-paper-v1.webp");
  --action-contact-shadow: drop-shadow(.7px 1.4px .6px #20182080);
  --action-raised-shadow: drop-shadow(2px 4px 2px #20182038);
}
#zineApp .zine-controls .zine-button::before,
#zineStoryApp .story-button .story-control-paper,
#zineCaseApp .case-button .case-button-paper {
  clip-path: none !important;
  /* Preserve a safe rectangular centre if the decorative outline is absent.
     The second alpha source cannot erase readable ink or the button itself. */
  /* End tears scale with paper height, not with a long button's width.
     The centre piece supplies the quiet upper/lower fibres between them. */
  mask-image: var(--action-fibre-edge), var(--action-fibre-edge), var(--action-fibre-edge), linear-gradient(#000, #000);
  mask-position: left center, right center, center, center;
  mask-size: auto 100%, auto 100%, calc(100% - 46px) 100%, calc(100% - max(22px, 14%)) calc(100% - 18px);
  mask-repeat: no-repeat;
  mask-composite: add;
  background-size: 470px;
  background-position: 71px 133px;
}
#zineApp .zine-controls .zine-button::before { inset: -4px -5px; }
#zineStoryApp .story-button .story-control-paper,
#zineCaseApp .case-button .case-button-paper { inset: -4px -5px; }

/* Quiet back sides, one direction of light. No bevel on ink and no filter on
   the whole playing field. Existing pressure animation remains sole owner. */
#zineApp .zine-controls .zine-button,
#zineStoryApp .story-button,
#zineCaseApp .case-button {
  filter: var(--action-contact-shadow) var(--action-raised-shadow);
}
#zineApp .zine-controls .zine-button:not(:disabled):active,
#zineStoryApp .story-button:not(:disabled):active,
#zineCaseApp .case-button:not(:disabled):active {
  filter: var(--action-contact-shadow);
}
#zineApp .zine-controls :is(.pause-action, .stop-action)::before,
#zineStoryApp .story-back .story-control-paper,
#zineCaseApp .case-secondary .case-button-paper {
  background-position: 297px 46px;
}

/* This peripheral tab should not compete with the paper game's main action.
   It still has its real 48px target and a visible opt-in state. */
.zine-utilities .sound-toggle {
  background-image: linear-gradient(#221f25e8, #221f25e8), var(--stock);
  background-size: auto, 370px;
  box-shadow: 1px 2px 1px #17121a45;
}

@media (forced-colors: active) {
  #zineApp .zine-controls .zine-button::before,
  #zineStoryApp .story-button .story-control-paper,
  #zineCaseApp .case-button .case-button-paper { mask: none; }
  #zineApp .zine-controls .zine-button,
  #zineStoryApp .story-button,
  #zineCaseApp .case-button { filter: none; }
  .zine-utilities .sound-toggle { background: ButtonFace; box-shadow: none; }
}