/* Royale's final art pass. Scene geometry is presentation only: no turn,
   heart, word, input or deadline is created here. Load after shipping.
   Native words keep their two fixed tracks and their existing fitter. */
@media (min-width: 901px) and (min-height: 561px) {
  /* Lower seats reserve a real utility gutter, including their rotated paper
     edges. Previously the phone tab could shave off Jimmy's card at 720p.
     Keep the upper seats, bomb, word tracks and action exactly where they are. */
  #zineRoyaleApp.bomtafel .royale-score:nth-child(1),
  #zineRoyaleApp.bomtafel .royale-score:nth-child(3),
  #zineRoyaleApp.bomtafel[data-player-count="2"] .royale-score:nth-child(2) {
    top: min(76%, calc(83% - 80px));
  }
  #zineRoyaleApp.bomtafel: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(78%, calc(87% - 80px));
  }
  #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .royale-flow {
    /* Keep the existing 65% form width, now centred without a host column.
       These offsets never apply to the live bomb, word or player tracks. */
    left: 17.5%; right: 17.5%; top: 13%; bottom: 5%; gap: clamp(16px, 2svh, 24px);
  }
  #zineRoyaleApp.bomtafel .royale-setup-scroll {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto;
    gap: clamp(12px, 1.6svh, 19px); padding: 20px 30px;
  }
  #zineRoyaleApp.bomtafel .royale-setup-scroll h2 {
    grid-column: 1; text-align: center; margin: 0 0 6px;
    font-size: clamp(38px, 3.5cqw, 56px); line-height: 1;
  }
  #zineRoyaleApp.bomtafel .royale-player-fields {
    grid-column: 1; width: 100%; max-width: 880px; justify-self: center;
    gap: clamp(12px, 1.7svh, 20px) clamp(20px, 2.2cqw, 34px);
    padding: 8px 10px;
  }
  #zineRoyaleApp.bomtafel .royale-player-field {
    min-height: clamp(72px, 9.3svh, 102px); padding: 12px 48px;
  }
  #zineRoyaleApp.bomtafel .royale-player-field:last-child:nth-child(odd) {
    grid-column: 1 / -1; width: calc(50% - clamp(10px, 1.1cqw, 17px)); justify-self: center;
  }
  #zineRoyaleApp.bomtafel .royale-player-field input {
    border-bottom-color: #271f3333; font-size: clamp(22px, 2.05cqw, 32px);
  }
  /* Editing changes the ink tint, not the outline or size of the sheet. */
  #zineRoyaleApp.bomtafel .royale-player-field:focus-within::before {
    inset: -5px -7px; background: var(--table-score) center / 100% 100% no-repeat;
  }
  #zineRoyaleApp.bomtafel .royale-player-field::after {
    content: ""; position: absolute; z-index: -1; inset: -5px -7px;
    background: #a0d2b2; mask: var(--table-score) center / 100% 100% no-repeat;
    mix-blend-mode: multiply; opacity: 0; pointer-events: none;
  }
  #zineRoyaleApp.bomtafel .royale-player-field:focus-within::after { opacity: 1; }
  #zineRoyaleApp.bomtafel .royale-add { grid-column: 1; justify-self: center; min-height: 46px; font-size: 25px; }
  #zineRoyaleApp.bomtafel .royale-add:disabled { display: none; }
  #zineRoyaleApp.bomtafel .royale-setup .settings-group {
    grid-column: 1; width: min(100%, 500px); justify-self: center; text-align: center;
  }
  #zineRoyaleApp.bomtafel .royale-setup .settings-group legend {
    float: none; width: 100%; font-size: 23px; padding-bottom: 8px; text-align: center;
  }
  #zineRoyaleApp.bomtafel .royale-setup .difficulty-choices { gap: 16px; }
  #zineRoyaleApp.bomtafel .royale-setup .difficulty-choices button { font-size: 25px; }
  #zineRoyaleApp.bomtafel .royale-error { grid-column: 1; }
  #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .zine-controls { padding-bottom: 12px; }
  #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .main-action {
    width: min(100%, 350px); font-size: clamp(31px, 3cqw, 43px);
  }

  /* Trim empty material overscan, never the reading tracks or word font.
     The paper stays identical for one/two words, clears and handoffs. */
  #zineRoyaleApp.bomtafel .royale-words > .paper-surface { inset: -20% -5%; }
  /* A small printed corner reinforces the active mint seat. It shares the
     actual fibre mask and remains clear of both the name and its hearts. */
  #zineRoyaleApp.bomtafel[data-phase="running"] .royale-score[data-active="true"]::after {
    background: linear-gradient(135deg, #233e32 0 43%, transparent 44%) left top / 13% 32% no-repeat, var(--table-active-tint);
  }

  /* One physical award carries the native name + hearts. The asset's central
     cream area is mapped to this fixed text box, never a per-name geometry. */
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result {
    left: 50%; top: 30%; width: min(58%, calc(min(100svh, 1040px) * .87));
    height: auto; aspect-ratio: 3.25; translate: -50% 0;
    padding: 16px 38px 10px; gap: clamp(8px, 1.2cqh, 14px);
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result::after {
    inset: auto; left: 50%; top: -73%; width: 108%; height: auto; aspect-ratio: 1.5;
    translate: -50% 0; background: url("assets/nachtzine/final-polish/royale/award-v1.webp") center / contain no-repeat;
    filter: drop-shadow(1px 2px .6px #21152985) drop-shadow(4px 8px 3px #21152935);
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result::before {
    left: 50%; top: -52%; width: clamp(106px, 10cqw, 155px);
    transform: rotate(-5deg); translate: -50% 0;
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result-label {
    font-size: clamp(22px, 2.1cqw, 31px); letter-spacing: .045em;
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result-hearts .paper-heart {
    width: clamp(26px, 3.1cqw, 40px); height: clamp(27px, 3.2cqw, 41px);
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .zine-controls { top: 63%; }
  /* The host deliberately stands beside the prize. A sliver hidden behind
     its left edge looked like accidental clipping, not a character pose. */
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .zine-character { left: 9%; top: 42%; width: 13%; }

  /* The existing material gate provides an explicit recoverable old-paper
     scene if the new asset cannot decode. Names/hearts never depend on it. */
  #zineRoyaleApp.bomtafel[data-material-state="fallback"][data-phase="matchEnd"] .royale-result::after {
    inset: -12% -8%; width: auto; height: auto; aspect-ratio: auto; translate: none;
    background: var(--table-paper) center / 100% 100% no-repeat;
  }
  #zineRoyaleApp.bomtafel[data-material-state="fallback"][data-phase="matchEnd"] .royale-result::before { top: -35%; }
}

@media (min-width: 901px) and (min-height: 561px) and (max-height: 780px) {
  #zineRoyaleApp.bomtafel:is([data-phase="setup"], [data-phase="loading"]) .royale-flow { top: 12%; bottom: 4%; gap: 12px; }
  #zineRoyaleApp.bomtafel .royale-setup-scroll { gap: 10px; padding: 14px 26px; }
  #zineRoyaleApp.bomtafel .royale-setup-scroll h2 { font-size: 39px; margin-bottom: 0; }
  #zineRoyaleApp.bomtafel .royale-player-fields { gap: 10px 26px; padding-block: 6px; }
  #zineRoyaleApp.bomtafel .royale-player-field { min-height: 66px; padding-block: 8px; }
  #zineRoyaleApp.bomtafel .royale-player-fields:is([data-count="7"],[data-count="8"]) .royale-player-field { min-height: 63px; padding-block: 6px; }
  #zineRoyaleApp.bomtafel .royale-setup .settings-group legend { font-size: 21px; padding-bottom: 4px; }
  #zineRoyaleApp.bomtafel .royale-setup .difficulty-choices button { font-size: 23px; }
}
/* The host is gone from Royale. In the compact fallback the remaining game
   must not auto-place into its historical 17–20% poster column. Desktop's
   absolute table composition is outside this query and stays unchanged. */
@media (max-width: 900px), (max-height: 560px) {
  #zineRoyaleApp.bomtafel { grid-template-columns: minmax(0, 1fr); }
}
@media (orientation: landscape) and (max-width: 900px),
       (orientation: landscape) and (max-height: 560px) {
  #zineRoyaleApp.bomtafel { padding-inline: 18px; }
  #zineRoyaleApp.bomtafel .royale-result { gap: 14px; }
  /* The taller compact fallback needs the same reserved crown lane as the
     short one; an absolute crown above the text covered its winner label. */
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result {
    padding-top: 0; padding-left: 110px;
  }
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result::before {
    left: 10px; top: 20%; width: 75px; height: 49px;
  }
  /* Turn the complete registered rig upright, not the wick or spark alone.
     This keeps the full fuse inside the narrow right-hand illustration bay
     without shortening it or changing the ten engine-owned burning steps. */
  #zineRoyaleApp.bomtafel .royale-bomb {
    rotate: -14deg; transform-origin: 50% 50%;
  }
}
@media (forced-colors: active) {
  #zineRoyaleApp.bomtafel .royale-player-field::after,
  #zineRoyaleApp.bomtafel[data-phase="matchEnd"] .royale-result::after { display: none; }
  #zineRoyaleApp.bomtafel .royale-player-field input { border-color: CanvasText; }
}