/* ==========================================================================
   4D Results — Public Site Design System
   Classic Malaysian/Singapore lottery-results look: black top navigation,
   a warm gold/cream page background, and rectangular near-flat result
   panels with a shared dark-brown section title bar and bold classic
   (Arial/Helvetica) numbers. No modern rounded cards, no gradients beyond
   the page backdrop itself, no hover-lift animation.

   Palette:
     --ink        #10182B  deep navy-charcoal (nav, numbers, dark text)
     --paper      #F5F6F8  cool off-white (generic UI chrome backgrounds —
                           NOT the page backdrop, see .page-shell below)
     --gold       #E3A83B  secondary accent (links, small highlights)
     --brick      #C6493A  used sparingly (live/today badge, red amounts)
     --ink-soft   #4B5568  secondary text
     --line       #E4E7EC  hairline borders (generic UI chrome)
     --panel-classic-title  #5A4B2F  the shared dark-brown Result Panel
                           title-bar color (1st/2nd/3rd Prize, Special,
                           Consolation, Jackpot, ...) — see
                           includes/panel_style_helpers.php PANEL_CLASSIC_TITLE_BG

   Type: Roboto (self-hosted, see @font-face below) everywhere — headings,
   numbers and body — matching the reference result sheets.
   ========================================================================== */

:root {
  --ink: #10182B;
  --ink-2: #1B2540;
  --paper: #F5F6F8;
  --card: #FFFFFF;
  --gold: #E3A83B;
  --gold-deep: #C68A22;
  --brick: #E5342B;
  --ink-soft: #4B5568;
  --line: #E4E7EC;
  --radius: 3px;
  --panel-classic-title: #5A4B2F;
  --font-display: 'Roboto', Arial, Helvetica, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto', Arial, Helvetica, 'Segoe UI', sans-serif;
  --font-body: 'Roboto', Arial, Helvetica, 'Segoe UI', sans-serif;
  /* Warm gold/beige page backdrop (tan at the sides fading to pale cream in
     the center), independent of --paper which other UI chrome keeps using. */
  --page-bg: radial-gradient(ellipse 900px 100% at center, #FCF4DC 0%, #F3DFA0 45%, #D9B75B 75%, #C89A3E 100%);
}

/* Roboto, self-hosted (assets/fonts) — the typeface of the reference result
   sheets. Latin subset, weights 400 / 500 / 700. */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/roboto-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/roboto-latin-700-normal.woff2') format('woff2'); }

* { box-sizing: border-box; }
/* Whole CMS zoomed out by 2% (change 0.98 to adjust; 1 = 100%). */
html { zoom: 0.98; }
html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
/* Hide the browser's default scrollbar (incl. its up/down arrow buttons) —
   scrolling itself still works, only the visible track/arrows are removed. */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  margin: 0;
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Header (classic full-width black bar, nav left, logo centered) ----------
   NOTE: this file used to define .site-header TWICE — an ink/black version
   immediately followed by a second, contradictory white/sticky-card version
   a few lines later. CSS cascade order meant the second (wrong, "modern")
   rule always won, which was the actual root cause of the header never
   matching the competitor screenshots even though nothing about the style
   system was broken. There is now exactly one definition. */
.site-header {
  background: #000000;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 2px solid #2a2a2a;
}
.site-header-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative; /* lets the logo be centered on the page regardless of how wide the nav is */
}
.site-header-spacer { flex: 0 0 0; width: 0; }
.site-logo-text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  color: var(--brick);
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
}
.site-logo-img { height: 30px; }
/* True center of the header row, independent of the nav's width on the left
   or anything on the right — this is what "center" means literally, so the
   logo sits exactly in the middle of the page regardless of nav length. */
.site-logo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: calc(100% - 140px);
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.mobile-menu-toggle span { width: 22px; height: 2px; background: #ffffff; border-radius: 2px; }

.site-nav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.site-nav > ul > li { position: relative; }
.site-nav a {
  display: block;
  color: #ffffff;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 3px;
  transition: background 0.15s, color 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav > ul > li > a:hover { background: rgba(255,255,255,0.12); color: #ffffff; }
}
.site-nav .has-children > a::after { content: ' ▾'; font-size: 10px; opacity: 0.7; }
.site-nav .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--ink);
  border-radius: 10px;
  padding: 6px;
  min-width: 190px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
  list-style: none;
  margin: 6px 0 0;
}
/* Hover-to-open is desktop/mouse-only. On touch devices, "(hover: hover)"
   is false, so this rule never applies there — avoiding a well-known
   mobile-Safari/Chrome quirk where a link with a :hover style needs a
   first "throwaway" tap just to trigger :hover before a second tap can
   actually register as a click. Touch devices instead use the .open
   class below, toggled directly by a single tap (see site.js). */
@media (hover: hover) and (pointer: fine) {
  .site-nav .has-children:hover .dropdown { display: block; }
}
.site-nav .has-children:focus-within .dropdown { display: block; }
.site-nav .dropdown a { color: rgba(255,255,255,0.85); border-radius: 6px; padding: 8px 10px; }
@media (hover: hover) and (pointer: fine) {
  .site-nav .dropdown a:hover { background: rgba(255,255,255,0.08); color: #fff; }
}

/* "Result" quick-date dropdown — same ink/gold system as the menu dropdown */
.result-date-dropdown { min-width: 210px; }
.result-date-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; }
.result-date-count {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.5;
}
.result-date-archive-link { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 4px; padding-top: 4px; }
.result-date-archive-link a { color: var(--gold); font-weight: 700; font-size: 12.5px; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .result-date-archive-link a:hover { color: #fff; }
}

/* Visually hidden but still readable by screen readers / SEO — used where a
   heading is removed from view but the page should keep one h1. */
.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;
}

/* ---------- Region tabs — classic flat tab strip (no dark gradient bar,
   no rounded pills). Inactive tabs are a light gray/tan box; the active
   tab is solid dark brown/charcoal with white text, matching the
   competitor reference screenshots exactly. A small circular refresh
   button sits inline after the tabs. ---------- */
