/* Scene-specific art direction, not a new ruleset or a generic UI skin.
   Reusable paper stock carries native, accessible print. The existing Story
   arrival hook is the sole owner of the moving sheet; hosts keep their owner. */

@media (min-width: 901px) and (min-height: 561px) {
  /* STORY / a tear-off director's pad. The glued head and the unequal paper
     supply remain on the desk; the typed brief is one detachable object. */
  #zineStoryApp .story-desk {
    --pad-binding: #d95632;
    --pad-underprint: #294a44;
    width: 87%;
  }
  #zineStoryApp .story-desk::before {
    inset: 25px -9px -9px 5px;
    background-position: 317px 96px;
    transform: rotate(.35deg);
    clip-path: polygon(.2% 1%, 99.2% .2%, 100% 98%, 87% 99.3%, 52% 98.7%, 20% 100%, 0 98.8%);
    filter: drop-shadow(1px 2px 1px #102e2b5c) drop-shadow(3px 6px 3px #102e2b32);
  }
  #zineStoryApp .story-desk::after {
    z-index: 1; inset: 0 -3px auto 0; height: 48px;
    background: var(--pad-binding) var(--stock) 28px 211px / 710px;
    background-blend-mode: multiply;
    clip-path: polygon(.2% 17%, 9% 6%, 28% 9%, 45% 0, 68% 5%, 82% 1%, 99.5% 8%, 100% 94%, 77% 99%, 50% 94%, 26% 100%, .3% 91%);
    transform: rotate(-.3deg);
    filter: drop-shadow(0 2px .6px #3d2b2450);
  }
  #zineStoryApp .story-sheet {
    top: 29px; height: calc(100% - 29px); z-index: 2;
    transform: rotate(-.35deg);
  }
  #zineStoryApp .story-paper-lift::before {
    content: ""; position: absolute; z-index: 1;
    top: 12px; left: 3%; right: 3%; height: 4px;
    /* Small punched breaks belong to the sheet and travel with its print. */
    background: repeating-linear-gradient(90deg, #76604665 0 5px, transparent 5px 17px);
    mask: var(--ink-grain-mask, none) 0 0 / 192px 160px repeat;
    transform: rotate(.1deg); pointer-events: none;
  }
  #zineStoryApp .story-copy { padding-top: clamp(74px, 8.6vh, 94px); padding-bottom: clamp(30px, 4vh, 48px); }
  #zineStoryApp .story-type {
    top: 25px; translate: -50% 0; min-height: 38px;
    padding: 4px 14px 7px;
    font-size: clamp(25px, 2.25vw, 36px);
    color: var(--pad-binding); filter: none; transform: rotate(-1.1deg);
  }
  #zineStoryApp .story-type .story-control-paper { display: none; }
  #zineStoryApp .story-type::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    border: 2px solid currentColor;
    clip-path: polygon(0 2%, 18% 0, 37% 2%, 64% 0, 100% 3%, 99% 97%, 79% 100%, 50% 98%, 22% 100%, 1% 97%);
    mask: var(--ink-grain-mask, none) 0 0 / 192px 160px repeat;
  }
  #zineStoryApp .story-stroke { width: clamp(92px, 13vw, 190px); height: 7px; }
  #zineStoryApp .story-sheet[data-arrival="a"] { animation: story-pad-pull-a 420ms steps(1, end) both; }
  #zineStoryApp .story-sheet[data-arrival="b"] { animation: story-pad-pull-b 420ms steps(1, end) both; }
  @keyframes story-pad-pull-a {
    0% { transform: translate(16px, -19px) rotate(.8deg); }
    25% { transform: translate(8px, -9px) rotate(.25deg); }
    50% { transform: translate(-2px, 3px) rotate(-.6deg); }
    75%, 100% { transform: rotate(-.35deg); }
  }
  @keyframes story-pad-pull-b {
    0% { transform: translate(-14px, -18px) rotate(-1.1deg); }
    25% { transform: translate(-6px, -8px) rotate(-.7deg); }
    50% { transform: translate(2px, 2px) rotate(-.15deg); }
    75%, 100% { transform: rotate(-.35deg); }
  }

  /* CASE / a printed file cover and three index slips, rather than three
     independent dashboard buttons. Content state survives the physical fold;
     no phase selector changes the placement of print while the cover turns. */
  #zineCaseApp[data-cover-content="setup"] .case-cover-copy {
    align-items: flex-start; text-align: left;
    padding-left: 9%; padding-right: 9%;
    gap: clamp(24px, 3.6vh, 40px);
  }
  #zineCaseApp[data-cover-content="setup"] .case-stamp {
    font-size: clamp(46px, 5.5vw, 82px);
    transform: rotate(-3.2deg);
  }
  #zineCaseApp[data-cover-content="setup"] .case-hint {
    margin-left: 5px;
    font-size: clamp(25px, 2.1vw, 33px);
  }
  #zineCaseApp[data-cover-content="setup"] .case-levels {
    width: 100%; margin-top: clamp(12px, 2vh, 22px);
    gap: clamp(8px, 1vw, 16px);
  }
  #zineCaseApp .case-levels button {
    min-height: 100px; padding: 23px 14px 18px;
    text-align: center; font-size: clamp(25px, 2.5vw, 39px);
    transform: rotate(-.35deg);
  }
  #zineCaseApp .case-levels button:nth-of-type(2) { transform: rotate(.45deg); }
  #zineCaseApp .case-levels button:nth-of-type(3) { transform: rotate(-.6deg); }
  #zineCaseApp .case-levels .case-choice-paper {
    top: 0; bottom: -3px;
    /* Only the blank material gets a small index shoulder; native ink and
       focus outlines retain their full paint bounds and hit targets. */
    /* The shared material controller writes its ordinary torn contour inline.
       These three stock index slips deliberately replace only that contour. */
    clip-path: polygon(0 16%, 3% 15%, 6% 15.5%, 7% 2%, 12% 1%, 24% .5%, 33% 0, 34% 1%, 35% 15%, 48% 15.5%, 67% 14.4%, 84% 15.2%, 99% 14%, 100% 35%, 99.5% 54%, 100% 75%, 99.5% 98%, 77% 100%, 52% 98.5%, 26% 100%, 9% 99%, 0 98%, .6% 75%, 0 49%) !important;
  }
  #zineCaseApp .case-levels button[aria-pressed="true"] { transform: rotate(-.6deg); }
  #zineCaseApp .case-levels button[aria-pressed="true"]::after { bottom: 10px; }

  /* ROYALE / larger rosters keep their original fixed seats. Paper margins,
     not the readable names/hearts or hit boxes, become more economical. */
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score {
    --table-score-inset: 7% -1%;
    padding-inline: 18px;
  }
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-score-name {
    /* The old two-line 64px track survived the one-line name fitter. Collapse
       that unused line, not the letters, so hearts sit inside the paper. */
    height: 40px; flex: 0 0 40px;
  }
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .royale-bomb {
    top: 20%; width: min(42%, calc(min(100svh, 1040px) * .58));
  }
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .bomb-wick {
    /* Bend the complete registered fuse rightwards into free table space.
       (52%,34%) is its real attachment point, never a timing estimate. */
    transform: rotate(31deg) scaleY(.3); transform-origin: 52% 34%;
  }
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .bomb-spark {
    /* The same affine rotation as the wick: cos31=.857167, sin31=.515038.
       Read the eleven engine-owned positions, including the final neck. */
    left: calc(52% + (var(--spark-x) - 52%) * .857167 - (var(--spark-y) - 34%) * .3 * .515038);
    top: calc(34% + (var(--spark-x) - 52%) * .515038 + (var(--spark-y) - 34%) * .3 * .857167);
    width: 10%; height: 10%;
  }
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .zine-controls {
    left: 25%; width: 50%; top: 91%; height: 7%;
    display: flex; align-items: center; justify-content: center;
    gap: clamp(16px, 1.6cqw, 28px);
  }
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .main-action {
    flex: 0 1 370px; width: auto; max-width: 400px; min-width: 0; min-height: 48px;
    font-size: clamp(25px, 2.05cqw, 35px);
  }
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .main-action::before {
    inset: -50% -6%;
  }
  #zineRoyaleApp.bomtafel:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]):is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) .stop-action {
    flex: 0 0 auto; min-width: 82px; min-height: 48px; padding-inline: 15px;
    font-size: clamp(22px, 1.65cqw, 28px);
  }
}

