/* ==========================================================
   CelcomDigi MEGA GEGAR 20 JUTA — Kotak Misteri
   Campaign palette (sampled from KV):
   navy bg     #00167e / #001290
   royal blue  #1436d9
   cd yellow   #ffd200 / #f8b400
   gold ribbon #e8920c
   ========================================================== */

:root {
  --navy: #001290;
  --navy-deep: #000b52;
  --royal: #1436d9;
  --yellow: #ffd200;
  --yellow-deep: #f8a300;
  --gold: #e8920c;
  --sky: #7fd1ff;
  --font: 'Poppins', 'Trebuchet MS', 'Segoe UI', -apple-system, 'Roboto', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: #000616;
  font-family: var(--font);
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- portrait stage ----
   Never wider than 9:16 (kiosk panels and desktop get exact 9:16,
   letterboxed horizontally); on taller phone screens it fills the
   full height and the flex layout stretches gracefully. */
#stage {
  position: fixed;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 100vh;
  height: 100dvh;
  width: min(100vw, calc(100vh * 9 / 16));
  width: min(100vw, calc(100dvh * 9 / 16));
  overflow: hidden;
  background:
    radial-gradient(120% 55% at 50% 30%, #1636c2 0%, #0a1d9e 45%, var(--navy) 72%, var(--navy-deep) 100%);
}

.bg-glow {
  position: absolute; inset: 0;
  background: radial-gradient(60% 30% at 50% 62%, rgba(255, 210, 0, 0.14) 0%, rgba(255, 210, 0, 0) 70%);
  pointer-events: none;
}

#fx-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* ---------------- header ---------------- */
#header {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: calc(3.5% + env(safe-area-inset-top, 0px)) 5% 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 8;
}
#logo { width: 34%; height: auto; }
#mute-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 1.1rem;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  cursor: pointer;
}

/* ---------------- screens ---------------- */
.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 4;
}
.screen.active { display: flex; }

/* ---------------- play screen ---------------- */
#masthead {
  width: 52%;
  margin-top: 15%;
  filter: drop-shadow(0 1.2vh 2.4vh rgba(0, 5, 40, 0.55));
  animation: masthead-bob 3.2s ease-in-out infinite;
  z-index: 4;
}
@keyframes masthead-bob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50%      { transform: translateY(-1.2%) rotate(1.2deg); }
}

#tagline {
  margin-top: 2%;
  color: var(--yellow);
  font-weight: 700;
  font-size: clamp(12px, 2vh, 22px);
  text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  z-index: 4;
}

/* ---------------- box area ---------------- */
#box-area {
  position: relative;
  margin-top: 2%;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 4;
}

#light-rays {
  position: absolute;
  left: 50%; bottom: 4%;
  width: 130vmin; height: 130vmin;
  margin-left: -65vmin;
  background: conic-gradient(
    rgba(255,210,0,0.22) 0deg 14deg, transparent 14deg 36deg,
    rgba(255,210,0,0.22) 36deg 50deg, transparent 50deg 72deg,
    rgba(255,210,0,0.22) 72deg 86deg, transparent 86deg 108deg,
    rgba(255,210,0,0.22) 108deg 122deg, transparent 122deg 144deg,
    rgba(255,210,0,0.22) 144deg 158deg, transparent 158deg 180deg,
    rgba(255,210,0,0.22) 180deg 194deg, transparent 194deg 216deg,
    rgba(255,210,0,0.22) 216deg 230deg, transparent 230deg 252deg,
    rgba(255,210,0,0.22) 252deg 266deg, transparent 266deg 288deg,
    rgba(255,210,0,0.22) 288deg 302deg, transparent 302deg 324deg,
    rgba(255,210,0,0.22) 324deg 338deg, transparent 338deg 360deg
  );
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.5s ease;
  animation: rays-spin 14s linear infinite;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 68%);
  mask-image: radial-gradient(circle, #000 0%, transparent 68%);
}
@keyframes rays-spin {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1) rotate(360deg); }
}
#light-rays.on { opacity: 1; }

