:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif}body{margin:0;background:#111827;color:#f9fafb}.layout{display:grid;grid-template-columns:1fr 360px;min-height:100vh}.dice-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.subtitle{color:#9ca3af}.dice-frame{width:280px;height:280px;position:relative;border:2px solid #374151;border-radius:18px;background:radial-gradient(circle at 30% 20%,#1f2937,#0f172a 75%);overflow:hidden;perspective:900px}.dice-stage{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transform:rotateX(16deg) rotateY(-14deg) rotate(-4deg)}.dice-cube{--size: 96px;--half: calc(var(--size) / 2);width:var(--size);height:var(--size);position:absolute;left:50%;top:50%;transform-style:preserve-3d;transform:translate(-50%,-50%) rotateX(var(--start-x, 0deg)) rotateY(var(--start-y, 0deg)) rotate(var(--start-z, 0deg))}.dice-cube.rolling-3d{animation:dice-roll-arena 1.25s cubic-bezier(.15,.85,.15,1)}@keyframes dice-roll-arena{0%{transform:translate(-50%,-50%) rotateX(var(--start-x)) rotateY(var(--start-y)) rotate(var(--start-z))}20%{transform:translate(-70%,-40%) rotateX(calc(var(--end-x) * .25)) rotateY(calc(var(--end-y) * .25)) rotate(calc(var(--end-z) * .25))}45%{transform:translate(-30%,-65%) rotateX(calc(var(--end-x) * .6)) rotateY(calc(var(--end-y) * .6)) rotate(calc(var(--end-z) * .6))}70%{transform:translate(-62%,-36%) rotateX(calc(var(--end-x) * .85)) rotateY(calc(var(--end-y) * .85)) rotate(calc(var(--end-z) * .85))}to{transform:translate(-50%,-50%) rotateX(var(--end-x)) rotateY(var(--end-y)) rotate(var(--end-z))}}.face{position:absolute;width:var(--size);height:var(--size);border-radius:16px;background:linear-gradient(150deg,#f9fafb,#d1d5db);border:2px solid #94a3b8;box-shadow:inset 0 1px #ffffffb3;backface-visibility:hidden}.front{transform:rotateY(0) translateZ(var(--half))}.back{transform:rotateY(180deg) translateZ(var(--half))}.right{transform:rotateY(90deg) translateZ(var(--half))}.left{transform:rotateY(-90deg) translateZ(var(--half))}.top{transform:rotateX(90deg) translateZ(var(--half))}.bottom{transform:rotateX(-90deg) translateZ(var(--half))}.pips{width:100%;height:100%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center}.pip{width:14px;height:14px;border-radius:50%;background:transparent}.pip.on{background:#111827;box-shadow:inset 0 -1px #fff3}.roll-result{position:absolute;top:10px;right:12px;min-width:1ch;font-weight:800;font-size:1.1rem;color:#facc15;text-shadow:0 2px 8px rgba(0,0,0,.7);opacity:0;transform:translateY(-2px);transition:opacity .12s ease,transform .12s ease;will-change:opacity,transform}.roll-result.visible{opacity:1;transform:translateY(0)}.sidebar{border-left:1px solid #374151;padding:1rem;display:flex;flex-direction:column;gap:1rem;max-height:100vh}.total{color:#d1d5db}.stats-list,.history{list-style:none;padding:0;margin:0}.stats-list li{display:grid;grid-template-columns:1fr 1fr 1fr;padding:.25rem 0;border-bottom:1px solid #1f2937}.history{overflow:auto;display:flex;flex-direction:column;gap:.35rem}.history li{display:flex;justify-content:space-between;background:#1f2937;border:1px solid #374151;border-radius:8px;padding:.4rem .6rem}@media (max-width: 900px){.layout{grid-template-columns:1fr}.sidebar{border-left:0;border-top:1px solid #374151;max-height:unset}}