/* Portrait play uses the available viewport, not a sum of guessed pixel heights.
   The arena takes the remaining space after readable controls and safe areas. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 820px) and (orientation: portrait), (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  body.in-game {
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
      env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  }

  body.in-game .topbar {
    flex: 0 0 48px;
    height: 48px;
    min-height: 48px;
    width: 100%;
    margin: 0;
    padding: 0 12px;
  }
  body.in-game .brand { font-size: 17px; gap: 7px; }
  body.in-game .brand-mark { font-size: 27px; }
  body.in-game .brand small { font-size: 6px; margin-top: 2px; }
  body.in-game .topbar .icon-button {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 10px;
  }
  body.in-game .topbar .connection {
    /* The status must not float over the bottom row of action buttons. */
    position: static;
    font-size: 0;
    padding: 0;
    margin: 0;
    background: none;
    width: 7px;
    overflow: hidden;
  }
  body.in-game .connection::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    margin: 0;
    border-radius: 50%;
    background: #bd7659;
  }
  body.in-game .connection.online::before { background: #668e4b; }
  body.in-game main {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    margin: 0;
    padding: 0 8px 6px;
    display: flex;
    flex-direction: column;
  }
  body.in-game #game {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  body.in-game .expedition-bar {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 4px 2px;
    gap: 6px;
  }
  body.in-game .expedition-bar > div:first-child { min-width: 0; }
  body.in-game .expedition-bar .eyebrow {
    font-size: 7px;
    letter-spacing: 1px;
  }
  body.in-game .expedition-bar h1 {
    font-size: 14px;
    line-height: 1.4;
    margin-top: 2px;
    letter-spacing: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.in-game .expedition-tools { gap: 4px; }
  body.in-game .expedition-tools button {
    min-height: 44px;
    padding: 5px 7px;
    font-size: 10px;
    letter-spacing: 0;
    white-space: nowrap;
  }
  body.in-game #reconnect-banner {
    flex: 0 0 auto;
    padding: 5px 8px;
    font-size: 10px;
    line-height: 1.4;
    margin: 0 0 5px;
  }
  body.in-game .game-layout {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  body.in-game .party-panel {
    order: -1;
    flex: 0 0 auto;
    align-self: stretch;
    padding: 5px 9px;
    border-radius: 8px;
  }
  body.in-game .party-panel .section-label,
  body.in-game .party-panel .party-note,
  body.in-game .party-panel .tactics,
  body.in-game .party-panel > .quiet,
  body.in-game .party-portrait { display: none; }
  body.in-game #party-list { display: flex; gap: 9px; }
  body.in-game .party-member {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    border: 0;
    padding: 0;
  }
  body.in-game .member-info { position: relative; }
  body.in-game .party-member:has(.rescue) { min-height: 44px; }
  body.in-game .member-head strong {
    max-width: 100%;
    font-size: 10px;
    line-height: 15px;
  }
  body.in-game .member-head small { display: none; }
  body.in-game .member-info > small {
    font-size: 8px;
    line-height: 12px;
    margin: 0 0 3px;
  }
  body.in-game .member-status {
    font-size: 8px;
    line-height: 11px;
    margin-top: 3px;
  }
  body.in-game.in-battle .member-status { display: none; }
  body.in-game .rescue {
    position: absolute;
    inset: 0 0 auto;
    min-height: 44px;
    padding: 3px;
    margin: 0;
    background: #eef4da;
    font-size: 10px;
  }
  body.in-game .battle-column {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  body.in-game .arena {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
    max-height: none;
    width: 100%;
    border-width: 2px;
    border-radius: 9px;
    container-type: size;
  }
  body.in-game .control-panel,
  body.in-game .rest-controls {
    flex: 0 0 auto;
    margin: 0;
    padding: 7px 9px;
    border-radius: 9px;
  }
  body.in-game .player-heading { min-height: 32px; gap: 6px; }
  body.in-game .player-heading > div { min-width: 0; }
  body.in-game .player-heading strong {
    display: block;
    font-size: 12px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }
  body.in-game .player-heading small {
    display: block;
    margin: 0;
    font-size: 9px;
    line-height: 13px;
  }
  body.in-game .growth-button {
    min-height: 44px;
    padding: 5px 8px;
    font-size: 10px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  body.in-game .resources { gap: 8px; margin: 5px 0 7px; }
  body.in-game .resources span {
    font-size: 8px;
    line-height: 12px;
    margin-bottom: 3px;
    white-space: nowrap;
  }
  body.in-game .actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  body.in-game .action {
    min-height: 50px;
    padding: 5px 3px;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
    column-gap: 2px;
    text-align: left;
  }
  body.in-game .action .action-icon {
    grid-row: 1 / 3;
    justify-self: center;
    margin: 0;
  }
  body.in-game .action .action-icon svg { width: 22px; height: 22px; }
  body.in-game .action strong {
    align-self: end;
    font-size: 11px;
    line-height: 15px;
    padding: 0;
  }
  body.in-game .action small {
    align-self: start;
    font-size: 8px;
    line-height: 12px;
    margin: 0;
  }
  body.in-game .action kbd { display: none; }
  body.in-game .control-foot { margin-top: 3px; align-items: center; }
  body.in-game .control-foot .text-button {
    min-height: 28px;
    font-size: 10px;
    line-height: 16px;
  }
  body.in-game .control-foot > span {
    font-size: 8px;
    line-height: 12px;
    max-width: 63%;
    padding: 0;
    text-align: right;
  }
  body.in-game:not(.in-battle) .control-foot { display: none; }
  body.in-game .rest-controls { display: block; }
  body.in-game .rest-controls strong { font-size: 11px; line-height: 16px; }
  body.in-game .rest-controls p {
    font-size: 9px;
    line-height: 14px;
    margin-top: 2px;
  }
  body.in-game .rest-buttons { display: flex; gap: 6px; margin-top: 5px; }
  body.in-game .rest-buttons button {
    flex: 1 1 0;
    min-height: 44px;
    padding: 6px;
    font-size: 12px;
  }
  body.in-game .boss-hud {
    top: 5px;
    width: 92%;
    padding: 5px 7px;
  }
  body.in-game .boss-heading { gap: 6px; margin-bottom: 4px; }
  body.in-game .boss-heading small { display: none; }
  body.in-game .boss-heading h2 { font-size: 14px; line-height: 18px; }
  body.in-game .boss-number { width: 23px; height: 24px; font-size: 14px; }
  body.in-game .boss-heading > span:last-child { padding: 3px; font-size: 10px; }
  body.in-game .boss-meter { height: 11px; }
  body.in-game .boss-meter b { font-size: 8px; line-height: 9px; }
  body.in-game .boss-status { margin-top: 3px; font-size: 8px; line-height: 11px; }
  body.in-game .telegraph {
    top: 75px;
    min-width: 180px;
    max-width: 94%;
    padding: 4px 7px;
    font-size: 10px;
    line-height: 13px;
  }
  body.in-game .telegraph b { font-size: 10px; line-height: 13px; }
  body.in-game .telegraph small { font-size: 8px; line-height: 11px; }
  body.in-game .boss-actor {
    height: min(50%, 190px);
    width: 45%;
    max-width: 220px;
    bottom: 12%;
  }
  body.in-game .hero-actor {
    height: min(39%, 160px);
    width: 27%;
    max-width: 180px;
    bottom: 12%;
  }
  body.in-game .hero-actor.lobby-actor {
    height: min(65%, 250px);
    bottom: 18%;
  }
  body.in-game .actor-label { font-size: 9px; line-height: 15px; max-width: 85px; }
  body.in-game .actor-job { font-size: 7px; top: calc(100% + 15px); }
  body.in-game .arena-caption { bottom: 5px; left: 9px; font-size: 6px; }
  body.in-game:not(.in-battle) .boss-hud { display: none; }
  body.in-game .camp-card {
    top: 38%;
    padding: 11px 16px;
    max-width: 94%;
  }
  body.in-game .camp-card h2 { font-size: 22px; letter-spacing: 2px; margin: 4px 0; }
  body.in-game .camp-card p { font-size: 10px; line-height: 16px; }
  body.in-game .camp-card .rewards { font-size: 10px; margin-top: 5px; }
  body.in-game .camp-card .eyebrow { font-size: 8px; }
  body.in-game .toast {
    bottom: max(8px, env(safe-area-inset-bottom, 0px));
    max-width: calc(100% - 24px);
  }
  body.in-game dialog {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overscroll-behavior: contain;
  }
  body.in-game dialog .dialog-heading {
    position: sticky;
    top: -20px;
    z-index: 2;
    padding-top: 8px;
    background: #faf2dc;
  }

  /* Short browser viewports need less chrome, not smaller touch targets. */
  @media (max-height: 620px) {
    body.in-game .topbar { flex-basis: 44px; height: 44px; min-height: 44px; }
    body.in-game .brand small { display: none; }
    body.in-game .expedition-bar { min-height: 44px; padding: 0 2px; }
    body.in-game .expedition-bar .eyebrow { display: none; }
    body.in-game .expedition-bar h1 { font-size: 13px; margin: 0; }
    body.in-game .party-panel { padding-top: 4px; padding-bottom: 4px; }
    body.in-game .member-info > small { display: none; }
    body.in-game .member-info .meter { margin-top: 3px; }
    body.in-game .control-foot > span { display: none; }
    body.in-game .control-foot .text-button { min-height: 24px; }
    body.in-game .rest-controls p { display: none; }
    body.in-game .hero-actor { bottom: 14%; }
    body.in-game .actor-job { display: none; }
  }
}

/* Short landscape screens keep combat and touch controls side by side. */
@media (max-width: 1100px) and (max-height: 500px) and (orientation: landscape) {
  body.in-game .battle-column {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 34%);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  body.in-game .arena { grid-column: 1; grid-row: 1 / 3; }
  body.in-game .control-panel { grid-column: 2; grid-row: 1; align-self: start; }
  body.in-game .rest-controls { grid-column: 2; grid-row: 2; }
  body.in-game .party-panel { max-height: 48px; }
  body.in-game .expedition-bar .eyebrow { display: block; }
  body.in-game .party-panel .member-status { display: none; }
  body.in-game .camp-card { top: 30%; }
}

/* Touch form fields should not trigger Safari's automatic input zoom. */
/* Repeated combat taps must not trigger double-tap zoom. Keep page/dialog scrolling. */
body.in-game, button, [role="button"] { touch-action: manipulation; }
.actors { --boss-clearance: 125px; }
@media (max-width: 820px) and (orientation: portrait) {
  .actors { --boss-clearance: 76px; }
}
.actors:not(.party-scene) .boss-actor { height: min(50%, max(40px, calc(88% - var(--boss-clearance)))); bottom: 12%; }
.actors.party-scene .hero-actor { height: min(28%, 130px); bottom: 11%; }
.actors.party-scene .boss-actor { height: min(36%, max(40px, calc(64% - var(--boss-clearance)))); bottom: 36%; }

@media (pointer: coarse) {
  #embark-form input { font-size: 16px; }
}