/* =========================================================================
   Lucky Wheels Olympus — style.css
   =========================================================================
   PENJELASAN SINGKAT BUAT YANG MASIH BARU DI CSS:
   Kita pakai "CSS custom properties" (variabel, ditulis --nama-variabel)
   di :root supaya warna & ukuran didefinisikan SEKALI terus dipakai di
   banyak tempat. Kalau nanti mau ganti warna gold jadi lebih terang misalnya,
   cukup ubah satu baris di bawah, ga perlu cari-cari di ratusan baris CSS.
   ========================================================================= */

:root {
  /* --- Palette: turun langsung dari asset (langit senja Olympus + gold) --- */
  --olympus-indigo-950: #1a1030;
  --olympus-indigo-900: #241640;
  --olympus-violet-700: #4a2a7a;
  --olympus-violet-500: #7a4bb0;
  --olympus-sunset-500: #d97a5f;
  --olympus-gold-400: #f4c95d;
  --olympus-gold-300: #f9dd8f;
  --olympus-gold-600: #c8912a;
  --olympus-cream-100: #fbf3e2;
  --olympus-plum-900: #2a1633;
  --olympus-plum-800: #3a1f47;

  --success-500: #3fbf7f;
  --danger-500: #e05a5a;

  /* --- Type scale --- */
  --font-display: 'Cinzel', 'Georgia', serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Layout --- */
  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-glow-gold: 0 0 40px rgba(244, 201, 93, 0.35);
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.45);

  /* content-max: dulu 1180px (kekecilan buat layar lebar), sekarang pakai
     campuran vw + batas atas -- artinya "96% lebar layar, tapi jangan lebih
     dari 1700px" biar tetap enak dibaca di monitor super lebar. */
  --content-max: min(96vw, 1700px);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--olympus-cream-100);
  background: var(--olympus-indigo-950);
  min-height: 100dvh;
}

img { max-width: 100%; display: block; }

button { font-family: inherit; cursor: pointer; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--olympus-gold-300);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================================
   PAGE BACKGROUND
   ========================================================================= */

.olympus-sky {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(26,16,48,.35) 0%, rgba(26,16,48,.85) 75%, var(--olympus-indigo-950) 100%),
    url('../assets/img/bg-desktop.webp') center top / cover no-repeat;
}

@media (max-width: 720px) {
  .olympus-sky {
    background:
      linear-gradient(180deg, rgba(26,16,48,.25) 0%, rgba(26,16,48,.9) 80%, var(--olympus-indigo-950) 100%),
      url('../assets/img/bg-mobile.webp') center top / cover no-repeat;
  }
}

