/* Shared Day Operations surfaces. Scope every rule to menus and previews. */
:is(#page-overlay, #settings, #pause, #lobby) {
  scrollbar-width: none;
}

:is(
  #page-content,
  #settings-rows,
  .collection-track,
  #settings-tabs,
  .lobby-workspace
) {
  scrollbar-width: none !important;
  scrollbar-gutter: auto !important;
}

:is(
  #page-content,
  #settings-rows,
  .collection-track,
  #settings-tabs,
  .lobby-workspace
)::-webkit-scrollbar {
  display: none;
}

body:not(.layout-editor) #page-content {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 2px 20px;
  scroll-behavior: smooth;
}

body:not(.layout-editor) :is(#page-overlay, #settings) .page-shell,
body:not(.layout-editor) #settings .settings-shell {
  min-width: 0;
}

body:not(.layout-editor) #page-content .section-tabs {
  min-height: 40px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
}

body:not(.layout-editor) #page-content .section-tabs button {
  flex: 1;
  padding: 11px 16px;
  min-height: 40px;
  font-size: 15px;
  white-space: normal;
}

.collection {
  min-width: 0;
  margin: 0 0 20px;
}

.collection-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.collection-heading > span {
  font:
    600 12px Rajdhani,
    sans-serif;
  letter-spacing: 0.17em;
  color: #c9d5c5;
}

.collection-heading nav {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.collection-heading button,
.model-toolbar button {
  width: 34px;
  min-height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #dce6cf36;
  background: #0b1721d9;
  color: #e9efda;
  font:
    500 24px/1 Rajdhani,
    sans-serif;
}

.collection-heading button:hover,
.model-toolbar button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: #d7ff3e12;
}

.collection-heading button:disabled {
  opacity: 0.3;
}

.collection-heading output {
  min-width: 62px;
  text-align: center;
  color: #b5c4b2;
  font:
    600 12px Rajdhani,
    sans-serif;
  letter-spacing: 0.07em;
}

.collection-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 24px) / 3);
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  overscroll-behavior-x: contain;
  padding: 4px;
  margin: 0;
  position: relative;
}

.collection-track > * {
  min-width: 0;
  scroll-snap-align: start;
}

.collection-track:focus-visible {
  outline-offset: -2px;
}

.weapon-collection .collection-track {
  grid-auto-columns: calc((100% - 48px) / 5);
}

.weapon-choice {
  display: flex;
  align-items: center;
  position: relative;
  gap: 12px;
  min-height: 76px;
  text-align: left;
  padding: 14px 12px;
  border: 1px solid #dce6cf2b;
  background: #0b1721e8;
  color: #f2f3e6;
}

.weapon-choice > svg {
  width: 56px;
  height: 27px;
  flex: none;
  color: #c3cdc0;
}

.weapon-choice > span {
  min-width: 0;
}

.weapon-choice strong {
  display: block;
  font:
    600 19px Barlow,
    sans-serif;
  letter-spacing: 0.025em;
}

.weapon-choice small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #a8b8aa;
  margin-top: 5px;
}

.weapon-choice i {
  position: absolute;
  right: 7px;
  top: 5px;
  font:
    600 11px Rajdhani,
    sans-serif;
  letter-spacing: 0.13em;
  color: #819486;
}

.weapon-choice.selected,
.operator-choice.selected {
  border-color: var(--accent);
  background: linear-gradient(120deg, #d7ff3e17, #0b1721f0);
  box-shadow: inset 0 -2px var(--accent);
}

.weapon-choice.selected :is(strong, i),
.operator-choice.selected > strong {
  color: var(--accent);
}

.model-workbench,
.battlefield-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr);
  gap: 0;
  border: 1px solid #dce6cf32;
  background: #0b1721e8;
}

.model-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  background: radial-gradient(ellipse at 50% 45%, #59707630, transparent 70%);
}

.model-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px 0;
}

.model-heading .eyebrow {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #abbda9;
}

.model-heading h3 {
  font:
    600 clamp(26px, 3vw, 40px)/1 Barlow,
    sans-serif;
  margin: 9px 0 0;
  color: #f4f3e9;
}

.issue-badge {
  font:
    600 11px Rajdhani,
    sans-serif;
  letter-spacing: 0.09em;
  padding: 8px 10px;
  border: 1px solid #d7ff3e52;
  background: #d7ff3e09;
  color: #d7ff3e;
  white-space: nowrap;
}

.model-stage {
  position: relative;
  height: clamp(200px, 28vh, 380px);
  min-height: 200px;
  flex: 1 1 auto;
  overflow: hidden;
}

