/* ==========================================================================
   THE DEMISE LEDGER - CUSTOM DESIGN SYSTEM (GOTHIC LUXURY)
   ========================================================================== */

/* Google Fonts Imports are handled in HTML, fallback is local serif/sans-serif */

:root {
  /* Color Tokens - Default: Blood Crimson */
  --bg-darkest: #050507;
  --bg-darker: #0c0c0f;
  --bg-card: rgba(14, 14, 18, 0.5);
  --border-glow: rgba(139, 0, 0, 0.25);
  
  --accent-base: #8b0000;      /* Dried blood */
  --accent-glow: #ff2a2a;      /* Fresh oxygenated blood */
  --accent-rgb: 255, 42, 42;
  
  --text-pure: #ffffff;
  --text-muted: #a0a0ab;
  --text-dark: #8b8b96;      /* 6.04:1 on --bg-darkest; #60606b was 3.28:1 and failed AA */
  
  --stone-gradient-1: #2a2a2e;
  --stone-gradient-2: #141416;
  
  --card-border: rgba(255, 42, 42, 0.15);
  --terminal-green: #39ff14;
  --terminal-green-rgb: 57, 255, 20;

  /* Ornate picture-frame metals */
  --frame-ebony: #0c0a08;
  --frame-wood: #2a2218;
  --frame-bronze: #5c4a2a;
  --frame-gilt: #c9a84a;
  --frame-gilt-dim: #8a6f2e;
  --frame-gilt-soft: rgba(201, 168, 74, 0.45);
  --frame-gilt-faint: rgba(201, 168, 74, 0.22);

  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --font-header: 'Cinzel Decorative', 'Cinzel', serif;
  --font-serif: 'Spectral', serif;
  --font-sans: 'Inter', sans-serif;
}

/* Aspect (Theme) Variations */
[data-theme="spectral"] {
  --accent-base: #3b0066;      /* Deep violet */
  --accent-glow: #9d4edd;      /* Ethereal phantom purple */
  --accent-rgb: 157, 78, 221;
  --border-glow: rgba(157, 78, 221, 0.25);
  --card-border: rgba(157, 78, 221, 0.18);
  --stone-gradient-1: #241e2e;
  --stone-gradient-2: #100b14;
  --frame-gilt: #b89ad4;
  --frame-gilt-dim: #6e4f8f;
  --frame-gilt-soft: rgba(184, 154, 212, 0.45);
  --frame-gilt-faint: rgba(184, 154, 212, 0.22);
  --frame-bronze: #4a3a5c;
  --frame-wood: #1e1626;
}

[data-theme="plague"] {
  --accent-base: #1f3b1b;      /* Putrid vegetation */
  --accent-glow: #39ff14;      /* Toxic neon sludge */
  --accent-rgb: 57, 255, 20;
  --border-glow: rgba(57, 255, 20, 0.22);
  --card-border: rgba(57, 255, 20, 0.18);
  --stone-gradient-1: #1e261d;
  --stone-gradient-2: #0b0f0a;
  --frame-gilt: #7dcc5a;
  --frame-gilt-dim: #3d6b2e;
  --frame-gilt-soft: rgba(125, 204, 90, 0.4);
  --frame-gilt-faint: rgba(125, 204, 90, 0.2);
  --frame-bronze: #3a4a2a;
  --frame-wood: #141a10;
}

/* ==========================================================================
   Base Layout & Overlays
   ========================================================================== */

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

html {
  scrollbar-width: thin;
  scrollbar-color: var(--accent-base) var(--bg-darkest);
}

body {
  background-color: var(--bg-darkest);
  color: var(--text-pure);
  font-family: var(--font-sans);
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* Custom Scrollbar for Webkit browsers */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-darkest);
}
::-webkit-scrollbar-thumb {
  background: var(--accent-base);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-glow);
}

/* Atmospheric overlays */
.fog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, transparent 40%, rgba(var(--accent-rgb), 0.04) 90%);
  z-index: 1;
}

.vignette-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.75);
  z-index: 2;
}

#particle-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

/* Main Container */
.app-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 2rem;
  position: relative;
  z-index: 10;
}

/* ==========================================================================
   Header Styling — flush to viewport edges
   ========================================================================== */

.header {
  position: relative;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(5, 5, 7, 0.55), rgba(5, 5, 7, 0.15));
}

.hourglass-icon {
  font-size: 2.2rem;
  color: var(--accent-glow);
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.6));
  animation: drip 4s ease-in-out infinite;
}

.title-plaque {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  width: fit-content;
  max-width: min(1040px, 100%);
  margin: 0 auto;
  padding: 1.5rem 3rem;
  text-align: center;
  background: rgba(14, 14, 18, 0.88);
}

.title-plaque.skull-frame {
  border-width: 56px;
  border-image-width: 56px;
}

