/* ============================================================================
   Emirates Draw Winners — EDITORIAL BLOG (v7)
   ----------------------------------------------------------------------------
   A clean, content-first design for an independent results blog. Priorities:
   readability, results front-and-centre, an archive that's easy to scan, and
   long-form guide/article pages that are a pleasure to read. No product-style
   self-promotion — the reader came for results and guidance, not our pipeline.

   Single global stylesheet: styles its own tokens, reset, header, footer, the
   result content boxes, the archive tables, the article/prose system and the
   blog index. It also restyles the legacy class names used across the older
   pages (.hero, .prose, .qbox, .card, .grid, .faq-item, .post-figure, …) so
   the whole site adopts this design.
   ========================================================================== */

/* ------------------------------------------------------------------ TOKENS */
/* Gradient light.
 *
 * The old palette was flat warm paper with emerald trim — a magazine look for a
 * page whose job is to show six numbers the moment they are drawn. This one is
 * built on light gradients: a soft mesh behind the whole page, a deeper wash in
 * the hero, and glass panels floating on top of it. Colour carries the mood so
 * the numbers can stay the only hard-edged thing on screen.
 *
 * Gradients are declared once here as tokens rather than being written inline
 * at each use, so the whole site re-tints from this block.
 *
 * Dark mode still exists for readers whose system asks for it, and it is built
 * from the same gradient shapes at low luminance rather than being switched off. */
:root {
  color-scheme: light;

  /* Ground and raised surfaces */
  --paper:     #f6f7fc;
  --paper-2:   #eef0fa;
  --surface:   #ffffff;
  --surface-2: #f9fafe;
  /* Panels that sit on the gradient are translucent, so the wash reads through
     them instead of being covered up. */
  --panel:     rgba(255,255,255,.82);
  --panel-2:   rgba(255,255,255,.6);
  --panel-line:rgba(255,255,255,.7);

  /* Ink */
  --ink:    #10132a;
  --ink-2:  #232744;
  --text:   #4d5273;
  --muted:  #7f849f;
  --line:   #e2e4f2;
  --line-2: #edeef8;

  /* Brand — indigo into violet. Used as a gradient far more often than as a
     flat fill, which is why both stops are tokens. */
  --brand:    #5b5bd6;
  --brand-d:  #4444b8;
  --brand-l:  #ecebfd;
  --brand-2:  #8b5cf6;
  --accent:   #e0761a;
  --accent-l: #fdf0e2;

  /* Game identities. The three saturated colours on the page. */
  --easy: #0ea36a; --easy-d:#077a4f; --easy-l:#e2f6ee; --easy-s:#f1fbf7;
  --fast: #2f6fed; --fast-d:#2050b8; --fast-l:#e6eefd; --fast-s:#f2f7fe;
  --mega: #e03a5c; --mega-d:#b02546; --mega-l:#fde9ee; --mega-s:#fef4f6;

  /* ---- Gradients -------------------------------------------------------
     --grad-page  the mesh behind everything
     --grad-hero  a stronger wash for the hero band
     --grad-brand the fill for primary buttons and accents
     --grad-panel the faint sheen inside a glass card                     */
  --grad-page:
      radial-gradient(62% 46% at 10% -4%,  rgba(139,92,246,.34), transparent 64%),
      radial-gradient(58% 44% at 94% 2%,   rgba(47,111,237,.30), transparent 62%),
      radial-gradient(60% 40% at 78% 52%,  rgba(224,58,92,.13),  transparent 62%),
      radial-gradient(78% 52% at 34% 104%, rgba(14,163,106,.20), transparent 66%),
      linear-gradient(180deg, #f7f8ff 0%, #f0f3fd 44%, #eaeffb 100%);
  --grad-hero:
      radial-gradient(62% 96% at 86% -22%, rgba(139,92,246,.42), transparent 64%),
      radial-gradient(56% 88% at 8% -14%,  rgba(47,111,237,.34), transparent 62%),
      radial-gradient(44% 70% at 50% -30%, rgba(224,118,26,.12), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);
  --grad-brand:  linear-gradient(135deg, var(--brand), var(--brand-2));
  --grad-panel:  linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  --grad-band:   linear-gradient(180deg, rgba(139,92,246,.13), rgba(47,111,237,.09));

  /* Type. Sora carries display sizes; the mono face takes every number, date and
     count, which is what gives the results their instrument-panel feel. */
  --font:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Sora", var(--font);
  --serif:   Georgia, "Times New Roman", serif;
  --mono:    ui-monospace, "SF Mono", "Consolas", monospace;

  --fs-xs:  clamp(.72rem,.7rem + .1vw,.78rem);
  --fs-sm:  clamp(.84rem,.81rem + .14vw,.91rem);
  --fs-md:  clamp(1rem,.96rem + .2vw,1.06rem);
  --fs-lg:  clamp(1.1rem,1rem + .4vw,1.28rem);
  --fs-xl:  clamp(1.3rem,1.1rem + .8vw,1.8rem);
  --fs-2xl: clamp(1.75rem,1.3rem + 2vw,2.9rem);
  --fs-3xl: clamp(2.2rem,1.5rem + 3.2vw,4rem);

  --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;

  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:999px;

  --sh-xs:0 1px 2px rgba(16,19,42,.05);
  --sh-sm:0 2px 8px -3px rgba(16,19,42,.10);
  --sh-md:0 14px 34px -18px rgba(16,19,42,.24);
  --sh-lg:0 30px 60px -28px rgba(16,19,42,.3);
  --sh-glow:0 18px 40px -20px rgba(91,91,214,.45);

  --glass: rgba(255,255,255,.78);
  --logo-plate: transparent;

  /* Surfaces that stay dark in both themes (footer, dark bands). */
  --night:    #14162e;
  --night-2:  #1c1f3d;
  --on-night: #e9eaf6;

  --container:1180px; --wide:1320px; --read:700px;
  --gutter:clamp(1rem,.55rem + 2.2vw,2rem);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* There is no theme switch. The site is one composition: a deep night hero and
   footer bracketing light gradient content. Combining the two in one fixed
   design replaces the old light/dark toggle - every visitor sees the same page,
   and the contrast between the dark bands and the light body IS the design. */

/* -------------------------------------------------------------- RESET/GUARD */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:82px; }
html,body{ max-width:100%; overflow-x:clip; }
body{
  font-family:var(--font); font-size:var(--fs-md); line-height:1.72;
  color:var(--text);
  /* The mesh is the page. background-attachment:fixed keeps it still while the
     content scrolls over it, which is what makes it read as a backdrop rather
     than a very tall banner. --paper stays as the fallback colour underneath. */
  background:var(--paper);
  background-image:var(--grad-page);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
  overflow-wrap:break-word; word-break:break-word;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding-bottom:env(safe-area-inset-bottom,0);
}
img,svg,video,picture,iframe{ max-width:100%; height:auto; display:block; }
pre,code{ max-width:100%; overflow-x:auto; }
a{ color:var(--brand-d); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color:color-mix(in srgb, var(--brand) 35%, transparent); transition:.15s; }
a:hover{ color:var(--brand); text-decoration-color:currentColor; }
ul,ol{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); line-height:1.2; letter-spacing:-.02em; font-weight:800; text-wrap:balance; }
h1{ font-size:var(--fs-3xl); } h2{ font-size:var(--fs-2xl); } h3{ font-size:var(--fs-xl); } h4{ font-size:var(--fs-lg); }
p{ text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; border-radius:6px; }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ------------------------------------------------------------------ LAYOUT */
.wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.wrap-wide{ max-width:var(--wide); }
.wrap-read{ max-width:var(--read); }
.section,.zone{ padding:clamp(2.25rem,1.6rem + 3.5vw,4.5rem) 0; }
.section.tight,.zone-tight{ padding:clamp(1.5rem,1rem + 2vw,2.5rem) 0; }
.section.band-dark,.zone-alt{
  background:var(--grad-band);
  border-block:1px solid var(--line-2);
}
.center{ text-align:center; }

