: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(470px,580px); 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(58px,5.4vw,94px); letter-spacing: -.045em; line-height: .95; margin: 24px 0 14px; font-weight: 850; color: var(--ink); white-space: nowrap; }
#menu .tag { font-size: 22px; font-weight: 450; color: var(--ink); margin: 0 0 10px; letter-spacing: -.02em; }
#menu .tag-q { font-size: 15px; font-style: italic; color: var(--accent, #c9a35e); margin: -4px 0 12px; min-height: 2.6em; line-height: 1.3; }
#menu .menu-pan { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--dim); font-size: 13px; letter-spacing: .03em; }
#menu .menu-pan input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
#menu .menu-pan output { min-width: 3.4em; text-align: end; color: var(--ink); font-variant-numeric: tabular-nums; }
#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-barrage { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); max-width: min(900px, 90vw); padding: 12px 22px; background: rgba(90, 8, 4, .82); border: 2px solid #ff4a2e; color: #fff4e8; font-size: 22px; font-weight: 800; letter-spacing: .04em; text-align: center; line-height: 1.25; display: none; z-index: 5; pointer-events: none; text-shadow: 0 1px 3px #000; }
.hud-barrage.on { display: block; }
.hud-barrage.blink { animation: barrage-blink 1s steps(2, start) infinite; }
@keyframes barrage-blink { 50% { background: rgba(200, 20, 10, .9); border-color: #fff; } }
.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-eye.searching { opacity: .8; }
.hud-eye.searching .bar i { background: #d1a764; }
.hud-eye small { font-size: 10px; color: #d4ccba; max-width: 110px; }
.hud-stam .bar i { display: block; height: 100%; background: #d9d2c3; }
.hud-keys { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); font-size: 11.5px; color: #ddd3c1; white-space: nowrap; display: flex; gap: 12px; padding: 4px 12px; border-radius: 4px; background: rgba(10,8,6,.62); text-shadow: 0 1px 2px #000; }
.hud-keys kbd { font: 700 10.5px ui-monospace, Consolas, monospace; color: #efe7da; border: 1px solid #6d6254; border-radius: 3px; padding: 0 4px; background: rgba(0,0,0,.45); }
.hud-keys .k:last-child kbd { border-color: #c9a35e; color: #c9a35e; }
.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; overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 16px; background: rgba(8,6,5,.78); pointer-events: auto; }
.hud-death.hidden { display: none; }
.hud-death .card { text-align: center; width: min(480px, 100%); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow: auto; box-sizing: border-box; }
.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, body.loading .hud-wound { 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.hide-strip .hud-keys { display: none; }
#hud.hide-prompt .hud-prompt { display: none; }
.hud-family .m.bleed .hp i { background: var(--danger); animation: pulse .8s infinite alternate; }
.hud-family .m.down .nm::after { content: attr(data-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; max-width: 100%; }
.settings .look-note { margin: -2px 0 8px; font-size: 12px; color: var(--dim); line-height: 1.35; }
.settings .look-extra[hidden] { display: none !important; }
#pause { position: fixed; inset: 0; display: grid; place-items: center; overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgba(10,8,6,.72); z-index: 12; }
#pause.hidden { display: none; }
#pause .panel { width: min(460px, 100%); max-width: 460px; box-sizing: border-box; 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; position: sticky; bottom: 0; z-index: 1; background: rgba(24,19,14,.96); padding: 10px 0 2px; }
/* 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: 0; height: 0; pointer-events: none; --gap: 6px; opacity: .85; }
.hud-combat .xhair i { position: absolute; background: var(--ink); box-shadow: 0 0 2px rgba(0,0,0,.8); }
.hud-combat .xhair .t, .hud-combat .xhair .b { left: -1px; width: 2px; height: 7px; }
.hud-combat .xhair .l, .hud-combat .xhair .r { top: -1px; width: 7px; height: 2px; }
.hud-combat .xhair .t { bottom: var(--gap); } .hud-combat .xhair .b { top: var(--gap); }
.hud-combat .xhair .l { right: var(--gap); } .hud-combat .xhair .r { left: var(--gap); }
.hud-combat .xhair .c { left: -1px; top: -1px; width: 2px; height: 2px; }
.hud-combat .hitm { position: fixed; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; opacity: 0; }
.hud-combat .hitm i { position: absolute; width: 9px; height: 2px; background: #f4efe6; box-shadow: 0 0 2px #000; left: -4.5px; top: -1px; }
.hud-combat .hitm i:nth-child(1) { transform: rotate(45deg) translateX(-10px); } .hud-combat .hitm i:nth-child(2) { transform: rotate(135deg) translateX(-10px); }
.hud-combat .hitm i:nth-child(3) { transform: rotate(225deg) translateX(-10px); } .hud-combat .hitm i:nth-child(4) { transform: rotate(315deg) translateX(-10px); }
.hud-combat .hitm.head i { background: #ffd24a; } .hud-combat .hitm.kill i { background: #e0402a; width: 12px; left: -6px; }
.hud-combat .mode { position: fixed; right: 22px; bottom: 80px; color: var(--ink); font: 700 12px system-ui, sans-serif; letter-spacing: .12em; text-shadow: 0 1px 3px #000; opacity: .85; }
.hud-combat .breath { position: fixed; left: 50%; top: calc(50% + 44px); width: 60px; height: 3px; margin-left: -30px; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s; }
.hud-combat .breath i { display: block; height: 100%; background: #cfe3f0; }
.hud-combat .breath.on { opacity: .9; } .hud-combat .breath.gasp i { background: #e0402a; }
.hud-dmg { position: fixed; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.hud-dmg .arc { position: absolute; left: -150px; top: -150px; width: 300px; height: 300px; border-radius: 50%; opacity: 0;
  border: 12px solid transparent; border-top-color: rgba(200, 20, 12, .95); filter: drop-shadow(0 0 6px rgba(90,0,0,.95)); }
.hud-dmg .arc::after { content: ''; position: absolute; left: 50%; top: -24px; margin-left: -9px; border: 9px solid transparent; border-bottom: 12px solid rgba(230, 40, 25, .95); }
.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; flex-direction: column; align-items: stretch; gap: 8px; color: #a9b7ba; font-size: 10px; font-weight: 650; letter-spacing: .22em; }
.menu-eyebrow-line { display: flex; align-items: center; justify-content: space-between; }
.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 .family-choice { display: flex; flex-wrap: wrap; gap: 8px; }
#menu .family-choice .mode { flex: 1 1 225px; }
#menu .family-memory { flex: 1 1 110px; display: flex; align-items: center; gap: 9px; padding: 12px; border: 1px solid #394548; border-radius: 2px; background: #17202380; color: #bec9ca; font-size: 12px; line-height: 1.45; cursor: pointer; }
#menu .family-memory 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: #c4a680; }
#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[aria-hidden] { 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; }
/* Before main.js decides (index.html head script): the gate or the space of the play buttons, no layout jump. */
html.first-visit #menu #consent.hidden { display: block !important; }
html.consented #menu #playButtons.hidden { display: grid !important; visibility: hidden; }
#menu .noscript { color: var(--ink); background: rgba(60,45,28,.55); border: 1px solid var(--accent); border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin: 0 0 20px; }
.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 .menu-mark { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.menu-footer .menu-mark > span:first-child { font-size: 9px; color: #9aa6a8; letter-spacing: .16em; }
.menu-footer .menu-copy { font-size: 10px; letter-spacing: 0; color: #8e9899; line-height: 1.3; }
.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; }
/* Browser translation: an ordinary DOM disclosure in the menu's lower-right corner. */
#menu .menu-footer { flex-wrap: wrap; }
#menu .menu-footer nav { flex-wrap: wrap; row-gap: 8px; }
.menu-corner { display: grid; gap: 9px; margin-inline-start: auto; width: 300px; max-width: 100%; min-width: 0; }
#menu .menu-surveillance { margin: 0; padding: 0 0 10px; border-bottom: 1px solid #485155; color: #c7b8a4; font: 11px/1.6 system-ui, sans-serif; text-align: start; overflow-wrap: anywhere; }
#menu .menu-coming { display: block; margin: 0; color: #d9bd8f; font-size: 12px; line-height: 1.45; text-align: start; text-decoration: none; }
#menu .menu-coming:hover strong, #menu .menu-coming:focus-visible strong { text-decoration: underline; }
.menu-coming:focus-visible { outline: 2px solid #e0c08a; outline-offset: 4px; }
.menu-coming strong, .menu-coming span { display: block; }
.menu-coming span { margin-top: 2px; color: #b8aca0; font-size: 11px; }
.menu-coming small { display: block; margin-top: 4px; font-size: 10px; color: #a6b5b8; }
.translation-help { position: relative; margin-inline-start: auto; max-width: min(100%, 300px); min-width: 0; text-align: start; }
.translation-help > summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 8px 10px; border: 1px solid #52636a; background: #101c21db; color: #dde6e6; }
.translation-help > summary::-webkit-details-marker { display: none; }
.translation-help > summary > span:last-child { min-width: 0; }
.translation-help strong { display: block; font-size: 12px; line-height: 1.35; font-weight: 600; }
.translation-help small { display: block; margin-top: 2px; font-size: 10px; line-height: 1.4; color: #a9bec4; }
.translation-help :is(strong, small, p, li, a, h2) { overflow-wrap: anywhere; }
.translation-help .translation-icon { font-size: 25px; line-height: 1; color: #b7d8e2; }
.translation-help[open] > summary { border-color: #a5ceda; }
.translation-help .translation-guide { position: absolute; z-index: 40; inset-inline-end: 0; bottom: calc(100% + 10px); width: min(390px, calc(100vw - 48px)); max-height: calc(100dvh - 115px); overflow-y: auto; padding: 20px; border: 1px solid #617780; background: #101b20; color: #dbe4e5; box-shadow: 0 12px 45px #000a; line-height: 1.55; user-select: text; -webkit-user-select: text; }
#menu .translation-guide h2 { margin: 0 0 12px; color: #f2f3ef; font-size: 18px; line-height: 1.3; }
.translation-guide p { margin: 0 0 12px; font-size: 13px; }
.translation-guide ol { margin: 0 0 14px; padding-inline-start: 20px; font-size: 13px; }
.translation-guide li + li { margin-top: 9px; }
.translation-guide .translation-note { color: #9fb0b5; font-size: 11px; }
#menu .menu-footer .translation-guide a { display: inline-block; font-size: 12px; color: #d4bd95; text-decoration: underline; }
/* Added in the empty middle. The insets leave the legal cluster and the 300px corner alone, and the line stays hidden until that gap exists. */
#menu .menu-footer { position: relative; container: menu-footer / inline-size; }
.menu-hunt { display: none; position: absolute; left: 420px; right: 340px; bottom: 0; max-height: 100%; overflow: hidden; z-index: 1; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; text-align: center; }
.menu-hunt-line { width: min(620px, 100%); margin: 0 0 6px; color: #c7b8a4; font-size: 11px; line-height: 1.45; }
.menu-hunt-reel { display: flex; align-items: center; gap: 8px; width: min(620px, 100%); min-width: 0; text-align: start; }
.menu-hunt-kicker { flex: none; margin: 0; color: #d2c0a4; font-size: 9px; letter-spacing: .14em; line-height: 16px; }
.menu-hunt-win { position: relative; flex: 1; min-width: 0; height: 16px; overflow: hidden; }
.menu-hunt-track { display: flex; width: max-content; height: 16px; animation: menu-hunt-roll 90s linear infinite; will-change: transform; }
.menu-hunt-set { display: flex; flex: none; }
.menu-hunt:hover .menu-hunt-track, .menu-hunt:focus-within .menu-hunt-track { animation-play-state: paused; }
#menu .menu-footer .menu-hunt a { font-size: 11px; line-height: 16px; color: #e4d7c4; white-space: nowrap; margin-right: 28px; }
#menu .menu-footer .menu-hunt a b { color: #f2b28a; font-weight: 700; margin-inline-end: 6px; }
@keyframes menu-hunt-roll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@container menu-footer (min-width: 1040px) { .menu-hunt { display: flex; } }
html[dir=rtl] .menu-hunt { left: 340px; right: 460px; direction: rtl; }
html[dir=rtl] .menu-hunt-track { direction: ltr; }
@media (max-width: 900px) { .menu-hunt { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .menu-hunt-track { animation-duration: 1200s; } }
@media (max-width: 900px) { .translation-help .translation-guide { position: static; width: 100%; max-height: none; margin-top: 10px; padding: 16px; } }
@media (max-height: 760px) and (min-width: 901px) { #menu { padding-top: 20px; gap: 12px 50px; } #menu h1 { margin-top: 16px; font-size: 64px; } .menu-intro { margin-bottom: 18px; } }
@media (max-width: 1100px) { #menu { grid-template-columns: 1fr minmax(420px,480px); 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; }
/* The health diagram, small, from the moment the person you are playing is hurt. */
.hud-wound { position: absolute; left: 16px; bottom: 112px; width: 78px; height: 132px; padding: 6px 6px 4px; box-sizing: border-box; background: radial-gradient(ellipse, rgba(48,43,34,.9), rgba(16,14,12,.92) 74%); border: 1px solid rgba(81,73,55,.95); border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.45); transform: scale(var(--hud-scale, 1)); transform-origin: bottom left; pointer-events: none; }
.hud-wound[hidden] { display: none !important; }
.hud-wound svg { display: block; width: 100%; height: 100%; }
.hud-wound path { stroke-width: 4; }
@keyframes wound-bleed { from { opacity: 1; } to { opacity: .72; } }
.hud-wound path[data-bleed="1"] { animation: wound-bleed .85s ease-in-out infinite alternate; }
/* 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, body.calm .hud-wound path { 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: calc(100vh - 24px); max-height: calc(100svh - 24px); min-height: 0; overflow: auto; }
@media (max-width: 900px), (max-height: 700px) {
  #pause, .squad-screen, .privacy-gate, .hud-death { place-items: start center; }
  #menu { max-height: 100vh; max-height: 100svh; overflow-y: auto; overscroll-behavior: contain; }
  #fatal { align-items: flex-start !important; }
}
/* The 18+ gate holds an offshore preview. Signal damage belongs to the scene, never the readable form. */
body.gated { background: #0b0d0e; }
body.gated .menu-scene-caption, body.gated .menu-intro { visibility: hidden; }
#view { transition: filter .65s ease-out; }
body.gated #view { filter: grayscale(.8) sepia(.15) contrast(.78) blur(.45px); }
.menu-preview-feed { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .65s ease-out, visibility 0s .65s; }
body.gated.in-menu .menu-preview-feed { opacity: 1; visibility: visible; transition-delay: 0s; }
.menu-preview-feed::before { content: ''; position: absolute; inset: 0; opacity: .38; background: repeating-linear-gradient(0deg, #02070866 0px, #02070866 1px, transparent 1px, transparent 4px), repeating-linear-gradient(103deg, #b4c5c70a 0px, #b4c5c70a 1px, transparent 1px, transparent 7px); box-shadow: inset 0 0 180px #0008; }
.menu-preview-feed::after { content: ''; position: absolute; inset: -100% 0 0; opacity: .1; background: linear-gradient(transparent 48%, #c3d4cc45 49%, #03090999 50%, transparent 52%); animation: preview-signal 17s linear infinite; }
@keyframes preview-signal { from { transform: translateY(-10%); } to { transform: translateY(50%); } }
.preview-station { position: absolute; left: 4vw; bottom: 13vh; display: grid; grid-template-columns: auto auto; align-items: center; gap: 3px 9px; color: #c4cbc7; opacity: .7; font: 10px/1.3 monospace; letter-spacing: .08em; text-shadow: 0 1px 4px #000; }
.preview-station b { grid-row: span 2; padding: 5px 6px; border: 1px solid #a5b2ad; font: 700 22px/1 monospace; letter-spacing: -.06em; }
.preview-station small { font-size: 9px; }
body.calm .menu-preview-feed::after { animation: none; }
@media (prefers-reduced-motion: reduce) { .menu-preview-feed::after { animation: none; } #view, .menu-preview-feed { transition: none; } }

/* Accepted openings follow the render clock; framing never captures pointer or keyboard input. */
body.arrival-active #view { transition: none; filter: grayscale(calc(.8 - var(--arrival-clear, 0) * .8)) sepia(calc(.15 - var(--arrival-clear, 0) * .15)) contrast(calc(.78 + var(--arrival-clear, 0) * .22)) blur(calc(.45px - var(--arrival-clear, 0) * .45px)); }
body.arrival-active.in-menu .menu-preview-feed { opacity: calc(1 - var(--arrival-clear, 0)); visibility: visible; transition: none; }
body.arrival-active .menu-scene-caption { opacity: 0; }
.arrival-frame { position:fixed; inset:0; z-index:9; pointer-events:none; opacity:var(--arrival-cinematic,0); background:radial-gradient(ellipse at 48% 46%,transparent 34%,#04070966 100%); }
body.arrival-flight #menu { background:linear-gradient(90deg,transparent 35%,#07101335 80%,#07101360),linear-gradient(0deg,#05090b44,transparent 24%,transparent 85%,#05090b33); }
body.arrival-active #menu .panel > :not(.menu-eyebrow),body.arrival-active .menu-footer,body.arrival-active .menu-masthead,body.arrival-active .qtick,body.arrival-active .qparrot,body.arrival-active .qnews { transition:opacity .65s ease; }
body.arrival-flight #menu .panel > :not(.menu-eyebrow) { opacity:calc(1 - var(--arrival-cinematic,0) * .84); }
body.arrival-flight .menu-footer,body.arrival-flight .menu-masthead,body.arrival-flight .qtick,body.arrival-flight .qparrot,body.arrival-flight .qnews { opacity:calc(1 - var(--arrival-cinematic,0) * .9); }
body.arrival-flight #menu .panel:focus-within > :not(.menu-eyebrow),body.arrival-flight :is(.menu-footer,.qtick,.qparrot,.qnews):is(:hover,:focus-within) { opacity:1; }
.arrival-controls { position: fixed; inset-inline-start: max(16px, 4.5vw); top: max(24px,env(safe-area-inset-top)); z-index: 15; display:flex; width: max-content; max-width: calc(100vw - 32px); }
.arrival-controls button { padding: 9px 13px; border: 1px solid #9eacac; border-radius: 3px; background: #10191ddd; color: #e9e5db; font: 12px/1.3 system-ui, sans-serif; cursor: pointer; }
.arrival-controls button:hover, .arrival-controls button:focus-visible { background: #344247; outline:2px solid #e9c9a0; outline-offset:3px; }
.arrival-controls button:disabled { opacity:.5; cursor:default; }
/* The opening source card is an .evcard (ui/EventCard.js): same shell as the Hind Rajab card. */
.arrival-controls[hidden], .arrival-card[hidden],.arrival-frame[hidden],.arrival-controls button[hidden] { display: none; }
@media (max-width: 900px) { .arrival-controls { gap:6px; max-width:calc(100vw - 125px); } .arrival-controls button { padding:8px 10px; } }
body.arrival-reduced #menu .panel > :not(.menu-eyebrow),body.arrival-reduced :is(.menu-footer,.menu-masthead,.qtick,.qparrot,.qnews) { transition:none; }
@media (prefers-reduced-motion: reduce) { body.arrival-active #menu .panel > :not(.menu-eyebrow),body.arrival-active :is(.menu-footer,.menu-masthead,.qtick,.qparrot,.qnews) { transition:none; } }

/* Fighter deployment (menu): with the lobby's open squad, or alone (src/game/Squads.js). */
#menu .squad-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0 0 0 22px; }
#menu .squad-pick.hidden { display: none; }
#menu .squad-opt { font-size: 13px; padding: 6px 8px; }
#menu .squad-opt small { display: block; font-size: 11.5px; }

/* Raid time (src/ui/RaidTimePicker.js): Day / Night, two live clocks twelve hours apart (as Tarkov picks a raid). */
#menu .raid-time { flex-basis: 100%; display: grid; gap: 6px; margin: 0 0 4px; }
#menu .raid-time .section-label { margin: 0; }
#menu .rt-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#menu .rt-box { position: relative; display: flex; align-items: center; gap: 11px; min-height: 48px; padding: 11px 12px; border: 1px solid #394548; border-radius: 2px; background: #17202380; color: #a6b2b4; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; transition: border-color .18s, background .18s; }
#menu .rt-box:hover { border-color: #5d6d71; }
#menu .rt-box:has(input:checked) { border-color: #9db0b4; background: #647c8629; }
#menu .rt-box:has(input:focus-visible) { outline: 2px solid #e6d4b5; outline-offset: 2px; }
#menu .rt-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
#menu .rt-check { flex: none; position: relative; width: 16px; height: 16px; border: 1.5px solid #6f7f83; border-radius: 50%; box-sizing: border-box; transition: border-color .18s, background .18s; }
#menu .rt-box:has(input:checked) .rt-check { border-color: #e6d4b5; background: #e6d4b5; }
#menu .rt-box:has(input:checked) .rt-check::after { content: ''; position: absolute; left: 4.3px; top: 1.6px; width: 3.2px; height: 7px; border: solid #172023; border-width: 0 2px 2px 0; transform: rotate(45deg); }
#menu .rt-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
#menu .rt-day .rt-icon { color: #f2c46b; background: radial-gradient(circle, #f2c46b2e, #f2c46b05 70%); }
#menu .rt-night .rt-icon { color: #b8c8e8; background: radial-gradient(circle, #8aa0d02e, #8aa0d005 70%); }
#menu .rt-box:not(:has(input:checked)) .rt-icon { opacity: .6; }
#menu .rt-text { display: grid; gap: 2px; min-width: 0; }
#menu .rt-text b { color: var(--ink); font-size: 14px; font-weight: 650; }
#menu .rt-box:not(:has(input:checked)) .rt-text b { color: #bec9ca; }
.rt-clock { direction: ltr; unicode-bidi: isolate; font: 600 17px/1.1 ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: .04em; color: #e6d4b5; white-space: nowrap; }
#menu .rt-box:not(:has(input:checked)) .rt-clock { color: #9aa7a9; }
#menu .rt-note { margin: 0; color: #98a6a8; font-size: 11px; line-height: 1.45; }
#menu .raid-time.locked .rt-box:has(input:disabled) { cursor: default; opacity: .45; }
#menu .raid-time.locked .rt-box:has(input:disabled):hover { border-color: #394548; }
@media (max-width: 380px) { #menu .rt-box { gap: 8px; padding: 10px 9px; } #menu .rt-icon { width: 28px; height: 28px; } #menu .rt-clock { font-size: 15px; } }
/* A city's read-only clock in the lobby browser (ui/OnlineScreen.js). */
.rt-badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; color: #a6b2b4; font-size: 11.5px; }
.rt-badge-icon { display: inline-grid; width: 14px; height: 14px; }
.rt-badge-icon svg { width: 14px; height: 14px; }
.rt-badge.rt-day .rt-badge-icon { color: #f2c46b; } .rt-badge.rt-night .rt-badge-icon { color: #b8c8e8; }
.rt-badge .rt-clock { font-size: 12px; }

/* Squad screen (src/ui/SquadScreen.js): party, callsign, friend code, friends. Above the menu (z 10), below fatal. */
.squad-screen { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; box-sizing: border-box; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: linear-gradient(90deg, rgba(7,11,13,.86), rgba(7,11,13,.96) 55%), rgba(7,11,13,.5); color: #f2f3ef; font-size: 14px; overflow: auto; overscroll-behavior: contain; }
.squad-screen.hidden { display: none; }
.squad-screen .sq-wrap { width: min(1080px, 100%); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 16px; }
.squad-screen .sq-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 16px; border-bottom: 1px solid #344045; padding-bottom: 12px; position: sticky; top: 0; z-index: 2; background: #0d1619; }
.squad-screen .sq-back, .squad-screen .mk-close, .squad-screen .ol-back { flex: 0 0 auto; min-height: 40px; }
.squad-screen .sq-eyebrow { margin: 0; color: #c9a35e; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.squad-screen .sq-eyebrow span { color: #5d6a6e; }
.squad-screen h2 { margin: 4px 0 0; font-size: 40px; font-weight: 850; letter-spacing: -.04em; line-height: 1; }
.squad-screen h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #c9a35e; font-weight: 700; }
.squad-screen button { border-radius: 2px; font-size: 14px; padding: 10px 16px; background: #e6d4b5; border-color: #e6d4b5; color: #172023; }
.squad-screen button.ghost { background: #17202366; border-color: #566165; color: #e4e9e8; font-weight: 500; }
.squad-screen button.small { padding: 6px 12px; font-size: 12.5px; }
.squad-screen button.tiny { padding: 4px 9px; font-size: 12px; }
.squad-screen button:disabled { opacity: .45; }
.squad-screen :is(button, input):focus-visible { outline: 2px solid #99d7ef; outline-offset: 2px; }
.squad-screen .sq-cols { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; min-height: 0; }
.squad-screen .sq-panel { background: #142025e6; border: 1px solid #3d4b50; border-top: 2px solid #c9a35e; border-radius: 2px; padding: 16px 18px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.squad-screen .sq-lead { color: #b5bdbd; margin: 0 0 14px; line-height: 1.5; }
.squad-screen .sq-main { width: 100%; padding: 13px 16px; font-size: 16px; }
.squad-screen .sq-label { display: block; margin: 14px 0 5px; color: #869699; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.squad-screen .sq-row { display: flex; gap: 8px; align-items: center; }
.squad-screen .sq-input { flex: 1; min-width: 0; width: 100%; box-sizing: border-box; padding: 9px 10px; font: inherit; color: #f2f3ef; background: #0e171b; border: 1px solid #546369; border-radius: 2px; user-select: text; -webkit-user-select: text; }
.squad-screen .sq-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: #95a3a5; border: 1px solid #465359; padding: 2px 6px; }
.squad-screen .sq-tag.ok { color: #9fe0a4; border-color: #4f8a55; }
.squad-screen .sq-tag.lead { color: #c9a35e; border-color: #c9a35e; }
.squad-screen .sq-ping { color: #95a3a5; font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.squad-screen .sq-btns { display: flex; gap: 4px; justify-content: flex-end; }
.squad-screen .sq-log p { margin: 0 0 2px; overflow-wrap: anywhere; }
.squad-screen .sq-log b { color: #e6d4b5; margin-right: 4px; }
.squad-screen .sq-log .sys { color: #7f8e91; font-style: italic; }
.squad-screen .sq-ready.on { background: #2c4a30; border-color: #6fb676; color: #e8f6e8; }
.squad-screen .sq-msg { min-height: 1.4em; margin: 12px 0 0; color: #c9a35e; line-height: 1.4; }
.squad-screen .sq-msg.bad { color: #f09a82; }
.squad-screen .sq-fcrow b { font-size: 22px; letter-spacing: .14em; font-family: ui-monospace, Consolas, monospace; color: #e6d4b5; flex: 1; user-select: text; -webkit-user-select: text; }
.squad-screen .sq-relay { font-size: 12px; color: #aab6b8; margin: 12px 0 0; line-height: 1.5; }
.squad-screen .sq-fh { margin-top: 20px; }
.squad-screen .sq-friends { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.squad-screen .sq-friend { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 6px 8px; border: 1px solid #2c393e; background: #0f191dcc; }
.squad-screen .sq-fname { display: grid; min-width: 0; }
.squad-screen .sq-fname b, .squad-screen .sq-fname small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.squad-screen .sq-fname small { color: #869699; font-size: 11.5px; }
.squad-screen .sq-x { padding: 3px 7px; }
.squad-screen .sq-dim { color: #7f8e91; font-size: 12.5px; }
.squad-screen .sq-invite { display: flex; gap: 6px; align-items: center; margin-top: 10px; padding: 8px; border: 1px solid #c9a35e; background: #3c2d1c66; font-size: 13px; }
.squad-screen .sq-invite span { flex: 1; }
.squad-screen .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #56636a; }
.squad-screen .dot.on { background: #6fd177; box-shadow: 0 0 6px #6fd17788; }
.squad-screen .dot.warn { background: #e0a53a; }
.squad-screen .dot.unk { background: transparent; border: 1px solid #56636a; }
.squad-screen .hidden { display: none; }
@media (max-width: 820px) { .squad-screen .sq-cols { grid-template-columns: 1fr; } .squad-screen h2 { font-size: 30px; } }
@media (max-height: 760px) { .squad-screen .sq-log { height: 84px; } .squad-screen h2 { font-size: 32px; } .squad-screen .sq-panel { padding: 12px 14px; } }

/* The shared lobby (party slots, banner, Find squad). */
.squad-screen .sq-lobbyhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.squad-screen .sq-lobbyhead h3 { margin: 0; }
.squad-screen .sq-codebox { display: flex; align-items: center; gap: 6px; }
.squad-screen .sq-codebox .sq-label { margin: 0; }
.squad-screen .sq-code { font-size: 17px; letter-spacing: .16em; color: #e6d4b5; font-family: ui-monospace, Consolas, monospace; margin-right: 4px; user-select: text; -webkit-user-select: text; }
.squad-screen .sq-banner { display: flex; align-items: center; gap: 10px; min-height: 42px; box-sizing: border-box; padding: 9px 12px; margin-bottom: 10px; border: 1px solid #3d4b50; background: #0e171bcc; font-size: 15px; color: #dfe6e5; }
.squad-screen .sq-banner b { color: #e6d4b5; }
.squad-screen .sq-spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c9a35e55; border-top-color: #c9a35e; animation: sq-spin 0.9s linear infinite; flex: none; }
.squad-screen .sq-banner[data-phase=search] { border-color: #c9a35e; background: #3c2d1c55; }
.squad-screen .sq-banner[data-phase=search] .sq-spin, .squad-screen .sq-banner[data-phase=wait] .sq-spin { display: inline-block; }
.squad-screen .sq-banner[data-phase=count] { border-color: #6fb676; background: #22402699; font-size: 20px; font-weight: 700; }
.squad-screen .sq-banner[data-phase=count] b { color: #bff0c2; font-size: 24px; }
@keyframes sq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .squad-screen .sq-spin { animation: none; } }
.squad-screen .sq-slots { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.squad-screen .sq-slot:last-child:nth-child(odd) { grid-column: 1 / -1; }
.squad-screen .sq-slot { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 88px; padding: 8px 10px; border: 1px solid #33424a; background: #0f191dcc; }
.squad-screen .sq-slot.you { border-color: #c9a35e88; }
.squad-screen .sq-slot.ready { box-shadow: inset 3px 0 0 #6fb676; }
.squad-screen .sq-slot.empty { color: #6d7a7d; border-style: dashed; }
.squad-screen .sq-slot.empty .sq-sil { opacity: .25; }
.squad-screen .sq-sil { width: 46px; height: 62px; }
.squad-screen .sq-info { display: grid; gap: 3px; min-width: 0; }
.squad-screen .sq-name { font-weight: 650; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.squad-screen .sq-name small { color: #869699; font-weight: 400; }
.squad-screen .sq-tags { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.squad-screen .sq-kit { font-size: 12px; color: #aab6b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.squad-screen .sq-slot .sq-btns { justify-content: flex-start; }
.squad-screen .sq-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 10px; }
.squad-screen .sq-actions .sq-main { width: auto; padding: 12px 14px; }
.squad-screen .sq-find.on { background: #3c2d1c; border-color: #c9a35e; color: #f2e4c8; }
.squad-screen .sq-chat { border: 1px solid #33424a; background: #0b1316cc; padding: 8px; margin-bottom: 10px; }
.squad-screen .sq-log { height: 76px; overflow-y: auto; font-size: 13px; line-height: 1.45; margin-bottom: 6px; user-select: text; -webkit-user-select: text; scrollbar-width: thin; }
.squad-screen .sq-foot { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.squad-screen .sq-foot .sq-input { padding: 6px 9px; font-size: 13px; }
@media (max-height: 760px) { .squad-screen .sq-slot { min-height: 76px; padding: 6px 8px; } .squad-screen .sq-log { height: 52px; } .squad-screen .sq-sil { height: 54px; } }
@media (max-width: 980px) { .squad-screen .sq-foot { grid-template-columns: 1fr; } }

/* The private relay's question (src/ui/PrivacyGate.js). */
.privacy-gate { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; overflow: auto; overscroll-behavior: contain; box-sizing: border-box; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: rgba(5,8,10,.8); color: #f2f3ef; }
.privacy-gate .pg-box { width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow: auto; box-sizing: border-box; background: #142025; border: 1px solid #3d4b50; border-top: 2px solid #c9a35e; padding: 20px 22px; line-height: 1.5; }
.privacy-gate .pg-eyebrow { margin: 0; color: #c9a35e; font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.privacy-gate h2 { margin: 4px 0 10px; font-size: 22px; }
.privacy-gate .pg-fine { color: #aab6b8; font-size: 13px; }
.privacy-gate .pg-buttons { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; position: sticky; bottom: 0; background: #142025; padding-top: 10px; }
.privacy-gate button { border-radius: 2px; background: #e6d4b5; border-color: #e6d4b5; color: #172023; }
.privacy-gate button.ghost { background: transparent; border-color: #566165; color: #e4e9e8; }
/* Voice chat (audio/Voice.js, ui/VoiceGate.js, ui/VoiceHud.js) */
.settings .voice-opts.off { opacity: .45; }
.settings .voice-fine { font-size: 12px; opacity: .8; margin: 4px 0 10px; }
.voice-gate .vg-list { margin: 0 0 10px; padding-left: 18px; }
.voice-gate .vg-list li { margin: 4px 0; }
/* Pause menu up in a squad run: the squad panel (with its Mute / Block buttons) comes over the dimmed view, alone. */
body.voice-free #hud { z-index: 13; }
body.voice-free #hud > :not(.hud-squad) { visibility: hidden; }
body.voice-free .hud-squad { pointer-events: auto; }
/* "Remember" (render/Remember.js): the button (family mode), its rest after a memory cracks, and the calmer HUD while remembering. */
.hud-remember { position: absolute; right: 22px; bottom: 34px; pointer-events: auto; display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 11px; border-radius: 22px; border: 1px solid rgba(255, 214, 150, .32); background: rgba(24, 18, 12, .55); color: #f3e2c4; font: 600 13px/1 system-ui, sans-serif; letter-spacing: .05em; cursor: pointer; text-shadow: none; transition: background .5s, box-shadow .6s, opacity .3s, border-color .5s; transform: scale(var(--hud-scale, 1)); transform-origin: bottom right; }
.hud-remember .glyph { font-size: 18px; color: #ffcf8a; line-height: 1; position: relative; z-index: 1; }
.hud-remember .ring { position: absolute; left: 7px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: conic-gradient(rgba(0, 0, 0, .6) var(--cd, 0deg), transparent 0); pointer-events: none; z-index: 2; }
.hud-remember kbd { font: 600 11px/1 ui-monospace, monospace; padding: 3px 6px; border-radius: 4px; background: rgba(255, 255, 255, .1); color: #d9c6a4; }
.hud-remember:hover { background: rgba(60, 42, 22, .72); border-color: rgba(255, 214, 150, .6); }
.hud-remember:focus { outline: none; }
.hud-remember.on { background: rgba(126, 86, 36, .5); border-color: rgba(255, 220, 160, .7); box-shadow: 0 0 26px rgba(255, 196, 110, .5); }
.hud-remember.on .glyph { animation: rm-breathe 3.2s ease-in-out infinite; }
.hud-remember.rest { opacity: .55; cursor: default; }
.hud-remember.hidden { display: none; }
.hud-rm-intro { position: absolute; top: clamp(125px, 23vh, 220px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(520px, 88vw); box-sizing: border-box; padding: 12px 18px; border: 1px solid #dcb276; border-radius: 4px; background: #20190fe8; color: #ffdda3; font: 600 15px/1.5 system-ui, sans-serif; text-align: center; text-shadow: none; pointer-events: none; }
.hud-rm-intro[hidden] { display: none; }
@keyframes rm-breathe { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
#hud.remembering .hud-keys, #hud.remembering .hud-run, #hud.remembering .hud-stam, #hud.remembering .hud-top, #hud.remembering .hud-crowd, #hud.remembering .hud-prompt { opacity: .22; transition: opacity 1.4s; }
body.calm .hud-remember.on .glyph { animation: none; }
/* The memory's title (render/Remember.js REMEMBER_TITLE): large, serif, warm, fading in once the memory has come. */
.hud-rm-title { position: absolute; left: 0; right: 0; top: 6.5vh; text-align: center; pointer-events: none; opacity: 0; transition: opacity 1.1s ease, letter-spacing 1.1s ease, filter 1.1s ease; }
.hud-rm-title .t { display: inline-block; font: italic 400 clamp(34px, 6.2vw, 86px)/1.05 Georgia, 'Palatino Linotype', 'Book Antiqua', Palatino, 'Times New Roman', serif; letter-spacing: .02em; color: #fff4e2; text-shadow: 0 0 22px rgba(255, 190, 110, .55), 0 0 64px rgba(255, 160, 80, .32), 0 2px 3px rgba(60, 30, 10, .45); }
.hud-rm-title .rule { display: block; width: min(34vw, 380px); height: 1px; margin: .9vh auto 0; background: linear-gradient(90deg, transparent, rgba(255, 226, 180, .75), transparent); transform: scaleX(0); transition: transform 2.6s cubic-bezier(.2, .7, .2, 1) .5s; }
.hud-rm-title .sub { display: block; margin-top: 1vh; font: italic 400 clamp(14px, 1.5vw, 20px)/1.2 Georgia, 'Palatino Linotype', serif; letter-spacing: .18em; color: rgba(255, 238, 212, .82); text-shadow: 0 0 14px rgba(255, 180, 100, .5), 0 1px 2px rgba(60, 30, 10, .5); }
.hud-rm-title .sub:empty { display: none; }
.hud-rm-title.in { opacity: 1; transition: opacity 2.8s cubic-bezier(.3, 0, .2, 1), letter-spacing 4.5s cubic-bezier(.2, .6, .2, 1), filter 2.4s ease; }
.hud-rm-title.in .t { animation: rm-title-in 4.5s cubic-bezier(.2, .6, .2, 1) both; }
.hud-rm-title.in .rule { transform: scaleX(1); }
.hud-rm-title.settle { opacity: .62; transition: opacity 6s ease; }
.hud-rm-title.gone { opacity: 0; transition: opacity .16s linear; }
@keyframes rm-title-in { 0% { letter-spacing: .16em; filter: blur(7px); transform: translateY(8px); } 100% { letter-spacing: .02em; filter: blur(0); transform: none; } }
body.calm .hud-rm-title.in .t { animation: none; }
/* Finding a game (ui/OnlineScreen.js), the squad lobby's connection line, the menu's rejoin row, the HUD's ping. */
.squad-screen .sq-conn { display: flex; align-items: center; gap: 6px; margin: -4px 0 10px; font-size: 12.5px; color: #aab6b8; }
.squad-screen .sq-warn { color: #f0c27a; }
.squad-screen .sq-msg .sq-retry, .online-screen .ol-msg button { margin-left: 8px; }
.online-screen .ol-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 5px; max-height: 320px; overflow-y: auto; }
.online-screen .ol-row.full { opacity: .7; }
.online-screen .ol-ping { align-self: center; margin-right: 6px; }
.online-screen .ol-ping.bad { color: #f09a82; }
.online-screen .ol-region { display: flex; align-items: center; gap: 8px; }
.online-screen .ol-region .sq-label { margin: 0; }
.online-screen .ol-regionsel { width: auto; padding: 5px 8px; }
.online-screen .ol-actions { grid-template-columns: 1fr auto; }
.online-screen .ol-rejoin { margin-bottom: 12px; }
.online-screen .ol-rejoin .sq-invite { margin-top: 0; }
.online-screen .ol-hint { margin: 0; }
.menu-rejoin { display: flex; align-items: center; gap: 8px; flex-basis: 100%; padding: 8px 10px; border: 1px solid #c9a35e; background: #3c2d1c66; font-size: 13px; }
.menu-rejoin span { flex: 1; }
.menu-rejoin.hidden { display: none; }
.hud-lobby .ping.bad { color: #f09a82; }
.hud-lobby.searching { color: #e6c98f; }

/* Languages (src/i18n). The language picker on the menu, and Arabic: right to left, an Arabic-capable system font
   stack (no font files), and no letter-spacing or capitals, which break Arabic's joined letters. */
.menu-lang { margin: 0; align-self: flex-start; }
.menu-lang select, .settings .lang-pick { font: inherit; font-size: 12px; letter-spacing: 0; color: #dce4e5; background: #111b20; border: 1px solid #546369; border-radius: 2px; padding: 3px 6px; }
#menu .menu-footer #langLink { font-size: 11px; }
html.i18n-wait #menu, html.i18n-wait #pause { visibility: hidden; }
html[lang=ar] { --arabic: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", "Geeza Pro", "Arial", system-ui, sans-serif; }
html[lang=ar] body, html[lang=ar] button, html[lang=ar] input, html[lang=ar] select { font-family: var(--arabic); }
html[lang=ar] body * { letter-spacing: 0 !important; text-transform: none !important; }
html[lang=ar] :is(kbd, code, .menu-controls dt, .squad-screen .sq-code) { direction: ltr; unicode-bidi: isolate; }
html[dir=rtl] .flip { display: inline-block; transform: scaleX(-1); }
/* The menu keeps its cinematic layout (the city and the fighter on the left, the panel on the right); only the
   panel's own content runs right to left. */
html[dir=rtl] #menu { direction: ltr; }
html[dir=rtl] #menu > * { direction: rtl; }
html[dir=rtl] #menu .panel { text-align: start; padding: 12px 0 14px 14px; }
html[dir=rtl] #menu .menu-play { text-align: start; }
html[dir=rtl] .button-meta span { margin-left: 0; margin-right: 12px; }
html[dir=rtl] #menu .consent input[type=date], html[dir=rtl] .consent .row input[type=date] { margin-left: 0; margin-right: 10px; }
html[dir=rtl] .menu-scene-caption > span { border-left: 0; padding-left: 0; border-right: 2px solid #d2c0a4; padding-right: 10px; }
html[dir=rtl] .masthead-divider { margin: 0 18px; }
html[lang=ar] #menu h1 { letter-spacing: 0; font-weight: 800; }
html[lang=ar] #menu .tag-q { font-style: normal; }
html[lang=ar] .menu-edition, html[lang=ar] .menu-eyebrow, html[lang=ar] .menu-footer .menu-mark > span:first-child, html[lang=ar] .menu-device-note, html[lang=ar] #menu .section-label, html[lang=ar] .menu-play small, html[lang=ar] .button-meta { font-size: 11px; }
html[dir=rtl] .settings .row output { text-align: left; }
html[dir=rtl] .hud-run { text-align: right; }
html[dir=rtl] .voice-gate .vg-list { padding-left: 0; padding-right: 18px; }
html[dir=rtl] .squad-screen .sq-ping { text-align: left; }
html[dir=rtl] .squad-screen .sq-log b { margin-right: 0; margin-left: 4px; }
html[dir=rtl] .squad-screen .sq-code { margin-right: 0; margin-left: 4px; }
html[dir=rtl] .menu-scene-caption { justify-self: start; }
/* Arabic: each quote in the ticker carries its translation too, so the ticker takes the left column (over the city),
   clear of the menu panel, and the fighter card starts below it. */
@media (min-width: 1101px) {
  html[lang=ar] body.in-menu .qtick { left: 190px; transform: none; width: calc(95.5vw - 670px); }
}
@media (min-width: 901px) and (max-width: 1100px) {
  html[lang=ar] body.in-menu .qtick { left: 30px; transform: none; width: calc(100vw - 490px); }
}
/* Small screens have one scrollable menu column. The original quote, translation and attribution take their
   own space above it instead of becoming a fixed overlay across the consent form or play controls. */
@media (max-width: 900px) {
  body.in-menu #menu .qtick { position: static; inset: auto; transform: none; width: 100%; max-width: 460px; min-width: 0;
    flex: 0 0 auto; align-self: center; order: -1; padding: 10px 0; overflow-wrap: anywhere; }
}
html[lang=ar] body.in-menu .qtick .tr { font-size: 13px; }
html[lang=ar] .fpv { top: 170px; max-height: calc(100vh - 220px); }
html[lang=ar] .hud-keys { white-space: normal; width: min(96vw, 1400px); text-align: center; line-height: 1.35; }
html[dir=rtl] .mclip .cap { direction: ltr; text-align: left; }

/* The Family rests after a family died (main.js syncFamilyRest). */
label.mode.resting { opacity: .6; }
label.mode .rest { display: block; margin-top: 4px; color: #d9895a; font-style: normal; font-size: 12px; font-weight: 700; }

/* The flea market (ui/MarketScreen.js; the panel is a .squad-screen). */
.market-screen .mk-bal { margin-inline-start: auto; color: #c9a35e; font-weight: 800; font-size: 18px; }
.market-screen .mk-body { overflow-y: auto; min-height: 0; }
.market-screen .mk-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.market-screen .mk-tabs button.on { background: #e6d4b5; color: #172023; border-color: #e6d4b5; }
.market-screen .mk-msg { min-height: 1.4em; margin: 4px 0 8px; color: #9fd88c; }
.market-screen .mk-msg.bad { color: #e08a6a; }
.market-screen .mk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.market-screen .mk-list li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; background: #17202366; border: 1px solid #2c3538; }
.market-screen .mk-list li > span:first-child { flex: 1 1 180px; }
.market-screen .mk-row { cursor: pointer; }
.market-screen .mk-row:hover { border-color: #c9a35e; }
.market-screen .mk-p { color: #b9ad99; font-size: 13px; }
.market-screen .mk-list input { width: 80px; padding: 4px 6px; background: #0e1315; color: #f2f3ef; border: 1px solid #394548; }
.market-screen .mk-list button { padding: 6px 12px; }
.market-screen .mk-packs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.market-screen .mk-note { color: #9aa3a6; font-size: 13px; }
.market-screen .mk-acct { display: flex; gap: 6px; margin: 6px 0; }
.market-screen .mk-acct input { flex: 1; min-width: 0; padding: 6px 8px; background: #0e1315; color: #f2f3ef; border: 1px solid #394548; font-family: monospace; font-size: 12px; }
.market-screen .mk-packs button { display: grid; gap: 2px; }
.market-screen .mk-soon { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #c9a35e; }

.content-warning { margin: 0 0 12px; color: #c4a680; font-size: 12px; line-height: 1.5; }

/* Phone controller card (ui/PhoneHost.js). It stays on the monitor while a headset is on. */
.phone-pad-card { position: fixed; z-index: 30; top: max(16px, env(safe-area-inset-top)); inset-inline-end: 16px; width: min(360px, calc(100vw - 24px)); padding: 14px 16px; background: rgba(24, 19, 14, .94); border: 1px solid #6d6254; border-radius: 10px; color: var(--ink); box-shadow: 0 12px 40px #000a; }
.phone-pad-card .phone-pad-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.phone-pad-card .phone-pad-label { margin: 8px 0 0; font-size: 12px; color: var(--dim); }
.phone-pad-card .phone-pad-code { margin: 2px 0 8px; font-size: 28px; letter-spacing: .28em; font-weight: 800; color: var(--accent); user-select: text; -webkit-user-select: text; }
.phone-pad-card .phone-pad-url { width: 100%; margin: 0 0 8px; padding: 6px 8px; background: #1b1612; color: var(--ink); border: 1px solid #6d6254; border-radius: 4px; font: 12px/1.3 ui-monospace, monospace; }
.phone-pad-card .phone-pad-status { min-height: 1.3em; margin: 0 0 8px; color: var(--accent); font-size: 13px; }
.phone-pad-card .phone-pad-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.phone-pad-card button.small { padding: 4px 12px; font-size: 13px; }
/* The Afterworld (ui/AfterworldMenu.js, html.afterworld): the menu's mode row, and GAZA turned CV-20, a title gone
   sick: bile-green ink spotted with raised pustules (radial gradients clipped to the letters), a slow feverish
   swell, a damp glow. Nothing of it applies with the Afterworld off. */
#menu .afterworld-toggle .aw-chip { display: inline-block; margin-inline-start: 6px; padding: 1px 6px; border: 1px solid #6f7f3c; border-radius: 9px; color: #c8d68a; font: 700 10px/1.5 ui-monospace, monospace; letter-spacing: .12em; vertical-align: 2px; }
#menu .afterworld-toggle:has(input:checked) { border-color: #9fb14f; background: linear-gradient(100deg, #2b3a1a99, #17202380 70%); }
#menu .afterworld-toggle input { accent-color: #a9c45a; }
#menu .aw-desc { max-width: 30em; margin: -2px 0 12px; color: #b7c48e; font-size: 13px; line-height: 1.45; }
html.afterworld #menu h1 { position: relative; letter-spacing: -.02em; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 800;
  color: #b9cc63; background:
    radial-gradient(circle at 14% 72%, #f1f5b8 0 3%, #d6c25a 3.6% 5%, transparent 5.8%),
    radial-gradient(circle at 37% 30%, #eef3a2 0 2.4%, #c7b14c 3% 4.2%, transparent 5%),
    radial-gradient(circle at 63% 64%, #f5f0b0 0 3.4%, #cdb751 4% 5.6%, transparent 6.4%),
    radial-gradient(circle at 86% 36%, #e9f0a0 0 2.2%, #bca945 2.8% 3.8%, transparent 4.6%),
    radial-gradient(ellipse at 50% 120%, #4d5f22 0 30%, transparent 62%),
    linear-gradient(176deg, #d3e07c 0%, #9fb447 46%, #6d7f2c 78%, #48561d 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(150, 190, 60, .32)) drop-shadow(0 2px 0 rgba(30, 40, 10, .7));
  animation: aw-fever 5.5s ease-in-out infinite; }
html.afterworld #menu .title-period { -webkit-text-fill-color: #d7a53c; color: #d7a53c; }
html.afterworld .menu-wordmark > span:first-child { color: #c3d47a; letter-spacing: .32em; text-shadow: 0 0 8px rgba(160, 200, 70, .45); }
html.afterworld #menu .tag { color: #dfe6c2; }
@keyframes aw-fever { 0%, 100% { transform: none; filter: drop-shadow(0 0 12px rgba(150, 190, 60, .28)) drop-shadow(0 2px 0 rgba(30, 40, 10, .7)); }
  50% { transform: scale(1.012, 1.02) skewX(-.6deg); filter: drop-shadow(0 0 22px rgba(170, 205, 70, .45)) drop-shadow(0 2px 0 rgba(30, 40, 10, .7)); } }
@media (prefers-reduced-motion: reduce) { html.afterworld #menu h1 { animation: none; } }
html[lang=ar].afterworld #menu h1 { letter-spacing: 0; }