/* ============================================================
   N.O. BY NIGHT  -  Ashley Holiday Chronicle
   Vampire: The Masquerade  -  1920s to 1940s New Orleans
   Aesthetic: gothic art deco, aged paper, blood and brass
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cinzel+Decorative:wght@400;700;900&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Special+Elite&display=swap');

:root {
  /* core palette */
  --void: #0a0807;
  --void-2: #110d0b;
  --char: #181210;
  --char-2: #211915;
  --smoke: #2a201b;

  /* paper */
  --parch: #e9dec5;
  --parch-2: #ddd0b2;
  --parch-shadow: #c7b690;
  --aged: #d8c8a6;

  /* blood */
  --blood: #6e0a0a;
  --blood-2: #8b0000;
  --blood-bright: #a51212;
  --blood-glow: rgba(150, 12, 12, 0.55);

  /* brass / gold deco */
  --brass: #b8985a;
  --brass-bright: #d8b876;
  --brass-dim: #8a6f3e;

  /* ink */
  --ink: #1b1410;
  --ink-2: #3a2c22;
  --ink-faint: #5c4a3a;

  /* ui text on dark */
  --on-dark: #d9c9aa;
  --on-dark-dim: #9c8a6e;

  --rule: #b7a373;
  --rule-dark: #4a3a28;

  --serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --display: 'Cinzel', serif;
  --deco: 'Cinzel Decorative', 'Cinzel', serif;
  --type: 'Special Elite', 'Courier New', monospace;

  --shadow-deep: 0 18px 60px rgba(0,0,0,0.75);
  /* scales with the screen, wide on big monitors, comfortable on small ones */
  --maxw: min(1680px, 95vw);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(ellipse at 50% -10%, #1c1410 0%, var(--void) 60%),
    var(--void);
  color: var(--on-dark);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.7;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ---- atmosphere overlays ---- */
.grain, .vignette, .fog {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
}
.grain {
  /* static raster, drifted by the compositor only (cheap) */
  opacity: 0.045;
  width: 130%;
  height: 130%;
  left: -15%;
  top: -15%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAaSElEQVR42j3ad7zO5RsH8Fuyygpp2ZraaROloxCpSFY72QmVUUoLGYkykganMspIGlRIg4yyRwhlkz0yyu/9uF6vX3+cnvM83+99X9dnXff3OdLmzZt37tzp58MPP/zAAw/s27fvwQcfvOKKKzZs2PDOO+/UqFHjsssuO/300+fMmeOau+66K0+ePGXKlClVqlSRIkXc8uyzzxYqVOjvv/8eNWrU+vXrH3vssU6dOg0ePPj48eMnnXTSxRdfvG3bttdff33BggUVKlR46aWXRowY8fTTT7/55pvuKl++/HXXXTd//nw/33rrrZ9++qlcuXJ58+ZNKbVt27Z169Znn3327t27Z8yYMXfu3GXLlp133nnNmjXr3bv3p59+eskll7z//vtjx45NClq4cGHlypWzsrKef/75ihUr5sqVS326Onz4cOPGjR966KGNGzeq9dZbb7XKjz/+WKlSJf0sX768TZs2NrOiVk855RRbav6XX36xiJ5r1aqljj///POVV145+eSTR48ePWTIEFWq4/zzz4dLq1atnnvuOQV8++2306ZN27Jlyy233HLo0KHq1au77P7777/zzjtV+dRTT73wwgsKuPvuuwH0888/u+bCCy9UwJlnnpmuueYaABQtWhQ8Xbt2nT179ssvv+yzo0ePArJRo0Zwuvnmm61y4MABe/fv31/dLVq0AJWPXnvttUWLFqHLHto+44wz9PzGG2+oScOXX375lClTbrvttk2bNo0ZM+b2228/7bTT8uXLh+evvvpKcX7VuX4OHjwIfu9kZ2drIJrEuXWKFy9erVq18ePHT548GaV79+694IILli5dikM8Zxj44YcfZs6cmTt37nPPPfeiiy6CDYy14SK76pgMyGPHjh1k4Lb33nsPg7Y89dRT6eGGG27477///vnnHxBgz5bDhg2rWbNm8+bNGzRoMGHCBCTYidjI7LfffuvevTslrF69+vHHH0cRSp988smRI0ciUOmEYLXPP/+8WLFitNqvXz+L2AIEe/bs6du3r1sWL16s5mPHjhFk0uWHH36o3cKFCxMr6mH8xRdfqBJUVrQlcjGYP3/+Xr16denShTFwp0nAY0/FIFGTgkCr8yZNmujEfnzidceOHfv06fPZZ5/RAIF16NBB/3gD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");
  background-size: 96px 96px;
  animation: grainShift 6s steps(8) infinite;
  will-change: transform;
}
@keyframes grainShift {
  0% { transform: translate(0,0); }
  25% { transform: translate(-2%, 2%); }
  50% { transform: translate(2%, -1%); }
  75% { transform: translate(-1%, -2%); }
  100% { transform: translate(0,0); }
}
.vignette {
  box-shadow: inset 0 0 220px 60px rgba(0,0,0,0.92);
  z-index: 9001;
}
.fog {
  z-index: 8000;
  opacity: 0.35;
  background:
    radial-gradient(ellipse 60% 40% at 20% 110%, rgba(120,100,80,0.16), transparent 70%),
    radial-gradient(ellipse 50% 35% at 85% 115%, rgba(90,70,55,0.14), transparent 70%);
  animation: fogDrift 26s ease-in-out infinite alternate;
}
@keyframes fogDrift {
  0% { transform: translateX(-3%) translateY(0); }
  100% { transform: translateX(3%) translateY(-1.5%); }
}

/* ============================================================
   TOP BAR / NAV
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 500;
  background: linear-gradient(180deg, rgba(8,6,5,0.985), rgba(10,8,7,0.95));
  border-bottom: 1px solid var(--rule-dark);
  box-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.topbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 22px;
  flex-wrap: wrap;
}
.brand {
  font-family: var(--deco);
  font-weight: 900;
  letter-spacing: 0.22em;
  color: var(--brass-bright);
  font-size: 1.05rem;
  text-shadow: 0 0 14px rgba(184,152,90,0.35);
  white-space: nowrap;
}
.brand .sub {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.55rem;
  letter-spacing: 0.5em;
  color: var(--on-dark-dim);
  margin-top: 2px;
}
.nav {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  margin-left: auto;
}
.nav button {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  background: transparent;
  border: 1px solid transparent;
  padding: 7px 13px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav button:hover { color: var(--brass-bright); }
.nav button.active {
  color: var(--parch);
  border-color: var(--brass-dim);
  background: linear-gradient(180deg, rgba(110,10,10,0.30), rgba(40,8,8,0.12));
  box-shadow: inset 0 0 18px rgba(150,12,12,0.18);
}

/* edit toggle + tools */
.tools { display: flex; gap: 8px; align-items: center; }
.authbox { display: inline-flex; align-items: center; gap: 8px; }
.authbox .auth-user {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--brass-bright);
  white-space: nowrap;
}
.authbox .auth-gm {
  color: #f1e3c4;
  background: linear-gradient(180deg, var(--blood-2), var(--blood));
  border: 1px solid var(--blood-bright);
  padding: 1px 6px;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
}
.authbox .auth-login {
  color: #cdb6f0;
  border-color: #5b3f86;
  background: linear-gradient(180deg, rgba(70,40,110,0.5), rgba(40,20,70,0.4));
  text-decoration: none;
}
.authbox .auth-login:hover { color: #efe2ff; border-color: #8a63c6; }
.tool-btn {
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  background: var(--char-2);
  border: 1px solid var(--rule-dark);
  padding: 6px 11px;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.tool-btn:hover { color: var(--parch); border-color: var(--brass-dim); }
.tool-btn.on {
  color: #f1e3c4;
  background: linear-gradient(180deg, var(--blood-2), var(--blood));
  border-color: var(--blood-bright);
  box-shadow: 0 0 16px var(--blood-glow);
}

/* ============================================================
   VIEWS
   ============================================================ */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 22px 120px; }
.view { display: none; animation: fadeUp 0.5s ease; }
.view.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* section heading */
.deco-head {
  text-align: center;
  margin: 48px 0 30px;
  position: relative;
}
.deco-head h2 {
  font-family: var(--deco);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  letter-spacing: 0.16em;
  color: var(--parch);
  text-shadow: 0 0 22px rgba(0,0,0,0.8);
}
.deco-head .kicker {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  color: var(--brass);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.deco-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 14px auto 0;
  max-width: 360px;
  color: var(--brass-dim);
}
.deco-rule::before, .deco-rule::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--brass-dim), transparent);
}
.deco-rule .diamond { font-size: 0.7rem; color: var(--blood-bright); }

