:root {
  --bg: #0b0b0c;
  --panel: rgba(14, 14, 16, 0.92);
  --line: rgba(255, 255, 255, 0.1);
  --text: #e8e4dc;
  --muted: #9a958c;
  --red: #c2201c;
  --red-bright: #ff3b30;
  --amber: #e8a83a;
  --green: #5fbf6a;
  --font-display: "Oswald", "Impact", "Arial Narrow", sans-serif;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; cursor: crosshair; touch-action: none; }
[hidden] { display: none !important; }
button { font: inherit; }

/* ------------------------------------------------------------------ menus */
#menus { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px; pointer-events: auto; overflow-y: auto;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.82));
}
#menu-main { align-items: flex-start; justify-content: center; padding: 5vh 7vw 8vh; background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0) 75%); }
.title-block { max-width: 640px; }
.kicker { font-family: var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-size: 13px; margin: 0 0 8px; }
.title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; line-height: 0.9; }
.title.big { font-size: clamp(48px, min(9vw, 15vh), 128px); color: #f2eee6; text-shadow: 0 0 40px rgba(194, 32, 28, 0.35); }
.title.big::after { content: ""; display: block; width: 120px; height: 4px; background: var(--red); margin-top: 18px; }
.tag { font-size: 17px; color: #cfc9be; margin: 16px 0 22px; max-width: 520px; line-height: 1.5; }
.main-nav { display: flex; flex-direction: column; gap: 8px; width: min(320px, 100%); }
.foot { position: absolute; bottom: 20px; left: 7vw; right: 16px; color: var(--muted); font-size: 13px; }
.rating, .rating-sm {
  display: inline-grid; place-items: center; background: var(--red); color: #fff; font-family: var(--font-display); font-weight: 700;
  border-radius: 4px;
}
.rating { width: 54px; height: 54px; font-size: 28px; margin: 0 0 16px; }
.rating-sm { width: 22px; height: 22px; font-size: 13px; margin-left: 6px; vertical-align: middle; }

.btn {
  appearance: none; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--text);
  padding: 12px 18px; border-radius: 3px; text-align: left; cursor: pointer; font-family: var(--font-display);
  font-size: 17px; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.btn:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn.primary:hover { background: #d82a25; }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 28px; width: min(640px, 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); backdrop-filter: blur(6px);
}
.panel.narrow { width: min(440px, 100%); }
.panel.wide { width: min(980px, 100%); }
.panel h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-size: 34px; margin: 0 0 16px; }
.panel h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px; color: var(--muted); margin: 22px 0 8px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.missions { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.mission {
  display: flex; align-items: center; gap: 16px; padding: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03);
  color: var(--text); border-radius: 4px; cursor: pointer; text-align: left;
}
.mission:hover:not(.locked) { border-color: var(--red); background: rgba(194, 32, 28, 0.08); }
.mission.locked { opacity: 0.4; cursor: not-allowed; }
.m-num { font-family: var(--font-display); font-size: 30px; color: var(--red); width: 44px; }
.m-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.m-body b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 19px; font-weight: 600; }
.m-body small { color: var(--muted); }
.m-best { color: var(--green) !important; }
.m-lock { font-family: var(--font-display); text-transform: uppercase; font-size: 13px; letter-spacing: 0.12em; color: var(--muted); }

