/* Kuber Games results website - mobile-first stylesheet.
   Every chart is a fixed-layout table that fits the screen width (no sideways
   swiping); you scroll vertically and the day header stays stuck to the top. */
:root {
  --bg: #ece7dd;
  --card: #ffffff;
  --ink: #1b1b1f;
  --muted: #5f6368;
  --maroon: #7a0c0c;
  --maroon-2: #a31414;
  --gold: #f2b724;
  --gold-2: #ffd766;
  --blue: #0d47a1;
  --red: #c62828;
  --green: #1b7a33;
  --orange: #bf360c;
  --purple: #4a148c;
  --pending: #6d6d6d;
  --mint: #f1fbf5;
  --sky: #eaf4ff;
  --cream: #fff5e1;
  --hero-2: #4a0707;
  --title-2: #c62828;
  --radius: 14px;
  --shadow: 0 2px 6px rgba(0, 0, 0, .12);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: "Segoe UI", Roboto, Arial, "Noto Sans", "Noto Sans Devanagari", sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.45; font-size: 15px; overflow-x: hidden; }
a { color: var(--blue); }
img, svg { max-width: 100%; }
table { border-collapse: separate; border-spacing: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.wrap { max-width: 680px; margin: 0 auto; padding: 6px; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 6px 10px; z-index: 99; border-radius: 6px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.center { text-align: center; }
.pad { padding: 10px; }
.small { font-size: 14px; margin: 6px 0; }
.pending { color: var(--pending); }

/* ---- header ---- */
.site-head { background: linear-gradient(180deg, var(--maroon), var(--maroon-2)); color: #fff; box-shadow: var(--shadow); }
.site-head .brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; max-width: 680px; margin: 0 auto; padding: 10px 12px 6px; }
.site-head .brand img { flex: 0 0 44px; }
.site-head .brand img.brand-logo { flex: 0 0 auto; height: 44px; width: auto; max-width: 200px; object-fit: contain; background: #fff; border-radius: 8px; padding: 2px; }
.site-head :focus-visible { outline-color: var(--gold-2); }
.brand-name { display: block; font-weight: 800; font-size: 22px; letter-spacing: .5px; line-height: 1.1; }
.brand-tag { display: block; font-size: 12px; color: var(--gold-2); }
.site-nav { display: flex; flex-wrap: nowrap; gap: 4px; max-width: 680px; margin: 0 auto; padding: 2px 8px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 34px; color: #fff; text-decoration: none; font-weight: 700; font-size: 13px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .14); line-height: 1.2; }

/* ---- notice / alert / breadcrumbs ---- */
.notice { display: flex; align-items: center; gap: 8px; background: #fff8e1; border-bottom: 1px solid #f1d38a; padding: 4px 6px 4px 10px; font-size: 14px; font-weight: 600; color: #5d4037; }
.marquee { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; cursor: pointer; padding: 4px 0; }
.marquee span { display: inline-block; padding-left: 100%; animation: marq 18s linear infinite; }
.marquee:hover span { animation-play-state: paused; }
.notice.paused .marquee { white-space: normal; }
.notice.paused .marquee span { display: inline; padding-left: 0; animation: none; }
.notice-pause { flex: 0 0 auto; min-width: 40px; min-height: 40px; border: 0; background: transparent; color: #5d4037; font-size: 12px; cursor: pointer; border-radius: 8px; }
@keyframes marq { to { transform: translateX(-100%); } }
.alert { background: #fdecea; color: var(--maroon); text-align: center; padding: 8px; font-weight: 700; }
.crumbs { font-size: 12px; color: var(--muted); padding: 8px 6px 6px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.crumbs::-webkit-scrollbar { display: none; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.crumbs li + li::before { content: "\203A"; margin-right: 4px; color: #999; }
.crumbs a { color: var(--blue); text-decoration: none; font-weight: 700; display: inline-block; padding: 6px 0; }

/* ---- festival greeting banner + first-visit pop-up ---- */
.fest-banner { text-align: center; color: #fff; background: linear-gradient(90deg, var(--maroon), var(--title-2), var(--maroon)); padding: 7px 10px; font-size: 14px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.fest-banner .fest-hi { display: block; font-size: 13px; opacity: .95; }
.fest-pop { position: fixed; inset: 0; background: rgba(0, 0, 0, .65); z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; }
.fest-pop[hidden] { display: none; }
.fest-pop-card { background: #fff; border-radius: 18px; max-width: 340px; width: 100%; text-align: center; padding: 22px 18px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); border-top: 6px solid var(--maroon); animation: festpop .35s ease-out; }
.fest-pop-emoji { font-size: 54px; line-height: 1.15; }
.fest-pop-title { font-size: 22px; font-weight: 800; color: var(--maroon); margin-top: 6px; }
.fest-pop-hi { font-size: 15px; font-weight: 700; color: #444; margin: 4px 0 2px; }
.fest-pop-from { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
@keyframes festpop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- cards & section titles ---- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; margin-top: 8px; }
.card.tight { padding: 0; overflow: clip; }
.card.mint { background: var(--mint); }
.card.cream { background: var(--cream); }
.card.sky { background: var(--sky); }
.sec-title { margin: 10px 0 0; padding: 10px 12px; border-radius: var(--radius); text-align: center; font-weight: 800; font-size: 18px; color: #fff; background: linear-gradient(90deg, var(--maroon), var(--title-2)); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); box-shadow: var(--shadow); }
.sec-title.gold { background: linear-gradient(90deg, #f57f17, var(--gold)); color: #1b1b1f; text-shadow: none; }
.sec-title.blue { background: linear-gradient(90deg, #0d47a1, #1976d2); }
.sec-title.purple { background: linear-gradient(90deg, #4a148c, #7b1fa2); }
.sub { font-size: 16px; color: var(--maroon); margin: 12px 0 4px; text-align: center; }

/* ---- welcome ---- */
.welcome { text-align: center; }
.welcome h1 { margin: 6px 0 2px; font-size: clamp(19px, 5.6vw, 24px); color: var(--maroon); line-height: 1.2; }
.welcome .hindi { font-size: 16px; color: var(--purple); font-weight: 700; margin-top: 4px; }
.welcome p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

/* ---- lucky ---- */
.lucky { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; text-align: center; margin-top: 8px; }
.lucky div div { background: #fff; border-radius: 10px; padding: 8px; }
.lucky .lbl { font-size: 12px; color: var(--red); font-weight: 700; text-transform: uppercase; background: none; padding: 0 0 2px; }
.lucky .val { font-size: clamp(19px, 6vw, 24px); font-weight: 800; color: var(--blue); font-style: italic; }
/* Final Ank: one market at a time on a single line (same height as the Ank box),
   rolling round and round. site.js duplicates the items so the loop is seamless. */
.lucky .val.fank-scroll { position: relative; height: 49px; overflow: hidden; cursor: pointer; }   /* same height as the Ank box */
/* fade the text into the white pill at both ends (an overlay, so the pill's own
   rounded edges stay crisp - a mask on the box would soften those too) */
.lucky .val.fank-scroll::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, #fff 0, rgba(255, 255, 255, 0) 13px, rgba(255, 255, 255, 0) calc(100% - 13px), #fff 100%);
}
/* padding:0 is load-bearing: ".lucky div div" above also matches the track, and its
   8px would make translateY(-50%) travel one copy PLUS 8px - a lurch every lap */
.lucky .val.fank-scroll .fank-track { display: block; padding: 0; background: none; }
.lucky .val.fank-scroll .fank-track span {
  display: block; height: 33px; line-height: 33px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-size: clamp(15px, 4.8vw, 19px);
}
.lucky .val.fank-scroll .fank-track.fank-rolling { animation: fank-roll linear infinite; }
@keyframes fank-roll { from { transform: translateY(0); } to { transform: translateY(-50%); } }
/* pause while read: hover, keyboard focus, or tap (site.js toggles .fank-frozen) */
.lucky .val.fank-scroll:hover .fank-track,
.lucky .val.fank-scroll:focus-visible .fank-track,
.lucky .val.fank-scroll.fank-frozen .fank-track { animation-play-state: paused; }
/* :focus-visible, not :focus-within - a mouse click must not leave it stuck paused */
.lucky .val.fank-scroll:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lucky .val.fank-scroll.fank-frozen::after {
  content: '\275A\275A'; position: absolute; top: 2px; right: 3px; font-size: 8px; z-index: 2;
  line-height: 1; color: var(--red); opacity: .7; font-style: normal;
}

/* ---- live strip (home) ---- */
.live-head { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 17px; letter-spacing: .5px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff1744; box-shadow: 0 0 0 0 rgba(255, 23, 68, .6); animation: pulse 1.4s infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(255, 23, 68, 0); } }
.card.sky { padding: 8px 6px 6px; }   /* the LIVE box: its items carry their own frame, so the card stays tight */
.live-grid { display: grid; gap: 5px; margin-top: 6px; }
.live-item { text-align: center; background: #fff; border-radius: 12px; padding: 5px 6px 6px; border: 1px solid #f1d38a; }
.live-item .nm { color: var(--red); font-weight: 800; font-size: 15px; letter-spacing: .5px; }
.live-item .rs { color: var(--blue); font-weight: 800; font-size: clamp(17px, 5.6vw, 22px); font-style: italic; letter-spacing: .5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-item .tm { font-size: 11px; color: var(--muted); margin-bottom: 3px; }
.live-item .btn.sm { min-height: 28px; padding: 2px 12px; font-size: 12px; }
.card.sky .updated { margin-top: 4px; }
.updated { font-size: 12px; color: var(--muted); text-align: center; margin-top: 6px; }

/* ---- buttons & badges (min 44px tap height) ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; cursor: pointer; border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: 14px; text-decoration: none; color: #fff; background: var(--blue); font-family: inherit; line-height: 1.2; }
.btn.sm { min-height: 40px; padding: 6px 14px; font-size: 13px; }
.btn.green { background: var(--green); }
.btn.gold { background: var(--gold); color: #1b1b1f; }
.btn.purple { background: var(--purple); }
.btn.grey { background: var(--pending); }
.btn.ghost { background: rgba(0, 0, 0, .25); border: 1px solid rgba(255, 255, 255, .8); }
.btn.outline { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.btn.spin { opacity: .6; }
.badge { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #eee; color: #444; vertical-align: middle; }
.badge.running { background: #e8f5e9; color: #146428; }
.badge.upcoming { background: #e3f2fd; color: var(--blue); }
.badge.closed { background: #f5f5f5; color: #555; }
.badge.holiday { background: #fff3e0; color: var(--orange); }

/* ---- download banner (white text passes 4.5:1 on this gradient) ---- */
.dl-banner { text-align: center; color: #fff; background: linear-gradient(180deg, #bf360c, #8e0e0e); border-radius: var(--radius); padding: 14px 12px; margin-top: 8px; box-shadow: var(--shadow); }
.dl-banner .hi { font-weight: 800; font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.dl-banner .en { font-size: 13px; margin: 4px 0 10px; }
.dl-banner .btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dl-banner :focus-visible { outline-color: #fff; }

/* ---- market list ---- */
/* ---- /v1 preview: the whole result list drawn as LIVE-RESULT-UPDATE cards ---- */
.v1-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px 10px; margin: 6px 0 0; padding: 6px 10px; border-radius: 10px; background: #fff3cd; border: 1px solid #f0d27a; font-size: 12.5px; font-weight: 700; color: #6d4c00; }
.v1-bar span { font-weight: 600; }
.mkt-cards .live-item { position: relative; padding: 7px 34px 8px; }
.mkt-cards .live-item .nm { font-size: clamp(14px, 4.2vw, 17px); overflow-wrap: anywhere; }
.mkt-cards .live-item .nm a { color: inherit; text-decoration: none; }
.mkt-cards .live-item.holiday .rs { color: var(--orange); font-size: 16px; }
.mkt-cards .live-item .tm { margin-bottom: 5px; }
/* same rule as the row layout: the time already says Upcoming/Closed, so only
   Open and Holiday earn a badge here. The LIVE box itself still shows all four. */
.mkt-cards .badge.upcoming, .mkt-cards .badge.closed { display: none; }
.mkt-cards .c-links { display: flex; justify-content: center; gap: 8px; }
.mkt-cards .c-links .btn.sm { min-height: 30px; padding: 2px 18px; font-size: 12px; }
/* the generic 3-up .live-grid rule (>=480px) is for the LIVE box; these cards are wider
   (share icon + Jodi/Panel row), so they own their column count at every width */
.mkt-cards .live-grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .mkt-cards .live-grid { grid-template-columns: 1fr 1fr; } }
/* Wide screens: the result grid alone steps outside the 680px page column (the
   rest of the page keeps its reading width) and auto-fills, so it lands on 4
   columns near 1024px and 5 from ~1280px. min() rather than 100vw, so the
   scrollbar can never push the page sideways. */
@media (min-width: 1024px) {
  .mkt-cards { width: min(1232px, 96vw); margin-left: calc((min(1232px, 96vw) - 100%) / -2); }
  .mkt-cards .live-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
  .mkt-cards .live-item { padding: 9px 34px 10px; }
  .sec-title.wide { width: min(1232px, 96vw); margin-left: calc((min(1232px, 96vw) - 100%) / -2); }
}

.mkt-list { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 8px; overflow: clip; }
.mkt { position: relative; text-align: center; padding: 8px 64px 7px; border-bottom: 1px solid #eee; }
.mkt:last-child { border-bottom: 0; }
.mkt .nm a, .live-item .nm a { color: inherit; text-decoration: none; }
.mkt .nm { font-weight: 800; font-size: clamp(14px, 4.2vw, 17px); color: var(--maroon); letter-spacing: .5px; overflow-wrap: anywhere; }
.mkt .rs { font-weight: 800; font-size: clamp(17px, 5.6vw, 22px); font-style: italic; letter-spacing: .5px; color: #111; margin: 1px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the Open / Holiday badge is sized to sit inside the time line, so a market going Open
   during a live refresh does not grow its card and nudge the whole list */
.mkt .tm { font-size: 11px; color: var(--red); min-height: 17px; }
.mkt .tm .badge { font-size: 10px; padding: 0 6px; line-height: 15px; }
.mkt .lnk { position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 32px; font-size: 12px; font-weight: 700; color: #fff; background: var(--purple); padding: 4px 8px; border-radius: 8px; text-decoration: none; line-height: 1; }
/* the share icon owns the top-right corner, so the chart buttons sit on the bottom row */
.mkt .lnk { top: auto; bottom: 7px; transform: none; }
.mkt .lnk.l { left: 8px; }
.mkt .lnk.r { right: 8px; }
.mkt.holiday .rs { color: var(--orange); font-size: 16px; }
.mkt .badge.upcoming, .mkt .badge.closed,
.live-strip .badge.upcoming, .live-strip .badge.closed { display: none; }

/* ---- contact form ---- */
.hp { position: absolute !important; left: -9999px; top: -9999px; height: 1px; overflow: hidden; }
.note-ok { background: #e6f7ea; color: #0f5321; border: 1px solid #9fd8ae; border-radius: 10px; padding: 10px 12px; font-weight: 700; margin: 8px 0; }
.contact-form label { display: block; font-weight: 700; margin: 10px 0 4px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; padding: 10px; border: 1px solid #c9ccd4; border-radius: 10px; font: inherit; background: #fff; }
.contact-form .opt { font-weight: 400; color: var(--muted); }

/* ---- advertising slots (admin-managed) ---- */
.ad-slot { margin: 8px 0; text-align: center; }
.ad-slot .ad-unit { margin: 0 auto 6px; max-width: 680px; overflow: hidden; }
.ad-slot .ad-unit img { max-width: 100%; height: auto; border-radius: 10px; }
.ad-slot .ad-unit:last-child { margin-bottom: 0; }

/* ---- featured market highlight backgrounds (admin-set per market) ---- */
.mkt--gold   { --mk: #f2b724; --mk-bg: #fff6d8; --mk-ink: #7a4d00; }
.mkt--red    { --mk: #c62828; --mk-bg: #ffe9e9; --mk-ink: #8e1111; }
.mkt--green  { --mk: #1b7a33; --mk-bg: #e6f7ea; --mk-ink: #0f5321; }
.mkt--blue   { --mk: #0d47a1; --mk-bg: #e7f1ff; --mk-ink: #0a357a; }
.mkt--purple { --mk: #4a148c; --mk-bg: #f2e9ff; --mk-ink: #3a1070; }
.mkt--teal   { --mk: #00796b; --mk-bg: #e0f5f2; --mk-ink: #00564c; }
.mkt--pink   { --mk: #ad1457; --mk-bg: #ffe7f1; --mk-ink: #8a0f45; }
.mkt.mkt--gold, .mkt.mkt--red, .mkt.mkt--green, .mkt.mkt--blue, .mkt.mkt--purple, .mkt.mkt--teal, .mkt.mkt--pink {
  background: linear-gradient(180deg, var(--mk-bg), #fff);
  box-shadow: inset 5px 0 0 var(--mk);
}
.mkt[class*="mkt--"] .nm { color: var(--mk-ink); }
.live-item[class*="mkt--"] { background: linear-gradient(180deg, var(--mk-bg), #fff); border-color: var(--mk); }
.live-item[class*="mkt--"] .nm { color: var(--mk-ink); }

/* ---- generic tables ---- */
table.tbl { width: 100%; background: #fff; font-weight: 700; text-align: center; }
.tbl th { background: #deeefa; color: #0d2c54; font-size: 13px; padding: 8px 4px; }
.tbl th.today, .tbl td.today { background: #fff8e1; }
.tbl td { padding: 8px 4px; border-bottom: 1px solid #eee; border-right: 1px solid #f3f3f3; font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .jd { font-size: 22px; font-style: italic; }
.tbl .red { color: var(--red); }
.tbl .mkname { text-align: left; color: var(--maroon); font-size: 13px; }
.tbl tbody th.mkname { background: #fff; border-bottom: 1px solid #eee; border-right: 1px solid #f3f3f3; }
.tbl .mkname a { color: var(--maroon); text-decoration: none; display: inline-block; padding: 4px 0; }
.star-tbl td.time { color: var(--blue); font-size: 14px; }
.star-tbl td.res { color: #111; font-style: italic; font-size: clamp(15px, 4.6vw, 18px); white-space: nowrap; }
.jodi-grid { table-layout: fixed; }
.jodi-grid td { font-size: clamp(14px, 4.6vw, 20px); padding: 10px 0; }
.cut-tbl { table-layout: fixed; }
.cut-tbl th, .cut-tbl td { padding: 8px 0; font-size: clamp(12px, 3.6vw, 16px); }
.cut-tbl .mkname { text-align: center; font-size: 12px; }
.wk-tbl td, .wk-tbl th { font-size: 18px; padding: 8px 4px; }
.wk-tbl th { text-align: left; color: var(--maroon); font-size: 14px; background: transparent; border-bottom: 1px solid #eee; }
.wk-tbl td.arrow { width: 40px; color: var(--muted); }
.pan-list p { margin: 4px 0; font-size: 16px; font-weight: 700; text-align: center; }
.pan-list b { color: var(--red); }

/* ---- this week's jodi chart (home): 8 fixed columns ---- */
.wk-res { table-layout: fixed; }
.wk-res th { font-size: 11px; padding: 6px 0; line-height: 1.2; }
.wk-res th small { font-weight: 600; color: #456; font-size: 10px; }
.wk-res .mkname { width: 25%; font-size: 11px; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; padding: 6px 4px; }
.wk-res .jd { font-size: clamp(13px, 4.2vw, 17px); padding: 9px 0; }
.wk-res .jd[data-full] { cursor: pointer; }

/* ---- record charts (jodi / panel): fixed layout, fits any screen, sticky header ---- */
.chart-card { padding: 0; overflow: clip; }
.chart-tbl { width: 100%; table-layout: fixed; background: #fff; text-align: center; font-variant-numeric: tabular-nums; }
.chart-tbl th, .chart-tbl td { padding: 0; border-bottom: 1px solid #ececec; border-right: 1px solid #f1f1f1; overflow: hidden; }
.chart-tbl thead th { position: sticky; top: 0; z-index: 2; background: #deeefa; color: #0d2c54; font-size: clamp(11px, 3.2vw, 13px); line-height: 16px; padding: 7px 0; }
.chart-tbl thead tr.sub-head th { top: 30px; font-size: 11px; line-height: 14px; font-weight: 700; padding: 2px 0; background: #eef5fc; color: #456; }
.chart-tbl thead th abbr { text-decoration: none; }
.chart-tbl thead th.wk { z-index: 3; }
.chart-tbl tbody th.wk { font-size: clamp(9px, 2.7vw, 12px); line-height: 1.2; color: #5a6070; background: #fafafa; padding: 4px 1px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chart-tbl tbody th.wk small { display: block; font-size: 9px; font-weight: 600; color: var(--muted); letter-spacing: .2px; }
/* The week cells no longer repeat the year, so the year band sticks under the day
   header - scroll into 2019 and "2019" stays on screen. Offsets = header height:
   the jodi chart has one header row, the panel chart has two (O J C). */
.chart-tbl .yr td { background: var(--cream); color: var(--maroon); font-weight: 800; font-size: 12px; padding: 3px 0; letter-spacing: 1px; position: sticky; top: 31px; z-index: 1; }
.panel-chart .chart-tbl .yr td { top: 50px; }
.chart-tbl .jd { font-weight: 800; font-style: italic; color: #111; }
.chart-tbl .red { color: var(--red); }
.chart-tbl .pending { color: var(--pending); }
.chart-tbl [data-full] { cursor: pointer; }
.chart-tbl .is-picked { background: #fff3c4; box-shadow: inset 0 0 0 2px var(--gold); }
.jodi-chart .jd { font-size: clamp(15px, 5.4vw, 26px); padding: 8px 0; }
.panel-chart .pnl { font-size: clamp(11px, 3.1vw, 14px); line-height: 1.12; font-weight: 700; color: #333; padding: 4px 0; }
.panel-chart .pnl.first { border-left: 2px solid #e6e6e6; }
.panel-chart .jd { font-size: clamp(12px, 4vw, 19px); letter-spacing: 0; }
.panel-chart.days-7 .jd { font-size: clamp(11px, 3.5vw, 18px); }   /* 7-day markets have narrower day columns */
.chart-detail { display: block; margin: 0; padding: 10px 12px; font-weight: 800; font-size: 15px; color: var(--maroon); background: #fff8e1; border-top: 2px solid var(--gold); text-align: center; }
.chart-detail[hidden] { display: none; }
.chart-legend { font-size: 12px; color: var(--muted); text-align: center; margin: 6px 4px 0; }

/* ---- starline record chart: one card per day, 7 columns ---- */
.star-day { padding: 0; overflow: clip; }
.star-day-head { margin: 0; background: linear-gradient(90deg, #0d47a1, #1976d2); color: #fff; font-weight: 800; font-size: 14px; padding: 8px 10px; display: flex; justify-content: space-between; align-items: center; }
.star-day-head small { font-weight: 600; font-size: 12px; }
.star-grid { width: 100%; table-layout: fixed; text-align: center; }
.star-grid th { font-size: clamp(11px, 3vw, 12px); font-weight: 700; color: var(--blue); background: #f3f8ff; padding: 4px 0; border-bottom: 1px solid #e5eefb; white-space: nowrap; }
.star-grid td { font-size: clamp(12px, 3.6vw, 15px); font-weight: 800; font-style: italic; padding: 7px 0; border-bottom: 1px solid #eee; border-right: 1px solid #f3f3f3; white-space: nowrap; }

/* ---- time table: one card per market, row header + 7 day columns ---- */
.tt-card { padding: 8px 8px 10px; }
.tt-name { margin: 0 0 6px; font-size: 16px; color: var(--maroon); text-align: center; }
/* every market carries its own colour (set in the admin, or picked from its name) */
.tt-card[class*="mkt--"] { background: linear-gradient(180deg, var(--mk-bg), #fff); box-shadow: inset 5px 0 0 var(--mk), var(--shadow); }
.tt-card[class*="mkt--"] .tt-name { color: var(--mk-ink); }
.tt-card[class*="mkt--"] .tt-grid th { background: var(--mk-bg); color: var(--mk-ink); }
.tt-card[class*="mkt--"] .tt-grid tbody th.lbl { background: #fff; color: #333; }
.tt-grid { width: 100%; table-layout: fixed; text-align: center; }
.tt-grid col.c-lbl { width: 13%; }
.tt-grid th { font-size: 11px; background: #deeefa; color: #0d2c54; padding: 5px 0; border-right: 1px solid #fff; }
/* today's column: the same soft cream every other table on the site uses, with an
   underline so the column is still findable without a loud block of colour */
.tt-grid th.today, .tt-card[class*="mkt--"] .tt-grid th.today { background: #fff8e1; color: #6d4c00; box-shadow: inset 0 -3px 0 var(--gold); }
.tt-grid thead td.lbl { background: transparent; }
.tt-grid tbody th.lbl { background: #f4f4f4; color: #333; font-size: 11px; text-align: left; padding-left: 4px; border-bottom: 1px solid #eee; }
.tt-grid td { font-size: clamp(11px, 3.3vw, 13px); font-weight: 700; padding: 5px 0; border-bottom: 1px solid #eee; border-right: 1px solid #f3f3f3; white-space: nowrap; line-height: 1.15; }
.tt-grid td small { display: block; font-size: 10px; font-weight: 600; color: var(--muted); }
.tt-grid td.today { background: #fff8e1; }
.tt-grid tr.open td { color: var(--green); }
.tt-grid tr.close td { color: var(--red); }
.tt-grid tr td.hol { color: var(--orange); font-size: 11px; vertical-align: middle; white-space: normal; line-height: 1.15; }   /* beats "tr.open td", which was painting holidays green */
.tt-legend { font-size: 12px; text-align: center; color: var(--muted); margin-top: 6px; }
.tt-legend b.o { color: #166a2c; }   /* darker than --green: sits on the page background, not on a card */
.tt-legend b.c { color: #b71c1c; }

/* ---- chart pages ---- */
.hero { background: linear-gradient(180deg, var(--maroon), var(--hero-2)); color: #fff; text-align: center; border-radius: var(--radius); padding: 14px; margin-top: 8px; box-shadow: var(--shadow); }
.hero h1 { margin: 0; font-size: clamp(18px, 5.6vw, 23px); line-height: 1.2; overflow-wrap: anywhere; text-transform: uppercase; }
.hero p { margin: 6px 0 0; font-size: 13px; }
.live-strip { background: #fff59d; border: 2px double #b71c1c; border-radius: var(--radius); text-align: center; padding: 10px; margin-top: 8px; }
.live-strip .nm { font-size: 20px; font-weight: 800; color: var(--blue); font-style: italic; }
.live-strip .rs { font-size: clamp(19px, 6.5vw, 25px); font-weight: 800; letter-spacing: .5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-strip .tm { font-size: 12px; color: #5d4037; }
.live-strip .btns { margin-top: 8px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chart-tools { display: flex; gap: 8px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
/* year navigation chips on chart pages: one swipeable line, like the top menu */
.chart-nav { display: flex; gap: 6px; margin: 8px 2px 0; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chart-nav::-webkit-scrollbar { display: none; }
.chart-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 30px; padding: 3px 12px; border-radius: 999px; border: 1.5px solid var(--maroon); background: #fff; color: var(--maroon); font-size: 12.5px; font-weight: 800; text-decoration: none; }
.chart-nav a.on { background: var(--maroon); color: #fff; }
.chart-nav a:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }

/* ---- game zone ---- */
.zone { padding: 0; overflow: clip; }
.zone a { display: block; text-align: center; padding: 13px 10px; border-bottom: 1px solid #f8bbd0; font-weight: 800; color: var(--purple); text-decoration: none; font-size: 16px; }
.zone a:last-child { border-bottom: 0; }
.zone a:focus-visible { outline-offset: -3px; }
/* jodi / panel chart index on the home page: two columns of market links */
.zone.cols2 { display: grid; grid-template-columns: 1fr 1fr; }
.zone.cols2 a { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 8px 6px; font-size: clamp(13px, 3.8vw, 15px); line-height: 1.25; border-right: 1px solid #f8bbd0; overflow-wrap: anywhere; }
.zone.cols2 a:nth-child(2n) { border-right: 0; }
.zone.cols2 a:last-child, .zone.cols2 a:nth-last-child(2):nth-child(odd) { border-bottom: 0; }

/* ---- home teasers (blog posts / forum topics) ---- */
.teaser-list .teaser { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid #eee; text-decoration: none; color: var(--ink); }
.teaser-list .teaser:focus-visible { outline-offset: -3px; }
.teaser img { flex: 0 0 96px; width: 96px; height: 72px; object-fit: cover; border-radius: 8px; background: #eee; }
.t-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-title { font-weight: 800; color: var(--maroon); font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.t-meta { font-size: 12px; color: var(--muted); }
.t-ex { font-size: 13px; color: #444; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.btns-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* ---- shared by blog & forum pages: pager, public forms, messages, SEO text blocks ---- */
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 10px 0; font-weight: 700; font-size: 14px; }
.pager a, .pager .cur, .pager .off, .pager .dots { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 8px; border-radius: 8px; text-decoration: none; }
.pager a { background: #fff; color: var(--blue); box-shadow: var(--shadow); }
.pager .cur { background: var(--maroon); color: #fff; }
.pager .off { color: #999; }
.pager .pg-nums { display: inline-flex; gap: 4px; }
.pform label { display: block; font-weight: 700; font-size: 13px; margin: 10px 0 4px; }
.pform input[type=text], .pform input[type=tel], .pform input[type=email], .pform select, .pform textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #cfd4dc; border-radius: 10px; font: 15px var(--font); background: #fff; color: var(--ink); }
.pform textarea { min-height: 120px; resize: vertical; }
.pform .help { font-size: 12px; color: var(--muted); margin: 4px 0 0; }
.pform .row2 { display: grid; gap: 0 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 400px) { .pform .row2 { grid-template-columns: 1fr; } }
.pform .honey { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pform .btns { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.msg { border-radius: 10px; padding: 10px 12px; margin: 8px 0; font-weight: 600; font-size: 14px; }
.msg.ok { background: #e8f5e9; color: #145a24; border: 1px solid #b7dfbd; }
.msg.err { background: #fdecea; color: #8e0e0e; border: 1px solid #f5c2c0; }
.msg.info { background: #e3f2fd; color: #0d3c78; border: 1px solid #b6d4f5; }
.seo-block { font-size: 14px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #fff3e0; color: var(--orange); text-decoration: none; }
.meta-line { font-size: 12px; color: var(--muted); }
.g-head { font-weight: 800; color: var(--maroon); font-size: 18px; margin-bottom: 6px; }
.g-head small { color: var(--muted); font-weight: 600; font-size: 12px; margin-left: 6px; }
.g-row { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-top: 1px dashed #eee; }
.g-lbl { flex: 0 0 32px; font-weight: 800; color: var(--purple); }
.mono { font-family: ui-monospace, Consolas, "Courier New", monospace; font-weight: 700; font-size: 15px; letter-spacing: .5px; line-height: 1.7; overflow-wrap: anywhere; }
.g-big { font-size: clamp(16px, 5vw, 20px); text-align: center; color: var(--blue); }

/* ---- faq / prose ---- */
details { background: #fff; border-radius: 10px; margin-top: 6px; padding: 0 12px; box-shadow: var(--shadow); }
summary { cursor: pointer; font-weight: 800; color: #b3123f; padding: 12px 0; list-style: none; min-height: 44px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; float: right; font-size: 20px; line-height: 1; }
details[open] summary::after { content: "\2013"; }
details p { margin: 0 0 12px; font-size: 14px; color: #333; }
.prose { font-size: 14px; color: #333; overflow-wrap: anywhere; }
.prose h2 { font-size: 18px; color: var(--maroon); margin: 12px 0 4px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16px; margin: 10px 0 4px; }
.prose p, .prose ul, .prose ol { margin: 6px 0; }
.prose li { margin: 4px 0; }

/* ---- footer ---- */
.site-foot { max-width: 680px; margin: 12px auto 0; padding: 0 6px calc(90px + var(--safe-b)); text-align: center; font-size: 13px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; background: var(--cream); border-radius: var(--radius); padding: 6px; font-weight: 700; }
.foot-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 8px; }
.foot-disclaimer { font-size: 12px; color: #555; background: #fff; border-radius: var(--radius); padding: 10px; margin-top: 8px; line-height: 1.5; text-align: left; }
.foot-copy { margin-top: 8px; color: var(--muted); }

/* ---- floating (respect the phone's bottom safe area; move up while the install bar shows) ---- */
.wa-fab { position: fixed; right: 14px; bottom: calc(14px + var(--safe-b)); width: 54px; height: 54px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); z-index: 50; }
.wa-fab svg { width: 30px; height: 30px; fill: #fff; }
.tg-fab { position: fixed; left: 14px; bottom: calc(14px + var(--safe-b)); width: 54px; height: 54px; border-radius: 50%; background: #229ed9; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); z-index: 50; }
.tg-fab svg { width: 28px; height: 28px; fill: #fff; }
body.has-install .tg-fab { bottom: calc(var(--install-h, 62px) + 22px + var(--safe-b)); }
.share-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 8px 0; }
.share-row .sh { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 16px; border-radius: 999px; color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.sh.wa { background: #25d366; }
.sh.tg { background: #229ed9; }
.sh.cp { background: #5f6368; }
/* card share: a share icon pinned to the card corner instead of a full-width text button */
.share-mini { position: absolute; top: 5px; right: 5px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; color: #fff; background: #25d366; text-decoration: none; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.share-mini svg { display: block; width: 16px; height: 16px; fill: currentColor; }
/* the chip stays small but the tap target reaches into the card padding (stops short of the Panel button) */
.share-mini::before { content: ''; position: absolute; top: -5px; right: -5px; bottom: -3px; left: -9px; }
.share-mini:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.to-top { position: fixed; right: 20px; bottom: calc(78px + var(--safe-b)); width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--blue); color: #fff; font-size: 20px; font-weight: 800; box-shadow: var(--shadow); display: none; z-index: 50; cursor: pointer; }
.to-top.show { display: block; }
.install-bar { position: fixed; left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); padding: 10px 12px; display: flex; gap: 8px; align-items: center; z-index: 60; font-size: 13px; flex-wrap: wrap; }
.push-bar { position: fixed; left: 8px; right: 8px; bottom: calc(76px + var(--safe-b)); background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); padding: 10px 12px; display: flex; gap: 8px; align-items: center; z-index: 60; font-size: 13px; flex-wrap: wrap; }
.push-bar[hidden] { display: none; }
.push-bar span { flex: 1 1 160px; }
.install-bar[hidden] { display: none; }
.install-bar span { flex: 1 1 160px; }
/* --install-h is set by site.js to the bar's real height (it wraps to two rows on 320px phones) */
body.has-install .wa-fab { bottom: calc(var(--install-h, 62px) + 22px + var(--safe-b)); }
body.has-install .to-top { bottom: calc(var(--install-h, 62px) + 86px + var(--safe-b)); }

@media (min-width: 480px) {
  .live-grid { grid-template-columns: repeat(3, 1fr); }
  .live-item { padding: 7px 6px 8px; }
  .live-item .nm { font-size: 13px; }
  .live-item .rs { font-size: 18px; letter-spacing: .5px; }
}
@media (min-width: 600px) {
  .live-item .nm { font-size: 14px; }
  .live-item .rs { font-size: 20px; }
  .brand-name { font-size: 24px; }
}
/* Desktop: the LIVE box steps outside the 680px page column so five cards get
   the same ~240px the /v1 grid uses - at 3-up width five would wrap the longer
   market names. :not(.mkt-cards) leaves the /v1 result grid on its own rule. */
@media (min-width: 1024px) {
  .card.sky:not(.mkt-cards) { width: min(1232px, 96vw); margin-left: calc((min(1232px, 96vw) - 100%) / -2); }
  /* auto-fit, so it is 5 across at the usual 9 games but the cards still fill the
     box if the game count is ever set below 5 */
  .card.sky:not(.mkt-cards) .live-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee span, .live-dot { animation: none; }
  .fest-pop-card { animation: none; }
  .marquee { white-space: normal; }
  .marquee span { display: inline; padding-left: 0; }
  /* Final Ank stands still and becomes a hand-scrollable list instead. The
     .fank-rolling part is needed to outrank the rule that starts the animation
     (a media query adds no specificity), for anyone who turns reduce-motion on
     with the page already open; its hidden duplicates are dropped with it. */
  .lucky .val.fank-scroll .fank-track,
  .lucky .val.fank-scroll .fank-track.fank-rolling { animation: none; }
  .lucky .val.fank-scroll .fank-track span[aria-hidden] { display: none; }
  .lucky .val.fank-scroll { height: auto; max-height: 82px; overflow-y: auto; cursor: auto; }
  .lucky .val.fank-scroll .fank-track span { height: auto; line-height: 1.35; padding: 2px 0; }
  .lucky .val.fank-scroll::before { display: none; }
}
@media print {
  .site-nav, .wa-fab, .tg-fab, .share-row, .share-mini, .to-top, .install-bar, .dl-banner, .btn, .notice, .chart-tools, .chart-nav, .fest-pop, .fest-banner { display: none !important; }
  .chart-tbl thead th, .chart-tbl .yr td { position: static; }
}