/* Shared interaction finish, not a new game layout. Two ink/paper lines
   remain visible on every game's field and on the dark shared menu. */
.zine-page {
  --control-ink: #211d24;
  --control-paper: #f2e5cf;
  --control-contact: #21152955;
  --control-cast: #21152930;
}
:is(#zineApp, #zineRoyaleApp, #zineStoryApp, #zineCaseApp, #zineGameMenu) :is(button, input):focus-visible,
#zineApp .press-crank:focus-visible {
  outline: 3px dashed var(--control-paper);
  outline-offset: 4px;
  box-shadow: 0 0 0 2px var(--control-ink);
}
:is(#zineApp, #zineRoyaleApp, #zineStoryApp, #zineCaseApp) input:focus-visible {
  outline-offset: 2px;
}
/* A result receives reading focus, not a giant new frame around the stage.
   Its existing heading carries the same mark instead. */
#zineChallengeScene:focus-visible, #royaleResult:focus-visible { outline: none; }
#zineChallengeScene:focus-visible .scene-title,
#royaleResult:focus-visible .royale-result-label {
  outline: 3px dashed var(--control-paper);
  outline-offset: 5px;
  box-shadow: 0 0 0 2px var(--control-ink);
}
#zineGameMenu { gap: 12px; padding: 15px; }
#zineGameMenu button { min-height: 48px; }
#zineGameMenu button:disabled { opacity: .5; }

/* One drawn chevron; no font-dependent dropdown glyph. */
.zine-stage .game-toggle > .game-chevron {
  display: inline-block; flex: 0 0 11px; width: 11px; height: 11px;
  border: solid currentColor; border-width: 0 3px 3px 0;
  transform: rotate(45deg); margin-top: -5px;
}
.zine-stage [data-zine-game-toggle]:disabled :is(.game-chevron, .story-chevron, .case-chevron) { visibility: hidden; }

/* Reuse the same illustrated sender, inside the two existing header slots. */
.game-brand { width: min(clamp(104px, 11vw, 174px), 18vh); margin: 0; transform: rotate(-4deg); flex: 0 0 auto; }
.game-brand picture, .game-brand img { display: block; width: 100%; height: auto; }
.game-brand img { clip-path: polygon(1% 5%, 98% 0, 100% 97%, 0 100%); }

#zineApp .zine-button {
  filter: drop-shadow(1px 2px 1px var(--control-contact)) drop-shadow(3px 6px 4px var(--control-cast));
}
#zineApp .zine-button:not(:disabled):active { filter: drop-shadow(1px 1px 1px var(--control-contact)); }

@media (min-width: 901px) and (min-height: 561px) {
  /* Centre the primary action, not the combined width of primary + Back.
     The assignment sheet keeps its existing size and coordinates. */
  #zineStoryApp .story-controls {
    display: grid; grid-template-columns: 1fr minmax(230px, 430px) 1fr;
    width: 88%; max-width: 1350px; justify-self: center; gap: 24px; padding: 0;
  }
  #storyMainAction { grid-area: 1 / 2; width: 100%; }
  #storyBackAction { grid-area: 1 / 1; justify-self: end; }
  /* A compact result imprint: score, missed word, then supporting record.
     No change to the press paper, live words, timer or action tracks. */
  #zineApp:is([data-phase="ending"], [data-phase="ended"]) .scene-content {
    grid-template-columns: minmax(0, 1fr); gap: clamp(10px, 1.7vh, 18px);
    align-content: safe center;
  }
  #zineApp:is([data-phase="ending"], [data-phase="ended"]) .scene-content > * { grid-column: 1; }
  #zineApp:is([data-phase="ending"], [data-phase="ended"]) .scene-score strong { font-size: clamp(68px, 9vh, 112px); }
  #zineApp:is([data-phase="ending"], [data-phase="ended"]) .scene-missed { width: 100%; max-width: 100%; }
  #zineApp:is([data-phase="ending"], [data-phase="ended"]) .scene-missed strong { font-size: clamp(25px, 2.7vw, 40px); }
  #zineApp:is([data-phase="ending"], [data-phase="ended"]) .scene-best { margin-top: 4px; font-size: clamp(22px, 2vw, 28px); }
}
@media (min-width: 901px) and (max-width: 1100px) and (min-height: 561px) {
  /* Leave the left paper action clear of the host at small desktop widths. */
  #zineStoryApp .story-controls { grid-template-columns: 1fr minmax(230px, 35vw) 1fr; }
}
@media (max-width: 900px), (max-height: 560px) {
  .game-brand { display: none; }
}
@media (forced-colors: active) {
  :is(#zineApp, #zineRoyaleApp, #zineStoryApp, #zineCaseApp, #zineGameMenu) :is(button, input):focus-visible,
  #zineApp .press-crank:focus-visible,
  #zineChallengeScene:focus-visible .scene-title, #royaleResult:focus-visible .royale-result-label {
    outline: 3px solid Highlight; outline-offset: 4px; box-shadow: none;
  }
  #zineApp .zine-button, #zineApp .zine-button:not(:disabled):active { filter: none; }
}