/* ══════════════════════════════════════════
   MISTERI BOX — HOPENGTOTO | Global Styles
══════════════════════════════════════════ */

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

:root {
  --gold:    #f5c518;
  --gold2:   #e8a800;
  --red:     #e62b2b;
  --red2:    #c01e1e;
  --cyan:    #00d8d8;
  --cyan2:   #009999;
  --navy:    #0a0e2a;
  --dark:    #1a0a00;
  --white:   #ffffff;
  --shadow:  0 8px 32px rgba(0,0,0,.6);
  --font-head: 'Oswald', sans-serif;
  --font-body: 'Roboto', sans-serif;
}

html, body {
  width: 100%; height: 100%;
  font-family: var(--font-body);
  background: #000;
  overflow: hidden;
}

/* ─── SCREENS ─── */
.screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
  overflow: hidden;
  z-index: 1;
}
.screen.active {
  opacity: 1; pointer-events: all; z-index: 10;
}

/* ─── BACKGROUNDS ─── */
.landing-bg {
  position: absolute; inset: 0;
  background: url('casino_background.png') center/cover no-repeat;
  filter: brightness(.45) sepia(.5);
  z-index: 0;
}
.landing-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(30,10,0,.4) 0%, rgba(0,0,0,.85) 100%);
  z-index: 1;
}
.game-bg {
  position: absolute; inset: 0;
  background: url('casino_background.png') center/cover no-repeat;
  filter: brightness(.35) hue-rotate(210deg);
  z-index: 0;
}
.game-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(5,5,40,.8) 0%, rgba(0,0,20,.9) 100%);
  z-index: 1;
}

/* ══════════════════════════════════════════
   SCREEN 1 — LANDING
══════════════════════════════════════════ */
.landing-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  padding: 40px 24px;
  max-width: 520px; width: 100%;
  text-align: center;
}

.logo-wrap { margin-bottom: 4px; }
.site-logo {
  width: 220px; height: auto;
  filter: drop-shadow(0 0 14px rgba(245,197,24,.7));
  animation: logo-pulse 2.5s ease-in-out infinite;
}
@keyframes logo-pulse {
  0%,100% { filter: drop-shadow(0 0 12px rgba(245,197,24,.6)); }
  50%      { filter: drop-shadow(0 0 24px rgba(245,197,24,1)); }
}

.event-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(90deg, #8b0000, #c00, #8b0000);
  border: 2px solid var(--gold);
  border-radius: 40px;
  padding: 6px 20px;
  font-family: var(--font-head);
  font-size: 13px; letter-spacing: 2px;
  color: var(--gold);
  box-shadow: 0 0 16px rgba(200,0,0,.5);
}

.landing-title {
  font-family: var(--font-head);
  font-size: clamp(18px, 4vw, 26px);
  font-weight: 700;
  color: #ff4d00;
  text-transform: uppercase;
  line-height: 1.35;
  text-shadow: 0 0 20px rgba(255,60,0,.8), 0 2px 4px rgba(0,0,0,.9);
}

.landing-buttons {
  display: flex; flex-direction: column;
  gap: 14px; width: 100%;
}

/* ─── BUTTONS ─── */
.btn {
  position: relative;
  width: 100%; padding: 18px 24px;
  border: none; border-radius: 6px;
  font-family: var(--font-head);
  font-size: 18px; font-weight: 700;
  letter-spacing: 2px; cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn span { position: relative; z-index: 2; }
.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,.12);
  opacity: 0; transition: opacity .2s;
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(.97); }

.btn-yellow {
  background: linear-gradient(180deg, #f7d200 0%, #d49a00 100%);
  color: #3a2000;
  box-shadow: 0 6px 20px rgba(245,197,24,.5);
}
.btn-yellow:hover { box-shadow: 0 8px 28px rgba(245,197,24,.8); transform: translateY(-2px); }

.btn-red {
  background: linear-gradient(180deg, #ff3636 0%, #b80000 100%);
  color: var(--white);
  box-shadow: 0 6px 20px rgba(200,0,0,.5);
}
.btn-red:hover { box-shadow: 0 8px 28px rgba(200,0,0,.8); transform: translateY(-2px); }

.btn-cyan {
  background: linear-gradient(180deg, #00e8e8 0%, #009090 100%);
  color: #002222;
  box-shadow: 0 6px 20px rgba(0,200,200,.4);
}
.btn-cyan:hover { box-shadow: 0 8px 28px rgba(0,200,200,.7); transform: translateY(-2px); }

.btn-full { width: 100%; }

/* floating boxes on landing */
.floating-boxes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.float-box {
  position: absolute; font-size: 40px;
  opacity: .12; animation: floatUp 6s ease-in-out infinite;
}
.fb1 { left: 5%; bottom: 15%; animation-delay: 0s; }
.fb2 { right: 8%; bottom: 30%; animation-delay: 2s; }
.fb3 { left: 55%; bottom: 5%; animation-delay: 4s; }
@keyframes floatUp {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-24px) rotate(5deg); }
}

/* ══════════════════════════════════════════
   SCREEN 2 — TICKET INPUT
══════════════════════════════════════════ */
.ticket-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 100%; padding: 24px;
}

