/* ==========================================================================
   Würfel – modul-spezifische Styles
   Alle Selektoren unter #view-dice bzw. mit Präfix .dice-…
   ========================================================================== */

/* ---------- Material-Tokens (Würfel sind „Elfenbein“ – auch im Dunkelmodus) ---------- */
#view-dice {
  --dice-face: #fbf8f2;
  --dice-face-hi: #fffefb;
  --dice-face-lo: #e9e3d9; /* Seitenrand: --dice-face mit 16 % #8b7755 gemischt (ohne color-mix) */
  --dice-edge: #d6ccbb;
  --dice-core: #e2d9ca;
  --dice-ink: #221f28;
  --dice-pip-lo: #4c4655;
  --dice-one: #e8431f;
  --dice-one-lo: #ff8566;
  --dice-bevel: rgb(122 98 62 / 0.14);
  --dice-shadow: rgb(29 27 34 / 0.34);
  --dice-tray-inset: rgb(29 27 34 / 0.07);
  --dice-tray-glow: rgb(255 255 255 / 0.7);
}

@media (prefers-color-scheme: dark) {
  #view-dice {
    --dice-face: #eee8de;
    --dice-face-hi: #f7f3ec;
    --dice-face-lo: #ded6c8;
    --dice-edge: #b9ad9b;
    --dice-core: #cbc0ae;
    --dice-bevel: rgb(90 70 40 / 0.2);
    --dice-shadow: rgb(0 0 0 / 0.62);
    --dice-tray-inset: rgb(0 0 0 / 0.35);
    --dice-tray-glow: rgb(255 255 255 / 0.04);
  }
}

/* ---------- Bühne: vertieftes Würfelbrett ---------- */
#view-dice .dice-stage {
  container-type: inline-size;
  min-height: 280px;
  padding: 22px 12px 20px;
  /* Würfel bleiben auf dem Brett: dice.js begrenzt die Sprunghöhe, das hier ist nur die Absicherung */
  overflow-y: clip;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(75% 65% at 50% 40%, var(--dice-tray-glow), transparent 70%),
    var(--surface-2);
  box-shadow:
    inset 0 2px 16px var(--dice-tray-inset),
    inset 0 1px 2px var(--dice-tray-inset);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#view-dice .dice-stage.is-rolling {
  cursor: progress;
}

/* Spannend-Modus: Ein zweiter Druck – auch aufs Brett – löst den Wurf sofort auf */
#view-dice .dice-stage.is-skippable {
  cursor: pointer;
}

/* Tray: max. 3 Würfel pro Reihe (bei 4 Würfeln 2 × 2), Größe relativ zur Bühnenbreite (--tray-w).
   --air = Luft über den Würfeln für den Sprung – sie liegen dadurch etwas unter der Mitte, wie auf
   einem Boden. Bei zwei Reihen braucht die obere Reihe mehr davon. */
#view-dice .dice-tray {
  /* Bühnenbreite: per Container-Einheit (s. @supports unten). Ältere Browser ohne cqi (Safari < 16,
     Chrome < 105) schätzen sie aus der Fensterbreite – sonst wären die Würfel 0 px groß; im kompakten
     Querformat aus der linken Spalte (s. „Handy quer“ unten) */
  --tray-w: calc(100vw - 80px);
  --die: min(150px, calc(var(--tray-w) * 0.36));
  --gap: calc(var(--die) * 0.3);
  --air: calc(var(--die) * 0.3);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: calc(var(--gap) * 0.75) var(--gap);
  max-width: calc(var(--die) * 3 + var(--gap) * 2 + 1px);
  padding-top: var(--air);
}

@supports (width: 1cqi) {
  #view-dice .dice-tray {
    --tray-w: 100cqi;
  }
}

#view-dice .dice-tray[data-count="2"] {
  --die: min(132px, calc(var(--tray-w) * 0.32));
}

#view-dice .dice-tray[data-count="3"] {
  --die: min(118px, calc(var(--tray-w) * 0.26));
}

#view-dice .dice-tray[data-count="4"] {
  --die: min(108px, calc(var(--tray-w) * 0.28));
  --air: calc(var(--die) * 0.4);
  max-width: calc(var(--die) * 2 + var(--gap) + 1px);
}

