/* VIGILCORD42: readable type without scaling gameplay, artwork or touch geometry. */
:root {
  --paper: #edf3e8;
  --muted: #b8cac6;
  --mint: #c1d8cd;
  --amber: #f3b979;
  --line: rgba(189, 213, 206, .32);
  --text-main: #edf3e8;
  --text-secondary: #c1d2cb;
  --text-note: #b8cac6;
  --text-accent: #f6c18b;
  --panel: #14272e;
  --panel-raised: #1b343a;
  --ui-font: 'Noto Sans JP', 'Yu Gothic UI', 'Hiragino Kaku Gothic ProN', Meiryo, system-ui, sans-serif;
}
html, body {font-family: var(--ui-font); font-size: 14px; line-height: 1.65;}
button, input, select {font-family: var(--ui-font);}
#game-shell {text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
#game-shell :is(p, dd, small) {line-break: strict; overflow-wrap: anywhere;}
#game-shell :is(button, summary, label) {letter-spacing: .2px;}
#game-shell :is(button, a, input, select, summary):focus-visible {
  outline: 3px solid #ffd29b; outline-offset: 3px;
}

/* Keep scenery visible around solid reading surfaces. */
#game-shell .hub-screen {background: rgba(8, 20, 25, .92);}
#game-shell .hub-screen {overflow-x: hidden;}
#game-shell .modal-panel {max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain;}
#game-shell :is(.modal-panel, .deployment-brief, .skin-panel, .loadout-weapons,
  .shop-intro, .shop-clerk, .clerk-copy, .shop-filters, .training-guide) {
  background: var(--panel); color: var(--text-main); border-color: #66857e;
}
#game-shell :is(.hub-header, .deployment-launch) {background: #102229; border-color: #66857e;}
#game-shell :is(.stage-card, .shop-card, .equipment-card, .shield-card,
  .enemy-intel-card, .home-weapon, .loadout-slot) {
  background: var(--panel-raised); color: var(--text-main);
}
#game-shell :is(.equipment-card.equipped, .loadout-slot.selected) {
  background: #2c413d; border-color: var(--amber);
}
#game-shell .hub-screen :is(p, dd) {font-size: 14px; line-height: 1.9; color: var(--text-secondary);}
#game-shell .hub-screen :is(small, dt, label) {font-size: 12px; line-height: 1.65; color: var(--text-note);}
#game-shell .hub-screen :is(h2, h3, h4) {color: var(--text-main); font-weight: 600; line-height: 1.5;}
#game-shell :is(.hub-help, .save-note, .skin-note, .slot-help, .arsenal-stat-note,
  .catalog-empty, .control-settings-note, .deploy-hint) {
  color: var(--text-secondary); font-size: 14px; line-height: 1.9; letter-spacing: .1px;
}
#game-shell :is(.eyebrow, .title-reading, .operator-index, .clerk-tag,
  .stage-art > span, .stage-card-copy > span, .home-arsenal-label,
  .home-weapon > span, .skin-description > span, .catalog-heading > span,
  .wallet > span, .character-status) {font-size: 12px; line-height: 1.6; letter-spacing: .8px;}
#game-shell :is(.eyebrow, .stage-card-copy > span) {color: var(--text-accent);}
#game-shell :is(.title-reading, .operator-index, .clerk-tag, .home-arsenal-label,
  .home-weapon > span, .skin-description > span, .wallet > span,
  .character-status, .catalog-heading > span) {color: var(--text-note);}
#game-shell :is(.primary-button, .secondary-button, .buy-button) {
  font-size: 15px; line-height: 1.6; letter-spacing: .5px; min-height: 46px;
}
#game-shell :is(.primary-button, .buy-button) {color: #102229; font-weight: 700;}
#game-shell :is(.secondary-button, .small-button, .back-button, .text-button) {color: var(--text-main);}
#game-shell :is(.small-button, .back-button, .text-button, .weapon-tab) {
  font-size: 14px; line-height: 1.6; min-height: 44px; white-space: normal;
}
#game-shell :is(.weapon-tab, .mod-quick button, .mod-tabs > button) {color: var(--text-secondary);}
#game-shell :is(.weapon-tab.selected, .mod-tabs > button.selected) {
  background: #394137; color: #ffe1b6; border-color: var(--amber);
}
#game-shell .buy-button:disabled {
  background: #263b3d; color: #c1d2cb; border-color: #6c8982; opacity: 1;
}
#game-shell .buy-button.owned {color: #d0f2df;}
#game-shell button.equipment-select:disabled {opacity: 1; color: var(--text-note);}
#game-shell .buy-button > b {font-size: 15px; white-space: nowrap;}

