/* ========================================================
   TRASHY OVERLAY — load AFTER styles.css to override
   ======================================================== */

/* ---- PAPER TEXTURE + NOISE for whole page ---- */
:root {
  --paper: #ece1c3;
  --paper-2: #d9c896;
  --ink: #1a1305;
  --ink-2: #2b1f06;
  --red: #d8281f;
  --blue: #1a36c4;
  --purple: #5a16b3;
  --green: #167a2a;
  --orange: #e2700a;
  --gold: #c98f1b;
  --gold-light: #f6d469;
  --font-marker: "Permanent Marker", "Comic Sans MS", cursive;
  --font-scrawl: "Caveat", "Marker Felt", cursive;
  --font-stencil: "Bungee", "Impact", sans-serif;
}

body {
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(218,170,40,0.18), transparent 60%),
    radial-gradient(900px 700px at 90% 30%, rgba(213,40,31,0.10), transparent 60%),
    radial-gradient(1000px 800px at 70% 90%, rgba(26,54,196,0.10), transparent 60%),
    var(--paper);
  color: var(--ink);
  position: relative;
}
body::before {
  /* paper grain noise */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.15  0 0 0 0 0.05  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
body::after {
  /* gold flecks */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(246,212,105,0.9) 0 1.5px, transparent 2px),
    radial-gradient(circle at 78% 18%, rgba(246,212,105,0.7) 0 1.2px, transparent 2px),
    radial-gradient(circle at 32% 78%, rgba(246,212,105,0.7) 0 1.4px, transparent 2px),
    radial-gradient(circle at 88% 62%, rgba(246,212,105,0.8) 0 1.6px, transparent 2px),
    radial-gradient(circle at 56% 88%, rgba(246,212,105,0.7) 0 1.1px, transparent 2px),
    radial-gradient(circle at 6% 92%, rgba(246,212,105,0.7) 0 1.3px, transparent 2px),
    radial-gradient(circle at 96% 4%, rgba(246,212,105,0.7) 0 1.3px, transparent 2px),
    radial-gradient(circle at 44% 32%, rgba(246,212,105,0.7) 0 1.1px, transparent 2px),
    radial-gradient(circle at 22% 56%, rgba(246,212,105,0.6) 0 1.0px, transparent 2px),
    radial-gradient(circle at 68% 48%, rgba(246,212,105,0.6) 0 1.0px, transparent 2px);
}