.model-stage:before {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  pointer-events: none;
  background:
    linear-gradient(transparent, #0a151d4d),
    repeating-linear-gradient(0deg, transparent 0 29px, #cedfdd09 30px),
    repeating-linear-gradient(90deg, transparent 0 59px, #cedfdd09 60px);
  transform: perspective(250px) rotateX(40deg) scale(1.3);
  transform-origin: bottom;
}

.model-stage canvas {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: pan-y;
  cursor: grab;
}

.model-stage canvas:active {
  cursor: grabbing;
}

.model-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  gap: 12px;
  padding: 12px 22px;
  border-top: 1px solid #dce6cf1d;
}

.model-toolbar > span {
  color: #93a89c;
  font-size: 11px;
  letter-spacing: 0.13em;
}

.model-toolbar > div {
  display: flex;
  gap: 6px;
}

.model-toolbar button[data-view="reset"] {
  width: auto;
  padding: 0 12px;
  font:
    600 12px Rajdhani,
    sans-serif;
  letter-spacing: 0.1em;
}

.model-intel,
.weapon-info.model-intel {
  padding: 24px;
  background: linear-gradient(135deg, #182a33bd, #0b1620cc);
  border: 0;
  border-left: 1px solid #dce6cf32;
  min-width: 0;
}

.model-intel > .eyebrow {
  font-size: 11px;
  color: #b8c7ad;
  letter-spacing: 0.17em;
}

.model-intel > h3 {
  font:
    600 28px/1.05 Barlow,
    sans-serif;
  color: #edf0de;
  margin: 10px 0 12px;
}

.model-intel > p,
.model-intel .weapon-description {
  font:
    400 15px/1.65 Rajdhani,
    sans-serif;
  color: #bfccbf;
  margin: 0 0 18px;
  max-width: none;
}

.weapon-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin: 0 0 22px;
}

.weapon-stats .weapon-stat {
  display: block;
  width: auto;
  margin: 0;
}

.weapon-stats .weapon-stat > span {
  font-size: 11px;
  letter-spacing: 0.12em;
}

.weapon-stats .weapon-stat > div {
  margin-top: 6px;
  height: 3px;
  background: #dce6cf20;
}

.weapon-stats .weapon-stat i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.optic-label {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 11px;
  color: #a6b8a3;
  letter-spacing: 0.09em;
}

.optic-label b {
  color: #dbe5ca;
  font-weight: 500;
}

.model-intel .optic-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 10px 0 18px;
  border: 0;
}

.model-intel .optic-options button {
  flex: 1 0 auto;
  min-height: 34px;
  padding: 8px 11px;
  border: 1px solid #dce6cf35;
  font:
    600 12px Rajdhani,
    sans-serif;
  letter-spacing: 0.04em;
}

.model-intel .optic-options button.selected {
  background: #d7ff3e17;
  border-color: var(--accent);
  color: var(--accent);
}

.platform-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  border-top: 1px solid #dce6cf26;
  padding: 15px 0;
  margin: 0;
}

.platform-facts > div {
  flex: 1 0 auto;
}

.platform-facts dt {
  font-size: 11px;
  color: #93a890;
  letter-spacing: 0.12em;
}

.platform-facts dd {
  font:
    600 15px Rajdhani,
    sans-serif;
  color: #e3ead8;
  margin: 5px 0 0;
}

.model-intel > .accent-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 12px 14px;
  font:
    600 13px Barlow,
    sans-serif;
}

@media (min-width: 701px) {
  body:not(.layout-editor) :is(#page-overlay, #settings) .page-brandbar {
    min-height: 42px;
    margin-bottom: 14px;
    padding-bottom: 8px;
  }

  body:not(.layout-editor) :is(#page-overlay, #settings) .page-brandbar img {
    height: 40px;
    width: 126px;
  }

  body:not(.layout-editor) :is(#page-overlay, #settings) .page-header {
    min-height: 58px;
    margin-bottom: 16px;
  }

  body:not(.layout-editor) :is(#page-overlay, #settings) .page-header h2 {
    font-size: clamp(34px, 4.4vw, 58px);
  }

  .weapon-collection {
    margin-bottom: 14px;
  }

  .weapon-choice {
    min-height: 66px;
    padding: 11px 12px;
  }

  .weapon-info.model-intel {
    padding: 16px 20px;
  }

  .weapon-info.model-intel > .eyebrow {
    margin-bottom: 12px;
  }

  .weapon-info.model-intel > h3 {
    font-size: 26px;
    margin: 8px 0 10px;
  }

  .weapon-info.model-intel .weapon-description {
    margin: 0 0 14px;
    line-height: 1.5;
  }

  .weapon-info.model-intel .weapon-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
  }

  .weapon-info.model-intel .weapon-stat span {
    font-size: 11px;
    letter-spacing: 0.04em;
  }

  .weapon-info.model-intel .optic-options {
    margin: 9px 0 12px;
  }

  .weapon-info.model-intel .optic-options button {
    padding: 7px 8px;
    min-height: 31px;
    font-size: 12px;
  }

  .weapon-info.model-intel .platform-facts {
    padding: 12px 0;
  }

  .weapon-info.model-intel > .accent-button {
    min-height: 40px;
    padding: 10px 12px;
  }
}

.loadout-equipment {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 13px 2px 0;
  color: #a8bca5;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.loadout-equipment > span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.loadout-equipment svg {
  width: 15px;
  height: 15px;
  color: #c2d1b6;
}

.operator-choice {
  position: relative;
  padding: 18px 16px;
  background: #0b1721e6;
  border: 1px solid #dce6cf30;
  text-align: left;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 4px 12px;
}