/* ============================================================
   COVER
   ============================================================ */
.cover {
  min-height: calc(100vh - 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 10px;
  position: relative;
}
.cover-portrait {
  width: min(340px, 70vw);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--brass-dim);
  filter: sepia(0.35) contrast(1.05) brightness(0.82) grayscale(0.15);
  box-shadow: 0 0 0 6px rgba(8,6,5,0.9), 0 0 0 7px var(--brass-dim), var(--shadow-deep);
  margin-bottom: 34px;
}
.cover h1 {
  font-family: var(--deco);
  font-weight: 900;
  font-size: clamp(2.4rem, 8vw, 5.2rem);
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--parch);
  text-shadow: 0 0 30px rgba(150,12,12,0.4), 0 6px 30px rgba(0,0,0,0.9);
  animation: flicker 7s infinite;
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.72; }
  94% { opacity: 1; }
  96% { opacity: 0.55; }
  97% { opacity: 1; }
}
.cover .tagline {
  font-family: var(--display);
  font-size: clamp(0.8rem, 2vw, 1.05rem);
  letter-spacing: 0.42em;
  color: var(--brass-bright);
  text-transform: uppercase;
  margin-top: 18px;
}
.cover .byline {
  font-family: var(--serif);
  font-style: italic;
  color: var(--on-dark-dim);
  margin-top: 22px;
  font-size: 1.05rem;
  max-width: 620px;
}
.cover .status-strip {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  justify-content: center;
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--on-dark-dim);
  text-transform: uppercase;
}
.cover .status-strip b { color: var(--brass-bright); font-weight: 600; }
.scroll-cue {
  margin-top: 46px;
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.4em;
  color: var(--on-dark-dim);
  text-transform: uppercase;
  animation: bob 2.6s ease-in-out infinite;
}
@keyframes bob { 0%,100%{transform:translateY(0);opacity:.6;} 50%{transform:translateY(7px);opacity:1;} }

/* ============================================================
   CHRONICLE
   ============================================================ */
.chron-toolbar {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.chapter {
  background:
    linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 100%);
  color: var(--ink);
  max-width: 820px;
  margin: 0 auto 38px;
  padding: 44px clamp(24px, 5vw, 64px) 48px;
  border: 1px solid var(--parch-shadow);
  border-radius: 2px;
  box-shadow: var(--shadow-deep);
  position: relative;
}
.chapter::before {
  /* aged paper stain */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(120,90,50,0.10), transparent 40%),
    radial-gradient(ellipse at 100% 100%, rgba(100,70,40,0.12), transparent 45%),
    radial-gradient(circle at 80% 12%, rgba(110,10,10,0.05), transparent 30%);
  mix-blend-mode: multiply;
}
.chapter > * { position: relative; }
.chapter .part-tag {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--blood);
  text-align: center;
}
.chapter h3 {
  font-family: var(--deco);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  text-align: center;
  color: var(--ink);
  margin: 8px 0 4px;
  letter-spacing: 0.04em;
}
.chapter .era {
  font-family: var(--type);
  font-size: 0.82rem;
  text-align: center;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  margin-bottom: 18px;
}
.chapter .ch-rule {
  text-align: center;
  color: var(--blood);
  letter-spacing: 0.5em;
  margin: 0 0 24px;
  font-size: 0.8rem;
}
.chapter p {
  margin: 0 0 16px;
  text-align: justify;
  hyphens: auto;
  color: var(--ink-2);
}
.chapter p:first-of-type::first-letter {
  font-family: var(--deco);
  font-weight: 900;
  float: left;
  font-size: 3.6em;
  line-height: 0.76;
  padding: 6px 12px 0 0;
  color: var(--blood);
}
.chapter p em, .chapter em { color: var(--blood); font-style: italic; }
.chapter .ch-figure {
  margin: 22px auto;
  text-align: center;
}
.chapter .ch-figure img {
  max-width: 100%;
  border: 1px solid var(--parch-shadow);
  filter: sepia(0.3) contrast(1.04) brightness(0.95);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.chapter .ch-figure figcaption {
  font-family: var(--type);
  font-size: 0.76rem;
  color: var(--ink-faint);
  margin-top: 8px;
  letter-spacing: 0.06em;
}

/* editable chapter controls */
.ch-controls {
  display: none;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}
body.editing .ch-controls { display: flex; flex-wrap: wrap; }

/* ============================================================
   GENERIC EDIT WIDGETS
   ============================================================ */
.mini-btn {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--char-2);
  color: var(--on-dark-dim);
  border: 1px solid var(--rule-dark);
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.16s;
}
.mini-btn:hover { color: var(--parch); border-color: var(--brass-dim); }
.mini-btn.danger:hover { color: #ffd9d9; border-color: var(--blood-bright); background: var(--blood); }
.mini-btn.add {
  color: var(--brass-bright);
  border-color: var(--brass-dim);
}

/* show-on-edit helpers */
.edit-only { display: none; }
body.editing .edit-only { display: inline-flex; }
body.editing .edit-only.block { display: block; }

[contenteditable="true"] {
  outline: none;
}
body.editing [data-edit] {
  cursor: text;
  border-radius: 2px;
  transition: background 0.15s, box-shadow 0.15s;
}
body.editing [data-edit]:hover {
  background: rgba(150, 12, 12, 0.08);
}
body.editing [data-edit]:focus {
  background: rgba(184, 152, 90, 0.14);
  box-shadow: inset 0 0 0 1px var(--brass-dim);
}
/* on the dark sheet, editable hints differ */
body.editing .on-dark-edit [data-edit]:hover { background: rgba(184,152,90,0.10); }

/* ============================================================
   CHARACTER SHEET
   ============================================================ */
.sheet {
  background: linear-gradient(180deg, #14100d, #0d0a08);
  border: 1px solid var(--rule-dark);
  box-shadow: var(--shadow-deep), inset 0 0 80px rgba(0,0,0,0.6);
  max-width: 980px;
  margin: 0 auto;
  padding: 0 0 46px;
  position: relative;
}
.sheet-crest {
  text-align: center;
  padding: 34px 20px 18px;
  border-bottom: 1px solid var(--rule-dark);
  background: radial-gradient(ellipse at 50% 0%, rgba(110,10,10,0.18), transparent 70%);
}
.sheet-crest .vtm {
  font-family: var(--deco);
  font-weight: 900;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  letter-spacing: 0.2em;
  color: var(--parch);
}
.sheet-crest .vtm-sub {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.55em;
  color: var(--brass);
  text-transform: uppercase;
  margin-top: 4px;
}

.sheet-section-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--blood-bright);
  text-align: center;
  padding: 26px 0 6px;
  margin: 0 26px;
  border-bottom: 1px solid var(--rule-dark);
  text-shadow: 0 0 12px var(--blood-glow);
}

.sheet-pad { padding: 18px clamp(16px, 4vw, 34px); }

/* identity grid */
.id-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 28px;
  padding: 22px clamp(16px,4vw,34px);
}
.id-field { display: flex; align-items: baseline; gap: 8px; }
.id-field .lbl {
  font-family: var(--display);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
  min-width: 78px;
}
.id-field .val {
  flex: 1;
  border-bottom: 1px solid var(--rule-dark);
  color: var(--parch);
  font-size: 0.98rem;
  padding: 2px 2px 3px;
  min-width: 40px;
}

/* trait columns */
.trait-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 30px;
  padding: 16px clamp(16px,4vw,34px) 24px;
}
.trait-col h4 {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-bright);
  text-align: center;
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.dot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 2px;
}
.dot-row .nm { font-size: 0.92rem; color: var(--on-dark); }
.dot-row .nm.dim { color: var(--on-dark-dim); }

