/* ══ KC v2 — dedicated game chart pages ═══════════════════════════════════════
   The board is STATIC server HTML on purpose: a ?record=all chart is 600+ week
   rows, and re-creating every node on each render would make the very pages
   people sit on longest crawl. Only the chrome and today's cell are scripted. */

.kcc-wrap{max-width:1180px;margin:0 auto;
  padding:calc(64px + env(safe-area-inset-top,0px)) 12px calc(92px + env(safe-area-inset-bottom,0px))}

/* ── game header card ─────────────────────────────────────────────────────── */
.kcc-head{background:var(--panel);border:1px solid var(--bd);border-radius:20px;
  padding:16px 16px 14px;margin-bottom:12px;position:relative;overflow:hidden}
.kcc-head.is-star{background:var(--starCard);border-color:var(--goldBd)}
.kcc-name{display:flex;align-items:center;gap:9px;font-size:clamp(20px,5vw,30px);font-weight:800;
  letter-spacing:.02em;color:var(--tx);line-height:1.15;margin:0 0 2px;overflow-wrap:anywhere}
.kcc-head.is-star .kcc-name{color:var(--goldTx)}
.kcc-kind{font-size:12px;font-weight:800;letter-spacing:.07em;color:var(--tx2);text-transform:uppercase}
.kcc-head.is-star .kcc-kind{color:var(--goldSub)}
.kcc-days{font-size:12.5px;font-weight:700;color:var(--tx2);font-family:'Noto Sans Devanagari',sans-serif}
.kcc-times{display:flex;gap:10px;margin-top:12px}
.kcc-time{flex:1;background:var(--panel2);border:1px solid var(--bd2);border-radius:13px;padding:9px 11px;text-align:center}
.kcc-head.is-star .kcc-time{background:var(--starPanel);border-color:var(--goldBd)}
.kcc-time b{display:block;font-family:'Space Grotesk',monospace;font-size:17px;font-weight:700;color:var(--tx);margin-top:2px}
.kcc-head.is-star .kcc-time b{color:var(--goldTx)}
.kcc-time span{font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--tx2);text-transform:uppercase}
.kcc-msg{display:flex;align-items:flex-start;gap:7px;margin-top:11px;padding:9px 11px;border-radius:12px;
  background:var(--accBg);border:1px solid var(--goldBd);border-left:3px solid var(--gold);
  font-family:'Noto Sans Devanagari',sans-serif;font-size:12.5px;line-height:1.5;color:var(--tx2);overflow-wrap:anywhere}
.kcc-msg .bi{color:var(--gold);flex-shrink:0}

/* ── jodi / panel segmented switch ────────────────────────────────────────── */
.kcc-seg{display:flex;gap:6px;background:var(--panel2);border:1px solid var(--bd);border-radius:999px;
  padding:5px;margin:0 auto 12px;width:fit-content;position:relative}
.kcc-seg button{appearance:none;border:0;cursor:pointer;font-family:'Noto Sans Devanagari',sans-serif;
  padding:9px 22px;border-radius:999px;font-size:13.5px;font-weight:800;letter-spacing:.02em;
  background:transparent;color:var(--tx2);transition:background .18s,color .18s,transform .12s;white-space:nowrap}
.kcc-seg button:active{transform:scale(.96)}
.kcc-seg button[aria-selected="true"]{background:var(--grad);color:var(--onGold);
  box-shadow:0 4px 14px rgba(255,168,0,.32)}

/* ── the board ────────────────────────────────────────────────────────────── */
/* NO overflow wrapper and NO overflow:hidden on the board — either one makes the
   sticky header stick to that box instead of the viewport, so it scrolls away on
   exactly the long charts it exists for. The board is sized to fit instead. */