/* Soft embers drifting up — cheap ambient motion, respects reduced-motion */
.ember-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.ember {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--olympus-gold-400);
  box-shadow: 0 0 8px 2px rgba(244, 201, 93, 0.7);
  opacity: 0;
  animation: ember-rise 9s linear infinite;
}
@keyframes ember-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .8; }
  90%  { opacity: .3; }
  100% { transform: translateY(-110vh) translateX(20px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ember { display: none; }
}

/* =========================================================================
   HEADER / LOGO
   ========================================================================= */

.site-header {
  display: flex;
  justify-content: center;
  padding: clamp(16px, 4vw, 32px) 16px 0;
}

.brand-logo {
  width: min(420px, 80vw);
}

/* =========================================================================
   MAIN GAME LAYOUT
   ========================================================================= */

.game-layout {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 4px 16px 40px;
  display: grid;
  grid-template-columns: 1fr;
  /* "Denah" versi HP: Zeus & roda ditaruh di ruangan yang SAMA ("stack"),
     jadi mereka numpuk (bukan berurutan atas-bawah). Tiket panel dapat
     ruangan sendiri di bawahnya. */
  grid-template-areas:
    "stack"
    "ticket";
  align-items: center;
  justify-items: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}

@media (min-width: 920px) {
  .game-layout {
    /* Versi desktop: "denah" 3 kolom sejajar -- Zeus, roda (lebih lebar
       jatahnya = boleh lebih besar), tiket. Semua satu baris. */
    grid-template-columns: minmax(240px, 340px) minmax(460px, 680px) minmax(300px, 400px);
    grid-template-areas: "zeus wheel ticket";
    justify-items: stretch;
    align-items: center;
    gap: 28px;
    padding: 20px 32px 56px;
  }
}

.zeus-figure {
  grid-area: stack;
  z-index: 0; /* di BELAKANG roda -- angka lebih kecil = lebih ke belakang */
  align-self: center;
  justify-self: center;
  width: min(240px, 64vw);
  /* Digeser dikit ke kiri supaya kelihatan "mengintip" dari belakang roda,
     bukan ketutup sempurna di tengah. */
  transform: translateX(-30%);
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.5));
  animation: zeus-float 6s ease-in-out infinite;
}
@keyframes zeus-float {
  0%, 100% { transform: translateX(-30%) translateY(0); }
  50% { transform: translateX(-30%) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
  .zeus-figure { animation: none; }
}

@media (min-width: 920px) {
  .zeus-figure {
    grid-area: zeus;
    z-index: auto;
    width: 100%;
    max-width: 340px;
    transform: none;
    animation-name: zeus-float-desktop;
  }
  @keyframes zeus-float-desktop {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }
}

/* =========================================================================
   WHEEL
   ========================================================================= */

.wheel-stage {
  grid-area: stack;
  z-index: 1; /* di DEPAN Zeus */
  align-self: center;
  justify-self: center;
  position: relative;
  width: min(92vw, 440px);
  aspect-ratio: 1 / 1;
  filter: drop-shadow(var(--shadow-glow-gold));
}

@media (min-width: 920px) {
  .wheel-stage {
    grid-area: wheel;
    justify-self: center;
    width: min(100%, 640px);
  }
}

/* Lapisan PALING BELAKANG: bingkai putih solid (wheel-frame.webp). Fungsinya
   sebagai "alas" -- kalau ada celah sepersekian pixel antara piringan warna
   yang muter dengan lubang bingkai emas di depannya, yang kelihatan di
   celah itu warna putih bersih ini, bukan background ungu di belakangnya.
   Hasilnya roda kelihatan "solid"/rapat, ga ada celah gelap yang ngedip. */
.wheel-frame-backing {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.wheel-rotor {
  position: absolute;
  /* Angka 4.5% ini BUKAN tebakan -- diukur langsung dari pixel gambar
     aslinya: lubang bingkai emas (wheel-frame-transparent.webp) itu radiusnya
     88.9% dari setengah lebar kanvas, sedangkan piringan warna
     (wheel-segments.webp) natural-nya menggambar sampai 98.4%. Jadi biar
     tepi piringan warna itu pas mentok di tepi dalam lubang bingkai (ga
     nyisain celah, ga nutupin bingkai), rumusnya: inset = (1 - 88.9/98.4)/2
     ≈ 4.5%. */
  inset: 4.5%;
  z-index: 1;
  border-radius: 50%;
  will-change: transform;
  /* Kurva easing diganti: sebelumnya angka terakhir 1.15 (>1) bikin roda
     "kelewatan" dulu dari titik berhenti lalu mantul balik dikit (overshoot)
     -- itu yang kerasa "ga smooth"/nyentak di akhir putaran. Kurva baru ini
     murni melambat halus sampai benar-benar diam, tanpa mantul. */
  transition: transform 5.4s cubic-bezier(0.12, 0.75, 0.15, 1);
}

/* Catatan spesifisitas CSS: sengaja pilih setiap elemen di dalam .wheel-stage
   secara EKSPLISIT (bukan selector umum ".wheel-stage img") supaya ga saling
   timpa. Selector umum + tag (mis. ".wheel-stage img") punya spesifisitas
   LEBIH TINGGI dari sekadar ".wheel-marker" (class tunggal), jadi bisa
   diam-diam nge-override posisi marker/hub yang butuh ukuran beda-beda. */
.wheel-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Kalau gambar wheel-segments.webp kamu ternyata "mulai" dari sudut yang
     beda dari asumsi kode (segmen pertama tepat di jam 12), putar dikit di
     sini SAJA -- ga perlu ubah JS. Contoh: kalau gambarnya kelihatan geser
     22.5 derajat ke kiri, ganti jadi: --wheel-offset: 22.5deg; */
  transform: rotate(var(--wheel-offset, 0deg));
  border-radius: 50%;
}

.wheel-labels {
  position: absolute;
  inset: 0;
}

.wheel-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(11px, 2.6vw, 15px);
  color: var(--olympus-gold-300);
  text-shadow: 0 0 6px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.9);
  letter-spacing: .02em;
  transform-origin: left center;
  /* PENTING soal urutan: fungsi transform paling KANAN diproses duluan.
     translateY(-50%) di sini menggeser label ke atas SETENGAH tinggi-nya
     sendiri dulu (biar teks-nya center secara vertikal di titik pusat roda),
     BARU SETELAH itu rotate() memutar hasil geseran tadi mengelilingi titik
     pusat (transform-origin: left center). Kalau urutannya dibalik, geseran
     ikut ke-putar juga dan hasilnya melenceng. */
  transform: rotate(0deg) translateY(-50%);
}

