:root {
  --bg: #070604;
  --gold-1: #fff1a8;
  --gold-2: #f9c742;
  --gold-3: #a86a00;
  --red-1: #980600;
  --red-2: #4a0000;
  --cream: #fff8dd;
  --text: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  background: #161616;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 182, 37, 0.12), transparent 35%),
    #151515;
}

button,
input {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  width: min(100%, 520px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: #080705;
  box-shadow: 0 0 70px rgba(0, 0, 0, 0.65);
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: 945px;
  padding: max(20px, env(safe-area-inset-top)) 18px 44px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 26%, rgba(255, 196, 72, .25), transparent 21%),
    radial-gradient(circle at 20% 40%, rgba(192, 24, 0, .26), transparent 36%),
    linear-gradient(180deg, #090705 0%, #130a05 42%, #230701 67%, #210003 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: .48;
  background-image:
    radial-gradient(circle, rgba(255, 207, 74, .95) 0 1.4px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 89, 22, .95) 0 1px, transparent 1.5px);
  background-position: 0 0, 15px 20px;
  background-size: 42px 42px, 55px 55px;
  mask-image: linear-gradient(to bottom, #000, transparent 73%);
}

.hero::after {
  content: "";
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: 290px;
  height: 230px;
  z-index: -2;
  background: radial-gradient(ellipse, rgba(255, 168, 26, .35), transparent 62%);
  filter: blur(12px);
}

.ambient {
  position: absolute;
  z-index: -1;
  width: 86px;
  height: 86px;
  border-radius: 999px;
  opacity: .4;
  filter: blur(7px);
  background: radial-gradient(circle at 35% 35%, #ffe970, #ef7612 42%, transparent 70%);
}

.ambient-1 { top: -28px; left: -22px; }
.ambient-2 { top: 108px; right: -46px; transform: scale(.8); }
.ambient-3 { top: 510px; left: -50px; transform: scale(1.2); }

.brand-header {
  display: flex;
  justify-content: center;
  min-height: 86px;
}

.logo-slot {
  display: grid;
  place-items: center;
  width: 205px;
  min-height: 72px;
  padding: 8px 16px;
  border: 1px dashed rgba(255, 213, 92, .65);
  border-radius: 18px;
  cursor: pointer;
  background: rgba(255, 255, 255, .035);
  backdrop-filter: blur(8px);
}

.logo-slot:hover {
  background: rgba(255, 209, 67, .08);
}

.logo-slot img {
  width: 100%;
  max-height: 62px;
  object-fit: contain;
}

.logo-slot span {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-slot strong {
  color: #f5c84c;
  font-size: 24px;
  letter-spacing: 2px;
}

.logo-slot small {
  max-width: 75px;
  color: rgba(255, 255, 255, .72);
  font-size: 10px;
  line-height: 1.2;
  text-transform: uppercase;
}

.headline-card {
  position: relative;
  width: min(85%, 350px);
  margin: 18px auto -2px;
  padding: 20px 20px 23px;
  text-align: center;
  color: #fff;
  transform: perspective(500px) rotateX(-3deg);
  clip-path: polygon(7% 0, 93% 0, 100% 78%, 86% 100%, 14% 100%, 0 78%);
  background:
    linear-gradient(#111, #111) padding-box,
    linear-gradient(120deg, #fff1aa, #d08b00, #fff4bf) border-box;
  border: 4px solid transparent;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.5));
}

.headline-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 2px dotted rgba(255, 230, 154, .9);
  clip-path: inherit;
}

.headline-card p,
.headline-card h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  line-height: 1.05;
}

.headline-card p {
  font-size: 18px;
  font-weight: 900;
}

.headline-card h1 {
  margin-top: 3px;
  font-size: 18px;
  font-weight: 900;
}

.wheel-stage {
  position: relative;
  width: 100%;
  margin: -2px auto 0;
  padding-top: 25px;
}

.pointer {
  position: absolute;
  z-index: 9;
  top: 5px;
  left: 50%;
  width: 60px;
  height: 82px;
  transform: translateX(-50%);
  clip-path: polygon(50% 100%, 8% 18%, 50% 0, 92% 18%);
  background: linear-gradient(90deg, #d99500, #fff064 44%, #f6b814 72%, #9e6500);
  filter: drop-shadow(0 6px 4px rgba(0,0,0,.4));
}

.pointer::after {
  content: "";
  position: absolute;
  inset: 4px;
  clip-path: inherit;
  background: linear-gradient(90deg, #d68500, #ffc51b 48%, #ffef68);
}

.pointer-badge {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  transform: translateX(-50%);
  border: 3px solid #7b4d00;
  border-radius: 50%;
  color: #7b2400;
  font-size: 14px;
  background: radial-gradient(circle, #fff26e, #ffc400 65%, #d88800);
}

.wheel-frame {
  position: relative;
  width: min(88vw, 400px);
  aspect-ratio: 1;
  margin: 0 auto;
  padding: 25px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 24%, rgba(255,255,255,.95) 0 5px, transparent 6px),
    radial-gradient(circle at 67% 19%, rgba(255,255,255,.95) 0 5px, transparent 6px),
    radial-gradient(circle at 83% 38%, rgba(255,255,255,.95) 0 5px, transparent 6px),
    radial-gradient(circle at 84% 66%, rgba(255,255,255,.95) 0 5px, transparent 6px),
    radial-gradient(circle at 66% 84%, rgba(255,255,255,.95) 0 5px, transparent 6px),
    radial-gradient(circle at 36% 87%, rgba(255,255,255,.95) 0 5px, transparent 6px),
    radial-gradient(circle at 15% 67%, rgba(255,255,255,.95) 0 5px, transparent 6px),
    radial-gradient(circle at 15% 38%, rgba(255,255,255,.95) 0 5px, transparent 6px),
    linear-gradient(135deg, #fff3ac 0%, #b87300 23%, #fff1a5 46%, #be7900 67%, #ffe980 100%);
  box-shadow:
    0 0 0 4px #9c6100,
    0 0 0 9px rgba(255, 221, 110, .25),
    0 14px 28px rgba(0,0,0,.7),
    inset 0 0 15px rgba(255,255,255,.55);
}

.wheel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 5px solid #663900;
  border-radius: 50%;
  background:
    conic-gradient(
      from -30deg,
      #8a4b13 0 60deg,
      #079246 60deg 120deg,
      #686b82 120deg 180deg,
      #960c67 180deg 240deg,
      #087fce 240deg 300deg,
      #7c0033 300deg 360deg
    );
  box-shadow:
    inset 0 0 30px rgba(0,0,0,.55),
    0 0 0 3px rgba(255,236,143,.75);
  transition: transform 4.4s cubic-bezier(.12,.64,.16,1);
}

.wheel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgba(255,255,255,.05) 62%, rgba(0,0,0,.24) 100%),
    repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0 .7deg, transparent .7deg 60deg);
  pointer-events: none;
}