.chars { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 16px 0 20px; }
.char { border: 1px solid var(--line); border-radius: 4px; padding: 14px; background: rgba(255, 255, 255, 0.03); }
.char h3 { margin: 0 0 6px; color: var(--text); font-size: 22px; }
.char h3 small { color: var(--muted); font-size: 13px; letter-spacing: 0.06em; display: block; }
.char .perk { color: var(--amber); font-size: 13px; line-height: 1.4; }
.char ul { padding-left: 16px; margin: 8px 0; font-size: 13px; color: #cfc9be; line-height: 1.5; }
.char .stats { font-size: 12px; color: var(--muted); margin: 0; }

.keys { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0 0 22px; font-size: 14px; }
.keys dt { font-family: var(--font-display); letter-spacing: 0.06em; color: var(--amber); text-transform: uppercase; }
.keys dd { margin: 0; color: #cfc9be; }

.settings { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.settings label { display: grid; grid-template-columns: 170px 1fr 56px; align-items: center; gap: 12px; font-size: 14px; }
.settings label.check { grid-template-columns: auto 1fr; }
.settings select { grid-column: 2 / 4; background: #1a1a1c; color: var(--text); border: 1px solid var(--line); padding: 7px; border-radius: 3px; font: inherit; }
.settings input[type="range"] { accent-color: var(--red); width: 100%; }
.settings output { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.settings input[type="checkbox"] { accent-color: var(--red); width: 18px; height: 18px; }

.brief h2 { font-size: 48px; margin-bottom: 4px; }
.place { color: var(--amber); font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 18px; }
.brief-text p { line-height: 1.65; color: #d6d0c4; margin: 0 0 12px; }
.objectives { margin: 0; padding-left: 18px; line-height: 1.8; }
.objectives li::marker { color: var(--red); }

#result-title { font-size: 52px; }
#result-title.won { color: #f2eee6; }
#result-title.lost { color: var(--red-bright); }
.result-text { line-height: 1.6; color: #d6d0c4; }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.result-stats div { border: 1px solid var(--line); border-radius: 4px; padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.result-stats b { font-family: var(--font-display); font-size: 24px; }
.result-stats span { font-size: 12px; color: var(--muted); }
.result-stats .fam-result b { font-size: 17px; }
.result-stats .fam-result.dead { border-color: var(--red); }
.result-stats .fam-result.dead b { color: var(--red-bright); }

/* -------------------------------------------------------------------- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; font-family: var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.hud-top { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.objective { display: flex; flex-direction: column; align-items: center; }
#obj-title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 15px; color: var(--amber); }
#obj-text { font-size: 14px; color: #ddd7cc; max-width: 70vw; }
.timer { font-family: var(--font-display); font-size: 30px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }

.overrun { position: absolute; top: 108px; left: 50%; transform: translateX(-50%); width: 260px; text-align: center; animation: pulse 0.8s infinite alternate; }
.overrun span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; color: var(--red-bright); font-size: 13px; }
.bar { height: 5px; background: rgba(255, 255, 255, 0.12); margin-top: 4px; border-radius: 3px; overflow: hidden; }
.bar > div { height: 100%; width: 0; background: var(--red-bright); }
@keyframes pulse { from { opacity: 0.7; } to { opacity: 1; } }

.crosshair { --gap: 10px; position: absolute; left: 50%; top: 50%; width: 0; height: 0; transition: opacity 0.12s; }
.crosshair i { position: absolute; background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 2px rgba(0, 0, 0, 0.9); }
.crosshair i:nth-child(1) { width: 2px; height: 9px; left: -1px; top: calc(-1 * var(--gap) - 9px); }
.crosshair i:nth-child(2) { width: 2px; height: 9px; left: -1px; top: var(--gap); }
.crosshair i:nth-child(3) { height: 2px; width: 9px; top: -1px; left: calc(-1 * var(--gap) - 9px); }
.crosshair i:nth-child(4) { height: 2px; width: 9px; top: -1px; left: var(--gap); }
.crosshair b { position: absolute; width: 2px; height: 2px; left: -1px; top: -1px; background: rgba(255, 255, 255, 0.7); }

.hitmarker { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; opacity: 0; }
.hitmarker::before, .hitmarker::after { content: ""; position: absolute; left: 10px; top: -2px; width: 2px; height: 26px; background: #fff; transform: rotate(45deg); clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%, 0 65%, 100% 65%, 100% 100%, 0 100%); }
.hitmarker::after { transform: rotate(-45deg); }
.hitmarker.show { opacity: 1; }
.hitmarker.kill::before, .hitmarker.kill::after { background: var(--red-bright); }
.hitmarker.head { transform: scale(1.3); }

.dmg-dir { position: absolute; left: 50%; top: 50%; }
.dmg-dir .dir { position: absolute; left: -60px; top: -170px; width: 120px; height: 40px; transform-origin: 60px 170px; animation: fadeout 1.2s forwards; }
.dmg-dir .dir::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center bottom, rgba(220, 20, 20, 0.85), rgba(220, 20, 20, 0) 70%); }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }

.scope { position: absolute; inset: 0; }
.scope-ring {
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) calc(min(44vh, 44vw) - 18px), rgba(0, 0, 0, 0.6) calc(min(44vh, 44vw) - 6px), #000 min(44vh, 44vw));
}
.reticle { position: absolute; left: 50%; top: 50%; width: calc(2 * min(44vh, 44vw)); height: calc(2 * min(44vh, 44vw)); transform: translate(-50%, -50%); }
.reticle svg { width: 100%; height: 100%; display: block; }
.zoom-level { position: absolute; right: calc(50% - min(44vh, 44vw) + 30px); bottom: calc(50% - min(44vh, 44vw) + 30px); font-family: var(--font-display); color: #bbb; font-size: 14px; }
.breath { position: absolute; left: 50%; bottom: 10vh; transform: translateX(-50%); width: 200px; text-align: center; font-size: 12px; color: #aaa; }
.breath .bar > div { background: #9ecbff; }

.feed { position: absolute; left: 24px; top: 24px; display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.feed-item { background: rgba(0, 0, 0, 0.55); border-left: 3px solid var(--muted); padding: 6px 10px; font-size: 14px; transition: opacity 0.8s; }
.feed-item.bad { border-color: var(--red-bright); }
.feed-item.good { border-color: var(--green); }
.feed-item.hint { border-color: var(--amber); }
.feed-item.order, .feed-item.switch { border-color: #9ecbff; }
.feed-item.out { opacity: 0; }

.prompt { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); margin: 0; padding: 6px 14px; background: rgba(0, 0, 0, 0.6); border-radius: 3px; font-size: 15px; }
.progress { position: absolute; left: 50%; top: calc(58% + 40px); transform: translateX(-50%); width: 220px; height: 5px; background: rgba(255, 255, 255, 0.15); border-radius: 3px; overflow: hidden; }
#progress-bar { height: 100%; width: 0; background: var(--amber); }

.family { position: absolute; left: 20px; bottom: 20px; display: flex; gap: 8px; }
.fam { width: 150px; padding: 8px 10px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 4px; transition: border-color 0.2s, transform 0.2s; }
.fam.active { border-color: rgba(255, 255, 255, 0.55); transform: translateY(-6px); background: rgba(20, 20, 22, 0.75); }
.fam.hurt .fam-hp-bar { background: var(--amber); }
.fam.down { border-color: var(--red-bright); animation: pulse 0.5s infinite alternate; }
.fam.dead { opacity: 0.4; }
.fam-top { display: flex; align-items: baseline; gap: 6px; }
.fam-key { font-family: var(--font-display); font-size: 11px; color: var(--muted); border: 1px solid var(--line); padding: 0 4px; border-radius: 2px; }
.fam-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 16px; }
.fam-state { margin-left: auto; font-size: 10px; letter-spacing: 0.08em; color: var(--amber); font-weight: 600; }
.fam.down .fam-state { color: var(--red-bright); }
.fam-role { font-size: 11px; color: var(--muted); }
.fam-hp { height: 4px; background: rgba(255, 255, 255, 0.12); margin: 6px 0 4px; border-radius: 2px; overflow: hidden; }
.fam-hp-bar { height: 100%; width: 100%; background: var(--green); transition: width 0.2s; }
.fam-sub { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); gap: 4px; }

.weapon { position: absolute; right: 24px; bottom: 22px; text-align: right; min-width: 240px; }
.w-name { display: flex; flex-direction: column; }
#w-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 18px; }
#w-detail { font-size: 12px; color: var(--muted); }
.ammo { font-family: var(--font-display); margin-top: 2px; }
.ammo b { font-size: 46px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ammo span { font-size: 20px; color: var(--muted); margin-left: 6px; }
.ammo.low b { color: var(--red-bright); }
.w-sub { display: flex; gap: 12px; justify-content: flex-end; font-size: 11px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; flex-wrap: wrap; }
#w-mode { color: var(--amber); }
.stamina { height: 3px; background: rgba(255, 255, 255, 0.1); margin-top: 8px; border-radius: 2px; overflow: hidden; transition: opacity 0.4s; }
#stamina-bar { height: 100%; background: #d8d2c4; }

.banner { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -10px); text-align: center; opacity: 0; transition: opacity 0.6s, transform 0.6s; }
.banner.show { opacity: 1; transform: translate(-50%, 0); }
.banner h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(36px, 6vw, 64px); letter-spacing: 0.04em; margin: 0; }
.banner p { margin: 6px 0 0; color: #d6d0c4; font-size: 16px; }

.damage { position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: 0; background: radial-gradient(ellipse at center, rgba(120, 0, 0, 0) 40%, rgba(140, 0, 0, 0.55) 80%, rgba(90, 0, 0, 0.85) 100%); }
.lowhp { position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: 0; background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(60, 0, 0, 0.6) 75%, rgba(20, 0, 0, 0.95) 100%); filter: saturate(0.4); }
.grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 8; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.6s steps(4) infinite;
}
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
.fade { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 15; transition: opacity 0.18s; }
.fade.on { opacity: 1; transition: none; }

.boot-error { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--bg); }
.boot-error code { color: var(--red-bright); max-width: 600px; }

@media (max-width: 760px) {
  .family { transform: scale(0.75); transform-origin: left bottom; }
  .weapon { transform: scale(0.8); transform-origin: right bottom; }
  .result-stats { grid-template-columns: repeat(2, 1fr); }
  .settings label { grid-template-columns: 1fr; }
  .settings select { grid-column: auto; }
}

/* ============================================================ touch / mobile */
.touch-only { display: none; }
body.touch .touch-only { display: grid; }
body.touch p.touch-only { display: block; }
body.touch .desktop-only { display: none !important; }

.touch-layer {
  --ts: 0.78; --to: 0.55; --u: calc(var(--ts) * 1px);
  position: fixed; inset: 0; z-index: 12; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.t-stick-zone { position: absolute; left: 0; top: 18%; bottom: 0; width: 42%; }
.t-look-zone { position: absolute; right: 0; top: 0; bottom: 0; left: 42%; }
.t-stick { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: calc(var(--to) + 0.2); }
.t-stick::before {
  content: ""; position: absolute; width: calc(112 * var(--u)); height: calc(112 * var(--u)); left: calc(-56 * var(--u)); top: calc(-56 * var(--u)); border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25); background: rgba(0, 0, 0, 0.12);
}
.t-knob { position: absolute; left: 0; top: 0; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.3); border: 1.5px solid rgba(255, 255, 255, 0.5); }

.t-btn {
  --s: 42;
  position: absolute; display: grid; place-items: center; width: calc(var(--s) * var(--u)); height: calc(var(--s) * var(--u)); border-radius: 50%;
  border: 1.2px solid rgba(255, 255, 255, 0.28); background: rgba(10, 10, 12, 0.32); color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-display); font-size: calc(10 * var(--u)); letter-spacing: 0.05em; padding: 0; touch-action: none;
  -webkit-tap-highlight-color: transparent; opacity: var(--to); transition: opacity 0.1s, transform 0.08s;
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.t-btn svg { width: 50%; height: 50%; pointer-events: none; }
.t-btn span { pointer-events: none; }
.t-btn:active, .t-btn.on { transform: scale(0.94); }
.t-btn.on { background: rgba(194, 32, 28, 0.55); border-color: rgba(255, 120, 110, 0.9); color: #fff; opacity: 1; }
.t-btn[hidden] { display: none; }
/* Right thumb: one big FIRE, everything else in a tight arc around it */
.t-fire { --s: 76; right: calc(22 * var(--u) + env(safe-area-inset-right)); bottom: calc(34 * var(--u)); background: rgba(194, 32, 28, 0.3); border-color: rgba(255, 90, 80, 0.65); }
.t-aim { --s: 54; right: calc(108 * var(--u) + env(safe-area-inset-right)); bottom: calc(66 * var(--u)); }
.t-reload { right: calc(112 * var(--u) + env(safe-area-inset-right)); bottom: calc(10 * var(--u)); }
.t-crouch { right: calc(164 * var(--u) + env(safe-area-inset-right)); bottom: calc(14 * var(--u)); }
.t-swap { --s: 38; right: calc(170 * var(--u) + env(safe-area-inset-right)); bottom: calc(70 * var(--u)); }
.t-jump { right: calc(36 * var(--u) + env(safe-area-inset-right)); bottom: calc(122 * var(--u)); }
.t-melee { right: calc(96 * var(--u) + env(safe-area-inset-right)); bottom: calc(128 * var(--u)); }
/* Context buttons: only there when they do something */
.t-use { --s: 52; right: calc(170 * var(--u) + env(safe-area-inset-right)); bottom: calc(128 * var(--u)); border-color: rgba(232, 168, 58, 0.8); color: #f3c26a; opacity: 0.95; flex-direction: column; }
.t-use span { font-size: calc(8 * var(--u)); margin-top: -4px; }
.t-use svg { width: 46%; height: 46%; }
.t-heal { --s: 40; right: calc(222 * var(--u) + env(safe-area-inset-right)); bottom: calc(18 * var(--u)); border-color: rgba(120, 220, 130, 0.7); color: #9be3a2; }
.t-breath { --s: 46; right: calc(36 * var(--u) + env(safe-area-inset-right)); bottom: calc(120 * var(--u)); border-color: rgba(158, 203, 255, 0.8); color: #bcdcff; opacity: 0.95; }
.t-breath span { display: none; }
.t-zoomin, .t-zoomout { --s: 38; font-size: calc(20 * var(--u)); }
.t-zoomin { right: calc(22 * var(--u) + env(safe-area-inset-right)); top: 30%; }
.t-zoomout { right: calc(22 * var(--u) + env(safe-area-inset-right)); top: calc(30% + 46 * var(--u)); }
.t-start { left: 50%; transform: translateX(-50%); bottom: calc(118px + env(safe-area-inset-bottom)); width: auto; height: calc(36 * var(--u)); padding: 0 16px; border-radius: 20px; font-size: calc(12 * var(--u)); border-color: rgba(232, 168, 58, 0.8); color: #f3c26a; opacity: 0.95; }
/* Top-right utility row */
.t-pause, .t-orders, .t-torch { --s: 34; top: calc(8px + env(safe-area-inset-top)); }
.t-pause { right: calc(10px + env(safe-area-inset-right)); }
.t-torch { right: calc(10px + 42 * var(--u) + env(safe-area-inset-right)); }
.t-orders { right: calc(10px + 84 * var(--u) + env(safe-area-inset-right)); }

/* HUD rearranged around the thumbs */
body.touch #hud { z-index: 11; }
body.touch .family { left: calc(10px + env(safe-area-inset-left)); top: calc(8px + env(safe-area-inset-top)); bottom: auto; transform: none; gap: 4px; }
body.touch .fam { width: 70px; padding: 4px 6px; pointer-events: auto; touch-action: none; }
body.touch .fam.active { transform: translateY(3px); }
body.touch .fam-role, body.touch .fam-sub, body.touch .fam-key { display: none; }
body.touch .fam-name { font-size: 11px; }
body.touch .fam:not(.active) { opacity: 0.75; }
body.touch .fam-state { font-size: 8px; }
body.touch .weapon { pointer-events: auto; right: auto; left: 50%; bottom: calc(6px + env(safe-area-inset-bottom)); transform: translateX(-50%); min-width: 0; text-align: center; }
body.touch .w-name { flex-direction: row; gap: 8px; justify-content: center; align-items: baseline; }
body.touch #w-name { font-size: 13px; }
body.touch #w-detail, body.touch .w-sub #flashlight-ind { display: none; }
body.touch .ammo { display: inline-block; }
body.touch .ammo b { font-size: 26px; }
body.touch .ammo span { font-size: 14px; }
body.touch .w-sub { justify-content: center; font-size: 9px; }
body.touch .hud-top { top: calc(50px + env(safe-area-inset-top)); }
body.touch #obj-text { font-size: 12px; max-width: 46vw; }
body.touch .timer { font-size: 22px; }
body.touch .feed { top: auto; bottom: 44%; left: calc(12px + env(safe-area-inset-left)); max-width: 40vw; }
body.touch .feed-item { font-size: 12px; padding: 4px 8px; }
body.touch .prompt { top: 40%; font-size: 13px; }
body.touch .progress { top: calc(40% + 34px); }
body.touch .banner h2 { font-size: 34px; }
body.touch .grain { display: none; }
body.touch .overrun { top: calc(116px + env(safe-area-inset-top)); width: 200px; }

/* Menus on a small landscape screen */
body.touch .screen { padding: 12px calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left)); justify-content: flex-start; }
body.touch #menu-main { justify-content: center; padding: 3vh 6vw; }
body.touch .panel { padding: 18px; }
body.touch .panel h2 { font-size: 26px; }
body.touch .brief h2 { font-size: 34px; }
body.touch .btn { padding: 10px 16px; font-size: 15px; }
body.touch .main-nav { gap: 6px; }
body.touch .foot { bottom: 8px; }
@media (max-height: 500px) {
  .title.big { font-size: clamp(40px, 13vh, 80px); }
  .title.big::after { margin-top: 10px; }
  .tag { margin: 8px 0 12px; font-size: 14px; }
  .kicker { margin-bottom: 4px; }
  #menu-main .main-nav { flex-direction: row; flex-wrap: wrap; width: min(620px, 100%); }
  #menu-main .main-nav .btn { flex: 1 1 140px; }
  .result-stats { grid-template-columns: repeat(4, 1fr); }
  #result-title { font-size: 34px; }
}

/* Portrait phones: ask for landscape */
.rotate { display: none; }
@media (orientation: portrait) {
  body.touch .rotate {
    display: flex; position: fixed; inset: 0; z-index: 60; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; background: #0b0b0c; text-align: center; padding: 24px;
  }
  .rotate p { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 22px; margin: 18px 0 0; }
  .rotate small { color: var(--muted); }
  .phone-icon { width: 46px; height: 80px; border: 3px solid #e8e4dc; border-radius: 9px; animation: turn 2.2s ease-in-out infinite; }
}
@keyframes turn { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
body.touch .breath { bottom: auto; top: calc(50% + 70px); }


/* The post-processing pass draws its own grain */
body.post .grain { display: none; }

.loading { width: min(360px, 80vw); text-align: center; }
.loading-track { height: 3px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; margin: 14px 0 10px; }
#loading-bar { height: 100%; width: 0; background: var(--red); transition: width 0.2s; }

/* ========================================================================
   Skin: quiet, worn, cinematic. Thin tracked capitals, an old serif for
   titles, no boxes, muted ochre instead of red. Everything fades slowly.
   ======================================================================== */
:root {
  --bg: #0a0a09;
  --panel: rgba(8, 8, 7, 0.78);
  --line: rgba(232, 224, 205, 0.12);
  --text: #e4ded1;
  --muted: #8d877a;
  --accent: #c8b58a;
  --red: #7d1a15;
  --red-bright: #b8382e;
  --amber: #c8b58a;
  --green: #9fb08a;
  --font-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Cormorant Garamond", "Georgia", serif;
}
body { font-weight: 400; }

/* Screens: one soft vignette, nothing boxed */
.screen { background: radial-gradient(ellipse at 60% 40%, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.85)); animation: screenIn 1.2s ease both; }
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }
#menu-main {
  align-items: flex-start; justify-content: flex-end; padding: 6vh 7vw 9vh;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 60%);
}
.kicker { font-family: var(--font); font-weight: 500; font-size: 10px; letter-spacing: 0.42em; color: var(--muted); margin: 0 0 14px; }
.title { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.16em; line-height: 1; }
.title.big { font-size: clamp(38px, min(7vw, 12vh), 92px); color: #ece6d8; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.8); }
.title.big::after { width: 56px; height: 1px; background: var(--accent); opacity: 0.6; margin-top: 22px; }
.tag { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: #bdb6a7; line-height: 1.45; margin: 18px 0 34px; }
.main-nav { gap: 2px; width: min(300px, 100%); }
.foot { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(141, 135, 122, 0.7); bottom: 22px; }
.rating, .rating-sm { background: transparent; border: 1px solid var(--muted); color: var(--muted); border-radius: 2px; font-family: var(--font); font-weight: 500; }

/* Buttons are words; the chosen one gets a thin line */
.btn {
  border: 0; background: transparent; padding: 9px 0 9px 0; border-radius: 0; font-family: var(--font); font-weight: 500;
  font-size: 12px; letter-spacing: 0.32em; color: var(--muted); position: relative; transition: color 0.4s, padding 0.4s;
}
.btn::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1px; background: var(--accent); transition: width 0.4s; }
.btn:hover, .btn:focus-visible { background: transparent; color: var(--text); padding-left: 34px; outline: none; }
.btn:hover::before, .btn:focus-visible::before { width: 22px; }
.btn.primary { background: transparent; color: var(--text); }
.btn.primary:hover { background: transparent; }
.row { gap: 28px; margin-top: 30px; }

/* Panels: a dark sheet, left-aligned, lots of air */
.panel {
  background: linear-gradient(90deg, rgba(6, 6, 5, 0.92), rgba(6, 6, 5, 0.7)); border: 0; border-left: 1px solid var(--line);
  border-radius: 0; box-shadow: none; padding: 36px 40px; backdrop-filter: blur(3px);
}
.panel h2 { font-family: var(--font-serif); font-weight: 400; font-size: 34px; letter-spacing: 0.14em; margin: 0 0 22px; color: #ece6d8; }
.panel h3 { font-family: var(--font); font-weight: 500; font-size: 10px; letter-spacing: 0.36em; color: var(--accent); margin: 28px 0 10px; }
.muted.small, .small { font-size: 12px; }

.missions { gap: 0; }
.mission { border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; padding: 16px 4px; transition: background 0.4s; }
.mission:hover:not(.locked) { border-color: var(--line); background: rgba(200, 181, 138, 0.05); }
.m-num { font-family: var(--font-serif); font-size: 30px; color: var(--accent); width: 48px; }
.m-body b { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: 0.08em; }
.m-body small { font-size: 11px; letter-spacing: 0.12em; }
.m-best { color: var(--green) !important; }
.m-lock { font-family: var(--font); font-size: 10px; letter-spacing: 0.3em; }

.char { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 16px 2px; }
.char h3 { font-family: var(--font-serif); font-weight: 500; font-size: 26px; letter-spacing: 0.06em; color: var(--text); }
.char h3 small { font-family: var(--font); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; }
.char .perk { color: var(--accent); font-style: italic; font-family: var(--font-serif); font-size: 16px; }
.keys dt { font-family: var(--font); font-weight: 500; font-size: 11px; letter-spacing: 0.2em; color: var(--accent); }
.keys dd { color: #bdb6a7; font-size: 13px; }
.settings label { font-size: 12px; letter-spacing: 0.08em; color: #cfc8b9; }
.settings select { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text); }
.settings select option { background: #111; }
.settings input[type="range"], .settings input[type="checkbox"] { accent-color: var(--accent); }

.brief h2 { font-size: 52px; letter-spacing: 0.12em; }
.place { font-family: var(--font); font-weight: 500; font-size: 10px; letter-spacing: 0.36em; color: var(--accent); margin: 0 0 26px; }
.brief-text p { font-family: var(--font-serif); font-size: 19px; line-height: 1.55; color: #d4cdbe; }
.objectives { list-style: none; padding: 0; font-size: 13px; letter-spacing: 0.04em; color: #bdb6a7; }
.objectives li::before { content: "—"; color: var(--accent); margin-right: 10px; }

#result-title { font-family: var(--font-serif); font-weight: 400; font-size: 56px; letter-spacing: 0.16em; }
#result-title.won { color: #ece6d8; }
#result-title.lost { color: #a8463d; }
.result-text { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: #c9c2b3; }
.result-stats div { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 10px 0; }
.result-stats b { font-family: var(--font); font-weight: 300; font-size: 24px; }
.result-stats span { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; }
.result-stats .fam-result b { font-family: var(--font-serif); font-weight: 500; font-size: 20px; }
.result-stats .fam-result.dead { border-color: rgba(168, 70, 61, 0.6); }
.result-stats .fam-result.dead b { color: #a8463d; }

.loading .kicker { letter-spacing: 0.5em; }
.loading-track { background: rgba(232, 224, 205, 0.08) !important; height: 1px !important; }
#loading-bar { background: var(--accent) !important; }
#loading-text { letter-spacing: 0.3em; text-transform: uppercase; font-size: 10px; }

/* Drifting spores and dust over the menu */
.spores { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.spores i {
  position: absolute; inset: -20%; opacity: 0.55;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(230, 220, 190, 0.7), transparent), radial-gradient(1px 1px at 33% 68%, rgba(230, 220, 190, 0.6), transparent),
    radial-gradient(2px 2px at 58% 38%, rgba(230, 220, 190, 0.45), transparent), radial-gradient(1px 1px at 76% 82%, rgba(230, 220, 190, 0.6), transparent),
    radial-gradient(1.5px 1.5px at 88% 18%, rgba(230, 220, 190, 0.5), transparent), radial-gradient(1px 1px at 44% 12%, rgba(230, 220, 190, 0.6), transparent),
    radial-gradient(2.5px 2.5px at 22% 88%, rgba(230, 220, 190, 0.3), transparent), radial-gradient(1px 1px at 67% 55%, rgba(230, 220, 190, 0.55), transparent);
  background-size: 420px 420px;
  animation: drift 60s linear infinite;
}
.spores i:nth-child(2) { background-size: 640px 640px; animation-duration: 95s; animation-direction: reverse; opacity: 0.35; filter: blur(1px); }
.spores i:nth-child(3) { background-size: 900px 900px; animation-duration: 140s; opacity: 0.25; filter: blur(2px); }
@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-420px, -180px); } }

/* -------------------------------------------------------------- HUD skin */
#hud { font-family: var(--font); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
#obj-title { font-family: var(--font); font-weight: 500; font-size: 10px; letter-spacing: 0.38em; color: var(--accent); }
#obj-text { font-size: 12px; letter-spacing: 0.06em; color: #c9c2b3; }
.timer { font-family: var(--font); font-weight: 300; font-size: 24px; letter-spacing: 0.1em; }
.overrun span { font-family: var(--font); font-size: 10px; letter-spacing: 0.34em; color: #c0574b; }
.bar { height: 2px; border-radius: 0; }
.bar > div { background: #c0574b; }

.banner { transition: opacity 1.6s ease, transform 2.4s ease; }
.banner h2 { font-family: var(--font-serif); font-weight: 400; letter-spacing: 0.22em; font-size: clamp(30px, 5vw, 54px); color: #ece6d8; }
.banner p { font-family: var(--font); font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--muted); margin-top: 12px; }

.feed-item { background: transparent; border-left: 1px solid var(--muted); padding: 2px 10px; font-size: 12px; letter-spacing: 0.04em; color: #cfc8b9; }
.feed-item.bad { border-color: #c0574b; }
.feed-item.good { border-color: var(--green); }
.feed-item.hint { border-color: var(--accent); }
.feed-item.order, .feed-item.switch { border-color: #8aa0b0; }

.prompt { background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); border-radius: 20px; font-size: 12px; letter-spacing: 0.08em; padding: 7px 16px; }
.progress { height: 2px; border-radius: 0; background: rgba(232, 224, 205, 0.15); }
#progress-bar { background: var(--accent); }

.crosshair i { background: rgba(236, 230, 216, 0.7); box-shadow: none; }
.crosshair i:nth-child(1), .crosshair i:nth-child(2) { width: 1px; height: 6px; left: 0; }
.crosshair i:nth-child(1) { top: calc(-1 * var(--gap) - 6px); }
.crosshair i:nth-child(3), .crosshair i:nth-child(4) { height: 1px; width: 6px; top: 0; }
.crosshair i:nth-child(3) { left: calc(-1 * var(--gap) - 6px); }
.crosshair b { width: 2px; height: 2px; border-radius: 50%; background: rgba(236, 230, 216, 0.8); }
.hitmarker.kill::before, .hitmarker.kill::after { background: #c0574b; }

.fam { background: transparent; border: 0; border-radius: 0; padding: 4px 0; width: 120px; }
.fam.active { transform: none; background: transparent; }
.fam.active .fam-name { color: #ece6d8; }
.fam:not(.active) { opacity: 0.6; }
.fam.down { animation: pulse 0.9s infinite alternate; }
.fam-name { font-family: var(--font); font-weight: 500; font-size: 11px; letter-spacing: 0.26em; color: #bdb6a7; }
.fam-key { border: 0; color: var(--muted); font-family: var(--font); }
.fam-state { font-size: 9px; letter-spacing: 0.2em; color: var(--accent); font-weight: 500; }
.fam-role, .fam-sub { font-size: 9px; letter-spacing: 0.12em; }
.fam-hp { height: 2px; border-radius: 0; background: rgba(232, 224, 205, 0.12); margin: 5px 0 3px; }
.fam-hp-bar { background: #d8d1c2; }
.fam.hurt .fam-hp-bar { background: var(--accent); }
.fam.down .fam-hp-bar { background: #c0574b; }

.weapon { min-width: 0; }
#w-name { font-family: var(--font); font-weight: 500; font-size: 10px; letter-spacing: 0.34em; color: #bdb6a7; }
#w-detail { font-size: 10px; letter-spacing: 0.08em; }
.ammo { font-family: var(--font); }
.ammo b { font-weight: 300; font-size: 40px; letter-spacing: 0.02em; }
.ammo span { font-size: 15px; font-weight: 300; }
.ammo.low b { color: #c0574b; }
.w-sub { font-size: 9px; letter-spacing: 0.22em; }
#w-mode { color: var(--accent); }
.stamina { height: 1px; }

.damage { background: radial-gradient(ellipse at center, rgba(90, 0, 0, 0) 45%, rgba(110, 10, 5, 0.45) 82%, rgba(60, 0, 0, 0.8) 100%); }

/* Touch: the same restraint */
body.touch .fam { width: 64px; padding: 2px 0; }
body.touch .fam-name { font-size: 9px; letter-spacing: 0.18em; }
body.touch #w-name { font-size: 9px; }
body.touch .ammo b { font-size: 24px; }
body.touch .banner h2 { font-size: 28px; }
.t-btn { font-family: var(--font); border-color: rgba(232, 224, 205, 0.22); background: rgba(8, 8, 7, 0.28); color: rgba(236, 230, 216, 0.85); }
.t-fire { background: rgba(125, 26, 21, 0.28); border-color: rgba(192, 87, 75, 0.55); }
.t-btn.on { background: rgba(200, 181, 138, 0.3); border-color: rgba(200, 181, 138, 0.8); }
.t-use, .t-start { border-color: rgba(200, 181, 138, 0.7); color: var(--accent); }
.t-start { font-size: calc(9 * var(--u)); letter-spacing: 0.3em; }
body.touch .btn { padding: 8px 0; font-size: 11px; }
body.touch .btn:hover, body.touch .btn:focus-visible { padding-left: 30px; }
body.touch .panel { padding: 20px 24px; }
body.touch .panel h2 { font-size: 26px; }
body.touch .brief h2 { font-size: 34px; }
body.touch .brief-text p { font-size: 16px; }
.fam-role, .fam-sub { display: none; }
.fam { width: 104px; }
.family { gap: 18px; }
body.touch .fam-state { display: none; } body.touch .fam.down .fam-state { display: inline; }

/* Controls fit on one screen: two columns of pairs */
#menu-controls .panel { width: min(980px, 100%); padding-top: 26px; padding-bottom: 22px; }
#menu-controls .panel h2 { margin-bottom: 14px; }
#menu-controls .keys { grid-template-columns: max-content 1fr max-content 1fr; gap: 7px 16px; font-size: 12px; margin-bottom: 14px; }
#menu-controls .keys dd { font-size: 12px; line-height: 1.35; }
body.touch #menu-controls .screen, body.touch #menu-controls { justify-content: center; }
body.touch #menu-controls .panel { padding: 14px 20px; }
body.touch #menu-controls .panel h2 { font-size: 20px; margin-bottom: 8px; }
body.touch #menu-controls .keys { gap: 5px 12px; }
body.touch #menu-controls .keys dt { font-size: 9px; }
body.touch #menu-controls .keys dd { font-size: 10.5px; }
body.touch #menu-controls .btn { padding: 4px 0; }

/* Briefing on short (phone) screens: story on the left, the job on the right */
@media (max-height: 560px) {
  .panel.brief {
    width: min(960px, 100%); display: grid; grid-template-columns: 1.5fr 1fr; column-gap: 34px; align-content: center;
    padding: 16px 26px; max-height: 100%;
  }
  .panel.brief > * { grid-column: 1; }
  .panel.brief h3, .panel.brief .objectives, .panel.brief .row, .panel.brief > p.small { grid-column: 2; }
  .panel.brief #brief-num { grid-row: 1; margin-bottom: 4px; }
  .panel.brief h2 { grid-row: 2; font-size: 28px !important; margin: 0 0 4px; }
  .panel.brief .place { grid-row: 3; margin-bottom: 10px; font-size: 9px; }
  .panel.brief .brief-text { grid-row: 4 / span 4; }
  .panel.brief .brief-text p { font-size: 15px !important; line-height: 1.4; margin-bottom: 8px; }
  .panel.brief h3 { grid-row: 2; align-self: end; margin: 0 0 6px; }
  .panel.brief .objectives { grid-row: 3 / span 2; font-size: 12px; line-height: 1.6; align-self: start; }
  .panel.brief .row { grid-row: 5; margin-top: 10px; }
  .panel.brief > p.small { grid-row: 6; font-size: 10px; margin: 6px 0 0; }
  #briefing.screen { justify-content: center; }
}
.crosshair.dot i { opacity: 0; } .crosshair i { transition: opacity 0.25s; }
.t-listen { --s: 46; left: calc(18px + env(safe-area-inset-left)); bottom: calc(150 * var(--u)); border-color: rgba(232, 224, 205, 0.45); }
.t-listen.on { background: rgba(232, 224, 205, 0.25); border-color: rgba(232, 224, 205, 0.9); }

/* Subtitles: quiet white text, the speaker's name in the accent colour */
.subtitle { position: absolute; left: 50%; bottom: 17%; transform: translateX(-50%); width: min(720px, 86vw); margin: 0; text-align: center;
  font-size: 15px; line-height: 1.45; color: #ece6d8; text-shadow: 0 1px 4px #000, 0 0 12px rgba(0,0,0,0.8); opacity: 0; transition: opacity 0.6s; }
.subtitle.show { opacity: 1; }
.subtitle b { color: var(--accent); font-weight: 500; margin-right: 8px; letter-spacing: 0.06em; }
body.touch .subtitle { bottom: 26%; font-size: 13px; width: 60vw; }
/* Cold open */
.coldopen { position: fixed; inset: 0; z-index: 16; background: #000; display: none; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: 1; transition: opacity 3s ease; }
.coldopen.on { display: flex; }
.coldopen.out { opacity: 0; }
.coldopen p { margin: 6px 0; font-family: var(--font); font-size: 11px; letter-spacing: 0.5em; text-transform: uppercase; color: #a9a294; opacity: 0; animation: coIn 1.6s ease forwards; }
.coldopen p:nth-child(2) { animation-delay: 0.7s; }
.coldopen p:nth-child(3) { animation-delay: 1.4s; font-family: var(--font-serif); font-style: italic; letter-spacing: 0.04em; text-transform: none; font-size: 18px; color: #cfc8b9; }
@keyframes coIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Cutscenes: bars slide in, everything but the subtitles goes away */
.letterbox { position: fixed; inset: 0; pointer-events: none; z-index: 14; }
.letterbox i { position: absolute; left: 0; right: 0; height: 11vh; background: #000; transform: scaleY(0); transition: transform 1.2s ease; }
.letterbox i:first-child { top: 0; transform-origin: top; }
.letterbox i:last-child { bottom: 0; transform-origin: bottom; }
.letterbox.on i { transform: scaleY(1); }
body.cine #hud > *:not(#subtitle) { opacity: 0 !important; transition: opacity 0.6s; }
body.cine .subtitle { bottom: 13vh; z-index: 15; }
.skip { position: fixed; right: calc(18px + env(safe-area-inset-right)); bottom: calc(3vh + env(safe-area-inset-bottom)); z-index: 17; background: transparent; border: 0;
  color: rgba(228, 222, 209, 0.6); font-family: var(--font); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; padding: 10px; cursor: pointer; }