.title-plaque h1 {
  font-family: var(--font-header);
  font-size: clamp(1.9rem, 4.2vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0;
  background: linear-gradient(135deg, #ffffff 40%, rgba(var(--accent-rgb), 0.9));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.title-plaque .hourglass-icon {
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  flex-shrink: 0;
}

.controls-area {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.control-group label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Custom Dropdown Styling (Gothic Luxury) */
.custom-dropdown {
  position: relative;
  display: inline-block;
  user-select: none;
  z-index: 100;
}

.dropdown-trigger {
  background: var(--bg-darker);
  border: 1px solid var(--card-border);
  color: var(--text-pure);
  padding: 0.4rem 2.2rem 0.4rem 0.8rem;
  border-radius: 4px;
  font-family: var(--font-sans);
  cursor: pointer;
  outline: none;
  font-size: 0.85rem;
  transition: var(--transition-smooth);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 140px;
  position: relative;
}

.dropdown-trigger:hover {
  border-color: var(--accent-glow);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.2);
}

.dropdown-arrow {
  position: absolute;
  right: 10px;
  font-size: 0.7rem;
  color: var(--text-muted);
  transition: transform 0.3s ease;
}

.custom-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 4px;
  background: rgba(12, 12, 15, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* visibility is transitioned with a delay rather than a duration: it flips
     instantly when opening (so options become focusable in the same tick that
     the menu opens) and only after the fade when closing, which preserves the
     exit animation. A plain `visibility 0.25s` flips mid-transition and makes
     the options unfocusable at the moment keyboard users need them. */
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.custom-dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

.dropdown-option {
  padding: 0.5rem 0.8rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  /* Deliberately NOT `all`: --transition-smooth is `all 0.3s`, which would also
     transition the visibility this option inherits from the open/closed menu.
     That delays the option becoming focusable, so arrow-key entry into the
     listbox silently fails. Transition only what actually needs animating. */
  transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: var(--font-sans);
  text-align: left;
}

.dropdown-option:hover {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--text-pure);
  padding-left: 1rem;
}

.dropdown-option.active {
  background: rgba(var(--accent-rgb), 0.25);
  color: var(--text-pure);
  font-weight: 500;
  border-left: 2px solid var(--accent-glow);
}

/* Disclaimer Styling */
.disclaimer-container {
  max-width: 800px;
  margin: 1.2rem auto 0 auto;
  padding: 1rem 1.5rem;
  background: rgba(0, 0, 0, 0.25);
  border: 1px dashed rgba(255, 255, 255, 0.05);
  border-radius: 6px;
}

.disclaimer-text {
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-dark);
  text-align: center;
}

.disclaimer-text strong {
  color: var(--text-muted);
}

.audio-controls {
  background: rgba(255, 255, 255, 0.03);
  padding: 0.4rem 1rem;
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,0.05);
}

.btn-icon {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 1.1rem;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--transition-smooth);
}

.btn-icon:hover {
  color: var(--accent-glow);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}

.volume-slider-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.custom-slider {
  -webkit-appearance: none;
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.1);
  outline: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.custom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-muted);
  transition: var(--transition-smooth);
}

.custom-slider:hover::-webkit-slider-thumb {
  background: var(--accent-glow);
  box-shadow: 0 0 6px var(--accent-glow);
}

/* ==========================================================================
   Dashboard Components
   ========================================================================== */

.dashboard {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Default tile: thin accent border with a soft glow */
.glass-card {
  position: relative;
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  box-shadow:
    0 0 22px var(--border-glow),
    inset 0 0 24px rgba(0, 0, 0, 0.35),
    0 16px 48px rgba(0, 0, 0, 0.6);
  transition: var(--transition-smooth);
}

.glass-card:hover {
  box-shadow:
    0 0 30px var(--border-glow),
    0 0 60px rgba(var(--accent-rgb), 0.08),
    inset 0 0 24px rgba(0, 0, 0, 0.35),
    0 16px 48px rgba(0, 0, 0, 0.6);
}

/* Opt-in gothic skull picture frame — original generated asset, 9-slice.
   Slice 165 covers the carving depth (~160px of the 968px source), so corner
   skulls stay proportional and edge strips tile with "round" instead of stretching.
   Add class="skull-frame" to any tile that should wear the full carved frame. */
.skull-frame {
  border: 44px solid transparent;
  border-image-source: url("frame-skull.webp");
  border-image-slice: 165;
  border-image-width: 44px;
  border-image-repeat: round;
  border-radius: 0;
  padding: 0.9rem 1rem;
  box-shadow:
    inset 0 0 36px rgba(0, 0, 0, 0.5),
    0 16px 48px rgba(0, 0, 0, 0.6);
}

.skull-frame:hover {
  box-shadow:
    inset 0 0 36px rgba(0, 0, 0, 0.5),
    0 16px 48px rgba(0, 0, 0, 0.6);
}

.glass-card > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Hero Section: Gravestone
   ========================================================================== */

.hero-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

.gravestone-wrapper {
  position: relative;
}

.gravestone-container {
  width: min(280px, 64vw);
  aspect-ratio: 928 / 1376;
  height: auto;
  position: relative;
  cursor: pointer;
  transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.75));
}

.gravestone-container:hover {
  transform: translateY(-6px);
}

.gravestone-container.pulse-active {
  animation: stonePulse 0.4s ease-out;
}

.gravestone-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Overlay sits on the blank face below the carved skull */
.gravestone-content {
  position: absolute;
  left: 15%;
  right: 15%;
  top: 26%;
  bottom: 14%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.15rem;
  pointer-events: none;
  text-align: center;
  box-sizing: border-box;
}

.memento-mori {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 4.2vw, 1.75rem);
  letter-spacing: 0.14em;
  color: #1a1a1e;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.05;
  margin-bottom: 0.15rem;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08),
    0 -1px 1px rgba(0, 0, 0, 0.75);
}

.memento-mori span {
  display: block;
}

