/* ============================================================================
   Dark + Gold premium skin — HOMEPAGE ONLY
   Loaded after legacy-active.css on / only. Overrides the light teal theme
   with deep-black + premium gold. Reversible: remove the <link> to revert.
   Spec: docs/superpowers/specs/2026-11-04-dark-gold-design-system.md
   ========================================================================== */

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

/* ---- Tokens: re-point the existing variables to dark + gold --------------- */
:root{
  --ink:#F2F3F5; --muted:#AAB0B8;
  --canvas:#0A0B0D; --surface:#121418;
  --nav:#0C0D10; --nav-raised:#171A1F;
  --line:#262B32;
  --teal:#C8A24C; --teal-deep:#E4C675; --teal-soft:rgba(200,162,76,.12);
  --cta:#C8A24C; --cta-hover:#E4C675;
  --focus:#E4C675;
  --shadow:0 10px 30px rgba(0,0,0,.5);
  /* new gold scale */
  --bg:#0A0B0D; --surface-2:#171A1F; --surface-3:#1E2228; --footer:#08090B;
  --text:#F2F3F5; --text-muted:#AAB0B8; --text-dim:#717880; --on-gold:#0A0B0D;
  --gold:#C8A24C; --gold-bright:#E4C675; --gold-deep:#8C6F2E;
  --gold-ghost:rgba(200,162,76,.12);
  --gold-grad:linear-gradient(135deg,#E4C675 0%,#C8A24C 48%,#A9842F 100%);
  --glow-gold:0 0 0 1px rgba(200,162,76,.5),0 10px 34px rgba(200,162,76,.14);
  --num:"tnum" 1,"lnum" 1;
}

/* ---- Typography ---------------------------------------------------------- */
body{ background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif; }
h1.sportsbooks,.section-heading h2,.money-section h2,.legacy-section-title,
.legacy-panel .gray-top-heading{ font-family:'Sora','Inter',system-ui,sans-serif; }
.rank-number,.hero-stats strong,.count-pill,.list-status,.rating-score,
.legacy-market-list small,.legacy-market-code{ font-feature-settings:var(--num); }

/* ---- Header / nav -------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:50;
  background:rgba(12,13,16,.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft,rgba(255,255,255,.06));
  box-shadow:0 8px 30px rgba(0,0,0,.45); }
.header_line{ background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.site-brand-copy strong span{ color:var(--gold); }
.top_menu{ background:var(--surface-2); border-bottom:1px solid var(--line); }
.top_menu a,.reviews-menu summary{ color:var(--text-muted); }
.top_menu a:hover,.top_menu a[aria-current="page"],
.reviews-menu summary:hover,.reviews-menu details[open] summary,
.reviews-menu summary.is-current{
  color:var(--text); background:var(--surface-3);
  box-shadow:inset 0 -2px 0 var(--gold); }
.reviews-menu__panel{ color:var(--text); background:var(--surface-2); border-color:var(--line); }
.reviews-menu__heading{ border-bottom-color:var(--line); }
.top_menu .reviews-menu__heading a{ color:var(--gold); }
.top_menu .reviews-menu__column a{ color:var(--text-muted); }
.top_menu .reviews-menu__column a:hover{ color:var(--gold); background:var(--gold-ghost); }

/* ---- Hero --------------------------------------------------------------- */
.page-hero{ border:1px solid var(--line); box-shadow:var(--e2,var(--shadow));
  display:flex; flex-direction:column; justify-content:center;
  min-height:300px; padding:clamp(34px,5vw,60px) clamp(22px,4vw,40px);
  background:
    linear-gradient(90deg, rgba(10,11,13,.93) 0%, rgba(10,11,13,.76) 34%, rgba(10,11,13,.32) 64%, rgba(10,11,13,.14) 100%),
    url('/assets/hero-stadium.jpg') right center / cover no-repeat, #0A0B0D; }
/* Operator review heroes get the abstract-gold artifact; legal/library heroes stay image-free */
.review-hero{ background:
    linear-gradient(90deg, rgba(10,11,13,.93) 0%, rgba(10,11,13,.74) 36%, rgba(10,11,13,.30) 68%, rgba(10,11,13,.12) 100%),
    url('/assets/hero-abstract.jpg') right center / cover no-repeat, #0A0B0D; }
.page-hero--support{ min-height:auto; background:
    radial-gradient(70% 120% at 88% -10%, rgba(200,162,76,.10), transparent 60%),
    linear-gradient(160deg,#15181D 0%,#0E1013 60%,#0A0B0D 100%); }
.hero-kicker,.section-eyebrow,.sidebar-eyebrow{ color:var(--gold); }
.legacy-content h1.sportsbooks{ color:var(--text); text-shadow:0 2px 24px rgba(0,0,0,.55); }
.legacy-intro{ color:#D4D8DD; text-shadow:0 1px 12px rgba(0,0,0,.5); }
.hero-stats strong{ color:var(--gold); }
.hero-breadcrumb,.legacy-breadcrumb{ color:var(--text-dim); }

/* ---- Country / market cards --------------------------------------------- */
/* Country cards — polished "choose a market" plaques with minted flag coins */
.market-card{ gap:12px; min-height:84px; padding:14px 16px; border-radius:14px;
  color:var(--text); border:1px solid var(--line);
  background:linear-gradient(180deg,#15181D 0%,#101216 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03); }
.market-card:hover,.market-card[aria-current="page"]{ transform:translateY(-3px);
  border-color:var(--gold); box-shadow:var(--glow-gold); }
.market-card img{ width:40px; height:40px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(200,162,76,.45), 0 3px 8px rgba(0,0,0,.55); }
.market-card strong{ font-size:13px; font-weight:700; color:var(--text); letter-spacing:-.01em; }
.market-card small{ margin-top:4px; color:var(--text-muted); font-size:11px; font-weight:600; }
.market-card__arrow{ color:var(--gold); font-size:14px; transition:transform .18s ease; }
.market-card:hover .market-card__arrow{ transform:translate(2px,-2px); }
.count-pill{ color:var(--gold); background:var(--gold-ghost); border-color:var(--gold-deep); }
.section-link{ color:var(--gold); }

/* ---- Ranking table (the toplist) ---------------------------------------- */
.list-section{ background:var(--surface); border-color:var(--line); box-shadow:var(--shadow); }
.list-toolbar{ background:var(--surface-2); border-bottom-color:var(--line); }
.list-search__field{ background:var(--surface-3); border-color:var(--line); }
.list-search input{ color:var(--text); }
.list-search__field > span{ color:var(--gold); }
.list-search__field:focus-within{ border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-ghost); }
.list-sort select{ color:var(--text); background:var(--surface-3); border-color:var(--line); }
.list-status{ color:var(--text-muted); }

.legacy-ranking th{ color:var(--gold); background:var(--surface-2); border-bottom-color:var(--line); }
.legacy-ranking tbody tr{ background:var(--surface); }
.legacy-ranking tbody tr:nth-child(even){ background:var(--surface-2); }
.legacy-ranking tbody tr:hover{ background:var(--surface-3); }
.legacy-ranking tbody tr.is-first{ background:var(--gold-ghost); }
.legacy-ranking td{ color:var(--text); border-bottom-color:var(--line); }
.legacy-ranking tr.is-first td:first-child{ border-left:3px solid var(--gold); }
/* Center every operator logo inside its chip, scaled to fit (not a fixed box) */
.legacy-logo-box{ display:grid; place-items:center; padding:8px; overflow:hidden; }
.legacy-bookmaker-logo{ width:auto; height:auto; max-width:100%; max-height:100%;
  margin:auto; object-fit:contain; display:block; }

.rank-number{ color:var(--text-muted); background:var(--surface-3); }
.is-first .rank-number{ color:var(--on-gold); background:var(--gold-grad);
  box-shadow:0 2px 10px rgba(200,162,76,.3); }
/* Editor's #1 trust chip on the top row */
.is-first td[data-label="Bookmaker"] .legacy-brand-copy::after{
  content:"★ Editor's #1"; display:inline-block; margin-top:4px;
  padding:2px 8px; border-radius:var(--r-pill,999px);
  color:var(--gold); background:var(--gold-ghost);
  font:800 9px/1.4 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; }

.legacy-brand-copy strong{ color:var(--text); }
/* Operator logo chips — polished glass plaques lifted off the dark rows */
.legacy-logo-box{ width:108px; height:56px; padding:7px 9px; border-radius:11px;
  background:linear-gradient(180deg,#FFFFFF 0%,#EBEDF1 100%);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 7px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.95);
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.legacy-ranking tbody tr:hover .legacy-logo-box{ transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.95);
  border-color:rgba(200,162,76,.35); }
.is-first .legacy-logo-box{ border-color:rgba(200,162,76,.5);
  box-shadow:0 2px 12px rgba(200,162,76,.28), inset 0 1px 0 rgba(255,255,255,.95); }
.legacy-bookmaker-logo--text{ color:#1A1D22; }
.market-tag{ color:var(--gold); background:var(--gold-ghost); border-color:var(--gold-deep); }
.rating-pending{ color:var(--text-dim); }
.rating-score{ color:var(--gold); }
.rating-score small{ color:var(--text-muted); }
/* Welcome bonus column */
.legacy-ranking td[data-label="Welcome bonus"]{ min-width:148px; text-align:left; }
.bonus-offer{ display:block; color:var(--gold-bright); font-weight:700; font-size:12.5px;
  line-height:1.3; font-feature-settings:var(--num); }
.bonus-code{ display:inline-block; margin-top:5px; padding:2px 7px; border-radius:var(--r-pill,999px);
  background:var(--gold-ghost); color:var(--gold); font:800 9px/1.4 'Inter',sans-serif;
  letter-spacing:.08em; text-transform:uppercase; }
.bonus-none{ color:var(--text-dim); font-size:15px; }

/* ---- CTAs: the ONLY solid gold fill is the primary visit button --------- */
.visit-button{ color:var(--on-gold); background:var(--gold-grad);
  border:0; box-shadow:var(--e1,0 1px 2px rgba(0,0,0,.4)); font-weight:800; }
.visit-button:hover{ transform:translateY(-2px); color:var(--on-gold);
  filter:brightness(1.05); background:var(--gold-grad); box-shadow:var(--glow-gold); }
.visit-button:active{ transform:translateY(1px); filter:brightness(.97); }
.review-button{ color:var(--gold); background:transparent; border:1px solid var(--gold-deep); }
.review-button:not(:disabled):hover{ border-color:var(--gold); background:var(--gold-ghost); }
.review-button:disabled{ color:var(--text-dim); background:var(--surface-2); border-color:var(--line); }

.empty-state p{ color:var(--text-muted); }
.empty-state button{ color:var(--gold); background:transparent; border-color:var(--gold-deep); }
.empty-state button:hover{ background:var(--gold-ghost); }

/* ---- Content panels (guide / faq / disclosure) -------------------------- */
.money-guide,.support-sections,.review-article,.legacy-disclosure{
  background:var(--surface); border-color:var(--line); box-shadow:var(--shadow); }
.money-section{ border-top-color:var(--line); }
.money-section h2,.money-section h3{ color:var(--text); }
.money-section h4{ color:var(--gold); }
.money-section p,.money-section li{ color:var(--text-muted); }
.money-section a{ color:var(--gold); }
.money-steps li::marker{ color:var(--gold); }
.money-faq-item{ border-top-color:var(--line); }
.legacy-disclosure{ color:var(--text-dim); }
.legacy-disclosure a{ color:var(--gold); }
a{ color:var(--gold); }

/* ---- Sidebar ------------------------------------------------------------ */
.legacy-sidebar{ background:var(--surface); border:1px solid var(--line); color:var(--text); }
.legacy-panel .gray-top-heading{ color:var(--text); }
.legacy-market-list a{ color:var(--text-muted); }
.legacy-market-list a:hover,.legacy-market-list a[aria-current="page"]{
  color:var(--text); background:var(--surface-3); box-shadow:inset 3px 0 0 var(--gold); }
.legacy-market-list img{ width:26px; height:26px; border:1.5px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(200,162,76,.45), 0 2px 5px rgba(0,0,0,.55); }
.legacy-market-code{ color:var(--gold); }
.legacy-market-list small{ color:var(--text); font-weight:800; }
.legacy-top-list li + li{ border-top-color:var(--line); }
.legacy-top-list a{ color:var(--text-muted); }
.legacy-top-list a:hover{ color:var(--gold); }
.legacy-top-list a span:first-child{ color:var(--gold); }
.legacy-top-list a span:last-child{ color:var(--text-dim); }
.legacy-toc a,.legacy-info-links a,.legacy-panel--help a{ color:var(--text-muted); }
.legacy-toc a:hover,.legacy-info-links a:hover,.legacy-panel--help a:hover{ color:var(--gold); }
.legacy-panel--help p{ color:var(--text-dim); }

/* ---- Footer ------------------------------------------------------------- */
.site-footer.footer_bg{ background:var(--footer); color:var(--text-muted);
  border-top:1px solid var(--gold-deep); }
.legacy-footer-inner strong{ color:var(--text); }
.legacy-footer-inner p{ color:var(--text-muted); }
.legacy-footer-inner small{ color:var(--text-dim); }
.legacy-footer-inner a{ color:var(--text-muted); }
.legacy-footer-inner a:hover{ color:var(--gold); }

/* ---- Fix remaining light "white boxes" across review + support pages ----- */
/* Data tables ("Sportsbook details checked on…") */
.review-data-table th,.review-data-table td{ border-color:var(--line); }
.review-data-table thead{ color:var(--gold); background:var(--surface-2); }
.review-data-table tbody th{ color:var(--text); background:var(--surface-2); }
.review-data-table td{ color:var(--text-muted); }
.review-data-table tbody tr:nth-child(even) th,.review-data-table tbody tr:nth-child(even) td{ background:var(--surface); }
/* Market pills, evidence, alerts, legal notes */
.review-market-pills span{ color:var(--gold); background:var(--gold-ghost); border-color:var(--gold-deep); }
.review-evidence{ color:var(--text-muted); background:var(--gold-ghost); border-color:var(--gold-deep); }
.review-evidence strong{ color:var(--text); }
.review-alert,.market-legal-note{ color:#EBC2AC; background:rgba(230,120,60,.12); border-color:rgba(230,120,60,.4); }
.review-alert strong,.market-legal-note strong{ color:#F0B48E; }
.review-alert a{ color:var(--gold-bright); }
/* Review body + support prose text */
.review-section h2,.review-section h3{ color:var(--text); }
.review-section h4{ color:var(--gold); }
.review-section p,.review-section li{ color:var(--text-muted); }
.review-section a{ color:var(--gold); }
.review-source{ color:var(--text-dim); }
.support-article .prose-section{ border-top-color:var(--line); }
.support-article .prose-section h2,.support-article .prose-section h3{ color:var(--text); }
.support-article .prose-section p,.support-article .prose-section li{ color:var(--text-muted); }
.support-article .prose-section a{ color:var(--gold); }
/* Author profiles */
.author-profile{ display:flex; align-items:center; gap:18px; margin:2px 0 18px; }
.author-photo{ width:112px; height:112px; flex:none; border-radius:50%; object-fit:cover;
  border:2px solid var(--line); box-shadow:0 0 0 1px rgba(200,162,76,.45), 0 6px 18px rgba(0,0,0,.5); }
.author-title{ margin:0; color:var(--gold); font-size:13px; font-weight:800; letter-spacing:.01em; }
.author-markets{ display:flex; flex-wrap:wrap; gap:6px; margin:9px 0 0; }
.author-markets span{ padding:3px 10px; border:1px solid var(--gold-deep); border-radius:var(--r-pill,999px);
  color:var(--gold); background:var(--gold-ghost); font-size:11px; font-weight:800; }

/* ---- News section -------------------------------------------------------- */
.news-index{ margin-top:22px; }
.news-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.news-card{ display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--surface); text-decoration:none; color:var(--text);
  box-shadow:var(--e1,0 1px 2px rgba(0,0,0,.4));
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.news-card:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:var(--e2,var(--shadow)); }
.news-card__media{ display:block; height:168px; background-size:cover; background-position:center; }
.news-card__body{ display:flex; flex-direction:column; gap:7px; padding:15px 16px 18px; }
.news-meta{ display:flex; align-items:center; gap:10px; }
.news-tag{ padding:3px 9px; border-radius:var(--r-pill,999px); background:var(--gold-ghost); color:var(--gold);
  font:800 10px/1.4 'Inter',sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.news-date{ color:var(--text-dim); font-size:11px; font-weight:600; }
.news-card__title{ font:800 17px/1.25 'Sora','Inter',sans-serif; color:var(--text); letter-spacing:-.01em; }
.news-card:hover .news-card__title{ color:var(--gold-bright); }
.news-card__excerpt{ color:var(--text-muted); font-size:13px; line-height:1.5; }
/* Article hero shows the event image */
.news-hero{ background:
    linear-gradient(90deg, rgba(10,11,13,.94) 0%, rgba(10,11,13,.78) 36%, rgba(10,11,13,.34) 66%, rgba(10,11,13,.16) 100%),
    var(--news-hero, url('/assets/hero-abstract.jpg')) right center / cover no-repeat, #0A0B0D; }
/* Article body */
.news-article h2{ margin:26px 0 10px; color:var(--text); font-size:clamp(20px,2vw,24px); letter-spacing:-.025em; line-height:1.3; }
.news-article h3{ margin:18px 0 8px; color:var(--gold); font-size:15px; }
.news-article p,.news-article li{ color:var(--text-muted); font-size:14px; line-height:1.75; }
.news-article p{ margin:0 0 12px; }
.news-article a{ color:var(--gold); font-weight:700; }
.news-article ul{ margin:10px 0 14px; padding-left:22px; }
.news-article li{ margin-bottom:6px; }
.news-article li::marker{ color:var(--gold); }
.news-article strong{ color:var(--text); }
.news-article .news-rg{ margin-top:20px; padding:13px 16px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--surface-2); color:var(--text-dim); font-size:12px; line-height:1.6; }
/* Reviews hub cards, support resources, archive list, US state chips */
.review-index-card{ color:var(--text); background:var(--surface); border-color:var(--line);
  box-shadow:var(--e1,0 1px 2px rgba(0,0,0,.4)); }
.review-index-card:hover{ border-color:var(--gold); box-shadow:var(--e2,var(--shadow)); }
.review-index-card small{ color:var(--text-muted); }
.review-index-card > span:last-child{ color:var(--gold); }
.support-resources > div{ background:var(--surface-2); border-color:var(--line); }
.legacy-archive-list a{ color:var(--gold); background:var(--surface); border-color:var(--line); }
.legacy-archive-list a:hover{ border-color:var(--gold); }
.legacy-state-list abbr{ color:var(--text-muted); background:var(--surface-3); border-color:var(--line); }
.legacy-state-note{ color:var(--text-muted); }
/* Mobile ranking-card container + #1 border + label */
.legacy-ranking tbody{ background:transparent; }
.legacy-ranking tbody tr.is-first{ border-color:var(--gold-deep); }
.legacy-ranking td[data-label="Rating"]::before{ color:var(--text-muted); }
.menu-toggle{ color:var(--text); background:var(--surface-3); border-color:var(--line); }

/* ---- Focus (accessibility) ---------------------------------------------- */
:where(a,button,input,select,summary):focus-visible{
  outline:2px solid var(--gold-bright); outline-offset:3px; }

/* ---- Motion / reduced-motion -------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .market-card,.visit-button{ transition:none; }
  .market-card:hover,.visit-button:hover{ transform:none; }
}