/* ============================================================
   PAKPHANTOM — comic superhero skin for ALL sub-pages
   Loaded AFTER style.css on every page so it wins.
   Palette matches css/comic.css (midnight blue + hero red +
   crest gold + phantom neon).
   ============================================================ */

:root {
  --red: #ff3131;
  --red-dark: #c81e1e;
  --ink: #ffd700;
  --paper: #060b18;
  --paper-dark: #02050d;
  --blue: #4a7dff;
  --gold: #ffd700;
  --green: #00ff88;
  --ghost: #0b1424;
  --font-display: "Anton", sans-serif;
  --font-comic: "Bangers", cursive;
  --font-hand: "Permanent Marker", cursive;
  --font-body: "Space Grotesk", sans-serif;
}

html, html[data-theme="dark"] {
  background: var(--paper);
}

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
}

/* ---------- text + headings ---------- */
h1, h2, h3, h4, h5, .logo-name, .page-title, .section-title,
.cmd-stat-number, .metric-value, .stat-number, .game-stat-value,
.econ-detail-value {
  font-family: var(--font-display) !important;
  letter-spacing: 0.02em !important;
}
.gradient-text {
  background: linear-gradient(90deg, var(--red), var(--gold)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
::selection { background: var(--red); color: var(--paper); }

/* ---------- page loader ---------- */
.page-loader { background: var(--paper) !important; }
.loader-brand { color: var(--ink) !important; }
.loader-status { color: var(--ink) !important; }

/* ---------- navbar ---------- */
.navbar {
  background: rgba(2, 5, 13, 0.92) !important;
  border-bottom: 3px solid var(--ink) !important;
  backdrop-filter: blur(10px);
}
.logo-name { color: var(--ink) !important; }
.logo-tag { color: var(--ink) !important; opacity: 0.7; }
.logo-emoji { background: var(--red) !important; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.nav-links .nav-link, .mobile-nav-link {
  color: var(--ink) !important;
  font-family: var(--font-comic) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}
.nav-links .nav-link.active, .mobile-nav-link.active {
  color: var(--paper) !important;
  background: var(--red) !important;
  border-radius: 8px;
}
.nav-cta {
  border: 3px solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  border-radius: 10px !important;
}
.mobile-menu { background: var(--paper) !important; }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-display) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  border: 3px solid var(--ink) !important;
  border-radius: 10px !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.btn:hover { transform: translate(-2px, -2px) !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.btn-primary { background: var(--red) !important; color: var(--paper) !important; }
.btn-secondary, .btn-ghost {
  background: var(--ghost) !important;
  color: var(--ink) !important;
}
.btn-shimmer, .btn-particles { display: none !important; }

/* ---------- page hero ---------- */
.page-header-section {
  background: var(--paper) !important;
  position: relative;
  overflow: hidden;
}
.page-header-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--ink) 1.3px, transparent 1.4px);
  background-size: 16px 16px;
  opacity: 0.1;
  pointer-events: none;
}
.page-title, .page-subtitle { position: relative; }
.page-title {
  font-size: clamp(48px, 9vw, 110px) !important;
  text-transform: uppercase;
  line-height: 0.95 !important;
}
.page-subtitle {
  font-family: var(--font-hand) !important;
  font-size: clamp(15px, 2vw, 19px) !important;
  opacity: 0.85;
}
.breadcrumb-item, .breadcrumb-sep { color: var(--ink) !important; }

/* ---------- sections ---------- */
.section-badge {
  font-family: var(--font-comic) !important;
  letter-spacing: 0.14em !important;
  background: var(--red) !important;
  color: var(--paper) !important;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 8px;
  padding: 3px 12px;
}
.section-title {
  font-size: clamp(36px, 6vw, 72px) !important;
  text-transform: uppercase;
  line-height: 1;
}
.section-subtitle { opacity: 0.8; }

/* ---------- cards (comic treatment) ---------- */
.stat-card, .feature-card, .command-card, .game-card, .fun-card,
.showcase-mini-card, .quick-link-card, .highlight-item, .cmd-stat-item,
.status-metric, .game-stat, .testimonial-card, .accordion-item, .step-card,
.cmd-card, .stat-chart, .mission, .event-card, .timeline-item {
  background: var(--ghost) !important;
  border: 3px solid var(--ink) !important;
  border-radius: 12px !important;
  box-shadow: 5px 5px 0 var(--ink) !important;
  color: var(--ink);
}
.stat-card:hover, .feature-card:hover, .command-card:hover, .game-card:hover,
.quick-link-card:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 7px 7px 0 var(--ink) !important;
}
.card-icon, .feature-icon, .cmd-icon, .game-card-emoji, .fun-card-emoji,
.quick-link-icon, .showcase-mini-card i, .stat-icon {
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.35));
}
.stat-number, .cmd-stat-number, .metric-value, .game-stat-value, .econ-detail-value {
  color: var(--red) !important;
}
.stat-label, .cmd-stat-label, .metric-label, .game-stat-label, .econ-detail-label {
  font-family: var(--font-comic) !important;
  letter-spacing: 0.1em !important;
  color: var(--ink) !important;
}
.stat-bar, .progress-bar { background: rgba(128, 160, 255, 0.15) !important; border: 2px solid var(--ink); }
.stat-bar-fill, .progress-fill { background: linear-gradient(90deg, var(--red), var(--gold)) !important; }
.tag, .badge, .command-feature-tag, .game-mode-tag, .game-type, .risk-dot {
  border: 2px solid var(--ink) !important;
  box-shadow: 2px 2px 0 var(--ink);
  border-radius: 6px !important;
}
.filter-btn {
  font-family: var(--font-comic) !important;
  letter-spacing: 0.08em !important;
  border: 2px solid var(--ink) !important;
  border-radius: 8px !important;
  background: var(--ghost) !important;
  color: var(--ink) !important;
}
.filter-btn.active { background: var(--red) !important; color: var(--paper) !important; }

/* ---------- footer ---------- */
.footer {
  background: var(--paper-dark) !important;
  border-top: 4px solid var(--ink) !important;
  color: var(--ink) !important;
}
.footer a, .footer-links a { color: var(--ink) !important; }
.footer-tagline, .footer-col-title { font-family: var(--font-comic) !important; letter-spacing: 0.1em; }
.social-btn {
  border: 3px solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  border-radius: 10px !important;
}
.social-btn:hover { transform: translate(-2px, -2px); }

/* ---------- legal / misc ---------- */
.legal-section h2, .legal-section h3 { font-family: var(--font-display) !important; text-transform: uppercase; }
.legal-section p, .legal-section li { color: var(--ink); opacity: 0.9; }
hr, .divider { border-color: var(--ink) !important; }

/* ---------- custom cursor + splat (comic-pages.js) ---------- */
.cp-cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
}
.cp-cursor__ring {
  position: absolute;
  width: 36px; height: 36px;
  border: 2px solid var(--red);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease;
}
.cp-cursor.is-hover .cp-cursor__ring { width: 62px; height: 62px; }
@media (hover: none) { .cp-cursor { display: none; } }
.cp-splat {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  width: 90px; height: 90px;
  transform: translate(-50%, -50%);
  color: var(--ink);
}
.cp-splat svg { width: 100%; height: 100%; }

/* ---------- nav CTA badge "ADD BOT" feel ---------- */
.nav-actions .btn, .nav-cta {
  background: var(--red) !important;
  color: var(--paper) !important;
}