/* Fallmark — the game's own layer over the platform's base tokens (design.css).
   Dark foundation, structural headings in Space Grotesk, telemetry in
   JetBrains Mono, one signal colour. Sharp corners, hairline rules, no soft
   corporate shapes. Every interactive element has a visible focus state. */

@font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --fm-void: #050508;
  --fm-void-2: #0a0a0f;
  --fm-hair: rgba(255, 255, 255, 0.08);
  --fm-serif: 'Instrument Serif', 'Times New Roman', serif;
  --fm-panel: rgba(12, 14, 19, 0.92);
  --fm-line: rgba(233, 230, 223, 0.14);
  --fm-line-strong: rgba(233, 230, 223, 0.32);
  --fm-text: #e9e6df;
  --fm-muted: #a8a59e;
  --fm-signal: #ff5a1f;
  --fm-data: #6fe3ff;
  --fm-alert: #ff2e4d;
  --fm-gold: #ffc857;
  --fm-amber: #ff9f1c;
  --fm-ease: cubic-bezier(0.2, 0.9, 0.1, 1);
  --fm-snap: cubic-bezier(0.5, 0, 0, 1.25);
  --fm-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --fm-head: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --fm-gutter: clamp(16px, 3vw, 32px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fm-void); color: var(--fm-text); }
body { font-family: var(--fm-head); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--fm-data); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--fm-data); outline-offset: 3px; }
kbd { font-family: var(--fm-mono); font-size: 0.72em; padding: 2px 6px; border: 1px solid currentColor; opacity: 0.7; margin-left: 8px; letter-spacing: 0.04em; }

/* ---------- game shell ---------- */
.fm-game { overflow: hidden; height: 100dvh; touch-action: none; user-select: none; -webkit-user-select: none; }
.fm-stage { position: fixed; inset: 0; display: block; width: 100vw; height: 100dvh; }
.fm-vignette { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%); }

