/* VIGILCORD43: single-row weapon catalogs and a viewport-sized home. */
#game-shell :is(.loadout-layout, .loadout-weapons, .shop-layout, .shop-wares,
  #shop-weapons-panel) {min-width: 0;}
#game-shell :is(#equipment-catalog, #shop-catalog) {
  display: flex; flex-wrap: nowrap; align-items: flex-start;
  gap: 16px; min-width: 0; width: 100%; max-width: 100%;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: 6px;
  padding: 6px 6px 18px; scrollbar-width: auto;
  scrollbar-color: #f3b979 #102229;
}
#game-shell #equipment-catalog > .equipment-card {
  flex: 0 0 min(88%, 340px); min-width: 0; scroll-snap-align: start;
}
#game-shell #shop-catalog > .shop-card {
  flex: 0 0 min(88%, 350px); min-width: 0; scroll-snap-align: start;
}
#game-shell :is(#equipment-catalog, #shop-catalog) > article:focus-visible {
  outline: 3px solid #ffd29b; outline-offset: 2px;
}
#game-shell .catalog-navigation {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 16px; flex-wrap: wrap; margin: 14px 0 8px;
}
#game-shell .catalog-scroll-hint {margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-secondary);}
#game-shell .catalog-scroll-controls {display: flex; align-items: center; gap: 8px; margin-left: auto;}
#game-shell .catalog-position {font-size: 12px; line-height: 1.6; color: var(--text-note); white-space: nowrap;}
#game-shell .catalog-scroll-controls button {
  min-width: 76px; min-height: 44px; padding: 9px 12px;
  border: 1px solid #78928b; background: #203b40; color: var(--text-main);
  font-size: 14px; line-height: 1.5;
}
#game-shell .catalog-scroll-controls button:disabled {color: #b8cac6; background: #102229; border-color: #45615d; opacity: .65;}

/* An inline console belongs to settings, including its actual text input. */
#game-shell .settings-developer {border-top: 1px solid #66857e; margin-top: 24px; padding-top: 20px;}
#game-shell #developer-button {width: 100%; margin: 0;}
#game-shell #developer-screen {position: static; margin-top: 12px; padding: 16px; background: #1b343a; border: 1px solid #66857e;}
#game-shell #developer-screen .modal-heading {margin-bottom: 10px; gap: 12px;}
#game-shell #developer-screen h3 {font-size: 18px; line-height: 1.5; margin: 0;}
#game-shell #developer-screen p {font-size: 14px; line-height: 1.8;}
#game-shell #code-form {display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px;}
#game-shell #code-form label {font-size: 14px;}
#game-shell #cheat-code {min-width: 0; width: 100%; min-height: 46px; font-size: 16px; padding: 10px 12px; background: #102229; color: #edf3e8; border: 1px solid #78928b;}
#game-shell #code-message {overflow-wrap: anywhere; margin-bottom: 0;}

/* Both columns take their height from the screen, never from the portrait. */
#game-shell #title-screen {
  height: 100%; min-height: 0; overflow: hidden;
  display: grid; grid-template-rows: 36px minmax(0, 1fr); gap: 14px;
  padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}