.skull-divider {
  font-size: 0.7rem;
  color: #c5c5ce;
  margin: 0.25rem 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 82%;
  justify-content: center;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.skull-divider::before,
.skull-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 46px;
  background: linear-gradient(90deg, transparent, #c5c5ce, transparent);
  opacity: 0.95;
}

.main-counter-title {
  font-family: var(--font-serif);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: #c8c8d2;
  font-weight: 600;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.main-number {
  font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6.5vw, 3.6rem);
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
  transition: color 0.08s ease, text-shadow 0.08s ease, transform 0.12s ease;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin: 0.2rem 0 0.15rem;
}

/* Death event flash — not a heartbeat cue */
.main-number.increment {
  color: var(--accent-glow);
  transform: scale(1.06);
  text-shadow:
    0 0 1px var(--accent-glow),
    0 0 6px rgba(var(--accent-rgb), 0.85),
    0 1px 1px rgba(0, 0, 0, 0.9);
  filter: none;
}

.counter-subtext {
  font-family: var(--font-serif);
  font-size: 0.64rem;
  font-style: normal;
  color: #c8c8d2;
  margin-top: 0.2rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

.ecg-container {
  width: 82%;
  height: 30px;
  margin-top: auto;
  margin-bottom: 0.2rem;
  opacity: 1;
  flex-shrink: 0;
}

.ecg-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ecg-path-bg {
  fill: none;
  stroke: rgba(0, 0, 0, 0.55);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Always-on dim trace — the monitor is alive */
.ecg-path {
  fill: none;
  stroke: var(--accent-glow);
  stroke-width: 2.35px;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px rgba(var(--accent-rgb), 0.55));
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0.28;
}

/* Lub–dub brightness pulse on the full QRS trace */
.ecg-path.pulse {
  animation: ecgHeartbeat 0.7s ease-out;
}

/* Demise Velocity Panel */
.velocity-panel {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 980px;
  text-align: center;
  align-items: center;
  gap: 1.35rem;
}

.velocity-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  flex: 1;
  min-width: 0;
}

.velocity-stat--featured {
  flex: 1.35;
  z-index: 2;
  padding: 1.65rem 1.75rem;
  box-shadow:
    inset 0 0 36px rgba(0, 0, 0, 0.5),
    0 0 28px rgba(var(--accent-rgb), 0.45),
    0 0 60px rgba(var(--accent-rgb), 0.28),
    0 0 110px rgba(var(--accent-rgb), 0.16),
    0 16px 48px rgba(0, 0, 0, 0.6);
}

.velocity-stat--featured:hover {
  box-shadow:
    inset 0 0 36px rgba(0, 0, 0, 0.5),
    0 0 34px rgba(var(--accent-rgb), 0.55),
    0 0 72px rgba(var(--accent-rgb), 0.35),
    0 0 130px rgba(var(--accent-rgb), 0.2),
    0 16px 48px rgba(0, 0, 0, 0.6);
}

.velocity-label {
  font-family: var(--font-header);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

.velocity-value {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
}

.velocity-stat--featured .velocity-label {
  font-size: 0.95rem;
}

.velocity-stat--featured .velocity-value {
  font-size: 2.35rem;
}

.velocity-value.count-ticker {
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Counters Grid (Diseases vs Accidents)
   ========================================================================== */

.counters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.75rem;
}

.panel-header-icon {
  font-size: 1.5rem;
}

.disease-color {
  color: var(--accent-glow);
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.5));
}

.accident-color {
  color: #ff9f1c;
  filter: drop-shadow(0 0 6px rgba(255, 159, 28, 0.5));
}

.category-panel h2,
.age-distribution-section h2,
.country-ledger-section h2,
.rare-deaths-section h2,
.demise-calc-section h2,
.last-words-section h2,
.grim-feed-section h2,
.section-title-wrapper h2 {
  font-family: var(--font-header);
  font-size: clamp(1.15rem, 2.1vw, 1.45rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.25;
}

.panel-description {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
  line-height: 1.4;
}

/* Border glow hover — soft accent wash behind the ledger frame */
.border-glow-disease:hover {
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.55),
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 0 32px rgba(var(--accent-rgb), 0.2);
}

.border-glow-accident:hover {
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.55),
    0 16px 48px rgba(0, 0, 0, 0.6),
    0 0 28px rgba(255, 159, 28, 0.16);
}

.counter-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.counter-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  transition: var(--transition-smooth);
}

.counter-item:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  transform: translateX(4px);
}

.counter-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 65%;
}

.counter-name {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 0.95rem;
}

.icon-spacing {
  margin-right: 0.6rem;
  width: 18px;
  text-align: center;
}

.counter-description {
  font-size: 0.75rem;
  color: var(--text-dark);
  line-height: 1.3;
}

.counter-numbers {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.count-value {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease-out;
}

.count-value.flash-white {
  color: var(--accent-glow);
  text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}

.count-velocity {
  font-size: 0.7rem;
  color: var(--text-dark);
  letter-spacing: 0.03em;
}

/* ==========================================================================
   Demographics Section
   ========================================================================== */

.section-title-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.section-title-icon {
  font-size: 1.4rem;
  color: var(--accent-glow);
}

.age-distribution-section .section-title-icon {
  color: var(--terminal-green);
  filter: drop-shadow(0 0 6px rgba(var(--terminal-green-rgb), 0.5));
}

.age-distribution-section .age-percent {
  color: rgba(var(--terminal-green-rgb), 0.65);
}

.age-distribution-section .age-count {
  color: rgba(var(--terminal-green-rgb), 0.85);
}

.age-distribution-section .age-bar-fill {
  background: linear-gradient(90deg, #1a4a14, var(--terminal-green));
  box-shadow: 0 0 10px rgba(var(--terminal-green-rgb), 0.45);
}

.age-distribution-section .age-bar-track {
  border-color: rgba(var(--terminal-green-rgb), 0.12);
}

.section-description {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.age-chart-container {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.age-bar-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.age-bar-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.age-label {
  font-weight: 500;
  color: var(--text-pure);
}

.age-percent {
  color: var(--text-dark);
  margin-right: auto;
  margin-left: 0.5rem;
  font-size: 0.75rem;
}

.age-count {
  font-family: var(--font-serif);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.age-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.age-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-base), var(--accent-glow));
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.5);
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.1, 0.8, 0.2, 1);
}

/* ==========================================================================
   Atlas of Lethal Claims (by country)
   ========================================================================== */

.country-ledger-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem 1.25rem;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 6;
  overflow: visible;
}

.country-mode-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 8px;
  background: rgba(5, 5, 7, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.08);
  gap: 2px;
  margin-left: auto;
}

.country-mode-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-header);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.55rem 0.95rem;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.country-mode-btn:hover {
  color: var(--text-pure);
}

.country-mode-btn.active {
  background: rgba(var(--accent-rgb), 0.18);
  color: var(--text-pure);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
}

.country-mode-btn.active[data-mode="accidents"] {
  background: rgba(255, 159, 28, 0.16);
  border-color: rgba(255, 159, 28, 0.4);
  box-shadow: 0 0 12px rgba(255, 159, 28, 0.18);
}