.ticket-boxes-bg {
  position: absolute; inset: 0;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 16px; padding: 20px;
  opacity: .18; pointer-events: none;
}
.bg-box { width: 90px; height: auto; filter: saturate(.5); }

.ticket-card {
  background: rgba(5, 5, 30, .88);
  border: 2px solid rgba(245,197,24,.4);
  border-radius: 16px;
  padding: 40px 32px;
  max-width: 400px; width: 100%;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  box-shadow: 0 0 40px rgba(0,0,0,.8), 0 0 60px rgba(245,197,24,.08);
  backdrop-filter: blur(10px);
  animation: card-in .4s ease;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ticket-icon { font-size: 52px; animation: bounce 1.5s ease-in-out infinite; }
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

.ticket-title {
  font-family: var(--font-head);
  font-size: 20px; color: var(--gold);
  text-align: center; letter-spacing: 1px;
}

.ticket-field {
  width: 100%; padding: 14px 18px;
  background: rgba(255,255,255,.92);
  border: 2px solid rgba(245,197,24,.3);
  border-radius: 8px;
  font-size: 16px; color: #222;
  font-family: var(--font-body);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}
.ticket-field:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245,197,24,.25);
}

.ticket-field-group {
  width: 100%;
  display: flex; flex-direction: column; gap: 6px;
}
.ticket-label {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  text-align: left;
}

.ticket-error {
  color: #ff5c5c; font-size: 13px;
  text-align: center;
}
.hidden { display: none !important; }

.btn-back {
  background: none; border: none;
  color: rgba(255,255,255,.5);
  font-size: 13px; cursor: pointer;
  margin-top: 4px; padding: 4px 8px;
  transition: color .2s;
}
.btn-back:hover { color: var(--white); }

/* ══════════════════════════════════════════
   SCREEN 3 — GAME
══════════════════════════════════════════ */
.game-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  padding: 24px 16px;
  width: 100%; max-width: 600px;
}

.game-header { text-align: center; }
.game-logo-small {
  font-family: var(--font-head);
  font-size: 22px; font-weight: 700;
  color: var(--gold);
  letter-spacing: 3px;
  text-shadow: 0 0 12px rgba(245,197,24,.8);
  margin-bottom: 6px;
}
.game-subtitle {
  font-family: var(--font-head);
  font-size: 18px; color: var(--white);
  letter-spacing: 1px;
}
.picks-left {
  font-size: 13px; color: rgba(255,255,255,.6);
  margin-top: 4px;
}

/* ─── BOX GRID ─── */
.box-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.mystery-box {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  cursor: pointer;
  border-radius: 12px;
  padding-bottom: 10px;
  transition: transform .2s ease;
  aspect-ratio: 1;
  background: radial-gradient(ellipse at 50% 80%, rgba(245,197,24,.15) 0%, rgba(0,0,30,.6) 100%);
  border: 1px solid rgba(245,197,24,.2);
  overflow: hidden;
}
.mystery-box:hover:not(.opened) {
  transform: scale(1.06) translateY(-4px);
  border-color: rgba(245,197,24,.7);
  box-shadow: 0 0 20px rgba(245,197,24,.4);
  z-index: 10;
}
.mystery-box:active:not(.opened) { transform: scale(.98); }

.mystery-box img {
  width: 75%; height: auto;
  object-fit: contain;
  transition: transform .3s ease, filter .3s ease;
}
.mystery-box:hover:not(.opened) img {
  filter: drop-shadow(0 0 12px rgba(245,197,24,.8));
  transform: scale(1.05) translateY(-4px);
}

.box-label {
  font-family: var(--font-head);
  font-size: 12px; font-weight: 700;
  color: var(--white);
  background: linear-gradient(90deg, #d40000, #a00000);
  border: 1px solid rgba(255,255,255,.3);
  padding: 3px 10px; border-radius: 4px;
  margin-top: 4px;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,.5);
  z-index: 2;
  transition: background .3s, transform .3s;
}

