/* ===============================================
   POLISH - FLUID SIDE SPACE (desktop layout in a smaller window)
   The desktop pages keep 150px of empty space on the left and the right. In a smaller window
   (a tablet, or a desktop browser with a wallet or other side panel open) that space squeezes
   the page. Here the side space shrinks smoothly with the window width, for the body, the
   header and the footer:  1920px and wider = 150px,  1400px = 40px,  narrow = 24px.
   Phone pages (768px and less) are not touched. To go back, remove this one <link>.
   =============================================== */

:root {
  --kd-pad-x: 150px;
}

@media (min-width: 769px) {
  :root {
    --kd-pad-x: clamp(24px, calc(22vw - 268px), 150px);
  }

  /* the body of every page */
  main[class$="-body"],
  .boards {
    padding-left: var(--kd-pad-x);
    padding-right: var(--kd-pad-x);
  }

  /* the header (guest and signed-in) */
  .header-d-wrap .header-d-details,
  .header-d-wrap .headerc-d-details {
    padding-left: var(--kd-pad-x);
    padding-right: var(--kd-pad-x);
  }

  /* the footer (guest and signed-in) */
  .footer-d-wrap .footer-d-pages,
  .footer-d-wrap .footerc-d-pages {
    padding-left: var(--kd-pad-x);
    padding-right: var(--kd-pad-x);
  }
}

/* In the middle sizes the footer links get a little closer, so they stay on one line. */
@media (min-width: 769px) and (max-width: 1500px) {
  .footer-d-wrap .footer-d-pages,
  .footer-d-wrap .footerc-d-pages {
    column-gap: 8px;
  }

  .footer-d-wrap .footer-d-pages a,
  .footer-d-wrap .footerc-d-pages a {
    letter-spacing: 0.04em;
  }
}

/* Home: the two boards are 450px each; in a narrow window they share the width instead. */
@media (min-width: 769px) and (max-width: 1050px) {
  .boards {
    gap: 12px;
  }

  .betboard,
  .totalboard {
    width: calc(50% - 6px);
    flex-shrink: 1;
  }
}

/* Race track: the title row (title, race number, S-Seed, Rules, clock) wraps in a narrow window. */
@media (min-width: 769px) and (max-width: 1250px) {
  .rt-titles {
    flex-wrap: wrap;
    row-gap: 10px;
    column-gap: 20px;
  }

  main[class$="-body"] h1.rt-title {
    font-size: 32px;
  }

  .rt-race-number {
    font-size: 24px;
  }

  .rt-titles-right,
  .rt-titles-meta {
    gap: 12px;
  }
}