.fm-wordmark { font-family: var(--fm-head); font-weight: 700; letter-spacing: -0.04em; line-height: 0.85; margin: 0; font-size: clamp(56px, 11vw, 148px); text-transform: uppercase; }
.fm-wordmark--small { font-size: 13px; letter-spacing: 0.32em; font-weight: 700; opacity: 0.75; margin-bottom: 6px; }
.fm-kicker { font-family: var(--fm-mono); font-size: 12px; letter-spacing: 0.24em; color: var(--fm-data); margin: 0 0 14px; text-transform: uppercase; }
.fm-h2 { font-size: clamp(26px, 3.4vw, 40px); margin: 0; letter-spacing: -0.02em; font-weight: 700; }
.fm-h3 { font-family: var(--fm-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; margin: 28px 0 8px; color: var(--fm-muted); font-weight: 700; }
.fm-note { font-family: var(--fm-mono); font-size: 12.5px; line-height: 1.6; color: var(--fm-muted); margin: 8px 0; }

/* ---------- HUD ---------- */
.fm-hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: calc(var(--fm-gutter) + env(safe-area-inset-top)) var(--fm-gutter) 0 calc(var(--fm-gutter) + 26px); pointer-events: none; }
.fm-alt { font-family: var(--fm-head); font-weight: 700; font-size: clamp(42px, 6vw, 72px); letter-spacing: -0.04em; line-height: 0.9; font-variant-numeric: tabular-nums; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6); }
.fm-alt small { font-family: var(--fm-mono); font-size: 0.3em; letter-spacing: 0.1em; margin-left: 8px; color: var(--fm-muted); }
.fm-hud__section { font-family: var(--fm-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--fm-data); margin-top: 10px; }
.fm-hud__mode { font-family: var(--fm-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--fm-amber); margin-top: 6px; }
.fm-hud__tele { display: grid; grid-template-columns: repeat(2, minmax(84px, auto)); gap: 10px 22px; margin: 0; font-family: var(--fm-mono); text-align: right; }
.fm-hud__tele dt { font-size: 10px; letter-spacing: 0.24em; color: var(--fm-muted); }
.fm-hud__tele dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fm-hud__tele div:nth-child(2) dd { color: var(--fm-gold); }
.fm-hud__tele div:nth-child(3) dd { color: var(--fm-alert); }
.is-contrast .fm-hud__tele dd, .is-contrast .fm-alt { text-shadow: 0 0 0 #000, 0 0 8px #000, 0 0 2px #000; }
.is-contrast .fm-hud { background: linear-gradient(rgba(0, 0, 0, 0.75), transparent); }

.fm-altimeter { position: fixed; left: calc(10px + env(safe-area-inset-left)); top: 22vh; bottom: 18vh; width: 12px; pointer-events: none; }
.fm-altimeter__track { position: absolute; inset: 0; border-left: 1px solid var(--fm-line-strong); }
.fm-altimeter__track i { position: absolute; left: -1px; display: block; height: 2px; transform: translateY(50%); transition: bottom 120ms linear; }
.fm-altimeter__tick { width: 6px; background: var(--fm-line-strong); }
.fm-altimeter__tick[data-at="24"] { bottom: 20.3%; } .fm-altimeter__tick[data-at="48"] { bottom: 40.7%; } .fm-altimeter__tick[data-at="72"] { bottom: 61%; } .fm-altimeter__tick[data-at="96"] { bottom: 81.4%; }
.fm-altimeter__you { width: 12px; height: 4px !important; background: var(--fm-signal); box-shadow: 0 0 10px var(--fm-signal); }
.fm-altimeter__best { width: 9px; background: var(--fm-text); }
.fm-altimeter__pb { width: 12px; background: var(--fm-gold); }
.fm-altimeter__ghost { width: 9px; background: var(--fm-data); }
.fm-altimeter__top { position: absolute; top: -20px; left: -2px; font-family: var(--fm-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--fm-gold); }

.fm-toasts { position: fixed; left: 50%; top: 22vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; width: min(560px, 92vw); }
.fm-toast { font-family: var(--fm-mono); text-align: center; padding: 8px 14px; background: rgba(7, 8, 11, 0.8); border: 1px solid var(--fm-line); animation: fm-toast-in 220ms var(--fm-snap) both; transition: opacity 400ms, transform 400ms; }
.fm-toast strong { display: block; font-size: 15px; letter-spacing: 0.14em; }
.fm-toast span { display: block; font-size: 11px; color: var(--fm-muted); letter-spacing: 0.08em; margin-top: 3px; }
.fm-toast--alert strong { color: var(--fm-alert); } .fm-toast--data strong { color: var(--fm-data); } .fm-toast--gold strong { color: var(--fm-gold); } .fm-toast--signal strong { color: var(--fm-signal); }
.fm-toast.is-out { opacity: 0; transform: translateY(-6px); }
@keyframes fm-toast-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }

.fm-bigloss { position: fixed; inset: 0; display: grid; place-content: center; pointer-events: none; text-align: center; opacity: 0; }
.fm-bigloss.is-on { animation: fm-bigloss 2200ms var(--fm-ease) both; }
.fm-bigloss__num { font-family: var(--fm-head); font-weight: 700; font-size: clamp(64px, 14vw, 180px); letter-spacing: -0.05em; color: var(--fm-alert); text-shadow: 0 0 60px rgba(255, 46, 77, 0.45); font-variant-numeric: tabular-nums; }
.fm-bigloss__line { font-family: var(--fm-mono); font-size: clamp(13px, 1.6vw, 17px); letter-spacing: 0.06em; color: var(--fm-text); margin-top: 6px; }
@keyframes fm-bigloss { 0% { opacity: 0; transform: scale(1.12); } 10% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px); } }

