/* Mobile layout only. Prices, catalog, tiers and transaction logic are unchanged.
   Desktop >1100px keeps the existing layout. */
.nav-toggle { display: none; }
.card-disclosure { display: none; }
.modal-backdrop[hidden] { display: none !important; }

@media (max-width: 1100px) {
  html { scroll-padding-top: 112px; }
  .site-header__inner { min-height: 64px; padding-block: 10px; gap: 12px; }
  .site-header .brand { flex-shrink: 0; }
  .site-header .brand > svg { flex-shrink: 0; }
  .header-cta { gap: 8px; }
  .header-cta > .btn-primary { display: none; }
  .header-cta > :is(.js-connect, .js-wallet-link) { min-height: 44px; }
  .nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid var(--color-divider-strong); border-radius: 50%;
    color: var(--color-text-strong); background: var(--color-surface);
  }
  .nav-toggle span { width: 18px; height: 2px; background: currentColor; transition: transform 150ms; }
  .nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-header .nav {
    display: none; position: absolute; top: 100%; inset-inline: 0; z-index: 60;
    padding: 16px max(16px, env(safe-area-inset-left));
    background: var(--color-surface); border-bottom: 1px solid var(--color-divider-strong);
    max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .site-header .nav.is-open { display: grid; gap: 4px; }
  .site-header .nav a {
    display: flex; align-items: center; min-height: 48px;
    padding: 12px 16px; border-radius: 8px; font-size: 16px;
  }
  .site-header .nav a.active { background: var(--color-surface-2); }
  .site-header .nav a.active::after { display: none; }
  .site-header .nav .theme-toggle {
    width: 100%; height: 48px; justify-content: flex-start; gap: 12px;
    padding-inline: 16px; margin-top: 8px; border-radius: 8px;
  }
  .site-header .nav .theme-toggle::after { content: "Toggle theme"; font-size: 14px; }
  .winner-ticker { top: 64px; }
  .pricing-layout > *, .hero__grid > *, .split > *, .faq-page__layout > * { min-width: 0; }
  .quickstart__inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .quickstart__cta { justify-self: start; }
}