#game-shell #title-screen .title-header {gap: 12px; min-width: 0; width: 100%; max-width: 1320px; margin: 0 auto;}
#game-shell #title-screen .brand {font-size: 12px; gap: 9px; letter-spacing: 1.2px; white-space: nowrap;}
#game-shell #title-screen .wallet {gap: 8px; white-space: nowrap;}
#game-shell #title-screen .wallet strong {font-size: 20px; line-height: 1.3;}
#game-shell #title-screen .title-layout {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: stretch; gap: clamp(16px, 3vw, 44px);
  min-width: 0; min-height: 0; height: 100%; width: 100%; max-width: 1320px;
  margin: 0 auto; padding: 0;
}
#game-shell #title-screen .title-copy {
  display: flex; flex-direction: column; justify-content: center;
  gap: 10px; width: 100%; min-width: 0; min-height: 0; max-width: none;
  padding: clamp(16px, 2vw, 28px); align-self: stretch;
}
#game-shell #title-screen .title-copy > :is(p, div, h1) {margin: 0; flex-shrink: 0;}
#game-shell #title-screen .title-copy h1.game-title {
  width: 100%; max-width: 700px; height: min(11dvh, 100px); min-height: 0;
  margin: 0; transform: none; line-height: 1;
}
#game-shell #title-screen h1.game-title img {display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center;}
#game-shell #title-screen .japanese-title {font-size: 18px; line-height: 1.5; letter-spacing: 2px; padding: 0;}
#game-shell #title-screen .title-reading {display: inline; margin-left: 12px; font-size: 12px; letter-spacing: .5px;}
#game-shell #title-screen .title-line {display: none;}
#game-shell #title-screen .tagline {font-size: 16px; line-height: 1.7; letter-spacing: .3px;}
#game-shell #title-screen .intro {font-size: 14px; line-height: 1.7; letter-spacing: .1px;}
#game-shell #title-screen .home-deploy-note {max-width: none; padding: 10px 0 0; font-size: 14px; line-height: 1.7;}
#game-shell #title-screen .home-deploy-note p {margin: 6px 0 0; line-height: 1.7;}
#game-shell #title-screen .home-navigation {display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; width: 100%; max-width: none;}
#game-shell #title-screen .home-navigation .secondary-button {
  width: 100%; min-width: 0; min-height: 48px; margin: 0; padding: 10px 12px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; line-height: 1.5; letter-spacing: 0;
}
#game-shell #title-screen .start-actions {display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; width: 100%; max-width: none; margin: 0;}
#game-shell #title-screen .start-actions > button {min-height: 48px; width: 100%; height: auto; margin: 0; padding: 10px 14px; font-size: 15px; line-height: 1.5;}
#game-shell #title-screen .start-actions .icon-button {padding: 8px; font-size: 22px;}
#game-shell #title-screen .start-note {margin: 0; font-size: 12px; line-height: 1.6; letter-spacing: 0;}
#game-shell #title-screen .mobile-note {margin-left: 8px;}
#game-shell #title-screen .operator-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch; align-self: stretch; position: relative; inset: auto;
  width: 100%; height: 100%; max-width: none; min-width: 0; min-height: 0; margin: 0;
  opacity: 1; overflow: hidden;
}
#game-shell #title-screen .operator-portrait {height: 100%; min-height: 0; width: 100%; overflow: hidden;}
#game-shell #title-screen .operator-image {width: 100%; height: 100%; object-fit: contain;}
#game-shell #title-screen .operator-orbit {max-width: 100%; max-height: 100%;}
#game-shell #title-screen .operator-index {top: 8px; left: 8px;}
#game-shell #title-screen .operator-caption {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 8px;
  min-width: 0; padding: 14px; border: 1px solid #5a79745c;
}
#game-shell #title-screen #home-operator-code {align-self: center; font-size: 12px; line-height: 1.5; letter-spacing: .2px;}
#game-shell #title-screen #home-operator-name {margin: 0; font-size: 22px; line-height: 1.4; letter-spacing: .5px;}
#game-shell #title-screen .operator-caption > :is(p, .home-arsenal-label, .home-loadout, .home-shield) {grid-column: 1 / -1; margin: 0;}
#game-shell #title-screen .operator-caption > p {font-size: 14px; line-height: 1.6;}
#game-shell #title-screen .home-arsenal-label {font-size: 12px; line-height: 1.5; letter-spacing: .3px;}
#game-shell #title-screen .home-loadout {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;}
#game-shell #title-screen .home-weapon {padding: 8px; min-width: 0;}
#game-shell #title-screen .home-weapon > span {font-size: 12px; line-height: 1.5; letter-spacing: 0;}
#game-shell #title-screen .home-weapon > strong {font-size: 14px; line-height: 1.5; letter-spacing: 0;}
#game-shell #title-screen .home-weapon :is(.weapon-art, .empty-slot) {height: 32px; width: 100%; margin: 4px 0;}
#game-shell #title-screen .home-shield {padding: 8px 10px; gap: 4px 8px; min-width: 0; line-height: 1.5;}

