/* Royale / fixed seats, a raised bomb and a foreground reading slip.
   Desktop composition only. The bomb rig, fuse registration, light pool,
   animation poses, life accounting and timers remain with their owners. */
@media (min-width: 901px) and (min-height: 561px) {
  #zineRoyaleApp { --royale-seat-rows: 1; }
  #zineRoyaleApp:is([data-player-count="3"], [data-player-count="4"]) {
    --royale-seat-rows: 2;
    /* These rosters retain the larger/lower bomb rig. Reserve the entire
       original fuse arc above the right seat, including its spark poses. */
    --royale-seat-top: 34%; --royale-seat-bottom: 14%;
  }
  #zineRoyaleApp[data-player-count="4"] { --royale-slip-top: 62%; --royale-action-top: 86%; }
  #zineRoyaleApp:is([data-player-count="5"], [data-player-count="6"]) { --royale-seat-rows: 3; }
  #zineRoyaleApp:is([data-player-count="7"], [data-player-count="8"]) { --royale-seat-rows: 4; }

  /* Two fixed reading rows; neither a short word nor a one-word turn changes
     the sheet. The native fitter still owns the actual lettering size. */
  html #zineRoyaleApp #royaleWords {
    left: 24%; right: auto; top: var(--royale-slip-top, 58%); width: 52%; height: 20%;
    padding: 12px 20px; gap: 4px;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  /* Alternate left/right seats in roster order. Eliminated players keep
     their slot, including the final score: no rearrangement on a life loss.
     The centre track is empty space for the actor and its reading slip. */
  html #zineRoyaleApp #royaleScores {
    position: absolute; z-index: 5;
    inset: var(--royale-seat-top, 18%) 3% var(--royale-seat-bottom, 18%); width: auto; height: auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 4fr) minmax(0, 1fr);
    grid-template-rows: repeat(var(--royale-seat-rows), minmax(0, 1fr));
    align-items: center; justify-content: normal;
    gap: 14px 0; padding: 0; margin: 0; translate: none;
  }
  html #zineRoyaleApp #royaleScores .royale-score:nth-child(n) {
    position: relative; inset: auto; margin: 0;
    width: 100%; height: clamp(94px, 12svh, 116px); min-width: 0;
    padding: 10px 20px; gap: 5px;
    --score-name-ceiling: 36;
    --score-name-lines: 1;
  }
  html #zineRoyaleApp #royaleScores .royale-score:nth-child(odd) { grid-column: 1; }
  html #zineRoyaleApp #royaleScores .royale-score:nth-child(even) { grid-column: 3; }
  html #zineRoyaleApp #royaleScores .royale-score:nth-child(-n+2) { grid-row: 1; }
  html #zineRoyaleApp #royaleScores .royale-score:nth-child(n+3):nth-child(-n+4) { grid-row: 2; }
  html #zineRoyaleApp #royaleScores .royale-score:nth-child(n+5):nth-child(-n+6) { grid-row: 3; }
  html #zineRoyaleApp #royaleScores .royale-score:nth-child(n+7) { grid-row: 4; }
  html #zineRoyaleApp #royaleScores .royale-score-name {
    --score-name-ceiling: 32; --score-name-lines: 1;
    box-sizing: border-box; flex: 0 0 40px;
    height: 40px; min-height: 0; padding: 4px 0; margin: 0;
    line-height: 1; white-space: nowrap;
  }
  html #zineRoyaleApp #royaleScores .paper-heart { width: 25px; height: 26px; }

  /* One stable action centre. Stop occupies its own small neighbouring track,
     so its disappearance never drags the main button off the sheet's axis. */
  html #zineRoyaleApp:not([data-phase="setup"], [data-phase="loading"]) #royaleBoard ~ .zine-controls {
    position: absolute; left: 22%; right: auto; top: var(--royale-action-top, 84%); bottom: auto;
    width: 56%; height: 62px; padding: 0; margin: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 350px) minmax(0, 1fr);
    align-items: center; gap: 0 22px;
  }
  html #zineRoyaleApp #royaleMainAction {
    grid-column: 2; grid-row: 1; justify-self: center;
    width: 100%; min-height: 56px; height: 56px;
    font-size: clamp(25px, 2.2cqw, 34px);
    padding: 8px 20px;
  }
  html #zineRoyaleApp #royaleStopAction {
    grid-column: 3; grid-row: 1; justify-self: start;
    width: auto; min-width: 70px; min-height: 44px; height: 44px;
    padding: 6px 12px; font-size: 23px;
  }

  /* Setup is an invitation, not a full-width form. The photographed stock and
     shared paper contours cast their own shadows; ink never gets a filter. */
  html #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .royale-flow {
    width: min(60%, 820px); top: 53%; bottom: auto;
    padding: clamp(26px, 3.5svh, 40px) clamp(28px, 3cqw, 46px);
    gap: 12px;
  }
  html #zineRoyaleApp.bomtafel .royale-setup-scroll {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 12px; gap: 12px;
  }
  html #zineRoyaleApp #royaleSetup .settings-group {
    align-self: center; width: 100%; margin: 0;
  }
  html #zineRoyaleApp #royaleSessionRoster {
    width: 100%; max-width: 650px; justify-content: center;
    gap: 12px 16px;
  }
  html #zineRoyaleApp #royaleSessionRoster > span {
    padding: 10px 18px; font-size: clamp(25px, 2.1cqw, 32px);
  }
  html #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .zine-controls {
    width: 100%; height: auto; padding: 8px 0 10px; align-items: center;
  }
  html #zineRoyaleApp:is([data-phase="setup"], [data-phase="loading"]) #royaleMainAction {
    width: min(100%, 350px); flex: none;
  }

  /* Loss and victory use one paper plane and the same fixed seats/controls.
     Keep the crown's existing arrival, not a second celebration mechanism. */
  html #zineRoyaleApp #royaleResult {
    left: 25%; right: auto; top: 43%; bottom: auto;
    width: 50%; height: 27%; aspect-ratio: auto; translate: none;
    padding: 22px 32px; gap: 10px;
  }
  html #zineRoyaleApp #royaleResult .royale-result-paper { inset: -12px -16px; }
  html #zineRoyaleApp #royaleResultName { width: 100%; }
  html #zineRoyaleApp[data-phase="matchEnd"] #royaleResult::before {
    top: -35%; width: clamp(100px, 9cqw, 145px);
  }

  @media (max-height: 780px) {
    html #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .royale-flow {
      width: min(66%, 820px); top: 54%; padding: 22px 30px; gap: 8px;
    }
    html #zineRoyaleApp.bomtafel .royale-setup-scroll { gap: 8px; padding: 6px 10px; }
    html #zineRoyaleApp #royaleSessionRoster { gap: 8px 12px; }
    html #zineRoyaleApp #royaleSessionRoster > span { padding: 8px 15px; font-size: 25px; }
    html #zineRoyaleApp #royaleScores .royale-score:nth-child(n) { padding: 7px 16px; gap: 3px; }
    html #zineRoyaleApp #royaleScores .paper-heart { width: 22px; height: 23px; }
    html #zineRoyaleApp #royaleWords { padding-block: 10px; }
    html #zineRoyaleApp #royaleResult { padding: 14px 24px; gap: 8px; }
  }

  /* The stage already has a 580px minimum. At its shortest desktop size,
     fraction-only rows shrink below the physical cards: reserve their real
     height so the fuller victory papers cannot touch their neighbours. */
  @media (max-height: 680px) {
    html #zineRoyaleApp:is([data-player-count="7"], [data-player-count="8"]) #royaleScores {
      grid-template-rows: repeat(4, minmax(94px, 1fr));
    }
  }
}