.wheel-label {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  width: 116px;
  text-align: center;
  line-height: 1;
  text-shadow: 0 2px 3px rgba(0,0,0,.7);
  transform-origin: center 128px;
}

.wheel-label span {
  display: block;
  margin-bottom: 3px;
  font-size: 9px;
}

.wheel-label b {
  display: block;
  font-size: 17px;
  white-space: nowrap;
}

.label-1 { transform: translate(-50%, -50%) rotate(0deg) translateY(-105px) rotate(0deg); }
.label-2 { transform: translate(-50%, -50%) rotate(60deg) translateY(-105px) rotate(-60deg); }
.label-3 { transform: translate(-50%, -50%) rotate(120deg) translateY(-105px) rotate(-120deg); }
.label-4 { transform: translate(-50%, -50%) rotate(180deg) translateY(-105px) rotate(-180deg); }
.label-5 { transform: translate(-50%, -50%) rotate(240deg) translateY(-105px) rotate(-240deg); }
.label-6 { transform: translate(-50%, -50%) rotate(300deg) translateY(-105px) rotate(-300deg); }

.spin-button {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  border: 7px solid #8b5500;
  border-radius: 50%;
  cursor: pointer;
  color: #8a1200;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .5px;
  background:
    radial-gradient(circle at 35% 28%, #fff9a7, #ffdb20 42%, #db8e00 75%, #8b5200);
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.75),
    0 5px 9px rgba(0,0,0,.55),
    0 0 0 3px #ffd24c;
}

.spin-button:active {
  transform: translate(-50%, -50%) scale(.96);
}

.spin-button:disabled {
  cursor: wait;
  filter: grayscale(.2);
}

.wheel-stand {
  position: relative;
  width: 235px;
  height: 48px;
  margin: -10px auto 0;
}

