/* ── Shared structure for every white-label theme ───────────────────────────
   Themes restyle through these variables (and may add their own rules):
   --bg --surface --surface-2 --text --text-muted --border
   --accent --accent-text --header-bg --header-text --notice-bg --notice-text
   --result --result-pending --pair --flash
   --radius --shadow --font-body --font-heading --font-number
   Optional extras:
   --wrap-max      content width (default 1180px)
   --focus         focus-ring colour on the page (header, notice and footer use their text colour)
   Derived from --accent automatically, because clients override --accent after the theme CSS
   (themes normally leave these alone):
   --accent-text   black or white, whichever has more contrast on --accent
   --accent-deep   --accent darkened, if needed, to work as text on light backgrounds
                   and as a background under white text (luminance <= 0.11)
   --accent-light  --accent lightened, if needed, to work as text on dark backgrounds
                   (luminance >= 0.4)
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #f6f5f2;
  --surface: #ffffff;
  --surface-2: #efede7;
  --text: #1a1a19;
  --text-muted: #5f5e59;
  --border: #deddd6;
  --accent: #2a78d6;
  --accent-text: #ffffff;
  --accent-deep: var(--accent);
  --accent-light: var(--accent);
  --header-bg: #1a1a19;
  --header-text: #ffffff;
  --notice-bg: #2a78d6;
  --notice-text: #ffffff;
  --result: #1a1a19;
  --result-pending: #8a887f;
  --pair: #c62828;
  --flash: #fff4b8;
  --radius: 10px;
  --shadow: none;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: var(--font-body);
  --font-number: var(--font-body);
  --wrap-max: 1180px;
  --focus: var(--accent-deep);
}

/* Accent variants computed from the WCAG luminance (the y channel of XYZ).
   Darkening scales towards black and lightening mixes towards white in linear light,
   so the results always stay inside sRGB. */
