/* ============================================================
   RESPONSIVE — desktop-first (max-width) cascade

   Base/desktop styles live in style.css. Each block below is a
   max-width tier: its rules apply to that width AND everything
   narrower, layering on top of the tiers above it.

       ≥ 1400px ............ Figma reference scale (style.css)
       ≤ 1399.98px ......... small desktop
       ≤ 1199.98px ......... tablet landscape
       ≤ 991.98px .......... tablet portrait  (+ drawer/bottom nav)
       ≤ 767.98px .......... large mobile
       ≤ 575.98px .......... mobile
       ≤ 375px ............. extra-small phones
   ============================================================ */

/* ============================================================
     ≤ 1399.98px  Small desktop
     ============================================================ */
@media (max-width: 1399.98px) {
  :root {
    --container-max: 1140px;
    --section-gap: 32px;
  }

  .main-nav {
    gap: 18px;
  }

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

/* ============================================================
     ≤ 1199.98px  Tablet landscape
     ============================================================ */
@media (max-width: 1199.98px) {
  :root {
    --header-height: 82px;
  }

  .site-header {
    min-height: var(--header-height);
  }

  .main-nav {
    overflow-x: auto;
    padding-bottom: 10px;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  /* Mega menus need room the scrolling nav doesn't have — show plain links instead */
  .mega-menu,
  .nav-caret {
    display: none;
  }

  /* ── Check-in bonus ── */
  .checkin-grid {
    grid-template-columns: 1fr 1fr 1.15fr;
  }

  .checkin-day.is-featured {
    grid-column: 3;
    grid-row: 1 / span 3;
    min-height: 0;
    padding: 20px 20px 18px;
  }

  .checkin-day.is-featured::before {
    bottom: 22px;
    width: min(82%, 188px);
    height: 142px;
  }

  .checkin-day.is-featured .checkin-day__day {
    font-size: 28px;
  }

  .checkin-day.is-featured .checkin-day__status {
    min-width: 160px;
  }

  /* ── Register page ── */
  /* minmax(0, 1fr) — not plain 1fr — prevents Swiper's internal slide
     widths from inflating the track's auto-minimum to millions of px */
  .register-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Belt-and-suspenders: grid items must not push their track wider */
  .register-card,
  .register-promo {
    min-width: 0;
  }

  .register-promo {
    order: -1;
  }
}

/* ============================================================
     ≤ 991.98px  Tablet portrait
     ============================================================ */
@media (max-width: 991.98px) {
  :root {
    /* 12px (not 10px) so it matches Bootstrap's 12px .row.g-4 negative
       gutter margin — at 10px the rows spilled 2px past the container
       and only body{overflow-x:hidden} was hiding it. */
    --container-padding-x: 12px;
    --card-gap: 18px;
    /* PSD mobile header bar is ~52px tall (was 82px → too tall) */
    --header-height: 52px;
  }

  /* Reserve room for the fixed bottom navigation */
  body {
    padding-bottom: 100px;
  }

  /* ── Header ── */
  .site-header {
    background: linear-gradient(180deg, #2a0f43 0%, #130722 100%);
    border-bottom: 1px solid rgba(195, 128, 255, 0.55);
  }

  .header-main {
    min-height: 44px;
    gap: 10px;
  }

  .site-logo img {
    height: 26px;
  }

  .desktop-only {
    display: none !important;
  }

  /* Menu now lives in the bottom tab bar, not the header */
  .mobile-menu-btn {
    display: none;
  }

  .header-actions {
    gap: 8px;
  }

  .header-actions .btn-dark,
  .header-actions .btn-register {
    min-height: 34px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
  }

  /* Logged-in header: compact the balance + account pills */
  .header-balance {
    min-height: 34px;
    gap: 8px;
    padding: 3px 3px 3px 12px;
  }

  .header-balance__amount {
    font-size: 12px;
  }

  .header-balance__add {
    width: 26px;
    height: 26px;
  }

  .user-menu__toggle {
    min-height: 34px;
    padding: 7px 12px;
    gap: 8px;
  }

  .user-menu__name {
    font-size: 12px;
  }

  /* ── Hero banner ── */
  /* PSD mobile: hero banner is an inset rounded card with a border
     (desktop stays full-bleed). radius 15px, 1px #2F313C border. */
  .hero-section {
    margin: 15px var(--container-padding-x) 0;
    border: 1px solid #2F313C;
    border-radius: 15px;
    overflow: hidden;
  }

  .hero-swiper {
    height: 230px;
  }

  /* Mobile-specific banner artwork (see <picture> in markup) */
  .hero-swiper .swiper-slide picture {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hero-swiper .swiper-slide img {
    object-position: center;
  }

  .hero-swiper .swiper-button-prev,
  .hero-swiper .swiper-button-next,
  .hero-swiper .swiper-pagination {
    display: none;
  }

  /* PSD: CTAs stacked vertically, equal width, lower-left of banner */
  .hero-cta {
    flex-direction: column;
    align-items: flex-start;
    left: 16px;
    bottom: 16px;
    gap: 6px;
  }

  .hero-btn {
    width: 117px;
    min-height: 36px;
    padding: 9px 16px;
    border-radius: 9px;
    font-size: 12px;
  }

  /* ── Announcement ticker ── */
  .announcement-bar {
    min-height: 34px;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
  }

  .announcement-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .ticker-track {
    font-size: 11px;
  }

  /* ── Category carousel ── */
  .category-swiper {
    padding-top: 0;
  }

  .category-card {
    border-radius: 12px;
  }

  .category-card__content {
    display: none;
  }

  /* ── Panels + game grid ── */
  .panel {
    border-radius: 18px;
  }

  .panel-header {
    padding: 14px 14px 10px;
  }

  .section-title {
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
  }

  .section-title__icon {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  .game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 12px 12px;
  }

  /* ── Check-in bonus ── */
  .checkin-grid {
    padding: 0 12px 12px;
  }

  /* ── Promotions ── */
  /* PSD mobile: promotion carousel comes BEFORE check-in bonus */
  #promotions {
    order: -1;
  }

  /* Mobile promotion artwork (752×343) */
  .promo-card {
    background-image: url('../img/mobile/index/promo-01.webp');
  }

  /* ── Floating actions (clear the bottom tab bar) ── */
  .floating-actions {
    bottom: 86px;
    right: 16px;
  }

  /* ── Footer ── */
  /* Stack copyright + responsible-gaming so the badge isn't clipped
     by the floating buttons */
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .footer-copy {
    max-width: 100%;
  }

  /* Even, centered certification logos instead of stretched spacing */
  .footer-certs {
    gap: 18px 22px;
    justify-content: center;
  }
}

/* ============================================================
     ≤ 767.98px  Large mobile
     ============================================================ */
@media (max-width: 767.98px) {
  :root {
    --section-gap: 16px;
  }

  /* ── Header ── */
  .header-actions .btn-ghost,
  .header-actions .language-switcher {
    display: none;
  }

  .main-nav {
    display: none;
  }

  .btn-gold,
  .btn-blue,
  .btn-ghost {
    min-height: 38px;
    padding: 10px 16px;
    font-size: 13px;
  }

  /* ── Announcement ticker ── */
  .announcement-bar {
    min-height: 48px;
    padding: 10px 14px;
  }

  /* ── Game grid: horizontal drag ── */
  /* Hot games: 1 row visible, drag horizontally for the rest (PSD).
     Scrollbar — #000 track, #645595 thumb (PSD Rectangle 30 / copy). */
  .game-grid {
    grid-template-columns: none;
    grid-template-rows: auto;
    grid-auto-flow: column;
    grid-auto-columns: 30%;
    gap: 10px;
    padding: 0 12px 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #645595 #000000;
  }

  .game-grid > .game-card {
    scroll-snap-align: start;
  }

  .game-grid::-webkit-scrollbar {
    height: 5px;
  }

  .game-grid::-webkit-scrollbar-track {
    background: #000000;
    border-radius: 999px;
  }

  .game-grid::-webkit-scrollbar-thumb {
    background: #645595;
    border-radius: 999px;
  }

  /* ── Check-in bonus ── */
  /* PSD mobile layout: days 1–6 in a 2-col block, Day 7 on the right.
     PSD: Day 7 is ~2× the width of a day card (187px vs 93px). */
  .checkin-grid {
    grid-template-columns: 1fr 1fr 2fr;
    gap: 10px;
    padding: 0 14px 18px;
  }

  /* PSD: small day cards are square (93×93) — keep them compact so the
     3-row stack (and Day 7, which spans it) isn't over-tall. */
  .checkin-day:not(.is-featured) {
    min-height: 0;
    aspect-ratio: 1 / 1;
    padding: 6px 5px;
    gap: 3px;
    overflow: hidden;
  }

  .checkin-day__icon {
    width: 30px;
    height: 30px;
  }

  .checkin-day__day {
    font-size: 13px;
  }

  .checkin-day:not(.is-featured) .checkin-day__status {
    min-height: 20px;
    padding: 3px 6px;
    font-size: 9px;
  }

  .checkin-day.is-featured {
    grid-column: 3;
    grid-row: 1 / span 3;
    min-height: 0;
    padding: 18px 16px 16px;
  }

  /* PSD: gift sits centered BEHIND the text (DAY 7 on top, Unlocked below) */
  .checkin-day.is-featured::before {
    width: 160%;
    height: 100%;
    top: 0;
    bottom: auto;
    background-position: center 42%;
    background-size: contain;
  }

  .checkin-day.is-featured .checkin-day__day {
    font-size: 26px;
  }

  .checkin-day.is-featured .checkin-day__status {
    min-width: 0;
    width: 100%;
    min-height: 38px;
    padding: 9px 14px;
    font-size: 13px;
  }

  /* ── Promotions ── */
  .promo-card {
    min-height: 0;
    aspect-ratio: 752 / 343;
    padding: 0;
  }

  /* PSD: Join Now button (~61%) above the nav arrows (~78%), both small */
  .promo-card__content {
    top: 60%;
    left: 0;
    padding: 0 16px;
  }

  .promo-card__title {
    font-size: 32px;
  }

  .promo-swiper .btn-register {
    min-height: 28px;
    padding: 6px 16px;
    font-size: 11px;
  }

  .promo-nav {
    left: 16px;
    bottom: 12px;
    gap: 10px;
  }

  .promo-nav__btn {
    width: 28px;
    height: 28px;
  }

  .promo-nav__btn svg {
    width: 12px;
    height: 12px;
  }

  /* ── Floating actions ── */
  .floating-actions {
    right: 18px;
    bottom: 105px;
  }

  .floating-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  /* ── Footer ── */
  .site-footer {
    max-width: 93%;
    margin: 15px auto 0;
    border: 1px solid #3f1f66;
    border-radius: 10px;
  }

  /* ── Register / login pages ── */
  .register-section {
    padding: 20px 0 32px;
  }

  .register-card {
    padding: 24px 20px;
  }

  /* 44px icon column saves horizontal space on narrow screens */
  .reg-field__icon {
    flex: 0 0 44px;
  }

  /* 16px minimum prevents iOS Safari from auto-zooming on focus */
  .reg-field__input,
  .reg-field__code,
  .login-field__input {
    font-size: 16px;
  }

  .reg-submit {
    min-height: 48px;
    font-size: 17px;
  }

  .reg-divider {
    margin: 20px 0 14px;
  }

  .reg-social {
    gap: 8px;
  }

  .reg-social__btn {
    padding: 9px 14px;
    font-size: 12px;
  }

  .filter-tab {
    flex: 1;
  }
}

/* ============================================================
     ≤ 575.98px  Mobile
     ============================================================ */
@media (max-width: 575.98px) {
  .header-main {
    min-height: 52px;
  }

  .hero-swiper {
    height: 228px;
  }

  .panel-footer {
    padding: 15px;
  }

  .footer-cert {
    height: 20px;
  }

  /* Six OTP boxes at 52px overflow a ~340px dialog — shrink to fit */
  .otp-modal__body {
    padding: 24px 18px;
  }

  .otp-inputs {
    gap: 8px;
  }

  .otp-inputs__box {
    width: 44px;
    height: 54px;
    font-size: 21px;
  }
}

/* ============================================================
     ≤ 375px  Extra-small phones
     Prevent check-in button overflow: at 320px the square day cards
     are ~68px; the default icon (30px) + label (13px) + button (20px)
     + gaps (6px) = 69px which clips the button. Shrink to fit.
     ============================================================ */
@media (max-width: 375px) {
  /* Below 375px the fixed 228px height no longer matches the 401×239
     mobile banner, so object-fit:cover zoomed in and clipped the sides.
     Follow the artwork's native ratio instead so the whole banner shows
     without distortion. */
  .hero-swiper {
    height: auto;
    aspect-ratio: 401 / 239;
  }

  /* Logo + Log in + Register overflow the 320px header by ~8px at the
     ≤991 button sizing — trim padding/gap so they fit on small phones. */
  .site-logo img {
    height: 24px;
  }

  .header-actions {
    gap: 6px;
  }

  .header-actions .btn-dark,
  .header-actions .btn-register {
    padding: 8px 12px;
    font-size: 11px;
  }

  /* Shrink banner CTA buttons so they don't crowd the banner artwork text */
  .hero-cta {
    left: 12px;
    bottom: 12px;
    gap: 5px;
  }

  .hero-btn {
    width: 100px;
    min-height: 30px;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 11px;
  }

  /* ── Check-in bonus ── */
  .checkin-day__icon {
    width: 22px;
    height: 22px;
  }

  .checkin-day__day {
    font-size: 11px;
  }

  .checkin-day:not(.is-featured) .checkin-day__status {
    min-height: 15px;
    padding: 2px 4px;
    font-size: 8px;
  }

  .checkin-day.is-featured .checkin-day__day {
    font-size: 22px;
  }

  .checkin-day.is-featured .checkin-day__status {
    min-height: 32px;
    padding: 7px 10px;
    font-size: 11px;
  }

  /* Tighten OTP boxes further so six fit a 320px viewport */
  .otp-modal__body {
    padding: 22px 14px;
  }

  .otp-inputs {
    gap: 6px;
  }

  .otp-inputs__box {
    width: 38px;
    height: 50px;
    font-size: 19px;
  }
}

/* ============================================================
     MOBILE SIDE DRAWER + BOTTOM NAVIGATION
     Off-canvas on the left, with a fixed bottom tab bar.
     Hidden on desktop; activated ≤ 991px alongside .desktop-only.
     ============================================================ */
.mobile-drawer,
.mobile-drawer-overlay,
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 991.98px) {

  /* ── Backdrop ── */
  .mobile-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1045;
    background: rgba(3, 2, 12, 0.62);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
  }

  .mobile-drawer-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  /* ── Drawer panel ── */
  .mobile-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 68vw;
    max-width: 300px;
    z-index: 1050;
    background: linear-gradient(180deg, #24145a 0%, #150d3d 42%, #100b33 100%);
    border-right: 1px solid var(--color-border-bright);
    box-shadow: 8px 0 34px rgba(0, 0, 0, 0.55);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .mobile-drawer.is-open {
    transform: translateX(0);
  }

  .mobile-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 14px;
  }

  .mobile-drawer__logo img {
    height: 38px;
    width: auto;
  }

  .mobile-drawer__close {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xs);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }

  /* ── User card ── */
  .mobile-user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 4px 18px 8px;
    padding: 12px 16px;
    border-radius: 10px;
    background: linear-gradient(0deg, #5111E0 0%, #9045FD 100%);
    border: 1px solid #A267E0;
    box-shadow: var(--shadow-glow-blue);
  }

  .mobile-user__avatar {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    background: none;
    font-size: 28px;
    line-height: 1;
  }

  .mobile-user__avatar img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }

  .mobile-user__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .mobile-user__name {
    font-size: 16px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
  }

  .mobile-user__balance {
    font-size: 13px;
    font-weight: 700;
    color: #56e8ff;
    line-height: 1.1;
  }

  /* ── Menu list ── */
  .mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding: 14px 18px 28px;
    border-top: 1px solid rgba(120, 183, 255, 0.36);
  }

  .mobile-menu::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 18px;
    background: rgba(120, 183, 255, 0.36);
  }

  .mobile-menu__link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    transition: background var(--transition-fast), color var(--transition-fast);
  }

  .mobile-menu__link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
  }

  .mobile-menu__link.active {
    color: #ffffff;
    background: linear-gradient(0deg, #5111E0 0%, #9045FD 100%);
    box-shadow: var(--shadow-glow-blue);
  }

  .mobile-menu__icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
  }

  .mobile-menu__icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
  }

  /* ── Bottom tab bar ── */
  .mobile-bottom-nav {
    display: flex;
    align-items: center;
    height: 55px;
    box-sizing: content-box;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-floating);
    padding-bottom: env(safe-area-inset-bottom);
    background: linear-gradient(180deg, #1a0f36, #08051a);
    border: 1px solid #c380ff;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
  }

  .mobile-bottom-nav__item {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px 2px;
    background: none;
    border: none;
    color: #645595;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color var(--transition-fast);
  }

  .mobile-bottom-nav__item:hover,
  .mobile-bottom-nav__item.active {
    color: #ffffff;
  }

  .mobile-bottom-nav__item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 4px;
    background: #c380ff;
    border-radius: 2px 2px 0 0;
  }

  .mobile-bottom-nav__icon {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
  }

  .mobile-bottom-nav__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}