.operator-choice > span {
  position: absolute;
  right: 12px;
  top: 10px;
  color: #899f92;
  font-size: 11px;
}

.operator-choice > svg {
  grid-row: 1/3;
  align-self: center;
  width: 26px;
  height: 30px;
  color: #b2c8b1;
}

.operator-choice > strong {
  font:
    600 23px Barlow,
    sans-serif;
}

.operator-choice > small {
  font-size: 11px;
  color: #a9bda9;
  letter-spacing: 0.12em;
}

.operator-stage {
  min-height: 310px;
  height: 40vh;
}

.operator-intel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.operator-intel > .accent-button {
  margin-top: 12px;
}

/* Each mode keeps its illustration, title and briefing in one clickable card. */
#page-content .mode-collection .mode-card {
  height: clamp(240px, 29vh, 330px);
  min-height: 240px;
  padding: 22px;
  border: 1px solid #dce6cf36;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
}

#page-content .mode-card:before {
  background-position: center;
  filter: saturate(0.55);
  opacity: 0.6;
}

#page-content .mode-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #08151bf2, transparent 100%);
  z-index: -1;
}

#page-content .mode-card > small {
  position: relative;
  top: auto;
  left: auto;
  margin-bottom: auto;
  font-size: 12px;
}

#page-content .mode-card > .selected-label {
  top: 18px;
  right: 16px;
  left: auto;
  bottom: auto;
  font-size: 11px;
}

#page-content .mode-card > svg {
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
}

#page-content .mode-card > h3 {
  font:
    600 clamp(23px, 2.5vw, 34px)/1 Barlow,
    sans-serif;
  margin: 0 0 9px;
}

#page-content .mode-card > p {
  font:
    400 15px/1.5 Rajdhani,
    sans-serif;
  max-width: 330px;
  margin: 0;
  color: #c5d3c4;
}

#page-content .mode-card.selected {
  border-color: var(--accent);
  box-shadow: inset 0 -3px var(--accent);
}

.deployment-panel {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  border: 1px solid #dce6cf30;
  background: #0b1721e8;
}

.deployment-map {
  display: flex;
  align-items: center;
  gap: 24px;
  text-align: left;
  padding: 0;
  min-width: 0;
}

.deployment-map img {
  width: 34%;
  height: 160px;
  object-fit: cover;
}

.deployment-map > span {
  padding: 15px 12px 15px 0;
}

.deployment-map small {
  font-size: 11px;
  letter-spacing: 0.11em;
  color: #a9bf9e;
  display: block;
}

.deployment-map strong {
  font:
    600 30px Barlow,
    sans-serif;
  display: block;
  margin: 10px 0;
}

.deployment-map b {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.deployment-options {
  border-left: 1px solid #dce6cf30;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

:is(.deployment-options, .map-intel) > label {
  display: block;
  color: #aebfa8;
  font-size: 11px;
  letter-spacing: 0.12em;
}

:is(.deployment-options, .map-intel) select {
  display: block;
  width: 100%;
  padding: 10px;
  background: #101e27;
  color: #e4e9d9;
  border: 1px solid #dce6cf40;
  font:
    500 15px Rajdhani,
    sans-serif;
  margin-top: 7px;
  min-height: 38px;
}

.deployment-options .accent-button {
  min-height: 44px;
  padding: 12px 15px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.battlefield-layout {
  margin-bottom: 22px;
}

.battlefield-art {
  min-height: 360px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  padding: 30px;
}

.battlefield-art > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.battlefield-art:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, #09131ee8, transparent 85%);
  z-index: -1;
}

.battlefield-art .eyebrow {
  font-size: 11px;
}

.battlefield-art h3 {
  font:
    700 clamp(38px, 5vw, 76px)/0.88 Barlow,
    sans-serif;
  margin: 12px 0 22px;
  color: #f2f3e6;
}

.map-intel > label {
  margin: 12px 0;
}

.map-intel .platform-facts {
  padding-bottom: 3px;
}

.map-intel > .accent-button {
  margin-top: 18px;
}

.sector-card {
  background: #0b1721e8;
  border: 1px solid #dce6cf30;
  display: grid;
  grid-template-columns: 35% minmax(0, 1fr);
}

.sector-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sector-card > div {
  padding: 18px;
}

.sector-card small {
  color: #a5bc9a;
  font-size: 11px;
  letter-spacing: 0.12em;
}

.sector-card h3 {
  font:
    600 20px Barlow,
    sans-serif;
  margin: 8px 0;
}

.sector-card p {
  font:
    400 14px/1.6 Rajdhani,
    sans-serif;
  color: #b9cbb7;
}

/* Carry the same panel system through secondary screens and settings. */
body:not(.layout-editor)
  #page-content
  :is(
    .profile-identity,
    .stat-cell,
    .store-card,
    .event-row,
    .control-item,
    .menu-grid > button,
    .credits-content
  ) {
  border-color: #dce6cf30;
  border-radius: 0;
  box-shadow: none;
}

body:not(.layout-editor) #page-content .store-card {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: 24px;
}

body:not(.layout-editor) #page-content .store-card > button {
  margin-top: auto;
  min-height: 42px;
}

