/* Non-battle surfaces use the same design units on desktop and mobile.
   device.js supplies a local unit below theme.css's 40px rem floor; the battlefield's
   rem, HUD, shop and chat never inherit it. Text preferences still affect only text.
   Keep all information visible; scrolling handles large text and keyboard shrink. */
:is(.title-screen, .lobby-screen, .room-screen, .protocol-screen, .sweep-host, .lo, .st, .ach, .modal--utility, .guide, .studio) {
  --ui-unit: var(--sp-ui-unit, 1rem);
  --utility-text: calc(var(--t) * var(--sp-ui-scale, 1));
  --bk-l: calc(.14 * var(--ui-unit));
  font-size: calc(.18 * var(--utility-text));
}
.modal__titles { display: flex; flex-direction: column; gap: calc(.04 * var(--ui-unit, 1rem)); min-width: 0; }
.utility-modal {
  width: var(--utility-width, calc(6.4 * var(--ui-unit, 1rem))); max-width: 100%; min-height: 0;
}
.utility-modal.resource-modal { width: min(calc(9.6 * var(--ui-unit)), 100%); }
.modal--utility {
  top: var(--sp-vtop, 0px); left: var(--sp-vleft, 0px); bottom: auto;
  height: calc(var(--sp-vh, 1vh) * 100);
  padding: calc(var(--sa-t, 0px) + .2 * var(--ui-unit)) calc(var(--sa-r, 0px) + .2 * var(--ui-unit))
    calc(var(--sa-b, 0px) + .2 * var(--ui-unit)) calc(var(--sa-l, 0px) + .2 * var(--ui-unit));
}
.modal--utility .utility-modal {
  max-height: calc(var(--sp-vh, 1vh) * 100 - var(--sa-t, 0px) - var(--sa-b, 0px) - .4 * var(--ui-unit));
}
.utility-modal .modal__head { flex: none; flex-direction: row; align-items: center; justify-content: space-between; gap: calc(.15 * var(--ui-unit)); }
.utility-modal .modal__title { overflow-wrap: anywhere; }
.utility-modal .modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
.utility-modal .modal__actions { flex: none; flex-wrap: wrap; }
.utility-modal__close {
  display: grid; place-items: center; flex: none; width: calc(.5 * var(--ui-unit)); height: calc(.5 * var(--ui-unit));
  padding: 0; background: var(--bg-1); border: 1px solid var(--line-2); color: var(--text-md);
}
.utility-modal__close .icon { width: 50%; height: 50%; }
.utility-modal__close:hover { color: var(--mint-400); border-color: var(--mint-700); }
/* The outer viewport owns safe areas exactly once. Full-page protocol/report children already have padding. */
.screen:is(.protocol-screen, .sweep-host) {
  top: var(--sp-vtop, 0px); left: var(--sp-vleft, 0px); right: 0; bottom: auto;
  height: calc(var(--sp-vh, 1vh) * 100);
}
:is(.title-screen, .lobby-screen, .room-screen) {
  top: calc(var(--sp-vtop, 0px) + var(--sa-t, 0px)); bottom: auto;
  height: calc(var(--sp-vh, 1vh) * 100 - var(--sa-t, 0px) - var(--sa-b, 0px));
}
:is(.lo, .guide, .ach) { top: var(--sp-vtop, 0px); bottom: auto; height: calc(var(--sp-vh, 1vh) * 100); }
.st {
  --stats-height: min(calc(7.8 * var(--ui-unit)), calc(var(--sp-vh, 1vh) * 100 - var(--sa-t, 0px) - var(--sa-b, 0px)));
  top: calc(var(--sp-vtop, 0px) + (var(--sp-vh, 1vh) * 100 - var(--stats-height)) / 2);
  bottom: auto; margin-block: 0; height: var(--stats-height);
}
.st--replay { top: var(--sp-vtop, 0px); height: calc(var(--sp-vh, 1vh) * 100); max-height: none; }
/* Keep actual, non-overlapping targets. Never expand a hit box over a neighbouring control. */
.sp-coarse :is(.utility-modal, .lo, .st, .lobby-screen, .room-screen, .title-screen, .guide, .ach, .studio) :is(.btn, .tabs__tab, .set-toggle, .set-seg button, .fsbtn)::before {
  inset: 0; width: 100%; height: 100%; transform: none;
}
.utility-modal :is(.btn, .set-toggle, .set-seg button, .set-native, .shortcut-key) { height: auto; min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.utility-modal .btn { min-height: calc(.5 * var(--ui-unit)); padding-block: calc(.06 * var(--ui-unit)); }
.utility-modal :is(.set-toggle, .set-seg button, .set-native, .shortcut-key) { min-height: calc(.38 * var(--ui-unit)); padding-block: calc(.04 * var(--ui-unit)); }
.settings-modal .set-row, .settings-shortcuts-modal .shortcut-row { min-width: 0; }
.settings-modal .set-row > .btn { grid-column: 2 / 4; justify-self: start; }
.settings-modal .set-seg, .settings-modal .set-voice { min-width: 0; max-width: 100%; }
.settings-modal .set-row__label .icon { flex: none; width: 1.15em; height: 1.15em; }
.settings-modal .set-toggle i { flex: none; }
.settings-modal .set-diag__text { min-height: calc(1.2 * var(--ui-unit)); }
.settings-modal .set-seg--fps button { min-width: 0; }
/* Settings actions use the same compact scale as toggles; generic utility .btn
   sizing must not enlarge small diagnostic buttons or the shortcut editor. */
:is(.settings-modal, .settings-shortcuts-modal) .btn {
  min-height: calc(.36 * var(--ui-unit)); height: auto; padding: calc(.04 * var(--ui-unit)) calc(.12 * var(--ui-unit));
  gap: calc(.08 * var(--ui-unit)); font-size: calc(.15 * var(--utility-text)); line-height: 1.25; letter-spacing: .02em;
}
.settings-modal .set-keys__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: calc(.08 * var(--ui-unit)); }
.settings-modal .set-lang-picker { position: relative; display: inline-block; width: fit-content; border: 0; }
.settings-modal .set-lang-picker :is(.set-lang__trigger, .set-lang__option) {
  min-width: 0; min-height: calc(.36 * var(--ui-unit)); height: auto; padding: calc(.04 * var(--ui-unit)) calc(.12 * var(--ui-unit));
  font-size: calc(.16 * var(--utility-text)); line-height: 1.25; white-space: normal; overflow-wrap: anywhere;
}
.settings-modal .set-lang-picker .set-lang__trigger { display: inline-flex; align-items: center; gap: calc(.1 * var(--ui-unit)); max-width: 100%; border: 1px solid var(--line-2); }
.settings-modal .set-lang__trigger .icon { width: 1em; height: 1em; transform: rotate(90deg); }
.settings-modal .set-lang__list {
  position: absolute; top: calc(100% + .04 * var(--ui-unit)); left: 0; z-index: 2;
  width: max(100%, calc(1.6 * var(--ui-unit))); max-height: min(calc(3.2 * var(--ui-unit)), 40vh);
  overflow-y: auto; overscroll-behavior: contain; background: var(--bg-1); border: 1px solid var(--line-2);
}
.settings-modal .set-lang-picker .set-lang__option { display: block; width: 100%; text-align: left; border: 0; }
.settings-modal .set-lang__option:hover, .settings-modal .set-lang__option:focus-visible { color: var(--text-hi); background: var(--bg-3); }
.settings-modal .set-lang__option.is-on { color: var(--text-on-mint); background: var(--mint-500); }
.utility-modal .btn__icon { flex: none; width: 1.15em; height: 1.15em; }
.utility-modal .console-ui { min-height: 0; }
.utility-modal .console-ui__list { max-height: none; }
.utility-modal .console-ui__tabs, .utility-modal .console-ui__amount, .utility-modal .console-ui__presets { flex-wrap: wrap; }
.resource-manager__pack-progress { gap: calc(.1 * var(--ui-unit)); }
.resource-manager__pack-progress small { font-size: calc(.12 * var(--utility-text)); white-space: normal; overflow-wrap: anywhere; }
.resource-modal .resource-choice { min-height: calc(.44 * var(--ui-unit)); white-space: normal; }
.resource-choice input { flex: none; width: calc(.18 * var(--ui-unit)); height: calc(.18 * var(--ui-unit)); margin: 0; }
.utility-modal .resource-manager__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.title-screen .title-login { max-width: calc(100% - .4 * var(--ui-unit)); }
.title-screen .title-main { flex-shrink: 0; }
.title-screen :is(.title-settings, .title-fs) { width: calc(.4 * var(--ui-unit)); height: calc(.4 * var(--ui-unit)); }
.title-screen .fsbtn .icon { width: 50%; height: 50%; }
.title-screen { overflow-y: auto; }
.lobby-hub > .hub-topbar { grid-template-columns: minmax(0, 1fr) auto; height: auto; min-height: calc(1.1 * var(--ui-unit)); }
.lobby-hub > .hub-topbar .topbar__left { flex-wrap: wrap; }
.lobby-hub .hub-stage { overflow-y: auto; }
.lobby-hub .hub-side .tips { display: block; }
.lobby-hub .hub-entries__row { flex-wrap: wrap; justify-content: flex-end; }
/* The room header retains a single row, with space based on the controls' intrinsic widths. */
.room-screen .topbar {
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "controls title invite";
  height: auto; min-height: calc(1.1 * var(--ui-unit)); gap: calc(.14 * var(--ui-unit)); padding: calc(.12 * var(--ui-unit)) calc(.2 * var(--ui-unit));
}
.room-screen .topbar__left { grid-area: controls; min-width: 0; flex-wrap: nowrap; overflow: visible; gap: calc(.1 * var(--ui-unit)); }
.room-screen .topbar__center { grid-area: title; min-width: 0; }
.room-screen .topbar__title { justify-content: center; flex-wrap: wrap; overflow-wrap: anywhere; font-size: calc(.25 * var(--utility-text)); }
.room-screen .topbar__title { white-space: normal; }
.room-screen .topbar__right { grid-area: invite; min-width: 0; max-width: 100%; }
.room-screen .room-topbar__tools .btn--square { min-height: calc(.5 * var(--ui-unit)); }
.room-screen .room-ping { min-width: 0; overflow: visible; }
.room-screen .connection-status { flex-wrap: nowrap; overflow: visible; }
:is(.lobby-screen, .room-screen) :is(.topbar__tools, .room-topbar__tools) { display: flex; flex: none; flex-wrap: nowrap; gap: calc(.1 * var(--ui-unit)); }
:is(.lobby-screen, .room-screen) :is(.topbar__tools, .room-topbar__tools) > .btn {
  flex: none; width: calc(.5 * var(--ui-unit)); height: calc(.5 * var(--ui-unit)); min-width: calc(.5 * var(--ui-unit)); padding: 0;
}
:is(.lobby-screen, .room-screen) :is(.topbar__tools, .room-topbar__tools) .btn__icon { width: 50%; height: 50%; }
.room-screen .invite { gap: calc(.06 * var(--ui-unit)); padding: calc(.08 * var(--ui-unit)); }
.room-screen .invite__code { gap: .06em; }
.room-screen .invite__code span { width: .85em; height: 1.2em; font-size: calc(.32 * var(--utility-text)); }
.room-screen .seats { grid-template-columns: repeat(4, minmax(0, calc(3.2 * var(--ui-unit)))); padding: calc(.2 * var(--ui-unit)); gap: calc(.2 * var(--ui-unit)); grid-template-rows: auto; align-content: start; overflow-y: auto; }
.room-screen .seats--solo { grid-template-columns: calc(3.2 * var(--ui-unit)) minmax(0, calc(6.4 * var(--ui-unit))); }
.room-screen .solo-brief { min-height: 0; overflow-y: auto; }
.room-screen .room-bar { height: auto; min-height: calc(1.2 * var(--ui-unit)); gap: calc(.2 * var(--ui-unit)); padding: calc(.12 * var(--ui-unit)) calc(.25 * var(--ui-unit)); }
.room-screen .room-bar__left, .room-screen .room-bar__right, .room-screen .dpick { flex-wrap: wrap; }
.room-screen .room-loadout { max-width: 100%; white-space: normal; }
.room-screen .room-bar .btn--xl { min-width: 0; }
.room-screen--coop { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.room-screen--coop .seats { flex: 1 0 calc(3.6 * var(--ui-unit)); min-height: calc(3.6 * var(--ui-unit)); }
.lo-top, .st-top { height: auto; min-height: calc(1 * var(--ui-unit)); }
.lo--deck .lo-top--deck { height: auto; min-height: calc(1.2 * var(--ui-unit)); flex-shrink: 0; }
.lo--deck .lo-top__right { flex-wrap: wrap; gap: calc(.1 * var(--ui-unit)); }
.lo--deck .lo-deck { touch-action: pan-x; }
.lo-note, .st-note, .st-note.is-warn { display: flex; }
.lo-card__bonds { display: flex; }
.lo-skins { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(1.5 * var(--ui-unit))), 1fr)); gap: calc(.06 * var(--ui-unit)); }
.lo-skin { min-width: 0; max-width: none; }
.ach { padding: var(--sa-t, 0px) var(--sa-r, 0px) var(--sa-b, 0px) var(--sa-l, 0px); }
.ach__box { max-width: calc(100vw - var(--sa-l, 0px) - var(--sa-r, 0px) - .4 * var(--ui-unit)); max-height: calc(var(--sp-vh, 1vh) * 100 - var(--sa-t, 0px) - var(--sa-b, 0px) - .4 * var(--ui-unit)); }
.ach-mark__text small { white-space: normal; overflow-wrap: anywhere; }
.sweep-host .sw-top, .sweep-host .sw-codex__top { min-height: calc(1 * var(--ui-unit)); padding-block: calc(.06 * var(--ui-unit)); }
.sweep-host .sw-tabs { overflow-x: auto; }
.sweep-host .sw-stat__k { white-space: normal; }
.sweep-host .sw-search { min-width: 0; max-width: 100%; }
.sweep-host .sw-search input { min-width: 0; }
.sweep-host .sw-tile__cap { display: block; white-space: normal; }
.guide__box { max-width: calc(100vw - var(--sa-l, 0px) - var(--sa-r, 0px) - .4 * var(--ui-unit)); max-height: calc(var(--sp-vh, 1vh) * 100 - var(--sa-t, 0px) - var(--sa-b, 0px) - .4 * var(--ui-unit)); min-height: 0; overflow: hidden; }
.guide__chapters, .guide__dots { min-width: 0; overflow-x: auto; }
.guide__head, .guide__foot { flex: none; }
.guide__stage { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.guide__chapter, .guide__dot { flex: none; }
.guide__stage--text { min-height: 0; overflow-y: auto; touch-action: pan-y; }
.guide__page { width: min(calc(100vw - var(--sa-l, 0px) - var(--sa-r, 0px) - .8 * var(--ui-unit)), calc((var(--sp-vh, 1vh) * 100 - var(--sa-t, 0px) - var(--sa-b, 0px) - 2.6 * var(--ui-unit)) * 16 / 9)); }
/* Native controls are the one deliberate pixel floor: iOS must not zoom on focus. */
@media (pointer: coarse), (any-pointer: coarse) {
  :is(.title-screen, .lobby-screen, .room-screen, .utility-modal, .lo, .st, .sweep-host, .studio) :is(input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), textarea, select) { font-size: max(calc(.16 * var(--utility-text)), 16px); }
  :is(.title-screen, .lobby-screen, .room-screen, .utility-modal, .lo, .st, .sweep-host, .studio) :is(input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), select) { min-height: 1.6em; height: auto; max-width: 100%; }
  :is(.title-screen, .utility-modal, .lo) .field__box { height: auto; min-height: 28px; }
  .utility-modal .set-range { height: calc(.5 * var(--ui-unit)); border-block: calc(.2 * var(--ui-unit)) solid transparent; border-inline: 0; background-clip: padding-box; }
}
/* Truly narrow windows retain all controls and content. Phones still use the global landscape gate. */
@media (max-aspect-ratio: 1/1) {
  .resource-manager__options, .utility-modal .resource-manager__tiers { grid-template-columns: minmax(0, 1fr); }
  .room-screen .seats { grid-template-columns: repeat(2, minmax(0, calc(3.2 * var(--ui-unit)))); grid-auto-rows: auto; }
  .room-screen .seats--solo { grid-template-columns: minmax(0, 1fr); }
  .room-screen .topbar__left { flex-wrap: wrap; }
  .room-screen .connection-status { flex-wrap: wrap; }
  .room-screen .room-bar { grid-template-columns: minmax(0, 1fr); }
  .room-screen .room-bar__right { justify-self: stretch; flex-wrap: wrap; }
  .lo-body { grid-template-columns: minmax(0, 1fr); }
  .lo-detail-wrap { display: none; }
  .lo-body.is-detail .lo-roster { display: none; }
  .lo-body.is-detail .lo-detail-wrap { display: flex; }
  .lo-detail-back { display: inline-flex; }
}
/* Existing in-battle damage panel behaviour remains unchanged. */
@media (max-width: 1000px), (max-height: 600px) {
  .combat-metrics {
    width: min(max(7.2rem, 360px), calc(100vw - var(--sa-l, 0px) - var(--sa-r, 0px) - .48rem));
    height: min(10rem, var(--combat-available-height, 240px));
    max-height: min(10rem, var(--combat-available-height, 240px));
  }
  .combat-metrics[data-viewport-docked="true"] {
    position: fixed; left: calc(var(--sa-l, 0px) + .24rem);
    top: var(--combat-viewport-top, calc(var(--sa-t, 0px) + 6px)); bottom: auto;
    height: min(10rem, var(--combat-viewport-height, calc(100dvh - var(--sa-t, 0px) - var(--sa-b, 0px) - 12px)));
    max-height: min(10rem, var(--combat-viewport-height, calc(100dvh - var(--sa-t, 0px) - var(--sa-b, 0px) - 12px)));
  }
  .combat-metrics__head { flex-wrap: nowrap; padding: .1rem .2rem; gap: .15rem; }
  .combat-metrics__head > div:first-child { min-width: 0; }
  .combat-metrics__head h2 { font-size: calc(.2 * var(--utility-text, var(--t))); overflow-wrap: anywhere; }
  .combat-metrics__micro { display: none; }
  .combat-metrics__close { order: 1; width: .7rem; min-width: .7rem; height: .7rem; min-height: .7rem; }
  .combat-metrics__body { display: flex; flex-direction: column; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  .combat-metrics__head > .combat-metrics__tools { flex: 1 1 0; min-width: 0; padding: 0; }
  .combat-metrics__scopes button { min-height: .7rem; padding: .075rem .15rem; white-space: normal; overflow-wrap: anywhere; }
  .combat-metrics__totals { padding: 0 .2rem .1rem; gap: .15rem; }
  .combat-metrics__totals b { font-size: calc(.16 * var(--utility-text, var(--t))); }
  .combat-metrics__legend { gap: .075rem .2rem; padding: 0 .2rem .1rem; }
  .combat-metrics__list { order: -1; flex: none; min-height: 0; padding: 0 .2rem; overflow: visible; }
  .combat-metrics__row { grid-template-columns: .4rem .65rem minmax(0, 1fr); padding: .1rem 0; gap: .125rem; }
  .combat-metrics__row > .uthumb { width: .65rem; height: .65rem; }
  .combat-metrics__bar { margin: .075rem 0; height: .1rem; }
  .combat-metrics__values { gap: .1rem; }
  .combat-metrics__values span { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .05rem .1rem; }
  .combat-metrics__values b { font-size: calc(.13 * var(--utility-text, var(--t))); }
  .combat-metrics__note { padding: .1rem .2rem; font-size: calc(.1 * var(--utility-text, var(--t))); line-height: 1.3; }
  .combat-metrics__note br { display: none; }

}

/* The new HUD frame must not reserve desktop minimum widths on short landscape phones. */
@media (max-width: 1000px), (max-height: 600px) {
  .gtop__band { grid-template-columns: auto auto auto; }
  .gtop__half { padding-inline: .12rem; }
  .gtop__plus { display: none; }
  .gtop__frame { padding-inline: .06rem; }
  .gtop__cap .capsule--boss { min-width: 3.2rem; }
}