/* Iron Jungle — tactical glass UI */
:root {
  --bg: #070b10;
  --glass: rgba(12, 18, 25, 0.60);
  --glass-strong: rgba(10, 15, 21, 0.78);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-hi: rgba(255, 255, 255, 0.07);
  --cyan: #63d2e3;
  --cyan-dim: rgba(99, 210, 227, 0.35);
  --amber: #f2b24c;
  --amber-dim: rgba(242, 178, 76, 0.35);
  --red: #ff4d3d;
  --green: #5be38a;
  --text: #eef2f4;
  --text-2: #9aa8b3;
  --radius: 14px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
  --font-display: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
#app { position: fixed; inset: 0; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
#app.aiming #game-canvas { cursor: none; }
.hidden { display: none !important; }

/* ---------- Glass ---------- */
.glass {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%), var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow), inset 0 1px 0 var(--glass-hi);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  position: relative;
}
.glass::before {
  /* thin top reflection */
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 22%);
  mix-blend-mode: screen;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-strong); }
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text);
  padding: 13px 22px; min-width: 220px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s;
  position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.18), transparent);
  transform: skewX(-20deg); transition: left 0.5s ease;
}
.btn:hover::after, .btn:focus-visible::after { left: 120%; }
.btn:hover { border-color: var(--cyan-dim); background: linear-gradient(180deg, rgba(99, 210, 227, 0.14), rgba(99, 210, 227, 0.03)); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.btn.primary {
  border-color: rgba(242, 178, 76, 0.55);
  background: linear-gradient(180deg, rgba(242, 178, 76, 0.32), rgba(242, 178, 76, 0.10));
  box-shadow: 0 0 0 1px rgba(242, 178, 76, 0.12), 0 8px 24px rgba(242, 178, 76, 0.15);
}
.btn.primary:hover { border-color: var(--amber); background: linear-gradient(180deg, rgba(242, 178, 76, 0.45), rgba(242, 178, 76, 0.15)); }
.btn.ghost { background: transparent; color: var(--text-2); }
.btn.ghost:hover { color: var(--text); }

/* ---------- Screens ---------- */
.screen {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px 16px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  z-index: 20;
}
.screen.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.35s ease; }
.screen.modal { z-index: 30; background: rgba(4, 7, 10, 0.35); }
#screen-pause, #screen-gameover, #screen-complete { background: radial-gradient(ellipse at center, rgba(4, 8, 12, 0.35), rgba(4, 8, 12, 0.72)); }
#screen-loading { background: var(--bg); z-index: 40; }

