body {
  margin: 0;
  background: linear-gradient(180deg, #ffe9f0 0%, #ffe3d4 40%, #ffdcd4 100%);
  color: #333;
  font-family: "Fredoka", system-ui;
  display: flex;
  justify-content: center;
  padding-top: 40px;
  overflow-x: hidden;
}

/* Remove heavy vignette — use soft fade only */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
      circle at center,
      rgba(255,255,255,0.12) 0%,
      rgba(0,0,0,0.35) 95%
  );
  opacity: 0.3; /* softer so it doesn't darken everything */
}

.wrapper {
  width: 360px;
  text-align: center;
}

.title {
  font-size: 30px;
  font-weight: 900;
  margin-bottom: 20px;
  color: #ff5b72;
  text-shadow: 0 2px #ffcbd5;
  font-family: "Fredoka", system-ui;
}

/* Dice Area (clean, centered) */
.dice-wrapper {
  width: 100%;
  height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

/* Remove big glow behind dice */
.dice-wrapper::before {
  content: none;
}

.dice-area {
  margin: 0 auto;
  position: relative;
  perspective: 900px;
  padding-top: 10px;
}

/* Dice cube */
.dice {
  width: 140px;
  height: 140px;
  transform-style: preserve-3d;
  transform: rotateX(-25deg) rotateY(35deg);
  transition: transform 1.2s cubic-bezier(.24,.74,.58,1.22);
  margin: 0 auto;
}

/* Dice faces */
.face {
  position: absolute;
  width: 140px;
  height: 140px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 95%;
  background-position: center;

  border: 3px solid rgba(255,255,255,0.85);
  border-radius: 22px;

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

.face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
      to bottom right,
      rgba(255,255,255,0.35),
      rgba(255,255,255,0)
  );
  pointer-events: none;
}

/* SVG Faces */
.front  { background-image: url('assets/dice/1.svg'); transform: translateZ(60px); }
.back   { background-image: url('assets/dice/6.svg'); transform: rotateY(180deg) translateZ(60px); }
.right  { background-image: url('assets/dice/3.svg'); transform: rotateY(90deg) translateZ(60px); }
.left   { background-image: url('assets/dice/4.svg'); transform: rotateY(-90deg) translateZ(60px); }
.top    { background-image: url('assets/dice/5.svg'); transform: rotateX(90deg) translateZ(60px); }
.bottom { background-image: url('assets/dice/2.svg'); transform: rotateX(-90deg) translateZ(60px); }

/* PERFECTLY ALIGNED DICE SHADOW */
.shadow {
  width: 120px;
  height: 25px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.25), transparent);
  position: absolute;
  bottom: -15px;          /* FIXED POSITION */
  left: 50%;
  transform: translateX(-50%);  /* CENTERED */
  filter: blur(6px);
}

/* Cute button (clean pastel) */
.roll-btn {
  width: 100%;
  padding: 16px;
  font-size: 20px;
  border-radius: 20px;
  border: none;
  cursor: pointer;

  background: linear-gradient(180deg, #ff8eb6 0%, #ff5681 100%);
  color: #fff;
  font-weight: 900;

  box-shadow: 0 4px #d8436a;
  transition: 0.2s;
}

/* Disabled extra hover glow (looked weird on mobile) */
.roll-btn:hover {
  transform: translateY(-2px);
}

.roll-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px #d8436a;
}

/* Popup */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  justify-content: center;
  align-items: center;
}

.hidden { display: none; }

.popup-box {
  background: #fff1f6;
  color: #ff4d7a;
  width: 80%;
  max-width: 300px;
  padding: 25px;
  border-radius: 20px;
  text-align: center;

  border: 3px solid #ffc6d2;
  box-shadow: 0 10px 20px rgba(255,120,150,0.25);
}