/* ═══════════════════════════════════════════════════════════════════════
   CREASE CRICKET · styles-brutal.css · Neo-Brutalism theme
   Loads LAST — wins every cascade fight by order (equal specificity).
   Paper background, ink borders, hard offset shadows, flat sticker color.
   The dark GPU atmosphere is parked (see data-theme guards in JS);
   texture comes from graph-paper dots + borders, not blur or glow.
   Accessibility is load-bearing here, not garnish: all text colors are
   picked for ≥4.5:1 contrast on paper (large display type ≥3:1).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── 0. Tokens — paper, ink, sticker accents ─── */
:root {
  --bg: #FFF6E5;
  --bg-2: #FFFDF7;
  --card: #FFFDF7;
  --card-2: #FFFDF7;
  --line: #16130E;
  --line-soft: rgba(22, 19, 14, 0.16);
  --text: #16130E;
  --muted: #5B5348;
  --faint: #5B5348;
  --gold: #FEBE10;
  --gold-soft: #FCE9B8;
  --maroon: #8D153A;
  --crimson: #D61F42;
  --live: #D61F42;
  --upcoming: #0369A1;
  --finished: #047857;
  --paper-shadow: 6px 6px 0 #16130E;
  --paper-shadow-sm: 3px 3px 0 #16130E;
  --paper-shadow-lg: 9px 9px 0 #16130E;
  color-scheme: light;
}

