/* Proof-sheet controls: the hierarchy is ink first, paper second. Keep the
   approved palette and all native controls; this is not another console. */
#zineApp .zine-heading .ink-label::before,
#zineApp .settings-choices button::before {
  clip-path: none;
  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% - 40px) 100%, calc(100% - max(20px, 14%)) calc(100% - 16px);
  mask-repeat: no-repeat;
  mask-composite: add;
}
#zineApp .zine-heading .ink-label::before { inset: -3px -5px; }
#zineApp .settings-choices button {
  color: var(--ink);
  filter: drop-shadow(.5px 1px .5px #21152950) drop-shadow(1px 2px 1px #21152917);
}
#zineApp .settings-choices button::before {
  background: #f4ebd6 var(--stock) 71px 129px / 540px;
  background-blend-mode: multiply;
}
#zineApp .settings-choices button:nth-child(even)::before { background-position: 231px 17px; }
#zineApp .settings-choices button[aria-pressed="true"]::before {
  background-color: var(--action);
}
#zineApp .settings-choices button[aria-pressed="true"]::after {
  height: 3px; bottom: 7px;
  clip-path: polygon(0 20%, 78% 0, 100% 33%, 99% 78%, 18% 100%, 1% 75%);
}
#zineApp .settings-choices button:not(:disabled):active { filter: drop-shadow(.4px .5px .4px #21152950); }
/* Klaar only closes this sheet. The primary Start action remains outside it,
   so the closing action is a quiet ink link, not a third accent-colour CTA. */
#zineApp .settings-panel .settings-close {
  width: auto; min-width: 92px; background: none; color: var(--ink);
  filter: none; padding-inline: 14px;
}
#zineApp .settings-panel .settings-close::before { display: none; }
#zineApp .settings-panel .settings-close::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 9px;
  height: 2px; background: currentColor; rotate: -.6deg;
}
/* Reading focus is not a clickable ticket. On these light result sheets a
   single ink outline is clearer than the old stacked black/white button ring. */
#zineApp #zineChallengeScene:focus-visible .scene-title,
#zineRoyaleApp #royaleResult:focus-visible .royale-result-label {
  outline: 2px solid var(--ink);
  outline-offset: 7px;
  box-shadow: none;
}

@media (min-width: 901px) and (min-height: 561px) {
  /* A stable top line: switching the variant must not re-centre the entire
     settings form and move the exact button the player is looking at. */
  #zineApp .settings-scroll {
    display: flex; flex-direction: column; align-items: stretch;
    padding: clamp(60px, 8.4vh, 82px) clamp(34px, 3vw, 52px) clamp(36px, 5vh, 52px);
    gap: clamp(18px, 2.5vh, 28px);
  }
  #zineApp .settings-scroll > * { flex: 0 0 auto; }
  #zineApp .settings-group legend {
    font-size: clamp(21px, 2vw, 28px); padding-bottom: 10px;
  }
  #zineApp .settings-choices { gap: 13px; }
  #zineApp .settings-choices button {
    min-height: 54px; padding: 10px 10px 12px;
    font-size: clamp(22px, 2vw, 29px);
  }
  #zineApp .difficulty-choices { max-width: none; }
  #zineApp .mode-hint { font-size: clamp(19px, 1.6vw, 24px); max-width: 47ch; }
  #zineApp .settings-panel .settings-close { margin-top: auto; align-self: flex-end; min-height: 48px; font-size: 26px; }
  /* Keep the complete disclosure mark inside the native focus rectangle. */
  #zineRoyaleApp.bomtafel .game-toggle > .game-chevron { right: 0; }
}
@media (min-width: 901px) and (min-height: 561px) and (max-height: 780px) {
  #zineApp .settings-scroll { padding: 49px 30px 30px; gap: 15px; }
  #zineApp .settings-group legend { font-size: 22px; padding-bottom: 8px; }
  #zineApp .settings-choices { gap: 10px; }
  #zineApp .settings-choices button { min-height: 47px; padding-block: 8px 11px; font-size: 23px; }
  #zineApp .settings-panel .settings-close { min-height: 44px; font-size: 23px; }
}

/* One drawn chevron silhouette, retaining each game's existing accent. The
   old mixed thin borders looked like generic browser disclosure controls. */
.zine-stage :is(.game-chevron, .story-chevron, .case-chevron) {
  border: 0 !important; width: 18px !important; height: 12px !important;
  flex-basis: 18px !important; background: currentColor;
  clip-path: polygon(0 7%, 17% 0, 49% 56%, 80% 1%, 100% 16%, 51% 100%);
  transform: none !important; margin-top: 0;
}
.zine-stage .case-chevron { color: var(--folder); }
@media (forced-colors: active) {
  #zineApp #zineChallengeScene:focus-visible .scene-title,
  #zineRoyaleApp #royaleResult:focus-visible .royale-result-label { outline-color: Highlight; }
  #zineApp .zine-heading .ink-label::before, #zineApp .settings-choices button::before { mask: none; }
  #zineApp .settings-choices button { color: ButtonText; filter: none; }
  #zineApp .settings-choices button::before { background: ButtonFace; }
  #zineApp .settings-choices button[aria-pressed="true"] { color: HighlightText; }
  #zineApp .settings-choices button[aria-pressed="true"]::before { background: Highlight; }
  .zine-stage :is(.game-chevron,.story-chevron,.case-chevron) { forced-color-adjust: none; background: ButtonText; }
}

