/* Learning surfaces inherit the night study; one large task leads each page. */
.learning-page { --accent:var(--cyan); --game-ground:#0c1124; }
.learning-page .game-button { box-shadow:none; min-height:44px; }
.learning-main { max-width:960px; }
.learning-stage { background:var(--game-ground); border:1px solid #514d70; padding:24px; min-width:0; }
.learning-heading { margin:20px 0 16px; }
.learning-heading h1 { font-size:clamp(1.55rem,3.5vw,2rem); margin-bottom:6px; text-wrap:balance; }
.learning-heading p { margin-bottom:0; max-width:65ch; }
.learning-settings { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:0; border:0; }
.learning-settings legend { float:left; padding:0; margin-right:8px; color:var(--muted); font-size:.875rem; }
.learning-settings .game-button { padding:6px 12px; font-size:.875rem; }
.learning-settings [aria-pressed=true] { background:#393044; color:var(--amber); border-color:var(--amber); }
.learning-board { min-width:0; }
.learning-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.learning-status { min-height:1.7em; color:var(--cyan); margin:12px 0 0; font-size:.9375rem; }
.learning-parent { display:grid; grid-template-columns:74px 1fr; gap:8px 16px; align-items:center; margin:24px 0 0; }
.learning-parent h2 { font-size:1rem; margin:0; }
.learning-parent p { margin:0; font-size:.875rem; max-width:70ch; }
.learning-parent .back-link { grid-column:2; }
.learning-kaka { grid-row:1 / 8; display:block; width:74px; height:80px; background:url('../assets/optimized/kaka.webp?v=40287c3f48') no-repeat 0 0 / 592px auto; image-rendering:pixelated; }
.learning-parent > :not(.learning-kaka) { grid-column:2; }
.learning-parent details { color:var(--muted); font-size:.875rem; }
.learning-parent summary { cursor:pointer; min-height:44px; display:flex; align-items:center; }
.learning-parent details p { margin-block:8px; }
.learning-setting-options,.learning-switch { display:flex; gap:8px; flex-wrap:wrap; }
.learning-count { font-size:.875rem; margin:0; margin-left:auto; }
.learning-actions .game-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; }
.learning-actions svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.answer-button.is-correct:disabled,.word-choice[data-state=correct]:disabled { opacity:1; }
.word-choice[data-state=correct] { background:#1c4545; border-color:var(--cyan); }
.word-choice[data-state=retry],.word-choice[data-hint=true] { border-color:var(--amber); }
.word-choice[data-hint=true] { color:var(--amber); }
.word-figure { margin:0 0 16px; text-align:center; }
.word-figure figcaption { color:var(--muted); font-size:.875rem; }
.keyboard-prompt p { margin:0 0 4px; color:var(--text); }
.keyboard-prompt span { font-size:.875rem; color:var(--muted); }
.keyboard-map-note { margin:8px 0 0; text-align:center; font-size:.8125rem; }
.keyboard-hint-label { display:block; color:var(--amber); font-size:.75rem; }
.keyboard-hint-label[hidden] { display:none; }
.keyboard-key-legend { display:block; color:var(--muted); font-size:.6875rem; }
.keyboard-key svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; vertical-align:middle; }
.keyboard-key:has(svg) { width:80px; font-size:.8125rem; }
.keyboard-arrow-track { position:relative; width:76px; height:76px; margin:auto; background:#161d35; }
.keyboard-arrow-track[hidden] { display:none; }
.keyboard-cursor { position:absolute; width:22px; height:22px; left:calc(var(--cursor-x) * 25px); top:calc(var(--cursor-y) * 25px); background:var(--amber); }
.learning-answers { display:flex; justify-content:center; gap:12px; margin:16px auto 0; max-width:540px; }
.answer-button { flex:1; max-width:120px; min-height:76px; border:1px solid #777493; background:#1d2137; color:var(--text); font-size:2rem; box-shadow:none; }
.answer-button.is-correct,.word-option.is-correct .word-choice { background:#1c4545; border-color:var(--cyan); }
.answer-button.is-retry,.word-option.is-retry .word-choice { border-color:var(--amber); }
.addition-equation { display:flex; align-items:center; justify-content:center; gap:20px; }
.addition-plate { flex:1; max-width:310px; text-align:center; }
.addition-plate-label { color:var(--muted); font-size:.875rem; }
.addition-objects { min-height:130px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; background:#161d35; padding:16px; border-bottom:2px solid #777493; }
.count-ball { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--ball-color,var(--amber)); color:#090b19; font-weight:600; }
.count-ball[data-counted=true] { outline:2px solid var(--text); outline-offset:3px; }
.addition-number { display:block; font-size:1.8rem; color:var(--text); margin-top:4px; }
.addition-symbol { color:var(--amber); font-size:2.5rem; }
.addition-empty { color:var(--muted); font-size:.875rem; }
.addition-total { text-align:center; color:var(--text); font-size:clamp(1.7rem,4vw,2.2rem); margin:10px 0; }
.learning-picture { display:block; background-image:url('../assets/optimized/learning-objects.webp?v=38543a3ed5'); background-repeat:no-repeat; background-size:400% 400%; aspect-ratio:1; }
.learning-picture[data-word=apple]{background-position:0% 0%}.learning-picture[data-word=banana]{background-position:33.333333% 0%}.learning-picture[data-word=ball]{background-position:66.666667% 0%}.learning-picture[data-word=book]{background-position:100% 0%}
.learning-picture[data-word=cat]{background-position:0% 33.333333%}.learning-picture[data-word=dog]{background-position:33.333333% 33.333333%}.learning-picture[data-word=fish]{background-position:66.666667% 33.333333%}.learning-picture[data-word=bird]{background-position:100% 33.333333%}
.learning-picture[data-word=car]{background-position:0% 66.666667%}.learning-picture[data-word=bus]{background-position:33.333333% 66.666667%}.learning-picture[data-word=cup]{background-position:66.666667% 66.666667%}.learning-picture[data-word=flower]{background-position:100% 66.666667%}
.learning-picture[data-word=sun]{background-position:0% 100%}.learning-picture[data-word=moon]{background-position:33.333333% 100%}.learning-picture[data-word=star]{background-position:66.666667% 100%}.learning-picture[data-word=orange]{background-position:100% 100%}
.word-picture { width:min(245px,58vw); margin:0 auto 12px; }
.word-options { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; max-width:700px; margin:auto; }
.word-options:has(> :nth-child(3):last-child) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.word-option { min-width:0; display:grid; grid-template-columns:1fr; gap:6px; }
.word-choice { min-height:66px; border:1px solid #777493; background:#1d2137; color:var(--text); font-size:1.4rem; }
.word-listen { display:flex; align-items:center; justify-content:center; gap:6px; min-height:44px; border:0; background:transparent; color:var(--muted); font-size:.8125rem; }
.word-listen svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.keyboard-target { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:20px; margin-bottom:16px; }
.target-key { min-width:90px; min-height:84px; display:grid; place-items:center; background:#393044; border:1px solid var(--amber); color:var(--amber); font-size:2.3rem; padding:8px 20px; }
.keyboard-prompt { font-size:1.1rem; color:var(--text); margin:0; }
.keyboard-practice { min-width:0; }
.keyboard-demo { min-height:52px; color:var(--cyan); text-align:center; margin:8px 0; }
.keyboard-demo-text { white-space:pre-wrap; }
.keyboard-map { max-width:730px; margin:auto; padding:8px 0; overflow-x:auto; }
.keyboard-row { display:flex; justify-content:center; gap:5px; min-width:510px; margin-bottom:5px; }
.keyboard-key { width:46px; min-width:44px; min-height:44px; padding:4px; border:1px solid #777493; background:#1d2137; color:var(--text); font-size:1rem; }
.keyboard-key[data-key=Space] { width:180px; }
.keyboard-key[data-key=Enter],.keyboard-key[data-key=Backspace] { width:85px; font-size:.8125rem; }
.keyboard-key.is-hint { border-color:var(--amber); color:var(--amber); background:#393044; }
.keyboard-key.is-hit { background:#1c4545; border-color:var(--cyan); }
.keyboard-arrow-track { display:flex; justify-content:center; gap:8px; }
.keyboard-cursor { color:var(--amber); }
.mouse-field { height:300px; position:relative; overflow:hidden; background:#161d35; }
.mouse-ball { position:absolute; z-index:2; width:68px; height:68px; border:3px solid var(--text); border-radius:50%; background:var(--amber); color:#090b19; touch-action:none; display:grid; place-items:center; font-size:1rem; font-weight:600; }
.mouse-ball svg { width:26px; height:26px; stroke:currentColor; stroke-width:2; fill:none; }
.mouse-ball[aria-pressed=true] { outline:3px solid var(--cyan); outline-offset:4px; }
.mouse-destination { position:absolute; bottom:22px; right:22px; width:120px; min-height:100px; border:2px dashed var(--cyan); color:var(--text); background:#1c303e; font-size:1rem; }
.mouse-destination.is-complete { border-style:solid; background:#1c4545; }
.mouse-destination[hidden] { display:none; }
.mouse-counter { margin:10px 0; font-size:.875rem; }
.mouse-guide { color:var(--muted); font-size:.875rem; margin:0 0 12px; }
.learning-shelf { margin-top:40px; }
.learning-shelf h2 { margin-bottom:8px; }
.learning-shelf > p { max-width:65ch; }
.learning-links { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; border-top:1px solid var(--line); }
.learning-link { display:grid; grid-template-columns:118px 1fr; gap:20px; align-items:center; padding:22px 0; border-bottom:1px solid var(--line); }
.learning-link h3 { margin:0 0 6px; color:var(--text); }
.learning-link p { font-size:.875rem; margin:0 0 6px; }
.learning-link .card-link { color:var(--amber); font-size:.875rem; }
.learning-preview { min-height:110px; display:flex; gap:7px; align-items:center; justify-content:center; background:#161d35; color:var(--amber); font-size:1.7rem; }
.learning-preview .learning-picture { width:100px; }
.learning-preview.keyboard-preview { display:grid; grid-template-columns:repeat(3,29px); gap:4px; align-content:center; font-size:1rem; }
.keyboard-preview span { display:grid; place-items:center; height:30px; background:#393044; color:var(--text); }
.learning-preview svg { width:58px; height:58px; stroke:var(--cyan); fill:none; stroke-width:2; }
.learning-stage.is-immersive { max-width:none; }
.learning-stage.is-immersive .learning-heading { margin-top:12px; }
.learning-stage.is-immersive .learning-heading h1 { display:none; }
.learning-stage.is-immersive .learning-board { width:min(100%,900px); margin-inline:auto; }
.learning-stage.is-immersive .learning-actions,.learning-stage.is-immersive .learning-status,.learning-stage.is-immersive .learning-settings { max-width:900px; margin-inline:auto; }
@media(max-width:600px) {
  .learning-stage { padding:16px 12px; }
  .learning-heading { margin-top:16px; }
  .learning-heading p { font-size:.9375rem; }
  .learning-settings { margin-bottom:16px; gap:6px; }
  .learning-settings legend { width:100%; margin-bottom:6px; }
  .addition-equation { gap:10px; }
  .addition-objects { min-height:120px; padding:12px 8px; gap:8px; }
  .count-ball { width:30px; height:30px; }
  .addition-symbol { font-size:2rem; }
  .learning-answers { gap:8px; }
  .answer-button { min-height:66px; font-size:1.8rem; }
  .learning-actions .game-button { flex:1; padding-inline:10px; }
  .word-options,.word-options:has(> :nth-child(3):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .word-options:has(> :nth-child(3):last-child) .word-option:last-child { grid-column:1 / -1; width:calc((100% - 10px)/2); justify-self:center; }
  .word-picture { width:190px; }
  .word-choice { min-height:54px; font-size:1.25rem; }
  .keyboard-target { gap:12px; }
  .target-key { min-height:68px; font-size:2rem; }
  .mouse-field { height:260px; }
  .mouse-destination { width:100px; min-height:86px; right:16px; bottom:16px; }
  .learning-parent { grid-template-columns:60px 1fr; gap:6px 12px; }
  .learning-kaka { width:60px; height:65px; background-size:480px auto; }
  .learning-links { grid-template-columns:1fr; }
  .learning-link { grid-template-columns:105px 1fr; gap:16px; }
}
@media(min-width:650px) and (max-height:600px) {
  .learning-stage.is-immersive { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
  .learning-stage.is-immersive > .game-view-toolbar { grid-column:1 / -1; min-height:48px; }
  .learning-stage.is-immersive .learning-heading { display:none; }
  .learning-stage.is-immersive .learning-settings { grid-column:1 / -1; grid-row:2; margin:0; }
  .learning-stage.is-immersive .learning-board { grid-column:1; grid-row:3 / span 3; }
  .learning-stage.is-immersive .learning-actions { grid-column:2; grid-row:3; align-self:start; margin-top:8px; }
  .learning-stage.is-immersive .learning-status { grid-column:2; grid-row:4; margin-top:0; }
  .learning-stage.is-immersive .word-board { display:grid; grid-template-columns:140px minmax(0,1fr); gap:12px; align-items:start; }
  .learning-stage.is-immersive .word-figure { margin:0; }
  .learning-stage.is-immersive .word-picture { width:140px; }
  .learning-stage.is-immersive .word-options { width:100%; grid-template-columns:1fr; gap:6px; }
  .learning-stage.is-immersive .word-option { grid-template-columns:minmax(0,1fr) 44px; gap:4px; }
  .learning-stage.is-immersive .word-choice { min-height:44px; padding:4px 6px; font-size:1.1rem; }
  .learning-stage.is-immersive .word-listen { min-height:44px; padding:4px; }
  .learning-stage.is-immersive .addition-objects { min-height:78px; padding:8px; gap:6px; }
  .learning-stage.is-immersive .count-ball { width:26px; height:26px; }
  .learning-stage.is-immersive .addition-number { font-size:1.2rem; }
  .learning-stage.is-immersive .addition-total { font-size:1.4rem; margin:4px; }
  .learning-stage.is-immersive .answer-button { min-height:48px; font-size:1.4rem; }
  .learning-stage.is-immersive .mouse-field { height:205px; }
  .learning-stage.is-immersive:has(.keyboard-map) { display:block; }
  .learning-stage.is-immersive .keyboard-target { margin:6px 0; }
  .learning-stage.is-immersive .target-key { min-height:44px; font-size:1.4rem; }
  .learning-stage.is-immersive .keyboard-demo { min-height:26px; margin:0; }
  .learning-stage.is-immersive .keyboard-key { min-height:44px; }
  .learning-stage.is-immersive .keyboard-map { padding:0; }
}