.kcc-scroll{border-radius:18px}
.kcc-board{background:var(--panel);border:1px solid var(--bd);border-radius:18px}
.kcc-board > .kcc-row:first-child{border-radius:18px 18px 0 0}
.kcc-board > .kcc-row:last-child{border-radius:0 0 18px 18px}
.kcc-row{display:grid;grid-template-columns:74px repeat(7,minmax(0,1fr)) 38px;
  border-bottom:1px solid var(--bd2);align-items:stretch}
/* small phones: give the seven day columns every pixel the rails can spare, so
   the board still fits without sideways scrolling */
@media (max-width:559px){
  .kcc-row{grid-template-columns:52px repeat(7,minmax(0,1fr)) 24px}
  .kcc-date{font-size:8.5px;padding:6px 1px}
  .kcc-cell{gap:1px;padding:5px 0;min-height:46px}
  .kcc-cnt b{font-size:10px;padding:1px 3px}
  .kcc-h{font-size:9px;padding:7px 1px}
}
.kcc-row:last-child{border-bottom:0}
/* Opaque strip behind the floating chrome. Without it, rows scrolling through
   the 0-56px band sit ABOVE the pinned header and read as a torn row. Sits below
   the chrome (z-70) and above the board, so the header tucks neatly beneath. */
.kcc-topveil{position:fixed;left:0;right:0;top:0;z-index:60;pointer-events:none;
  height:calc(56px + env(safe-area-inset-top,0px));
  background:linear-gradient(to bottom,var(--bg) 62%,transparent);}

.kcc-hrow{position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:5;
  background:var(--panel2);border-bottom:1px solid var(--bd);
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.kcc-h{padding:9px 2px;text-align:center;font-size:11px;font-weight:800;letter-spacing:.06em;
  color:var(--tx2);text-transform:uppercase}
.kcc-date{padding:8px 4px;text-align:center;font-family:'Space Grotesk',monospace;font-size:10.5px;
  font-weight:700;color:var(--tx2);line-height:1.45;border-right:1px solid var(--bd2);
  display:flex;flex-direction:column;justify-content:center;gap:1px}
.kcc-row.is-now .kcc-date{background:var(--accBg);color:var(--accHi)}
.kcc-cnt{display:flex;align-items:center;justify-content:center;border-left:1px solid var(--bd2)}
.kcc-cnt b{font-family:'Space Grotesk',monospace;font-size:12px;font-weight:700;color:var(--tx2);
  background:var(--accBg);border:1px solid var(--bd);border-radius:8px;padding:2px 6px}
.kcc-cell{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 1px;min-height:56px}
.kcc-pana{font-family:'Space Grotesk',monospace;font-size:clamp(8.6px,1.25vw,24px);line-height:1.22;
  font-weight:600;color:var(--tx2);letter-spacing:-.02em}
.kcc-jodi{font-family:'Space Grotesk',monospace;font-size:clamp(14.8px,3.2vw,56px);font-weight:700;
  color:var(--tx);letter-spacing:-.01em}
.kcc-cell.is-red .kcc-jodi{color:var(--red)}
.kcc-cell.is-today{background:var(--accBg);border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--acc)}
/* today AND red must both read — the old page let today's highlight hide the red */
.kcc-cell.is-today.is-red .kcc-jodi{color:var(--red)}
.kcc-cell.is-empty .kcc-jodi{color:var(--tx2);font-weight:600}
/* jodi mode simply hides the panas — both are rendered once, so the switch is instant */
.kcc-board[data-mode="jodi"] .kcc-pana{display:none}
.kcc-board[data-mode="jodi"] .kcc-jodi{font-size:clamp(17px,3.6vw,62px)}

/* ── pending digits ───────────────────────────────────────────────────────── */
.kcc-pend{margin-top:12px;background:var(--panel);border:1px dashed var(--goldBd);border-radius:16px;
  padding:12px 14px;text-align:center}
.kcc-pend .lbl{font-size:11.5px;font-weight:800;letter-spacing:.05em;color:var(--tx2);
  font-family:'Noto Sans Devanagari',sans-serif}