@supports (color: color(from red xyz-d65 x y z)) {
  :root {
    --accent-text: color(from var(--accent) xyz-d65
      clamp(0, (0.1791 - y) * 100000, 0.9505) clamp(0, (0.1791 - y) * 100000, 1) clamp(0, (0.1791 - y) * 100000, 1.089));
    --accent-deep: color(from var(--accent) xyz-d65
      calc(x * min(1, 0.11 / y)) calc(y * min(1, 0.11 / y)) calc(z * min(1, 0.11 / y)));
    --accent-light: color(from var(--accent) xyz-d65
      calc(x + (0.9505 - x) * max(0, (0.4 - y) / (1 - y)))
      calc(y + (1 - y) * max(0, (0.4 - y) / (1 - y)))
      calc(z + (1.089 - z) * max(0, (0.4 - y) / (1 - y))));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Column layout so the footer sits at the bottom of short pages (404, empty states) */
body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.45; overflow-wrap: break-word; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.site-header :focus-visible, .notice :focus-visible, .site-footer :focus-visible { outline-color: currentColor; }

.wrap { width: 100%; max-width: var(--wrap-max); margin: 0 auto; padding: 0 16px; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 20; padding: 10px 14px; border-radius: 8px; background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); }
.skip-link:focus { left: 8px; }

/* Header */
.site-header { background: var(--header-bg); color: var(--header-text); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; }
.brand-logo { width: 44px; height: 44px; flex-shrink: 0; object-fit: contain; border-radius: 8px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px; background: var(--accent); color: var(--accent-text); font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem; }
.brand-text { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.brand-tagline { font-size: 0.8rem; opacity: 0.9; }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.site-nav a:hover { background: rgba(255, 255, 255, 0.12); }
.site-nav a[aria-current='page'] { background: var(--accent); color: var(--accent-text); }

/* Notice ticker: scrolls when motion is allowed, wraps otherwise */
.notice { overflow: hidden; background: var(--notice-bg); color: var(--notice-text); }
.notice-text { margin: 0; padding: 8px 0; font-weight: 600; white-space: nowrap; animation: notice-scroll 24s linear infinite; }
@keyframes notice-scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

.main { flex: 1 0 auto; padding-top: 20px; padding-bottom: 32px; }
.page-title { margin: 0 0 8px; font-family: var(--font-heading); font-size: clamp(1.4rem, 4vw, 2rem); line-height: 1.2; text-align: center; }
.page-intro { max-width: 62ch; margin: 0 auto 16px; color: var(--text-muted); text-align: center; }
.page-intro a { color: var(--text); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.block { margin-top: 24px; }
.block-title { margin: 0 0 12px; font-family: var(--font-heading); font-size: 1.25rem; line-height: 1.25; text-align: center; }
.empty { padding: 24px; color: var(--text-muted); text-align: center; }

/* Banners above the results (set under Branding): a welcome line beside a picture, a
   headline, and channel / WhatsApp buttons */
.welcome { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.welcome-img { width: 90px; height: auto; max-height: 72px; flex-shrink: 0; object-fit: contain; border-radius: 6px; }
.welcome-text { flex: 1; margin: 0; font-weight: 700; text-align: center; }
.headline { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--radius); background: var(--accent); color: var(--accent-text); font-family: var(--font-heading); font-size: clamp(1rem, 3.6vw, 1.3rem); font-weight: 800; letter-spacing: 0.02em; text-align: center; text-transform: uppercase; }
.promo-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
.promo-link { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 8px 16px; border-radius: 999px; color: #fff; font-weight: 800; text-decoration: none; }
.promo-telegram { background: #229ed9; }
.promo-whatsapp { background: #1fa855; }
.promo-cta { background: #f59e0b; color: #1c1100; }

/* API box: a title, a big button and a few lines; at the top and again above the footer */
.api-box { margin: 0 0 16px; padding: 14px 16px; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--surface); text-align: center; }
.api-box-bottom { margin: 16px 0 24px; }
.api-title { margin: 0; font-family: var(--font-heading); font-size: clamp(1rem, 3.4vw, 1.2rem); font-weight: 800; }
.api-button { display: inline-flex; align-items: center; gap: 6px; min-height: 46px; margin: 12px 0 4px; padding: 10px 26px; border: 2px solid #fff; border-radius: 14px; background: var(--accent); color: var(--accent-text); font-size: 1.05rem; font-weight: 800; text-decoration: none; box-shadow: 0 0 0 2px var(--accent); }
.api-line { margin: 8px 0 0; font-weight: 700; }


/* Live box */
.live-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; background: #dc2626; animation: live-pulse 1.4s ease-in-out infinite; }
@keyframes live-pulse { 50% { opacity: 0.3; } }
.live-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.live-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-align: center; }
.live-name { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; }
.live-result { font-family: var(--font-number); font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--result); }
.live-item[data-stage='pending'] .live-result { color: var(--result-pending); }

/* Market cards: a column so the chart links always sit at the bottom of equal-height cards */
.market-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.market { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); text-align: center; transition: background-color 0.6s, box-shadow 0.6s; }
.market-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; }
.market-name { min-width: 0; margin: 0; font-family: var(--font-heading); font-size: 1rem; font-weight: 800; line-height: 1.2; text-align: left; }
.market-status { flex-shrink: 0; padding: 2px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.market-result { margin: 0; padding: 6px 12px; font-family: var(--font-number); font-size: clamp(1.6rem, 6vw, 2rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; line-height: 1.2; white-space: nowrap; color: var(--result); }
.market[data-stage='pending'] .market-result { color: var(--result-pending); }
.r-sep { margin: 0 2px; opacity: 0.6; }
.market-times { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin: 0; padding: 0 12px 10px; font-size: 0.8rem; color: var(--text-muted); }
.market-links { display: flex; margin-top: auto; border-top: 1px solid var(--border); }
.market-links a { flex: 1; min-height: 40px; padding: 10px 8px; font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.market-links a + a { border-left: 1px solid var(--border); }
.market-links a:hover { background: var(--surface-2); }
.market-links a:focus-visible { outline-offset: -3px; } /* cards clip overflow, so keep the ring inside */
.market.is-updated, .draw.is-updated { background: var(--flash); }
/* A game market's result is one number (no open/close panna), whatever the theme does with the three parts */
.market-result.game-result { display: block; }

/* Starline */
.starline-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.starline-card { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.starline-name { margin: 0 0 8px; font-family: var(--font-heading); font-size: 1rem; line-height: 1.25; text-align: center; }
.draws { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.draw { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 6px 4px; border: 1px solid var(--border); border-radius: calc(var(--radius) / 2); font-size: 0.75rem; transition: background-color 0.6s, box-shadow 0.6s; }
.draw-result { font-family: var(--font-number); font-size: 0.95rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--result); }
.draw[data-stage='pending'] .draw-result { color: var(--result-pending); }

/* Charts: the table scrolls inside its own box; the week column stays put while it does */
.chart-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overscroll-behavior-x: contain; }
.jodi-chart, .panel-chart { width: 100%; border-collapse: collapse; font-family: var(--font-number); font-variant-numeric: tabular-nums; text-align: center; }
.jodi-chart { min-width: 440px; }
.panel-chart { min-width: 680px; }
.jodi-chart th, .jodi-chart td, .panel-chart th, .panel-chart td { padding: 6px 4px; border: 1px solid var(--border); }
.jodi-chart thead th, .panel-chart thead th { background: var(--header-bg); color: var(--header-text); font-family: var(--font-heading); font-size: 0.8rem; }
.week { position: sticky; left: 0; z-index: 1; background: var(--surface); font-size: 0.7rem; font-weight: 600; line-height: 1.3; white-space: nowrap; color: var(--text-muted); }
.jc { font-size: 1.1rem; font-weight: 800; }
.pc { font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.pc > span { display: inline-block; line-height: 1.15; vertical-align: middle; }
.pc-jodi { margin: 0 6px; font-size: 1.15rem; font-weight: 800; }
.is-pair { color: var(--pair); }
.is-empty { color: var(--result-pending); }
.chart-note { font-size: 0.8rem; color: var(--text-muted); text-align: center; }
.chart-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.chart-links a, .chart-index-item a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.chart-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.chart-index-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.ci-name { flex: 1; min-width: 0; font-size: 0.9rem; font-weight: 700; }

/* Contact */
.contact { padding: 28px 0; background: var(--surface-2); }
.contact-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.contact-link { display: flex; flex-direction: column; align-items: center; min-width: 150px; padding: 10px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; }
.contact-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.contact-value { font-weight: 700; overflow-wrap: anywhere; }

/* Footer */
.site-footer { padding: 20px 0; background: var(--header-bg); color: var(--header-text); font-size: 0.85rem; text-align: center; }
.site-footer p { margin: 4px 0; }
.footer-meta { opacity: 0.85; }

/* !important so a theme's own animations can never outrank the visitor's preference */
@media (prefers-reduced-motion: reduce) {
  .notice-text { animation: none !important; white-space: normal; }
  .live-dot { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

@media (max-width: 480px) {
  .header-inner { justify-content: center; }
  .site-nav { justify-content: center; }
  .market-list { grid-template-columns: 1fr; }
  .live-list { grid-template-columns: repeat(2, 1fr); }
}

/* Live Board — a bold results-portal look: a purple-to-red
   gradient banner over a hot-pink nav bar, peach page, pink pill section titles, and white
   red-bordered cards with a navy name strip, an orange timing strip and the result split into
   Open / Jodi / Close boxes in bold monospace. Pills follow the client's accent. */
:root {
  --bg: #ffcc99;
  --surface: #ffffff;
  --surface-2: #fff8f8;
  --text: #00094d;
  --text-muted: #6b2b2b;
  --border: #ff182c;
  --accent: #ff00a2;
  --header-bg: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #ff0025 100%);
  --header-text: #ffffff;
  --notice-bg: #ff001d;
  --notice-text: #ffffff;
  --result: #4500bf;
  --result-pending: #8a6f80;
  --pair: #d50000;
  --flash: #fff3b0;
  --radius: 10px;
  --shadow: 0 0 20px rgb(0 0 0 / 35%);
  --font-body: Helvetica, Arial, sans-serif;
  /* Heavy sans for numbers: bold and clear at every size (all digits the same width) */
  --font-number: Helvetica, Arial, sans-serif;
  --wrap-max: 1280px;
  --focus: #00094d;
  /* Theme-only helpers */
  --navy-strip: linear-gradient(45deg, #00094d, #0014e2);
  --orange-strip: linear-gradient(45deg, #ff9800, #ff5722);
  --result-ink: linear-gradient(#4500bf, #670009);
  --purple: #522f92;
  --band: var(--accent);
}

/* Pills follow the accent, darkened only as far as white text needs */
@supports (color: color(from red xyz-d65 x y z)) {
  :root {
    --band: color(from var(--accent) xyz-d65 calc(x * min(1, 0.24 / y)) calc(y * min(1, 0.24 / y)) calc(z * min(1, 0.24 / y)));
  }
}

body { font-style: italic; font-weight: 700; }
.main { padding-top: 16px; }
.block { margin-top: 16px; }

/* Header: gradient banner with the name centred, then a full-width pink nav bar */
.site-header { overflow: hidden; border-bottom: 3px solid #ff0016; }
.header-inner { flex-direction: column; justify-content: center; gap: 8px; padding-top: 10px; padding-bottom: 0; }
.brand { gap: 10px; }
.brand-mark { width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; background: var(--band); color: #fff; text-shadow: 1px 1px 2px #000; }
.brand-logo { width: 40px; height: 40px; border: 2px solid #fff; border-radius: 50%; background: #fff; }
.brand-name { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 900; letter-spacing: 0.03em; text-transform: uppercase; text-shadow: 1px 1px 2px #000; }
.brand-tagline { font-style: normal; font-size: 0.75rem; text-shadow: 1px 1px 2px #000; opacity: 1; }
.site-nav { position: relative; z-index: 0; justify-content: center; gap: 4px; width: 100%; padding: 6px 0; }
.site-nav::before { content: ''; position: absolute; inset: 0 -100vmax; z-index: -1; background: #ff00a2; }
.site-nav a { min-height: 34px; padding: 4px 12px; border-bottom: 2px solid transparent; border-radius: 6px; color: #fff; font-style: normal; font-size: 0.9rem; font-weight: 700; text-shadow: 1px 1px 2px #000; }
.site-nav a:hover { background: rgb(255 255 255 / 20%); }
.site-nav a[aria-current='page'] { border-bottom-color: #ffe500; background: rgb(255 255 255 / 25%); color: #fff; }

/* Notice: the red ticker bar */
.notice { border-bottom: 2px solid #b00014; }
.notice-text { padding: 6px 0; font-style: normal; font-size: 0.85rem; letter-spacing: 0.02em; text-shadow: 1px 1px 2px #000; }

/* Titles: pink pills with a white rim */
.page-title,
.block-title { display: table; margin: 0 auto 12px; padding: 5px 14px; border: 2px solid #fff; border-radius: 0.75em; background: var(--band); color: #fff8f8; font-style: normal; font-weight: 700; letter-spacing: 1px; text-shadow: 1px 1px 2px #000; text-transform: uppercase; box-shadow: 0 0 20px rgb(0 0 0 / 30%); }
.page-title { font-size: clamp(1.1rem, 3.5vw, 1.45rem); }
.block-title { font-size: 1.05rem; }
.page-intro { color: var(--text); }

/* Live box and Starline: white sections with a red frame */
.live,
.starline { padding: 14px; border: 2px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: 0 0 20px rgb(0 0 0 / 25%); }
.live .live-dot { background: #fff; box-shadow: 0 0 0 2px #ff1744; }
/* Compact: two to a row on phones, so a long live list stays short */
.live-list { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 6px; }
.live-item { padding: 6px 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); }
@media (max-width: 600px) { .live-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .live-result { font-size: 1rem; } }
.live-name { font-style: normal; font-size: 0.75rem; color: var(--text); }
.live-result { font-size: 1.15rem; background: var(--result-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.live-item[data-stage='pending'] .live-result { background: none; -webkit-text-fill-color: currentColor; }

/* Results: one long framed list, as on the big result portals. Each row has the market name,
   the result and its times in the middle, with the Jodi and Panel buttons on its left and right
   edges; rows are split by red rules */
.market-list { display: block; overflow: hidden; border: 3px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.market { position: relative; display: block; padding: 8px 78px 10px; border: 0; border-radius: 0; background: #fff; box-shadow: none; }
.market:nth-child(even) { background: #fff8f0; }
.market + .market { border-top: 2px solid var(--border); }
.market-head { justify-content: center; gap: 8px; padding: 0; }
.market-name { font-size: clamp(1.05rem, 4vw, 1.4rem); font-style: normal; font-weight: 900; letter-spacing: 0.02em; text-align: center; text-transform: uppercase; color: var(--text); text-shadow: 1px 1px 2px #fff; }
.market-status { display: none; }
/* Open declared, close still to come: the row flashes yellow and says LIVE */
.market[data-stage='open'] .market-status { display: inline-block; border: 0; border-radius: 6px; padding: 2px 8px; background: #ff0025; color: #fff; font-style: normal; font-size: 0.65rem; font-weight: 900; letter-spacing: 0.08em; animation: lb-blink 0.8s steps(1) infinite; }
.market[data-stage='open'] { animation: lb-row 1s steps(1) infinite; }
@keyframes lb-row { 50% { background-color: #fff59d; } }
.market-result { display: block; padding: 2px 0 0; font-size: clamp(1.3rem, 5vw, 1.7rem); letter-spacing: 0.02em; white-space: nowrap; background: var(--result-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.market-result .r-sep { margin: 0 1px; opacity: 1; }
.market[data-stage='pending'] .market-result { background: none; color: var(--result-pending); -webkit-text-fill-color: currentColor; }
.market-times { justify-content: center; gap: 2px 18px; margin: 0; padding: 2px 0 0; font-style: normal; font-size: 0.82rem; color: #6b2b2b; }
.market-links { position: absolute; top: 50%; right: 8px; left: 8px; justify-content: space-between; margin: 0; border: 0; transform: translateY(-50%); pointer-events: none; }
.market-links a,
.market-links a + a { flex: 0 0 auto; min-height: 36px; padding: 7px 11px; border: 2px solid #fff; border-radius: 8px; background: var(--purple); color: #fff; font-style: normal; font-size: 0.82rem; text-shadow: 1px 1px 2px #222; box-shadow: 0 0 0 1px var(--purple), 0 2px 6px rgb(0 0 0 / 30%); pointer-events: auto; }
.market-links a:hover { background: #ff00a2; box-shadow: 0 0 0 1px #ff00a2, 0 0 13px 3px rgb(255 0 162 / 35%); }
.market-links a:focus-visible { outline-offset: 2px; }
@media (max-width: 400px) {
  .market { padding-right: 64px; padding-left: 64px; }
  .market-links a, .market-links a + a { padding: 6px 7px; font-size: 0.75rem; }
}

/* Starline: navy strip per table, small pink-edged cells */
.starline-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.starline-card { overflow: hidden; padding: 0; border: 2px solid var(--border); background: #fff; box-shadow: var(--shadow); }
.starline-name { margin: 0; padding: 6px 10px; background: var(--navy-strip); color: #fff; font-style: normal; font-weight: 900; text-align: left; text-shadow: 1px 1px 2px #000; }
.draws { gap: 4px; padding: 8px; }
.draw { border: 1px solid #ffb3b3; border-radius: 4px; background: var(--surface-2); }
.draw-time { color: #8a000c; font-style: normal; }
.draw-result { background: var(--result-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.draw[data-stage='pending'] .draw-result { background: none; -webkit-text-fill-color: currentColor; }

/* Highlights: a result that has just come in turns its row bright yellow */
.market.is-updated { background: #ffff00; animation: none; }
.draw.is-updated { background: var(--flash); }

/* Charts: blue frame, orange heading row, red grid */
.chart-scroll { border: 2px solid #0014e2; background: #fff; box-shadow: 0 0 20px rgb(0 0 0 / 25%); }
.jodi-chart th, .jodi-chart td, .panel-chart th, .panel-chart td { border-color: var(--border); }
.jodi-chart thead th, .panel-chart thead th { background: var(--orange-strip); color: #fff; font-style: normal; text-shadow: 1px 1px 2px #000; }
.week { color: #0014e2; font-style: normal; }
.jc, .pc-jodi { color: #4a0010; }
.pc-open, .pc-close { color: var(--text); }
.jc.is-pair, .is-pair .pc-jodi { color: var(--pair); }
.jc.is-empty, .is-empty .pc-jodi { color: var(--result-pending); }
.chart-links a, .chart-index-item a { border: 1px solid #e6e6e6; border-radius: 8px; background: var(--purple); color: #fff; font-style: normal; text-shadow: 1px 1px 2px #222; }
.chart-index-item { border: 2px solid var(--border); background: #fff; box-shadow: 0 0 10px rgb(0 0 0 / 20%); }
.ci-name { color: var(--text); font-style: normal; }

/* Contact: white section with round yellow-orange buttons */
.contact { background: none; }
.contact .wrap { padding: 14px; border: 2px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: 0 0 20px rgb(0 0 0 / 25%); }
.contact-link { border: 2px solid #fff; border-radius: 80px; background: radial-gradient(#ffe500, #ff9800); color: #000; font-style: normal; text-shadow: 1px 1px 2px #fff; box-shadow: 0 0 10px -3px #000; }
.contact-link:hover { box-shadow: 0 0 10px 0 #000; }
.contact-label { color: #8a000c; }

/* Footer: the same gradient as the banner */
.site-footer { border-top: 3px solid #ff0016; font-style: normal; text-shadow: 1px 1px 2px #000; }
.footer-meta { color: #ffcc99; opacity: 1; }

/* ── Lights and motion: the board never sits still ───────────────────────────
   (base.css stops all of it for visitors whose device asks for reduced motion) */

/* The banner's colours drift, with a string of bulbs chasing along its bottom edge */
.site-header,
.site-footer { background-size: 300% 300%; animation: lb-drift 10s ease-in-out infinite; }
.site-header::after {
  content: '';
  display: block;
  height: 12px;
  background:
    radial-gradient(circle, #ffe500 0 3px, transparent 3.6px) 0 50% / 20px 12px repeat-x,
    radial-gradient(circle, #00e5ff 0 3px, transparent 3.6px) 10px 50% / 20px 12px repeat-x,
    #1a0033;
  animation: lb-bulbs 0.6s steps(1) infinite;
}
@keyframes lb-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes lb-bulbs { 50% { background-position: 10px 50%, 0 50%, 0 0; } }

/* The site name shimmers gold */
.brand-name {
  background: linear-gradient(90deg, #fff 20%, #ffe500 40%, #ff9a00 50%, #ffe500 60%, #fff 80%) 0 0 / 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(1px 1px 1px #000);
  animation: lb-textclip 2.5s linear infinite;
}
@keyframes lb-textclip { to { background-position: 200% center; } }

/* Pill titles cycle through pink, red, green and blue */
.page-title,
.block-title { animation: lb-status 5s linear infinite; }
.live .live-dot { animation: lb-blink 0.8s steps(1) infinite; }
@keyframes lb-blink { 50% { opacity: 0; } }

/* Welcome line beside the picture: a red-framed box whose frame flashes */
.welcome { padding: 5px 8px; border: 2px solid #ff182c; border-radius: 10px; background: #fff; box-shadow: 0 0 20px rgb(0 0 0 / 40%); animation: lb-frame 1.2s steps(1) infinite; }
.welcome-text { color: #00094d; font-size: clamp(0.95rem, 3.2vw, 1.1rem); font-weight: 900; }
@keyframes lb-frame { 50% { border-color: #ffe500; } }

/* Headline: a flashing banner on a running rainbow */
.headline {
  border: 3px solid #fff;
  border-radius: 14px;
  background: linear-gradient(90deg, #ff0025, #ff00a2, #7b00ff, #ff00a2, #ff0025) 0 0 / 300% 100%;
  color: #fff;
  font-style: italic;
  font-weight: 900;
  text-shadow: 2px 2px 3px #000;
  box-shadow: 0 0 0 3px #ff0025, 0 0 24px rgb(255 0 120 / 55%);
  animation: lb-drift 4s linear infinite;
}
.headline span { display: inline-block; animation: lb-flash 1s steps(1) infinite; }
@keyframes lb-flash { 50% { color: #ffe500; transform: scale(1.04); } }

/* Channel and WhatsApp buttons: bright pills with a pulsing ring */
.promo-link { border: 2px solid #fff; font-style: normal; text-shadow: 1px 1px 2px #000; animation: lb-ring 1.6s ease-out infinite; }
.promo-telegram { --ring: 41 182 246; background: linear-gradient(45deg, #0077b5, #29b6f6); }
.promo-whatsapp { --ring: 37 211 102; background: linear-gradient(45deg, #0f7b4f, #25d366); }
.promo-cta { --ring: 255 152 0; background: radial-gradient(#ffe500, #ff9800); color: #000; text-shadow: 1px 1px 2px #fff; }
@keyframes lb-ring { 0% { box-shadow: 0 0 0 0 rgb(var(--ring) / 75%); } 100% { box-shadow: 0 0 0 14px rgb(var(--ring) / 0%); } }

/* Our Market: the site's own markets, in a pink frame that flashes, stars either side */
.our-market { padding: 14px; border: 3px solid #ff00a2; border-radius: var(--radius); background: #fff; box-shadow: 0 0 24px rgb(255 0 162 / 35%); animation: lb-frame 1.4s steps(1) infinite; }
.our-market .block-title::before,
.our-market .block-title::after { content: '★'; display: inline-block; margin: 0 8px; color: #ffe500; animation: lb-blink 0.8s steps(1) infinite; }
.our-market .market-list { border-color: #ff00a2; box-shadow: none; }
/* The site's own markets: the Play button sits under the result, so long text never runs under it */
.our-market .market { padding: 8px 12px 10px; }
.our-market .market-links { position: static; justify-content: center; margin-top: 6px; transform: none; }
.our-market .market:not([data-stage='complete']) .game-result { font-size: clamp(1.1rem, 4.5vw, 1.4rem); }
.market-result.game-result { font-size: clamp(1.6rem, 6vw, 2.1rem); }
.our-market .market-links a { animation: lb-status 5s linear infinite; }

/* API box: the banner's drifting gradient in a red frame, a gold shimmering title and a pink
   button that changes colour and pulses */
.api-box {
  border: 2px solid #ff182c;
  background: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #ff0025 100%) 0 0 / 300% 300%;
  color: #fff;
  font-style: italic;
  text-shadow: 1px 1px 2px #000;
  box-shadow: 0 0 20px rgb(0 0 0 / 35%);
  animation: lb-drift 10s ease-in-out infinite;
}
.api-title {
  background: linear-gradient(90deg, #fff 20%, #ffe500 40%, #ff9a00 50%, #ffe500 60%, #fff 80%) 0 0 / 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(1px 1px 1px #000);
  font-weight: 900;
  animation: lb-textclip 2.5s linear infinite;
}
.api-button {
  --ring: 255 0 162;
  border: 2px solid #fff;
  background: #ff00a2;
  color: #fff;
  font-style: italic;
  text-shadow: 1px 1px 2px #000;
  box-shadow: none;
  animation: lb-status 5s linear infinite, lb-ring 1.6s ease-out infinite;
}
.api-button:hover { filter: brightness(1.1); }
.api-line { font-weight: 800; }
.api-line::before { content: '✔ '; color: #ffe500; }

/* ── Portal content (lucky number, chart lists, rules, panna list, FAQ, disclaimer) ── */

/* Long reading is easier upright and lighter than the board's bold italic */
.lucky-note, .guide, .faq, .disclaimer { font-style: normal; font-weight: 500; }
.guide b, .faq summary, .guide h3, .guide th { font-weight: 800; }

/* Today's lucky number: two framed boxes with big shimmering digits */
.lucky { padding: 12px; border: 3px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.lucky-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px; }
.lucky-box { padding: 10px; border: 2px solid #ff00a2; border-radius: 10px; background: #fff8f0; text-align: center; animation: lb-frame 1.4s steps(1) infinite; }
.lucky-label { margin: 0; color: #8a000c; font-style: normal; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
.lucky-value { margin: 4px 0 0; font-family: var(--font-number); font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 900; letter-spacing: 0.06em; background: var(--result-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lucky-note { margin: 10px 0 0; font-size: 0.78rem; color: #6b2b2b; text-align: center; }

/* Jodi and Panel chart lists: every market as a purple button */
.chart-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.chart-list-box { padding: 12px; border: 3px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.chart-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chart-list a { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 12px; border: 1px solid #e6e6e6; border-radius: 8px; background: var(--purple); color: #fff; font-style: normal; font-size: 0.8rem; text-decoration: none; text-shadow: 1px 1px 2px #222; }
.chart-list a:hover { background: #ff00a2; }

/* Rules and guide: white cards in the red frame */
.guide { display: grid; gap: 14px; }
.guide > .block-title { margin-bottom: 0; }
.guide-card { padding: 14px 16px; border: 3px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); color: var(--text); }
.guide-card h3 { margin: 0 0 8px; padding: 4px 10px; border-radius: 8px; background: var(--navy-strip); color: #fff; font-size: 1rem; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px #000; }
.guide-card p { margin: 8px 0; }
.guide-example { margin: 10px 0; padding: 10px; border: 2px dashed #ff00a2; border-radius: 10px; background: #fff8f0; font-family: var(--font-number); }
.guide-example p { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 6px; margin: 4px 0; }
.guide-example u { text-decoration-color: #ff0025; text-decoration-thickness: 2px; }
.guide-example .guide-result { display: block; margin-top: 8px; text-align: center; font-size: 1.3rem; }
.guide-example .guide-result b { background: var(--result-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 480px) { .guide-example p { grid-template-columns: 1fr; gap: 0; padding-bottom: 6px; border-bottom: 1px solid #ffd2d2; } }
.guide-table { width: 100%; margin: 6px 0; border-collapse: collapse; font-size: 0.9rem; }
.guide-table caption { padding: 4px 0 8px; color: #8a000c; font-weight: 800; text-align: left; }
.guide-table th, .guide-table td { padding: 7px 8px; border: 1px solid #ffb3b3; text-align: left; vertical-align: top; }
.guide-table thead th { background: var(--orange-strip); color: #fff; text-shadow: 1px 1px 2px #000; }
.guide-table tbody th { width: 30%; color: var(--text); white-space: nowrap; }
.guide-table .rate { color: #4500bf; font-family: var(--font-number); font-weight: 900; white-space: nowrap; }
.guide-small { font-size: 0.8rem; color: #6b2b2b; }
.rules-list { margin: 8px 0 0; padding-left: 1.3em; }
.rules-list li { margin: 6px 0; }
.rules-list li::marker { color: #ff00a2; font-weight: 900; }
.guide-cta { text-align: center; }
.guide-button { --ring: 255 0 162; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 26px; border: 2px solid #fff; border-radius: 14px; background: #ff00a2; color: #fff; font-style: italic; font-weight: 900; text-decoration: none; text-shadow: 1px 1px 2px #000; animation: lb-status 5s linear infinite, lb-ring 1.6s ease-out infinite; }

/* Every panna by ank: a fold-out list */
.panna-list summary, .faq-item summary { cursor: pointer; list-style: none; }
.panna-list summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker { display: none; }
.panna-list > summary { padding: 6px 10px; border-radius: 8px; background: var(--navy-strip); color: #fff; font-weight: 800; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px #000; }
.panna-list > summary::after { content: ' ▼'; font-size: 0.75em; }
.panna-list[open] > summary::after { content: ' ▲'; }
.panna-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; margin-top: 12px; }
.panna-ank { padding: 8px 10px; border: 2px solid #ffb3b3; border-radius: 8px; background: #fff8f0; }
.panna-ank-title { margin: 0 0 4px; color: #ff00a2; font-size: 1.05rem; font-weight: 900; text-align: center; }
.panna-row { margin: 4px 0; font-family: var(--font-number); font-size: 0.9rem; font-weight: 700; line-height: 1.5; word-spacing: 0.15em; }
.panna-kind { display: inline-block; min-width: 4.4em; margin-right: 4px; color: #8a000c; font-family: var(--font-body); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; }

/* Questions and answers */
.faq { padding: 12px; border: 3px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.faq-item { border-bottom: 1px solid #ffd2d2; }
.faq-item:last-child { border-bottom: 0; }
.faq-item summary { position: relative; padding: 10px 28px 10px 4px; color: var(--text); }
.faq-item summary::after { content: '+'; position: absolute; top: 50%; right: 6px; color: #ff00a2; font-size: 1.3rem; font-weight: 900; transform: translateY(-50%); }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin: 0 4px 12px; color: #3a2a4a; }

/* Disclaimer: plain and readable in a dark red frame */
.disclaimer { padding: 12px 14px; border: 3px solid #8a000c; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.disclaimer p { margin: 0; font-size: 0.85rem; line-height: 1.55; color: #3a2a4a; }

/* The refresh button that stays in the corner */
.float-refresh { --ring: 255 0 162; position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 2px solid #fff; border-radius: 999px; background: linear-gradient(45deg, #ff0025, #ff00a2); color: #fff; font-style: normal; font-weight: 900; text-decoration: none; text-shadow: 1px 1px 2px #000; box-shadow: 0 4px 14px rgb(0 0 0 / 35%); animation: lb-ring 1.6s ease-out infinite; }
.float-refresh span { font-size: 1.15rem; }
/* On phones just the round icon, so it covers less of the market rows */
@media (max-width: 600px) {
  .float-refresh { width: 48px; height: 48px; justify-content: center; padding: 0; font-size: 0; }
  .float-refresh span { font-size: 1.5rem; }
}
@media print { .float-refresh { display: none; } }

/* ── Every number in heavy type ── */
.market-result, .live-result, .draw-result, .jc, .pc, .pc-open, .pc-close, .pc-jodi, .lucky-value, .panna-row, .guide-example,
.guide-table .rate, .market-times time, .vip-big, .vip-chips b, .calc-chips b, .astro-nums b, .dream-nums b, .vip-table td, .vip-bar-n, .vip-dl dd {
  font-family: var(--font-number);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.panna-row { letter-spacing: 0.02em; }

/* ── Channel and pricing buttons side by side on phones ── */
@media (max-width: 600px) {
  .promo-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .promo-links .promo-link { justify-content: center; min-height: 46px; padding: 8px 6px; font-size: 0.8rem; line-height: 1.15; text-align: center; }
  .promo-links .promo-link:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── VIP Zone ── */
.vip-fab { --ring: 255 229 0; position: fixed; left: max(14px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 16px; border: 2px solid #fff; border-radius: 999px; background: linear-gradient(45deg, #231557, #7b00ff, #ff00a2); background-size: 200% 200%; color: #ffe500; font-style: italic; font-weight: 900; text-decoration: none; text-shadow: 1px 1px 2px #000; box-shadow: 0 4px 14px rgb(0 0 0 / 35%); animation: lb-drift 4s linear infinite, lb-ring 1.6s ease-out infinite; }
@media print { .vip-fab { display: none; } }
.vip-pop { display: none; }
.vip-pop:popover-open { display: grid; place-items: center; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: rgb(10 0 30 / 70%); }
.vip-pop-box { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 16px; border: 3px solid #ffe500; border-radius: 16px; background: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #ff0025 100%); box-shadow: 0 0 40px rgb(255 0 162 / 55%); }
.vip-pop-title { margin: 0 0 12px; color: #ffe500; font-size: 1.15rem; font-weight: 900; text-align: center; text-shadow: 2px 2px 3px #000; }
.vip-close { position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 15%); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.vip-menu { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vip-menu-grid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.vip-item { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 2px solid #fff; border-radius: 12px; background: #fff; color: var(--text); font-style: normal; text-decoration: none; box-shadow: 0 2px 8px rgb(0 0 0 / 25%); }
.vip-item:hover { border-color: #ffe500; background: #fff8f0; }
.vip-icon { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(45deg, #ff00a2, #7b00ff); font-size: 1.25rem; }
.vip-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.vip-text strong { font-weight: 900; text-transform: uppercase; }
.vip-text small { color: #6b2b2b; font-size: 0.78rem; font-weight: 600; }
.vip-go { color: #ff00a2; font-weight: 900; }

/* VIP pages */
.vip-crumbs { margin: 0 0 8px; font-style: normal; font-size: 0.8rem; }
.vip-crumbs a { color: #44107a; }
.vip-intro { font-style: normal; font-weight: 600; }
.vip-zone .vip-menu { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.vip-note { max-width: 70ch; margin: 16px auto 0; padding: 8px 12px; border: 2px dashed #8a000c; border-radius: 10px; background: #fff; color: #5a1a1a; font-style: normal; font-size: 0.82rem; font-weight: 600; text-align: center; }
.vip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 0 16px; }
.vip-card { padding: 14px; border: 3px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); font-style: normal; color: var(--text); }
.vip-card p { font-weight: 500; }
.vip-card-title { margin: 0 0 10px; padding: 5px 10px; border-radius: 8px; background: var(--navy-strip); color: #fff; font-size: 0.95rem; font-weight: 900; text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px #000; }
.vip-big { margin: 4px 0; font-size: clamp(1.8rem, 7vw, 2.6rem); text-align: center; background: var(--result-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.vip-small { margin: 4px 0; color: #6b2b2b; font-size: 0.82rem; font-weight: 600; }
.vip-center, .vip-terminal .vip-small, .vip-scratch .vip-small { text-align: center; }
.vip-form { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 10px; margin: 8px 0 12px; font-style: normal; }
.vip-form label { display: flex; flex-direction: column; gap: 4px; color: #8a000c; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; }
.vip-form input, .vip-form select { min-width: 160px; min-height: 42px; padding: 6px 10px; border: 2px solid #ff00a2; border-radius: 8px; background: #fff; color: var(--text); font: 700 1rem var(--font-body); }
.vip-btn { --ring: 255 0 162; min-height: 42px; padding: 8px 18px; border: 2px solid #fff; border-radius: 10px; background: #ff00a2; color: #fff; font: italic 900 0.95rem var(--font-body); text-shadow: 1px 1px 2px #000; cursor: pointer; box-shadow: 0 0 0 2px #ff00a2; }
.vip-btn:hover { filter: brightness(1.1); }
.vip-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vip-chips li { display: flex; flex-direction: column; align-items: center; min-width: 64px; padding: 6px 8px; border: 2px solid #ffb3b3; border-radius: 10px; background: #fff8f0; }
.vip-chips b { font-size: 1.35rem; color: #4500bf; }
.vip-chips small { color: #6b2b2b; font-size: 0.68rem; font-weight: 700; }
.vip-bars { display: grid; gap: 4px; }
.vip-bar { display: grid; grid-template-columns: 1.6em 1fr 5.5em; align-items: center; gap: 8px; }
.vip-bar-digit { font: 900 1.1rem var(--font-number); color: #4500bf; text-align: center; }
.vip-bar-track { height: 14px; overflow: hidden; border-radius: 7px; background: #ffe4ec; }
.vip-bar-fill { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, #ff00a2, #7b00ff); }
.vip-bar-n { font-size: 0.85rem; text-align: right; }
.vip-bar-n small { color: #6b2b2b; font-weight: 600; }
.vip-dl { display: grid; gap: 6px; margin: 0; }
.vip-dl div { display: flex; justify-content: space-between; padding: 6px 8px; border-bottom: 1px solid #ffd2d2; }
.vip-dl dt { font-weight: 700; }
.vip-dl dd { margin: 0; color: #4500bf; font-size: 1.1rem; }
.vip-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.vip-table th, .vip-table td { padding: 6px 8px; border: 1px solid #ffb3b3; text-align: left; }
.vip-table thead th { background: var(--orange-strip); color: #fff; text-shadow: 1px 1px 2px #000; }
.vip-table td { color: #4500bf; }
.vip-family b { display: inline-block; margin: 0 4px 2px 0; padding: 1px 6px; border-radius: 6px; background: #f3e8ff; }
.vip-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; }
.vip-links a, .vip-card a { color: #44107a; font-weight: 800; }

/* Scratch card */
.scratch-wrap { position: relative; width: min(320px, 100%); aspect-ratio: 16 / 9; margin: 6px auto; overflow: hidden; border: 3px solid #ffe500; border-radius: 14px; background: radial-gradient(#fff8d6, #ffd36b); }
.scratch-prize { display: grid; place-content: center; height: 100%; text-align: center; }
.scratch-prize .vip-big { margin: 0; font-size: 3rem; }
.scratch-cover { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.vip-scratch { text-align: center; }

/* Astrology */
.astro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.astro-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 8px; border: 3px solid var(--border); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); font-style: normal; text-align: center; }
.astro-card.is-mine { border-color: #ffe500; background: #fff8d6; box-shadow: 0 0 0 3px #ff00a2, var(--shadow); }
.astro-sym { font-size: 2rem; line-height: 1; color: #7b00ff; }
.astro-card strong { font-weight: 900; text-transform: uppercase; }
.astro-card small { color: #6b2b2b; font-weight: 700; }
.astro-nums { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 6px; font-size: 0.85rem; }
.astro-nums > b { font-size: 2.2rem; line-height: 1; background: var(--result-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.astro-nums b { color: #4500bf; }

/* Calculator and dream */
.calc-out { font-style: normal; }
.calc-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: 6px 0; }
.calc-row > span:first-child { min-width: 7em; color: #8a000c; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; }
.calc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.calc-chips b { padding: 2px 7px; border-radius: 6px; background: #f3e8ff; color: #4500bf; }
.calc-ank { margin-top: 8px; padding: 6px 8px; border: 2px solid #ffb3b3; border-radius: 8px; background: #fff8f0; }
.calc-ank-title { margin: 0; color: #ff00a2; font-weight: 900; }
.dream-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.dream-chips button { min-height: 34px; padding: 4px 12px; border: 2px solid #ff00a2; border-radius: 999px; background: #fff; color: #44107a; font: 800 0.85rem var(--font-body); cursor: pointer; }
.dream-chips button:hover { background: #ffe4f3; }
.dream-out { margin-top: 10px; text-align: center; }
.dream-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dream-nums p { display: flex; flex-direction: column; margin: 0; padding: 10px 4px; border: 2px solid #ff00a2; border-radius: 10px; background: #fff8f0; }
.dream-nums span { color: #8a000c; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; }
.dream-nums b { font-size: 1.9rem; background: var(--result-ink); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 600px) { .vip-fab { min-height: 40px; padding: 6px 12px; font-size: 0.85rem; } }