/* =========================================================
   VIPER AURUM — Responsive Pack (mobile-first, safe-area)
   ========================================================= */

/* ---- Base mobile-first tweaks (≤ 480px by default) ---- */
html, body{
  max-width:100%;
  overflow-x:hidden!important;
  -webkit-tap-highlight-color: transparent;
  /* tipografi responsif yang halus */
  font-size: clamp(14px, 3.4vw, 16px);
}

/* Komponen utama mobile */
.logo img{ width: clamp(11rem, 38vw, 13rem) !important; }
.pola-wrapper{ width:100% !important; padding: .58rem .62rem !important; }
.rtp-card-img{ width:100% !important; }
.slider, .swiper{ width:100%; height:100%; }

/* Kartu ikon & teks kecil */
.icon-card-bg p{
  font-size: .62rem !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}
.icon-prov{ justify-content: flex-start !important; gap:.35rem; }
.icon-card-bg img{ width: 3rem !important; }
.title-game{ font-size: clamp(1rem, 4.3vw, 1.18rem) !important; }

/* Bottom nav + safe-area */
.item-nav-bottom{
  font-size: .78rem !important;
  padding: .4rem .3rem;
  min-height: 44px; /* touch target */
}
.nav-bottom{
  padding-bottom: calc(env(safe-area-inset-bottom, 0px));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Provider badge di sudut */
.icon-providers{
  top:.2rem !important; right:.15rem !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}

/* ---- Mobile portrait (≤ 480px) ---- */
@media (max-width: 480px) and (orientation: portrait){
  .btn-play{
    font-size: .66rem !important;
    padding: .52rem .65rem;
  }
  .running-text{ font-size: .9rem }
}

/* ---- Mobile landscape khusus (≤ 850px) ---- */
@media (max-width: 850px) and (orientation: landscape){
  html, body{ overflow-y: auto !important; }
  /* kompakkan vertikal */
  .logo img{ width: clamp(9rem, 26vw, 12rem) !important; }
  .pola-wrapper{ padding: .5rem !important; }
  .item-nav-bottom{ font-size: .72rem !important; }
}

/* ---- Small tablets / phablets (481px–767px) ---- */
@media (min-width: 481px) and (max-width: 767px){
  .logo img{ width: clamp(12rem, 30vw, 15rem) !important; }
  .pola-wrapper{ padding: .7rem .8rem !important; }
  .icon-card-bg p{ font-size: .7rem !important; }
  .item-nav-bottom{ font-size: .8rem !important; }
  .btn-play{ font-size: .7rem !important; }
}

/* ---- Tablets potrait/landscape (768px–1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px){
  .running-text{ font-size: .95rem }
  .logo img{ width: clamp(14rem, 22vw, 18rem) !important; }
  .pola-wrapper{ padding: .9rem 1rem !important; }
  .rtp-card-img{ width: 100% !important; }
  .icon-card-bg p{ font-size: .78rem !important; }
  .title-game{ font-size: clamp(1.1rem, 2.2vw, 1.3rem) !important; }
  .item-nav-bottom{ font-size: .85rem !important; }
  .btn-play{ font-size: .75rem !important; }
}

/* ---- Desktop compact (1025px–1280px) ---- */
@media (min-width: 1025px) and (max-width: 1280px){
  .logo img{ width: clamp(16rem, 20vw, 19rem) !important; }
  .item-nav-bottom{ font-size: .86rem !important; }
}

/* ---- Desktop ≥ 1200px: container fix ---- */
@media (min-width: 1200px){
  .container,.container-lg,.container-md,.container-sm,.container-xl{
    max-width:1100px !important;
  }
}

/* ---- Utility: reduce motion ---- */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

/* ---- Bonus: aurum polish untuk elemen yang sering dipakai ---- */
@media (max-width: 640px){
  /* tombol aurum lebih “pop” di layar kecil */
  .btn-login{
    background: linear-gradient(90deg,#fff176 0%,#ffc107 100%);
    box-shadow: 0 10px 20px rgba(255,193,7,.28);
  }
  .btn-daftar{
    background: linear-gradient(90deg,#ffc107 0%,#ffb300 100%);
  }
  .percent{ height: 18px } /* bar sedikit lebih ramping di ponsel */
}

/* ---- Safe keyboard overlap: pastikan bottom nav tidak ketutup ---- */
@supports (height: 100dvh){
  .nav-bottom{ bottom: max(0px, env(safe-area-inset-bottom, 0px)); }
}