.fm-corner { position: fixed; right: var(--fm-gutter); bottom: calc(var(--fm-gutter) + env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.is-touch .fm-corner { top: calc(150px + env(safe-area-inset-top)); bottom: auto; flex-direction: column; align-items: flex-end; }
.fm-clipbtn { position: relative; }
.fm-badge { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; background: var(--fm-signal); color: #000; font-family: var(--fm-mono); font-size: 11px; font-weight: 700; display: grid; place-content: center; }

/* ---------- buttons ---------- */
.fm-btn { appearance: none; font-family: var(--fm-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fm-text); background: rgba(12, 14, 19, 0.7); border: 1px solid var(--fm-line-strong); padding: 13px 18px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; transition: transform 140ms var(--fm-snap), background 140ms, border-color 140ms, color 140ms; }
.fm-btn:active { transform: translateY(1px) scale(0.99); }
.fm-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.fm-btn--primary { background: var(--fm-signal); border-color: var(--fm-signal); color: #0b0b0b; }
.fm-btn--ghost { background: rgba(7, 8, 11, 0.6); color: var(--fm-text); }
/* Hover only where there is a pointer that hovers: a touch screen must not spend its first tap on it (AW-124). */
@media (hover: hover) {
  .fm-btn:hover { border-color: var(--fm-text); background: var(--fm-text); color: #0b0b0b; transform: translateY(-1px); }
  .fm-btn--primary:hover { background: #ff7444; border-color: #ff7444; color: #0b0b0b; }
}
.fm-btn--quiet { border-color: transparent; background: transparent; color: var(--fm-muted); }
.fm-linkbtn { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--fm-data); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: var(--fm-mono); font-size: 12px; letter-spacing: 0.08em; }
.fm-chip { appearance: none; font-family: var(--fm-mono); font-size: 12px; letter-spacing: 0.12em; color: var(--fm-text); background: transparent; border: 1px solid var(--fm-line-strong); padding: 9px 12px; cursor: pointer; min-height: 40px; }
.fm-chip[aria-pressed="true"] { background: var(--fm-text); color: #0b0b0b; border-color: var(--fm-text); }
.fm-chip:disabled { opacity: 0.35; cursor: not-allowed; }
.fm-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* ---------- overlays ---------- */
.fm-overlay { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--fm-gutter); z-index: 10; }
.fm-overlay[hidden] { display: none; }
.fm-start { background: linear-gradient(180deg, rgba(7, 8, 11, 0.2) 0%, rgba(7, 8, 11, 0.86) 60%); align-items: end; justify-items: start; }
.fm-start__inner { max-width: 760px; padding-bottom: max(6vh, 24px); animation: fm-rise 700ms var(--fm-ease) both; }
.fm-start__line { font-size: clamp(17px, 2vw, 22px); line-height: 1.45; color: var(--fm-text); margin: 18px 0 22px; max-width: 34em; }
.fm-start__resume, .fm-start__ghost { font-family: var(--fm-mono); font-size: 13px; color: var(--fm-gold); margin: 0 0 14px; }
.fm-start__ghost { color: var(--fm-data); }
.fm-start__go { min-width: 220px; font-size: 15px; padding: 16px 24px; }
.fm-start__fine { font-family: var(--fm-mono); font-size: 12px; color: var(--fm-muted); margin-top: 16px; }
.fm-howto { display: grid; gap: 10px; margin: 0 0 24px; font-family: var(--fm-mono); font-size: 13px; color: var(--fm-muted); }
.fm-howto div { display: flex; align-items: center; gap: 8px; }
.fm-howto.is-touch { display: none; }
.fm-key { font-family: var(--fm-mono); font-weight: 700; font-size: 12px; color: var(--fm-text); border: 1px solid var(--fm-line-strong); padding: 4px 8px; min-width: 32px; text-align: center; letter-spacing: 0.08em; }
.fm-key--btn { background: transparent; color: var(--fm-text); cursor: pointer; min-height: 40px; min-width: 120px; }
.fm-key--btn.is-listening { border-color: var(--fm-signal); color: var(--fm-signal); }
@keyframes fm-rise { from { opacity: 0; transform: translateY(24px); } }

.fm-menu, .fm-editor { background: rgba(4, 5, 7, 0.72); backdrop-filter: blur(10px); }
.fm-panel { width: min(860px, 100%); max-height: min(92dvh, 900px); overflow: auto; background: var(--fm-panel); border: 1px solid var(--fm-line); padding: clamp(18px, 3vw, 34px); animation: fm-rise 260ms var(--fm-ease) both; }
.fm-panel__head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 16px; margin-bottom: 18px; }
.fm-panel__head .fm-kicker { grid-column: 1 / -1; margin: 0; }
.fm-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--fm-line); margin-bottom: 18px; overflow-x: auto; }
.fm-tabs button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--fm-muted); font-family: var(--fm-mono); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; padding: 12px 14px; cursor: pointer; min-height: 44px; }
.fm-tabs button[aria-selected="true"] { color: var(--fm-text); border-bottom-color: var(--fm-signal); }
.fm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1px; background: var(--fm-line); border: 1px solid var(--fm-line); }
.fm-stats div { background: #0c0e13; padding: 12px 14px; }
.fm-stats span { display: block; font-family: var(--fm-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--fm-muted); }
.fm-stats strong { display: block; font-family: var(--fm-mono); font-size: 20px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.fm-practice { display: flex; flex-wrap: wrap; gap: 8px; }

.fm-reel, .fm-board { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fm-line); }
.fm-reel li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--fm-line); }
.fm-reel strong { display: block; font-family: var(--fm-mono); letter-spacing: 0.14em; font-size: 14px; }
.fm-reel span { font-family: var(--fm-mono); font-size: 12px; color: var(--fm-muted); }
.fm-board__kinds { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fm-board li { display: grid; grid-template-columns: 34px 1fr auto auto auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--fm-line); font-family: var(--fm-mono); font-size: 13px; }
.fm-board li > span:first-child { color: var(--fm-muted); }
.fm-board li.is-you strong { color: var(--fm-signal); }
.fm-handle { margin-top: 18px; }

