/* ==========================================================================
   VtM V5 Display Sheets — Single Stylesheet (NO GRADIENTS)
   --------------------------------------------------------------------------
   Goals:
   - High contrast, readable text (no dark-on-dark).
   - Full-page scroll. Fixed navbar + fixed footer.
   - Fixed tracker panel that overlays the navbar (higher z-index).
   - "Back to Top" button fixed above footer.
   - Per-clan unique palettes via CSS variables (tokens).
   - Fully display-only: no edit controls, no form inputs.
   - Visual FX layers (Pixi fog) sit behind text but inside consistent containers.
   --------------------------------------------------------------------------
   CONFIGURATION:
   - Edit ONLY tokens in :root and each body.clan-____ block.
   - Layout sizing tokens control widths, spacing, and tracker sizes globally.
   --------------------------------------------------------------------------
   Fonts (Required):
   - Inter (body)
   - Cinzel (headings)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;500;600&display=swap');

/* -----------------------------
   0) Global Tokens (Default)
------------------------------ */
:root{
  /* Typography */
  --font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-display: "Cinzel", serif;

  /* Layout */
  --container-max: 1240px;      /* Main content max width */
  --gutter: 18px;              /* Base horizontal padding */
  --section-gap: 18px;         /* Vertical spacing between sections */
  --frame-radius: 16px;        /* Card corner radius */
  --frame-border: 1px;         /* Card border width */

  /* Fixed UI sizes */
  --nav-height: 62px;
  --footer-height: 52px;
  --tracker-width: 360px;
  --tracker-top: 10px;         /* Top offset for tracker (over nav) */
  --tracker-right: 10px;       /* Right offset for tracker */
  --backtotop-right: 16px;
  --backtotop-gap: 10px;       /* Space above footer */

  /* Default Theme (overridden per clan) */
  --bg: #0B0E11;
  --surface: #141920;
  --surface-2: #1B2430;
  --border: #2A3645;

  --text: #F2F5F8;
  --muted: #B9C2CC;

  --accent: #C7A24B;
  --accent-2: #8B6A2B;

  /* FX */
  --fx-tint: #C7A24B;
  --fx-alpha: 0.18;            /* Overall strength of Pixi fog */
  --fx-particles: 0.22;        /* Particle alpha */
  --fx-speed: 0.35;            /* Fog movement speed */
}

/* -----------------------------
   1) Base Page + Full Scroll
------------------------------ */
html, body { height: 100%; }
body{
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

/* Sticky footer layout: content flexes between fixed nav + fixed footer */
.page{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-height);      /* Space for fixed navbar */
  padding-bottom: var(--footer-height);/* Space for fixed footer */
}

/* Container (wider than default bootstrap container on large screens) */
.vtm-container{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* -----------------------------
   2) Navbar (Fixed to Window)
------------------------------ */
.vtm-navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  z-index: 5000;
  background: var(--surface);
  border-bottom: var(--frame-border) solid var(--border);
}

.vtm-navbar .navbar-brand{
  font-family: var(--font-display);
  letter-spacing: .5px;
  color: var(--accent) !important; /* REQUIRED: not black */
}

.vtm-navbar .nav-link{
  color: var(--text) !important;
  opacity: .9;
}
.vtm-navbar .nav-link:hover{ opacity: 1; color: var(--accent) !important; }

/* Bootstrap toggler icon visibility on dark bg */
.navbar-toggler{
  border-color: var(--border) !important;
}
.navbar-toggler-icon{
  filter: invert(1);
}

/* -----------------------------
   3) Footer (Fixed to Window)
------------------------------ */
.vtm-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-height);
  z-index: 4000;
  background: var(--surface);
  border-top: var(--frame-border) solid var(--border);
  display: flex;
  align-items: center;
}

.vtm-footer .footer-inner{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.vtm-footer .footer-brand{
  font-family: var(--font-display);
  color: var(--text);
}
.vtm-footer .footer-muted{
  color: var(--muted);
  font-size: .9rem;
}

/* -----------------------------
   4) Back to Top (Fixed Above Footer)
------------------------------ */
#backToTop{
  position: fixed;
  right: var(--backtotop-right);
  bottom: calc(var(--footer-height) + var(--backtotop-gap));
  z-index: 4500;
  display: none;               /* shown by JS after scroll */
  border: var(--frame-border) solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
#backToTop:hover{
  color: var(--accent);
  border-color: var(--accent-2);
}

/* -----------------------------
   5) Header (Vanta container + Pixi fog overlay)
------------------------------ */
.sheet-hero{
  position: relative;
  margin-top: 14px;
}
.sheet-hero .hero-frame{
  position: relative;
  border-radius: var(--frame-radius);
  border: var(--frame-border) solid var(--border);
  background: var(--surface);
  overflow: hidden; /* IMPORTANT: contains FX canvases */
  padding: 22px;
}