.eyebrow,.kicker{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-size:.74rem; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--brand-d);
}
.eyebrow::before,.kicker::before{ content:""; width:22px;height:2px;background:var(--grad-brand); border-radius:2px; }
.z-title,.section h2.title{ font-size:var(--fs-2xl); margin:var(--s3) 0; }
.lead{ font-size:var(--fs-lg); color:var(--text); max-width:64ch; line-height:1.6; }
.center .lead{ margin-inline:auto; }
.grad-text{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ------------------------------------------------------------------ HEADER */
.site-header{
  position:sticky; top:0; z-index:100; background:var(--glass);
  backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .nav{ display:flex; align-items:center; gap:var(--s4); min-height:66px; }
.brand{ display:inline-flex; align-items:center; flex:0 0 auto; }
/* The only logo asset has dark lettering and a faintly opaque halo baked into
   its edges, so on a dark ground it both loses contrast and shows a grey box.
   Until a light-ink logo exists it gets a deliberate plate, which reads as a
   design choice where the halo read as a rendering fault. */
.logo-img{ width:150px; height:auto; background:var(--logo-plate); border-radius:10px; padding:3px 7px; }
@media(max-width:600px){ .logo-img{ width:124px; } }
.nav-links{ display:flex; align-items:center; gap:.1rem; margin-left:auto; }
.nav-links a{ font-family:var(--display); font-weight:600; font-size:.9rem; color:var(--ink-2); text-decoration:none; padding:.5rem .7rem; border-radius:var(--r-sm); white-space:nowrap; transition:.15s; }
.nav-links a:hover{ color:var(--brand-d); background:var(--brand-l); }
.nav-links a.active{ color:var(--brand-d); background:var(--brand-l); }

.lang{ position:relative; flex:0 0 auto; }
.lang-btn{ display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font-family:var(--display); font-weight:600; font-size:.82rem; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:.45rem .75rem; }
.lang-btn:hover{ border-color:var(--brand); color:var(--brand-d); }
.lang-btn svg{ width:16px;height:16px; }
.lang-caret{ font-size:.55rem; opacity:.5; }
.lang-menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:172px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-md); padding:.35rem; z-index:120; opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s; }
.lang.open .lang-menu{ opacity:1; visibility:visible; transform:none; }
.lang-opt{ display:flex; align-items:center; gap:.55rem; padding:.55rem .7rem; border-radius:var(--r-sm); font-weight:600; font-size:.86rem; color:var(--ink-2); text-decoration:none; }
.lang-opt:hover{ background:var(--brand-l); color:var(--brand-d); }
.lang-opt svg{ width:17px;height:17px; opacity:.55; }

.burger{ display:none; flex-direction:column; gap:5px; width:42px;height:42px; padding:11px; background:var(--surface); border:1px solid var(--line); border-radius:11px; cursor:pointer; flex:0 0 auto; }
.burger span{ height:2px;width:100%;background:var(--ink); border-radius:2px; transition:.25s; }
.burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.mobile-menu{ position:fixed; inset:66px 0 auto 0; z-index:99; background:var(--surface); border-bottom:1px solid var(--line); padding:var(--s3) var(--gutter) var(--s5); max-height:calc(100vh - 66px); overflow-y:auto; transform:translateY(-120%); transition:transform .3s var(--ease); box-shadow:var(--sh-md); }
.mobile-menu.open{ transform:none; }
.mobile-menu a{ display:flex; align-items:center; justify-content:space-between; font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--ink); text-decoration:none; padding:.95rem .3rem; border-bottom:1px solid var(--line-2); }
.mobile-menu a span{ color:var(--brand); }
.mobile-menu .btn{ margin-top:var(--s4); }
@media(max-width:900px){ .nav-links{ display:none; } .burger{ display:flex; } }
@media(min-width:901px){ .mobile-menu{ display:none; } }

