*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

body{
  background:
    radial-gradient(circle at top,
    #1a1a1a 0%,
    #050505 50%,
    #000000 100%);

  color:white;
  overflow:hidden;
}

.screen{
  display:none;
  width:100%;
  min-height:100vh;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  padding:20px;
}

.active{
  display:flex;
}

.center-box{
  text-align:center;
}

h1{
  font-size:3rem;
  color:#ffe600;
  text-shadow:0 0 20px #ffe600;
}

p{
  margin-top:10px;
}

.neon-btn{
  margin-top:25px;
  padding:15px 25px;
  border:none;
  background:#00ff66;
  color:#000;
  font-weight:bold;
  border-radius:12px;
  cursor:pointer;
  box-shadow:0 0 20px #00ff66;
  transition:0.3s;
}

.neon-btn:hover{
  transform:scale(1.05);
}

.rules-box{
  max-width:500px;
  background:#111;
  padding:30px;
  border-radius:20px;
  border:2px solid #00ff66;
}

.rules-box ul{
  margin-top:20px;
  text-align:left;
}

.rules-box li{
  margin-bottom:12px;
}

.topbar{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px;
}

#timer{
  font-size:2rem;
  font-weight:bold;
  color:#00ff66;
}

.game-wrapper{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
}

canvas{
  width:min(92vw,700px);
  height:min(92vw,700px);

  background:#ffe600;

  border:4px solid #00ff99;

  border-radius:18px;

  box-shadow:
    0 0 20px #00ff99,
    0 0 40px #00ff99,
    0 0 80px rgba(0,255,153,0.4);

  transition:0.15s;
}

.mobile-controls{
  margin-top:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.mobile-controls button{

  width:85px;
  height:85px;

  font-size:2rem;

  border:none;

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      #00ff99,
      #00cc66
    );

  color:#000;

  font-weight:bold;

  box-shadow:
    0 0 20px #00ff99,
    inset 0 0 10px rgba(255,255,255,0.4);

  transition:0.15s;
}

.mobile-controls button:active{

  transform:scale(0.92);

  box-shadow:
    0 0 40px #00ff99;
}

.row{
  display:flex;
  gap:10px;
}

.message{
  position:fixed;
  top:90px;
  left:50%;
  transform:translateX(-50%);
  background:red;
  color:white;
  padding:12px 20px;
  border-radius:12px;
  opacity:0;
  transition:0.3s;
}

.show{
  opacity:1;
}

.victory-title{
  color:#00ff66;
}

.failed-title{
  color:red;
  text-shadow:0 0 20px red;
}

.reward-box{
  margin-top:20px;
}

select{
  margin-top:15px;
  width:100%;
  padding:14px;
  border-radius:12px;
  font-size:1rem;
}

.roulette{
  width:300px;
  height:300px;
  border-radius:50%;
  border:8px solid #ff0000;
  overflow:hidden;
  margin:30px auto;
  position:relative;
  transition:5s cubic-bezier(.17,.67,.2,1);
  background:#111;
}

.roulette-item{
  position:absolute;
  width:50%;
  height:50%;
  left:50%;
  top:50%;
  transform-origin:0% 0%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:10px;
  color:white;
  font-size:12px;
}

@media(max-width:768px){

  h1{
    font-size:2rem;
  }

  .mobile-controls button{
    width:70px;
    height:70px;
  }

}

@keyframes blink{
  50%{
    opacity:0.3;
  }
}

@keyframes shake{
  0%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  50%{ transform:translateX(5px); }
  75%{ transform:translateX(-5px); }
  100%{ transform:translateX(0); }
}

body::before{
  content:"";

  position:fixed;
  inset:0;

  background:
    radial-gradient(
      circle at center,
      transparent 40%,
      rgba(255,0,0,0.08)
    );

  pointer-events:none;

  animation:pulseDanger 3s infinite;
}

@keyframes pulseDanger{

  0%{
    opacity:0.4;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:0.4;
  }
}

.control-btn{
  min-width:160px;
}

.danger{
  background:
    linear-gradient(
      145deg,
      #ff0044,
      #990000
    ) !important;

  color:white !important;

  box-shadow:
    0 0 20px red !important;
}

.roulette-container{
  position: relative;
  width: 320px;
  margin: auto;
}

.roulette{
  width: 320px;
  height: 320px;
  border-radius: 50%;
  border: 10px solid #fff;

  overflow: hidden;

  position: relative;

  transition:
    transform 5s cubic-bezier(0.17,0.67,0.12,0.99);

  background:
    conic-gradient(
      #ff0055 0deg 60deg,
      #ff8800 60deg 120deg,
      #ffe600 120deg 180deg,
      #00d084 180deg 240deg,
      #00bfff 240deg 300deg,
      #8a2be2 300deg 360deg
    );
}

/*
========================================
POINTER TIDAK IKUT BERPUTAR
========================================
*/

.roulette-pointer{
  position: absolute;

  top: -18px;
  left: 50%;

  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 40px solid white;

  z-index: 999;
}

.roulette-item{
  position: absolute;

  width: 50%;
  height: 50%;

  left: 50%;
  top: 50%;

  transform-origin: 0% 0%;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 28px;
  font-weight: bold;
  color: white;
}

/*
========================================
POSISI ITEM
========================================
*/

.roulette-item:nth-child(1){
  transform: rotate(0deg) translate(90px);
}

.roulette-item:nth-child(2){
  transform: rotate(60deg) translate(90px);
}

.roulette-item:nth-child(3){
  transform: rotate(120deg) translate(90px);
}

.roulette-item:nth-child(4){
  transform: rotate(180deg) translate(90px);
}

.roulette-item:nth-child(5){
  transform: rotate(240deg) translate(90px);
}

.roulette-item:nth-child(6){
  transform: rotate(300deg) translate(90px);
}

.punishment-card{

  margin-top:25px;

  padding:20px;

  border-radius:20px;

  background:
    linear-gradient(
      145deg,
      #1a0000,
      #330000
    );

  border:2px solid red;

  box-shadow:
    0 0 20px rgba(255,0,0,0.5);
}