.stand-neck {
  width: 105px;
  height: 40px;
  margin: auto;
  clip-path: polygon(19% 0, 81% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #191919, #5b5b5b, #151515);
}

.stand-base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18px;
  border-bottom: 6px solid #131313;
  background: linear-gradient(#5b5b5b, #151515);
}

.bonus-section {
  position: relative;
  margin-top: 23px;
  text-align: center;
}

.bonus-section h2 {
  margin: 0 0 19px;
  color: #ffde7d;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .3px;
}

.bonus-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 22px;
}

.bonus-pill {
  position: relative;
  min-height: 36px;
  padding: 8px 8px 8px 29px;
  border: 1px solid #d82518;
  border-radius: 99px;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  background: linear-gradient(180deg, #b50805, #6f0101);
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 4px 10px rgba(0,0,0,.35);
}

.bonus-pill:hover {
  filter: brightness(1.13);
}

.bonus-pill-center {
  grid-column: 1 / -1;
  justify-self: center;
  width: 65%;
}

.coin {
  position: absolute;
  left: -7px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  transform: translateY(-50%);
  border: 2px solid #6c3c00;
  border-radius: 50%;
  color: #7c2800;
  background: radial-gradient(circle at 35% 28%, #fff495, #eaa500 60%, #845000);
  box-shadow: 0 3px 5px rgba(0,0,0,.45);
}

.site-footer {
  color: #777;
  background: #ececec;
}

.partner-logos {
  display: flex;
  justify-content: space-around;
  gap: 6px;
  padding: 20px 14px 12px;
  overflow: hidden;
}

.partner-logos span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  border: 2px solid #888;
  border-radius: 50%;
  color: #777;
  font-size: 10px;
  font-weight: 900;
}

.support-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 14px 12px;
  border-top: 1px solid #d5d5d5;
}

.support-row > div:first-child {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.support-row small {
  font-size: 11px;
}

.support-row strong {
  font-size: 14px;
  font-weight: 500;
}

.support-icons {
  display: flex;
  gap: 6px;
  align-items: center;
}

.support-icons span {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  color: #eee;
  font-size: 12px;
  font-weight: 900;
  background: #8a8a8a;
}

.copyright {
  padding: 12px 10px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #9f9f9f;
  text-align: center;
  color: #979797;
  font-size: 13px;
}

.modal-overlay {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.83);
  backdrop-filter: blur(3px);
}

.modal-overlay[hidden] {
  display: none;
}

#confettiCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.claim-card {
  position: relative;
  z-index: 3;
  width: min(92vw, 395px);
  padding: 18px;
  border: 7px solid #8b2f00;
  border-radius: 35px;
  background:
    repeating-radial-gradient(circle at 10px 10px, #ffed74 0 3px, transparent 4px 17px),
    linear-gradient(160deg, #ffd44c, #ff9e13 70%);
  box-shadow:
    0 16px 45px rgba(0,0,0,.68),
    0 0 0 5px #ffdf4f,
    inset 0 0 30px rgba(255,255,255,.28);
  animation: popIn .34s ease-out;
}

.claim-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 22px;
  pointer-events: none;
}

.claim-content {
  position: relative;
  z-index: 2;
  padding: 24px 10px 11px;
  text-align: center;
  color: #841400;
}

.claim-content p,
.claim-content h2,
.claim-content h3 {
  margin: 0;
  font-weight: 900;
}

.claim-content p { font-size: 17px; }
.claim-content h2 { margin-top: 8px; font-size: 16px; }
.claim-content h3 { margin-top: 5px; font-size: 16px; }

.result-box {
  margin: 16px auto;
  padding: 10px 12px;
  border-radius: 12px;
  color: #6e1900;
  font-size: 12px;
  background: rgba(255,255,255,.35);
}

.result-box strong {
  display: block;
  margin-top: 4px;
  font-size: 15px;
}

