.yz-wrap { display: flex; flex-direction: column; gap: 14px; width: min(560px, 100%); }

.yz-dice-row { display: flex; gap: 10px; justify-content: center; }

.yz-die {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: var(--color-text);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  font-weight: 800;
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform 0.12s ease, border-color 0.12s ease;
}

.yz-die:disabled { cursor: default; opacity: 0.7; }
.yz-die.yz-held { border-color: var(--color-primary); transform: translateY(-4px); }
.yz-die[data-anim="roll"] { animation: yz-shake 0.35s ease; }

@keyframes yz-shake {
  0%,100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

.yz-roll-btn { align-self: center; }

.yz-scorecards { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.yz-card { flex: 1; min-width: 220px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 8px; }
.yz-card h5 { margin: 0 0 6px; font-size: 0.85rem; color: var(--color-text-soft); }

.yz-cat-row {
  display: flex;
  justify-content: space-between;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: default;
}

.yz-cat-row.yz-open.yz-active-pick { cursor: pointer; }
.yz-cat-row.yz-open.yz-active-pick:hover { background: var(--color-surface-hover); }
.yz-cat-row.yz-filled { color: var(--color-text-soft); }
.yz-cat-row .yz-preview { color: var(--color-primary); font-weight: 700; }
.yz-cat-row.yz-bonus { border-top: 1px dashed var(--color-border); margin-top: 4px; padding-top: 6px; font-weight: 700; }