:root {
  /* Tema Cokelat Tua (Background & Elemen Utama) */
  --m-brown: #5d4037; 
  --m-brown-lt: #8d6e63; 
  --m-brown-dk: #3e2723; 
  --m-brown-bg: #1e140a;

  /* Tema Emas (Teks, Border, Dekorasi, dan Glow) */
  --m-gold: #fbbf24; 
  --m-gold-lt: #fcd34d; 
  --m-gold-dk: #d97706;
  
  --m-parchment: #fdf6e3;

  /* Glowing & Aesthetic variables - Full Gold */
  --glow-gold: 0 0 15px rgba(251, 191, 36, 0.8);
  --glow-gold-strong: 0 0 25px rgba(252, 211, 77, 0.7);
  --text-glow-gold: 0 0 8px var(--m-gold-lt), 1px 1px 3px rgba(0,0,0,0.9);
  --border-glow-gold: 0 0 10px var(--m-gold-lt);
}

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

/* Strict 100vh Layout & Aesthetic Background */
html, body {
  width: 100%; height: 100vh; max-height: 100vh; overflow: hidden;
  font-family: 'Crimson Text', serif;
  /* Gradient Cokelat + Stone texture + Pendaran magis emas */
  background: linear-gradient(180deg, rgba(30, 20, 10, 0.95) 0%, rgba(15, 5, 0, 0.85) 50%, rgba(30, 20, 10, 0.98) 100%),
              url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><rect fill="%231e140a" width="400" height="400"/><path fill="%233e2723" d="M0,0 L400,400 M400,0 L0,400" stroke="%23fbbf24" stroke-width="2" opacity="0.15"/><circle cx="200" cy="200" r="150" fill="none" stroke="%23d97706" stroke-width="1" opacity="0.2"/><rect x="50" y="50" width="300" height="300" fill="none" stroke="%23fcd34d" stroke-width="1" opacity="0.1"/></svg>') fixed center/cover;
  color: var(--m-parchment);
}

body::before { /* Enhanced Medieval patterns - Aksen emas */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(90deg, transparent 0 50px, rgba(251, 191, 36, 0.05) 50px 51px),
              repeating-linear-gradient(0deg, transparent 0 50px, rgba(251, 191, 36, 0.05) 50px 51px);
}

/* Main Container - Scaled to fit 100vh vertically */
.main-container {
  background: url(../img/bg.jpg) center top;
  position: relative; z-index: 2;
  height: 100vh; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  padding: 2vh 15px;
}

/* Header & Logo */
.header { text-align: center; animation: fadeInDown 1s ease-out; }
.logo-container {
  position: relative; display: inline-block; padding: 10px 20px; margin-bottom: 2vh;
  background: linear-gradient(135deg, rgba(62, 39, 35, 0.95), rgba(30, 20, 10, 0.95));
  border: 2px solid var(--m-gold); border-radius: 12px;
  box-shadow: 0 0 25px rgba(251, 191, 36, 0.3), inset 0 0 20px rgba(0, 0, 0, 0.8);
}
.logo-container::before {
  content: '⚔'; position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 26px; color: var(--m-gold); text-shadow: var(--glow-gold);
}
.logo-img { height: clamp(45px, 6vh, 65px); filter: drop-shadow(0 0 8px var(--m-gold-dk)); transition: 0.3s; }
.logo-img:hover { transform: scale(1.08) rotate(2deg); filter: drop-shadow(0 0 15px var(--m-gold-lt)); }

.header-title {
  font: 700 clamp(18px, 4.5vw, 26px)/1.3 'Balthazar', serif;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.9), 0 0 20px var(--m-gold-dk); margin: 1vh 0;
}
.header-title i { color: var(--m-gold-lt); margin: 0 8px; animation: swordSwing 2s infinite; text-shadow: 0 0 15px var(--m-gold-lt); }

/* Jackpot Box - Richer Glow */
.jackpot-box {
  background: linear-gradient(135deg, var(--m-brown-dk), var(--m-brown-bg));
  border: 3px double var(--m-gold); border-radius: 8px;
  padding: 1.5vh 25px; margin: 0 auto; width: 100%; max-width: 420px;
  position: relative; animation: mysticGlow 3s infinite alternate;
}
.jackpot-box::before, .jackpot-box::after {
  content: '◆'; position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--m-gold); font-size: 20px; text-shadow: var(--glow-gold);
}
.jackpot-box::before { left: 15px; } .jackpot-box::after { right: 15px; }
.jackpot-label {
  font: clamp(14px, 3.5vw, 18px) 'MedievalSharp', cursive; color: var(--m-gold);
  text-transform: uppercase; letter-spacing: 3px;
  border-bottom: 2px solid var(--m-gold-dk); padding-bottom: 5px; margin-bottom: 8px;
}
.jackpot-value {
  font: 900 clamp(22px, 5.5vw, 34px) 'Balthazar', serif; color: var(--m-gold-lt); letter-spacing: 2px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.9), 0 0 25px var(--m-gold-dk);
}

