/* Play a Christmas fill-in-the-blank story online (public/stories.js). Uses the tokens in style.css. */
.fs { margin: var(--section) 0 0; }
.fs-list { list-style: none; padding: 0; margin: var(--s4) 0 0; display: grid; gap: var(--s3); }
@media (min-width: 900px) { .fs-list { grid-template-columns: 1fr 1fr; column-gap: var(--s5); } }
.fs-list li { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--blue-soft); }
.fs-n { font-weight: 800; }
.fs-hint { display: block; font-size: .92em; color: var(--muted, #555); }
.fs-list input { width: 100%; min-height: 44px; font: 600 var(--t-lg) / 1.2 var(--font); padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; color: var(--ink); }
.fs-list input:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.fs-list input[aria-invalid="true"] { border-color: #b3261e; background: #fff4f2; }
.fs-btns { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0; }
.fs-status { min-height: 1.6em; margin: var(--s2) 0 0; }
.fs-story { scroll-margin-top: 80px; padding: var(--s4); border-radius: 16px; background: #fffaf0; border: 2px solid var(--ink); }
.fs-story:focus { outline: 3px solid var(--focus); outline-offset: 3px; }
.fs-text { font-size: var(--t-lg); line-height: 1.7; }
.fs-w { padding: 0 .3em; border-radius: 6px; background: #ffe08a; color: var(--ink); }
.fs-example { line-height: 1.7; }
@media print { .fs { display: none; } }