#box-glow {
  position: absolute;
  left: 50%; bottom: 2%;
  width: 70%; height: 46%;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 60%, rgba(255,210,0,0.5) 0%, rgba(255,180,0,0) 70%);
  filter: blur(6px);
  animation: glow-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow-pulse {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.12); }
}

#giftbox {
  position: relative;
  height: 94%;
  max-width: 70%;
  object-fit: contain;
  cursor: pointer;
  filter: drop-shadow(0 2.4vh 3vh rgba(0, 4, 30, 0.6));
  animation: box-bob 2.8s ease-in-out infinite;
  transform-origin: 50% 90%;
  z-index: 4;
}
@keyframes box-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-2.4%) scale(1.015); }
}

#giftbox.shaking {
  animation: box-shake 0.14s linear infinite;
}
@keyframes box-shake {
  0%   { transform: rotate(0deg)    translateX(0); }
  25%  { transform: rotate(-3.2deg) translateX(-1.6%); }
  50%  { transform: rotate(0deg)    translateX(0); }
  75%  { transform: rotate(3.2deg)  translateX(1.6%); }
  100% { transform: rotate(0deg)    translateX(0); }
}

#giftbox.bursting {
  animation: box-burst 0.35s ease-in forwards;
}
@keyframes box-burst {
  0%   { transform: scale(1); opacity: 1; }
  60%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}

#giftbox-open {
  position: absolute;
  left: 50%; bottom: 0;
  height: 52%;
  transform: translateX(-50%) scale(0);
  filter: drop-shadow(0 2vh 3vh rgba(0, 4, 30, 0.6));
  z-index: 4;
  pointer-events: none;
}
#giftbox-open.show {
  animation: open-pop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) forwards;
}
@keyframes open-pop {
  from { transform: translateX(-50%) scale(0); }
  to   { transform: translateX(-50%) scale(1); }
}

#prize-img {
  position: absolute;
  left: 50%; bottom: 30%;
  max-height: 64%;
  max-width: 74%;
  transform: translateX(-50%) translateY(60%) scale(0.2);
  opacity: 0;
  filter: drop-shadow(0 1.6vh 3vh rgba(0, 4, 30, 0.65));
  z-index: 3;
  pointer-events: none;
}
#prize-img.rise {
  animation: prize-rise 0.9s cubic-bezier(0.18, 1.35, 0.35, 1) 0.15s forwards;
}
@keyframes prize-rise {
  from { opacity: 0; transform: translateX(-50%) translateY(60%) scale(0.2); }
  40%  { opacity: 1; }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ---------------- CTA pill ---------------- */
#cta-pill {
  margin: 3.5% 0 calc(7% + env(safe-area-inset-bottom, 0px));
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow-deep) 100%);
  color: #08187c;
  font-weight: 800;
  font-size: clamp(13px, 2.2vh, 24px);
  letter-spacing: 0.03em;
  padding: 1.6vh 4vh;
  border-radius: 100px;
  box-shadow: 0 0.8vh 2.4vh rgba(255, 180, 0, 0.35), inset 0 -0.5vh 0 rgba(160, 90, 0, 0.25);
  animation: cta-pulse 1.6s ease-in-out infinite;
  z-index: 4;
}
@keyframes cta-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
#cta-pill.hidden { visibility: hidden; }

/* ---------------- quiz gate ---------------- */
#quiz-overlay {
  display: none;
  position: absolute; inset: 0;
  background: rgba(0, 6, 60, 0.78);
  z-index: 6;
  align-items: center;
  justify-content: center;
}
#quiz-overlay.open { display: flex; }

#quiz-card {
  width: 84%;
  background: linear-gradient(180deg, rgba(30, 60, 220, 0.96) 0%, rgba(8, 20, 130, 0.98) 100%);
  border: 2px solid rgba(255, 210, 0, 0.65);
  border-radius: 4vh;
  padding: 3.6vh 6% 3.2vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 3vh 8vh rgba(0, 4, 40, 0.7), inset 0 0.4vh 2vh rgba(130, 170, 255, 0.35);
  animation: card-in 0.4s cubic-bezier(0.2, 1.4, 0.4, 1);
}
#quiz-card.wrong { animation: quiz-shake 0.4s linear; }
@keyframes quiz-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3%); }
  40% { transform: translateX(3%); }
  60% { transform: translateX(-2%); }
  80% { transform: translateX(2%); }
}

