/* Mobile-only layout constraints and compact typography. */
@media (max-width: 780px) {
  :root {
    --mobile-gap: 6px;
    --mobile-radius: 6px;
  }

  html,
  body {
    height: 100%;
  }

  body {
    min-height: 100dvh;
    max-height: none;
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .bg-shape {
    opacity: 0.08;
    transform: scale(0.7);
  }

  .app {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: var(--mobile-gap);
    overflow: visible;
  }

  body.progress-view {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.progress-view .app {
    min-height: max-content;
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .top-nav-row {
    margin: 0;
  }

  .top-nav-row #backToModesBtn {
    width: auto;
    min-width: 0;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.78rem;
    line-height: 1.1;
  }

  .header {
    margin: 0;
    padding: 8px 9px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 8px;
    row-gap: 6px;
    align-items: start;
  }

  .header h1 {
    font-size: clamp(1.2rem, 5.4vw, 1.6rem);
  }

  .header-title-row {
    grid-row: 1;
    grid-column: 1;
    min-width: 0;
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .header-utility-row {
    margin-top: 0;
    display: contents;
  }

  .header-actions {
    grid-row: 1;
    grid-column: 2;
    width: auto;
    justify-self: end;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 6px;
  }

  .header-actions > button.ghost {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  #activeContinentLabel {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: 0;
  }

  #openProgressBtn .settings-btn-label,
  #openSettingsBtn .settings-btn-label {
    display: none;
  }

  #headerModeLabel:not(.hidden) {
    font-size: clamp(0.92rem, 3.8vw, 1.2rem);
    line-height: 1.1;
  }

  .header-meta {
    grid-row: 3;
    grid-column: 1 / -1;
    margin: 2px 0 0;
  }

  #headerDescription {
    font-size: 0.8rem;
    line-height: 1.3;
  }

  .card {
    border-radius: var(--mobile-radius);
  }

  .mode-select,
  .game-card,
  .result-card {
    padding: 10px;
    overflow: visible;
    -webkit-overflow-scrolling: touch;
  }

  /* .game-card {
    padding-bottom: calc(188px + env(safe-area-inset-bottom));
  } */

  #textInputWrap.docked-input {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(60px + env(safe-area-inset-bottom));
    z-index: 13;
    margin: 0;
    padding: 8px 8px 6px;
    border: 1px solid rgba(167, 167, 162, 0.5);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: rgba(252, 252, 249, 0.97);
    backdrop-filter: blur(1px);
  }

  #choiceWrap.docked-choice {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(60px + env(safe-area-inset-bottom));
    z-index: 13;
    margin: 0;
    padding: 8px 8px 6px;
    border: 1px solid rgba(167, 167, 162, 0.5);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    background: rgba(252, 252, 249, 0.97);
    backdrop-filter: blur(1px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chain-builder-wrap.without-inline-submit {
    margin-bottom: calc(86px + env(safe-area-inset-bottom));
  }

  .chain-builder-wrap.without-inline-submit .chain-input-row {
    grid-template-columns: 1fr;
  }

  #modeSelect,
  #gameSection,
  #finishCard {
    min-height: auto;
  }

  .mode-select-head h2,
  .result-card h2 {
    font-size: 1.04rem;
  }

  .active-filter,
  .settings-label,
  .settings-panel h3,
  .status-row,
  .hint,
  .assist-toggle,
  .feedback,
  .source-note {
    font-size: 0.82rem;
  }

  .settings-panel {
    width: min(92vw, 360px);
    max-height: calc(100dvh - 24px);
    margin: 0;
    padding: 10px;
    overflow: auto;
  }

  #continentSelect,
  #answerInput,
  #chainInput1,
  #chainInput2 {
    min-height: 42px;
    padding: 9px 10px;
    font-size: 0.95rem;
  }

  .mode-cards {
    gap: 6px;
  }

  .mode-card {
    padding: 8px;
    gap: 6px;
  }

  .mode-card strong {
    font-size: 0.92rem;
  }

  .mode-card-copy > span {
    font-size: 0.82rem;
  }

  .prompt {
    margin: 4px 0;
    font-size: 1.1rem;
  }

  .hint,
  .assist-row {
    margin: 0 0 6px;
  }

  .assist-toggle-ui {
    width: 32px;
    height: 18px;
  }

  .assist-toggle-ui::after {
    width: 12px;
    height: 12px;
  }

  .assist-toggle input:checked + .assist-toggle-ui::after {
    transform: translateX(14px);
  }

  .world-map-wrap,
  .outline-wrap,
  .duel-card,
  .mini-outline-card {
    border-radius: 6px;
    margin-bottom: 6px;
  }

  #worldMapSvg {
    min-height: clamp(280px, 48dvh, 520px);
    max-height: 58dvh;
  }

  .world-map-label {
    font-size: 16px;
    font-weight: 800;
  }

  .world-map-label-bg {
    stroke-width: 1.1;
  }

  .map-controls {
    right: 8px;
    top: 8px;
    gap: 6px;
  }

  .world-map-fixed-labels {
    left: 8px;
    top: 8px;
    gap: 5px;
    max-width: min(72%, 300px);
  }

  .world-map-fixed-label {
    font-size: 0.72rem;
    padding: 3px 8px;
  }

  .map-control-btn {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }
  #outlineSvg,
  #leftSvg,
  #rightSvg {
    max-height: 21dvh;
  }

  .multi-wrap .mini-outline-svg {
    max-height: 12dvh;
  }

  .multi-wrap,
  .duel-wrap,
  .choice-wrap,
  .answer-row,
  .chain-input-row,
  .finish-actions {
    gap: 6px;
  }

  .duel-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .multi-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  button,
  .choice-btn,
  #submitBtn,
  #chainSubmitBtn,
  #backToModesBtnBottom,
  #overlayNextBtn,
  #saveSettingsBtn,
  #closeSettingsBtn,
  #openSettingsBtn {
    min-height: 42px;
    padding: 9px 10px;
    font-size: 0.9rem;
    border-radius: 6px;
  }

  .secondary-actions {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 12;
    margin-top: 0;
    padding: 8px;
    border: 1px solid rgba(167, 167, 162, 0.5);
    border-radius: 8px;
    background: rgba(252, 252, 249, 0.96);
    backdrop-filter: blur(1px);
    justify-content: stretch;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .secondary-actions.paired-with-input {
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding-top: 6px;
  }

  .secondary-actions.paired-with-choice,
  .secondary-actions.paired-with-chain {
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding-top: 6px;
  }

  .secondary-actions button {
    flex: 1 1 0;
    min-width: 0;
  }

  #backToModesBtn {
    width: auto;
    flex: 0 0 auto;
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    padding: 0 10px;
    font-size: 0.78rem;
    line-height: 30px;
  }

  .top-nav-row #backToModesBtn {
    height: 30px;
    min-height: 30px;
    max-height: 30px;
    padding: 0 10px;
    line-height: 30px;
  }

  .feedback {
    min-height: 20px;
    margin: 6px 0 1px;
  }

  .source-note {
    margin-top: 6px;
    line-height: 1.2;
  }

  .result-overlay {
    border-radius: 6px;
  }

  .result-overlay-card {
    width: min(92vw, 330px);
    padding: 9px;
    border-radius: 6px;
  }

  .result-overlay-message {
    margin-bottom: 7px;
    font-size: 0.88rem;
    line-height: 1.2;
  }
}

@media (max-width: 420px) {
  .header h1,
  .header-mode-label {
    font-size: 1.14rem;
  }

  #headerDescription,
  .status-row,
  .hint,
  .assist-toggle,
  .mode-card strong,
  .mode-card-copy > span,
  button,
  #answerInput,
  #chainInput1,
  #chainInput2,
  .feedback,
  .source-note {
    font-size: 0.8rem;
  }

  #worldMapSvg {
    min-height: clamp(250px, 44dvh, 420px);
    max-height: 54dvh;
  }

  .world-map-label {
    font-size: 15px;
  }

  #outlineSvg,
  #leftSvg,
  #rightSvg {
    max-height: 19dvh;
  }
}