:root { --ink: #efe7da; --dim: #b9ad99; --bg: #15120f; --accent: #d8b27a; --danger: #e0402a; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #1b1714; color: var(--ink); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#menu { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; grid-template-columns: 1fr minmax(390px,460px); gap: 20px 60px; padding: 32px 4.5vw 22px; background: linear-gradient(90deg,rgba(7,11,13,.06) 10%,rgba(7,11,13,.12) 44%,rgba(7,11,13,.88) 69%,rgba(7,11,13,.97)),linear-gradient(0deg,rgba(5,9,11,.8),transparent 24%,transparent 82%,rgba(5,9,11,.62)); z-index: 10; --accent: #e6d4b5; --ink: #f2f3ef; --dim: #b5bdbd; }
#menu.hidden { display: none; }
#menu .panel { grid-column: 2; grid-row: 2; align-self: center; width: 100%; max-height: 100%; overflow-y: auto; padding: 12px 14px 14px 0; text-align: left; scrollbar-width: thin; scrollbar-color: #465056 transparent; }
#menu h1 { font-size: clamp(72px,7vw,106px); letter-spacing: -.045em; line-height: .95; margin: 24px 0 14px; font-weight: 850; color: var(--ink); }
#menu .tag { font-size: 22px; font-weight: 450; color: var(--ink); margin: 0 0 10px; letter-spacing: -.02em; }
#menu .blurb { color: var(--dim); font-size: 15px; margin: 0 0 26px; }
#menu .buttons { display: flex; gap: 12px; flex-wrap: wrap; }
button { font: inherit; font-size: 15px; padding: 12px 22px; border-radius: 6px; border: 1px solid var(--accent); background: var(--accent); color: #1a140d; cursor: pointer; font-weight: 600; }
button.ghost { background: transparent; color: var(--ink); border-color: #6d6254; }
button:hover { filter: brightness(1.1); }
#menu .fine { color: #7d7264; font-size: 12px; margin-top: 22px; }
#menu .status { color: var(--accent); margin-top: 16px; min-height: 1.4em; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.hud-family { position: absolute; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 6px; }
.hud-family .m { display: grid; grid-template-columns: 22px 110px 90px; grid-template-rows: auto auto; column-gap: 8px; align-items: center; opacity: .92; }
.hud-family .m .ic { grid-row: span 2; font-size: 18px; }
.hud-family .m .nm { grid-row: span 2; font-size: 13px; }
.hud-family .m.active .nm { color: var(--accent); font-weight: 700; }
.hud-family .m.dead { opacity: .4; }
.hud-family .m.dead .nm { text-decoration: line-through; }
.hud-family .hp, .hud-family .ht { height: 5px; background: rgba(0,0,0,.45); border-radius: 3px; overflow: hidden; margin: 1px 0; }
.hud-family .hp i { display: block; height: 100%; background: #c9d6b0; }
.hud-family .ht i { display: block; height: 100%; background: #8a8f86; }
.hud-top { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); text-align: center; }
.hud-status { font-size: 16px; color: var(--accent); }
.hud-lobby { font-size: 12px; color: var(--dim); margin-top: 2px; }
.hud-alert { position: absolute; top: 28%; left: 50%; transform: translateX(-50%); font-size: 30px; font-weight: 800; color: var(--danger); letter-spacing: .06em; opacity: 0; transition: opacity .2s; text-align: center; max-width: 80vw; }
.hud-alert.on { opacity: 1; }
.hud-toast { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%); font-size: 15px; color: var(--ink); background: rgba(20,16,12,.6); padding: 8px 14px; border-radius: 6px; opacity: 0; transition: opacity .4s; max-width: 70vw; text-align: center; }
.hud-toast.on { opacity: 1; }
.hud-crowd { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); font-size: 14px; color: var(--dim); }
.hud-crowd.bad { color: var(--danger); font-weight: 700; }
.hud-bottom { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); display: flex; gap: 22px; align-items: center; }
.hud-eye { display: flex; gap: 8px; align-items: center; font-size: 18px; opacity: .55; }
.hud-eye.seen { opacity: 1; }
.hud-eye.hot span { color: var(--danger); animation: pulse .6s infinite alternate; }
.hud-eye .bar, .hud-stam .bar { width: 160px; height: 6px; background: rgba(0,0,0,.45); border-radius: 3px; overflow: hidden; }
.hud-eye .bar i { display: block; height: 100%; background: var(--danger); }
.hud-stam .bar i { display: block; height: 100%; background: #d9d2c3; }
.hud-keys { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 11px; color: #9c917f; white-space: nowrap; }
.hud-debug { position: absolute; right: 12px; top: 12px; font: 11px ui-monospace, monospace; color: #cfc6b6; }
.hud-death { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(8,6,5,.78); pointer-events: auto; }
.hud-death.hidden { display: none; }
.hud-death .card { text-align: center; max-width: 480px; }
.hud-death h2 { font-size: 34px; margin: 0 0 10px; }
.hud-death p { color: var(--dim); }
@keyframes pulse { from { opacity: .5; } to { opacity: 1; } }
@media (max-width: 700px) { .hud-keys { display: none; } #menu h1 { font-size: 44px; } }
body.loading .hud-family, body.loading .hud-bottom, body.loading .hud-keys, body.loading .hud-crowd, body.loading .hud-debug { display: none; }
body.loading .hud-status { font-size: 22px; letter-spacing: .08em; }
.hidden { display: none !important; }
#menu a { color: var(--accent); }
.consent { background: rgba(20,16,12,.7); border: 1px solid #4a4034; border-radius: 8px; padding: 16px 18px; margin: 0 0 18px; }
.consent .warn { margin: 0 0 12px; color: var(--ink); }
.consent .row { display: block; margin: 10px 0; color: var(--dim); }
.consent .row input[type=date] { margin-left: 8px; font: inherit; padding: 4px 6px; background: #1f1a15; color: var(--ink); border: 1px solid #5a4e40; border-radius: 4px; color-scheme: dark; }
.consent .check { display: flex; gap: 10px; align-items: flex-start; }
.consent .check input { margin-top: 4px; }
.consent .err { color: var(--danger); min-height: 1.2em; margin: 4px 0 8px; }
button:disabled { opacity: .45; cursor: not-allowed; filter: none; }
body.in-menu #hud { display: none; }
.hud-prompt { position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%); font-size: 15px; color: var(--ink); white-space: nowrap; }
.hud-family .m.bleed .hp i { background: var(--danger); animation: pulse .8s infinite alternate; }
.hud-family .m.down .nm::after { content: ' — down'; color: var(--danger); font-size: 11px; }
.hud-aware { position: absolute; inset: 0; width: 100%; height: 100%; }
.hud-marks .mark { position: absolute; transform: translate(-50%, -100%); font: 800 26px system-ui, sans-serif; text-shadow: 0 0 6px rgba(0,0,0,.9); }
.hud-marks .mark.s1 { color: #e8a830; }
.hud-marks .mark.s2 { color: #e0402a; animation: pulse .3s infinite alternate; }
#menu .disclaimer { color: var(--danger); font-weight: 600; margin: 0 0 12px; letter-spacing: .02em; }
.hud-sos .sos { position: absolute; transform: translate(-50%, -100%); font: 700 15px system-ui, sans-serif; color: #fff; background: rgba(160, 30, 20, .75); padding: 3px 8px; border-radius: 4px; white-space: nowrap; animation: pulse .7s infinite alternate; }
.hud-sos .sos.edge { transform: translate(-50%, 0); }
.hud-family .m.buried .nm::after { content: ' — buried'; color: #e8a830; font-size: 11px; }
body.buried #hud::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, rgba(30,24,18,.35) 10%, rgba(12,9,7,.95) 65%); }
/* No text selection or image dragging while playing (clicks and drags kept highlighting the page). */
html, body, #hud, #menu, canvas { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
canvas { -webkit-user-drag: none; }
input, textarea { -webkit-user-select: text; user-select: text; }
.memorial { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
.memorial.on { opacity: 1; }
.memorial .toll { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); font-size: 16px; color: #e9dcc6; letter-spacing: .04em; }
.memorial .candles { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; max-width: 70vw; }
.memorial .candle { font-size: 14px; color: #f1e4cc; text-shadow: 0 0 8px rgba(255,190,110,.6); animation: pulse 2.4s infinite alternate; }
.hud-run { position: absolute; right: 16px; top: 44px; text-align: right; max-width: 420px; }
.hud-run .obj { font-size: 14px; color: var(--accent); font-weight: 600; margin-bottom: 6px; }
.hud-run .bags { font-size: 12px; color: var(--dim); white-space: pre-line; line-height: 1.5; }
.stash { background: rgba(20,16,12,.7); border: 1px solid #4a4034; border-radius: 8px; padding: 12px 16px; margin: 0 0 16px; }
.stash h3 { margin: 0 0 4px; font-size: 16px; color: var(--accent); }
.stash-stats { margin: 0 0 8px; font-size: 12px; color: var(--dim); }
.stash-items { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; max-height: 180px; overflow: auto; }
.stash-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.stash-row input { width: 52px; background: #1f1a15; color: var(--ink); border: 1px solid #5a4e40; border-radius: 4px; padding: 2px 4px; }
.stash-hint { font-size: 11px; color: #8c8170; margin: 8px 0 0; }
/* Settings (menu panel and pause overlay). */
.settings .row { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--ink); font-size: 14px; }
.settings .row input[type=range] { flex: 1; accent-color: var(--accent); }
.settings .row output { min-width: 3.5em; text-align: right; color: var(--dim); font-variant-numeric: tabular-nums; }
.settings .row select { background: #1b1612; color: var(--ink); border: 1px solid #6d6254; border-radius: 4px; padding: 3px 6px; }
#pause { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(10,8,6,.72); z-index: 12; }
#pause.hidden { display: none; }
#pause .panel { max-width: 460px; padding: 28px 32px; background: rgba(24,19,14,.92); border: 1px solid #4a4034; border-radius: 10px; }
#pause h2 { margin: 0 0 4px; letter-spacing: .2em; }
#pause .buttons { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
/* Mode choice (menu) and fighter HUD. */
#menu .modes { flex-basis: 100%; display: grid; gap: 6px; margin: 0 0 6px; }
#menu .mode { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid #4a4034; border-radius: 6px; background: rgba(20,16,12,.55); cursor: pointer; color: var(--dim); font-size: 14px; }
#menu .mode b { color: var(--ink); }
#menu .mode:has(input:checked) { border-color: var(--accent); background: rgba(60,45,28,.55); }
#menu .mode input { accent-color: var(--accent); margin-top: 3px; }
.hud-combat .xhair { position: fixed; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none;
  background: linear-gradient(var(--ink), var(--ink)) center/2px 8px no-repeat, linear-gradient(var(--ink), var(--ink)) center/8px 2px no-repeat; opacity: .8; }
.hud-combat .ammo { position: fixed; right: 22px; bottom: 60px; color: var(--ink); font: 600 14px/1.2 system-ui, sans-serif; letter-spacing: .06em; text-shadow: 0 1px 3px #000; }
.hud-gear { position: fixed; left: 22px; bottom: 60px; color: var(--ink); font: 500 12px/1.2 system-ui, sans-serif; letter-spacing: .04em; text-shadow: 0 1px 3px #000; opacity: .9; pointer-events: none; }
.hud-gear.hidden { display: none; }

/* Cinematic menu: clear hierarchy and a compact side panel, with the city left visible. */
.menu-masthead { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; min-height: 30px; color: #d9dfdf; font-size: 10px; letter-spacing: .2em; }
.menu-wordmark { display: flex; align-items: center; font-weight: 750; }
.masthead-divider { height: 14px; width: 1px; margin: 0 18px; background: #738183; }
.menu-edition { color: #98a5a7; font-size: 9px; }
.menu-eyebrow { display: flex; align-items: center; justify-content: space-between; color: #a9b7ba; font-size: 10px; font-weight: 650; letter-spacing: .22em; }
.age-rating { border: 1px solid #5c6568; padding: 4px 7px; font-size: 10px; letter-spacing: .05em; }
.title-period { color: #e6d4b5; }
.menu-intro { margin: 0 0 30px; color: #9dabad; font-size: 14px; line-height: 1.7; }
#menu .buttons { display: grid; gap: 10px; }
#menu .section-label { margin: 0 0 2px; color: #869699; font-size: 10px; font-weight: 700; letter-spacing: .2em; }
#menu .modes { display: grid; gap: 8px; margin: 0 0 10px; }
#menu .mode { border-radius: 2px; border: 1px solid #394548; background: #17202380; padding: 13px 14px; gap: 13px; align-items: center; }
#menu .mode:has(input:checked) { border-color: #9db0b4; background: #647c8629; }
#menu .mode b { font-size: 15px; font-weight: 650; }
#menu .mode small { display: block; margin-top: 3px; font-size: 12px; color: #a6b2b4; }
#menu .mode input { margin: 0; accent-color: #b9d6e0; }
#menu button { border-radius: 2px; transition: background .18s, border-color .18s; }
#menu .menu-play { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; text-align: left; font-size: 20px; letter-spacing: -.02em; background: #e6d4b5; border-color: #e6d4b5; color: #172023; }
.menu-play small { display: block; font-size: 9px; letter-spacing: .18em; margin-top: 5px; font-weight: 650; opacity: .72; }
.button-arrow { font-size: 27px; font-weight: 400; }
#menu .menu-solo { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-color: #566165; background: #17202366; font-weight: 500; }
.button-meta { color: #9eb0b3; font-size: 9px; letter-spacing: .15em; }
.button-meta span { margin-left: 12px; font-size: 16px; }
#menu .menu-settings { display: flex; align-items: center; justify-content: space-between; border: 0; border-bottom: 1px solid #344045; padding: 13px 0; margin-top: 6px; font-size: 13px; font-weight: 500; color: #bec9ca; }
#menu :is(button,a,input,select,summary):focus-visible { outline: 2px solid #99d7ef; outline-offset: 4px; }
#menu .consent { background: #15202499; border: 1px solid #3d4b50; border-radius: 3px; margin-bottom: 18px; padding: 20px; font-size: 12px; line-height: 1.55; }
#menu .consent h2 { margin: 0 0 10px; font-size: 17px; font-weight: 600; }
#menu .consent .warn { color: #bac7c9; }
#menu .consent .row { margin: 12px 0; color: #aebcc0; }
#menu .consent input[type=date] { margin-left: 10px; padding: 8px; border-color: #546369; background: #111b20; }
#menu .consent input[type=checkbox] { accent-color: #b9d6e0; flex-shrink: 0; }
#menu #accept { display: flex; justify-content: space-between; width: 100%; padding: 13px 15px; font-size: 14px; }
#menu .consent .err:empty { min-height: 0; margin: 0; }
#menu .stash { background: #142025cc; border-color: #3d4b50; border-radius: 2px; margin: 14px 0; }
#menu .stash input, #menu .settings select { background: #111b20; border-color: #546369; }
.field-guide { border-bottom: 1px solid #344045; }
.field-guide summary { display: flex; justify-content: space-between; cursor: pointer; padding: 15px 0; list-style: none; color: #bec9ca; font-size: 13px; }
.field-guide summary::-webkit-details-marker { display: none; }
.field-guide[open] summary span { transform: rotate(45deg); }
.field-guide-content { padding: 5px 0 16px; }
.field-guide h2 { font-size: 16px; font-weight: 600; margin: 15px 0 10px; }
#menu .field-guide .blurb, #menu .field-guide .disclaimer { font-size: 12px; line-height: 1.65; margin: 0 0 15px; }
#menu .field-guide .disclaimer { color: #d5aa91; }
.menu-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 22px 0; }
.menu-controls div { display: flex; justify-content: space-between; gap: 10px; }
.menu-controls dt { font: 10px ui-monospace, monospace; color: #dce8eb; }
.menu-controls dd { margin: 0; color: #95a7ac; font-size: 11px; }
.menu-device-note { color: #74868c; font-size: 8px; letter-spacing: .12em; margin: 22px 0 0; }
.menu-device-note span { padding: 0 6px; }
.menu-scene-caption { grid-column: 1; grid-row: 2; align-self: end; margin-bottom: 14px; pointer-events: none; text-shadow: 0 2px 16px #000; }
.menu-scene-caption > span { color: #d2c0a4; font-size: 9px; letter-spacing: .24em; border-left: 2px solid #d2c0a4; padding-left: 10px; }
.menu-scene-caption p { margin: 13px 0 0; font-size: clamp(20px,2vw,30px); line-height: 1.25; letter-spacing: -.025em; color: #e6e5df; font-weight: 350; }
.menu-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-top: 16px; border-top: 1px solid #79858838; }
.menu-footer > span { font-size: 9px; color: #9aa6a8; letter-spacing: .16em; }
.menu-footer nav { display: flex; gap: 22px; }
#menu .menu-footer a { font-size: 10px; color: #a4afb0; text-decoration: none; }
#menu .menu-footer a:hover { color: white; text-decoration: underline; }
@media (max-height: 760px) and (min-width: 901px) { #menu { padding-top: 20px; gap: 12px 50px; } #menu h1 { margin-top: 16px; font-size: 72px; } .menu-intro { margin-bottom: 18px; } }
@media (max-width: 1100px) { #menu { grid-template-columns: 1fr minmax(350px,400px); gap: 16px 30px; padding: 24px 30px 18px; background: linear-gradient(90deg,#09101333,#09101355 30%,#091013e8 64%,#091013fa); } .menu-edition { display: none; } }
@media (max-width: 900px) { #menu { display: flex; flex-direction: column; align-items: stretch; gap: 18px; overflow-y: auto; padding: 22px 24px; background: linear-gradient(120deg,#091013d6,#091013f5); } #menu .panel { flex: 0 0 auto; align-self: center; width: min(100%,460px); max-height: none; overflow: visible; padding: 8px 0 20px; } #menu h1 { font-size: 76px; } .menu-scene-caption { display: none; } .menu-masthead { flex-shrink: 0; } .menu-footer { margin-top: auto; flex-wrap: wrap; gap: 14px; } .menu-footer nav { gap: 18px; } }
@media (prefers-reduced-motion: reduce) { #menu button { transition: none; } }
/* Captions for sounds (Settings → Captions). */
/* Captions sit in one column with the message line, so a long message never covers them. */
.hud-stack { position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%) scale(var(--hud-scale, 1)); transform-origin: bottom center; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 70vw; }
.hud-stack .hud-toast { position: static; transform: none; max-width: 100%; }
.hud-stack .hud-toast:empty { display: none; }
.hud-captions { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hud-stack .hud-captions { position: static; transform: none; }
.hud-captions .cap { font: 600 15px system-ui, sans-serif; color: #f4eee2; background: rgba(0,0,0,.72); padding: 2px 10px; border-radius: 4px; letter-spacing: .02em; white-space: nowrap; }
.hud-run .bags .sel { color: var(--accent); }
/* HUD size (Settings → HUD size). */
.hud-family { transform: scale(var(--hud-scale, 1)); transform-origin: top left; }
.hud-run { transform: scale(var(--hud-scale, 1)); transform-origin: top right; }
.hud-top, .hud-alert, .hud-crowd { transform: translateX(-50%) scale(var(--hud-scale, 1)); transform-origin: top center; }
.hud-bottom, .hud-keys, .hud-prompt { transform: translateX(-50%) scale(var(--hud-scale, 1)); transform-origin: bottom center; }
/* Reduce flashing: no fast blinking in the HUD either. */
body.calm .hud-eye.hot span, body.calm .hud-marks .mark.s2, body.calm .hud-sos .sos, body.calm .hud-family .m.bleed .hp i { animation: none; }
/* Settings sections. */
.settings .sub { margin: 12px 0 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.settings .row.prominent { padding: 6px 8px; border: 1px solid #6d6254; border-radius: 6px; background: rgba(40,32,24,.5); }
.settings button.small { padding: 4px 12px; font-size: 13px; }
.settings .hint-done { font-size: 12px; color: var(--dim); }
#pause .panel { max-height: 92vh; overflow: auto; }