#quiz-kicker {
  font-weight: 800;
  font-size: clamp(15px, 2.6vh, 30px);
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffe45c 0%, var(--yellow) 45%, var(--yellow-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.4vh 0 rgba(150, 80, 0, 0.4));
  transform: rotate(-1.5deg);
}

#quiz-question {
  margin: 2vh 0 2.6vh;
  color: #fff;
  font-weight: 700;
  font-size: clamp(15px, 2.6vh, 30px);
  line-height: 1.35;
  text-align: center;
}

.quiz-option {
  width: 100%;
  margin-bottom: 1.6vh;
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(14px, 2.4vh, 28px);
  color: #08187c;
  background: linear-gradient(180deg, #ffffff 0%, #dfe9ff 100%);
  border: 2px solid rgba(140, 180, 255, 0.7);
  border-radius: 100px;
  padding: 1.8vh 4%;
  cursor: pointer;
  box-shadow: 0 0.8vh 2vh rgba(0, 5, 40, 0.4);
}
.quiz-option:active { transform: scale(0.96); }
.quiz-option.correct {
  background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow-deep) 100%);
  border-color: #fff2b0;
}
.quiz-option.wrong {
  background: linear-gradient(180deg, #ff8a8a 0%, #e05555 100%);
  color: #fff;
  border-color: #ffc4c4;
}
.quiz-option:disabled { opacity: 0.9; }

#quiz-feedback {
  min-height: 2.6vh;
  color: var(--yellow);
  font-weight: 700;
  font-size: clamp(12px, 2vh, 22px);
  text-align: center;
}

/* ---------------- flash ---------------- */
#flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 62%, #fff8d8 0%, #ffe98a 30%, rgba(255,220,90,0) 75%);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
#flash.boom { animation: flash-boom 0.55s ease-out forwards; }
@keyframes flash-boom {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------------- reveal card ---------------- */
#screen-reveal { justify-content: center; z-index: 7; }

#reveal-card {
  width: 84%;
  background: linear-gradient(180deg, rgba(30, 60, 220, 0.92) 0%, rgba(8, 20, 130, 0.95) 100%);
  border: 2px solid rgba(255, 210, 0, 0.65);
  border-radius: 4vh;
  padding: 4vh 4% 4vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 3vh 8vh rgba(0, 4, 40, 0.7), inset 0 0.4vh 2vh rgba(130, 170, 255, 0.35);
  animation: card-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes card-in {
  from { transform: scale(0.6) translateY(8%); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

#tahniah {
  font-size: clamp(30px, 6.4vh, 72px);
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(180deg, #ffe45c 0%, var(--yellow) 45%, var(--yellow-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0.6vh 0 rgba(150, 80, 0, 0.45)) drop-shadow(0 1.2vh 2.4vh rgba(0,0,0,0.4));
  transform: rotate(-2deg);
  animation: tahniah-bounce 1.4s ease-in-out infinite;
}
@keyframes tahniah-bounce {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  50%      { transform: rotate(-2deg) scale(1.05); }
}

#reveal-prize-wrap {
  position: relative;
  width: 80%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1vh 0;
}
#reveal-rays {
  position: absolute; inset: -18%;
  background: conic-gradient(
    rgba(255,220,60,0.35) 0deg 16deg, transparent 16deg 40deg,
    rgba(255,220,60,0.35) 40deg 56deg, transparent 56deg 80deg,
    rgba(255,220,60,0.35) 80deg 96deg, transparent 96deg 120deg,
    rgba(255,220,60,0.35) 120deg 136deg, transparent 136deg 160deg,
    rgba(255,220,60,0.35) 160deg 176deg, transparent 176deg 200deg,
    rgba(255,220,60,0.35) 200deg 216deg, transparent 216deg 240deg,
    rgba(255,220,60,0.35) 240deg 256deg, transparent 256deg 280deg,
    rgba(255,220,60,0.35) 280deg 296deg, transparent 296deg 320deg,
    rgba(255,220,60,0.35) 320deg 336deg, transparent 336deg 360deg
  );
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  mask-image: radial-gradient(circle, #000 30%, transparent 70%);
  animation: rays-spin 10s linear infinite;
}
#reveal-prize-img {
  position: relative;
  max-width: 92%;
  max-height: 92%;
  filter: drop-shadow(0 1.6vh 3.2vh rgba(0, 4, 30, 0.6));
  animation: reveal-float 3s ease-in-out infinite;
}
@keyframes reveal-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3%); }
}

