/* Full-window game surface. Other tabs keep their existing page layout. */
.run-summary { display: none; }
body.immersive-game:not(.mobile-game) .run-summary:not([hidden]) {
  display: block;
  position: absolute;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  padding: 7px 12px;
  border-radius: 5px;
  background: #182235b8;
  color: #d9e4e9;
  font: 11px var(--mono);
  white-space: nowrap;
  pointer-events: none;
}
body.immersive-game:not(.mobile-game) .toast { bottom: 60px; }
body.immersive-game {
  --minimap-top: 174px;
  --safe-top: env(safe-area-inset-top, 0px);
  --screen-top: max(12px, env(safe-area-inset-top));
  --screen-left: max(12px, env(safe-area-inset-left));
  --screen-right: max(12px, env(safe-area-inset-right));
  --screen-bottom: max(12px, env(safe-area-inset-bottom));
  width: 100%;
  height: 100vh;
  height: var(--app-height, 100dvh);
  margin: 0;
  overflow: hidden;
  display: block;
  overscroll-behavior: none;
  background: #141b29;
}

body.immersive-game .site-header,
body.immersive-game .intro,
body.immersive-game .window-bar,
body.immersive-game .sidebar,
body.immersive-game .dashboard,
body.immersive-game .loadout-section,
body.immersive-game footer,
body.immersive-game .controls-strip,
body.immersive-game .arena-bottom { display: none; }

body.immersive-game main,
body.immersive-game #game-view,
body.immersive-game .play-layout,
body.immersive-game .game-shell {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

body.immersive-game #arena-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  height: var(--app-height, 100dvh);
  min-height: 0;
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  overflow: hidden;
  background: #282335;
  touch-action: auto;
}

body.immersive-game #arena-wrap #game-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: fill;
  touch-action: none;
  opacity: 1;
}

body.immersive-game #arena-wrap::after { z-index: 1; opacity: .3; }

/* One row of controls, then weapons/time, mission, and the current boss. */
body.immersive-game .screen-tools {
  position: absolute;
  top: var(--screen-top);
  right: var(--screen-right);
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.immersive-game .screen-tool,
body.immersive-game #pause-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  color: #e3e9f1;
  background: #162238cc;
  border: 1px solid #8395b45e;
  border-radius: 10px;
  box-shadow: 0 2px 8px #0a102533;
  pointer-events: auto;
  touch-action: manipulation;
}

