/* Release scene direction. These rules consume the existing game phases and
   finite arrival hooks; they never add a clock, an input lock or game rules.
   Real paper, its classification tab and its printed words stay one object. */

/* STORY / a new assignment is pulled from a small stack and placed on the
   desk. The two blank backs are permanent props, not copies of scenario text. */
#zineStoryApp .story-desk { isolation: isolate; }
#zineStoryApp .story-desk::before,
#zineStoryApp .story-desk::after {
  content: "";
  position: absolute; z-index: 0; inset: 8px 1% 3px 20%;
  pointer-events: none;
  background: var(--stock) 161px 32px / 850px;
  clip-path: polygon(.2% 1.6%, 12% 0, 34% .7%, 57% 0, 78% .8%, 99.4% .2%, 100% 97.4%, 87% 99.2%, 64% 98.8%, 39% 100%, 17% 99.2%, 0 98%);
  transform: rotate(1deg);
  filter: drop-shadow(1px 2px 1px #102e2b66);
}
#zineStoryApp .story-desk::before {
  /* Shorter, offset backs expose two unequal corners, never a uniform
     double border along the entire reading sheet. */
  inset: 10px 19% -5px 3%;
  background-position: 317px 96px;
  transform: rotate(-1.2deg);
}
#zineStoryApp .story-sheet { z-index: 1; }
#zineStoryApp .story-sheet[data-arrival="a"] { animation: story-pull-a 420ms steps(1, end) both; }
#zineStoryApp .story-sheet[data-arrival="b"] { animation: story-pull-b 420ms steps(1, end) both; }
@keyframes story-pull-a {
  0% { transform: translate(32px, -18px) rotate(1.15deg); }
  25% { transform: translate(16px, -9px) rotate(.2deg); }
  50% { transform: translate(-3px, 3px) rotate(-.9deg); }
  75%, 100% { transform: rotate(-.55deg); }
}
@keyframes story-pull-b {
  0% { transform: translate(-30px, -16px) rotate(-2deg); }
  25% { transform: translate(-13px, -8px) rotate(-1.2deg); }
  50% { transform: translate(3px, 2px) rotate(-.2deg); }
  75%, 100% { transform: rotate(-.55deg); }
}
/* The hand-off concludes before Flowbot acknowledges it. This replaces the
   old simultaneous nod, inside the same controller's 650ms cleanup window. */
#zineStoryApp[data-mood="cheer"] .story-host {
  animation: story-pass-nod 210ms steps(1, end) 420ms both;
}
@keyframes story-pass-nod {
  0% { transform: rotate(-9deg); }
  33% { transform: translate(2px, -3px) rotate(-5deg); }
  66%, 100% { transform: rotate(-9deg); }
}

/* CASE / ink-stamped countdown instead of ruler-perfect bars. A tiny inline
   silhouette is intentional: a missing decorative network asset must never
   make the countdown disappear. Each 20-unit cell has a clear four-unit gap;
   the engine's existing 5% steps therefore remove whole stamps only. */
#zineCaseApp .case-countdown {
  clip-path: none;
  background-color: #25253620;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cpattern id='p' width='60' height='24' patternUnits='userSpaceOnUse'%3E%3Cpath fill='white' d='M2 2L17 1L18 21L4 23Z M23 1L37 3L36 23L22 21Z M43 3L58 1L57 22L42 23Z'/%3E%3C/pattern%3E%3C/defs%3E%3Cpath fill='url(%23p)' d='M0 0H400V24H0Z'/%3E%3C/svg%3E"), var(--ink-grain-mask, linear-gradient(#000, #000));
  mask-size: 100% 100%, 192px 160px;
  mask-position: 0 0, 73px 11px;
  mask-repeat: no-repeat, repeat;
  mask-composite: intersect;
}
/* The stamped instruction is already physically attached to the cover.
   Different ink and a stronger rule make recall distinct without moving
   words, replaying a stamp on return, or flattening the two-sided cover. */
#zineCaseApp[data-cover-content="recall"] .case-stamp {
  color: #233e83;
  border: 0;
  transform: rotate(-3.2deg);
}
#zineCaseApp[data-cover-content="recall"] .case-stamp::before { border-width: 7px; }
#zineCaseApp[data-phase="recall"] .case-folder-tab::before {
  background-color: #f4e7c6;
}
#zineCaseApp[data-phase="recall"] .case-phase { color: #233e83; }

/* ROYALE / the match end is a different scene, not another turn. Every name
   and every heart remains readable in an orderly final ledger. Live seats
   never move; only the explicit terminal matchEnd phase composes the ledger. */