body:not(.layout-editor) #page-content .store-grid {
  display: contents;
}

.store-collection .collection-track {
  grid-auto-columns: calc((100% - 24px) / 3);
}

body:not(.layout-editor) #page-content .event-row {
  margin: 0;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 22px;
}

body:not(.layout-editor) #page-content .event-row > svg {
  width: 25px;
  height: 25px;
}

body:not(.layout-editor) #page-content .event-row > div {
  width: 100%;
}

body:not(.layout-editor) #page-content .event-row > button {
  width: 100%;
  min-height: 40px;
}

body:not(.layout-editor) #page-content .event-row > span {
  font-size: 12px;
  color: #c8dfa8;
}

body:not(.layout-editor) #page-content .menu-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body:not(.layout-editor) #page-content .menu-grid > button {
  min-height: 78px;
  font:
    600 20px Barlow,
    sans-serif;
  padding: 20px;
}

body:not(.layout-editor) #page-content .control-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:not(.layout-editor) #page-content .control-item {
  gap: 12px;
  min-width: 0;
}

body:not(.layout-editor) #page-content .control-item > span {
  min-width: 0;
}

body:not(.layout-editor) #page-content .control-item kbd {
  flex: none;
}

body:not(.layout-editor)
  #settings
  :is(.setting-row, .settings-section-heading, .settings-description) {
  border-color: #dce6cf25;
}

body:not(.layout-editor) #settings .setting-row.selected {
  box-shadow: inset 2px 0 var(--accent);
  background: #d7ff3e08;
}

body:not(.layout-editor) #settings #settings-tabs button.active {
  color: var(--accent);
}

body:not(.layout-editor) #settings #settings-rows {
  padding-right: 0;
}

#settings .settings-tab-rail {
  min-width: 0;
}

#settings #settings-tabs {
  width: 0;
  min-width: 0;
  flex: 1;
}

/* Share the after-action type hierarchy while the live casualty view stays visible. */
#death-screen {
  display: grid;
  place-items: center;
  background: none;
  text-align: center;
  color: #f2f3e6;
}

#death-screen > div {
  display: grid;
  justify-items: center;
  gap: 14px;
  align-self: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  width: min(900px, calc(100% - 48px));
  text-shadow: 0 2px 12px #000b;
}

#death-screen .eyebrow {
  justify-content: center;
  color: #d6e2cb;
  font-size: 15px;
  letter-spacing: 0.25em;
  line-height: 1.5;
}

#death-screen .operation-outcome-title {
  font-size: clamp(40px, min(6vw, 12vh), 86px);
  margin: 0;
  text-wrap: balance;
}

#death-screen p {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font:
    600 14px Rajdhani,
    sans-serif;
  letter-spacing: 0.16em;
  color: #b3c6af;
}

#death-screen #respawn-count {
  color: var(--accent);
  font:
    600 44px/1 Barlow,
    sans-serif;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1700px) {
  .model-stage {
    height: 38vh;
  }
}

@media (max-width: 1150px) {
  .weapon-collection .collection-track {
    grid-auto-columns: calc((100% - 36px) / 4);
  }

  .sector-collection .collection-track {
    grid-auto-columns: calc((100% - 12px) / 2);
  }
}