.kcc-pend .nums{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:8px}
.kcc-pend .nums i{font-style:normal;font-family:'Space Grotesk',monospace;font-size:16px;font-weight:700;
  color:var(--onGold);background:var(--grad);border-radius:9px;min-width:30px;padding:4px 2px}
.kcc-pend.is-done .nums i{background:var(--panel2);color:var(--tx3)}

/* ── older / newer record ─────────────────────────────────────────────────── */
.kcc-more{display:flex;justify-content:center;margin:14px 0 0}
.kcc-more a{display:inline-flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--bd);
  border-radius:999px;padding:11px 20px;font-size:13px;font-weight:800;color:var(--tx2);text-decoration:none;
  font-family:'Noto Sans Devanagari',sans-serif}
.kcc-more a:hover{border-color:var(--acc);color:var(--tx)}

.kcc-empty{text-align:center;padding:44px 12px;color:var(--tx3);font-size:14px;
  font-family:'Noto Sans Devanagari',sans-serif}

.kcc-foot{margin-top:20px;font-size:11px;line-height:1.65;color:var(--tx2);text-align:center}

/* ── back pill (top-left, where the homepage keeps its offline badge) ─────── */
.kcc-back{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:9px 15px 9px 12px;
  border:0;cursor:pointer;font-family:'Noto Sans Devanagari',sans-serif;font-size:13px;font-weight:800;
  color:var(--tx);background:transparent}
.kcc-back .bi{font-size:15px;color:var(--accHi)}

/* ── large screens: more room for the numbers, not just more whitespace ───── */
@media (min-width:1024px){
  .kcc-wrap{max-width:1320px}
  .kcc-row{grid-template-columns:104px repeat(7,minmax(0,1fr)) 52px}
  .kcc-cell{min-height:96px;gap:8px}
  .kcc-date{font-size:12px}
}
@media (min-width:1500px){ .kcc-wrap{max-width:1500px} }
@media (prefers-reduced-motion:reduce){ .kcc-seg button{transition:none} }

/* The board reads oldest-first, so the reader lands at the BOTTOM on today's row.
   Repeat the game's identity and times there rather than making them scroll up. */
.kcc-head-b{margin:12px 0 0;padding:13px 14px 12px}
.kcc-head-b .kcc-times{margin-top:9px}
.kcc-head-b .kcc-time{padding:7px 9px}
.kcc-head-b .kcc-time b{font-size:15px}

/* ══ SINGLE chart — 13 columns (date + 12 slots) ═══════════════════════════
   These cannot be squeezed onto a phone at a readable size, so below 900px the
   board scrolls sideways and the DATE column is frozen with position:sticky so
   the reader never loses which day a row is. Sticky column and sticky header
   cannot both survive one overflow box, so above 900px there is no scroller and
   the header pins instead — each breakpoint gets the affordance that matters. */
.kcs-scroll{border-radius:18px}
.kcs-row{display:grid;grid-template-columns:78px repeat(12,minmax(0,1fr)) 34px;
  border-bottom:1px solid var(--bd2);align-items:stretch}
