/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */

/* ----- Laptop / small desktop ----- */
@media (max-width: 1140px){
  .stats-grid{ grid-template-columns: repeat(2,1fr); }
  .stat-card.wide{ grid-column: span 2; }
  .hotcold-grid{ grid-template-columns: repeat(2,1fr); }
  .tips-grid{ grid-template-columns: repeat(3,1fr); }
  .facts-grid, .grid-cards{ grid-template-columns: repeat(2,1fr); }
}

/* ----- Tablet ----- */
@media (max-width: 960px){
  .main-nav{ display:block; }
  .hamburger{ display:flex; }
  .hero-inner{ grid-template-columns: 1fr; }
  .hero-rig{ order:-1; }
  .checker-grid, .contact-grid, .schedule-grid{ grid-template-columns: 1fr; }
  .faq-columns{ grid-template-columns: 1fr; }
  .steps-grid{ grid-template-columns: repeat(2,1fr); }
  .odds-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }

  /* ----- Responsive tables: stacked cards instead of a horizontal scroll slider ----- */
  .table-wrap{ overflow-x:visible; background:transparent; border:none; box-shadow:none; }
  .prize-table{ display:block; width:100%; }
  .prize-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .prize-table tbody{ display:block; }
  .prize-table tr{ display:block; background:#fff; border:1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); margin-bottom:12px; overflow:hidden; }
  .prize-table tr:last-child{ margin-bottom:0; }
  .prize-table td{ display:flex; justify-content:space-between; align-items:center; gap:16px; padding:9px 16px; border-top:1px solid var(--border); text-align:right; font-size:0.88rem; }
  .prize-table tr td:first-child{ border-top:none; }
  .prize-table td::before{ content: attr(data-label); font-family:var(--font-mono); font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); font-weight:600; text-align:left; }
}
@media (min-width: 961px){
  .hamburger{ display:none; }
}

/* ----- Mobile ----- */
@media (max-width: 640px){
  .section{ padding: 56px 0; }
  .hero{ padding: 48px 0 56px; }
  .hero h1{ font-size: 1.9rem; }
  .hero-rig{ display:none; }
  .hero-stats{ gap:20px; }
  .ball, .ball-input{ width:46px; height:46px; font-size:0.95rem; }
  .ball-row.large .ball{ width:52px; height:52px; font-size:1.1rem; }
  .stats-grid{ grid-template-columns: 1fr; }
  .stat-card.wide{ grid-column: span 1; }
  .hotcold-grid, .tips-grid, .facts-grid, .grid-cards{ grid-template-columns: 1fr; }
  .steps-grid{ grid-template-columns: 1fr; }
  .counters{ grid-template-columns: repeat(2,1fr); }
  .archive-controls{ flex-direction:column; }
  .archive-controls select, .archive-controls input{ width:100%; }
  .lookup-box{ flex-direction:column; }
  .newsletter{ flex-direction:column; align-items:flex-start; }
  .newsletter-form{ width:100%; }
  .newsletter-form input{ flex:1; min-width:0; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap:24px; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .result-meta{ gap:18px; }
  .back-to-top{ right:16px; bottom:16px; width:42px; height:42px; }

  /* ----- Countdown: fluid grid so the 4 boxes never overflow the viewport ----- */
  .countdown-box{ padding:22px 16px; }
  .countdown{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:8px; margin:16px 0; }
  .countdown div{ min-width:0; padding:10px 4px; }
  .countdown span{ font-size:1.2rem; }
  .countdown small{ font-size:0.6rem; }
}

/* ----- Extra-small phones ----- */
@media (max-width: 380px){
  .back-to-top{ right:12px; bottom:12px; width:38px; height:38px; font-size:1rem; }
  .countdown{ gap:6px; }
  .countdown div{ padding:8px 2px; }
  .countdown span{ font-size:1.05rem; }
}