/* Hallmark · matched-system: fcs · file: PATCH-responsive.css · contrast: pass · mobile: 320/375/414/768 verified · em-dash: 0 */

/* ==========================================================================
   MOBILE FLOOR: Global Guardrails (320px to 768px)
   ========================================================================== */

html,
body {
  overflow-x: clip;
}

/* Headings safeguard against overflow */
h1, h2, h3, h4, h5, h6,
.fcs-heading-2,
.fcs-hero-title,
.fcs-brand-title,
.fcs-brand-h1,
.fcs-sec-title,
.fcs-promo-h3,
.fcs-compare-brand-title,
.fcs-cta-h2,
.fcs-xtitle,
.fcs-category-name,
.fcs-rate-title,
.fcs-footer-title,
.fcs-nf-h {
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Clickable text: strictly single-line to prevent wrapping jank */
.fcs-btn-primary,
.fcs-btn-gold,
.fcs-btn-outline,
.fcs-btn-secondary,
.fcs-cta-btn-gold,
.fcs-promo-btn,
.fcs-compare-link,
.fcs-nf-btn,
.fcs-nav-item a,
.fcs-mobile-menu-links a,
.fcs-footer-links a {
  white-space: nowrap;
}

/* Minimum 44px tap target heights for drawer and footer interactive links */
.fcs-mobile-menu-links a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.fcs-footer-links a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Shell padding on compact viewports to prevent cramped text */
@media (max-width: 360px) {
  .fcs-shell {
    padding-left: 14px;
    padding-right: 14px;
  }
}

/* Base copy size floor: prevent body text from dropping below 15px */
p,
.fcs-hero-lede,
.fcs-lf-demo {
  font-size: 15px;
  line-height: 1.55;
}


/* ==========================================================================
   M1: Brand Comparison Matrix Transformation (<640px)
   Table transforms into standalone stacked cards with label/value rows.
   ========================================================================== */

@media (max-width: 639px) {
  .fcs-table-container {
    overflow-x: visible;
    padding: 0;
    margin: 0;
  }

  .fcs-compare-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    border: none;
  }

  .fcs-compare-table thead {
    display: none;
  }

  .fcs-compare-table tbody {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
  }

  .fcs-compare-table tr {
    display: flex;
    flex-direction: column;
    background: var(--fcs-surface);
    border: 1px solid var(--fcs-line);
    border-radius: var(--fcs-r-m);
    padding: 16px;
    box-shadow: var(--fcs-shadow);
    box-sizing: border-box;
    width: 100%;
  }

  .fcs-compare-table td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--fcs-line);
    width: 100%;
    box-sizing: border-box;
    font-size: 14px;
    color: var(--fcs-ink);
    line-height: 1.45;
    background: transparent;
  }

  /* Card header: brand logo and title horizontal lockup */
  .fcs-compare-table td.fcs-table-brand-cell,
  .fcs-compare-table tr > td:first-child {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 0 0 14px 0;
    border-bottom: 1px solid var(--fcs-line);
    margin-bottom: 4px;
  }

  .fcs-compare-table td.fcs-table-brand-cell .fcs-table-logo-box,
  .fcs-compare-table tr > td:first-child .fcs-table-logo-box {
    width: 90px;
    height: 40px;
    flex-shrink: 0;
  }

  .fcs-compare-table td.fcs-table-brand-cell .fcs-table-brand-name,
  .fcs-compare-table tr > td:first-child .fcs-table-brand-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--fcs-navy);
  }

  /* Label displayed small, muted, uppercase above value */
  .fcs-compare-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--fcs-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    line-height: 1.2;
  }

  /* Brand cell never renders pseudo label */
  .fcs-compare-table td.fcs-table-brand-cell::before,
  .fcs-compare-table tr > td:first-child::before {
    content: none;
    display: none;
  }

  /* Last cell: action / CTA area stretched full card width */
  .fcs-compare-table td:last-child {
    border-bottom: none;
    padding-bottom: 0;
    padding-top: 14px;
    align-items: stretch;
  }

  .fcs-compare-table td:last-child .fcs-btn-primary,
  .fcs-compare-table td:last-child .fcs-btn-gold,
  .fcs-compare-table td:last-child .fcs-btn-outline {
    width: 100%;
  }

  /* Maintain divider lines on interior cells of the last table row */
  .fcs-compare-table tr:last-child td {
    border-bottom: 1px solid var(--fcs-line);
  }

  .fcs-compare-table tr:last-child td:last-child {
    border-bottom: none;
  }
}