/* The title logo remains artwork; surrounding Japanese copy uses clean UI type. */
#title-screen {background: linear-gradient(90deg, #081419e8, #0814197a 75%, #08141935);}
#title-screen .title-layout {min-height: min-content;}
#title-screen .title-copy {
  position: relative; padding: 22px; background: #102229f2;
  border: 1px solid #5a79745c; border-left: 2px solid var(--amber);
}
#title-screen .japanese-title {font-size: 18px; letter-spacing: 3px; color: var(--text-main);}
#title-screen .tagline {font-size: 16px; line-height: 1.9; letter-spacing: .7px; color: #d8e1d6;}
#title-screen :is(.intro, .home-deploy-note) {font-size: 14px; line-height: 1.9; color: var(--text-secondary);}
#title-screen .home-deploy-note > span {font-size: 12px; letter-spacing: .5px; color: var(--text-accent);}
#title-screen .start-note {font-size: 12px; line-height: 1.9; color: var(--text-note);}
#title-screen .title-footer {
  font-size: 12px; line-height: 1.7; color: var(--text-note); letter-spacing: .5px;
  flex-wrap: wrap; gap: 12px; padding-bottom: 5px;
}
#title-screen .title-footer > span:first-child {font-size: 12px; max-width: 100%;}
#title-screen :is(#best-score, .developer-link, .brand-sub) {font-size: 12px; color: var(--text-note);}
#title-screen .developer-link {min-height: 40px; padding-inline: 8px;}
#title-screen .operator-caption {background: #102229ef; padding: 16px;}
#title-screen .operator-caption > span {font-size: 12px; color: var(--text-note); letter-spacing: .7px;}
#title-screen .operator-caption > p {font-size: 14px; color: var(--text-secondary); line-height: 1.8;}
#title-screen .home-weapon {padding: 10px;}
#title-screen .home-weapon > strong {font-size: 14px; color: #ffe1b6; letter-spacing: .2px; overflow-wrap: anywhere;}

