/* ============================================================
   Satta King J — Premium layer
   Loads AFTER site-theme.css. Imperial Maroon + Champagne Gold.
   Adds the "premium" finish: foil gradients, gold hairlines,
   display serif headings, soft elevation and hover micro-motion.
   ============================================================ */

:root{
  --foil: linear-gradient(100deg,#8A6212 0%,#C9962B 18%,#FFE9A8 38%,#F0C75E 52%,#FFF6DC 62%,#C9962B 80%,#8A6212 100%);
  --hairline: 1px solid rgba(240,199,94,.38);
  --hairline-dark: 1px solid rgba(58,10,24,.14);
  --font-display: "Playfair Display", "Outfit", Georgia, serif;
}

/* ---------- Ground ---------- */
html, body{
  background:
    radial-gradient(1100px 520px at 50% -220px, rgba(107,18,41,.10) 0%, rgba(107,18,41,0) 70%),
    var(--ref-white);
  color: var(--ui-text);
}
body.bg-white{ background-color: var(--ref-white) !important; }

::selection{ background: var(--gold); color: var(--maroon-darkest); }

/* Gold foil text utility */
.foil-text{
  background: var(--foil);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- Header / navigation ---------- */
.site-header{
  background: linear-gradient(180deg, rgba(58,10,24,.97) 0%, rgba(74,13,31,.97) 100%);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(240,199,94,.30);
  box-shadow: 0 10px 30px rgba(58,10,24,.28);
}
.site-header::after{
  content:"";
  display:block;
  height:2px;
  background: var(--foil);
  opacity:.9;
}
.site-header__inner{ padding:9px 0; }

.site-brand{ gap:8px; align-items:center; }
.site-brand__mark{
  font-family: var(--font-display);
  font-size:21px;
  font-weight:900;
  letter-spacing:.01em;
  color:#FFF6E6;
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
/* Circular gold "J" badge */
.site-brand__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  padding:0;
  border-radius:50%;
  background: var(--foil);
  color: var(--maroon-darkest);
  font-family: var(--font-display);
  font-size:17px;
  font-weight:900;
  line-height:1;
  border:1px solid rgba(255,255,255,.45);
  box-shadow: 0 6px 16px rgba(201,150,43,.45), inset 0 1px 0 rgba(255,255,255,.75);
  transition: transform .18s ease;
}
.site-brand:hover .site-brand__num{ transform: rotate(-6deg); }

.site-nav__link{
  color:#F3E4D4;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(240,199,94,.20);
}
.site-nav__link:hover{
  background: rgba(240,199,94,.14);
  color:#FFF6E6;
  border-color: rgba(240,199,94,.45);
  box-shadow: 0 8px 20px rgba(0,0,0,.30);
}
.site-nav__link.is-active{
  background: var(--foil);
  color: var(--maroon-darkest);
  border-color: transparent;
  box-shadow: 0 8px 22px rgba(201,150,43,.35);
}
.site-nav__cta{
  background: linear-gradient(135deg,#1F7A4D 0%,#25a35f 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 8px 22px rgba(31,122,77,.35);
}
.site-nav__cta:hover{ filter:brightness(1.08); }

/* Ticker */
.site-ticker{
  background: linear-gradient(90deg, #2A0710 0%, #4A0D1F 50%, #2A0710 100%);
  border-top:1px solid rgba(240,199,94,.18);
}
.site-ticker__item{ color: rgba(255,233,168,.92); }
.site-ticker__sep{ color: var(--gold); }

.site-counter{ background: var(--maroon-darkest); }

/* ---------- Freshness / disclaimer block ---------- */
.freshness-wrap{
  border:1px solid rgba(240,199,94,.55);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}
.freshness-headline{
  color: var(--maroon-deep);
  background: linear-gradient(180deg,#FFFDF7 0%,#FBF3E4 100%);
  border-bottom: var(--hairline);
}
.freshness-disclaimer{
  background: linear-gradient(135deg,#8A1A34 0%,#6B1229 100%);
  border-top:0;
  border-bottom:0;
  color:#FFE9D6;
}
.freshness-more{ color: var(--gold-light); }
.freshness-updated{
  background: linear-gradient(180deg,#FBF3E4 0%,#F6E7CC 100%);
  color: var(--maroon-deep);
  border-top: var(--hairline);
  letter-spacing:.04em;
}

/* ---------- Leak / contact banner ---------- */
.leakb{
  margin:12px 5px;
  border:1px solid rgba(240,199,94,.45);
  border-radius: var(--ui-radius);
  background:
    radial-gradient(700px 200px at 50% 0%, rgba(240,199,94,.16) 0%, rgba(240,199,94,0) 70%),
    var(--maroon-grad);
  box-shadow: var(--ui-shadow);
  padding:18px 14px;
}
.leakajjki{
  font-family: var(--font-display);
  font-size:22px;
  background: var(--foil);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.leakajjkisml{ color:#F6E3D6; font-weight:700; line-height:1.6; }

/* ---------- Buttons ---------- */
.buttonb{
  border-radius:999px;
  padding:13px 22px;
  letter-spacing:.10em;
  border:1px solid transparent;
  box-shadow: var(--ui-shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.buttonb:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(58,10,24,.28); }
.bgred{ background: linear-gradient(135deg,#8A1A34 0%,#C0392B 100%); color:#fff; }
.bggreen{ background: linear-gradient(135deg,#166B43 0%,#25a35f 100%); color:#fff; }
.bgyellow, .bgblue{
  background: var(--foil);
  color: var(--maroon-darkest);
  border:1px solid rgba(255,255,255,.4);
}

/* ---------- Result hero ---------- */
.result-heading{
  border:1px solid rgba(240,199,94,.45);
  border-bottom:0;
  border-radius: var(--ui-radius) var(--ui-radius) 0 0;
  background: var(--maroon-grad);
  padding:18px 12px 14px;
  position:relative;
}
.result-heading::before{
  content:"";
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:120px; height:3px; border-radius:0 0 6px 6px;
  background: var(--foil);
}
.result-heading a{
  font-family: var(--font-display);
  font-size:26px;
  background: var(--foil);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.result-heading p{ color: rgba(255,233,168,.85); font-size:11px; letter-spacing:.14em; }

.resultmain{
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(240,199,94,.10) 0%, rgba(240,199,94,0) 70%),
    linear-gradient(180deg,#4A0D1F 0%,#3A0A18 100%);
  border:1px solid rgba(240,199,94,.45);
  border-top:0;
  border-radius:0 0 var(--ui-radius) var(--ui-radius);
  padding:20px 12px 26px;
  box-shadow: var(--ui-shadow);
}
.resultmaintime{ color: var(--gold-light); font-size:20px; letter-spacing:.02em; }
.resultmaintoday{
  color: rgba(255,233,168,.75);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.livegame{
  color:#FFF1D6;
  font-size:26px;
  letter-spacing:.10em;
  margin:14px 0 2px;
}
.liveresult{
  font-family: var(--font-display);
  font-size:46px;
  line-height:1;
  background: var(--foil);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter: drop-shadow(0 6px 18px rgba(201,150,43,.35));
}

/* Guessing forum CTA — gold shimmer instead of the old rainbow blink */
.result-bottom{
  animation:none;
  background: var(--maroon-grad);
  border:1px solid rgba(240,199,94,.45);
  border-radius: var(--ui-radius);
  margin:12px 5px;
  padding:0;
  overflow:hidden;
  box-shadow: var(--ui-shadow-sm);
}
.result-bottom a{
  position:relative;
  padding:16px 12px;
  font-size:15px;
  letter-spacing:.14em;
  color:#FFE9A8;
}
.result-bottom a::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,246,220,.28) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: goldSweep 3.4s ease-in-out infinite;
}
@keyframes goldSweep{ 0%{transform:translateX(-100%);} 60%,100%{transform:translateX(100%);} }
@media (prefers-reduced-motion: reduce){ .result-bottom a::after{ animation:none; opacity:0; } }

/* ---------- Market boards / cards ---------- */
.gboardfull, .gboardhalf{
  border:1px solid rgba(240,199,94,.40);
  border-radius:12px;
  background: linear-gradient(180deg,#4A0D1F 0%,#3A0A18 100%);
  box-shadow: var(--ui-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.gboardfull:hover, .gboardhalf:hover{ transform: translateY(-2px); box-shadow: var(--ui-shadow); }
.gbfullresult{ color: var(--gold); }

.market-card{
  border-radius: var(--ui-radius);
  overflow:hidden;
  border:1px solid rgba(240,199,94,.45);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.market-card:hover{
  transform: translateY(-3px);
  border-color: var(--gold-deep);
  box-shadow: var(--ui-shadow);
}
/* Neutralise the old per-index rainbow heads: one premium head for all */
.market-card .market-card-head,
.market-card:nth-child(4n) .market-card-head,
.market-card:nth-child(4n+1) .market-card-head,
.market-card:nth-child(4n+2) .market-card-head,
.market-card:nth-child(4n+3) .market-card-head{
  background: var(--maroon-grad) !important;
  color:#FFE9A8;
  border-bottom:1px solid rgba(240,199,94,.35);
}
.market-card .market-card-body,
.market-card:nth-child(4n) .market-card-body,
.market-card:nth-child(4n+1) .market-card-body,
.market-card:nth-child(4n+2) .market-card-body,
.market-card:nth-child(4n+3) .market-card-body{
  background: linear-gradient(180deg,#FFFDF7 0%,#FBF3E4 100%) !important;
}
.market-card-name{ font-family: var(--font-display); letter-spacing:.02em; }
.market-card-res{ color: var(--maroon); }
.market-card-time{ color: var(--ui-muted); }

.market-grid .market-row .market-cell,
.market-grid .market-row:nth-of-type(2) .market-cell:nth-child(1){
  background: var(--ui-surface) !important;
  border-color: rgba(240,199,94,.35) !important;
}
.market-name{ color: var(--maroon-deep); }
.market-res{ color: var(--maroon); font-weight:900; }

/* ---------- Tables (quick record, chart, khaiwal) ---------- */
.quick-record-table,
.chart-table,
.khaiwal-table{
  border:1px solid rgba(240,199,94,.45);
  border-radius:12px;
  overflow:hidden;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}
.quick-record-table th,
.chart-table th,
.khaiwal-table th{
  background: var(--maroon-grad);
  color:#FFE9A8;
  border:1px solid rgba(240,199,94,.22);
  letter-spacing:.10em;
}
.quick-record-table td,
.chart-table td,
.khaiwal-table td{
  border:1px solid rgba(58,10,24,.10);
  color: var(--ui-text);
}
.quick-record-table tr:nth-child(even) td,
.chart-table tr:nth-child(even) td,
.khaiwal-table tr:nth-child(even) td{ background: #FDF8EE; }
.quick-record-table tr:hover td,
.chart-table tr:hover td,
.khaiwal-table tr:hover td{ background:#F6E7CC; }
.quick-record-table tr.is-featured td{
  background: linear-gradient(180deg,#FFE9A8 0%,#F0C75E 100%);
  color: var(--maroon-darkest);
}
.quick-record-table .qr-link a{
  color: var(--maroon);
  text-decoration:none;
  border-bottom:2px solid var(--gold);
  padding-bottom:1px;
}
.quick-record-table .qr-link a:hover{ color: var(--maroon-soft); border-color: var(--gold-deep); }
.quick-record-table .qr-time{ color: var(--ui-muted); }
.chart-table .text-brand-400{ color: var(--maroon) !important; }

/* ---------- SEO content boxes ---------- */
.seo-box{
  background: var(--ui-surface);
  border:1px solid rgba(240,199,94,.45);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease;
}
.seo-box:hover{ box-shadow: var(--ui-shadow); transform: translateY(-1px); }
.seo-box.dark{
  background: var(--maroon-grad);
  border-color: rgba(240,199,94,.35);
  color:#F6E3D6;
}
.seo-box.dark h2, .seo-box.dark h3{ color: var(--gold-light) !important; }
.seo-box.dark p, .seo-box.dark li{ color: rgba(246,227,214,.92); }
.seo-box h2, .seo-box h3{
  font-family: var(--font-display);
  color: var(--maroon-deep);
  position:relative;
  padding-bottom:10px;
  letter-spacing:.01em;
}
.seo-box h2::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:64px; height:3px; border-radius:2px;
  background: var(--foil);
}
.seo-box p{ color: var(--ui-text); line-height:1.75; }
.seo-box h1{
  font-family: var(--font-display);
  color: var(--maroon-deep);
}

/* Quick-jump chips */
.seo-jump a{
  display:inline-block;
  padding:7px 14px;
  margin:0 6px 8px 0;
  border-radius:999px;
  background: var(--ui-surface);
  border:1px solid rgba(240,199,94,.55);
  color: var(--maroon-deep);
  font-weight:800;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  transition: all .14s ease;
}
.seo-jump a:hover{
  background: var(--foil);
  color: var(--maroon-darkest);
  border-color: transparent;
  transform: translateY(-1px);
}

/* ---------- FAQ accordion ---------- */
.faq-accordion{
  border:1px solid rgba(240,199,94,.45);
  border-radius:12px;
  background: var(--ui-surface);
  overflow:hidden;
  margin-bottom:10px;
  transition: box-shadow .18s ease;
}
.faq-accordion[open]{ box-shadow: var(--ui-shadow-sm); }
.faq-accordion summary{
  cursor:pointer;
  padding:14px 16px;
  font-weight:800;
  color: var(--maroon-deep);
  background: linear-gradient(180deg,#FFFDF7 0%,#FBF3E4 100%);
  list-style:none;
  position:relative;
  padding-right:44px;
}
.faq-accordion summary::-webkit-details-marker{ display:none; }
.faq-accordion summary::after{
  content:"+";
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  width:24px; height:24px; line-height:22px; text-align:center;
  border-radius:50%;
  background: var(--foil);
  color: var(--maroon-darkest);
  font-weight:900;
  transition: transform .2s ease;
}
.faq-accordion[open] summary::after{ content:"\2013"; transform:translateY(-50%) rotate(180deg); }
.faq-accordion .faq-a, .faq-accordion .faq-answer{
  padding:14px 16px;
  border-top: var(--hairline);
  color: var(--ui-text);
  line-height:1.75;
}

/* ---------- Archive vault / list links ---------- */
.list a, .list4 a, .hotlink a{
  color: var(--maroon);
  text-decoration:none;
  border-bottom:2px solid rgba(240,199,94,.6);
}
.list a:hover, .list4 a:hover, .hotlink a:hover{ color: var(--maroon-soft); border-color: var(--gold-deep); }
.hotlink-black{ background: var(--maroon-grad); color:#FFE9A8; }

/* ---------- Pagination ---------- */
.pagination__link{
  border:1px solid rgba(240,199,94,.5);
  color: var(--maroon-deep);
  background: var(--ui-surface);
  border-radius:10px;
}
.pagination__link:hover{ background:#FBF3E4; }
.pagination__link.is-active{
  background: var(--foil);
  color: var(--maroon-darkest);
  border-color:transparent;
}

/* ---------- Forum (guessing) ---------- */
.forum-post{
  border:1px solid rgba(240,199,94,.4);
  border-radius:12px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-sm);
}
.forum-post-head{ background: linear-gradient(180deg,#FBF3E4 0%,#F6E7CC 100%); border-bottom: var(--hairline); }
.forum-user{ color: var(--maroon-deep); font-weight:900; }
.forum-meta{ color: var(--ui-muted); }

/* ---------- Auth cards ---------- */
.auth-card{
  border:1px solid rgba(240,199,94,.45);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow);
}
.auth-input{ border:1px solid rgba(58,10,24,.18); border-radius:10px; }
.auth-input:focus{ outline:none; border-color: var(--gold-deep); box-shadow:0 0 0 3px rgba(240,199,94,.28); }

/* ---------- Footer ---------- */
footer.px-6{
  background: linear-gradient(180deg,#3A0A18 0%,#26060F 100%) !important;
  border-top:1px solid rgba(240,199,94,.30);
  position:relative;
}
footer.px-6::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: var(--foil);
}
footer.px-6 a{ color: rgba(255,233,168,.8); }
footer.px-6 a:hover{ color: var(--gold-light); }

/* Footer wordmark */
.footer-brand{
  font-family: var(--font-display);
  font-size:22px;
  font-weight:900;
  color:#FFF6E6;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.footer-brand__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:50%;
  background: var(--foil);
  color: var(--maroon-darkest);
  font-size:16px;
  border:1px solid rgba(255,255,255,.45);
}

/* ---------- Section reveal (CSS-only, respects reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference){
  .seo-box, .market-card, .quick-record-box{
    animation: riseIn .5s ease both;
  }
  @keyframes riseIn{
    from{ opacity:0; transform: translateY(10px); }
    to{ opacity:1; transform:none; }
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px){
  .site-brand__mark{ font-size:18px; }
  .site-brand__num{ width:26px; height:26px; font-size:15px; }
  .result-heading a{ font-size:20px; }
  .liveresult{ font-size:38px; }
  .livegame{ font-size:21px; }
  .leakajjki{ font-size:18px; }
  .seo-box h2{ font-size:16px; }
  .footer-brand{ font-size:18px; }
}

/* ---------- Advertiser / khaiwal promo cards ---------- */
.boxc3{ margin:12px 5px; }
.promo-card{
  background: linear-gradient(180deg,#FFFDF7 0%,#FBF3E4 100%);
  border:1px solid rgba(240,199,94,.55);
  border-radius: var(--ui-radius);
  padding:18px 14px;
  text-align:center;
  font-weight:700;
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.promo-card:hover{ transform: translateY(-2px); box-shadow: var(--ui-shadow); }
.promo-card--soft{
  background: linear-gradient(180deg,#FFF6E6 0%,#F7E7CE 100%);
}
.promo-title{
  display:block;
  font-family: var(--font-display);
  font-size:21px;
  font-weight:900;
  color: var(--maroon-deep);
  letter-spacing:.02em;
  margin-bottom:6px;
}
.promo-body{
  display:block;
  font-size:14px;
  line-height:1.7;
  color: var(--ui-text);
}
.promo-phone{
  display:inline-block;
  margin:8px 0;
  font-family: var(--font-display);
  font-size:24px;
  font-weight:900;
  color: var(--maroon);
  letter-spacing:.04em;
}
.promo-btn{
  height:42px;
  min-width:150px;
  padding:0 20px;
  margin:6px 4px;
  border:0;
  border-radius:999px;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow: var(--ui-shadow-sm);
  transition: transform .14s ease, filter .14s ease;
}
.promo-btn:hover{ transform: translateY(-2px); filter:brightness(1.06); }
.promo-btn--tg{ background: linear-gradient(135deg,#1E7FA8 0%,#229ed9 100%); color:#fff; min-width:260px; }
.promo-btn--wa{ background: var(--foil); color: var(--maroon-darkest); }
.promo-btn--call{ background: linear-gradient(135deg,#166B43 0%,#25a35f 100%); color:#fff; }
.promo-card a{ text-decoration:none; }

/* Khaiwal panel sits on the dark leak card */
.leakb .khaiwal-table th{ background: rgba(0,0,0,.28); }
.leakb .khaiwal-table td{ background: rgba(255,253,247,.94); }

/* ---------- Page H1 (homepage hero) ---------- */
.page-h1{
  margin:0;
  padding:16px 14px 6px;
  font-family: var(--font-display);
  font-size:22px;
  line-height:1.3;
  font-weight:900;
  text-align:center;
  color: var(--maroon-deep);
  background: linear-gradient(180deg,#FFFDF7 0%,#FFFDF7 100%);
}
.page-h1::after{
  content:"";
  display:block;
  width:88px; height:3px;
  margin:10px auto 0;
  border-radius:2px;
  background: var(--foil);
}
@media (max-width: 720px){
  .page-h1{ font-size:18px; padding:14px 12px 4px; }
}