.country-causes-list[data-mode="accidents"] .country-cause-fill {
  background: linear-gradient(90deg, #9a5a10, #ff9f1c);
  box-shadow: 0 0 10px rgba(255, 159, 28, 0.4);
}

.country-causes-list[data-mode="accidents"] ~ .country-causes-title,
.country-causes-title[data-mode="accidents"] {
  color: #ff9f1c;
}

#country-causes-title[data-mode="accidents"] {
  color: #ff9f1c;
  filter: drop-shadow(0 0 6px rgba(255, 159, 28, 0.35));
}

.country-causes-list[data-mode="accidents"] .country-cause-pct {
  color: #ffb347;
}

.country-ledger-label {
  font-family: var(--font-header);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.country-ledger-section {
  overflow: visible;
  z-index: 5;
}

.country-ledger-section:has(.country-dropdown.open) {
  z-index: 30;
}

.country-dropdown {
  position: relative;
  z-index: 40;
  min-width: min(320px, 100%);
}

.country-dropdown-trigger {
  min-width: min(320px, 100%);
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1.05rem;
  background: #0c0c0f;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  font-family: var(--font-header);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-pure);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(0, 0, 0, 0.35);
}

.country-dropdown-trigger:hover,
.country-dropdown.open .country-dropdown-trigger {
  border-color: var(--accent-glow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 14px rgba(var(--accent-rgb), 0.22);
}

.country-dropdown-trigger .dropdown-arrow {
  color: rgba(var(--accent-rgb), 0.75);
}

.country-dropdown-menu {
  position: absolute;
  left: 0;
  top: 100%;
  max-height: min(320px, 50vh);
  overflow-y: auto;
  width: 100%;
  margin-top: 6px;
  padding: 0.35rem 0;
  background: #0c0c0f;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.85),
    0 0 24px rgba(var(--accent-rgb), 0.08);
  scrollbar-width: thin;
  scrollbar-color: var(--accent-base) #0c0c0f;
  z-index: 50;
}

.country-dropdown-menu .dropdown-option {
  font-family: var(--font-header);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  color: var(--text-muted);
  background: #0c0c0f;
}

.country-dropdown-menu .dropdown-option:hover {
  background: #1a1214;
  color: var(--text-pure);
  padding-left: 1.15rem;
}

.country-dropdown-menu .dropdown-option.active {
  background: #221218;
  color: var(--text-pure);
  border-left: 2px solid var(--accent-glow);
}

.country-ledger-panel {
  padding: 1.35rem 1.25rem 1.1rem;
  background: rgba(5, 5, 7, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  animation: demiseReveal 0.45s ease-out;
}

.country-ledger-panel[hidden] {
  display: none;
}

.country-ledger-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.country-ledger-name {
  font-family: var(--font-header);
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-pure);
}

.country-ledger-region {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.country-ledger-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.country-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 110px;
}

.country-stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dark);
}

.country-stat-value {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--text-pure);
}

.country-causes-title {
  font-family: var(--font-header);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-glow);
  margin-bottom: 0.9rem;
}

.country-causes-list {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.country-cause-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.country-cause-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.country-cause-rank {
  font-family: var(--font-header);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-dark);
  margin-right: 0.45rem;
}

.country-cause-name {
  font-size: 0.92rem;
  color: var(--text-pure);
  font-weight: 500;
}

.country-cause-pct {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: rgba(var(--accent-rgb), 0.95);
}

.country-cause-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.country-cause-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent-base), var(--accent-glow));
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.45);
  border-radius: 4px;
  transition: width 0.65s cubic-bezier(0.1, 0.8, 0.2, 1);
}

.country-ledger-disclaimer {
  margin-top: 1.25rem;
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text-dark);
  text-align: left;
}

.country-ledger-disclaimer strong {
  color: var(--text-muted);
  font-weight: 600;
}

@media (max-width: 580px) {
  .country-dropdown {
    width: 100%;
    min-width: 0;
  }

  .country-dropdown-trigger {
    min-width: 0;
  }

  .country-mode-toggle {
    margin-left: 0;
    width: 100%;
  }

  .country-mode-btn {
    flex: 1;
    text-align: center;
  }
}

/* ==========================================================================
   Rare Deaths & Grim Telemetry
   ========================================================================== */

.rare-color {
  color: #c77dff;
  filter: drop-shadow(0 0 6px rgba(199, 125, 255, 0.5));
}

.rare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.rare-card {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  box-shadow:
    0 0 14px var(--border-glow),
    0 8px 24px rgba(0, 0, 0, 0.4);
  transition: var(--transition-smooth);
}

.rare-card:hover {
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(var(--accent-rgb), 0.12);
  transform: scale(1.02);
}

.rare-icon {
  font-size: 1.4rem;
  color: #c77dff;
  width: 25px;
  text-align: center;
}

.rare-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex-grow: 1;
}

.rare-label {
  font-size: 0.85rem;
  font-weight: 500;
}

.rare-rate {
  font-size: 0.7rem;
  color: var(--text-dark);
  margin-bottom: 0.3rem;
}

.rare-ledger-row {
  display: flex;
  gap: 0.8rem;
  margin-top: 0.2rem;
}

.rare-ledger-item {
  font-size: 0.68rem;
  color: var(--text-dark);
  white-space: nowrap;
}

.rare-year-val {
  color: var(--text-muted);
  font-family: var(--font-serif);
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease-out;
}

.rare-year-val.flash-rare-year {
  color: #e0aaff;
  text-shadow: 0 0 8px rgba(199, 125, 255, 0.6);
}

.rare-last-val {
  color: rgba(255, 255, 255, 0.25);
  font-family: var(--font-serif);
}

.rare-arrival-box {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 85px;
}

.rare-arrival-title {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-dark);
  margin-bottom: 0.15rem;
}

.rare-counter-val {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s ease-out;
}

.rare-counter-val.flash-rare {
  color: #e0aaff;
  text-shadow: 0 0 10px rgba(199, 125, 255, 0.8);
}