/* Long flavor text, specifications and MOD explanations can grow naturally. */
#game-shell .stage-card-copy {padding: 22px 20px;}
#game-shell .stage-card-copy p {font-size: 14px; line-height: 1.95; min-height: 0; color: var(--text-secondary);}
#game-shell .stage-card-copy small {font-size: 13px; line-height: 1.8; min-height: 0; color: #dce5d6;}
#game-shell .stage-card-copy > div {font-size: 12px; line-height: 1.7; flex-wrap: wrap; letter-spacing: .2px;}
#game-shell .stage-card-copy b {color: var(--text-note);}
#game-shell .stage-card-copy > div > span {color: #ffe1b6;}
#game-shell .stage-art > span {padding: 4px 8px; left: 12px; background: #0a1b22ed; color: #e5f0e7;}
#game-shell .stage-scroll-hint {font-size: 13px; color: var(--text-note);}
#game-shell .section-heading {align-items: flex-start; flex-wrap: wrap; gap: 12px;}
#game-shell .section-heading > div {flex: 1; min-width: min(100%, 200px);}
#game-shell .hub-header h2 {font-size: clamp(22px, 2.5vw, 28px); letter-spacing: .7px;}
#game-shell .deployment-launch strong {font-size: 14px; color: var(--text-secondary);}
#game-shell .deployment-launch .primary-button {font-size: 15px;}
#game-shell .deployment-stats {flex-wrap: wrap; font-size: 13px; color: var(--text-note); gap: 12px;}
#game-shell .deployment-stats b {font-size: 14px; color: var(--text-main);}
#game-shell .deployment-operator span {font-size: 12px; color: var(--text-accent);}
#game-shell .deployment-copy > .sector-list {font-size: 13px; color: #e1cfaf; line-height: 1.9;}
#game-shell .mod-summary {background: #23352f;}
#game-shell .mod-summary :is(span, b) {font-size: 13px; color: var(--text-secondary);}
#game-shell .mod-summary strong {color: #ffcf99;}
#game-shell .mod-presets button {font-size: 14px; line-height: 1.6; color: var(--text-main);}
#game-shell .mod-presets small {font-size: 12px; color: var(--text-note); letter-spacing: 0;}
#game-shell .mod-tabs {flex-wrap: wrap;}
#game-shell .mod-tabs > button {flex: 1 1 110px; font-size: 14px; line-height: 1.5;}
#game-shell .mod-tabs small {font-size: 12px; color: var(--text-note);}
#game-shell :is(.mod-label label, .mod-control label) {font-size: 15px; color: var(--text-main);}
#game-shell .mod-entry > small {font-size: 13px; line-height: 1.8; color: var(--text-note);}
#game-shell .mod-quick button {font-size: 13px; min-height: 40px; line-height: 1.5;}
#game-shell .mod-quick button.selected {color: #ffe1b6;}
#game-shell .mod-panel .mod-control {background: var(--panel-raised);}
#game-shell .mod-control > summary {font-size: 14px; line-height: 1.7; color: var(--text-main);}
#game-shell .mod-control > summary strong {font-size: 15px; color: #ffcf99;}
#game-shell .mod-control > summary i {color: var(--text-note);}
#game-shell .enemy-intel-details > summary {font-size: 15px; line-height: 1.7; flex-wrap: wrap; padding-block: 8px;}
#game-shell .enemy-intel-details > summary > span {font-size: 12px; color: var(--text-note);}
#game-shell .enemy-intel-copy > span {font-size: 12px; color: var(--text-note);}
#game-shell .enemy-intel-copy h4 {font-size: 15px;}
#game-shell .enemy-intel-copy > small {font-size: 13px; color: var(--text-secondary); line-height: 1.85;}
#game-shell .enemy-intel-copy > small + small {color: #cbd9d2;}

#game-shell :is(.loadout-slot > span, .loadout-slot > small, .equipment-select > div,
  .equipment-select > div > b, .equipment-select > small, .shop-card-top,
  .shop-card-top > b, .weapon-specs, .shield-facts) {
  font-size: 12px; line-height: 1.7; letter-spacing: .2px; color: var(--text-note);
}
#game-shell :is(.shop-card-top, .equipment-select > div) {flex-wrap: wrap; gap: 5px 10px;}
#game-shell :is(.loadout-slot > strong, .equipment-select > strong, .shop-card h3) {
  font-family: var(--ui-font); font-size: 16px; font-weight: 600; line-height: 1.7;
  color: var(--text-main); letter-spacing: .2px; overflow-wrap: anywhere;
}
#game-shell :is(.equipment-info summary, .weapon-rating, .weapon-rating b, .weapon-facts dt) {
  font-size: 12px; line-height: 1.6; color: var(--text-note);
}
#game-shell .weapon-rating {grid-template-columns: 64px minmax(18px, 1fr) 28px; gap: 8px;}
#game-shell .weapon-rating b {color: var(--text-main);}
#game-shell .weapon-ratings {grid-template-columns: 1fr; gap: 11px;}
#game-shell .weapon-facts {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 12px;}
#game-shell .weapon-facts dd {font: 14px/1.7 var(--mono); color: #ffe1b6;}
#game-shell :is(.weapon-flavor, .shop-card .weapon-flavor, .equipment-info .weapon-description) {
  font-size: 14px; line-height: 1.9; color: #daceb2; min-height: 0;
}
#game-shell .attribute-badge {font-size: 12px; line-height: 1.6; letter-spacing: .1px;}
#game-shell :is(.shop-filters label > span, .owned-filter, .shop-result-meta,
  .equipment-filter-meta, .skin-option > span) {font-size: 13px; color: var(--text-secondary);}
