/* Explanatory sequence using the host palette, not game artwork or oversized icons. */
.learning-figure { margin: 2rem 0; border-block: 2px solid var(--line); padding: 1.25rem 0; }
.learning-figure figcaption { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }
.learning-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; counter-reset: lesson; padding: 0; list-style: none; }
.learning-steps li { counter-increment: lesson; border-inline-start: 3px solid var(--link); padding: .75rem 1rem; background: var(--paper); min-width: 0; }
.learning-steps li::before { content: counter(lesson, decimal-leading-zero); display: block; color: var(--link); font-weight: 800; margin-bottom: .4rem; }
.learning-steps strong { display: block; font-size: 1.05rem; }
.learning-steps p { margin: .5rem 0 0; font-size: 1rem; line-height: 1.6; }
.learning-boundary { font-size: .95rem; color: var(--muted); margin-bottom: 0; }
.learning-table { margin: 1.5rem 0; }
.learning-table table { width: 100%; min-width: 0; table-layout: fixed; }
.learning-table caption { text-align: left; font-weight: 700; padding-bottom: .75rem; }
.learning-table th, .learning-table td { overflow-wrap: anywhere; font-size: 1rem; }
@media(max-width: 520px) { .learning-steps { grid-template-columns: 1fr; } .learning-table th, .learning-table td { padding: .65rem .4rem; } }