.region-tabs-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.region-tabs { display: flex; flex-wrap: wrap; gap: 4px; overflow: visible; margin: 0; }
.region-tab {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink-soft);
  background: #E9E6DD;
  border: 1px solid #C9C4B4;
  padding: 8px 18px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.region-tab:hover { color: var(--ink); background: #DCD7C7; }
.region-tab.active {
  color: #ffffff;
  background: var(--panel-classic-title);
  border-color: var(--panel-classic-title);
}
.region-refresh-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E9E6DD;
  border: 1px solid #C9C4B4;
  border-radius: 2px;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: background 0.15s, transform 0.2s;
}
.region-refresh-btn:hover { background: #DCD7C7; color: var(--ink); }
.region-refresh-btn.is-spinning svg { animation: rc-spin 0.6s linear; }
@keyframes rc-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  .region-tabs { flex-wrap: wrap; overflow-x: visible; gap: 4px; }
  .region-tab { padding: 7px 10px; font-size: 11px; }
}
@media (max-width: 380px) {
  .region-tab { padding: 6px 8px; font-size: 10px; }
}

/* ---------- Result grid & ad slots ---------- */
.results-section { max-width: 1180px; margin: 0 auto; padding: 12px 20px 40px; }
.results-section--single { max-width: 640px; padding-top: 18px; }

/* ---------- Homepage: single centered results column ---------- */
.home-layout { max-width: 1180px; margin: 0 auto; padding: 6px 20px 40px; }
.home-main { min-width: 0; }
.home-main .results-section { max-width: none; margin: 0; padding: 0; }

.results-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 12px;
  align-items: start;
}
.results-grid + .results-grid { margin-top: 12px; } /* space between row_break blocks */
.results-grid > * { min-width: 0; } /* prevent grid items refusing to shrink below content width */
.results-grid-item--full { grid-column: 1 / -1; }
@media (max-width: 980px) { .results-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .results-grid { grid-template-columns: 1fr; } }

/* ---------- Dense column packing within a single block (see site.js) ----------
   Each .results-grid above is one "block" (a run of providers between two
   row_break points). Within a block, JS measures every card's real height
   and sets an explicit grid-row-end: span N on it; combined with
   grid-auto-flow: dense and a fine-grained grid-auto-rows unit, the browser's
   own grid algorithm packs cards into the nearest available gap — so a
   short card (e.g. "SportsToto 5D") no longer leaves empty space just
   because the card beside it (e.g. "SportsToto Fireball") is much taller,
   and the next card in priority order flows up to fill it. Crucially this
   packing can NEVER cross into a different .results-grid block, so a new
   row_break block always starts as a clean, fully-aligned row — exactly
   the boundary behaviour a plain global masonry can't guarantee. Card
   priority order (display_order) itself is never changed by any of this;
   only which column/row a card's cell lands in changes. Applied only on
   tablet/desktop (2-3 columns); on mobile (1 column) this class is never
   added since a single column is already gap-free by construction. */
.results-grid.masonry-dense {
  grid-auto-rows: 1px;
  /* Not "dense": JS now assigns each card's column explicitly (see
     layoutDenseGrid in site.js), so the browser only needs to find the
     next open row within that one column, never jump into a different,
     unrelated column just because it happens to be free first. */
  grid-auto-flow: row;
}

.region-group { display: block; }

.ad-slot { max-width: 1180px; margin: 10px auto; padding: 0 20px; text-align: center; }
.ad-mobile-only { display: none; }
.ad-desktop-only { display: block; }
@media (max-width: 640px) {
  .ad-desktop-only { display: none; }
  .ad-mobile-only { display: block; }
}

/* ---------- Result card ----------
   Classic rectangular lottery-sheet panel: near-zero radius, thin gray
   border, a subtle gray/brown shadow, white body, no hover animation. */