#game-shell :is(.shop-filters input, .shop-filters select, .loadout-shield select,
  .settings-panel select, .settings-panel input[type=number]) {
  font-size: 16px; line-height: 1.6; color: var(--text-main); background: #102229;
}
#game-shell input::placeholder {color: #b8cac6; opacity: 1;}
#game-shell .shop-clerk .clerk-tag {letter-spacing: .1px; padding: 3px 5px; background: #102229ed;}
#game-shell .clerk-talk-hint {font-size: 12px; line-height: 1.7; color: #ffcf99; letter-spacing: 0;}
#game-shell .clerk-name {flex-wrap: wrap; gap: 6px 12px;}
#game-shell .clerk-name > span {font-size: 13px; color: var(--text-note);}
#game-shell .reward-guide table {font-size: 13px; line-height: 1.8; color: var(--text-main);}
#game-shell .reward-guide thead th {font-size: 13px; color: var(--text-note);}
#game-shell .home-shield {background: #1b343a; flex-wrap: wrap;}
#game-shell .home-shield > strong {font-size: 14px; color: var(--text-main);}
#game-shell .home-shield > span {font-size: 12px; color: #d4f6ee;}
#game-shell .equipment-filter-meta {flex-wrap: wrap; gap: 10px;}

#game-shell .modal-panel p {font-size: 14px; line-height: 1.9; color: var(--text-secondary); letter-spacing: .1px;}
#game-shell .settings-grid {gap: 30px;}
#game-shell .settings-controls label {font-size: 14px; line-height: 1.7; color: var(--text-main);}
#game-shell .settings-controls .secondary-button {width: 100%; white-space: normal;}
#game-shell .setting-value {font-size: 14px; color: #ffcf99;}
#game-shell .setting-label {gap: 12px;}
#game-shell .controls-reference dl > div {font-size: 14px; align-items: flex-start;}
#game-shell .controls-reference dt {font-size: 14px; color: var(--text-note); flex: 0 0 35%;}
#game-shell .controls-reference dd {font-family: var(--ui-font); font-size: 14px; line-height: 1.75; color: var(--text-main);}
#game-shell .controls-reference h3 {font-size: 14px;}
#game-shell .asset-credit a {font-size: 14px; line-height: 1.8; color: #ffcf99; text-decoration: underline;}
#game-shell .result-stats span {font-size: 12px; color: var(--text-note); letter-spacing: .5px;}
#game-shell .reward-panel :is(span, p) {font-size: 13px; color: var(--text-secondary);}
#game-shell .developer-panel label {font-size: 14px; color: var(--text-main);}
#game-shell .layout-toolbar :is(button, summary) {font-size: 13px; line-height: 1.5; padding-inline: 7px;}
#game-shell .layout-heading strong {font-size: 13px; color: #d1e9e0;}
#game-shell .layout-instruction {font-size: 14px; line-height: 1.7; color: var(--text-main);}