/* Spinner Area - Compact for 100vh */
.spinner-wrapper {
  background: linear-gradient(145deg, rgba(62, 39, 35, 0.9), rgba(30, 20, 10, 0.95));
  border: 4px ridge var(--m-gold-dk); border-radius: 12px; padding: 15px;
  width: 100%; max-width: 520px; position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), inset 0 0 30px rgba(251, 191, 36, 0.15), 0 0 50px rgba(251, 191, 36, 0.2);
  animation: fadeInUp 1s ease-out 0.3s both;
}
.spinner-container {
  position: relative; width: 100%; height: clamp(250px, 45vh, 480px); /* Vertical Scaling */
  display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px;
  background: rgba(0, 0, 0, 0.6); border-radius: 8px; border: 2px inset var(--m-gold-dk); box-shadow: inset 0 0 40px #000;
}
.spinner-col {
  position: relative; width: 30%; max-width: 123px; height: 100%; max-height: 464px;
  border-radius: 8px; overflow: hidden; border: 3px ridge var(--m-gold-dk);
  background: linear-gradient(180deg, var(--m-brown-bg), var(--m-brown-dk));
  box-shadow: inset 0 0 25px #000, 0 5px 15px #000;
}
.spinner-col .img {
  background-image: url(../img/spin1.png);
  background-size: contain; background-repeat: repeat-y;
  width: 100%; height: 14400px; transition: margin-top 3s cubic-bezier(0.25, 1, 0.5, 1);
}
.spinner-col2 .img { background-image: url(../img/spin2.png); margin-top: -340px; transition-duration: 4s; }
.spinner-col3 .img { margin-top: -158px; transition-duration: 5s; }

/* Win positions */
.spinner-col1.spinned-1 .img, .spinner-col3.spinned-1 .img { margin-top: -12692px; }
.spinner-col2.spinned-1 .img { margin-top: -12537px; }

/* Indicator Line (Dulu red-line, nama class tetap dipertahankan) */
.red-line {
  position: absolute; top: 50%; left: 2%; right: 2%; height: 6px; transform: translateY(-50%); z-index: 10;
  background: linear-gradient(90deg, transparent, var(--m-gold-dk), var(--m-gold-lt), var(--m-gold-dk), transparent);
  border: 1px solid var(--m-gold-lt); border-radius: 3px;
  box-shadow: 0 0 20px var(--m-gold-dk), 0 0 40px var(--m-gold); animation: lineBlink 0.6s ease-in-out infinite alternate;
}
.red-line::before, .red-line::after {
  content: '⚔'; position: absolute; top: 50%; transform: translateY(-50%);
  color: var(--m-gold-lt); font-size: 14px; text-shadow: var(--glow-gold-strong); animation: pulse 1.2s infinite;
}
.red-line::before { left: -15px; } .red-line::after { right: -15px; animation-delay: 0.6s; }

/* Buttons - Royal Action */
.spin-btn-container { text-align: center; animation: fadeInUp 1s ease-out 0.5s both; }
.btn-spin, .finalButton {
  background: linear-gradient(135deg, var(--m-brown-dk) 0%, var(--m-gold-dk) 50%, var(--m-brown-dk) 100%);
  color: var(--m-parchment); border: 3px ridge var(--m-gold); border-radius: 50px;
  font: 700 clamp(16px, 4vw, 24px) 'Balthazar', serif; text-transform: uppercase; 
  cursor: pointer; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(0, 0, 0, 0.5);
  text-shadow: 2px 2px 4px rgba(0,0,0,0.9); display: inline-flex; align-items: center; justify-content: center;
}
.btn-spin { padding: 1.5vh 40px; min-width: 260px; position: relative; overflow: hidden; }
.finalButton { padding: 15px 35px; margin-top: 2vh; gap: 10px; animation: mysticGlow 2.5s infinite; text-decoration: none;}