.loader { text-align: center; color: var(--text-2); font-family: var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; }
.loader .ring { width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.1); border-top-color: var(--amber); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Title */
#screen-title { background: linear-gradient(90deg, rgba(4, 8, 12, 0.72) 0%, rgba(4, 8, 12, 0.25) 55%, rgba(4, 8, 12, 0) 100%), linear-gradient(0deg, rgba(4, 8, 12, 0.6), transparent 35%); justify-content: flex-start; }
.title-wrap { width: min(1100px, 100%); margin-left: clamp(0px, 5vw, 80px); }
.logo { margin-bottom: 34px; animation: rise 0.9s cubic-bezier(.2, .8, .2, 1) both; }
.logo-kicker { font-family: var(--font-display); letter-spacing: 0.5em; color: var(--amber); font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.logo h1 {
  font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 0.88;
  font-size: clamp(56px, 10vw, 128px); letter-spacing: 0.04em;
  background: linear-gradient(180deg, #ffffff 0%, #d9dfe3 55%, #8d9aa3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.logo h1 span { display: block; color: transparent; background: linear-gradient(180deg, #ffd28a, #e08f2a); -webkit-background-clip: text; background-clip: text; letter-spacing: 0.12em; font-size: 0.62em; }
.logo-rule { width: 180px; height: 2px; margin-top: 14px; background: linear-gradient(90deg, var(--amber), transparent); }
.title-grid { display: flex; gap: 20px; align-items: stretch; flex-wrap: wrap; }
.menu { display: flex; flex-direction: column; gap: 10px; padding: 20px; animation: rise 0.9s 0.12s cubic-bezier(.2, .8, .2, 1) both; }
.briefing { max-width: 420px; padding: 20px 22px; animation: rise 0.9s 0.22s cubic-bezier(.2, .8, .2, 1) both; }
.briefing h3 { margin: 0 0 8px; font-family: var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); font-size: 15px; }
.briefing p { margin: 0 0 14px; color: var(--text-2); line-height: 1.55; font-size: 14px; }
.briefing ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.briefing li span { display: inline-block; width: 96px; color: var(--text-2); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.version { position: absolute; right: 18px; bottom: 14px; font-size: 12px; color: var(--text-2); letter-spacing: 0.1em; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Dialogs */
.dialog { padding: 28px 30px; min-width: min(380px, 100%); max-width: 100%; text-align: center; animation: pop 0.35s cubic-bezier(.2, .8, .2, 1) both; max-height: calc(100vh - 40px); overflow: auto; }
.dialog.wide { width: min(640px, 100%); }
.dialog h2 { font-family: var(--font-display); font-size: 40px; letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 18px; }
.kicker { font-family: var(--font-display); letter-spacing: 0.4em; text-transform: uppercase; color: var(--amber); font-size: 13px; margin-bottom: 4px; }
.kicker.danger { color: var(--red); }
.stack { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.stack.row { flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(10px); } to { opacity: 1; transform: none; } }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 20px; }
.stats div { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 10px; }
.stats small { display: block; color: var(--text-2); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.stats b { font-family: var(--font-display); font-size: 26px; }
.rank { font-family: var(--font-display); font-size: 84px; font-weight: 700; line-height: 1; margin: -6px 0 14px; color: var(--amber); text-shadow: 0 0 30px rgba(242, 178, 76, 0.45); }

/* Settings */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); text-align: left; flex-wrap: wrap; }
.s-label { color: var(--text-2); font-size: 14px; letter-spacing: 0.04em; }
.seg { display: inline-flex; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 3px; }
.seg button { font: 600 14px var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); background: transparent; border: 0; padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: all 0.2s; }
.seg button[aria-checked="true"] { background: rgba(99, 210, 227, 0.18); color: var(--text); box-shadow: inset 0 0 0 1px var(--cyan-dim); }
.seg button:focus-visible, .toggle:focus-visible, input[type=range]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.toggle { width: 50px; height: 28px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(0, 0, 0, 0.3); position: relative; cursor: pointer; transition: background 0.2s; }
.toggle span { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-2); transition: transform 0.2s, background 0.2s; }
.toggle[aria-checked="true"] { background: rgba(99, 210, 227, 0.3); }
.toggle[aria-checked="true"] span { transform: translateX(22px); background: var(--text); }
input[type=range] { width: 200px; accent-color: var(--cyan); }

