/* Results list: mobile-only overrides (same touch + narrow condition as home-mobile.css).
   Everything below the first rule lives inside the media query, so the PC design is untouched. */
.draw-list-chevron { display: none; }

@media (max-width: 899px) {
  .desktop-site .results-page * { min-width: 0; }

  /* hero: title on top, round picker full width below */
  .desktop-site .results-page:not(.detail-page) .results-hero-inner { min-height: 0; padding: 28px 0 24px; flex-direction: column; align-items: stretch; gap: 20px; }
  .desktop-site .results-hero h1 { font-size: 30px; }
  /* the small description under the title and the label above the picker are not shown on mobile */
  .desktop-site .results-hero h1 + span,
  .desktop-site .results-hero-shortcut > span { display: none; }
  .desktop-site .results-page:not(.detail-page) .results-hero-inner { padding: 24px 0 20px; gap: 14px; }
  .desktop-site .results-hero-shortcut { justify-items: start; gap: 0; width: 100%; }

  /* smaller round picker (only inside this hero, the stores page shares the component) */
  .desktop-site .results-hero-shortcut .round-select-wrap { width: 160px; max-width: 100%; }
  .desktop-site .results-hero-shortcut .round-select-wrap::after { right: 16px; width: 7px; height: 7px; }
  .desktop-site .results-hero-shortcut .round-select { height: 40px; border-radius: 20px; padding: 0 34px 0 16px; font-size: 14px; }

  /* list card */
  .desktop-site .results-archive { margin-top: 16px; border-radius: 16px; }
  .desktop-site .draw-table-head { display: none; }

  /* one row = round | numbers | > button. prizes, date and the text link are hidden */
  .desktop-site .draw-list-row {
    grid-template-columns: 44px minmax(0, 1fr) 32px;
    column-gap: 8px;
    min-height: 0;
    padding: 16px 12px 16px 14px;
  }
  .desktop-site .draw-list-prizes,
  .desktop-site .draw-list-date,
  .desktop-site .draw-list-action-label { display: none; }

  .desktop-site .draw-list-round { gap: 4px; }
  .desktop-site .draw-list-round span { padding: 3px 7px; font-size: 10px; }
  .desktop-site .draw-list-round strong { font-size: 16px; font-weight: 700; }

  /* 6 balls + plus + bonus always stay on one line: ball size follows the screen width */
  .desktop-site .draw-number-row { justify-content: flex-start; gap: 4px; flex-wrap: nowrap; }
  .desktop-site .draw-number-row .result-ball {
    --row-ball: min(34px, calc((100vw - 154px) / 7));
    width: var(--row-ball);
    height: var(--row-ball);
    flex: 0 0 var(--row-ball);
    font-size: calc(var(--row-ball) * .42);
  }
  .desktop-site .draw-number-row > i { margin: 0; font-size: 14px; }

  .desktop-site .draw-list-action { justify-content: flex-end; }
  .desktop-site .draw-list-action a { min-width: 0; width: 32px; height: 32px; border-radius: 50%; padding: 0; }
  .desktop-site .draw-list-action a:hover { background: #fff; color: #252a30; border-color: #ddd; }
  .desktop-site .draw-list-chevron { display: block; font-size: 22px; line-height: 1; transform: translateY(-1px); }

  .desktop-site .results-notice { margin: 14px 16px 18px; font-size: 12px; }
  .desktop-site .results-pagination { min-height: 68px; }
}

/* hero: round picker sits to the right, next to the title */
@media (max-width: 899px) {
  .desktop-site .results-page:not(.detail-page) .results-hero-inner { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; }
  .desktop-site .results-hero-shortcut { width: auto; flex: 0 0 auto; justify-items: end; }
  .desktop-site .results-hero-shortcut .round-select-wrap { width: 132px; }
}