:root { color-scheme: dark; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #e4f0ef; background: #0c1820; }
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 15% 0%, #19333d, transparent 60%); min-height: 100vh; }
button, input { font: inherit; }
button { border: 1px solid #587780; border-radius: 5px; padding: 10px 16px; background: #1c3540; color: #eefaf8; cursor: pointer; min-height: 44px; }
button:hover:enabled { background: #2d505b; }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #fbd58b; outline-offset: 4px; }
[hidden] { display: none !important; }
#game-container { max-width: 1440px; margin: auto; padding: 32px; }
.masthead, .toolbar, .map-heading, .actions, .map-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.masthead { margin-bottom: 28px; }
.eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: #8dafb5; margin: 0 0 10px; }
h1 { margin: 0; font-size: clamp(24px, 3vw, 36px); letter-spacing: .04em; }
h1 span { display: block; margin-top: 4px; font-size: 14px; color: #9fb6bc; font-weight: 400; letter-spacing: .02em; }
.badge { border: 1px solid #3b5c65; border-radius: 4px; padding: 7px 10px; font-size: 11px; letter-spacing: .12em; color: #85e1c7; white-space: nowrap; }
.toolbar { margin-bottom: 16px; flex-wrap: wrap; }
#timer { margin-left: 10px; color: #9fb6bc; font-variant-numeric: tabular-nums; }
.actions { flex-wrap: wrap; }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.map-section, #hud { border: 1px solid #34505a; border-radius: 8px; overflow: hidden; background: #10232c; }
.map-heading { padding: 18px; }
h2 { margin: 0; font-size: 16px; font-weight: 600; }
.map-heading > span { font-size: 10px; color: #9fb6bc; letter-spacing: .1em; }
.map-stage { position: relative; }
canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #182d35; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 24px; background: #08151de8; }
.overlay h2 { font-size: clamp(22px, 3vw, 36px); }
.overlay > p:not(.eyebrow) { max-width: 430px; color: #b8cccf; line-height: 1.6; font-size: 14px; }
#primary-action { background: #83e1c4; border-color: #83e1c4; color: #09271e; font-weight: 700; margin-top: 8px; padding-inline: 26px; }
#primary-action:hover { background: #adf4df; }
.map-caption { justify-content: flex-start; padding: 14px 18px; margin: 0; font-size: 11px; color: #b2c5c8; flex-wrap: wrap; }
.legend-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #83e1c4; }
.mandatory-key { color: #ffd38a; margin-left: 8px; }
.hint { margin-left: auto; color: #8dafb5; }
#hud { padding: 22px; }
.integrity { margin: 0 0 10px; font-size: 56px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.integrity small { font-size: 22px; color: #83e1c4; }
progress { width: 100%; height: 7px; border: 0; border-radius: 4px; accent-color: #83e1c4; background: #31434a; }
progress::-webkit-progress-bar { background: #31434a; border-radius: 4px; }
progress::-webkit-progress-value { background: #83e1c4; border-radius: 4px; }
progress::-moz-progress-bar { background: #83e1c4; }
.destruction { font-size: 12px; display: flex; justify-content: space-between; gap: 10px; }
.rule-note { color: #a5bec3; line-height: 1.5; font-size: 12px; border-bottom: 1px solid #34505a; padding-bottom: 18px; }
#hud h2 { display: flex; justify-content: space-between; margin-top: 22px; }
#hud h2 span { color: #8dafb5; font-size: 12px; }
#asset-list { list-style: none; margin: 8px 0 0; padding: 0; }
.asset { padding: 13px 0; border-bottom: 1px solid #29434d; }
.asset:last-child { border-bottom: 0; padding-bottom: 0; }
.asset-heading, .asset-meta { display: flex; justify-content: space-between; gap: 8px; }
.asset-heading { font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.asset-meta { font-size: 10px; color: #a5bec3; margin-bottom: 6px; }
.asset-mandatory { color: #ffd38a; }
.settings { margin-top: 20px; border: 1px solid #34505a; border-radius: 6px; padding: 14px 18px; font-size: 13px; }
summary { cursor: pointer; min-height: 44px; padding-block: 12px; }
.settings label { display: inline-flex; align-items: center; gap: 8px; margin: 12px 24px 0 0; min-height: 44px; }
.settings p, footer { font-size: 11px; color: #9fb6bc; }
footer { margin-top: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1000px) { .layout { grid-template-columns: minmax(0, 1fr); } #asset-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; } }
@media (max-width: 540px) { #game-container { padding: 16px; } .masthead > .badge { display: none; } .map-heading > span { display: none; } .overlay { position: relative; min-height: 250px; padding: 20px; } .map-stage.has-overlay canvas { display: none; } .actions { gap: 6px; } button { padding-inline: 12px; } .hint { display: none; } #hud { padding: 18px; } #asset-list { grid-template-columns: 1fr; } }

#gameCanvas, #fire { touch-action: none; }
#fire { min-width: 120px; min-height: 48px; margin-top: 8px; }
.combat-help { font-size: .85rem; color: #bbd1d3; }

.battlefield-body { background: #091722; }
.flight-controls { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid #34505a; }
#fire { margin: 0; flex-shrink: 0; background: #173d4d; border-color: #54d7ec; color: #c7fbff; user-select: none; }
#fire:active:enabled { background: #28657a; }
#movement-pad, .mobile-city, .mobile-fire-label { display: none; }
#asset-details > summary { font-weight: 600; }
#movement-pad button { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#movement-pad button[aria-pressed="true"] { background: #28657a; border-color: #83e1c4; }
.combat-help { margin: 0; font-size: 12px; line-height: 1.5; }
@media (max-width: 540px) {
  .flight-controls { gap: 12px; padding: 10px; }
  .combat-help { font-size: 11px; }
}
/* The complete battlefield and firing control fit on a landscape phone.
   The accessible asset panel/settings remain available below the play area. */
@media (orientation: landscape) and (max-height: 540px) {
  #game-container { padding: 8px; }
  .masthead, .map-heading, .map-caption { display: none; }
  .toolbar { margin-bottom: 6px; gap: 6px; flex-wrap: nowrap; min-height: 44px; }
  .actions { flex-wrap: nowrap; gap: 6px; }
  .actions button { padding: 6px 10px; font-size: 12px; }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .battlefield-body { display: flex; align-items: center; justify-content: center; gap: 8px; }
  .map-stage { flex: 0 1 auto; width: min(calc(100% - 100px), calc((100svh - 72px) * 16 / 9)); }
  .flight-controls { flex: 0 0 90px; padding: 0 6px 0 0; border: 0; }
  #fire { min-width: 0; width: 84px; min-height: 72px; padding: 8px; font-size: 14px; }
  .combat-help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .overlay { position: absolute; min-height: 0; padding: 12px; }
  .map-stage.has-overlay canvas { display: block; }
  .overlay .eyebrow { display: none; }
  .overlay h2 { font-size: 22px; }
  .overlay > p:not(.eyebrow) { margin: 8px 0; font-size: 12px; line-height: 1.4; }
  #primary-action { margin-top: 0; }
}
/* Phone controls live outside the battlefield; no combat pixels are covered. */
@media (max-width: 540px), (orientation: landscape) and (max-height: 540px) {
  #game-container { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
  .masthead, .map-heading, .map-caption, footer { display: none; }
  .mobile-city { display: inline; margin-left: 8px; font-size: 12px; color: #83e1c4; white-space: nowrap; }
  .mobile-fire-label { display: inline; }
  .desktop-fire-label { display: none; }
  .toolbar { gap: 6px; margin-bottom: 6px; }
  .actions { gap: 6px; }
  .actions button { font-size: 12px; padding: 6px 10px; }
  #movement-pad { display: grid; grid-template-columns: repeat(3,44px); grid-template-rows: repeat(3,44px); flex: 0 0 132px; align-self: flex-end; }
  #movement-pad button { min-width: 44px; min-height: 44px; padding: 0; font-size: 22px; border-radius: 8px; }
  #movement-pad span { display: grid; place-items: center; font-size: 9px; color: #9fb6bc; }
  .flight-controls { justify-content: flex-end; }
  #fire { min-width: 84px; min-height: 84px; font-weight: 700; font-size: 18px; border-radius: 18px; touch-action: none; }
  .combat-help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .overlay { position: absolute; min-height: 0; padding: 12px; }
  .map-stage.has-overlay canvas { display: block; }
  .overlay .eyebrow { display: none; }
  .overlay h2 { font-size: 20px; }
  .overlay > p:not(.eyebrow) { margin: 6px 0; font-size: 11px; line-height: 1.3; }
  #primary-action { margin-top: 0; }
  #hud { padding: 12px; }
  #hud .integrity { font-size: 32px; }
  #hud .rule-note { display: none; }
}
@media (max-width: 540px) and (orientation: portrait) {
  .battlefield-body { display: grid; grid-template-columns: 1fr 1fr; padding-bottom: 8px; gap: 8px; }
  .map-stage { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  #movement-pad { grid-column: 1; grid-row: 2; margin-left: 8px; }
  .flight-controls { grid-column: 2; grid-row: 2; border: 0; align-self: flex-end; padding: 0 8px 0 0; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .battlefield-body { gap: 8px; padding: 0 8px 8px; }
  .map-stage { width: min(calc(100% - 232px), calc((100svh - 80px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)); }
  .flight-controls { flex: 0 0 84px; padding: 0; align-self: flex-end; }
}

/* DH-MOB-01B: reuse the battlefield aim surface and the independent FIRE control. */
#mobile-status { display: none; }
#rotate-prompt { position: fixed; inset: 0; z-index: 10; padding: 28px; background: #091722;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
#rotate-prompt p { max-width: 32rem; line-height: 1.5; color: #b8cccf; }
@media (max-width: 540px) and (orientation: portrait) {
  html, body { overflow: hidden; overscroll-behavior: none; }
}
@media (orientation: landscape) and (max-height: 540px) {
  html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
  #game-container { height: 100vh; height: 100dvh; max-width: none; }
  #application { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .toolbar { flex: 0 0 44px; margin-bottom: 4px; }
  #mobile-status { display: flex; flex: 0 0 28px; align-items: center; justify-content: space-between;
    gap: 12px; padding: 0 8px; margin-bottom: 4px; font-size: 12px; white-space: nowrap; }
  #mobile-status strong { color: #83e1c4; font-variant-numeric: tabular-nums; }
  .aim-guide { font-size: 11px; color: #b8cccf; }
  .layout { display: flex; flex: 1 1 auto; min-height: 0; }
  .map-section { width: 100%; display: flex; align-items: center; justify-content: center; }
  .battlefield-body { width: 100%; height: 100%; gap: 12px; padding: 0 8px 4px; }
  .map-stage { flex: 0 1 auto;
    width: min(calc(100% - 112px), calc((100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)); }
  .flight-controls { flex: 0 0 96px; padding: 0; align-self: center; }
  #fire { width: 96px; min-width: 96px; height: 96px; min-height: 96px; -webkit-touch-callout: none; }
  #hud { display: none; }
  .settings { position: fixed; right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 3; width: min(320px, calc(100% - 16px)); max-height: calc(100dvh - 80px); overflow: auto;
    margin: 0; background: #10232c; padding: 0 12px; }
  body[data-game-state="running"] .settings { display: none; }
  .settings[open] label { display: flex; margin: 0; }
  .settings p { margin: 8px 0; }
  #gameCanvas { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
}

/* DH-MOB-01C: one compact status row, dedicated thumb zones, unchanged 16:9 view. */
.aim-zone { display: none; }
.weapon-hud { display: grid; gap: 4px; width: 100%; text-align: center; color: #f1fffb; font-size: 12px; }
.weapon-hud { max-width: 120px; }
.weapon-hud button { min-height: 44px; width: 100%; padding: 4px; font-size: 12px; }
#ammunition-bar { width: 100%; height: 10px; accent-color: #83e1c4; }
#ammo-feedback { min-height: 16px; font-size: 10px; color: #ffe0a1; white-space: nowrap; }
#fire[aria-disabled="true"] { opacity: .6; }
#aim { position: relative; width: 88px; height: 88px; min-width: 0; padding: 0;
  border: 3px solid #83e1c4; border-radius: 50%; background: #183944; color: #f1fffb;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#aim .control-label { position: absolute; bottom: 8px; left: 0; right: 0; font-size: 14px; font-weight: 800; letter-spacing: .08em; }
#aim-direction { position: absolute; left: calc(50% - 1px); top: calc(50% - 24px); width: 2px; height: 24px;
  background: #ffe0a1; transform-origin: 50% 100%; transform: rotate(var(--aim-bearing, 0rad)); }
#aim-direction::before { content: ''; position: absolute; left: -4px; top: -3px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid #ffe0a1; }
#aim-thumb { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border-radius: 50%;
  background: #f1fffb; border: 2px solid #0b202b; transform: translate(calc(-50% + var(--aim-x, 0px)), -50%); }
#aim[aria-pressed="true"] { border-color: #ffe0a1; background: #285761; box-shadow: 0 0 0 3px #ffe0a144; }
#fire[aria-pressed="true"] { border-color: #ffe0a1; background: #345b62; box-shadow: inset 0 0 0 2px #ffe0a1; }
@media (orientation: landscape) and (max-height: 540px) {
  #game-container { padding: max(4px, env(safe-area-inset-top)) max(4px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left)); }
  .toolbar { gap: 6px; margin-bottom: 4px; }
  .toolbar > div:first-child { white-space: nowrap; font-size: 12px; }
  #state { font-size: 11px; padding: 5px; }
  #timer { margin-left: 4px; font-size: 12px; }
  .mobile-city { margin-left: 4px; }
  .actions { gap: 4px; }
  .actions button { font-size: 11px; padding: 6px 8px; }
  #mobile-status { flex: 0 0 auto; gap: 10px; padding: 0; margin: 0; font-size: 12px; }
  .aim-guide { display: none; }
  .battlefield-body { --aim-size: 88px; --fire-size: 88px; --thumb-gap: 6px;
    gap: var(--thumb-gap); padding: 0 4px 4px; }
  .aim-zone { display: flex; flex: 0 0 var(--aim-size); justify-content: center; align-items: center; }
  #aim { width: var(--aim-size); height: var(--aim-size); }
  .flight-controls { flex: 0 0 var(--fire-size); align-self: center; flex-direction: column; gap: 4px; }
  #fire { width: var(--fire-size); min-width: var(--fire-size); height: var(--fire-size); min-height: var(--fire-size); }
  .map-stage { width: min(calc(100% - var(--aim-size) - var(--fire-size) - 2 * var(--thumb-gap) - 8px),
    calc((100dvh - 64px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 16 / 9)); }
}
@media (orientation: landscape) and (max-height: 540px) and (max-width: 640px) {
  .battlefield-body { --aim-size: 72px; --fire-size: 80px; --thumb-gap: 4px; }
  #aim .control-label { bottom: 5px; font-size: 12px; }
}