body {
  background-color: var(--bg);
  background-image: radial-gradient(rgba(22, 19, 14, 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--text);
}

::selection { background: var(--maroon); color: #FFF6E5; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #16130E; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--maroon); }
html { scrollbar-color: #16130E #FFF6E5; }

/* ─── 1. Park the dark atmosphere (JS guards stop the render loops) ─── */
.atmosphere, .atmosphere::after { display: none; }

/* ─── 2. Ticker — black marquee bar ─── */
.ticker { background: #16130E; border-bottom: 3px solid #16130E; backdrop-filter: none; }
.ticker-track { color: var(--gold); }
.ticker-track i { color: #FFF6E5; opacity: 0.85; }

/* ─── 3. Nav — paper, ink rule ─── */
.nav { background: var(--bg); backdrop-filter: none; border-bottom: 3px solid #16130E; }
.nav-links a { color: var(--text); }
.nav-links a:hover { background: var(--gold); color: #16130E; }
.brand-text small { color: var(--muted); }
.brand-mark svg { filter: none; }
.brand-pulse { border-color: var(--maroon); }
.brand-text strong em { color: var(--maroon); }
.clock-wrap { background: #fff; border: 2px solid #16130E; color: var(--text); }
.api-dot { color: var(--muted); }
.btn-ghost { background: #fff; border: 2px solid #16130E; color: #16130E; box-shadow: var(--paper-shadow-sm); }
.btn-ghost:hover { background: var(--gold); color: #16130E; transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #16130E; }
.btn-ghost:active { transform: translate(2px, 2px); box-shadow: 0 0 0 #16130E; }
.btn-ghost b { background: #16130E; color: #FFF6E5; }
.btn-ghost:hover b { background: #16130E; color: var(--gold); }

/* ─── 4. Hero type — marker highlight, ink outline ─── */
.eyebrow { background: #fff; border: 2px solid #16130E; color: #16130E; box-shadow: var(--paper-shadow-sm); }
.eyebrow-shine, .btn-shine { display: none; }
.live-dot { box-shadow: none; }
.display .line:nth-child(2) { transform: rotate(-1deg); }
.shiny {
  background: var(--gold);
  color: #16130E;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  padding: 0 0.14em;
  box-shadow: 6px 6px 0 #16130E;
  animation: rise 0.9s var(--ease-spring) both;
}
.outline .word { color: transparent; -webkit-text-stroke: 2px #16130E; }
.sub { color: var(--muted); }
.trust-row { color: var(--muted); }
.trust-row span::before { content: "■"; color: var(--maroon); font-size: 9px; }

/* ─── 5. Buttons — flat, bordered, punchy ─── */
.btn-gold {
  background: var(--gold); color: #16130E;
  border: 3px solid #16130E; box-shadow: 5px 5px 0 #16130E;
}
.btn-gold:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #16130E; }
.btn-gold:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #16130E; }
.btn-outline {
  background: #fff; color: #16130E;
  border: 3px solid #16130E; box-shadow: 5px 5px 0 #16130E;
  backdrop-filter: none;
}
.btn-outline:hover { background: var(--maroon); border-color: #16130E; color: #FFF6E5; transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #16130E; }
.btn-outline:active, .btn-gold:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #16130E; }
.cta-count { background: #16130E; color: var(--gold); }

/* ─── 6. Stats / search / tabs — sticker controls ─── */
.stat { background: #fff; border: 2px solid #16130E; box-shadow: 4px 4px 0 #16130E; backdrop-filter: none; }
.stat:hover { transform: translate(-2px, -2px); border-color: #16130E; box-shadow: 6px 6px 0 #16130E; }
.stat-live b { color: var(--crimson); text-shadow: none; }
.stat span { color: var(--muted); }
.stat .dot { box-shadow: none; }
.switch span { background: #fff; border: 2px solid #16130E; }
.switch span::after { background: #16130E; }
.switch input:checked + span { background: var(--gold); border-color: #16130E; }
.switch input:checked + span::after { background: #16130E; }

.search { background: #fff; border: 2px solid #16130E; box-shadow: 4px 4px 0 #16130E; }
.search:focus-within { border-color: #16130E; box-shadow: 4px 4px 0 var(--maroon); }
.search input { color: var(--text); }
.search kbd { background: var(--bg); border: 2px solid #16130E; color: var(--muted); box-shadow: 2px 2px 0 #16130E; }

.tabs { background: #fff; border: 2px solid #16130E; box-shadow: 4px 4px 0 #16130E; }
.tab { color: var(--muted); }
.tab:hover { color: #16130E; }
.tab.active { color: #16130E; }
.tab-glider { background: var(--gold); border: 2px solid #16130E; box-shadow: 2px 2px 0 #16130E; }
.tab.active .mini-live { background: var(--crimson); animation: none; }
.mini-live { background: var(--muted); }

.scroll-hint span { border-color: #16130E; }
.scroll-hint span::after { background: var(--maroon); }

/* ─── 7. Feed head + tip popover ─── */
.feed-head h2 sup { background: var(--gold); border: 2px solid #16130E; color: #16130E; box-shadow: 2px 2px 0 #16130E; }
.feed-head p { color: var(--muted); }
.feed-tip-btn { background: #fff; border: 2px solid #16130E; color: #16130E; box-shadow: 2px 2px 0 #16130E; }
.feed-tip-btn:hover { background: var(--gold); color: #16130E; border-color: #16130E; }
.tip-pop { display: none; background: #FFFDF7; border: 2px solid #16130E; color: var(--text); box-shadow: 4px 4px 0 #16130E; backdrop-filter: none; }
@supports selector([popover]:popover-open) {
  .tip-pop:popover-open { display: block; opacity: 1; transform: none; }
}

/* ─── 8. Cards — white stickers, hard shadows ─── */
.match-card {
  background: var(--card);
  border: 3px solid #16130E;
  border-radius: 14px;
  box-shadow: var(--paper-shadow);
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.12s ease-out, opacity 0.4s ease-out;
}
.match-card.visible { opacity: 1; transform: none; }
.match-card:hover { border-color: #16130E; transform: translate(-3px, -3px); box-shadow: var(--paper-shadow-lg); }
.match-card::before { display: none; }
.match-card.is-live { border-color: #16130E; }
.match-card.is-live::after { height: 4px; }
.match-card.deep-target { border-color: #16130E !important; box-shadow: var(--paper-shadow-lg), 0 0 0 4px var(--gold); animation: none; }

.card-top { z-index: 2; }
.series-badge {
  background: var(--gold); border: 2px solid #16130E; color: #16130E;
  box-shadow: 2px 2px 0 #16130E; font-weight: 700;
}
.format-badge { background: #fff; border: 2px solid #16130E; color: var(--text); font-weight: 700; }
.status-pill { border: 2px solid #16130E; box-shadow: 2px 2px 0 #16130E; }
.status-pill.live { background: var(--crimson); color: #fff; box-shadow: 2px 2px 0 #16130E; }
.status-pill.live i { background: #fff; box-shadow: none; animation: none; }
.status-pill.upcoming { background: var(--upcoming); color: #fff; }
.status-pill.finished { background: var(--finished); color: #fff; }

.card-status-line { color: var(--text); }
.card-status-line.is-live-text { color: var(--text); }
.bat-chip { filter: none; }

.kickoff { background: #E0F2FE; border: 2px solid #16130E; color: #075985; box-shadow: 3px 3px 0 #16130E; }

.team-row.dim { opacity: 0.6; }
.avatar { background: #fff; border: 2px solid #16130E; color: var(--text); box-shadow: 3px 3px 0 #16130E; text-shadow: none; }
.avatar.sl { background: var(--maroon); border-color: #16130E; color: var(--gold); box-shadow: 3px 3px 0 #16130E; }
.avatar img + em { background: #16130E; color: #FFF6E5; }
.team-name { color: var(--text); }
.team-name small { color: var(--muted); }
.team-score { color: var(--text); }
.team-score .overs { color: var(--muted); }

.vs-divider::before, .vs-divider::after { background: #16130E; opacity: 0.25; }
.vs-divider span { color: var(--text); background: var(--bg); border: 2px solid #16130E; border-radius: 8px; padding: 2px 10px 2px 12px; }

.card-foot { background: #F9F0DC; border: 2px solid #16130E; box-shadow: 3px 3px 0 #16130E; }
.result-text { color: var(--muted); }
.result-text strong { color: var(--maroon); }
.result-text.live-text { color: #B31236; }
.score-link {
  background: #fff; border: 2px solid #16130E; color: #16130E;
  box-shadow: 2px 2px 0 #16130E;
}
.score-link:hover { background: var(--gold); color: #16130E; box-shadow: 3px 3px 0 #16130E; }
.share-link { background: #fff; border: 2px solid #16130E; color: var(--text); box-shadow: 2px 2px 0 #16130E; }
.share-link:hover { background: var(--gold); color: #16130E; border-color: #16130E; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #16130E; }

.card-more { border-top: 2px dashed rgba(22, 19, 14, 0.3); }
.card-more summary { color: var(--text); }
.card-more summary::before { color: var(--maroon); }
.card-more summary:hover { color: var(--maroon); }
.card-more li span { color: var(--muted); }
.card-more li b { color: var(--text); }

.momentum { background: rgba(22, 19, 14, 0.12); border: 1px solid rgba(22, 19, 14, 0.2); }
.momentum i { background: linear-gradient(90deg, var(--maroon), var(--gold)) !important; }
.match-card[data-kind="upcoming"] .momentum i { background: linear-gradient(90deg, #0369A1, #38bdf8) !important; }
.match-card[data-kind="finished"] .momentum i { background: linear-gradient(90deg, #047857, #34d399) !important; }

.boundary-flash { border: 3px solid #16130E; box-shadow: 4px 4px 0 #16130E; }
.boundary-flash.six { box-shadow: 4px 4px 0 #16130E; }
.boundary-flash.four { color: #075985; box-shadow: 4px 4px 0 #16130E; }
.match-card.is-wicket { border-color: #16130E !important; }
.is-wicket .status-pill.live { animation: none; background: #16130E; color: #fff; }

/* ─── 9. Skeletons + empty state ─── */
.skeleton { background: #fff; border: 2px solid #16130E; box-shadow: 4px 4px 0 #16130E; }
.skel { background: linear-gradient(100deg, #EFE6D2 40%, #FBF4E2 50%, #EFE6D2 60%); background-size: 200% 100%; }
.empty { background: #fff; border: 3px dashed #16130E; box-shadow: var(--paper-shadow); }
.empty h3 { color: var(--text); }
.empty p { color: var(--muted); }
.noscript-note { background: #FDE7EA; border: 3px dashed var(--crimson); color: var(--text); box-shadow: var(--paper-shadow); }
.noscript-note strong { color: var(--maroon); }

/* ─── 10. FAB + toast — stickers, not glass ─── */
.fab {
  background: var(--maroon); color: #FFF6E5;
  border: 3px solid #16130E; box-shadow: 5px 5px 0 #16130E;
}
.fab:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #16130E; }
.fab:active { transform: translate(3px, 3px); box-shadow: 0 0 0 #16130E; }
.fab-ring { border-color: var(--maroon); }
#toast { background: #FFFDF7; border: 3px solid #16130E; color: var(--text); box-shadow: 5px 5px 0 #16130E; backdrop-filter: none; }
#toast::before { color: var(--crimson); }

/* ─── 11. Footer ─── */
.footer { background: #16130E; border-top: 3px solid #16130E; backdrop-filter: none; }
.foot-brand strong { color: #FFF6E5; }
.foot-brand strong::after { color: var(--gold); }
.foot-brand p { color: #C9C2B2; }
.foot-address { color: #C9C2B2; }
.foot-address a, .foot-links a { color: var(--gold); }
.foot-nav a { color: #EDE6D4; }
.foot-nav a:hover { color: #16130E; background: var(--gold); }
.foot-links span { color: #C9C2B2; }
#analyticsStatus { border-color: rgba(255, 246, 229, 0.35); }

/* ─── 12. Alerts + forms — chunky inputs ─── */
.alerts-card { background: #FFFDF7; border: 3px solid #16130E; box-shadow: 8px 8px 0 #16130E; }
.alerts-card::before { display: none; }
.eyebrow-mini { color: var(--maroon); }
.alerts-copy p { color: var(--muted); }
.alerts-copy h2, .contact-strip h2 { color: var(--text); }
.alerts-points li { color: var(--text); }
.alerts-points li::before { color: var(--maroon); }
.form-hint { color: var(--muted); }
.form-hint a { color: var(--maroon); font-weight: 700; }
.field label { color: var(--text); }
.field .optional { color: var(--muted); }
.field .req { color: var(--crimson); }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  background: #fff; border: 2px solid #16130E; color: var(--text);
  box-shadow: 3px 3px 0 rgba(22, 19, 14, 0.9);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: #16130E; box-shadow: 3px 3px 0 var(--maroon);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"], .field textarea[aria-invalid="true"] {
  border-color: var(--crimson); box-shadow: 3px 3px 0 var(--crimson);
}
.field-error { color: #B31236; font-weight: 700; }
.field.check { background: #fff; border: 2px solid #16130E; box-shadow: 3px 3px 0 #16130E; }
.field.check label { color: var(--muted); }
.field.check label a { color: var(--maroon); font-weight: 700; }
.field.check input { border: 2px solid #16130E; accent-color: var(--maroon); }
.form-status { background: #FDE7EA; border: 2px solid var(--crimson); color: #B31236; }
.form-status[data-ok="1"] { background: #DFF7EA; border-color: var(--finished); color: #046C4E; }

/* ─── 13. Contact strip / cookie / mobile CTA ─── */
.contact-strip-inner { background: #fff; border: 3px dashed #16130E; box-shadow: var(--paper-shadow); }
.contact-strip p { color: var(--muted); }
.contact-address { color: var(--muted); }
.contact-address strong { color: var(--text); }
.contact-address a { color: var(--maroon); }

.cookie-inner { background: #FFFDF7; border: 3px solid #16130E; box-shadow: 8px 8px 0 #16130E; backdrop-filter: none; }
.cookie-inner strong { color: var(--text); }
.cookie-inner p { color: var(--muted); }
.cookie-inner p a { color: var(--maroon); font-weight: 700; }

.mobile-cta { background: var(--bg); border-top: 3px solid #16130E; backdrop-filter: none; }
.mcta { background: #fff; border: 2px solid #16130E; color: var(--text); box-shadow: 3px 3px 0 #16130E; }
.mcta-live { background: #FDE7EA; border-color: #16130E; color: #B31236; }
.mcta-dot { background: var(--crimson); box-shadow: none; animation: none; }
.mcta-gold { background: var(--gold); border-color: #16130E; color: #16130E; }

/* ─── 14. Prose pages / 404 / contact / thanks ─── */
.prose-card { background: #FFFDF7; border: 3px solid #16130E; box-shadow: 8px 8px 0 #16130E; }
.prose-card h1 { color: var(--text); }
.prose-card h2 { color: var(--maroon); }
.prose-card p, .prose-card li { color: var(--muted); }
.prose-card a { color: var(--maroon); font-weight: 700; }
.prose-meta { color: var(--muted); }
.notfound-code {
  background: none;
  color: var(--maroon);
  animation: none;
}
.contact-card { background: #fff; border: 2px solid #16130E; box-shadow: 4px 4px 0 #16130E; }
.contact-card h2 { color: var(--text); }
.contact-card address { color: var(--muted); }
.contact-card address a { color: var(--maroon); }
.thank-check { background: #DFF7EA; border: 3px solid #16130E; box-shadow: 4px 4px 0 #16130E; }

/* ─── 15. Feed banner — flat alert strips ─── */
.feed-banner { background: #FDE7EA; border: 2px solid var(--crimson); color: #B31236; box-shadow: 3px 3px 0 #16130E; }
.feed-banner[data-err=""] { background: #DFF7EA; border-color: var(--finished); color: #046C4E; }

/* ─── 16. Focus — ink ring + gold halo reads on paper ─── */
.tab:focus-visible, .btn-ghost:focus-visible, .btn-gold:focus-visible, .fab:focus-visible,
.share-link:focus-visible, .nav-links a:focus-visible, .foot-nav a:focus-visible,
.score-link:focus-visible, .mcta:focus-visible, .btn-outline:focus-visible,
.card-more summary:focus-visible, .brand:focus-visible, .prose-card a:focus-visible,
.contact-address a:focus-visible, .field.check input[type="checkbox"]:focus-visible,
.feed-tip-btn:focus-visible {
  outline: 3px solid #16130E;
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--gold);
  border-radius: 6px;
}

/* ─── 17. 2026-layer adjustments for paper ─── */
.feed-head { background: color-mix(in srgb, #FFF6E5 90%, transparent); }
.bento:has(.match-card.deep-target) .match-card:not(.deep-target) { opacity: 0.55; filter: saturate(0.7); }
.alerts:has(.field input[aria-invalid="true"]) .alerts-card {
  box-shadow: 8px 8px 0 #16130E, 0 0 0 3px var(--crimson);
}
.status-pill.live i, .live-dot { animation: none; }
.field.check input[type="checkbox"]:checked { background: var(--gold); border-color: #16130E; }
.field.check input[type="checkbox"]::before { border-color: #16130E; }
@scope (.alert-form) to (.form-submit) {
  input:user-invalid, select:user-invalid, textarea:user-invalid {
    border-color: var(--crimson);
    box-shadow: 3px 3px 0 var(--crimson);
  }
  input:user-valid, select:user-valid, textarea:user-valid { border-color: var(--finished); }
}

/* ─── 18. Motion stays snappy, print stays clean ─── */
@media (prefers-reduced-motion: reduce) {
  .match-card, .btn-gold, .btn-outline, .btn-ghost, .fab, .mcta, .stat { transition-duration: 0.01ms !important; }
}
@media print {
  body { background: #fff; }
  .match-card, .alerts-card, .prose-card, .stat, .search, .tabs { box-shadow: none; }
}

/* ─── 19. Scoped card override — load-bearing ───
   styles-2026.css §1 styles cards inside `@scope (.match-card)`. A scoped
   rule beats an equally-specific UNSCOPED rule by scope proximity no
   matter the source order — which is why cards kept their team-tinted
   gradient backgrounds. Matching the scope puts both rules at the same
   proximity, so source order (this file loads last) wins again. The
   unscoped .match-card rules above stay as fallback for pre-@scope
   browsers. */
@scope (.match-card) to (.match-card .card-foot) {
  :scope {
    background: var(--card);
    border: 3px solid #16130E;
    border-radius: 14px;
    box-shadow: var(--paper-shadow);
  }
  :scope:hover {
    border-color: #16130E;
    transform: translate(-3px, -3px);
    box-shadow: var(--paper-shadow-lg);
  }
  :scope.is-live { box-shadow: var(--paper-shadow); }
  :scope:focus-within {
    outline: 3px solid #16130E;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--gold);
  }
}

/* ─── 20. Broadcast — stadium scoreboard sticker ───
   The panel was authored for the dark theme (glass + blur). Brutalist
   take: paper housing, ink frame, and a real black LED inset window for
   the scores — amber digits on near-black, like the ground's own board. */
.ball-orb::before {
  content: ""; position: absolute; inset: 5%; z-index: -1;
  background: var(--gold);
  border: 3px solid #16130E; border-radius: 50%;
  box-shadow: 6px 6px 0 #16130E;
}
.ball-glow { display: none; }
.crease-ball { filter: none; }
.broadcast {
  background: #FFFDF7;
  border: 3px solid #16130E;
  border-radius: 14px;
  box-shadow: 8px 8px 0 #16130E;
  backdrop-filter: none;
}
.broadcast::before { opacity: 0.16; }
.broadcast-live {
  background: #fff; border: 2px solid #16130E; color: var(--muted);
  box-shadow: 2px 2px 0 #16130E;
}
.broadcast-live i { background: var(--muted); box-shadow: none; }
.broadcast.is-live .broadcast-live { background: var(--crimson); border-color: #16130E; color: #fff; }
.broadcast.is-live .broadcast-live i { background: #fff; box-shadow: none; animation: none; }
.broadcast-series { color: var(--muted); }
.broadcast-row b { color: var(--text); }
.led {
  background: #16130E; color: var(--gold);
  padding: 4px 12px; border-radius: 8px; border: 2px solid #16130E;
  text-shadow: 0 0 8px rgba(254, 190, 16, 0.6);
}
.broadcast-status { color: var(--text); }
.broadcast-meta { color: var(--muted); }

/* ─── 21. Feed head — solid sticker bar, never a blur band ───
   The 2026 layer makes .feed-head sticky glass (blur + translucent dark).
   On paper that reads as a dirty smear while scrolling, so brutalism
   gets an opaque bar with an ink rule instead. */
.feed-head {
  background: var(--bg);
  backdrop-filter: none;
  border-bottom: 3px solid #16130E;
  padding-bottom: 12px;
}