.btn-spin::before {
  content: ''; position: absolute; inset: 0 -100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.6s;
}
.btn-spin:hover::before { left: 100%; }
.btn-spin:hover:not(:disabled), .finalButton:hover {
  transform: translateY(-4px) scale(1.05); border-color: var(--m-gold-lt);
  box-shadow: 0 15px 35px #000, 0 0 40px var(--m-gold-dk), inset 0 0 20px rgba(0, 0, 0, 0.5);
}
.btn-spin:active:not(:disabled), .finalButton:active { transform: translateY(2px) scale(0.98); }
.btn-spin:disabled { opacity: 0.5; filter: grayscale(50%); cursor: not-allowed; transform: none; }
.btn-spin i { margin: 0 8px; color: var(--m-gold-lt); animation: rotate 3s linear infinite; }

/* Errors & Modals */
.spin-error {
  background: linear-gradient(135deg, var(--m-brown-dk), var(--m-brown-bg));
  border: 2px solid var(--m-gold-dk); border-radius: 8px; padding: 12px 20px; margin: 10px auto;
  font: 14px 'MedievalSharp', cursive; color: var(--m-parchment);
  transform: scale(0); transition: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 5px 15px #000; display: inline-block;
}
.spin-error.active { transform: scale(1); }
.spin-error i { color: var(--m-gold-lt); margin-right: 8px; }

.modal-content {
  background: linear-gradient(145deg, var(--m-brown-dk), var(--m-brown-bg)) !important;
  border: 4px double var(--m-gold) !important; border-radius: 12px !important;
  box-shadow: 0 0 80px rgba(251, 191, 36, 0.4), inset 0 0 40px #000 !important;
  animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-header { background: linear-gradient(90deg, var(--m-brown-dk), var(--m-gold-dk), var(--m-brown-dk)); border-bottom: 2px solid var(--m-gold); padding: 15px; }
.modal-title { font: 700 clamp(20px, 5vw, 26px) 'MedievalSharp', cursive; padding-bottom: 12px; text-shadow: 2px 2px 4px rgba(0,0,0,0.9); text-align: center; width: 100%; }
.modal-body { padding: 25px; text-align: center; font-size: 16px; line-height: 1.6; }
.modal-body b { color: var(--m-gold-lt); text-shadow: 0 0 10px var(--m-gold); }

/* Countdown */
#countdown { display: flex; justify-content: center; gap: 10px; margin: 2vh 0; font-family: 'Balthazar', serif; }
#countdown > div {
  background: var(--m-brown-bg); border: 2px solid var(--m-gold-dk); border-radius: 8px;
  padding: 10px 15px; min-width: 75px; box-shadow: 0 5px 15px #000; transition: 0.3s;
}
#countdown > div:hover { transform: translateY(-3px); border-color: var(--m-gold-lt); box-shadow: 0 8px 25px rgba(251, 191, 36, 0.3); }
#countdown .time-value { display: block; font-size: clamp(22px, 6vw, 30px); font-weight: 900; color: var(--m-gold-lt); text-shadow: 0 0 15px var(--m-gold-dk); }
#countdown .time-label { font: 600 10px 'MedievalSharp', cursive; color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 1px; }

/* Utilities & Animations */
.modal-backdrop { background-color: rgba(15, 10, 5, 0.95) !important; }
.confetti {
  position: fixed; width: 10px; height: 10px; background: var(--m-gold-lt); z-index: 100; pointer-events: none;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); animation: rain 3.5s ease-in forwards;
}
.corner-decoration { position: absolute; width: 35px; height: 35px; border: 2px solid var(--m-gold); opacity: 0.6; box-shadow: 0 0 10px var(--m-gold); }
.corner-tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; } .corner-tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; }
.corner-bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; } .corner-br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; }

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes swordSwing { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
@keyframes mysticGlow { from { box-shadow: 0 0 20px rgba(251, 191, 36, 0.2), inset 0 0 30px #000; } to { box-shadow: 0 0 45px rgba(251, 191, 36, 0.5), inset 0 0 30px #000; } }
@keyframes lineBlink { from { opacity: 0.7; box-shadow: 0 0 15px var(--m-gold-dk); } to { opacity: 1; box-shadow: 0 0 30px var(--m-gold-lt), 0 0 50px var(--m-gold); } }
@keyframes pulse { 0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); } 50% { opacity: 0.7; transform: translateY(-50%) scale(0.85); } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes popIn { 0% { transform: scale(0.8) translateY(30px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes rain { 0% { transform: translateY(-10vh) rotate(0deg) scale(1); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg) scale(0.5); opacity: 0; } }

/* Mobile Adjustments */
@media (max-width: 480px) {
  .spinner-col { width: 32%; }
  .btn-spin, .finalButton { min-width: 220px; }
}