.kcs-row:last-child{border-bottom:0}
.kcs-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;padding:6px 1px;min-height:46px;border-right:1px solid var(--bd2)}
.kcs-cell:last-of-type{border-right:0}
.kcs-fig{font-family:'Space Grotesk',monospace;font-size:clamp(14.8px,2.2vw,38px);font-weight:700;color:var(--tx)}
.kcs-pana{font-family:'Space Grotesk',monospace;font-size:clamp(8.6px,1.1vw,19px);font-weight:600;color:var(--tx2)}
.kcs-time{font-size:8.5px;font-weight:800;color:var(--accHi);line-height:1.1;text-align:center}
.kcs-cell.is-star .kcs-fig{color:var(--gold)}
.kcs-row.is-today{background:var(--accBg)}
.kcs-row.is-today .kcs-fig{color:var(--tx)}
.kcs-board[data-mode="jodi"] .kcs-pana{display:none}
.kcs-board[data-mode="jodi"] .kcs-fig{font-size:clamp(17px,2.6vw,44px)}
@media (max-width:899px){
  .kcs-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .kcs-board{min-width:760px}
  /* freeze the date column while the slots scroll past it */
  .kcs-row > .kcc-date{position:sticky;left:0;z-index:4;background:var(--panel)}
  .kcs-row.is-today > .kcc-date{background:var(--panel2)}
  .kcs-row > .kcc-h:first-child{position:sticky;left:0;z-index:6;background:var(--panel2)}
}
@media (min-width:900px){
  .kcs-hrow{position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:5;
    background:var(--panel2);border-bottom:1px solid var(--bd);box-shadow:0 2px 10px rgba(0,0,0,.18)}
}
@media (min-width:1024px){
  .kcs-row{grid-template-columns:96px repeat(12,minmax(0,1fr)) 44px}
  .kcs-cell{min-height:80px}
}

/* The original switched formula at 767px (pana 2.2vw / jodi 3.8vw below it,
   1.25vw / 3.2vw above). clamp() is continuous, so it undershoots right at that
   boundary — reproduce the bracket so the numbers match the old page at EVERY
   width, not just at the ends. */
@media (max-width:767px){
  .kcc-pana{font-size:2.2vw}
  .kcc-jodi{font-size:3.8vw}
  .kcc-board[data-mode="jodi"] .kcc-jodi{font-size:4.3vw}
  .kcs-pana{font-size:2vw}
  .kcs-fig{font-size:3.2vw}
  .kcs-board[data-mode="jodi"] .kcs-fig{font-size:3.6vw}
}
@media (max-width:420px){
  /* below the original's own comfort floor, hold a readable minimum */
  .kcc-pana{font-size:9px}
  .kcc-jodi{font-size:15px}
  .kcc-board[data-mode="jodi"] .kcc-jodi{font-size:17px}
  .kcs-pana{font-size:8.6px}
  .kcs-fig{font-size:14.8px}
}

/* v2 theme override for the live-result floater.
   NOTE: the floater lives OUTSIDE the app root, so the design's CSS variables
   (defined on :root / [data-light="1"]) do NOT give it light values — literal
   colors are used here. Specificity/!important beat live_results.css's own
   ":root #kcLiveFloater" rule. Theme comes from <body data-bs-theme>. */
#kcLiveFloater{top:calc(70px + env(safe-area-inset-top,0px));right:10px;border-radius:16px;padding:9px 34px 9px 13px}
#kcLiveFloater .kc-fl-name{font-weight:800;letter-spacing:.03em}
#kcLiveFloater .kc-fl-value{font-family:'Space Grotesk',monospace;font-weight:700;letter-spacing:.02em}
#kcLiveFloater .kc-fl-type{border-radius:999px;font-weight:800;letter-spacing:.05em}
#kcLiveFloater .kc-fl-pulse{background:#FF5470 !important}
/* ---- DARK ---- */
body[data-bs-theme="dark"] #kcLiveFloater{
  background-color:rgba(139,124,255,.20) !important;background-image:none !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.4) !important;backdrop-filter:blur(12px) saturate(1.4) !important;
  border:0.5px solid rgba(167,155,255,.66) !important;color:#F3F4FA !important;
  box-shadow:0 2px 6px rgba(0,0,0,.42) !important}