.claim-button {
  width: 82%;
  min-height: 55px;
  border: 0;
  border-radius: 18px;
  color: #ffe586;
  cursor: pointer;
  font-size: 19px;
  background: linear-gradient(180deg, #d31600, #9b0000);
  box-shadow: inset 0 2px rgba(255,255,255,.15), 0 6px 0 #761200;
}

.claim-button:active {
  transform: translateY(3px);
  box-shadow: inset 0 2px rgba(255,255,255,.15), 0 3px 0 #761200;
}

.close-modal {
  position: absolute;
  z-index: 6;
  top: -14px;
  right: -12px;
  width: 40px;
  height: 40px;
  border: 3px solid #ffcb43;
  border-radius: 50%;
  color: #fff2a2;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  background: #9c0b00;
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.72) translateY(35px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

@media (max-width: 390px) {
  .hero { padding-left: 12px; padding-right: 12px; }
  .wheel-frame { padding: 22px; }
  .wheel-label { transform-origin: center 110px; width: 99px; }
  .wheel-label b { font-size: 14px; }
  .spin-button { width: 87px; height: 87px; }
  .bonus-grid { gap: 14px 13px; }
  .bonus-pill { font-size: 10px; }
}

@media (min-width: 521px) {
  body { padding: 18px 0; }
  .app-shell { border-radius: 26px; }
}


/* =========================================================
   VERSI LEBIH MERIAH: WHEEL, LAMPU, SPARKLE, DAN WIN EFFECT
   ========================================================= */

.wheel-stage {
  z-index: 2;
}

.wheel-rays {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 43%;
  width: min(126vw, 590px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: .42;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 204, 58, .42) 0deg 7deg,
      transparent 7deg 15deg
    );
  mask-image: radial-gradient(circle, transparent 0 29%, #000 42%, transparent 74%);
  animation: rayRotate 13s linear infinite;
}

.wheel-rays::after {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 193, 34, .38), transparent 64%);
  filter: blur(20px);
}

.sparkle-field {
  position: absolute;
  z-index: 2;
  inset: -30px -8px 42px;
  pointer-events: none;
}

.sparkle-field i {
  position: absolute;
  width: 8px;
  height: 8px;
  transform: rotate(45deg);
  background: #ffe56a;
  box-shadow: 0 0 10px #ffc400, 0 0 22px rgba(255, 155, 0, .85);
  animation: sparkleBlink 1s ease-in-out infinite alternate;
}

.sparkle-field i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  transform: translate(-50%, -50%);
  background: rgba(255, 239, 158, .88);
  box-shadow: 0 0 8px #fff0a0;
}

.sparkle-field i:nth-child(1) { left: 5%; top: 24%; animation-delay: -.1s; }
.sparkle-field i:nth-child(2) { right: 4%; top: 18%; animation-delay: -.65s; transform: rotate(20deg) scale(.8); }
.sparkle-field i:nth-child(3) { left: 9%; top: 53%; animation-delay: -.25s; transform: rotate(60deg) scale(.7); }
.sparkle-field i:nth-child(4) { right: 7%; top: 55%; animation-delay: -.8s; transform: rotate(10deg) scale(1.1); }
.sparkle-field i:nth-child(5) { left: 19%; top: 5%; animation-delay: -.45s; }
.sparkle-field i:nth-child(6) { right: 22%; top: 4%; animation-delay: -.2s; transform: rotate(15deg) scale(.75); }
.sparkle-field i:nth-child(7) { left: 2%; top: 77%; animation-delay: -.7s; transform: rotate(20deg) scale(.7); }
.sparkle-field i:nth-child(8) { right: 2%; top: 75%; animation-delay: -.35s; }
.sparkle-field i:nth-child(9) { left: 32%; top: 87%; animation-delay: -.55s; transform: scale(.7); }
.sparkle-field i:nth-child(10) { right: 31%; top: 90%; animation-delay: -.05s; transform: rotate(10deg) scale(.85); }
.sparkle-field i:nth-child(11) { left: 1%; top: 38%; animation-delay: -.95s; transform: scale(.55); }
.sparkle-field i:nth-child(12) { right: 1%; top: 38%; animation-delay: -.4s; transform: scale(.55); }

.floating-coins {
  position: absolute;
  z-index: 1;
  inset: -30px -20px 20px;
  pointer-events: none;
}

.floating-coins span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 2px solid #7d4b00;
  border-radius: 50%;
  color: #8d3300;
  font-size: 12px;
  background: radial-gradient(circle at 34% 28%, #fff8a6, #ffc719 54%, #9a5a00);
  box-shadow: 0 5px 8px rgba(0,0,0,.42), 0 0 14px rgba(255,195,20,.4);
  animation: coinFloat 3.2s ease-in-out infinite;
}

