/* ============================================================
   SHADOWRUN 2057 // CHARACTER GENESIS
   Aesthetic: FASA dossier / 2057 corporate datapad with
   shadowrunner BBS overtones. Warm near-black, hot magenta
   primary, cyan + amber secondary. Mixed display/mono type.
   ============================================================ */

/* ---------- CSS variables ---------- */
:root {
  /* base */
  --bg-base:        #0a0807;
  --bg-elev:        #14110f;
  --bg-card:        #1a1614;
  --bg-card-2:      #1e1a17;
  --border:         #2a241f;
  --border-bright:  #3a322c;
  --border-hi:      #514941;

  /* ink */
  --ink:            #ede8e1;
  --ink-mid:        #b8b0a4;
  --ink-mute:       #8a8278;
  --ink-dim:        #5a534b;
  --ink-faint:      #3a342e;

  /* accents */
  --hot:            #ff2e54;     /* primary signature — magenta-red */
  --hot-deep:       #c61f3f;
  --hot-glow:       rgba(255, 46, 84, 0.18);
  --cyan:           #00e5c7;     /* secondary — matrix/cyberware  */
  --cyan-glow:      rgba(0, 229, 199, 0.18);
  --amber:          #ffcd1f;     /* tertiary — warnings, magic */
  --amber-glow:     rgba(255, 205, 31, 0.18);

  /* priority chip colors */
  --pA: #ff2e54;
  --pB: #ff8a3c;
  --pC: #ffcd1f;
  --pD: #6cc8b3;
  --pE: #5a8ad6;

  /* type */
  --display: "Antonio", "Arial Narrow", sans-serif;
  --term:    "Major Mono Display", "JetBrains Mono", monospace;
  --body:    "DM Sans", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", "Courier New", monospace;

  /* layout */
  --sidenav-w: 260px;
  --max-w:    1280px;
  --gutter:   2rem;
  --radius:   2px;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
em, i { font-style: italic; }
strong { font-weight: 700; color: var(--ink); }

::selection { background: var(--hot); color: #0a0807; }

/* ---------- background atmosphere ---------- */
body::before {
  /* warm radial glow top-left + cold top-right */
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 600px at -10% -20%, rgba(255, 46, 84, 0.07), transparent 60%),
    radial-gradient(800px 700px at 120% 10%, rgba(0, 229, 199, 0.05), transparent 60%),
    radial-gradient(1000px 800px at 50% 120%, rgba(255, 205, 31, 0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

.scanlines {
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 2px,
    rgba(255, 255, 255, 0.012) 2px,
    rgba(255, 255, 255, 0.012) 3px
  );
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}

.grain {
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.95   0 0 0 0 0.93   0 0 0 0 0.88   0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.42;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: overlay;
}

/* corner brackets */
.bracket {
  position: fixed;
  width: 28px;
  height: 28px;
  z-index: 5;
  pointer-events: none;
  border-color: var(--hot);
}
.bracket--tl { top: 12px;    left: 12px;    border-top: 2px solid; border-left: 2px solid; }
.bracket--tr { top: 12px;    right: 12px;   border-top: 2px solid; border-right: 2px solid; }
.bracket--bl { bottom: 12px; left: 12px;    border-bottom: 2px solid; border-left: 2px solid; }
.bracket--br { bottom: 12px; right: 12px;   border-bottom: 2px solid; border-right: 2px solid; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.7rem 1.5rem;
  background: rgba(10, 8, 7, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar__brand {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.topbar__bars {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--hot);
  letter-spacing: 0.05em;
}
.topbar__wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.18em;
  color: var(--ink);
}
.topbar__tag {
  align-self: center;
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: 4px;
  padding: 0.12rem 0.36rem;
  white-space: nowrap;
}
.topbar__sep { color: var(--ink-dim); font-family: var(--mono); }
.topbar__sub {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-mute);
  letter-spacing: 0.08em;
}
.topbar__meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.topbar__dot {
  color: var(--cyan);
  text-shadow: 0 0 6px var(--cyan-glow);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1.0; }
}

/* ---------- layout ---------- */
.layout {
  position: relative;
  z-index: 4;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: var(--sidenav-w) 1fr;
  gap: 3rem;
  align-items: start;
}

/* ---------- side nav ---------- */
.sidenav {
  position: sticky;
  top: 70px;
  padding-top: 3rem;
  padding-bottom: 2rem;
  align-self: start;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.sidenav__label {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--hot);
  margin-bottom: 1rem;
}
.sidenav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sidenav__list a {
  display: block;
  padding: 0.38rem 0.7rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mid);
  border-left: 2px solid transparent;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.sidenav__list a em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.7rem;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}
.sidenav__list a:hover {
  color: var(--ink);
  background: rgba(255, 46, 84, 0.04);
}
.sidenav__list a.is-active {
  color: var(--hot);
  border-left-color: var(--hot);
  background: linear-gradient(90deg, var(--hot-glow), transparent 80%);
}
.sidenav__list a.is-active em { color: var(--hot); }
.sidenav__sigil {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed var(--border);
  font-family: var(--mono);
  font-size: 0.65rem;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}
.sidenav__sigil pre { margin: 0; line-height: 1.4; }

/* ---------- content base ---------- */
.content { padding: 3rem 0 6rem; }
.section { padding: 4.5rem 0; }
.section:first-of-type { padding-top: 1.5rem; }

.section__head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: end;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.section__num {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--hot);
  padding-bottom: 0.55rem;
}
.section__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.5rem);
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ink);
}
.section__rule {
  height: 6px;
  background: var(--hot);
  margin-bottom: 1rem;
  position: relative;
  box-shadow: 0 0 18px var(--hot-glow);
}
.section__rule::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(to right, transparent, var(--bg-base));
}

.caption {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  margin: -0.5rem 0 1.6rem;
}

.prose { color: var(--ink-mid); margin: 0 0 1rem; max-width: 64ch; }
.prose strong { color: var(--ink); }
.prose em { color: var(--cyan); font-style: normal; }
.prose-tight { color: var(--ink-mid); margin: 0; line-height: 1.5; font-size: 0.92rem; }

.cite {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--cyan);
  white-space: nowrap;
}

.mono { font-family: var(--mono); }
.micro { font-size: 0.82rem; color: var(--ink-mute); }

/* ---------- HERO ---------- */
.section--hero { padding-top: 2.5rem; }
.hero { position: relative; padding-bottom: 1rem; }
.hero__pre {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.tag {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--border-bright);
  color: var(--ink-mute);
}
.tag--mono { color: var(--cyan); border-color: rgba(0, 229, 199, 0.4); }
.tag--dim  { color: var(--ink-dim); }
.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(4rem, 11vw, 9rem);
  line-height: 0.9;
  margin: 0;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.hero__title-accent {
  color: var(--hot);
  text-shadow:
    2px 0 0 rgba(0, 229, 199, 0.35),
   -2px 0 0 rgba(255, 205, 31, 0.25);
  letter-spacing: -0.01em;
}
.hero__lede {
  margin: 1.5rem 0 0;
  max-width: 56ch;
  font-size: 1.05rem;
  color: var(--ink-mid);
}
.hero__lede em { color: var(--ink); font-style: italic; }
.hero__quote {
  margin: 2rem 0 0;
  padding: 1rem 1.4rem;
  border-left: 3px solid var(--hot);
  background: var(--bg-card);
  font-family: var(--term);
  color: var(--ink-mid);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.9rem;
  align-items: baseline;
}
.hero__quote q { font-style: italic; color: var(--ink); }
.hero__quote cite {
  grid-column: 2;
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}
.quote-mark { color: var(--hot); font-size: 1.2rem; }

.hero__strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 2.5rem;
  border: 1px solid var(--border);
}
.hero__strip > div {
  padding: 0.9rem 1rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--bg-card);
  position: relative;
}
.hero__strip > div:last-child { border-right: 0; }
.hero__strip > div::before {
  content: "▰";
  position: absolute;
  top: 6px;
  right: 8px;
  color: var(--hot);
  font-size: 0.6rem;
}
.hero__strip span {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.hero__strip b {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

/* ---------- callouts ---------- */
.callout {
  margin: 2rem 0;
  padding: 1.1rem 1.3rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  position: relative;
}
.callout header {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.callout p { margin: 0; color: var(--ink-mid); }
.callout--warn { border-left-color: var(--amber); }
.callout--warn header { color: var(--amber); }
.callout--warn ul { margin: 0; padding-left: 1.2rem; color: var(--ink-mid); }
.callout--warn ul li + li { margin-top: 0.5rem; }

/* ---------- priority system section ---------- */
.grid { display: grid; gap: 2rem; }
.grid--split { grid-template-columns: 1.4fr 1fr; align-items: start; }

.prio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  height: 1.4em;
  padding: 0 0.3em;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--bg-base);
  background: var(--ink);
  border-radius: 1px;
  letter-spacing: 0;
  margin: 0 0.05em;
  transform: translateY(-1px);
}
.prio.big {
  min-width: 2.4em;
  height: 2.4em;
  font-size: 1.1rem;
  border-radius: 2px;
}
.prio--a { background: var(--pA); color: #1a0a10; }
.prio--b { background: var(--pB); color: #1a0d04; }
.prio--c { background: var(--pC); color: #1a1404; }
.prio--d { background: var(--pD); color: #04140f; }
.prio--e { background: var(--pE); color: #050a18; }
.prio--de { background: linear-gradient(135deg, var(--pD), var(--pE)); color: #0a0814; }

.rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.rules li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 0.9rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.rules__tag {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hot);
  border: 1px solid var(--hot);
  letter-spacing: 0;
}
.rules__body { color: var(--ink-mid); }

.sidecard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--hot);
  padding: 1.2rem 1.3rem;
  position: relative;
}
.sidecard header {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--hot);
  margin-bottom: 0.9rem;
}
.sidecard ol {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  color: var(--ink-mid);
  font-size: 0.92rem;
}
.sidecard ol li strong { color: var(--ink); }

/* ---------- master table ---------- */
.table-wrap {
  overflow-x: auto;
  margin-bottom: 2rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.master-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.95rem;
}
.master-table thead th {
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--bg-elev);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-bright);
}
.master-table .th-prio { width: 110px; }
.master-table tbody td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink-mid);
}
.master-table tbody tr:last-child td { border-bottom: 0; }
.master-table tbody tr:hover {
  background: rgba(255, 46, 84, 0.04);
}
.master-table tbody td:first-child {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
}

.microcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}
.microcard {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.85rem 1rem;
  position: relative;
}
.microcard header {
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--hot);
  margin-bottom: 0.4rem;
}
.microcard p { margin: 0; color: var(--ink-mid); font-size: 0.86rem; line-height: 1.5; }

/* ---------- 10-step process ---------- */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 1rem;
}
.step {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  gap: 1.2rem;
  padding: 1.2rem 1.3rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  position: relative;
  transition: border-color 0.15s ease;
}
.step:hover { border-color: var(--border-hi); }
.step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 64px;
  height: 4px;
  background: var(--hot);
}
.step__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--hot);
  letter-spacing: 0.02em;
}
.step__body h3 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.step__body p { margin: 0 0 0.6rem; color: var(--ink-mid); font-size: 0.92rem; }
.step__body p:last-child { margin-bottom: 0; }

.mini-table {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.mini-table span {
  font-family: var(--mono);
  font-size: 0.74rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  color: var(--ink-mid);
  background: var(--bg-elev);
}

/* ---------- dossiers ---------- */
.dossier-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  margin-bottom: 0;
  background: var(--bg-elev);
}
.dossier-tab {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 0.7rem;
  padding: 0.85rem 1rem;
  border-right: 1px solid var(--border);
  text-align: left;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}
.dossier-tab:last-child { border-right: 0; }
.dossier-tab__handle {
  grid-row: 1 / 3;
  align-self: center;
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}
.dossier-tab__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.dossier-tab__class {
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dossier-tab:hover { background: rgba(255, 46, 84, 0.06); }
.dossier-tab.is-active {
  background: var(--bg-card);
  color: var(--hot);
}
.dossier-tab.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--hot);
  box-shadow: 0 0 12px var(--hot-glow);
}
.dossier-tab.is-active .dossier-tab__handle,
.dossier-tab.is-active .dossier-tab__name { color: var(--hot); }

.dossier {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 0;
  padding: 1.7rem;
}
.dossier.is-visible {
  display: block;
  animation: dossierIn 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes dossierIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.dossier__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.dossier__codename {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
}
.dossier__real {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  margin-top: 0.4rem;
}
.dossier__classification {
  text-align: right;
}
.dossier__classification span {
  display: block;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--hot);
  text-transform: uppercase;
}
.dossier__classification strong {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

/* priority row */
.dossier__priority-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.5rem;
  margin-bottom: 1.6rem;
}
.prio-block {
  display: grid;
  grid-template-rows: auto auto auto;
  padding: 0.7rem 0.85rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  min-height: 88px;
}
.prio-block em {
  font-family: var(--display);
  font-style: normal;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  letter-spacing: 0;
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  opacity: 0.35;
}
.prio-block b {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.prio-block span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.25rem;
}
.prio-block--a { border-left: 3px solid var(--pA); }
.prio-block--a em { color: var(--pA); }
.prio-block--b { border-left: 3px solid var(--pB); }
.prio-block--b em { color: var(--pB); }
.prio-block--c { border-left: 3px solid var(--pC); }
.prio-block--c em { color: var(--pC); }
.prio-block--d { border-left: 3px solid var(--pD); }
.prio-block--d em { color: var(--pD); }
.prio-block--e { border-left: 3px solid var(--pE); }
.prio-block--e em { color: var(--pE); }