@media (min-width: 901px) and (min-height: 561px) {
  /* A name is an identity, not a headline to balance across two lines.
     Reuse the existing per-card width fitter for large live rosters too;
     ordinary long names shrink slightly rather than orphaning their last
     letter. The original fixed name track and all seat positions remain. */
  #zineRoyaleApp.bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score-name {
    --score-name-ceiling: 28; --score-name-floor: 18; --score-name-lines: 1;
    white-space: nowrap; overflow-wrap: normal; text-wrap: nowrap;
  }
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="2"], [data-player-count="3"], [data-player-count="4"]) .zine-controls {
    top: 84%; left: 28%; width: 44%; height: 9%;
    display: flex; flex-direction: row; gap: clamp(16px, 2cqw, 30px);
    align-items: center;
  }
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="2"], [data-player-count="3"], [data-player-count="4"]) .main-action {
    width: auto; flex: 1 1 0; min-width: 0; min-height: 48px;
    font-size: clamp(23px, 2.2cqw, 37px);
  }
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="2"], [data-player-count="3"], [data-player-count="4"]) .stop-action {
    flex: 0 0 auto; min-width: 82px; padding-inline: 15px;
    font-size: clamp(22px, 1.8cqw, 28px);
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result {
    left: 25%; top: 31%; width: 50%; height: 29%;
    padding: 18px 32px 14px; gap: clamp(10px, 1.4cqh, 20px);
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result::after { inset: -14% -8%; }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result::before {
    top: -35%; width: clamp(96px, 10cqw, 160px);
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result-label {
    font-size: clamp(24px, 2cqw, 34px); letter-spacing: .055em;
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .zine-controls {
    top: 67%; left: 32%; width: 36%; height: 8%;
    flex-direction: row; justify-content: center;
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .main-action {
    width: 100%; flex: 0 1 360px; min-height: 48px;
    font-size: clamp(26px, 2.4cqw, 38px);
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-scores {
    position: absolute; z-index: 5; left: 16%; right: 16%; top: 82%; bottom: 4%;
    width: auto; max-width: none; padding: 0;
    display: grid; grid-template-columns: repeat(var(--score-columns, 3), minmax(0, 1fr));
    grid-template-rows: repeat(var(--score-rows, 1), minmax(0, 1fr));
    gap: clamp(10px, 1.2cqw, 20px) clamp(16px, 2cqw, 32px);
    align-items: stretch;
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-score:nth-child(n) {
    --score-name-ceiling: 28; --score-name-floor: 19; --score-name-lines: 1;
    position: relative; top: auto; left: auto; width: auto; height: auto;
    padding: 6px 16px; gap: 6px; opacity: 1;
    transform: rotate(var(--table-card-rest-angle));
    filter: var(--table-shadow-flat);
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-score[data-eliminated="true"]::before { filter: brightness(.9); }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-score[data-eliminated="false"]::after { opacity: 1; }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-score-name {
    --score-name-ceiling: 28; --score-name-floor: 19; --score-name-lines: 1;
    height: 32px; flex: 0 0 32px; line-height: 1.02;
    color: var(--ink); white-space: nowrap; overflow-wrap: normal;
    /* text-wrap:balance would undo white-space:nowrap and silently select
       the older 14px compact-name fallback in the presentation fitter. */
    display: grid; align-content: center; text-wrap: nowrap;
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-hearts { gap: 5px; }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-score .paper-heart { width: 20px; height: 21px; }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .zine-character {
    left: 18%; top: 37%; width: 13%;
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"]:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-scores {
    top: 76%; bottom: 3%; left: 16%; right: 16%; gap: 10px 22px;
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"]:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score:nth-child(n) {
    --score-name-ceiling: 24; --score-name-floor: 18;
    padding: 3px 13px; gap: 3px;
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"]:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score-name {
    --score-name-ceiling: 24; --score-name-floor: 18; --score-name-lines: 1;
    height: 30px; flex-basis: 30px;
    white-space: nowrap; overflow-wrap: normal; text-wrap: nowrap;
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"]:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score .paper-heart { width: 16px; height: 17px; }
}

@media (max-width: 900px), (max-height: 560px) {
  /* Compact modes retain their proven geometry and their smaller host pose. */
  #zineStoryApp[data-mood="cheer"] .story-host { animation: none; }
  #zineStoryApp .story-desk::before { inset: 7px 19% -3px 3%; }
  #zineStoryApp .story-desk::after { inset: 4px 1% 2px 20%; }
}
@media (prefers-reduced-motion: reduce) {
  #zineStoryApp .story-sheet[data-arrival],
  #zineStoryApp[data-mood="cheer"] .story-host { animation: none !important; }
}
@media (forced-colors: active) {
  #zineStoryApp .story-desk::before,
  #zineStoryApp .story-desk::after { display: none; }
  #zineCaseApp .case-countdown { mask: none; background: GrayText; }
  #zineCaseApp .case-countdown span { background: Highlight; }
  #zineCaseApp[data-cover-content="recall"] .case-stamp,
  #zineCaseApp[data-phase="recall"] .case-phase { color: CanvasText; }
  #zineCaseApp[data-phase="recall"] .case-folder-tab::before { background: Canvas; }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-score-name { color: CanvasText; }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-score[data-eliminated="true"]::before { filter: none; }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-score[data-eliminated="false"] { outline: 3px solid Highlight; }
}