/* ------------------------------------------------------------------ BUTTONS */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--display); font-weight:700; font-size:.94rem; padding:.78rem 1.5rem; border-radius:var(--r-pill); border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:transform .15s var(--ease),box-shadow .15s,background .15s; white-space:nowrap; }
.btn svg{ width:18px;height:18px; }
.btn-primary{ background:var(--grad-brand); color:#fff; box-shadow:var(--sh-glow); }
.btn-primary:hover{ filter:brightness(1.07); color:#fff; transform:translateY(-2px); box-shadow:var(--sh-glow); }
.btn-outline,.btn-neon,.btn-ghost{ background:var(--panel); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:var(--brand-d); border-color:var(--panel-line); }
.btn-outline:hover,.btn-neon:hover,.btn-ghost:hover{ border-color:var(--brand); color:var(--brand-d); transform:translateY(-2px); }
.btn-solid{ background:var(--ink); color:#fff; }
.btn-solid:hover{ background:#000; color:#fff; }

/* ------------------------------------------------------------------ HERO */
/* The dark half of the composition. Every page opens on a deep night band —
   the same violet/blue mesh as the light body, at low luminance — and closes on
   the matching dark footer, with the light gradient content between them. Draw
   night at the top, results in daylight below. */
.hero,.hero-lg{
  position:relative; isolation:isolate;
  color:rgba(255,255,255,.72);
  background:var(--night);
  background-image:
    radial-gradient(62% 96% at 86% -22%, rgba(139,92,246,.5), transparent 64%),
    radial-gradient(56% 88% at 8% -14%,  rgba(47,111,237,.4),  transparent 62%),
    radial-gradient(44% 70% at 50% 108%, rgba(224,58,92,.16),  transparent 62%),
    linear-gradient(180deg, #191c3c 0%, var(--night) 78%);
  border-bottom:none;
  padding:clamp(2.5rem,1.8rem + 4.5vw,4.75rem) 0 clamp(2rem,1.4rem + 3vw,3.25rem);
}
.hero::after,.hero-lg::after{
  /* Faint grid so the large dark area has texture instead of looking unloaded. */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(70% 70% at 50% 0%, #000, transparent 78%);
  -webkit-mask-image:radial-gradient(70% 70% at 50% 0%, #000, transparent 78%);
}
.hero h1,.hero-lg h1,.hero h2,.hero-lg h2{ color:#fff; }
.hero .lead,.hero-lg .lead{ color:rgba(255,255,255,.78); }
.hero .eyebrow,.hero-lg .eyebrow{ color:#c9b8fb; }
.hero .eyebrow::before,.hero-lg .eyebrow::before{ background:linear-gradient(135deg,#a78bfa,#60a5fa); }
/* Base shape; the colour comes from whichever band it sits on. */
.source-note{
  display:inline-flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:var(--fs-sm); color:var(--muted); margin-top:var(--s3);
}
.source-note b{ color:var(--ink-2); font-weight:700; }
.hero .source-note,.hero-lg .source-note{ color:rgba(255,255,255,.55); }
.hero .source-note b,.hero-lg .source-note b{ color:#fff; }
.hero a:not(.btn),.hero-lg a:not(.btn){
  color:#b9c8fa; text-decoration-color:rgba(185,200,250,.4);
}
.hero a:not(.btn):hover,.hero-lg a:not(.btn):hover{ color:#fff; }
/* Gradient headline words need brighter stops on the night ground. */
.hero .grad-text,.hero-lg .grad-text{
  background:linear-gradient(135deg,#b6a3fc,#7fb0ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* --------------------------------------------------- NEXT DRAW COUNTDOWN */
/* Dark glass on the night band. */
.next-draw{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s3) var(--s5); margin:var(--s5) auto 0; max-width:640px;
  padding:var(--s4) var(--s5);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-xl);
  box-shadow:0 20px 44px -22px rgba(0,0,0,.6);
}
.next-draw .nd-label{
  font-family:var(--display); font-size:.68rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55);
}
.next-draw .nd-game{ font-family:var(--display); font-weight:800; color:#fff; font-size:var(--fs-lg); }
.next-draw .nd-when{ font-size:var(--fs-sm); color:rgba(255,255,255,.75); }
.next-draw .cd{
  display:inline-flex; gap:.4rem; font-family:var(--mono); font-weight:700;
  font-size:var(--fs-md); color:#ffd98a;
  background:rgba(255,217,138,.12); border:1px solid rgba(255,217,138,.28);
  padding:.35rem .7rem; border-radius:var(--r-pill);
}
/* The countdown also appears inline on light sections of other pages. */
.section .cd{ color:var(--brand-d); }

/* ------------------------------------------------------- RESULT CONTENT BOX */
.results-grid,.card-rail,.grid-3{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--s5);
}
/* Glass panels floating on the page gradient. The game colour arrives as a
   gradient header band, which is what makes three cards in a row readable at a
   glance without reading a word. */
.result-card,.rcard{
  position:relative; overflow:hidden; display:flex; flex-direction:column; gap:var(--s4);
  background:var(--panel); background-image:var(--grad-panel);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--panel-line); border-radius:var(--r-xl);
  padding:var(--s5); box-shadow:var(--sh-md);
  transition:transform .22s var(--ease), box-shadow .22s, border-color .22s;
}
@media(hover:hover){
  .result-card:hover,.rcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
}

.result-card > .rc-head, .rcard > .rc-head,
.result-card > .rc-top,  .rcard > .rc-top{
  margin:calc(var(--s5) * -1) calc(var(--s5) * -1) 0;
  padding:var(--s3) var(--s5);
  background:var(--grad-brand);
  color:#fff;
}
.rcard.easy > .rc-head,.result-card.easy > .rc-head,
.rcard.easy > .rc-top, .result-card.easy > .rc-top { background:linear-gradient(135deg,var(--easy),var(--easy-d)); }
.rcard.fast > .rc-head,.result-card.fast > .rc-head,
.rcard.fast > .rc-top, .result-card.fast > .rc-top { background:linear-gradient(135deg,var(--fast),var(--fast-d)); }
.rcard.mega > .rc-head,.result-card.mega > .rc-head,
.rcard.mega > .rc-top, .result-card.mega > .rc-top { background:linear-gradient(135deg,var(--mega),var(--mega-d)); }

.rc-head,.rc-top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; }
/* The tag is a pill wherever it stands on its own, which is how the archive
   cards use it. Inside the coloured header band it is the heading itself, so
   there it drops the pill and grows instead. */
.rc-tag,.rc-game{
  display:inline-flex; align-items:center; font-family:var(--display); font-weight:800;
  font-size:.72rem; letter-spacing:.04em; color:#fff;
  padding:.32rem .72rem; border-radius:var(--r-pill); background:var(--brand);
}
.rcard.easy .rc-tag,.result-card.easy .rc-game{ background:var(--easy-d); }
.rcard.fast .rc-tag,.result-card.fast .rc-game{ background:var(--fast-d); }
.rcard.mega .rc-tag,.result-card.mega .rc-game{ background:var(--mega-d); }
.rcard .rc-head .rc-tag, .rcard .rc-head .rc-game,
.rcard .rc-top .rc-tag,  .rcard .rc-top .rc-game,
.result-card .rc-head .rc-tag, .result-card .rc-head .rc-game,
.result-card .rc-top .rc-tag,  .result-card .rc-top .rc-game{
  padding:0; background:none; font-size:.92rem; letter-spacing:.02em;
}
.rc-badge{ font-family:var(--display); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#fff; background:rgba(255,255,255,.2); padding:.28rem .6rem; border-radius:var(--r-pill); }
.rc-drawno{ font-family:var(--mono); font-size:.72rem; color:#fff; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.22); padding:.2rem .5rem; border-radius:var(--r-sm); }
.rc-date{ font-size:.82rem; color:var(--muted); font-weight:600; font-family:var(--mono); }
.rc-balls-label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; }

/* Number chips. Still round, but flat-gradient rather than the old glossy
   pseudo-3D ball, which dated the whole page. */
.orbs,.balls{ display:flex; flex-wrap:wrap; gap:clamp(.35rem,.2rem + .6vw,.55rem); margin:0; padding:0; }
.orb,.balls .ball,.ball{
  --sz:clamp(2.15rem,1.5rem + 2.7vw,2.95rem);
  width:var(--sz); height:var(--sz); flex:0 0 auto; display:grid; place-items:center;
  border-radius:50%; font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
  font-size:clamp(.82rem,.6rem + .8vw,1.04rem); color:#fff; list-style:none;
  background:var(--grad-brand);
  box-shadow:0 4px 12px -6px rgba(16,19,42,.5), inset 0 1px 0 rgba(255,255,255,.28);
}
.orbs[data-g="easy"] .orb,.balls[data-theme="easy"] .ball,.ball.easy{ background:linear-gradient(145deg,var(--easy),var(--easy-d)); }
.orbs[data-g="fast"] .orb,.balls[data-theme="fast"] .ball,.ball.fast,.ball.violet{ background:linear-gradient(145deg,var(--fast),var(--fast-d)); }
.orbs[data-g="mega"] .orb,.balls[data-theme="mega"] .ball,.ball.mega,.ball.gold{ background:linear-gradient(145deg,var(--mega),var(--mega-d)); }
.orbs-sm .orb,.balls-sm .ball,.mini-ball{ --sz:clamp(1.7rem,1.3rem + 1.6vw,2.15rem); font-size:clamp(.66rem,.55rem + .45vw,.83rem); }
.mini-ball{
  display:inline-grid; place-items:center; border-radius:50%; color:#fff;
  font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;
  width:var(--sz); height:var(--sz);
  background:var(--grad-brand);
  box-shadow:0 3px 8px -5px rgba(16,19,42,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.mini-ball.easy{ background:linear-gradient(145deg,var(--easy),var(--easy-d)); }
.mini-ball.violet,.mini-ball.fast{ background:linear-gradient(145deg,var(--fast),var(--fast-d)); }
.mini-ball.gold,.mini-ball.mega{ background:linear-gradient(145deg,var(--mega),var(--mega-d)); }
.orbs-pending,.balls-pending{ color:var(--muted); font-style:italic; font-size:var(--fs-sm); }

/* Each figure sits in its own tile: winners, prize and draw day were a flat
   text row that read as one blur; boxed and centred they scan in a glance. */
.rc-stats,.rc-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-top:auto; }
.rc-meta{ grid-template-columns:repeat(2,1fr); }
.rc-stat,.rc-meta > div{
  display:flex; flex-direction:column; justify-content:center; gap:.2rem;
  text-align:center; padding:.6rem .4rem;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-md);
}
.rc-stat b,.rc-meta b{
  display:block; font-family:var(--mono); font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  font-size:clamp(.82rem,.62rem + .62vw,1.02rem);
}
.rc-stat span,.rc-meta span{ font-size:.62rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.result-card .btn{ margin-top:auto; }
.rc-cta,.rc-link{ display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; font-family:var(--display); font-weight:700; font-size:.86rem; color:var(--brand-d); text-decoration:none; margin-top:var(--s2); }
.result-card .btn{ margin-top:auto; }
.rc-cta:hover,.rc-link:hover{ gap:.65rem; color:var(--brand); }
.rcard.easy .rc-cta{ color:var(--easy-d); } .rcard.fast .rc-cta{ color:var(--fast-d); } .rcard.mega .rc-cta{ color:var(--mega-d); }

/* ------------------------------------------------------- ARCHIVE TABLE */
.table-wrap{ width:100%; margin:var(--s5) 0; }
.results-table,.article table,.prose table{ width:100%; border-collapse:collapse; background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--panel-line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); font-size:var(--fs-sm); }
.results-table th,.prose th,.article th{ text-align:left; padding:var(--s3) var(--s4); background:var(--grad-band); color:var(--ink); font-family:var(--display); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.results-table td,.prose td,.article td{ padding:var(--s3) var(--s4); border-top:1px solid var(--line-2); vertical-align:middle; }
.results-table tbody tr:hover{ background:var(--surface-2); }
.results-table .td-sub{ display:block; font-size:.72rem; color:var(--muted); font-family:var(--mono); }
@media(max-width:767px){
  .results-table thead{ position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0); }
  .results-table,.results-table tbody,.results-table tr,.results-table td{ display:block; width:100%; }
  .results-table tr{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--s4); padding:var(--s3); box-shadow:var(--sh-xs); }
  .results-table td{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--s3); border:0; border-bottom:1px solid var(--line-2); padding:var(--s3) var(--s2); }
  .results-table td:last-child{ border-bottom:0; }
  .results-table td::before{ content:attr(data-label); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
  .results-table td.td-numbers{ display:block; } .results-table td.td-numbers::before{ display:block; margin-bottom:var(--s2); }
}
.empty-state{ padding:var(--s6); text-align:center; color:var(--muted); background:var(--paper-2); border-radius:var(--r-md); }

/* ------------------------------------------------------- FREQUENCY (blog content) */
.freq-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:var(--s5); }
.freq-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--sh-sm); }
.freq-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s4); }
.freq-title{ font-family:var(--display); font-weight:800; font-size:1.05rem; }
.freq-card.easy .freq-title{ color:var(--easy-d); } .freq-card.fast .freq-title{ color:var(--fast-d); } .freq-card.mega .freq-title{ color:var(--mega-d); }
.freq-link{ font-size:.76rem; font-weight:600; color:var(--muted); text-decoration:none; }
.freq-row{ display:grid; grid-template-columns:2.6rem 1fr auto; align-items:center; gap:.6rem; margin-bottom:.55rem; }
.freq-num{ font-family:var(--mono); font-weight:700; font-size:.88rem; color:var(--ink); text-align:center; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:.3rem 0; }
.freq-track{ display:block; height:13px; background:var(--paper-2); border-radius:var(--r-pill); overflow:hidden; }
.freq-fill{ display:block; height:100%; border-radius:var(--r-pill); }
.freq-card.easy .freq-fill{ background:var(--easy); } .freq-card.fast .freq-fill{ background:var(--fast); } .freq-card.mega .freq-fill{ background:var(--mega); }
.freq-val{ font-family:var(--mono); font-size:.78rem; color:var(--muted); font-weight:600; min-width:3rem; text-align:right; }

/* ------------------------------------------------------- ARTICLE / PROSE */
.article-hero{ background:linear-gradient(180deg,var(--surface),var(--paper)); border-bottom:1px solid var(--line); padding:clamp(2rem,1.4rem + 3vw,3.5rem) 0 clamp(1.5rem,1.1rem + 2vw,2.5rem); }
.crumb,nav.crumb{ display:flex; flex-wrap:wrap; gap:.4rem; font-size:.8rem; color:var(--muted); margin-bottom:var(--s4); }
.crumb a{ color:var(--muted); text-decoration:none; font-weight:600; }
.crumb a:hover{ color:var(--brand-d); }
.article-cat{ display:inline-block; font-family:var(--display); font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-d); background:var(--brand-l); padding:.32rem .7rem; border-radius:var(--r-pill); margin-bottom:var(--s3); text-decoration:none; }
.article-hero h1{ max-width:20ch; }
.article-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s4); margin-top:var(--s4); font-size:var(--fs-sm); color:var(--muted); }
.article-meta .am{ display:inline-flex; align-items:center; gap:.4rem; }
.article-meta svg{ width:15px;height:15px; opacity:.6; }

.prose{ max-width:var(--read); margin-inline:auto; font-size:1.08rem; line-height:1.8; color:var(--ink-2); }
.prose > *{ margin-bottom:1.4rem; }
.prose h2{ font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem); margin:2.4rem 0 1rem; scroll-margin-top:90px; }
.prose h3{ font-size:clamp(1.2rem,1.05rem + .6vw,1.5rem); margin:2rem 0 .8rem; }
.prose p{ margin-bottom:1.4rem; }
.prose a{ font-weight:600; }
.prose ul,.prose ol{ padding-left:1.3rem; margin-bottom:1.4rem; display:flex; flex-direction:column; gap:.6rem; }
.prose ul li{ position:relative; padding-left:1.2rem; list-style:none; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.7em; width:7px;height:7px; border-radius:50%; background:var(--brand); }
.prose ol{ list-style:decimal; }
.prose ol li{ padding-left:.3rem; }
.prose ol li::marker{ color:var(--brand-d); font-family:var(--display); font-weight:800; }
.prose img,.prose figure{ border-radius:var(--r-md); }
.prose blockquote{ border-left:4px solid var(--brand); background:var(--surface); padding:var(--s4) var(--s5); border-radius:0 var(--r-md) var(--r-md) 0; font-family:var(--serif); font-size:1.2rem; font-style:italic; color:var(--ink); box-shadow:var(--sh-xs); }

/* Callout / "qbox" content boxes */
/* Article boxes are glass too, so the page wash carries through the long-form
   pages rather than stopping at the results pages. */
.qbox,.callout{ background:var(--panel); background-image:var(--grad-panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--panel-line); border-radius:var(--r-xl); padding:var(--s5); box-shadow:var(--sh-md); }
.qbox h2,.qbox h3{ margin-top:0; }
.qbox p:last-child{ margin-bottom:0; }
.bullets{ display:flex; flex-direction:column; gap:.55rem; margin-top:var(--s3); }
.bullets li{ position:relative; padding-left:1.4rem; }
.bullets li::before{ content:""; position:absolute; left:0; top:.65em; width:7px;height:7px; border-radius:2px; background:var(--brand); }

.post-figure{ margin:var(--s5) 0; }
.post-figure img{ width:100%; border-radius:var(--r-md); box-shadow:var(--sh-sm); }
.post-figure figcaption,figcaption{ margin-top:.6rem; font-size:.82rem; color:var(--muted); text-align:center; font-style:italic; }

/* Table of contents (JS-injected) */
.toc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s4) var(--s5); margin:var(--s5) 0; box-shadow:var(--sh-xs); }
.toc-title{ font-family:var(--display); font-weight:800; font-size:.86rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.toc a{ display:block; padding:.35rem 0; font-size:.92rem; color:var(--text); text-decoration:none; border-bottom:1px solid var(--line-2); }
.toc a:last-child{ border-bottom:0; }
.toc a:hover{ color:var(--brand-d); }
.toc.collapsed nav{ display:none; }

/* Source / disclaimer box on articles */
.source-box{ display:flex; gap:var(--s3); align-items:flex-start; background:var(--brand-l); border:1px solid #cfe9df; border-radius:var(--r-lg); padding:var(--s4) var(--s5); margin:var(--s6) auto; max-width:var(--read); }
.source-box svg{ width:24px;height:24px; color:var(--brand-d); flex:0 0 auto; margin-top:2px; }
.source-box p{ margin:0; font-size:var(--fs-sm); color:var(--ink-2); }
.source-box b{ color:var(--brand-d); }

/* ------------------------------------------------------- AI SUMMARY / ANSWER */
.ai-summary,.answer{ max-width:var(--read); margin-inline:auto; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:var(--r-lg); padding:clamp(1.25rem,1rem + 1.5vw,1.9rem); box-shadow:var(--sh-xs); }
.ai-head,.answer-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:var(--s3); flex-wrap:wrap; }
.ai-head h2,.answer-head h2{ margin:0; font-size:var(--fs-lg); }
.ai-ic,.answer-ic{ width:26px;height:26px; color:var(--brand); }
.ai-tag,.answer-tag{ margin-left:auto; font-family:var(--display); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-d); background:var(--brand-l); padding:.28rem .6rem; border-radius:var(--r-pill); }
.answer-lead{ font-size:var(--fs-lg); color:var(--ink); margin-bottom:var(--s3); line-height:1.6; }
.ai-points,.answer ul{ display:flex; flex-direction:column; gap:.55rem; }
.ai-points li,.answer li{ position:relative; padding-left:1.5rem; color:var(--ink-2); }
.ai-points li::before,.answer li::before{ content:""; position:absolute; left:.15rem; top:.55em; width:8px;height:8px; border-radius:50%; background:var(--brand); }

