.dr-tray { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; min-height: 120px; padding: 22px 12px; border-radius: var(--r-lg); background: radial-gradient(circle at 50% 40%, rgba(34, 176, 125, 0.18), transparent 70%), var(--glass-soft); border: 1px solid var(--line); cursor: pointer; }
.dr-die { width: 72px; height: 72px; flex-shrink: 0; }
.dr-d6 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 11px; gap: 3px; border-radius: 16px; background: linear-gradient(145deg, #ffffff, #e6e8f0); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08), 0 8px 18px -8px rgba(20, 25, 60, 0.45); }
.dr-d6 i { display: block; border-radius: 50%; margin: 2px; }
.dr-d6 i.on { background: radial-gradient(circle at 35% 35%, #4a5170, #111a2e); }
.dr-shape { position: relative; display: grid; place-items: center; align-content: center; color: #fff; filter: drop-shadow(0 6px 8px rgba(20, 25, 60, 0.35)); }
.dr-shape::before { content: ''; position: absolute; inset: 0; background: var(--dr-bg, var(--grad)); clip-path: var(--dr-clip, none); border-radius: var(--dr-radius, 0); }
.dr-shape b, .dr-shape small { position: relative; line-height: 1; }
.dr-shape b { font-size: 1.55rem; font-weight: 800; }
.dr-shape small { font-size: 0.62rem; font-weight: 700; opacity: 0.85; margin-top: 2px; }
.dr-d4 { --dr-bg: linear-gradient(160deg, #ff8a65, #e64a19); --dr-clip: polygon(50% 2%, 98% 94%, 2% 94%); padding-top: 22px; }
.dr-d8 { --dr-bg: linear-gradient(160deg, #4dd0e1, #00838f); --dr-clip: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.dr-d10 { --dr-bg: linear-gradient(160deg, #ba68c8, #6a1b9a); --dr-clip: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); padding-bottom: 8px; }
.dr-d12 { --dr-bg: linear-gradient(160deg, #81c784, #2e7d32); --dr-clip: polygon(50% 0, 98% 36%, 80% 97%, 20% 97%, 2% 36%); padding-top: 6px; }
.dr-d20 { --dr-bg: linear-gradient(160deg, #7986cb, #283593); --dr-clip: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); }
.dr-d100 { --dr-bg: linear-gradient(160deg, #ffd54f, #f57f17); --dr-radius: 50%; color: #3e2700; }
.dr-rolling .dr-die { animation: dr-shake 0.14s linear infinite; }
@keyframes dr-shake { 0% { transform: rotate(-9deg) translateY(-3px); } 50% { transform: rotate(8deg) translateY(2px); } 100% { transform: rotate(-9deg) translateY(-3px); } }
.dr-stepper { display: flex; align-items: stretch; }
.dr-stepper input { text-align: center; border-radius: 0 !important; }
.dr-stepper .btn { border-radius: var(--r) 0 0 var(--r); min-width: 44px; padding: 0 12px; }
.dr-stepper .btn:last-child { border-radius: 0 var(--r) var(--r) 0; }
#dr-crit { font-weight: 800; color: var(--accent-ink); min-height: 1.2em; margin: 4px 0 0; }
@media (prefers-reduced-motion: reduce) { .dr-rolling .dr-die { animation: none; } }