body.immersive-game .screen-tool svg,
body.immersive-game #pause-button svg { width: 18px; height: 18px; }
body.immersive-game .screen-tool[aria-pressed="true"] { color: #d6eeb9; border-color: #b8d29a9c; background: #2b4338db; }
body.immersive-game .screen-tool:disabled { opacity: .45; }

body.immersive-game .hud {
  position: absolute;
  top: var(--screen-top);
  left: var(--screen-left);
  right: calc(var(--screen-right) + 104px);
  height: 44px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 6;
  pointer-events: none;
}

body.immersive-game .health-block {
  flex: 0 1 190px;
  min-width: 0;
  height: 44px;
  padding: 6px 8px;
  gap: 6px;
  background: #162238c7;
  border: 1px solid #8395b43d;
  border-radius: 9px;
}
body.immersive-game .health-block > div { flex: 1; min-width: 0; width: auto; }
body.immersive-game .health-block svg { width: 14px; height: 14px; }
body.immersive-game .hp-title { font-size: 9px; line-height: 11px; gap: 5px; margin-bottom: 4px; white-space: nowrap; }
body.immersive-game .hp-title b { font-size: 8px; }
body.immersive-game .health-meter { height: 5px; }
body.immersive-game .defense-status { font-size: 7px; line-height: 1.2; margin-top: 2px; white-space: nowrap; }
body.immersive-game #pause-button { margin-left: auto; }
body.immersive-game .run-clock {
  position: fixed;
  top: calc(var(--screen-top) + 48px);
  right: var(--screen-right);
  left: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  height: 44px;
  padding: 6px 8px;
  font: 16px var(--mono);
  color: #f3ebdc;
  background: #162238bd;
  border: 1px solid #8395b43d;
  border-radius: 8px;
}

body.immersive-game .weapon-bar {
  display: flex;
  flex-wrap: nowrap;
  top: calc(var(--screen-top) + 48px);
  left: var(--screen-left);
  right: auto;
  width: min(252px, calc(100% - var(--screen-left) - var(--screen-right) - 88px));
  max-width: none;
  margin: 0;
  transform: none;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  z-index: 6;
}
body.immersive-game .weapon-slot {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 2px;
  border-radius: 7px;
  background: #162238bc;
  touch-action: pan-x;
}
body.immersive-game .weapon-slot canvas { width: 30px; height: 30px; }
body.immersive-game .weapon-slot span { font-size: 7px; right: 2px; bottom: 1px; }

body.immersive-game .mobile-objective {
  display: block;
  position: absolute;
  top: calc(var(--screen-top) + 96px);
  left: var(--screen-left);
  right: var(--screen-right);
  width: auto;
  min-height: 16px;
  margin: 0;
  padding: 1px 6px;
  color: #e0d8e6;
  font-size: 9px;
  line-height: 14px;
  letter-spacing: .2px;
  text-align: center;
  text-shadow: 0 1px 3px #161426, 0 0 6px #161426;
  pointer-events: none;
  z-index: 6;
}
body.immersive-game[data-game-state="ready"] .mobile-objective { display: none; }
body.immersive-game .boss-hud {
  top: calc(var(--screen-top) + 116px);
  left: 50%;
  right: auto;
  width: min(320px, calc(100% - var(--screen-left) - var(--screen-right)));
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 7px;
  background: #1e2036ce;
  z-index: 6;
  pointer-events: none;
}
body.immersive-game .boss-hud span { font-size: 9px; line-height: 14px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.immersive-game .boss-hud .meter { height: 5px; }
body.immersive-game .xp-bar { position: absolute; top: auto; bottom: 0; height: 3px; z-index: 7; background: #18223780; }

/* Transparent controls float over the continuous battlefield. */
body.immersive-game .touch-controls {
  position: absolute;
  top: auto;
  bottom: var(--screen-bottom);
  left: var(--screen-left);
  right: var(--screen-right);
  height: 90px;
  padding: 0 4px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  background: transparent;
  border: 0;
  pointer-events: none;
  z-index: 7;
}
body.immersive-game .move-control,
body.immersive-game .dash-control { display: flex; flex-direction: column; align-items: center; gap: 0; }
body.immersive-game .move-control > small,
body.immersive-game .dash-control > small { display: none; }
body.immersive-game .joystick {
  width: 82px;
  height: 82px;
  border: 2px solid #d8e6e75e;
  background: #19304738;
  box-shadow: inset 0 0 0 5px #ffffff06;
}
body.immersive-game .joystick span { width: 36px; height: 36px; left: 21px; top: 21px; background: #c0dae073; border: 1px solid #f0fcfb8c; box-shadow: 0 2px 6px #08112230; }
body.immersive-game .joystick i { display: block; line-height: 78px; font-size: 48px; color: #d9edf01a; }
body.immersive-game #touch-dash {
  width: 70px;
  height: 70px;
  font-size: 14px;
  color: #ecf7e9;
  border: 2px solid #d1ecd185;
  background: #6e9d8e80;
  box-shadow: inset 0 0 0 4px #edffed0b;
}
body.immersive-game #touch-dash:disabled { background: #35465770; border-color: #a6b4c35e; color: #d3dde7b3; box-shadow: none; }
body.immersive-game #touch-dash:active { transform: scale(.96); box-shadow: none; }
body.immersive-game .control-center { display: flex; gap: 3px; padding: 0 5px 4px; color: #d2dcdf; text-shadow: 0 1px 3px #15202a; }
body.immersive-game .control-center > b,
body.immersive-game .control-center > span { display: none; }
body.immersive-game .control-center #mobile-level,
body.immersive-game .control-center #xp-label { display: block; margin: 0; font-size: 8px; color: #d8e2e6; }

/* The lobby owns the viewport; only its middle panel scrolls. */
body.immersive-game .start-screen {
  inset: 0;
  padding: var(--screen-top) max(20px, env(safe-area-inset-right)) var(--screen-bottom) max(20px, env(safe-area-inset-left));
  display: flex;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
  touch-action: pan-y;
  background: radial-gradient(ellipse at 10% 0%, #64517466, transparent 55%), linear-gradient(#141c2de8, #111929f5);
  z-index: 10;
}
body.immersive-game .start-screen .campaign-lobby {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 860px;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  gap: 0;
  text-align: left;
}
body.immersive-game .lobby-topline { flex-shrink: 0; min-height: 44px; padding-right: 108px; }
body.immersive-game .coin-wallet { min-height: 36px; }
body.immersive-game .lobby-brand { flex-shrink: 0; margin: 12px 0 16px; }
body.immersive-game .campaign-lobby .lobby-brand h2 { margin: 0; font-size: clamp(27px, 3.6vw, 36px); }
body.immersive-game .campaign-lobby .lobby-brand h2 span { display: inline; margin: 0; }
body.immersive-game .lobby-tabs { flex-shrink: 0; margin-bottom: 14px; }
body.immersive-game .lobby-tabs button { min-height: 40px; }
body.immersive-game .lobby-panel { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 1px 2px 8px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.immersive-game #lobby-scroll-hint { flex-shrink: 0; margin: 2px 0 0; padding: 2px 6px; color: #a9c1d2; font: 10px/15px var(--sans); text-align: center; letter-spacing: .3px; }
body.immersive-game .lobby-launch { flex-shrink: 0; padding-top: 12px; padding-bottom: 2px; }
body.immersive-game .campaign-lobby #start-button { min-height: 51px; font-size: 15px; padding: 12px; }
body.immersive-game .lobby-bottomline { margin-top: 8px; }
body.immersive-game .lobby-bottomline button { min-height: 32px; padding: 5px 3px; }
body.immersive-game .hero-stage { height: 174px; margin-bottom: 14px; }
body.immersive-game .modal-layer { padding: max(18px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); overflow: hidden; touch-action: pan-y; z-index: 20; }
body.immersive-game .game-modal { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
body.immersive-game .toast { bottom: calc(var(--screen-bottom) + 100px); max-width: min(560px, 90%); font-size: 10px; white-space: normal; text-align: center; z-index: 30; }
body.immersive-game[data-game-state="ready"] .toast { bottom: calc(var(--screen-bottom) + 92px); }

@media (max-width: 520px) {
  body.immersive-game .start-screen { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  body.immersive-game .lobby-topline { justify-content: flex-start; }
  body.immersive-game .season-tag { display: none; }
  body.immersive-game .campaign-lobby .pixel-subtitle { display: none; }
  body.immersive-game .lobby-brand { margin: 10px 0 14px; }
  body.immersive-game .hero-stage { height: 140px; }
  body.immersive-game .hero-stage .character-preview { width: 98px; height: 98px; bottom: 21px; }
  body.immersive-game .hero-caption { top: 29px; }
  body.immersive-game .hero-caption strong { font-size: 24px; }
  body.immersive-game .campaign-lobby .starting-weapons { gap: 5px; }
  body.immersive-game .campaign-lobby .starter-weapon.character-option { min-height: 81px; }
  body.immersive-game .campaign-lobby .character-option canvas { width: 35px; height: 35px; }
  body.immersive-game .campaign-lobby .starter-label > span { font-size: 6px; letter-spacing: 0; }
  body.immersive-game .lobby-bottomline > span { font-size: 7px; }
}

@media (max-height: 640px) and (orientation: portrait) {
  body.immersive-game .lobby-brand { margin: 6px 0 9px; }
  body.immersive-game .campaign-lobby .lobby-brand h2 { font-size: 27px; }
  body.immersive-game .lobby-tabs { margin-bottom: 9px; }
  body.immersive-game .lobby-tabs button { min-height: 36px; }
  body.immersive-game .hero-stage { display: none; }
  body.immersive-game .campaign-lobby .starter-weapon.character-option { min-height: 72px; }
  body.immersive-game .campaign-lobby .character-option canvas { width: 31px; height: 31px; }
  body.immersive-game .lobby-launch { padding-top: 8px; }
  body.immersive-game .campaign-lobby #start-button { min-height: 47px; font-size: 14px; padding: 10px; }
  body.immersive-game .lobby-bottomline { margin-top: 5px; }
  body.immersive-game .lobby-bottomline button { min-height: 30px; }
}

@media (max-width: 359px) {
  /* Five 44px weapon targets fit when the clock shares the mission row. */
  body.immersive-game .weapon-bar { width: min(252px, calc(100% - var(--screen-left) - var(--screen-right))); }
  body.immersive-game .weapon-slot { min-width: 44px; }
  body.immersive-game .run-clock { top: calc(var(--screen-top) + 95px); min-width: 68px; height: 21px; padding: 2px 6px; font-size: 13px; }
  body.immersive-game .mobile-objective { right: calc(var(--screen-right) + 74px); text-align: left; font-size: 8px; padding-left: 0; letter-spacing: 0; }
}

@media (min-width: 900px) {
  body.immersive-game { --minimap-top: 132px; }
  body.immersive-game .weapon-bar { top: var(--screen-top); left: 50%; width: 252px; transform: translateX(-50%); }
  body.immersive-game .run-clock { top: var(--screen-top); right: calc(var(--screen-right) + 164px); }
  body.immersive-game .mobile-objective { top: calc(var(--screen-top) + 54px); }
  body.immersive-game .boss-hud { top: calc(var(--screen-top) + 80px); }
  body.immersive-game .toast { bottom: calc(var(--screen-bottom) + 35px); }
}

@media (orientation: landscape) and (max-height: 600px) {
  body.immersive-game { --minimap-top: 158px; --screen-top: max(8px, env(safe-area-inset-top)); --screen-bottom: max(8px, env(safe-area-inset-bottom)); }
  body.immersive-game .run-clock { top: var(--screen-top); left: 50%; right: auto; transform: translateX(-50%); }
  body.immersive-game .weapon-bar { top: calc(var(--screen-top) + 52px); left: var(--screen-left); width: 244px; transform: none; }
  body.immersive-game .mobile-objective { top: calc(var(--screen-top) + 54px); left: calc(var(--screen-left) + 264px); right: var(--screen-right); min-height: 36px; display: flex; align-items: center; justify-content: center; font-size: 9px; }
  body.immersive-game .boss-hud { top: calc(var(--screen-top) + 100px); width: 300px; }
  body.immersive-game .touch-controls { height: 76px; padding: 0 7px; }
  body.immersive-game .joystick { width: 72px; height: 72px; }
  body.immersive-game .joystick span { left: 16px; top: 16px; }
  body.immersive-game .joystick i { line-height: 68px; }
  body.immersive-game #touch-dash { width: 64px; height: 64px; font-size: 13px; }
  body.immersive-game .control-center { display: flex; padding-bottom: 3px; }
  body.immersive-game .toast { bottom: calc(var(--screen-bottom) + 20px); max-width: 52%; }
  body.immersive-game .start-screen { padding: var(--screen-top) max(20px, env(safe-area-inset-right)) var(--screen-bottom) max(20px, env(safe-area-inset-left)); }
  /* These three declarations replace legacy landscape !important rules. */
  body.immersive-game .start-screen .campaign-lobby { display: grid !important; max-width: 1100px !important; column-gap: 22px !important; grid-template-columns: minmax(200px, .42fr) minmax(0, 1fr); grid-template-rows: 44px minmax(0, 1fr) auto; }
  body.immersive-game .lobby-topline { grid-column: 1; grid-row: 1; padding-right: 0; min-height: 44px; }
  body.immersive-game .season-tag { display: flex; font-size: 6px; letter-spacing: .3px; }
  body.immersive-game .coin-wallet { min-height: 32px; }
  body.immersive-game .lobby-brand { grid-column: 1; grid-row: 2; align-self: start; display: block; margin: 15px 0 0; }
  body.immersive-game .campaign-lobby .lobby-brand h2 { font-size: 31px; line-height: 1.2; }
  body.immersive-game .campaign-lobby .lobby-brand h2 span { display: block; margin-top: 4px; }
  body.immersive-game .campaign-lobby .pixel-subtitle { display: block; text-align: left; margin-top: 12px; font-size: 6px; max-width: 190px; }
  body.immersive-game .lobby-tabs { grid-column: 2; grid-row: 1; height: 44px; margin: 0 108px 0 0; padding: 3px; align-self: start; }
  body.immersive-game .lobby-tabs button { min-height: 36px; gap: 4px; font-size: 6px; }
  body.immersive-game .lobby-tabs strong { font-size: 9px; }
  body.immersive-game .lobby-panel { grid-column: 2; grid-row: 2 / 4; margin-top: 10px; }
  body.immersive-game #lobby-scroll-hint { display: none; }
  body.immersive-game .lobby-launch { grid-column: 1; grid-row: 3; align-self: end; padding-top: 0; background: none; }
  body.immersive-game .campaign-lobby #start-button { min-height: 46px; padding: 10px 6px; font-size: 12px; gap: 5px; }
  body.immersive-game .lobby-bottomline { flex-wrap: wrap; font-size: 6px; gap: 2px; margin-top: 5px; }
  body.immersive-game .lobby-bottomline > div { gap: 12px; }
  body.immersive-game .lobby-bottomline button { min-height: 30px; font-size: 9px; }
  body.immersive-game .hero-stage { display: none; }
  body.immersive-game .campaign-lobby .starter-weapon.character-option { min-height: 70px; }
  body.immersive-game .campaign-lobby .character-option canvas { width: 31px; height: 31px; }
  body.immersive-game .modal-layer { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  body.immersive-game .game-modal { max-width: 650px; }
}

/* Browser toolbars can shorten the visual viewport without a media-query change. */
body.immersive-game.short-game .start-screen { overflow-y: auto; align-items: flex-start; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.immersive-game.short-game .start-screen .campaign-lobby { min-height: 176px; }
body.immersive-game.short-game .lobby-brand { display: none; }
body.immersive-game.short-game .lobby-launch { padding-top: 4px; }
@media (max-height: 280px) {
  body.immersive-game .start-screen { overflow-y: auto; align-items: flex-start; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
  body.immersive-game .start-screen .campaign-lobby { min-height: 176px; }
  body.immersive-game .lobby-brand { display: none; }
  body.immersive-game .lobby-launch { padding-top: 4px; }
}

/* Quiet reset entry points; the explicit destructive action lives in its dialog. */
body.immersive-game .lobby-bottomline { flex-wrap: wrap; gap: 4px 8px; }
body.immersive-game .lobby-bottomline > div { display: flex; align-items: center; gap: 4px; min-width: 0; }
body.immersive-game .lobby-bottomline button { min-width: 44px; min-height: 44px; padding: 8px 4px; white-space: nowrap; }
body.immersive-game #reset-progress-button,
body.immersive-game #reset-progress-shop-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #c987a33d;
  border-radius: 6px;
  background: #9b56700d;
  color: #d2a1b4;
  font-size: 10px;
  line-height: 1.4;
  touch-action: manipulation;
}
body.immersive-game #reset-progress-button { padding-inline: 7px; }
body.immersive-game #reset-progress-shop-button { width: 100%; margin: 12px 0 6px; font-size: 11px; background: #9b567014; }
body.immersive-game #reset-progress-button:focus-visible,
body.immersive-game #reset-progress-shop-button:focus-visible,
body.immersive-game .danger-button:focus-visible { outline: 2px solid #f4bdd2; outline-offset: 3px; }
body.immersive-game .game-modal .reset-progress-note {
  margin: 13px 0 17px;
  padding: 11px 13px;
  border: 1px solid #c987a33d;
  border-left: 3px solid #ce8ca8;
  border-radius: 5px;
  color: #cbb7c5;
  background: #a5617c10;
  font-size: 11px;
  line-height: 1.8;
  text-align: left;
  overflow-wrap: anywhere;
}
body.immersive-game .reset-progress-note strong { color: #f0c4d5; }
body.immersive-game .reset-progress-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
body.immersive-game .reset-progress-actions button { width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 11px 8px; border-radius: 6px; font-size: 12px; line-height: 1.5; }
body.immersive-game .danger-button {
  min-height: 44px;
  padding: 11px 16px;
  border: 1px solid #e5a2ba;
  border-radius: 6px;
  color: #291c29;
  background: #d093ac;
  box-shadow: 0 2px 0 #73485d;
  font-weight: 700;
  touch-action: manipulation;
}
body.immersive-game .danger-button:active { transform: translateY(1px); box-shadow: 0 1px 0 #73485d; }
body.immersive-game .danger-button:disabled { opacity: .5; box-shadow: none; }
@media (hover: hover) {
  body.immersive-game #reset-progress-button:hover,
  body.immersive-game #reset-progress-shop-button:hover { color: #efbdd2; background: #9b567026; border-color: #c987a375; }
  body.immersive-game .danger-button:hover:not(:disabled) { background: #e2a8bf; }
}
@media (max-width: 359px) {
  body.immersive-game .lobby-bottomline { gap: 2px 5px; }
  body.immersive-game .lobby-bottomline > div { gap: 2px; }
  body.immersive-game #reset-progress-button { font-size: 9px; padding-inline: 5px; }
}