/* Landscape workspace. Loaded after base styles; learning and combat rules are unchanged. */
.orientation-tip {
  display: none;
}
.toolbar-utilities {
  display: flex;
  align-items: center;
  gap: 4px;
}
.toolbar-utilities:empty {
  display: none;
}
dialog {
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (orientation: portrait) and (max-width: 900px) {
  .in-game .orientation-tip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 8px;
    padding: 8px;
    background: #eaf0d8;
    border-radius: 8px;
    color: #627d48;
    font-size: 11px;
  }
}
@media (orientation: landscape) and (min-width: 480px) {
  .header {
    height: 72px;
    padding-inline: max(4%, env(safe-area-inset-left))
      max(4%, env(safe-area-inset-right));
  }
  .setup {
    min-height: calc(100dvh - 125px);
    padding: 25px 4%;
    grid-template-columns: 52% 48%;
  }
  .setup-copy {
    padding-right: 32px;
  }
  .setup h1 {
    font-size: clamp(30px, 3.2vw, 44px);
    line-height: 1.35;
    margin: 12px 0;
  }
  .setup .intro {
    margin-bottom: 16px;
  }
  .setup .step-label {
    margin: 12px 0 8px;
  }
  .garden-preview {
    min-height: 0;
  }
  .canvas-wrap {
    min-height: 390px;
  }
  .speed-picker {
    margin-top: 10px;
  }
  #start {
    margin-top: 14px;
  }
  .in-game {
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }
  .in-game > .header,
  .in-game > footer {
    display: none;
  }
  .in-game > main {
    height: 100%;
    max-width: none;
  }
  .in-game .game {
    height: 100%;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: max(8px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 48px minmax(0, 1fr) clamp(178px, 25dvh, 280px);
    gap: 10px;
  }
  .in-game .game-toolbar {
    grid-area: 1 / 1;
    margin: 0;
    min-width: 0;
    gap: 12px;
  }
  .game-toolbar > #lesson-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
  }
  .game-toolbar .text-btn {
    min-height: 44px;
    padding: 8px 12px;
    font-size: 13px;
    border-radius: 9px;
  }
  .game-toolbar #back {
    background: #e9eddb;
    white-space: nowrap;
  }
  .game-controls {
    align-items: center;
    gap: 4px;
  }
  .toolbar-utilities .icon-btn {
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    font-size: 20px;
  }
  .toolbar-utilities .icon-btn span {
    font-size: 11px;
  }
  .in-game .battle-wrap {
    grid-area: 2 / 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
    margin: 0;
    box-shadow: none;
  }
  .battle-top {
    top: 10px;
    left: 12px;
    right: 12px;
  }
  .sun-counter {
    padding: 7px 12px;
  }
  .sun-counter strong {
    font-size: 20px;
  }
  .wave {
    min-width: 190px;
    font-size: 12px;
  }
  .garden-life {
    font-size: 12px;
  }
  .battle-message {
    font-size: 12px;
    bottom: 10px;
    padding: 7px 14px;
  }
  .in-game .question-panel {
    grid-area: 3 / 1;
    margin: 0;
    padding: 12px 20px;
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(175px, 0.8fr) minmax(0, 2fr);
    grid-template-rows: 44px minmax(60px, 1fr) minmax(22px, auto);
    gap: 4px 24px;
  }
  .question-heading {
    grid-area: 1 / 1 / 2 / -1;
    min-width: 0;
    gap: 12px;
  }
  .question-heading h2 {
    font-size: 14px;
    margin-top: 3px;
  }
  .question-heading .eyebrow {
    font-size: 10px;
    letter-spacing: 1px;
  }
  .question-tools .soft-btn {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 12px;
  }
  .answer-area {
    grid-area: 2 / 1 / 3 / -1;
    margin: 0;
    display: grid;
    grid-template-columns: minmax(175px, 0.8fr) minmax(0, 2fr);
    align-items: center;
    gap: 24px;
    min-width: 0;
  }
  .prompt {
    min-width: 0;
    text-align: center;
    font-size: clamp(34px, 4.2vw, 52px);
    letter-spacing: 1px;
  }
  .prompt.chinese {
    justify-content: center;
    font-size: 52px;
    gap: 12px;
  }
  .prompt small {
    font-size: 13px;
    text-align: left;
  }
  .options {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .answer {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: clamp(60px, 9dvh, 88px);
    font-size: clamp(28px, 3.6vw, 42px);
  }
  .answer:hover:not(:disabled) {
    transform: none;
  }
  .feedback {
    grid-area: 3 / 2;
    margin: 0;
    min-height: 0;
    align-self: center;
    font-size: 12px;
    line-height: 1.5;
  }
  .math-visual {
    grid-area: 3 / 1;
    margin: 0;
    gap: 6px;
    align-self: center;
    font-size: 11px;
  }
  .math-visual .dots {
    gap: 3px;
    max-width: 230px;
  }
  .math-visual .dot {
    width: 9px;
    height: 9px;
  }
  .math-visual small {
    font-size: 10px;
  }
  .in-game .intermission {
    grid-area: 3 / 1;
    height: 100%;
    min-height: 0;
    gap: 8px;
  }
  .intermission > span {
    font-size: 25px;
  }
  .in-game.is-deploying .game {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 25vw, 320px);
    grid-template-rows: 48px minmax(0, 1fr);
  }
  .is-deploying .game-toolbar {
    grid-column: 1 / -1;
  }
  .is-deploying .battle-wrap {
    grid-area: 2 / 1;
  }
  .in-game .deployment-panel {
    grid-area: 2 / 2;
    height: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .deployment-heading {
    gap: 6px;
    align-items: flex-start;
  }
  .deployment-heading h2 {
    font-size: 17px;
  }
  .deployment-heading > span {
    font-size: 11px;
    white-space: nowrap;
  }
  .seed-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(68px, 1fr));
    gap: 10px;
    flex: 1;
    margin: 0;
    min-height: 0;
  }
  .seed-card {
    flex-direction: row;
    text-align: left;
    padding: 10px;
    gap: 10px;
    min-height: 68px;
  }
  .seed-card > img {
    width: 62px;
    height: 37px;
  }
  .seed-card strong {
    font-size: 14px;
  }
  .seed-card small {
    font-size: 10px;
    line-height: 1.5;
    margin-top: 4px;
  }
  .seed-card em {
    font-size: 10px;
  }
  .deploy-note {
    font-size: 11px;
    line-height: 1.7;
    margin: 0;
  }
  .deployment-panel > .primary {
    margin: 0;
    width: 100%;
    min-height: 50px;
    padding: 10px 8px;
    font-size: 13px;
    flex-shrink: 0;
  }
  .plant-slots button {
    min-height: 44px;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 480px) {
  .header {
    height: 50px;
    padding-inline: 4%;
  }
  .brand {
    font-size: 18px;
  }
  .brand-mark {
    font-size: 34px;
  }
  .brand small {
    font-size: 7px;
  }
  .grade {
    font-size: 10px;
  }
  .setup {
    min-height: calc(100dvh - 50px);
    padding: 12px 4%;
    grid-template-columns: minmax(0, 1fr) 25%;
    gap: 20px;
  }
  .setup-copy {
    padding: 0;
  }
  .setup h1,
  .setup .intro,
  .setup .collection,
  .preview-label,
  .preview-bottom,
  body:not(.in-game) > footer {
    display: none;
  }
  .setup-copy > .eyebrow {
    margin-bottom: 7px;
    font-size: 10px;
  }
  .course-picker {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 15px;
  }
  .course-picker > .step-label:nth-child(1) {
    grid-area: 1 / 1;
  }
  .subjects {
    grid-area: 2 / 1;
    gap: 8px;
  }
  .course-picker > .step-label:nth-child(3) {
    grid-area: 1 / 2;
  }
  .lessons {
    grid-area: 2 / 2;
    gap: 6px;
    align-content: center;
  }
  .course-picker > .step-label:nth-child(5) {
    grid-area: 3 / 1;
  }
  .levels {
    grid-area: 4 / 1;
    gap: 8px;
  }
  .speed-picker {
    grid-area: 3 / 2 / 5 / 3;
    margin: 10px 0 0;
    padding: 0;
    gap: 0 12px;
    align-content: center;
  }
  .speed-picker legend {
    font-size: 11px;
    float: none;
    margin: 0;
  }
  .speed-picker small {
    width: 100%;
    margin: 0;
    font-size: 9px;
  }
  .setup .step-label {
    font-size: 11px;
    margin: 6px 0;
  }
  .subject {
    padding: 8px;
    gap: 6px;
    min-height: 48px;
  }
  .subject .subject-icon {
    width: 27px;
    height: 30px;
    font-size: 21px;
  }
  .subject strong {
    font-size: 14px;
  }
  .subject small {
    display: none;
  }
  .level {
    padding: 8px;
    min-height: 52px;
  }
  .level strong {
    font-size: 12px;
  }
  .level small {
    font-size: 9px;
  }
  .lesson {
    min-height: 44px;
    padding: 7px;
    font-size: 11px;
  }
  #start {
    margin-top: 10px;
    min-height: 46px;
    padding: 10px 16px;
  }
  .setup-note {
    margin: 8px 0 0;
    font-size: 9px;
  }
  .garden-preview {
    padding: 0;
  }
  .canvas-wrap {
    min-height: 0;
    border-radius: 70px 70px 16px 16px;
  }
  .map-stamp {
    left: 8px;
    right: 8px;
    bottom: 10px;
    padding: 9px;
  }
  .map-stamp strong {
    font-size: 15px;
  }
  .map-stamp small {
    display: none;
  }
  .in-game .game {
    padding: max(4px, env(safe-area-inset-top))
      max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));
    grid-template-rows: 44px minmax(0, 1fr) 144px;
    gap: 6px;
  }
  .game-toolbar {
    gap: 8px;
  }
  .game-toolbar > #lesson-name {
    font-size: 11px;
  }
  .game-toolbar .text-btn {
    font-size: 11px;
    padding: 7px 9px;
  }
  .toolbar-utilities .icon-btn span {
    display: none;
  }
  .in-game .battle-wrap {
    border-width: 3px;
    border-radius: 10px;
  }
  .battle-top {
    top: 5px;
    left: 7px;
    right: 7px;
    gap: 8px;
  }
  .sun-counter {
    min-width: 0;
    padding: 3px 8px;
    font-size: 14px;
  }
  .sun-counter strong {
    font-size: 15px;
  }
  .sun-counter small {
    display: none;
  }
  .wave {
    min-width: 0;
    font-size: 10px;
    padding: 4px 10px;
  }
  .wave > div {
    margin-top: 4px;
    height: 6px;
  }
  .garden-life {
    padding: 5px 9px;
    font-size: 10px;
  }
  .battle-message {
    bottom: 5px;
    font-size: 10px;
    padding: 4px 10px;
    max-width: 90%;
  }
  .in-game .question-panel {
    padding: 5px 12px;
    grid-template-columns: minmax(150px, 0.75fr) minmax(0, 2fr);
    grid-template-rows: 44px minmax(52px, 1fr) 24px;
    gap: 2px 15px;
    border-radius: 12px;
  }
  .question-heading h2 {
    display: none;
  }
  .question-heading .eyebrow {
    font-size: 10px;
  }
  .question-tools {
    gap: 6px;
  }
  .question-tools .soft-btn {
    padding: 6px 10px;
    font-size: 11px;
  }
  .answer-area {
    grid-template-columns: minmax(150px, 0.75fr) minmax(0, 2fr);
    gap: 15px;
  }
  .prompt {
    font-size: 32px;
  }
  .prompt.chinese {
    font-size: 38px;
    gap: 9px;
  }
  .prompt small {
    font-size: 11px;
  }
  .answer {
    height: 52px;
    font-size: 29px;
    border-radius: 10px;
  }
  .options {
    gap: 10px;
  }
  .feedback {
    font-size: 10px;
    line-height: 1.2;
  }
  .math-visual {
    gap: 4px;
    font-size: 10px;
  }
  .math-visual small {
    font-size: 9px;
  }
  .math-visual .dot {
    width: 7px;
    height: 7px;
  }
  .math-visual .dots {
    gap: 2px;
  }
  .in-game.is-deploying .game {
    grid-template-columns: minmax(0, 1fr) clamp(185px, 26vw, 240px);
    grid-template-rows: 44px minmax(0, 1fr);
  }
  .in-game .deployment-panel {
    padding: 8px;
    gap: 6px;
    border-radius: 10px;
  }
  .deployment-heading h2 {
    font-size: 13px;
    margin-top: 2px;
  }
  .deployment-heading .eyebrow {
    display: none;
  }
  .deployment-heading > span {
    font-size: 9px;
  }
  .seed-cards {
    grid-template-rows: repeat(3, minmax(50px, 1fr));
    gap: 6px;
  }
  .seed-card {
    min-height: 50px;
    padding: 5px;
    gap: 7px;
  }
  .seed-card > img {
    width: 50px;
    height: 30px;
  }
  .seed-card strong {
    font-size: 12px;
  }
  .seed-card small,
  .deploy-note {
    display: none;
  }
  .seed-card em {
    font-size: 9px;
    margin-top: 3px;
  }
  .deployment-panel > .primary {
    min-height: 44px;
    font-size: 11px;
    padding: 6px;
  }
  .plant-slots button > small {
    font-size: 10px;
  }
  .pause-overlay > span {
    display: none;
  }
  .pause-overlay h2 {
    font-size: 22px;
  }
  .pause-overlay p {
    margin: 6px 0 10px;
  }
  .pause-overlay .primary {
    min-height: 44px;
    padding: 9px 20px;
  }
  .stage-banner {
    top: 27%;
    font-size: 24px;
    padding: 8px 20px;
  }
  #upgrade {
    padding: 15px 24px;
    max-width: 580px;
  }
  #upgrade h2 {
    font-size: 20px;
  }
  #upgrade > p {
    margin: 6px 0;
  }
  .upgrade-options {
    gap: 12px;
    margin-top: 12px;
  }
  .upgrade-choice {
    padding: 10px 16px;
  }
  .upgrade-choice > span {
    font-size: 28px;
  }
  .upgrade-choice strong {
    margin-top: 5px;
    font-size: 15px;
  }
  .upgrade-choice small {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.4;
  }
  .upgrade-choice em {
    margin-top: 9px;
    font-size: 11px;
  }
}
/* A continuous battle surface: questions are the lower HUD, never a new page. */
@media (orientation: landscape) and (min-width: 480px) {
  .in-game:not(.is-deploying) .game {
    row-gap: 0;
  }
  .in-game:not(.is-deploying) .battle-wrap {
    margin-top: 6px;
    height: calc(100% - 6px);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
  }
  .in-game .question-panel,
  .in-game .intermission {
    border: 4px solid #75623e;
    border-top: 1px solid #a99a6e;
    border-radius: 0 0 14px 14px;
    background: #faf3dc;
  }
  .toolbar-utilities .soft-btn {
    min-height: 44px;
    padding: 7px 11px;
    font-size: 11px;
    white-space: nowrap;
  }
}
@media (orientation: landscape) and (min-height: 501px) and (min-width: 480px) {
  .in-game.is-deploying .game {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 48px minmax(0, 1fr) 190px;
  }
  .is-deploying .battle-wrap {
    grid-area: 2 / 1;
  }
  .in-game .deployment-panel {
    grid-area: 3 / 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px;
    grid-template-rows: auto minmax(68px, 1fr) auto;
    padding: 12px 16px;
    gap: 8px 18px;
    overflow: visible;
  }
  .deployment-heading {
    grid-area: 1 / 1;
    align-items: center;
  }
  .deployment-heading h2 {
    font-size: 15px;
  }
  .deployment-heading .eyebrow {
    display: none;
  }
  .seed-cards {
    grid-area: 2 / 1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: 10px;
  }
  .seed-card {
    gap: 8px;
    padding: 8px;
  }
  .seed-card > img {
    width: 56px;
    height: 34px;
  }
  .seed-card strong {
    font-size: 13px;
  }
  .seed-card small {
    display: none;
  }
  .seed-card em {
    font-size: 9px;
  }
  .deploy-note {
    grid-area: 3 / 1;
    font-size: 10px;
  }
  .deployment-panel > .primary {
    grid-area: 1 / 2 / 4 / 3;
    align-self: center;
    min-height: 60px;
    line-height: 1.7;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (min-width: 480px) {
  .in-game:not(.is-deploying) .game {
    grid-template-rows: 44px minmax(0, 1fr) 112px;
  }
  .in-game .question-panel {
    grid-template-rows: 16px minmax(52px, 1fr) 24px;
    border-width: 3px;
    border-top-width: 1px;
  }
  .question-heading {
    min-height: 0;
  }
  .question-heading .eyebrow {
    font-size: 9px;
  }
  .in-game .intermission {
    border-width: 3px;
    border-top-width: 1px;
  }
  .feedback {
    font-size: 10px;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
  .game-toolbar > #lesson-name {
    display: none;
  }
  .game-toolbar .text-btn {
    padding-inline: 7px;
  }
  .toolbar-utilities {
    gap: 2px;
  }
  .toolbar-utilities .soft-btn {
    padding-inline: 7px;
    font-size: 10px;
  }
  .answer-area {
    grid-template-columns: minmax(125px, 0.75fr) minmax(0, 2fr);
    gap: 10px;
  }
  .in-game .question-panel {
    grid-template-columns: minmax(125px, 0.75fr) minmax(0, 2fr);
    column-gap: 10px;
  }
  .prompt {
    font-size: 27px;
  }
  .prompt.chinese {
    font-size: 33px;
  }
  .options {
    gap: 7px;
  }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
  .prompt:not(.chinese) {
    font-size: clamp(21px, 3.7vw, 27px);
  }
}