/* dots */
.dots { display: inline-flex; gap: 4px; align-items: center; }
.pip {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid var(--brass-dim);
  background: transparent;
  display: inline-block;
  transition: background 0.12s, box-shadow 0.12s, transform 0.08s;
}
.pip.full {
  background: radial-gradient(circle at 35% 30%, var(--blood-bright), var(--blood));
  border-color: var(--blood-bright);
  box-shadow: 0 0 6px var(--blood-glow);
}
body.editing .pip { cursor: pointer; }
body.editing .dots:hover .pip { transform: scale(1.08); }

/* willpower / health / humanity boxes */
.track-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 20px clamp(16px,4vw,34px);
}
.track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.track .t-lbl {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.boxes { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 230px; }
.box {
  width: 18px; height: 18px;
  border: 1px solid var(--brass-dim);
  background: transparent;
  display: inline-block;
  transition: background 0.12s;
}
body.editing .box { cursor: pointer; }
.box.wp { background: linear-gradient(135deg, #2f6f3a 50%, transparent 50%); }
.box.wp.full { background: #2f6f3a; }
.box.hp.full { background: var(--blood-2); }
.box.hum.full { background: radial-gradient(circle at 35% 30%, var(--blood-bright), var(--blood)); }
.box.round { border-radius: 50%; width: 14px; height: 14px; }
.box.hunger.full { background: radial-gradient(circle at 35% 30%, #c01818, var(--blood)); border-color: var(--blood-bright); }
.track .t-meta { font-size: 0.78rem; color: var(--on-dark-dim); }

/* disciplines */
.disc {
  border: 1px solid var(--rule-dark);
  background: rgba(20,15,12,0.6);
  margin: 0 clamp(16px,4vw,34px) 14px;
  padding: 14px 18px;
}
.disc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.disc-head .d-name {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--brass-bright);
  min-width: 150px;
}
.disc-head .d-attr {
  font-size: 0.78rem;
  color: var(--on-dark-dim);
  font-style: italic;
}
.powers { margin: 12px 0 0; border-left: 2px solid var(--rule-dark); padding-left: 14px; }
.power {
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule-dark);
}
.power:last-child { border-bottom: none; }
.power .p-top { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.power .p-lvl {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--blood-bright);
  text-transform: uppercase;
  white-space: nowrap;
}
.power .p-name { font-weight: 600; color: var(--parch); }
.power .p-pool { font-size: 0.74rem; color: var(--on-dark-dim); font-style: italic; margin-left: auto; }
.power .p-meta { font-size: 0.8rem; color: var(--on-dark-dim); margin-top: 3px; display: flex; gap: 14px; flex-wrap: wrap; }
.power .p-meta b { color: var(--brass); font-weight: 600; }
.power .p-det { font-size: 0.84rem; color: var(--on-dark); font-style: italic; margin-top: 3px; }

/* generic two-column advantage list (backgrounds, merits, flaws) */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 18px;
  padding: 12px clamp(16px,4vw,34px) 8px;
}
.adv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--rule-dark);
  background: rgba(25,18,14,0.55);
  padding: 6px 12px;
}
.adv .a-name { font-size: 0.86rem; color: var(--on-dark); flex: 1; }
.adv.flaw .a-name { color: #c89a9a; }

/* text panels */
.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  padding: 14px clamp(16px,4vw,34px);
}
.panel .p-h {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: center;
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 5px;
  margin-bottom: 8px;
}
.panel .p-body {
  background: rgba(25,18,14,0.5);
  border: 1px solid var(--rule-dark);
  padding: 10px 12px;
  font-size: 0.9rem;
  color: var(--on-dark);
  line-height: 1.6;
  min-height: 80px;
  white-space: pre-wrap;
}

/* blood + xp stat boxes */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap: 12px;
  padding: 14px clamp(16px,4vw,34px);
}
.stat {
  border: 1px solid var(--rule-dark);
  background: rgba(25,18,14,0.5);
  padding: 10px;
  text-align: center;
}
.stat .s-lbl {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
  margin-bottom: 5px;
}
.stat .s-val { color: var(--parch); font-size: 1.1rem; }

/* ============================================================
   CAST / DRAMATIS PERSONAE
   ============================================================ */
.court-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto 18px;
  padding: 14px 16px;
  background: linear-gradient(180deg, var(--char-2), var(--char));
  border: 1px solid var(--rule-dark);
}
.court-filters input,
.court-filters select {
  font-family: var(--serif);
  background: var(--void-2);
  border: 1px solid var(--rule-dark);
  color: var(--parch);
  padding: 8px 10px;
  font-size: 0.9rem;
}
.court-filters input[type="search"] { flex: 1; min-width: 200px; }
.court-filters select { cursor: pointer; }
.court-filters input:focus,
.court-filters select:focus { outline: none; border-color: var(--brass-dim); }
.court-count {
  text-align: center;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  margin: 0 auto 22px;
}
.court-empty {
  text-align: center;
  color: var(--on-dark-dim);
  font-style: italic;
  padding: 50px 20px;
}

.cast-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.cast-card {
  background: linear-gradient(180deg, var(--char-2), var(--char));
  border: 1px solid var(--rule-dark);
  padding: 18px 18px 16px;
  position: relative;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.cast-card:hover {
  border-color: var(--brass-dim);
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.6);
}
.cast-card .c-name {
  font-family: var(--deco);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--parch);
}
.cast-card .c-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}
.tag {
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--brass-dim);
  color: var(--brass-bright);
  background: rgba(110,10,10,0.12);
}
.tag.role { border-color: var(--rule-dark); color: var(--on-dark-dim); background: transparent; }
.tag.cat { background: linear-gradient(180deg, var(--blood-2), var(--blood)); color: #f4e7c9; border-color: var(--blood-bright); font-weight: 600; }
.cast-card .c-note { font-size: 0.9rem; color: var(--on-dark); line-height: 1.6; }
.cast-card .c-rel {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--on-dark-dim);
  font-style: italic;
}

/* ============================================================
   HOUSE RULES
   ============================================================ */
.house-rules {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.rule-card {
  background: linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 100%);
  color: var(--ink);
  border: 1px solid var(--parch-shadow);
  box-shadow: var(--shadow-deep);
  padding: 24px clamp(20px, 4vw, 36px) 26px;
  position: relative;
}
.rule-title {
  font-family: var(--deco);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--blood);
  margin-bottom: 6px;
}
.rule-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: var(--blood);
  margin-top: 8px;
  opacity: 0.5;
}
.rule-body {
  font-family: 'Courier New', Courier, monospace;
  white-space: pre-wrap;
  color: var(--ink-2);
  line-height: 1.65;
  font-size: 0.92rem;
  margin-top: 12px;
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.frame {
  position: relative;
  border: 1px solid var(--brass-dim);
  background: var(--char);
  padding: 10px;
  box-shadow: var(--shadow-deep);
  cursor: zoom-in;
  overflow: hidden;
}
.frame img, .frame video {
  width: 100%;
  display: block;
  filter: sepia(0.32) contrast(1.05) brightness(0.85) grayscale(0.1);
  transition: filter 0.3s, transform 0.4s;
}
.frame:hover img, .frame:hover video { filter: sepia(0.1) contrast(1.08) brightness(1); transform: scale(1.03); }
.frame figcaption {
  font-family: var(--type);
  font-size: 0.76rem;
  color: var(--on-dark-dim);
  text-align: center;
  padding: 8px 4px 2px;
  letter-spacing: 0.04em;
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(4,3,2,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 30px;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img, .lightbox video {
  max-width: 92vw;
  max-height: 82vh;
  border: 1px solid var(--brass-dim);
  box-shadow: var(--shadow-deep);
}
.lightbox .lb-cap {
  font-family: var(--type);
  color: var(--on-dark);
  margin-top: 16px;
  letter-spacing: 0.06em;
}

/* ============================================================
   MAP
   ============================================================ */
.map-wrap {
  border: 1px solid var(--brass-dim);
  padding: 12px;
  background: var(--char);
  box-shadow: var(--shadow-deep);
  text-align: center;
}
.map-wrap img {
  max-width: 100%;
  filter: sepia(0.4) contrast(1.06) brightness(0.88);
  cursor: zoom-in;
}
.map-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 12px;
  margin-top: 22px;
}
.legend-item {
  border: 1px solid var(--rule-dark);
  background: rgba(25,18,14,0.55);
  padding: 12px 14px;
}
.legend-item h5 {
  font-family: var(--display);
  letter-spacing: 0.1em;
  color: var(--brass-bright);
  font-size: 0.86rem;
  margin-bottom: 5px;
}
.legend-item p { font-size: 0.86rem; color: var(--on-dark); }

/* ============================================================
   XP LEDGER
   ============================================================ */
.xp-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 720px;
  margin: 0 auto 28px;
}
.xp-summary-2 {
  grid-template-columns: 1fr 1fr;
}
.xp-stat .xs-sub {
  margin-top: 8px;
  font-size: 0.82rem;
  color: var(--on-dark-dim);
  font-family: var(--serif);
}
.xp-stat {
  text-align: center;
  border: 1px solid var(--rule-dark);
  background: linear-gradient(180deg, var(--char-2), var(--char));
  padding: 20px 12px;
}
.xp-stat .xs-lbl {
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  display: block;
}
.xp-stat .xs-num {
  font-family: var(--deco);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--parch);
  margin-top: 6px;
}
.xp-stat.spent .xs-num { color: var(--blood-bright); }
.xp-stat.bal .xs-num { color: var(--brass-bright); }