.floating-coins span:nth-child(1) { left: 0; top: 32%; animation-delay: -.4s; }
.floating-coins span:nth-child(2) { right: -2px; top: 28%; animation-delay: -1.7s; }
.floating-coins span:nth-child(3) { left: 5%; top: 67%; animation-delay: -2.2s; transform: scale(.78); }
.floating-coins span:nth-child(4) { right: 4%; top: 69%; animation-delay: -.9s; transform: scale(.8); }
.floating-coins span:nth-child(5) { left: 15%; top: 9%; animation-delay: -1.1s; transform: scale(.65); }
.floating-coins span:nth-child(6) { right: 15%; top: 9%; animation-delay: -2.5s; transform: scale(.65); }

.wheel-frame {
  isolation: isolate;
  animation: wheelGlow 1.5s ease-in-out infinite alternate;
}

.wheel-frame::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -18px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(255, 229, 103, .08),
      rgba(255, 170, 0, .65),
      rgba(255, 242, 154, .08),
      rgba(255, 170, 0, .65),
      rgba(255, 229, 103, .08)
    );
  filter: blur(15px);
  animation: haloSpin 5s linear infinite;
}

.wheel-frame::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  pointer-events: none;
}

.bulb-ring {
  position: absolute;
  z-index: 6;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: bulbRingRotate 16s linear infinite;
}

.bulb-ring i {
  --angle: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13px;
  height: 13px;
  margin: -6.5px;
  border: 1px solid #9b5900;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #fff5a8 30%, #ffc61b 65%, #a95f00);
  box-shadow: 0 0 7px #fff3a2, 0 0 14px #ffb600;
  transform: rotate(var(--angle)) translateY(calc(-1 * (min(44vw, 200px) - 11px))) rotate(calc(-1 * var(--angle)));
  animation: bulbBlink .62s ease-in-out infinite alternate;
}

.bulb-ring i:nth-child(1)  { --angle: 0deg; }
.bulb-ring i:nth-child(2)  { --angle: 22.5deg; animation-delay: -.1s; }
.bulb-ring i:nth-child(3)  { --angle: 45deg; animation-delay: -.2s; }
.bulb-ring i:nth-child(4)  { --angle: 67.5deg; animation-delay: -.3s; }
.bulb-ring i:nth-child(5)  { --angle: 90deg; animation-delay: -.4s; }
.bulb-ring i:nth-child(6)  { --angle: 112.5deg; animation-delay: -.5s; }
.bulb-ring i:nth-child(7)  { --angle: 135deg; animation-delay: -.6s; }
.bulb-ring i:nth-child(8)  { --angle: 157.5deg; animation-delay: -.7s; }
.bulb-ring i:nth-child(9)  { --angle: 180deg; animation-delay: -.8s; }
.bulb-ring i:nth-child(10) { --angle: 202.5deg; animation-delay: -.9s; }
.bulb-ring i:nth-child(11) { --angle: 225deg; animation-delay: -1s; }
.bulb-ring i:nth-child(12) { --angle: 247.5deg; animation-delay: -1.1s; }
.bulb-ring i:nth-child(13) { --angle: 270deg; animation-delay: -1.2s; }
.bulb-ring i:nth-child(14) { --angle: 292.5deg; animation-delay: -1.3s; }
.bulb-ring i:nth-child(15) { --angle: 315deg; animation-delay: -1.4s; }
.bulb-ring i:nth-child(16) { --angle: 337.5deg; animation-delay: -1.5s; }

.wheel {
  transition: transform 3.15s cubic-bezier(.08,.68,.11,1);
}

.wheel.is-spinning {
  filter: saturate(1.2) brightness(1.08);
}

.pointer {
  animation: pointerBounce 1s ease-in-out infinite;
}

.pointer.is-ticking {
  animation: pointerTick .11s ease-in-out infinite alternate;
}

.spin-button {
  overflow: hidden;
  animation: buttonPulse 1.25s ease-in-out infinite;
}

.spin-button::before {
  content: "";
  position: absolute;
  inset: -50%;
  background: linear-gradient(110deg, transparent 37%, rgba(255,255,255,.75) 49%, transparent 61%);
  transform: translateX(-55%) rotate(10deg);
  animation: buttonShine 2s linear infinite;
}

.spin-button span {
  position: relative;
  z-index: 2;
}

.spin-button:disabled {
  animation: buttonFastPulse .35s ease-in-out infinite alternate;
}

