/* One task, a clear response area, then feedback. Preserve each game's learning diagrams. */
.game-content.game-clarity{--clarity-line:var(--age-border,#bfd2b7);--clarity-ink:var(--age-ink,#174f40);color:var(--clarity-ink);width:100%;box-sizing:border-box}
.game-clarity>*{max-width:100%;min-width:0;box-sizing:border-box}
.game-clarity .question-controls{width:100%}
.game-clarity .question-controls h2{margin:8px 0 16px;text-wrap:pretty}
.game-clarity .clarity-question-tools{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px}
.game-clarity .clarity-question-tools button{flex:1 1 140px;min-width:0;margin:0;padding:10px 16px;border:1px solid var(--clarity-line);border-radius:14px;background:var(--age-paper,#fff);color:var(--clarity-ink);box-shadow:none;font-size:1rem;line-height:1.4}
.game-clarity>.question-controls:has(.clarity-question-tools){display:block}
.game-clarity :is(.clarity-optional,.clarity-tune-extras,.clarity-challenges,.optional-sketch){width:100%;box-sizing:border-box;margin:16px 0;border:1px solid var(--clarity-line);border-radius:14px;background:var(--age-paper,#fff);padding:0 16px;text-align:left}
.game-clarity :is(.clarity-optional,.clarity-tune-extras,.clarity-challenges,.optional-sketch)>summary{cursor:pointer;padding:16px 0;min-height:56px;font-size:1rem;font-weight:700;line-height:1.5;box-sizing:border-box}
.game-clarity :is(.clarity-optional,.clarity-tune-extras,.clarity-challenges,.optional-sketch)[open]{padding-bottom:16px}
.game-clarity .clarity-optional>.g2-teaching-panel{padding:0;margin:0;border:0;background:transparent}
.game-clarity .clarity-optional>.g2-teaching-panel>h3{display:none}
.game-clarity .clarity-challenges>div{margin:4px 0 0;justify-content:flex-start;gap:10px}
.game-clarity .clarity-challenges button{min-width:48px;border-radius:12px}
.game-clarity .clarity-long-answers{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:12px!important;width:100%;max-width:720px;margin-inline:auto}
.game-clarity .clarity-long-answers>button{display:flex;align-items:center;gap:14px;max-width:none!important;min-width:0;width:100%;height:auto;min-height:76px!important;padding:16px 18px!important;text-align:left;border-radius:14px!important;font-size:1.125rem;line-height:1.55;overflow-wrap:anywhere}
.game-clarity .clarity-long-answers>button>span:first-child:not(:only-child){flex-shrink:0}
.game-clarity .clarity-long-answers>button strong{font-size:inherit!important;line-height:inherit!important;font-weight:650}
.game-clarity .clarity-repeated,.game-clarity .feedback:empty{display:none}
.game-clarity .feedback:not(:empty):not(.clarity-repeated){height:auto;max-width:100%;min-height:0!important;padding:12px 16px;margin:16px 0!important;border-left:4px solid var(--age-accent,#236b51);border-radius:0 10px 10px 0;background:var(--age-paper,#fff);font-size:1rem!important;line-height:1.6!important;text-align:left;box-sizing:border-box}
.game-clarity :is(input,textarea,select){font-family:inherit;max-width:100%;box-sizing:border-box}
.game-clarity :is(textarea,input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color])){background:#fff;color:#213e37;border-color:#728e86}
.game-clarity textarea{line-height:1.7;resize:vertical}
.game-clarity button{white-space:normal;line-height:1.4}
.game-clarity .primary-button{box-shadow:none}
.game-clarity .secondary-button{background:var(--age-paper,#fff);box-shadow:none;border-width:1px}
.game-clarity .g2-art-versions{display:flex;flex-direction:column;gap:0}
.game-clarity .g2-art-versions>.kquest-art-paper{max-width:560px;align-self:center}
.game-clarity .g2-art-versions>.clarity-optional{margin-bottom:0}
.game-clarity .g2-writing-plan{align-items:end}
.game-clarity .g2-writing-plan label{margin-block:8px}
.game-clarity .g1-workspace{width:100%;box-sizing:border-box}
.game-clarity :is(.g1-writing-label,.g1-writing-label textarea){width:100%;box-sizing:border-box}
.game-clarity .g1-writing-label{text-align:left;line-height:1.6}
.game-clarity .g1-tools{gap:8px;align-items:center;margin:12px 0}
.game-clarity .g1-tools>span{flex-basis:100%;text-align:left;font-size:1rem;font-weight:700}
.game-clarity [data-g1-color]{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.game-clarity [data-g1-color]::before{content:'';width:16px;height:16px;flex:none;border-radius:50%;background:var(--tool-color);border:1px solid #0003}
.game-clarity :is([data-g1-color],[data-art-tool],[data-brush-width],[data-g1-note],[data-g1-rest]){border:2px solid var(--clarity-line);border-radius:12px;font-size:1rem;min-width:56px}
.game-clarity :is([data-g1-color],[data-art-tool],[data-brush-width])[aria-pressed=true]{outline:2px solid var(--clarity-ink);outline-offset:1px;box-shadow:inset 0 -4px 0 var(--clarity-ink);font-weight:800}
.game-clarity .g1-composition{overflow-wrap:anywhere;line-height:1.7}
.game-clarity .g1-step-list{gap:8px;counter-reset:none}
.game-clarity .g1-step-list li{padding:7px 12px;border-radius:8px;background:var(--age-paper,#fff);font-size:1rem}
.game-clarity .g1-step-list li[aria-current]{background:var(--age-accent,#236b51);color:white;text-decoration:none}
.game-clarity .g2-activity-info{font-size:.875rem;line-height:1.6;text-align:left;border-bottom:1px solid var(--clarity-line);padding-bottom:12px;margin-top:0}
.game-clarity .g1-creative-steps{background:transparent;border:0;border-top:1px solid var(--clarity-line);border-radius:0;padding:16px 0 0}
.game-clarity .g1-work-modes{margin-bottom:16px}
.game-clarity .g2-book-cards{margin:16px 0}
.game-clarity .activity-question-tools button{flex:0 1 180px;background:var(--age-paper,#fff);box-shadow:none}
.game-clarity :is(.kquest-story,.coach-reader,.g1-reading-passage){text-align:left;line-height:1.8}
.game-clarity.g2-content .coach-sentence{line-height:1.8}
.game-clarity .creation-save{margin-top:20px;border:1px solid var(--clarity-line);background:var(--age-paper,#fff);border-radius:14px;padding:12px 16px}
.game-clarity .creation-save>summary{min-height:56px;padding:4px 0;cursor:pointer;font-size:1.125rem;font-weight:750;line-height:1.5}
.game-clarity .creation-save[open]>summary{margin-bottom:14px}
.game-clarity .creation-save [data-save-status],.game-clarity [data-recovery-summary]{font-size:.875rem;font-weight:500;line-height:1.6}
.game-clarity [data-recovery-summary]:empty{display:none}
.game-clarity [data-recovery-summary]{display:block;color:var(--clarity-ink)}
/* Long instructions are easier to follow as a reading column. Diagrams retain their geometry. */
body:not([data-age-band=play]) .game-clarity :is(.question-controls h2,.kquest-stage>p,.g1-work-note,.g1-private-note,.reading-task>p,.science-skill-prompt,.world-prompt,.music-mission,.art-skill-mission){text-align:left}
@media(max-width:720px){
 .game-clarity .activity-question-tools button{flex:1;font-size:1rem;min-height:56px!important}
 .game-clarity .g2-writing-plan{grid-template-columns:1fr}
 .game-clarity .clarity-long-answers>button{padding:14px!important;font-size:1rem}
 .game-clarity :is(.clarity-optional,.clarity-tune-extras,.clarity-challenges,.optional-sketch){padding-inline:12px}
 .game-clarity .g1-tools>span{grid-column:1/-1}
 .game-clarity .g2-art-versions>.kquest-art-paper{width:100%;max-width:100%}
 .game-clarity :is(.g2-mini-lab,.ratio-table-wrap){max-width:100%;overflow-x:auto}
 .game-clarity :is(.g5-coordinate-controls,.g4-form-grid){min-width:0}
 .game-clarity :is(.g4-form-grid input,.g4-form-grid select){min-width:0;width:100%}
 .game-clarity .g1-composition{font-size:1.375rem}
 .game-clarity :is(.world-timeline p,.world-map-place strong){font-size:.875rem}
}
@media(prefers-reduced-motion:reduce){.game-clarity *{scroll-behavior:auto}}
.game-clarity .g2-book-cards article{text-align:left}

/* Keep phone navigation within one row so the question and answers have room. */
@media(max-width:720px){
 body[data-view=play] .site-header .header-right{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px;width:100%}
 body[data-view=play] .site-header .header-right:has(#games-button[hidden]){grid-template-columns:repeat(3,minmax(0,1fr))!important}
 body[data-view=play] .site-header .header-right button{min-width:0;min-height:56px;padding:8px 4px;font-size:13px;line-height:1.35;white-space:normal}
 body[data-view=play] .site-header{min-height:72px;padding:8px 12px}
}
@media(max-width:360px){
 body[data-view=play] .page-heading h1{font-size:20px;line-height:1.25}
 body[data-subject=reading][data-view=play] .game-content:not(.activity-focused) .clarity-question-tools{margin-bottom:0}
 body[data-subject=reading][data-view=play] .game-content:not(.activity-focused) .question-controls{gap:6px}
 body[data-subject=reading][data-view=play] .game-content:not(.activity-focused) .question-controls h2{margin:4px 0 8px}
 body[data-subject=reading][data-view=play] .game-content:not(.activity-focused) .question-hint{margin:8px 0 12px}
 body[data-subject=reading][data-view=play] .game-content:not(.activity-focused) .choices>button{min-height:96px;height:96px}
}