.ledger {
  max-width: 860px;
  margin: 0 auto;
  border: 1px solid var(--rule-dark);
}
.ledger-head, .ledger-row {
  display: grid;
  grid-template-columns: 120px 90px 1fr 110px;
  gap: 10px;
  padding: 10px 16px;
  align-items: center;
}
.ledger-head {
  background: var(--char-2);
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  border-bottom: 1px solid var(--rule-dark);
}
.ledger-row {
  border-bottom: 1px solid rgba(74,58,40,0.4);
  font-size: 0.9rem;
}
.ledger-row:nth-child(even) { background: rgba(25,18,14,0.4); }
.ledger-row .l-date { font-family: var(--type); font-size: 0.8rem; color: var(--on-dark-dim); }
.ledger-row .l-amt { text-align: right; font-family: var(--display); font-weight: 600; }
.ledger-row .l-amt.gain { color: #6fae6f; }
.ledger-row .l-amt.spend { color: var(--blood-bright); }
.ledger-row .l-type {
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ledger-row .l-type.gain { color: #6fae6f; }
.ledger-row .l-type.spend { color: var(--blood-bright); }
.ledger-add {
  display: grid;
  grid-template-columns: 130px 90px 120px 1fr 80px 40px;
  gap: 8px;
  padding: 12px 16px;
  background: var(--char-2);
  align-items: center;
}
.ledger-add input, .ledger-add select {
  font-family: var(--serif);
  background: var(--void-2);
  border: 1px solid var(--rule-dark);
  color: var(--parch);
  padding: 7px 9px;
  font-size: 0.86rem;
}
.ledger-add input:focus, .ledger-add select:focus { outline: none; border-color: var(--brass-dim); }

/* ============================================================
   CHARACTER BUILDER + DICE ROLLER
   ============================================================ */
.builder { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }
.b-section {
  background: linear-gradient(180deg, #14100d, #0d0a08);
  border: 1px solid var(--rule-dark);
  box-shadow: var(--shadow-deep);
  padding: 16px clamp(14px, 3vw, 24px) 20px;
}
.b-section-h {
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--blood-bright);
  text-align: center;
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 8px;
  margin-bottom: 14px;
  text-shadow: 0 0 12px var(--blood-glow);
}
.binput {
  font-family: var(--serif);
  background: var(--void-2);
  border: 1px solid var(--rule-dark);
  color: var(--parch);
  padding: 7px 9px;
  font-size: 0.9rem;
}
.binput:focus { outline: none; border-color: var(--brass-dim); }
.binput.rl-num { width: 72px; }
select.binput { cursor: pointer; }

.b-id-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 18px; }
.b-row { display: flex; align-items: center; gap: 8px; }
.b-row .b-lbl {
  font-family: var(--display);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass);
  min-width: 78px;
}
.b-row .binput { flex: 1; }
.b-bane {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule-dark);
  background: rgba(110, 10, 10, 0.1);
  font-size: 0.86rem;
  color: var(--on-dark);
  line-height: 1.5;
}
.b-bane b { color: var(--brass-bright); }

/* dots and boxes (always clickable in the builder) */
.bdots { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }
.bpip {
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--brass-dim); background: transparent;
  transition: transform 0.08s, background 0.12s;
}
.bpip:hover { transform: scale(1.15); }
.bpip.full { background: radial-gradient(circle at 35% 30%, var(--blood-bright), var(--blood)); border-color: var(--blood-bright); box-shadow: 0 0 6px var(--blood-glow); }
.bboxes { display: inline-flex; flex-wrap: wrap; gap: 4px; cursor: pointer; justify-content: center; max-width: 220px; }
.bbox { width: 18px; height: 18px; border: 1px solid var(--brass-dim); background: transparent; }
.bbox.round { border-radius: 50%; }
.bbox.hunger { border-radius: 50%; width: 15px; height: 15px; }
.bbox.hunger.full { background: radial-gradient(circle at 35% 30%, #c01818, var(--blood)); border-color: var(--blood-bright); }
.bbox.hum.full { background: radial-gradient(circle at 35% 30%, var(--blood-bright), var(--blood)); }
.bbox.hp.full { background: var(--blood-2); }

.b-trait-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 26px; }
.b-trait-col h5 {
  font-family: var(--display); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--brass-bright); text-align: center; border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 5px; margin-bottom: 8px;
}
.b-dot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 2px; }
.b-dot-nm { font-size: 0.88rem; color: var(--on-dark); }

.b-track-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-bottom: 14px; }
.b-track { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.b-track-l { font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.b-track-c { font-family: var(--deco); font-size: 1.4rem; color: var(--parch); }
.b-track-m { font-size: 0.74rem; color: var(--on-dark-dim); }
.b-bp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.b-bp-stat { border: 1px solid var(--rule-dark); background: rgba(25, 18, 14, 0.5); padding: 8px; text-align: center; }
.b-bp-stat span { display: block; font-family: var(--display); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass); margin-bottom: 4px; }
.b-bp-stat b { color: var(--parch); font-size: 0.92rem; font-weight: 600; }

.b-disc { border: 1px solid var(--rule-dark); background: rgba(20, 15, 12, 0.6); padding: 12px 14px; margin-bottom: 12px; }
.b-disc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.b-powers { margin-top: 10px; border-left: 2px solid var(--rule-dark); padding-left: 12px; display: flex; flex-direction: column; gap: 6px; }
.b-power { display: flex; gap: 9px; align-items: flex-start; font-size: 0.84rem; color: var(--on-dark-dim); cursor: pointer; padding: 4px 6px; border-radius: 2px; }
.b-power:hover { background: rgba(184, 152, 90, 0.08); }
.b-power.on { color: var(--on-dark); }
.b-power.on b { color: var(--brass-bright); }
.b-power b { color: var(--parch); }
.b-power i { color: var(--blood-bright); font-style: normal; font-size: 0.74rem; letter-spacing: 0.04em; }
.b-power input { margin-top: 3px; accent-color: var(--blood-bright); }

.b-xp-sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 480px; margin: 0 auto 14px; }
.b-xp-sum > div { text-align: center; border: 1px solid var(--rule-dark); background: rgba(25, 18, 14, 0.5); padding: 12px; }
.b-xp-sum span { display: block; font-family: var(--display); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass); }
.b-xp-sum b { font-family: var(--deco); font-size: 1.8rem; color: var(--parch); }
.b-xp-sum .bal b { color: var(--brass-bright); }
.b-xp-ctrl { display: flex; gap: 8px; justify-content: center; align-items: center; }
.b-xp-ctrl .binput { width: 100px; }

