/* style.css */

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

body{
  width:100%;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:#1a2a3b;
  padding:20px;
}

.container{
  width:100%;
  max-width:450px;
  text-align:center;
  background:#223548;
  padding:35px 25px;
  border-radius:25px;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

h1{
  color:white;
  font-size:2.2rem;
  margin-bottom:35px;
}

/* Dice Wrapper */

.dice-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:35px;
}

/* PERFECT DICE */

.dice{
  width:170px;
  height:170px;
  background:#f5f1e8;
  border-radius:25px;
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;

  box-shadow:
    inset 8px 8px 15px rgba(255,255,255,0.9),
    inset -8px -8px 15px rgba(0,0,0,0.1),
    0 10px 25px rgba(0,0,0,0.35);

  transition:0.4s ease;
  cursor:pointer;
}

/* PERFECT DOTS */

.dot{
  width:24px;
  height:24px;
  background:#111;
  border-radius:50%;
  position:absolute;

  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,0.25),
    2px 2px 6px rgba(0,0,0,0.35);
}

/* DOT POSITIONS */

.top-left{
  top:22px;
  left:22px;
}

.top-right{
  top:22px;
  right:22px;
}

.center{
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

.middle-left{
  top:50%;
  left:22px;
  transform:translateY(-50%);
}

.middle-right{
  top:50%;
  right:22px;
  transform:translateY(-50%);
}

.bottom-left{
  bottom:22px;
  left:22px;
}

.bottom-right{
  bottom:22px;
  right:22px;
}

/* Button */

button{
  background:#00a8c6;
  color:white;
  border:none;
  padding:16px 30px;
  border-radius:12px;
  font-size:1.2rem;
  cursor:pointer;
  transition:0.3s;
  font-weight:bold;
}

button:hover{
  transform:scale(1.05);
  background:#00bfd8;
}

button i{
  margin-left:8px;
}

/* Bottom Section */

.bottom-box{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:35px;
}

.mini-dice{
  font-size:2.2rem;
}

.bottom-box span{
  color:white;
  font-size:1.5rem;
}

select{
  padding:10px;
  font-size:1.1rem;
  border-radius:8px;
  border:none;
  outline:none;
}

/* Result */

#result{
  color:white;
  margin-top:25px;
  font-size:1.2rem;
  font-weight:bold;
}

/* Roll Animation */

.roll-animation{
  animation:roll 0.7s ease;
}

@keyframes roll{

  0%{
    transform:rotate(0deg) scale(1);
  }

  50%{
    transform:rotate(180deg) scale(1.2);
  }

  100%{
    transform:rotate(360deg) scale(1);
  }

}

/* Responsive */

@media(max-width:600px){

  .container{
    padding:25px 15px;
  }

  h1{
    font-size:1.8rem;
  }

  .dice{
    width:130px;
    height:130px;
  }

  .dot{
    width:18px;
    height:18px;
  }

  .top-left{
    top:18px;
    left:18px;
  }

  .top-right{
    top:18px;
    right:18px;
  }

  .middle-left{
    left:18px;
  }

  .middle-right{
    right:18px;
  }

  .bottom-left{
    bottom:18px;
    left:18px;
  }

  .bottom-right{
    bottom:18px;
    right:18px;
  }

  button{
    width:100%;
    font-size:1rem;
    padding:14px;
  }

}

@media(max-width:400px){

  .dice{
    width:110px;
    height:110px;
  }

  .dot{
    width:15px;
    height:15px;
  }

  h1{
    font-size:1.5rem;
  }

}

/* ADD THIS IN CSS */

.dice-wrapper{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:35px;
}