#view-dice .dice-tray[data-count="5"],
#view-dice .dice-tray[data-count="6"] {
  --die: min(104px, calc(var(--tray-w) * 0.25));
  --air: calc(var(--die) * 0.4);
}

/* ---------- Ein Würfel: Platz · Schatten · Körper ---------- */
#view-dice .dice-die {
  --s: calc(var(--die) * 0.78);
  position: relative;
  flex: none;
  width: var(--die);
  height: var(--die);
  perspective: calc(var(--die) * 7);
  transition: transform var(--dur) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 25ms);
}

#view-dice .dice-body {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  transform-origin: 50% 80%; /* dice.js: ORIGIN_Y */
  will-change: transform;
}

#view-dice .dice-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--dice-shadow), transparent);
  will-change: transform, opacity;
}

@media (hover: hover) {
  #view-dice .dice-stage:not(.is-rolling):hover .dice-die {
    transform: translateY(-4px);
  }
}

#view-dice .dice-stage:not(.is-rolling):active .dice-die {
  transform: scale(0.95);
  transition-duration: 90ms;
  transition-delay: 0ms;
}

#view-dice .dice-die.is-entering {
  animation: dice-enter 520ms var(--ease-spring) var(--enter-delay, 0ms) both;
}

#view-dice .dice-die.is-leaving {
  pointer-events: none;
}

/* Pasch / Höchstwert: Akzent-Ring pulsiert einmal hinter jedem Würfel */
#view-dice .dice-die::before {
  content: "";
  position: absolute;
  inset: 6%;
  border: 3px solid var(--accent);
  border-radius: 30%;
  opacity: 0;
  pointer-events: none;
}

#view-dice .dice-tray.is-special .dice-die::before {
  animation: dice-ring 950ms var(--ease-out) calc(var(--i, 0) * 70ms) both;
}

@keyframes dice-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.85);
  }
  100% {
    opacity: 0;
    transform: scale(1.4);
  }
}

/* Spannend-Modus bei reduzierter Bewegung: Der letzte Würfel pulsiert in der Pause ruhig – nur
   Deckkraft, eine Welle in 2,6 s (kein Flackern) */
#view-dice .dice-die.is-pending .dice-body {
  animation: dice-pending 1.3s ease-in-out infinite alternate;
}

@keyframes dice-pending {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}

@keyframes dice-enter {
  from {
    opacity: 0;
    transform: translateY(-14%) scale(0.45) rotate(-14deg);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- W6: echter 3D-Würfel ---------- */
#view-dice .dice-cube {
  --half: calc(var(--s) / 2);
  position: relative;
  width: var(--s);
  height: var(--s);
  transform-style: preserve-3d;
}

#view-dice .dice-face {
  position: absolute;
  inset: 0;
  border-radius: 21%;
  background: radial-gradient(
    circle at 50% 46%,
    var(--dice-face-hi) 0 50%,
    var(--dice-face) 76%,
    var(--dice-face-lo) 100%
  );
  box-shadow:
    inset 0 0 0 max(1px, calc(var(--s) * 0.01)) var(--dice-bevel),
    inset 0 calc(var(--s) * -0.035) calc(var(--s) * 0.07) var(--dice-bevel);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Kern: füllt die Lücken an den abgerundeten Ecken */
#view-dice .dice-core {
  position: absolute;
  inset: 2%;
  border-radius: 12%;
  background: var(--dice-core);
}

#view-dice .dice-core--x {
  transform: rotateY(90deg);
}

#view-dice .dice-core--y {
  transform: rotateX(90deg);
}

/* Augen: leicht vertieft (Schatten oben innen, Lichtkante unten) */
#view-dice .dice-pip {
  position: absolute;
  width: 19%;
  height: 19%;
  margin: -9.5% 0 0 -9.5%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 72%, var(--dice-pip-lo), var(--dice-ink) 64%);
  box-shadow:
    inset 0 calc(var(--s) * 0.014) calc(var(--s) * 0.02) rgb(0 0 0 / 0.55),
    0 calc(var(--s) * 0.008) 0 rgb(255 255 255 / 0.75);
}