/* Grim Telemetry Terminal Ticker */
.grim-feed-section {
  display: flex;
  flex-direction: column;
}

.terminal-color {
  color: var(--terminal-green);
  filter: drop-shadow(0 0 6px rgba(var(--terminal-green-rgb), 0.5));
}

.terminal-body {
  flex-grow: 1;
  background: #040406;
  border: 1px solid rgba(var(--terminal-green-rgb), 0.15);
  border-radius: 8px;
  padding: 1.2rem;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.9);
  min-height: 250px;
  max-height: 380px;
  overflow: hidden;
  position: relative;
}

.terminal-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 5;
}

.terminal-screen {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 0.95rem;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  scrollbar-width: none; /* Hide scrollbar for clean terminal */
}

.terminal-screen::-webkit-scrollbar {
  display: none;
}

.terminal-line {
  color: rgba(var(--terminal-green-rgb), 0.9);
  text-shadow: 0 0 1px rgba(var(--terminal-green-rgb), 0.35);
  word-break: break-word;
  animation: textScan 0.1s ease-out;
}

.terminal-line.system-msg {
  color: var(--text-dark);
}

.terminal-line.critical-msg {
  color: #ff3333;
  text-shadow: 0 0 4px rgba(255, 51, 51, 0.4);
}

.cursor-line {
  display: flex;
  align-items: center;
}

.terminal-cursor {
  animation: cursorBlink 1s step-end infinite;
  margin-left: 3px;
  color: var(--terminal-green);
}

.last-words-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.last-words-box {
  width: 100%;
  max-width: 800px;
  background: rgba(5, 5, 7, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 2.2rem 1.8rem;
  margin-bottom: 1.8rem;
  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.last-words-box::before {
  content: "“";
  position: absolute;
  top: 10px;
  left: 20px;
  font-family: var(--font-serif);
  font-size: 5rem;
  color: rgba(var(--accent-rgb), 0.08);
  line-height: 1;
}

.last-words-quote {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-pure);
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  margin-bottom: 0.9rem;
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

.last-words-author {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-weight: 500;
  display: block;
  letter-spacing: 0.03em;
  transition: opacity 0.4s ease-in-out;
}

.btn-summon {
  background: linear-gradient(to bottom, var(--bg-darker), rgba(var(--accent-rgb), 0.12));
  border: 1px solid var(--accent-base);
  color: var(--text-pure);
  padding: 0.8rem 2.2rem;
  border-radius: 4px;
  font-family: var(--font-header);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  transition: var(--transition-smooth);
}

.btn-summon:hover {
  background: linear-gradient(to bottom, rgba(var(--accent-rgb), 0.15), rgba(var(--accent-rgb), 0.28));
  border-color: var(--accent-glow);
  box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.35);
  transform: translateY(-2px);
}

.btn-summon:active {
  transform: translateY(1px);
}

.last-words-box.fade-out .last-words-quote,
.last-words-box.fade-out .last-words-author {
  opacity: 0;
  transform: scale(0.98);
}

/* ==========================================================================
   How Will You Demise? Calculator
   ========================================================================== */

.demise-calc-form {
  width: 100%;
}

.demise-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 0.75rem 1.1rem;
  margin: 1.5rem 0 1.75rem;
}

.demise-check {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  background: rgba(5, 5, 7, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-smooth);
  user-select: none;
}

.demise-check:hover {
  border-color: rgba(var(--accent-rgb), 0.28);
  background: rgba(var(--accent-rgb), 0.06);
}

.demise-check:has(input:checked) {
  border-color: rgba(var(--accent-rgb), 0.45);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.12);
}

.demise-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.demise-check-box {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  position: relative;
  transition: var(--transition-smooth);
}

.demise-check input:checked + .demise-check-box {
  border-color: var(--accent-glow);
  background: rgba(var(--accent-rgb), 0.35);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}

.demise-check input:checked + .demise-check-box::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.demise-check-text {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.demise-check:has(input:checked) .demise-check-text {
  color: var(--text-pure);
}

.demise-calc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.btn-calc-reset {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-calc-reset:hover {
  border-color: rgba(255, 255, 255, 0.28);
  color: var(--text-pure);
}

.demise-calc-result {
  margin-top: 1.75rem;
  padding: 1.75rem 1.5rem;
  background: rgba(5, 5, 7, 0.5);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 8px;
  text-align: center;
  box-shadow:
    inset 0 0 24px rgba(0, 0, 0, 0.55),
    0 0 28px rgba(var(--accent-rgb), 0.12);
  animation: demiseReveal 0.55s ease-out;
}

.demise-calc-result[hidden] {
  display: none;
}

.demise-calc-disclaimer {
  margin: 1rem auto 0;
  max-width: 720px;
  padding: 0.85rem 1rem;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--text-dark);
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.demise-calc-disclaimer strong {
  color: var(--text-muted);
  font-weight: 600;
}

.demise-result-eyebrow {
  font-family: var(--font-header);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--accent-glow);
  margin-bottom: 0.65rem;
}

.demise-result-cause {
  font-family: var(--font-header);
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-pure);
  margin-bottom: 0.85rem;
  text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.35);
}

.demise-result-blurb {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 1.1rem;
}

.demise-result-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dark);
}

.demise-result-odds {
  color: rgba(var(--accent-rgb), 0.9);
}

@keyframes demiseReveal {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ==========================================================================
   AdSense slots
   ========================================================================== */

.ad-slot {
  display: none; /* shown by app.js once a real ca-pub- ID is configured */
  width: 100%;
  max-width: 100%;
  margin: 0.25rem 0;
  padding: 0.85rem 1rem 1rem;
  text-align: center;
  background: rgba(8, 8, 11, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
}

.ad-slot.is-ready {
  display: block;
}

.ad-label {
  display: block;
  margin-bottom: 0.55rem;
  font-family: var(--font-header);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dark);
}

.ad-slot .adsbygoogle {
  min-height: 90px;
  background: rgba(0, 0, 0, 0.2);
}

.ad-slot--footer {
  margin-top: 0.5rem;
}

/* ==========================================================================
   Footer Style
   ========================================================================== */

.footer {
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.about-section {
  max-width: 640px;
  margin: 0.35rem auto 0.5rem;
  padding: 1.1rem 1.25rem;
  text-align: left;
  background: rgba(8, 8, 11, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}

.about-section h2 {
  font-family: var(--font-header);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.65rem;
}

.about-section p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-dark);
}

.memento-quote {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-muted);
}

