/* =====================================================================
   FISTILAND skins v1 (Veteran rank): switcher + four complete looks.
   Each skin = colour tokens + Material variables + typography + shapes
   + ambient layers (.fl-fx, built by fl-fx.js) + a signature detail.
   Native CSS nesting is used on purpose (all current browsers).
   Animations only move transform / opacity / background-position.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Switcher: header button + panel
   --------------------------------------------------------------------- */
.md-header__button.fl-hd-theme {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; padding: 0; margin: .2rem .1rem; background: none; border: 0;
  color: var(--fl-orange-hot); opacity: 1; cursor: pointer; transition: transform .2s ease, filter .2s ease;
}
.fl-hd-theme svg { width: 1.55rem; height: 1.55rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fl-hd-theme:hover, .fl-hd-theme[aria-expanded="true"] { transform: scale(1.18) rotate(-6deg); filter: drop-shadow(0 0 7px rgba(var(--fl-hot-rgb), .75)); }
.fl-hd-theme:focus-visible { outline: 2px solid var(--fl-orange-hot); outline-offset: 2px; border-radius: 4px; }
.fl-hd-theme.is-new { animation: fl-theme-pop 1.2s ease-in-out 4; }
.fl-hd-tip {
  position: fixed; z-index: 40; left: 0; top: 0; padding: .45rem .7rem; border-radius: 2px; white-space: nowrap; pointer-events: none;
  background: rgba(10, 8, 6, .94); color: #f1ede6; font: 500 .68rem/1.3 Inter, sans-serif; box-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  opacity: 0; transition: opacity .15s ease;
}
.fl-hd-tip.is-on { opacity: 1; }
@keyframes fl-theme-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); filter: drop-shadow(0 0 12px currentColor); } }

.fl-theme-panel {
  display: none; position: fixed; top: 3.7rem; right: .5rem; z-index: 14; width: min(23rem, calc(100vw - 1rem));
  max-height: calc(100vh - 4.5rem); max-height: calc(100dvh - 4.5rem); overflow-y: auto; overscroll-behavior: contain;
  padding: .7rem .7rem .8rem; background: var(--fl-bar); border: 2px solid var(--fl-orange);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .6);
}
.fl-theme-panel.is-on { display: block; animation: fl-panel-in .22s ease-out; }
@keyframes fl-panel-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
.fl-theme-panel h4 { margin: .1rem .3rem .55rem; font: 600 .72rem Oswald, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--fl-orange-hot); }

