:root {
  --ink: #f0e7dc;
  --muted: #a49996;
  --red: #e64451;
  --red-dark: #661f2b;
  --amber: #f2bb62;
  --violet: #8d5da7;
  --void: #050307;
  --panel: rgba(13, 8, 15, 0.91);
  --line: rgba(238, 222, 210, 0.2);
  --shadow: 0 24px 90px rgba(0, 0, 0, 0.78);
  /* A shared safe frame budget: dynamic viewport units follow browser chrome
     changes, while the clamp prevents either a tiny browser window or a phone
     notch from crowding the pixel-art stage. */
  --shell-gutter: clamp(8px, 2vw, 24px);
  --frame-safe-width: calc(100vw - clamp(16px, 4vw, 48px));
  --frame-safe-height: calc(100dvh - clamp(16px, 4vw, 48px));
}

* { box-sizing: border-box; }

/* This is a game surface, not a document. Selection, long-press callouts, drag
   ghosts, and the grey tap flash are all noise here: holding a d-pad button and
   sliding a thumb must never select words or raise the iOS "Copy / Look Up"
   menu. Real text fields opt back in at the bottom of this block. */
html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  background: #020103;
  color: var(--ink);
  font-family: "Courier New", Courier, monospace;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  -webkit-tap-highlight-color: transparent;
}

img, canvas, svg {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Buttons and the canvas are dragged across, not read, so they never take part
   in a selection even when a gesture starts outside them. */
button, .mobile-controls, .dpad, .action-pad, #game-canvas {
  -webkit-user-select: none;
  user-select: none;
}
button, .mobile-controls, .dpad, .action-pad { -webkit-touch-callout: none; }
#game-canvas { -webkit-touch-callout: default; }

/* Anything the player genuinely types into stays selectable, editable, and able
   to raise the platform's own text-editing affordances. */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}

button, input { font: inherit; }
button { color: inherit; }

.boot-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  background: #000;
  color: #9eb8b2;
  font: 14px/1 "Courier New", Courier, monospace;
  letter-spacing: .15em;
  opacity: 1;
  pointer-events: all;
  transition: opacity 180ms ease;
}

.boot-loading span {
  animation: boot-loading-pulse 1.4s ease-in-out infinite alternate;
}

.boot-loading--ready {
  opacity: 0;
}

.boot-loading--failed {
  color: var(--red);
}

.boot-loading--failed span {
  animation: none;
}

@keyframes boot-loading-pulse {
  from { opacity: .58; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-loading,
  .boot-loading span {
    animation: none;
    transition: none;
  }
}

.game-shell {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100svh;
  height: 100dvh;
  padding: var(--shell-gutter);
  background:
    radial-gradient(circle at 50% 38%, rgba(75, 28, 69, .16), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.012) 40px),
    #030204;
}

.game-frame {
  position: relative;
  width: min(var(--frame-safe-width), calc(var(--frame-safe-height) * 16 / 9));
  max-width: 100%;
  max-height: var(--frame-safe-height);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  isolation: isolate;
  background: #08050a;
  border: 1px solid #3c303e;
  box-shadow: 0 0 0 5px #0a070b, 0 0 0 6px #302832, var(--shadow);
}

#game-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Nearest-neighbour upscale — pixel-art must stay crisp. `pixelated` is listed
     LAST so it wins the cascade in Chromium/Safari (their `crisp-edges` is not
     strict nearest-neighbour and blurs the 480x270 backbuffer on upscale);
     `crisp-edges` above is the fallback for engines without `pixelated`. */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  outline: none;
  background: #09070a;
  /* Keep native page gestures available over the playfield. Touch movement is
     delayed/arbitrated in bootstrap so pinch and double-tap zoom win whenever
     another contact arrives; mouse click/drag movement remains immediate. */
  touch-action: auto;
}

.fps-counter {
  position: absolute;
  z-index: 40;
  top: 4px;
  left: 4px;
  padding: 1px 5px;
  font-family: monospace;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #b9ffb0;
  background: rgba(0, 0, 0, .5);
  border-radius: 2px;
  pointer-events: none;
  user-select: none;
}

.screen-glass {
  position: absolute;
  z-index: 20;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background:
    radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.74) 108%),
    repeating-linear-gradient(to bottom, transparent 0 3px, rgba(198, 163, 184, .12) 4px);
  mix-blend-mode: screen;
}

/* Office Survivor is a fixed desk-defense view. The canvas owns the room while
   compact DOM controls sit at the matching desk/door/utility locations. */
