/* Mobile-only refinements. Desktop rules remain in style.css. */
@media (max-width: 820px) {
  .shell, .game-shell, .wa-shell { min-width: 0; }
  .shell { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  input:not([type="radio"]):not([type="checkbox"]), select, textarea { font-size: 16px; max-width: 100%; }
  button { touch-action: manipulation; }
  .text-btn, .back-nav, .high-score-tab, .table-link { min-height: 44px; }
  .topbar, .section-heading { flex-wrap: wrap; gap: 12px; }
  .topbar > div, .section-heading > div { min-width: 0; }
  .topbar h1 { overflow-wrap: anywhere; }
  .topbar-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .table-wrap { max-width: 100%; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .teacher-panel, .teacher-shell > .panel, .teacher-two-col > .panel { min-width: 0; }
  .teacher-summary, .metric-grid, .metric-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .teacher-summary > div, .metric-grid > div { min-width: 0; padding: 14px 10px; overflow-wrap: anywhere; }
  .detail-list p, .setting-row { gap: 10px; }
  .student-name-form, .student-delete-area { min-width: 0; }
  .student-username, .notice, .save-warning { overflow-wrap: anywhere; }
  .auth-shell .panel { width: 100%; }
  .auth-shell .stack input { width: 100%; min-height: 48px; }
  .auth-shell .primary { min-height: 48px; }
  .result-actions, .multi-final-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .result-actions > button, .multi-final-actions > button { flex: 1 1 180px; min-height: 48px; }
  .unlock-celebration { flex-wrap: wrap; }
  .runner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .runner-tile { min-width: 0; padding: 12px 8px; }
  .runner-tile .runner-image { max-width: 100%; height: 110px; }
  .runner-bio-card { padding: 20px 16px; }
  .runner-bio-card > .runner-image { height: 170px; max-width: 100%; }
  .runner-bio-card p { font-size: 1rem; line-height: 1.55; }
  .match-runners { gap: 10px; }
  .match-runners > div { min-width: 0; flex: 1 1 130px; padding: 12px 8px; }
  .match-runners h2 { font-size: 1rem; overflow-wrap: anywhere; }
  .match-runners .runner-image { height: 110px; }
  .marathon-card-picker select { min-height: 48px; }

  /* Allow complete questions and corrections to scroll rather than clip. */
  .game-shell, .game-shell:not(.showing-correction), .game-shell.showing-correction {
    height: auto; min-height: 100svh; overflow: visible;
    grid-template-rows: auto; gap: 12px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .game-shell .game-card, .game-shell:not(.showing-correction) .game-card {
    height: auto; min-height: 0; overflow: visible; padding: 16px 12px;
  }
  .game-shell:not(.showing-correction) .gameplay-layout { grid-template-columns: minmax(0, 1fr); height: auto; gap: 14px; }
  .game-shell:not(.showing-correction) .picture-frame { width: min(62vw, 260px); max-height: 220px; }
  .game-shell:not(.showing-correction) .gameplay-primary { gap: 8px; }
  .game-shell:not(.showing-correction) .answer-cluster .word { font-size: clamp(2.6rem, 13vw, 4.5rem); }
  .game-shell:not(.showing-correction) .word-strategy-cue { width: 100%; padding: 12px; gap: 8px; }
  .game-shell:not(.showing-correction) .word-strategy-cue .cue-title { font-size: 1.25rem; }
  .game-shell:not(.showing-correction) .word-strategy-cue .cue-lead { font-size: 1rem; }
  .game-shell:not(.showing-correction) .word-strategy-cue ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .game-shell:not(.showing-correction) .word-strategy-cue li { min-height: 40px; padding: 5px 7px; gap: 6px; font-size: .9rem; }
  .game-shell:not(.showing-correction) .word-strategy-cue li::before { width: 27px; height: 27px; flex-basis: 27px; }
  .correction-card { height: auto; padding: 0; gap: 14px; }
  .correction-card .correction-steps { font-size: 1rem; line-height: 1.5; }
  .spelling-option { min-height: 64px; grid-template-columns: 38px minmax(0, 1fr); padding: 8px 12px; gap: 8px; }
  .spelling-option strong { font-size: clamp(1.6rem, 7vw, 2.4rem); overflow-wrap: anywhere; }
  .verdict-icon { width: 32px; height: 32px; }
  .correction-next { min-height: 48px; }
  .race-label { gap: 8px; flex-wrap: wrap; }
  .game-back { height: 44px; min-height: 44px; }
  .game-back .back-nav { min-height: 44px; font-size: .85rem; padding: 8px 14px; }
  .multi-score, .multi-score.is-active, .multi-score:not(.is-active) { min-height: 120px; flex-direction: column; justify-content: center; padding: 7px 4px; text-align: center; gap: 4px; }
  .multi-score .runner-image { min-width: 0; width: 40px; height: 44px; }
  .multi-score > div { width: 100%; flex: 0; }
  .multi-score strong { min-height: 3.9em; font-size: .75rem; }
  .multi-score span { font-size: .73rem; }
  .multi-hud:has(.multi-score:nth-child(4)):not(:has(.multi-score:nth-child(5))) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .multi-hud:has(.multi-score:nth-child(5)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  /* Stable two-column reciprocal matching activities. */
  .strategy-matching-panel { padding: 14px 10px; }
  .strategy-matching-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .strategy-matching-mouth img, .strategy-letter-mouth-layout .strategy-letter-question img { width: 100%; max-width: 100%; }
  .strategy-matching-choices { width: 100%; max-width: none; gap: 10px; grid-auto-rows: 1fr; }
  .strategy-matching-choice { min-height: 68px; padding: 5px; border-radius: 14px; }
  .strategy-matching-choice img { width: 100%; max-width: 100%; }
  .strategy-matching-bottom { align-items: center; gap: 8px; padding: 12px 0 0; }
  .strategy-matching-bottom-left { flex-wrap: nowrap; gap: 8px; min-width: 0; }
  .strategy-matching-bottom .back-nav { font-size: .75rem; padding: 7px 8px; gap: 5px; }
  .strategy-matching-bottom .back-arrow { width: 20px; height: 20px; flex: 0 0 20px; }
  .strategy-matching-bottom .strategy-trial-progress { font-size: .8rem; align-self: center; white-space: nowrap; }
  .strategy-matching-bottom .strategy-trial-progress strong { font-size: 1.1rem; }
  .strategy-matching-correction .strategy-matching-steps { font-size: 1rem; line-height: 1.5; }
  .strategy-matching-correction img { width: 100%; max-height: none; }
  .strategy-continue { min-height: 48px; }
  .strategy-intro-panel { padding: 16px 10px; gap: 10px; }
  .strategy-intro-panel .strategy-intro-art { border-radius: 10px; }
  .reminder-shell { min-height: auto; padding-top: 12px; gap: 12px; }
  .reminder-panel { gap: 14px; }
  .strategy-picture img { max-height: none; height: auto; }

  /* A phone cabinet: letter first, then usable settings and audio controls. */
  .wa-shell { width: calc(100% - 16px); padding-top: 12px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .wa-header { flex-direction: column; align-items: stretch; gap: 10px; }
  .wa-header h1 { font-size: 26px; }
  .wa-presentation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; font-size: .82rem; }
  .wa-presentation label { min-height: 44px; padding: 8px; border: 1px solid #c7dce9; border-radius: 12px; background: #ffffffb3; justify-content: center; }
  .wa-presentation input { width: 18px; height: 18px; flex-shrink: 0; padding: 0; min-height: 0; }
  .wa-instruction { font-size: .86rem; line-height: 1.4; margin: 10px 0 12px; }
  .wa-machine { padding: 8px 8px 0; border-width: 6px; border-radius: 30px 30px 12px 12px; }
  .wa-machine::before, .wa-machine::after { width: 5px; border-width: 1px; pointer-events: none; }
  .wa-crown { margin-top: -8px; height: 24px; gap: 24px; }
  .wa-light-plaque { margin: 0 2% 12px; padding: 8px 6px 4px; border-width: 4px; }
  .wa-lights { gap: clamp(3px, 1cqw, 6px); }
  .wa-bulb { width: clamp(16px, 4.7cqw, 28px); border-width: 2px; }
  .wa-light-number { font-size: 11px; }
  .wa-body { margin: 0 2px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "letter" "settings" "audio"; gap: 10px; }
  .wa-board { grid-area: letter; width: 100%; height: auto; aspect-ratio: 4/3; max-height: 270px; border-width: 6px; }
  .wa-letter { width: 100%; height: 100%; object-fit: contain; }
  .wa-left { grid-area: settings; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; background: transparent; box-shadow: none; }
  .wa-right { grid-area: audio; display: grid; grid-template-columns: minmax(0, 1fr) 100px; align-items: stretch; gap: 8px; padding: 0; background: transparent; box-shadow: none; }
  .wa-plaque { min-width: 0; padding: 5px 4px; border-width: 3px; }
  .wa-plaque h2 { font-size: 16px; margin-bottom: 4px; }
  .wa-counter { gap: 3px; }
  .wa-counter button { width: 40px; min-height: 44px; padding: 4px 2px; flex: 0 0 40px; font-size: 14px; }
  .wa-counter output { font-size: 26px; line-height: 1.4; }
  .wa-radio-board { padding: 0 4px; gap: 0; }
  .wa-radio-board label { min-height: 36px; font-size: 12px; gap: 6px; white-space: normal; }
  .wa-radio-board input { width: 18px; height: 18px; flex: 0 0 18px; }
  .wa-start { min-height: 48px; margin: 0; padding: 8px 4px; font-size: 19px; border-width: 4px; white-space: normal; }
  .wa-deck { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 8px; margin: 14px -3px 0; padding: 18px 8px 8px; border-width: 5px; }
  .wa-count-20 .wa-deck { row-gap: 12px; padding-top: 18px; }
  .wa-hole-mouth { height: clamp(27px, 8cqw, 42px); border-width: 3px; }
  .wa-hole span { font-size: 12px; }
  .wa-apron { margin: 0 -8px; height: 32px; border-top-width: 4px; }
  .wa-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; margin-top: 14px; }
  .wa-footer .back-nav { font-size: 12px; min-height: 44px; padding: 8px; }
  .wa-teacher { grid-column: 1 / -1; margin: 0; display: block; }
  .wa-teacher > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .wa-teacher button { min-height: 44px; width: 100%; font-size: 13px; padding: 8px; }
  .wa-shell > .wa-note { font-size: 12px; line-height: 1.5; margin-top: 8px; }
  .wa-minimal { border-width: 1px; padding: 12px; border-radius: 18px; }
  .wa-minimal .wa-light-plaque { margin: 0 0 12px; }
  .wa-minimal .wa-board { border-width: 1px; }
  .wa-minimal .wa-start { font-size: 19px; border-width: 1px; }
  .wa-result-grid { gap: 8px; }
  .wa-result-grid div { padding: 15px 6px; }
  .wa-result-grid strong { font-size: 30px; }
  .wa-result-grid span { font-size: 12px; }
}

@media (max-width: 650px) {
  .level-select-shell { width: calc(100% - 20px); max-width: 540px; }
  .level-select-shell .option-group { padding: 12px; }
  .level-select-shell .strategy-practice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .level-select-shell .strategy-practice-card { max-width: none; }
  .level-select-shell .strategy-practice-identity { padding: 9px 8px; }
  .level-select-shell .strategy-practice-identity .level-number { font-size: .7rem; }
  .level-select-shell .strategy-practice-identity .level-focus { font-size: .8rem; }
  .level-select-shell .challenge-section .level-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .level-flip, .level-card { max-width: none; width: 100%; }
  .level-flip-inner { min-height: 405px; }
  .level-flip-front { min-height: 405px; height: 100%; }
  .level-flip-back { padding: 10px 8px; }
  .level-player-options { gap: 6px; }
  .level-player-choice { min-height: 44px; flex-shrink: 0; }
  .level-flip-return, .level-flip-back .text-btn { min-height: 44px; font-size: .75rem; padding: 5px 3px; }
  .level-identity { padding: 9px 8px; overflow-wrap: anywhere; }
  .level-number { font-size: .7rem; }
  .level-focus { font-size: .78rem; line-height: 1.3; }
  .level-examples { font-size: .7rem; }
  .selected-level-heading h2 { font-size: 1.4rem; }
  .hs-score { flex-wrap: wrap; gap: 2px 6px; }
  .high-score-tab { font-size: .72rem; }
  .high-score-rule { font-size: .75rem; line-height: 1.4; }
}

@media (max-width: 360px) {
  .strategy-matching-bottom { flex-wrap: wrap; }
  .strategy-matching-bottom-left { flex: 1 1 100%; }
  .strategy-matching-bottom .strategy-trial-progress { margin-left: auto; }
  .teacher-summary, .metric-grid, .metric-grid.six { gap: 6px; }
  .wa-right { grid-template-columns: minmax(0, 1fr) 85px; }
  .wa-start, .wa-minimal .wa-start { font-size: 17px; }
}

@media (max-width: 820px) and (max-height: 500px) and (orientation: landscape) {
  .home-shell { min-height: auto; padding: 12px 0; }
  .home-hero { aspect-ratio: 16/9; }
  .home-ui { justify-content: center; padding: 16px; gap: 12px; }
  .home-wordmark { width: min(48vw, 300px); }
  .home-actions { display: flex; width: auto; }
  .home-action { width: auto; min-height: 44px; padding: 9px 18px; }
  .strategy-matching-layout { max-width: 620px; }
  .game-shell:not(.showing-correction) .picture-frame { max-height: 160px; width: 215px; }
  .wa-board { max-height: 210px; }
}

@media(max-width:700px){
  .wa-deck,.wa-count-20 .wa-deck{padding-top:32px}
}

@media(max-width:700px){
  .wa-teacher>.wa-pending{grid-template-columns:1fr;margin-top:8px}
  .wa-pending-row button{min-height:44px;width:auto;font-size:12px}
  .wa-teacher>div:not(.wa-pending) button{white-space:normal;line-height:1.3}
}