body[data-bs-theme="dark"] #kcLiveFloater .kc-fl-name{color:#F3F4FA !important}
body[data-bs-theme="dark"] #kcLiveFloater .kc-fl-value{color:#FFFFFF !important}
body[data-bs-theme="dark"] #kcLiveFloater .kc-fl-close{color:#A7ABC6 !important}
body[data-bs-theme="dark"] #kcLiveFloater .kc-fl-close:hover{color:#FFFFFF !important}
body[data-bs-theme="dark"] #kcLiveFloater .kc-fl-type--double{background:#6C4AEC !important;color:#FFFFFF !important}
body[data-bs-theme="dark"] #kcLiveFloater .kc-fl-type--single{background:linear-gradient(135deg,#FFD54A,#FFA800) !important;color:#2E1D00 !important}
/* ---- LIGHT ---- */
body[data-bs-theme="light"] #kcLiveFloater{
  background-color:rgba(139,124,255,.34) !important;background-image:none !important;
  -webkit-backdrop-filter:blur(12px) saturate(1.4) !important;backdrop-filter:blur(12px) saturate(1.4) !important;
  border:0.5px solid rgba(91,52,232,.55) !important;color:#191731 !important;
  box-shadow:0 2px 6px rgba(25,23,49,.18) !important}
body[data-bs-theme="light"] #kcLiveFloater .kc-fl-name{color:#191731 !important}
body[data-bs-theme="light"] #kcLiveFloater .kc-fl-value{color:#191731 !important}
body[data-bs-theme="light"] #kcLiveFloater .kc-fl-close{color:#5D5B76 !important}
body[data-bs-theme="light"] #kcLiveFloater .kc-fl-close:hover{color:#191731 !important}
body[data-bs-theme="light"] #kcLiveFloater .kc-fl-type--double{background:#5B34E8 !important;color:#FFFFFF !important}
body[data-bs-theme="light"] #kcLiveFloater .kc-fl-type--single{background:linear-gradient(135deg,#FFC94A,#EE9D00) !important;color:#2E1D00 !important}

/* ── language sheet (same shape as the homepage's) ────────────────────────── */
.kcc-sheet[hidden]{display:none}
.kcc-sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.kcc-sheet-bd{position:absolute;inset:0;background:rgba(4,5,7,.7);backdrop-filter:blur(6px)}
.kcc-sheet-card{position:relative;background:var(--panel);border:1px solid var(--bd);
  border-radius:22px 22px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  width:100%;max-width:560px;animation:rise .3s ease both}
.kcc-sheet-grip{width:42px;height:4.5px;border-radius:99px;background:var(--bd);margin:0 auto 14px}
.kcc-sheet-t{margin:0 0 12px;font-size:17px;font-weight:800;color:var(--tx)}
.kcc-langgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.kcc-langgrid button{height:52px;border-radius:13px;cursor:pointer;font-family:inherit;text-align:left;
  padding:0 13px;display:flex;align-items:center;justify-content:space-between;
  background:var(--panel2);border:1.5px solid var(--bd);color:var(--tx)}
