/* Rules: short explanations, labelled scoring diagrams and optional detail. */
.rules-guide { --rules-scoreline: var(--accent); --rules-chances: var(--text-info); --rules-questions: var(--text-warning); }
.rules-guide .rules__body { max-width: 60ch; margin-inline: auto; }
.rules-guide .rules-sec { padding-bottom: var(--space-7); }
.rules-guide .rules-sec + .rules-sec { padding-top: var(--space-7); }
.rules-guide[data-ready] .rules-sec { border-top: 0; padding-top: 0; }
.rules-tabs { position: sticky; top: var(--bar-h); z-index: var(--z-sticky); background: var(--surface-page); margin-bottom: var(--space-6); }
.rules-guide .rules-sec > h2 { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.rules-guide .rules-sec > h2 .ct-icon { color: var(--text-muted); }
.rules-guide h3 { font-size: var(--fs-body); }
.rules-steps { display: grid; gap: var(--space-5); margin-block: var(--space-5); }
.rules-steps li, .rules-lock, .rules-questions li, .rules-rating { display: flex; align-items: flex-start; gap: var(--space-4); }
.rules-steps h3, .rules-questions h3 { margin-bottom: var(--space-1); }
.rules-step { display: grid; place-items: center; flex: none; width: var(--tap-min); height: var(--tap-min); border-radius: var(--radius-pill); background: var(--surface-accent-soft); color: var(--text-accent); font: var(--type-h3); }
.rules-lock { padding: var(--space-4); margin-top: var(--space-5); border-radius: var(--radius-md); background: var(--surface-card); }
.rules-lock > .ct-icon { margin-top: var(--space-1); color: var(--text-accent); }
.rules-lock strong { display: block; margin-bottom: var(--space-1); }
.rules-guide .rules-note { color: var(--text-muted); margin-top: var(--space-4); }
.rules-more { margin-top: var(--space-3); border-bottom: 1px solid var(--border-faint); }
.rules-detail, .rules-more > .rules-list { padding-bottom: var(--space-4); }
.rules-detail > p + p { margin-top: var(--space-3); }
.rules-list { display: grid; gap: var(--space-3); list-style: disc; padding-left: var(--space-5); color: var(--text-body); line-height: var(--lh-copy); margin-top: var(--space-4); }
.rules-more .rules-list { margin-top: 0; }
.rules-score { margin-top: var(--space-5); }
.rules-score__bar, .rules-score__labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); }
.rules-score__bar { overflow: hidden; border-radius: var(--radius-md); }
.rules-score__bar span { text-align: center; padding: var(--space-2); font: var(--type-h3); color: var(--text-inverse); background: var(--rules-scoreline); }
.rules-score__bar span:nth-child(2) { background: var(--rules-chances); }
.rules-score__bar span:nth-child(3) { background: var(--rules-questions); }
.rules-score__labels { gap: var(--space-4); padding-top: var(--space-4); }
.rules-score__labels .meaning-icon { margin-bottom: var(--space-2); }
.rules-score__labels h3 { margin-bottom: var(--space-2); }
.rules-score__labels p { font-size: var(--fs-body); }
.rules-chances { margin-block: var(--space-4); }
.rules-chances figcaption { color: var(--text-muted); margin-bottom: var(--space-2); }
.rules-chances__bar { display: grid; grid-template-columns: 60fr 25fr 15fr; gap: var(--space-1); }
.rules-chances__bar span { padding: var(--space-3) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-raised); }
.rules-chances__bar span:first-child { background: var(--surface-accent-soft); color: var(--text-accent); }
.rules-chances__bar strong { display: block; font-family: var(--font-display); font-size: var(--fs-h3); }
.rules-questions { margin-top: var(--space-4); }
.rules-questions li { padding-block: var(--space-4); border-bottom: 1px solid var(--border-faint); }
.rules-questions .meaning-icon { flex: none; }
.rules-rating { align-items: center; padding-block: var(--space-4); margin-bottom: var(--space-3); }
.rules-rating .num { color: var(--text-accent); }
.rules-modes { width: 100%; border-collapse: collapse; margin-top: var(--space-5); text-align: left; }
.rules-modes caption { text-align: left; font: var(--type-h3); margin-bottom: var(--space-3); }
.rules-modes th, .rules-modes td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--border-faint); }
.rules-modes thead { color: var(--text-muted); font-size: var(--fs-label); }
.rules-modes tbody th { font-weight: var(--weight-regular); color: var(--text-body); }
.rules-modes td { white-space: nowrap; }
.rules-modes td .ct-icon { color: var(--text-accent); margin-right: var(--space-1); }
.rules-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin: var(--space-5) 0 0; }
.rules-pair > div { border-top: 2px solid var(--border-control); padding-top: var(--space-4); }
.rules-pair dt { display: flex; align-items: center; gap: var(--space-2); font: var(--type-h3); }
.rules-pair dd { margin: var(--space-3) 0 0; line-height: var(--lh-copy); color: var(--text-body); }
@media (max-width: 600px) {
  .rules-score__labels { gap: var(--space-2); }
  .rules-score__labels h3 { font-size: var(--fs-body); }
  .rules-pair { grid-template-columns: minmax(0, 1fr); }
}