/* label sebelum dibuka: tampilkan ? */
.box-label-hidden {
  background: linear-gradient(90deg, #222244, #333366) !important;
  color: rgba(255,255,255,.5) !important;
  letter-spacing: 4px;
  font-size: 14px;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: none !important;
}

/* animasi muncul saat label direveal */
@keyframes label-reveal {
  0%   { transform: scale(0) rotateX(90deg); opacity: 0; }
  60%  { transform: scale(1.2) rotateX(0deg); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.box-label:not(.box-label-hidden) {
  animation: label-reveal .45s cubic-bezier(.36,.07,.19,.97) forwards;
}

/* opened state */
.mystery-box.opened {
  cursor: default;
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(245,197,24,.5);
  animation: box-pop .4s cubic-bezier(.36,.07,.19,.97);
}
@keyframes box-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.15); }
  60%  { transform: scale(.95); }
  100% { transform: scale(1); }
}
.mystery-box.opened .box-label {
  background: linear-gradient(90deg, #b8860b, #d4a520);
  color: #000;
}

/* shine sweep */
.mystery-box::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform: skewX(-20deg);
  transition: none;
  pointer-events: none;
}
.mystery-box:hover:not(.opened)::before {
  animation: shine .6s ease forwards;
}
@keyframes shine {
  to { left: 150%; }
}

/* ─── 8th box placement: last row centered ─── */
.box-grid .mystery-box:nth-child(7) { grid-column: 1 / 2; }
.box-grid .mystery-box:nth-child(8) { grid-column: 3 / 4; }

.btn-back-white {
  background: none; border: none;
  color: rgba(255,255,255,.4);
  font-size: 13px; cursor: pointer;
  padding: 4px 8px;
  transition: color .2s;
}
.btn-back-white:hover { color: var(--white); }

/* ══════════════════════════════════════════
   SCREEN 4 — PRIZE LIST
══════════════════════════════════════════ */
.prize-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  padding: 40px 24px;
  max-width: 500px; width: 100%;
}

.prize-title {
  font-family: var(--font-head);
  font-size: 28px; color: var(--gold);
  letter-spacing: 2px;
  text-shadow: 0 0 16px rgba(245,197,24,.7);
}

.prize-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px; width: 100%;
}

.prize-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  background: rgba(5,5,30,.8);
  border: 2px solid rgba(245,197,24,.3);
  border-radius: 12px;
  padding: 16px 10px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.prize-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(245,197,24,.4);
}
.prize-emoji { font-size: 28px; }
.prize-val {
  font-family: var(--font-head);
  font-size: 16px; font-weight: 700;
  color: var(--white);
  letter-spacing: 1px;
}
.prize-hot { border-color: rgba(255,80,0,.6); }
.prize-hot .prize-val { color: #ff8c00; }
.prize-jackpot { border-color: var(--gold); background: rgba(60,40,0,.8); }
.prize-jackpot .prize-val { color: var(--gold); font-size: 18px; }

/* ══════════════════════════════════════════
   WIN MODAL
══════════════════════════════════════════ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px);
  animation: fade-in .3s ease;
}
.modal-backdrop.hidden { display: none; }
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-card {
  position: relative;
  background: linear-gradient(160deg, #0a0e2a 0%, #1a0a00 100%);
  border: 2px solid var(--gold);
  border-radius: 20px;
  padding: 40px 32px;
  max-width: 380px; width: 92%;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
  box-shadow: 0 0 60px rgba(245,197,24,.4), 0 0 120px rgba(245,197,24,.15);
  animation: modal-pop .5s cubic-bezier(.36,.07,.19,.97);
  overflow: hidden;
}
@keyframes modal-pop {
  0%   { transform: scale(.4) rotate(-5deg); opacity: 0; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

.modal-box-img {
  width: 140px; height: auto;
  filter: drop-shadow(0 0 20px rgba(245,197,24,1));
  animation: float 2s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.modal-congrats {
  font-family: var(--font-head);
  font-size: 28px; color: var(--gold);
  text-align: center;
  text-shadow: 0 0 20px rgba(245,197,24,.9);
  animation: glow-pulse 1.2s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%,100% { text-shadow: 0 0 20px rgba(245,197,24,.9); }
  50%      { text-shadow: 0 0 40px rgba(245,197,24,1), 0 0 80px rgba(245,197,24,.5); }
}

.modal-prize-label {
  color: rgba(255,255,255,.7); font-size: 14px;
}

.modal-prize-value {
  font-family: var(--font-head);
  font-size: 38px; font-weight: 700;
  color: var(--gold);
  background: linear-gradient(90deg, #f7d200, #ff9900, #f7d200);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s linear infinite;
}
@keyframes shimmer {
  to { background-position: 200% center; }
}

.modal-note {
  color: rgba(255,255,255,.6); font-size: 13px;
  text-align: center;
}

/* ─── CONFETTI ─── */
.modal-confetti {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  animation: confetti-fall 1.8s ease-in forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(420px) rotate(720deg); opacity: 0; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 400px) {
  .btn { font-size: 15px; padding: 15px 16px; }
  .landing-title { font-size: 17px; }
  .box-grid { gap: 10px; }
  .ticket-card { padding: 28px 20px; }
}