.fm-settings fieldset { border: 0; border-top: 1px solid var(--fm-line); margin: 0 0 8px; padding: 14px 0 6px; display: grid; gap: 12px; }
.fm-settings legend { font-family: var(--fm-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--fm-muted); text-transform: uppercase; padding: 0 0 4px; }
.fm-settings label { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: var(--fm-mono); font-size: 13px; }
.fm-settings .fm-check { justify-content: flex-start; }
.fm-settings input[type="range"] { width: min(260px, 55%); accent-color: var(--fm-signal); }
.fm-settings input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--fm-signal); }
.fm-settings select { background: #0c0e13; color: var(--fm-text); border: 1px solid var(--fm-line-strong); font-family: var(--fm-mono); padding: 8px; min-height: 40px; }
.fm-remap { display: grid; gap: 8px; }
.fm-remap__row { display: flex; justify-content: space-between; align-items: center; font-family: var(--fm-mono); font-size: 13px; }

.fm-summit { background: radial-gradient(ellipse at 50% 30%, rgba(255, 200, 87, 0.18), rgba(7, 8, 11, 0.9) 60%); }
.fm-summit__inner { text-align: center; max-width: 720px; animation: fm-rise 900ms var(--fm-ease) both; }
.fm-summit__title { font-size: clamp(54px, 10vw, 128px); letter-spacing: -0.05em; line-height: 0.9; margin: 0; color: var(--fm-gold); text-shadow: 0 0 80px rgba(255, 200, 87, 0.4); }
.fm-summit__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--fm-line); border: 1px solid var(--fm-line); margin: 28px 0 12px; font-family: var(--fm-mono); }
.fm-summit__stats dt { display: none; }
.fm-summit__stats dd { margin: 0; background: #0c0e13; padding: 14px 8px; font-size: clamp(16px, 2.4vw, 24px); font-weight: 700; }
.fm-summit__stats dd::before { display: block; font-size: 10px; letter-spacing: 0.2em; color: var(--fm-muted); font-weight: 400; margin-bottom: 4px; }
.fm-summit__stats dd:nth-of-type(1)::before { content: 'TIME'; } .fm-summit__stats dd:nth-of-type(2)::before { content: 'FALLS'; } .fm-summit__stats dd:nth-of-type(3)::before { content: 'METRES LOST'; } .fm-summit__stats dd:nth-of-type(4)::before { content: 'LEAPS'; }
.fm-summit__verdict { font-family: var(--fm-mono); font-size: 13px; color: var(--fm-data); min-height: 1.4em; }
.fm-summit .fm-actions { justify-content: center; }

.fm-prompt { position: fixed; left: 50%; bottom: calc(var(--fm-gutter) + env(safe-area-inset-bottom) + 80px); transform: translateX(-50%); width: min(520px, 92vw); background: var(--fm-panel); border: 1px solid var(--fm-gold); padding: 16px 18px; z-index: 9; font-family: var(--fm-mono); font-size: 13px; line-height: 1.55; animation: fm-rise 300ms var(--fm-ease) both; }
.fm-prompt p { margin: 0; }

.fm-editor__inner { width: min(1100px, 100%); height: min(92dvh, 860px); background: var(--fm-panel); border: 1px solid var(--fm-line); padding: clamp(14px, 2.4vw, 26px); display: grid; grid-template-rows: auto 1fr; gap: 14px; }
.fm-editor__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.fm-editor__body { display: grid; grid-template-columns: 1fr minmax(260px, 340px); gap: 20px; min-height: 0; }
.fm-editor__stage { position: relative; min-height: 0; display: grid; place-items: center; background: #040507; border: 1px solid var(--fm-line); overflow: hidden; }
.fm-editor__stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #040507; }
.fm-editor__controls { display: flex; flex-direction: column; gap: 14px; overflow: auto; }
.fm-field { display: grid; gap: 6px; font-family: var(--fm-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--fm-muted); }
.fm-field input[type="range"] { accent-color: var(--fm-signal); width: 100%; }
.fm-field input[type="text"] { background: #0c0e13; color: var(--fm-text); border: 1px solid var(--fm-line-strong); padding: 10px; font-family: var(--fm-mono); font-size: 14px; letter-spacing: 0; min-height: 44px; }

/* ---------- touch ---------- */
.fm-touch { position: fixed; left: 0; right: 0; bottom: 0; padding: 0 var(--fm-gutter) calc(var(--fm-gutter) + env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: flex-end; pointer-events: none; }
.fm-touch__dir { display: flex; gap: 12px; }
.fm-touch__btn { pointer-events: auto; appearance: none; width: 76px; height: 76px; background: rgba(12, 14, 19, 0.55); border: 1px solid var(--fm-line-strong); color: var(--fm-text); font-size: 22px; font-family: var(--fm-mono); touch-action: none; }
.fm-touch__leap { width: 112px; height: 112px; border-radius: 50%; font-size: 12px; letter-spacing: 0.16em; font-weight: 700; border-color: var(--fm-signal); color: var(--fm-signal); }
.fm-touch__btn.is-down { background: rgba(255, 90, 31, 0.35); color: var(--fm-text); border-color: var(--fm-signal); transform: scale(0.96); }

.fm-noscript { position: fixed; inset: 0; display: grid; place-content: center; font-family: var(--fm-mono); padding: 24px; text-align: center; }

@media (max-width: 760px) {
  .fm-hud { padding-left: calc(var(--fm-gutter) + 18px); }
  .fm-hud__tele { grid-template-columns: repeat(2, auto); gap: 6px 14px; }
  .fm-hud__tele dd { font-size: 15px; }
  .fm-editor__body { grid-template-columns: 1fr; grid-template-rows: minmax(240px, 1fr) auto; }
  .fm-summit__stats { grid-template-columns: repeat(2, 1fr); }
  .fm-corner .fm-btn kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-timeline: auto !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
}

.fm-flag { display: inline-flex; gap: 8px; font-family: var(--fm-mono); font-size: 11px; color: var(--fm-muted); }
.fm-flag .fm-linkbtn { font-size: 11px; color: var(--fm-muted); }

/* ==========================================================================
   Editorial layer (design brief, 2 October 2026): a massive serif against
   crisp lowercase monospace metadata, hairline data blocks, glowing state
   dots, coordinate telemetry and a soft spotlight that follows the cursor.
   ========================================================================== */
.fm-wordmark { font-family: var(--fm-serif); font-weight: 400; letter-spacing: -0.035em; line-height: 0.82; text-transform: none; }
.fm-wordmark--small { font-family: var(--fm-mono); font-size: 11px; letter-spacing: 0.3em; text-transform: lowercase; }
.fm-h2, .fm-summit__title, .fm-bigloss__num { font-family: var(--fm-serif); font-weight: 400; letter-spacing: -0.02em; }
.fm-summit__title em, .fm-wordmark em { font-style: italic; color: var(--fm-signal); }
.fm-alt { font-family: var(--fm-serif); font-weight: 400; letter-spacing: -0.03em; font-size: clamp(52px, 7vw, 92px); }
.fm-alt small { font-family: var(--fm-mono); text-transform: lowercase; }
.fm-note, .fm-hud__tele dt, .fm-toast span, .fm-stats span, .fm-start__fine, .fm-hud__mode { text-transform: lowercase; }
.fm-hud__tele dt { letter-spacing: 0.18em; }
.fm-start__line { font-family: var(--fm-serif); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; letter-spacing: -0.01em; }

/* The grid: hairline partitions over the viewport, asymmetric on purpose. */
.fm-grid { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.fm-grid i { position: absolute; background: var(--fm-hair); }
.fm-grid .v1 { top: 0; bottom: 0; left: 7.5%; width: 1px; }
.fm-grid .v2 { top: 0; bottom: 0; left: 61.8%; width: 1px; }
.fm-grid .v3 { top: 0; bottom: 0; right: 4.5%; width: 1px; }
.fm-grid .h1 { left: 0; right: 0; top: 64px; height: 1px; }
.fm-grid .h2 { left: 0; right: 0; bottom: 11%; height: 1px; }
.fm-grid .tick { width: 7px; height: 7px; background: none; border-left: 1px solid rgba(255, 255, 255, 0.28); border-top: 1px solid rgba(255, 255, 255, 0.28); }
.fm-grid .t1 { left: calc(7.5% - 3px); top: 61px; } .fm-grid .t2 { left: calc(61.8% - 3px); bottom: calc(11% - 4px); transform: rotate(180deg); } .fm-grid .t3 { right: calc(4.5% - 4px); top: 61px; transform: rotate(90deg); }
.fm-game .fm-grid { z-index: 0; }
@media (max-width: 760px) { .fm-grid .v2 { display: none; } }

/* Glowing state dots. */
.fm-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--fm-data); box-shadow: 0 0 8px var(--fm-data); margin-right: 8px; vertical-align: middle; animation: fm-pulse 2.2s ease-in-out infinite; }
.fm-dot--signal { background: var(--fm-signal); box-shadow: 0 0 8px var(--fm-signal); }
.fm-dot--gold { background: var(--fm-gold); box-shadow: 0 0 8px var(--fm-gold); }
@keyframes fm-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } }

/* Coordinate telemetry: small, lowercase, beside the action. */
.fm-coords { position: fixed; left: calc(7.5% + 12px); bottom: calc(11% + 10px); font-family: var(--fm-mono); font-size: 10.5px; letter-spacing: 0.08em; color: rgba(233, 230, 223, 0.55); text-transform: lowercase; pointer-events: none; font-variant-numeric: tabular-nums; z-index: 2; white-space: pre; }
.is-touch .fm-coords { display: none; }

/* The spotlight: a soft radial light that follows the cursor across the UI. */
.fm-spot { position: fixed; inset: 0; pointer-events: none; z-index: 3; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 140, 80, 0.07), rgba(111, 227, 255, 0.025) 40%, transparent 70%); transition: opacity 600ms; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) { .fm-spot { display: none; } }