.modal-overlay {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 166, 0, .24), transparent 31%),
    rgba(0,0,0,.88);
}

.win-flashes {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(130vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 217, 77, .4) 0 4deg,
      transparent 4deg 12deg
    );
  mask-image: radial-gradient(circle, transparent 0 16%, #000 28%, transparent 73%);
  animation: winFlashSpin 6s linear infinite;
  pointer-events: none;
}

.win-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.win-stars span {
  position: absolute;
  color: #ffe05a;
  font-size: clamp(25px, 8vw, 58px);
  text-shadow: 0 0 12px #ffb300, 0 0 25px rgba(255,153,0,.85);
  animation: starPop .75s ease-in-out infinite alternate;
}

.win-stars span:nth-child(1) { left: 5%; top: 12%; animation-delay: -.1s; }
.win-stars span:nth-child(2) { right: 7%; top: 15%; animation-delay: -.4s; }
.win-stars span:nth-child(3) { left: 12%; bottom: 12%; animation-delay: -.65s; }
.win-stars span:nth-child(4) { right: 10%; bottom: 10%; animation-delay: -.25s; }
.win-stars span:nth-child(5) { left: 2%; top: 48%; animation-delay: -.55s; font-size: 28px; }
.win-stars span:nth-child(6) { right: 2%; top: 49%; animation-delay: -.15s; font-size: 28px; }
.win-stars span:nth-child(7) { left: 29%; top: 4%; animation-delay: -.7s; font-size: 22px; }
.win-stars span:nth-child(8) { right: 29%; bottom: 3%; animation-delay: -.35s; font-size: 22px; }

.claim-card {
  padding-top: 30px;
  animation: claimEntrance .48s cubic-bezier(.17,.89,.32,1.35), claimGlow .8s ease-in-out .48s infinite alternate;
}