/* ------------------------------------------------------- BLOG INDEX */
.blog-featured{ display:grid; grid-template-columns:1.2fr 1fr; gap:var(--s6); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-sm); margin-bottom:var(--s7); }
@media(max-width:820px){ .blog-featured{ grid-template-columns:1fr; } }
.blog-featured .bf-media{ position:relative; min-height:240px; }
.blog-featured .bf-media img{ width:100%; height:100%; object-fit:cover; }
.blog-featured .bf-body{ padding:clamp(1.5rem,1.2rem + 2vw,2.75rem); display:flex; flex-direction:column; justify-content:center; gap:var(--s3); }
.blog-featured h2{ font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem); }
.blog-featured .bf-body p{ color:var(--text); }

.post-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:var(--s5); }
.post-card{ display:flex; flex-direction:column; background:var(--panel); background-image:var(--grad-panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--panel-line); border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-md); transition:transform .22s var(--ease),box-shadow .22s; text-decoration:none; }
@media(hover:hover){ .post-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-md); } }
.post-card .pc-media{ aspect-ratio:16/10; overflow:hidden; background:var(--paper-2); }
.post-card .pc-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
@media(hover:hover){ .post-card:hover .pc-media img{ transform:scale(1.05); } }
.post-card .pc-body{ padding:var(--s5); display:flex; flex-direction:column; gap:.6rem; flex:1; }
.pc-cat{ font-family:var(--display); font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--brand-d); }
.post-card h3{ font-size:var(--fs-lg); line-height:1.3; color:var(--ink); }
.post-card p{ font-size:var(--fs-sm); color:var(--text); margin:0; }
.pc-meta{ margin-top:auto; padding-top:var(--s3); font-size:.76rem; color:var(--muted); display:flex; align-items:center; gap:.5rem; border-top:1px solid var(--line-2); }
.pc-readmore{ margin-left:auto; color:var(--brand-d); font-weight:700; }

