.cast-mode-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 14px 0 22px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.cast-mode-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cast-mode-copy strong { font-size: 15px; color: var(--ink); }
.cast-mode-copy span { font-size: 12px; color: var(--muted); }

.cast-mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  padding: 3px;
  border-radius: 11px;
  background: var(--surface-2, #e7eeeb);
  flex: 0 0 auto;
}

.cast-mode-tabs button {
  min-height: 40px;
  padding: 0 15px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.cast-mode-tabs button.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 5px rgb(20 41 45 / 10%);
}

.dice-cast-stage {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  overflow: hidden;
  background: var(--surface);
}

.dice-stage-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2, #e7eeeb);
}

.dice-stage-heading > div { display: grid; gap: 2px; }
.dice-stage-heading strong { font-size: 18px; color: var(--ink); }
.dice-stage-heading div span { font-size: 12px; color: var(--muted); }

.secure-random-note {
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 999px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.dice-box {
  width: min(100% - 32px, 450px);
  margin: 18px auto 14px;
  padding: 6px;
  border: 2px solid #9f7d53;
  border-radius: 12px;
  background: #c8a778;
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 26%), 0 8px 24px rgb(38 31 21 / 9%);
}

.dice-slot {
  display: grid;
  grid-template-columns: 58px 74px minmax(88px, 1fr);
  align-items: center;
  min-height: 64px;
  padding: 5px 14px;
  border: 1px solid rgb(91 64 37 / 25%);
  background: #f5ead5;
  color: #24383d;
}

.dice-slot + .dice-slot { border-top: 0; }
.dice-slot:first-child { border-radius: 7px 7px 0 0; }
.dice-slot:last-child { border-radius: 0 0 7px 7px; }

.dice-line-label { color: #756650; font-size: 13px; }

.d8-die {
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  justify-self: center;
  clip-path: polygon(30% 3%, 70% 3%, 97% 30%, 97% 70%, 70% 97%, 30% 97%, 3% 70%, 3% 30%);
  background: #173137;
  color: #fffdf7;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 35%);
  transform: rotate(0deg);
}

.d8-die b { font-size: 22px; line-height: 1; }
.d8-die.yin-family { background: #aa3c34; }
.d8-die.is-empty { background: #d5c6ac; color: #8d7a60; }
.dice-outcome { justify-self: end; font-size: 14px; font-weight: 700; color: #293e43; }

.dice-cast-stage.is-rolling .d8-die {
  animation: d8-roll 410ms linear infinite;
}

@keyframes d8-roll {
  0% { transform: rotate(0deg) scale(.94); }
  50% { transform: rotate(180deg) scale(1.06); }
  100% { transform: rotate(360deg) scale(.94); }
}

.dice-rule {
  margin: 0;
  padding: 0 18px 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  text-align: center;
}

.dice-roll-button { margin-top: 16px; }

body.dark .dice-box { background: #7d6546; border-color: #b08d5b; }
body.dark .dice-slot { background: #26383a; color: #f0eee7; border-color: rgb(218 190 145 / 24%); }
body.dark .dice-line-label { color: #b9b0a2; }
body.dark .dice-outcome { color: #f0eee7; }

@media (max-width: 700px) {
  .cast-mode-switch {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin: 12px 0 18px;
    padding: 12px;
  }

  .cast-mode-copy { grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; }
  .cast-mode-tabs { width: 100%; }
  .cast-mode-tabs button { min-height: 44px; padding: 0 9px; }
  .dice-cast-stage { margin-top: 14px; }
  .dice-box { width: calc(100% - 24px); margin-top: 12px; }
  .dice-slot { grid-template-columns: 48px 66px minmax(80px, 1fr); min-height: 60px; padding: 4px 10px; }
  .d8-die { width: 46px; }
  .d8-die b { font-size: 20px; }
  .dice-outcome { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .dice-cast-stage.is-rolling .d8-die { animation: none; opacity: .62; }
}