@media (max-width: 640px) {
  .container, .container-wide { padding-inline: max(16px, env(safe-area-inset-left)); }
  .site-header .brand { gap: 6px; }
  .site-header .brand > svg:first-child { width: 24px; height: 24px; }
  .site-header .brand-wordmark { width: 88px; height: 24px; }
  .site-header .brand-dot { display: none; }
  .header-cta > :is(.js-connect, .js-wallet-link) { padding-inline: 12px; font-size: 12px; }
  .wallet-chip { max-width: 144px; min-height: 44px; }
  .wallet-chip__addr { min-width: 0; }
  .hero { padding-block: 40px; }
  .hero__grid { gap: 24px; }
  .hero__sub { margin-top: 20px; }
  .hero__actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .hero__actions .btn { min-height: 52px; padding: 12px 16px; }
  .hero__meta { margin-top: 24px; gap: 12px 20px; font-size: 12px; }
  .prize-collage { width: 100%; max-width: 300px; margin-top: 12px; }
  .prize-collage__meta { font-size: 12px; flex-wrap: wrap; }
  .section { padding-block: 48px; }
  .section-header { gap: 16px; margin-bottom: 24px; }
  .live-strip__item { min-width: 0; padding: 20px 12px; }
  .live-strip__value { font-size: clamp(22px, 6vw, 30px); overflow-wrap: anywhere; }
  .live-strip__label { font-size: 12px; letter-spacing: 0.03em; }
  .quickstart { padding-block: 32px; }
  .quickstart__cta { width: 100%; }
  .raffle-toolbar { gap: 12px; margin-bottom: 20px; }
  .raffle-filters {
    flex-wrap: nowrap; width: 100%; padding: 4px; gap: 4px;
    overscroll-behavior-x: contain; scrollbar-width: thin;
  }
  .filter-chip { flex: 0 0 auto; min-height: 44px; padding-inline: 12px; }
  .filter-chip__count { font-size: 12px; }
  .view-btn { width: 44px; height: 44px; }
  .raffle-grid, .raffle-grid[data-view="compact"] { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .raffle-card { min-width: 0; }
  .raffle-card__body, .raffle-grid[data-view="compact"] .raffle-card__body { padding: 16px; }
  .raffle-card__title { overflow-wrap: anywhere; }
  .raffle-card__chips { flex-wrap: wrap; gap: 6px; }
  .rarity-chip, .hot-chip { font-size: 12px; letter-spacing: 0.04em; }
  .raffle-grid[data-view="compact"] .raffle-card__chips { transform: none; }
  .raffle-grid[data-view="compact"] .raffle-card__title { font-size: 18px; }
  .raffle-grid[data-view="compact"] .raffle-card__collection,
  .raffle-grid[data-view="compact"] .raffle-card__stat-label { font-size: 12px; }
  .raffle-grid[data-view="compact"] .raffle-card__stat-value { font-size: 16px; }
  .raffle-grid[data-view="list"] .raffle-card__media { aspect-ratio: 1; }
  .raffle-card__footer, .raffle-grid[data-view] .raffle-card__footer {
    flex-wrap: wrap; gap: 12px; padding-top: 4px;
  }
  .ticket-price { width: 100%; }
  .ticket-price__label { font-size: 12px; }
  .ticket-price__value { white-space: nowrap; flex-wrap: wrap; }
  .raffle-card__cta, .raffle-grid[data-view] .raffle-card__cta {
    width: 100%; min-height: 48px; font-size: 14px; padding: 12px 16px;
  }

  /* The original live table becomes labeled rows, using the same DOM/data. */
  .tiers-wrap { overflow: visible; }
  .tiers { display: block; min-width: 0; }
  .tiers-scroll-hint { display: none; }
  .tiers thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .tiers tbody { display: block; }
  .tiers tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 16px; gap: 12px; border-bottom: 1px solid var(--color-divider); }
  .tiers tbody tr:last-child { border-bottom: 0; }
  .tiers tbody td { display: block; padding: 0; min-width: 0; border: 0; text-align: left; overflow-wrap: anywhere; font-size: 13px; }
  .tiers tbody td.num { text-align: left; }
  .tiers tbody td:first-child { grid-column: 1 / -1; padding-bottom: 4px; font-size: 16px; }
  .tiers tbody td:not(:first-child)::before { display: block; margin-bottom: 4px; font: 12px var(--font-body); color: var(--color-text-muted); }
  .tiers [data-tier-floor]::before { content: "Floor"; }
  .tiers [data-tier-fill]::before { content: "Tier / fill"; }
  .tiers [data-tier-tickets]::before { content: "Tickets"; }
  .tiers [data-tier-odds]::before { content: "Odds per ticket"; }
  .tier-name { align-items: baseline; }
  .tier-rules > div { gap: 12px; }
  .tier-rules dt { min-width: 0; }
  .tier-rules dd { flex-shrink: 0; }

  .faq-page__nav a, .history-filter__btn, .fairness-tab, .vrf-tab { min-height: 44px; }
  .faq-page__nav a { display: flex; align-items: center; }
  .faq-back, .history-back, .footer-bottom { flex-wrap: wrap; gap: 12px; }
  .faq-back .btn, .history-back .btn { min-height: 48px; }
  .history-filter { flex-wrap: wrap; }
  .fairness-deepdive__grid { grid-template-columns: minmax(0, 1fr); }
  .fairness-deepdive__content { padding-inline: 16px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .footer-col:first-child { grid-column: 1 / -1; }
  .footer-col ul { gap: 0; }
  .footer-col ul a { display: flex; align-items: center; min-height: 44px; }
  .footer-legal { font-size: 12px; }
  .btn-sm { min-height: 44px; }
  .quickbuy__inner { flex-wrap: wrap; }
  .quickbuy__actions { width: 100%; }
  .quickbuy__actions .btn { flex: 1; min-width: 0; white-space: normal; }
  input, select, textarea { font-size: 16px; }
}

/* Also protects short landscape screens and the on-screen keyboard. */
@media (max-width: 1100px), (max-height: 600px) {
  .modal-backdrop, .modal#buy-modal, .winner-overlay {
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    overflow-y: auto; overscroll-behavior: contain;
  }
  .modal-backdrop .modal, .modal#buy-modal .modal__panel, .winner-modal {
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; overscroll-behavior: contain; padding: 24px 20px;
  }
  .modal__title { padding-right: 36px; font-size: 26px; }
  .modal__close, .modal#buy-modal .modal__close { width: 44px; height: 44px; top: 8px; right: 8px; }
  .modal__wallet { min-width: 0; gap: 10px; padding: 12px; flex-wrap: wrap; }
  .modal__wallet-label { min-width: 0; flex: 1; }
  .modal__wallet-label em { overflow-wrap: anywhere; }
  .buy__step, .buy__presets button { min-width: 44px; min-height: 44px; }
  body:has(.modal-backdrop.is-open), body:has(#buy-modal.is-open), body:has(.winner-overlay) { overflow: hidden; }
  .lotly-gate { padding: 16px; overflow-y: auto; align-items: safe center; }
  .lotly-gate__card { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; }
  .lotly-gate input { font-size: 16px; }
}

