/* probability_dice.css — two dice + frequency bars for viz/probability_dice.js (pure DOM). */

.pb { display: flex; flex-direction: column; gap: 0.85rem; }
.pb-stage { position: relative; width: 100%; min-height: 210px; padding: 0.8rem; display: flex; align-items: flex-end; gap: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 0.8rem; background: linear-gradient(180deg, #0a0f1a, #06090f); }
.pb-dice { display: flex; flex-direction: column; gap: 8px; align-self: center; }
.pb-die { width: 46px; height: 46px; border-radius: 9px; padding: 5px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: linear-gradient(180deg, #f8fafc, #e2e8f0); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); }
.pb-pip { border-radius: 50%; }
.pb-pip.on { background: radial-gradient(circle at 38% 32%, #475569, #0f172a); }

.pb-bars { flex: 1; display: flex; align-items: stretch; gap: 4px; height: 150px; min-height: 150px; }
.pb-bar { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.pb-fill { width: 100%; min-height: 1px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #38bdf8, #0284c7); transition: height 0.12s ease; }
.pb-theo { position: absolute; left: -1px; right: -1px; height: 2px; background: rgba(251, 191, 36, 0.85); border-radius: 2px; }
.pb-lab { position: absolute; bottom: -1.1rem; left: 50%; transform: translateX(-50%); font-size: 0.7rem; color: #8aa0b6; font-variant-numeric: tabular-nums; }
.pb-ways { position: absolute; left: 50%; transform: translateX(-50%); margin-bottom: 3px; font-size: 0.58rem; font-weight: 700; color: rgba(251, 191, 36, 0.95); font-variant-numeric: tabular-nums; pointer-events: none; }
.pb-bars { margin-bottom: 1.1rem; }