.dr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 1rem; align-items: start; }
.dr-board { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 2rem 1rem; text-align: center; }
.dr-dice { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; min-height: 96px; cursor: pointer; }
.dr-die { width: 84px; height: 84px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 -5px 0 rgb(0 0 0 / .08), 0 6px 16px -6px rgb(16 24 40 / .35), 0 0 0 1px var(--border); transition: transform .12s; }
.dr-d6 { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 12px; }
.dr-d6 i { place-self: center; width: 14px; height: 14px; border-radius: 50%; }
.dr-d6 i.on { background: var(--text); }
.dr-poly { display: grid; place-content: center; background: var(--primary); color: #fff; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border-radius: 0; box-shadow: none; }
.dr-d4 { clip-path: polygon(50% 0, 100% 100%, 0 100%); padding-top: 22px; }
.dr-d20 { background: #7c3aed; } .dr-d12 { background: #db2777; } .dr-d10 { background: #0891b2; } .dr-d8 { background: #16a34a; } .dr-d100 { background: #ea580c; }
.dr-poly span { font: 800 1.7rem/1 var(--font-display); } .dr-poly small { font-size: .62rem; opacity: .8; }
.is-rolling .dr-die { transform: rotate(var(--r, 12deg)) scale(.94); }
.is-rolling .dr-die:nth-child(even) { --r: -14deg; }
.dr-total { margin: 0; min-height: 1.6em; font: 700 1.4rem var(--font-display); }
.dr-roll { min-width: 12rem; }
.dr-tip { margin: 0; }
.dr-count { display: flex; align-items: center; gap: .75rem; }
.dr-count output { min-width: 2ch; font: 700 1.4rem var(--font-display); text-align: center; }
.dr-history { margin: 0; padding-left: 1.2rem; display: grid; gap: .25rem; font-size: .9rem; color: var(--text-soft); }
.dr-history strong { color: var(--text); }
@media (max-width: 760px) { .dr { grid-template-columns: minmax(0, 1fr); } .dr-die { width: 68px; height: 68px; } .dr-d6 i { width: 11px; height: 11px; } }
@media (prefers-reduced-motion: reduce) { .dr-die { transition: none; } }