/* Data blocks in panels: hairline frames. */
.fm-panel, .fm-editor__inner { background: rgba(10, 10, 15, 0.9); color: var(--fm-text); border-color: var(--fm-hair); }
.fm-stats, .fm-summit__stats { background: var(--fm-hair); border-color: var(--fm-hair); }
.fm-stats div, .fm-summit__stats dd { background: var(--fm-void-2); color: var(--fm-text); }
.fm-hud__tele { padding: 10px 14px; border: 1px solid var(--fm-hair); background: rgba(5, 5, 8, 0.55); color: var(--fm-text); }

/* Powers (D-27): name, a draining bar and the seconds left; colour is never the only signal. */
.fm-power { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-family: var(--fm-mono); font-size: 12px; letter-spacing: 0.14em; color: var(--fm-text); }
.fm-power__name { font-weight: 700; }
.fm-power__bar { width: 96px; height: 4px; background: rgba(233,230,223,0.14); overflow: hidden; }
.fm-power__bar i { display: block; height: 100%; background: currentColor; transform-origin: left center; }
.fm-power[data-kind="surge"] { color: var(--fm-gold); }
.fm-power[data-kind="feather"] { color: var(--fm-data); }
.fm-power[data-kind="grip"] { color: #7dff9a; }
.fm-power__left { color: var(--fm-text); opacity: 0.8; }

/* Summit badge (D-31) */
.fm-badge-claim { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 20px; align-items: start; margin: 18px 0; text-align: left; }
.fm-badge-preview { width: 100%; height: auto; border: 1px solid var(--fm-hair); background: #050508; }
.fm-badge-claim__serial { font-family: var(--fm-mono); font-size: 18px; letter-spacing: 0.08em; color: var(--fm-gold); margin: 4px 0 12px; }
.fm-badge-claim .fm-field { display: grid; gap: 6px; margin-bottom: 12px; }
.fm-badge-claim .fm-field span { font-family: var(--fm-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: lowercase; opacity: 0.75; }
.fm-badge-claim input { font: inherit; font-family: var(--fm-mono); padding: 10px 12px; background: rgba(255,255,255,0.04); color: var(--fm-text); border: 1px solid var(--fm-hair); }
@media (max-width: 640px) { .fm-badge-claim { grid-template-columns: 1fr; } .fm-badge-preview { max-width: 240px; } }

/* The Locker (D-33): one rhythm throughout — sections 32px apart, an 8px grid inside. */
.fm-section { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--fm-hair); }
.fm-section--first { margin-top: 8px; padding-top: 0; border-top: 0; }
.fm-section > .fm-h3 { margin: 0 0 8px; }
.fm-section > .fm-note { margin: 0 0 16px; max-width: 64ch; }
.fm-locker { display: grid; gap: 20px; margin: 0; }
.fm-locker__slot h4 { font-family: var(--fm-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fm-muted); margin: 0 0 8px; font-weight: 400; }
.fm-locker__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }
.fm-swatch { display: flex; align-items: center; gap: 12px; height: 56px; min-width: 0; padding: 0 14px; border: 1px solid var(--fm-hair); background: rgba(255,255,255,0.02); color: var(--fm-text); font-family: var(--fm-mono); text-align: left; cursor: pointer; }
.fm-swatch__chip { flex: 0 0 18px; width: 18px; height: 18px; border: 1px solid rgba(255,255,255,0.25); }
.fm-swatch__chip--none { background: transparent; }
.fm-swatch--hidden .fm-swatch__chip { background: repeating-linear-gradient(45deg, #2a2a2e 0 3px, #121215 3px 6px); }
.fm-swatch__text { display: grid; gap: 3px; min-width: 0; }
.fm-swatch__text b { font-weight: 400; font-size: 12.5px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-swatch__text small { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-swatch[aria-pressed="true"] { border-color: var(--fm-signal); background: rgba(255,90,31,0.06); }
.fm-swatch[aria-pressed="true"] .fm-swatch__text small { color: var(--fm-signal); }
.fm-swatch[disabled] { cursor: default; }
.fm-swatch[disabled] .fm-swatch__chip, .fm-swatch[disabled] .fm-swatch__text b { opacity: 0.5; }
.fm-packs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 0; margin: 0 0 16px; }
/* Each card spans four rows of the parent grid, so title, blurb, list and button line up across a row of cards. */
.fm-pack { border: 1px solid var(--fm-hair); padding: 20px; display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 12px; min-width: 0; margin-bottom: 12px; }
@supports not (grid-template-rows: subgrid) { .fm-pack { display: flex; flex-direction: column; gap: 12px; } }
.fm-pack__head { display: grid; gap: 4px; }
.fm-pack h4 { font-family: var(--fm-serif); font-weight: 400; font-size: 26px; line-height: 1.1; margin: 0; }
.fm-pack__price { font-family: var(--fm-mono); color: var(--fm-gold); font-size: 15px; letter-spacing: 0.06em; }
.fm-pack__blurb { margin: 0; font-size: 13px; line-height: 1.5; opacity: 0.85; }
.fm-pack__list { list-style: none; margin: 0; align-content: start; padding: 12px 0 0; border-top: 1px solid var(--fm-hair); display: grid; gap: 4px; font-family: var(--fm-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--fm-muted); }
.fm-pack__list li::before { content: '— '; opacity: 0.5; }
.fm-pack__buy { margin-top: auto; width: 100%; align-self: end; }
.fm-buy { border: 1px solid var(--fm-signal); padding: 20px; margin: 0 0 16px; display: grid; gap: 12px; }
.fm-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.fm-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--fm-signal); }
.fm-restore { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.fm-restore .fm-field { flex: 1 1 240px; display: grid; gap: 8px; }
.fm-restore .fm-field span { font-family: var(--fm-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--fm-muted); }
.fm-restore input { font: inherit; font-family: var(--fm-mono); letter-spacing: 0.12em; min-height: 44px; padding: 0 12px; background: rgba(255,255,255,0.04); color: var(--fm-text); border: 1px solid var(--fm-hair); }
@media (max-width: 520px) { .fm-locker__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fm-swatch { padding: 0 12px; gap: 10px; } .fm-swatch__text small { letter-spacing: 0.08em; } .fm-packs { grid-template-columns: 1fr; } }
@media (hover: hover) { .fm-swatch:not([disabled]):hover { border-color: var(--fm-text); } }