#view-dice .dice-face--1 .dice-pip {
  width: 25%;
  height: 25%;
  margin: -12.5% 0 0 -12.5%;
  background: radial-gradient(circle at 50% 72%, var(--dice-one-lo), var(--dice-one) 64%);
}

/* Licht: Deckkraft wird pro Frame aus der Ausrichtung der Seite berechnet */
#view-dice .dice-face__shade {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #17141d;
  opacity: 0;
  pointer-events: none;
}

/* ---------- W4 … W20: facettierte Formen ---------- */
#view-dice .dice-poly {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  will-change: transform;
}

#view-dice .dice-poly__svg {
  width: 98%; /* dice.js: POLY_FILL */
  height: 98%;
  overflow: visible;
}

#view-dice .dice-poly__rim {
  fill: var(--dice-face);
  stroke: var(--dice-edge);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

#view-dice .dice-poly__facet {
  fill: #3b2e1c;
  stroke: var(--dice-bevel);
  stroke-width: 0.6;
  stroke-linejoin: round;
}

#view-dice .dice-poly__face {
  fill: var(--dice-face-hi);
  stroke: var(--dice-bevel);
  stroke-width: 0.9;
  stroke-linejoin: round;
}

#view-dice .dice-poly__gloss {
  fill: none;
  stroke: rgb(255 255 255 / 0.8);
  stroke-width: 1.2;
  stroke-linejoin: round;
  transform: translate(0.5px, 0.9px);
}

/* Zahl als HTML über der Form: Position/Größe in Würfel-Anteilen aus dice.js (--num),
   Deckkraft pro Frame → eigene Ebene statt SVG-Layout */
#view-dice .dice-poly__num {
  position: absolute;
  transform: translate(-50%, -50%);
  color: var(--dice-ink);
  font-family: var(--font);
  font-size: calc(var(--die) * var(--num));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  white-space: nowrap;
  pointer-events: none;
  will-change: opacity;
}

#view-dice .dice-poly__num.is-wide {
  font-size: calc(var(--die) * var(--num) * 0.84);
}

/* ---------- Ergebnis ----------
   Wert und Detailzeile stehen oben unter dem Label – mit denselben Abständen wie bei Rad und Münze.
   Damit der Button trotzdem nie springt (Leerlauf → Wurf → Ergebnis), liegt in derselben Rasterzelle
   ein unsichtbarer Platzhalter: so hoch wie die große Ergebniszahl bzw. zwei Zeilen Hinweistext
   (bricht bei großer Schrift um) plus die längste Detailzeile der Einstellung (dice.js: setDetail).
   Die Reserve liegt so unter der Detailzeile statt zwischen den Zeilen. */
#view-dice .dice-result__body {
  display: grid;
}

#view-dice .dice-result__shown,
#view-dice .dice-result__space {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px; /* wie .result (base.css) */
}

#view-dice .dice-result__space {
  visibility: hidden;
}

#view-dice .dice-result__space-value {
  /* Maße aus base.css: .result__value clamp(1.6rem, 5.5vw, 2.6rem), .is-idle 1,1rem – Zeilenhöhe 1,15 */
  min-height: max(calc(clamp(1.6rem, 5.5vw, 2.6rem) * 1.15), calc(1.1rem * 1.15 * 2));
}

#view-dice .dice-result .result__value,
#view-dice .dice-result .result__detail {
  font-variant-numeric: tabular-nums;
}

/* ---------- Einstellungen ---------- */
/* Würfelart: 6 Spalten – reicht der Platz dafür nicht (schmales Handy oder große Schrift), 2 × 3.
   Schwelle: 6 × max(40 px Touch-Ziel, „W20“ gemessen ≈ 2rem + 6 px Innenabstand/Rand, plus Reserve)
   + 5 Lücken à 6 px */
#view-dice .dice-type-field {
  container: dice-types / inline-size;
}

#view-dice .dice-types {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

@container dice-types (max-width: max(270px, calc(12.5rem + 66px))) {
  #view-dice .dice-types {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Ohne Container-Abfragen: 2 × 3 nur auf sehr schmalen Bildschirmen */
@supports not (container-type: inline-size) {
  @media (max-width: 339px) {
    #view-dice .dice-types {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
}

#view-dice .dice-types .seg__btn {
  min-width: 0;
  padding: 6px 2px;
}

#view-dice .dice-settings .stepper,
#view-dice .dice-settings .seg {
  transition: opacity var(--dur);
}