.data-sources {
  font-size: 0.75rem;
  color: var(--text-dark);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.4;
}

.copyright {
  font-size: 0.7rem;
  color: var(--text-dark);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   Keyframe Animations
   ========================================================================== */

@keyframes drip {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
}

@keyframes ecgHeartbeat {
  0% {
    opacity: 0.28;
    filter: drop-shadow(0 0 2px rgba(var(--accent-rgb), 0.45));
  }
  12% {
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(var(--accent-rgb), 0.95));
  }
  22% {
    opacity: 0.35;
  }
  34% {
    opacity: 0.95;
    filter: drop-shadow(0 0 3px rgba(var(--accent-rgb), 0.8));
  }
  55% {
    opacity: 0.5;
  }
  100% {
    opacity: 0.28;
    filter: drop-shadow(0 0 2px rgba(var(--accent-rgb), 0.45));
  }
}

@keyframes stonePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(var(--accent-rgb), 0);
  }
  50% {
    transform: scale(1.015);
    box-shadow: 0 0 25px rgba(var(--accent-rgb), 0.35);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 rgba(var(--accent-rgb), 0);
  }
}

@keyframes textScan {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cursorBlink {
  from, to { opacity: 0; }
  50% { opacity: 1; }
}

/* Particles rising off the gravestone */
.soul-particle {
  position: absolute;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 30% at 50% 18%, rgba(255, 255, 255, 0.85) 0%, transparent 70%),
    radial-gradient(ellipse 55% 70% at 50% 55%, rgba(var(--accent-rgb), 0.7) 0%, rgba(var(--accent-rgb), 0) 75%);
  border-radius: 50% 50% 45% 45% / 55% 55% 40% 40%;
  z-index: 99;
  filter: blur(1.2px);
  animation: particleFloat 2.2s ease-out forwards;
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) scale(0.55) translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 0.75;
  }
  60% {
    opacity: 0.45;
  }
  100% {
    transform: translateY(-180px) scale(0.15) translateX(var(--drift, 0px));
    opacity: 0;
  }
}

/* ==========================================================================
   Media Queries & Responsiveness
   ========================================================================== */


@media (max-width: 768px) {
  .header {
    justify-content: flex-end;
    padding: 0.65rem 0.85rem;
  }

  .title-plaque {
    padding: 0.85rem 1.25rem;
    gap: 0.65rem;
  }

  .title-plaque.skull-frame {
    border-width: 40px;
    border-image-width: 40px;
  }
  
  .controls-area {
    width: 100%;
    justify-content: flex-end;
    gap: 0.85rem;
  }

  .hero-section {
    gap: 2.25rem;
  }

  .counters-grid {
    grid-template-columns: 1fr;
  }

  .velocity-panel {
    flex-direction: column;
    gap: 1.25rem;
  }

  .velocity-stat--featured {
    flex: 1;
    order: -1;
    width: 100%;
    padding: 1.55rem 1.5rem;
  }

  .velocity-stat--featured .velocity-value {
    font-size: 2.2rem;
  }
  
  .gravestone-container {
    width: min(250px, 72vw);
  }
  
  .main-number {
    font-size: 2.7rem;
  }

  .gravestone-content {
    top: 25%;
    bottom: 13%;
    left: 14%;
    right: 14%;
  }

  .memento-mori {
    font-size: clamp(1.25rem, 4vw, 1.55rem);
  }
  
  .rare-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 580px) {
  .controls-area {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
  }
  
  .control-group {
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.02);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.03);
  }
  
  .audio-controls {
    justify-content: space-between;
  }
}

/* ==========================================================================
   Dynamic Background Elements (Clouds, Ghosts, Spire, Lantern)
   ========================================================================== */

.background-svg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