@media (max-height: 760px) {
  #game-shell #title-screen .home-deploy-note, #game-shell #title-screen .operator-caption > p {display: none;}
  #game-shell #title-screen .title-copy {gap: 8px; padding: 16px;}
  #game-shell #title-screen .start-note {display: none;}
}
@media (max-width: 799px) and (min-height: 561px), (max-width: 799px) and (orientation: portrait) {
  #game-shell #title-screen {padding-inline: max(12px, env(safe-area-inset-left)); gap: 10px;}
  #game-shell #title-screen .brand-sub, #game-shell #title-screen .brand-divider {display: none;}
  #game-shell #title-screen .title-layout {grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 12px;}
  #game-shell #title-screen .title-copy {padding: 14px; gap: 8px; justify-content: start;}
  #game-shell #title-screen .title-copy h1.game-title {height: min(8dvh, 78px);}
  #game-shell #title-screen .eyebrow, #game-shell #title-screen .home-deploy-note, #game-shell #title-screen .start-note {display: none;}
  #game-shell #title-screen .operator-hero {grid-template-columns: minmax(72px, .33fr) minmax(0, .67fr); grid-template-rows: minmax(0, 1fr); gap: 8px;}
  #game-shell #title-screen .operator-index {display: none;}
  #game-shell #title-screen .operator-caption {align-self: center; padding: 10px;}
  #game-shell #title-screen .operator-caption > p {display: none;}
  #game-shell #title-screen #home-operator-name {font-size: 20px;}
  #game-shell #title-screen .home-weapon {padding: 6px;}
  #game-shell #title-screen .home-weapon :is(.weapon-art, .empty-slot) {height: 26px; margin: 3px 0;}
  #game-shell #title-screen .title-header .wallet > span {display: none;}
}
@media (max-width: 799px) and (max-height: 760px) {
  #game-shell #title-screen .intro {display: none;}
}
@media (max-width: 420px) {
  #game-shell #title-screen .title-header {gap: 8px;}
  #game-shell #title-screen .brand {gap: 7px; letter-spacing: .6px;}
  #game-shell #title-screen .wallet strong {font-size: 18px;}
  #game-shell #title-screen .title-copy {padding: 10px; gap: 6px;}
  #game-shell #title-screen .title-copy h1.game-title {height: min(8dvh, 62px);}
  #game-shell #title-screen .japanese-title {font-size: 17px; letter-spacing: 1px;}
  #game-shell #title-screen .title-reading {margin-left: 8px;}
  #game-shell #title-screen .tagline {font-size: 14px; line-height: 1.7; letter-spacing: 0;}
  #game-shell #title-screen .home-navigation {grid-template-columns: 1.4fr 1fr;}
  #game-shell #title-screen .home-navigation .secondary-button {font-size: 14px; padding: 8px; min-height: 54px;}
  #game-shell #title-screen .operator-hero {grid-template-columns: minmax(64px, .28fr) minmax(0, .72fr); gap: 6px;}
  #game-shell #title-screen .operator-caption {padding: 8px; gap: 5px;}
  #game-shell #title-screen .home-arsenal-label {display: none;}
  #game-shell #title-screen .home-weapon {padding: 5px 4px;}
  #game-shell #title-screen .home-weapon :is(.weapon-art, .empty-slot) {height: 24px;}
  #game-shell #title-screen .home-shield {padding: 6px;}
  #game-shell .catalog-scroll-controls {gap: 6px;}
  #game-shell .catalog-scroll-controls button {min-width: 72px;}
}
@media (max-height: 560px) and (orientation: landscape) {
  #game-shell #title-screen {
    grid-template-rows: 32px minmax(0, 1fr); gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  #game-shell #title-screen .brand-sub, #game-shell #title-screen .brand-divider,
  #game-shell #title-screen .title-header .wallet > span {display: none;}
  #game-shell #title-screen .title-layout {display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); grid-template-rows: minmax(0, 1fr); gap: 12px;}
  #game-shell #title-screen .title-copy {padding: 12px; gap: 6px;}
  #game-shell #title-screen .title-copy h1.game-title {height: min(13dvh, 65px);}
  #game-shell #title-screen .eyebrow, #game-shell #title-screen .intro,
  #game-shell #title-screen .home-deploy-note, #game-shell #title-screen .start-note {display: none;}
  #game-shell #title-screen .japanese-title {font-size: 17px; letter-spacing: 1px; line-height: 1.4;}
  #game-shell #title-screen .tagline {font-size: 14px; line-height: 1.6; letter-spacing: 0;}
  #game-shell #title-screen .home-navigation .secondary-button {font-size: 14px; min-height: 48px; padding: 8px;}
  #game-shell #title-screen .start-actions {grid-template-columns: minmax(0, 1fr) 44px;}
  #game-shell #title-screen .start-actions > button {min-height: 44px; padding: 8px 12px;}
  #game-shell #title-screen .operator-hero {grid-template-columns: minmax(0, .32fr) minmax(0, .68fr); grid-template-rows: minmax(0, 1fr); gap: 6px;}
  #game-shell #title-screen .operator-index, #game-shell #title-screen #home-operator-code,
  #game-shell #title-screen .operator-caption > p, #game-shell #title-screen .home-arsenal-label {display: none;}
  #game-shell #title-screen .operator-caption {grid-template-columns: minmax(0, 1fr); padding: 6px; gap: 4px; align-self: center;}
  #game-shell #title-screen #home-operator-name {font-size: 18px;}
  #game-shell #title-screen .home-loadout {grid-template-columns: minmax(0, 1fr); gap: 4px;}
  #game-shell #title-screen .home-weapon {display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 6px; padding: 3px;}
  #game-shell #title-screen .home-weapon > :is(span, strong) {grid-column: 2; white-space: nowrap;}
  #game-shell #title-screen .home-weapon > span {grid-row: 1;}
  #game-shell #title-screen .home-weapon > strong {grid-row: 2;}
  #game-shell #title-screen .home-weapon > span {line-height: 16px;}
  #game-shell #title-screen .home-weapon > strong {line-height: 20px;}
  #game-shell #title-screen .home-weapon :is(.weapon-art, .empty-slot) {grid-column: 1; grid-row: 1 / 3; height: 32px; margin: 0; align-self: center;}
  #game-shell #title-screen .home-shield {padding: 4px;}
  #game-shell #title-screen .home-shield > span {display: none;}
}
@media (max-height: 360px) and (orientation: landscape) {
  #game-shell #title-screen .title-copy {padding: 8px; gap: 4px;}
  #game-shell #title-screen .title-copy h1.game-title {height: 36px;}
  #game-shell #title-screen .title-reading {display: none;}
  #game-shell #title-screen .home-navigation .secondary-button {min-height: 48px; padding: 6px 8px;}
  #game-shell #title-screen .home-navigation .secondary-button b {display: none;}
}

@media (max-height: 560px) and (orientation: portrait) {
  #game-shell #title-screen {padding-block: max(8px, env(safe-area-inset-bottom));}
  #game-shell #title-screen .title-copy {padding: 8px; gap: 4px;}
  #game-shell #title-screen .title-copy h1.game-title {height: 36px;}
  #game-shell #title-screen .operator-caption {grid-template-columns: minmax(0, 1fr); padding: 6px; gap: 4px;}
  #game-shell #title-screen #home-operator-code, #game-shell #title-screen .home-arsenal-label {display: none;}
  #game-shell #title-screen #home-operator-name {font-size: 18px;}
  #game-shell #title-screen .home-weapon {padding: 4px;}
  #game-shell #title-screen .home-weapon :is(.weapon-art, .empty-slot) {height: 20px; margin-block: 2px;}
  #game-shell #title-screen .home-shield {padding: 4px;}
  #game-shell #title-screen .home-shield > span {display: none;}
}