/* ---- NOTIFY ---- */
.notify {
  background: var(--red);
  color: #fff5d6;
  font-family: var(--font-stencil);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  border-bottom: 3px solid #1a1305;
}
.notify .pulse { background: #fff5d6; }
.notify strong { color: #fff5d6; }

/* ---- TICKER ---- */
.ob-ticker-bar {
  background: #1a1305 !important;
  border-bottom: 3px solid var(--gold-light) !important;
}
.ob-ticker-badge {
  background: var(--red) !important;
  color: #fff !important;
  font-family: var(--font-stencil) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
}
.ob-ticker-text {
  color: #f6d469 !important;
  font-family: var(--font-stencil) !important;
  font-size: 12px !important;
  letter-spacing: 0.1em !important;
}
.ob-ticker-text strong { color: #fff !important; }
.ob-ticker-scroll::before { background: linear-gradient(to right, #1a1305, transparent) !important; }
.ob-ticker-scroll::after { background: linear-gradient(to left, #1a1305, transparent) !important; }

/* ---- NAV ---- */
header.nav {
  background: rgba(236,225,195,0.85) !important;
  border-bottom: 3px dashed #1a1305;
}
.logo .mark {
  font-family: var(--font-marker) !important;
  font-size: 26px !important;
  color: var(--ink) !important;
  text-shadow: 2px 2px 0 var(--gold-light);
  transform: rotate(-2deg);
  display: inline-block;
}
.logo .mark .rx {
  color: var(--red) !important;
  font-style: normal !important;
  font-family: var(--font-marker) !important;
}
nav.primary a {
  font-family: var(--font-marker) !important;
  font-size: 16px !important;
  color: var(--ink) !important;
  text-decoration: underline wavy var(--red);
  text-underline-offset: 4px;
  text-decoration-thickness: 1.5px;
  transition: transform 0.1s;
}
nav.primary a:hover {
  color: var(--red) !important;
  transform: rotate(-2deg) scale(1.05);
}

/* ---- HEADINGS ---- */
h1, h2, h3, h4, h5 { color: var(--ink); }
h1.hero-title {
  font-family: var(--font-stencil) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  text-shadow:
    3px 3px 0 var(--gold-light),
    6px 6px 0 rgba(213,40,31,0.4);
  line-height: 0.95 !important;
}
h1.hero-title em {
  font-family: var(--font-marker) !important;
  font-style: normal !important;
  color: var(--red) !important;
  display: inline-block;
  transform: rotate(-3deg);
  text-shadow: 2px 2px 0 #1a1305;
}
h2.big {
  font-family: var(--font-stencil) !important;
  text-transform: uppercase;
  font-weight: 400 !important;
  text-shadow: 2px 2px 0 var(--gold-light);
}
h2.big em {
  font-family: var(--font-marker) !important;
  color: var(--red) !important;
  font-style: normal !important;
  display: inline-block;
  transform: rotate(-2deg);
}
.section-head h2 {
  font-family: var(--font-stencil) !important;
  text-transform: uppercase;
  font-weight: 400 !important;
}
.section-head h2 em {
  font-family: var(--font-marker) !important;
  color: var(--red) !important;
  font-style: normal !important;
  display: inline-block;
  transform: rotate(-2deg);
}

/* ---- EYEBROWS ---- */
.eyebrow {
  font-family: var(--font-marker) !important;
  font-size: 16px !important;
  color: var(--red) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase;
  transform: rotate(-1deg);
}
.eyebrow::before { background: var(--ink) !important; height: 2px !important; }

/* ---- HERO ---- */
.hero {
  background:
    linear-gradient(180deg, rgba(28,18,5,0.15) 0%, rgba(28,18,5,0.05) 60%, var(--paper) 100%),
    url("assets/banner2.png") center center / cover no-repeat,
    var(--paper);
  padding: 56px 0 100px !important;
  position: relative;
  border-bottom: 4px solid var(--ink);
}
.hero::before {
  /* dark vignette on left side for text contrast */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(28,18,5,0.85) 0%, rgba(28,18,5,0.65) 38%, rgba(28,18,5,0.25) 65%, rgba(28,18,5,0.05) 100%);
  pointer-events: none;
  z-index: 1;
}
.hero .wrap { position: relative; z-index: 2; }
.hero .splat { display: none !important; }

.hero-grid { grid-template-columns: 1.15fr 0.85fr !important; }
.hero h1.hero-title {
  color: #fff5d6 !important;
  text-shadow:
    3px 3px 0 #1a1305,
    6px 6px 0 var(--red),
    9px 9px 24px rgba(0,0,0,0.6) !important;
}
.hero h1.hero-title em {
  color: #f6d469 !important;
  text-shadow: 2px 2px 0 #1a1305, 4px 4px 12px rgba(0,0,0,0.7) !important;
}
.hero .eyebrow { color: #f6d469 !important; }
.hero .eyebrow::before { background: #f6d469 !important; }
.hero-lede {
  color: #fff5d6 !important;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.6), 0 0 8px rgba(0,0,0,0.5);
  font-weight: 500 !important;
}
.hero-countdown {
  background: #1a1305 !important;
  border: 3px solid var(--gold-light) !important;
  box-shadow: 6px 6px 0 var(--red), 12px 12px 0 rgba(0,0,0,0.4);
  transform: rotate(-1.5deg);
}
.hero-countdown-lbl { color: var(--gold-light) !important; }
.hero-countdown .cnum { color: var(--gold-light) !important; font-style: normal !important; }
.hero-countdown .clbl { color: rgba(255,245,214,0.6) !important; }
.hero-countdown .csep { color: var(--red) !important; opacity: 1 !important;}

/* The hero-art platter — hide platter and seal-stamp; banner already provides composition. Keep mascot+balls overlaid */
.hero-art .platter { display: none; }
.hero-art .seal-stamp {
  bottom: auto !important;
  top: -10px !important;
  right: -20px !important;
  width: 160px !important;
  height: 160px !important;
  z-index: 5 !important;
  transform: rotate(15deg) !important;
}
.hero-art .seal-stamp circle,
.hero-art .seal-stamp text {
  stroke: #fff5d6 !important;
  fill: #fff5d6 !important;
}
.hero-art .seal-stamp circle { fill: none !important; }
.mascot-wrap { z-index: 3; }
.mascot-wrap img {
  filter: drop-shadow(0 8px 0 rgba(0,0,0,0.5)) drop-shadow(0 20px 30px rgba(0,0,0,0.6));
}

/* ---- HERO STATS ---- */
.hero-stats {
  background: #1a1305 !important;
  border: 3px solid var(--gold-light) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 var(--red);
  transform: rotate(-0.5deg);
}
.hero-stats .stat { border-right: 1px dashed var(--gold-light) !important; }
.hero-stats .stat .num,
.hero-stats .stat .num em {
  color: var(--gold-light) !important;
  font-family: var(--font-stencil) !important;
  font-style: normal !important;
}
.hero-stats .stat .lbl {
  color: rgba(255,245,214,0.65) !important;
  font-family: var(--font-marker) !important;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* ---- BUTTONS ---- */
.btn {
  font-family: var(--font-marker) !important;
  font-size: 18px !important;
  border: 3px solid var(--ink) !important;
  border-radius: 999px !important;
  box-shadow: 4px 4px 0 var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transform: rotate(-1deg);
}
.btn:hover { transform: rotate(0deg) translateY(-2px) !important; box-shadow: 6px 6px 0 var(--ink) !important; }
.btn.primary { background: var(--red) !important; color: #fff5d6 !important; }
.btn.primary:hover { background: var(--gold-light) !important; color: var(--ink) !important; }
.btn.ghost {
  background: #fff5d6 !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}

/* ---- STATEMENT ---- */
section.statement {
  background: var(--paper);
  position: relative;
}
section.statement::before {
  content: "ALL SUMMER";
  position: absolute;
  top: 28px; right: 5%;
  font-family: var(--font-stencil);
  font-size: 100px;
  color: var(--red);
  opacity: 0.18;
  transform: rotate(8deg);
  letter-spacing: 0.05em;
  pointer-events: none;
}
.statement-inner .lede {
  font-family: var(--font-scrawl) !important;
  font-size: 26px !important;
  line-height: 1.35 !important;
  color: var(--ink-2) !important;
}
.statement-inner .lede strong {
  background: var(--gold-light);
  padding: 0 6px;
  transform: rotate(-1deg);
  display: inline-block;
}

/* ---- BAR CHART CARD ---- */
.compare-card {
  background: var(--paper-2) !important;
  border: 4px solid var(--ink) !important;
  box-shadow: 10px 10px 0 var(--red);
  transform: rotate(-0.6deg);
  position: relative;
}
.compare-card::after {
  content: "RECEIPTS";
  position: absolute;
  top: -22px; left: 32px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-stencil);
  font-size: 14px;
  padding: 6px 14px;
  letter-spacing: 0.1em;
  transform: rotate(-3deg);
  box-shadow: 3px 3px 0 var(--ink);
}
.compare-card h3 { font-family: var(--font-marker) !important; }
.bar-row .name { font-family: var(--font-marker) !important; font-size: 17px !important; }
.bar-row .val { font-family: var(--font-stencil) !important; }
.bar-row .val em {
  font-family: var(--font-marker) !important;
  font-style: normal !important;
  color: var(--red) !important;
}
.bar-track {
  background: rgba(0,0,0,0.12) !important;
  border: 2px solid var(--ink);
  border-radius: 0 !important;
}
.bar-fill { border-radius: 0 !important; }

/* ---- PROTOCOL CARDS ---- */
section.protocol::before {
  content: "DO THIS NOW";
  display: block;
  font-family: var(--font-marker);
  font-size: 28px;
  color: var(--red);
  text-align: center;
  transform: rotate(-2deg);
  margin-bottom: -20px;
}
.proto-card {
  background: #fff5d6 !important;
  border: 3px solid var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
}
.proto-card:nth-child(1) { transform: rotate(-1.5deg); }
.proto-card:nth-child(2) { transform: rotate(1deg); }
.proto-card:nth-child(3) { transform: rotate(-0.5deg); }
.proto-card:nth-child(4) { transform: rotate(2deg); }
.proto-card:hover { transform: rotate(0deg) translateY(-4px) !important; box-shadow: 10px 10px 0 var(--ink) !important; }
.proto-card h4 { font-family: var(--font-marker) !important; font-size: 24px !important; }
.proto-card p { font-family: var(--font-sans) !important; color: var(--ink-2) !important; }
.proto-card .step-no { font-family: var(--font-marker) !important; color: var(--red) !important; }
.proto-card .icon-disc {
  border: 3px solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  font-family: var(--font-stencil) !important;
  font-style: normal !important;
}

/* ---- SUPPLIES ---- */
section.supplies { background: var(--paper) !important; border-top: 4px dashed var(--ink) !important; border-bottom: 4px dashed var(--ink) !important; }
.supply {
  background: #fff5d6 !important;
  border: 3px solid var(--ink) !important;
  border-radius: 6px !important;
  box-shadow: 6px 6px 0 var(--ink) !important;
  position: relative;
}
.supply:nth-child(1) { transform: rotate(-1deg); }
.supply:nth-child(2) { transform: rotate(0.8deg); }
.supply:nth-child(3) { transform: rotate(-1.4deg); }
.supply:nth-child(4) { transform: rotate(0.6deg); }
.supply:nth-child(5) { transform: rotate(-0.8deg); }
.supply:nth-child(6) { transform: rotate(1.2deg); }
.supply:hover { transform: rotate(0deg) translateY(-4px) !important; box-shadow: 10px 10px 0 var(--ink) !important; }
.supply h4 { font-family: var(--font-marker) !important; font-size: 24px !important; }
.supply .ration { font-family: var(--font-marker) !important; font-size: 14px !important;}
.supply .qty strong { font-family: var(--font-stencil) !important; }

/* ---- DASHBOARD ---- */
.ob-dash {
  background:
    radial-gradient(800px 600px at 90% 10%, rgba(213,40,31,0.10), transparent 60%),
    radial-gradient(800px 600px at 10% 90%, rgba(26,54,196,0.10), transparent 60%),
    var(--paper-2) !important;
  border-top: 4px dashed var(--ink) !important;
  border-bottom: 4px dashed var(--ink) !important;
}
.ob-dash-head h2 {
  font-family: var(--font-stencil) !important;
  text-transform: uppercase;
  font-weight: 400 !important;
}
.ob-dash-head h2 em {
  font-family: var(--font-marker) !important;
  color: var(--red) !important;
  font-style: normal !important;
  display: inline-block;
  transform: rotate(-2deg);
}
.ob-stat-grid {
  border: 3px solid var(--ink) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 var(--red);
  background: var(--ink) !important;
}
.ob-stat-cell {
  background: #fff5d6 !important;
  border-right: 2px solid var(--ink) !important;
}
.ob-stat-val { font-family: var(--font-stencil) !important; font-style: normal !important; }
.ob-stat-val em { font-family: var(--font-marker) !important; color: var(--red) !important; font-style: normal !important;}
.ob-stat-lbl { font-family: var(--font-marker) !important; font-size: 15px !important;}
.ob-signals-head { font-family: var(--font-marker) !important; font-size: 16px !important; color: var(--red) !important;}

/* fixture rows */
.ob-sig-row { padding: 22px 12px !important; border-bottom: 2px dashed var(--ink) !important; transition: background 0.1s; }
.ob-sig-row:hover { background: rgba(255,245,214,0.5); }
.ob-tier-badge {
  font-family: var(--font-stencil) !important;
  border-radius: 0 !important;
  border: 2px solid var(--ink) !important;
}
.ob-tier-opener { background: var(--red) !important; color: #fff !important; }
.ob-tier-group { background: var(--blue) !important; color: #fff !important; border-color: var(--ink) !important;}
.ob-tier-knockout { background: var(--purple) !important; color: #fff !important; border-color: var(--ink) !important;}
.ob-tier-final-match,
.ob-tier-final { background: var(--gold-light) !important; color: var(--ink) !important; border-color: var(--ink) !important;}
.team-chip { font-family: var(--font-marker) !important; font-size: 16px !important; color: var(--ink) !important;}
.countdown .cnum { color: var(--ink) !important; font-style: normal !important; }
.countdown .clbl { font-family: var(--font-marker) !important;}
.countdown.big .cnum { color: var(--gold-light) !important; }
.fixtures-cd { font-family: var(--font-stencil) !important; }

/* ---- FAQ ---- */
.faq-q {
  font-family: var(--font-marker) !important;
  font-size: 24px !important;
  color: var(--ink) !important;
}
.faq-q:hover { color: var(--red) !important; }
.faq-q .plus { border: 2px solid var(--ink) !important; background: var(--gold-light) !important; color: var(--ink) !important;}
.faq-item.open .plus { background: var(--red) !important; color: #fff !important; border-color: var(--ink) !important;}
.faq-a-inner {
  font-family: var(--font-scrawl) !important;
  font-size: 22px !important;
  color: var(--ink-2) !important;
  line-height: 1.35 !important;
}

/* ---- CTA BANNER ---- */
.cta-card {
  background: var(--ink) !important;
  border: 4px solid var(--gold-light) !important;
  box-shadow: 10px 10px 0 var(--red);
  border-radius: 0 !important;
  transform: rotate(-0.8deg);
}
.cta-card::before { display:none; }
.cta-card::after { display:none; }
.cta-card h2 { font-family: var(--font-stencil) !important; color: var(--gold-light) !important; text-transform: uppercase;}
.cta-card h2 em { font-family: var(--font-marker) !important; color: var(--red) !important; font-style: normal !important;}
.cta-card p { font-family: var(--font-scrawl) !important; font-size: 22px !important; color: rgba(255,245,214,0.92) !important;}
.stamp-mini {
  font-family: var(--font-stencil) !important;
  background: var(--red);
  color: #fff5d6 !important;
  border-color: var(--gold-light) !important;
  border-width: 3px !important;
  transform: rotate(8deg) !important;
  font-size: 14px !important;
  padding: 14px 20px !important;
  box-shadow: 4px 4px 0 var(--gold-light);
}

/* ---- FOOTER TICKER ---- */
.footer-ticker {
  background: #1a1305 !important;
  border-top: 3px solid var(--gold-light) !important;
  border-bottom: 3px solid var(--gold-light) !important;
}
.ft-live-label { color: var(--gold-light) !important; font-family: var(--font-stencil) !important;}
.ft-stat { color: var(--gold-light) !important; font-family: var(--font-marker) !important; font-size: 14px !important;}
.ft-stat strong { color: #fff !important; }
.ft-divider { background: var(--gold-light) !important; opacity: 0.3; }

/* ---- FOOTER ---- */
footer.site {
  background: var(--paper-2) !important;
  border-top: 4px dashed var(--ink) !important;
}
footer h5 { font-family: var(--font-marker) !important; font-size: 16px !important; color: var(--red) !important;}
footer li a { font-family: var(--font-marker) !important; color: var(--ink) !important;}
footer li a:hover { color: var(--red) !important; }
footer .brand-block p { font-family: var(--font-scrawl) !important; font-size: 18px !important; }
.disclaimer { font-family: var(--font-scrawl) !important; font-size: 16px !important; color: var(--ink-2) !important;}

/* ---- LOGO CREST ---- */
.logo .crest {
  background: radial-gradient(circle at 30% 25%, #fff5d6 0%, #f3dc92 35%, #a37a1f 100%) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  transform: rotate(-6deg);
}

/* ---- SCRIBBLE / SPARKLE accents ---- */
.scribble {
  position: absolute; pointer-events: none; z-index: 4;
}

/* random extra dabs floating across page */
.paint-dabs {
  position: absolute; left: 0; right: 0;
  pointer-events: none; z-index: 0;
}

/* keep cards in dark mode legible — no dark theme on this build */
[data-theme="dark"] { color-scheme: light; }