.office-survivor {
  position: absolute;
  z-index: 25;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(6px, 1vw, 12px);
  color: #ddd8dd;
  background:
    radial-gradient(circle at 50% 45%, rgba(76, 57, 76, .25), transparent 42%),
    linear-gradient(rgba(7, 6, 8, .82), rgba(3, 3, 4, .97)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.018) 40px);
  transition: background-color .25s;
}
/* Lowered cameras expose the fixed Office room instead of obscuring it. */
.office-survivor:not(.is-monitor-open) {
  background:
    linear-gradient(rgba(7, 6, 8, .2), rgba(3, 3, 4, .32)),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.018) 40px);
  pointer-events: none;
}
.office-survivor:not(.is-monitor-open) button,
.office-survivor:not(.is-monitor-open) .office-power {
  pointer-events: auto;
}
.office-survivor[hidden] { display: none; }
.office-survivor [hidden] { display: none !important; }
#office-survivor:not([hidden]) ~ #toast,
#office-survivor:not([hidden]) ~ #pause-button { display: none !important; }
.office-survivor button { color: inherit; font: inherit; }
.office-audio-prompt { z-index: 60; width: min(420px, calc(100vw - 32px)); padding: 0; color: #e8e0e5; background: #0c090e; border: 1px solid #6f485d; box-shadow: 0 0 0 100vmax rgba(0,0,0,.72), 0 20px 70px rgba(0,0,0,.8); }
.office-audio-prompt::backdrop { background: rgba(0,0,0,.72); }
.office-audio-prompt__card { display: grid; gap: 12px; padding: 22px; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px 5px), linear-gradient(145deg, #18111a, #09070a); }
.office-audio-prompt__card h2, .office-audio-prompt__card p { margin: 0; }
.office-audio-prompt__card h2 { color: #f1d4dc; font: 900 clamp(1.15rem, 3vw, 1.65rem)/1 Arial Black, sans-serif; letter-spacing: .08em; }
.office-audio-prompt__card > p:not(.overline) { color: #b9adb6; font-size: .72rem; line-height: 1.5; }
.office-audio-prompt__card > div { display: flex; flex-wrap: wrap; gap: 8px; }
.office-audio-prompt__card button { padding: 8px 11px; color: #e9e1e5; background: #171017; border: 1px solid #735366; cursor: pointer; font: 800 .62rem/1 monospace; letter-spacing: .08em; }
#office-audio-enable { color: #160a0e; background: #df8598; border-color: #ffc6d0; }
.office-config-menu { width: min(900px, calc(100vw - 20px)); height: min(860px, calc(100svh - 20px)); max-height: calc(100svh - 20px); padding: 0; overflow: hidden; color: #e6dce4; background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 4px), #0d0f15; border: 1px solid #7b3142; box-shadow: 0 16px 58px rgba(0,0,0,.8); }
.office-config-menu::backdrop { background: rgba(0,0,0,.78); }
.office-config-menu form { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: clamp(6px, 1.3vh, 14px); height: 100%; min-height: 0; padding: clamp(10px, 2vw, 22px); overflow: hidden; }
.office-config-menu header { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid #303745; }
.office-config-menu header p, .office-config-menu h3 { margin: 0; }
.office-config-menu header p { color: #f0e7dc; font-size: .7rem; letter-spacing: .12em; }
.office-config-menu h3 { margin-top: 3px; color: #db536c; font: 900 clamp(1.1rem, 3vw, 2rem)/1 Arial Black,sans-serif; letter-spacing: .04em; }
.office-config-menu header > span { padding-top: 6px; color: #9098a9; font-size: .56rem; letter-spacing: .08em; }
.office-config-menu header button { color: #e6dce4; background: none; border: 0; cursor: pointer; font-size: 1.2rem; }
.office-config-menu__shared { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 10px; background: #11141d; border: 1px solid #303745; }
.office-config-menu__shared label { display: grid; gap: 6px; align-content: start; color: #b8c0d0; font-size: .57rem; letter-spacing: .09em; }
.office-config-menu select, .office-config-menu input { min-width: 0; color: #eee; background: #171b26; border: 1px solid #566174; }
.office-config-menu__toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 5px 7px; color: #b8c0d0; background: #171b26; border: 1px solid #566174; cursor: pointer; font: 700 .57rem monospace; letter-spacing: .09em; }
.office-config-menu__toggle b { color: #788293; font-size: .55rem; }
.office-config-menu__toggle[aria-pressed="true"] { border-color: #dc7185; box-shadow: inset 0 0 0 1px #5e2734; }
.office-config-menu__toggle[aria-pressed="true"] b { color: var(--amber); }
.office-config-menu__toggle:focus-visible { outline: 2px solid #ffc0cc; outline-offset: 2px; }
.office-config-menu__roster-label { margin: 0; color: #929bab; font-size: .58rem; letter-spacing: .12em; }
.office-config-menu__ai { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; justify-content: center; width: min(100%, 720px); min-height: 0; margin: 0 auto; padding: 1px 4px 8px 1px; gap: clamp(4px, .9vw, 10px); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.office-void-config-card { display: grid; justify-items: center; gap: clamp(3px, .5vh, 6px); min-width: 0; padding: clamp(4px, .8vw, 8px); background: #12151e; border: 1px solid #3c4454; border-left: 4px solid var(--void-color); }
.office-void-config-card > small { color: #9ca5b5; font-size: .49rem; letter-spacing: .08em; }
.office-void-config-card__portrait { display: grid; place-items: center; width: 100%; aspect-ratio: 1 / .78; overflow: hidden; background: #020305; border: 1px solid #27303d; }
.office-void-config-card__portrait img { display: block; width: 100%; height: 100%; margin: auto; object-fit: contain; object-position: center center; /* The authored square portraits reserve more empty black above the head than
   below the shoulders. Lift the complete image inside its black viewport so the
 character itself, rather than the source canvas, is visually centred. */ transform: translateY(-9%); image-rendering: pixelated; filter: drop-shadow(0 0 7px var(--void-color)); }
.office-void-portrait { object-position: center center; translate: 0 -9%; }
.office-void-config-card > strong { color: var(--void-color); font-size: clamp(.54rem, 1.2vw, .74rem); letter-spacing: .07em; }
.office-ai-adjuster { display: grid; grid-template-columns: 26px minmax(0, 1fr) 26px; width: 100%; gap: 4px; align-items: center; }
.office-ai-adjuster button { min-height: 25px; padding: 2px; color: #ecdfe8; background: #1e1722; border: 1px solid #566174; cursor: pointer; font: 800 .58rem/1 monospace; }
.office-ai-adjuster button:hover:not(:disabled), .office-ai-adjuster button:focus-visible { color: #171018; background: var(--void-color); border-color: #ffe6ee; outline: none; }
.office-ai-adjuster button:disabled { cursor: not-allowed; opacity: .35; }
.office-ai-adjuster output { color: #f0e7dc; font-size: .56rem; letter-spacing: .04em; text-align: center; white-space: nowrap; }
.office-config-menu footer { display: flex; justify-content: end; gap: 8px; padding-top: 12px; border-top: 1px solid #303745; background: #0d0f15; }
.office-config-menu footer button { padding: 8px 11px; color: #eee; background: #1b202c; border: 1px solid #566174; cursor: pointer; font: 800 .56rem monospace; }
.office-config-menu #office-config-save { color:#23080f;background:#dc7185;border-color:#ffc0cc; }
@media (max-width: 620px) { .office-config-menu header { grid-template-columns: minmax(0, 1fr) auto; }.office-config-menu header > span { display: none; }.office-config-menu__shared { grid-template-columns: minmax(0, 1fr); }.office-config-menu__ai { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }.office-void-config-card { padding: 4px; }.office-void-config-card__portrait { aspect-ratio: 1 / .7; }.office-void-config-card > small, .office-void-config-card label { font-size: .4rem; } }
@media (min-width: 650px) and (max-height: 700px) { .office-config-menu__ai { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: none; }.office-config-menu form { gap: 5px; padding: 9px 14px; }.office-void-config-card__portrait { aspect-ratio: 1 / .62; }.office-config-menu__roster-label { display: none; } }
.office-solo-warning { z-index: 60; width: min(410px, calc(100vw - 32px)); color: #f0e4e8; background: #10090d; border: 1px solid #a95468; box-shadow: 0 0 0 100vmax rgba(0,0,0,.72); }.office-solo-warning::backdrop { background: rgba(0,0,0,.72); }.office-solo-warning form { display: grid; gap: 12px; padding: 20px; }.office-solo-warning h2,.office-solo-warning p { margin: 0; }.office-solo-warning h2 { font: 900 1.25rem/1 Arial Black,sans-serif; }.office-solo-warning p:not(.overline) { color: #c7b8bf; font-size: .72rem; line-height: 1.45; }.office-solo-warning div { display: flex; gap: 8px; flex-wrap: wrap; }.office-solo-warning button { padding: 8px; color: #eee; background: #21131a; border: 1px solid #805161; cursor: pointer; font: 800 .58rem monospace; }.office-solo-warning #office-solo-confirm { color:#21080e;background:#dc7185;border-color:#ffc0cc; }
.office-survivor__header {
  display: grid;
  grid-template-columns: minmax(110px, .7fr) minmax(180px, 1.6fr) minmax(150px, .8fr);
  align-items: center;
  gap: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid #3c343d;
}
.office-survivor__header strong { font: 900 clamp(1rem, 2.6vw, 1.75rem)/1 Arial Black, sans-serif; }
.office-event { margin: 0; color: var(--amber); font-size: clamp(.54rem, 1.1vw, .72rem); font-weight: 800; letter-spacing: .09em; text-align: center; }
/* flex-wrap (not a rigid grid) so POWER/USAGE/REAR FLASH/EXPOSURE reflow onto
   extra lines as needed — this column can get quite narrow (as little as
   150px, see .office-survivor__header's grid-template-columns above), and a
   fixed set of grid tracks doesn't wrap, it just overflows/clips. */
.office-power { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: clamp(.48rem, .9vw, .62rem); letter-spacing: .08em; }
.office-power__bar { flex: 1 1 50px; min-width: 50px; height: 7px; overflow: hidden; background: #1a151b; border: 1px solid #4b3c49; }
.office-power__bar i { display: block; width: 100%; height: 100%; background: #69b67f; transition: width .18s linear; }
#office-usage { color: var(--amber); letter-spacing: 1px; }
.office-survivor__body { position: relative; min-height: 0; }
.office-gas-mask-pov { position: absolute; z-index: 13; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .84; pointer-events: none; image-rendering: pixelated; }
.office-gas-mask { position: absolute; z-index: 16; left: 50%; bottom: 7%; display: grid; gap: 2px; min-width: 104px; padding: 5px 8px; transform: translateX(-50%); color: #dbe0c7; background: #151a12; border: 1px solid #89965d; box-shadow: 0 0 16px rgba(137,150,93,.22); cursor: pointer; font: 800 clamp(.36rem, .66vw, .5rem)/1 monospace; letter-spacing: .08em; }
.office-gas-mask span { color: #b4c384; font-size: .86em; }
.office-gas-mask b { color: #e0e5c9; font-size: .9em; }
.office-gas-mask[aria-pressed="true"] { color: #15180f; background: #bbc877; border-color: #e5f2a6; box-shadow: 0 0 22px rgba(190,211,114,.52); }
.office-gas-mask[hidden] { display: none; }
.office-controls { position: absolute; z-index: 14; inset: 0; pointer-events: none; transition: opacity .2s ease; }
/* Raising the camera tablet covers the desk: door/system buttons step out of
   the way instead of sitting underneath the camera floor plan. */
.office-survivor.is-monitor-open .office-controls { opacity: 0; pointer-events: none; }
.office-controls button {
  position: absolute;
  display: grid;
  gap: 1px;
  min-width: 52px;
  min-height: 30px;
  padding: 3px 4px;
  background: #100d11;
  border: 1px solid #443844;
  cursor: pointer;
  font-size: clamp(.34rem, .62vw, .48rem);
  letter-spacing: .06em;
  pointer-events: auto;
}
.office-controls button span { font-size: .8em; }
.office-controls button b { font-size: .9em; }
#office-left-door { left: 1.5%; top: 46%; }
#office-right-door { right: 1.5%; top: 46%; }
#office-desk-light { left: 36%; bottom: 6%; }
#office-rear-flash { left: 47%; top: 10%; }
#office-vent { right: 12%; bottom: 6%; }
#office-radio { right: 24%; bottom: 6%; }
#office-breaker { right: 12%; top: 10%; }
#office-reboot { right: 24%; top: 10%; }
#office-emergency { left: 36%; top: 10%; }
.office-controls button span { color: #8f858e; }
.office-controls button b { color: #d8d0d7; }
.office-controls button[aria-pressed="true"] { background: #49202a; border-color: #ca5265; box-shadow: inset 0 0 18px rgba(202,82,101,.18), 0 0 8px rgba(202,82,101,.14); }
.office-controls button:disabled { filter: grayscale(1); cursor: not-allowed; opacity: .35; }
/* Emergency Flash and Turn+Flash Rear otherwise look like any other office
   control (no permanent red outline) — the red only appears via .is-alert,
   toggled when a rear threat is actually imminent. */
.office-controls .office-controls__danger.is-alert { color: #fff; background: #8e2331; border-color: #c6525f; box-shadow: 0 0 8px rgba(198,82,95,.28); animation: office-alert .35s steps(2, end) infinite; }
.office-controls kbd, .office-monitor__toggle kbd, .office-camera-node kbd {
  justify-self: center;
  padding: 1px 4px;
  color: #b9b0ba;
  background: #09070b;
  border: 1px solid #5a505c;
  border-bottom-width: 2px;
  font: 800 .42rem/1 "Courier New", monospace;
  letter-spacing: .04em;
}
.office-controls button[aria-pressed="true"] kbd { border-color: #d17a87; }
.office-monitor { position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; gap: 6px; }
.office-monitor__feed {
  position: relative;
  display: block;
  min-height: 0;
  overflow: hidden;
  color: #aab8ae;
  background: radial-gradient(circle, #1a2420, #070a08 70%);
  border: 3px solid #242026;
  outline: 1px solid #554b55;
  text-align: center;
  text-shadow: 0 0 8px currentColor;
}
.office-camera-feed-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.office-camera-feed-copy { position: absolute; z-index: 4; inset: 0; display: grid; place-content: center; gap: 4px; pointer-events: none; }
.office-monitor__feed.is-lowered .office-camera-feed-canvas { display: none; }
/* A Violet blackout forces monitorOpen false (so the feed reads "lowered"),
   but the "NO VIDEO / BLACKOUT Ns" copy is the only explanation the player
   gets for why raising the cameras keeps failing — it must stay visible even
   though the monitor isn't actually raised. */
.office-monitor__feed.is-lowered:not(.is-blackout) .office-camera-feed-copy { display: none; }
.office-monitor__feed:not(.is-lowered) .office-camera-feed-copy { inset: auto 8px 8px; display: flex; align-items: end; justify-content: space-between; gap: 8px; padding: 4px 6px; background: rgba(4, 7, 5, .76); border: 1px solid rgba(146, 182, 151, .3); text-align: left; }
.office-monitor__feed:not(.is-lowered) .office-camera-feed-copy strong { font-size: clamp(.54rem, 1vw, .72rem); }
.office-monitor__feed:not(.is-lowered) .office-camera-feed-copy p, .office-monitor__feed:not(.is-lowered) .office-camera-feed-copy span { font-size: clamp(.35rem, .65vw, .48rem); }
/* Lowered monitor: keep the desk-defense room visible behind the controls. */
.office-monitor__feed.is-lowered {
  color: #756c75;
  background: transparent;
  border-color: transparent;
  outline: none;
  pointer-events: none;
}
.office-monitor__feed.is-corrupted { color: #c477d4; background: repeating-linear-gradient(0deg, #09060b 0 3px, #32133b 4px 5px); }
.office-monitor__feed.is-blackout { color: #676168; background: #020203; }
.office-monitor__feed p, .office-monitor__feed span { margin: 0; font-size: clamp(.48rem, .85vw, .62rem); letter-spacing: .11em; }
.office-monitor__feed strong { font-size: clamp(.72rem, 1.6vw, 1.05rem); letter-spacing: .09em; }
.office-monitor__noise { position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px); animation: office-static .45s steps(3, end) infinite; }
.office-camera-map {
  position: absolute;
  z-index: 10;
  right: 12px;
  bottom: 62px;
  width: clamp(238px, 24vw, 310px);
  height: clamp(112px, 16vh, 142px);
  overflow: hidden;
  background:
    linear-gradient(rgba(93, 122, 102, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(93, 122, 102, .035) 1px, transparent 1px),
    #070908;
  background-size: 12px 12px;
  border: 1px solid #354039;
  box-shadow: inset 0 0 20px #020302;
  opacity: 1;
  transform: translateY(0);
  transition: opacity .14s, transform .14s;
}
.office-survivor:not(.is-monitor-open) .office-camera-map { pointer-events: none; opacity: 0; transform: translateY(12px); }
.office-camera-map__title { position: absolute; z-index: 2; top: 4px; left: 6px; color: #53665a; font-size: .4rem; letter-spacing: .12em; }
.office-camera-map__plan { position: absolute; inset: 2px 4%; width: 92%; height: calc(100% - 4px); overflow: visible; }
.office-camera-map__plan .camera-map__corridor { fill: none; stroke: #52655a; stroke-width: 8; stroke-linecap: square; stroke-linejoin: miter; opacity: .42; }
.office-camera-map__plan .camera-map__vent { fill: none; stroke: #68726c; stroke-width: 3; stroke-dasharray: 5 4; opacity: .42; }
.office-camera-map__plan .camera-map__room { fill: rgba(21, 29, 24, .88); stroke: #64766b; stroke-width: 1.5; }
.office-camera-map__plan .camera-map__room--utility { fill: rgba(23, 24, 25, .9); stroke: #59605c; }
.office-camera-map__plan .camera-map__office { fill: rgba(113, 57, 40, .48); stroke: #c08a55; stroke-width: 2; }
.office-camera-node {
  position: absolute;
  z-index: 3;
  display: grid;
  min-width: 48px;
  padding: 2px 4px;
  transform: translate(-50%, -50%);
  color: #93a59a;
  background: #0a0e0b;
  border: 1px solid #64776b;
  box-shadow: 0 0 0 1px #050605, 0 0 7px rgba(111, 151, 124, .14);
  cursor: pointer;
  line-height: 1;
  text-align: left;
}
.office-camera-node b { font-size: clamp(.42rem, .66vw, .52rem); letter-spacing: .04em; }
.office-camera-node span { margin-top: 2px; overflow: hidden; color: #526057; font-size: .34rem; text-overflow: ellipsis; white-space: nowrap; }
.office-camera-node kbd { position: absolute; right: 3px; bottom: 3px; padding: 1px 2px; color: #69766d; font-size: .32rem; }
.office-camera-node::after { content: ""; position: absolute; top: 3px; right: 3px; width: 3px; height: 3px; background: #72947e; box-shadow: 0 0 5px #72947e; }
.office-camera-node:disabled { cursor: not-allowed; opacity: .43; }
.office-camera-node.is-selected { color: #fff2c3; background: #493713; border-color: #e1b45a; box-shadow: 0 0 0 1px #171006, 0 0 10px rgba(225,180,90,.55); }
.office-camera-node.is-selected span { color: #d9b86d; }
.office-camera-node.is-selected::after { background: #ffe18d; box-shadow: 0 0 7px #ffe18d; animation: office-camera-pulse .7s steps(2, end) infinite; }
.office-camera-node.is-linked { color: #b6d8bd; border-color: #82a88a; box-shadow: 0 0 0 1px #071008, 0 0 9px rgba(117, 185, 130, .46); }
.office-camera-node.is-linked span { color: #93b99a; }
.office-camera-node.is-linked::after { background: #b8efbe; box-shadow: 0 0 7px #9cddaa; }
.office-camera-node.is-corrupted { color: #e4a9f0; background: #2b1330; border-color: #b766c8; box-shadow: 0 0 9px rgba(183,102,200,.45); }
.office-camera-node.is-corrupted::after { content: "×"; top: 0; right: 2px; width: auto; height: auto; color: #efa8ff; background: none; box-shadow: none; font-size: .55rem; }
.office-camera-node--8 { left: 50%; top: 17%; }
.office-camera-node--3 { left: 20%; top: 31%; }
.office-camera-node--4 { left: 80%; top: 31%; }
.office-camera-node--1 { left: 18%; top: 56%; }
.office-camera-node--2 { left: 82%; top: 56%; }
.office-camera-node--6 { left: 15%; top: 82%; }
.office-camera-node--5 { left: 62%; top: 71%; }
.office-camera-node--7 { left: 85%; top: 82%; }
.office-camera-map__you { position: absolute; z-index: 3; left: 50%; bottom: 3px; padding: 1px 5px; transform: translateX(-50%); color: #ffe2a1; background: #4b281b; border: 1px solid #c28a52; font-size: .38rem; font-weight: 900; letter-spacing: .12em; animation: office-camera-pulse 1s steps(2, end) infinite; }
.office-camera-map__legend { position: absolute; z-index: 2; right: 5px; top: 4px; display: flex; gap: 7px; color: #53665a; font-size: .34rem; letter-spacing: .07em; }
.office-monitor__toggle { padding: 5px; color: #bbb3ba; background: #151116; border: 1px solid #4d414d; cursor: pointer; font-size: clamp(.5rem, .9vw, .64rem); font-weight: 800; letter-spacing: .1em; }
.office-monitor__actions { position: relative; z-index: 15; display: grid; grid-template-columns: 1fr; gap: 6px; pointer-events: auto; }
.join-room-dialog { width:min(390px,calc(100vw - 28px)); max-height:calc(100svh - 28px); padding:0; overflow:auto; color:#eee5e8; background:#0d0a10; border:1px solid #7b3142; box-shadow:0 16px 58px rgba(0,0,0,.82); }
.join-room-dialog::backdrop { background:rgba(0,0,0,.76); }
.join-room-dialog form { display:grid; gap:12px; padding:22px; }
.join-room-dialog h2, .join-room-dialog p { margin:0; }
.join-room-dialog h2 { color:#db536c; font:900 1.35rem/1 Arial Black,sans-serif; letter-spacing:.05em; }
.join-room-dialog label { display:grid; gap:6px; color:#aaa1ab; font:700 .58rem monospace; letter-spacing:.1em; }
.join-room-dialog input { width:100%; box-sizing:border-box; padding:10px; color:#fff; background:#17121a; border:1px solid #805161; font:900 1.2rem monospace; letter-spacing:.2em; text-transform:uppercase; }
.join-room-dialog #join-room-error { min-height:1em; color:#ef8998; font-size:.62rem; }
.join-room-dialog form > div { display:flex; justify-content:flex-end; gap:8px; }
.join-room-dialog button { padding:8px 11px; color:#eee; background:#21131a; border:1px solid #805161; cursor:pointer; font:800 .58rem monospace; letter-spacing:.08em; }
.join-room-dialog #join-room-submit { color:#21080e; background:#dc7185; border-color:#ffc0cc; }
.office-gray-challenge { position: absolute; z-index: 4; inset: 16% 14%; display: grid; place-content: center; gap: 10px; padding: 18px; color: #dcdde0; background: rgba(20, 21, 24, .97); border: 4px solid #8b8d92; box-shadow: 0 0 50px rgba(139,141,146,.4); text-align: center; }
.office-gray-challenge[hidden] { display: none; }
.office-gray-challenge .overline { color: #9a9ca1; }
.office-gray-route { display: grid; grid-template-columns: repeat(4, 44px); align-items: end; gap: clamp(12px, 4vw, 40px); }
/* Every not-yet-completed node reads the same: which one is actually "next" is
   shuffled per round (see advanceOfficeGrayChallenge), so nothing here may hint
   at the answer — the player has to read the number, not the styling. */
.office-gray-route button { width: 44px; height: 44px; color: #dcdde0; background: #1a1b1e; border: 2px solid #45474c; border-radius: 4px; cursor: pointer; }
.office-gray-route kbd { display: block; margin-top: 2px; color: currentColor; font: 800 .28rem/1 "Courier New", monospace; letter-spacing: .04em; }
.office-gray-route button:nth-child(2) { transform: translateY(-24px); }
.office-gray-route button:nth-child(3) { transform: translateY(10px); }
.office-gray-route button:nth-child(4) { transform: translateY(-14px); }
.office-gray-route button.is-complete { color: #fff; background: #55575c; border-color: #33353a; cursor: default; }
.office-jumpscare { position: absolute; z-index: 40; inset: 0; display: grid; place-content: center; justify-items: center; overflow: hidden; color: #fff; background: radial-gradient(circle, color-mix(in srgb, var(--jumpscare-color) 38%, #050306), #020203 68%); text-align: center; }
.office-jumpscare[hidden] { display: none; }
.office-jumpscare::before, .office-jumpscare::after { content: ""; position: absolute; inset: -10%; pointer-events: none; }
.office-jumpscare::before { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.22) 4px 5px); animation: office-jumpscare-static .09s steps(2, end) infinite; }
.office-jumpscare::after { background: radial-gradient(circle, transparent 25%, rgba(0,0,0,.9) 76%); animation: office-jumpscare-flash .14s steps(2, end) infinite; }
.office-jumpscare__static { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 17px, color-mix(in srgb, var(--jumpscare-color) 20%, transparent) 18px 20px); mix-blend-mode: screen; }
.office-jumpscare img { position: relative; z-index: 2; width: min(88vmin, 720px); height: min(88vmin, 720px); object-fit: contain; /* `translate` keeps Void silhouettes centred while the lunge animation owns
   `transform`, avoiding an animation conflict. */ translate: 0 -9%; filter: drop-shadow(0 0 28px var(--jumpscare-color)) contrast(1.24); animation: office-jumpscare-lunge .24s steps(3, end) both, office-jumpscare-shake .08s steps(2, end) infinite .24s; }
.office-jumpscare strong, .office-jumpscare span { position: relative; z-index: 3; padding: 3px 8px; background: #050305; text-transform: uppercase; }
.office-jumpscare strong { margin-top: -10px; color: var(--jumpscare-color); font: 900 clamp(1rem, 4vw, 2.1rem)/1 Arial Black, sans-serif; letter-spacing: .08em; }
.office-jumpscare span { margin-top: 5px; color: #ddd; font-size: clamp(.52rem, 1vw, .72rem); letter-spacing: .12em; }
@keyframes office-static { 50% { transform: translateY(4px); } }
@keyframes office-alert { 50% { filter: brightness(1.7); } }
@keyframes office-camera-pulse { 50% { filter: brightness(1.65); opacity: .72; } }
@keyframes office-boundary-hit { 50% { filter: brightness(2); transform: translateX(2px); } }
@keyframes office-jumpscare-lunge { from { transform: scale(.92); opacity: .72; } to { transform: scale(1.68); opacity: 1; } }
@keyframes office-jumpscare-shake { 50% { translate: -5px 3px; } }
@keyframes office-jumpscare-static { 50% { transform: translate(4px, -3px); } }
@keyframes office-jumpscare-flash { 50% { opacity: .35; } }

.dialog-box { position: absolute; z-index: 42; inset: auto 0 0 0; display: grid; place-items: center; padding: clamp(10px, 3vw, 28px); pointer-events: none; }
.dialog-box[hidden] { display: none; }
.dialog-box__card { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; width: min(94%, 620px); padding: 14px 16px; background: var(--panel); border: 1px solid #4c3849; box-shadow: var(--shadow); pointer-events: auto; }
.dialog-box__portrait { width: 84px; height: 84px; object-fit: contain; image-rendering: pixelated; background: #050306; border: 1px solid #67505f; }
.dialog-box__portrait[hidden] { visibility: hidden; }
.dialog-box__body { display: grid; min-width: 0; align-content: start; gap: 8px; }
.dialog-box__speaker { color: var(--amber); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.dialog-box__text { margin: 0; color: var(--ink); font-size: .74rem; line-height: 1.6; white-space: pre-line; }
.dialog-box__choices { display: grid; gap: 6px; }
.dialog-box__choices:empty { display: none; }
.dialog-box__choices button, .dialog-box__continue { padding: 7px 10px; color: var(--ink); font: inherit; font-size: .68rem; letter-spacing: .05em; text-align: left; text-transform: uppercase; background: rgba(32, 23, 32, .64); border: 1px solid rgba(83, 64, 78, .6); cursor: pointer; }
.dialog-box__choices button:hover, .dialog-box__continue:hover { background: rgba(56, 38, 56, .8); border-color: var(--amber); }
.dialog-box__continue[hidden] { display: none; }
/* Non-host room viewers (see ui-controller.js's showDialogNode) — only the
   host's clicks actually resolve anything, so these read as inert instead
   of implying they'd do something. */
.dialog-box__choices button:disabled, .dialog-box__continue:disabled { color: var(--muted); cursor: default; opacity: .55; }
.dialog-box__choices button:disabled:hover, .dialog-box__continue:disabled:hover { background: rgba(32, 23, 32, .64); border-color: rgba(83, 64, 78, .6); }
.dialog-box--readonly .dialog-box__speaker::after { content: " // HOST IS CHOOSING"; color: var(--muted); font-size: .6rem; letter-spacing: .08em; }

@media (max-width: 600px) {
  .office-survivor { overflow: hidden; grid-template-rows: auto minmax(0, 1fr) auto; padding: 6px; }
  .office-survivor__header { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 8px; padding-bottom: 4px; }
  .office-survivor__header > div:first-child { min-width: 0; }
  .office-survivor__header .office-event { grid-column: 1 / -1; grid-row: 2; font-size: .45rem; }
  .office-survivor__header .office-power { grid-column: 1 / -1; grid-row: 3; font-size: .42rem; }
  .office-controls button { min-width: 44px; min-height: 26px; padding: 2px; font-size: .32rem; }
  #office-desk-light,#office-emergency { left: 30%; }
  #office-rear-flash { left: 48%; }
  #office-radio,#office-reboot { right: 22%; }
  #office-vent,#office-breaker { right: 5%; }
  .office-camera-map { right: 8px; bottom: 178px; width: min(56vw, 250px); height: 116px; }
  .office-camera-node { min-width: 44px; padding: 3px; }
  .office-camera-node b { font-size: .4rem; }
  .office-gray-challenge { inset: 10% 5%; }
  .office-gray-route { grid-template-columns: repeat(4, 38px); gap: 18px; }
  .office-gray-route button { width: 38px; height: 38px; }
}

/* The HUD is a bottom bar (Minecraft item-screen style): objective on the left,
   status meters + inventory hotbar centered, route/threat readout on the right. */
.hud {
  position: absolute;
  z-index: 30;
  inset: auto 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: clamp(8px, 2vw, 20px);
  padding: clamp(8px, 1.6vw, 18px);
  pointer-events: none;
  text-shadow: 0 2px 6px #000;
}
/* A soft gradient lifts the bottom bar off the now-pitch-black room floor. */
.hud::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 190%;
  background: linear-gradient(to top, rgba(3, 2, 5, .74), rgba(3, 2, 5, 0));
  z-index: -1;
  pointer-events: none;
}

.hud[hidden] { display: none; }
.hud section { display: grid; gap: 3px; }
.hud section[hidden] { display: none; }
.hud__objective { justify-items: start; text-align: left; align-content: end; }
.hud__radar { justify-items: end; text-align: right; align-content: end; }

/* Center column: the status meters sit above a row of inventory slots. */
.hud .hud__loadout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.hud__meters { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 3px 14px; }
.hud__meters[hidden] { display: none; }
.hud__meter { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hud__meter[hidden] { display: none; }
/* The 11vw coefficient used to hit its 130px ceiling as early as ~1180px of
   viewport width — meaning every "lower resolution laptop" (1280x720 through
   roughly 1440x900) rendered the same fixed-max meters row as a full desktop
   monitor, but inside a proportionally much smaller game frame. With up to 5
   meters at a pinned 130px each, that fixed-width row squeezed the flanking
   objective/radar HUD text into a narrow column and forced it to wrap onto 3
   lines. Lowering the coefficient (and letting it keep scaling until a wider
   viewport) keeps the meters shrinking smoothly through that whole band
   instead of flatlining early, while still reaching the same 130px max on
   large monitors (>= ~1735px) exactly as before. */
.hud__meter .battery { margin: 0; width: clamp(64px, 7.5vw, 130px); }
.hud__meter .hud__caption { text-align: center; }

/* Minecraft-style inventory hotbar. */
.hud__hotbar { display: flex; align-items: center; gap: 5px; }
.hud__hotbar[hidden] { display: none; }
.hotbar-slot {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(9, 6, 10, .72);
  cursor: pointer;
}
.hotbar-slot.is-empty { opacity: .34; }
.hotbar-slot.is-reloading { opacity: .58; }
.hotbar-slot.is-reloading .hotbar-slot__count { color: var(--amber); }
.hotbar-slot.is-selected {
  border-color: var(--amber);
  background: rgba(44, 30, 10, .82);
  box-shadow: 0 0 8px rgba(242, 187, 98, .5);
}
.hotbar-slot__glyph { font-size: .95rem; line-height: 1; }
.hotbar-slot__key { position: absolute; top: 0; left: 2px; color: var(--muted); font-size: .46rem; font-weight: 700; }
.hotbar-slot.is-selected .hotbar-slot__key { color: var(--amber); }
.hotbar-slot__count { position: absolute; right: 2px; bottom: 0; color: var(--ink); font-size: .5rem; font-weight: 700; }
.hotbar-coins { display: flex; align-items: center; gap: 3px; margin-left: 6px; color: var(--amber); font-size: .64rem; font-weight: 700; }
.hotbar-hint { margin-left: 8px; color: var(--muted); letter-spacing: .08em; }
#radial-label.is-active { color: var(--amber); font-weight: 700; }
.hud strong { display: flex; flex-direction: column; gap: 2px; font-size: clamp(.74rem, 1.6vw, 1.05rem); letter-spacing: .04em; }
.hud__caption { font-size: clamp(.54rem, 1vw, .68rem); color: var(--muted); }
.hud__caption b { color: var(--ink); }
.escape-cooldown { color: var(--red); font-weight: 700; letter-spacing: .07em; }
.escape-cooldown[hidden] { display: none; }

.overline {
  margin: 0;
  color: var(--amber);
  /* Same early-flatline problem as the HUD meters above: 1vw hit its .72rem
     ceiling by ~1150px of viewport width, so this label rendered at full
     size (plus its own generous .19em letter-spacing) all the way down
     through the common laptop resolution band, wrapping onto extra lines
     inside whatever narrow column it happened to share the row with. .72vw
     keeps it shrinking smoothly until a wider viewport, unchanged above that. */
  font-size: clamp(.56rem, .72vw, .72rem);
  font-weight: 700;
  letter-spacing: .19em;
}

.battery {
  width: clamp(90px, 14vw, 155px);
  height: 7px;
  margin-top: 3px;
  padding: 1px;
  border: 1px solid rgba(255,255,255,.34);
  background: #09060a;
}

.battery i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--amber);
  box-shadow: 0 0 9px rgba(242, 187, 98, .42);
  transition: width .25s linear, background-color .2s;
}

/* The stamina meter sits under the lamp bar, tinted cyan so the two resources
   read as distinct at a glance. It tracks faster than the lamp, so no ease. */
.battery.stamina { margin-top: 2px; }
.battery.stamina i {
  background: #8fd0e0;
  box-shadow: 0 0 9px rgba(143, 208, 224, .42);
  transition: width .08s linear, background-color .2s;
}

/* Fills toward the crouch fade's target opacity as it ramps, tinted violet to
   match the hiding-spot color language. Same easing as the crouch settle
   itself (see TUNING.crouchFadeRate) so the bar and the sprite agree. */
.battery.fade { margin-top: 2px; }
.battery.fade i {
  background: #c78cff;
  box-shadow: 0 0 9px rgba(199, 140, 255, .42);
  transition: width .12s linear;
}

/* Exposure meter — ember-tinted "you're being noticed" resource. Brightens to a
   hot red at high exposure. */
.battery.exposure i {
  background: #e07a4f;
  box-shadow: 0 0 9px rgba(224, 122, 79, .42);
  transition: width .15s linear, background .2s linear;
}
.battery.exposure i.is-high { background: #ff5a45; box-shadow: 0 0 11px rgba(255, 90, 69, .6); }

/* Facility noise meter — cool teal, flaring to a warning amber when it's loud
   enough to draw noise-reactive hunters. */
.battery.noise i {
  background: #4fb6c7;
  box-shadow: 0 0 9px rgba(79, 182, 199, .42);
  transition: width .15s linear, background .2s linear;
}
.battery.noise i.is-high { background: #f2bb62; box-shadow: 0 0 11px rgba(242, 187, 98, .6); }

/* In the bottom bar the meters are laid out in labelled columns with a flex gap,
   so the old stacking top-margins would just push each bar off-centre. */
.hud .hud__meter .battery { margin: 0; }

.threat-pips { display: flex; gap: 4px; margin-top: 3px; }
.threat-pips i { width: 17px; height: 5px; border: 1px solid #5f4650; background: #1a1016; }
.threat-pips i.is-on { border-color: var(--red); background: var(--red); box-shadow: 0 0 9px rgba(230,68,81,.6); }

/* Vertical body-temperature thermometer on the left edge. The fill grows from the
   bottom (cold) toward the top (hot); ui-controller sets its height/tint and the
   is-overheating / is-freezing warning classes. */
.temperature-gauge {
  position: absolute;
  z-index: 30;
  left: clamp(8px, 1.4vw, 18px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  text-shadow: 0 2px 6px #000;
}
.temperature-gauge[hidden] { display: none; }
.temperature-gauge__track {
  position: relative;
  width: 12px;
  height: clamp(96px, 26vh, 190px);
  padding: 2px;
  display: flex;
  align-items: flex-end;
  border: 1px solid rgba(255, 255, 255, .34);
  background: #09060a;
}
.temperature-gauge__track i {
  display: block;
  width: 100%;
  height: 55%;
  background: var(--amber);
  box-shadow: 0 0 9px rgba(242, 187, 98, .42);
  transition: height .2s linear, background-color .25s;
}
.temperature-gauge__label { max-width: 62px; color: var(--muted); font-size: clamp(.46rem, .9vw, .58rem); letter-spacing: .07em; text-align: center; }
.temperature-gauge.is-overheating .temperature-gauge__label { color: #e0512f; font-weight: 700; }
.temperature-gauge.is-freezing .temperature-gauge__label { color: #5aa9e0; font-weight: 700; }
.temperature-gauge.is-overheating .temperature-gauge__track { border-color: rgba(224, 81, 47, .85); box-shadow: 0 0 12px rgba(224, 81, 47, .5); }
.temperature-gauge.is-freezing .temperature-gauge__track { border-color: rgba(90, 169, 224, .85); box-shadow: 0 0 12px rgba(90, 169, 224, .5); }

.map-panel {
  position: absolute;
  z-index: 31;
  top: clamp(66px, 12vw, 112px);
  right: clamp(10px, 2vw, 22px);
  width: 116px;
  padding: 5px;
  background: rgba(7, 5, 8, .82);
  border: 1px solid rgba(230, 215, 204, .2);
  box-shadow: 0 9px 28px #000;
  transition: opacity .16s ease, transform .16s ease;
}
.map-panel[hidden] { display: none; }
.map-panel.is-collapsed { opacity: 0; transform: translateX(12px); pointer-events: none; }
.map-panel__head { display: flex; justify-content: space-between; margin-bottom: 4px; color: var(--muted); font-size: 8px; letter-spacing: .12em; }
#map-canvas { display: block; width: 104px; height: 104px; image-rendering: pixelated; }

/* Desktop only: pin the minimap flush to the far top-right corner and enlarge it
   (~+27%). Mobile keeps its smaller, lower placement — its own @media scales it —
   so the bigger map never crowds the touch corner controls. The canvas backbuffer
   is 132px (index.html), so this desktop size stays 1:1 and crisp. */
@media (min-width: 701px) {
  .map-panel { top: 10px; right: 10px; width: 144px; }
  #map-canvas { width: 132px; height: 132px; }
}

.full-map-overlay {
  position: absolute;
  z-index: 56;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(7px, 1.4vw, 13px);
  padding: clamp(10px, 2.4vw, 24px);
  background: rgba(4, 3, 6, .975);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s;
}
.full-map-overlay[hidden] { display: none; }
.full-map-overlay.is-visible { opacity: 1; visibility: visible; }
.full-map-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .13;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(220,190,210,.2) 4px);
}
.full-map-overlay__header { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.full-map-overlay__header h2 { margin: 2px 0 0; font: 900 clamp(1.1rem, 3.3vw, 2.4rem)/.9 Arial Black, sans-serif; letter-spacing: -.045em; }
.full-map-overlay__header button { padding: 7px 9px; color: var(--muted); background: #0e0910; border: 1px solid #4b3948; cursor: pointer; font-size: clamp(.5rem, .9vw, .65rem); letter-spacing: .08em; }
.full-map-overlay__header button:hover, .full-map-overlay__header button:focus-visible { color: var(--ink); border-color: var(--amber); }
.full-map-overlay__actions { display: flex; align-items: center; gap: 10px; }
.full-map-zoom { display: flex; align-items: center; gap: 4px; }
.full-map-zoom button { min-width: 26px; font-weight: 700; }
.full-map-zoom button[disabled] { opacity: .35; cursor: default; }
.full-map-zoom button[disabled]:hover { color: var(--muted); border-color: #4b3948; }
#full-map-zoom-level {
  min-width: 34px;
  color: var(--muted);
  font-size: clamp(.5rem, .9vw, .65rem);
  letter-spacing: .06em;
  text-align: center;
}
.full-map-overlay__stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  cursor: grab;
  /* Single-pointer map dragging remains app-owned; a two-finger gesture is
     handed back to the browser for native page zoom/accessibility. */
  touch-action: pinch-zoom;
  overscroll-behavior: contain;
  user-select: none;
}
.full-map-overlay__stage.is-dragging { cursor: grabbing; }
#full-map-canvas {
  display: block;
  width: var(--full-map-display-size, 520px);
  height: var(--full-map-display-size, 520px);
  max-width: none;
  max-height: none;
  flex: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  border: 1px solid #382d38;
  box-shadow: 0 12px 38px #000;
  cursor: inherit;
  will-change: transform;
}
.full-map-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; color: #8b7f85; font-size: clamp(.45rem, .83vw, .58rem); letter-spacing: .06em; }
.full-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.full-map-legend span[hidden] { display: none; }
.full-map-legend span::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.full-map-legend .legend-player { color: #f0e7dc; }
.full-map-legend .legend-player--remote { color: #86d5cf; }
.full-map-legend .legend-relay { color: #f2bb62; }
.full-map-legend .legend-battery { color: #ffe06a; }
.full-map-legend .legend-hiding { color: #c78cff; }
.full-map-legend .legend-safe { color: #e7b84f; }
.full-map-legend .legend-exit { color: #74b88d; }
.full-map-legend small { padding-left: 12px; color: #b0a1aa; border-left: 1px solid #4b3948; font: inherit; white-space: nowrap; }

.interaction-prompt, .toast {
  position: absolute;
  /* Toasts must acknowledge admin login above the title and account menus. */
  z-index: 100;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
  letter-spacing: .08em;
  text-shadow: 0 2px 7px #000;
  pointer-events: none;
}
.interaction-prompt { bottom: 13%; padding: 7px 10px; font-size: clamp(.62rem, 1.25vw, .8rem); background: rgba(6,4,7,.72); border: 1px solid rgba(255,255,255,.2); }
.interaction-prompt[hidden] { display: none; }
.toast { top: 25%; color: var(--amber); font-weight: 700; font-size: clamp(.62rem, 1.2vw, .8rem); opacity: 0; }
.toast.is-visible { animation: toast 2.2s ease both; }

.escape-overlay {
  position: absolute;
  z-index: 46;
  top: 50%;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(76%, 330px);
  padding: 12px 15px;
  color: var(--ink);
  background: rgba(24, 5, 11, .91);
  border: 1px solid var(--red);
  box-shadow: 0 0 0 3px rgba(25, 4, 10, .76), 0 10px 40px #000, inset 0 0 30px rgba(230, 68, 81, .08);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.escape-overlay[hidden] { display: none; }
.escape-overlay__portrait { width: 52px; height: 52px; object-fit: contain; image-rendering: pixelated; background: #090407; border: 1px solid #8f4352; box-shadow: 0 0 14px rgba(244, 80, 93, .2); }
.escape-overlay__portrait[hidden] { display: none; }
.escape-overlay h2 { margin: 0; color: #fff0ec; font: 900 clamp(1.2rem, 3.5vw, 2rem)/.9 Arial Black, Impact, sans-serif; letter-spacing: -.045em; }
.escape-overlay > strong { color: var(--amber); font-size: clamp(.58rem, 1.25vw, .74rem); letter-spacing: .1em; }
.escape-overlay > span { color: #b69ca4; font-size: .54rem; letter-spacing: .08em; }
.escape-meter { width: 100%; height: 7px; padding: 1px; overflow: hidden; background: #090407; border: 1px solid #5f3541; }
.escape-meter i { display: block; width: 0; height: 100%; transition: width .08s linear; }
.escape-meter--time i { background: var(--red); }
.escape-meter--progress i { background: var(--amber); box-shadow: 0 0 7px rgba(242, 187, 98, .5); }
.escape-overlay button { min-width: 108px; padding: 9px 13px; color: #fff; background: #851f31; border: 1px solid #fa6c72; font-weight: 900; letter-spacing: .08em; pointer-events: auto; touch-action: none; }
.escape-overlay button[hidden] { display: none; }
.escape-overlay.is-cooling { border-color: #785769; }
.escape-overlay.is-cooling > strong { color: var(--muted); }

.overlay {
  position: absolute;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(8px, 2vw, 28px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5,3,6,.98) 0%, rgba(7,4,8,.93) 46%, rgba(11,6,13,.7) 100%),
    radial-gradient(circle at 76% 36%, rgba(185,113,49,.14), transparent 28%),
    repeating-linear-gradient(45deg, rgba(93, 58, 72, .14) 0 18px, rgba(22, 16, 25, .14) 18px 36px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .24s ease, visibility .24s;
}
.overlay[hidden] { display: none; }
.overlay--visible { opacity: 1; visibility: visible; }
.overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(220,190,210,.2) 4px);
}

.title-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  width: min(100%, 760px);
}

.title-copy h1 {
  margin: .18em 0 .22em;
  color: #eee7e5;
  font: 900 clamp(2.3rem, 7.5vw, 6.3rem)/.72 Arial Black, Impact, sans-serif;
  letter-spacing: -.075em;
  text-shadow: 6px 7px 0 #210e1b, 0 0 30px rgba(230,68,81,.18);
}
.title-copy h1 span { color: var(--red); font-size: .45em; letter-spacing: .35em; }
.lede { max-width: 630px; margin: 0 0 clamp(12px, 2.5vw, 24px); color: #bbb0ad; font-size: clamp(.68rem, 1.35vw, .94rem); line-height: 1.55; }
.route-notice { max-width: 500px; margin: -8px 0 12px; color: #756a70; font-size: .59rem; line-height: 1.45; letter-spacing: .05em; }

.seed-control { display: flex; align-items: center; gap: 7px; width: min(100%, 500px); margin-bottom: 10px; }
.seed-control label { color: var(--muted); font-size: .62rem; letter-spacing: .12em; white-space: nowrap; }
.seed-control input { min-width: 0; flex: 1; padding: 8px 10px; color: var(--ink); background: #0c080d; border: 1px solid #4a3945; text-transform: uppercase; outline: none; }
.seed-control input:focus { border-color: var(--amber); }
.seed-control button { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .63rem; letter-spacing: .09em; }
.seed-control button:hover { color: var(--ink); }
.text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 9px;
  color: #b7aab2;
  background: linear-gradient(rgba(35, 25, 36, .94), rgba(18, 12, 20, .96));
  border: 1px solid #564250;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045), 0 2px 8px rgba(0, 0, 0, .24);
  cursor: pointer;
  font-size: .6rem;
  line-height: 1.1;
  letter-spacing: .09em;
}
.text-button:hover {
  color: var(--ink);
  background: linear-gradient(rgba(52, 37, 51, .96), rgba(25, 17, 27, .98));
  border-color: #8c687c;
}
.text-button:focus-visible {
  color: var(--ink);
  border-color: var(--amber);
  outline: 1px solid rgba(242, 187, 98, .3);
  outline-offset: 2px;
}
.text-button[hidden] { display: none; }
.text-button:active { transform: translateY(1px); }
.text-button:disabled { color: #70666c; border-color: #342a31; cursor: not-allowed; opacity: .62; }

.title-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.primary-button {
  position: relative;
  padding: 11px 16px;
  color: #fff4eb;
  font-weight: 900;
  letter-spacing: .08em;
  border: 1px solid #fa6c72;
  background: linear-gradient(#b62d3e, #6f1927);
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 8px 26px rgba(74,7,20,.42);
  cursor: pointer;
}
.primary-button:hover { filter: brightness(1.15); }
.primary-button:active { transform: translateY(1px); }

.room-connect { width: min(100%, 500px); margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--line); }
.room-connect__fields { display: grid; grid-template-columns: minmax(0, 220px); gap: 7px; margin-top: 7px; }
.room-connect label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: center; color: var(--muted); font-size: .58rem; letter-spacing: .1em; }
.room-connect input { min-width: 0; width: 100%; padding: 6px 7px; color: var(--ink); background: #0c080d; border: 1px solid #4a3945; outline: none; text-transform: uppercase; }
.room-connect input:focus { border-color: var(--amber); }
.room-connect__actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.room-connect__actions button { padding: 0; color: var(--amber); background: transparent; border: 0; cursor: pointer; font-size: .58rem; letter-spacing: .1em; }
.room-connect__actions button:hover { color: var(--ink); }
#room-feedback { margin-left: auto; overflow: hidden; color: var(--muted); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
#room-feedback.is-error, .room-lobby__feedback.is-error { color: var(--red); }
.input-mode { display: block; margin-top: 7px; color: #786d72; font-size: .52rem; letter-spacing: .08em; }

.high-scores { width: min(100%, 500px); margin-top: clamp(12px, 2vw, 20px); }
.high-scores ol { display: grid; gap: 3px; max-width: 340px; margin: 7px 0 0; padding: 0; list-style: none; counter-reset: scores; }
.high-scores li { display: grid; grid-template-columns: 20px 1fr auto; gap: 7px; color: var(--muted); font-size: .61rem; }
.high-scores li::before { counter-increment: scores; content: counter(scores, decimal-leading-zero); color: #6f5a66; }
.high-scores li b { color: var(--ink); }

/* Full-screen menu overlays (Controls, Character Files). Modelled on the full
   map overlay: they cover the whole frame, dim the title behind, and dismiss
   via their own exit button or the Escape key. */
/* Right-click a hunter, or press I, to pop a compact dossier card in-game. It
   shows only public flavour (never hidden hunter state), and dismisses on its
   close button, Escape, or a timeout. */
.hunter-info-card {
  position: absolute;
  z-index: 44;
  top: clamp(58px, 11vw, 104px);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  gap: 7px;
  width: min(88%, 340px);
  padding: 11px 13px;
  background: rgba(11, 7, 13, .95);
  border: 1px solid var(--amber);
  box-shadow: 0 14px 40px rgba(0,0,0,.6);
}
.hunter-info-card[hidden] { display: none; }
.hunter-info-card__close { position: absolute; top: 4px; right: 6px; padding: 0 4px; color: var(--muted); background: none; border: none; font-size: 1rem; line-height: 1; cursor: pointer; }
.hunter-info-card__close:hover, .hunter-info-card__close:focus-visible { color: var(--ink); }
.hunter-info-card__head { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; }
.hunter-info-card__head img { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; background: #120c14; border: 1px solid #4a3947; }
.hunter-info-card h3 { margin: 0; color: var(--ink); font-size: .95rem; letter-spacing: .03em; }
.hunter-info-card__trait { margin: 0; color: var(--amber); font-size: .48rem; letter-spacing: .09em; }
.hunter-info-card__dossier { margin: 0; color: #c2b7be; font-size: .56rem; line-height: 1.5; }

/* Blocks all play when the host is unreachable. Highest z-index so it covers
   every menu and overlay, and it captures pointer input so nothing beneath it
   is clickable while the server is down. */
.offline-overlay {
  position: absolute;
  z-index: 90;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 2, 4, .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s;
}
.offline-overlay[hidden] { display: none; }
.offline-overlay.is-visible { opacity: 1; visibility: visible; }
.offline-overlay__panel { display: grid; justify-items: center; gap: 12px; width: min(90%, 460px); max-height: calc(100% - 20px); overflow: auto; padding: clamp(22px, 5vw, 46px); text-align: center; background: var(--panel); border: 1px solid #6b2230; box-shadow: var(--shadow); overscroll-behavior: contain; }
.offline-overlay__panel h2 { margin: 0; font: 900 clamp(1.6rem, 5vw, 3rem)/.9 Arial Black, sans-serif; letter-spacing: -.04em; color: var(--red); }
.offline-overlay__panel p { margin: 0; color: var(--muted); line-height: 1.5; }
.offline-overlay__spinner { color: var(--amber); font-size: .62rem; letter-spacing: .2em; animation: offline-pulse 1.3s ease-in-out infinite; }
@keyframes offline-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

.menu-overlay {
  position: absolute;
  /* Menus must sit above the touch controls (z70). Previously the d-pad and
     action pad remained clickable through inventory/account dialogs. */
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(10px, 2.4vw, 26px);
  background: rgba(4, 3, 6, .96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s;
}
.menu-overlay[hidden] { display: none; }
.menu-overlay.is-visible { opacity: 1; visibility: visible; }

.save-station__panel {
  display: grid;
  gap: 12px;
  width: min(92%, 360px);
  max-height: calc(100% - 20px);
  overflow: auto;
  padding: 16px 18px;
  background: rgba(9, 6, 11, .96);
  border: 1px solid var(--amber);
  box-shadow: 0 0 0 4px rgba(9, 6, 11, .8), 0 16px 44px #000;
}
/* The display:grid/flex classes below would otherwise beat the global [hidden]
   rule (equal specificity, later wins), so a signed-in form would still show. */
.save-station [hidden] { display: none; }

/* Free inventory grid overlay. */
.inventory-screen__panel {
  display: grid;
  gap: 12px;
  width: min(92%, 360px);
  max-height: calc(100% - 20px);
  overflow: auto;
  padding: 16px 18px;
  background: rgba(9, 6, 11, .96);
  border: 1px solid var(--amber);
  box-shadow: 0 0 0 4px rgba(9, 6, 11, .8), 0 16px 44px #000;
}
.inventory-screen__head { display: flex; align-items: center; justify-content: space-between; }
.inventory-screen__head strong { color: var(--amber); font: 900 .9rem/1 Arial Black, Impact, sans-serif; letter-spacing: .12em; }
#inventory-close { background: none; border: none; color: #b8aeb5; font-size: 1.2rem; cursor: pointer; padding: 0 4px; }
.inventory-screen__hint { margin: 0; color: var(--muted); font-size: .58rem; letter-spacing: .06em; }
.inventory-screen__capacity { margin: -4px 0 0; color: var(--amber); font-size: .62rem; font-weight: 800; letter-spacing: .1em; }
.inventory-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.inventory-slot {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .24);
  background: rgba(9, 6, 10, .75);
  cursor: grab;
}
.inventory-slot.is-hotbar { border-color: rgba(242, 187, 98, .5); background: rgba(30, 22, 10, .7); }
.inventory-slot.is-empty { opacity: .45; cursor: default; }
.inventory-slot.is-selected { outline: 2px solid var(--amber); outline-offset: -2px; }
.inventory-slot.is-move-source { outline: 2px solid #86d5cf; outline-offset: -2px; box-shadow: inset 0 0 12px rgba(134, 213, 207, .22); }
.inventory-slot.is-dragging { opacity: .4; }
.inventory-slot.is-drop { border-color: var(--amber); box-shadow: inset 0 0 8px rgba(242, 187, 98, .6); }
.inventory-slot__key { position: absolute; top: 2px; left: 3px; color: var(--muted); font-size: .5rem; font-weight: 700; }
.inventory-slot__glyph { font-size: 1.5rem; line-height: 1; }
.inventory-slot__count { position: absolute; right: 3px; bottom: 2px; color: var(--ink); font-size: .6rem; font-weight: 700; }
.save-station__head { display: flex; align-items: center; justify-content: space-between; }
.save-station__head strong { color: var(--amber); font: 900 .9rem/1 Arial Black, Impact, sans-serif; letter-spacing: .12em; }
#save-station-close { background: none; border: none; color: #b8aeb5; font-size: 1.2rem; cursor: pointer; padding: 0 4px; }
.save-station__status { margin: 0; color: #9aadb0; font-size: .5rem; letter-spacing: .06em; line-height: 1.5; }
.save-station__account { display: grid; gap: 8px; }
.save-station__account[hidden] { display: none; }
.save-station__account label { display: grid; gap: 3px; color: #b8aeb5; font-size: .5rem; letter-spacing: .12em; }
.save-station__account input {
  padding: 7px 8px; color: var(--ink); background: #100b12; border: 1px solid #4b3948;
  font: 700 .6rem/1.2 "Courier New", monospace; letter-spacing: .02em;
}
.save-station__account input[type="text"] { text-transform: uppercase; }
.save-station__account input:focus-visible { outline: none; border-color: var(--amber); box-shadow: 0 0 0 1px rgba(242, 187, 98, .3); }
.save-station__account-actions, .save-station__slots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.save-station__slots { border-top: 1px solid #2b2230; padding-top: 12px; }
.save-station__slot-picker { display: grid; gap: 3px; color: #b8aeb5; font-size: .5rem; letter-spacing: .12em; }
.save-station__slot-picker select { min-width: 130px; border: 1px solid #493a4b; background: #100b12; color: #eee5e9; padding: 8px; font: inherit; }
.save-station__manage { display: grid; gap: 10px; border-top: 1px solid #2b2230; padding-top: 12px; }
.save-station__manage[hidden] { display: none; }
.save-station__manage > p, .save-station__manage small { margin: 0; color: #81757c; font-size: .48rem; letter-spacing: .07em; line-height: 1.45; }
.save-station__feedback { margin: 0; min-height: 1em; color: #9be4dc; font-size: .5rem; letter-spacing: .05em; }
.save-station__feedback.is-error { color: #ff9a91; }
.menu-overlay__panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(8px, 1.4vw, 14px);
  width: min(100%, 880px);
  height: min(100%, 640px);
  max-height: 100%;
  overflow: hidden;
  padding: clamp(12px, 2vw, 22px);
  background: var(--panel);
  border: 1px solid #4c3849;
  box-shadow: var(--shadow);
}
.menu-overlay__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.menu-overlay__header h2 { margin: 2px 0 0; font: 900 clamp(1.1rem, 3.2vw, 2.2rem)/.9 Arial Black, sans-serif; letter-spacing: -.04em; }
.menu-overlay__close { padding: 8px 11px; color: var(--muted); background: #0e0910; border: 1px solid #4b3948; cursor: pointer; font-size: clamp(.5rem, .9vw, .64rem); letter-spacing: .08em; }
.menu-overlay__close:hover, .menu-overlay__close:focus-visible { color: var(--ink); border-color: var(--amber); }
.menu-overlay__body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.dossier-hint { margin-left: 8px; color: #6d5f69; font-size: .92em; letter-spacing: .1em; }

.controls-tips { margin-bottom: 14px; color: var(--muted); font-size: .68rem; }
.controls-tips ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 5px; line-height: 1.4; }
.settings-panel-shell { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.settings-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid #33253180; }
.settings-tab { padding: 6px 12px; color: var(--muted); background: #0e0910; border: 1px solid #4b3948; cursor: pointer; font: inherit; font-size: .56rem; letter-spacing: .08em; }
.settings-tab:hover, .settings-tab:focus-visible { color: var(--ink); border-color: var(--amber); }
.settings-tab[aria-selected="true"] { color: #fff8f1; background: #271927; border-color: var(--amber); }
.settings-panel { display: grid; gap: 6px; align-content: start; }
.settings-panel[hidden] { display: none; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; background: #0d0910; border: 1px solid #33253180; }
.settings-row label { display: grid; gap: 2px; cursor: pointer; }
.settings-row b { color: var(--ink); font-size: .6rem; letter-spacing: .08em; }
.settings-row small { color: #6d5f69; font-size: .5rem; letter-spacing: .04em; }
.settings-row__control { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.settings-row input[type="range"] { width: clamp(90px, 18vw, 170px); accent-color: var(--amber); cursor: pointer; }
.settings-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--amber); cursor: pointer; }
.settings-row output { min-width: 46px; color: var(--amber); font-size: .56rem; letter-spacing: .05em; text-align: right; }
.settings-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid #33253180; }
.settings-foot span { color: #6d5f69; font-size: .52rem; letter-spacing: .06em; }
body.no-minimap .map-panel { display: none; }
body.no-fps .fps-counter { display: none; }
body.reduced-motion .menu-overlay { transition: none; }
.keybind__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.keybind__hint { margin-left: 8px; color: #6d5f69; font-size: .9em; letter-spacing: .06em; }
.menu-button { padding: 6px 10px; color: var(--muted); background: #0e0910; border: 1px solid #4b3948; cursor: pointer; font-size: .56rem; letter-spacing: .08em; }
.menu-button:hover, .menu-button:focus-visible { color: var(--ink); border-color: var(--amber); }
.keybind__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; margin-top: 8px; }
.keybind__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; background: #0d0910; border: 1px solid #33253180; }
.keybind__row span { color: var(--muted); font-size: .58rem; letter-spacing: .08em; }
.keybind__key { min-width: 58px; padding: 4px 7px; color: var(--ink); background: #211920; border: 1px solid #67505f; border-bottom-width: 2px; font: inherit; font-size: .58rem; letter-spacing: .05em; text-align: center; cursor: pointer; }
.keybind__key:hover, .keybind__key:focus-visible { border-color: var(--amber); }
.keybind__key.is-capturing { color: var(--amber); border-color: var(--amber); background: #2a1420; }

/* Character Files are a readable master/detail reference: keep the roster and
   the selected dossier independently scrollable instead of shrinking all text
   to force every unit into one fixed panel. */
.dossier { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; height: 100%; min-height: 0; }
.hunter-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 5px; min-height: 0; padding: 2px 6px 2px 2px; overflow: auto; overscroll-behavior: contain; background: rgba(7, 5, 9, .42); border: 1px solid rgba(74, 57, 72, .55); }
.hunter-specs:focus-visible { outline: 1px solid var(--amber); outline-offset: 2px; }
.hunter-specs article { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 7px; align-items: center; min-width: 0; min-height: 42px; padding: 5px 6px; color: #cbc1c8; background: rgba(13, 9, 16, .82); border: 1px solid #332531; cursor: pointer; }
.hunter-specs article:hover { background: #1b121d; border-color: #6a5363; }
.hunter-specs article[aria-selected="true"] { color: #fff8f1; background: #271927; border-color: var(--amber); box-shadow: inset 3px 0 0 var(--amber); }
.hunter-specs img { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; background: #050306; border: 1px solid #4e3b4b; }
.hunter-specs span { display: grid; min-width: 0; gap: 3px; }
.hunter-specs strong { overflow: hidden; color: inherit; font-size: .61rem; letter-spacing: .055em; text-overflow: ellipsis; white-space: nowrap; }
.hunter-specs small { display: block; overflow: hidden; color: #93848e; font-size: .47rem; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.hunter-specs article[aria-selected="true"] small { color: #f0c77b; }
/* Full-width divider between the A-Z roster and the Void colours. */
.dossier-section { grid-column: 1 / -1; margin: 6px 0 0; padding: 3px 4px; color: var(--amber); font-size: .5rem; letter-spacing: .18em; border-bottom: 1px solid rgba(120, 92, 114, .55); }
.dossier-section:first-child { margin-top: 0; }

.hunter-detail { display: grid; align-content: start; gap: 11px; min-width: 0; min-height: 0; padding: 14px 16px; overflow: auto; overscroll-behavior: contain; background: #0d0910; border: 1px solid #4c3849; box-shadow: inset 0 0 0 1px rgba(255,255,255,.025); }
.hunter-detail__head { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 13px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid #332531; }
.hunter-detail__head img { width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; background: #050306; border: 1px solid #67505f; }
.hunter-detail__title { display: grid; min-width: 0; gap: 5px; }
.hunter-detail h3 { margin: 0; color: #fff8f1; font-size: clamp(1rem, 2vw, 1.28rem); letter-spacing: .055em; }
.hunter-detail__dossier { margin: 0; color: #ddd1d8; font-size: .68rem; line-height: 1.62; }
.hunter-detail__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 10px 0; border-top: 1px solid #332531; border-bottom: 1px solid #332531; }
.hunter-detail__stats > div { display: grid; gap: 4px; min-width: 0; padding: 6px 7px; background: rgba(32, 23, 32, .64); border: 1px solid rgba(83, 64, 78, .6); }
.hunter-detail__stats dt { color: #aa98a4; font-size: .49rem; letter-spacing: .12em; }
.hunter-detail__stats dd { margin: 0; overflow: hidden; color: #fff8f1; font-size: .61rem; letter-spacing: .04em; text-overflow: ellipsis; white-space: nowrap; }
.hunter-detail__trait { margin: 0; color: #ffd88f; font-size: .58rem; line-height: 1.45; letter-spacing: .09em; }

.hunter-info-card__handling { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.handling-badge { padding: 4px 7px; border: 1px solid #67505f; border-radius: 2px; background: #211721; color: #f0e3eb; font: 600 .52rem/1.2 monospace; letter-spacing: .07em; cursor: help; user-select: none; }

@media (max-width: 720px) {
  .menu-overlay__panel { height: 100%; }
  .keybind__list { grid-template-columns: minmax(0, 1fr); }
  .dossier { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(150px, 42%) minmax(0, 1fr); }
  .hunter-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hunter-detail__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .hunter-specs { grid-template-columns: minmax(0, 1fr); }
  .hunter-detail { padding: 11px 12px; }
  .hunter-detail__head { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; }
  .hunter-detail__head img { width: 58px; height: 58px; }
}
kbd { padding: 2px 4px; color: var(--ink); background: #211920; border: 1px solid #67505f; border-bottom-width: 2px; font: inherit; }

.pause-screen, .end-screen { background: rgba(4,2,5,.88); text-align: center; }
.pause-card, .end-card { position: relative; z-index: 2; display: grid; justify-items: center; gap: 13px; width: min(90%, 530px); max-height: calc(100% - 20px); overflow: auto; padding: clamp(22px, 5vw, 54px); background: var(--panel); border: 1px solid #4c3849; box-shadow: var(--shadow); overscroll-behavior: contain; }
.pause-card h2, .end-card h2 { margin: 0; font: 900 clamp(2rem, 6vw, 4.5rem)/.9 Arial Black, sans-serif; letter-spacing: -.06em; }
.end-card p { margin: 0; color: var(--muted); line-height: 1.5; }
.run-report { display: flex; gap: 24px; color: var(--muted); font-size: .7rem; }
.run-report span { display: grid; gap: 4px; }
.run-report strong { color: var(--amber); }

.corner-button {
  position: absolute;
  /* Above every overlay and the full map while retaining a clear playfield edge. */
  z-index: 60;
  left: 12px;
  bottom: 10px;
  padding: 6px;
  color: rgba(240,231,220,.55);
  background: rgba(4,3,5,.55);
  border: 1px solid rgba(255,255,255,.14);
  font-size: clamp(.5rem, .9vw, .62rem);
  cursor: pointer;
}
.corner-button--right { top: 10px; right: 12px; bottom: auto; left: auto; }
.corner-button[hidden] { display: none; }
/* Bottom-left collided with the HUD's meter row and Office's control buttons.
   The top strip above the minimap (map-panel starts lower, at clamp(66px,...))
   is clear, so ADMIN sits there next to PAUSE instead. */
.developer-toggle { top: 10px; right: 70px; bottom: auto; left: auto; color: #c9a7ff; }

.room-lobby {
  z-index: 58;
  background:
    linear-gradient(115deg, rgba(3, 2, 5, .98), rgba(11, 6, 14, .92)),
    repeating-linear-gradient(90deg, rgba(102, 67, 72, .1) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(0deg, rgba(102, 67, 72, .08) 0 1px, transparent 1px 34px);
}
.room-lobby__card {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto auto auto minmax(68px, 1fr) auto auto;
  gap: clamp(8px, 1.3vw, 12px);
  width: min(94%, 760px);
  max-height: calc(100% - 24px);
  min-height: 0;
  overflow: hidden;
  padding: clamp(14px, 2.5vw, 28px);
  background: rgba(10, 6, 12, .96);
  border: 1px solid #654b60;
  box-shadow: var(--shadow);
}
.room-lobby__card > button[hidden] { display: none; }
.room-lobby__header { display: flex; align-items: start; justify-content: space-between; gap: 22px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.room-lobby__header h2 { margin: 4px 0 0; font: 900 clamp(1.8rem, 5vw, 3.5rem)/.95 Arial Black, sans-serif; letter-spacing: -.055em; }
.room-lobby__header h2 span { color: var(--red); letter-spacing: .08em; }
.room-lobby__capacity { color: var(--amber); font-size: clamp(.55rem, 1.2vw, .7rem); letter-spacing: .1em; white-space: nowrap; }
.room-lobby__route { display: grid; gap: 5px; padding: 10px 12px; background: rgba(27, 16, 28, .64); border-left: 3px solid var(--red); }
.room-lobby__route > span { color: var(--muted); font-size: .55rem; letter-spacing: .14em; }
.room-lobby__route strong { overflow: hidden; color: var(--ink); font-size: clamp(.68rem, 1.5vw, .88rem); letter-spacing: .07em; text-overflow: ellipsis; white-space: nowrap; }
.room-lobby__route small { color: #776c72; font-size: .55rem; line-height: 1.4; }
.room-lobby__settings { display: grid; gap: 7px; padding: 9px 10px; background: rgba(7, 5, 9, .72); border: 1px solid #392c38; }
.room-lobby__settings header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.room-lobby__settings header p { margin: 0; }
.room-lobby__settings header span { color: var(--amber); font-size: .5rem; letter-spacing: .09em; text-align: right; }
.room-lobby__settings[aria-busy="true"] header span { color: var(--muted); }
.room-lobby__advanced { display: grid; gap: 6px; padding: 9px 10px; background: rgba(7, 5, 9, .72); border: 1px solid #392c38; }
.room-lobby__advanced[hidden] { display: none; }
.room-lobby__advanced summary { color: var(--amber); font-size: .5rem; letter-spacing: .09em; cursor: pointer; }
.room-lobby__advanced small { color: var(--muted); font-size: .48rem; letter-spacing: .04em; }
.room-lobby__advanced .office-config-menu__toggle { margin-top: 6px; }
.room-lobby__settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; }
.room-lobby__settings-grid.is-office-mode { grid-template-columns: minmax(0, 1fr); }
.room-lobby__settings-grid label { display: grid; min-width: 0; gap: 4px; color: #81757c; font-size: .5rem; letter-spacing: .09em; }
.room-lobby__settings-grid label[hidden] { display: none; }
.room-lobby__settings-grid select {
  min-width: 0;
  width: 100%;
  padding: 7px 24px 7px 8px;
  color: var(--ink);
  background: #100b12;
  border: 1px solid #4b3948;
  border-radius: 0;
  outline: none;
  font: 700 .57rem/1.2 "Courier New", monospace;
  letter-spacing: .04em;
  cursor: pointer;
}
.room-lobby__settings-grid select:focus-visible { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(242, 187, 98, .22); }
.room-lobby__settings-grid select:disabled { color: #a99ea4; background: #0b080c; border-color: #302630; cursor: not-allowed; opacity: .78; }
.button-select__native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.button-select { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
.button-select--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
.button-select--number { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; }
.button-select button { min-width: 0; padding: 7px 5px; overflow: hidden; color: #a99ea4; background: #100b12; border: 1px solid #4b3948; border-radius: 0; font: 700 .52rem/1.1 "Courier New", monospace; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.button-select button:hover:not(:disabled), .button-select button:focus-visible { color: var(--ink); border-color: var(--amber); outline: none; box-shadow: 0 0 0 1px rgba(242, 187, 98, .22); }
.button-select button[aria-pressed="true"] { color: #190f13; background: var(--amber); border-color: #ffe0a0; box-shadow: inset 0 0 0 1px rgba(53, 24, 31, .36); }
.button-select button:disabled { color: #70666d; background: #0b080c; border-color: #302630; cursor: not-allowed; opacity: .6; }
.office-config-menu .button-select button { color: #b8c0d0; background: #171b26; border-color: #566174; font-size: .48rem; }
.office-config-menu .button-select button[aria-pressed="true"] { color: #21080e; background: #dc7185; border-color: #ffc0cc; }
.office-config-menu .button-select button:hover:not(:disabled), .office-config-menu .button-select button:focus-visible { border-color: #ffc0cc; box-shadow: 0 0 0 1px rgba(255,192,204,.25); }
.room-lobby__settings > small { color: #6f646b; font-size: .49rem; line-height: 1.35; letter-spacing: .035em; }
.room-lobby__roster { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.room-lobby__roster ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 9px 0 0; padding: 0; list-style: none; }
.room-lobby__roster li { display: flex; align-items: center; min-width: 0; gap: 8px; padding: 8px 9px; color: var(--muted); background: #0e0910; border: 1px solid #342833; font-size: .62rem; }
.room-lobby__roster li::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; background: #75c492; box-shadow: 0 0 8px rgba(117, 196, 146, .7); }
.room-lobby__roster li.is-local { color: var(--ink); border-color: #73596d; }
.room-lobby__roster li.is-host::before { background: var(--amber); box-shadow: 0 0 8px rgba(242, 187, 98, .72); }
.room-lobby__roster li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-lobby__roster li b { margin-left: auto; color: #796d74; font-size: .5rem; font-weight: 400; letter-spacing: .06em; white-space: nowrap; }
.room-lobby__feedback { min-height: 1.2em; margin: 0; color: var(--muted); font-size: .58rem; letter-spacing: .06em; }
.room-lobby__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.room-lobby__actions button[hidden] { display: none; }
.room-lobby__actions .primary-button:disabled { filter: saturate(.35); cursor: not-allowed; opacity: .58; }

.command-console {
  position: absolute;
  z-index: 90;
  left: clamp(8px, 2vw, 20px);
  right: clamp(8px, 2vw, 20px);
  top: clamp(8px, 2vw, 20px);
  display: grid;
  gap: 8px;
  max-height: calc(100% - clamp(16px, 4vw, 40px));
  padding: 10px;
  color: #a7d799;
  background: rgba(2, 7, 4, .975);
  border: 1px solid #587052;
  box-shadow: 0 18px 65px rgba(0, 0, 0, .86), inset 0 0 42px rgba(77, 121, 68, .05);
  font-size: clamp(.55rem, 1.05vw, .69rem);
}
.command-console[hidden] { display: none; }
.command-console header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 7px; border-bottom: 1px solid rgba(167, 215, 153, .24); letter-spacing: .12em; }
.command-console header > div { display: flex; align-items: center; gap: 8px; }
.command-console header button { padding: 0 4px; color: #a7d799; background: transparent; border: 0; cursor: pointer; font-size: 1rem; }
.command-console__lamp { width: 7px; height: 7px; background: var(--red); box-shadow: 0 0 9px rgba(230, 68, 81, .9); }
.command-console.is-authenticated .command-console__lamp { background: #75c492; box-shadow: 0 0 9px rgba(117, 196, 146, .9); }
.command-console pre { min-height: 62px; max-height: min(32vh, 190px); margin: 0; padding: 8px; overflow: auto; color: #8fb584; background: #010302; border: 1px solid #263424; font: inherit; line-height: 1.5; white-space: pre-wrap; }
.command-console form { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.command-console label { color: #75c492; letter-spacing: .06em; white-space: nowrap; }
.command-console input { min-width: 0; width: 100%; padding: 7px 8px; color: #d8ead3; background: #050a06; border: 1px solid #40533d; outline: none; }
.command-console input:focus { border-color: #8fb584; box-shadow: 0 0 0 1px rgba(143, 181, 132, .18); }
.command-console form button { padding: 7px 9px; color: #c7d6c3; background: #101a11; border: 1px solid #40533d; cursor: pointer; font-size: .56rem; }
.command-console form button:disabled { opacity: .45; cursor: wait; }
.command-console > small { color: #52604f; font-size: .5rem; letter-spacing: .08em; }

/* ADMIN mode panel — purple, distinct from the green DEBUG surface. */
.developer-panel {
  position: absolute;
  z-index: 66;
  inset: 0;
  display: grid;
  gap: 7px;
  width: auto;
  max-height: none;
  overflow: auto;
  padding: clamp(12px, 2vw, 24px);
  color: #d8cce8;
  background: rgba(12, 6, 20, .95);
  border: 1px solid #6a4f8f;
  box-shadow: 0 12px 42px #000;
  font-size: .58rem;
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1180px);
  align-content: start;
  justify-content: center;
}
.developer-panel[hidden] { display: none; }
.developer-panel header { width: 100%; display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; color: #c9a7ff; border-bottom: 1px solid rgba(201,167,255,.28); letter-spacing: .1em; }
.developer-panel header button { padding: 0 3px; color: #c9a7ff; background: transparent; border: 0; cursor: pointer; font-size: 1rem; }
.developer-panel label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.developer-panel input { accent-color: #b184e0; }
.developer-panel__dashboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; }
.developer-panel__category { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 10px; background: rgba(26, 16, 38, .66); border: 1px solid #4a3866; }
.developer-panel__category > strong { padding-bottom: 6px; color: #c9a7ff; border-bottom: 1px solid rgba(201,167,255,.22); letter-spacing: .1em; }
.developer-panel__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.developer-panel__actions button { min-height: 30px; padding: 6px 10px; color: #d8cce8; background: #1a1026; border: 1px solid #4a3866; cursor: pointer; font-size: .54rem; }
.developer-panel__actions button:hover { border-color: #b184e0; }
.developer-panel__summon { display: grid; gap: 5px; padding: 6px; border: 1px solid #4a3866; background: rgba(26, 16, 38, .6); }
.developer-panel__summon > strong { color: #c9a7ff; letter-spacing: .1em; }
.developer-panel__summon-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; align-items: center; }
.developer-panel__summon select,.developer-panel__summon-row select { min-width: 0; padding: 6px; color: #d8cce8; background: #1a1026; border: 1px solid #4a3866; font-size: .54rem; }
.developer-panel__summon-row button { padding: 5px 8px; color: #d8cce8; background: #1a1026; border: 1px solid #4a3866; cursor: pointer; font-size: .54rem; }
.developer-panel__summon-row button:hover { border-color: #b184e0; }
.route-debug-tools { display: grid; gap: 6px; }
.route-debug-tools[hidden] { display: none; }
.route-debug-tools > strong { color: #c9a7ff; letter-spacing: .1em; }
.office-debug-tools { display: grid; gap: 6px; padding: 7px; border: 1px solid #644568; background: rgba(33,12,37,.6); }
.office-debug-tools[hidden] { display: none; }
.office-debug-tools > strong { color: #e7a4ed; letter-spacing: .1em; }.office-debug-tools label { display: grid; grid-template-columns: 64px 1fr 30px; gap: 5px; align-items: center; font-size: .52rem; }.office-debug-tools select,.office-debug-tools input { min-width: 0; accent-color: #d37ce1; color: #e8d8ed; background: #1a1026; border: 1px solid #4a3866; }.office-debug-tools output { text-align: right; }
.developer-panel pre { min-height: 70px; margin: 0; padding: 7px; overflow: auto; color: #b184e0; background: #06030c; border: 1px solid #2c2140; font: .52rem/1.5 "Courier New", monospace; white-space: pre-wrap; }

@media (max-width: 900px) {
  .developer-panel__dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .developer-panel { padding: 8px; }
  .developer-panel__dashboard { grid-template-columns: minmax(0, 1fr); }
}

.mobile-controls { position: absolute; z-index: 70; inset: auto max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); display: flex; justify-content: space-between; align-items: end; pointer-events: none; }
.mobile-controls[hidden] { display: none; }
.mobile-controls button { width: 50px; height: 50px; color: rgba(255,255,255,.78); background: rgba(11,7,12,.66); border: 1px solid rgba(255,255,255,.18); touch-action: none; pointer-events: auto; }
.dpad { display: grid; grid-template-columns: repeat(3, 50px); grid-template-rows: repeat(2, 50px); gap: 3px; }
.dpad button[data-control="up"] { grid-column: 2; }
.dpad button[data-control="left"] { grid-row: 2; grid-column: 1; }
.dpad button[data-control="down"] { grid-row: 2; grid-column: 2; }
.dpad button[data-control="right"] { grid-row: 2; grid-column: 3; }
.action-pad { display: grid; grid-template-columns: repeat(2, 50px); gap: 5px; }
.action-pad button { border-radius: 50%; font-size: .58rem; }
.mobile-controls button:active { color: #fff; background: rgba(127, 41, 57, .82); border-color: var(--red); }

@keyframes toast {
  0% { opacity: 0; transform: translate(-50%, 6px); }
  12%, 74% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -5px); }
}

/* A phone gets a full-bleed interaction surface. A short desktop browser does
   not: it keeps the correctly proportioned framed view instead of being
   mistaken for a portrait touchscreen just because its height is small. */
@media (max-width: 700px), (max-aspect-ratio: 3 / 4) {
  .game-shell { padding: 0; }
  /* The frame goes edge to edge on a phone, but the playfield must keep its 16:9
     shape: stretching the 480x270 backbuffer to a portrait screen squashed the
     game by nearly 4x. Letterboxing inside the full-bleed frame keeps the art
     correct in both orientations, and screenToWorld() maps pointer input through
     the same contain box so click-to-move stays accurate. */
  .game-frame { width: 100vw; max-height: none; height: 100dvh; min-height: 100svh; aspect-ratio: auto; border: 0; box-shadow: none; }
  #game-canvas { object-fit: contain; }
  .overlay { overflow: hidden; }
  .title-layout { grid-template-columns: minmax(0, 1fr); align-items: center; }
  .title-copy h1 { font-size: clamp(2.2rem, 12vw, 4.8rem); }
  .title-copy { min-width: 0; }
  .seed-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .seed-control label { grid-column: 1 / -1; }
  .seed-control input { width: 100%; }
  .room-connect__fields { grid-template-columns: minmax(0, 1fr); }
  .field-controls p { display: none; }
  .hunter-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hunter-specs article { grid-template-columns: 26px minmax(0, 1fr); }
  .hunter-specs img { width: 26px; height: 26px; }
  .map-panel { transform: scale(.8); transform-origin: top right; }
  .developer-panel { inset: 0; max-height: none; }
  .room-lobby__roster ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-top: 5px; }
  .room-lobby__roster li { padding: 5px 6px; font-size: .52rem; }
  .command-console form { grid-template-columns: minmax(0, 1fr) auto; }
  .command-console label { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .room-lobby__settings-grid { grid-template-columns: minmax(0, 1fr); }
  .room-lobby__settings-grid label { grid-template-columns: 90px minmax(0, 1fr); align-items: center; }
  .room-lobby__card { max-height: calc(100% - 12px); padding: 12px; }
}

@media (min-width: 701px) and (max-height: 540px) {
  :root { --shell-gutter: 8px; --frame-safe-width: calc(100vw - 16px); --frame-safe-height: calc(100dvh - 16px); }
  .room-lobby__card { gap: 6px; max-height: calc(100% - 12px); padding: 10px 14px; }
  .room-lobby__route small { display: none; }
}

@media (max-width: 380px), (max-height: 410px) {
  .office-survivor__header .overline { display: none; }
  .office-survivor__header strong { font-size: .9rem; }
  .office-survivor__header .office-event { display: none; }
  .office-camera-map { transform: scale(.82); transform-origin: bottom right; }
}

@media (pointer: coarse) {
  .mobile-controls:not([hidden]) { display: flex; }
  .interaction-prompt { bottom: 24%; }
  .corner-button { bottom: auto; top: 8px; }
  .developer-toggle { top: 8px; right: 66px; }

  /* Touch play owns the bottom corners with the d-pad / action pad, so the HUD
     returns to the top edge rather than fighting them (desktop keeps it bottom). */
  .hud { inset: 0 0 auto; align-items: flex-start; }
  .hud::before { inset: 0 0 auto; background: linear-gradient(to bottom, rgba(3, 2, 5, .74), rgba(3, 2, 5, 0)); }
  .hud__objective, .hud__radar { align-content: start; }

  /* Fingers need roughly 44px. Several controls render far smaller than that at
     their text size (FIELD NOTES was 13px tall), so give every interactive
     control a floor on touch devices without changing the desktop layout. */
  button, select, .text-button, .seed-control button {
    min-height: 44px;
  }
  .full-map-zoom button {
    min-width: 44px;
  }
  /* The d-pad and action pad set their own deliberate square footprint. */
  .mobile-controls button { min-width: 0; min-height: 0; }
}

.is-mobile-player .mobile-controls:not([hidden]) { display: flex; }
.is-mobile-player .interaction-prompt { bottom: 24%; }
.is-mobile-player .hud { inset: 0 0 auto; align-items: flex-start; }
.is-mobile-player .hud::before { inset: 0 0 auto; background: linear-gradient(to bottom, rgba(3, 2, 5, .74), rgba(3, 2, 5, 0)); }
.is-mobile-player .hud__objective, .is-mobile-player .hud__radar { align-content: start; }

/* Mirrors the pointer:coarse floor above for devices the runtime identified as
   touch even when the media query does not match. */
.is-mobile-player button,
.is-mobile-player select,
.is-mobile-player .text-button { min-height: 44px; }
.is-mobile-player .full-map-zoom button { min-width: 44px; }
.is-mobile-player .mobile-controls button { min-width: 0; min-height: 0; }

/* Mobile runtime layout ----------------------------------------------------
   The touch UI belongs to the game frame, not the browser page. Keep the game
   full-bleed, reserve the center for play, and let menu content scroll inside
   the safe-area rather than clipping at either phone orientation. */
.is-mobile-player .game-shell { padding: 0; }
.is-mobile-player .game-frame {
  width: 100vw;
  height: 100dvh;
  min-height: 100svh;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
  box-shadow: none;
}
.is-mobile-player #game-canvas { object-fit: contain; }

.is-mobile-player #title-screen {
  place-items: start center;
  overflow-x: hidden;
  overflow-y: auto;
  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));
  overscroll-behavior: contain;
}
.is-mobile-player .title-layout {
  width: min(100%, 760px);
  min-height: 100%;
  align-items: center;
  padding-block: clamp(10px, 5dvh, 42px);
}
.is-mobile-player .title-copy { width: 100%; min-width: 0; }
.is-mobile-player .title-copy h1 {
  margin: .12em 0 .18em;
  font-size: clamp(2rem, 8.5vw, 4.8rem);
  line-height: .78;
}
.is-mobile-player .lede { margin-bottom: 10px; font-size: clamp(.61rem, 1.8vw, .78rem); line-height: 1.42; }
.is-mobile-player .route-notice { max-width: 620px; margin: 0 0 10px; font-size: .52rem; }
.is-mobile-player .title-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
.is-mobile-player .title-actions > button { width: 100%; min-width: 0; min-height: 44px; padding: 9px 8px; }

.is-mobile-player .menu-overlay {
  place-items: stretch;
  padding:
    max(6px, env(safe-area-inset-top))
    max(6px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom))
    max(6px, env(safe-area-inset-left));
}
.is-mobile-player .menu-overlay__panel {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: clamp(9px, 2.2vw, 16px);
}
.is-mobile-player .settings-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; }
.is-mobile-player .settings-tab { flex: 1 0 auto; min-height: 40px; }

.is-mobile-player .hud {
  inset: max(3px, env(safe-area-inset-top)) 0 auto;
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(260px, 2.4fr) minmax(100px, 1fr);
  align-items: start;
  gap: 5px;
  padding: 4px max(7px, env(safe-area-inset-right)) 5px max(7px, env(safe-area-inset-left));
}
.is-mobile-player .hud::before { height: 150%; }
.is-mobile-player .hud__objective, .is-mobile-player .hud__radar { min-width: 0; }
.is-mobile-player .hud .hud__loadout { min-width: 0; gap: 3px; }
.is-mobile-player .hud__meters { flex-wrap: nowrap; gap: 3px; width: 100%; }
.is-mobile-player .hud__meter { min-width: 0; flex: 1 1 0; }
.is-mobile-player .hud__meter .battery { width: 100%; min-width: 34px; height: 5px; }
.is-mobile-player .hud strong { font-size: clamp(.52rem, 1.7vw, .72rem); line-height: 1.12; }
.is-mobile-player .hud .overline { font-size: clamp(.42rem, 1.25vw, .55rem); letter-spacing: .11em; }
.is-mobile-player .hud__caption { font-size: clamp(.39rem, 1.15vw, .5rem); white-space: nowrap; }
.is-mobile-player .hotbar-slot { width: 23px; height: 23px; }
.is-mobile-player .hotbar-slot__glyph { font-size: .72rem; }
.is-mobile-player .hotbar-hint { display: none; }
.is-mobile-player .hotbar-coins { margin-left: 2px; font-size: .52rem; }
.is-mobile-player .threat-pips i { width: 11px; height: 3px; }

.is-mobile-player .map-panel {
  top: max(58px, calc(env(safe-area-inset-top) + 52px));
  right: max(6px, env(safe-area-inset-right));
  width: 94px;
  padding: 4px;
  transform: none;
}
.is-mobile-player #map-canvas { width: 84px; height: 84px; }
.is-mobile-player .map-panel__head { margin-bottom: 2px; font-size: 7px; }

.is-mobile-player .mobile-controls {
  --touch-size: clamp(42px, 11dvh, 54px);
  inset: auto max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  align-items: end;
  gap: 10px;
}
.is-mobile-player .mobile-controls button {
  width: var(--touch-size);
  height: var(--touch-size);
  border-color: rgba(255,255,255,.26);
  background: rgba(8,5,10,.76);
  box-shadow: 0 3px 12px rgba(0,0,0,.38);
  font-size: clamp(.42rem, 1.25vw, .56rem);
}
.is-mobile-player .dpad {
  grid-template-columns: repeat(3, var(--touch-size));
  grid-template-rows: repeat(2, var(--touch-size));
  gap: 3px;
}
.is-mobile-player .action-pad {
  grid-template-columns: repeat(4, var(--touch-size));
  grid-template-rows: repeat(2, var(--touch-size));
  gap: 3px;
}
.is-mobile-player .interaction-prompt { bottom: calc(var(--touch-size, 44px) * 2 + 18px); }

.is-mobile-player .full-map-overlay {
  padding:
    max(7px, env(safe-area-inset-top))
    max(7px, env(safe-area-inset-right))
    max(7px, env(safe-area-inset-bottom))
    max(7px, env(safe-area-inset-left));
}
.is-mobile-player .full-map-overlay__header { gap: 8px; }
.is-mobile-player .full-map-overlay__header .overline, .is-mobile-player .full-map-legend { display: none; }
.is-mobile-player .full-map-overlay__actions { gap: 5px; }

@media (max-width: 520px) {
  .is-mobile-player .title-layout { align-items: start; padding-block: clamp(18px, 8dvh, 60px); }
  .is-mobile-player .title-copy h1 { font-size: clamp(2.35rem, 13.5vw, 4rem); }
  .is-mobile-player .title-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-mobile-player #quit-button { grid-column: 1 / -1; }
  .is-mobile-player .settings-row { align-items: stretch; flex-direction: column; }
  .is-mobile-player .settings-row__control { width: 100%; justify-content: space-between; }
  .is-mobile-player .settings-row input[type="range"] { flex: 1; width: auto; }
  .is-mobile-player .hud {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .is-mobile-player .hud .hud__loadout { grid-column: 1 / -1; grid-row: 1; }
  .is-mobile-player .hud__objective { grid-column: 1; grid-row: 2; }
  .is-mobile-player .hud__radar { grid-column: 2; grid-row: 2; }
  .is-mobile-player .map-panel { top: max(92px, calc(env(safe-area-inset-top) + 86px)); }
  .is-mobile-player .mobile-controls { --touch-size: clamp(40px, 10.5vw, 46px); gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}