/* Help */
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 8px 18px; text-align: left; }
.controls div { display: flex; align-items: center; gap: 4px; color: var(--text-2); font-size: 13px; padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); flex-wrap: wrap; }
.controls span { margin-left: auto; color: var(--text); }
kbd { font: 600 12px var(--font-body); padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-bottom-width: 2px; color: var(--text); }
.pickup-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 18px 0 6px; font-size: 13px; color: var(--text-2); }
.pickup-legend b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; margin-right: 6px; font-family: var(--font-display); color: #fff; border: 2px solid var(--c); box-shadow: 0 0 10px var(--c); }
.tip { color: var(--text-2); font-size: 13px; margin: 10px 0 0; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
#hud .hud-panel { position: absolute; padding: 12px 16px; animation: hudIn 0.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hudIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
#hud-vitals { top: 16px; left: 16px; width: 280px; }
#hud #hud-mission { top: 16px; left: 50%; transform: translateX(-50%); width: min(420px, 40vw); text-align: center; animation-name: hudInC; }
@keyframes hudInC { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translateX(-50%); } }
#hud-combat { top: 16px; right: 16px; width: 250px; text-align: right; animation-delay: 0.08s; }
.hud-row { display: flex; justify-content: space-between; align-items: center; }
.hud-row.small { font-size: 12px; color: var(--text-2); margin-top: 6px; }
.label, .score-label { font-family: var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; font-size: 12px; color: var(--text-2); }
.lives { display: flex; gap: 5px; }
.lives i { width: 14px; height: 14px; display: block; border-radius: 3px; transform: rotate(45deg); background: linear-gradient(135deg, var(--amber), #b46f16); box-shadow: 0 0 8px rgba(242, 178, 76, 0.5); transition: opacity 0.3s, transform 0.3s; }
.lives i.lost { opacity: 0.15; transform: rotate(45deg) scale(0.8); box-shadow: none; }
.bar { position: relative; height: 10px; border-radius: 6px; background: rgba(0, 0, 0, 0.45); overflow: hidden; margin-top: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.bar .fill, .bar .ghost { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: 6px; transform-origin: left; }
.bar .ghost { background: rgba(255, 255, 255, 0.55); transition: width 0.6s ease 0.25s; }
.bar .fill { transition: width 0.18s ease-out, background 0.3s; }
.bar.health .fill { background: linear-gradient(90deg, #3ec776, #8ff0a8); box-shadow: 0 0 12px rgba(91, 227, 138, 0.45); }
.bar.health.mid .fill { background: linear-gradient(90deg, #d39a2a, #f5cf6a); }
.bar.health.low .fill { background: linear-gradient(90deg, #c8281c, #ff6a50); animation: pulse 0.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.6; } }
.grenades { display: inline-flex; align-items: center; gap: 6px; color: var(--text); }
.g-icon { width: 10px; height: 13px; border-radius: 5px 5px 4px 4px; background: #8fa25a; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.3); position: relative; }
.g-icon::after { content: ''; position: absolute; top: -3px; left: 3px; width: 4px; height: 3px; background: #aaa; }
.grenades i { width: 34px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); position: relative; overflow: hidden; display: inline-block; }
.grenades i::after { content: ''; position: absolute; inset: 0; width: var(--p, 0%); background: var(--amber); }
.mission-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.3em; font-size: 15px; color: var(--amber); }
.objective { font-size: 13px; color: var(--text); margin-top: 3px; transition: color 0.3s; }
.objective.done { color: var(--green); }
.progress { position: relative; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; margin-top: 9px; }
.progress .fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); border-radius: 2px; transition: width 0.4s; }
.progress .marker.boss { position: absolute; right: -3px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 8px var(--red); }
.score { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.score.bump { animation: bump 0.25s ease; }
@keyframes bump { 50% { transform: scale(1.08); color: var(--amber); } }
.weapon { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.weapon-badge { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--cyan-dim); color: var(--cyan); background: rgba(99, 210, 227, 0.08); }
.weapon-name { font-size: 13px; color: var(--text); }
.weapon.flash .weapon-badge { animation: flashBadge 0.6s ease; }
@keyframes flashBadge { 30% { background: rgba(242, 178, 76, 0.5); color: #fff; border-color: var(--amber); } }
.rapid { position: relative; height: 16px; margin-top: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.35); overflow: hidden; opacity: 0; transition: opacity 0.3s; }
.rapid.on { opacity: 1; }
.rapid .fill { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(90deg, rgba(255, 210, 58, 0.25), rgba(255, 210, 58, 0.6)); }
.rapid span { position: relative; font: 700 11px var(--font-display); letter-spacing: 0.3em; color: #ffe8a0; line-height: 16px; }
.owned { display: flex; justify-content: flex-end; gap: 4px; margin-top: 8px; }
.owned b { font: 700 11px var(--font-display); padding: 2px 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); color: var(--text-2); border: 1px solid rgba(255, 255, 255, 0.08); }
.owned b.cur { color: var(--text); border-color: var(--cyan-dim); }
#hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 8px 16px; font-size: 12px; color: var(--text-2); white-space: nowrap; transition: opacity 1s; border-radius: 999px; }
#hint.fade { opacity: 0; }

/* Boss bar */
#boss-bar { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); padding: 12px 18px 14px; z-index: 11; pointer-events: none; animation: hudInC2 0.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hudInC2 { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translateX(-50%); } }
.boss-head { display: flex; align-items: baseline; gap: 14px; }
.boss-name { font: 700 20px var(--font-display); letter-spacing: 0.24em; }
.boss-name small { font-size: 11px; color: var(--text-2); letter-spacing: 0.3em; margin-left: 6px; }
.boss-phase { font: 600 12px var(--font-display); letter-spacing: 0.25em; color: var(--amber); }
.boss-core { margin-left: auto; font: 700 12px var(--font-display); letter-spacing: 0.25em; color: var(--red); opacity: 0; transition: opacity 0.2s; }
.boss-core.on { opacity: 1; animation: pulse 0.5s ease-in-out infinite; }
.bar.boss { height: 12px; }
.bar.boss .fill { background: linear-gradient(90deg, #b3261b, #ff7247); box-shadow: 0 0 14px rgba(255, 77, 61, 0.5); }

/* Banner & toasts */
#banner { position: absolute; left: 0; right: 0; top: 30%; display: flex; justify-content: center; z-index: 12; pointer-events: none; }
.banner-inner { padding: 16px 44px; text-align: center; animation: bannerIn 0.5s cubic-bezier(.2, .8, .2, 1) both; }
#banner.out .banner-inner { animation: bannerOut 0.5s ease both; }
#banner h2 { margin: 0; font: 700 clamp(28px, 5vw, 46px) var(--font-display); letter-spacing: 0.24em; }
#banner small { display: block; font: 600 12px var(--font-display); letter-spacing: 0.5em; color: var(--amber); }
#banner.danger h2 { color: #ffd0c8; text-shadow: 0 0 24px rgba(255, 77, 61, 0.6); }
#banner.danger small { color: var(--red); }
@keyframes bannerIn { from { opacity: 0; transform: scale(1.08); letter-spacing: 0.5em; } to { opacity: 1; transform: none; } }
@keyframes bannerOut { to { opacity: 0; transform: translateY(-10px); } }
#toasts { position: absolute; top: 196px; right: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; z-index: 12; pointer-events: none; }
.toast { padding: 8px 18px; font: 600 14px var(--font-display); letter-spacing: 0.18em; text-transform: uppercase; animation: toastIn 0.3s ease both; border-left: 3px solid var(--c, var(--cyan)); }
.toast.out { animation: toastOut 0.4s ease both; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }

/* Feedback layers */
#vignette { position: absolute; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.45) 100%); }
#damage-flash { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0; background: radial-gradient(ellipse at center, transparent 40%, rgba(200, 20, 10, 0.55) 100%); transition: opacity 0.35s ease; }
#damage-flash.on { opacity: 1; transition: none; }
#lowhp { position: absolute; inset: 0; pointer-events: none; z-index: 6; opacity: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(160, 0, 0, 0.45) 100%); transition: opacity 0.5s; }
#lowhp.on { opacity: 1; animation: pulse 1s ease-in-out infinite; }
#white-flash { position: absolute; inset: 0; pointer-events: none; z-index: 15; background: #fff7e8; opacity: 0; transition: opacity 1.4s ease; }
#white-flash.on { opacity: 0.85; transition: none; }
#crosshair { position: absolute; left: 0; top: 0; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none; z-index: 9; display: none; }
#app.aiming #crosshair { display: block; }
#crosshair span { position: absolute; inset: 0; border: 2px solid rgba(255, 255, 255, 0.85); border-radius: 50%; box-shadow: 0 0 6px rgba(0, 0, 0, 0.5); clip-path: polygon(0 0, 38% 0, 38% 100%, 62% 100%, 62% 0, 100% 0, 100% 38%, 0 38%, 0 62%, 100% 62%, 100% 100%, 0 100%); }
#crosshair::after { content: ''; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--amber); }
#crosshair i { position: absolute; inset: -6px; opacity: 0; background:
  linear-gradient(45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%),
  linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%); mask: radial-gradient(circle, transparent 42%, #000 43%); }
#crosshair i.hit { animation: hitm 0.18s ease-out; }
#crosshair i.kill { animation: hitk 0.3s ease-out; filter: drop-shadow(0 0 3px var(--red)) hue-rotate(0deg); }
@keyframes hitm { 0% { opacity: 1; transform: scale(0.8); } 100% { opacity: 0; transform: scale(1.2); } }
@keyframes hitk { 0% { opacity: 1; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.5); } }
#fps { position: absolute; left: 16px; bottom: 14px; z-index: 12; font: 600 12px var(--font-body); color: var(--text-2); background: rgba(0, 0, 0, 0.35); padding: 4px 8px; border-radius: 6px; pointer-events: none; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  #hud #hud-mission { top: auto; bottom: 64px; width: calc(100vw - 32px); }
  #hud-vitals { width: 220px; }
  #hud-combat { width: 200px; }
  .score { font-size: 26px; }
  #hint { display: none; }
  .title-wrap { margin-left: 0; }
  .btn { min-width: 0; width: 100%; }
  .menu { width: 100%; }
  .briefing { max-width: 100%; }
}
@media (max-height: 560px) {
  .logo { margin-bottom: 12px; }
  .logo h1 { font-size: 56px; }
  .briefing { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Touch controls & landscape prompt (html.touch only) ---------- */
#touch-controls { position: absolute; inset: 0; z-index: 10; pointer-events: none; user-select: none; -webkit-user-select: none; touch-action: none; }
.tc { position: absolute; pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent; font: 700 14px var(--font-display); letter-spacing: 0.1em; color: #fff; background: rgba(10, 20, 24, 0.5); border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 50%; display: grid; place-items: center; padding: 0; backdrop-filter: blur(4px); }
.tc.held { background: rgba(242, 178, 76, 0.55); border-color: var(--amber); transform: scale(0.94); }
.tc-left, .tc-right { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); width: 0; height: 0; }
.tc-left { left: max(18px, env(safe-area-inset-left)); }
.tc-right { right: max(18px, env(safe-area-inset-right)); }
.tc.dpad { width: 56px; height: 56px; font-size: 20px; border-radius: 14px; }
.tc.dpad.left { left: 0; bottom: 0; }
.tc.dpad.right { left: 120px; bottom: 0; }
.tc.dpad.up { left: 60px; bottom: 60px; }
.tc.dpad.down { left: 60px; bottom: -2px; width: 56px; }
.tc.big { width: 78px; height: 78px; }
.tc.jump { right: 0; bottom: 0; border-color: rgba(99, 210, 227, 0.8); }
.tc.small { width: 56px; height: 56px; font-size: 10px; }
.tc.grenade { right: 0; bottom: 90px; }
.tc.swap { right: 66px; bottom: 112px; }
.tc.pause { top: 12px; right: 12px; width: 40px; height: 40px; font-size: 13px; }
html.touch #hint, html.touch #fps { display: none; }


/* Phones in landscape are short: shrink the HUD so it stays clear of the action. */
@media (pointer: coarse) and (max-height: 520px) {
  #hud .hud-panel { padding: 6px 10px; }
  #hud-vitals { top: 8px; left: 8px; width: 170px; }
  #hud-combat { top: 8px; right: 60px; width: 150px; }
  #hud #hud-mission { top: 8px; bottom: auto; width: min(300px, 32vw); }
  .score { font-size: 20px; }
  .bar { height: 7px; margin-top: 4px; }
  .weapon, .owned, .rapid, .hud-row.small { display: none; }
  .mission-name { font-size: 11px; letter-spacing: 0.2em; }
  .objective { font-size: 11px; }
  #toasts { top: 70px; right: 60px; }
  #banner { top: 18%; }
  #boss-bar { bottom: 8px; width: min(420px, 40vw); padding: 6px 12px 8px; }
}
/* Same compact HUD when portrait is rotated to landscape (viewport is tall, so the media query can't match). */
  html.force-landscape #hud .hud-panel { padding: 6px 10px; }
  html.force-landscape #hud-vitals { top: 8px; left: 8px; width: 170px; }
  html.force-landscape #hud-combat { top: 8px; right: 60px; width: 150px; }
  html.force-landscape #hud #hud-mission { top: 8px; bottom: auto; width: min(300px, calc(var(--ih) * 0.32)); }
  html.force-landscape .score { font-size: 20px; }
  html.force-landscape .bar { height: 7px; margin-top: 4px; }
  html.force-landscape .weapon, html.force-landscape .owned, html.force-landscape .rapid, html.force-landscape .hud-row.small { display: none; }
  html.force-landscape .mission-name { font-size: 11px; letter-spacing: 0.2em; }
  html.force-landscape .objective { font-size: 11px; }
  html.force-landscape #toasts { top: 70px; right: 60px; }
  html.force-landscape #banner { top: 18%; }
  html.force-landscape #boss-bar { bottom: 8px; width: min(420px, calc(var(--ih) * 0.4)); padding: 6px 12px 8px; }
html.touch, html.touch body { overscroll-behavior: none; }

/* No double-tap / pinch zoom anywhere (CSS applies before JS loads; iOS ignores user-scalable=no). */
html, body, #app, button, .btn, .screen, .tc { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html.touch, html.touch body, #touch-controls, #game-canvas { touch-action: none; }
html.touch button { user-select: none; -webkit-user-select: none; }

/* Mobile only: use the full screen, never scroll/bounce, and rotate portrait to landscape during a mission when the browser can't lock orientation. */
html.touch, html.touch body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; }
html.touch.force-landscape #app { inset: auto; top: 0; left: 0; width: var(--ih); height: var(--iw); transform-origin: 0 0; transform: translateX(var(--iw)) rotate(90deg); }

/* ================= Mobile / responsive pass =================
   Root causes fixed here:
   - .screen centred its content with flex but never scrolled, so anything taller than the viewport (title on
     phones, dialogs in landscape) was clipped top and bottom and its buttons unreachable. Screens now scroll
     and children use auto margins, which centre when they fit and scroll when they don't.
   - Dialogs capped at 100vh (includes the mobile URL bar) with their own inner scroll: now dvh, one scroller.
   - Controls were 28-32px tall; coarse pointers get 44px+ targets. */
.screen {
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.screen > .dialog, .screen > .title-wrap, .screen > .loader { margin-top: auto; margin-bottom: auto; flex-shrink: 0; }
.dialog { max-height: none; overflow: visible; }
.dialog h2 { font-size: clamp(28px, 8vw, 40px); }
.controls-touch { display: none; }
html.touch .controls-touch { display: grid; }
html.touch .controls:not(.controls-touch) { display: none; }
html.touch .setting-pointer { display: none; }

@media (pointer: coarse) {
  .toggle::after { content: ''; position: absolute; inset: -6px -4px; } /* 46px-tall touch target around the 34px switch */
  .btn { min-height: 48px; }
  .seg button { min-height: 44px; padding: 0 16px; }
  .toggle { width: 60px; height: 34px; border-radius: 17px; }
  .toggle span { top: 3px; left: 3px; width: 26px; height: 26px; }
  .toggle[aria-checked="true"] span { transform: translateX(26px); }
  input[type=range] { height: 44px; width: min(220px, 100%); }
  .setting { padding: 10px 4px; }
}

@media (max-width: 900px) {
  #screen-title { flex-direction: column; align-items: stretch; }
  .title-wrap { margin-left: 0; width: 100%; }
  .version { position: static; align-self: center; margin-top: 16px; flex-shrink: 0; }
  .logo { margin-bottom: 20px; }
  .menu, .briefing { width: 100%; max-width: none; }
}
@media (max-width: 480px) {
  .dialog { padding: 22px 18px; min-width: 0; width: 100%; }
  .seg { width: 100%; }
  .seg button { flex: 1; padding: 0 8px; }
  .setting { flex-direction: column; align-items: stretch; gap: 8px; }
  .setting .toggle { align-self: flex-end; margin-top: -34px; }
  .controls { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* Short viewports (phones in landscape): two-column title, compact dialogs, buttons side by side. */
@media (max-height: 560px) {
  .screen { padding-top: max(10px, env(safe-area-inset-top)); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  #screen-title { flex-direction: row; align-items: center; }
  .title-wrap { display: flex; align-items: center; gap: 28px; width: 100%; margin-left: clamp(0px, 3vw, 40px); }
  .logo { margin: 0; flex: 0 0 auto; }
  .logo h1 { font-size: clamp(44px, 16vh, 72px); }
  .logo-kicker { font-size: 11px; letter-spacing: 0.3em; }
  .logo-rule { margin-top: 8px; }
  .title-grid { flex: 1; min-width: 0; }
  .menu { width: min(320px, 100%); padding: 12px; gap: 8px; }
  .menu .btn { padding: 8px 16px; font-size: 16px; }
  .version { position: absolute; right: 12px; bottom: 6px; margin: 0; }
  .dialog { padding: 14px 20px; }
  .dialog h2 { font-size: 26px; margin: 0 0 8px; }
  .kicker { font-size: 11px; }
  .rank { font-size: 48px; margin: 0 0 6px; }
  .stats { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); margin-bottom: 12px; }
  .stats b { font-size: 20px; }
  .stack { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .stack .btn { min-width: 0; flex: 1 1 150px; width: auto; }
  .stack.row { margin-top: 10px; }
  #screen-settings .dialog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .seg button { padding: 0 10px; }
  .setting { gap: 8px; }
  .setting input[type=range] { flex: 1; min-width: 0; width: auto; }
  #screen-settings .dialog h2, #screen-settings .dialog .stack { grid-column: 1 / -1; }
  .setting { padding: 4px; flex-wrap: nowrap; }
  .pickup-legend { margin: 10px 0 4px; }
  .tip { margin: 6px 0 0; }
  .controls { gap: 0 18px; }
  .controls div { padding: 3px 0; }
}
@media (max-height: 560px) and (max-width: 480px) { .setting { flex-direction: row; align-items: center; } .setting .toggle { margin-top: 0; } }

/* ---------- Touch devices: no backdrop blur / blend over the live WebGL canvas ----------
   Re-blurring the canvas every frame is a major jank source on Android GPUs. */
@media (pointer: coarse), (hover: none) {
  .glass { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--glass-hi); }
  .glass::before { mix-blend-mode: normal; opacity: 0.5; }
  .tc { backdrop-filter: none; -webkit-backdrop-filter: none; }
}