/* ═══════════════════════════════════════════
   RESPONSIVE — 1920 → 320px
   Desktop base rules live in layout.css / game.css / components.css.
   This file handles breakpoint overrides only.
════════════════════════════════════════════ */

/* ── 1920px + ────────────────────────────────────── */
@media (min-width: 1921px) {
  html { font-size: 10px; }
  .page { background-size: cover; }
}

/* ── 1440px ──────────────────────────────────────── */
@media (max-width: 1440px) {
  .character { width: 85em; }
}

/* ── 1280px ──────────────────────────────────────── */
@media (max-width: 1280px) {
  .character           { left: calc(50% + 68em); }
  .decor__item--left   { right: calc(50% + 68em); }
}

/* ── Desktop (≥ 1024px) ──────────────────────────── */
@media (min-width: 1024px) {

  #slot {
    width: min(42vw, 760px) !important;
    height: min(56em, 58vh) !important;
  }

  #slot #reels {
    max-width: min(40vw, 700px) !important;
  }

  .brand-logo {
    width: clamp(120px, 17vw, 220px) !important;
    max-width: 220px !important;
  }

  .game-logo {
    width: clamp(140px, 20vw, 260px) !important;
    max-width: 260px !important;
    max-height: unset !important;
  }

  .character {
    width: 75em !important;
    left: calc(50% + 60em) !important;
  }

  .decor__item--left {
    width: 40em !important;
    right: calc(50% + 60em) !important;
  }

  .primary-button {
    min-width: min(180px, 12vw) !important;
    height: 64px !important;
    padding: 0 3em !important;
  }

  .primary-button__text {
    font-size: clamp(20px, 1.4vw, 28px) !important;
  }

  .game-actions {
    padding-top: 0.8em !important;
    padding-bottom: 0.6em !important;
  }
}

/* ══════════════════════════════════════════════════
   MOBILE / TABLET — everything at ≤ 1023px
   Single column, all elements centered, no scroll.
══════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  html, body { overflow: hidden; }

  .page {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .game {
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  .game__stage {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, 1.6vh, 14px);
    padding:
      max(8px, env(safe-area-inset-top))
      12px
      max(10px, env(safe-area-inset-bottom));
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
  }

  .game-header {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
    margin: 0;         /* gap handles spacing */
    padding: 0;        /* reset desktop grid padding */
    gap: 4px;
    justify-content: center;
  }

  .brand-logo { width: 210px; max-width: 56vw; }
  .game-logo  { width: 290px; max-width: 78vw; margin-bottom: 4px; }

  #slot {
    flex: 0 0 auto;
    width: min(96vw, 430px);
    height: auto;
    margin: 0 auto;
    overflow: visible;
  }

  .slot__frame {
    width:  110%;
    height: 120%;
  }

  #slot #reels {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 1;
    margin: 0;
    overflow: hidden;
    contain: paint;
  }

  .slot__reel,
  #slot [data-js="reel"] {
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    clip-path: inset(0);
    contain: paint;
  }

  #slot #reels .icons .symbol {
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  #slot #reels .icons .symbol .symbol-inner {
    position: static   !important;
    width:    72%      !important;
    height:   auto     !important;
    aspect-ratio: 1    !important;
    display:  flex     !important;
    align-items:     center !important;
    justify-content: center !important;
    margin:    0       !important;
    transform: none    !important;
    top:       unset   !important;
    left:      unset   !important;
  }

  #slot #reels .icons .symbol .symbol-inner img {
    display:    block  !important;
    width:      100%   !important;
    height:     100%   !important;
    max-width:  100%   !important;
    max-height: 100%   !important;
    object-fit:      contain !important;
    object-position: center  !important;
    margin:    0       !important;
    transform: none    !important;
  }

  .game-actions {
    flex: 0 0 auto;
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .primary-button {
    width: min(78vw, 280px);
    height: clamp(44px, 11vw, 60px);
    padding: 0 2em;
  }

  .primary-button__text { font-size: clamp(18px, 5.5vw, 26px); }

  .character {
    right: -10em;
    left: auto;
    top: auto;
    bottom: 0;
    transform: scaleX(-1);
    width: 56em;
  }

  .decor__item--left { display: none; }
}

/* ── 768px ───────────────────────────────────────── */
@media (max-width: 768px) {
  html,
  body,
  .page,
  .game__stage {
    background-image:    url(../../assets/images/backgrounds/bg-mobile.gif) !important;
    background-position: center center !important;
    background-size:     cover         !important;
    background-repeat:   no-repeat     !important;
    background-color:    #0C0C18       !important; /* solid fallback if GIF fails */
  }

  .game-header {
    gap: 2px;
    align-items: center;
  }

  .brand-logo {
    width: clamp(150px, 42vw, 220px) !important;
    max-width: 42vw !important;
    height: auto !important;
    transform: translateY(-50px) !important;
  }

  .game-logo {
    width: clamp(205px, 58vw, 300px) !important;  /* beats max-height overrides below */
    max-width: 58vw !important;
    height: auto !important;
    transform: translateY(-43px) !important;
    margin-bottom: 0;
  }

  #slot {
    margin-top: -16px;
  }

  .effects__spark,
  .effects__glow {
    background-color: transparent !important;
  }

  .character {
    right: -10em !important;
    left: auto !important;
    transform: scaleX(-1) !important;
    z-index: 20;
  }

  .game-actions {
    margin-top: 20px !important;
  }
}

/* ── 430px ───────────────────────────────────────── */
@media (max-width: 430px) {
  #slot { width: min(96vw, 415px); }
  .character { width: 50em; right: -9em; }
}

/* ── 375px ───────────────────────────────────────── */
@media (max-width: 375px) {
  #slot { width: min(96vw, 355px); }
  .character { width: 44em; right: -8em; }
}

/* ── 320px ───────────────────────────────────────── */
@media (max-width: 320px) {
  .brand-logo  { max-width: 44vw; }
  .game-logo   { max-width: 46vw; }
  #slot { width: min(96vw, 305px); }
  .character { width: 38em; right: -7em; }
  .primary-button { height: 42px; }
  .primary-button__text { font-size: 16px; }
}

/* ── Short devices (height < 700px, mobile) ─────── */
@media (max-height: 700px) and (max-width: 1023px) {
  .game__stage { gap: 4px; }
  .brand-logo  { width: clamp(80px, 22vw, 130px); max-width: 130px; }
  .game-logo   { width: clamp(110px, 34vw, 165px); max-width: 165px; }
  #slot { width: min(80vw, 295px); }
  .primary-button { height: clamp(38px, 9vw, 52px); }
  .primary-button__text { font-size: clamp(15px, 4.5vw, 22px); }
}

@media (max-height: 580px) and (max-width: 1023px) {
  .game__stage { gap: 2px; }
  .brand-logo  { width: clamp(60px, 16vw, 90px); max-width: 90px; }
  .game-logo   { width: clamp(90px, 26vw, 120px); max-width: 120px; }
  #slot { width: min(62vw, 225px); }
}

/* ── Safe area (iPhone notch) ───────────────────── */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 1023px) {
    .modal {
      padding-bottom: calc(10em + env(safe-area-inset-bottom));
    }
  }
}

/* ── Prevent horizontal overflow ────────────────── */
html, body, .page, .game, .game__stage {
  max-width: 100%;
  overflow-x: hidden;
}