#reveal-prize-name {
  background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow-deep) 100%);
  color: #08187c;
  font-weight: 800;
  font-size: clamp(16px, 3vh, 34px);
  text-align: center;
  padding: 1.4vh 4vh;
  border-radius: 100px;
  box-shadow: 0 0.8vh 2vh rgba(0, 5, 40, 0.4), inset 0 -0.5vh 0 rgba(160, 90, 0, 0.25);
}

#reveal-sub {
  margin-top: 1.6vh;
  color: #cfe0ff;
  font-weight: 500;
  font-size: clamp(11px, 1.8vh, 20px);
  text-align: center;
}

.big-btn {
  margin-top: 3vh;
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(15px, 2.6vh, 30px);
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(180deg, #2a54ff 0%, #1230c0 100%);
  border: 2px solid rgba(140, 180, 255, 0.7);
  border-radius: 100px;
  padding: 1.8vh 6vh;
  cursor: pointer;
  box-shadow: 0 1vh 3vh rgba(0, 10, 80, 0.55), inset 0 0.4vh 1vh rgba(160, 195, 255, 0.5);
}
.big-btn:active { transform: scale(0.95); }

/* ---------------- empty screen ---------------- */
#screen-empty { justify-content: center; z-index: 7; }
#empty-card {
  width: 80%;
  text-align: center;
  color: #fff;
  background: rgba(8, 18, 110, 0.9);
  border: 2px solid rgba(255, 210, 0, 0.5);
  border-radius: 4vh;
  padding: 6vh 6%;
}
.empty-emoji { font-size: 8vh; }
#empty-card h2 {
  color: var(--yellow);
  font-size: clamp(18px, 3.4vh, 40px);
  margin: 2vh 0 1vh;
}
#empty-card p { font-size: clamp(12px, 2vh, 22px); color: #cfe0ff; }

/* ---------------- admin ---------------- */
#admin-hotspot {
  position: absolute;
  top: 0; left: 0;
  width: 18%; height: 8%;
  z-index: 9;
}
#admin-panel {
  display: none;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  max-height: 80%;
  overflow-y: auto;
  background: #0a1560;
  border: 2px solid var(--yellow);
  border-radius: 2.4vh;
  color: #fff;
  padding: 3vh 5%;
  z-index: 20;
  font-size: clamp(12px, 1.8vh, 18px);
}
#admin-panel.open { display: block; }
#admin-panel h3 { color: var(--yellow); margin-bottom: 1.4vh; }
.admin-note { color: #9fb4ff; font-size: 0.85em; margin-bottom: 1.4vh; word-break: break-all; }
#admin-stock { margin-bottom: 2vh; }
.stock-row {
  display: flex;
  justify-content: space-between;
  padding: 0.8vh 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.stock-row .qty { font-weight: 700; color: var(--yellow); }
.stock-row.out .qty { color: #ff7a7a; }
.admin-row { display: flex; gap: 3%; margin-top: 1.4vh; }
.admin-row button {
  flex: 1;
  font-family: var(--font);
  font-weight: 700;
  color: #08187c;
  background: var(--yellow);
  border: none;
  border-radius: 100px;
  padding: 1.4vh 0;
  cursor: pointer;
  font-size: inherit;
}
.admin-row button:active { transform: scale(0.96); }