/* Dark storm clouds that visibly drift across the moonlit sky */
.background-clouds {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 48%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.storm-cloud {
  position: absolute;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  /* Soft slate masses that slide across the moon — motion is readable */
  background:
    radial-gradient(ellipse 40% 55% at 20% 50%, rgba(40, 45, 70, 0.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 65% at 52% 42%, rgba(55, 60, 90, 0.5) 0%, transparent 72%),
    radial-gradient(ellipse 38% 50% at 80% 55%, rgba(35, 40, 65, 0.45) 0%, transparent 70%);
  filter: blur(12px);
  mix-blend-mode: soft-light;
  opacity: 0.95;
}

.cloud-a {
  top: 2%;
  width: 980px;
  animation: stormDrift 40s linear infinite;
  animation-delay: -8s;
}

.cloud-b {
  top: 8%;
  width: 1200px;
  height: 240px;
  opacity: 0.8;
  animation: stormDrift 62s linear infinite;
  animation-delay: -28s;
}

.cloud-c {
  top: 16%;
  width: 860px;
  height: 170px;
  opacity: 0.65;
  animation: stormDriftReverse 48s linear infinite;
  animation-delay: -18s;
}

@keyframes stormDrift {
  0% { transform: translateX(-75vw); }
  100% { transform: translateX(115vw); }
}

@keyframes stormDriftReverse {
  0% { transform: translateX(115vw) scale(1.12); }
  100% { transform: translateX(-75vw) scale(1.12); }
}

/* Candle lights (lantern + tower window) — JS drives opacity/scale flicker */
#church-window-haze,
#church-window-light,
.lantern-glow-svg,
.lantern-flicker-svg {
  transform-box: fill-box;
  transform-origin: center;
}

/* Rising souls — grey translucent smoke-ghosts (SVG inside) */
.rising-soul {
  position: fixed;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  mix-blend-mode: normal;
  filter: drop-shadow(0 0 6px rgba(160, 164, 174, 0.25));
  animation: soulRise var(--soul-duration, 22s) linear forwards;
}

.rising-soul svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@keyframes soulRise {
  0% {
    transform: translate3d(0, 8px, 0) scale(0.55) rotate(-2deg);
    opacity: 0;
  }
  8% {
    opacity: 0.46;
  }
  75% {
    opacity: 0.31;
  }
  100% {
    transform: translate3d(var(--soul-drift), -55vh, 0) scale(1.2) rotate(2deg);
    opacity: 0;
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Keyboard focus. The page had no :focus styling at all, so tabbing through it
   was invisible. :focus-visible keeps the ring off mouse clicks. */
:focus-visible {
  outline: 2px solid var(--accent-glow, #ff2020);
  outline-offset: 3px;
  border-radius: 2px;
}

.dropdown-option:focus-visible,
.demise-check input:focus-visible + .demise-check-box {
  outline: 2px solid var(--accent-glow, #ff2020);
  outline-offset: 2px;
}

/* Touch targets. 32x32 icon buttons and 31px-tall dropdowns were both under the
   44x44 minimum; the icon inside stays the same size, only the hit area grows. */
.btn-icon {
  width: 44px;
  height: 44px;
}

.dropdown-trigger,
.country-mode-btn,
.btn-summon,
.btn-calc-reset {
  min-height: 44px;
}

/* --------------------------------------------------------------------------
   Reduced motion

   This page is built almost entirely out of movement — fog, drifting storm
   clouds, rising souls, particle bursts, a running ECG trace and candle
   flicker. For a visitor who has asked their OS to reduce motion, that is not
   atmosphere, it is a problem. Strip the ambient motion entirely and collapse
   the functional feedback animations to something instant but still legible.

   app.js checks the same media query and stops spawning souls and wisps, so
   nothing keeps building DOM nodes just to sit still.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Purely decorative moving layers — remove rather than freeze, so they don't
     sit there as a static haze over the artwork. */
  .fog-overlay,
  .background-clouds,
  #particle-container,
  .soul-particle,
  .rising-soul {
    display: none !important;
  }

  /* The ECG trace reads as a heartbeat line rather than an animation; keep it
     drawn but static. */
  .ecg-path {
    stroke-dashoffset: 0 !important;
  }

  .terminal-cursor {
    opacity: 1 !important;
  }
}

/* ==========================================================================
   Content pages (about, privacy, terms, contact, methodology, articles)

   These share the Ledger's palette and type but deliberately skip the animated
   dashboard chrome: no background artwork, no particles, no app.js. They are
   long-form reading surfaces, so the priority is line length and contrast.
   ========================================================================== */

.doc-body {
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(139, 0, 0, 0.14), transparent 70%),
    linear-gradient(180deg, #08080a 0%, var(--bg-darkest) 55%, #030304 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* --- Site navigation, shared across every page --- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.4rem;
  padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  background: rgba(6, 6, 8, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--card-border);
}

.site-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  font-family: var(--font-header);
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: var(--text-pure);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav-brand img {
  width: 26px;
  height: 26px;
  border-radius: 3px;
}

.site-nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.7rem;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.site-nav-links a:hover {
  color: var(--text-pure);
  background: rgba(var(--accent-rgb), 0.08);
}

.site-nav-links a[aria-current="page"] {
  color: var(--accent-glow);
  background: rgba(var(--accent-rgb), 0.1);
}

/* --- Reading column --- */
.doc-main {
  max-width: 74ch;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.1rem, 5vw, 2rem) 4rem;
}

.doc-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--card-border);
}

.doc-eyebrow {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-glow);
}

.doc-main h1 {
  margin: 0 0 0.7rem;
  font-family: var(--font-header);
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.15;
  color: var(--text-pure);
}

.doc-lede {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 2.4vw, 1.15rem);
  line-height: 1.7;
  color: var(--text-muted);
}

.doc-main h2 {
  margin: 2.6rem 0 0.9rem;
  font-family: var(--font-header);
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  line-height: 1.3;
  color: var(--text-pure);
}

.doc-main h3 {
  margin: 1.9rem 0 0.6rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-pure);
}

.doc-main p,
.doc-main li {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.75;
  color: #cfcfd8;
}

.doc-main p { margin: 0 0 1.15rem; }

.doc-main ul,
.doc-main ol { margin: 0 0 1.3rem; padding-left: 1.4rem; }
.doc-main li { margin-bottom: 0.5rem; }

.doc-main a {
  color: var(--accent-glow);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(var(--accent-rgb), 0.45);
}

.doc-main a:hover { text-decoration-color: var(--accent-glow); }

.doc-main strong { color: var(--text-pure); font-weight: 600; }

.doc-main hr {
  margin: 2.6rem 0;
  border: 0;
  border-top: 1px solid var(--card-border);
}

/* Callout for the things a reader must not miss (disclaimers, caveats). */
.doc-callout {
  margin: 1.6rem 0 1.8rem;
  padding: 1.1rem 1.3rem;
  background: rgba(139, 0, 0, 0.09);
  border: 1px solid var(--card-border);
  border-left: 3px solid var(--accent-base);
  border-radius: 5px;
}

.doc-callout p:last-child { margin-bottom: 0; }

.doc-callout--neutral {
  background: rgba(255, 255, 255, 0.03);
  border-left-color: var(--text-dark);
}

/* Data tables (methodology figures, cause rates) */
.doc-table-wrap {
  overflow-x: auto;
  margin: 0 0 1.6rem;
  border: 1px solid var(--card-border);
  border-radius: 6px;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 0.86rem;
}

.doc-table th,
.doc-table td {
  padding: 0.6rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}

.doc-table th {
  background: rgba(255, 255, 255, 0.035);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.doc-table td { color: #cfcfd8; }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child { white-space: normal; }

.doc-meta {
  margin-top: 3rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--card-border);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  color: var(--text-dark);
}

/* Cards linking on to further reading */
.doc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1rem;
  margin: 1.6rem 0 2rem;
}

