/* Fill the Story — the paragraph is the page. */
.dxg .fs {
	position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: clamp(8px, 1.6vh, 14px); padding: clamp(8px, 1.6vh, 18px) clamp(10px, 3vw, 32px); overflow-y: auto;
}
.fs-top { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: center; }
.fs-skill { font-family: var(--g-head); font-size: 0.85rem; padding: 3px 12px; border-radius: 999px; background: #DDF2F0; color: #0E4A49; }
.fs-count { font-family: var(--g-head); font-size: 1rem; color: var(--g-navy); font-variant-numeric: tabular-nums; }

.fs-card {
	width: min(100%, 780px); background: #fff; border: 2px solid var(--g-border); border-radius: 22px;
	padding: clamp(14px, 2.4vh, 26px) clamp(16px, 3vw, 34px); box-shadow: 0 4px 14px rgba(28, 43, 61, .06);
}
.fs-read { margin: 0 0 6px; font-family: var(--g-head); font-weight: 600; font-size: 1.05rem; color: var(--g-aqua-dark); }
.fs-title { margin: 0 0 8px; font-family: var(--g-head); font-weight: 600; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.6rem); color: var(--g-blue); }
.fs-text {
	margin: 0; font-family: var(--g-body); font-size: clamp(1.35rem, 1.1rem + .9vw, 1.8rem); line-height: 2.15;
	color: var(--g-navy); overflow-wrap: break-word;
}
/* A blank sits inline and grows with its word, so lines reflow instead of overflowing */
.fs-blank {
	display: inline-flex; align-items: center; justify-content: center; vertical-align: baseline;
	min-width: 4.6em; height: 1.55em; margin: 0 .12em; padding: 0 .35em;
	border: 0; border-bottom: 3px solid #86A6AA; border-radius: 8px 8px 2px 2px; background: #F3F8F8;
	font: inherit; font-weight: 700; color: var(--g-navy); cursor: pointer; line-height: 1; touch-action: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.fs-blank:hover:not(:disabled) { background: #E2F5F3; }
.fs-blank:focus-visible { outline: 3px solid var(--g-blue); outline-offset: 2px; }
.fs-blank.is-filled { background: #FFFDF5; border-bottom-color: #E0C052; }
.fs-blank.is-selected { outline: 3px solid var(--g-blue); outline-offset: 2px; background: #EDF3FA; }
.fs-blank.is-over { background: #E2F5F3; border-bottom-color: var(--g-aqua); }
.fs-blank.is-dragging { opacity: .45; }
/* Checked: correct words stay quiet (thin aqua underline + small tick); others ask for another look */
.fs-blank.is-right { background: transparent; border-bottom-color: var(--g-aqua); cursor: default; color: var(--g-navy); }
.fs-blank.is-right::after { content: "✓"; font-family: var(--g-body); font-size: .5em; color: var(--g-aqua-dark); margin-left: .2em; vertical-align: super; }
.fs-blank.needs-look { background: #FFF6F4; border: 2px dashed #E08B7A; border-bottom-width: 3px; animation: dxg-wiggle .38s ease-in-out; }
/* Finished story: blanks become ordinary words for a clean reread */
.fs-card.is-done { border-color: #7CCBC4; background: #FBFEFE; }
.fs-card.is-done .fs-blank { background: transparent; border-bottom: 2px solid #9FD6D0; border-radius: 0; min-width: 0; padding: 0; margin: 0; height: auto; }
.fs-card.is-done .fs-blank::after { display: none; }

.fs-bankwrap { width: min(100%, 780px); padding: 8px 12px 12px; border-radius: 18px; background: var(--g-light); border: 2px dashed #C9D6D8; }
.fs-bank__label { margin: 0 0 6px; font-family: var(--g-head); font-weight: 500; font-size: .9rem; color: var(--g-muted); text-align: center; }
.fs-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; min-height: 52px; }
.fs-word {
	min-height: 50px; min-width: 76px; padding: 0 18px; margin: 0; cursor: grab; touch-action: none;
	border-radius: 14px; border: 2px solid #B9C8CA; border-bottom-width: 4px; background: #fff;
	font-family: var(--g-body); font-weight: 700; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.55rem); color: var(--g-navy);
	transition: transform .1s ease, border-color .15s ease;
}
.fs-word:hover { transform: translateY(-2px); border-color: var(--g-aqua); }
.fs-word:focus-visible { outline: 3px solid var(--g-blue); outline-offset: 3px; }
.fs-word.is-selected { border-color: var(--g-blue); background: #EDF3FA; transform: translateY(-2px); }
.fs-word.is-dragging { opacity: .4; }
.fs-ghost {
	position: fixed; z-index: 9999; transform: translate(-50%, -60%); pointer-events: none; padding: 8px 16px; border-radius: 12px;
	background: #fff; border: 2px solid var(--g-aqua); box-shadow: 0 12px 24px rgba(28, 43, 61, .25);
	font-family: var(--dx-font-body, "Atkinson Hyperlegible", sans-serif); font-weight: 700; font-size: 1.4rem; color: #1C2B3D;
}
.fs-actions { display: flex; gap: 10px; justify-content: center; }
.fs-check, .fs-next { min-width: 220px; min-height: 52px; font-size: 1.15rem; }
.fs-check:disabled { opacity: .45; cursor: default; }
.fs-msg { margin: 0; min-height: 1.5em; font-family: var(--g-head); font-weight: 500; color: var(--g-blue); text-align: center; }
@media (max-width: 599px) {
	.dxg .fs { gap: 8px; padding: 8px; justify-content: flex-start; }
	.fs-card { padding: 12px 14px; border-radius: 16px; }
	.fs-text { font-size: 1.2rem; line-height: 2.05; }
	.fs-skill { display: none; }
	.fs-word { min-height: 44px; min-width: 64px; padding: 0 12px; font-size: 1.15rem; }
	.fs-check, .fs-next { min-width: 0; width: 100%; }
}
/* Short screens (small Chromebook windows): keep story + bank + button on one screen */
@media (max-height: 700px) {
	.dxg .fs { gap: 6px; padding-top: 6px; padding-bottom: 6px; }
	.fs-card { padding: 10px 22px; }
	.fs-title { margin-bottom: 2px; font-size: 1.2rem; }
	.fs-text { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.55rem); line-height: 1.95; }
	.fs-bankwrap { padding: 4px 10px 8px; }
	.fs-bank__label { margin-bottom: 2px; font-size: .8rem; }
	.fs-word { min-height: 44px; }
	.fs-check, .fs-next { min-height: 46px; }
	.fs-skill { display: none; }
}
@media (max-width: 599px) and (max-height: 700px) {
	.fs-text { font-size: 1.1rem; line-height: 1.9; }
	.fs-title { font-size: 1.05rem; }
	.fs-bank { gap: 6px; }
	.fs-word { min-height: 42px; font-size: 1.05rem; }
}