.dice-app {
  padding: 1.5rem 1rem 1.5rem;
}

.dice-center {
  text-align: center;
}

/* Die type picker and count */

.dice-types {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}

.dice-type-btn {
  min-width: 56px;
  padding: 0 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mode-btn[aria-pressed="true"] {
  background: var(--kis-accent);
  color: var(--kis-accent-contrast);
  border-color: transparent;
}

.dice-count {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--kis-text-muted);
}

.dice-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dice-stepper .kis-btn {
  width: 48px;
  padding: 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.dice-stepper input {
  width: 4.5rem;
  min-height: 48px;
  text-align: center;
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  border: 1px solid var(--kis-border);
  border-radius: var(--kis-radius);
  background: var(--kis-surface);
  color: var(--kis-text);
}

.kis-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The tray: tap it (or Roll) to throw the dice */

.dice-tray {
  display: block;
  width: 100%;
  min-height: 150px;
  margin-top: 1.25rem;
  padding: 1.25rem 0.75rem;
  border: 1px solid var(--kis-border);
  border-radius: 16px;
  background: var(--kis-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.dice-dice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 0.75rem;
  min-height: 110px;
}

/* Dice look like real dice in both themes: white faces, dark ink. */
.die {
  --die-size: 64px;
  width: var(--die-size);
  height: var(--die-size);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid #d3d7de;
  color: #1a1d21;
  box-shadow: 0 2px 0 #c4c9d1, 0 6px 14px rgba(20, 20, 20, 0.12);
  transition: opacity 0.2s ease;
}

.dice-many {
  gap: 0.5rem;
}

.dice-many .die {
  --die-size: 48px;
  border-radius: 11px;
}

.die-num {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dice-many .die-num {
  font-size: 1.2rem;
}

.die-type {
  font-size: 0.65rem;
  font-weight: 700;
  color: #5b6270;
  margin-top: 0.15rem;
}

.dice-many .die-type {
  font-size: 0.55rem;
}

/* d6 faces use pips on a 3 by 3 grid. */
.die-pips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: calc(var(--die-size) * 0.13);
  place-items: center;
}

.die-pips:has(.die-num) {
  display: flex;
  padding: 0;
}

.pip {
  width: calc(var(--die-size) * 0.17);
  height: calc(var(--die-size) * 0.17);
  border-radius: 50%;
  background: #1a1d21;
}

.die-dropped {
  opacity: 0.35;
}

.die-rolling {
  animation: die-tumble 0.56s ease-out;
}

@keyframes die-tumble {
  0% { transform: translateY(-14px) rotate(-25deg); }
  30% { transform: translateY(4px) rotate(18deg); }
  55% { transform: translateY(-5px) rotate(-10deg); }
  80% { transform: translateY(1px) rotate(4deg); }
  100% { transform: none; }
}

/* Result */

.dice-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  margin-top: 1rem;
  text-align: center;
}

.dice-total {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dice-breakdown {
  font-size: 0.9rem;
  color: var(--kis-text-muted);
  overflow-wrap: anywhere;
}

.dice-natural {
  margin-top: 0.3rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--kis-radius-pill);
  background: var(--kis-accent);
  color: var(--kis-accent-contrast);
  font-size: 0.85rem;
  font-weight: 700;
}

.dice-natural-low {
  background: var(--kis-surface);
  color: var(--kis-text);
  border: 1px solid var(--kis-border);
}

.dice-roll-row {
  text-align: center;
  margin: 1.25rem 0 0;
}

.dice-roll-btn {
  font-size: 1.1rem;
  padding: 1rem 2rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Last 10 rolls, same pills as Coin Flip */

.dice-history {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 1.5rem;
  min-height: 2rem;
}

.history-item {
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--kis-radius-pill);
  background: var(--kis-surface);
  color: var(--kis-text-muted);
  border: 1px solid var(--kis-border);
}

.history-item:first-child {
  background: var(--kis-accent);
  color: var(--kis-accent-contrast);
  border-color: transparent;
  font-weight: 700;
}

.history-item:not(:first-child) {
  opacity: 0.7;
}

/* More options */

.dice-more {
  margin-top: 1.5rem;
  border-top: 1px solid var(--kis-border);
  padding-top: 0.5rem;
}

.dice-more summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  cursor: pointer;
  color: var(--kis-text-muted);
  font-size: 0.9rem;
  font-weight: 500;
}

.dice-section {
  margin-top: 1.25rem;
}

.dice-section-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--kis-text);
  margin: 0 0 0.5rem;
}

.dice-hint {
  font-size: 0.8rem;
  color: var(--kis-text-muted);
  margin: 0.5rem 0 0;
}

.dice-small {
  font-size: 0.85rem;
  padding: 0 1rem;
}

.dice-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.dice-field {
  display: grid;
  gap: 0.25rem;
  font-size: 0.85rem;
  color: var(--kis-text-muted);
}

.dice-field select,
.dice-field input {
  min-height: 44px;
  width: 100%;
  padding: 0 0.75rem;
  border: 1px solid var(--kis-border);
  border-radius: var(--kis-radius);
  background: var(--kis-surface);
  color: var(--kis-text);
  font: inherit;
  font-size: 1rem;
}

.dice-extras {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.dice-extra {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: end;
  gap: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .die-rolling {
    animation: none;
  }
}