/* dossier panels */
.dossier__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 0.95rem 1.1rem 1.05rem;
  position: relative;
}
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--hot);
}
.panel::before {
  top: -1px; left: -1px;
  border-top: 1px solid;
  border-left: 1px solid;
}
.panel::after {
  bottom: -1px; right: -1px;
  border-bottom: 1px solid;
  border-right: 1px solid;
}
.panel__h {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--hot);
  margin: 0 0 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--border-bright);
  text-transform: uppercase;
}
.panel__note {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.45;
}

/* tables inside panels */
.stats, .skills, .gear, .budget, .spells, .powers {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.85rem;
}
.stats th, .skills th, .gear th, .budget th, .spells th, .powers th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-mid);
  padding: 0.32rem 0.4rem 0.32rem 0;
}
.stats td, .skills td, .gear td, .budget td, .spells td, .powers td {
  text-align: right;
  padding: 0.32rem 0 0.32rem 0.4rem;
  color: var(--ink);
}
.stats td { font-weight: 700; font-size: 1rem; }
.stats td small {
  display: inline-block;
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--ink-mute);
  margin-left: 0.3rem;
}
.stats__sep td { padding: 0.4rem 0; }
.stats__sep td::before {
  content: "";
  display: block;
  border-top: 1px dashed var(--border-bright);
}
.stats__derived th { color: var(--cyan); }
.stats__derived td { color: var(--cyan); font-weight: 700; }

.skills th { width: 60%; }
.skills .conc { color: var(--amber); font-size: 0.78rem; text-align: right; }
.skills__lang th { color: var(--cyan); font-size: 0.78rem; }
.skills__lang td { color: var(--cyan); }

.gear .ess { color: var(--hot); width: 50px; }
.gear .cost { color: var(--ink); width: 95px; }
.gear__sum th, .gear__sum td {
  border-top: 1px solid var(--border-bright);
  padding-top: 0.6rem;
  font-weight: 700;
}
.gear__sum .ess { color: var(--hot); }

.budget th { color: var(--ink-mid); width: 65%; }
.budget td { color: var(--ink); }
.budget__sum th, .budget__sum td {
  border-top: 1px solid var(--border-bright);
  padding-top: 0.6rem;
  color: var(--cyan);
  font-weight: 700;
}
.budget__sum th em { color: var(--cyan); font-style: normal; }

.spells .cost, .powers .cost { color: var(--amber); width: 70px; }
.spells__sum th, .spells__sum td,
.powers__sum th, .powers__sum td {
  border-top: 1px solid var(--border-bright);
  padding-top: 0.55rem;
  font-weight: 700;
}
.spells__sum .cost, .powers__sum .cost { color: var(--amber); }

/* dossier sections */
.dossier__decision,
.dossier__narrative {
  margin-top: 1.4rem;
  padding: 1rem 1.2rem;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
}
.dossier__decision header,
.dossier__narrative header {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--cyan);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.dossier__decision p,
.dossier__narrative p {
  margin: 0;
  color: var(--ink-mid);
  line-height: 1.6;
}
.dossier__narrative { border-left-color: var(--amber); }
.dossier__narrative header { color: var(--amber); }

/* ---------- reference section ---------- */
.ref {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 1.5rem;
}
.ref__block {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.1rem 1.2rem 1.3rem;
}
.ref__block h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--hot);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
}
.ref__cite {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--cyan);
  font-weight: 400;
  text-transform: none;
}
.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.85rem;
}
.ref-table thead th {
  text-align: left;
  font-family: var(--display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.5rem 0.5rem 0.5rem 0;
  border-bottom: 1px solid var(--border-bright);
}
.ref-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-mid);
  padding: 0.4rem 0.5rem 0.4rem 0;
}
.ref-table tbody td {
  text-align: left;
  padding: 0.4rem 0.5rem;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.ref-table tbody td:first-child { color: var(--ink); }
.ref-table tbody tr:last-child td { border-bottom: 0; }
.ref-table__sep td {
  background: var(--bg-elev);
  color: var(--hot) !important;
  text-transform: uppercase;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  padding: 0.45rem 0.5rem;
}

.racial-list, .rules-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: var(--ink-mid);
  font-size: 0.92rem;
}
.racial-list li, .rules-list li {
  padding: 0.5rem 0.7rem;
  background: var(--bg-elev);
  border-left: 2px solid var(--border-bright);
}
.racial-list li strong, .rules-list li strong { color: var(--ink); margin-right: 0.4rem; }

/* ---------- skills index ---------- */
.skills-controls {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 1rem;
  align-items: center;
  position: sticky;
  top: 56px;
  z-index: 30;
  margin: 1.5rem 0 1.5rem;
  padding: 0.85rem 0.9rem;
  background: rgba(20, 17, 15, 0.92);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--hot);
}
.skills-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.skills-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--border-bright);
  padding: 0.36rem 0.7rem;
  border-radius: 1px;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.skills-chip:hover {
  color: var(--ink);
  border-color: var(--border-hi);
}
.skills-chip.is-active {
  color: var(--bg-base);
  background: var(--hot);
  border-color: var(--hot);
  box-shadow: 0 0 14px var(--hot-glow);
}
.skills-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-base);
  border: 1px solid var(--border-bright);
  padding: 0.35rem 0.55rem;
  min-width: 280px;
}
.skills-search:focus-within {
  border-color: var(--hot);
  box-shadow: 0 0 0 1px var(--hot), 0 0 12px var(--hot-glow);
}
.skills-search__icon {
  color: var(--hot);
  font-family: var(--mono);
  font-size: 0.85rem;
  animation: pulse 2.4s ease-in-out infinite;
}
.skills-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.85rem;
  caret-color: var(--hot);
  min-width: 0;
}
.skills-search input::placeholder { color: var(--ink-dim); }
#skills-search-clear {
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--ink-dim);
  padding: 0 0.25rem;
  display: none;
}
#skills-search-clear:hover { color: var(--hot); }
.skills-search.has-value #skills-search-clear { display: inline-block; }
.skills-count {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-mid);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.skills-count #skills-count-visible {
  font-weight: 700;
  color: var(--hot);
}
.skills-count small { color: var(--ink-dim); }