@media (min-width: 901px) and (min-height: 561px) and (max-height: 800px) {
  #zineStoryApp .story-copy { padding-top: 65px; padding-bottom: 22px; }
  #zineStoryApp .story-type { top: 21px; font-size: 24px; min-height: 32px; }
  #zineStoryApp .story-sheet { top: 24px; height: calc(100% - 24px); }
  #zineStoryApp .story-desk::after { height: 39px; }
  #zineStoryApp .story-paper-lift::before { top: 8px; }
  #zineCaseApp[data-cover-content="setup"] .case-cover-copy { gap: 19px; }
  #zineCaseApp[data-cover-content="setup"] .case-stamp { font-size: clamp(42px, 4.2vw, 58px); }
  #zineCaseApp[data-cover-content="setup"] .case-levels { margin-top: 9px; }
  #zineCaseApp .case-levels button { min-height: 88px; padding-top: 21px; font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  #zineStoryApp .story-sheet[data-arrival] { animation: none !important; }
}
@media (forced-colors: active) {
  #zineStoryApp .story-desk::before, #zineStoryApp .story-desk::after,
  #zineStoryApp .story-paper-lift::before { display: none; }
  #zineStoryApp .story-type { color: CanvasText; }
  #zineStoryApp .story-type::before { mask: none; border-color: CanvasText; }
  #zineCaseApp .case-levels .case-choice-paper { clip-path: none; }
}