/* Touch, responsive layout and shared late overrides; preserve original cascade order. */
#touch {
  position:fixed;
  inset:0;
  pointer-events:none;
  display:none;
  touch-action:none
}
.stick {
  position:absolute;
  bottom:max(30px,env(safe-area-inset-bottom));
  width:124px;
  height:124px;
  border-radius:50%;
  background:#18354755;
  border:1px solid #9bc8df66;
  pointer-events:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:none;
  user-select:none
}
.stick>i {
  display:block;
  width:48px;
  height:48px;
  background:#adf0ff44;
  border:1px solid #b9f0ff8a;
  border-radius:50%
}
.stick>span {
  position:absolute;
  bottom:10px;
  font-size:9px;
  letter-spacing:.15em;
  color:#c4e4f0;
  pointer-events:none
}
#moveStick {
  left:max(26px,env(safe-area-inset-left))
}
#touchAttack {
  right:max(26px,env(safe-area-inset-right))
}
.touch-actions {
  position:absolute;
  right:170px;
  bottom:max(20px,env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:repeat(3,58px);
  gap:8px
}
.touch-button {
  pointer-events:auto;
  touch-action:none;
  border-radius:12px;
  background:#102d40bd;
  border:1px solid #8ab3cc88;
  width:58px;
  height:49px;
  font-size:10px;
  font-weight:700;
  user-select:none
}
.touch-button.main {
  border-color:#80eaff;
  color:#a3f4ff
}
.touch-button.held {
  background:#477084
}
.touch-button small {
  display:block;
  opacity:.65;
  font-size:8px;
  margin-top:2px
}
.touch-sprint {
  position:absolute;
  left:59px;
  bottom:168px;
  width:58px;
  height:37px
}
body.touch-visible #touch {
  display:block
}
body.touch-visible .hint {
  display:none
}
body.touch-visible .bottom {
  bottom:auto;
  top:112px
}
body.menu-open #touch {
  display:none
}
body.menu-open #hud {
  opacity:.2
}
@media(max-width:600px) {
  #hud {
    padding:12px
  }
  .health {
    width:145px
  }
  .brand {
    font-size:12px
  }
  .eyebrow {
    font-size:9px
  }
  .pill {
    font-size:10px
  }
  .connection {
    font-size:9px
  }
  .menu-card {
    grid-template-columns:1fr;
    gap:8px;
    max-width:390px
  }
  .menu-card .objective {
    margin:10px 0
  }
  .summary {
    font-size:12px;
    margin:8px 0
  }
  .menu-line {
    margin:10px 0
  }
  h1 {
    font-size:36px;
    margin:6px 0
  }
  .menu-button {
    padding:11px 14px
  }
  .settings {
    margin-top:10px
  }
  .field {
    margin:10px 0
  }
  .note {
    margin-top:10px
  }
  .touch-actions {
    left:50%;
    right:auto;
    transform:translateX(-50%);
    bottom:170px;
    grid-template-columns:repeat(5,47px);
    gap:5px
  }
  .touch-button {
    width:47px;
    height:43px;
    font-size:9px
  }
  .touch-sprint {
    bottom:30px;
    left:calc(50% - 24px);
    width:48px
  }
  .stick {
    width:116px;
    height:116px;
    bottom:28px
  }
  #moveStick {
    left:18px
  }
  #touchAttack {
    right:18px
  }
  .controls {
    margin-top:9px
  }
  .bottom {
    left:12px
  }
  #interact {
    bottom:42%;
    font-size:11px
  }
}
@media(max-height:500px) and (min-width:601px) {
  #menu {
    padding:14px 30px
  }
  .menu-card {
    gap:28px
  }
  h1 {
    font-size:40px
  }
  .objective {
    margin:12px 0
  }
  .summary {
    font-size:12px
  }
  .field {
    margin:10px 0
  }
  .settings {
    margin-top:12px
  }
  .menu-button {
    padding:10px
  }
  .note {
    margin-top:8px
  }
  .stick {
    width:106px;
    height:106px;
    bottom:18px
  }
  .touch-actions {
    right:145px;
    bottom:16px;
    grid-template-columns:repeat(3,52px);
    gap:6px
  }
  .touch-button {
    width:52px;
    height:43px
  }
  .touch-sprint {
    bottom:133px;
    left:49px
  }
  .hint {
    font-size:10px
  }
  .bottom {
    bottom:12px
  }
}
.menu-card {
  margin:auto
}
.assist-panel {
  border:1px solid #36586d;
  border-radius:5px;
  padding:13px;
  margin-top:12px;
  background:#0b2032
}
.assist-panel h2 {
  font-size:12px;
  margin:0 0 12px;
  color:var(--cyan);
  letter-spacing:.12em
}
.assist-panel p {
  font-size:11px;
  line-height:1.6;
  color:#b4c9d8;
  margin:8px 0
}
.assist-panel input[type=range] {
  width:100%;
  accent-color:var(--cyan)
}
.assist-panel output {
  color:#d7fbff
}
.assist-panel .selected {
  outline:2px solid #e7fcff;
  outline-offset:3px
}
.crosshair.ready:before,.crosshair.ready:after {
  background:#9affb5;
  box-shadow:0 0 5px #77ffaa
}
.menu-button.settings-button {
  font-size:12px;
  padding:10px 14px
}
.menu-card section {
  min-width:0
}
#touchAttack {
  position:absolute;
  right:max(26px,env(safe-area-inset-right));
  bottom:max(30px,env(safe-area-inset-bottom));
  width:124px;
  height:124px;
  border-radius:50%;
  font-size:18px;
  letter-spacing:.07em;
  background:#14394bbf;
  box-shadow:inset 0 0 25px #74edff12
}
#touchAttack small {
  font-size:9px;
  letter-spacing:.08em;
  margin-top:7px
}
#touchAttack.held {
  background:#387285
}
.recovery-heading {
  border-top:1px solid #36586d;
  padding-top:15px!important;
  margin-top:18px!important
}
.assist-panel select {
  max-width:175px
}
@media(max-width:600px) {
  #touchAttack {
    right:18px;
    width:116px;
    height:116px;
    bottom:28px;
    font-size:17px
  }
}
@media(max-height:500px) and (min-width:601px) {
  #touchAttack {
    width:106px;
    height:106px;
    bottom:18px;
    font-size:16px
  }
}
#mapPanel {
  position:fixed;
  inset:0;
  z-index:7;
  background:#030b15ed;
  align-items:center;
  justify-content:center;
  padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));
  touch-action:none
}
.map-card {
  display:flex;
  flex-direction:column;
  gap:12px;
  width:min(900px,100%);
  height:min(720px,100%);
  min-height:0;
  background:#0b1b2b;
  border:1px solid #365569;
  border-radius:8px;
  padding:18px
}
.map-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.map-header h2 {
  font-size:20px;
  letter-spacing:.08em;
  margin:5px 0
}
.map-header .menu-button {
  white-space:nowrap;
  padding:10px 15px;
  font-size:12px
}
#mapFogState {
  font-size:10px;
  letter-spacing:.08em;
  color:#afc6d8
}
#mapGraphic {
  display:flex;
  flex:1;
  min-height:0;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#081321;
  border:1px solid #203d52;
  border-radius:3px
}
#mapGraphic svg {
  display:block;
  width:100%;
  height:100%;
  min-height:0
}
.map-legend {
  display:flex;
  gap:8px 18px;
  flex-wrap:wrap;
  font-size:11px;
  color:#c4d6e2
}
.map-help {
  font-size:10px;
  color:#86a3b9
}
@media(max-width:600px) {
  .map-card {
    padding:12px;
    gap:10px
  }
  .map-header h2 {
    font-size:17px
  }
  .map-header .eyebrow {
    font-size:8px
  }
  .map-header .menu-button {
    padding:10px
  }
  .map-legend {
    font-size:10px
  }
  .map-help {
    font-size:9px
  }
}
@media(max-height:500px) {
  .map-card {
    padding:10px;
    gap:5px
  }
  .map-header h2 {
    font-size:15px;
    margin:2px 0
  }
  .map-header .eyebrow {
    font-size:8px
  }
  .map-legend {
    font-size:10px;
    gap:6px 15px
  }
  .map-help {
    font-size:9px
  }
}
#miniMap {
  display:none;
  position:absolute;
  left:max(20px,env(safe-area-inset-left));
  top:126px;
  width:clamp(130px,18vw,220px);
  background:#07172566;
  border:1px solid #9bd8ee55;
  border-radius:5px;
  overflow:hidden;
  pointer-events:none;
  opacity:.70
}
#miniMapGraphic {
  height:clamp(78px,24vh,145px)
}
#miniMapGraphic svg {
  width:100%;
  height:100%;
  display:block
}
.mini-label {
  font-size:9px;
  letter-spacing:.12em;
  padding:4px 7px;
  background:#07172588
}
@media(orientation:landscape) and (max-height:500px) {
  #miniMap {
    top:103px;
    width:145px;
    left:max(14px,env(safe-area-inset-left))
  }
  #miniMapGraphic {
    height:clamp(34px,calc(100vh - 244px),78px)
  }
  .mini-label {
    font-size:8px;
    padding:2px 5px
  }
  body.touch-visible .bottom {
    top:65px;
    left:auto;
    right:20px
  }
  .touch-sprint {
    left:145px;
    bottom:18px;
    height:43px
  }
}
#stealthStatus {
  position:absolute;
  top:82px;
  left:50%;
  transform:translateX(-50%);
  font-size:10px;
  letter-spacing:.08em;
  color:#8fffea;
  text-align:center;
  max-width:60%;
  pointer-events:none
}
.touch-button.active {
  background:#226b64;
  border-color:#8fffea;
  color:#caffef
}
@media(max-width:600px) {
  #stealthStatus {
    top:125px;
    max-width:95%;
    width:95%
  }
  .touch-actions {
    grid-template-columns:repeat(6,47px)
  }
}