/* ─── MOBILE OVERRIDES ─── */

/* Disable double-tap zoom and improve touch */
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }
button, a, input, select { touch-action: manipulation; }

/* ─── Loader (≤ 480px) ─── */
@media (max-width: 480px) {
  .aauzf {
    margin-top: -25% !important;
    max-width: 230px !important;
    margin-bottom: 22px;
  }
  .aauzg {
    max-width: 220px;
    height: 22px;
  }
}

/* ─── Game area (≤ 767px) ─── */
@media (max-width: 767px) {
  body {
    overflow-x: hidden;
  }

  .aauzi {
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .aauzl {
    width: 100% !important;
    max-width: 360px;
    padding: 10px 16px !important;
    text-align: center;
  }
  .aauzl img {
    max-width: 220px;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  /* Compact controls — let the original grid collapse to 1 column on phones,
     but tighten spacing */
  .aauzo {
    padding: 10px !important;
    gap: 8px !important;
    border-radius: 14px;
  }

  /* Touch-friendly bet buttons */
  .aauzu {
    min-height: 38px;
    padding: 8px !important;
  }

  /* GO / CASH OUT buttons taller for fingers */
  .aavac, .bottom__section-button, #go-btn, #win-button-modal {
    min-height: 48px;
    font-size: 110%;
  }

  /* Remove any wonky margins from controls section */
  .aauzn {
    padding: 0 12px !important;
    margin: 1em auto !important;
  }
}

/* ─── Very small phones (≤ 360px) ─── */
@media (max-width: 360px) {
  .aauzl img { max-width: 180px; }
  .aauzo { padding: 8px !important; gap: 6px !important; }
}

/* ─── Landscape on phones — game is too tall, scroll instead of crop ─── */
@media (max-height: 500px) and (orientation: landscape) {
  .aauzi { min-height: auto; }
  .aauzj { padding: 8px 0; }
  .aauzm {
    height: 60vh !important;
    min-height: 280px;
  }
  .aauzo {
    grid-template-columns: 1fr 1fr 1fr !important;
  }
}

/* ─── Registration form — mobile fine-tuning ─── */
@media (max-width: 767px) {
  .reg-overlay {
    padding: 12px;
    align-items: flex-end;
  }
  .reg-card {
    border-radius: 18px 18px 0 0;
    padding: 24px 20px 18px;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0));
    max-height: 88vh;
  }
  .reg-logo { width: 48px; height: 48px; margin-bottom: 10px; }
  .reg-title { font-size: 26px; }
  .reg-sub { font-size: 12px; }

  .reg-prize {
    padding: 10px 12px;
    margin-bottom: 16px;
  }
  .reg-prize-amount { font-size: 22px; }
  .reg-prize-icon { width: 30px; height: 30px; font-size: 16px; }
  .reg-prize-text { font-size: 10px; }

  .reg-field input {
    height: 48px;
    font-size: 16px; /* prevent iOS zoom on focus */
  }
  .reg-submit {
    height: 52px;
    font-size: 15px;
  }

  .reg-trust { gap: 10px; font-size: 10px; }
}

/* ─── Smallest phones for form ─── */
@media (max-width: 360px) {
  .reg-card { padding: 22px 16px 14px; }
  .reg-title { font-size: 22px; }
  .reg-prize { flex-direction: column; gap: 6px; text-align: center; }
  .reg-prize-left { justify-content: center; }
}

/* Slide-up animation for mobile drawer-style overlay */
@media (max-width: 767px) {
  .reg-overlay.show .reg-card {
    animation: regSlideUp 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
}
@keyframes regSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ─── Coin rain effect — keep reasonable on mobile ─── */
@media (max-width: 767px) {
  .aavaj { max-width: 100%; height: auto; }
}

/* ─── Prevent overlay scroll-bleed on iOS ─── */
.reg-overlay.show {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}