/* Desktop / 2K responsive layer for the standalone Riftbound rules page.
   Keep large-screen fixes separate from the page's mobile/tablet rules. */

@media (min-width: 821px) {
  :root {
    --rules-2k-edge: clamp(24px, 2.4vw, 48px);
    --rules-2k-readable: 1680px;
  }

  html,
  body {
    overflow-x: hidden;
  }

  body,
  #tnav,
  #rules-snav,
  #rules-snav-tab {
    zoom: 1 !important;
  }

  #main,
  #main *,
  .section,
  .section * {
    min-width: 0;
    box-sizing: border-box;
  }

  #main,
  .section {
    width: 100%;
    max-width: 100%;
  }

  .section:not(.section-hero):not(.section-board) > .section-banner,
  .section:not(.section-hero):not(.section-board) > .section-scroll {
    width: min(100%, var(--rules-2k-readable));
    max-width: var(--rules-2k-readable);
    margin-left: auto;
    margin-right: auto;
  }

  .deck-grid,
  .win-grid,
  .n2-grid,
  .n2-chain-layout,
  .turn-phases,
  .turn-states {
    min-width: 0;
  }

  .timing-table {
    max-width: 100%;
    overflow-x: auto;
  }

  .timing-header,
  .timing-row {
    min-width: 760px;
  }

  .rule-tooltip {
    max-width: min(340px, calc(100vw - (var(--rules-2k-edge) * 2)));
  }

  #rules-snav {
    width: 210px !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 10px 5px 16px !important;
    transform: translateX(-210px);
  }

  #rules-snav.open {
    transform: translateX(0);
  }
}