.dice-flight-layer { perspective: none; z-index: 120; }
.dice-webgl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dice-result-panel {
  position: absolute; left: 50%; top: 67%; transform: translate(-50%, 10px);
  display: grid; justify-items: center; gap: 8px; min-width: 224px; max-width: 540px;
  padding: 14px 26px; border: 1px solid #aa864c; border-radius: 12px;
  background: linear-gradient(150deg, #191e20f2, #0d1113f5);
  box-shadow: 0 12px 42px #0009, inset 0 1px 0 #e7c88b30;
  opacity: 0; transition: opacity .2s, transform .2s;
  color: #f4e2ba; font: 15px Georgia, serif; text-align: center;
}
.dice-result-panel.is-visible { opacity: 1; transform: translate(-50%, 0); }
.dice-result-author { font: 11px Arial, sans-serif; letter-spacing: .12em; color: #b7ab91; }
.dice-result-values { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-height: 100px; overflow: auto; }
.dice-result-values b { display: grid; place-items: center; min-width: 26px; height: 28px; padding: 0 5px; border-radius: 5px; border: 1px solid #a3885855; background: #d8be8320; font: 700 18px Georgia, serif; }
.dice-result-values .dice-result-discarded { color: #9a827e; opacity: .55; text-decoration: line-through; }
.dice-result-panel > strong { font-weight: 500; }
.dice-result-panel.is-fallback { top: 44%; }
@media (prefers-reduced-motion: reduce) { .dice-result-panel { transition: none; } }