/* ─── Animations ─── */
@keyframes slotSpin {
  0%   { transform: translateY(0) scale(1); opacity: 1; }
  25%  { transform: translateY(-18px) scale(0.85); opacity: 0.15; }
  75%  { transform: translateY(18px) scale(0.85); opacity: 0.15; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes winGlow {
  0%,100% { box-shadow: 0 0 20px rgba(37,99,235,0.7); border-color: #2563eb; }
  50%     { box-shadow: 0 0 50px rgba(99,130,255,1), 0 0 100px rgba(37,99,235,0.4); border-color: #60a5fa; }
}
@keyframes dotPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.5; transform: scale(0.85); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Tablet (≤ 960px) ─── */
@media (max-width: 960px) {
  /* Nav */
  .nav-desktop     { display: none !important; }
  .nav-burger      { display: flex !important; }
  header           { padding: 14px 18px !important; }

  /* Page hero banner */
  .page-hero       { padding: 130px 20px 64px !important; }

  /* Section padding */
  .sec-pad         { padding: 64px 20px !important; }
  footer           { padding: 48px 20px 36px !important; }

  /* Two-column layouts → stack */
  .two-col         { flex-direction: column !important; }
  .two-col-rev     { flex-direction: column-reverse !important; }

  /* Image sidebars: drop fixed flex-basis, go full width */
  .img-side        { flex: unset !important; width: 100% !important; max-width: 100% !important; justify-content: center !important; }

  /* Info cards column (contact page) */
  .info-cards      { flex: unset !important; width: 100% !important; padding-top: 0 !important; }

  /* Games grid → single column */
  .games-grid      { grid-template-columns: 1fr !important; max-width: 420px; margin-inline: auto; }

  /* How it works steps → single column, fix grid placement */
  .steps-layout    { grid-template-columns: 1fr !important; }
  .steps-connector { display: none !important; }
  .step-cell       { grid-column: 1 !important; grid-row: auto !important; padding: 8px 0 !important; }
  .step-cell > div { padding: 28px 24px !important; border-radius: 20px !important; min-height: unset !important; }

  /* Team grid → 2 columns */
  .team-grid       { grid-template-columns: 1fr 1fr !important; }

  /* FAQ */
  .faq-layout      { flex-direction: column !important; gap: 24px !important; }
  .faq-grid        { grid-template-columns: 1fr !important; }
  .faq-char        { display: none !important; }

  /* Oval sections → rounded rectangle */
  .oval-section    { border-radius: 24px !important; padding: 40px 28px !important; }

  /* Footer */
  .footer-grid     { flex-direction: column !important; gap: 36px !important; }
  .footer-logo-col { flex: unset !important; width: 100% !important; }
  .footer-links-col{ flex: unset !important; width: 100% !important; align-items: flex-start !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 12px 24px !important; }

  /* Rules pills — already hidden by .rules-pills class */
  .rules-pills     { display: none !important; }

  /* Stats row */
  .stats-row       { justify-content: flex-start !important; flex-wrap: wrap !important; gap: 20px 32px !important; }
}

/* ─── Mobile (≤ 600px) ─── */
@media (max-width: 600px) {
  /* Header */
  header           { padding: 12px 14px !important; }

  /* Sections */
  .sec-pad         { padding: 48px 16px !important; }
  .page-hero       { padding: 110px 16px 52px !important; }
  footer           { padding: 40px 16px 28px !important; }

  /* Contact form grid → single column */
  .contact-grid    { grid-template-columns: 1fr !important; }

  /* Character decorations hidden */
  .contact-char    { display: none !important; }

  /* Oval sections smaller */
  .oval-section    { border-radius: 16px !important; padding: 32px 18px !important; }

  /* Image sidebars */
  .img-side img    { border-radius: 14px !important; }

  /* Footer links compact */
  .footer-links-col{ gap: 10px 18px !important; }

  /* Steps inner cards — even smaller padding on phone */
  .step-cell > div { padding: 22px 18px !important; }
}