/* Composition / 14 September 2026.
   The table has fixed seats, a raised actor and one unchanged reading ticket.
   Geometry is roster-owned, never word-, turn- or fuse-owned. Keep the rig's
   translate/rotate/animation and lighting intensities in their existing files.
   Compact layouts retain their established independent reading arrangement. */
@media (min-width: 901px) and (min-height: 561px) {
  /* With two players there is no upper seat. Spend that space on the bomb,
     rather than leave a vacant seat-sized bay above the whole duel. The word
     ticket retains its full two-row height and its original fitting width. */
  #zineRoyaleApp.bomtafel[data-player-count="2"] .royale-bomb {
    top: 8%;
  }
  #zineRoyaleApp.bomtafel[data-player-count="2"] .royale-words {
    top: 38%;
  }
  #zineRoyaleApp.bomtafel[data-player-count="2"]:not([data-phase="matchEnd"]) .royale-score:nth-child(n) {
    top: min(71%, calc(83% - 80px));
  }
  #zineRoyaleApp.bomtafel[data-player-count="2"]:not([data-phase="setup"], [data-phase="loading"], [data-phase="matchEnd"]) .zine-controls {
    top: 77%;
  }

  /* The third player's centre-top seat stays in its familiar position. Move
     only the complete bomb rig, revealing more body above the reading strip.
     Four players retain their original rig position: the fourth upper-right
     seat borders the full fuse arc. Eight-player tables reserve a whole row. */
  #zineRoyaleApp.bomtafel[data-player-count="3"] .royale-bomb {
    top: 16%;
  }
  #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: 17%;
  }

  /* Lower seats need a real gap above the controls, including their rotated
     corners and active-card motion, not just transparent photograph margins. */
  #zineRoyaleApp.bomtafel:not([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+4) {
    top: min(calc(78% - 32px), calc(87% - 112px));
  }

  /* Move the existing stage pool by precisely the actor's vertical delta.
     Its grain remains registered to the table; the ellipse, light levels,
     colour, pulse and release cadence are unchanged. No extra spotlight. */
  #zineRoyaleApp.bomtafel[data-player-count="2"] { --royale-composition-light-y: 39%; }
  #zineRoyaleApp.bomtafel[data-player-count="3"] { --royale-composition-light-y: 47%; }
  #zineRoyaleApp.bomtafel:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) { --royale-composition-light-y: 48%; }
  #zineRoyaleApp.bomtafel .royale-light-pool {
    mask: radial-gradient(ellipse 43% 69% at 51% var(--royale-composition-light-y, 51%), #000 0%, #000b 36%, transparent 100%);
  }

  /* One physical invitation holds the existing setup choices and Start.
     Reuse the decoded photographed paper, not a newly drawn flat panel.
     Its height follows actual content, so two names do not get an eight-
     player-sized slab. The flow itself never animates independently of ink. */
  #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .royale-flow {
    isolation: isolate;
    left: 50%; right: auto; top: 53%; bottom: auto;
    width: min(62%, 940px);
    translate: -50% -50%;
    max-height: calc(100% - 190px);
    padding: clamp(30px, 4svh, 44px) clamp(26px, 3cqw, 50px);
    gap: clamp(12px, 1.6svh, 20px);
  }
  #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .royale-flow::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    pointer-events: none;
    /* The source has about 16% transparent overscan at both ends. Register
       its real cut edge to this invitation's box, rather than accidentally
       using that transparency as the heading/button's paper margin. */
    background: var(--table-paper) center / 100% 145% no-repeat;
    filter: var(--wp-shadow-paper, var(--table-shadow-raised));
  }
  #zineRoyaleApp.bomtafel .royale-setup-scroll {
    gap: clamp(10px, 1.3svh, 16px);
    padding: 10px 14px;
  }
  #zineRoyaleApp.bomtafel .royale-setup-scroll h2 {
    font-size: clamp(36px, 3.15cqw, 52px);
    margin-bottom: 4px;
  }
  #zineRoyaleApp.bomtafel #royaleSessionRoster {
    width: 100%; margin: 4px auto;
    gap: 12px 16px;
  }
  #zineRoyaleApp.bomtafel #royaleSessionRoster > span {
    padding: 12px 22px;
    font-size: clamp(25px, 2.2cqw, 36px);
  }
  #zineRoyaleApp.bomtafel .royale-setup-scroll > .session-edit-group {
    margin: 0 auto 8px;
  }
  #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .zine-controls {
    padding: 10px 20px 14px;
  }

  /* The photograph is decorative. Native high-contrast mode keeps a solid
     invitation with a visible boundary, not image-dependent control ink. */
  @media (forced-colors: active) {
    #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .royale-flow::before {
      background: Canvas; border: 1px solid CanvasText; filter: none;
    }
  }
}

@media (min-width: 901px) and (min-height: 561px) and (max-height: 780px) {
  #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .royale-flow {
    width: min(66%, 940px); top: 55%;
    max-height: calc(100% - 150px);
    padding: 24px 30px; gap: 8px;
  }
  #zineRoyaleApp.bomtafel .royale-setup-scroll { padding: 8px 12px; gap: 8px; }
  #zineRoyaleApp.bomtafel .royale-setup-scroll h2 { font-size: 36px; }
  #zineRoyaleApp.bomtafel #royaleSessionRoster { gap: 8px 12px; }
  #zineRoyaleApp.bomtafel #royaleSessionRoster > span { padding: 9px 18px; font-size: 27px; }
  #zineRoyaleApp.bomtafel .royale-setup-scroll > .session-edit-group { margin-bottom: 2px; }
  #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .zine-controls { padding-block: 8px 10px; }
}