/* category filter chips */
.cat-chips{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:var(--s5) 0 var(--s6); }
.cat-chip{ font-family:var(--display); font-weight:600; font-size:.82rem; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); padding:.45rem .9rem; border-radius:var(--r-pill); text-decoration:none; transition:.15s; }
.cat-chip:hover,.cat-chip.active{ background:var(--brand); color:#fff; border-color:var(--brand); }

/* related posts */
.related{ background:var(--paper-2); }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); gap:var(--s5); margin-top:var(--s5); }

/* ------------------------------------------------------- STATS / TILES / STEPS
   (kept minimal + editorial; used lightly, not as feature-bragging) */
.stats,.stats-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr)); gap:var(--s4); }
.stat{ text-align:center; }
.stat b{ display:block; font-family:var(--display); font-weight:800; font-size:var(--fs-xl); color:var(--brand-d); font-variant-numeric:tabular-nums; }
.stat span{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--s5); }
.tile{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5); box-shadow:var(--sh-xs); }
.tile-ic{ width:44px;height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:var(--s3); background:var(--brand-l); color:var(--brand-d); }
.tile-ic svg{ width:22px;height:22px; }
.tile h3{ font-size:var(--fs-lg); margin-bottom:var(--s2); }
.tile p{ font-size:var(--fs-sm); color:var(--text); margin:0; }