@media (max-width: 359px) {
  .site-header .brand-wordmark { width: 76px; }
  .site-header .brand > svg:first-child { width: 20px; }
  .site-header__inner, .header-cta { gap: 6px; }
  .header-cta > :is(.js-connect, .js-wallet-link) { padding-inline: 10px; }
}

/* Phone-only thumbnail gallery. Desktop cards remain exactly as before. */
@media (max-width: 640px) {
  .mobile-card-disclosures #raffles .view-toggle { display: none; }
  .mobile-card-disclosures .raffle-grid,
  .mobile-card-disclosures .raffle-grid[data-view] {
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start;
  }
  .mobile-card-disclosures .raffle-grid .raffle-card {
    flex-direction: column; transform: none; scroll-margin-top: 112px;
  }
  .mobile-card-disclosures .raffle-grid .raffle-card__media {
    flex-basis: auto; aspect-ratio: 1;
  }
  .mobile-card-disclosures .raffle-card:not(.is-mobile-expanded) .raffle-card__body,
  .mobile-card-disclosures .raffle-card:not(.is-mobile-expanded) .raffle-card__media:has(img) > :not(img),
  .mobile-card-disclosures .raffle-card:not(.is-mobile-expanded) .raffle-card__chips,
  .mobile-card-disclosures .raffle-card:not(.is-mobile-expanded) .raffle-card__overlay,
  .mobile-card-disclosures .raffle-card:not(.is-mobile-expanded) .raffle-card__media::after,
  .mobile-card-disclosures .raffle-card:not(.is-mobile-expanded) .raffle-card__media::before {
    display: none;
  }
  .mobile-card-disclosures .raffle-card:not(.is-mobile-expanded) .raffle-card__media img {
    transform: none;
  }
  .mobile-card-disclosures .card-disclosure {
    display: block; position: absolute; inset: 0; width: 100%; z-index: 5;
    border: 0; padding: 0; background: transparent; cursor: pointer;
    color: var(--color-text-strong);
  }
  .mobile-card-disclosures .card-disclosure:focus-visible {
    outline: 2px solid var(--color-primary); outline-offset: -4px;
  }
  .mobile-card-disclosures .raffle-card.is-mobile-expanded { grid-column: 1 / -1; }
  .mobile-card-disclosures .is-mobile-expanded .card-disclosure {
    position: relative; inset: auto; min-height: 44px; padding: 12px 16px;
    background: var(--color-surface-2); text-align: right; font-size: 14px;
  }
  .mobile-card-disclosures .is-mobile-expanded .raffle-card__body {
    display: flex; flex-direction: column; align-items: stretch;
  }
}