.dc-opts{display:grid;gap:14px}
.dc-seg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%}
.dc-seg button{padding:8px 0;min-height:38px;overflow-wrap:normal}
.dc-tray{position:relative;border-radius:var(--radius);padding:28px 12px;min-height:200px;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(ellipse at 50% 35%,#2f9a6a 0%,#1d7a52 55%,#145a3c 100%);box-shadow:inset 0 2px 14px rgba(0,0,0,.35),inset 0 0 0 6px #6b4a2b,inset 0 0 0 8px #8a623b}
.dc-tray:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.dc-dice{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;max-width:330px;perspective:600px}
.dc-dice.dc-n4{max-width:220px}
.dc-dice.dc-n1 .dc-die{--sz:112px}
.dc-dice.dc-n2 .dc-die{--sz:96px}
.dc-die{--sz:82px;width:var(--sz);height:var(--sz);position:relative;transform-style:preserve-3d}
.dc-die.dc-d6{background:linear-gradient(145deg,#fff 0%,#f3f0ea 60%,#e0dbd1 100%);border-radius:18%;box-shadow:0 6px 0 #c9c2b5,0 10px 18px rgba(0,0,0,.35),inset 0 -3px 6px rgba(0,0,0,.08);padding:14%}
.dc-pips{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);width:100%;height:100%;gap:8%}
.dc-pips i{border-radius:50%}
.dc-pips i.on{background:radial-gradient(circle at 35% 35%,#555,#151515 70%);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.dc-die[data-v="1"] .dc-pips i.on{background:radial-gradient(circle at 35% 35%,#ff6b6b,#c81d25 70%);transform:scale(1.45)}
.dc-die svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 6px 4px rgba(0,0,0,.35))}
.dc-body{stroke:rgba(255,255,255,.55);stroke-width:2;stroke-linejoin:round}
.dc-facet{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.6;stroke-linejoin:round}
.dc-num{fill:#fff;font:800 30px/1 var(--font);text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:rgba(0,0,0,.25);stroke-width:3}
.dc-num.u{text-decoration:underline}
.dc-d4 .dc-body{fill:#f59e0b}.dc-d4 .dc-num{font-size:26px}
.dc-d8 .dc-body{fill:#3b82f6}
.dc-d10 .dc-body{fill:#8b5cf6}.dc-d10 .dc-num{font-size:26px}
.dc-d12 .dc-body{fill:#ec4899}.dc-d12 .dc-num{font-size:24px}
.dc-d20 .dc-body{fill:#ef4444}.dc-d20 .dc-num{font-size:24px}
.dc-die.rolling{animation:dc-tumble .75s cubic-bezier(.2,.7,.3,1) both}
@keyframes dc-tumble{
  0%{transform:translate3d(var(--dx),-70px,0) rotateX(260deg) rotateY(120deg) rotateZ(var(--rz)) scale(.7)}
  45%{transform:translate3d(calc(var(--dx) * -.4),8px,0) rotateX(80deg) rotateY(40deg) rotateZ(calc(var(--rz) * .3)) scale(1.05)}
  70%{transform:translate3d(calc(var(--dx) * .15),-10px,0) rotateX(-12deg) rotateY(-8deg) rotateZ(calc(var(--rz) * .05))}
  85%{transform:translate3d(0,2px,0) rotateX(4deg) scale(1)}
  100%{transform:none}
}
.dc-label{margin:0 0 4px;font-size:14px}
.dc-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.dc-stats .stat{padding:10px 12px}
.dc-hist{list-style:none;margin:0;padding:0;max-height:300px;overflow:auto;display:grid;gap:6px}
.dc-hist li{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--radius-sm);background:var(--surface-2);font-variant-numeric:tabular-nums}
.dc-hist li.new{animation:dc-in .35s ease-out}
@keyframes dc-in{from{opacity:0;transform:translateY(-6px)}}
.dc-h-kind{font-size:12px;font-weight:700;color:var(--muted);min-width:44px}
.dc-h-vals{display:flex;flex-wrap:wrap;gap:4px;flex:1}
.dc-h-vals b{min-width:28px;height:28px;padding:0 4px;display:inline-grid;place-items:center;border-radius:7px;background:var(--surface);border:1px solid var(--border);font-size:14px}
.dc-h-sum{font-weight:800;color:var(--brand)}
@media (max-width:400px){.dc-die{--sz:72px}.dc-dice{gap:14px}.dc-stats .stat b{font-size:19px}}
@media (prefers-reduced-motion:reduce){.dc-die.rolling,.dc-hist li.new{animation:none}}