.fl-theme-opt {
  --sw: #e8631c;
  display: grid; grid-template-columns: 5rem 1fr 1.2rem; align-items: center; gap: .8rem; width: 100%; min-height: 3.7rem; margin-top: .45rem; padding: .35rem .7rem .35rem .35rem;
  text-align: left; color: #f4ece3; background: var(--fl-panel); border: 1px solid var(--fl-line); border-left: 4px solid var(--sw);
  cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s;
  &[data-id="survivalist"] { --sw: #f2c14e; }
  &[data-id="forces"] { --sw: #3be07a; }
  &[data-id="demonic"] { --sw: #ff3a2e; }
  &[data-id="zombie"] { --sw: #a4e23a; }
  & .pv { position: relative; display: grid; place-items: center; width: 5rem; height: 3rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--sw) 55%, transparent); background: #0d0c0b; }
  & .pv svg { position: relative; width: 1.65rem; height: 1.65rem; color: var(--sw); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px var(--sw)); }
  & .pv img { position: relative; width: 1.9rem; height: 1.9rem; object-fit: contain; filter: drop-shadow(0 0 6px rgba(232, 99, 28, .7)); }
  & .tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
  & b { font: 600 .86rem Oswald, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #fff; }
  & .tx span { font-size: .72rem; color: #b9aea3; }
  & .ck { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); }
  &:hover, &:focus-visible { transform: translateX(3px); outline: none; box-shadow: 0 0 14px -4px var(--sw); background: #1b1815; }
  &:focus-visible { box-shadow: 0 0 0 2px var(--sw); }
  &[aria-checked="true"] { border-color: var(--sw); background: #1d1a17; box-shadow: 0 0 16px -4px var(--sw); }
  &[aria-checked="true"] .ck { border-color: var(--sw); background: radial-gradient(circle, var(--sw) 0 45%, transparent 50%); }
}
/* mini scenes: one per skin, CSS only */
.fl-theme-opt .pv::before { content: ""; position: absolute; inset: 0; }
.fl-theme-opt[data-id=""] .pv::before { background: linear-gradient(180deg, #1d1814, #0d0c0b); border-top: 2px solid #e8631c; }
.fl-theme-opt[data-id="survivalist"] .pv::before { background: radial-gradient(circle at 18% 120%, #ffb347 0, #b5651d 26%, transparent 62%), radial-gradient(circle at 78% 20%, rgba(255, 230, 150, .9) 0 1.5px, transparent 2.5px), linear-gradient(#19140c, #0e0c08); }
.fl-theme-opt[data-id="forces"] .pv::before { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .4) 0 1px, transparent 1px 3px), radial-gradient(circle, #0e5428 0, #041a0c 80%); box-shadow: inset 0 0 14px rgba(0, 0, 0, .8); }
.fl-theme-opt[data-id="morph"] { --sw: #b78cff; }
.fl-theme-opt[data-id="morph"] .pv::before { background: conic-gradient(from 0deg at 50% 50%, #f2c14e, #3be07a, #ff3a2e, #a4e23a, #f2c14e); opacity: .5; animation: fl-morph-spin 6s linear infinite; }
@keyframes fl-morph-spin { to { filter: hue-rotate(360deg); } }
html.fl-fx-off .fl-theme-opt[data-id="morph"] .pv::before { animation: none; }
@media (prefers-reduced-motion: reduce) { .fl-theme-opt[data-id="morph"] .pv::before { animation: none; } }
.fl-theme-opt[data-id="demonic"] .pv::before { background: radial-gradient(ellipse at 50% 130%, #ff8a2a 0, #d0141f 36%, #2a060a 72%); }
.fl-theme-opt[data-id="zombie"] .pv::before { background: radial-gradient(ellipse 4px 9px at 18% 0, #b4e83c 0 60%, transparent 66%), radial-gradient(ellipse 3px 6px at 55% 0, #7cb342 0 60%, transparent 66%), radial-gradient(ellipse 5px 12px at 84% 0, #b4e83c 0 60%, transparent 66%), radial-gradient(ellipse at 50% 130%, rgba(164, 226, 58, .55), transparent 62%), linear-gradient(#0e1609, #070a05); }

.fl-fx-row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .8rem; padding: .55rem .35rem 0; border-top: 1px dashed var(--fl-line);
  font-size: .76rem; color: #b9aea3;
}
.fl-fx-row b { margin-right: auto; font: 600 .86rem Oswald, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.fl-fx-st { display: inline-flex; align-items: center; gap: .35rem; font: 600 .74rem Oswald, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #8d8379; transition: color .2s; }
.fl-fx-st svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fl-fx-st .sl { display: none; }
.fl-fx-row[data-on="true"] .fl-fx-st { color: var(--fl-orange-hot); }
.fl-fx-row[data-on="true"] .fl-fx-st svg { filter: drop-shadow(0 0 4px rgba(var(--fl-hot-rgb), .6)); }
.fl-fx-row[data-on="false"] .fl-fx-st .sl { display: inline; }
.fl-fx-sw {
  position: relative; flex: none; width: 2.7rem; height: 1.5rem; padding: 0; border-radius: 1rem; border: 1px solid var(--fl-line); background: #0d0c0b; cursor: pointer; transition: background .2s, border-color .2s;
  &::after { content: ""; position: absolute; left: 2px; top: 2px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: #6f655c; transition: transform .2s, background .2s; }
  &[aria-checked="true"] { border-color: var(--fl-orange); background: rgba(var(--fl-or-rgb), .25); }
  &[aria-checked="true"]::after { transform: translateX(1.2rem); background: var(--fl-orange-hot); }
  &:focus-visible { outline: 2px solid var(--fl-orange-hot); outline-offset: 2px; }
}

/* flash on switch when View Transitions are not available */
.fl-theme-flash { position: fixed; inset: 0; z-index: 15; pointer-events: none; background: radial-gradient(circle at 88% 2rem, var(--fl-orange-hot), transparent 60%); animation: fl-flash .9s ease-out forwards; }
@keyframes fl-flash { from { opacity: .85; } to { opacity: 0; } }
/* circular reveal from the button (View Transitions) */
html.fl-vt-skin::view-transition-old(root), html.fl-vt-skin::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.fl-vt-skin::view-transition-new(root) { animation: fl-reveal .75s cubic-bezier(.3, .7, .2, 1) both; }
html.fl-vt-skin::view-transition-old(root) { z-index: 1; }
html.fl-vt-skin::view-transition-new(root) { z-index: 2; }
@keyframes fl-reveal { from { clip-path: circle(0 at var(--vt-x, 90%) var(--vt-y, 2rem)); } to { clip-path: circle(150vmax at var(--vt-x, 90%) var(--vt-y, 2rem)); } }

/* FISTILAND skin icon (barbed-wire shield) */
.fl-theme-logo { display: block; width: 1.75rem; height: 1.75rem; flex: none; object-fit: contain; filter: drop-shadow(0 0 5px rgba(232, 99, 28, .55)); animation: fl-logo-glow 3.4s ease-in-out infinite; }
.fl-hd-theme .fl-theme-logo { width: 1.7rem; height: 1.7rem; }
.fl-hd-theme:hover .fl-theme-logo, .fl-hd-theme[aria-expanded="true"] .fl-theme-logo { animation: none; filter: drop-shadow(0 0 8px rgba(232, 99, 28, .95)); }
@keyframes fl-logo-glow { 0%, 100% { filter: drop-shadow(0 0 3px rgba(232, 99, 28, .35)); } 50% { filter: drop-shadow(0 0 8px rgba(232, 99, 28, .85)); } }

/* ---------------------------------------------------------------------
   2. Shared textures and ambient host
   --------------------------------------------------------------------- */
html[data-fl-theme] {
  --sk-noise-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --sk-noise-k: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.fl-fx { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; contain: strict; }
.fl-fx > i, .fl-fx > canvas, .fl-fx > div { position: absolute; display: block; pointer-events: none; }
.fl-fx > canvas { inset: 0; width: 100%; height: 100%; }
.fl-fx > i { inset: 0; }
html.fl-fx-off .fl-fx { display: none; }

/* ---------------------------------------------------------------------
   3. Skin tokens and Material variables
   --------------------------------------------------------------------- */
html[data-fl-theme="survivalist"] {
  --fl-orange: #c8a24a; --fl-orange-hot: #f2c14e; --fl-rust: #6e4a1c; --fl-ink: #0e0c08; --fl-panel: #19150d; --fl-line: #413420;
  --fl-bar: #14110a; --fl-tabs: #0f0d08; --fl-or-rgb: 200, 162, 74; --fl-hot-rgb: 242, 193, 78; --fl-hue: 22deg;
  --fl-logo-grade: hue-rotate(24deg) saturate(.8) sepia(.18);
  --sk-text: #e9dfc8; --sk-text-rgb: 233, 223, 200; --sk-dim: #b9ab8c; --sk-panel-rgb: 25, 21, 13; --sk-th: #231d11;
  --sk-code-bg: #15110a; --sk-code-fg: #eadfc4; --sk-c1: #f2c14e; --sk-c2: #9fb35a; --sk-c3: #e98a3c; --sk-c4: #8f8468;
  --sk-head: "Special Elite"; --sk-head-w: 400; --sk-track: .03em;
}
html[data-fl-theme="forces"] {
  --fl-orange: #2fd36b; --fl-orange-hot: #6dff9e; --fl-rust: #0f5a30; --fl-ink: #040705; --fl-panel: #09100b; --fl-line: #1b3324;
  --fl-bar: #070b08; --fl-tabs: #050806; --fl-or-rgb: 47, 211, 107; --fl-hot-rgb: 109, 255, 158; --fl-hue: 120deg;
  --fl-logo-grade: hue-rotate(120deg);
  --sk-text: #cdeedb; --sk-text-rgb: 205, 238, 219; --sk-dim: #8fb39d; --sk-panel-rgb: 9, 16, 11; --sk-th: #0c1a11;
  --sk-code-bg: #06100a; --sk-code-fg: #bff5d3; --sk-c1: #6dff9e; --sk-c2: #b6ffd0; --sk-c3: #3bd0c8; --sk-c4: #5f8f74;
  --sk-head: "Roboto Mono"; --sk-head-w: 700; --sk-track: .05em;
}
html[data-fl-theme="demonic"] {
  --fl-orange: #d0141f; --fl-orange-hot: #ff4a36; --fl-rust: #6a0b10; --fl-ink: #090304; --fl-panel: #170a0c; --fl-line: #451519;
  --fl-bar: #12070a; --fl-tabs: #0c0507; --fl-or-rgb: 208, 20, 31; --fl-hot-rgb: 255, 74, 54; --fl-hue: -22deg;
  --fl-logo-grade: hue-rotate(-22deg) saturate(1.2);
  --sk-text: #f0dcd6; --sk-text-rgb: 240, 220, 214; --sk-dim: #b8908a; --sk-panel-rgb: 23, 10, 12; --sk-th: #220e11;
  --sk-code-bg: #120709; --sk-code-fg: #f3d9d2; --sk-c1: #ff6a3d; --sk-c2: #ffb02e; --sk-c3: #ff4a8a; --sk-c4: #a8756d;
  --sk-head: "Metal Mania"; --sk-head-w: 400; --sk-track: .05em;
}
html[data-fl-theme="zombie"] {
  --fl-orange: #7cb342; --fl-orange-hot: #b4e83c; --fl-rust: #33591a; --fl-ink: #060905; --fl-panel: #0f150c; --fl-line: #27361e;
  --fl-bar: #0b110a; --fl-tabs: #080c07; --fl-or-rgb: 124, 179, 66; --fl-hot-rgb: 180, 232, 60; --fl-hue: 80deg;
  --fl-logo-grade: hue-rotate(80deg);
  --sk-text: #dfe8d2; --sk-text-rgb: 223, 232, 210; --sk-dim: #98a88a; --sk-panel-rgb: 15, 21, 12; --sk-th: #16200f;
  --sk-code-bg: #0a0f08; --sk-code-fg: #d9efc0; --sk-c1: #b4e83c; --sk-c2: #e0f08a; --sk-c3: #d4733a; --sk-c4: #7d8f6c;
  --sk-head: "Creepster"; --sk-head-w: 400; --sk-track: .07em; --sk-blood: #8e1b14;
}

html[data-fl-theme] [data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--fl-ink);
  --md-default-fg-color: var(--sk-text);
  --md-default-fg-color--light: var(--sk-dim);
  --md-default-fg-color--lighter: rgba(var(--sk-text-rgb), .32);
  --md-default-fg-color--lightest: rgba(var(--sk-text-rgb), .07);
  --md-typeset-color: var(--sk-text);
  --md-typeset-a-color: var(--fl-orange-hot);
  --md-accent-fg-color: var(--fl-orange-hot);
  --md-accent-fg-color--transparent: rgba(var(--fl-hot-rgb), .1);
  --md-code-bg-color: var(--sk-code-bg);
  --md-code-fg-color: var(--sk-code-fg);
  --md-code-hl-color: rgba(var(--fl-hot-rgb), .18);
  --md-code-hl-color--light: rgba(var(--fl-hot-rgb), .1);
  --md-code-hl-keyword-color: var(--sk-c1);
  --md-code-hl-function-color: var(--sk-c2);
  --md-code-hl-string-color: var(--sk-c3);
  --md-code-hl-number-color: var(--sk-c3);
  --md-code-hl-constant-color: var(--sk-c1);
  --md-code-hl-special-color: var(--sk-c3);
  --md-code-hl-name-color: var(--sk-code-fg);
  --md-code-hl-variable-color: var(--sk-code-fg);
  --md-code-hl-operator-color: var(--sk-dim);
  --md-code-hl-punctuation-color: var(--sk-dim);
  --md-code-hl-comment-color: var(--sk-c4);
  --md-code-hl-generic-color: var(--sk-dim);
  --md-typeset-mark-color: rgba(var(--fl-hot-rgb), .28);
  --md-typeset-kbd-color: rgba(var(--sk-text-rgb), .08);
  --md-typeset-kbd-accent-color: rgba(var(--sk-text-rgb), .18);
  --md-typeset-kbd-border-color: rgba(var(--fl-or-rgb), .45);
  --md-typeset-table-color: rgba(var(--fl-or-rgb), .22);
  --md-typeset-table-color--light: rgba(var(--sk-text-rgb), .035);
  --md-admonition-bg-color: var(--fl-panel);
  --md-admonition-fg-color: var(--sk-text);
  --md-footer-bg-color: var(--fl-ink);
  --md-footer-bg-color--dark: #000;
  --md-footer-fg-color: var(--sk-text);
  --md-footer-fg-color--light: var(--sk-dim);
  --md-footer-fg-color--lighter: rgba(var(--sk-text-rgb), .4);
  --md-shadow-z1: 0 0 .25rem rgba(0, 0, 0, .55), 0 0 .05rem rgba(0, 0, 0, .7);
  --md-shadow-z2: 0 .25rem .8rem rgba(0, 0, 0, .7), 0 0 .05rem rgba(0, 0, 0, .7);
  --md-shadow-z3: 0 .5rem 1.4rem rgba(0, 0, 0, .75), 0 0 .05rem rgba(0, 0, 0, .7);
}

/* ---------------------------------------------------------------------
   4. Generic skin behaviour (driven by tokens)
   --------------------------------------------------------------------- */
html[data-fl-theme] {
  scrollbar-color: var(--fl-orange) var(--fl-ink);
  & ::selection { background: var(--fl-orange); color: #fff; }
  & .md-header__button.md-logo img { filter: var(--fl-logo-grade); }
  & .fl-trip-host > .fl-logo-trip > .fl-logo-trip-img { filter: var(--fl-logo-grade); }
  & :focus-visible { outline-color: var(--fl-orange-hot); }

  & .md-typeset h1, & .md-typeset h2, & .md-typeset h3 { font-family: var(--sk-head), "Oswald", sans-serif; font-weight: var(--sk-head-w); letter-spacing: var(--sk-track); }

  /* components that were hard-coded warm brown in the base look */
  & .fl-stats, & .fl-card { background: rgba(var(--sk-panel-rgb), .86); }
  & .fl-facts div { background: rgba(var(--sk-panel-rgb), .9); }
  & .fl-stats span, & .fl-facts span, & .fl-card p { color: var(--sk-dim); }
  & .fl-lead { color: var(--sk-text); }
  & .md-content:has(.fl-page-hero):not(:has(.fl-home)) .md-typeset table:not([class]) { background: rgba(var(--sk-panel-rgb), .72); }
  & .md-content:has(.fl-page-hero):not(:has(.fl-home)) .md-typeset table:not([class]) th { background: var(--sk-th); color: var(--sk-dim); }
  & .md-typeset table:not([class]) td { border-top-color: rgba(var(--fl-or-rgb), .18); }
  & .md-content:has(.fl-page-hero):not(:has(.fl-home)) .md-typeset table:not([class]):has(th:nth-child(3)) td:nth-child(3) { color: var(--sk-text); }
  & .fl-mush__stats { background: var(--fl-ink); }
  & .fl-cc-tip { background: var(--fl-panel); border-color: var(--fl-line); }

  /* hero banner on content pages: the photo keeps its own colours, text above */
  & .md-content .fl-page-hero {
    isolation: isolate; border-color: var(--fl-line); border-left-color: var(--fl-orange);
  }
  & .md-content .fl-page-hero p { color: var(--sk-text); }
  & .md-content .fl-page-hero h1 { color: #fff; }


  /* admonitions, details, code, kbd, tabs follow the skin through Material variables; shape here */
  & .md-typeset .admonition, & .md-typeset details {
    border: 1px solid var(--fl-line); border-left: 4px solid var(--fl-orange); border-radius: var(--sk-radius, 0); box-shadow: none; background: var(--fl-panel); color: var(--sk-text);
  }
  & .md-typeset .admonition-title, & .md-typeset summary { background: rgba(var(--fl-or-rgb), .12); border-radius: 0; }
  & .md-typeset .admonition-title::before, & .md-typeset summary::before { background-color: var(--fl-orange-hot); }
  & .md-typeset pre > code, & .md-typeset code { border-radius: var(--sk-radius, 0); }
  & .md-typeset .highlight pre > code { border-left: 3px solid var(--fl-orange); }
  & .md-typeset .tabbed-set { border: 1px solid var(--fl-line); }
  & .md-typeset .tabbed-labels > label:hover { color: var(--fl-orange-hot); }
  & .md-typeset hr { border-bottom-color: var(--fl-line); }
  & .md-typeset blockquote { border-left: 4px solid var(--fl-orange); color: var(--sk-dim); }
  & .md-typeset .md-button { border-radius: 0; }
  & .md-top { background: var(--fl-bar); color: var(--fl-orange-hot); border: 1px solid var(--fl-orange); border-radius: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); }
  & .md-top:hover { background: var(--fl-orange); color: var(--fl-ink); }
  & .md-search__form { border-radius: 0; }
  & .md-search-result__link:hover, & .md-search-result__link[data-md-state="active"] { background: rgba(var(--fl-hot-rgb), .1); }
  & .md-nav__link--active, & .md-nav__item--active > .md-nav__link { color: var(--fl-orange-hot); }
  & .md-nav__title, & .md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link { background: transparent !important; box-shadow: none !important; }
  & .md-sidebar__scrollwrap { scrollbar-color: rgba(var(--fl-or-rgb), .5) transparent; }
  & .md-tabs__link--active, & .md-tabs__item--active .md-tabs__link { color: #fff; }
  & .md-footer { background: var(--fl-ink); border-top: 1px solid var(--fl-line); }
  & .md-footer-meta { background: #000; }
  & .fl-toast { background: var(--fl-bar); border-color: var(--fl-orange); }
}

/* ---------------------------------------------------------------------
   4b. Layers UNDER the content (fire, hellfire, fog, sigil): the ::before / ::after of
   the body on content pages and of .fl-home on the photo page. Each skin fills them in;
   they are fixed to the viewport and sit below every card, so text is never washed out.
   --------------------------------------------------------------------- */
html[data-fl-theme] .fl-home { position: relative; isolation: isolate; }
html[data-fl-theme] :is(body:not(:has(.fl-home)), .fl-home)::before,
html[data-fl-theme] :is(body:not(:has(.fl-home)), .fl-home)::after { content: ""; display: none; position: fixed; z-index: -1; pointer-events: none; }

/* ---------------------------------------------------------------------
   5. SURVIVALIST: campfire, field journal, rope
   --------------------------------------------------------------------- */
html[data-fl-theme="survivalist"] {
  --sk-radius: 2px;

  & .md-typeset h1, & .md-typeset h2, & .md-typeset h3 { text-transform: none; text-shadow: 0 1px 0 rgba(0, 0, 0, .6); }
  & .md-typeset h1 { text-transform: uppercase; }
  & .md-typeset a:not(.md-button):not(.fl-discord):not(.fl-btn) { text-decoration: underline dashed; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(var(--fl-hot-rgb), .55); }

  /* rope under the header */
  & .md-header { border-bottom: 0; background-image: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent); }
  & .md-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 5px; pointer-events: none;
    background: repeating-linear-gradient(112deg, #cfa24f 0 5px, #8a642c 5px 7px, #5d4219 7px 11px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 238, 190, .35);
  }
  & .md-tabs { box-shadow: inset 0 -1px 0 var(--fl-line); }
  & .md-tabs__link { font-family: "Special Elite", Inter, sans-serif; letter-spacing: .03em; }

  /* field notes: slightly tilted, stitched border */
  & .fl-card {
    border: 1px solid var(--fl-line); border-top: 1px solid var(--fl-line); outline: 1px dashed rgba(var(--fl-hot-rgb), .28); outline-offset: -5px;
    background: linear-gradient(160deg, rgba(var(--sk-panel-rgb), .92), rgba(16, 13, 8, .94));
    transform: rotate(var(--rot, 0deg));
    &:nth-child(3n+1) { --rot: -.7deg; }
    &:nth-child(3n+2) { --rot: .5deg; }
    &:nth-child(3n) { --rot: -.25deg; }
    &:hover { transform: rotate(0) translateY(-4px); border-color: var(--fl-orange-hot); box-shadow: 0 10px 22px rgba(0, 0, 0, .55); }
  }
  & .fl-card strong, & .fl-card b { font-family: "Special Elite", Oswald, sans-serif; text-transform: none; letter-spacing: .02em; font-weight: 400; font-size: .95rem; }
  & .fl-stats { border-top: 1px solid var(--fl-line); outline: 1px dashed rgba(var(--fl-hot-rgb), .3); outline-offset: -5px; }
  & .fl-stats b, & .fl-facts b { font-family: "Special Elite", Oswald, sans-serif; font-weight: 400; }
  & .fl-btn { clip-path: none; border: 2px dashed #f7d98a; border-radius: 3px; background: linear-gradient(180deg, #d1a548, #a97d2a); color: #1b1408 !important; font-family: "Special Elite", Oswald, sans-serif; letter-spacing: .08em; text-shadow: 0 1px 0 rgba(255, 238, 190, .4); box-shadow: 0 4px 0 #6b4a17, 0 8px 18px rgba(0, 0, 0, .5); }
  & .fl-btn:hover { background: linear-gradient(180deg, #e4b957, #bd8e33); transform: translateY(-2px); }
  & .fl-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #6b4a17; }

  /* field-report hero: tape on the corners */
  & .md-content .fl-page-hero::after {
    content: ""; position: absolute; right: 1.4rem; top: -.55rem; width: 5.2rem; height: 1.3rem; pointer-events: none; transform: rotate(3deg);
    background: linear-gradient(90deg, rgba(235, 220, 170, .26), rgba(235, 220, 170, .34)); box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    clip-path: polygon(0 0, 4% 30%, 0 60%, 3% 100%, 100% 100%, 96% 60%, 100% 30%, 97% 0);
  }
  & .md-content .fl-page-hero { border-left-style: solid; background-color: #14110a; }
  & .md-content:has(.fl-page-hero):not(:has(.fl-home)) .md-typeset h2::after { height: 6px; bottom: -4px; width: 7rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='6' viewBox='0 0 14 6'%3E%3Cpath d='M0 3Q3.5-1 7 3T14 3' fill='none' stroke='%23f2c14e' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x; }
  & .md-typeset table:not([class]) { border-style: dashed; }
  & .md-typeset table:not([class]) th { border-bottom-style: dashed; font-family: "Special Elite", Oswald, sans-serif; letter-spacing: .08em; }
  & .fl-ip { border-style: dashed; }

  /* campfire under the content (see section 4b), warm vignette and fireflies above it */
  & :is(body:not(:has(.fl-home)), .fl-home) {
    &::before {
      display: block; left: -16vmin; bottom: -34vmin; width: 80vmin; height: 80vmin; will-change: transform, opacity;
      background: radial-gradient(circle at 50% 50%, rgba(255, 176, 76, .55) 0, rgba(255, 112, 30, .28) 26%, rgba(150, 60, 10, .1) 52%, transparent 70%);
      animation: fl-fire 3.3s ease-in-out infinite;
    }
    &::after {
      display: block; left: -8vmin; bottom: -19vmin; width: 36vmin; height: 36vmin; will-change: transform, opacity;
      background: radial-gradient(circle at 50% 55%, rgba(255, 226, 150, .5) 0, rgba(255, 150, 50, .22) 34%, transparent 68%);
      animation: fl-fire2 1.7s ease-in-out infinite;
    }
  }
  & .fl-fx .fx-vig { background: radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(20, 12, 4, .3) 88%, rgba(8, 5, 2, .55) 100%); }
  & .fl-fx .fx-grain { background: var(--sk-noise-w); background-size: 240px; opacity: .05; }
}
@keyframes fl-fire { 0%, 100% { opacity: .82; transform: scale(1) translate3d(0, 0, 0); } 30% { opacity: 1; transform: scale(1.05) translate3d(1%, -1%, 0); } 60% { opacity: .74; transform: scale(.97) translate3d(-1%, 0, 0); } }
@keyframes fl-fire2 { 0%, 100% { opacity: .7; transform: scale(1); } 25% { opacity: 1; transform: scale(1.12) translateY(-3%); } 50% { opacity: .6; transform: scale(.94); } 75% { opacity: .95; transform: scale(1.06) translateY(-2%); } }
@keyframes fl-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

/* ---------------------------------------------------------------------
   6. SPECIAL FORCES: night vision, HUD, target lock
   --------------------------------------------------------------------- */
html[data-fl-theme="forces"] {
  --sk-radius: 0px;
  & body { cursor: crosshair; }
  & .md-typeset h1, & .md-typeset h2, & .md-typeset h3 { text-transform: uppercase; text-shadow: 0 0 10px rgba(var(--fl-hot-rgb), .45); }
  & .md-typeset h2::before { content: "// "; opacity: .5; }
  & .md-content:has(.fl-page-hero):not(:has(.fl-home)) .md-typeset h2 { font-size: 1.2rem; }
  & .md-header, & .md-tabs { background: linear-gradient(180deg, #08130c, #050a07); }
  & .md-header { border-bottom: 1px solid var(--fl-orange); box-shadow: 0 0 22px -6px rgba(var(--fl-or-rgb), .6); }
  & .md-header__title, & .md-tabs__link { font-family: "Roboto Mono", monospace; letter-spacing: .04em; }
  & .md-tabs__link { font-size: .66rem; text-transform: uppercase; }
  & .md-typeset { text-shadow: 0 0 1px rgba(var(--fl-hot-rgb), .25); }
  & .md-typeset a:not(.md-button):not(.fl-discord):not(.fl-btn):hover { text-shadow: 0 0 8px rgba(var(--fl-hot-rgb), .8); }

  /* square, glowing button with corner ticks */
  & .fl-btn {
    clip-path: none; background: rgba(var(--fl-or-rgb), .14); border: 1px solid var(--fl-orange); color: var(--fl-orange-hot) !important; font-family: "Roboto Mono", monospace; font-weight: 700; letter-spacing: .22em;
    box-shadow: inset 0 0 14px rgba(var(--fl-or-rgb), .35), 0 0 18px -2px rgba(var(--fl-or-rgb), .5); text-shadow: 0 0 8px rgba(var(--fl-hot-rgb), .7);
    &::before { content: "[ "; } &::after { content: " ]"; }
  }
  & .fl-btn:hover { background: var(--fl-orange); color: var(--fl-ink) !important; text-shadow: none; box-shadow: 0 0 26px rgba(var(--fl-or-rgb), .8); }

  /* cards: target-lock brackets */
  & .fl-card {
    border: 1px solid var(--fl-line); border-top: 1px solid var(--fl-line); background: linear-gradient(180deg, rgba(var(--sk-panel-rgb), .9), rgba(3, 8, 5, .94));
    &::before, &::after { content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none; transition: width .2s, height .2s, border-color .2s; border: 0 solid var(--fl-orange-hot); }
    &::before { left: -1px; top: -1px; border-top-width: 2px; border-left-width: 2px; }
    &::after { right: -1px; bottom: -1px; border-bottom-width: 2px; border-right-width: 2px; }
    &:hover { transform: none; box-shadow: 0 0 20px -4px rgba(var(--fl-or-rgb), .7), inset 0 0 20px rgba(var(--fl-or-rgb), .12); }
    &:hover::before, &:hover::after { width: 22px; height: 22px; }
  }
  & .fl-card strong, & .fl-card b { font-family: "Roboto Mono", monospace; font-size: .74rem; letter-spacing: .08em; font-weight: 700; }
  & .fl-stats { border-top: 1px solid var(--fl-orange); box-shadow: 0 0 22px -8px rgba(var(--fl-or-rgb), .6); }
  & .fl-stats b, & .fl-facts b { font-family: "Roboto Mono", monospace; font-weight: 700; text-shadow: 0 0 12px rgba(var(--fl-hot-rgb), .65); }
  & .fl-facts div { border-top-width: 1px; border-color: var(--fl-line); position: relative; }
  & .fl-facts div::before { content: ""; position: absolute; left: -1px; top: -1px; width: 8px; height: 8px; border-top: 2px solid var(--fl-orange-hot); border-left: 2px solid var(--fl-orange-hot); }
  & .md-typeset table:not([class]) th { font-family: "Roboto Mono", monospace; letter-spacing: .12em; }
  & .md-typeset table:not([class]) tbody tr:hover td { box-shadow: inset 2px 0 0 var(--fl-orange-hot); }
  & .fl-ip { border-radius: 0; font-family: "Roboto Mono", monospace; }
  & .md-content .fl-page-hero h1 { animation: fl-type 1.1s steps(22) .1s both; }
  & .md-content .fl-page-hero::after { content: ""; position: absolute; right: 0; bottom: 0; width: 7rem; height: 7rem; pointer-events: none; opacity: .5;
    background: linear-gradient(var(--fl-orange-hot), var(--fl-orange-hot)) 100% 100% / 2px 1.6rem no-repeat, linear-gradient(var(--fl-orange-hot), var(--fl-orange-hot)) 100% 100% / 1.6rem 2px no-repeat; }

  /* HUD and ambient layers */
  & .fl-fx .fx-grain { inset: -20%; background: var(--sk-noise-w); background-size: 200px; opacity: .08; animation: fl-grain .7s steps(6) infinite; }
  & .fl-fx .fx-scan { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .24) 0 1px, transparent 1px 3px); }
  & .fl-fx .fx-sweep { inset: 0 0 auto 0; height: 16vh; background: linear-gradient(180deg, transparent, rgba(109, 255, 158, .06) 60%, rgba(109, 255, 158, .16) 98%, transparent); animation: fl-sweep 14s linear infinite; will-change: transform; }
  & .fl-fx .fx-vig { background: radial-gradient(ellipse at center, transparent 58%, rgba(0, 22, 9, .36) 84%, rgba(0, 8, 3, .7) 100%); }
  & .fl-fx .fx-brk {
    inset: 10px; --c: rgba(109, 255, 158, .75);
    background:
      linear-gradient(var(--c), var(--c)) 0 0 / 26px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 0 / 2px 26px no-repeat,
      linear-gradient(var(--c), var(--c)) 100% 0 / 26px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 0 / 2px 26px no-repeat,
      linear-gradient(var(--c), var(--c)) 0 100% / 26px 2px no-repeat, linear-gradient(var(--c), var(--c)) 0 100% / 2px 26px no-repeat,
      linear-gradient(var(--c), var(--c)) 100% 100% / 26px 2px no-repeat, linear-gradient(var(--c), var(--c)) 100% 100% / 2px 26px no-repeat;
  }
  & .fl-fx .fx-hud {
    inset: auto 0 0 0; height: 40px; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 18px 12px; background: linear-gradient(0deg, rgba(0, 12, 5, .9), transparent); font: 500 .58rem/1 "Roboto Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(109, 255, 158, .8); text-shadow: 0 0 6px rgba(109, 255, 158, .6);
    & span { white-space: nowrap; }
  }
}
@keyframes fl-sweep { from { transform: translateY(-20vh); } 50%, to { transform: translateY(115vh); } }
@keyframes fl-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------------------------------------------------------------------
   7. DEMONIC: hellfire, embers, sigil, jagged steel
   --------------------------------------------------------------------- */
html[data-fl-theme="demonic"] {
  --sk-radius: 0px;
  & .md-typeset h1, & .md-typeset h2, & .md-typeset h3 {
    text-transform: none; color: transparent; -webkit-text-fill-color: transparent; background: linear-gradient(180deg, #fff1cf 0%, #ff9a47 38%, #e0221f 74%, #7d0a10 100%); -webkit-background-clip: text; background-clip: text;
    filter: drop-shadow(0 0 7px rgba(255, 58, 46, .5)); animation: fl-flick 5.5s infinite;
  }
  & .md-content .fl-page-hero h1 { color: transparent; }
  & .md-typeset h2 .twemoji svg, & .md-typeset h2 svg { -webkit-text-fill-color: initial; }
  & .md-header { border-bottom: 0; background: linear-gradient(180deg, #1a0709, #12070a); }
  & .md-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none;
    background: linear-gradient(90deg, #4a070c, #ff3a2e, #ffb02e, #ff3a2e, #4a070c, #ff3a2e, #ffb02e, #ff3a2e, #4a070c) 0 0 / 200% 100%; animation: fl-lava 7s linear infinite;
    box-shadow: 0 2px 16px 1px rgba(255, 58, 46, .55);
  }
  & .md-tabs { background: linear-gradient(180deg, #0f0507, #0c0507); }
  & .md-tabs__link { font-family: "Oswald", sans-serif; letter-spacing: .1em; text-transform: uppercase; font-size: .62rem; }

  /* jagged steel */
  & .fl-grid { filter: drop-shadow(0 0 7px rgba(255, 40, 20, .3)); }
  & .fl-card {
    border: 1px solid var(--fl-line); border-top: 3px solid var(--fl-orange-hot); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    background: linear-gradient(180deg, rgba(36, 10, 13, .94), rgba(14, 5, 7, .96));
    &:hover { transform: translateY(-4px); background: linear-gradient(180deg, rgba(70, 12, 16, .95), rgba(20, 6, 8, .97)); }
    &::before { content: ""; position: absolute; right: 0; top: 0; width: 14px; height: 14px; background: linear-gradient(225deg, var(--fl-orange-hot) 0 50%, transparent 50%); pointer-events: none; opacity: .8; }
  }
  & .fl-card strong, & .fl-card b { font-family: "Metal Mania", Oswald, sans-serif; font-weight: 400; font-size: 1rem; letter-spacing: .06em; }
  & .fl-stats { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px)); border-top-color: var(--fl-orange-hot); }
  & .fl-stats b, & .fl-facts b { font-family: "Metal Mania", Oswald, sans-serif; font-weight: 400; text-shadow: 0 0 12px rgba(255, 58, 46, .7); }
  & .fl-facts div { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); }
  & .fl-btn {
    border: 0; padding-left: 2.2rem; padding-right: 2.2rem; color: #fff !important; background: linear-gradient(90deg, #7d0a10, #e0221f, #ff8a2a, #e0221f, #7d0a10) 0 0 / 220% 100%; font-family: "Metal Mania", Oswald, sans-serif; letter-spacing: .14em; font-size: 1.15rem;
    clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); text-shadow: 0 2px 0 rgba(0, 0, 0, .55); animation: fl-lava 5s linear infinite;
  }
  & .fl-btn:hover { background-color: transparent; filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 90, 40, .9)); }
  & .md-content .fl-page-hero { border-left-color: var(--fl-orange-hot); border-left-width: 6px; }
  & .md-content .fl-page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; pointer-events: none; background: linear-gradient(0deg, rgba(255, 58, 46, .28), transparent); }
  & .md-content:has(.fl-page-hero):not(:has(.fl-home)) .md-typeset h2::after { height: 3px; width: 6.5rem; background: linear-gradient(90deg, #ff3a2e, #ffb02e 60%, transparent); box-shadow: 0 0 10px rgba(255, 58, 46, .8); }
  & .md-typeset table:not([class]) th { border-bottom-color: var(--fl-orange-hot); font-family: "Oswald", sans-serif; }
  & .md-typeset hr { height: 2px; border: 0; background: linear-gradient(90deg, transparent, #ff3a2e, #ffb02e, #ff3a2e, transparent); box-shadow: 0 0 10px rgba(255, 58, 46, .6); }

  /* hellfire at the bottom, embers on canvas, sigil, watching eyes, lightning */
  & .fl-fx .fx-vig { background: radial-gradient(ellipse at 50% 40%, transparent 56%, rgba(30, 0, 4, .36) 86%, rgba(10, 0, 2, .65) 100%); }
  /* hellfire and the sigil live under the content (section 4b) */
  & :is(body:not(:has(.fl-home)), .fl-home) {
    &::before {
      display: block; left: -10%; right: -10%; bottom: -9vh; height: 34vh; transform-origin: 50% 100%; will-change: transform, opacity; opacity: .55;
      background:
        radial-gradient(ellipse 15% 78% at 8% 100%, #ff7a1a, transparent 72%), radial-gradient(ellipse 18% 92% at 27% 100%, rgba(255, 50, 20, .95), transparent 72%),
        radial-gradient(ellipse 14% 64% at 46% 100%, #ffb02e, transparent 72%), radial-gradient(ellipse 20% 96% at 65% 100%, rgba(255, 44, 20, .95), transparent 74%),
        radial-gradient(ellipse 15% 70% at 84% 100%, #ff8a1f, transparent 72%), radial-gradient(ellipse 12% 55% at 98% 100%, #ffb02e, transparent 72%);
      animation: fl-hell 2.6s ease-in-out infinite alternate;
    }
    &::after {
      display: block; left: 50%; top: 46%; width: min(86vmin, 840px); aspect-ratio: 1; margin: calc(min(86vmin, 840px) / -2) 0 0 calc(min(86vmin, 840px) / -2); opacity: .1; animation: fl-spin 160s linear infinite; will-change: transform;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' fill='none' stroke='%23ff3a2e' stroke-width='.8'%3E%3Ccircle r='97'/%3E%3Ccircle r='92' stroke-width='5' stroke-dasharray='.7 5.1'/%3E%3Ccircle r='84'/%3E%3Ccircle r='70'/%3E%3Cpath d='M0 70 -41.1-56.6 66.6 21.6-66.6 21.6 41.1-56.6Z'/%3E%3Ccircle r='20' stroke-dasharray='2 3'/%3E%3C/svg%3E") center / contain no-repeat;
    }
  }
  &:not(.fl-fx-off) .fl-door-eyes { display: block; }
  & .fl-fx .fx-flash { background: radial-gradient(ellipse at 50% 0, rgba(255, 90, 60, .55), rgba(120, 0, 10, .25) 60%, transparent); opacity: 0; mix-blend-mode: screen; animation: fl-bolt 17s linear infinite; }
}
/* The red eyes watch from the doorway of the bunker (home only; placed by fl-lamp), and go away while the JOIN lamp is on */
.fl-door-eyes { position: absolute; left: var(--ex, 0); top: var(--ey, 0); z-index: -1; display: none; width: calc(var(--es, 1) * 38px); height: calc(var(--es, 1) * 6px);
  margin: calc(var(--es, 1) * -3px) 0 0 calc(var(--es, 1) * -19px); pointer-events: none; transition: opacity .4s ease; }
html.fl-lamp-on .fl-door-eyes { opacity: 0; transition-duration: .12s; }
.fl-door-eyes i { position: absolute; top: 0; width: calc(var(--es, 1) * 12px); height: 100%; border-radius: 50%; opacity: 0; animation: fl-eyes 21s ease-in-out infinite;
  background: radial-gradient(ellipse at 50% 50%, #ff8a5c 0, #ff1b12 55%, rgba(255, 27, 18, 0) 80%); filter: drop-shadow(0 0 calc(var(--es, 1) * 4px) #ff2a14); }
.fl-door-eyes i:first-child { left: 0; }
.fl-door-eyes i:last-child { right: 0; }
@keyframes fl-lava { to { background-position: -200% 0; } }
@keyframes fl-hell { from { opacity: .38; transform: scaleY(.88) scaleX(1); } to { opacity: .62; transform: scaleY(1.12) scaleX(1.03); } }
@keyframes fl-hell2 { from { opacity: .22; transform: scaleX(-1) scaleY(1.1); } to { opacity: .4; transform: scaleX(-1) scaleY(.86); } }
@keyframes fl-spin { to { transform: rotate(360deg); } }
@keyframes fl-eyes { 0%, 54% { opacity: 0; transform: scaleY(1); } 57% { opacity: .95; } 62% { transform: scaleY(1); } 63% { transform: scaleY(.08); } 65% { transform: scaleY(1); } 72% { opacity: .95; } 76%, 100% { opacity: 0; } }
@keyframes fl-bolt { 0%, 92% { opacity: 0; } 93% { opacity: .55; } 94% { opacity: 0; } 95% { opacity: .3; } 97%, 100% { opacity: 0; } }
@keyframes fl-flick { 0%, 90%, 100% { opacity: 1; } 91% { opacity: .55; } 92% { opacity: 1; } 95% { opacity: .7; } 96% { opacity: 1; } }

/* ---------------------------------------------------------------------
   8. ZOMBIE: toxic fog, slime, blood, flies, fungus
   --------------------------------------------------------------------- */
html[data-fl-theme="zombie"] {
  --sk-radius: 0px;
  & .md-typeset h1, & .md-typeset h2, & .md-typeset h3 { text-transform: none; text-shadow: 0 0 10px rgba(var(--fl-hot-rgb), .45), 2px 2px 0 rgba(0, 0, 0, .6); }
  & .md-content .fl-page-hero h1 { animation: fl-wobble 5s ease-in-out infinite; transform-origin: 0 100%; }
  & .md-header { background: linear-gradient(180deg, #0e160b, #0b110a); }
  & .md-header::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34px; pointer-events: none; z-index: 1; transform-origin: 50% 0; animation: fl-drip 6s ease-in-out infinite;
    background:
      radial-gradient(ellipse 5px 15px at 22px 0, var(--fl-orange-hot) 0 62%, transparent 66%) 0 0 / 83px 34px repeat-x,
      radial-gradient(ellipse 4px 10px at 40px 0, var(--fl-orange) 0 62%, transparent 66%) 0 0 / 61px 34px repeat-x,
      radial-gradient(ellipse 6px 24px at 14px 0, var(--fl-orange) 0 62%, transparent 66%) 0 0 / 137px 34px repeat-x,
      radial-gradient(ellipse 3px 9px at 30px 0, var(--fl-orange-hot) 0 62%, transparent 66%) 0 0 / 47px 34px repeat-x;
    filter: drop-shadow(0 0 6px rgba(var(--fl-hot-rgb), .5));
  }
  & .md-tabs { background: #080c07; }
  & .md-tabs__link { font-family: "Oswald", sans-serif; letter-spacing: .08em; text-transform: uppercase; font-size: .62rem; }

  /* slimy, bloody cards */
  & .fl-card {
    border: 1px solid var(--fl-line); border-top: 3px solid var(--fl-orange); background: linear-gradient(180deg, rgba(20, 30, 14, .92), rgba(8, 12, 6, .95)); overflow: hidden;
    &::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; pointer-events: none;
      background:
        radial-gradient(ellipse 5px 13px at 18% 0, var(--fl-orange-hot) 0 60%, transparent 66%), radial-gradient(ellipse 4px 8px at 47% 0, var(--fl-orange) 0 60%, transparent 66%),
        radial-gradient(ellipse 6px 16px at 79% 0, var(--fl-orange-hot) 0 60%, transparent 66%); }
    &:nth-child(2n)::before { transform: scaleX(-1); }
    &:nth-child(3n)::before { height: 10px; }
    &:hover { border-color: var(--fl-orange-hot); box-shadow: 0 0 22px -4px rgba(var(--fl-hot-rgb), .6); animation: fl-jitter .25s steps(2) 2; }
  }
  & .fl-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 44%; height: 58%; pointer-events: none; opacity: .85;
    background: radial-gradient(circle at 100% 100%, rgba(142, 27, 20, .6) 0 22%, transparent 23%), radial-gradient(circle at 82% 78%, rgba(142, 27, 20, .55) 0 5%, transparent 6%), radial-gradient(circle at 64% 94%, rgba(142, 27, 20, .5) 0 4%, transparent 5%), radial-gradient(circle at 94% 52%, rgba(142, 27, 20, .5) 0 3.5%, transparent 4.5%); }
  & .fl-card strong, & .fl-card b { font-family: "Creepster", Oswald, sans-serif; font-weight: 400; font-size: 1.05rem; letter-spacing: .08em; text-transform: none; }
  & .fl-stats b, & .fl-facts b { font-family: "Creepster", Oswald, sans-serif; font-weight: 400; letter-spacing: .06em; text-shadow: 0 0 12px rgba(var(--fl-hot-rgb), .6); }
  & .fl-stats, & .fl-facts div { border-top-color: var(--fl-orange); }
  & .fl-btn { clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); background: linear-gradient(180deg, #8fc84a, #4f8a1f); color: #0a1205 !important; font-family: "Creepster", Oswald, sans-serif; letter-spacing: .14em; font-size: 1.25rem; text-shadow: 0 1px 0 rgba(255, 255, 255, .25); border-color: #b4e83c; }
  & .fl-btn:hover { background: linear-gradient(180deg, #b4e83c, #6aa52a); filter: drop-shadow(0 0 10px rgba(180, 232, 60, .8)); }
  & .fl-logo-fx { animation: fl-infect 9s steps(1) infinite; }
  & .md-content .fl-page-hero { border-left-color: var(--fl-orange-hot); }
  & .md-content:has(.fl-page-hero):not(:has(.fl-home)) .md-typeset h2::after { height: 5px; width: 6rem; border-radius: 0 0 4px 4px; background: radial-gradient(ellipse 4px 8px at 12px 0, var(--fl-orange-hot) 0 60%, transparent 66%), linear-gradient(var(--fl-orange), var(--fl-orange)) 0 0 / 100% 3px no-repeat; background-repeat: no-repeat; }
  & .md-typeset hr { height: 14px; border: 0; background: radial-gradient(ellipse 4px 12px at 14% 0, var(--fl-orange-hot) 0 60%, transparent 66%), radial-gradient(ellipse 3px 7px at 52% 0, var(--fl-orange) 0 60%, transparent 66%), radial-gradient(ellipse 5px 13px at 83% 0, var(--fl-orange-hot) 0 60%, transparent 66%), linear-gradient(var(--fl-orange), var(--fl-orange)) 0 0 / 100% 2px no-repeat; background-repeat: no-repeat; filter: drop-shadow(0 0 4px rgba(var(--fl-hot-rgb), .45)); }
  & .md-typeset table:not([class]) th { border-bottom-color: var(--fl-orange-hot); }
  & .md-typeset table:not([class]) tbody tr:nth-child(odd):hover td { box-shadow: inset 3px 0 0 var(--sk-blood); }

  /* fog, watermark, vignette; spores and flies on canvas */
  /* toxic fog drifts under the content (section 4b) */
  & :is(body:not(:has(.fl-home)), .fl-home) {
    &::before { display: block; left: -30vmax; top: -10vmax; width: 110vmax; height: 70vmax; will-change: transform; background: radial-gradient(closest-side, rgba(150, 226, 60, .26), rgba(80, 140, 30, .1) 60%, transparent); animation: fl-fog-a 62s ease-in-out infinite alternate; }
    &::after { display: block; right: -34vmax; bottom: -22vmax; width: 110vmax; height: 70vmax; will-change: transform; background: radial-gradient(closest-side, rgba(200, 230, 70, .2), rgba(90, 120, 30, .08) 60%, transparent); animation: fl-fog-b 48s ease-in-out infinite alternate; }
  }
  & .fl-fx .fx-vig { background: radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(6, 14, 2, .36) 86%, rgba(2, 6, 1, .65) 100%); }
  & .fl-fx .fx-trefoil { inset: auto; right: -5vmin; bottom: -6vmin; width: min(52vmin, 480px); aspect-ratio: 1; opacity: .05; animation: fl-spin 220s linear infinite reverse; will-change: transform;
    background: conic-gradient(from -30deg, var(--fl-orange-hot) 0 60deg, transparent 60deg 120deg, var(--fl-orange-hot) 120deg 180deg, transparent 180deg 240deg, var(--fl-orange-hot) 240deg 300deg, transparent 300deg 360deg);
    -webkit-mask: radial-gradient(circle, transparent 0 21%, #000 21.5% 80%, transparent 80.5%); mask: radial-gradient(circle, transparent 0 21%, #000 21.5% 80%, transparent 80.5%); }
  & .fl-fx .fx-trefoil::after { content: ""; position: absolute; inset: 38%; border-radius: 50%; background: var(--fl-orange-hot); }
}
@keyframes fl-fog-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(34vw, 8vh, 0) scale(1.12); } }
@keyframes fl-fog-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(-30vw, -6vh, 0) scale(.95); } }
@keyframes fl-drip { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.28); } }
@keyframes fl-jitter { 0% { transform: translate(0); } 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, -1px); } 100% { transform: translate(0); } }
@keyframes fl-wobble { 0%, 100% { transform: rotate(-.4deg); } 50% { transform: rotate(.5deg); } }
@keyframes fl-infect { 0%, 93%, 100% { transform: none; filter: none; } 94% { transform: skewX(-4deg); filter: hue-rotate(50deg) brightness(1.4); } 95% { transform: skewX(3deg) translateX(3px); filter: hue-rotate(-40deg); } 96% { transform: none; filter: brightness(.7); } }

/* ---------------------------------------------------------------------
   9. Small screens and reduced motion
   --------------------------------------------------------------------- */
@media (max-width: 60em) {
  html[data-fl-theme] .fl-fx .fx-sigil, html[data-fl-theme] .fl-fx .fx-sweep, html[data-fl-theme] .fl-fx .fx-fog.b { display: none; }
  html[data-fl-theme="survivalist"] .fl-card { transform: none; }
}
@media (max-width: 40em) {
  html[data-fl-theme="demonic"] .fl-card { clip-path: none; }
  html[data-fl-theme="demonic"] .fl-grid { filter: none; }
  .fl-theme-opt { grid-template-columns: 4.2rem 1fr 1.1rem; gap: .6rem; }
  .fl-theme-opt .pv { width: 4.2rem; }
}
/* reduced motion: fl-theme.js turns the effects off by default (html.fl-fx-off); the panel switch can turn them back on */
@media (prefers-reduced-motion: reduce) { .fl-theme-logo { animation: none; } }
html.fl-fx-off[data-fl-theme] *, html.fl-fx-off[data-fl-theme] *::before, html.fl-fx-off[data-fl-theme] *::after { animation: none !important; }
html.fl-fx-off[data-fl-theme] .fl-theme-panel.is-on { animation: none !important; }
/* Reactions to the visitor (hover, focus, click) keep working when the ambient effects are off */
html.fl-fx-off[data-fl-theme] .fl-dvhost:hover .fl-dv,
html.fl-fx-off[data-fl-theme] .md-header__button.md-logo:hover img,
html.fl-fx-off[data-fl-theme] .md-header__button.md-logo:focus-visible img { animation: fl-dshake .9s ease-in-out infinite !important; }
html.fl-fx-off[data-fl-theme] .fl-logo-fx.is-punch .fl-logo { animation: fl-punch .6s cubic-bezier(.2, .8, .3, 1) !important; }
html.fl-fx-off[data-fl-theme] .fl-rank.is-new { animation: fl-rank-pop 1.6s ease-out !important; }