.wheel-frame-fixed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.wheel-marker {
  position: absolute;
  top: -6%;
  left: 50%;
  width: 15%;
  transform: translateX(-50%);
  z-index: 4;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,.5));
}

.wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel-hub img { width: 100%; pointer-events: none; }

.wheel-hub-label {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(10px, 2vw, 13px);
  color: var(--olympus-gold-300);
  text-align: center;
  line-height: 1.15;
}

/* Spin state pulses the glow */
.wheel-stage.is-spinning {
  animation: wheel-spin-glow 1.1s ease-in-out infinite;
}
@keyframes wheel-spin-glow {
  0%, 100% { filter: drop-shadow(var(--shadow-glow-gold)); }
  50% { filter: drop-shadow(0 0 62px rgba(244,201,93,.65)); }
}

/* =========================================================================
   TICKET PANEL
   ========================================================================= */

.ticket-panel {
  grid-area: ticket;
  width: min(92vw, 420px);
  background: linear-gradient(180deg, rgba(58,31,71,.92), rgba(42,22,51,.96));
  border: 1px solid rgba(244, 201, 93, .35);
  border-radius: var(--radius-lg);
  padding: clamp(16px, 4vw, 24px);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
  justify-self: center;
}

@media (min-width: 920px) {
  .ticket-panel {
    /* align-self: center -- ini kuncinya biar panel tiket ga "nempel di
       atas" doang (rasanya nanggung/ga simetris dibanding roda yang tinggi
       di sebelahnya), tapi ikut center secara vertikal sejajar roda. */
    align-self: center;
    justify-self: stretch;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
  }
}

.field-label {
  display: block;
  font-size: 13px;
  color: var(--olympus-gold-300);
  font-weight: 600;
  letter-spacing: .03em;
  /* Samain sama padding horizontal si .ticket-input (14px 16px) di bawah --
     biar teks "Kode Tiket" dan teks placeholder di dalam kotak input
     sama-sama mulai dari titik X yang PERSIS sama. Ini yang bikin
     kelihatan "sejajar"/simetris. */
  padding-left: 16px;
  margin-bottom: 8px;
}

.ticket-input {
  width: 100%;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: var(--olympus-cream-100);
  color: var(--olympus-indigo-950);
  font-size: 16px;
  font-weight: 600;
}