/* Vanta attaches a canvas into this element */
.hero-vanta{
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Pixi overlay for header fog (uniform placement) */
.hero-fx{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Content sits above all FX */
.hero-content{
  position: relative;
  z-index: 2;
}

.hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 14px;
}
.hero-title{
  font-family: var(--font-display);
  margin: 0;
  letter-spacing: .6px;
}
.hero-sub{
  margin: 6px 0 0;
  color: var(--muted);
}
.badge-display{
  background: var(--accent) !important;
  color: #101012 !important;
  border-radius: 999px;
}

/* Clan symbol (PNG)
   NOTE: User will add the actual href/src paths; this is a placeholder hook. */
.clan-sigil{
  width: 54px;
  height: 54px;
  object-fit: contain;
  display:block;
  opacity: .95;
}

/* -----------------------------
   6) Main Layout (Wide + Tracker Gap)
------------------------------ */
/* We reserve space so the main content can expand close to tracker edge. */
.sheet-grid{
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
}

/* Main sheet content leaves room for fixed tracker.
   This ensures content is NOT pulled left and uses most of the width. */
.sheet-main{
  padding-right: calc(var(--tracker-width) + 16px);
}

/* On smaller screens, tracker becomes normal flow (no fixed overlay) */
@media (max-width: 991.98px){
  :root{ --tracker-width: 320px; }
  .sheet-main{ padding-right: 0; }
}

/* -----------------------------
   7) Section Frames (Uniform)
------------------------------ */
.section{
  margin-bottom: var(--section-gap);
}
.frame{
  position: relative;
  border-radius: var(--frame-radius);
  border: var(--frame-border) solid var(--border);
  background: var(--surface);
  overflow: hidden; /* contains optional card FX */
  padding: 18px;
}

/* Section title row */
.section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.section-title h2{
  margin: 0;
  font-family: var(--font-display);
  letter-spacing: .5px;
  font-size: 1.25rem;
}
.section-kicker{
  color: var(--muted);
  font-size: .95rem;
}

/* Underline bar that anime.js animates (uniform across sections) */
.section-underline{
  height: 3px;
  width: 100%;
  background: var(--accent);
  opacity: .9;
  border-radius: 999px;
  transform-origin: left center;
}

/* -----------------------------
   8) Fields, Dots, Lists
------------------------------ */
.meta-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 991.98px){
  .meta-grid{ grid-template-columns: 1fr; }
}

.field{
  padding: 12px 12px;
  border: var(--frame-border) solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
}
.label{
  color: var(--muted);
  font-size: .85rem;
  letter-spacing: .25px;
}
.value{
  margin-top: 4px;
  font-weight: 600;
  color: var(--text);
}

/* Attribute columns */
.attr-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 991.98px){
  .attr-grid{ grid-template-columns: 1fr; }
}
.attr-col h3{
  font-size: 1rem;
  margin: 0 0 10px;
  color: var(--accent);
  font-weight: 700;
}

/* Skills */
.skill-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 991.98px){
  .skill-grid{ grid-template-columns: 1fr; }
}
.skill-item{
  border: var(--frame-border) solid var(--border);
  border-radius: 14px;
  background: var(--surface-2);
  padding: 12px;
}

/* Match Attributes vertical rhythm: consistent spacing between skill rows */
.skill-item + .skill-item{ margin-top: 10px; }
.skill-head{
  display:flex;
  align-items:center;
  gap: 10px;
}
.skill-name{ font-weight: 700; }
.skill-spec{ margin-top: 6px; color: var(--muted); font-size: .9rem; }

/* Dots (anime.js animates these in, display-only) */
.dotline{ display:inline-flex; gap: 6px; vertical-align: middle; }
.dot{
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  display:inline-block;
  transform: translateZ(0);
}
.dot.on{
  background: var(--accent);
  border-color: var(--accent-2);
}

/* Split layouts used throughout */
.split-2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.split-3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 991.98px){
  .split-2, .split-3{ grid-template-columns: 1fr; }
}

.writeup{
  color: var(--text);
  line-height: 1.55;
}
.writeup .muted{ color: var(--muted); }

/* -----------------------------
   9) Tracker Panel (Fixed, Opaque, Over Navbar)
------------------------------ */
.tracker{
  position: fixed;
  top: var(--tracker-top);
  right: var(--tracker-right);
  width: var(--tracker-width);
  z-index: 6500;               /* Over navbar */
}

.tracker .tracker-frame{
  position: relative;
  border-radius: var(--frame-radius);
  border: var(--frame-border) solid var(--border);
  background: var(--surface);  /* OPAQUE (requested) */
  overflow: hidden;            /* contains FX canvas */
  padding: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.40);
}