/* ------------------------------------------------------- FAQ */
.faq{ max-width:var(--read); margin-inline:auto; }
.faq-item{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--s3); overflow:hidden; box-shadow:var(--sh-xs); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); text-align:left; font-family:var(--display); font-weight:700; font-size:var(--fs-md); color:var(--ink); background:none; border:0; padding:var(--s4); cursor:pointer; }
.faq-q .ic{ flex:0 0 auto; width:26px;height:26px; display:grid; place-items:center; border-radius:50%; background:var(--brand-l); color:var(--brand-d); font-weight:700; transition:transform .25s; }
.faq-item.open .faq-q .ic{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a > div{ padding:0 var(--s4) var(--s4); color:var(--text); }

/* ------------------------------------------------------- CTA */
.cta-hud,.g-cta{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap; background:linear-gradient(120deg,var(--brand),var(--brand-d)); border-radius:var(--r-xl); padding:clamp(1.5rem,1.2rem + 2vw,2.5rem); box-shadow:var(--sh-md); }
.cta-hud h2,.g-cta h2{ color:#fff; margin-bottom:.3rem; } .cta-hud p,.g-cta p{ color:rgba(255,255,255,.9); margin:0; }
.cta-hud .btn-primary,.g-cta .btn-primary{ background:#fff; color:var(--brand-d); }

/* ------------------------------------------------------------------ FOOTER */
.site-footer{
  background:var(--night);
  background-image:
    radial-gradient(50% 90% at 12% 0%, rgba(139,92,246,.28), transparent 62%),
    radial-gradient(46% 80% at 88% 6%, rgba(47,111,237,.22), transparent 60%);
  color:rgba(255,255,255,.66);
  padding:clamp(2.5rem,2rem + 3vw,4rem) 0 var(--s6);
}
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:var(--s6); }
.site-footer .logo-img{ width:150px; filter:brightness(0) invert(1); }
.foot-col h4{ color:#fff; font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.06em; margin-bottom:var(--s3); }
.foot-col a{ display:block; color:rgba(255,255,255,.6); font-size:var(--fs-sm); padding:.3rem 0; text-decoration:none; }
.foot-col a:hover{ color:#fff; }
.disclaimer-box{ margin-top:var(--s4); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-md); padding:var(--s3); font-size:var(--fs-xs); color:rgba(255,255,255,.55); }
.foot-trust{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4); }
.foot-trust .ft-item{ font-size:.68rem; color:rgba(255,255,255,.6); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); padding:.32rem .7rem; border-radius:var(--r-pill); }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:var(--s6); padding-top:var(--s4); font-size:var(--fs-xs); color:rgba(255,255,255,.5); }
@media(max-width:900px){ .foot-grid{ grid-template-columns:1fr 1fr; gap:var(--s5); } }
@media(max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ------------------------------------------------------- MOBILE BAR + FABS */
.mobile-bar{ display:none; }
@media(max-width:900px){
  .mobile-bar{ display:flex; gap:var(--s2); z-index:90; position:fixed; left:0;right:0;bottom:0;
    padding:.6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom,0));
    background:var(--glass); backdrop-filter:blur(12px); border-top:1px solid var(--line); }
  .mobile-bar .btn{ flex:1; padding:.7rem .5rem; font-size:.82rem; }
  body{ padding-bottom:4.5rem; }
}
.bell-fab,.refresh-fab,.to-top{ position:fixed; right:1rem; z-index:80; width:48px;height:48px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; box-shadow:var(--sh-md); transition:transform .18s var(--ease); }
.bell-fab:hover,.refresh-fab:hover,.to-top:hover{ transform:translateY(-3px) scale(1.05); }
.bell-fab{ bottom:5.5rem; background:var(--brand); color:#fff; }
.refresh-fab{ bottom:9rem; background:var(--surface); color:var(--brand-d); border:1px solid var(--line); }
.to-top{ bottom:12.5rem; background:var(--ink); color:#fff; opacity:0; visibility:hidden; }
.to-top.show{ opacity:1; visibility:visible; }
.bell-fab svg,.refresh-fab svg,.to-top svg{ width:20px;height:20px; }
.rf-ic{ font-size:1.3rem; } .bell-tip,.rf-tip{ display:none; }
.refresh-fab.spinning svg,.refresh-fab.spinning .rf-ic{ animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media(min-width:901px){ .bell-fab{ bottom:1.5rem; } .refresh-fab{ bottom:5rem; } .to-top{ bottom:8.5rem; } }

/* ------------------------------------------------------------------ MOTION */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease),transform .6s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.last-updated-badge{ text-align:center; font-size:.82rem; color:var(--muted); margin-top:var(--s4); }
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}
@media print{ .site-header,.site-footer,.mobile-bar,.bell-fab,.refresh-fab,.to-top,.ad-outer-wrap,.ad-placeholder{ display:none !important; } body{ background:#fff; } }

/* ------------------------------------------------------------------ ADS */
.ad-outer-wrap{ width:100%; margin-inline:auto; max-width:var(--container); }
.ad-outer-wrap > div:first-child{ font-family:var(--display) !important; font-size:.64rem !important; letter-spacing:.1em; text-transform:uppercase; color:var(--muted) !important; text-align:center; margin-bottom:6px; }
.ad-container{ background:var(--surface-2) !important; border:1px dashed var(--line) !important; border-radius:var(--r-md) !important; }

/* Legacy dark bands from old markup -> neutralise to light editorial */
.band-dark{ background:var(--paper-2) !important; color:var(--text) !important; }
.band-dark h1,.band-dark h2,.band-dark h3{ color:var(--ink) !important; }
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center; }
@media(max-width:820px){ .split-grid{ grid-template-columns:1fr; } }

/* An ad slot that never filled is removed from the layout by collapseEmptyAds().
   The rule is !important because .ad-outer-wrap sets its own display. */
.ad-placeholder[hidden] { display: none !important; }

/* (superseded by the boxed stat tiles defined with .rc-stats above) */


/* ------------------------------------------------- SWEEP FIXES (v4.3) */
/* A date sitting inside a coloured header band inherits the muted body colour
   and disappears into the gradient; inside a band everything reads in white. */
.rc-head .rc-date, .rc-top .rc-date{ color:rgba(255,255,255,.85); }
.rc-head .rc-badge, .rc-top .rc-badge{ color:#fff; background:rgba(255,255,255,.2); }

/* Legacy breadcrumb class used by several hand-written heroes. On the night
   band the default muted grey was unreadable. */
.crumb{ font-size:var(--fs-sm); color:var(--muted); margin-top:var(--s3); }
.crumb a{ font-weight:600; }
.hero .crumb, .hero-lg .crumb{ color:rgba(255,255,255,.55); }
.hero .crumb span, .hero-lg .crumb span{ color:rgba(255,255,255,.45); }

/* Outline buttons on the night hero were light glass with dark text. */
.hero .btn-outline, .hero-lg .btn-outline,
.hero .btn-ghost,  .hero-lg .btn-ghost{
  background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.hero .btn-outline:hover, .hero-lg .btn-outline:hover{ border-color:rgba(255,255,255,.5); color:#fff; }

/* Several guide pages write plain <table> inside .table-wrap without the
   .results-table class; they were rendering as bare unstyled text. Any table
   inside a .table-wrap gets the full treatment. */
.table-wrap > table{ width:100%; border-collapse:collapse; background:var(--panel); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--panel-line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-md); font-size:var(--fs-sm); }
.table-wrap > table th{ text-align:left; padding:var(--s3) var(--s4); background:var(--grad-band); color:var(--ink); font-family:var(--display); font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
.table-wrap > table td{ padding:var(--s3) var(--s4); border-top:1px solid var(--line-2); vertical-align:middle; }

/* -------------------------------------------------- HOMEPAGE: SCHEDULE STRIP */
/* The three draw nights as chips under the countdown. Dark glass on the night
   hero; the coloured dot is each game's identity at a glance. */
.sched-strip{
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1rem;
}
.sched-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:var(--r-pill); text-decoration:none;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .15s, background .15s, transform .15s;
}
.sched-chip:hover{ border-color:rgba(255,255,255,.4); transform:translateY(-1px); }
.sched-chip b{ color:#fff; font-family:var(--display); font-size:.82rem; letter-spacing:.02em; }
.sched-chip .sc-day{ color:rgba(255,255,255,.6); font-family:var(--mono); font-size:.72rem; }
.sched-chip .sc-dot{ width:9px; height:9px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.sched-chip.is-next{ border-color:rgba(255,217,138,.5); background:rgba(255,217,138,.08); }
.sched-chip.is-next b::after{ content:" · next"; color:#ffd98a; font-size:.68rem; font-weight:600; }

/* ----------------------------------------------------- HOMEPAGE: MONTH CHIPS */
/* Quick entries into the monthly archive pages from each game's archive card. */
.month-chips{ display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.5rem; }
.month-chip{
  font-size:.72rem; font-weight:700; font-family:var(--display);
  color:var(--brand-d); text-decoration:none;
  background:var(--brand-l); border:1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  padding:.28rem .6rem; border-radius:var(--r-pill);
  transition:background .15s, color .15s;
}
.month-chip:hover{ background:var(--brand); color:#fff; }

/* -------------------------------------------------------- TRUST BAND */
/* A slim night band restating the three verifiable claims, each of which the
   methodology page substantiates. Sits between content sections so the page
   keeps the dark/light rhythm set by the hero and footer. */
.trust-band{
  background:var(--night);
  background-image:
    radial-gradient(50% 120% at 15% 0%, rgba(139,92,246,.25), transparent 60%),
    radial-gradient(46% 110% at 85% 100%, rgba(47,111,237,.2), transparent 60%);
  padding:clamp(1.75rem,1.3rem + 2vw,2.75rem) 0;
}
.trust-band .tb-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
  gap:var(--s5); align-items:center;
}
.trust-band .tb-item b{ display:block; color:#fff; font-family:var(--display); font-size:var(--fs-lg); }
.trust-band .tb-item span{ color:rgba(255,255,255,.6); font-size:var(--fs-sm); }
.trust-band .tb-link{ justify-self:start; }
@media(min-width:900px){ .trust-band .tb-link{ justify-self:end; } }

/* ------------------------------------------------- HOMEPAGE: DRAW STREAM */
/* The last nine draws as tappable rows. Each row is one internal link into the
   per-draw layer; the game pill carries identity, the numbers stay the focus. */
.stream{ display:flex; flex-direction:column; gap:.5rem; }
.stream-row{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:"game date win" "balls balls balls";
  align-items:center; gap:.35rem .8rem;
  padding:.7rem .9rem; text-decoration:none;
  background:var(--panel); background-image:var(--grad-panel);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--panel-line); border-radius:var(--r-lg);
  box-shadow:var(--sh-sm);
  transition:transform .15s var(--ease), box-shadow .15s;
}
.stream-row:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.stream-row .st-game{
  grid-area:game;
  font-family:var(--display); font-weight:800; font-size:.66rem; letter-spacing:.05em;
  color:#fff; padding:.28rem .6rem; border-radius:var(--r-pill);
}
.stream-row .st-date{ grid-area:date; font-family:var(--mono); font-size:.8rem; color:var(--text); }
.stream-row .st-balls{ grid-area:balls; display:flex; gap:.35rem; flex-wrap:wrap; }
.stream-row .st-balls i{ font-style:normal; }
.stream-row .st-win{
  grid-area:win; font-family:var(--display); font-weight:700; font-size:.78rem;
  color:var(--brand-d); white-space:nowrap;
}
@media(min-width:720px){
  .stream-row{ grid-template-columns:auto auto 1fr auto; grid-template-areas:"game date balls win"; }
  .stream-row .st-balls{ justify-content:flex-end; }
}