/* Identity refinement: one game title, one physical game object. The menu
   owns the platform signature; shared navigation has a stable corner without
   adding a toolbar or consuming any of the existing reading tracks. */
@media (min-width: 901px) and (min-height: 561px) {
  .zine-stage {
    --stage-nav-x: clamp(28px, 3.2vw, 58px);
    --stage-nav-y: clamp(22px, 3vh, 34px);
  }
  #zineApp .zine-heading {
    inset: var(--stage-nav-y) var(--stage-nav-x) auto;
  }
  #zineRoyaleApp.bomtafel .royale-heading {
    top: var(--stage-nav-y); left: var(--stage-nav-x);
    width: clamp(258px, 25vw, 370px);
  }
  #zineRoyaleApp.bomtafel .royale-heading .ink-label {
    font-size: clamp(28px, 2.6vw, 40px);
    padding: 12px 22px 15px;
  }
  #zineStoryApp .story-heading,
  #zineCaseApp .case-heading {
    position: absolute; z-index: 8;
    top: var(--stage-nav-y); left: var(--stage-nav-x); right: var(--stage-nav-x);
  }
  /* Explicit tracks keep the desk and controls in place after the header
     leaves grid flow. No word, folder or instruction sheet is resized. */
  #zineStoryApp .story-desk,
  #zineCaseApp .case-desk { grid-row: 2; }
  #zineStoryApp .story-controls,
  #zineCaseApp .case-controls { grid-row: 3; }
  #zineStoryApp .story-title,
  #zineCaseApp .case-title {
    font-size: clamp(34px, 3.2vw, 48px); line-height: .92;
    transform: rotate(-1.2deg); gap: 16px;
  }
  /* Back belongs beside the primary action, not in the utility corner.
     Story and Case retain their native DOM/tab order and central main button. */
  #caseBackAction,
  #storyBackAction {
    justify-self: end; margin-left: 0;
    font-size: clamp(23px, 2.1vw, 30px);
    padding: 14px 20px 18px;
  }
  #zineUtilities {
    left: max(18px, calc((100vw - 1840px) / 2 + 18px));
    bottom: 12px; gap: 8px;
  }
}

/* Sound and pairing are the same low-emphasis paper tabs, whether the LAN
   relay is present or not. Keep the visible labels and 44px hit areas. */
#zineUtilities :is(.sound-toggle, .remote-pair-button) {
  position: relative; isolation: isolate;
  min-height: 44px; padding: 8px 11px;
  font: 400 16px/1 "Nachtzine Print", sans-serif;
  color: var(--release-paper);
  background: none; clip-path: none;
  box-shadow: none; gap: 8px;
}
#zineUtilities :is(.sound-toggle, .remote-pair-button)::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: linear-gradient(#221f25ef, #221f25ef), var(--stock);
  background-size: auto, 370px;
  clip-path: polygon(0 6%, 34% 1%, 65% 3%, 99% 0, 100% 96%, 71% 99%, 31% 97%, 1% 100%);
  box-shadow: 1px 2px 1px #17121a45;
  pointer-events: none;
}
#zineUtilities :is(.sound-toggle, .remote-pair-button):hover::before { background-color: #382f3e; }
#zineUtilities :is(.sound-toggle, .remote-pair-button):focus-visible {
  outline: 3px solid var(--release-paper); outline-offset: 3px;
  box-shadow: 0 0 0 2px var(--release-ink);
}
/* On compact desktops two labelled tabs would overlap Back. Preserve their
   real controls and accessible names, with full labels on hover or focus.
   The game menu always keeps the expanded labels for discovery. */
@media (min-width: 901px) and (max-width: 1279px) and (min-height: 561px) {
  html:not([data-game-menu="open"]) #zineUtilities :is(.sound-toggle, .remote-pair-button) {
    width: 44px; min-width: 44px; padding: 0; justify-content: center;
  }
  html:not([data-game-menu="open"]) #zineUtilities :is([data-sound-label], [data-remote-label]) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  html:not([data-game-menu="open"]) #zineUtilities button:is(:hover, :focus-visible) :is([data-sound-label], [data-remote-label]) {
    bottom: calc(100% + 8px); left: 0; width: max-content; height: auto;
    padding: 8px 10px; overflow: visible; clip-path: none; pointer-events: none;
    background: var(--release-ink); color: var(--release-paper);
  }
}
@media (max-width: 900px), (max-height: 560px) {
  /* The relay's :has() layout must not override the existing small-screen
     policy. Both utilities remain available in the full game menu. */
  html:not([data-game-menu="open"]) #zineUtilities { display: none !important; }
}
@media (forced-colors: active) {
  #zineUtilities :is(.sound-toggle, .remote-pair-button) {
    color: ButtonText; background: ButtonFace; border: 1px solid ButtonText;
  }
  #zineUtilities :is(.sound-toggle, .remote-pair-button)::before { display: none; }
  #zineUtilities :is(.sound-toggle, .remote-pair-button):focus-visible { outline-color: Highlight; box-shadow: none; }
}