/* Pixi fog inside tracker (uniform placement) */
.tracker-fx{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.tracker-content{
  position: relative;
  z-index: 1;
}

.tracker-title{
  font-family: var(--font-display);
  letter-spacing: .5px;
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.tracker-line{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  border: var(--frame-border) solid var(--border);
  background: var(--surface-2);
  margin-bottom: 10px;
}
.tracker-line .tlabel{ color: var(--muted); font-weight: 600; }

/* Tracker image (optional) */
.tracker-photo img{
  width: 100%;
  border-radius: 14px;
  border: var(--frame-border) solid var(--border);
  display:block;
}

/* Mobile: tracker becomes normal flow (not fixed) */
@media (max-width: 991.98px){
  .tracker{
    position: static;
    width: 100%;
    margin-top: var(--section-gap);
  }
}

/* -----------------------------
   10) Clan Theme Overrides (Unique palettes)
   --------------------------------------------------------------------------
   Each clan only changes tokens. Structure + FX placement remain identical.
------------------------------ */
body.clan-banu_haqim{ --accent:#C7A24B; --accent-2:#8B6A2B; --bg:#0B0E11; --surface:#141920; --surface-2:#1B2430; --text:#F2F5F8; --muted:#B9C2CC; --fx-tint:#C7A24B; }
body.clan-brujah{ --accent:#D04B3D; --accent-2:#8E2A21; --bg:#0F0C0C; --surface:#1A1414; --surface-2:#221A1A; --text:#F6F1F0; --muted:#CBB9B6; --fx-tint:#D04B3D; }
body.clan-gangrel{ --accent:#6FB36A; --accent-2:#3E6B3A; --bg:#0B0F0C; --surface:#141A15; --surface-2:#1A241B; --text:#EFF6F0; --muted:#B7C9BB; --fx-tint:#6FB36A; }
body.clan-hecata{ --accent:#C6C8D4; --accent-2:#6F7283; --bg:#0B0C10; --surface:#151722; --surface-2:#1C1F2E; --text:#F2F3F8; --muted:#B9BBC9; --fx-tint:#9EA3B7; }
body.clan-lasombra{ --accent:#7A5CFF; --accent-2:#3D2A8E; --bg:#07070B; --surface:#121225; --surface-2:#181833; --text:#F1F1FF; --muted:#B8B8D6; --fx-tint:#7A5CFF; }
body.clan-malkavian{ --accent:#FF4FC3; --accent-2:#8A2C69; --bg:#0B0710; --surface:#181022; --surface-2:#201333; --text:#F8F2FF; --muted:#CBB9DF; --fx-tint:#FF4FC3; }
body.clan-the_ministry{ --accent:#E6C14A; --accent-2:#7D5F14; --bg:#0F0C07; --surface:#1B170E; --surface-2:#241D12; --text:#FFF7E3; --muted:#D7C8A3; --fx-tint:#E6C14A; }
body.clan-nosferatu{ --accent:#6AE1A6; --accent-2:#2B6B4C; --bg:#060C0A; --surface:#0F1915; --surface-2:#13201B; --text:#EFFFF7; --muted:#B3D7C6; --fx-tint:#6AE1A6; }
body.clan-ravnos{ --accent:#FF7A3C; --accent-2:#8A3B1D; --bg:#100B08; --surface:#1C1410; --surface-2:#251A14; --text:#FFF3ED; --muted:#D6BEB3; --fx-tint:#FF7A3C; }
body.clan-salubri{ --accent:#4FD8FF; --accent-2:#1C6E86; --bg:#071014; --surface:#0F1B20; --surface-2:#13222A; --text:#ECFAFF; --muted:#B6D1DA; --fx-tint:#4FD8FF; }
body.clan-toreador{ --accent:#FF5C7A; --accent-2:#8E2A3B; --bg:#11070B; --surface:#1E0F16; --surface-2:#27141C; --text:#FFF0F4; --muted:#D8B7C1; --fx-tint:#FF5C7A; }
body.clan-tremere{ --accent:#C53D3D; --accent-2:#6B1F1F; --bg:#0F0707; --surface:#1B0F10; --surface-2:#241315; --text:#FFF0F0; --muted:#D6B3B3; --fx-tint:#C53D3D; }
body.clan-tzimisce{ --accent:#B3FF4F; --accent-2:#4A7A1C; --bg:#0B1007; --surface:#141E0F; --surface-2:#1B2713; --text:#F7FFE9; --muted:#C8D7A3; --fx-tint:#B3FF4F; }
body.clan-ventrue{ --accent:#4FA3FF; --accent-2:#1C3E86; --bg:#070B12; --surface:#0F1624; --surface-2:#131D2F; --text:#EEF5FF; --muted:#B7C7DA; --fx-tint:#4FA3FF; }
body.clan-caitiff{ --accent:#B0B7C3; --accent-2:#5B6370; --bg:#0B0D10; --surface:#141820; --surface-2:#1B2230; --text:#F3F6FA; --muted:#B9C2CC; --fx-tint:#B0B7C3; }
body.clan-thin_blood{ --accent:#A66BFF; --accent-2:#4A2C86; --bg:#0B0712; --surface:#161024; --surface-2:#1E1331; --text:#F6F0FF; --muted:#C8B9DF; --fx-tint:#A66BFF; }