.kcc-langgrid button[aria-selected="true"]{background:var(--btn);border-color:transparent;color:#fff}
.kcc-langgrid .n{display:block;font-size:14px;font-weight:800}
.kcc-langgrid .e{display:block;font-size:10px;opacity:.72;font-weight:700}
@media (min-width:640px){.kcc-langgrid{grid-template-columns:1fr 1fr 1fr}}

/* ── floating panel/jodi switch — always within thumb reach ───────────────── */
.kc-fabswitch{position:fixed;right:12px;bottom:70px;z-index:70;width:auto!important;
  padding:0 14px;height:44px;border-radius:999px;gap:7px;font-family:'Noto Sans Devanagari',sans-serif;
  font-size:12.5px;font-weight:800;white-space:nowrap}
.kc-fabswitch .bi{font-size:15px}
[data-light="1"] .kc-fabswitch .bi,[data-light="1"] .kc-fabswitch span{color:#8A5A00!important}

/* the tally column on the dedicated charts must not read as a result either */
.kcc-cnt b{font-family:'Space Grotesk',monospace;font-size:11px;font-weight:600;
  color:var(--tx3)!important;background:transparent!important;border:0!important;padding:0!important;
  opacity:.9}
.kcc-cnt{border-left:1px dashed var(--bd2)}
[data-light="1"] .kcc-cnt b{color:#8A88A0!important}

/* ── #8 the floater must ALWAYS break after the game name. On some devices the
      flex row collapsed onto one line and the name ran into the result, which is
      exactly when it is unreadable. Force the stack and bolden the text. ────── */
#kcLiveFloater{display:flex!important;flex-direction:column!important;align-items:flex-start!important;
  gap:4px!important;min-width:172px;max-width:min(78vw,300px)}
#kcLiveFloater .kc-fl-head{display:flex;align-items:center;gap:7px;width:100%}
#kcLiveFloater .kc-fl-name{font-size:13px!important;font-weight:800!important;letter-spacing:.02em!important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#kcLiveFloater .kc-fl-row{display:flex;align-items:center;gap:7px;width:100%}
#kcLiveFloater .kc-fl-value{font-size:17px!important;font-weight:800!important;letter-spacing:.04em!important;
  font-variant-numeric:tabular-nums}
#kcLiveFloater .kc-fl-type{font-size:9.5px!important;padding:2px 8px!important;flex-shrink:0}
/* ── #9 life bar: full at declaration, empty when the floater expires ──────── */
#kcLiveFloater .kc-fl-life{width:100%;height:3px;border-radius:99px;overflow:hidden;margin-top:2px;
  background:rgba(255,255,255,.18)}
#kcLiveFloater .kc-fl-life i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#FFD54A,#FFA800);transition:width 1s linear}
body[data-bs-theme="light"] #kcLiveFloater .kc-fl-life{background:rgba(25,23,49,.16)}

/* announcer FAB — identical treatment to the homepage's */
.kc-fab.kc-ann{color:var(--tx2)}
.kc-fab.kc-ann .bi{color:var(--tx2)}
.kc-fab.kc-ann.is-on{box-shadow:0 0 0 2px var(--goldBd),0 6px 18px rgba(0,0,0,.35)}
.kc-fab.kc-ann.is-on .bi{color:var(--fabGold);animation:pulseDot 1.6s infinite}
[data-light="1"] .kc-fab.kc-ann .bi{color:#3C3A55!important}
[data-light="1"] .kc-fab.kc-ann.is-on .bi{color:#8A5A00!important}
/* the theme button needs the homepage's footprint for the 24px animated icon */
.kc-tb-theme{width:38px;height:38px;flex-shrink:0;border-radius:50%;padding:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;transition:background-color .3s,box-shadow .3s}
.kc-tb-theme svg{width:24px;height:24px;display:block}

/* ── refresh: hidden by default, offered once every three minutes ──────────
   The page keeps itself current, so a permanent button would be noise and an
   invitation to hammer the server. It appears bottom-centre — above the safe
   area, clear of theleft/right FAB rails and the bottom nav — and slips away again
   the moment it is used. */
.kc-refreshbtn{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:69;
  display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;
  cursor:pointer;font-family:'Noto Sans Devanagari',sans-serif;font-size:12.5px;font-weight:800;
  color:var(--tx);background-color:var(--glassBg);border:0.5px solid var(--glassBd);
  -webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:var(--glassSh)}
.kc-refreshbtn[hidden]{display:none}
.kc-refreshbtn .bi{font-size:14px;color:var(--accHi)}
.kc-refreshbtn:active{transform:translateX(-50%) scale(.95)}
.kc-refreshbtn.is-in{animation:kcRefreshIn .32s ease both}
@keyframes kcRefreshIn{from{opacity:0;transform:translateX(-50%) translateY(10px) scale(.94)}
  to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
[data-light="1"] .kc-refreshbtn{color:#2B2942}
[data-light="1"] .kc-refreshbtn .bi{color:#4E2AC9}
@media (prefers-reduced-motion:reduce){.kc-refreshbtn.is-in{animation:none}}