:root{
  --bg:#0f1724;
  --roll-duration: 1200ms;
  --card:#0b1220;
  --accent:#f59e0b;
  --text:#e6eef8;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;background:linear-gradient(180deg,#071024 0%,var(--bg) 100%);color:var(--text);display:grid;place-items:center;padding:2rem}
main{width:100%;max-width:720px;text-align:center}
h1{font-size:1.5rem;margin:0 0 1rem}
.dice-row{display:flex;gap:1.25rem;justify-content:center;margin-bottom:1rem}
.die{background:linear-gradient(180deg,#fff,#e6eef8);color:#111;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.6);width:140px;height:140px;display:grid;place-items:center;font-size:6rem;transition:transform .25s ease,box-shadow .25s ease;user-select:none}
button{appearance:none;border:0;background:var(--accent);color:#071022;padding:.75rem 1.1rem;border-radius:10px;font-weight:600;cursor:pointer;box-shadow:0 8px 20px rgba(245,158,11,0.18);transition:transform .12s ease}
button:active{transform:translateY(1px)}
#result{margin-top:1rem;font-weight:600}
.die.rolling{animation:roll var(--roll-duration) cubic-bezier(.18,.9,.22,1) 1 both;transform-origin:center}
@keyframes roll{
  0%{transform:rotate(0) translateY(0) scale(1)}
  25%{transform:rotate(20deg) translateY(-6px) scale(1.02)}
  50%{transform:rotate(-12deg) translateY(4px) scale(.98)}
  75%{transform:rotate(8deg) translateY(-2px) scale(1.01)}
  100%{transform:rotate(0) translateY(0) scale(1)}
}
@media (max-width:480px){.die{width:110px;height:110px;font-size:4.5rem}}