/* ------------------------------------------------------------------
   Shell perangkat. Dimuat paling akhir di semua halaman.
   <main> tidak lagi memakai class apa pun: seluruh lebar halaman
   mengikuti var(--width-dev), dan komponen di dalamnya menyesuaikan
   lewat unit skala var(--u).
------------------------------------------------------------------ */
:root {
  --content-c: #080808;
  --width-dev: 480px;
  --shadow: 0px 0px 4px 0px rgba(0, 0, 0, .5);

  /* lebar kolom yang benar-benar terpakai */
  --dev-w: min(100vw, var(--width-dev));
  /* 1 unit = 1px pada desain asli (lebar 393px) */
  --u: calc(var(--dev-w) / 393);
  /* padding tepi halaman, ikut melebar bersama kolom */
  --gutter: calc(24 * var(--u));
}

main {
  position: relative;
  font-family: 'ooredoo-heavy';
  color: var(--content-c);
  width: 100%;
  max-width: var(--width-dev);
  margin: 0 auto;
  overflow-x: hidden;
  -webkit-box-shadow: var(--shadow);
  -moz-box-shadow: var(--shadow);
  box-shadow: var(--shadow);
  -ms-overflow-style: none;
  scrollbar-width: none;
  background: #FFF !important;
}

main::-webkit-scrollbar,
#root::-webkit-scrollbar {
  display: none;
}

.wrapper {
  background-color: #FFDA64 !important;
  background-image: url('https://ne.tykcdn.com/assets/gabut/playstore/img/pattern_bg.svg') !important;
  background-repeat: repeat-y !important;
  background-position: top center !important;
  background-size: 100% auto !important;
}
.wrapper.wheel{
  overflow: hidden;
}

/* ------------------------------------------------------------------
   Elemen position:fixed milik main.css / gen.css sebelumnya menempel
   ke tepi kiri viewport. Sekarang disejajarkan dengan kolom <main>.
------------------------------------------------------------------ */
/* (halaman game tidak memakai <footer>, hanya elemen fixed di bawah ini) */
.timer-wrapper,
.count-slide-white,
.banner-sep div {
  left: 50%;
  right: auto;
  max-width: var(--width-dev);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* ------------------------------------------------------------------
   Tombol aksi utama halaman game (error, game over, wheel) disamakan
   dengan tombol "Main Sekarang" (.play-now) di beranda.
   Butuh !important + spesifisitas tinggi karena main.css memakai
   !important pada .btn-gen (border) dan .btn-pri / .go-btns button
   (background & color).
------------------------------------------------------------------ */
.error-box .btn-gen.btn-pri,
.go-btns .btn-gen.btn-pri,
.wheel-btns .btn-gen.btn-pri {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(253 * var(--u));
  max-width: 100%;
  height: calc(64 * var(--u));
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border: calc(4 * var(--u)) solid #FFF !important;
  border-radius: calc(34 * var(--u));
  background: linear-gradient(#EE100E, #D90008) !important;
  color: #FFF !important;
  font-family: 'ooredoo-bold', sans-serif;
  font-size: calc(20 * var(--u));
  line-height: 1;
  box-shadow: 0 calc(3 * var(--u)) 0 #7F6F38;
}

/* "Ambil Hadiah" (game over) memakai bentuk yang sama, warnanya tetap hijau. */
.go-btns .btn-gen.btn-pri {
  background: var(--btn-go-bg, #0AB811) !important;
}