@media (max-width: 950px) {
  .weapon-collection .collection-track {
    grid-auto-columns: calc((100% - 24px) / 3);
  }

  .model-workbench,
  .battlefield-layout {
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr);
  }

  .model-heading {
    padding: 20px 18px 0;
    flex-wrap: wrap;
    gap: 10px;
  }

  .model-heading .issue-badge {
    font-size: 11px;
    padding: 6px 8px;
  }

  .model-intel,
  .weapon-info.model-intel {
    padding: 20px;
  }

  .model-toolbar {
    padding: 10px 14px;
  }

  .model-toolbar > span {
    max-width: 100px;
    line-height: 1.5;
  }

  #page-content .mode-collection .mode-card {
    padding: 20px 16px;
  }

  #page-content .mode-card > .selected-label {
    font-size: 11px;
    top: 40px;
    left: 16px;
    right: auto;
  }

  .deployment-map {
    gap: 15px;
  }

  .deployment-map strong {
    font-size: 23px;
  }

  body:not(.layout-editor) #page-content .menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  body:not(.layout-editor) #page-overlay .page-shell,
  body:not(.layout-editor) #settings .settings-shell {
    width: 92%;
    padding: 12px 0;
  }

  body:not(.layout-editor) :is(#page-overlay, #settings) .page-header {
    min-height: 48px;
    margin-bottom: 14px;
  }

  body:not(.layout-editor) :is(#page-overlay, #settings) .page-header h2 {
    font-size: clamp(26px, 6.8vw, 42px);
  }

  .page-brandbar {
    margin-bottom: 14px;
    min-height: 38px;
  }

  .page-brandbar img {
    width: 110px;
    height: 36px;
  }

  .page-brandbar > span {
    font-size: 11px;
    max-width: 160px;
  }

  .collection-track,
  .store-collection .collection-track,
  .sector-collection .collection-track {
    grid-auto-columns: calc((100% - 12px) / 2);
  }

  .mode-collection .collection-track {
    grid-auto-columns: 84%;
  }

  .weapon-collection .collection-track {
    grid-auto-columns: calc((100% - 12px) / 2);
  }

  .operator-collection .collection-track {
    grid-auto-columns: 72%;
  }

  .collection-heading > span {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  .model-workbench,
  .battlefield-layout {
    display: flex;
    flex-direction: column;
  }

  .model-heading {
    padding: 18px 18px 0;
  }

  .model-heading h3 {
    font-size: 30px;
  }

  .model-stage {
    height: 245px;
    min-height: 245px;
    flex: none;
  }

  .operator-stage {
    height: 330px;
  }

  .model-intel,
  .weapon-info.model-intel {
    padding: 20px;
    border-left: 0;
    border-top: 1px solid #dce6cf32;
  }

  .model-intel > h3 {
    font-size: 26px;
  }

  .weapon-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .model-intel > p {
    font-size: 15px;
  }

  .model-toolbar > span {
    max-width: none;
    font-size: 11px;
  }

  .model-toolbar button {
    min-height: 34px;
  }

  .weapon-choice {
    gap: 8px;
    padding: 14px 9px;
    min-height: 70px;
  }

  .weapon-choice > svg {
    width: 46px;
  }

  .weapon-choice strong {
    font-size: 18px;
  }

  .weapon-choice small {
    font-size: 11px;
  }

  .loadout-equipment {
    gap: 12px;
    font-size: 11px;
  }

  .deployment-panel {
    grid-template-columns: 1fr;
  }

  .deployment-map img {
    height: 145px;
    width: 35%;
  }

  .deployment-options {
    border-left: 0;
    border-top: 1px solid #dce6cf30;
  }

  .battlefield-art {
    min-height: 280px;
    padding: 24px;
  }

  .sector-collection .collection-track,
  .store-collection .collection-track {
    grid-auto-columns: 88%;
  }

  .sector-card > div {
    padding: 16px;
  }

  .sector-card h3 {
    font-size: 19px;
  }

  body:not(.layout-editor) #page-content .menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.layout-editor) #page-content .menu-grid > button {
    min-height: 65px;
    font-size: 17px;
    padding: 16px;
  }

  body:not(.layout-editor) #page-content .control-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  body:not(.layout-editor) #page-content .control-item {
    padding: 12px 10px;
    font-size: 12px;
    flex-wrap: wrap;
  }

  body:not(.layout-editor) #page-content .profile-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }

  body:not(.layout-editor) #page-content .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body:not(.layout-editor) #page-content .stat-cell {
    padding: 17px 8px;
  }

  body:not(.layout-editor) #page-content .stat-cell > b {
    font-size: 32px;
  }

  body:not(.layout-editor) #page-content .credits-content {
    padding: 20px;
  }

  #settings .settings-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0;
    overflow-y: auto;
    scrollbar-width: none;
  }

  #settings #settings-rows {
    overflow: visible;
    flex: none;
  }

  #settings .settings-description {
    display: block;
    min-height: 0;
    padding: 18px;
    flex: none;
  }

  #settings .settings-description .description-mark {
    display: none;
  }

  #settings .settings-description h3 {
    margin: 8px 0;
    font-size: 20px;
  }

  #settings .settings-description p {
    font-size: 15px;
  }

  #settings .settings-hardware {
    position: static;
    margin-top: 15px;
  }

  #settings .settings-footer {
    flex-wrap: wrap;
    gap: 9px;
    padding-top: 10px;
  }

  #settings .settings-footer #settings-status {
    display: block;
    flex-basis: 100%;
    order: 4;
    text-align: center;
    font-size: 11px;
  }

  #settings .setting-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    padding: 10px 12px;
  }

  #settings .setting-row > label {
    font-size: 14px;
  }

  #settings .setting-control select {
    font-size: 12px;
    padding: 8px;
  }

  #settings .setting-control {
    gap: 8px;
  }

  #settings .setting-control output {
    font-size: 14px;
    min-width: 28px;
  }
}

/* All home actions remain available at small widths; the document can grow. */
@media (max-width: 850px) {
  #lobby {
    overflow-y: auto;
    overflow-x: hidden;
  }

  #lobby .lobby-header {
    height: auto;
    min-height: 76px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 0;
    margin: 0 5%;
  }

  #lobby .lobby-header .brand-lockup {
    margin-right: auto;
  }

  #lobby
    .lobby-header
    :is(.currency, #audio-toggle, [aria-label="All sections"]) {
    display: flex;
  }

  #lobby .currency {
    min-width: 78px;
    margin: 0 4px 0 0;
  }

  #lobby .currency b {
    font-size: 16px;
  }

  #lobby .currency small {
    font-size: 11px;
  }

  #lobby .lobby-workspace {
    overflow: visible;
    flex: none;
    width: 90%;
    margin: 0 auto;
    padding: 18px 0;
  }

  #lobby .lobby-footer {
    flex-wrap: wrap;
    gap: 12px;
    height: auto;
    min-height: 50px;
    padding: 14px 0;
  }

  #lobby #lobby-nav {
    height: auto;
    min-height: 42px;
    flex-wrap: wrap;
  }

  #lobby #lobby-nav > button {
    min-width: 0;
    flex: 1;
    padding: 12px 6px;
    font-size: 15px;
  }
}

