@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700;800&display=swap");

*{box-sizing:border-box}
body{
  margin:0;
  background:#090d14;
  color:#fff;
  font-family:Arial,sans-serif;
}
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0,#17314b55,transparent 45%),
    linear-gradient(#090d14,#05070b);
  z-index:-1;
}
.spin-page{
  width:min(1180px,94%);
  margin:auto;
  padding:45px 0 80px;
}
.hero{text-align:center;margin-bottom:28px}
.eyebrow{
  color:#e2b84b;
  font-size:12px;
  letter-spacing:4px;
  font-weight:700;
}
.hero h1{
  margin:8px 0;
  font-size:clamp(30px,5vw,55px);
}
.hero p{color:#9ca9ba}
.hero b{color:#ffd45e}

.player-card{
  max-width:760px;
  margin:0 auto 30px;
  padding:18px;
  border:1px solid #263244;
  background:#101722dd;
  border-radius:14px;
}
.input-row{display:flex;gap:10px}
.input-row input{
  flex:1;
  min-width:0;
  padding:14px 16px;
  border:1px solid #324158;
  border-radius:9px;
  background:#080d14;
  color:white;
  outline:none;
}
.input-row button,.spin-btn{
  border:0;
  border-radius:9px;
  font-weight:800;
  cursor:pointer;
}
.input-row button{
  padding:0 22px;
  background:#2878d7;
  color:white;
}
.player-info{
  display:flex;
  gap:12px;
  margin-top:15px;
}
.player-info>div{
  flex:1;
  padding:12px;
  background:#080d14;
  border-radius:9px;
}
.player-info span{
  display:block;
  color:#7f8da0;
  font-size:12px;
}
.player-info strong{
  display:block;
  margin-top:3px;
  font-size:18px;
}
.status-text{
  margin-top:12px;
  color:#97a4b5;
  font-size:13px;
}
.hidden{display:none!important}

.roulette-section{text-align:center}
.roulette-window{
  position:relative;
  height:220px;
  overflow:hidden;
  border:1px solid #29374c;
  background:#070b11;
  border-radius:14px;
  box-shadow:0 18px 50px #0008;
}
.roulette-window:before,
.roulette-window:after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:130px;
  z-index:5;
  pointer-events:none;
}
.roulette-window:before{
  left:0;
  background:linear-gradient(90deg,#070b11,transparent);
}
.roulette-window:after{
  right:0;
  background:linear-gradient(-90deg,#070b11,transparent);
}
.marker{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:3px;
  transform:translateX(-50%);
  background:#ffd75a;
  box-shadow:0 0 18px #ffd75a;
  z-index:10;
}
.marker:before{
  content:"▼";
  position:absolute;
  top:-2px;
  left:50%;
  transform:translateX(-50%);
  color:#ffd75a;
  font-size:25px;
}
.roulette-track{
  display:flex;
  align-items:center;
  gap:8px;
  height:100%;
  padding-left:0;
  will-change:transform;
}

.spin-item{
  position:relative;
  flex:0 0 170px;
  height:185px;
  padding:10px;
  border:1px solid #384354;
  border-bottom-width:5px;
  background:linear-gradient(180deg,#17202d,#0c1119);
  border-radius:8px;
  overflow:hidden;
}
.spin-item img{
  width:145px;
  height:145px;
  object-fit:contain;
  display:block;
  margin:auto;
}
.spin-item .name{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  font-weight:700;
}
.spin-item .count{
  margin-top:3px;
  color:#aeb8c6;
  font-size:11px;
}
.spin-item.white{border-bottom-color:#c8cdd4}
.spin-item.blue{border-bottom-color:#3e91ff}
.spin-item.purple{border-bottom-color:#ae52ff}
.spin-item.gold{
  border-bottom-color:#ffd133;
  box-shadow:inset 0 0 30px #ffd13312;
}

.spin-btn{
  margin-top:22px;
  min-width:250px;
  padding:16px 30px;
  background:linear-gradient(180deg,#f3c749,#c78e12);
  color:#161007;
  font-size:17px;
  box-shadow:0 8px 30px #c994253d;
}
.spin-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  box-shadow:none;
}

.result-box{
  max-width:420px;
  margin:30px auto 0;
  padding:25px;
  text-align:center;
  border:1px solid #344158;
  border-radius:14px;
  background:#101722;
}
.result-box img{
  width:150px;
  height:150px;
  object-fit:contain;
}
.result-label{
  color:#8694a8;
  font-size:11px;
  letter-spacing:2px;
}
.result-box h2{margin:8px 0}

.rates{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:32px;
}
.rate{
  padding:14px;
  text-align:center;
  border-radius:9px;
  background:#101722;
}
.rate span{display:block;font-size:11px;color:#91a0b3}
.rate b{display:block;margin-top:5px;font-size:19px}
.rate.white b{color:#e3e7ed}
.rate.blue b{color:#4c9aff}
.rate.purple b{color:#b464ff}
.rate.gold b{color:#ffd447}

@media(max-width:650px){
  .spin-page{width:96%;padding-top:25px}
  .input-row{flex-direction:column}
  .input-row button{padding:13px}
  .roulette-window{height:190px}
  .spin-item{flex-basis:140px;height:160px}
  .spin-item img{width:95px;height:95px}
  .rates{grid-template-columns:repeat(2,1fr)}
}

/* ===== SPIN RARITY RESULT EFFECTS ===== */

.result-box.white{
  border-color:#8e98a5;
}

.result-box.blue{
  border-color:#3e91ff;
  box-shadow:0 0 35px #3e91ff33;
}

.result-box.purple{
  border-color:#ae52ff;
  box-shadow:
    0 0 25px #ae52ff66,
    0 0 70px #ae52ff25;
  animation:purplePulse 1.2s ease-in-out 3;
}

.result-box.gold{
  border-color:#ffd133;
  box-shadow:
    0 0 30px #ffd133aa,
    0 0 90px #ffd13344;
  animation:goldJackpot 1s ease-in-out 4;
}

.result-box.purple #resultRarity{
  color:#c77cff;
  font-weight:900;
}

.result-box.gold #resultRarity{
  color:#ffd447;
  font-weight:900;
  font-size:20px;
}

@keyframes purplePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.025);box-shadow:0 0 60px #ae52ffaa}
}

@keyframes goldJackpot{
  0%,100%{transform:scale(1)}
  50%{
    transform:scale(1.04);
    box-shadow:
      0 0 45px #ffd133dd,
      0 0 120px #ffd13366;
  }
}


/* ===== WINNING CARD UNDER MARKER ===== */

.spin-item.winner-hit{
  transform:scale(1.06);
  z-index:20;
  transition:transform .3s ease,filter .3s ease,box-shadow .3s ease;
}

.spin-item.white.winner-hit{
  box-shadow:0 0 30px #ffffff99;
  filter:brightness(1.25);
}

.spin-item.blue.winner-hit{
  box-shadow:0 0 35px #3e91ffcc;
  filter:brightness(1.3);
}

.spin-item.purple.winner-hit{
  box-shadow:0 0 45px #ae52ffff;
  filter:brightness(1.4);
  animation:winnerPurple .6s ease-in-out infinite alternate;
}

.spin-item.gold.winner-hit{
  box-shadow:
    0 0 35px #ffd133,
    0 0 80px #ffd133aa;
  filter:brightness(1.5);
  animation:winnerGold .45s ease-in-out infinite alternate;
}

@keyframes winnerPurple{
  from{transform:scale(1.05)}
  to{transform:scale(1.10)}
}

@keyframes winnerGold{
  from{transform:scale(1.06)}
  to{transform:scale(1.13)}
}


/* ===== RED RARITY ===== */
.spin-item.red{
  border-bottom-color:#ff3f4f;
  box-shadow:inset 0 0 30px #ff3f4f12;
}

.spin-item.red.winner-hit{
  box-shadow:
    0 0 35px #ff3f4f,
    0 0 75px #ff3f4faa;
  filter:brightness(1.45);
  animation:winnerRed .5s ease-in-out infinite alternate;
}

.result-box.red{
  border-color:#ff3f4f;
  box-shadow:
    0 0 28px #ff3f4f88,
    0 0 80px #ff3f4f33;
  animation:redJackpot 1s ease-in-out 3;
}

.result-box.red #resultRarity{
  color:#ff5362;
  font-weight:900;
  font-size:18px;
}

@keyframes winnerRed{
  from{transform:scale(1.05)}
  to{transform:scale(1.11)}
}

@keyframes redJackpot{
  0%,100%{transform:scale(1)}
  50%{
    transform:scale(1.035);
    box-shadow:
      0 0 42px #ff3f4fcc,
      0 0 100px #ff3f4f55;
  }
}

/* ===== SPIN VERIFY ===== */

.verify-box{
  width:min(720px,100%);
  margin:14px auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.verify-box.hidden,
.verify-code-row.hidden{
  display:none !important;
}

.verify-box button{
  min-height:46px;
  padding:0 20px;
  border:1px solid #d8a92f;
  border-radius:10px;
  background:#1b1d23;
  color:#ffd45a;
  font-weight:800;
  cursor:pointer;
}

.verify-box button:hover:not(:disabled){
  border-color:#ffd45a;
  box-shadow:0 0 18px #ffd45a33;
}

.verify-box button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.verify-code-row{
  display:flex;
  justify-content:center;
  gap:10px;
  width:100%;
}

#verifyCode{
  width:180px;
  min-height:46px;
  padding:0 14px;
  border:1px solid #3b3f49;
  border-radius:10px;
  outline:none;
  background:#111318;
  color:#fff;
  text-align:center;
  font-size:20px;
  font-weight:800;
  letter-spacing:5px;
}

#verifyCode:focus{
  border-color:#d8a92f;
  box-shadow:0 0 0 3px #d8a92f20;
}

@media(max-width:600px){
  .verify-code-row{
    flex-direction:column;
    align-items:center;
  }

  #verifyCode{
    width:100%;
    max-width:280px;
  }
}


/* ===== SPIN BAI JAMJUREE ===== */
html,
body,
button,
input{
  font-family:"Bai Jamjuree",sans-serif !important;
}

/* ===== SPIN CONFIRM MODAL ===== */
.spin-confirm-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(5,6,9,.82);
  backdrop-filter:blur(7px);
}

.spin-confirm-modal.hidden{
  display:none !important;
}

.spin-confirm-card{
  width:min(430px,100%);
  padding:26px;
  border:1px solid #d7aa39;
  border-radius:18px;
  background:#15171d;
  text-align:center;
  box-shadow:
    0 0 35px rgba(255,204,64,.15),
    0 25px 80px rgba(0,0,0,.55);
}

.spin-confirm-title{
  margin-bottom:15px;
  font-size:22px;
  font-weight:800;
  color:#ffd45a;
}

.spin-confirm-text{
  font-size:16px;
  color:#e9ebef;
}

.spin-confirm-text strong{
  display:block;
  margin-top:7px;
  font-size:25px;
  color:#fff;
}

.spin-confirm-note{
  margin-top:14px;
  color:#9299a7;
  font-size:13px;
  line-height:1.5;
}

.spin-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:24px;
}

.spin-confirm-actions button{
  height:48px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
}

#cancelSpinBtn{
  border:1px solid #444955;
  background:#20232b;
  color:#c7cbd3;
}

#confirmSpinBtn{
  border:1px solid #f0bd36;
  background:#e4ad23;
  color:#111318;
}

#confirmSpinBtn:hover{
  filter:brightness(1.08);
}