/* grid */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.skill {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.95rem 1.05rem 1rem;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.skill:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.skill::before {
  /* Top accent bar -- color is set per attribute via skill__attr's color */
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 28px;
  height: 2px;
  background: var(--hot);
}
.skill[data-attr="strength"]::before     { background: #ff2e54; }
.skill[data-attr="quickness"]::before    { background: #00e5c7; }
.skill[data-attr="intelligence"]::before { background: #5a8ad6; }
.skill[data-attr="charisma"]::before     { background: #ff8a3c; }
.skill[data-attr="willpower"]::before    { background: #ffcd1f; }
.skill[data-attr="reaction"]::before     { background: #b88bff; }
.skill[data-attr="any"]::before          { background: var(--ink-mute); }

.skill[hidden] { display: none; }

.skill__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.skill__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.05;
  text-transform: uppercase;
}
.skill__meta {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}
.skill__attr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 22px;
  padding: 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bg-base);
}
.skill__attr--strength     { background: #ff2e54; }
.skill__attr--quickness    { background: #00e5c7; color: #04140f; }
.skill__attr--intelligence { background: #5a8ad6; color: #04081a; }
.skill__attr--charisma     { background: #ff8a3c; color: #1a0d04; }
.skill__attr--willpower    { background: #ffcd1f; color: #1a1404; }
.skill__attr--reaction     { background: #b88bff; color: #14041a; }
.skill__attr--any          { background: var(--ink-faint); color: var(--ink); }

.br-pill {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 0.18rem 0.4rem;
  border: 1px solid var(--border-hi);
  color: var(--ink-mute);
}
.br-pill--big {
  font-size: 0.78rem;
  padding: 0.25rem 0.55rem;
  border-color: var(--cyan);
  color: var(--cyan);
}
.source-pill {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  padding: 0.16rem 0.4rem;
  background: var(--amber);
  color: #1a1404;
  border-radius: 1px;
  white-space: nowrap;
}
.source-pill--grim { background: #b88bff; color: #14041a; }
.source-pill--comp { background: #ff8a3c; color: #1a0d04; }
.source-pill--awk  { background: #ffcd1f; color: #1a1404; }
.source-pill--rig2 { background: #5a8ad6; color: #04081a; }
.skill__source-note {
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.skill__source-note em { color: var(--cyan); font-style: normal; }
.conc-source {
  margin: 0.4rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px dashed var(--border-bright);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.conc-source strong { color: var(--ink); }
.conc-source .source-pill { vertical-align: middle; margin: 0 0.3em; }
.skill__lock {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: #1a1404;
}
.skill__cat {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.13em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.skill__desc {
  margin: 0 0 0.85rem;
  font-size: 0.9rem;
  color: var(--ink-mid);
  line-height: 1.5;
}
.skill__desc em { color: var(--amber); font-style: normal; }
.skill__desc strong { color: var(--ink); }

.skill__conc {
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border-bright);
}
.skill__conc > span {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--hot);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.skill__conc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
}
.skill__conc li {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-mid);
  padding: 0.12rem 0.45rem;
  border: 1px solid var(--border-bright);
  background: var(--bg-elev);
  white-space: nowrap;
}

.skill--info {
  background: var(--bg-card-2);
  border-style: dashed;
}
.skill--info .skill__name { color: var(--cyan); }
.skill--info .skill__desc { color: var(--ink-mid); }

.skills-empty {
  display: none;
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  padding: 1.5rem;
  border: 1px dashed var(--border-bright);
  text-align: center;
}
.skills-grid.is-empty + .skills-empty,
.skills-grid:empty + .skills-empty { display: block; }

/* ---------- skill web section ---------- */
.skill-web-section { padding-top: 3rem; }
.skill-web-section .section__num { color: var(--amber); }
.skill-web-section .section__rule { background: var(--amber); box-shadow: 0 0 18px var(--amber-glow); }
.skill-web-section .section__rule::after { background: linear-gradient(to right, transparent, var(--bg-base)); }

.subhead {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2.4rem 0 0.6rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--hot);
  display: inline-block;
}

.web-hubs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
  margin: 1rem 0 1.5rem;
}
.web-hub {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.95rem 1.05rem 1.1rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.web-hub::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
  background: var(--hot);
}
.web-hub > header {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed var(--border-bright);
}
.web-hub__abbr {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--bg-base);
  padding: 0.2rem 0.45rem;
  background: var(--hot);
}
.web-hub__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.web-hub ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink);
}
.web-hub li {
  padding: 0.25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s ease;
}
.web-hub li:hover { border-bottom-color: var(--border-bright); }
.web-hub__note {
  margin: 0.85rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border-bright);
  font-family: var(--body);
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.5;
}

.web-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  padding: 0.12rem 0.36rem;
  border: 1px solid var(--border-hi);
  color: var(--ink-mute);
}
.web-tag--m {
  background: var(--amber);
  color: #1a1404;
  border-color: var(--amber);
}
.web-mute {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}

/* color variants per attribute */
.web-hub--quickness::before    { background: #00e5c7; }
.web-hub--quickness .web-hub__abbr { background: #00e5c7; color: #04140f; }
.web-hub--strength::before     { background: #ff2e54; }
.web-hub--strength .web-hub__abbr  { background: #ff2e54; color: #1a040b; }
.web-hub--body::before         { background: #6cc8b3; }
.web-hub--body .web-hub__abbr      { background: #6cc8b3; color: #04140f; }
.web-hub--intelligence::before { background: #5a8ad6; }
.web-hub--intelligence .web-hub__abbr { background: #5a8ad6; color: #04081a; }
.web-hub--willpower::before    { background: #ffcd1f; }
.web-hub--willpower .web-hub__abbr { background: #ffcd1f; color: #1a1404; }
.web-hub--charisma::before     { background: #ff8a3c; }
.web-hub--charisma .web-hub__abbr  { background: #ff8a3c; color: #1a0d04; }
.web-hub--reaction::before     { background: #b88bff; }
.web-hub--reaction .web-hub__abbr  { background: #b88bff; color: #14041a; }

/* cookbook of defaulting heuristics */
.cookbook {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.7rem;
  margin: 1rem 0 0;
}
.cookbook__card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.8rem 0.95rem 0.9rem;
}
.cookbook__card header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.cookbook__num {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--hot);
  color: var(--bg-base);
  padding: 0.18rem 0.45rem;
  border-radius: 1px;
}
.cookbook__card p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-mid);
  line-height: 1.5;
}
.cookbook__card p em { color: var(--cyan); font-style: italic; }

/* ---------- interactive skill web ---------- */
.skill-web-viz {
  margin: 1.4rem 0 0;
  background:
    radial-gradient(800px 600px at 50% 45%, rgba(255,46,84,0.04), transparent 70%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1rem 1rem 1.2rem;
  position: relative;
  overflow: hidden;
}
.skill-web-viz::before,
.skill-web-viz::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--hot);
  pointer-events: none;
}
.skill-web-viz::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.skill-web-viz::after { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; }

.skill-web__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1000px;
  margin: 0 auto;
  user-select: none;
  -webkit-user-select: none;
}

/* edges */
.sw-edges { pointer-events: none; }
.sw-edge {
  stroke: rgba(232, 230, 227, 0.07);
  stroke-width: 1;
  fill: none;
  transition: stroke 0.2s ease, stroke-width 0.2s ease;
}
.sw-edge.is-related {
  stroke: rgba(255, 46, 84, 0.55);
  stroke-width: 1.6;
}
.sw-edge.is-on-path {
  stroke: var(--cyan);
  stroke-width: 2.6;
  filter: drop-shadow(0 0 8px rgba(0, 229, 199, 0.6));
  stroke-dasharray: 6 6;
  animation: sw-path-flow 1.6s linear infinite;
}
@keyframes sw-path-flow {
  to { stroke-dashoffset: -24; }
}

/* nodes -- common
   NOTE: SVG <g> already uses transform="translate(...)" for positioning.
   We can't add CSS transform without nuking that, so we animate opacity
   only and apply a scale effect to the inner shapes instead. */
.sw-node {
  cursor: pointer;
  animation: sw-node-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sw-node-pop {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sw-node .sw-node__disc {
  transform-box: fill-box;
  transform-origin: center;
  animation: sw-disc-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: inherit;
}
@keyframes sw-disc-pop {
  from { transform: scale(0.2); }
  60%  { transform: scale(1.15); }
  to   { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sw-node, .sw-node .sw-node__disc { animation: none; opacity: 1; transform: none; }
}

.sw-node__disc {
  fill: var(--bg-elev);
  stroke: var(--node-color, var(--hot));
  stroke-width: 2;
  transition: fill 0.2s ease, stroke-width 0.2s ease, r 0.18s ease;
}
.sw-node__ring {
  fill: none;
  stroke: var(--node-color);
  stroke-width: 1;
  opacity: 0.25;
  transition: opacity 0.25s ease, stroke-width 0.2s ease;
}
.sw-node__label {
  fill: var(--ink-mid);
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: fill 0.2s ease, font-weight 0.2s ease;
}
.sw-node__label--attr {
  fill: var(--bg-base);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
}
.sw-node__chip {
  fill: var(--ink-dim);
  font-family: "JetBrains Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  pointer-events: none;
}
.sw-node__chip--m { fill: var(--amber); }

/* attribute hubs */
.sw-node--attr .sw-node__disc {
  fill: var(--node-color);
  stroke: var(--node-color);
  stroke-width: 0;
}
.sw-node--attr:hover .sw-node__disc,
.sw-node--attr.is-related .sw-node__disc {
  filter: drop-shadow(0 0 10px var(--node-color));
}
.sw-node--attr:hover .sw-node__ring,
.sw-node--attr.is-related .sw-node__ring {
  opacity: 0.7;
  stroke-width: 2;
}

/* skill nodes */
.sw-node--skill:hover .sw-node__disc {
  fill: var(--node-color);
  r: 10;
}
.sw-node--skill:hover .sw-node__label,
.sw-node--skill.is-related .sw-node__label {
  fill: var(--ink);
  font-weight: 600;
}
.sw-node--skill.is-related .sw-node__disc {
  fill: var(--node-color);
}

/* selection states */
.sw-node.is-source .sw-node__disc,
.sw-node.is-target .sw-node__disc {
  fill: var(--node-color);
  stroke-width: 3;
  filter: drop-shadow(0 0 14px var(--node-color));
}
.sw-node.is-source .sw-node__label,
.sw-node.is-target .sw-node__label {
  fill: var(--ink);
  font-weight: 700;
}
.sw-node.is-source::after { content: "FROM"; }
.sw-node.is-target::after { content: "TO"; }
.sw-node.is-source .sw-node__ring,
.sw-node.is-target .sw-node__ring {
  stroke-width: 2.5;
  opacity: 0.9;
  animation: sw-pulse 1.4s ease-in-out infinite;
}
@keyframes sw-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.18); opacity: 0.35; }
}

.sw-node.is-on-path:not(.is-source):not(.is-target) .sw-node__disc {
  fill: var(--node-color);
  filter: drop-shadow(0 0 6px rgba(0, 229, 199, 0.6));
}

/* readout panel */
.skill-web__readout {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--cyan);
  min-height: 56px;
}
.readout__hint {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.86rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.readout__hint kbd {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--border-bright);
  color: var(--ink-mid);
  background: var(--bg-card);
}
.readout__cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px dashed var(--border-bright);
}
.readout__col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.readout__col--arrow {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--hot);
  font-weight: 700;
  align-self: center;
}
.readout__col--cost {
  align-items: flex-end;
  text-align: right;
}
.readout__label {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  color: var(--hot);
  text-transform: uppercase;
}
.readout__value {
  font-family: var(--display);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: uppercase;
}
.readout__value--big {
  font-size: 2.1rem;
  color: var(--cyan);
  line-height: 1;
}
.readout__sub {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-mute);
}
.readout__path {
  margin-top: 0.7rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-mid);
  letter-spacing: 0.02em;
}
.readout__sep {
  color: var(--hot);
  margin: 0 0.25em;
}
.readout__row--first {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: baseline;
  margin-bottom: 0.35rem;
}

/* top search bar */
.skill-web__topbar {
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
  margin-bottom: 0.85rem;
}
.skill-web__search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg-base);
  border: 1px solid var(--border-bright);
  padding: 0.45rem 0.7rem;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.skill-web__search-wrap:focus-within {
  border-color: var(--hot);
  box-shadow: 0 0 0 1px var(--hot), 0 0 14px var(--hot-glow);
}
.skill-web__search-icon {
  color: var(--hot);
  margin-right: 0.5rem;
  font-family: var(--mono);
  font-size: 0.9rem;
  animation: pulse 2.4s ease-in-out infinite;
}
.skill-web__search {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.88rem;
  caret-color: var(--hot);
  min-width: 0;
  letter-spacing: 0.02em;
}
.skill-web__search::placeholder { color: var(--ink-dim); font-style: italic; }
.skill-web__search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.skill-web__search-count {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  white-space: nowrap;
  padding-left: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.skill-web__search-count.has-match { color: var(--cyan); }
.skill-web__search-count.no-match  { color: var(--hot); }

/* match / dim states */
.sw-node.is-match .sw-node__disc {
  stroke: var(--cyan);
  stroke-width: 3;
  filter: drop-shadow(0 0 12px var(--cyan));
}
.sw-node--attr.is-match .sw-node__disc {
  /* keep attribute color but add cyan halo */
  filter: drop-shadow(0 0 10px var(--cyan)) drop-shadow(0 0 6px var(--node-color));
}
.sw-node.is-match .sw-node__label {
  fill: var(--cyan);
  font-weight: 700;
}
.sw-node.is-match .sw-node__ring {
  stroke: var(--cyan);
  stroke-width: 2.4;
  opacity: 0.85;
  animation: sw-pulse 1.6s ease-in-out infinite;
}
.sw-node.is-dimmed {
  opacity: 0.16;
  transition: opacity 0.18s ease;
}
.sw-node.is-dimmed .sw-node__label { fill: var(--ink-dim); }
.sw-edge.is-dimmed-by-search {
  opacity: 0.28;
  transition: opacity 0.18s ease;
}

/* legend match dot */
.legend__dot--match {
  background: transparent;
  border: 2px solid var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
}

/* hotkeys hint */
.skill-web__hotkeys {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.skill-web__hotkeys kbd {
  font-family: var(--mono);
  font-size: 0.66rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--border-bright);
  color: var(--ink-mid);
  background: var(--bg-card);
  margin: 0 0.15em;
}

/* controls + legend */
.skill-web__controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}
.skill-web__reset {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  color: var(--ink-mid);
  border: 1px solid var(--border-bright);
  background: var(--bg-base);
  transition: all 0.15s ease;
}
.skill-web__reset:hover {
  color: var(--hot);
  border-color: var(--hot);
}
.skill-web__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}
.legend__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.legend__dot--attr  { background: var(--hot); }
.legend__dot--skill { background: var(--bg-elev); border: 1px solid var(--cyan); }
.legend__dot--path  { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

.skill-web__note {
  margin: 0.9rem 0 0;
  font-family: var(--body);
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.5;
}
.skill-web__note .mono { color: var(--cyan); }

@media (max-width: 720px) {
  .readout__cols {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .readout__col--arrow { display: none; }
  .readout__col--cost { align-items: flex-start; text-align: left; }
  .sw-node__label { font-size: 11px; }
  .sw-node__label--attr { font-size: 14px; }
}

/* ---------- spells index ---------- */
.spells-controls {
  position: sticky;
  top: 56px;
  z-index: 30;
  margin: 1.5rem 0 1.5rem;
  padding: 0.9rem 0.95rem;
  background: rgba(20, 17, 15, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--hot);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.spells-controls__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}
.spells-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.spells-chip {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  background: transparent;
  border: 1px solid var(--border-bright);
  padding: 0.36rem 0.7rem;
  border-radius: 1px;
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.spells-chip:hover {
  color: var(--ink);
  border-color: var(--border-hi);
}
.spells-chip.is-active {
  color: var(--bg-base);
  background: var(--hot);
  border-color: var(--hot);
  box-shadow: 0 0 14px var(--hot-glow);
}
/* source-filter chips inherit their per-source color when active */
.src-chip--SR2.is-active  { background: #ff2e54; border-color: #ff2e54; box-shadow: 0 0 12px rgba(255,46,84,0.35); }
.src-chip--GRIM.is-active { background: #b88bff; border-color: #b88bff; color: #14041a; box-shadow: 0 0 12px rgba(184,139,255,0.35); }
.src-chip--AWK.is-active  { background: #ffcd1f; border-color: #ffcd1f; color: #1a1404; box-shadow: 0 0 12px rgba(255,205,31,0.35); }
.src-chip--AZT.is-active  { background: #ff8a3c; border-color: #ff8a3c; color: #1a0d04; box-shadow: 0 0 12px rgba(255,138,60,0.35); }
.src-chip--TIRT.is-active { background: #6cc8b3; border-color: #6cc8b3; color: #04140f; box-shadow: 0 0 12px rgba(108,200,179,0.35); }
.src-chip--TIRNG.is-active { background: #5a8ad6; border-color: #5a8ad6; color: #04081a; box-shadow: 0 0 12px rgba(90,138,214,0.35); }

.spells-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--bg-base);
  border: 1px solid var(--border-bright);
  padding: 0.35rem 0.55rem;
  min-width: 320px;
  flex: 1;
}
.spells-search:focus-within {
  border-color: var(--hot);
  box-shadow: 0 0 0 1px var(--hot), 0 0 12px var(--hot-glow);
}
.spells-search__icon {
  color: var(--hot);
  font-family: var(--mono);
  font-size: 0.85rem;
  animation: pulse 2.4s ease-in-out infinite;
}
.spells-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.85rem;
  caret-color: var(--hot);
  min-width: 0;
}
.spells-search input::placeholder { color: var(--ink-dim); }
#spells-search-clear {
  font-family: var(--mono);
  font-size: 1.05rem;
  color: var(--ink-dim);
  padding: 0 0.25rem;
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
}
#spells-search-clear:hover { color: var(--hot); }
.spells-search.has-value #spells-search-clear { display: inline-block; }
.spells-count {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-mid);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.spells-count #spells-count-visible {
  font-weight: 700;
  color: var(--hot);
}
.spells-count small { color: var(--ink-dim); }

/* spell grid */
.spells-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}
.spell {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.95rem 1.05rem 1rem;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.spell:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.spell[hidden] { display: none; }

.spell__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.spell__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.05;
  text-transform: uppercase;
}
.spell__pills {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
  align-items: center;
}
.spell__cat-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.18rem 0.45rem;
  color: var(--bg-base);
  text-transform: uppercase;
}
.spell__cat-badge--combat       { background: #ff2e54; }
.spell__cat-badge--detection    { background: #00e5c7; color: #04140f; }
.spell__cat-badge--health       { background: #ffcd1f; color: #1a1404; }
.spell__cat-badge--illusion     { background: #b88bff; color: #14041a; }
.spell__cat-badge--manipulation { background: #ff8a3c; color: #1a0d04; }

/* top accent stripe per category */
.spell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--hot);
}
.spell[data-cat="combat"]::before       { background: #ff2e54; }
.spell[data-cat="detection"]::before    { background: #00e5c7; }
.spell[data-cat="health"]::before       { background: #ffcd1f; }
.spell[data-cat="illusion"]::before     { background: #b88bff; }
.spell[data-cat="manipulation"]::before { background: #ff8a3c; }

.spell__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem 0.55rem;
  margin: 0.4rem 0 0.75rem;
  padding: 0.55rem 0.65rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.spell__stat {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.spell__stat label {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.spell__stat span {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  word-break: break-word;
}
.spell__stat--drain span { color: var(--hot); }
.spell__stat--type span  { color: var(--ink); }

.spell__effect {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.7rem;
  background: var(--bg-elev);
  border-left: 2px solid var(--hot);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.45;
}
.spell__effect-label {
  color: var(--hot);
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
}
.spell__effect-value {
  color: var(--ink-mid);
}
.spell__effect-value strong {
  color: var(--ink);
  font-weight: 700;
}

.spell__desc {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  color: var(--ink-mid);
  line-height: 1.5;
}
.spell__mechanics {
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg-elev);
  border-left: 2px solid var(--hot);
}
.spell__mechanics-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hot);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.spell__mechanics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  font-size: 0.82rem;
  color: var(--ink-mid);
  line-height: 1.45;
}
.spell__mechanics-list li {
  padding-left: 1rem;
  position: relative;
}
.spell__mechanics-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--hot);
  font-size: 0.66rem;
  opacity: 0.7;
}
.spell__mechanics-list li strong { color: var(--ink); }
.spell__mechanics-list li em { color: var(--cyan); font-style: italic; }

.spell__footer {
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border-bright);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.spell__footer .source-pill { font-size: 0.62rem; padding: 0.14rem 0.4rem; }
.spell__pg {
  color: var(--ink-mute);
  font-size: 0.7rem;
}

/* loading / empty states */
.spells-loading {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--cyan);
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--border-bright);
  margin-bottom: 1.5rem;
}
.spells-empty {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  padding: 1.5rem;
  border: 1px dashed var(--border-bright);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* on the spells page, expand the available source-pill variants */
.source-pill--SR2  { background: #ff2e54; color: #1a040b; }
.source-pill--AZT  { background: #ff8a3c; color: #1a0d04; }
.source-pill--TIRT { background: #6cc8b3; color: #04140f; }
.source-pill--TIRNG { background: #5a8ad6; color: #04081a; }

@media (max-width: 720px) {
  .spell__stats { grid-template-columns: repeat(2, 1fr); }
  .spells-controls__row { gap: 0.6rem; }
  .spells-search { min-width: 0; }
}

/* ---------- magic traditions page ---------- */
.traditions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}
.tradition {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1.2rem 1.3rem 1.3rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.tradition::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 4px;
}
.tradition--hermetic::before { background: var(--cyan); }
.tradition--shamanic::before { background: var(--amber); }

.tradition__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
  border-bottom: 1px dashed var(--border-bright);
}
.tradition__sigil {
  font-size: 1.7rem;
  line-height: 1;
}
.tradition--hermetic .tradition__sigil { color: var(--cyan); }
.tradition--shamanic .tradition__sigil { color: var(--amber); }
.tradition__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.tradition__tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  text-transform: uppercase;
  text-align: right;
}
.tradition__lede {
  margin: 0 0 0.9rem;
  color: var(--ink-mid);
  font-size: 0.94rem;
  line-height: 1.55;
}
.tradition__lede em { color: var(--ink); font-style: italic; }
.tradition__list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--ink-mid);
}
.tradition__list li {
  padding-left: 1rem;
  position: relative;
}
.tradition__list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--hot);
  font-size: 0.7rem;
  top: 0.18em;
}
.tradition__list li strong { color: var(--ink); }
.tradition__example {
  margin-top: auto;
  padding-top: 0.7rem;
  border-top: 1px dashed var(--border-bright);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.tradition__example a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dotted var(--cyan);
}
.tradition__example a:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 720px) {
  .traditions { grid-template-columns: 1fr; }
}

/* ---------- totem grid ---------- */
.totems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  margin: 0.5rem 0 2rem;
}
.totem {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.totem:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.totem::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 28px;
  height: 2px;
  background: var(--amber);
}
.totem__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed var(--border-bright);
}
.totem__name {
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.totem__env {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: var(--amber);
  text-transform: uppercase;
  text-align: right;
  flex-shrink: 0;
  max-width: 50%;
}
.totem__perks {
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.totem__perks li {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-mid);
  padding: 0.22rem 0.5rem;
  background: var(--bg-elev);
  border-left: 2px solid var(--cyan);
}
.totem__perks li.perk--combat    { border-left-color: #ff2e54; }
.totem__perks li.perk--detection { border-left-color: #00e5c7; }
.totem__perks li.perk--illusion  { border-left-color: #b88bff; }
.totem__perks li.perk--manip     { border-left-color: #ff8a3c; }
.totem__perks li.perk--spirit    { border-left-color: var(--amber); }
.totem__perks li.perk--neg       { border-left-color: var(--ink-dim); color: var(--ink-mute); }
.totem__perks li strong { color: var(--ink); }
.totem__cost {
  margin: auto 0 0;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border-bright);
  font-size: 0.82rem;
  color: var(--ink-mid);
  line-height: 1.45;
}
.totem__cost strong { color: var(--hot); }

/* ---------- spirit comparison ---------- */
.spirit-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 1rem 1.15rem 1.1rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.spirit-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60px;
  height: 3px;
}
.spirit-card--hermetic::before { background: var(--cyan); }
.spirit-card--shamanic::before { background: var(--amber); }
.spirit-card header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.65rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border-bright);
}
.spirit-card--hermetic header { color: var(--cyan); }
.spirit-card--shamanic header { color: var(--amber); }
.spirit__sigil { font-size: 1.2rem; }
.spirit-card p {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  color: var(--ink-mid);
  line-height: 1.55;
}
.spirit-card p em { color: var(--ink); font-style: italic; }
.spirit-card ul {
  list-style: none;
  margin: 0 0 0.7rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--ink);
}
.spirit-card ul li {
  padding: 0.18rem 0.5rem;
  background: var(--bg-elev);
  border-left: 2px solid var(--border-bright);
}
.spirit-card ul li strong { color: var(--ink); margin-right: 0.4em; }

.spirit__nature {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem 0.5rem !important;
}
.spirit__nature li {
  padding: 0.18rem 0.45rem !important;
  background: var(--bg-elev) !important;
  border-left: 2px solid var(--amber) !important;
  font-size: 0.78rem !important;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.spirit__note {
  margin-top: auto !important;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border-bright);
  font-family: var(--mono);
  font-size: 0.74rem !important;
  color: var(--ink-mute) !important;
}

/* ---------- adept powers catalogue ---------- */
.adepts-controls {
  position: sticky;
  top: 56px;
  z-index: 30;
  margin: 1.2rem 0 1.4rem;
  padding: 0.85rem 0.9rem;
  background: rgba(20, 17, 15, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.adepts-controls__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.adepts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 0.85rem;
  margin: 0 0 1.5rem;
}
.adept {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.95rem 1.05rem 1rem;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.adept:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.adept[hidden] { display: none; }
.adept::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--hot);
}
.adept[data-src="SR2"]::before  { background: #ff2e54; }
.adept[data-src="GRIM"]::before { background: #b88bff; }
.adept[data-src="AWK"]::before  { background: #ffcd1f; }

.adept__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.adept__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.1;
  text-transform: uppercase;
}
.adept__pills {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 60%;
}
.adept__pp {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--hot);
  white-space: nowrap;
  padding: 0.18rem 0.5rem;
  border: 1px solid rgba(255, 46, 84, 0.45);
  background: rgba(255, 46, 84, 0.05);
  flex-shrink: 0;
}
.adept__act {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.45rem;
  border-radius: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.adept__act--always    { background: rgba(232, 230, 227, 0.08); color: var(--ink-mid); border: 1px solid var(--border-bright); }
.adept__act--toggle    { background: rgba(0, 229, 199, 0.12);   color: var(--cyan);    border: 1px solid rgba(0, 229, 199, 0.45); }
.adept__act--action    { background: rgba(255, 46, 84, 0.12);   color: var(--hot);     border: 1px solid rgba(255, 46, 84, 0.45); }
.adept__act--reaction  { background: rgba(255, 205, 31, 0.12);  color: var(--amber);   border: 1px solid rgba(255, 205, 31, 0.5); }
.adept__act--activated { background: rgba(184, 139, 255, 0.15); color: #b88bff;        border: 1px solid rgba(184, 139, 255, 0.5); }
.adept__act--special   { background: rgba(255, 138, 60, 0.12);  color: #ff8a3c;        border: 1px solid rgba(255, 138, 60, 0.5); }
.adept__tiers {
  margin: 0.1rem 0 0.65rem;
  padding: 0.45rem 0.6rem;
  background: var(--bg-elev);
  border-left: 2px solid var(--amber);
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--ink-mid);
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.adept__desc {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  color: var(--ink-mid);
  line-height: 1.5;
}
.adept__effect {
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg-elev);
  border-left: 2px solid var(--hot);
}
.adept__effect-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hot);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.adept__effect-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
  font-size: 0.82rem;
  color: var(--ink-mid);
  line-height: 1.45;
}
.adept__effect-list li {
  padding-left: 1rem;
  position: relative;
}
.adept__effect-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--hot);
  font-size: 0.66rem;
  opacity: 0.7;
}
.adept__footer {
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border-bright);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.adept__footer .source-pill { font-size: 0.62rem; padding: 0.14rem 0.4rem; }
.adept__pg { color: var(--ink-mute); }

.adepts-loading {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--cyan);
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--border-bright);
  margin-bottom: 1.5rem;
}
.adepts-empty {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--ink-mute);
  padding: 1.5rem;
  border: 1px dashed var(--border-bright);
  text-align: center;
  margin-bottom: 1.5rem;
}

/* ---------- glossary ---------- */
.glossary {
  margin: 0 0 1.8rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.glossary__entry {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 1.4rem;
  padding: 0.95rem 0;
  border-bottom: 1px dashed var(--border-bright);
}
.glossary__entry:last-child { border-bottom: 0; }
.glossary__entry:first-child { padding-top: 0.4rem; }

.glossary__term {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--hot);
  line-height: 1.25;
  margin: 0;
  padding-top: 0.15rem;
}
.glossary__def {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-mid);
  line-height: 1.6;
}
.glossary__def strong { color: var(--ink); }
.glossary__def em { color: var(--cyan); font-style: italic; }
.glossary__def a {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dotted var(--cyan);
}
.glossary__def a:hover { color: var(--ink); border-bottom-color: var(--ink); }

@media (max-width: 720px) {
  .glossary__entry {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .glossary__term { font-size: 1rem; }
}

/* ---------- cyberware index ---------- */
.cyber-controls {
  position: sticky;
  top: 56px;
  z-index: 30;
  margin: 1.5rem 0 1.5rem;
  padding: 0.9rem 0.95rem;
  background: rgba(20, 17, 15, 0.94);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--hot);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.cyber-controls__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

/* source-pill colours new for cyber books */
.src-chip--SSC.is-active  { background: #00e5c7; border-color: #00e5c7; color: #04140f; box-shadow: 0 0 12px rgba(0,229,199,0.35); }
.src-chip--CYB.is-active  { background: #b88bff; border-color: #b88bff; color: #14041a; box-shadow: 0 0 12px rgba(184,139,255,0.35); }
.src-chip--COMP.is-active   { background: #ff8a3c; border-color: #ff8a3c; color: #1a0d04; box-shadow: 0 0 12px rgba(255,138,60,0.35); }
.src-chip--SHADOW.is-active { background: #6cc8b3; border-color: #6cc8b3; color: #04140f; box-shadow: 0 0 12px rgba(108,200,179,0.35); }
.source-pill--SSC { background: #00e5c7; color: #04140f; }
.source-pill--CYB { background: #b88bff; color: #14041a; }
.source-pill--COMP { background: #ff8a3c; color: #1a0d04; }
.source-pill--SHADOW { background: #6cc8b3; color: #04140f; }

/* grid */
.cyber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 0.85rem;
  margin: 0 0 1.5rem;
}
.cyber {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.95rem 1.05rem 1rem;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cyber:hover {
  border-color: var(--border-hi);
  transform: translateY(-1px);
}
.cyber[hidden] { display: none; }
.cyber::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--hot);
}
.cyber[data-cat="headware"]::before  { background: #ff2e54; }
.cyber[data-cat="bodyware"]::before  { background: #ff8a3c; }
.cyber[data-cat="eyeware"]::before   { background: #00e5c7; }
.cyber[data-cat="earware"]::before   { background: #ffcd1f; }
.cyber[data-cat="limb"]::before      { background: #b88bff; }
.cyber[data-cat="bodywire"]::before  { background: #5a8ad6; }
.cyber[data-cat="bioware"]::before   { background: #6cc8b3; }
.cyber[data-cat="cybermancy"]::before{ background: #c61f3f; }
.cyber[data-cat="other"]::before     { background: var(--ink-mute); }

.cyber__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}
.cyber__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  line-height: 1.1;
  text-transform: uppercase;
}
.cyber__pills {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}
.cyber__ess {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--mono);
  padding: 0.22rem 0.55rem;
  background: rgba(255, 46, 84, 0.08);
  border: 1px solid rgba(255, 46, 84, 0.45);
  border-radius: 1px;
  white-space: nowrap;
}
.cyber__ess--bio {
  background: rgba(108, 200, 179, 0.08);
  border-color: rgba(108, 200, 179, 0.5);
}
.cyber__ess-val {
  font-weight: 700;
  font-size: 1rem;
  color: var(--hot);
}
.cyber__ess--bio .cyber__ess-val { color: #6cc8b3; }
.cyber__ess-unit {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--hot);
  text-transform: uppercase;
}
.cyber__ess--bio .cyber__ess-unit { color: #6cc8b3; }

.cyber__cat {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  color: var(--ink-mute);
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}
.cyber__cat--headware   { color: #ff2e54; }
.cyber__cat--bodyware   { color: #ff8a3c; }
.cyber__cat--eyeware    { color: #00e5c7; }
.cyber__cat--earware    { color: #ffcd1f; }
.cyber__cat--limb       { color: #b88bff; }
.cyber__cat--bodywire   { color: #5a8ad6; }
.cyber__cat--bioware    { color: #6cc8b3; }
.cyber__cat--cybermancy { color: #c61f3f; }

.cyber__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem 0.55rem;
  margin: 0 0 0.75rem;
  padding: 0.55rem 0.65rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.cyber__stat {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  min-width: 0;
}
.cyber__stat label {
  font-family: var(--mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.cyber__stat span {
  font-family: var(--mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  word-break: break-word;
}
.cyber__bionote {
  margin: 0 0 0.7rem;
  padding: 0.5rem 0.65rem;
  background: rgba(108, 200, 179, 0.08);
  border-left: 2px solid #6cc8b3;
  font-size: 0.76rem;
  color: var(--ink-mute);
  line-height: 1.45;
}
.cyber__bionote strong { color: #6cc8b3; }
.cyber__desc {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  color: var(--ink-mid);
  line-height: 1.5;
}
.cyber__mechanics {
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg-elev);
  border-left: 2px solid var(--hot);
}
.cyber__mechanics-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--hot);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}
.cyber__mechanics-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.82rem;
  color: var(--ink-mid);
  line-height: 1.45;
}
.cyber__mechanics-list li {
  padding-left: 1rem;
  position: relative;
}
.cyber__mechanics-list li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0.05em;
  color: var(--hot);
  font-size: 0.66rem;
  opacity: 0.7;
}
.cyber__mechanics-list li strong { color: var(--ink); }
.cyber[data-bio="true"] .cyber__mechanics { border-left-color: #6cc8b3; }
.cyber[data-bio="true"] .cyber__mechanics-label { color: #6cc8b3; }
.cyber[data-bio="true"] .cyber__mechanics-list li::before { color: #6cc8b3; }
.cyber__footer {
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--border-bright);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.cyber__footer .source-pill { font-size: 0.62rem; padding: 0.14rem 0.4rem; }
.cyber__pg { color: var(--ink-mute); }

.cyber-loading, .cyber-empty {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--cyan);
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--border-bright);
  margin-bottom: 1.5rem;
}
.cyber-empty { color: var(--ink-mute); }

/* ---------- pager (prev / next) ---------- */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 4rem 0 2rem;
  padding-top: 2.4rem;
  border-top: 1px dashed var(--border-bright);
}
.pager > a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  text-decoration: none;
  min-height: 76px;
}
.pager > a:hover {
  border-color: var(--hot);
  background: var(--bg-card-2);
  transform: translateY(-1px);
}
.pager__num {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  align-self: start;
  padding-top: 0.1rem;
}
.pager__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.pager__dir {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--hot);
  text-transform: uppercase;
}
.pager__label {
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.pager__prev { text-align: left; }
.pager__next {
  text-align: right;
  grid-column: 2;
  grid-template-columns: 1fr auto;
}
.pager__next .pager__body { align-items: flex-end; }
.pager__none {
  border-style: dashed;
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- TOC on landing page ---------- */
.toc {
  margin-top: 3.5rem;
}
.toc__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
.toc__head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hot);
}
.toc__head::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--hot), transparent);
}
.toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.7rem;
}
.toc__list a {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--hot);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.toc__list a:hover {
  background: var(--bg-card-2);
  border-color: var(--border-hi);
  border-left-color: var(--hot);
  transform: translateX(2px);
}
.toc__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--hot);
  letter-spacing: 0.04em;
}
.toc__body h3 {
  margin: 0 0 0.3rem;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.toc__body p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-mid);
  line-height: 1.45;
}

/* ---------- per-page section padding (single section per page) ---------- */
.page .section { padding: 1rem 0 0; }
.page .section--hero { padding-top: 1.5rem; }

@media (max-width: 720px) {
  .pager { grid-template-columns: 1fr; }
  .pager__next { grid-column: 1; text-align: left; grid-template-columns: auto 1fr; }
  .pager__next .pager__body { align-items: flex-start; }
}

/* ---------- footer ---------- */
.footer {
  margin-top: 4rem;
  padding: 1.5rem var(--gutter) 1.7rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  z-index: 4;
}
.footer__left, .footer__right {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.footer__dot { color: var(--hot); letter-spacing: 0.1em; }
.footer__right em { color: var(--ink); font-style: normal; }
.footer__x { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.06em; color: var(--ink-mute); text-decoration: none; transition: color 0.15s ease; }
.footer__x svg { opacity: 0.75; transition: opacity 0.15s ease; }
.footer__x:hover { color: var(--cyan); }
.footer__x:hover svg { opacity: 1; }
.footer__legal { flex-basis: 100%; order: 99; margin: 0.4rem 0 0; font-family: var(--mono); font-size: 0.6rem;
  line-height: 1.55; letter-spacing: 0.02em; color: var(--ink-dim); text-transform: none; }
.footer__legal em { font-style: italic; color: var(--ink-mute); }

/* mobile nav drawer — hidden on desktop, activated <=1024px (see app.js) */
.navtoggle { display: none; }
.nav-backdrop { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .layout { display: block; }
  .navtoggle {
    display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer;
    background: var(--bg-elev); border: 1px solid var(--border-hi); color: var(--ink);
    font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.45rem 0.7rem; border-radius: 8px;
  }
  .navtoggle__ico { font-size: 0.95rem; line-height: 1; }
  body.has-drawer .topbar { gap: 0.6rem; }
  body.has-drawer .topbar__meta { display: none; }
  /* off-canvas drawer */
  .sidenav {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 320px); margin: 0;
    z-index: 120; background: var(--bg-elev); border-right: 1px solid var(--border-bright);
    border-bottom: 0; padding: 1.3rem 1.1rem 2rem; max-height: none; overflow-y: auto;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    transform: translateX(-100%); transition: transform 0.25s ease;
  }
  body.nav-open .sidenav { transform: translateX(0); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); }
  /* Lock the page behind the open drawer. overflow:hidden alone is ignored on
     iOS Safari (the page scrolls on <html>, not <body>), so pin the body with
     position:fixed; app.js stores/restores scrollY via the inline `top`. */
  body.nav-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }
  .nav-backdrop {
    display: block; position: fixed; inset: 0; z-index: 110; background: rgba(0, 0, 0, 0.55);
    opacity: 0; pointer-events: none; transition: opacity 0.25s;
  }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }
  .sidenav__list { flex-direction: column; flex-wrap: nowrap; }
  .sidenav__list a { border-left: 2px solid transparent; border-bottom: 0; }
  .sidenav__list a.is-active { background: rgba(255, 46, 84, 0.06); border-left-color: var(--hot); border-bottom-color: transparent; }
  .sidenav__sigil { display: block; }
  .grid--split { grid-template-columns: 1fr; }
  .dossier__priority-row { grid-template-columns: repeat(2, 1fr); }
  .dossier__head { grid-template-columns: 1fr; }
  .dossier__classification { text-align: left; }
}

@media (max-width: 720px) {
  :root { --gutter: 1rem; }
  body { font-size: 14px; }
  .dossier-tabs { grid-template-columns: 1fr 1fr; }
  .dossier-tab { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .dossier-tab:nth-child(2) { border-right: 0; }
  .dossier-tab:nth-child(3), .dossier-tab:nth-child(4) { border-bottom: 0; }
  .dossier-tab:nth-child(4) { border-right: 0; }
  .dossier__priority-row { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .ref { grid-template-columns: 1fr; }
  .bracket { width: 16px; height: 16px; }
  .hero__strip { grid-template-columns: 1fr 1fr; }
  .hero__strip > div:nth-child(2) { border-right: 0; }
  .hero__strip > div:nth-child(1), .hero__strip > div:nth-child(2) { border-bottom: 1px solid var(--border); }
  .topbar { padding: 0.6rem 1rem; }
  .topbar__sub { display: none; }
}

/* =========================================================
   KIT cards — shared by Weapons / Armor / Gear pages
   ========================================================= */
.kit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 0.85rem;
  margin: 0 0 1.5rem;
}
.kit-loading { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-mute); padding: 1rem 0; }
.kit-empty   { font-family: var(--mono); font-size: 0.85rem; color: var(--hot); padding: 1rem 0; }

.kit {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.95rem 1.05rem 1rem;
  position: relative;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.kit:hover { border-color: var(--border-hi); transform: translateY(-1px); }
.kit[hidden] { display: none; }
.kit::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 30px; height: 2px;
  background: var(--hot);
}
.kit[data-cat="firearm"]::before    { background: #ff2e54; }
.kit[data-cat="melee"]::before      { background: #ffcd1f; }
.kit[data-cat="projectile"]::before { background: #00e5c7; }
.kit[data-cat="heavy"]::before      { background: #c61f3f; }
.kit[data-cat="explosive"]::before  { background: #ff8a3c; }
.kit[data-cat="ammo"]::before       { background: #b88bff; }
.kit[data-cat="accessory"]::before  { background: #5a8ad6; }
.kit[data-cat="exotic"]::before     { background: #6cc8b3; }
/* armor categories */
.kit[data-cat="worn"]::before       { background: #00e5c7; }
.kit[data-cat="military"]::before   { background: #c61f3f; }
.kit[data-cat="helmet"]::before     { background: #ffcd1f; }
.kit[data-cat="shield"]::before     { background: #b88bff; }
/* gear categories */
.kit[data-cat="gear"]::before         { background: #b5a642; }
.kit[data-cat="surveillance"]::before { background: #00e5c7; }
.kit[data-cat="electronics"]::before  { background: #5a8ad6; }
.kit[data-cat="medical"]::before      { background: #6cc8b3; }
.kit[data-cat="magical"]::before      { background: #b88bff; }
.kit[data-cat="deck"]::before         { background: #ff2e54; }
.kit[data-cat="program"]::before      { background: #ff8a3c; }
.kit[data-cat="vehicle"]::before      { background: #ffcd1f; }
.kit[data-cat="drone"]::before        { background: #c61f3f; }

/* source pills + chips — gear books */
.source-pill--RG   { background: #8c8f99; color: #0e0f12; }
.source-pill--RIG2 { background: #5a8ad6; color: #04081a; }
.source-pill--VR2  { background: #b88bff; color: #14041a; }
.src-chip--RG.is-active   { background: #8c8f99; border-color: #8c8f99; color: #0e0f12; box-shadow: 0 0 12px rgba(140,143,153,0.35); }
.src-chip--RIG2.is-active { background: #5a8ad6; border-color: #5a8ad6; color: #04081a; box-shadow: 0 0 12px rgba(90,138,214,0.35); }
.src-chip--VR2.is-active  { background: #b88bff; border-color: #b88bff; color: #14041a; box-shadow: 0 0 12px rgba(184,139,255,0.35); }

.kit__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.6rem; margin-bottom: 0.5rem;
}
.kit__name {
  margin: 0;
  font-family: var(--display);
  font-size: 1.14rem; font-weight: 700; letter-spacing: 0.03em;
  color: var(--ink); line-height: 1.1; text-transform: uppercase;
}
.kit__badge {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); border: 1px solid var(--border-hi);
  padding: 0.18rem 0.4rem; white-space: nowrap;
}
.kit__art {
  margin: 0 0 0.7rem; border: 1px solid var(--border-hi); background: var(--bg-base);
  display: flex; align-items: center; justify-content: center; padding: 0.4rem;
}
.kit__art img {
  max-width: 100%; max-height: 200px; object-fit: contain;
}
.kit__hero { display: flex; gap: 0.4rem; margin-bottom: 0.7rem; flex-wrap: wrap; }
.kit__chip {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  font-family: var(--mono);
  padding: 0.28rem 0.6rem;
  background: rgba(255,46,84,0.08);
  border: 1px solid rgba(255,46,84,0.45);
}
.kit__chip-label { font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.kit__chip-val   { font-size: 1.0rem; font-weight: 700; color: var(--hot); letter-spacing: 0.02em; }
.kit__chip--alt  { background: var(--bg-elev); border-color: var(--border-hi); }
.kit__chip--alt .kit__chip-val { color: var(--ink); font-size: 0.9rem; }

.kit__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 0.4rem 0.55rem;
  margin: 0 0 0.7rem;
  padding: 0.55rem 0.65rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.kit__stat { display: flex; flex-direction: column; gap: 0.06rem; min-width: 0; }
.kit__stat label {
  font-family: var(--mono);
  font-size: 0.55rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--ink-mute); text-transform: uppercase;
}
.kit__stat span {
  font-family: var(--mono);
  font-size: 0.8rem; font-weight: 600; color: var(--ink);
  letter-spacing: 0.01em; word-break: break-word;
}
.kit__econ {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(68px, 1fr));
  gap: 0.35rem 0.55rem;
  margin: 0 0 0.7rem;
}
.kit__econ .kit__stat span { color: var(--ink-mid); }
.kit__econ .kit__stat--cost span { color: var(--amber); font-weight: 700; }

.kit__desc { margin: 0 0 0.7rem; font-size: 0.85rem; color: var(--ink-mid); line-height: 1.5; }
.kit__notes {
  margin: 0 0 0.8rem;
  padding: 0.55rem 0.7rem 0.55rem 1.5rem;
  background: var(--bg-elev);
  border-left: 2px solid var(--hot);
  list-style: none;
}
.kit__notes li { position: relative; font-size: 0.77rem; color: var(--ink-mid); line-height: 1.45; margin-bottom: 0.25rem; }
.kit__notes li:last-child { margin-bottom: 0; }
.kit__notes li::before { content: "▸"; position: absolute; left: -0.95rem; color: var(--hot); }
.kit__footer {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding-top: 0.6rem; border-top: 1px solid var(--border);
}
.kit__pg { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ink-mute); }

/* source pills + chips for weapon / gear books */
.source-pill--FOF { background: #b5a642; color: #14120a; }
.source-pill--BSW { background: #8c8f99; color: #0e0f12; }
.src-chip--FOF.is-active { background: #b5a642; border-color: #b5a642; color: #14120a; box-shadow: 0 0 12px rgba(181,166,66,0.35); }
.src-chip--BSW.is-active { background: #8c8f99; border-color: #8c8f99; color: #0e0f12; box-shadow: 0 0 12px rgba(140,143,153,0.35); }

/* =========================================================
   CHARACTER BUILDER (character-builder.html)
   ========================================================= */
.cb { margin: 0 0 1.5rem; }
.cb__rail {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.35rem;
  border-bottom: 1px solid var(--border); padding-bottom: 0.8rem;
}
.cb-rail__item {
  display: flex; align-items: center; gap: 0.4rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-mute); padding: 0.3rem 0.55rem; border: 1px solid var(--border);
  background: var(--bg-elev); white-space: nowrap;
}
.cb-rail__item em { font-style: normal; font-weight: 700; color: var(--ink-dim); }
.cb-rail__item.is-done { color: var(--ink-mid); border-color: var(--border-bright); }
.cb-rail__item.is-done em { color: var(--cyan); }
.cb-rail__item.is-active { color: var(--ink); border-color: var(--hot); background: rgba(255,46,84,0.08); }
.cb-rail__item.is-active em { color: var(--hot); }

.cb__layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 1.1rem; align-items: start; }
.cb__step { min-width: 0; background: var(--bg-card); border: 1px solid var(--border); padding: 1.1rem 1.2rem 1.3rem; min-height: 320px; }
.cb__loading { font-family: var(--mono); color: var(--ink-mute); }
.cb__budget { min-width: 0; position: sticky; top: 1rem; background: var(--bg-elev); border: 1px solid var(--border); padding: 0.9rem; }
.cb__budget .cb-budget__h { font-family: var(--mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; color: var(--hot); margin-bottom: 0.5rem; }
.cb-meter { margin-bottom: 0.6rem; }
.cb-meter__top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.66rem; color: var(--ink-mid); margin-bottom: 0.2rem; }
.cb-meter__bar { height: 5px; background: var(--bg-base); border: 1px solid var(--border); }
.cb-meter__bar i { display: block; height: 100%; background: var(--cyan); }
.cb-meter.is-over .cb-meter__top { color: var(--hot); }
.cb-meter.is-over .cb-meter__bar i { background: var(--hot); }
.cb-budget__stat { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-mid); padding: 0.12rem 0; }
.cb-budget__stat strong { color: var(--ink); }
.cb-budget__note { font-family: var(--mono); font-size: 0.62rem; color: var(--cyan); margin-top: 0.3rem; line-height: 1.35; }

.cb__controls { display: flex; align-items: center; justify-content: space-between; margin-top: 1rem; gap: 0.6rem; }
.cb__controls-mid { display: flex; align-items: center; gap: 0.8rem; }
.cb__save { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-dim); transition: color 0.2s; }
.cb__save.is-on { color: var(--cyan); }
.cb-btn {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--ink); background: var(--bg-elev); border: 1px solid var(--border-hi);
  padding: 0.5rem 0.9rem; cursor: pointer; transition: all 0.15s;
}
.cb-btn:hover:not(:disabled) { border-color: var(--hot); color: var(--hot); }
.cb-btn:disabled { opacity: 0.35; cursor: default; }
.cb-btn--primary { background: var(--hot); color: #15040a; border-color: var(--hot); }
.cb-btn--primary:hover:not(:disabled) { color: #15040a; filter: brightness(1.1); }
.cb-btn--ghost { border-color: var(--border); color: var(--ink-mute); padding: 0.4rem 0.7rem; font-size: 0.7rem; }
.cb-btn--big { display: block; width: 100%; margin-top: 1rem; padding: 0.8rem; font-size: 0.95rem; }

.cb-h { font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink); margin: 0 0 0.4rem; }
.cb-h4 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 0.5rem; }
.cb-p { font-size: 0.88rem; color: var(--ink-mid); line-height: 1.5; margin: 0 0 1rem; }
.cb-cite { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-dim); }
.cb-note { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-mute); margin-top: 0.8rem; }
.cb-note.is-warn { color: var(--hot); }
.cb-empty { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-dim); padding: 0.5rem 0; }

/* priorities */
.cb-priorow { display: grid; grid-template-columns: 130px 1fr; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; }
.cb-priorow__label { font-family: var(--mono); font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.cb-priorow__cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem; }
.cb-prio { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border); padding: 0.4rem 0.5rem; text-align: left; transition: all 0.12s; }
.cb-prio:hover { border-color: var(--border-hi); }
.cb-prio__l { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink-mute); }
.cb-prio__v { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-mid); }
.cb-prio.is-chosen { border-color: var(--hot); background: rgba(255,46,84,0.1); }
.cb-prio.is-chosen .cb-prio__l { color: var(--hot); }
.cb-prio.is-taken { opacity: 0.4; }

/* metatype */
.cb-metagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 0.6rem; }
.cb-meta { display: flex; flex-direction: column; gap: 0.25rem; text-align: left; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border); padding: 0.7rem 0.8rem; transition: all 0.12s; }
.cb-meta:hover { border-color: var(--border-hi); }
.cb-meta.is-chosen { border-color: var(--hot); background: rgba(255,46,84,0.08); }
.cb-meta__name { font-family: var(--display); font-size: 1.1rem; text-transform: uppercase; color: var(--ink); }
.cb-meta__mods { font-family: var(--mono); font-size: 0.7rem; color: var(--cyan); }
.cb-meta__vis { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-mute); }

/* attributes */
.cb-attrhead, .cb-attr { display: grid; grid-template-columns: 1.4fr 1.2fr 0.7fr 0.8fr 0.8fr; gap: 0.5rem; align-items: center; }
.cb-attrhead { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 0.4rem; }
.cb-attr { padding: 0.25rem 0; }
.cb-attr > label { font-family: var(--mono); font-size: 0.82rem; color: var(--ink); }
.cb-attr__mod { font-family: var(--mono); font-size: 0.75rem; color: var(--cyan); }
.cb-attr__final { font-family: var(--mono); font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.cb-attr__final.is-over { color: var(--hot); }
.cb-attr__max { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-dim); }
.cb-stepper { display: inline-flex; align-items: center; gap: 0.5rem; }
.cb-stepper--sm { gap: 0.35rem; }
.cb-step-btn { font-family: var(--mono); font-weight: 700; width: 24px; height: 24px; line-height: 1;
  background: var(--bg-base); border: 1px solid var(--border-hi); color: var(--ink); cursor: pointer; }
.cb-step-btn:hover { border-color: var(--hot); color: var(--hot); }
.cb-attr__base { font-family: var(--mono); font-weight: 700; min-width: 1.2em; text-align: center; color: var(--ink); }
.cb-derived { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--border);
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink-mid); }
.cb-derived strong { color: var(--cyan); }

/* magic / shop shared */
.cb-magictype, .cb-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.cb-pill, .cb-tab { font-family: var(--mono); font-size: 0.74rem; padding: 0.35rem 0.7rem; background: var(--bg-elev);
  border: 1px solid var(--border); color: var(--ink-mute); cursor: pointer; }
.cb-pill.is-chosen, .cb-tab.is-active { border-color: var(--hot); color: var(--hot); background: rgba(255,46,84,0.08); }
.cb-chosen { margin-bottom: 0.8rem; }
.cb-line { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.cb-line__n { flex: 1; min-width: 0; font-size: 0.84rem; color: var(--ink); }
.cb-line__n em { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-mute); }
.cb-line__n.is-kn { font-style: italic; color: var(--ink-mid); }
.cb-line__f { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-mid); }
.cb-line__d { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-dim); }
.cb-mini { width: 3.2em; font-family: var(--mono); background: var(--bg-base); border: 1px solid var(--border-hi); color: var(--ink); padding: 0.15rem 0.3rem; }
.cb-mini--w { width: 5.5em; }
.cb-x { background: none; border: none; color: var(--ink-dim); cursor: pointer; font-size: 0.85rem; padding: 0.2rem; }
.cb-x:hover { color: var(--hot); }
/* concentration / specialization */
.cb-skill { border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; margin-bottom: 0.35rem; }
.cb-skill .cb-line { border-bottom: none; padding-bottom: 0; }
.cb-skill__focus { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; padding: 0.15rem 0 0.1rem 0.2rem; }
.cb-focus { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--mono); font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-mute); }
.cb-focus__in { width: 11em; font-family: var(--mono); font-size: 0.74rem; background: var(--bg-base); border: 1px solid var(--border-hi);
  color: var(--ink); padding: 0.2rem 0.4rem; text-transform: none; letter-spacing: 0; }
.cb-focus__in:focus { outline: none; border-color: var(--hot); }
.cb-focus__in:disabled { opacity: 0.4; cursor: not-allowed; }
.cb-tiers { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-mid); margin-left: auto; }
.cb-tiers strong { color: var(--cyan); }
.cb-tiers:empty { display: none; }
.cb-attr__base.is-max { color: var(--cyan); }
.cb-search { width: 100%; font-family: var(--mono); font-size: 0.78rem; background: var(--bg-base); border: 1px solid var(--border-hi);
  color: var(--ink); padding: 0.45rem 0.6rem; margin-bottom: 0.6rem; }
.cb-shoplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 0.3rem; max-height: 340px; overflow-y: auto; }
.cb-shopitem { display: flex; align-items: center; gap: 0.4rem; text-align: left; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border); padding: 0.35rem 0.5rem; transition: all 0.12s; }
.cb-shopitem:hover { border-color: var(--hot); }
.cb-shopitem.is-taken { opacity: 0.4; }
.cb-shopitem span { flex: 1; font-size: 0.76rem; color: var(--ink); }
.cb-shopitem em { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-mute); }
.cb-shopitem b { color: var(--hot); font-size: 0.95rem; }
/* magic: tradition / totem / foci */
.cb-magicsub { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--border); }
.cb-magicsub__h { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--amber); margin-bottom: 0.5rem; }
.cb-dim { color: var(--ink-dim); text-transform: none; letter-spacing: 0; }
.cb-help-line { font-size: 0.76rem; color: var(--ink-mute); margin-bottom: 0.6rem; line-height: 1.45; }
.cb-req { font-family: var(--mono); font-size: 0.62rem; padding: 0.1rem 0.4rem; border: 1px solid var(--border-hi); margin-left: 0.4rem; }
.cb-req.is-ok { color: var(--cyan); border-color: var(--cyan); }
.cb-req.is-missing { color: var(--amber); border-color: var(--amber); background: var(--amber-glow); }
.cb-totemgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap: 0.3rem; margin-bottom: 0.7rem; }
.cb-totem { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; text-align: left; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border); padding: 0.4rem 0.5rem; transition: all 0.12s; }
.cb-totem:hover { border-color: var(--amber); }
.cb-totem.is-chosen { border-color: var(--amber); background: var(--amber-glow); }
.cb-totem__n { font-size: 0.84rem; color: var(--ink); font-weight: 600; }
.cb-totem__env { font-family: var(--mono); font-size: 0.6rem; color: var(--ink-mute); }
.cb-totemcard { background: var(--bg-elev); border: 1px solid var(--border-hi); border-left: 2px solid var(--amber); padding: 0.7rem 0.8rem; }
.cb-totemcard__h { font-size: 0.95rem; color: var(--ink); margin-bottom: 0.4rem; }
.cb-totemcard__h em { font-family: var(--mono); font-size: 0.66rem; color: var(--amber); font-style: normal; margin-left: 0.4rem; }
.cb-totemcard__perks { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; }
.cb-perk { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-mid); }
.cb-perk--good { color: var(--cyan); }
.cb-perk--bad { color: var(--hot); }
.cb-totemcard__geas { font-size: 0.78rem; color: var(--ink-mute); line-height: 1.45; }
.cb-totemcard__geas strong { color: var(--ink); }
.cb-focusline { border-bottom: 1px solid var(--border); padding-bottom: 0.25rem; margin-bottom: 0.25rem; }
.cb-focusline .cb-line { border-bottom: none; padding-bottom: 0; }
.cb-focusline__applies { padding: 0.1rem 0 0.15rem 0.2rem; }
/* matrix / decking panel */
.cb-matrix { margin-top: 1.1rem; padding-top: 0.9rem; border-top: 1px solid var(--cyan); }
.cb-matrix .cb-magicsub__h { color: var(--cyan); }
.cb-deckpick { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-mute); margin-bottom: 0.6rem; }
.cb-deckpick select { font-family: var(--mono); font-size: 0.78rem; background: var(--bg-base); border: 1px solid var(--border-hi);
  color: var(--ink); padding: 0.35rem 0.5rem; text-transform: none; letter-spacing: 0; flex: 1; min-width: 0; max-width: 30em; }
.cb-deckstats { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-family: var(--mono); font-size: 0.72rem;
  color: var(--ink-mid); background: var(--bg-elev); border: 1px solid var(--border); padding: 0.4rem 0.6rem; }
.cb-deckstats strong { color: var(--cyan); }
.cb-persona { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 0.3rem; margin-bottom: 0.5rem; }
.cb-personarow { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  background: var(--bg-elev); border: 1px solid var(--border); padding: 0.25rem 0.5rem; }
.cb-personarow__n { font-size: 0.82rem; color: var(--ink); }
.cb-deckderived { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 0.6rem; padding-top: 0.5rem;
  border-top: 1px dashed var(--border); font-family: var(--mono); font-size: 0.78rem; color: var(--ink-mid); }
.cb-deckderived strong { color: var(--cyan); font-size: 1rem; }
.cb-deckderived em { color: var(--ink-dim); font-style: normal; font-size: 0.66rem; }

/* resources layout */
.cb-resgrid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1rem; align-items: start; }
.cb-owned__h { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); margin: 0.6rem 0 0.2rem; }

/* finish */
.cb-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 1rem; }
.cb-form label { display: flex; flex-direction: column; gap: 0.2rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.cb-form__wide { grid-column: span 3; }
.cb-form input, .cb-form select { width: 100%; min-width: 0; box-sizing: border-box; font-family: var(--body); font-size: 0.85rem; background: var(--bg-base); border: 1px solid var(--border-hi); color: var(--ink); padding: 0.4rem 0.5rem; }
.cb-summary { background: var(--bg-elev); border: 1px solid var(--border); padding: 0.8rem 1rem; }
.cb-summary h4 { font-family: var(--display); text-transform: uppercase; color: var(--ink); margin: 0 0 0.5rem; }
.cb-summary__grid { display: flex; flex-wrap: wrap; gap: 0.7rem; font-family: var(--mono); font-size: 0.74rem; color: var(--ink-mid); }
.cb-summary__grid strong { color: var(--cyan); }
.cb-summary__line { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-mute); margin: 0.6rem 0 0; }
.cb-export-status { font-family: var(--mono); font-size: 0.78rem; color: var(--cyan); margin-top: 0.6rem; min-height: 1.2em; }

@media (max-width: 900px) {
  .cb__layout, .cb-resgrid { grid-template-columns: 1fr; }
  .cb__budget { position: static; }
  .cb-form { grid-template-columns: 1fr 1fr; }
  .cb-form__wide { grid-column: span 2; }
}

@media (max-width: 560px) {
  /* stack each priority row so the 5 A–E cells get the full width */
  .cb-priorow { grid-template-columns: 1fr; gap: 0.3rem; }
  .cb-priorow__cells { gap: 0.3rem; }
  .cb-prio { padding: 0.3rem 0.25rem; }
  .cb-prio__v { font-size: 0.56rem; }
  .cb-form { grid-template-columns: 1fr; }
  .cb-form__wide { grid-column: auto; }
  .cb-kits__hint { display: none; }

  /* fixed-width inputs (11em) used twice per row overflowed narrow phones —
     let them flex, and stack the skill concentration/specialization fields */
  .cb-focus__in { min-width: 0; }
  .cb-mini--w { width: 4.5em; }
  .cb-skill__focus { flex-direction: column; align-items: stretch; gap: 0.3rem; }
  .cb-skill__focus .cb-focus { width: 100%; }
  .cb-skill__focus .cb-focus__in { flex: 1; width: auto; }
  .cb-tiers { margin-left: 0; }
  .cb-contacts .cb-line { flex-wrap: wrap; }
  .cb-contacts .cb-focus__in { flex: 1 1 45%; width: auto; }
  .cb-langs .cb-focus__in { flex: 1 1 auto; width: auto; }
  .cb-deckstats, .cb-deckderived { font-size: 0.66rem; }
}

/* builder: archetype starter kits */
.cb-kits { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1.1rem; padding: 0.6rem 0.7rem; background: var(--bg-elev); border: 1px solid var(--border-bright); }
.cb-kits__label { font-family: var(--mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--cyan); }
.cb-kit { font-family: var(--mono); font-size: 0.74rem; padding: 0.35rem 0.7rem; background: var(--bg-card); border: 1px solid var(--border-hi); color: var(--ink); cursor: pointer; transition: all 0.12s; }
.cb-kit:hover { border-color: var(--cyan); color: var(--cyan); }
.cb-kits__hint { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-dim); margin-left: auto; }

/* builder: contextual help links */
.cb-help { font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.03em; color: var(--cyan); text-decoration: none; border-bottom: 1px dotted rgba(0,229,199,0.5); white-space: nowrap; }
.cb-help:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* builder: expandable shop item (override flat version above) */
.cb-shopitem { display: flex; align-items: stretch; gap: 0; background: var(--bg-elev); border: 1px solid var(--border); padding: 0; transition: border-color 0.12s; }
.cb-shopitem:hover { border-color: var(--border-hi); }
.cb-shopitem.is-taken { opacity: 0.4; }
.cb-shopitem__art { flex-shrink: 0; width: 46px; align-self: stretch; object-fit: contain;
  background: var(--bg-base); border-right: 1px solid var(--border); padding: 3px; }
.cb-det { flex: 1; min-width: 0; }
.cb-det > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.4rem; padding: 0.4rem 0.5rem; }
.cb-det > summary::-webkit-details-marker { display: none; }
.cb-det > summary::before { content: "▸"; color: var(--ink-dim); font-size: 0.66rem; }
.cb-det[open] > summary::before { content: "▾"; color: var(--hot); }
.cb-det__name { flex: 1 1 auto; min-width: 0; font-size: 0.78rem; color: var(--ink); }
.cb-det > summary em { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-mute); font-style: normal; white-space: normal; min-width: 0; }
.cb-det__desc { margin: 0 0.6rem 0.4rem 1rem; font-size: 0.76rem; color: var(--ink-mid); line-height: 1.45; }
.cb-det__fx { margin: 0 0.6rem 0.4rem; padding-left: 1.6rem; list-style: none; }
.cb-det__fx li { position: relative; font-size: 0.72rem; color: var(--ink-mid); line-height: 1.4; margin-bottom: 0.15rem; }
.cb-det__fx li::before { content: "▸"; position: absolute; left: -0.9rem; color: var(--hot); }
.cb-det__stat { margin: 0 0.6rem 0.5rem 1rem; font-family: var(--mono); font-size: 0.68rem; color: var(--cyan); }
.cb-warnpill { color: var(--hot); font-weight: 700; }
.cb-add { flex-shrink: 0; width: 32px; border: none; border-left: 1px solid var(--border); background: var(--bg-card); color: var(--hot); font-size: 1.1rem; font-weight: 700; cursor: pointer; }
.cb-add:hover { background: var(--hot); color: #15040a; }
.cb-shop__top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.cb-shop__top .cb-search { flex: 1; margin-bottom: 0; }

/* ---------- grouped sidenav (reorg) ---------- */
.sidenav__nav { display: flex; flex-direction: column; gap: 1.1rem; }
.sidenav__home {
  display: block; padding: 0.4rem 0.7rem; text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  border-left: 2px solid transparent; transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.sidenav__home:hover { color: var(--hot); background: rgba(255,46,84,0.04); }
.sidenav__home.is-active { color: var(--hot); border-left-color: var(--hot); background: linear-gradient(90deg, var(--hot-glow), transparent 80%); }
.sidenav__grouphead {
  font-family: var(--mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-dim);
  padding: 0 0.7rem; margin-bottom: 0.35rem;
}
.sidenav__tool span::after { content: " ★"; color: var(--amber); font-size: 0.72em; vertical-align: 1px; }

/* hub: multiple TOC groups on the Overview */
.toc + .toc { margin-top: 2.6rem; }
.toc--tool .toc__num { color: var(--amber); }
.toc--tool:hover { border-color: var(--amber); }

/* ---------- host builder ---------- */
.hb__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.4rem; align-items: start; }
@media (max-width: 860px) { .hb__grid { grid-template-columns: 1fr; } }
.hb__form { background: var(--bg-card); border: 1px solid var(--border); padding: 1rem 1.1rem; }
.hb-field { display: block; margin-bottom: 1rem; font-size: 0.82rem; color: var(--ink-mid); }
.hb-field__label { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.4rem; }
.hb-field input { display: block; width: 100%; margin-top: 0.3rem; font-family: var(--mono); font-size: 0.85rem;
  background: var(--bg-base); border: 1px solid var(--border-hi); color: var(--ink); padding: 0.4rem 0.5rem; }
.hb-field input:focus { outline: none; border-color: var(--hot); }
.hb-colors { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.hb-color { font-family: var(--mono); font-size: 0.74rem; font-weight: 700; padding: 0.35rem 0.75rem; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--ink-mute); }
.hb-color--blue.is-on   { border-color: #4aa3ff; color: #4aa3ff; background: rgba(74,163,255,0.10); }
.hb-color--green.is-on  { border-color: #7CFC8A; color: #7CFC8A; background: rgba(124,252,138,0.10); }
.hb-color--orange.is-on { border-color: #ffae42; color: #ffae42; background: rgba(255,174,66,0.10); }
.hb-color--red.is-on    { border-color: var(--hot); color: var(--hot); background: rgba(255,46,84,0.10); }
.hb-stepper { display: inline-flex; align-items: center; gap: 0.5rem; }
.hb-step { font-family: var(--mono); font-weight: 700; width: 24px; height: 24px; line-height: 1;
  background: var(--bg-base); border: 1px solid var(--border-hi); color: var(--ink); cursor: pointer; }
.hb-step:hover { border-color: var(--hot); color: var(--hot); }
.hb-step__v { font-family: var(--mono); font-weight: 700; min-width: 1.4em; text-align: center; color: var(--ink); }
.hb-hint { font-family: var(--mono); font-size: 0.64rem; color: var(--ink-dim); margin-left: 0.5rem; }
.hb-subs { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.3rem; }
.hb-sub { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.hb-sub label { font-size: 0.82rem; color: var(--ink); }
.hb-sub label em { display: block; font-family: var(--mono); font-size: 0.6rem; color: var(--ink-mute); font-style: normal; }
.hb__controls { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.hb__card { background: var(--bg-elev); border: 1px solid var(--border-hi); padding: 1rem 1.1rem; }
.hb-card__head h3 { margin: 0; font-family: var(--display); font-size: 1.2rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--ink); }
.hb-card__rating { font-family: var(--mono); font-size: 0.82rem; color: var(--cyan); margin: 0.25rem 0 0.8rem; }
.hb-card__h { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-mute); margin: 1rem 0 0.4rem; }
.hb-card__subs, .hb-card__sheaf { margin: 0.3rem 0; }
.hb-card__pay { font-size: 0.85rem; color: var(--ink-mid); margin: 0.6rem 0 0; }
.hb-card__note { font-size: 0.72rem; color: var(--ink-mute); line-height: 1.5; margin: 0.8rem 0 0; }
.hb__actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.9rem; }
.hb-copied { font-family: var(--mono); font-size: 0.7rem; color: var(--cyan); opacity: 0; transition: opacity 0.15s; }
.hb-copied.is-on { opacity: 1; }
@media print { .topbar, .sidenav, .pager, .footer, .hb__form, .hb__actions, .callout { display: none !important; }
  .hb__grid { display: block; } .layout { display: block; } body { background: #fff; color: #000; } }

/* =============================================================
   INITIATIVE TRACKER (initiative.html) — mobile-first combat UI
   ============================================================= */
/* Height is driven by JS (--ir-apph = visualViewport height) because some
   mobile browsers mis-report dvh/vh and clip the bottom action bar; svh is
   the static fallback before the script runs. */
.page--ir { min-height: 0; height: 100svh; height: var(--ir-apph, 100svh); display: flex; flex-direction: column; overflow: hidden; }
.topbar--ir { flex: 0 0 auto; }
.topbar--ir .topbar__brand { text-decoration: none; color: inherit; }
.topbar--ir .topbar__cite { color: var(--cyan); text-decoration: none; }
.ir-app { flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; overflow-x: hidden; }

/* ---- lobby ---- */
.ir-lobby { flex: 1; overflow-y: auto; display: flex; flex-direction: column; justify-content: center;
  gap: 1.6rem; padding: 1.5rem clamp(1rem, 5vw, 2rem) 2.5rem; }
.ir-lobby__kick { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.35em; color: var(--hot); }
.ir-lobby__title { font-family: var(--display); font-weight: 700; font-size: clamp(2.8rem, 16vw, 5rem);
  line-height: 0.92; letter-spacing: 0.04em; color: var(--ink); margin: 0.25rem 0 0.6rem;
  text-shadow: 0 0 30px var(--hot-glow); }
.ir-lobby__sub { color: var(--ink-mid); font-size: 0.95rem; max-width: 30ch; }
.ir-card { background: var(--bg-card); border: 1px solid var(--border-bright); border-radius: 14px;
  padding: 1.1rem; display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.ir-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.ir-field > span { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.ir-field input { width: 100%; min-width: 0; box-sizing: border-box; background: var(--bg-base); border: 1px solid var(--border-hi); border-radius: 9px;
  color: var(--ink); font-family: var(--mono); font-size: 1rem; padding: 0.6rem 0.7rem; }
.ir-field input:focus { outline: none; border-color: var(--hot); }
.ir-codewrap { display: flex; gap: 0.5rem; min-width: 0; }
.ir-codeinput { flex: 1 1 0; min-width: 0; font-family: var(--display) !important; font-size: 2.2rem !important; font-weight: 700;
  letter-spacing: 0.35em; text-transform: uppercase; text-align: center; padding: 0.5rem !important; color: var(--hot) !important; }
.ir-hint { font-size: 0.78rem; color: var(--ink-mute); line-height: 1.4; }
.ir-x { display: inline-flex; align-self: center; align-items: center; gap: 0.4rem; margin-top: 0.2rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-mute); text-decoration: none; transition: color 0.15s ease; }
.ir-x svg { opacity: 0.75; }
.ir-x:hover { color: var(--cyan); }
.ir-legal { align-self: center; max-width: 34ch; margin: 0.2rem auto 0; font-family: var(--mono); font-size: 0.58rem;
  line-height: 1.5; color: var(--ink-dim); text-align: center; }
.ir-legal em { font-style: italic; color: var(--ink-mute); }

/* ---- buttons ---- */
.ir-btn { appearance: none; cursor: pointer; border: 1px solid var(--border-hi); border-radius: 11px;
  background: var(--bg-elev); color: var(--ink); font-family: var(--display); font-weight: 600;
  font-size: 1.05rem; letter-spacing: 0.06em; padding: 0.8rem 1rem; transition: transform 0.06s, border-color 0.15s, background 0.15s; }
.ir-btn:active { transform: scale(0.97); }
.ir-btn--big { width: 100%; padding: 1rem; font-size: 1.2rem; }
.ir-btn--primary { background: var(--hot); border-color: var(--hot); color: #15040a; }
.ir-btn--ghost { background: transparent; color: var(--ink-mid); }
.ir-btn--roll { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  background: linear-gradient(135deg, var(--cyan), #00b39c); border-color: var(--cyan); color: #042b26;
  font-size: 1.35rem; padding: 1rem; box-shadow: 0 6px 24px var(--cyan-glow); }
.ir-btn--roll span { font-family: var(--mono); font-size: 0.72rem; font-weight: 600; opacity: 0.8; }
.ir-iconbtn { appearance: none; cursor: pointer; background: var(--bg-elev); border: 1px solid var(--border-hi);
  color: var(--ink-mid); border-radius: 10px; padding: 0.55rem 0.7rem; font-size: 1rem; font-family: var(--mono); }
.ir-iconbtn:active { transform: scale(0.95); }

/* ---- room header ---- */
.ir-head { flex: 0 0 auto; display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem clamp(0.7rem, 4vw, 1.2rem); border-bottom: 1px solid var(--border); background: var(--bg-elev); }
.ir-room { display: flex; align-items: baseline; gap: 0.5rem; background: none; border: 0; cursor: pointer; padding: 0; }
.ir-room__code { font-family: var(--display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.22em; color: var(--hot); }
.ir-room__copy { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-mute); letter-spacing: 0.1em; }
.ir-rp { margin-left: auto; display: flex; gap: 0.9rem; }
.ir-rp__round, .ir-rp__pass { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.15em; color: var(--ink-mute); text-align: center; line-height: 1.15; }
.ir-rp b { display: block; font-family: var(--display); font-size: 1.45rem; color: var(--ink); letter-spacing: 0; }
.ir-rp__pass b { color: var(--amber); }
.ir-rp__stage { align-self: center; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--ink-mute); border: 1px solid var(--border-hi); border-radius: 6px; padding: 0.2rem 0.45rem; }
.ir-rp__stage.is-order { color: var(--cyan); border-color: var(--cyan); }
.ir-syncdot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.ir-syncdot[data-s="syncing"] { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: irpulse 0.9s infinite; }
.ir-syncdot[data-s="err"] { background: var(--hot); box-shadow: 0 0 8px var(--hot); }
@keyframes irpulse { 50% { opacity: 0.25; } }

/* ---- scroll body ---- */
.ir-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 0.8rem clamp(0.7rem, 4vw, 1.2rem); display: flex; flex-direction: column; gap: 0.7rem; }
.ir-status { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-mute); text-align: center; letter-spacing: 0.04em; }
.ir-status b { color: var(--cyan); }
.ir-myroll { position: sticky; top: 0; z-index: 3; }
.ir-list { display: flex; flex-direction: column; gap: 0.5rem; }
.ir-empty { text-align: center; color: var(--ink-mute); padding: 2rem 1rem; font-size: 0.9rem; }
.ir-divider { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-dim); margin: 0.6rem 0 0.1rem; }
.ir-spacer { height: 0.4rem; }

/* ---- combatant rows ---- */
.ir-row { position: relative; display: grid; grid-template-columns: 38px 1fr auto 26px; align-items: center; gap: 0.55rem;
  background: var(--bg-card); border: 1px solid var(--border-bright); border-left: 4px solid var(--c, var(--border-hi));
  border-radius: 11px; padding: 0.55rem 0.6rem; transition: border-color 0.15s, box-shadow 0.2s, opacity 0.2s, transform 0.1s; }
.ir-row.is-mine { background: var(--bg-card-2); }
.ir-row.is-deck { border-color: var(--c, var(--hot)); box-shadow: 0 0 0 1px var(--c, var(--hot)), 0 8px 28px -8px var(--c, var(--hot)); }
.ir-row.is-acted { opacity: 0.55; }
.ir-row.is-spent { opacity: 0.4; }
.ir-row__act { width: 32px; height: 32px; border-radius: 8px; border: 1.5px solid var(--border-hi);
  background: var(--bg-base); color: var(--cyan); font-size: 1rem; font-weight: 700; cursor: pointer; }
.ir-row.is-acted .ir-row__act { background: var(--cyan); color: #042b26; border-color: var(--cyan); }
.ir-row__main { min-width: 0; }
.ir-row__name { font-family: var(--display); font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; line-height: 1.1; }
.ir-row__meta { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-mute); margin-top: 0.15rem; display: flex; align-items: center; gap: 0.5rem; }
.ir-tag { font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.12em; padding: 0.1rem 0.32rem; border-radius: 4px;
  background: var(--bg-base); border: 1px solid var(--border-hi); color: var(--ink-mute); }
.ir-tag--you { color: var(--cyan); border-color: var(--cyan); }
.ir-tag--deck { color: #15040a; background: var(--c, var(--hot)); border-color: transparent; }
.ir-dots { display: inline-flex; gap: 2px; }
.ir-dots i { width: 6px; height: 6px; border-radius: 2px; background: var(--c, var(--ink-mid)); }
.ir-dots i.used { background: var(--ink-faint); }
.ir-row__init { display: flex; align-items: center; gap: 0.35rem; }
.ir-initbox { width: 2.6ch; background: transparent; border: none; border-bottom: 1px dashed var(--border-hi);
  color: var(--ink); font-family: var(--display); font-weight: 700; font-size: 1.9rem; text-align: center; padding: 0; }
.ir-initbox:focus { outline: none; border-bottom-color: var(--hot); color: var(--hot); }
.ir-roll { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border-hi); background: var(--bg-base);
  font-size: 1.05rem; cursor: pointer; }
.ir-roll:active { transform: scale(0.9); }
.ir-row__x { width: 24px; height: 24px; border: 0; background: none; color: var(--ink-dim); font-size: 0.9rem; cursor: pointer; }
.ir-row__x:active { color: var(--hot); }
/* roll-stage card has no act toggle → 3-column grid; ready cards glow faintly */
.ir-row--roll { grid-template-columns: 1fr auto 26px; }
.ir-row--roll.is-ready { border-left-color: var(--c, var(--border-hi)); box-shadow: inset 2px 0 0 var(--c, transparent); }
.ir-row--roll:not(.is-ready) .ir-initbox { color: var(--ink-dim); }

/* order stage — flattened turn order */
.ir-order { display: flex; flex-direction: column; gap: 0.4rem; }
.ir-phase { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 0.6rem; width: 100%; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border-bright); border-left: 4px solid var(--c, var(--border-hi));
  border-radius: 10px; padding: 0.6rem 0.7rem; color: var(--ink); cursor: pointer; transition: opacity 0.15s, box-shadow 0.2s, transform 0.08s; }
.ir-phase:active { transform: scale(0.99); }
.ir-phase__n { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-mute); text-align: center; }
.ir-phase__name { font-family: var(--display); font-size: 1.15rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; min-width: 0; }
.ir-phase__init { font-family: var(--display); font-weight: 700; font-size: 1.6rem; color: var(--ink-mid); }
.ir-phase.is-done { opacity: 0.4; }
.ir-phase.is-done .ir-phase__n::after { content: " ✓"; color: var(--cyan); }
.ir-phase.is-now { border-color: var(--c, var(--hot)); box-shadow: 0 0 0 1px var(--c, var(--hot)), 0 8px 28px -10px var(--c, var(--hot)); }
.ir-phase.is-now .ir-phase__init { color: var(--ink); }
.ir-phase.is-now .ir-phase__n { color: var(--c, var(--hot)); }
.ir-tag--pass { color: var(--amber); border-color: var(--amber); }

/* ---- join card ---- */
.ir-join__h { font-family: var(--display); font-size: 1.15rem; color: var(--ink); margin-bottom: 0.2rem; }
.ir-join__row { display: flex; gap: 0.6rem; align-items: flex-end; }
.ir-field--grow { flex: 1; }
.ir-join__row .ir-field { flex: 1; }
.ir-join__row .ir-btn { white-space: nowrap; }

/* ---- bottom action bar ---- */
.ir-bar { flex: 0 0 auto; display: flex; gap: 0.5rem; padding: 0.6rem clamp(0.7rem, 4vw, 1.2rem);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--bg-elev); }
.ir-btn--pass, .ir-btn--round { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.05; padding: 0.7rem 0.5rem; }
.ir-btn--pass small, .ir-btn--round small { font-family: var(--mono); font-size: 0.56rem; font-weight: 400; letter-spacing: 0.08em; opacity: 0.75; margin-top: 0.15rem; }
.ir-btn--pass { background: var(--bg-card); border-color: var(--amber); color: var(--amber); }
.ir-btn--round { background: var(--hot); border-color: var(--hot); color: #15040a; }
.ir-iconbtn--bar { font-size: 0.78rem; font-family: var(--display); letter-spacing: 0.05em; padding: 0.6rem 0.7rem; }

/* ---- setup notice ---- */
.ir-setup { flex: 1; overflow-y: auto; padding: 2rem clamp(1rem, 6vw, 3rem); color: var(--ink-mid); max-width: 60ch; margin: 0 auto; }
.ir-setup h2 { font-family: var(--display); color: var(--ink); font-size: 1.6rem; margin-bottom: 0.8rem; }
.ir-setup ol { margin: 0.8rem 0 0.8rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ir-setup code { font-family: var(--mono); font-size: 0.82rem; color: var(--cyan); background: var(--bg-elev); padding: 0.05rem 0.3rem; border-radius: 4px; }
.ir-setup .ir-dim { color: var(--ink-mute); font-size: 0.85rem; margin-top: 0.6rem; }

/* ---- toast ---- */
.ir-toast { position: fixed; left: 50%; bottom: calc(5rem + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(10px);
  background: var(--bg-card); border: 1px solid var(--cyan); color: var(--ink); font-family: var(--mono); font-size: 0.8rem;
  padding: 0.6rem 0.9rem; border-radius: 9px; opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 100; }
.ir-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- bottom sheet (room menu) ---- */
.ir-sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; }
.ir-sheet__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.2s; }
.ir-sheet.is-on .ir-sheet__bg { opacity: 1; }
.ir-sheet__panel { position: relative; width: 100%; max-width: 760px; margin: 0 auto; background: var(--bg-card);
  border-top: 1px solid var(--border-bright); border-radius: 16px 16px 0 0;
  padding: 0.7rem 0.7rem calc(0.7rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 0.5rem;
  transform: translateY(100%); transition: transform 0.22s ease; }
.ir-sheet.is-on .ir-sheet__panel { transform: translateY(0); }
.ir-sheet__btn { text-align: left; background: var(--bg-elev); border: 1px solid var(--border-hi); border-radius: 11px;
  padding: 0.8rem 0.9rem; color: var(--ink); font-family: var(--display); font-size: 1.1rem; cursor: pointer;
  display: flex; flex-direction: column; gap: 0.15rem; }
.ir-sheet__btn:active { transform: scale(0.99); }
.ir-sheet__btn small { font-family: var(--mono); font-size: 0.66rem; color: var(--ink-mute); font-weight: 400; }
.ir-sheet__btn.is-danger { border-color: var(--hot); color: var(--hot); }
.ir-sheet__btn.is-danger small { color: var(--hot-deep); }
.ir-sheet__cancel { text-align: center; color: var(--ink-mid); background: transparent; }

@media (min-width: 600px) {
  .ir-row__name { font-size: 1.2rem; }
  .ir-initbox { font-size: 2.1rem; }
}
@media (max-width: 480px) {
  .topbar--ir { padding: 0.55rem 0.8rem; gap: 0.6rem; }
  .topbar--ir .topbar__sub, .topbar--ir .topbar__sep, .topbar--ir .topbar__cite { display: none; }
  .ir-head { padding: 0.55rem 0.75rem; gap: 0.5rem; }
  .ir-room__code { font-size: 1.3rem; letter-spacing: 0.12em; }
  .ir-rp { gap: 0.7rem; }
  .ir-rp b { font-size: 1.3rem; }
  .ir-row { grid-template-columns: 34px 1fr auto 22px; gap: 0.45rem; }
  .ir-row--roll { grid-template-columns: 1fr auto 22px; }
  .ir-initbox { font-size: 1.7rem; width: 2.4ch; }
  .ir-codeinput { font-size: 1.8rem !important; letter-spacing: 0.22em; }
  .ir-lobby__title { font-size: clamp(2.6rem, 15vw, 4rem); }
}