.winner-ribbon {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: -26px;
  width: 82%;
  padding: 12px 18px;
  transform: translateX(-50%) rotate(-1deg);
  border: 3px solid #ffe77a;
  border-radius: 999px;
  color: #fff4a3;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .4px;
  background: linear-gradient(180deg, #d91b08, #8b0500);
  box-shadow: 0 7px 0 #651400, 0 10px 22px rgba(0,0,0,.45), 0 0 18px rgba(255,195,30,.6);
  animation: ribbonWiggle .55s ease-in-out infinite alternate;
}

.trophy-badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: -9px auto 8px;
  border: 5px solid #8d5000;
  border-radius: 50%;
  color: #8b2300;
  font-size: 28px;
  background: radial-gradient(circle at 35% 28%, #fffbd0, #ffdf35 48%, #d98a00 80%);
  box-shadow: 0 0 0 4px #ffed8b, 0 8px 12px rgba(0,0,0,.35), 0 0 24px rgba(255,197,26,.7);
  animation: trophyBounce .72s ease-in-out infinite alternate;
}

.result-box {
  border: 2px solid rgba(142,62,0,.25);
  box-shadow: inset 0 0 18px rgba(255,255,255,.25);
  animation: resultPulse .7s ease-in-out infinite alternate;
}

.claim-button {
  position: relative;
  overflow: hidden;
  animation: claimButtonPulse .68s ease-in-out infinite alternate;
}

.claim-button::before {
  content: "";
  position: absolute;
  inset: -70% -30%;
  background: linear-gradient(110deg, transparent 39%, rgba(255,255,255,.55) 49%, transparent 59%);
  animation: claimButtonShine 1.2s linear infinite;
}

@keyframes rayRotate {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes sparkleBlink {
  from { opacity: .2; filter: brightness(.8); transform: rotate(45deg) scale(.55); }
  to { opacity: 1; filter: brightness(1.5); transform: rotate(45deg) scale(1.18); }
}

@keyframes coinFloat {
  0%, 100% { margin-top: 0; rotate: -8deg; }
  50% { margin-top: -12px; rotate: 11deg; }
}

@keyframes wheelGlow {
  from { filter: drop-shadow(0 0 3px rgba(255,181,0,.35)); }
  to { filter: drop-shadow(0 0 19px rgba(255,193,23,.72)); }
}

@keyframes haloSpin {
  to { transform: rotate(360deg); }
}

@keyframes bulbRingRotate {
  to { transform: rotate(360deg); }
}

@keyframes bulbBlink {
  from { opacity: .45; filter: brightness(.75); }
  to { opacity: 1; filter: brightness(1.7); }
}

@keyframes pointerBounce {
  0%, 100% { translate: -50% 0; }
  50% { translate: -50% -4px; }
}

@keyframes pointerTick {
  from { translate: -50% 0; rotate: -4deg; }
  to { translate: -50% 0; rotate: 4deg; }
}

@keyframes buttonPulse {
  0%, 100% { box-shadow: inset 0 0 14px rgba(255,255,255,.75), 0 5px 9px rgba(0,0,0,.55), 0 0 0 3px #ffd24c, 0 0 0 rgba(255,194,20,0); }
  50% { box-shadow: inset 0 0 14px rgba(255,255,255,.9), 0 5px 9px rgba(0,0,0,.55), 0 0 0 3px #ffd24c, 0 0 26px rgba(255,194,20,.8); }
}

@keyframes buttonFastPulse {
  to { filter: brightness(1.35) saturate(1.25); }
}

@keyframes buttonShine {
  to { transform: translateX(55%) rotate(10deg); }
}

@keyframes winFlashSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes starPop {
  from { opacity: .35; transform: scale(.65) rotate(-12deg); }
  to { opacity: 1; transform: scale(1.2) rotate(12deg); }
}

@keyframes claimEntrance {
  0% { opacity: 0; transform: scale(.45) translateY(80px) rotate(-7deg); }
  70% { opacity: 1; transform: scale(1.06) translateY(-5px) rotate(2deg); }
  100% { transform: scale(1) translateY(0) rotate(0); }
}

@keyframes claimGlow {
  from { box-shadow: 0 16px 45px rgba(0,0,0,.68), 0 0 0 5px #ffdf4f, inset 0 0 30px rgba(255,255,255,.28), 0 0 12px rgba(255,187,0,.3); }
  to { box-shadow: 0 16px 45px rgba(0,0,0,.68), 0 0 0 5px #ffdf4f, inset 0 0 30px rgba(255,255,255,.28), 0 0 46px rgba(255,187,0,.85); }
}

@keyframes ribbonWiggle {
  from { transform: translateX(-50%) rotate(-2deg) scale(.98); }
  to { transform: translateX(-50%) rotate(2deg) scale(1.02); }
}

@keyframes trophyBounce {
  from { transform: translateY(0) rotate(-5deg) scale(.96); }
  to { transform: translateY(-7px) rotate(5deg) scale(1.06); }
}

@keyframes resultPulse {
  from { transform: scale(.985); filter: brightness(.98); }
  to { transform: scale(1.025); filter: brightness(1.12); }
}

@keyframes claimButtonPulse {
  from { transform: scale(.98); }
  to { transform: scale(1.035); }
}

@keyframes claimButtonShine {
  to { transform: translateX(65%); }
}

@media (max-width: 390px) {
  .bulb-ring i {
    width: 11px;
    height: 11px;
    margin: -5.5px;
    transform: rotate(var(--angle)) translateY(calc(-1 * (44vw - 11px))) rotate(calc(-1 * var(--angle)));
  }

  .winner-ribbon {
    width: 88%;
    font-size: 13px;
  }
}
/*
=============================================================
PERBAIKAN POINTER RESPONSIVE
File ini harus dipanggil SETELAH style.css
=============================================================
*/

/* Logo tidak lagi memakai inline width supaya menyesuaikan HP. */
.brand-logo {
  display: block;
  width: clamp(175px, 58vw, 250px);
  max-width: 100%;
  height: auto;
  max-height: 82px;
  margin-inline: auto;
  object-fit: contain;
}

/*
Wheel tidak lagi memakai padding kosong untuk menempatkan pointer.
Jarak diberikan langsung pada wheel-frame.
*/
.wheel-stage {
  padding-top: 0 !important;
}

.wheel-frame {
  position: relative !important;
  margin-top: clamp(38px, 11vw, 50px) !important;
}

/*
Pointer sekarang dihitung berdasarkan lebar viewport,
tetapi tetap memiliki ukuran minimum dan maksimum.
*/
.pointer {
  position: absolute !important;
  z-index: 20 !important;

  left: 50% !important;
  top: clamp(-38px, -9vw, -28px) !important;

  width: clamp(42px, 12vw, 58px) !important;
  height: clamp(62px, 17vw, 78px) !important;

  margin: 0 !important;
  translate: none !important;
  rotate: none !important;

  transform: translateX(-50%) translateY(0) rotate(0deg) !important;
  transform-origin: 50% 14% !important;

  clip-path: polygon(
    50% 100%,
    10% 30%,
    16% 12%,
    50% 0,
    84% 12%,
    90% 30%
  ) !important;

  background:
    linear-gradient(
      90deg,
      #8b5400 0%,
      #e49a00 14%,
      #fff39a 48%,
      #f4b413 72%,
      #875000 100%
    ) !important;

  filter:
    drop-shadow(0 5px 4px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 9px rgba(255, 200, 43, 0.75)) !important;

  animation: pointerBounceFixed 1s ease-in-out infinite !important;
  pointer-events: none;
}

/* Lapisan emas bagian dalam pointer. */
.pointer::after {
  content: "" !important;
  position: absolute !important;
  inset: clamp(3px, 0.9vw, 5px) !important;
  z-index: 1 !important;

  clip-path: inherit !important;

  background:
    linear-gradient(
      100deg,
      #d48300 0%,
      #ffd51f 42%,
      #fff270 66%,
      #d88800 100%
    ) !important;
}

/* Lingkaran bintang dibuat ikut mengecil pada layar sempit. */
.pointer-badge {
  position: absolute !important;
  z-index: 3 !important;

  top: clamp(10px, 2.8vw, 15px) !important;
  left: 50% !important;

  display: grid !important;
  place-items: center !important;

  width: clamp(25px, 7.6vw, 34px) !important;
  height: clamp(25px, 7.6vw, 34px) !important;

  margin: 0 !important;
  transform: translateX(-50%) !important;

  border: clamp(2px, 0.7vw, 3px) solid #744300 !important;
  border-radius: 50% !important;

  color: #6f2100 !important;
  font-size: clamp(12px, 3.8vw, 16px) !important;
  line-height: 1 !important;

  background:
    radial-gradient(
      circle at 35% 28%,
      #fffbd0 0%,
      #ffef72 27%,
      #ffc51b 63%,
      #d78200 100%
    ) !important;

  box-shadow:
    inset 0 0 5px rgba(255, 255, 255, 0.8),
    0 2px 4px rgba(0, 0, 0, 0.42) !important;
}

/*
Penyebab pointer sebelumnya terlihat bergeser:
CSS lama memakai transform: translateX(-50%) sekaligus
property translate: -50%. Akibatnya posisi horizontal dihitung dua kali.

Animasi di bawah hanya menggunakan transform sehingga selalu di tengah.
*/
@keyframes pointerBounceFixed {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }

  50% {
    transform: translateX(-50%) translateY(-3px) rotate(0deg);
  }
}

/* Dipakai ketika class is-ticking ditambahkan oleh app.js. */
.pointer.is-ticking {
  animation: pointerTickFixed 0.11s ease-in-out infinite alternate !important;
}

@keyframes pointerTickFixed {
  from {
    transform: translateX(-50%) translateY(0) rotate(-3deg);
  }

  to {
    transform: translateX(-50%) translateY(1px) rotate(3deg);
  }
}

/* Wheel tetap simetris pada HP yang sangat kecil. */
@media (max-width: 390px) {
  .wheel-frame {
    margin-top: 40px !important;
  }

  .pointer {
    top: -30px !important;
    width: 44px !important;
    height: 64px !important;
  }

  .pointer-badge {
    top: 11px !important;
    width: 27px !important;
    height: 27px !important;
    font-size: 13px !important;
  }
}

/* Samsung/HP kecil sekitar 320px. */
@media (max-width: 340px) {
  .wheel-frame {
    margin-top: 37px !important;
  }

  .pointer {
    top: -27px !important;
    width: 40px !important;
    height: 59px !important;
  }

  .pointer-badge {
    top: 10px !important;
    width: 25px !important;
    height: 25px !important;
  }
}

/* Fallback saat file logo belum tersedia. */
.logo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: clamp(175px, 58vw, 250px);
  min-height: 66px;
  padding: 10px 16px;
  border: 1px dashed rgba(255, 211, 75, 0.72);
  border-radius: 16px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.04);
}

.logo-fallback[hidden] {
  display: none;
}

.logo-fallback strong {
  color: #f6c947;
  font-size: 24px;
  letter-spacing: 2px;
}

.logo-fallback small {
  max-width: 110px;
  font-size: 10px;
  line-height: 1.25;
}