/* Clear HUD text over every biome, retaining the unobstructed bottom HUD. */
#hud {
  --hud-outline: 0 1px 2px #061116, 1px 0 #061116, -1px 0 #061116,
    0 -1px #061116, 0 2px 3px #061116;
  text-shadow: var(--hud-outline);
}
#hud .hud-bottom {text-shadow: var(--hud-outline);}
#hud :is(.stat-label, .shield-stat > small, .hud-operator > span, .inventory-caption,
  #reload-status, .weapon-system, .weapon-system span, .weapon-system b,
  .weapon-slot > span, .weapon-slot > small, .grenade-slot > span, .grenade-slot > small) {
  font-size: 12px; line-height: 1.5; letter-spacing: 0; color: #f0f6e9;
}
#hud .shield-stat .stat-label b {margin-right: 3px;}
#hud .shield-stat {min-width: 68px;}
#hud .shield-stat > small {margin-block: 2px; min-height: 18px;}
#hud #reload-status {height: auto; min-height: 18px; color: #ffe1b6;}
#hud :is(.sector-label > span, .run-mods, .run-mods b, .boss-bar span,
  .boss-bar strong, .boss-hp, .boss-pattern, .hud-button, .desktop-hints) {
  font-size: 12px; line-height: 1.5; letter-spacing: .3px; color: #eaf3e9;
}
#hud .sector-label > strong {font-size: 17px; line-height: 1.5; letter-spacing: .7px;}
#hud .mission-state > span {font-size: 14px; color: #eef5e9; letter-spacing: .1px;}
#hud .desktop-hints {gap: 8px 16px; flex-wrap: wrap;}
#hud .desktop-hints b {color: #ffe1b6;}
#hud .boss-bar > div:first-child {flex-wrap: wrap; gap: 4px 10px;}
#hud :is(.boss-bar span, .boss-hp) {color: #ffe1b6;}
#hud .boss-pattern {color: #f5e7d0;}
#hud :is(.toast, .interaction, .operator-line, .combat-warning) {
  font-size: 14px; line-height: 1.65; letter-spacing: .1px; color: #f0f6e9;
  background: #102229f2; border-color: var(--amber);
}
#hud .combat-warning {padding: 6px 12px; max-width: 86%; white-space: normal; text-align: center; color: #f0d9ff;}
#hud .interaction {max-width: 90%; white-space: normal;}
#hud .operator-line {white-space: normal; overflow: visible; text-overflow: clip; max-width: min(76%, 560px);}
#hud .sector-banner p {font-size: 15px; line-height: 1.9; color: #edf3e8;}
#hud .training-armory-button {font-size: 13px; line-height: 1.6; background: #173f46f2;}
#hud .training-armory-button span {font-size: 12px; color: #d6e9de;}
#hud .weapon-slot, #hud .grenade-slot {height: auto; min-height: 90px;}
body.touch-ui #hud :is(.touch-small, .hud-button) {
  font-family: var(--ui-font); font-size: 12px; line-height: 1.25; font-weight: 600;
  letter-spacing: 0; padding: 2px; color: #f0f6e9; background-color: #102229db;
  border-color: #b8cac6b3; text-shadow: 0 1px 1px #061116;
}
body.touch-ui #hud #touch-fire {background-color: #503c28b8; border-color: #ffd29b;}
body.touch-ui #hud :is(.touch-small:active, .touch-small.selected) {background-color: #66503aed; color: #fff5db;}
body.touch-ui #hud .operator-line {top: calc(90px + var(--safe-top)); bottom: auto; max-width: min(60%, 560px);}
body.touch-ui #hud:has(#training-armory-button:not(.hidden)) .operator-line {top: calc(120px + var(--safe-top));}
body.touch-ui #hud:has(#boss-bar:not(.hidden)) .operator-line {top: auto; bottom: calc(140px + var(--safe));}
body.touch-ui #hud .hud-bottom .stat-label {line-height: 18px;}
body.touch-ui #hud .hud-bottom .shield-stat {width: 68px;}
body.touch-ui #hud .hud-bottom .shield-stat strong {font-size: 28px;}
body.touch-ui #hud .hud-bottom .shield-stat > small,
body.touch-ui #hud .hud-bottom .shield-stat #shield-state {
  font-size: 12px; line-height: 14px; min-height: 14px; margin: 0; color: #f0f6e9;
}
body.touch-ui #hud .hud-bottom .ammo-stat > div {gap: 3px;}
body.touch-ui #hud .hud-bottom .inventory-caption {line-height: 18px;}

