/* Touch and keyboard activities share the lesson's existing visual language. */
.lesson-content--reading .lesson-table { table-layout: fixed; }
.lesson-content--reading .lesson-table__header,
.lesson-content--reading .lesson-table__cell { padding: .75rem; text-align: left; font-size: 1.05rem; line-height: 1.55; overflow-wrap: anywhere; }
.lesson-content--reading .lesson-table__cell { font-weight: var(--font-normal); }
.lesson-content--reading .direction-card { background: var(--color-bg-white); color: var(--color-text-primary); }
.lesson-content--reading .direction-card h3,
.lesson-content--reading .direction-card p { color: var(--color-text-primary); }
.lesson-content--reading .alert p strong { display: inline; }
.lesson-content--reading .alert > strong ~ strong { display: inline; font-size: inherit; margin: 0; }
.lesson-content--reading .sort-game__items li::before { content: none; }
.sort-game { margin-block: 1.5rem; padding: 1.25rem; border: 1px solid var(--color-border-light); border-radius: 16px; background: var(--color-bg-slate-light); }
.sort-game__bins { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1rem; }
.sort-game__bins button { min-height: 48px; padding: .65rem 1rem; font: inherit; font-weight: 600; border: 2px solid #476e8e; border-radius: 12px; background: var(--color-bg-white); color: #23445e; cursor: pointer; }
.sort-game__items { display: flex; flex-wrap: wrap; gap: .65rem; padding: 0; margin: 1rem 0; list-style: none; }
.sort-game__items li { min-height: 48px; padding: .7rem 1rem; border: 2px solid var(--color-border-medium); border-radius: 12px; background: var(--color-bg-white); overflow-wrap: anywhere; }
.sort-game--ready .sort-game__items li { cursor: pointer; }
.sort-game--ready .sort-game__fallback { display: none; }
.sort-game__items li[hidden], .sort-game__reset[hidden] { display: none; }
.sort-game__items .sort-game__item--selected { border-color: #2d638d; background: #e5f2ff; }
.sort-game__bins button:focus-visible, .sort-game__items li:focus-visible, .sort-game__reset:focus-visible, details.lesson-example > summary:focus-visible { outline: 3px solid #17699b; outline-offset: 3px; }
.sort-game__feedback { min-height: 3em; line-height: 1.6; overflow-wrap: anywhere; }
.sort-game__status { font-weight: 600; }
.sort-game__results { padding-left: 1.4rem; line-height: 1.7; }
.lesson-gallery { display: flex; gap: 1rem; overflow-x: auto; max-width: 100%; padding-bottom: 1rem; scroll-snap-type: x proximity; }
.lesson-gallery > figure { flex: 0 0 min(85%, 420px); margin: 0; scroll-snap-align: start; }
.lesson-gallery img { width: 100%; height: 260px; object-fit: cover; border-radius: 12px; }
.lesson-gallery figcaption { padding-top: .65rem; line-height: 1.5; }
details.lesson-example > summary { min-height: 44px; padding-block: .6rem; font-weight: 600; cursor: pointer; }
@media (max-width: 600px) { .sort-game { padding: 1rem; } .lesson-gallery img { height: 220px; } }