/* Phone layout: one scrolling page, with a separate compact battle stage. */
@media (max-width: 619px) {
  .game {
    height: 100svh;
    height: 100dvh;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    border-inline-width: 2px;
  }

  .topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px 8px;
    padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  }

  .brand { min-width: 0; width: auto; font-size: 16px; gap: 0; }
  .brand small { font-size: 8px; }
  .topbar > .run-score { display: none; }
  .topbar > .run-score:has(strong) {
    display: block;
    max-width: 48vw;
    font-size: 12px;
    text-align: right;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .run-score strong { font-size: 21px; margin-inline: 2px; }
  .run-score .loss { font-size: 12px; }
  .run-score .pips { display: none; }
  .topbar nav { grid-column: 1 / -1; min-width: 0; gap: 6px; }
  .topbar nav .small-button {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 42px;
    padding: 7px 8px;
    font-size: 14px;
    white-space: nowrap;
  }
  .topbar nav button[aria-label] { flex: 0 0 42px; }
  #screen { overflow: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
  #screen > section { min-width: 0; }

  .setup {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 100%;
    padding: 12px 12px max(16px, env(safe-area-inset-bottom));
    gap: 22px;
    overflow: visible;
  }
  .setup-art {
    flex: none;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 210px auto;
    gap: 10px;
  }
  .mascot-stage { min-height: 0; }
  .mascot-hero, .menu-aura { inset: 28px 24% 40px; }
  .streamer-label { max-width: calc(100% - 16px); font-size: 13px; top: 7px; right: 7px; }
  .mascot-nameplate {
    max-width: calc(100% - 16px);
    padding: 6px 16px;
    font-size: 16px;
    white-space: normal;
    text-align: center;
    overflow-wrap: anywhere;
    bottom: 7px;
  }
  .mascot-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .mascot-pick { height: auto; min-height: 42px; aspect-ratio: 1; padding: 4px; }
  .setup-form { flex: none; min-height: 0; gap: 20px; padding: 0; overflow: visible; }
  .setup-form > * { flex-shrink: 0; min-width: 0; }
  .section-heading { align-items: center; flex-wrap: wrap; gap: 5px 10px; }
  .section-heading h1 { font-size: 23px; line-height: 1.4; }
  .section-heading h2 { font-size: 18px; }
  .section-heading small { font-size: 12px; }
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mode-card { min-width: 0; min-height: 116px; padding: 12px 9px; column-gap: 8px; }
  .mode-card strong { font-size: 21px; }
  .mode-card > span.mode-emoji { font-size: 25px; }
  .mode-card .mode-core { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
  .segmented { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segmented button { min-width: 0; min-height: 48px; font-size: 14px; line-height: 1.5; padding: 10px 8px; }
  .resume-banner { align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; }
  .resume-banner > span { min-width: 0; overflow-wrap: anywhere; }
  .resume-banner button { flex-shrink: 0; min-height: 44px; font-size: 14px; padding: 8px 10px; }
  .start-row > button { min-width: 0; min-height: 48px; font-size: 16px; padding: 10px 12px; }
  .local-note { font-size: 13px; line-height: 1.7; }
  .rotate-tip { display: none; }

  .page {
    height: auto;
    min-height: 100%;
    padding: 16px 12px 0;
    gap: 14px;
    overflow: visible;
  }
  .page > * { flex-shrink: 0; min-width: 0; }
  .page-heading { align-items: flex-start; }
  .page-heading h1 { font-size: 24px; line-height: 1.35; }
  .page-heading p { font-size: 14px; line-height: 1.7; }
  .player-summary { padding: 10px; gap: 10px; align-items: center; flex-wrap: wrap; }
  .player-summary > div:not(.avatar):not(.summary-gear) { flex: 1; min-width: 0; }
  .player-summary .avatar { width: 52px; height: 52px; }
  .player-summary h3 { font-size: 16px; overflow-wrap: anywhere; }
  .stats-line { font-size: 13px; overflow-wrap: anywhere; }
  .summary-gear { display: none; }
  .reward-notice { font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
  .choices, .choices.two {
    flex: none;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: 12px;
    max-width: 100%;
    margin: 0;
  }
  .choice-card {
    min-width: 0;
    min-height: 0;
    max-height: none;
    padding: 18px 14px;
    gap: 9px;
  }
  .choice-card h2 { font-size: 23px; overflow-wrap: anywhere; }
  .choice-card .category { font-size: 14px; }
  .choice-card p { max-width: 100%; font-size: 15px; }
  .choice-art, .weapon-choice .choice-art { width: 110px; height: 76px; }
  .choice-glyph { margin-bottom: 0; }
  .weapon-facts { grid-template-columns: .8fr 1.25fr 1fr; gap: 5px; padding-block: 9px; }
  .weapon-facts strong { font-size: 20px; white-space: normal; overflow-wrap: anywhere; }
  .weapon-facts strong small { font-size: 12px; }
  .weapon-facts span, .weapon-trait { font-size: 13px; }
  .page-actions {
    position: sticky;
    bottom: 0;
    z-index: 6;
    padding: 10px 0 max(10px, env(safe-area-inset-bottom));
    margin-top: auto;
    background: #1b293cf5;
    flex-wrap: wrap;
  }
  .page-actions .primary { min-width: 0; width: 100%; min-height: 48px; font-size: 17px; }
  .opponent-card {
    grid-template-columns: 80px minmax(0, 1fr);
    grid-template-areas: "art style" "art name" "art stats" "weapons weapons" "skills skills" "details details";
    grid-template-rows: repeat(6, auto);
    gap: 6px 12px;
    padding: 14px;
    align-items: center;
  }
  .opponent-card > * { min-width: 0; }
  .npc-art { grid-area: art; width: 80px; height: 110px; }
  .npc-style { grid-area: style; font-size: 15px; }
  .opponent-card h2 { grid-area: name; font-size: 21px; }
  .opponent-card .stats-line { grid-area: stats; font-size: 13px; }
  .opponent-card .mini-weapons { grid-area: weapons; }
  .opponent-card .npc-skills { grid-area: skills; }
  .npc-details { grid-area: details; font-size: 14px; padding: 8px 0; min-height: 40px; }
  .mini-weapons, .npc-skills { justify-content: flex-start; }
  .mini-weapons .item-icon { width: 42px; height: 42px; min-width: 42px; }
  .skill-chip { font-size: 13px; padding: 5px 7px; overflow-wrap: anywhere; }

  .arena-page {
    height: 100%;
    min-height: 530px;
    grid-template-rows: minmax(420px, 1fr) auto;
  }
  .battle-hud {
    top: 10px; left: 8px; right: 8px;
    grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr);
    gap: 5px;
  }
  .fighter-hud { min-width: 0; padding: 8px; max-width: none; }
  .fighter-name { display: block; min-width: 0; margin-bottom: 6px; }
  .fighter-name > span { display: block; font-size: 15px; max-width: 100%; }
  .fighter-name small { font-size: 11px; margin-top: 3px; }
  .hp-track { height: 21px; padding: 3px; }
  .hp-text { font-size: 13px; margin-top: 5px; }
  .weapon-strip { gap: 6px; padding: 6px 2px 3px; scrollbar-width: thin; }
  .weapon-strip .item-icon { height: 40px; width: 40px; min-width: 40px; padding: 4px; flex-shrink: 0; }
  .vs { font-size: 18px; padding-top: 25px; }
  .clock { font-size: 11px; line-height: 1.4; margin-top: 6px; }
  .fighter { width: 34%; height: auto; aspect-ratio: 1; bottom: 23%; }
  .combat-float.skill { width: 140px; max-width: 140px; white-space: normal; text-align: center; font-size: 20px; overflow-wrap: anywhere; }
  .battle-skill-label {
    bottom: 3%; left: 8px; padding: 5px 6px;
    max-width: calc(50% - 13px); max-height: 44px;
    overflow-y: auto; font-size: 11px; overflow-wrap: anywhere;
  }
  .battle-skill-label.enemy { right: 8px; }
  .ready-banner { bottom: 9%; width: calc(100% - 24px); max-width: none; gap: 6px; white-space: normal; }
  .ready-banner > button { flex: 1; min-width: 0; }
  .ready-banner .primary, .ready-banner .secondary { font-size: 14px; min-height: 46px; padding: 8px 6px; }
  .arena-bottom { display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 8px; padding: 10px 12px max(10px, env(safe-area-inset-bottom)); }
  .battle-log { flex: none; width: 100%; min-width: 0; font-size: 14px; line-height: 1.5; }
  .battle-log small { max-width: 100%; font-size: 12px; }
  .battle-controls { flex: none; margin: 0; gap: 8px; }
  .battle-controls .small-button { flex: 1; min-height: 44px; font-size: 15px; }
  .result-banner { padding: 20px 12px; }
  .result-banner h1 { font-size: 38px; }
  .result-banner p { font-size: 16px; text-align: center; }
  .end-page { padding-bottom: 20px; }
  .end-page h1 { font-size: 30px; line-height: 1.4; }
  .end-page p { font-size: 15px; }
  .end-build { max-width: 100%; }
  .end-buttons { width: 100%; flex-direction: column; }
  .end-buttons > button { min-width: 0; width: 100%; min-height: 48px; }

  dialog { width: calc(100% - 16px); max-width: calc(100% - 16px); max-height: calc(100svh - 24px); max-height: calc(100dvh - 24px); }
  #dialog-content { display: flex; flex-direction: column; max-height: calc(100svh - 30px); max-height: calc(100dvh - 30px); min-width: 0; }
  .modal-heading { flex: none; padding: 10px 12px; gap: 8px; }
  .modal-heading h2 { min-width: 0; overflow-wrap: anywhere; font-size: 20px; }
  .modal-heading .quiet { flex: none; width: 44px; min-height: 44px; font-size: 18px; padding: 8px; }
  .modal-body { min-height: 0; max-height: none; overflow: auto; padding: 14px 12px max(14px, env(safe-area-inset-bottom)); overflow-wrap: anywhere; }
  .modal-body p, .modal-body li { font-size: 15px; }
  .modal-body ul { padding-left: 22px; }
  .modal-body .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .stat-box { font-size: 14px; padding: 10px; }
  .stat-box strong { font-size: 26px; }
  .build-row { min-width: 0; }
  .build-row > div { min-width: 0; }
  .weapon-build-row { display: flex; flex-direction: column; }
  .build-row strong { font-size: 16px; }
  .build-row p { font-size: 14px; }
  .settings-row { flex-wrap: wrap; gap: 10px; font-size: 16px; }
  .settings-row select { min-width: 0; max-width: 60%; font-size: 14px; padding: 8px; }
  .volume-control { max-width: 62%; min-width: 0; gap: 8px; }
  .volume-control input { width: 100%; min-width: 0; }
  .volume-control output { flex-shrink: 0; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions > button, .champion-unlock-actions > button { flex: 1; min-width: 0; min-height: 44px; font-size: 15px; }
  .records-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .records-tabs button { min-width: 0; min-height: 44px; padding: 8px 4px; font-size: 15px; }
  .leaderboard-source-tabs button { min-width: 0; min-height: 44px; font-size: 16px; }
  .leaderboard-actions button { min-height: 44px; }
  .online-rank-row { grid-template-columns: 20px 30px minmax(0, 1fr) 40px; gap: 4px 6px; padding: 8px 5px; }
  .rank-account-avatar { width: 30px; height: 30px; }
  .rank-mascot { grid-column: 4; grid-row: 1; width: 40px; height: 44px; }
  .rank-wins { grid-column: 3 / -1; font-size: 22px; white-space: nowrap; overflow-wrap: normal; }
  .rank-wins small { margin-left: 3px; font-size: 12px; }
  .record-row { min-width: 0; padding: 9px 6px; gap: 7px; }
  .record-row .record-art { flex: 0 0 40px; }
  .record-row .record-meta { min-width: 0; font-size: 14px; }
  .record-row strong { font-size: 22px; }
  #toast { width: max-content; max-width: calc(100% - 24px); text-align: center; overflow-wrap: anywhere; font-size: 14px; padding: 12px 14px; bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media (max-width: 619px) and (max-height: 700px) {
  .brand small { display: none; }
  .arena-page { min-height: 0; grid-template-rows: minmax(360px, 1fr) auto; }
  .fighter-hud { padding: 6px; }
  .fighter-name small { display: none; }
  .fighter-name > span { font-size: 14px; }
  .hp-track { height: 18px; }
  .hp-text { font-size: 12px; margin-top: 3px; }
  .weapon-strip { padding-top: 4px; }
  .weapon-strip .item-icon { width: 34px; height: 34px; min-width: 34px; }
  .arena-bottom { gap: 6px; padding: 7px 10px max(7px, env(safe-area-inset-bottom)); }
  .battle-log { font-size: 13px; }
  .battle-log small { font-size: 11px; }
  .battle-controls .small-button { min-height: 42px; }
  .ready-banner .primary, .ready-banner .secondary { min-height: 42px; font-size: 13px; }
}

@media (max-width: 359px) {
  .topbar { padding-inline: 8px; }
  .topbar nav { gap: 4px; }
  .topbar nav .small-button { padding-inline: 5px; font-size: 13px; }
  .topbar nav button[aria-label] { flex-basis: 38px; }
  .brand { font-size: 15px; }
  .setup, .page { padding-inline: 10px; }
  .mascot-grid { gap: 5px; }
  .mascot-pick { min-height: 40px; }
  .mode-card { column-gap: 5px; padding-inline: 7px; }
  .mode-card strong { font-size: 19px; }
  .mode-card .mode-core { font-size: 13px; }
  .fighter-hud { padding: 6px; }
  .fighter-name > span { font-size: 14px; }
  .weapon-strip .item-icon { width: 36px; height: 36px; min-width: 36px; }
}

/* A small opening hint, shown only while holding the phone upright. */
@media (max-width: 619px) and (orientation: portrait) {
  .setup > .rotate-tip {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 9px 12px;
    border: 2px solid #a47a47;
    background: #3b3028;
    color: #ffe0a0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
  }
  .rotate-tip > span { font-size: 23px; line-height: 1; }
}