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

/* ===============================
   DARK GOLD THEME
================================ */
body{
  min-height:100vh;
  background:
    radial-gradient(circle at top, #3b2a12 0%, #120c05 55%, #080503 100%);
  font-family:Arial,sans-serif;
  color:#f6e7b2;
  overflow-x:hidden;
}


.page-wrap{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transform:translateY(-20px);
}


.logo-top{
  margin-bottom:6px;
}
.logo-top img{
  height:44px;
  filter:drop-shadow(0 0 12px rgba(255,215,120,.6));
}


.input-wrap{
  width:100%;
  max-width:520px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:16px;
  margin-bottom:6px;
}


.input-box{
  background:linear-gradient(180deg,#0d0904,#000);
  padding:14px 14px 16px;
  border-radius:16px;
  text-align:center;
  border:1px solid rgba(255,215,120,.25);

  box-shadow:
    0 0 18px rgba(255,180,60,.25),
    inset 0 0 12px rgba(255,215,120,.06);

  animation:goldGlow 3.6s ease-in-out infinite;
}

.input-box label{
  font-size:12px;
  margin-bottom:6px;
  display:block;
  color:#ffd87a;
}

.input-box input{
  width:100%;
  padding:10px 8px;
  background:#120c05;
  border:1px solid rgba(255,215,120,.35);
  border-radius:10px;
  color:#fff4cc;
  text-align:center;
  outline:none;
}

.input-box input::placeholder{
  color:rgba(255,215,120,.55);
}

/* ===============================
   MIDDLE INFO
================================ */
.middle-info{
  text-align:center;
  font-size:12px;
  white-space:nowrap;
  color:#ffd87a;
}

/* ===============================
   ARROW CSS + GLOW
================================ */
.arrow-css{
  position:relative;
  width:32px;
  height:14px;
  margin:6px auto 0;
  animation:arrowSlide 1.4s ease-in-out infinite;
}

/* body arrow */
.arrow-css::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  width:20px;
  height:3px;
  background:#ffd87a;
  transform:translateY(-50%);
  border-radius:2px;
  box-shadow:0 0 10px rgba(255,215,120,.9);
}

/* arrow head */
.arrow-css::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:0;
  height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-left:9px solid #ffd87a;
  transform:translateY(-50%);
  filter:drop-shadow(0 0 10px rgba(255,215,120,.9));
}

/* ===============================
   ANIMATIONS
================================ */
@keyframes arrowSlide{
  0%{ transform:translateX(0); opacity:.5; }
  50%{ transform:translateX(12px); opacity:1; }
  100%{ transform:translateX(0); opacity:.5; }
}

@keyframes goldGlow{
  0%{
    box-shadow:
      0 0 16px rgba(255,180,60,.25),
      inset 0 0 10px rgba(255,215,120,.05);
  }
  50%{
    box-shadow:
      0 0 28px rgba(255,200,90,.55),
      inset 0 0 14px rgba(255,215,120,.1);
  }
  100%{
    box-shadow:
      0 0 16px rgba(255,180,60,.25),
      inset 0 0 10px rgba(255,215,120,.05);
  }
}

/* ===============================
   SPIN AREA
================================ */
.spin-wrap{
  position:relative;
  width:360px;
  aspect-ratio:1/1;
}

.frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:5;
  pointer-events:none;
}

.wheel{
  position:absolute;
  width:93%;
  height:93%;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:2;
  transition:transform 4s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
}

/* ===============================
   BUTTON
================================ */
.spin-btn{
  margin:8px 0 20px;
  padding:14px 64px;
  font-size:18px;
  font-weight:bold;
  border:none;
  border-radius:999px;
  background:linear-gradient(180deg,#ffd87a,#c9972c);
  color:#2a1b05;
  box-shadow:0 0 22px rgba(255,200,90,.6);
}