.result-card {
  background: var(--panel-cell-bg, var(--card));
  border: 1px solid var(--panel-border, #d3d0c8);
  border-radius: var(--panel-radius, 2px);
  overflow: hidden;
  max-width: 100%;
  box-shadow: 0 1px 3px rgba(74,60,30,0.18);
}

.rc-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  /* Solid provider color — panel_style_render_vars() now defaults
     --panel-header-bg-2 to the SAME color as --panel-header-bg, so this
     gradient renders as a flat solid unless a style explicitly opts into
     a genuine two-tone header. */
  background: linear-gradient(135deg, var(--panel-header-bg, var(--ink)) 0%, var(--panel-header-bg-2, var(--ink)) 100%);
  color: var(--panel-header-text, #fff);
}
.rc-logo-chip {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: #fff;
  border: 1px solid rgba(16,24,43,0.15);
  box-sizing: content-box;
}
.rc-logo {
  display: block;
  object-fit: contain; /* safety net only — width/height are set exactly per-logo inline, from the real file's own pixel size */
}
.rc-logo-chip--text {
  min-width: 44px;
  height: 44px;
  padding: 2px 8px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  border: none;
}
.rc-heading { min-width: 0; flex: 1; }
.rc-name { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-name a { color: var(--panel-header-text, #fff); }
.rc-name a:hover { opacity: 0.85; }
.rc-meta { display: flex; gap: 7px; font-size: 10px; color: var(--panel-header-text-soft, rgba(255,255,255,0.82)); font-weight: 600; margin-top: 2px; }
.rc-meta a { color: inherit; }
.rc-meta a:hover { opacity: 0.85; }

.rc-section { padding: 7px 10px; border-top: 1px solid var(--panel-border, var(--line)); }
.rc-section:first-of-type { border-top: none; }
.rc-section + .rc-section { margin-top: var(--panel-gap, 0px); }
.rc-section-title {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--panel-title-text, #fff);
  background: var(--panel-title-bg, var(--panel-classic-title));
  margin: -7px -10px 5px;
  padding: 5px 10px;
}

/* the split-flap digit cell — used at 3 sizes across big/inline/grid layouts */
.rc-big-numbers { display: flex; gap: 8px; }
.rc-big-cell { text-align: center; }

/* Grouped row for consecutive single-number sections (e.g. 1st/2nd/3rd Prize)
   sharing one title bar, matching the classic 4D results-sheet layout. */
.rc-section-group { padding: 0; }
/* Lets the boxed prize-row style (see includes/partials/result_card.php) bleed
   edge-to-edge even when it's nested inside a normal, padded .rc-section
   (as opposed to the zero-padding .rc-section-group used for true multi-section groups). */
.rc-bleed-x { margin-left: -10px; margin-right: -10px; }
.rc-group-titles {
  display: grid;
  grid-template-columns: repeat(var(--rc-group-cols, 3), 1fr);
  /* Shares the SAME dark-brown token as every other section title bar
     (--panel-title-bg) so the 1st/2nd/3rd Prize row, Special, Consolation
     etc. all read as one consistent bar color across the whole card. */
  background: var(--panel-title-bg, var(--panel-classic-title));
  color: var(--panel-title-text, #fff);
}
.rc-group-title {
  min-width: 0;
  text-align: center;
  padding: 5px 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Numbers presented as one continuous bordered table — equal-sized cells
   with thin dividing lines, like a classic results sheet, instead of
   separate floating rounded chips. The trick: the container's background
   IS the divider color, and each cell fills its slot with a 1px gap.
   CSS Grid (not flex) with an explicit column count guarantees every
   column is exactly 1/N of the full width — the row can never end up
   narrower than its title bar or leave unexplained space on the right. */
.rc-group-values {
  display: grid;
  grid-template-columns: repeat(var(--rc-group-cols, 3), 1fr);
  gap: 1px;
  background: var(--panel-border, var(--line));
  border: 1px solid var(--panel-border, var(--line));
  border-top: none;
  width: 100%;
  box-sizing: border-box;
}
.rc-group-values .rc-big-cell {
  min-width: 0;
  background: var(--panel-cell-bg, #fff);
  padding: 6px 5px;
  box-sizing: border-box;
}
.rc-big-value {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--panel-number-weight, 800);
  font-size: clamp(19px, 4.2vw, 23px);
  letter-spacing: 0.01em;
  color: var(--ink);
}
/* Long values (8-digit jackpot amounts etc.) — smaller, still auto-shrinking,
   so they never crowd or wrap. See the $hasLongValue check in result_card.php. */
.rc-group-values.rc-bleed-x-long .rc-big-value { font-size: clamp(11px, 2.8vw, 14px); }
.rc-group-values.rc-bleed-x-long .rc-big-cell { padding: 5px 4px; }
.rc-big-label { display: block; font-size: 8.5px; font-weight: 700; color: var(--gold-deep); margin-top: 2px; letter-spacing: 0.04em; text-transform: uppercase; }

.rc-inline-row {
  display: grid;
  grid-template-columns: repeat(var(--rc-inline-cols, 1), 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 0 -10px;
  width: calc(100% + 20px);
  box-sizing: border-box;
  overflow-x: auto;
}
.rc-inline-row .rc-chip { min-width: 0; }
.rc-chip-medium .rc-chip-value { font-size: 15px; font-weight: 800; padding: 5px 7px 2px; }

.rc-grid {
  display: grid;
  grid-template-columns: repeat(var(--rc-cols, 5), 1fr);
  gap: 1px;
  background: var(--panel-border, var(--line));
  border-top: 1px solid var(--panel-border, var(--line));
  border-bottom: 1px solid var(--panel-border, var(--line));
  margin: 0 -10px;
  width: calc(100% + 20px);
  box-sizing: border-box;
  /* Safety net: if a section is ever configured with more fixed columns than
     can comfortably fit (e.g. a wide Special/Consolation row on a phone),
     this contains the overflow to a small internal scroll on the row itself
     instead of stretching — and silently clipping — the whole page width. */
  overflow-x: auto;
}
.rc-chip { text-align: center; background: var(--panel-cell-bg, #fff); min-width: 0; overflow: hidden; }
/* A row that's genuinely shorter than the section's full column count (e.g.
   only 3 of 5 numbers exist for that row — nothing was ever typed for the
   rest, not even "----") gets invisible filler cells on both sides instead
   of visible dash boxes, so the real numbers sit centered in that row. */
.rc-chip-spacer { background: var(--panel-cell-bg, #fff); }
/* When the LAST row is short, its empty side cells are plain white space: the
   grid's own bottom line is dropped and drawn by the real boxes only, so no
   line runs under the empty area. */
.rc-grid-open-bottom { border-bottom: 0; }
.rc-chip-base { border-bottom: 1px solid var(--panel-border, var(--line)); }
.rc-chip-value {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--panel-number-weight, 800);
  font-size: 13.5px;
  color: var(--ink);
  padding: 4px 3px 1px;
  line-height: 1.2;
}

/* Rank/label + value pairs (e.g. Sports Toto 5D's 1st..6th grid): each
   cell is its own dark-brown label box beside a white value box, tiled
   row-major into --rc-cols pairs per row. */
.rc-pair-grid {
  display: grid;
  grid-template-columns: repeat(var(--rc-cols, 2), 1fr);
  gap: 1px;
  background: var(--panel-border, var(--line));
  border-top: 1px solid var(--panel-border, var(--line));
  border-bottom: 1px solid var(--panel-border, var(--line));
  margin: 0 -10px;
  width: calc(100% + 20px);
  box-sizing: border-box;
}
.rc-pair { display: flex; align-items: stretch; background: var(--panel-cell-bg, #fff); min-width: 0; }
.rc-pair-label {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 6px 8px;
  background: var(--panel-title-bg, var(--panel-classic-title));
  color: var(--panel-title-text, #fff);
  font-weight: 700;
  font-size: 11px;
}
.rc-pair-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 6px 4px;
  font-family: var(--font-mono);
  font-weight: var(--panel-number-weight, 800);
  font-size: 15px;
  color: var(--ink);
}
.rc-chip-label { display: block; font-size: 8px; color: var(--ink-soft); margin: 1px 0 3px; font-weight: 600; }
.rc-dash { color: #B7BEC9; font-weight: 400; }

/* On phones, keep the SAME column count as desktop (grid-template-columns
   above already uses --rc-cols, unchanged here) so each row reads in the
   exact same left-to-right order as the desktop layout — never re-flowing
   into a different number of columns, which breaks the row grouping (e.g.
   Special/Consolation rows no longer lining up with how the admin entered
   them). Only the cell size/padding shrinks to fit; if a row is ever too
   tight to shrink further, the .rc-grid overflow-x:auto above lets that one
   row scroll internally instead of reflowing or clipping. */
@media (max-width: 480px) {
  .rc-chip-value { font-size: 12px; padding: 4px 2px 1px; }
  .rc-big-value { font-size: clamp(17px, 8vw, 20px); }
  .rc-group-values.rc-bleed-x-long .rc-big-value { font-size: clamp(10px, 4.5vw, 12px); }
  .rc-group-values .rc-big-cell { padding: 5px 4px; }
  .rc-section-title { font-size: 10px; padding: 4px 8px; }
  .rc-group-title { font-size: 8.5px; padding: 4px 3px; }
}
@media (max-width: 360px) {
  .rc-chip-value { font-size: 11px; padding: 3px 2px 1px; }
  .rc-chip-label { font-size: 7.5px; }
}

/* ---------- Panel Style Library — design tokens ----------
   These read the --panel-* custom properties set per-card by
   includes/panel_style_helpers.php (panel_style_render_vars()). Every
   value has a safe fallback so a card with no style assigned (--panel-*
   undefined) still renders as the classic competitor look:
     --panel-header-bg / --panel-header-bg-2 / --panel-header-text
     --panel-title-bg / --panel-title-text
     --panel-border / --panel-radius / --panel-gap
     --panel-font-scale / --panel-padding-scale / --panel-number-weight
   (--panel-cell-bg / --panel-section-bg are intentionally left to their
   plain CSS defaults below — no per-style color exists yet for the
   number-cell background, so it always stays white as in the reference.) */
.rc-section { padding-top: calc(7px * var(--panel-padding-scale, 1)); padding-bottom: calc(7px * var(--panel-padding-scale, 1)); }
.rc-section-title { font-size: calc(10.5px * var(--panel-font-scale, 1)); padding-top: calc(5px * var(--panel-padding-scale, 1)); padding-bottom: calc(5px * var(--panel-padding-scale, 1)); }
.rc-big-value { font-size: calc(clamp(19px, 4.2vw, 23px) * var(--panel-font-scale, 1)); }
.rc-chip-value { font-size: calc(13.5px * var(--panel-font-scale, 1)); padding-top: calc(4px * var(--panel-padding-scale, 1)); padding-bottom: calc(1px * var(--panel-padding-scale, 1)); }
.rc-group-title { font-size: calc(10px * var(--panel-font-scale, 1)); padding-top: calc(5px * var(--panel-padding-scale, 1)); padding-bottom: calc(5px * var(--panel-padding-scale, 1)); }
.rc-group-values .rc-big-cell { padding-top: calc(6px * var(--panel-padding-scale, 1)); padding-bottom: calc(6px * var(--panel-padding-scale, 1)); }
.rc-header { padding-top: calc(7px * var(--panel-padding-scale, 1)); padding-bottom: calc(7px * var(--panel-padding-scale, 1)); }
.rc-name { font-size: calc(13.5px * var(--panel-font-scale, 1)); }

/* Premium category: a touch more breathing room for a featured placement
   (no colored shadow — kept to the same neutral gray/brown card shadow). */
.rc-style-premium .rc-header { padding-top: calc(9px * var(--panel-padding-scale, 1)); padding-bottom: calc(9px * var(--panel-padding-scale, 1)); }

/* ---------- Amount / jackpot tables ----------
   Compact 2-column table: label on the left, amount in red on the right,
   thin borders, no rounded pill chips — matches the "Jackpot Estimated
   Amount" / "Share Amount" tables in the reference screenshots. */
.rc-amount-rows {
  display: flex; flex-direction: column;
  border: 1px solid var(--panel-border, var(--line));
  border-top: none;
  margin: 0 -10px; width: calc(100% + 20px); box-sizing: border-box;
}
.rc-amount-row {
  display: flex; align-items: stretch;
  background: var(--panel-cell-bg, #fff);
  border-top: 1px solid var(--panel-border, var(--line));
}
.rc-amount-rows .rc-amount-row:first-child { border-top: none; }
.rc-amount-pair { flex: 1; display: flex; align-items: stretch; min-width: 0; }
.rc-amount-label {
  flex: 0 0 auto;
  min-width: 84px;
  display: flex; align-items: center;
  background: #DCC79A; /* tan/beige label column — distinct from the dark-brown section title bar above it */
  color: var(--ink);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.01em;
  padding: 6px 10px;
}
.rc-amount-value-col {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
  padding: 6px 8px;
}
.rc-amount-value { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.rc-amount-amount { font-family: var(--font-mono); font-weight: 700; color: var(--brick); }

/* 3-column labeled amount table (e.g. Singapore Toto's Prize Group / Share
   Amount / No. of Winning Shares) — a has_amount section whose Title has
   "|"-separated column headers gets real column headers instead of one
   merged title bar, with the label, amount and value each in their own
   bordered column so they line up across every row. */
.rc-amount-table {
  display: flex; flex-direction: column;
  margin: 0 -10px; width: calc(100% + 20px); box-sizing: border-box;
  border: 1px solid var(--panel-border, var(--line));
}
.rc-amount-table-head, .rc-amount-table-row { display: grid; grid-template-columns: 1fr 1.15fr 1.15fr; }
.rc-amount-table-head {
  background: var(--panel-title-bg, var(--panel-classic-title));
  color: var(--panel-title-text, #fff);
  font-weight: 800; font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase;
}
.rc-amount-table-head span { padding: 7px 6px; text-align: center; border-right: 1px solid rgba(255,255,255,0.25); }
.rc-amount-table-head span:last-child { border-right: none; }
.rc-amount-table-row { background: var(--panel-cell-bg, #fff); border-top: 1px solid var(--panel-border, var(--line)); }
.rc-amount-table-row:first-of-type { border-top: none; }
.rc-amount-table-label {
  background: #DCC79A;
  color: var(--ink); font-weight: 700; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  padding: 7px 6px; text-align: center;
  border-right: 1px solid var(--panel-border, var(--line));
}
.rc-amount-table-amount {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; color: var(--brick);
  padding: 7px 6px;
  border-right: 1px solid var(--panel-border, var(--line));
}
.rc-amount-table-value {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 700; color: var(--brick);
  padding: 7px 6px;
}

/* "Name + Value" row — e.g. Zodiac: TIGER, Fireball: 9 */
.rc-lv-section { padding: 0; }
.rc-lv-row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--panel-border, var(--line));
  border-bottom: 1px solid var(--panel-border, var(--line));
}
.rc-lv-label {
  flex: 0 0 auto;
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-title-bg, var(--panel-classic-title));
  color: var(--panel-title-text, #fff);
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 8px;
  text-align: center;
}
.rc-lv-value {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-cell-bg, #fff);
  font-family: var(--font-mono);
  font-weight: var(--panel-number-weight, 800);
  font-size: 13.5px;
  color: var(--ink);
  padding: 5px 8px;
}

/* 6D-style "or" combo rows — e.g. 41410* or *14106. Rendered as plain
   table rows (label column + value, thin borders) rather than rounded
   chip rows, matching the Sports Toto 6D reference panel. */
.rc-or-rows {
  display: flex; flex-direction: column;
  border: 1px solid var(--panel-border, var(--line));
  border-top: none;
  margin: 0 -10px; width: calc(100% + 20px); box-sizing: border-box;
}
.rc-or-row {
  display: flex; align-items: stretch;
  background: var(--panel-cell-bg, #fff);
  border-top: 1px solid var(--panel-border, var(--line));
}
.rc-or-rows .rc-or-row:first-child { border-top: none; }
.rc-or-rank {
  flex: 0 0 auto;
  min-width: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-title-bg, var(--panel-classic-title));
  color: var(--panel-title-text, #fff);
  font-weight: 800; font-size: 12px; letter-spacing: 0.02em;
  padding: 8px 6px; text-align: center;
}
.rc-or-values { flex: 1; display: flex; align-items: stretch; min-width: 0; }
.rc-or-value {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--panel-number-weight, 800);
  font-size: 17px;
  color: var(--ink);
  padding: 7px 4px;
}
.rc-or-value--solo { flex: 1; font-size: 21px; }
.rc-or-sep {
  flex: 0 0 auto;
  min-width: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-title-bg, var(--panel-classic-title));
  color: var(--panel-title-text, #fff);
  font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: 0.03em;
}

/* Plus-separated digit combo with an optional "or" alternate combo below it
   (Magnum 4D Jackpot Gold-style, e.g. "3 5 + 6 4 + 6 7 + 0 5"). Each digit
   and each "+" symbol is its own box in one continuous row; when a second
   combo exists, a full-width dark-brown "or" bar separates the two rows. */
.rc-plusor {
  display: flex; flex-direction: column;
  margin: 0 -10px; width: calc(100% + 20px); box-sizing: border-box;
  border-top: 1px solid var(--panel-border, var(--line));
  border-bottom: 1px solid var(--panel-border, var(--line));
}
.rc-plusor-row { display: flex; }
.rc-plusor-row + .rc-plusor-row { border-top: 1px solid var(--panel-border, var(--line)); }
.rc-plusor-cell {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-cell-bg, #fff);
  border-right: 1px solid var(--panel-border, var(--line));
  font-family: var(--font-mono);
  font-weight: var(--panel-number-weight, 800);
  font-size: 15px;
  color: var(--ink);
  padding: 7px 2px;
}
.rc-plusor-cell:last-child { border-right: none; }
.rc-plusor-or {
  text-align: center;
  background: var(--panel-title-bg, var(--panel-classic-title));
  color: var(--panel-title-text, #fff);
  font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 0;
  border-top: 1px solid var(--panel-border, var(--line));
  border-bottom: 1px solid var(--panel-border, var(--line));
}

.rc-empty-state { padding: 16px 12px; text-align: center; color: var(--ink-soft); font-size: 11.5px; }

/* ---------- Provider page ---------- */
.breadcrumb { max-width: 1180px; margin: 16px auto 0; padding: 0 20px; font-size: 12.5px; color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--ink); }
.provider-hero {
  max-width: 1180px; margin: 0 auto; padding: 18px 20px 4px;
  display: flex; align-items: center; gap: 16px;
}
.provider-hero-logo { width: 56px; height: 56px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #fff; }
.provider-hero h1 { font-size: 22px; }
.provider-hero-desc { color: var(--ink-soft); margin: 4px 0 0; font-size: 13.5px; }
.provider-hero-schedule { color: var(--ink-soft); margin: 2px 0 0; font-size: 12px; font-weight: 600; }

.recent-results-section { max-width: 640px; margin: 0 auto; padding: 8px 20px 40px; }
.recent-results-section h2 { font-size: 15px; margin-bottom: 10px; }
.recent-results-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.recent-results-list a {
  display: flex; justify-content: space-between; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
}
.recent-results-list a:hover { border-color: var(--gold); }
.text-muted { color: var(--ink-soft); font-weight: 500; }

/* ---------- Result detail / Past results archive (Phase 6) ---------- */
.result-detail-hero, .archive-hero {
  max-width: 1180px; margin: 0 auto; padding: 18px 20px 4px;
}
.result-detail-hero h1, .archive-hero h1 { font-size: clamp(20px, 3vw, 26px); margin-bottom: 14px; }

.date-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.date-nav-link {
  font-weight: 700; font-size: 13px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 14px; white-space: nowrap;
}
.date-nav-link:hover { border-color: var(--gold); }
.date-nav-disabled { color: #B7BEC9; background: transparent; }
.date-jump-form input[type="date"] {
  font-family: var(--font-mono); font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}

/* Custom "jump to a date" calendar — matches the site's ink/gold system */
.date-picker { position: relative; display: inline-block; }
.date-picker-input {
  font-family: var(--font-mono); font-size: 13px; padding: 7px 34px 7px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
  width: 170px; cursor: pointer;
}
.date-picker-input::placeholder { color: var(--ink-soft); }
.date-picker.open .date-picker-input { border-color: var(--gold); }
.date-picker-icon {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  cursor: pointer; font-size: 14px; opacity: 0.7; pointer-events: none;
}
.date-picker-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  background: var(--ink); border-radius: 12px; padding: 12px;
  box-shadow: 0 16px 32px rgba(16,24,43,0.28);
  width: 240px;
}
.date-picker-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 13px;
  margin-bottom: 8px;
}
.date-picker-nav {
  background: rgba(255,255,255,0.08); border: none; color: #fff;
  width: 26px; height: 26px; border-radius: 6px; font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.date-picker-nav:hover { background: var(--gold); color: var(--ink); }
.date-picker-weekdays, .date-picker-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.date-picker-weekdays span {
  text-align: center; font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.5); padding-bottom: 4px;
}
.date-picker-day {
  background: none; border: none; color: rgba(255,255,255,0.85);
  font-family: var(--font-mono); font-size: 12px; padding: 6px 0;
  border-radius: 6px; cursor: pointer; text-align: center;
}
.date-picker-day:hover:not(:disabled) { background: var(--gold); color: var(--ink); font-weight: 700; }
.date-picker-day.is-today { border: 1px solid var(--gold); color: var(--gold); font-weight: 700; }
.date-picker-day:disabled { color: rgba(255,255,255,0.2); cursor: not-allowed; }

/* Inline (always-visible, non-popup) variant used in the homepage sidebar —
   noticeably more compact than the popup calendar on Past Results. */
.date-picker-panel--inline {
  position: static; width: auto; background: none; box-shadow: none; padding: 0;
}
.date-picker-panel--inline .date-picker-panel-header { font-size: 10.5px; margin-bottom: 5px; }
.date-picker-panel--inline .date-picker-nav { width: 17px; height: 17px; font-size: 11px; }
.date-picker-panel--inline .date-picker-weekdays span { font-size: 7.5px; padding-bottom: 1px; }
.date-picker-panel--inline .date-picker-weekdays,
.date-picker-panel--inline .date-picker-days { gap: 1px; }
.date-picker-panel--inline .date-picker-day { font-size: 9px; padding: 3px 0; }

.provider-filter-form { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.provider-filter-form select {
  font-family: var(--font-body); font-size: 13px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}

.related-links-section { max-width: 640px; margin: 0 auto; padding: 8px 20px 40px; }
.related-links-section h2 { font-size: 15px; margin-bottom: 10px; }
.related-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.related-links-list a {
  display: block; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; font-weight: 600;
}
.related-links-list a:hover { border-color: var(--gold); }

.archive-year-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.archive-year-tab {
  font-weight: 700; font-size: 12.5px; white-space: nowrap;
  color: var(--ink-soft); background: var(--card); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px;
}
.archive-year-tab:hover { color: var(--ink); border-color: var(--gold); }
.archive-year-tab.active { color: #fff; background: var(--ink); border-color: var(--ink); }
.archive-year-count { opacity: 0.7; font-weight: 500; }

.archive-body { max-width: 1180px; margin: 0 auto; padding: 8px 20px 40px; }

.archive-date-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.archive-date-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 16px; font-weight: 700; font-size: 13.5px;
}
.archive-date-list a:hover { border-color: var(--gold); }
.archive-date-count { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); }

.archive-month-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
}
.archive-month-card {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; text-align: center;
}
.archive-month-card:hover { border-color: var(--gold); box-shadow: 0 8px 18px rgba(16,24,43,0.06); }
.archive-month-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.archive-month-count { font-size: 11.5px; color: var(--ink-soft); font-weight: 600; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; font-size: 13px; }
.pagination-link { font-weight: 700; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 16px; }
.pagination-link:hover { border-color: var(--gold); }
.pagination-status { color: var(--ink-soft); font-weight: 600; }

/* ---------- Pages / Dictionary / Search / FAQ (Phase 7) ---------- */
.cms-page { max-width: 760px; margin: 0 auto; padding: 10px 20px 10px; }
.cms-page h1 { font-size: clamp(22px, 3vw, 28px); }
.cms-page-featured { width: 100%; border-radius: var(--radius); margin: 10px 0 18px; }
.cms-page-content { font-size: 15px; color: var(--ink); }
.cms-page-content h2 { font-size: 19px; margin-top: 28px; }
.cms-page-content h3 { font-size: 16px; margin-top: 20px; }
.cms-page-content img { max-width: 100%; border-radius: 8px; }
.cms-page-content a { color: var(--gold-deep); }
.dictionary-related-numbers { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }

.faq-wrap { max-width: 760px; margin: 0 auto; padding: 0 20px 40px; }
.faq-section h2 { font-size: 18px; margin-bottom: 10px; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; }
.faq-item summary { font-weight: 700; font-size: 13.5px; cursor: pointer; }
.faq-answer { margin-top: 8px; font-size: 13.5px; color: var(--ink-soft); }

.dictionary-hero, .search-hero { max-width: 900px; margin: 0 auto; padding: 18px 20px 4px; }
.dictionary-hero h1, .search-hero h1 { font-size: clamp(20px, 3vw, 26px); margin-bottom: 14px; }
.dictionary-search-form, .search-form { display: flex; gap: 8px; margin-bottom: 16px; }
.dictionary-search-form input, .search-form input {
  flex: 1; font-family: var(--font-body); font-size: 14px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.dictionary-search-form button, .search-form button {
  font-weight: 700; font-size: 13px; background: var(--ink); color: #fff; border: none;
  border-radius: 8px; padding: 0 18px; cursor: pointer;
}
.dictionary-alpha-nav { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.alpha-link {
  font-weight: 700; font-size: 12px; color: var(--ink-soft); background: var(--card);
  border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; min-width: 26px; text-align: center;
}
.alpha-link:hover { border-color: var(--gold); color: var(--ink); }
.alpha-link.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.dictionary-body, .search-body { max-width: 900px; margin: 0 auto; padding: 8px 20px 40px; }
.dictionary-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dictionary-list a {
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px;
}
.dictionary-list a:hover { border-color: var(--gold); }
.dictionary-term { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.dictionary-meaning-preview { font-size: 12.5px; color: var(--ink-soft); text-align: right; }

.search-result-group { margin-bottom: 24px; }
.search-result-group h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 8px; }
.search-result-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.search-result-list li { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; }
.search-result-list a { font-weight: 700; font-size: 13.5px; }
.search-result-snippet { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ---------- 4D History (Phase 8) ---------- */
.history-hero { max-width: 1000px; margin: 0 auto; padding: 18px 20px 4px; }
.history-hero h1 { font-size: clamp(20px, 3vw, 26px); margin-bottom: 4px; }
.history-hero-desc { color: var(--ink-soft); font-size: 13.5px; margin-top: 0; margin-bottom: 16px; }
.history-form { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 10px; }
.history-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 12px; }
.history-form-row:last-child { margin-bottom: 0; }
.history-form label { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.03em; }
.history-form input, .history-form select {
  width: 100%; font-family: var(--font-body); font-size: 13.5px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
}
.history-form-submit { display: flex; align-items: flex-end; }
.history-form-submit button {
  width: 100%; font-weight: 700; font-size: 13.5px; background: var(--ink); color: #fff;
  border: none; border-radius: 8px; padding: 10px 16px; cursor: pointer;
}
.history-form-submit button:hover { background: #1B2540; }

.history-body { max-width: 1000px; margin: 0 auto; padding: 8px 20px 40px; }
.history-table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.history-table th { text-align: left; padding: 10px 14px; background: var(--paper); border-bottom: 1px solid var(--line); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-soft); }
.history-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.history-table tr:last-child td { border-bottom: none; }
.history-number { font-family: var(--font-mono); font-weight: 700; }
.history-truncated-note { font-size: 12px; color: var(--ink-soft); margin-top: 10px; }

/* ---------- Empty / 404 ---------- */
.empty-state-page, .not-found-section { max-width: 640px; margin: 60px auto; padding: 0 20px; text-align: center; color: var(--ink-soft); }
.not-found-section h1 { font-size: 64px; color: var(--line); }
.btn-home { display: inline-block; margin-top: 14px; background: var(--ink); color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: 13px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.75); margin-top: 30px; }
.site-footer-inner {
  max-width: 1180px; margin: 0 auto; padding: 34px 20px;
  display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between;
}
.footer-about { max-width: 380px; }
.footer-logo { margin-bottom: 10px; }
.footer-about p { font-size: 13px; line-height: 1.6; }
.footer-social { display: flex; gap: 14px; margin-top: 10px; }
.footer-social a { font-size: 12px; font-weight: 700; color: var(--gold); }
.footer-social a:hover { color: #fff; }
.footer-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,0.7); }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center; font-size: 11.5px; padding: 14px 20px; color: rgba(255,255,255,0.5);
}

/* ---------- Mobile result cards ---------- */
@media (max-width: 640px) {
  .results-section { padding: 16px 12px 30px; }
  .rc-header { padding: 10px 12px; gap: 8px; }
  .rc-section { padding: 10px 12px; }
  .rc-amount-label { font-size: 11.5px; padding: 7px 10px; min-width: 76px; }
  .rc-amount-value, .rc-amount-amount { font-size: 12px; }
}

/* ---------- Desktop: compact sticky header ---------- */
@media (min-width: 861px) {
  /* Compact the sticky top bar so it takes less vertical space and stops
     covering the top of result cards when the page scrolls. (Previously this
     used `zoom: 0.9` on <body>, which desynced sticky/absolute positioning —
     e.g. the header logo and the region tabs — from where they visually
     appeared. Plain, smaller sizes give the same compact feel reliably.) */
  .site-header-inner { padding: 8px 20px; }
  .site-logo-img { height: 26px; }
  .site-logo-text { font-size: 19px; }
  .site-nav a { padding: 7px 12px; font-size: 12.5px; }
}

/* Keep result cards from being hidden under the sticky header on jump-to-anchor */
.result-card, .rc-header { scroll-margin-top: 90px; }

/* ---------- Mobile nav ---------- */
@media (max-width: 860px) {
  .mobile-menu-toggle { display: flex; }
  .site-header-inner { justify-content: space-between; }
  .site-header-spacer { display: none; }
  .site-logo-center { max-width: calc(100% - 90px); }
  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink-2); padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.08);
    z-index: 60;
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; }
  .site-nav a { color: rgba(255,255,255,0.85); }
  .site-nav .dropdown { position: static; display: block; box-shadow: none; background: rgba(255,255,255,0.04); }
  .site-nav .has-children .dropdown { display: none; }
  .site-nav .has-children.open .dropdown { display: block; }
  /* The "Result" quick-date menu opens straight away with the hamburger —
     no extra tap needed on "Result" itself before the dates appear. */
  .site-nav .result-nav-item .dropdown { display: block; }
}


/* ---------- Homepage: whole page shown zoomed out ----------
   Applied only to pages that contain the homepage results layout
   (.home-layout), so every other page keeps its normal size. Change the
   number to zoom more/less (1 = normal). The column-packing code in
   site.js measures the zoom and compensates for it. */
body:has(.home-layout) { zoom: 0.9; }


/* ==========================================================================
   Result panels — reference typography & alignment
   Matches the reference result sheets: Roboto, sentence-case (NOT upper-case)
   section titles, ALL section title bars centred (Special, Consolation, 1st/
   2nd/3rd Prize, Jackpot ...), large medium-weight prize numbers and lighter
   grid numbers. Sizes are proportional to the panel's own width (container
   query units), so a panel looks the same at any column count; the older
   fixed-px sizes above remain as the fallback for very old browsers.
   Style Library "font scale" still multiplies everything.
   ========================================================================== */
.result-card { container-type: inline-size; font-family: var(--font-body); }

/* header: provider name + draw date */
.rc-name { font-size: calc(clamp(15px, 5.2cqw, 18px) * var(--panel-font-scale, 1)); font-weight: 500; letter-spacing: 0; }
.rc-meta { font-size: calc(clamp(11px, 3.6cqw, 13px) * var(--panel-font-scale, 1)); font-weight: 500; letter-spacing: 0; gap: 8px; margin-top: 3px; }

/* every section title bar: centred, sentence case */
.rc-section-title,
.rc-group-title,
.rc-amount-table-head,
.rc-amount-table-head span {
  text-align: center;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.rc-section-title {
  font-size: calc(clamp(13px, 4.3cqw, 15px) * var(--panel-font-scale, 1));
  padding-top: calc(6px * var(--panel-padding-scale, 1));
  padding-bottom: calc(6px * var(--panel-padding-scale, 1));
}
.rc-group-title {
  font-size: calc(clamp(13px, 4.3cqw, 15px) * var(--panel-font-scale, 1));
  padding-top: calc(6px * var(--panel-padding-scale, 1));
  padding-bottom: calc(6px * var(--panel-padding-scale, 1));
}
.rc-amount-table-head { font-size: calc(clamp(12px, 3.9cqw, 14px) * var(--panel-font-scale, 1)); }

/* 1st / 2nd / 3rd prize numbers (and other big single numbers) */
.rc-big-value {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(clamp(22px, 9.4cqw, 34px) * var(--panel-font-scale, 1));
  letter-spacing: 0;
  line-height: 1.15;
}
.rc-group-values .rc-big-cell { padding-top: calc(4px * var(--panel-padding-scale, 1)); padding-bottom: calc(4px * var(--panel-padding-scale, 1)); }
.rc-group-values.rc-bleed-x-long .rc-big-value { font-size: calc(clamp(13px, 4.4cqw, 16px) * var(--panel-font-scale, 1)); }

/* Special / Consolation / plain grids */
.rc-chip-value {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(clamp(15px, 6.4cqw, 24px) * var(--panel-font-scale, 1));
  letter-spacing: 0;
  line-height: 1.25;
  padding-top: calc(4px * var(--panel-padding-scale, 1));
  padding-bottom: calc(4px * var(--panel-padding-scale, 1));
}
.rc-chip-medium .rc-chip-value { font-weight: 400; font-size: calc(clamp(15px, 6.4cqw, 24px) * var(--panel-font-scale, 1)); }
.rc-dash { font-weight: 400; color: #8b8b8b; }

/* label + value pairs (5D 1st..6th, 3D) */
.rc-pair-label { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: calc(clamp(13px, 4.6cqw, 16px) * var(--panel-font-scale, 1)); }
.rc-pair-value { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; font-size: calc(clamp(17px, 6.6cqw, 24px) * var(--panel-font-scale, 1)); }

/* Name + value row (Fireball / Zodiac) */
.rc-lv-label { font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; font-size: calc(clamp(13px, 4.4cqw, 15px) * var(--panel-font-scale, 1)); min-width: 30%; }
.rc-lv-value { font-family: var(--font-body); font-weight: 700; font-size: calc(clamp(20px, 7.5cqw, 28px) * var(--panel-font-scale, 1)); }

/* 6D "or" rows */
.rc-or-value { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; }
.rc-or-rank, .rc-or-sep { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; }
.rc-plusor-cell { font-family: var(--font-body); font-weight: 500; }

/* jackpot / amount tables */
.rc-amount-label, .rc-amount-table-label {
  font-family: var(--font-body); font-weight: 400; background: #D6CBB0;
  font-size: calc(clamp(12px, 4.2cqw, 15px) * var(--panel-font-scale, 1));
}
.rc-amount-value, .rc-amount-amount, .rc-amount-table-amount, .rc-amount-table-value {
  font-family: var(--font-body); font-weight: 500; color: #C00000;
  font-size: calc(clamp(12px, 4.2cqw, 15px) * var(--panel-font-scale, 1));
}
.rc-amount-value { color: var(--ink); }

/* Jackpot / amount block (label | amount rows): beige label column takes about
   a third of the width, amount centered in a bordered white cell, in red. */
.rc-amount-rows-jackpot .rc-amount-label { flex: 0 0 36%; min-width: 0; justify-content: center; text-align: center; }
.rc-amount-rows-jackpot .rc-amount-value-col { border-left: 1px solid var(--panel-border, var(--line)); }
.rc-amount-rows-jackpot .rc-amount-amount { font-size: calc(clamp(14px, 4.6cqw, 18px) * var(--panel-font-scale, 1)); }

/* ---------- SEO / content blocks (homepage intro, provider intro, last-updated) ---------- */
.home-h1 { font-size: 20px; line-height: 1.25; margin: 0 0 6px; color: var(--ink); }
.home-lead { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-soft); }
.home-lead a, .home-intro a, .provider-about a { text-decoration: underline; text-underline-offset: 2px; }
.home-intro, .provider-about { max-width: 760px; margin: 0 auto; padding: 8px 20px 28px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.home-intro h2, .provider-about h2 { font-size: 16px; margin: 0 0 8px; color: var(--ink); }
.home-intro h3 { font-size: 14px; margin: 14px 0 6px; color: var(--ink); }
.home-intro p, .provider-about p { margin: 0 0 10px; }
.home-provider-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.home-provider-links a {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 13px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
}
.home-provider-links a:hover { border-color: var(--gold); }
.last-updated { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.results-section--single .last-updated { text-align: center; }

/* Layout-shift guard: reserve a standard banner height so a late-loading ad
   does not push the results down. (Only rendered when an ad is configured.) */
.ad-slot { min-height: 90px; }

/* Touch devices: comfortable tap targets (44px) without changing the desktop look. */
@media (pointer: coarse) {
  .region-tab, .region-refresh-btn, .date-nav-link, .pagination-link, .archive-year-tab, .alpha-link {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .region-refresh-btn { min-width: 44px; }
  .mobile-menu-toggle { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .home-provider-links a { min-height: 44px; display: inline-flex; align-items: center; }
}