.doc-card {
  display: block;
  padding: 1.1rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  text-decoration: none !important;
  transition: var(--transition-smooth);
}

.doc-card:hover {
  border-color: var(--accent-glow);
  transform: translateY(-2px);
}

.doc-card-title {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-header);
  font-size: 0.98rem;
  color: var(--text-pure);
}

.doc-card-desc {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --- Shared site footer --- */
.site-footer {
  padding: 2.5rem clamp(1.1rem, 5vw, 2rem) 3rem;
  border-top: 1px solid var(--card-border);
  text-align: center;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.5rem;
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
}

.site-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer-links a:hover { color: var(--accent-glow); }

.site-footer-note {
  max-width: 68ch;
  margin: 0 auto 0.8rem;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--text-dark);
}

@media (max-width: 580px) {
  .site-nav { gap: 0.3rem 0.6rem; }
  .site-nav-brand { font-size: 0.88rem; }
  .site-nav-links a { padding: 0 0.5rem; font-size: 0.78rem; }
}

/* Caveat block under the Bizarre & Rare heading — this section mixes real
   estimates with folklore, and the page says so rather than letting the WHO
   attribution in the footer imply these figures share that provenance. */
.rare-section-caveat {
  margin: -0.4rem 0 1.4rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--accent-base);
  border-radius: 0 5px 5px 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.rare-section-caveat strong { color: var(--text-pure); }

.rare-section-caveat a {
  color: var(--accent-glow);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Crisis signposting beside the country atlas. The external-cause column lists
   suicide and interpersonal violence, so the route to support belongs on the
   page that actually shows those figures, not only in the footer pages. */
.support-note {
  margin: 1.1rem 0 0.4rem;
  padding: 0.8rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--text-dark);
  border-radius: 0 5px 5px 0;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.support-note a {
  color: var(--accent-glow);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The counter's increment flash scales the number. Under reduced motion the
   colour change still reads as feedback, but the size change should not happen
   — suppressing the duration alone would only make it snap rather than stop. */
@media (prefers-reduced-motion: reduce) {
  .main-number.increment {
    transform: none !important;
  }

  .gravestone-container.pulse-active {
    animation: none !important;
  }
}

/* ==========================================================================
   Mobile refinements

   Measured on a 375px viewport against the live site: the nav wrapped onto two
   rows (146px tall) and the header controls stacked into three full-width rows
   (202px), so 348px of chrome sat above the fold and the main counter — the
   entire point of the page — landed at 856px. On a real phone that is below
   the fold on arrival.
   ========================================================================== */
@media (max-width: 640px) {
  /* Nav on one row. Five labels will not fit at full size, so shrink them and
     let the row scroll sideways rather than wrap and orphan "Contact". */
  .site-nav {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
  }

  /* The wordmark costs ~190px of a 375px viewport, which clipped the links
     mid-word. The skull alone still links home and buys the nav that space. */
  .site-nav-brand {
    flex-shrink: 0;
    gap: 0;
    margin-right: 0.5rem;
  }

  .site-nav-brand span { display: none; }
  .site-nav-brand img { width: 24px; height: 24px; }

  .site-nav-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .site-nav-links::-webkit-scrollbar { display: none; }

  .site-nav-links a {
    min-height: 40px;
    padding: 0 0.45rem;
    font-size: 0.75rem;
    white-space: nowrap;
  }

  /* Header controls: two compact rows instead of three tall ones. */
  .header { padding: 0.5rem 0.6rem; }

  .controls-area {
    gap: 0.5rem 0.75rem;
    justify-content: center;
  }

  .control-group {
    gap: 0.4rem;
    font-size: 0.8rem;
  }

  .control-group label { font-size: 0.78rem; }

  .dropdown-trigger {
    min-width: 0;
    padding: 0.35rem 1.9rem 0.35rem 0.6rem;
    font-size: 0.78rem;
  }

  /* The volume track was an 80x4px hit area — effectively untappable. Give the
     input a real height; the visual track stays thin via its own styling. */
  .volume-slider-container { gap: 0.4rem; }

  .custom-slider {
    height: 44px;
    width: 92px;
    background: transparent;   /* the input is now only the hit area */
  }

  .custom-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
  }

  .custom-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.1);
  }

  .custom-slider::-webkit-slider-thumb { margin-top: -4px; }
}

/* Menu options are the things you actually tap to choose a theme, a chime or a
   country. They were 32px tall — the triggers were raised to 44px in an earlier
   pass but the options inside them were missed. */
.dropdown-option {
  display: flex;
  align-items: center;
  min-height: 44px;
}

/* Coarse pointers get the larger target regardless of viewport width. */
@media (pointer: coarse) {
  .demise-check { min-height: 44px; }
  .country-mode-btn { min-height: 44px; }
}

/* The rare-card grid blew out on phones: `grid-template-columns: 1fr` carries an
   implicit min-content floor, so the track grew to the card's intrinsic width
   (346px inside a 269px container) and the section scrolled sideways.
   minmax(0, 1fr) removes that floor; min-width:0 lets the flex children
   actually shrink rather than propagating their own min-content width up. */
@media (max-width: 768px) {
  .rare-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .rare-card {
    min-width: 0;
    gap: 0.6rem;
    padding: 0.75rem 0.8rem;
  }

  .rare-info {
    min-width: 0;
  }

  .rare-label,
  .rare-rate {
    overflow-wrap: anywhere;
  }

  .rare-arrival-box {
    min-width: 0;
    flex-shrink: 0;
  }

  .rare-ledger-row {
    flex-wrap: wrap;
  }
}

/* The nav is sticky, so anything scrolled to by an anchor or by browser scroll
   restoration lands underneath it. scroll-padding reserves that height. */
html {
  scroll-padding-top: 4.5rem;
}

@media (max-width: 640px) {
  html { scroll-padding-top: 3.75rem; }
}