/* Mobile viewport contract. These rules own screen bounds, not room content. */
:root {
  --app-height: 100dvh;
  --app-width: 100vw;
  --viewport-top: 0px;
  --viewport-left: 0px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { width: 100%; height: 100%; overflow: hidden; }
#app, #device-overlay {
  position: fixed; left: var(--viewport-left); top: var(--viewport-top);
  width: var(--app-width); height: var(--app-height);
}
.game {
  height: 100% !important; width: 100%; min-width: 0;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
}
.main { height: auto; flex: 1 1 0; min-width: 0; }
button, a, select { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#save-status { display:none; position:fixed; z-index:10000; top:calc(var(--viewport-top) + var(--safe-top) + 6px); left:50%; transform:translateX(-50%); padding:6px 14px; border:1px solid #dfbd74; border-radius:20px; background:#172b41f2; color:#ffe0a1; font-size:12px; pointer-events:none; }
body.saving #save-status { display:block; }
#scene, #battle-canvas { touch-action: none; }
input, select, textarea { font-size: 16px !important; }
.topbar .install-button { min-height: 34px; padding: 3px 9px; font-size: 11px; }
.standalone .install-button { display: none; }
.veil {
  inset: auto; top: var(--viewport-top); left: var(--viewport-left);
  width: var(--app-width); height: var(--app-height);
  padding: max(6px,var(--safe-top)) max(6px,var(--safe-right)) max(6px,var(--safe-bottom)) max(6px,var(--safe-left));
}
.veil .modal {
  max-width: 100% !important; max-height: 100% !important;
  height: auto; min-height: 0;
}
.veil .commerce-modal, .veil .depth-modal, .veil .battle-modal { height: 100% !important; }
.veil .modal > header { flex: 0 0 36px; min-height: 36px; height: 36px; padding: 2px 10px !important; }
.veil .modal > header h2 { font-size: 16px; }
.veil .modal > header .eyebrow { display: none; }
.veil .modal > header .icon-button { height: 32px; width: 36px; min-height: 32px; padding: 4px; }
.veil .modal-body { min-height: 0; overscroll-behavior: contain; }
/* Forms may scroll with a keyboard open; their confirmation remains reachable. */
.veil .modal-body:has(>form) { overflow-y: auto !important; display: block; padding: 8px !important; }
.m-form { min-height: 100%; height: auto; }
.m-form-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
.commerce-modal .m-form-grid input, .commerce-modal .m-form-grid select { height: 34px; min-height: 34px; width: 100%; }
.m-form .m-modal-actions, .m-form > button[type=submit] { position: sticky; bottom: 0; z-index: 1; flex-shrink: 0; }
.m-form .m-modal-actions { padding-top: 4px; background: #f3eace; }
.keyboard-open .modal > header { flex-basis: 32px; }
.keyboard-open .modal-body:has(>form) { scroll-padding-bottom: 44px; }
.keyboard-open .m-form { padding-bottom: 4px; }
#toast { bottom: calc(var(--safe-bottom) + 5px) !important; }
#device-overlay { display: none; z-index: 25; background: #233b32; color: #f3ead2; padding: 24px; text-align: center; }
.phone-portrait #device-overlay { display: grid; place-content: center; gap: 15px; }
#device-overlay .rotate-symbol { font-size: 55px; color: #e3bf74; }
#device-overlay h2, #device-overlay p { margin: 0; }
#device-overlay p { line-height: 1.8; font-size: 14px; }
#device-overlay button { justify-self: center; }
.install-help { max-width: 650px; }
.install-help .modal-body { overflow-y: auto; font-size: 14px; line-height: 1.8; padding: 14px 20px; }
.install-help ol { margin: 8px 0; padding-left: 24px; }
.install-help li { padding: 3px 0; }
.welcome { height: 100%; min-height: 0; padding: max(10px,var(--safe-top)) max(10px,var(--safe-right)) max(10px,var(--safe-bottom)) max(10px,var(--safe-left)); }
.welcome-paper { max-height: 100%; overflow-y: auto; }
/* Below 345 usable pixels (Safari's expanded bars), rearrange instead of clipping. */
.short-screen .topbar { height: 36px !important; padding: 2px 10px; }
.short-screen .topbar .brand, .short-screen .topbar .icon-button, .short-screen .install-button { min-height: 30px; height: 30px; }
.short-screen .topbar .money { font-size: 20px; }
.short-screen .time-badge, .short-screen .connection span { display: none; }
.short-screen .d-room { padding: 4px 8px; gap: 4px; }
.short-screen .d-title { height: 28px; }
.short-screen .d-title h1 { font-size: 16px; }
.short-screen .d-title button { min-height: 28px; height: 28px; padding: 3px 9px; }
.short-screen .d-board { grid-template-rows: 26px 12px minmax(0,1fr) 24px 32px; gap: 2px; }
.short-screen .d-team-tabs button { min-height: 26px; height: 26px; }
.short-screen .d-synergies button { min-height: 24px; padding: 2px 5px; }
.short-screen .d-trial small { display: none; }
.short-screen .d-trial select { flex: 1; width: 0; height: 32px; }
.short-screen .d-trial button { height: 32px; }
.short-screen .d-cells { padding: 2px; gap: 2px; }
.short-screen .d-gear { display: grid; grid-template-columns: .85fr 1.15fr; grid-template-rows: 28px 30px minmax(0,1fr) 26px; gap: 3px; padding: 4px; }
.short-screen .d-gear > header, .short-screen .d-slots, .short-screen .d-gear > footer { grid-column: 1/-1; height: auto; }
.short-screen .d-gear > header { min-width: 0; }
.short-screen .d-gear > header small { font-size: 9px; }
.short-screen .d-equipped { min-width: 0; overflow: auto; }
.short-screen .d-equipped b, .short-screen .d-equipped p, .short-screen .d-equipped small { font-size: 10px; line-height: 1.35; }
.short-screen .d-gear-candidates { grid-template-columns: 1fr; }
.short-screen .d-gear-candidates article { grid-template-rows: minmax(25px,1fr) 30px; padding: 3px; }
.short-screen .d-gear-candidates article p { display: none; }
.short-screen .d-gear-candidates article button { min-height: 30px; }
.short-screen .d-gear-candidates .d-empty { font-size: 10px; line-height: 1.25; }
.short-screen .d-empty > small { display: none; }
.short-screen .d-gear > footer button { height: 26px; min-width: 40px; }
.d-pocket-tabs { display: none; }
.short-screen .d-node-sheet { display: grid; grid-template-rows: 25px minmax(0,1fr) 76px; gap: 3px; padding: 4px; }
.short-screen .d-node-sheet > header { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 4px; }
.short-screen .d-node-sheet > header h2 { font-size: 12px; line-height: 1.2; }
.short-screen .d-node-sheet > header small { display: none; }
.short-screen .d-pocket-tabs { display: flex; flex: none; gap: 2px; }
.short-screen .d-pocket-tabs button { height: 25px; min-height: 25px; font-size: 10px; padding: 2px 6px; }
.short-screen .d-node-sheet .d-enemy-hint, .short-screen .d-node-sheet .d-enemies, .short-screen .d-node-sheet .d-intel-actions { display: none; }
.short-screen .d-node-sheet .d-enemy-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-height: 0; }
.short-screen .d-enemy-panel .d-enemy-hint { display: block; font-size: 10px; }
.short-screen .d-enemy-panel .d-enemies, .short-screen .d-enemy-panel .d-intel-actions { display: flex; }
.short-screen .d-enemy-panel .d-enemies { height: 22px; }
.short-screen .d-enemy-panel .portrait { height: 22px; }
.short-screen .d-node-sheet[data-pocket=enemy] > .d-loot-preview, .short-screen .d-node-sheet[data-pocket=loot] > .d-enemy-panel { display: none; }
.short-screen .d-node-sheet > footer { grid-row: 3; }
.short-screen .d-route-rule { display: none; }
.short-screen .d-neighbors { height: 33px; font-size: 9px; padding: 2px 5px; }
.short-screen .d-route > button { min-height: 26px; height: 26px; }
.short-screen .d-route-map button { width: 87px; min-height: 44px; padding: 3px; }
.short-screen .d-route-map .d-node-symbol { font-size: 14px; }
.short-screen .d-route-map b { font-size: 9px; }
.d-enemy-panel { display: contents; }
.short-screen .d-node-sheet .d-loot-preview { grid-row: 2; grid-template-rows: 19px minmax(26px,1fr) 12px; }
.short-screen .m-room:not(.m-forge) { grid-template-rows: 28px 32px minmax(0,1fr) 28px; padding: 4px 8px; gap: 3px; }
.short-screen .m-summary { display: none; }
.short-screen .m-heading h1 { font-size: 16px; }
.short-screen .m-heading > div > small { display: none; }
.short-screen .m-heading button { min-height: 28px; height: 28px; }
.short-screen .m-toolbar select { width: 120px; height: 32px; padding: 2px; }
.short-screen .m-tabs button { min-height: 32px; height: 32px; padding: 3px 8px; }
.short-screen .m-grid:not(.m-demand-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); gap: 3px; }
.short-screen .m-grid:not(.m-demand-grid) > .m-card { grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 1px 8px; padding: 3px 6px; align-content: stretch; }
.short-screen .m-grid:not(.m-demand-grid) .m-card-top { grid-row: 1/-1; }
.short-screen .m-grid:not(.m-demand-grid) .m-card .m-effect { display: none; }
.short-screen .m-grid:not(.m-demand-grid) .m-card .m-affix { font-size: 10px; white-space: nowrap; align-self: end; }
.short-screen .m-grid:not(.m-demand-grid) .m-card .m-card-bottom { font-size: 9px; }
.short-screen .m-demand-grid .m-order { height: calc((100% - 9px)/4); }
.short-screen .m-pager, .short-screen .m-pager button { height: 28px; min-height: 28px; }
.short-screen .m-card-top > .item-art { width: 24px; height: 24px; }
.short-screen .m-market-layout { grid-template-columns: minmax(0,1fr) 145px; }
.short-screen .m-ledger .m-ledger-note { display: none; }
.short-screen .m-forge { grid-template-rows: 28px minmax(0,1fr); padding: 4px 8px; }
.short-screen .m-forge-layout { grid-template-columns: .65fr 1.35fr; }
.short-screen .m-craft-desk { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 34px 34px minmax(30px,1fr) 32px; padding: 4px; gap: 3px 7px; }
.short-screen .m-craft-title { grid-column: 1; }
.short-screen .m-craft-title .item-art { width: 23px; height: 25px; }
.short-screen .m-craft-title h2 { font-size: 14px; }
.short-screen .m-craft-title small { font-size: 9px; line-height: 1.2; }
.short-screen .m-focus-label { grid-column: 2; flex-direction: column; gap: 0; font-size: 9px; line-height: 1; align-items: stretch; }
.short-screen .m-focus-label select { height: 25px; max-width: 100%; width: 100%; padding: 0; }
.short-screen .m-inherit-row { grid-column: 1/-1; grid-row: 2; }
.short-screen .m-inherit-row select { flex: 1; min-width: 0; height: 32px; }
.short-screen .m-materials { grid-column: 1; grid-row: 3; gap: 2px; align-items: stretch; }
.short-screen .m-materials button { padding: 2px; font-size: 9px; flex-wrap: wrap; gap: 0; align-content: center; }
.short-screen .m-materials .item-art { width: 17px; height: 17px; }
.short-screen .m-craft-copy { grid-column: 2; grid-row: 3; flex-direction: column; justify-content: center; gap: 2px; font-size: 10px; }
.short-screen .m-craft-actions { grid-row: 4; grid-column: 1/-1; margin: 0; }
.short-screen .m-work-state { display: none; }
.short-screen .d-building-art { display: none; }
.short-screen .d-investments article { padding: 7px; gap: 4px; min-height: 0; }
.short-screen .d-investments article > p { font-size: 11px; line-height: 1.3; }
.short-screen .d-investments article > button { min-height: 32px; }
.short-screen .city-paper { display: none; }
.short-screen .scene-title h1 { font-size: 18px; }
.short-screen .scene-title p { display: none; }
.short-screen .fleet { bottom: 42px !important; }
.short-screen .news-ribbon { bottom: 4px !important; min-height: 30px; padding: 3px 7px; }
.short-screen .news-ribbon span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.short-screen .news-ribbon button { min-height: 28px; }
/* Keep the replaced item and its artwork visible in equipment comparisons. */
.short-screen .m-current, .short-screen .m-object-art { display: none; }
.short-screen .m-inspect:not(.m-craft-preview) .m-current { display: flex; min-height: 34px; padding: 3px 6px; gap: 5px; }
.short-screen .m-inspect:not(.m-craft-preview) .m-current .portrait { height: 27px; width: 23px; }
.short-screen .m-inspect:not(.m-craft-preview) .m-current b { font-size: 11px; line-height: 1.15; }
.short-screen .m-inspect:not(.m-craft-preview) .m-current small { font-size: 9px; line-height: 1.2; }
.short-screen .m-inspect:not(.m-craft-preview) .m-object-art { display: flex; flex: none; height: 44px; min-height: 44px; max-height: 44px; }
.short-screen .m-comparison > small { display: none; }
.short-screen .commerce-modal .modal-body { gap: 4px; padding: 5px !important; }
.short-screen .m-comparison { gap: 3px; }
.short-screen .m-stat-grid { gap: 3px; }
.short-screen .m-stat-grid > div { padding: 2px 5px; }
.short-screen .m-object { gap: 3px; padding: 6px; }
.short-screen .m-object h2 { font-size: 16px; }
.short-screen .m-object p { font-size: 11px; line-height: 1.3; }
.short-screen .m-modal-actions { min-height: 32px; flex: none; }
.short-screen .m-price-research { gap: 4px; }
.short-screen .m-price-research > div { padding: 4px; gap: 2px; }
.short-screen .d-battle-evidence > small { display: none; }
.short-screen .d-battle-evidence .d-score { padding: 2px; font-size: 9px; }
.short-screen .d-battle-evidence .d-combat-rows .portrait { height: 18px; width: 18px; }
.short-screen .d-battle-evidence .d-combat-rows { gap: 2px; }
.short-screen .d-battle-evidence .d-procs { gap: 2px; }
.short-screen .d-battle-evidence .d-procs > span { padding: 2px; }
.short-screen .d-battle-layout { gap: 5px; }
@media (max-width: 700px) {
  .m-form-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .topbar { gap: 5px; }
  .top-meta { gap: 6px; }
  .topbar .connection { display: none; }
  .short-screen .m-market-layout { grid-template-columns: minmax(0,1fr) 120px; }
  .short-screen .m-tabs button { font-size: 10px; padding: 2px 5px; }
  .short-screen .d-prep-layout { gap: 5px; }
}
.m-room .m-grid:not(.m-demand-grid) { grid-template-columns: repeat(var(--market-columns,4),minmax(0,1fr)); }
.short-screen .m-room .m-grid:not(.m-demand-grid) { grid-template-columns: repeat(2,minmax(0,1fr)); }
.short-screen .d-route-map button { height: 48px; overflow: hidden; line-height: 1.1; }
.short-screen .d-route-map button small { white-space: nowrap; font-size: 8px; }
.d-gear-candidates .d-candidate-info { background: none; border: 0; border-radius: 0; padding: 0; margin: 0; min-height: 20px; height: 20px; font-size: 11px; justify-content: flex-start; text-align: left; box-shadow: none; }
.short-screen .d-gear-candidates article .d-candidate-info { min-height: 24px; height: 24px; font-size: 11px; }
/* Reserve the seller and individual stats before allocating effect text. */
html:not(.short-screen) .m-grid:not(.m-demand-grid) > .m-card {
  grid-template-rows: 24px minmax(0,1fr) 12px 10px;
  gap: 1px; padding: 4px 6px;
}
html:not(.short-screen) .m-card .m-effect { min-height: 0; font-size: 10px; line-height: 1.2; }
html:not(.short-screen) .m-card .m-card-bottom { font-size: 9px; line-height: 10px; }
.touch-screen .d-roster-cards { grid-template-rows: minmax(0,1fr); }
.touch-screen .d-roster-cards article { grid-template-rows: 30px minmax(0,1fr) 32px; }
.touch-screen .d-roster-cards article > button { height: 32px; min-height: 32px; }
.short-screen .d-roster-toolbar button, .short-screen .d-report-tabs button { min-height: 30px; height: 30px; }
.short-screen .depth-modal .modal-body { padding: 6px 10px; gap: 5px; }
.short-screen .d-report-head { font-size: 10px; }
.short-screen .d-report-loot section { padding: 5px; }
.short-screen .d-report-loot h3 { margin-bottom: 3px; }
.short-screen .d-report-loot .item-art { height: 23px; width: 23px; }
.short-screen .d-report-loot section > div { font-size: 11px; }
.short-screen .d-report-loot p { font-size: 10px; line-height: 1.25; }
.short-screen .d-report-actions button { height: 30px; min-height: 30px; }
.short-screen .d-evidence { gap: 3px; }
.short-screen .d-evidence .d-score { padding: 3px 6px; font-size: 10px; }
.short-screen .d-evidence .d-combat-rows .portrait { height: 20px; width: 18px; }
.short-screen .d-evidence .d-combat-rows > div { font-size: 10px; gap: 5px; }
.short-screen .d-evidence .d-procs { font-size: 9px; gap: 3px; }
.short-screen .d-evidence .d-procs > span { padding: 2px 4px; }
.short-screen .d-evidence > small { font-size: 9px; }
.short-screen .d-fund-layout { gap: 8px; }
.short-screen .d-fund-layout section { padding: 5px; gap: 3px; }
.short-screen .d-fund-layout h2 { font-size: 14px; }
.short-screen .d-fund-layout p { font-size: 10px; line-height: 1.2; }
.short-screen .d-contributor { padding: 3px; }
.m-demand-grid .m-card-bottom span { display: block; max-width: 100%; }
.m-demand-grid .m-card-bottom span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-demand-grid .m-order .m-card-bottom { min-width: 0; width: 100%; gap: 0; line-height: 10px; font-size: 9px; }
.m-demand-grid .m-order .m-card-bottom span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }