/* Beweegdobbelsteen: een bewegingsdobbelsteen en een rekendobbelsteen, daarna een teller waarmee de klas meedoet.
   Bouwt voort op klastools.css (kleuren, knoppen, @keyframes tumble/land/popin). */
.bd-levels { width: min(100%, 760px); }
.bd-levels button i { width: auto; min-width: 26px; padding: 0 5px; }

.bd-stage { flex-direction: column; gap: 3vh; }
.bd-dice { --ds: min(32vh, 40vw, 280px); display: flex; justify-content: center; gap: calc(var(--ds) * .16); cursor: pointer; }
.bd-die {
  width: var(--ds); height: var(--ds); border-radius: 22%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: inset 0 calc(var(--ds) * -.06) 0 rgba(0,0,0,.18), 0 16px 34px rgba(0,0,0,.45);
}
.bd-move { background: #fff; color: var(--bg); gap: 2%; }
.bd-sum { background: var(--gold); color: var(--gold-ink); padding: 6%; }
.bd-die.roll { animation: tumble .55s ease-in-out infinite; }
.bd-die.land { animation: land .45s cubic-bezier(.3,1.6,.5,1); }
.bd-emoji { font-size: calc(var(--ds) * .5); line-height: 1.1; }
.bd-label { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--ds) * .1); line-height: 1.05; text-align: center; padding: 0 8%; }
.bd-face { font-family: var(--font-display); font-weight: 800; line-height: 1; text-align: center; font-size: calc(var(--ds) * var(--fs, .3)); white-space: nowrap; transform: translateY(.05em); }
.bd-face small { display: block; font-size: .5em; opacity: .75; margin-bottom: .1em; }
.bd-face b { display: block; font-size: 2em; }

.bd-say { min-height: 2.3em; max-width: 1000px; text-align: center; text-wrap: balance; font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 6.5vh, 66px); line-height: 1.15; }
.bd-say b { color: var(--gold); white-space: nowrap; }
.bd-say.big { font-size: clamp(30px, 8vh, 84px); }

/* teller */
.bd-stage.counting .bd-dice { display: none; }
.bd-counter { display: grid; grid-template-columns: auto auto; grid-template-areas: "e n" "o o" "b b"; align-items: center; justify-items: center; column-gap: 3vw; }
.bd-c-emoji { grid-area: e; font-size: min(18vh, 22vw, 180px); line-height: 1; }
.bd-c-num { grid-area: n; font-family: var(--font-display); font-weight: 800; font-size: min(36vh, 42vw, 340px); line-height: .9; font-variant-numeric: tabular-nums; color: var(--gold); min-width: 1.2ch; text-align: center; }
.bd-c-num.bump { animation: bd-bump .35s cubic-bezier(.3,1.6,.5,1); }
.bd-c-of { grid-area: o; font-family: var(--font-display); font-weight: 800; font-size: clamp(20px, 4vh, 40px); color: var(--muted); }
.bd-bar { grid-area: b; width: min(640px, 80vw); height: 18px; margin-top: 1vh; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.bd-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--gold); transition: width .3s ease; }
@keyframes bd-bump { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }

@media (max-width: 560px) {
  .bd-levels button { font-size: 12.5px; }
  .bd-levels { gap: 3px; padding: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .bd-die.roll, .bd-die.land, .bd-c-num.bump { animation: none; }
  .bd-bar i { transition: none; }
}