/* roller */
.roller { border-color: var(--brass-dim); }
.roller-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.roller-check { display: inline-flex; align-items: center; gap: 5px; font-size: 0.82rem; color: var(--on-dark-dim); }
.roll-pool { font-family: var(--display); font-size: 0.74rem; letter-spacing: 0.08em; color: var(--brass-bright); text-align: center; margin: 4px 0 12px; }
.roll-out { margin-top: 6px; }
.dice { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-bottom: 12px; }
.die {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 600; font-size: 0.95rem;
  border: 1px solid var(--rule-dark);
  background: linear-gradient(180deg, #2a201b, #181210);
  color: var(--on-dark-dim);
}
.die.reg { border-radius: 4px; }
.die.hunger { border-radius: 50%; background: linear-gradient(180deg, #3a0d0d, #1a0707); border-color: var(--blood); color: #d8a0a0; }
.die.hit { color: #f1e3c4; border-color: var(--brass); box-shadow: 0 0 8px rgba(184, 152, 90, 0.3); }
.die.hunger.hit { color: #ffd9d9; border-color: var(--blood-bright); box-shadow: 0 0 10px var(--blood-glow); }
.die.ten { background: linear-gradient(180deg, var(--brass-bright), var(--brass-dim)); color: #1a1208; border-color: var(--brass-bright); }
.die.hunger.ten { background: linear-gradient(180deg, #c01818, var(--blood)); color: #fff; }
.die.bone { border-color: #c01818; color: #ff7a7a; box-shadow: 0 0 10px var(--blood-glow); }
.roll-label { text-align: center; font-family: var(--deco); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.04em; margin-bottom: 6px; }
.roll-label.win { color: #7bbf7b; }
.roll-label.crit { color: var(--brass-bright); text-shadow: 0 0 14px rgba(184, 152, 90, 0.4); }
.roll-label.messy { color: var(--blood-bright); text-shadow: 0 0 16px var(--blood-glow); }
.roll-label.bestial { color: #ff5555; text-shadow: 0 0 16px var(--blood-glow); }
.roll-label.lose { color: var(--on-dark-dim); }
.roll-detail { text-align: center; font-size: 0.85rem; color: var(--on-dark-dim); margin-bottom: 10px; }
.roll-out .mini-btn { display: block; margin: 0 auto; }

@media (max-width: 700px) {
  .b-trait-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   SHEET: rolling + xp advancement + creation guide
   ============================================================ */
.nm.rollable, .d-name.rollable { cursor: pointer; transition: color 0.15s; }
.nm.rollable:hover, .d-name.rollable:hover { color: var(--brass-bright); }
.raise-btn {
  margin-left: 8px;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, var(--blood-2), var(--blood));
  color: #f1e3c4;
  border: 1px solid var(--blood-bright);
  padding: 2px 7px;
  cursor: pointer;
}
.raise-btn:hover { box-shadow: 0 0 8px var(--blood-glow); }
.xp-bar { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.xp-bar-info { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); }
.xp-bar-info b { font-family: var(--deco); font-size: 1.3rem; color: var(--parch); }
.xp-bar-info b.bal { color: var(--brass-bright); }
.xp-bar-note { flex-basis: 100%; text-align: center; font-size: 0.82rem; color: var(--on-dark-dim); font-style: italic; }
.creation-guide .cg-line { color: var(--on-dark); font-size: 0.88rem; margin-bottom: 6px; line-height: 1.5; }
.creation-guide .cg-line b, .creation-guide .cg-sub b { color: var(--brass-bright); }
.creation-guide .cg-sub { color: var(--on-dark-dim); font-size: 0.85rem; margin: 2px 0 2px 14px; }
.creation-guide .cg-note { color: var(--on-dark-dim); font-size: 0.82rem; font-style: italic; margin-top: 8px; }
.cg-ok { color: #7bbf7b; }
.cg-no { color: var(--on-dark-dim); }

/* ============================================================
   POWERS REFERENCE (the GM's grimoire)
   ============================================================ */
.power-legend { text-align: center; color: var(--on-dark-dim); font-size: 0.85rem; max-width: 660px; margin: 0 auto 16px; }
.power-legend b { color: var(--brass-bright); }
.power-table { border: 1px solid var(--rule-dark); margin-bottom: 24px; }
.power-row {
  display: grid;
  grid-template-columns: 34px 1.5fr 78px 120px 3fr 96px;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(74, 58, 40, 0.4);
  align-items: start;
  font-size: 0.86rem;
}
.power-row:nth-child(even) { background: rgba(25, 18, 14, 0.4); }
.power-head {
  background: var(--char-2);
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  position: sticky;
  top: 54px;
  z-index: 5;
}
.power-row .p-lv { font-family: var(--deco); font-weight: 700; color: var(--blood-bright); text-align: center; }
.power-row .p-nm { font-weight: 600; color: var(--parch); }
.power-row .p-cost { color: var(--brass); font-family: var(--display); letter-spacing: 0.14em; }
.power-row .p-pool { color: var(--on-dark-dim); font-size: 0.8rem; }
.power-row .p-eff { color: var(--on-dark); line-height: 1.45; }
.power-row .p-ref { color: var(--on-dark-dim); font-size: 0.76rem; font-family: var(--type); }
.power-row .p-sub { font-size: 0.78rem; color: var(--on-dark-dim); font-style: italic; margin-top: 3px; }
.power-row .p-dep { color: var(--brass-dim); }
.b-power-req { color: var(--brass-dim); font-style: italic; font-size: 0.78rem; }
@media (max-width: 760px) {
  .power-row { grid-template-columns: 26px 1fr 56px; gap: 6px; }
  .power-row .p-pool, .power-row .p-eff, .power-row .p-ref { grid-column: 1 / -1; }
  .power-head { display: none; }
}

/* ============================================================
   AUDIO CONTROL
   ============================================================ */
#yt-host {
  position: fixed;
  width: 1px; height: 1px;
  left: -9999px; top: -9999px;
  opacity: 0; pointer-events: none;
}
.audio-ctl {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, rgba(17,13,11,0.96), rgba(10,8,7,0.96));
  border: 1px solid var(--brass-dim);
  border-radius: 40px;
  padding: 8px 16px 8px 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  user-select: none;
}
.audio-ctl:hover { border-color: var(--brass-bright); box-shadow: 0 0 22px rgba(184,152,90,0.3); }
.audio-ctl .disc-spin {
  width: 26px; height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--brass-bright) 0 14%, var(--void) 15% 26%, var(--blood) 27% 33%, var(--char) 34% 100%);
  border: 1px solid var(--brass-dim);
  flex: none;
}
.audio-ctl.playing .disc-spin { animation: spin 3.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.audio-ctl .a-txt {
  font-family: var(--display);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  white-space: nowrap;
}
.audio-ctl.playing .a-txt { color: var(--brass-bright); }
.audio-ctl input[type=range] {
  width: 70px;
  accent-color: var(--blood-bright);
  cursor: pointer;
}

/* gentle "tap to begin" pulse before first interaction */
.audio-ctl.prompt { animation: promptPulse 2.4s ease-in-out infinite; }
@keyframes promptPulse {
  0%,100% { box-shadow: 0 10px 30px rgba(0,0,0,0.6); }
  50% { box-shadow: 0 0 26px rgba(184,152,90,0.5); border-color: var(--brass-bright); }
}

/* ============================================================
   TOASTS / SAVE INDICATOR
   ============================================================ */
.save-flag {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 600;
  font-family: var(--display);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  background: rgba(10,8,7,0.92);
  border: 1px solid var(--rule-dark);
  padding: 8px 14px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.save-flag.show { opacity: 1; }
.save-flag .dotmark { color: #6fae6f; }
.save-flag.storage-local .mode { color: var(--brass); }
.save-flag.storage-server .mode { color: #6fae6f; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .id-grid, .trait-cols { grid-template-columns: 1fr; }
  .track-grid { grid-template-columns: 1fr; }
  .adv-grid { grid-template-columns: 1fr; }
  .xp-summary { grid-template-columns: 1fr; }
  .ledger-head, .ledger-row { grid-template-columns: 80px 60px 1fr 64px; gap: 6px; font-size: 0.82rem; }
  .ledger-add { grid-template-columns: 1fr 1fr; }
  .nav { width: 100%; justify-content: flex-start; margin-left: 0; }
  .topbar-inner { gap: 10px; }
}

/* respect reduced motion: kill the perpetual animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   CHARACTER CREATOR (guided wizard)
   ============================================================ */
.creator-steps {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 14px 0 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule-dark);
}
.cstep {
  font-family: var(--display); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 5px 10px;
  background: var(--char-2); color: var(--on-dark-dim);
  border: 1px solid var(--rule-dark); border-radius: 2px; cursor: default;
}
.cstep.done { color: var(--brass-dim); border-color: var(--brass-dim); cursor: pointer; }
.cstep.on { color: var(--ink); background: var(--brass-bright); border-color: var(--brass-bright); }

.creator-body { min-height: 220px; }
.creator-nav {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule-dark);
}

.c-create-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.c-create-row .ccr-lbl {
  flex: 0 0 110px; font-family: var(--display); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass-bright);
}
.c-create-row .binput { flex: 1; }
.ccr-lbl { font-family: var(--display); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brass-bright); margin: 14px 0 4px; }

.pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin: 12px 0;
}
.pick-card {
  padding: 10px 12px; background: var(--char-2);
  border: 1px solid var(--rule-dark); border-radius: 3px; cursor: pointer;
  transition: all 0.15s;
}
.pick-card:hover { border-color: var(--brass-dim); }
.pick-card.sel { border-color: var(--brass-bright); background: #2a201a; box-shadow: 0 0 0 1px var(--brass-dim) inset; }
.pick-card .pc-name { font-family: var(--display); font-size: 0.8rem; color: var(--brass-bright); letter-spacing: 0.06em; }
.pick-card .pc-sub { font-size: 0.72rem; color: var(--on-dark-dim); margin-top: 4px; line-height: 1.35; }
.pick-info {
  margin-top: 14px; padding: 12px 14px; background: var(--char-2);
  border-left: 3px solid var(--blood-bright); color: var(--on-dark);
  font-size: 0.82rem; line-height: 1.5;
}

.spread-status {
  margin: 10px 0 14px; padding: 8px 12px; background: var(--char-2);
  border: 1px solid var(--rule-dark); border-radius: 3px;
  font-size: 0.78rem; color: var(--on-dark);
}
.spread-status .cg-ok { color: #8fbf7a; margin-right: 4px; }
.spread-status .cg-no { color: var(--blood-bright); margin-right: 4px; }

.template-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.template-pick .mini-btn.on { color: var(--ink); background: var(--brass-bright); border-color: var(--brass-bright); }

.adv-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.adv-add .binput { flex: 1 1 160px; }
.b-dot-nm.flaw { color: var(--blood-bright); }

.review-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 12px 0;
}
.review-grid > div { display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--rule-dark); }
.review-grid span { color: var(--on-dark-dim); font-family: var(--display);
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; }
.review-grid b { color: var(--brass-bright); font-size: 0.84rem; text-align: right; }
.review-errs { margin-top: 14px; padding: 12px 14px; background: #2a1414;
  border-left: 3px solid var(--blood-bright); color: #f0d2d2; font-size: 0.82rem; }
.review-errs ul { margin: 6px 0 0; padding-left: 18px; }

/* print: just the sheet, on paper */
@media print {
  .topbar, .audio-ctl, .save-flag, .grain, .vignette, .fog, .chron-toolbar, .edit-only, .ch-controls { display: none !important; }
  body { background: #fff; color: #000; }
  .view { display: block !important; }
  .sheet { box-shadow: none; border: 1px solid #000; }
}

/* ============================================================
   CURRENT STATUS (end of chronicle)
   ============================================================ */
.status-sheet {
  background: linear-gradient(180deg, var(--parch) 0%, var(--parch-2) 100%);
  color: var(--ink);
  max-width: 820px;
  margin: 0 auto 38px;
  padding: 36px clamp(20px, 4vw, 52px) 42px;
  border: 1px solid var(--parch-shadow);
  box-shadow: var(--shadow-deep);
}
.status-sheet .status-kicker {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--blood);
  text-align: center;
}
.status-sheet h3 {
  font-family: var(--deco);
  text-align: center;
  letter-spacing: 0.12em;
  margin: 8px 0 22px;
  font-size: clamp(1.3rem, 3vw, 1.85rem);
}
.status-sheet h4 {
  font-family: var(--display);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blood);
  font-size: 0.78rem;
  margin: 22px 0 8px;
  border-bottom: 1px solid var(--parch-shadow);
  padding-bottom: 4px;
}
.status-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.status-table th, .status-table td {
  text-align: left;
  padding: 6px 8px 6px 0;
  vertical-align: top;
  border-bottom: 1px solid rgba(183,163,115,0.35);
}
.status-table th {
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blood);
  width: 28%;
  white-space: nowrap;
}
.status-coda {
  margin-top: 28px;
  font-style: italic;
  text-align: center;
  color: var(--ink-2);
}
.status-coda p { margin: 0 0 8px; }

/* ============================================================
   OPERATION CLEAN SWEEP  -  war table
   ============================================================ */
.ops-classif {
  text-align: center;
  font-family: var(--display);
  letter-spacing: 0.28em;
  color: var(--blood-bright);
  font-size: 0.78rem;
  margin: -8px 0 6px;
}
.ops-sub {
  text-align: center;
  font-family: var(--type);
  color: var(--on-dark-dim);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.ops-cmd-line {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: center;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
  margin-bottom: 22px;
}
.ops-cmd-line b { color: var(--brass-bright); font-weight: 600; display: block; letter-spacing: 0.16em; font-size: 0.6rem; }

.ops-objective {
  max-width: 920px;
  margin: 0 auto 18px;
  background: linear-gradient(180deg, #1c1410, #120e0b);
  border: 1px solid var(--brass-dim);
  padding: 22px 26px 18px;
  box-shadow: var(--shadow-deep);
}
.ops-box-h {
  font-family: var(--display);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--blood-bright);
  font-size: 0.72rem;
  text-align: center;
  margin-bottom: 10px;
}
.ops-objective p { color: var(--on-dark); margin: 0 0 10px; font-size: 0.98rem; }
.ops-motto {
  text-align: center;
  font-family: var(--display);
  letter-spacing: 0.22em;
  color: var(--brass-bright);
  margin-top: 8px;
  font-size: 0.82rem;
}

.ops-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 8px 0 22px;
}
.ops-toolbar a.mini-btn { text-decoration: none; display: inline-flex; align-items: center; }

.ops-rail-wrap { margin: 0 auto 28px; max-width: 1100px; }
.ops-rail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  font-size: 0.82rem;
  color: var(--on-dark-dim);
  margin-bottom: 12px;
}
.ops-rail-meta b { color: var(--brass-bright); }
.ops-next { color: var(--parch); }
.ops-rail {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.ops-phase {
  background: var(--char-2);
  border: 1px solid var(--rule-dark);
  color: var(--on-dark);
  cursor: pointer;
  padding: 10px 6px 8px;
  text-align: center;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  transition: border-color 0.15s, background 0.15s;
}
.ops-phase b {
  font-family: var(--deco);
  font-size: 1.15rem;
  color: var(--brass-bright);
}
.ops-phase span {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.25;
}
.ops-phase em {
  font-style: normal;
  font-family: var(--type);
  font-size: 0.62rem;
  color: var(--on-dark-dim);
  letter-spacing: 0.06em;
}
.ops-phase.pending { opacity: 0.78; }
.ops-phase.active {
  border-color: var(--brass-bright);
  background: linear-gradient(180deg, rgba(110,10,10,0.45), rgba(40,8,8,0.2));
  box-shadow: 0 0 16px var(--blood-glow);
}
.ops-phase.done {
  border-color: #4a6a3a;
  background: linear-gradient(180deg, rgba(40,70,30,0.4), rgba(20,30,16,0.2));
}
.ops-phase.done em { color: #8fbf7a; }
.ops-phase.blocked {
  border-color: var(--blood-bright);
  background: rgba(80,8,8,0.35);
}
.ops-phase:hover { border-color: var(--brass); }
.ops-hint {
  text-align: center;
  font-size: 0.78rem;
  color: var(--on-dark-dim);
  font-style: italic;
  margin-top: 8px;
}

.ops-table {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.7fr);
  gap: 16px;
  margin: 0 0 36px;
  align-items: start;
}
.ops-stage {
  background: var(--char);
  border: 1px solid var(--brass-dim);
  padding: 10px;
  box-shadow: var(--shadow-deep);
}
.ops-map-tabs { display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.ops-tab {
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--on-dark-dim);
  border: 1px solid transparent;
  padding: 7px 12px;
  cursor: pointer;
}
.ops-tab.on {
  color: var(--parch);
  border-color: var(--brass-dim);
  background: linear-gradient(180deg, rgba(110,10,10,0.30), rgba(40,8,8,0.12));
}
.ops-map-frame {
  position: relative;
  overflow: hidden;
  background: #1a1610;
  cursor: crosshair;
}
.ops-map-frame.placing { outline: 1px dashed var(--brass-bright); }
.ops-map-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.22) contrast(1.05) brightness(0.92);
  pointer-events: none;
  user-select: none;
}
.ops-map-cap {
  font-family: var(--type);
  font-size: 0.76rem;
  color: var(--on-dark-dim);
  padding: 8px 6px 4px;
  letter-spacing: 0.03em;
}
.ops-class-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 6px;
  font-size: 0.7rem;
  color: var(--on-dark-dim);
}
.ops-swatch {
  font-family: var(--display);
  letter-spacing: 0.1em;
  padding: 2px 8px;
  border: 1px solid var(--rule-dark);
}
.ops-swatch.RED { background: #6e0a0a; color: #f1d2d2; }
.ops-swatch.ORANGE { background: #7a3d12; color: #f3d9b4; }
.ops-swatch.YELLOW { background: #6a5a18; color: #f3ecc0; }
.ops-swatch.WHITE { background: #d9c9aa; color: #1b1410; }
.ops-swatch.BLACK { background: #111; color: #cfc3a8; border-color: #444; }
.ops-class-legend em { font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; font-family: var(--display); font-size: 0.62rem; }

.ops-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: grab;
  z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
.ops-pin i {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #1b1410;
}
.ops-pin span {
  display: block;
  margin-top: 3px;
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f4ead0;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
  white-space: nowrap;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-pin.RED i { background: #c01212; }
.ops-pin.ORANGE i { background: #d06a18; }
.ops-pin.YELLOW i { background: #d4c04a; }
.ops-pin.WHITE i { background: #efe6cc; }
.ops-pin.BLACK i { background: #1a1a1a; border-color: #888; }
.ops-pin.sel i { box-shadow: 0 0 0 3px var(--brass-bright); }
.ops-pin.st-cleared span, .ops-pin.st-held span { text-decoration: line-through; opacity: 0.7; }
.ops-pin.dragging { cursor: grabbing; z-index: 5; }

.ops-inspector {
  background: linear-gradient(180deg, #16110e, #0e0b09);
  border: 1px solid var(--rule-dark);
  padding: 16px 16px 18px;
  min-height: 280px;
  position: sticky;
  top: 72px;
}
.ops-field { margin-bottom: 10px; }
.ops-field label {
  display: block;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 3px;
}
.ops-input, .ops-note {
  width: 100%;
  font-family: var(--serif);
  background: var(--void-2);
  border: 1px solid var(--rule-dark);
  color: var(--parch);
  padding: 7px 9px;
  font-size: 0.9rem;
}
.ops-note { min-height: 110px; resize: vertical; }
.ops-input:focus, .ops-note:focus { outline: none; border-color: var(--brass-dim); }
.ops-static { color: var(--parch); font-size: 0.92rem; }
.ops-empty { color: var(--on-dark-dim); font-style: italic; font-size: 0.88rem; padding: 8px 0; }
.ops-insp-actions { margin-top: 10px; }
.ops-pinlist { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 360px; overflow: auto; }
.ops-pinrow {
  text-align: left;
  background: var(--char-2);
  border: 1px solid var(--rule-dark);
  color: var(--on-dark);
  padding: 6px 8px;
  cursor: pointer;
  font-size: 0.82rem;
}
.ops-pinrow b { font-family: var(--display); font-size: 0.62rem; letter-spacing: 0.08em; margin-right: 6px; }
.ops-pinrow.RED b { color: #e07070; }
.ops-pinrow.ORANGE b { color: #e09a5a; }
.ops-pinrow.YELLOW b { color: #d8c86a; }
.ops-pinrow.WHITE b { color: #eee; }
.ops-pinrow.BLACK b { color: #888; }
.ops-pinrow em { float: right; font-style: normal; color: var(--on-dark-dim); font-size: 0.72rem; }

.ops-section { margin: 0 auto 36px; max-width: 1100px; }
.ops-section > h3 {
  font-family: var(--display);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blood-bright);
  font-size: 0.92rem;
  text-align: center;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 8px;
}
.ops-intro {
  text-align: center;
  color: var(--on-dark-dim);
  font-style: italic;
  font-size: 0.9rem;
  margin: 0 auto 14px;
  max-width: 760px;
}
.ops-orders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.ops-order, .ops-cmd-card, .ops-plan-card {
  background: rgba(25,18,14,0.55);
  border: 1px solid var(--rule-dark);
  padding: 12px 14px;
}
.ops-order h4, .ops-cmd-card h4, .ops-plan-card h4 {
  font-family: var(--display);
  letter-spacing: 0.12em;
  color: var(--brass-bright);
  font-size: 0.8rem;
  margin-bottom: 6px;
}
.ops-order p, .ops-cmd-card p, .ops-plan-card p {
  font-size: 0.88rem;
  color: var(--on-dark);
  margin: 0 0 8px;
}
.ops-cmd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.ops-cmd-card .post {
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blood-bright);
  margin-bottom: 4px;
}

.ops-conds { display: flex; flex-direction: column; gap: 6px; max-width: 820px; margin: 0 auto; }
.ops-cond {
  display: grid;
  grid-template-columns: 36px 22px 1fr;
  gap: 10px;
  align-items: center;
  text-align: left;
  background: var(--char-2);
  border: 1px solid var(--rule-dark);
  color: var(--on-dark);
  padding: 8px 12px;
  cursor: pointer;
}
.ops-cond .num {
  font-family: var(--deco);
  color: var(--brass-bright);
}
.ops-cond .box {
  width: 14px; height: 14px;
  border: 1px solid var(--brass-dim);
  background: transparent;
}
.ops-cond.done { opacity: 0.78; }
.ops-cond.done .box { background: #8fbf7a; border-color: #8fbf7a; }
.ops-cond.done span:last-child { text-decoration: line-through; }

.ops-tablex { border: 1px solid var(--rule-dark); }
.ops-tr {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 1.2fr 1.6fr 0.7fr;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(74,58,40,0.4);
  font-size: 0.84rem;
  color: var(--on-dark);
  align-items: center;
}
.ops-tr.head {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  background: var(--char-2);
}
.ops-tablex.targets .ops-tr { grid-template-columns: 0.7fr 1.2fr 0.8fr 1.2fr 0.8fr 40px; }
.ops-tr.active { background: rgba(110,10,10,0.18); }
.ops-tr.held, .ops-tr.done { background: rgba(40,70,30,0.18); }

.ops-sectors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.ops-sector {
  background: var(--char-2);
  border: 1px solid var(--rule-dark);
  color: var(--on-dark);
  padding: 12px 12px 10px;
  cursor: pointer;
  text-align: left;
  min-height: 110px;
}
.ops-sector h4 { font-family: var(--display); letter-spacing: 0.08em; color: var(--brass-bright); margin-bottom: 4px; }
.ops-sector em { font-style: normal; font-family: var(--type); font-size: 0.72rem; color: var(--on-dark-dim); display: block; margin-bottom: 6px; }
.ops-sector p { font-size: 0.8rem; margin: 0; }
.ops-sector.hold, .ops-sector.sanitize { border-color: #4a6a3a; }
.ops-sector.clear, .ops-sector.search { border-color: var(--brass-dim); }
.ops-sector.isolate, .ops-sector.observe, .ops-sector.evacuate { border-color: #7a3d12; }

.ops-plan-card { margin-bottom: 10px; }
.ops-log-add { display: flex; gap: 8px; margin-bottom: 12px; }
.ops-log-add .ops-input { flex: 1; }
.ops-log { border: 1px solid var(--rule-dark); }
.ops-log-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(74,58,40,0.4);
  align-items: center;
  font-size: 0.88rem;
}
.ops-log-row .when { font-family: var(--type); color: var(--on-dark-dim); font-size: 0.78rem; }
.ops-log-row .what { color: var(--on-dark); }

@media (max-width: 980px) {
  .ops-table { grid-template-columns: 1fr; }
  .ops-inspector { position: static; }
  .ops-rail { grid-template-columns: repeat(5, 1fr); }
  .ops-tr, .ops-tablex.targets .ops-tr { grid-template-columns: 1fr; }
  .ops-log-row { grid-template-columns: 1fr auto; }
}
@media (max-width: 640px) {
  .ops-rail { grid-template-columns: repeat(2, 1fr); }
}

/* ---- war board: token tray, fronts, routes, forces ---- */
.ops-palette { margin: 8px 0 10px; }
.ops-pal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ops-pal-lab {
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  width: 52px;
  flex: 0 0 52px;
}
.ops-token {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--char-2);
  border: 1px solid var(--rule-dark);
  color: var(--on-dark);
  padding: 5px 7px 4px;
  cursor: pointer;
  min-width: 58px;
}
.ops-token i {
  display: block;
  width: 18px;
  height: 18px;
  position: relative;
  border: 2px solid #1b1410;
}
.ops-token i::after {
  content: attr(data-g);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-size: 0.62rem;
  font-style: normal;
  color: #1b1410;
  font-weight: 700;
}
.ops-token em {
  font-style: normal;
  font-family: var(--display);
  font-size: 0.52rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ops-token.on {
  border-color: var(--brass-bright);
  box-shadow: 0 0 10px var(--blood-glow);
  background: rgba(110,10,10,0.35);
}
.ops-token.RED i { background: #c01212; }
.ops-token.ORANGE i { background: #d06a18; }
.ops-token.YELLOW i { background: #d4c04a; }
.ops-token.WHITE i { background: #efe6cc; }
.ops-token.BLACK i { background: #1a1a1a; }
.ops-token.force-nos i { background: #6b5344; }
.ops-token.force-tre i { background: #7a1f3a; }
.ops-token.force-ven i { background: #c4a35a; }
.ops-token.force-tor i { background: #c47a8a; }
.ops-token.force-bru i { background: #8b1515; }
.ops-token.force-gan i { background: #4a6b3a; }
.ops-token.force-mal i { background: #5b3f86; }
.ops-token.force-sh i { background: #7a8a9a; }
.ops-token.draw i { background: var(--brass); }
.ops-token.shape-force i, .ops-token.shape-circle i { border-radius: 50%; }
.ops-token.shape-square i { border-radius: 2px; }
.ops-token.shape-diamond i, .ops-token.shape-mitre i { transform: rotate(45deg); }
.ops-token.shape-diamond i::after, .ops-token.shape-mitre i::after { transform: rotate(-45deg); }
.ops-token.shape-cross i { background: #c01212; border-radius: 2px; }

.ops-layers { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ops-layer {
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent;
  color: var(--on-dark-dim);
  border: 1px solid var(--rule-dark);
  padding: 3px 8px;
  cursor: pointer;
}
.ops-layer.on { color: var(--parch); border-color: var(--brass-dim); background: rgba(110,10,10,0.25); }

.ops-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.ops-overlay polyline, .ops-overlay circle { pointer-events: stroke; }
.ops-overlay polygon { pointer-events: fill; cursor: pointer; }
.ops-area {
  fill: rgba(184, 152, 90, 0.18);
  stroke: var(--brass);
  stroke-width: 0.9;
}
.ops-area.sel { fill: rgba(184, 152, 90, 0.32); stroke: var(--brass-bright); stroke-width: 1.3; }
.ops-area.isolate, .ops-area.observe, .ops-area.evacuate { fill: rgba(122, 61, 18, 0.22); stroke: #d06a18; }
.ops-area.clear, .ops-area.search { fill: rgba(110, 10, 10, 0.22); stroke: #c01212; }
.ops-area.sanitize, .ops-area.hold { fill: rgba(74, 107, 58, 0.22); stroke: #8fbf7a; }
.ops-draw-area {
  fill: rgba(216, 184, 118, 0.16);
  stroke: var(--brass-bright);
  stroke-width: 1.1;
  stroke-dasharray: 2 1.5;
  pointer-events: none;
}
.ops-overlay circle { pointer-events: all; cursor: grab; }
.ops-front {
  stroke: #c01212;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
}
.ops-front.sel { stroke: var(--brass-bright); stroke-width: 1.8; }
.ops-front.holding { stroke: #8b1515; }
.ops-front.advancing { stroke: #e07070; }
.ops-front.falling-back { stroke: #d06a18; }
.ops-front.collapsed { stroke: #555; stroke-dasharray: 2 2; }
.ops-route {
  stroke: var(--brass);
  stroke-width: 0.9;
  stroke-dasharray: 2.2 1.4;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
}
.ops-route.sel { stroke: #f1e3c4; stroke-width: 1.3; }
.ops-route.supply { stroke: #8fbf7a; }
.ops-route.escape { stroke: #d06a18; }
.ops-route.courier { stroke: #7aa0c4; }
.ops-route.patrol { stroke: #c4a35a; }
.ops-route.cut { stroke: #666; stroke-dasharray: 1 2; }
.ops-draw-line {
  stroke: var(--brass-bright);
  stroke-width: 1.1;
  stroke-dasharray: 2 1.5;
  fill: none;
}
.ops-vtx { fill: var(--brass-bright); stroke: #1b1410; stroke-width: 0.3; }

.ops-draw-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--brass-bright);
  color: #1b1410;
  font-size: 0.55rem;
  font-family: var(--display);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}

.ops-pin.shape-square i {
  border-radius: 2px;
  transform: none;
}
.ops-pin.shape-force i, .ops-pin.shape-circle i {
  border-radius: 50%;
  transform: none;
}
.ops-pin.shape-diamond i, .ops-pin.shape-mitre i {
  border-radius: 2px;
  transform: rotate(45deg);
}
.ops-pin i::after {
  content: attr(data-g);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--display);
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 700;
  color: #1b1410;
}
.ops-pin.shape-diamond i::after, .ops-pin.shape-mitre i::after { transform: rotate(-45deg); }
.ops-pin.shape-teardrop i::after { transform: rotate(45deg); }
.ops-pin.force-nos i { background: #6b5344; }
.ops-pin.force-tre i { background: #7a1f3a; }
.ops-pin.force-ven i { background: #c4a35a; }
.ops-pin.force-tor i { background: #c47a8a; }
.ops-pin.force-bru i { background: #8b1515; }
.ops-pin.force-gan i { background: #4a6b3a; }
.ops-pin.force-mal i { background: #5b3f86; }
.ops-pin.force-sh i { background: #7a8a9a; }
.ops-pin.kind-spy i { box-shadow: 0 0 0 1px #d4c04a; }
.ops-pin.kind-bishop i { width: 18px; height: 18px; }
.ops-pin.kind-priest i { background: #c01212; }

.ops-push { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.ops-force-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.ops-force-card {
  text-align: left;
  background: var(--char-2);
  border: 1px solid var(--rule-dark);
  color: var(--on-dark);
  padding: 10px 12px;
  cursor: pointer;
}
.ops-force-card .post {
  font-family: var(--display);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blood-bright);
}
.ops-force-card h4 { color: var(--brass-bright); font-family: var(--display); margin: 4px 0; }
.ops-force-card p { margin: 0 0 4px; font-size: 0.84rem; }
.ops-force-card em { font-style: normal; font-size: 0.72rem; color: var(--on-dark-dim); }
.ops-spy-tr { grid-template-columns: 1.2fr 1fr 1.2fr 0.8fr 0.7fr; text-align: left; width: 100%; background: transparent; color: inherit; border: 0; cursor: pointer; }
.ops-line-row {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--void-2);
  border: 1px solid var(--rule-dark);
  color: var(--on-dark);
  padding: 6px 8px;
  margin: 4px 0;
  cursor: pointer;
  font-size: 0.84rem;
}
.ops-line-row.on { border-color: var(--brass-bright); }
.ops-line-row em { color: var(--on-dark-dim); font-style: normal; font-size: 0.76rem; }
.ops-arm-h {
  font-family: var(--display);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass-bright);
  font-size: 0.78rem;
  margin: 18px 0 8px;
  text-align: center;
}
.ops-arm-hammer { border-color: #8b1515; }
.ops-arm-mind { border-color: var(--brass-dim); }
.ops-arm-eyes { border-color: #5b3f86; }