#view-dice .dice-settings.is-locked .stepper,
#view-dice .dice-settings.is-locked .seg {
  opacity: 0.55;
}

/* ---------- Statistik ---------- */
/* Ganze Kacheln umbrechen statt Wörter: Jede ist mindestens so breit wie „Erwartet“ bzw. ein
   Schnitt wie „120,0“ (gemessen je ≈ 4,2rem) plus Innenabstand – bei großer Schrift werden es
   2 + 1 oder 1 + 1 + 1 Kacheln */
#view-dice .dice-stats-panel .stats {
  display: flex;
  flex-wrap: wrap;
}

#view-dice .dice-stats-panel .stat {
  flex: 1 1 calc(4.3rem + 20px);
}

#view-dice .dice-stats-hint {
  margin-top: 8px;
  text-align: center;
}

/* ---------- Verlauf ---------- */
#view-dice .dice-chip {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Einzelwerte dürfen gekürzt werden („…“), die Summe nie */
#view-dice .dice-chip__vals {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-dice .dice-chip__sum {
  flex: none;
}

#view-dice .dice-chip__sum strong {
  font-weight: 900;
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  #view-dice .dice-die {
    transition: none;
  }

  #view-dice .dice-die.is-entering {
    animation: fade-in 200ms ease both;
  }

  #view-dice .dice-tray.is-special .dice-die::before {
    animation: none;
  }

  #view-dice .dice-stage:not(.is-rolling):hover .dice-die,
  #view-dice .dice-stage:not(.is-rolling):active .dice-die {
    transform: none;
  }
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 599px) {
  #view-dice .dice-stage {
    min-height: 240px;
    padding: 16px 10px 14px;
  }
}

/* Handy quer (Layout aus base.css: Bühne links, Ergebnis + Button rechts): Das Brett passt in die
   Höhe unter der Kopfzeile. Die Würfel skalieren mit der Breite und passen dann ebenfalls hinein. */
@media (orientation: landscape) and (max-height: 540px) {
  #view-dice .dice-stage {
    min-height: min(280px, calc(100vh - var(--shell-h) - 16px));
  }

  /* svh erst, wenn unterstützt – mit var() gäbe es sonst keinen Rückfall auf die vh-Zeile */
  @supports (height: 1svh) {
    #view-dice .dice-stage {
      min-height: min(280px, calc(100svh - var(--shell-h) - 16px));
    }
  }
}

/* Ohne cqi: Die Bühne ist hier nur die linke von zwei Spalten. Ihre Inhaltsbreite nach base.css:
   (Hauptbereich − Seitenränder − 24px Spaltenabstand) / 2 − 2px Rahmen − 24px Innenabstand; ab 900px
   stehen zusätzlich Panel und 32px Abstand daneben, und der Hauptbereich ist höchstens --content-max
   breit. 2px Reserve (unter 600px mehr) – lieber etwas kleinere Würfel als eine zusätzliche Reihe. */
@supports not (width: 1cqi) {
  @media (orientation: landscape) and (max-height: 540px) {
    #view-dice .dice-tray {
      --tray-w: calc(50vw - 40px - max(20px, env(safe-area-inset-left)));
    }
  }

  @media (orientation: landscape) and (max-height: 540px) and (min-width: 900px) {
    #view-dice .dice-tray {
      --tray-w: calc(
        min(50vw, var(--content-max) / 2) - var(--panel-width) / 2 - 56px - max(20px, env(safe-area-inset-left))
      );
    }
  }
}

/* Statistik-Kacheln kompakter, damit „Erwartet“ und Schnitte wie „120,0“ hineinpassen */
@media (max-width: 359px) {
  #view-dice .stat {
    padding: 8px 4px;
  }

  #view-dice .dice-stats-panel .stat {
    flex-basis: calc(4.3rem + 8px);
  }

  #view-dice .stat__label {
    letter-spacing: 0.02em;
  }

  #view-dice .stat__value {
    font-size: 1.25rem;
  }
}