@media (max-width: 500px) {
  #lobby .lobby-header .brand-lockup {
    flex-basis: 50%;
  }

  #lobby .lobby-header .profile-plate {
    margin-left: 0;
  }

  #lobby .lobby-header .session-status {
    display: flex;
    font-size: 11px;
  }

  #lobby .lobby-header .icon-button {
    display: flex;
    width: 32px;
    height: 32px;
  }

  #lobby .lobby-tiles {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    max-height: none;
    gap: 12px;
  }

  #lobby .feature-tile {
    order: 0;
    min-height: 370px;
    width: 100%;
  }

  #lobby .tile-column-left {
    order: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 160px;
  }

  #lobby .tile-column-right {
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  #lobby .field-tile,
  #lobby .map-tile {
    min-height: 180px;
  }

  #lobby .tile-column-right .field-tile {
    display: flex;
    grid-column: 1;
    grid-row: 1;
  }

  #lobby .tile-column-right .map-tile {
    display: flex;
    grid-column: 2;
    grid-row: 1;
  }

  #lobby .quick-access {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr;
  }

  #lobby .tile-column-right .quick-access {
    grid-row: 2;
  }

  #lobby .lobby-underbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 16px;
  }

  #lobby .lobby-footer-note,
  #lobby .build-label {
    display: block;
  }

  .operator-collection .collection-track {
    grid-auto-columns: 84%;
  }
}

@media (max-height: 600px) and (min-width: 701px) {
  body:not(.layout-editor) #page-overlay .page-shell,
  body:not(.layout-editor) #settings .settings-shell {
    padding: 10px 0;
  }

  .model-stage {
    height: 235px;
    min-height: 235px;
  }

  .operator-stage {
    height: 280px;
  }

  .model-heading {
    padding: 15px 18px 0;
  }

  .model-intel,
  .weapon-info.model-intel {
    padding: 18px;
  }

  #lobby {
    overflow-y: auto;
  }

  #lobby .lobby-workspace {
    flex: none;
    overflow: visible;
    margin: 12px auto;
  }

  #lobby .lobby-tiles {
    min-height: 330px;
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #page-content {
    scroll-behavior: auto !important;
  }
}

/* Readable menu text at every breakpoint, including the compact home layout. */
#lobby .lobby-workspace {
  width: min(1420px, 92%);
}

#lobby .profile-plate strong {
  font-size: 19px;
}

#lobby .brand-lockup b {
  font-size: 11px;
}

#lobby
  :is(
    .profile-plate small,
    .currency small,
    .session-status,
    .live-chip,
    .feature-index,
    .tile-number,
    .tile-caption,
    .field-tile-copy > small,
    .lobby-underbar,
    .lobby-underbar > button,
    .menu-hints,
    .menu-hints kbd,
    .build-label
  ) {
  font-size: 12px;
  letter-spacing: 0.08em;
}

#lobby .profile-plate {
  min-width: 155px;
}

#lobby .currency {
  min-width: 122px;
  padding-bottom: 15px;
}

#lobby .currency small {
  margin-left: 0;
  white-space: nowrap;
}

#lobby .lobby-section-heading {
  font-size: 13px;
  letter-spacing: 0.12em;
}

#lobby .lobby-section-heading > span {
  font-size: inherit;
}

#lobby #lobby-nav > button {
  font-size: 19px;
}

#lobby #lobby-nav > button > span {
  font-size: 11px;
  min-width: 22px;
  height: 18px;
}

#lobby #challenge-notice[hidden] {
  display: none;
}

#lobby .tile-number {
  opacity: 0.85;
}

#lobby .tile-caption {
  line-height: 1.4;
}

#lobby .tile-caption > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

#lobby .feature-kicker {
  font-size: 14px;
}

#lobby .feature-copy p {
  font-size: 16px;
  line-height: 1.5;
  max-width: 460px;
}

#lobby .feature-copy .mode-selection strong {
  font-size: 24px;
}

#lobby .feature-copy .mode-selection small {
  font-size: 12px;
  letter-spacing: 0.06em;
}

#lobby .quick-access button {
  min-height: 44px;
}

#lobby .quick-access button > span {
  font-size: 16px;
}

#lobby .quick-access button > span > b {
  font-size: 14px;
}

#lobby .lobby-footer-note {
  font-size: 12px;
  letter-spacing: 0.1em;
}

#lobby .lobby-underbar > span {
  flex-wrap: wrap;
}

#lobby .feature-top {
  gap: 12px;
  flex-wrap: wrap;
}

#lobby .feature-index {
  white-space: nowrap;
}