@media (max-width: 760px) {
  #game-shell .deployment-layout {grid-template-columns: minmax(0, 1fr);}
  #game-shell .loadout-layout {display: flex; flex-direction: column;}
  #game-shell .loadout-weapons {width: 100%;}
  #game-shell .settings-grid {grid-template-columns: minmax(0, 1fr); gap: 28px;}
  #title-screen .title-copy {padding: 18px;}
}
@media (max-width: 600px) {
  #game-shell .hub-header {flex-wrap: wrap; gap: 12px;}
  #game-shell .hub-header > div:nth-child(2) {order: 3; width: 100%; margin: 0;}
  #game-shell .hub-header .wallet {margin-left: auto;}
  #game-shell .hub-screen {padding-inline: 16px;}
  #game-shell :is(.shop-catalog, .weapon-catalog, .equipment-catalog) {grid-template-columns: minmax(0, 1fr);}
  #game-shell .shop-clerk {grid-template-columns: 120px minmax(0, 1fr);}
  #game-shell .shop-clerk .clerk-tag {font-size: 12px; left: 5px; top: 5px; right: 5px;}
  #game-shell .clerk-portrait {padding-top: 44px;}
  #game-shell .skin-panel {grid-template-columns: 100px minmax(0, 1fr); gap: 0 12px;}
  #game-shell .skin-description p {font-size: 14px;}
  #game-shell .skin-options {grid-template-columns: 1fr;}
  #game-shell .skin-option {display: flex; align-items: center; gap: 10px; text-align: left;}
  #game-shell .skin-option > div {width: 44px; height: 44px; flex-shrink: 0;}
  #game-shell .skin-preview {height: 300px;}
  #game-shell .loadout-slot {padding: 10px 6px;}
  #game-shell .loadout-slot > span {letter-spacing: 0;}
  #game-shell .shop-filters {padding: 14px; gap: 14px 10px;}
  #game-shell .settings-panel {padding: 22px 18px;}
  #title-screen .japanese-title {font-size: 17px; letter-spacing: 2px;}
  #title-screen .tagline {font-size: 15px; letter-spacing: .4px;}
  #title-screen .home-navigation {flex-wrap: wrap;}
  #title-screen .home-navigation .secondary-button {flex: 1 1 190px; font-size: 15px; padding: 12px;}
  #hud .mission-state {flex-direction: column; align-items: flex-end; gap: 0;}
  #hud .mission-state > span {max-width: 120px; white-space: normal; text-align: right;}
  body.touch-ui #hud .hud-bottom {grid-template-columns: minmax(182px, 1fr) minmax(0, 1fr); column-gap: 8px;}
  body.touch-ui #hud .hud-bottom .vitals {gap: 8px;}
}
@media (max-width: 380px) {
  #game-shell .shop-filters {grid-template-columns: minmax(0, 1fr);}
  #game-shell .shop-filters label {grid-column: 1;}
  #title-screen .brand {gap: 8px; letter-spacing: 1px;}
  #title-screen .brand-sub, #title-screen .brand-divider {display: none;}
  #hud .sector-label > strong {font-size: 15px;}
  body.touch-ui #hud .hud-bottom .ammo-stat strong {font-size: 30px;}
}
@media (max-height: 560px) and (orientation: landscape) {
  #title-screen .title-layout {grid-template-columns: minmax(0, 1fr) 210px; gap: 18px;}
  #title-screen .title-copy {padding: 16px;}
  #title-screen .intro {display: block; margin-bottom: 16px;}
  #title-screen .japanese-title {font-size: 17px; letter-spacing: 2px;}
  #title-screen .tagline {font-size: 15px;}
  #title-screen .operator-caption {padding: 12px;}
  #game-shell .loadout-layout {display: grid; grid-template-columns: 210px minmax(0, 1fr);}
  #game-shell .skin-panel {display: block;}
  #game-shell .deployment-layout {grid-template-columns: minmax(0, 1fr);}
  body.touch-ui #hud .hud-bottom {grid-template-columns: 182px minmax(0, 1fr) 104px; column-gap: 8px;}
  body.touch-ui #hud .hud-bottom .hud-operator {width: 52px;}
  body.touch-ui #hud .hud-bottom .health-stat {width: 46px;}
  body.touch-ui #hud .hud-bottom .shield-stat strong {line-height: 28px; margin: 0;}
  body.touch-ui #hud .hud-bottom .weapon-inventory {grid-column: 2; grid-row: 1; min-width: 0;}
  body.touch-ui #hud .hud-bottom .ammo-stat {grid-column: 3; grid-row: 1;}
}
@media (max-height: 560px) and (max-width: 640px) and (orientation: landscape) {
  #title-screen .title-layout {display: flex;}
  #game-shell .loadout-layout {display: flex;}
}