/* Battlefield-first combat layout. Menu styles below are independent. */
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;color:#eee8d9;background:#142a2f;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;overflow:hidden}canvas{position:fixed;inset:0;width:100%!important;height:100%!important;touch-action:none;outline:none}
button,select{font:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #ffd395;outline-offset:3px}[hidden]{display:none!important}
.eyebrow{font-size:10px;letter-spacing:2px;color:#dabb80}.combat-hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(10px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 20px max(16px,env(safe-area-inset-left));background:linear-gradient(#081c24dd,transparent);pointer-events:none}.combat-hud button{pointer-events:auto}
.battle-heading span{font-size:10px;letter-spacing:1px;color:#e8c693}.battle-heading h1{font:24px Georgia,serif;margin:4px 0}.combat-health{display:grid;grid-template-columns:1fr 1fr;gap:5px 20px;min-width:210px;font-size:11px;text-shadow:0 1px 4px #000}.combat-health span{display:flex;gap:8px;justify-content:space-between}.combat-health progress{grid-column:1/-1;width:100%;height:3px;border:0;accent-color:#e8b66e}progress::-webkit-progress-bar{background:#6c827044}progress::-webkit-progress-value{background:#e8b66e}
#pause{width:44px;height:44px;border:1px solid #d2bd8a55;border-radius:50%;background:#112a30cc;color:#e8c58e;font-size:23px}
#weapon-rack{position:fixed;left:max(10px,env(safe-area-inset-left));top:92px;bottom:84px;width:74px;display:flex;flex-direction:column;gap:5px;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain;touch-action:pan-y;mask-image:linear-gradient(transparent,#000 8px,#000 calc(100% - 8px),transparent);padding:8px 2px}
#weapon-rack button{flex-shrink:0;position:relative;min-height:56px;width:68px;border:1px solid #c6b58b44;border-radius:10px;background:#0b252bcc;color:#e8d4ad;display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:5px}.weapon-icon{font-size:24px}#weapon-rack b{font-size:13px}#weapon-rack small{grid-column:1/-1;font-size:9px;line-height:1.2}#weapon-rack button[aria-pressed=true]{border-color:#f2c783;background:#695534ed;box-shadow:inset 3px 0 #f3d19a}#weapon-rack .locked{opacity:.35}
.fire-controls{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));display:grid;gap:7px;text-align:center}.fire-controls>span{font-size:11px;text-shadow:0 2px 4px #000;color:#fff0ca}#fire{min-width:144px;min-height:60px;border:1px solid #ffe0a5;border-radius:30px;background:linear-gradient(145deg,#f2cc93,#b9824c);color:#182d31;box-shadow:0 5px 20px #0004;padding:10px 22px}#fire span{display:block;font-size:15px;font-weight:800;letter-spacing:1px}#fire small{display:block;font-size:9px;margin-top:5px}#fire:active{transform:translateY(1px)}
#message{position:fixed;bottom:48px;left:100px;max-width:calc(100% - 290px);font-size:10px;line-height:1.4;color:#f8e4c2;text-shadow:0 2px 4px #000;pointer-events:none}.aim-hint{position:fixed;bottom:20px;left:100px;font-size:10px;color:#d4e1d8;text-shadow:0 2px 4px #000;pointer-events:none}
#loading{position:fixed;inset:0;z-index:9;display:grid;place-content:center;text-align:center;background:radial-gradient(#29454d,#0a171f)}.loading-mark{font-size:80px;font-weight:bold}.loading-mark span{color:#e6ac70}
dialog {color:#eee8d9;border:1px solid #b394624d;background:linear-gradient(140deg,#15282cf7,#09191efc);box-shadow:0 35px 120px #000b;width:min(1080px,94vw);max-height:90dvh;padding:32px;border-radius:5px;overflow:auto;}
dialog::backdrop {background:#04121991;backdrop-filter:blur(7px)}
dialog h2 {font-family:Georgia,serif;font-weight:400;font-size:clamp(28px,4vw,48px);margin:20px 0 8px;letter-spacing:-1px}
dialog p {color:#aebfbb;font-size:13px;line-height:1.6}.menu-top{display:flex;justify-content:space-between;gap:15px}#supply-count{color:#f0c184;font-size:12px;letter-spacing:1px}.menu-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.menu-tabs button,dialog button{min-height:44px;border:1px solid #a7b5a93d;background:#263c3e70;color:#ede6d5;padding:10px 16px;border-radius:3px}.menu-tabs button[aria-current="page"]{background:#c49a61;color:#122328}.region-heading{display:flex;justify-content:space-between;margin:24px 0 10px;font-size:11px;letter-spacing:2px;color:#d5b887}.stage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.stage-card{position:relative;text-align:left;display:flex;flex-direction:column;gap:9px;min-height:110px!important;background:linear-gradient(145deg,var(--region),#15272c)!important;border-top:2px solid #8e9d85!important}.stage-card strong{font:18px Georgia,serif}.stage-card small{font-size:9px;letter-spacing:1px;color:#c3c9b7}.stage-card .number{font-size:11px;color:#dab178}.stage-card.boss{border-color:#d3a862!important}.stage-card:disabled{opacity:.38;cursor:not-allowed}.stage-card:not(:disabled):hover{filter:brightness(1.3);border-color:#f0c68b!important}.stage-card.selected{outline:1px solid #ecc087}.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.upgrade-card{padding:24px;background:#203638a8;border:1px solid #a9b1a632}.upgrade-card h3{font:25px Georgia,serif;margin:12px 0}.upgrade-card .rank{font-size:12px;letter-spacing:3px;color:#e5b574}.upgrade-card button{width:100%;margin-top:16px;background:#b99057;color:#112228;font-weight:bold}.upgrade-card button:disabled{opacity:.45;cursor:default}.result-banner{padding:24px;border-left:3px solid #dfac67;background:linear-gradient(110deg,#9d733831,#22383b40);margin-bottom:22px}.result-banner h3{font:30px Georgia,serif;margin:0 0 10px}.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.result-actions button:first-child{background:#deb476;color:#132628}.manual{max-width:700px}.manual dt{color:#ecc188;margin-top:20px}.manual dd{margin:8px 0;color:#b6c6c1;line-height:1.6;font-size:14px}#save-status{font-size:11px;color:#ebc188;min-height:18px}.settings{flex-wrap:wrap;max-width:520px}body:has(dialog[open]) footer{opacity:.35}button[hidden]{display:none!important}
@media(max-width:760px){dialog{padding:20px;max-height:94dvh}.stage-grid{grid-template-columns:repeat(2,1fr)}.stage-card:last-child{grid-column:span 2;min-height:86px!important}.upgrade-grid{grid-template-columns:1fr}.menu-tabs{gap:6px}.menu-tabs button{font-size:11px;padding:8px 10px}.region-heading{font-size:10px;letter-spacing:1px}.settings{max-width:calc(100% - 28px)}.settings button{padding:0 6px}dialog h2{margin-top:15px}.menu-top .eyebrow{font-size:8px}}
@media(prefers-reduced-motion:no-preference){dialog[open]{animation:enter-menu .2s ease-out}@keyframes enter-menu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}}

/* Expedition atlas and weapon dossiers: an open, illustrated military ledger. */
dialog {
  width: min(1150px,96vw);
  border: 0;
  border-top: 2px solid #d4b475;
  background: radial-gradient(ellipse at top right,#314c4b88,transparent 65%),#10272a;
  box-shadow: 0 35px 120px #000a;
  border-radius: 0;
  padding: 30px 42px
}
.menu-top {
  padding-bottom: 8px;
  border-bottom: 1px solid #c1b38c30
}
dialog h2 {
  font-size: clamp(27px,4vw,49px);
  letter-spacing: -1.4px
}
.menu-tabs {
  gap: 22px;
  border-bottom: 1px solid #b6b79940;
  margin: 20px 0
}
.menu-tabs button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding: 12px 0;
  color: #a8b9b3
}
.menu-tabs button[aria-current=page] {
  background: none;
  color: #f1d39b;
  border-color: #f1d39b
}
.menu-tabs #resume {
  margin-left: auto;
  color: #ead0a1
}
.region-atlas-nav {
  display: flex;
  gap: 18px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 18px 0
}
.region-atlas-nav button {
  border: 0;
  background: none;
  padding: 8px 0;
  font-size: 11px;
  color: #98afa7
}
.region-atlas-nav button.active {
  color: #f2d397
}
.campaign-atlas {
  position: relative;
  height: 345px;
  overflow: hidden;
  border-block: 1px solid #b3b09130;
  background: radial-gradient(ellipse at 42% 68%,#61734c48,transparent 60%),linear-gradient(140deg,#273e3b,#132b2f);
  color: #cfcdac
}
.region-1 {
  background: radial-gradient(ellipse at 40% 60%,#4c75473b,transparent 60%),#142f29
}
.region-2 {
  background: linear-gradient(140deg,#3e59644d,#172e3a);
  color: #c9e0e5
}
.region-3 {
  background: linear-gradient(140deg,#67403266,#231f21);
  color: #d99f79
}
.region-4 {
  background: linear-gradient(140deg,#344a64,#12242b);
  color: #a2cbd5
}
.atlas-caption {
  position: absolute;
  left: 22px;
  top: 16px;
  z-index: 1
}
.atlas-caption h3 {
  font: 25px Georgia,serif;
  margin: 7px 0
}
.atlas-caption p {
  margin: 0;
  font-size: 11px
}
.atlas-terrain {
  position: absolute;
  inset: 55px 0 0;
  width: 100%;
  height: 290px
}
.siege-pin {
  position: absolute;
  transform: translate(-50%,-15%);
  width: 130px;
  padding: 0!important;
  background: none!important;
  border: 0!important;
  color: #e9e0c7;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 6px
}
.siege-pin .pin-symbol {
  width: 43px;
  height: 43px;
  border: 1px solid #bfa16b;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #183337;
  font: 17px Georgia,serif;
  box-shadow: 0 0 0 6px #d9c18a0d
}
.siege-pin.boss .pin-symbol {
  border-radius: 4px;
  transform: rotate(6deg);
  font-size: 28px
}
.siege-pin.selected .pin-symbol {
  background: #d1b079;
  color: #172b2d;
  box-shadow: 0 0 0 7px #d9c18a20
}
.siege-pin strong {
  font: 14px Georgia,serif;
  text-shadow: 0 2px 5px #000
}
.siege-pin small {
  font-size: 8px;
  letter-spacing: 1px;
  color: #d4ba84
}
.siege-pin:disabled {
  opacity: .35;
  cursor: default
}
.siege-briefing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 22px 0 7px
}
.siege-briefing h3 {
  font: 26px Georgia,serif;
  margin: 8px 0
}
.siege-briefing p {
  margin: 0
}
.siege-briefing button {
  flex-shrink: 0;
  background: #d0af77;
  color: #122a2d;
  border: 0;
  border-radius: 0;
  padding: 15px 24px
}
.siege-briefing button:disabled {
  background: #52625b;
  color: #bbc4ba
}
.arsenal-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 45px;
  margin-top: 25px
}
.weapon-rail {
  display: flex;
  flex-direction: column
}
.weapon-rail button {
  display: flex;
  gap: 15px;
  align-items: center;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #bac0a222;
  background: none;
  padding: 17px 8px;
  border-radius: 0
}
.weapon-rail button>span {
  font: 23px Georgia,serif;
  color: #8b987c
}
.weapon-rail strong {
  font: 16px Georgia,serif;
  display: block
}
.weapon-rail small {
  font-size: 8px;
  color: #97aaa1;
  display: block;
  letter-spacing: 1px;
  margin-top: 7px
}
.weapon-rail .selected {
  color: #f0cd8f;
  background: linear-gradient(90deg,#ac905a20,transparent);
  border-left: 2px solid #d9b77a
}
.weapon-dossier h3 {
  font: 42px Georgia,serif;
  margin: 12px 0 0
}
.weapon-drawing {
  width: 100%;
  height: 205px
}
.weapon-dossier p {
  margin: 0 0 20px
}
.weapon-stats {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 15px;
  border-block: 1px solid #b4b09533;
  padding: 15px 0
}
.weapon-stats dt {
  font-size: 8px;
  letter-spacing: 1px;
  color: #9ab3ad
}
.weapon-stats dd {
  margin: 8px 0 0;
  font: 21px Georgia,serif;
  color: #e3c695
}
.weapon-dossier>button {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #d0af77;
  border-radius: 0;
  color: #e1c497;
  padding: 12px 0
}
.weapon-dossier>button:disabled {
  opacity: .45
}
.hardware {
  margin-top: 36px;
  border-top: 1px solid #c2b28655;
  padding-top: 24px
}
.hardware h3 {
  font: 27px Georgia,serif;
  margin: 9px 0
}
.hardware-row {
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid #b8b69925;
  padding: 16px 0
}
.hardware-row h4 {
  font: 19px Georgia,serif;
  margin: 0
}
.hardware-row h4 small {
  font: 10px Arial;
  color: #a7b5a3;
  margin-left: 15px
}
.hardware-row p {
  margin: 5px 0 0;
  font-size: 11px
}
.hardware-mark {
  font-size: 32px;
  color: #c9b17e;
  width: 42px;
  text-align: center
}
.upgrade-track {
  margin-left: auto;
  letter-spacing: 3px;
  color: #c6b182;
  white-space: nowrap
}
.hardware-row button {
  border: 0;
  background: none;
  border-bottom: 1px solid #c4a66d;
  color: #dfc493;
  padding: 8px;
  white-space: nowrap
}
.hardware-row button:disabled {
  opacity: .3
}
.siege-result {
  border-left: 2px solid #cca669;
  padding: 10px 20px;
  margin: 22px 0
}
.siege-result h3 {
  font: 32px Georgia,serif;
  margin: 8px 0
}
.siege-result p {
  margin: 0
}
@media(max-width:760px) {
  dialog {
    padding: 20px
  }
  .menu-tabs {
    gap: 15px
  }
  .region-atlas-nav {
    gap: 5px
  }
  .region-atlas-nav button {
    font-size: 9px;
    width: 30%;
    text-align: left
  }
  .campaign-atlas {
    height: 350px
  }
  .atlas-caption {
    left: 12px;
    top: 13px
  }
  .atlas-caption h3 {
    font-size: 22px
  }
  .siege-pin {
    width: 78px
  }
  .siege-pin strong {
    font-size: 11px;
    max-width: 78px
  }
  .siege-pin small {
    font-size: 7px;
    letter-spacing: 0
  }
  .siege-pin .pin-symbol {
    width: 38px;
    height: 38px
  }
  .siege-briefing {
    display: block;
    padding-top: 20px
  }
  .siege-briefing button {
    margin-top: 15px;
    width: 100%
  }
  .arsenal-layout {
    grid-template-columns: 1fr;
    gap: 20px
  }
  .weapon-rail {
    flex-direction: row;
    overflow: auto;
    gap: 5px
  }
  .weapon-rail button {
    min-width: 105px;
    padding: 10px 5px;
    gap: 5px;
    align-items: start
  }
  .weapon-rail button>span {
    font-size: 14px
  }
  .weapon-rail strong {
    font-size: 12px
  }
  .weapon-rail small {
    font-size: 7px
  }
  .weapon-dossier h3 {
    font-size: 32px
  }
  .weapon-drawing {
    height: 175px
  }
  .weapon-stats {
    grid-template-columns: 1fr 1fr
  }
  .hardware-row {
    gap: 10px;
    flex-wrap: wrap
  }
  .hardware-row>div {
    flex: 1
  }
  .upgrade-track {
    font-size: 10px;
    margin-left: 50px
  }
  .hardware-row button {
    margin-left: auto
  }
  .menu-tabs #resume {
    margin-left: 0
  }
  .settings {
    top: 232px
  }
}

#skip-intro{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:8;border:0;border-bottom:1px solid #bc9d67;background:#10282bcc;color:#e8d6b3;padding:.6rem 1.2rem;letter-spacing:.12em;cursor:pointer}#skip-intro[hidden]{display:none}
/* 4.3: quick audio mix and visual war-room progression. */
.settings{max-width:690px;gap:7px}
.mix-control {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid #c5b48166
}
.mix-control input {
  width: 66px;
  height: 32px;
  accent-color: #d8b277;
  cursor: pointer
}
.mix-control button {
  background: transparent!important;
  border: 0!important;
  padding: 0 7px!important;
  min-height: 40px
}
.menu-mix {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin: -6px 0 20px;
  color: #c9c6b6
}
.menu-mix input {
  width: 90px
}
.menu-mix button {
  font-size: 12px
}
.kit-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: end;
  background: radial-gradient(ellipse at 60% 70%,#917c3b22,transparent 70%)
}
.kit-comparison figure {
  margin: 0;
  min-width: 0
}
.kit-comparison figcaption {
  text-align: center;
  color: #bea673;
  font-size: 10px;
  letter-spacing: .15em;
  padding-bottom: 12px
}
.kit-comparison .weapon-drawing {
  height: auto;
  max-height: 240px;
  object-fit: contain;
  width: 100%
}
.rank-route {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 20px 0;
  margin: 0;
  position: relative
}
.rank-route:before {
  content: '';
  height: 1px;
  background: #b4ab7055;
  position: absolute;
  top: 35px;
  left: 7%;
  right: 7%
}
.rank-route li {
  position: relative;
  text-align: center;
  z-index: 1
}
.rank-route b {
  display: grid;
  place-items: center;
  border: 1px solid #b8ae7677;
  background: #173035;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font: 16px Georgia
}
.rank-route span {
  display: block;
  font-size: 8px;
  letter-spacing: .1em;
  margin-top: 7px;
  color: #819693
}
.rank-route .owned b {
  background: #b6a272;
  color: #172c30
}
.rank-route .available b {
  border-color: #edcf8f;
  color: #edcf8f;
  box-shadow: 0 0 16px #e1b25b26
}
.rank-route .locked {
  opacity: .4
}
.upgrade-comparison {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0 18px;
  font-variant-numeric: tabular-nums
}
.upgrade-comparison th {
  text-align: left;
  font-size: 10px;
  letter-spacing: .09em;
  font-weight: 400;
  color: #a1b4ac;
  padding: 10px 0;
  border-bottom: 1px solid #b9b49222
}
.upgrade-comparison td {
  font: 22px Georgia;
  color: #d3cbb6;
  border-bottom: 1px solid #b9b49222
}
.upgrade-comparison .improved {
  color: #d8cf91
}
.kit-limitation {
  font-size: 11px!important;
  max-width: 480px;
  color: #9eb1aa!important
}
.weapon-rail small {
  font-size: 10px
}
.hardware {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 28px
}
.hardware>h3,.hardware>p,.hardware>.eyebrow {
  grid-column: 1/-1;
  margin: 0
}
.hardware-workbench {
  border-top: 2px solid #b29a6577;
  padding-top: 18px
}
.hardware-workbench h4 {
  font: 25px Georgia;
  margin: 7px 0
}
.hardware-workbench .kit-comparison {
  margin: 0 -10px
}
.hardware-workbench .rank-route span {
  font-size: 6px
}
.hardware-workbench .rank-route b {
  width: 25px;
  height: 25px
}
.hardware-workbench .rank-route:before {
  top: 32px
}
.hardware-workbench button {
  background: #c6ac73;
  color: #172c2f;
  width: 100%;
  border: 0
}
.hardware-workbench .upgrade-comparison td {
  font-size: 18px
}
.purchase-receipt {
  color: #ecd39a!important;
  border-left: 2px solid #d8b676;
  padding: 10px 14px;
  background: #b0944022;
  animation: receipt .5s ease-out
}
@keyframes receipt {
  from {
    opacity: 0;
    transform: translateY(8px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.siege-result {
  border: 0!important;
  text-align: center;
  background: radial-gradient(ellipse at top,#b5a06a1b,transparent 60%);
  padding: 24px 0!important
}
.victory-stars {
  color: #e2bd79;
  font-size: 35px;
  letter-spacing: 9px;
  margin: 16px
}
.report-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin: 25px 0
}
.report-metrics b {
  display: block;
  font: 26px Georgia;
  color: #e6d4ad
}
.report-metrics span {
  display: block;
  font-size: 9px;
  letter-spacing: .12em;
  color: #9aafa7;
  margin-top: 9px
}
.siege-result .result-actions {
  justify-content: center
}
.unlock-reveal {
  border-block: 1px solid #c7ab6055;
  max-width: 550px;
  margin: 30px auto;
  padding: 24px
}
.unlock-reveal h4 {
  font: 32px Georgia;
  margin: 10px
}
.unlock-reveal img {
  height: 210px;
  object-fit: contain
}
.unlock-reveal p {
  font-size: 12px
}
.pin-fortress {
  width: 85px;
  height: 52px;
  object-fit: contain;
  display: block;
  margin: auto;
  filter: drop-shadow(0 4px 5px #06191b66)
}
.siege-pin.boss .pin-fortress {
  width: 110px;
  height: 65px
}
.siege-pin .pin-symbol {
  position: absolute;
  left: 50%;
  top: 34px;
  transform: translateX(-50%);
  font-size: 10px!important;
  background: #193337d9!important;
  border: 0!important;
  width: 22px!important;
  height: 22px!important;
  line-height: 22px!important
}
.unlock-marker {
  display: block;
  font-size: 7px;
  letter-spacing: 1px;
  color: #ecce8f;
  font-style: normal;
  margin-top: 5px
}
.campaign-atlas {
  min-height: 410px;
  background: radial-gradient(ellipse at 35% 68%,#92ad8340,transparent 45%),linear-gradient(135deg,#344c413b,#142d35aa)
}
.siege-pin {
  background: none!important;
  border: 0!important
}
.siege-pin strong {
  font-size: 13px
}
.siege-pin small {
  font-size: 8px
}
@media(max-width:900px) {
  .hardware {
    grid-template-columns: 1fr
  }
  .hardware-workbench {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 25px
  }
  .hardware-workbench .kit-comparison {
    grid-row: span 3
  }
  .hardware-workbench .rank-route,.hardware-workbench button {
    grid-column: 1/-1
  }
  .hardware-workbench .rank-route span {
    font-size: 9px
  }
  .hardware-workbench .rank-route b {
    width: 30px;
    height: 30px
  }
  .menu-mix {
    justify-content: flex-start;
    flex-wrap: wrap
  }
  .campaign-atlas {
    min-height: 430px
  }
}
@media(max-width:540px) {
  .settings {
    gap: 4px
  }
  .mix-control input {
    width: 52px
  }
  .settings .mix-control button {
    font-size: 10px
  }
  .hardware-workbench {
    display: block
  }
  .hardware-workbench .kit-comparison img {
    max-height: 180px
  }
  .weapon-dossier h3 {
    font-size: 32px
  }
  .upgrade-comparison td {
    font-size: 20px
  }
  .report-metrics {
    gap: 20px
  }
  .pin-fortress {
    width: 58px;
    height: 40px
  }
  .siege-pin.boss .pin-fortress {
    width: 74px;
    height: 48px
  }
  .siege-pin strong {
    font-size: 10px
  }
  .siege-pin .pin-symbol {
    top: 27px
  }
  .menu-mix {
    gap: 10px
  }
  .menu-mix input {
    width: 70px
  }
  .campaign-atlas {
    min-height: 380px
  }
  .atlas-caption h3 {
    font-size: 24px
  }
  .rank-route span {
    font-size: 7px
  }
}
@media(prefers-reduced-motion:reduce) {
  .purchase-receipt {
    animation: none
  }
}
.weapon-dossier > button + button {
  margin-left: 18px;
}

/* 4.4 menu and orientation contract */
#settings-dialog{width:min(460px,94vw);border-radius:18px;padding:24px}#settings-dialog h2{margin-top:0}.settings-content{display:grid;gap:14px}.settings-content label,.settings-content .audio-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.settings-content input{width:160px;max-width:50%;accent-color:#e6b175}.settings-content select{min-height:44px;background:#183539;color:#eee;padding:8px;border:1px solid #a6a08055}#settings-resume{background:#d9b779;color:#14282c}.settings-content button{border-radius:22px}
#menu-content h3{font:28px Georgia,serif}.improve-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:20px 0 38px}.improve-card{min-width:0;padding:0 0 22px;border-bottom:1px solid #bead7840}.improve-card .weapon-drawing{width:100%;height:150px;object-fit:contain;margin:0}.improve-card h4{font:25px Georgia,serif;margin:8px 0}.improve-card p{margin:8px 0;min-height:36px}.improve-benefit{display:block;color:#f2d096;font:25px Georgia,serif}.improve-benefit small{font:12px Arial,sans-serif;color:#bac7bc}.improve-card .improve-cost{font-size:12px;min-height:18px;color:#d9c99d}.improve-card button{border-radius:24px;min-width:110px;margin:5px 8px 0 0}.improve-card button:first-of-type{background:#d8b77b;color:#11282d;border:0;font-weight:bold}.weapon-improvements .improve-card .weapon-drawing{height:120px}#campaign-dialog{border-radius:18px}body:has(dialog[open]) .combat-hud,body:has(dialog[open]) #weapon-rack,body:has(dialog[open]) .fire-controls,body:has(dialog[open]) #message,body:has(dialog[open]) .aim-hint{visibility:hidden}
@media(max-width:700px){.improve-grid{grid-template-columns:1fr;gap:16px}.improve-card{display:grid;grid-template-columns:100px minmax(0,1fr);gap:4px 12px;align-items:center}.improve-card .weapon-drawing,.weapon-improvements .improve-card .weapon-drawing{grid-row:1/5;height:110px}.improve-card h4{font-size:22px}.improve-card p{min-height:0;margin:3px 0}.improve-card button{grid-column:2;justify-self:start}.improve-card .improve-benefit{font-size:22px}.combat-health{min-width:170px;gap:4px 8px;font-size:10px}.battle-heading h1{font-size:18px}.combat-hud{gap:8px}.battle-heading{max-width:40%}}
@media(orientation:portrait){#weapon-rack{top:110px;bottom:145px;width:65px}#weapon-rack button{width:60px}.combat-hud{align-items:flex-start;flex-wrap:wrap}.combat-health{order:3;width:100%}.battle-heading{max-width:75%}.fire-controls{bottom:calc(24px + env(safe-area-inset-bottom))}#message{left:18px;bottom:116px;max-width:calc(100% - 36px)}.aim-hint{left:18px;bottom:9px;font-size:9px}#fire{min-height:58px}.combat-health progress{margin:0}.battle-heading h1{font-size:22px}}
@media(orientation:landscape) and (max-height:540px){.combat-hud{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:10px}.battle-heading h1{font-size:17px;margin:2px 0}.battle-heading span{font-size:9px}#weapon-rack{top:62px;bottom:12px;width:68px}#weapon-rack button{min-height:48px;width:62px}#weapon-rack small{font-size:8px}.fire-controls{bottom:max(10px,env(safe-area-inset-bottom))}#fire{min-height:52px;min-width:132px}#message{bottom:29px;font-size:9px}.aim-hint{bottom:10px;font-size:9px}dialog{max-height:96dvh}.menu-top,#menu-description{display:none}.menu-tabs{margin:8px 0}dialog h2{margin:4px 0;font-size:25px}.menu-mix{margin:6px 0}}

#scout{display:none} @media(orientation:portrait){#scout{display:block;position:fixed;right:12px;top:112px;min-height:44px;border:1px solid #c6b58b55;border-radius:24px;background:#10292ed9;color:#efd19d;padding:8px 14px;font-size:11px}}body:has(dialog[open]) #scout{visibility:hidden}

.view-controls{position:fixed;right:max(16px,env(safe-area-inset-right));top:84px;display:flex;gap:5px}.view-controls button{min-width:44px;min-height:44px;border:1px solid #d2bd8a55;border-radius:24px;background:#112a30cc;color:#f3d6a0;font-size:20px}.view-controls #auto-view{font-size:11px;padding:0 12px}body:has(dialog[open]) .view-controls{visibility:hidden}
@media(orientation:portrait){.view-controls{top:164px}}@media(orientation:landscape) and (max-height:540px){.view-controls{top:60px}}