body:not(.layout-editor)
  :is(#page-overlay, #settings)
  :is(.page-brandbar > span, .page-footer, .page-header .eyebrow) {
  font-size: 12px;
  letter-spacing: 0.1em;
}

body:not(.layout-editor) :is(#page-overlay, #settings) .close-button {
  font-size: 13px;
}

body:not(.layout-editor) :is(#page-overlay, #settings) .close-button kbd {
  font-size: 12px;
}

body:not(.layout-editor)
  #page-content
  :is(
    .controls-note,
    .credits-content p,
    .profile-identity p,
    .store-card p,
    .event-row p
  ) {
  font-size: 15px;
  line-height: 1.6;
}

body:not(.layout-editor)
  #page-content
  :is(.stat-cell small, .career-progress small, .store-card > small) {
  font-size: 12px;
  letter-spacing: 0.07em;
}

body:not(.layout-editor) #page-content .control-item {
  font-size: 15px;
}

body:not(.layout-editor) #page-content .control-item kbd {
  font-size: 13px;
}

body:not(.layout-editor) #page-content .section-tabs button {
  font-size: 15px;
}

body:not(.layout-editor) #page-content .weapon-choice {
  padding-top: 20px;
  min-height: 88px;
}

body:not(.layout-editor) #page-content .weapon-choice small {
  line-height: 1.35;
}

body:not(.layout-editor) #page-content .weapon-stat span {
  font-size: 11px;
}

body:not(.layout-editor) #page-content .weapon-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body:not(.layout-editor) #page-content .mode-card {
  min-height: 320px;
  height: clamp(320px, 37vh, 400px);
}

body:not(.layout-editor) #page-content .mode-card > .selected-label {
  left: 22px;
  top: 55px;
  right: auto;
  font-size: 11px;
}

body:not(.layout-editor) #page-content .mode-card > small {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.06em;
}

body:not(.layout-editor) #page-content .mode-card > p {
  font-size: 15px;
}

body:not(.layout-editor)
  #settings
  :is(
    .settings-description > .micro,
    .settings-hardware > span,
    .settings-hardware > small,
    .settings-footer > span,
    .controller-callout kbd
  ) {
  font-size: 12px;
}

@media (min-width: 851px) {
  #lobby {
    overflow-y: auto;
  }

  #lobby .lobby-workspace {
    flex: 1 0 auto;
    padding-block: 24px;
  }

  #lobby .lobby-tiles {
    height: clamp(460px, 58vh, 670px);
    min-height: 460px;
  }

  #lobby .tile-column-right {
    grid-template-rows: minmax(150px, 1.1fr) minmax(132px, 0.9fr) minmax(
        135px,
        0.9fr
      );
  }
}

@media (max-width: 1100px) {
  #lobby .lobby-header {
    gap: 10px;
    flex-wrap: wrap;
    height: auto;
    min-height: 86px;
    padding-block: 12px;
  }

  #lobby
    :is(
      .tile-number,
      .tile-caption,
      .field-tile-copy > small,
      .live-chip,
      .feature-index
    ) {
    font-size: 11px;
  }

  #lobby .feature-copy p {
    font-size: 15px;
  }

  #lobby .feature-copy .mode-selection strong {
    font-size: 22px;
  }

  #lobby .feature-top {
    left: 18px;
    right: 18px;
  }

  #lobby .quick-access button {
    padding-inline: 10px;
    gap: 8px;
  }

  #lobby .quick-access button > span {
    font-size: 14px;
  }

  #lobby .quick-access button > span > b {
    font-size: 13px;
  }
}

@media (max-width: 850px) {
  #lobby .lobby-workspace {
    width: 90%;
  }

  #lobby #lobby-nav > button {
    font-size: 16px;
  }

  #lobby .lobby-section-heading {
    flex-wrap: wrap;
    gap: 10px;
  }

  #lobby .lobby-underbar {
    line-height: 1.5;
  }

  #lobby .lobby-footer {
    gap: 14px;
    flex-wrap: wrap;
    height: auto;
    padding-block: 16px;
  }

  #lobby .menu-hints {
    gap: 12px;
    flex-wrap: wrap;
  }

  #lobby .feature-copy {
    left: 22px;
    right: 22px;
  }
}

@media (max-width: 700px) {
  body:not(.layout-editor) :is(#page-overlay, #settings) .page-brandbar {
    gap: 12px;
  }

  body:not(.layout-editor) :is(#page-overlay, #settings) .page-brandbar > span {
    font-size: 11px;
    line-height: 1.5;
  }

  body:not(.layout-editor) :is(#page-overlay, #settings) .page-footer {
    font-size: 11px;
    gap: 12px;
    flex-wrap: wrap;
    line-height: 1.5;
  }

  body:not(.layout-editor) #page-content .control-grid {
    grid-template-columns: 1fr;
  }

  body:not(.layout-editor) #page-content .weapon-choice {
    min-height: 90px;
  }

  body:not(.layout-editor) #page-content .mode-card > .selected-label {
    left: 16px;
  }
}

