/* Child-facing category selection. Existing answer cards retain their geometry. */
.word-flow-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.word-flow-heading h1,.word-flow-heading h2 { margin:0; font-size:clamp(22px,3vw,30px); }
.word-flow-heading button,.word-mode-switch button,.word-pager button { min-width:56px; min-height:56px; }
.word-category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.word-category-card,.word-learn-card { border:2px solid #dce6df; border-radius:20px; background:#fffdfa; color:var(--ink,#254840); font:inherit; font-weight:750; cursor:pointer; min-width:56px; min-height:56px; padding:10px; display:flex; align-items:center; flex-direction:column; justify-content:center; gap:5px; }
.word-category-card img { width:100%; height:clamp(76px,calc((var(--available-height,800px) - 380px) / 4),126px); object-fit:contain; }
.word-category-card span { font-size:clamp(16px,2.1vw,21px); line-height:1.2; }
.word-category-card:active,.word-learn-card:active { background:#e7f0e4; }
.word-mode-switch { display:flex; gap:8px; margin:8px 0 12px; }
.word-mode-switch button { flex:1; }
.word-mode-switch [aria-pressed="true"] { background:#dcefe1; border-color:#63a078; }
.word-learn-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.word-learn-card img { width:100%; height:clamp(90px,calc((var(--available-height,800px) - 345px) / 2.8),160px); object-fit:contain; }
.word-learn-card span { font-size:21px; }
.word-pager { display:flex; justify-content:center; align-items:center; gap:12px; margin-top:10px; }
.word-continue { display:flex; align-items:center; gap:10px; margin:10px 0; }
.word-continue img { width:56px; height:56px; object-fit:contain; }
.word-flow-note { margin:6px 0 10px; }
#word-flow:empty { display:none; }
.density-compact #word-flow[data-screen="play"] { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.density-compact #word-flow[data-screen="play"] .word-flow-heading { flex:1; flex-wrap:nowrap; margin:0; justify-content:flex-start; }
.density-compact #word-flow[data-screen="play"] h2 { font-size:19px; line-height:1.15; }
.density-compact #word-flow[data-screen="play"] .word-mode-switch { flex:none; margin:0; }
.density-compact #word-flow[data-screen="play"] .word-mode-switch button { flex:none; padding:8px 12px; }
.density-compact #word-play .intro-row { display:none; }
.density-compact #word-play .answer-card img { height:clamp(94px,calc(var(--available-height,800px) - 475px),205px); max-height:clamp(94px,calc(var(--available-height,800px) - 475px),205px); }
.density-compact #word-play .answer-cards[data-count="4"] .answer-card img { height:clamp(72px,calc((var(--available-height,800px) - 540px) / 2),130px); max-height:130px; }
.density-compact.compact-height #word-play .answer-cards[data-count="4"] .answer-card img { height:clamp(94px,calc(var(--available-height,800px) - 475px),205px); max-height:205px; }
@media (min-width:900px) {
  .word-category-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .word-learn-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .word-category-card img { height:clamp(72px,calc((var(--available-height,700px) - 340px) / 2.6),118px); }
}
@media (max-width:520px) { .word-category-grid,.word-learn-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .density-compact #word-flow[data-screen="play"] { flex-wrap:wrap; } }
/* The normal setting also sheds decoration when browser chrome leaves little height. */
.short-height #word-flow[data-screen="play"]{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.short-height #word-flow[data-screen="play"] .word-flow-heading{flex:1;flex-wrap:nowrap;margin:0;justify-content:flex-start}
.short-height #word-flow[data-screen="play"] h2{font-size:19px;line-height:1.15}
.short-height #word-flow[data-screen="play"] .word-mode-switch{flex:none;margin:0}
.short-height #word-flow[data-screen="play"] .word-mode-switch button{flex:none;padding:8px 12px}
.short-height #word-play .intro-row{display:none}
.short-height #word-play h1{font-size:32px;letter-spacing:-.5px}
.short-height #word-play .word-actions{margin-bottom:7px}
.short-height #word-play .answer-card{padding:8px;gap:4px}
.short-height #word-play .word-label{font-size:24px}
.short-height #word-play .feedback{min-height:36px;font-size:22px}
.short-height #word-play .journey{height:20px}
.short-height.compact-height #word-play .word-actions{display:none}
.question-row h1{flex:1;min-width:0}
.question-row button{flex-shrink:0}
@media(max-width:540px){.question-row{flex-wrap:wrap}.question-row h1{flex-basis:100%}}
@media(max-width:540px){.short-height #word-flow[data-screen="play"]{flex-wrap:wrap}}