:root{
  --bg:#f3f6fb;
  --card:#ffffffcc; 
  --accent:#3b82f6;
  --text:#0f172a;
  --mouse-x:50%; 
  --mouse-y:50%;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}


body{
  display:flex;align-items:center;justify-content:center;
  
  background:
    radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(59,130,246,0.10), transparent 25%),
    linear-gradient(180deg,var(--bg),#eaf1ff);
  background-attachment:fixed;
  position:relative;
  overflow:hidden;
}

body::before, body::after{
  content:"";
  position:fixed;
  width:520px;height:520px;
  pointer-events:none;
  z-index:-1;
  filter:blur(64px);
  opacity:0.6;
  transform:translate(-50%,-50%);
}
body::before{
  left:12%; top:18%;
  background: radial-gradient(circle at 30% 30%, #60a5fa 0%, #7dd3fc 40%, transparent 60%);
  animation:blobMove 9s ease-in-out infinite alternate;
}
body::after{
  right:10%; bottom:16%;
  background: radial-gradient(circle at 70% 70%, #a78bfa 0%, #60a5fa 35%, transparent 65%);
  animation:blobMove 11s ease-in-out infinite alternate-reverse;
}

body.pulse{
  transition:filter 220ms linear;
}
body.pulse::before, body.pulse::after{
  opacity:0.9;
  filter:blur(72px) saturate(120%);
  transform:translate(-50%,-50%) scale(1.06);
}

@keyframes blobMove{
  from{transform:translate(-40px,-30px) scale(1)}
  to{transform:translate(40px,30px) scale(1.06)}
}

html::before, html::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2; 
}

html::before{
  background: linear-gradient(120deg, rgba(249,115,22,0.06), rgba(99,102,241,0.06), rgba(52,211,153,0.06));
  background-size: 300% 300%;
  opacity:0.95;
  animation: gradientShift 18s linear infinite;
}

@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

html::after{
  background-image: radial-gradient(circle at 10% 20%, rgba(255,255,255,0.06) 0 2px, transparent 3px),
                    radial-gradient(circle at 70% 40%, rgba(255,255,255,0.05) 0 2px, transparent 3px),
                    radial-gradient(circle at 30% 80%, rgba(255,255,255,0.04) 0 2px, transparent 3px);
  background-size: 200% 200%;
  animation: dotsDrift 14s ease-in-out infinite;
  opacity:0.9;
}

@keyframes dotsDrift{
  0%{background-position:0% 0%}
  50%{background-position:30% 40%}
  100%{background-position:0% 0%}
}

.wrap{width:min(520px,94%);}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
  padding:28px;border-radius:14px;box-shadow:0 12px 40px rgba(16,24,40,0.08);text-align:center;
  border:1px solid rgba(255,255,255,0.6);
  backdrop-filter: blur(6px);
  transition:transform 250ms ease, box-shadow 250ms ease;
}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 50px rgba(16,24,40,0.12)}
.title{margin:0 0 18px;font-size:1.6rem}
.result{font-size:1.3rem;margin:8px 0;color:var(--text)}
#number{font-weight:800;font-size:1.6rem}
.dice{font-size:78px;line-height:1;margin:10px 0;transition:transform 300ms ease,filter 300ms ease}

.roll{background:var(--accent);color:white;border:0;padding:12px 18px;border-radius:10px;font-size:1rem;cursor:pointer;box-shadow:0 6px 18px rgba(59,130,246,0.28)}
.roll:active{transform:translateY(1px)}
.hint{color:#475569;font-size:0.875rem;margin-top:12px}

@keyframes rollAnim{
  0%{transform:rotate(0deg) scale(1)}
  30%{transform:rotate(20deg) scale(1.06)}
  60%{transform:rotate(-15deg) scale(0.98)}
  100%{transform:rotate(0deg) scale(1)}
}
.rolling{animation:rollAnim 700ms ease-in-out}


@media (max-width:420px){
  .dice{font-size:56px}
  .card{padding:20px}
}

@media (prefers-reduced-motion: reduce) {
  html::before, html::after,
  body::before, body::after,
  .rolling, .card:hover, .pulse {
    animation: none !important;
    transition: none !important;
  }
  * {
    scroll-behavior: auto !important;
  }
}

.reduced-motion html::before,
html.reduced-motion::before,
html.reduced-motion::after,
body.reduced-motion::before,
body.reduced-motion::after,
.reduced-motion .rolling,
.reduced-motion .card:hover,
.reduced-motion .pulse{
  animation: none !important;
  transition: none !important;
}