@media (max-width: 500px) {
  #lobby .currency {
    min-width: 104px;
  }

  #lobby .currency small {
    display: block;
    font-size: 11px;
  }

  #lobby #lobby-nav > button {
    flex: 1 0 30%;
    min-height: 42px;
    padding: 10px 8px;
  }

  #lobby .tile-column-right {
    grid-template-rows: auto auto;
  }

  #lobby .feature-tile {
    min-height: 440px;
  }

  #lobby .tile-column-left {
    grid-template-rows: auto;
    min-height: 200px;
  }

  #lobby .lobby-tile {
    padding: 24px 16px 18px;
  }

  #lobby .tile-number {
    left: 16px;
    right: 12px;
    top: 14px;
    line-height: 1.4;
  }

  #lobby :is(.field-tile, .map-tile) {
    min-height: 230px;
    padding-top: 55px;
  }

  #lobby .field-tile-copy strong {
    font-size: 26px;
  }

  #lobby .map-tile strong {
    font-size: 25px;
  }

  #lobby .lobby-tiles .lobby-tile > .tile-caption {
    display: flex;
  }

  #lobby .tile-caption {
    margin-top: 12px;
  }

  #lobby .tile-caption > b {
    font-size: 18px;
  }

  #lobby .feature-copy .mode-selection small {
    font-size: 11px;
  }

  #lobby .lobby-header .session-status {
    font-size: 11px;
  }

  #death-screen .eyebrow {
    font-size: 12px;
    letter-spacing: 0.15em;
  }

  #death-screen p {
    font-size: 12px;
  }
}

/* Saved field balance: one readable card, aligned with the header controls. */
#lobby .lobby-header .currency {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  min-width: 156px;
  min-height: 56px;
  margin: 0 6px 0 12px;
  padding: 9px 15px;
  text-align: left;
  border: 1px solid #d8e3d52b;
  border-radius: 3px;
  background: linear-gradient(120deg, #14232ab8, #0c192098);
  box-shadow: inset 0 1px #ffffff08;
}

#lobby .lobby-header .currency:hover {
  background: #21323bc9;
  border-color: #d7ff3e70;
}

#lobby .lobby-header .currency:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

#lobby .currency .coin {
  flex: none;
  width: 31px;
  height: 31px;
  border: 1px solid #d7ff3e70;
  border-radius: 50%;
  font:
    600 18px/1 Barlow,
    sans-serif;
  color: #d7ff3e;
  background: #d7ff3e09;
}

#lobby .currency-balance {
  display: grid;
  gap: 3px;
  min-width: 0;
}

#lobby .currency .currency-balance small {
  position: static;
  margin: 0;
  color: #bdc9c5;
  font:
    600 12px/1.15 Rajdhani,
    sans-serif;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

#lobby .currency .currency-balance b {
  color: #f4f5ec;
  font:
    600 23px/1 Barlow,
    sans-serif;
  letter-spacing: 0.025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Loader labels share the lobby's 12px secondary type at every breakpoint. */
#loader .loader-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

#loader
  :is(.loader-top .micro, .loader-tagline, .loader-meta, .loader-bottom > p) {
  font:
    500 12px/1.5 Rajdhani,
    sans-serif;
  letter-spacing: 0.1em;
}

#loader .loader-tagline {
  letter-spacing: 0.28em;
}

#loader .loader-bottom {
  width: min(620px, 84vw);
}

#loader .loader-meta {
  gap: 16px;
  align-items: flex-start;
}

#loader #asset-percent {
  flex: none;
  font-variant-numeric: tabular-nums;
}

#loader .loader-bottom > p {
  color: #d0dad4;
  margin-top: 18px;
}

#loader.ready :is(.loader-progress, .loader-meta) {
  opacity: 1;
}

#match-loading .loading-content :is(p, small, #match-load-label) {
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 700px) {
  #loader .loader-top {
    top: 4%;
    gap: 7px;
  }

  #loader .loader-top .micro {
    width: 100%;
  }

  #loader .loader-center {
    top: 43%;
  }

  #loader .loader-bottom {
    bottom: 6%;
  }

  #lobby .lobby-header .currency {
    display: flex;
    min-width: 142px;
    min-height: 52px;
    padding: 8px 12px;
    margin: 0;
    gap: 10px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  #loader .loader-top .micro {
    width: auto;
  }

  #loader .loader-top {
    top: 3%;
    justify-content: space-between;
  }

  #loader .loader-center {
    top: 40%;
    width: 48vw;
  }

  #loader .loader-tagline {
    margin-top: 7px;
  }

  #loader .start-button {
    margin-top: 9px;
  }

  #loader .loader-bottom {
    bottom: 3%;
  }

  #loader .loader-bottom > p {
    margin-top: 5px;
  }
}

/* Static UI appearance stays in stylesheets; progress values use native controls. */
.profile-identity > .eyebrow {
  justify-content: center;
}

.store-card[data-skin-finish="graphite"] {
  --skin-color: #879799;
}

.store-card[data-skin-finish="sandstorm"] {
  --skin-color: #b7a16c;
}

.store-card[data-skin-finish="woodland"] {
  --skin-color: #718d5a;
}

.ui-progress {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  appearance: none;
  background: transparent;
  color: var(--accent);
}

.ui-progress::-webkit-progress-bar {
  background: transparent;
}

.ui-progress::-webkit-progress-value {
  background: var(--accent);
}

.ui-progress::-moz-progress-bar {
  background: var(--accent);
}

#settings .settings-footer > button {
  font-size: clamp(11px, 1vw, 14px);
  min-height: 44px;
  line-height: 1.3;
  white-space: normal;
}