@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Mono:wght@400;500&family=Inter:wght@400;500;700&display=swap');

:root {
  color-scheme: dark;
  --white: #f3efed;
  --red: #ed513d;
  --orange: #f59149;
  --crosshair: #67e843;
  --mono: 'DM Mono', monospace;
  --heading: 'Barlow Condensed', Impact, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 44%, #21191a 0, #151216 42%, #100e12 78%);
  color: var(--white);
  font-family: Inter, Arial, sans-serif;
  filter: saturate(0.8);
}
button { font: inherit; }
.game-shell { width: min(100%, 75%); }
.topbar, .footer { display: flex; align-items: center; justify-content: space-between; height: 49px; }
.topbar { border-bottom: 1px solid #302a2c; margin-bottom: 13px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--white); text-decoration: none; font: 800 16px var(--heading); letter-spacing: 1.3px; }
.brand > span:last-child { color: var(--red); margin-left: -8px; }
.brand-mark { display: grid; place-items: center; width: 24px; height: 24px; background: var(--red); color: #170d0c; font: 900 16px var(--heading); clip-path: polygon(0 0,100% 0,100% 75%,75% 100%,0 100%); }
.mission, .top-right, .footer { color: #91898d; font: 10px var(--mono); letter-spacing: .8px; }
.mission { display: flex; align-items: center; gap: 8px; }
.live-dot, .footer-status i { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #e65a48; box-shadow: 0 0 9px #e65a48; }
.top-right { color: #8b8388; }.top-right b { color: #e7dedb; font-weight: 500; }
.top-divider { display: inline-block; height: 12px; border-left: 1px solid #443b3e; margin: 0 10px -3px; }
.game-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; background: #130f10; border: 1px solid #463738; box-shadow: 0 18px 60px #0008, 0 0 45px #a93c2614; }
#game { display: block; width: 100%; height: 100%; filter: saturate(0.5) contrast(1.1) brightness(1.2); image-rendering: pixelated; }
#game-lighting { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.game-frame.mouse-look-active #game { cursor: none; }
.overlay, .overlay * { cursor: auto; }
.overlay button { cursor: pointer; }

.hud { position: absolute; z-index: 4; inset: 0; pointer-events: none; text-shadow: 0 1px 3px #000; }
.hud-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 19px 20px; }
.hud-actions { display: flex; align-items: flex-start; gap: 8px; }
.in-game-menu-button { display: none; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; color: #f1bd8d; border: 1px solid #73503c; background: #130f0ee8; font: 700 9px var(--mono); letter-spacing: .5px; pointer-events: auto; cursor: pointer; touch-action: manipulation; }
.in-game-menu-button:hover { color: #fff2e4; border-color: var(--orange); background: #342019; }
.in-game-menu-button span:first-child { color: var(--orange); font: 16px Arial, sans-serif; }
.hud-card { display: flex; flex-direction: column; gap: 5px; padding: 10px 13px; border-left: 2px solid var(--red); background: linear-gradient(90deg,#100d0dc9,#100d0d72); }
.eyebrow { display: block; color: #b7a8a3; font: 9px var(--mono); letter-spacing: 1.35px; }
.hud-card strong { font: 700 18px var(--heading); letter-spacing: 1px; }
.objective-count { color: #d7c9c3; font: 9px var(--mono); letter-spacing: .5px; }
.floor-indicator { color: #f1bd8d; font: 8px var(--mono); letter-spacing: .7px; }
.objective-count i { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: #f05241; box-shadow: 0 0 8px #f05241; }
.ammo { min-width: 142px; border-color: var(--orange); background: linear-gradient(270deg,#100d0dc9,#100d0d72); align-items: flex-end; }
.ammo strong { font: 700 21px var(--heading); }.ammo strong small { color: #a99d99; font-size: 13px; }
.ammo-bars { display: flex; gap: 3px; margin-top: 2px; }.ammo-bars i { width: 6px; height: 3px; background: #f59149; opacity: .9; }.ammo-bars i.empty { background: #63534b; opacity: .55; }
.crosshair { position: absolute; top: 50%; left: 50%; width: 19px; height: 19px; transform: translate(-50%,-50%); transition: transform .08s; }
.crosshair i { position: absolute; display: block; width: 5px; height: 1px; background: var(--crosshair); box-shadow: 0 0 4px var(--crosshair); }
.crosshair i:nth-child(1) { top: 2px; left: 7px; transform: rotate(90deg); }.crosshair i:nth-child(2) { bottom: 2px; left: 7px; transform: rotate(90deg); }
.crosshair i:nth-child(3) { top: 9px; left: 1px; }.crosshair i:nth-child(4) { top: 9px; right: 1px; }.crosshair b { position: absolute; width: 2px; height: 2px; left: 8px; top: 8px; background: var(--crosshair); box-shadow: 0 0 6px var(--crosshair); border-radius: 50%; }
.crosshair.firing { transform: translate(-50%,-50%) scale(1.45); }
.hit-marker { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-55%); font: 22px Arial; color: #fff; text-shadow: 0 0 8px #ff4d31; }.hit-marker.active { display: block; }
.hud-bottom { position: absolute; inset: auto 0 0; min-height: 73px; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 20px 15px; background: linear-gradient(0deg,#0c090bc9,transparent); }
.vitals { display: flex; gap: 17px; }.stat { width: 135px; display: grid; grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 7px; align-items: center; }.stat > div { min-width: 0; }
.stat-icon { grid-row: 1/3; color: var(--red); font-size: 17px; }.armor-stat .stat-icon { color: #e4a858; }
.stat strong { font: 700 20px var(--heading); font-variant-numeric: tabular-nums; }.stat-track { grid-column: 2; width: 100%; height: 3px; margin-top: 2px; background: #796d6a; }.stat-track i { display: block; width: 100%; height: 100%; background: var(--red); }.armor-stat .stat-track i { background: #e4a858; }
.weapon-label { margin-bottom: 2px; }.weapon-label strong { display: block; margin-top: 4px; font: 700 17px var(--heading); letter-spacing: 1px; }.weapon-icon { color: var(--orange); }.weapon-key { margin-left: 4px; color: #a79a94; font: 10px var(--mono); }
.minimap-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; width: 151px; }.minimap-wrap .eyebrow { margin-bottom: 4px; text-align: left; white-space: nowrap; }.minimap-wrap .minimap-title { display: block; }.minimap-floor { display: block; margin-bottom: 4px; color: #f1bd8d; text-align: right; font: 400 10px var(--mono); }
.minimap-wrap canvas, .stair-legend { grid-column: 1 / -1; }
.minimap-wrap canvas { display: block; width: 151px; height: 151px; margin-left: auto; border: 1px solid #d2a38369; background: #171315cf; image-rendering: pixelated; }
.stair-legend { display: block; margin-top: 3px; color: #b7a8a3; text-align: right; font: 7px var(--mono); }.stair-legend i { color: #f4a64c; font-style: normal; }.stair-legend em { color: #6fb7e8; font-style: normal; }.stair-legend b { color: #756967; }
.toast { position: absolute; left: 50%; bottom: 91px; transform: translate(-50%,8px); padding: 7px 13px; color: #ffce9e; background: #160f0ee8; border: 1px solid #70402d; font: 11px var(--mono); letter-spacing: 1px; opacity: 0; transition: .2s; white-space: nowrap; }.toast.visible { transform: translate(-50%,0); opacity: 1; }
.overlay { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; background: linear-gradient(90deg,#110d0de8 0%,#110d0dbb 49%,#110d0d15 100%),linear-gradient(0deg,#0e0b0c50,#0e0b0c18); transition: opacity .3s, visibility .3s; }
.overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.game-tools { position: absolute; z-index: 6; top: 10px; right: 10px; display: none; gap: 6px; }.game-frame.main-menu .game-tools { display: flex; }
.fullscreen-button { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 10px; cursor: pointer; color: #f1bd8d; border: 1px solid #a76844; background: #211714e8; font: 700 9px var(--mono); letter-spacing: .5px; }
.fullscreen-button:hover { color: #fff2e4; border-color: var(--orange); background: #342019; }
.fullscreen-button > span:first-child { color: var(--orange); font: 18px Arial, sans-serif; }
.hall-of-fame-button { color: #fff2e4; border-color: #b27842; }
.hall-of-fame-dialog { width: min(620px, calc(100vw - 28px)); max-height: min(82vh, 620px); padding: 0; overflow: auto; color: var(--white); border: 1px solid #805338; background: linear-gradient(145deg,#21191a,#100e12 72%); box-shadow: 0 24px 80px #000c; }
.hall-of-fame-dialog::backdrop { background: #080608c9; backdrop-filter: blur(3px); }
.hall-of-fame-content { padding: clamp(16px,4vw,28px); }
.hall-of-fame-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hall-of-fame-heading h2 { margin: 8px 0 18px; color: var(--white); font: 900 clamp(32px,7vw,48px)/.9 var(--heading); letter-spacing: .8px; }
.hall-of-fame-close { width: 34px; height: 34px; cursor: pointer; color: #f1bd8d; border: 1px solid #73503c; background: #130f0ee8; font: 24px/1 var(--mono); }
.hall-of-fame-form { display: grid; gap: 7px; margin-bottom: 12px; }
.hall-of-fame-form label { color: #c8bab4; font: 700 9px var(--mono); letter-spacing: .8px; }
.hall-of-fame-name-row { display: flex; gap: 7px; }
.hall-of-fame-name-row input { flex: 1; min-width: 0; padding: 9px 10px; color: var(--white); border: 1px solid #55413a; background: #100e12; font: 12px var(--mono); }
.hall-of-fame-name-row input:focus { outline: 1px solid var(--orange); border-color: var(--orange); }
.hall-of-fame-name-row input:disabled { color: #a89c95; border-color: #3b3330; background: #211e20; cursor: not-allowed; opacity: 1; }
.hall-of-fame-name-hint { margin: 0; color: #9bd18c; font: 10px/1.5 var(--mono); }
.hall-of-fame-save { padding: 0 12px; cursor: pointer; color: #fff4ed; border: 1px solid #a76844; background: linear-gradient(90deg,#9a382d,#c44932); font: 700 9px var(--mono); letter-spacing: .4px; }
.hall-of-fame-status { min-height: 16px; margin: 0 0 8px; color: #c8bab4; font: 10px/1.5 var(--mono); }
.hall-of-fame-status[data-state="error"] { color: #ff8872; }
.hall-of-fame-status[data-state="success"] { color: #9bd18c; }
.hall-of-fame-table-wrap { max-height: 330px; overflow: auto; border: 1px solid #ffffff20; }
.hall-of-fame-table { width: 100%; border-collapse: collapse; text-align: left; font: 10px var(--mono); }
.hall-of-fame-table th { position: sticky; top: 0; padding: 9px 7px; color: #b7a8a3; background: #21191a; font-size: 8px; letter-spacing: .5px; }
.hall-of-fame-table td { padding: 9px 7px; border-top: 1px solid #ffffff14; }
.hall-of-fame-table tbody tr:first-child td { color: #ffd28b; }
.high-score-points { color: var(--orange); font-weight: 700; }
.high-score-empty { color: #a99b98; text-align: center; }
.hall-of-fame-scoring, .hall-of-fame-storage { margin: 12px 0 0; color: #a99b98; font: 8px/1.5 var(--mono); letter-spacing: .2px; }
.hall-of-fame-storage { margin-top: 3px; color: #71896a; }
.modal { display: flex; align-items: center; justify-content: center; width: 47%; height: 72vh; max-height: 72vh; min-width: 310px; margin: 0 auto 0 7%; overflow: hidden; }
.modal-content { flex: 0 0 auto; width: 100%; transform: scale(var(--modal-scale, 1)); transform-origin: center; }
.modal-kicker { display: flex; align-items: center; gap: 8px; color: #e67b54; font: 10px var(--mono); letter-spacing: 1.1px; }.modal-kicker span { width: 6px; height: 6px; background: var(--red); box-shadow: 0 0 10px var(--red); transform: rotate(45deg); }
.modal h1 { margin: 13px 0 8px; font: 900 clamp(40px,6.6vw,76px)/.82 var(--heading); letter-spacing: 1px; }.modal h1 em { color: var(--red); font-style: normal;}
.modal p { max-width: 390px; margin: 18px 0 19px; color: #c1b4b1; font-size: 12px; line-height: 1.65; }
.modal p:empty { display: none; }
.regenerate-button { display: flex; align-items: center; justify-content: space-between; width: min(390px,100%); min-height: 37px; margin: 2rem 0 10px; padding: 0 11px; cursor: pointer; color: #f1bd8d; border: 1px solid #a76844; background: #211714d9; font: 700 10px var(--mono); letter-spacing: .8px; transition: .18s;}
.regenerate-button:hover { color: #fff2e4; border-color: var(--orange); background: #342019; }
.regenerate-button b { color: var(--orange); font: 20px Arial, sans-serif; }
.wall-mode-button { display: flex; flex: 1 1 0; align-items: center; justify-content: space-between; min-width: 0; min-height: 34px; margin: 0; padding: 0 9px; cursor: pointer; color: #c8bab4; border: 1px solid #ffffff24; background: #171416d9; font: 700 9px var(--mono); letter-spacing: .7px; transition: .18s; }
.wall-mode-button:hover { color: #fff2e4; border-color: #a76844; background: #211714d9; }
.difficulty-options { display: flex; gap: 6px; width: min(390px,100%); margin: 8px 0; } .diff-button.active {color: #fff2e4; border-color: #ff7857; background: linear-gradient(90deg,#ba402f,#d85239); } .diff-button.active b { color: #fff4ed; }
.briefing { display: flex; align-items: center; gap: 10px; max-width: 390px; padding: 9px 11px; border: 1px solid #ffffff18; border-left: 2px solid var(--orange); background: #1711119c; }.briefing-icon { color: var(--orange); font-size: 19px; }.briefing b,.briefing small { display: block; }.briefing b { font: 10px var(--mono); letter-spacing: .7px; }.briefing small { margin-top: 3px; color: #a99b98; font-size: 10px; }.briefing-enemies { margin-left: auto; text-align: center; }.briefing-enemies b { color: #ed6149; font: 700 20px var(--heading); }.briefing-enemies small { font: 8px var(--mono); }
.start-button { display: flex; align-items: center; justify-content: space-between; width: min(390px,100%); height: 41px; margin-top: 11px; padding: 0 13px; cursor: pointer; color: #fff4ed; border: 1px solid #ff7857; background: linear-gradient(90deg,#ba402f,#d85239); font: 700 12px var(--mono); letter-spacing: 1px; box-shadow: 0 4px 20px #dc4d3430; transition: .18s; }.start-button:hover { background: linear-gradient(90deg,#d84b35,#ee6242); transform: translateY(-1px); }.start-button b { font-size: 18px; font-weight: 400; }
.start-button:disabled { cursor: not-allowed; opacity: .65; background: linear-gradient(90deg,#5a2428,#7a3430); border-color: #5a2428; box-shadow: none; transform: none; }
.sensitivity-option { display: flex; align-items: center; justify-content: space-between; width: min(390px,100%); margin: 0 0 10px; gap: 10px; }
.sensitivity-option span { font: 700 9px var(--mono); letter-spacing: .7px; color: #c8bab4; }
.sensitivity-option input[type=range] { flex: 1; height: 4px; margin: .25rem 0; cursor: pointer; accent-color: var(--orange); background: #241c1b; border: 1px solid #443b3e; border-radius: 2px; appearance: none; }
.sensitivity-option input[type=range]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; background: var(--orange); border: 1px solid #170d0c; border-radius: 50%; cursor: pointer; box-shadow: 0 0 8px #f5914980; }
.sensitivity-option input[type=range]::-moz-range-thumb { width: 14px; height: 14px; background: var(--orange); border: 1px solid #170d0c; border-radius: 50%; cursor: pointer; }
.sensitivity-option b { font: 700 9px var(--mono); color: var(--orange); min-width: 36px; text-align: right; }
.controls { display: grid; grid-template-columns: repeat(5, max-content); width: max-content; gap: 13px; margin-top: 14px; color: #c6b9b4; font: 8px var(--mono); letter-spacing: .5px; }.controls span { display: flex; align-items: center; gap: 3px; white-space: nowrap; }.controls kbd { display: inline-grid; place-items: center; min-width: 16px; height: 17px; padding: 0 3px; color: #e8ded9; border: 1px solid #71615c; background: #241c1b; font: 9px var(--mono); }
.footer { height: 34px; font-size: 9px; }.footer-status { color: #aca1a1; }.footer-status i { width: 5px; height: 5px; margin-right: 5px; background: #76b974; box-shadow: 0 0 6px #76b974; }
.pause-chip { display: none; position: absolute; z-index: 3; top: 13px; left: 50%; transform: translateX(-50%); padding: 7px 11px; border: 1px solid #73503c; background: #130f0ee8; color: #f3c19b; font: 10px var(--mono); letter-spacing: .6px; }.pause-chip.visible { display: block; }.pause-chip span { color: #fff; }

/* Mobile Controls */
.mobile-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  display: none;
}
.mobile-controls.visible {
  display: block;
}
.mobile-joystick {
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 120px;
  height: 120px;
  pointer-events: auto;
  touch-action: none;
}
.joystick-base {
  position: absolute;
  inset: 0;
  border: 2px solid #4a4042;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1a161a 0%, #0d0a0c 100%);
  box-shadow: inset 0 0 20px #0008, 0 4px 12px #0006;
}
.joystick-stick {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 35px;
  left: 35px;
  border: 2px solid #6a5a5c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a2a2c 0%, #1a1214 100%);
  box-shadow: 0 4px 12px #0008, inset 0 -2px 4px #0006;
  transition: transform 0.05s ease-out;
  touch-action: none;
}
.mobile-aim {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60%;
  pointer-events: auto;
  touch-action: none;
}
.mobile-fire {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 70px;
  height: 70px;
  border: 2px solid #ed513d;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #3a1814 0%, #1a0a08 100%);
  color: #ed513d;
  font: 700 28px var(--heading);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  box-shadow: 0 4px 20px #ed513d40, inset 0 -2px 4px #0006;
  transition: transform 0.05s, background 0.1s;
  touch-action: none;
}
.mobile-fire:active {
  transform: scale(0.92);
  background: radial-gradient(circle at 50% 50%, #ed513d 0%, #3a1814 100%);
  color: #1a0a08;
}
.fire-icon {
  text-shadow: 0 0 8px #ed513d;
}
.mobile-weapons {
  position: absolute;
  right: 20px;
  bottom: 105px;
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
.mobile-weapons[hidden], .mobile-weapon-btn[hidden] { display: none; }
.mobile-weapon-btn {
  width: 44px;
  height: 44px;
  border: 2px solid #3a3032;
  border-radius: 8px;
  background: linear-gradient(180deg, #1a1618 0%, #0d0a0c 100%);
  color: #c8bab4;
  font: 700 14px var(--heading);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  box-shadow: 0 2px 8px #0006;
  transition: all 0.1s;
  touch-action: none;
}
.mobile-weapon-btn.active {
  border-color: var(--orange);
  background: linear-gradient(180deg, #3a2818 0%, #1a1008 100%);
  color: var(--orange);
  box-shadow: 0 0 12px #f5914960, inset 0 0 8px #0008;
}
.mobile-weapon-btn:active {
  transform: scale(0.92);
}
.mobile-reload {
  position: absolute;
  left: 20px;
  bottom: 155px;
  width: 50px;
  height: 50px;
  border: 2px solid #4a4042;
  border-radius: 8px;
  background: linear-gradient(180deg, #1a1618 0%, #0d0a0c 100%);
  color: #f0a04b;
  font: 700 16px var(--mono);
  pointer-events: auto;
  box-shadow: 0 2px 8px #0006;
  transition: all 0.1s;
  touch-action: none;
}
.mobile-reload:active {
  transform: scale(0.92);
  background: linear-gradient(180deg, #3a2818 0%, #1a1008 100%);
  border-color: #f0a04b;
  color: #fff4ed;
}

@media (max-width: 650px), (pointer: coarse) and (hover: none) {
  .mobile-controls { bottom: env(safe-area-inset-bottom, 0px); }
  html, body {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
  }
  body {
    display: block;
    padding: 0;
  }
  .game-shell {
    width: 100vw;
    height: 100vh;
    height: var(--mobile-viewport-height, 100dvh);
  }
  .topbar, .footer { display: none; }
  .game-frame {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    border: 0;
    box-shadow: none;
  }
  .mission { display: none; }.top-right { font-size: 8px; }
  .game-tools { top: 8px; right: 8px; gap: 4px; }.fullscreen-button { min-height: 30px; gap: 3px; padding: 0 6px; font-size: 7px; }.fullscreen-button > span:first-child { font-size: 14px; }
  .hud-top { padding: 9px; }.hud-actions { gap: 5px; }.in-game-menu-button { display: flex; min-height: 30px; gap: 4px; padding: 0 6px; font-size: 7px; }.in-game-menu-button span:first-child { font-size: 13px; }.hud-card { padding: 6px 8px; }.hud-card strong { font-size: 13px; }.eyebrow { font-size: 7px; }.objective-count { font-size: 7px; }.ammo { min-width: 90px; }.ammo strong { font-size: 17px; }
  .hall-of-fame-dialog { width: calc(100vw - 20px); max-height: calc(var(--mobile-viewport-height, 100dvh) - 24px); }
  .hall-of-fame-content { padding: 14px; }.hall-of-fame-table { font-size: 9px; }.hall-of-fame-table th { font-size: 7px; }.hall-of-fame-table th,.hall-of-fame-table td { padding: 8px 4px; }
  .hall-of-fame-name-row { flex-wrap: wrap; }.hall-of-fame-name-row input { flex-basis: 100%; }.hall-of-fame-save { min-height: 32px; }
  .hud-bottom { position: static; min-height: 0; padding: 0; background: none; }.vitals { position: absolute; top: 72px; right: 9px; gap: 5px; }.stat { width: 77px; grid-template-columns: 15px minmax(0, 1fr); gap: 3px; }.stat-icon { font-size: 12px; }.stat strong { font-size: 15px; }.weapon-label { display: none; }.weapon-key,.weapon-label .eyebrow { display: none; }.minimap-wrap { position: absolute; left: 105px; right: auto; top: auto; bottom: 8px; width: 16vw; transform: none; }.minimap-wrap .eyebrow { margin-bottom: 2px; font-size: min(6px, 1.875vw); text-align: left; }.minimap-wrap canvas { width: 16vw; height: 16vw; margin-left: auto; margin-right: 0; }.minimap-floor { margin-bottom: 2px; font-size: min(8px, 2.5vw); text-align: right; }.stair-legend { text-align: right; }
  .overlay { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; padding: 8px; }
  .modal { width: 75%; min-width: 0; margin: 0; }.modal h1 { font-size: clamp(34px,9vw,58px); }.modal p { margin: 10px 0; font-size: 10px; }.regenerate-button { min-height: 32px; margin-bottom: 7px; font-size: 8px; }.briefing { padding: 6px; }.briefing small { font-size: 8px; }.start-button { height: 34px; font-size: 10px; }.controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; font-size: 7px; }.controls kbd { min-width: 13px; height: 14px; font-size: 7px; }
  .footer { font-size: 7px; }.footer > span:nth-child(2) { display: none; }
}
@media (max-height: 500px) and (max-width: 650px), (max-height: 500px) and (pointer: coarse) and (hover: none) {
  .overlay { padding: 4px; }
  .modal h1 { margin: 6px 0 4px; font-size: clamp(28px,6vw,40px); }
  .modal p { margin: 5px 0; }
  .briefing { gap: 6px; padding: 5px 8px; }
  .regenerate-button { min-height: 28px; margin: .4rem 0 4px; }
  .sensitivity-option { gap: 6px; margin-bottom: 4px; }
  .difficulty-options { gap: 4px; margin: 4px 0; }
  .wall-mode-button { min-height: 28px; padding: 0 5px; font-size: 8px; }
  .start-button { height: 30px; margin-top: 5px; }
  .controls { display: none; }
  .hud-card { gap: 3px; padding: 4px 6px; }
  .hud-card strong { font-size: 11px; }
  .objective-count { font-size: 6px; }
  .floor-indicator { font-size: 6px; }
  .vitals { top: 64px; }
  .minimap-wrap { left: 120px; }
  .minimap-wrap .eyebrow { margin-bottom: 1px; font-size: 5px; }
  .minimap-floor { margin-bottom: 1px; font-size: 6px; }
  .stair-legend { margin-top: 1px; font-size: 5px; }
  .mobile-joystick { left: 9px; bottom: 0; width: 100px; height: 100px; }
  .joystick-stick { top: 25px; left: 25px; }
  .mobile-reload { left: 9px; bottom: 110px; }
  .mobile-weapons { bottom: 95px; }
}
@media (min-height: 501px) and (max-width: 650px), (min-height: 501px) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
  .vitals { top: 112px; }
}
@media (min-height: 501px) and (max-width: 650px) and (orientation: portrait), (min-height: 501px) and (pointer: coarse) and (hover: none) and (orientation: portrait) {
  .mobile-joystick { left: 9px; width: 90px; height: 90px; }
  .mobile-weapon-btn { width: 36px; height: 36px; }
  .mobile-weapons { right: 9px; gap: 4px; }
  .mobile-reload { left: 9px; bottom: 110px; }
}
@media (max-height: 500px) and (min-width: 651px) and (pointer: fine) and (hover: hover) { body { padding: 8px 22px; }.topbar { height: 35px; margin-bottom: 7px; }.footer { height: 25px; } }