/* ==========================================================================
   M2: Slot Provider Grid (#fcs-providers and review grids)
   3 columns at <=480px, 4 columns from 481px to 767px, compact boxes.
   ========================================================================== */

@media (min-width: 481px) and (max-width: 767px) {
  .fcs-provider-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .fcs-provider-card,
  .fcs-provider-item {
    height: 60px;
    min-height: 60px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .fcs-provider-card img,
  .fcs-provider-item img,
  .fcs-provider-img {
    max-height: 30px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
  }
}

@media (max-width: 480px) {
  .fcs-provider-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .fcs-provider-card,
  .fcs-provider-item {
    height: 52px;
    min-height: 52px;
    padding: 6px 8px;
  }

  .fcs-provider-card img,
  .fcs-provider-item img,
  .fcs-provider-img {
    max-height: 26px;
  }
}


/* ==========================================================================
   M3: 4D Lottery Showcase Grid (#fcs-lottery, /)
   3 columns at <=480px, 4 columns from 481px to 767px, compact circular boxes.
   ========================================================================== */

@media (min-width: 481px) and (max-width: 767px) {
  .fcs-lottery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .fcs-lottery-card {
    padding: 12px 8px;
    gap: 8px;
    min-height: 96px;
    box-sizing: border-box;
  }

  .fcs-lottery-card img {
    width: 48px;
    height: 48px;
    object-fit: contain;
  }

  .fcs-lottery-name {
    font-size: 12px;
    line-height: 1.25;
  }
}

@media (max-width: 480px) {
  .fcs-lottery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .fcs-lottery-card {
    padding: 10px 6px;
    gap: 6px;
    min-height: 84px;
    box-sizing: border-box;
  }

  .fcs-lottery-card img {
    width: 42px;
    height: 42px;
    object-fit: contain;
  }

  .fcs-lottery-name {
    font-size: 11px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
}


/* ==========================================================================
   M4: Ghost Step Numerals inside Rate Cards ("How We Rate", /)
   Shrink and position numerals inside cards with visible padding.
   ========================================================================== */

@media (max-width: 768px) {
  .fcs-rate-card {
    position: relative;
    overflow: hidden;
  }

  .fcs-rate-card-content {
    position: relative;
    z-index: 1;
  }

  .fcs-rate-ghost-num {
    position: absolute;
    right: 14px;
    top: 12px;
    font-size: 32px;
    line-height: 1;
    font-weight: 800;
    color: var(--fcs-navy);
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
    z-index: 0;
  }
}

@media (max-width: 480px) {
  .fcs-rate-ghost-num {
    right: 12px;
    top: 10px;
    font-size: 26px;
  }
}


/* ==========================================================================
   M5: Live Casino and Popular Game Grids
   2 columns maintained at <=480px with captions clamped to maximum 2 lines.
   ========================================================================== */

@media (max-width: 480px) {
  .fcs-live-grid,
  .fcs-games-grid,
  .fcs-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .fcs-live-name,
  .fcs-tile-row {
    font-size: 12px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 2.6em;
  }

  .fcs-game-cell {
    font-size: 12px;
    line-height: 1.3;
  }
}

@media (max-width: 360px) {
  .fcs-live-grid,
  .fcs-games-grid,
  .fcs-game-grid {
    gap: 8px;
  }

  .fcs-live-name,
  .fcs-tile-row {
    font-size: 11px;
    line-height: 1.25;
    max-height: 2.5em;
  }
}


/* ==========================================================================
   FLOOR: Image-bearing Grid Tracks Safeguard
   ========================================================================== */

@media (max-width: 1024px) {
  .fcs-live-grid,
  .fcs-games-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .fcs-live-grid,
  .fcs-games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fcs-compare-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}