.ticket-input::placeholder { color: #8a7f9b; font-weight: 500; }

.ticket-input:disabled { opacity: .6; }

.btn {
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.btn-spin {
  padding: 16px;
  font-size: clamp(18px, 4vw, 22px);
  color: #4a2c05;
  background: linear-gradient(180deg, var(--olympus-gold-300), var(--olympus-gold-600));
  box-shadow: 0 10px 24px rgba(200, 145, 42, .45), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn-spin:hover:not(:disabled) { box-shadow: 0 14px 30px rgba(200,145,42,.6), inset 0 1px 0 rgba(255,255,255,.6); }

.btn-row {
  display: flex;
  gap: 10px;
}

.btn-ghost {
  flex: 1;
  padding: 12px 10px;
  font-size: 12.5px;
  color: var(--olympus-gold-300);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(244,201,93,.4);
}
.btn-ghost:hover:not(:disabled) { background: rgba(244,201,93,.12); }

.inline-message {
  /* Dulu ada min-height 20px -> selalu ambil ruang walau isinya kosong ->
     bikin gap besar di form. Sekarang tanpa min-height, dan trik ":empty"
     di bawah bikin dia ILANG TOTAL kalau ga ada isi. */
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: rgba(224, 90, 90, 0.12);
  border: 1px solid rgba(224, 90, 90, 0.35);
}

/* Selector ":empty" cocok kalau elemen ini bener-bener KOSONG (ga ada teks,
   ga ada tag anak). "display: none" berarti "sembunyikan sepenuhnya, jangan
   ambil ruang sama sekali di layout". Ini yang bikin gap di form ilang. */
.inline-message:empty {
  display: none;
}

.inline-message[data-tone="error"] { color: #ff9b9b; }
.inline-message[data-tone="info"] {
  color: var(--olympus-gold-300);
  background: rgba(244, 201, 93, 0.1);
  border-color: rgba(244, 201, 93, 0.3);
}

.sound-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 20;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(244,201,93,.4);
  background: rgba(26,16,48,.65);
  backdrop-filter: blur(6px);
  color: var(--olympus-gold-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* =========================================================================
   MODAL (Cara Bermain / Claim Tiket / Hasil Spin)
   ========================================================================= */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 5, 20, .72);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.modal-card {
  width: min(94vw, 420px);
  max-height: 88dvh;
  overflow-y: auto;
  background: linear-gradient(180deg, #3a1f47, #241329);
  border: 1px solid rgba(244,201,93,.5);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), var(--shadow-glow-gold);
  padding: 26px 22px 24px;
  text-align: center;
  position: relative;
  transform: translateY(16px) scale(.97);
  transition: transform .25s ease;
}
.modal-overlay.is-open .modal-card { transform: translateY(0) scale(1); }

.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: var(--olympus-gold-300);
  font-size: 22px;
  line-height: 1;
  padding: 6px;
}

.modal-title {
  font-family: var(--font-display);
  font-size: clamp(16px, 4.5vw, 20px);
  color: var(--olympus-gold-300);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 4px 0 16px;
}

.modal-video-stage {
  width: min(78vw, 260px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  position: relative;
}
.modal-video-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nominal-hint {
  font-size: 13px;
  color: #d9c7e8;
  margin: 0 0 6px;
}
.nominal-hint strong { color: var(--olympus-gold-300); }

/* Tombol peti: dibikin dari elemen <button> polos, dilucuti semua gaya
   bawaan browser (border, background, dst) supaya cuma kelihatan video-nya,
   tapi tetap "berperilaku" sebagai tombol asli -- artinya bisa di-Tab pakai
   keyboard dan dibaca screen reader, ga cuma <div onclick> yang keliatan
   sepele tapi sebenarnya ga ramah aksesibilitas. */
.chest-trigger {
  display: block;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 4px 0 6px;
  cursor: pointer;
}
.chest-trigger:disabled { cursor: default; }

.tap-hint {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--olympus-gold-300);
  animation: tap-hint-pulse 1.4s ease-in-out infinite;
}
@keyframes tap-hint-pulse {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .tap-hint { animation: none; }
}

.prize-breakdown {
  font-size: 14px;
  color: #eadff3;
  margin: 4px 0 2px;
  font-weight: 600;
}
.prize-breakdown strong { color: var(--olympus-gold-300); }

.prize-amount {
  font-family: var(--font-display);
  font-size: clamp(22px, 6vw, 30px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 18px rgba(244,201,93,.7);
  margin: 6px 0 2px;
}

.prize-label {
  font-size: 12.5px;
  color: var(--olympus-gold-300);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.voucher-code-tag {
  margin-top: 14px;
  font-size: 12px;
  color: #cbb8d8;
  letter-spacing: .04em;
}

.howto-list {
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
  color: #eadff3;
  padding-left: 20px;
  margin: 0;
}
.howto-list li { margin-bottom: 8px; }

.claim-steps {
  text-align: left;
  font-size: 14px;
  line-height: 1.65;
  color: #eadff3;
}
.claim-steps strong { color: var(--olympus-gold-300); }

.btn-modal-action {
  margin-top: 18px;
  width: 100%;
  padding: 13px;
  font-size: 14px;
}

/* Confetti canvas for the win moment */
.confetti-canvas {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

/* =========================================================================
   FOOTER
   ========================================================================= */

.site-footer {
  text-align: center;
  padding: 18px 16px 28px;
  font-size: 12px;
  color: rgba(251, 243, 226, .55);
  position: relative;
  z-index: 1;
}
.site-footer p { margin: 4px 0; }
.site-copyright { font-size: 11px; opacity: .75; }
.site-footer a { color: var(--olympus-gold-300); text-decoration: none; }