.card {
  padding: var(--space-6);
  background: var(--color-bg-panel);
  border: 1px solid var(--color-border-accent);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

.brand {
  margin-bottom: var(--space-6);
  text-align: center;
}

.brand__title {
  font-size: var(--size-3xl);
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.tabs__button,
.button,
.die-button,
.stepper__button,
.toggle-button {
  color: var(--color-parchment);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  box-shadow: inset 0 1px 0 rgba(240, 184, 64, 0.14);
}

.tabs__button:hover,
.button:hover,
.die-button:hover,
.stepper__button:hover,
.toggle-button:hover,
.tabs__button:focus-visible,
.button:focus-visible,
.die-button:focus-visible,
.stepper__button:focus-visible,
.toggle-button:focus-visible {
  color: var(--color-gold-bright);
  border-color: var(--color-gold);
  outline: 2px solid transparent;
}

.tabs__button--active,
.die-button--active,
.toggle-button--active {
  color: var(--color-gold-bright);
  border-color: var(--color-gold-bright);
  transform: translateY(-1px);
}

.form {
  display: none;
  gap: var(--space-3);
}

.form--active {
  display: grid;
}

.field {
  display: grid;
  gap: var(--space-1);
}

.field__label {
  color: var(--color-parchment-dim);
  font-size: var(--size-sm);
}

.field__input {
  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  color: var(--color-parchment);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}

.button {
  min-height: 48px;
  padding: var(--space-2) var(--space-4);
  color: var(--color-ink);
  font-family: var(--font-display);
  background: var(--color-gold);
  border-color: var(--color-gold-bright);
}

.button--ghost {
  color: var(--color-parchment);
  background: var(--color-bg-surface);
}

.status {
  min-height: 1.5rem;
  margin-top: var(--space-4);
  color: var(--color-gold-bright);
}

.status--error {
  color: #ffb0a0;
}

.dice-tray {
  display: grid;
  gap: var(--space-4);
}

.dice-tray__selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: var(--space-2);
}

.die-button {
  min-height: 54px;
  font-family: var(--font-display);
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.stepper__control {
  display: inline-grid;
  grid-template-columns: 44px minmax(54px, 1fr) 44px;
  align-items: center;
  text-align: center;
}

.stepper__value {
  min-height: 44px;
  padding: var(--space-2);
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--size-xl);
}

.advantage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.toggle-button.is-disabled {
  color: var(--color-silver);
  opacity: 0.55;
  pointer-events: none;
}

.dice-stage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  min-height: 90px;
}

.dice-stage__face {
  width: 76px;
  height: 76px;
}

.result-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}

.result-card__final {
  color: var(--color-gold-bright);
  font-family: var(--font-mono);
  font-size: var(--size-3xl);
  animation: pulse-gold 700ms ease-out;
}

.roll-log {
  display: grid;
  gap: var(--space-3);
  max-height: 66vh;
  overflow: auto;
}

.roll-entry {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
}

.roll-entry--hidden {
  border-color: var(--color-crimson);
}

.roll-entry--revealed {
  border-color: var(--color-emerald);
}

.roll-entry__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--color-parchment-dim);
  font-size: var(--size-sm);
}

.roll-entry__footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.roll-entry__result {
  color: var(--color-gold-bright);
  font-family: var(--font-mono);
  font-size: var(--size-2xl);
}

.badge {
  margin-left: auto;
}

.roll-entry__action {
  min-height: 32px;
  padding: var(--space-1) var(--space-2);
  font-size: var(--size-xs);
  margin-left: auto;
}

.badge {
  width: max-content;
  padding: var(--space-1) var(--space-2);
  color: var(--color-parchment);
  background: var(--color-emerald);
  font-size: var(--size-xs);
}

.player-list {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}

.player-list__item {
  color: var(--color-parchment);
}

.player-list__item--self {
  font-weight: 700;
}

.player-list__item--offline {
  color: var(--color-silver);
}

.ornament {
  height: 1px;
  margin: var(--space-2) 0;
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
  border: 0;
}