/*
 * 1X PANA theme layer. Loaded after css/site.css (the compiled Tailwind build,
 * whose colours already come from the --*-color variables set in every page's
 * <style> block) and css/extra.css.
 *
 * Brand guideline: red #F80018, black #000000, white #FFFFFF; display type
 * Ethnocentric. Ethnocentric is a licensed font and is not bundled: Orbitron
 * (SIL OFL, self-hosted in /fonts) stands in for it. To switch, change
 * --x-display below.
 *
 * The design: a black "band" (header, page titles, hero, footer, drawer) over a
 * light or dark page. Everything that sits inside a band reads the dark palette
 * because .x-band redefines the colour variables (see the <style> in <head>).
 * Shapes follow the logo: italic slants, cut corners and the "A" triangle.
 */

:root {
  --x-red: #F80018;
  --x-red-deep: #C40014;
  --x-red-hot: #FF3B4E;
  --x-ink: #0B0B0C;
  --x-display: "Orbitron", "Inter", system-ui, sans-serif;
  --font-family-display: var(--x-display);
  /* Download buttons: TT Supermolot Neue Trl Bold (see the @font-face at the bottom). */
  --x-cta-font: "TTSupermolotNeueTrl", sans-serif;
  --x-cut: 14px;
  --x-radius: 14px;
}

html { scroll-padding-top: 104px; }
::selection { background: var(--x-red); color: #fff; }

/* ------------------------------------------------------------------ type */
.font-display,
h1, h2.font-display { font-family: var(--x-display); }
main h1, article h1 { font-family: var(--x-display); letter-spacing: .01em; }
main h1, article h1 { text-wrap: balance; }

/* ------------------------------------------------------------- buttons */
/* Every red-gradient control (chart buttons, Play, Download, drawer, footer
   column heads) gets white text; the site's own markup used dark text on gold. */
.from-gradGoldTop.to-gradGoldBottom,
.from-gradGoldTop.to-gradGoldBottom * {
  color: #fff !important;
}
.from-gradGoldTop.to-gradGoldBottom { text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }

/* The "X" of the logo is made of two leaf shapes: top-left and bottom-right corners
   rounded, top-right and bottom-left sharp. Buttons and section headings share it. */
.x-btn {
  --leaf: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 0 38px;
  border: 0;
  border-radius: var(--leaf) 0 var(--leaf) 0;
  color: #fff;
  background: linear-gradient(180deg, #FF2038 0%, #D00014 100%);
  box-shadow: 0 12px 26px rgba(248, 0, 24, .42);
  font-family: var(--x-cta-font);
  font-weight: 700; /* the only weight loaded for the button face (Bold) */
  font-size: clamp(16px, 4.9vw, 23px);
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.x-btn--bar { --leaf: 18px; width: 100%; min-height: 54px; padding: 0 20px; font-size: clamp(15px, 4.5vw, 19px); }
.x-btn--lg { padding: 0 44px; }
@media (max-width: 1023px) { .x-btn--lg { width: 100%; padding: 0 18px; } }
.x-btn svg { width: 22px; height: 22px; color: #fff; flex: none; }
.x-btn svg[stroke="currentColor"][fill="currentColor"] { fill: currentColor; }
.x-btn .lucide-download { width: 20px; height: 20px; fill: none; }
/* site.css has a:hover { color: var(--primary-color) }, which is stronger than the single class .x-btn
   and turned the label brand-red on the red button on hover. Keep it white in every state. */
.x-btn,
.x-btn:hover,
.x-btn:focus,
.x-btn:active,
.x-btn:visited { color: #fff; }
/* Hover darkens the red (more contrast for the white label) instead of brightening it. */
.x-btn:hover {
  background: linear-gradient(180deg, #F80018 0%, #B80012 100%);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(248, 0, 24, .5);
}
.x-btn:active { transform: translateY(0) scale(.99); }
.x-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------------------------------------------------------------- header */
/* Light theme: brand red with a white logo and white links. Dark theme: black. The
   header is an .x-band, so its text/borders already use the dark palette. */
.x-header {
  background: linear-gradient(180deg, #F80018 0%, #D00014 100%) !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(120, 0, 12, .38) !important;
}
.dark .x-header {
  background: #000 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28) !important;
}
.x-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, .15) 100%);
  pointer-events: none;
}
.dark .x-header::after {
  background: linear-gradient(90deg, #F80018 0%, #FF3B4E 50%, #F80018 100%);
}
.x-header a > img { height: 30px !important; width: auto; }
/* white logo on red, red/white logo on black */
.x-header .x-logo-on-black { display: none; }
.dark .x-header .x-logo-on-red { display: none; }
.dark .x-header .x-logo-on-black { display: block; }
.x-header button { color: #fff; }
.x-header nav[aria-label="Primary"] a {
  position: relative;
  padding: 8px 2px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
@media (min-width: 1536px) { .x-header nav[aria-label="Primary"] a { font-size: 13px; } }
.x-header nav[aria-label="Primary"] a:hover { color: #fff; }
.dark .x-header nav[aria-label="Primary"] a:hover { color: var(--x-red-hot); }
.x-header nav[aria-label="Primary"] a.font-bold { color: #fff; }
.x-header nav[aria-label="Primary"] a.font-bold::after,
.x-header nav[aria-label="Primary"] a:hover::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: -2px;
  height: 3px;
  background: #fff;
  transform: skewX(-24deg);
}
.x-header nav[aria-label="Primary"] a:not(.font-bold):hover::after { opacity: .75; }
.dark .x-header nav[aria-label="Primary"] a.font-bold::after,
.dark .x-header nav[aria-label="Primary"] a:hover::after { background: var(--x-red); }
.x-header nav[aria-label="Primary"] a.font-medium { font-weight: 600; }
/* theme switch: a dark disc with a white icon reads on red; unchanged in dark mode */
.x-header button[data-theme-toggle] {
  background: rgba(0, 0, 0, .32) !important;
  border-color: rgba(255, 255, 255, .4) !important;
  color: #fff !important;
  box-shadow: none;
}
.dark .x-header button[data-theme-toggle] {
  background: var(--surface-bg) !important;
  border-color: var(--border-color) !important;
}
.x-header nav .group > div > div {
  border-radius: 6px;
  border-color: rgba(248, 0, 24, .55);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .5);
}

/* -------------------------------------------------------------- page bands */
.x-pagehero:not(.x-hero) {
  background: #000 !important;
  isolation: isolate;
}
.x-pagehero:not(.x-hero)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; right: -6%;
  width: 44%;
  background: linear-gradient(160deg, rgba(248, 0, 24, .42), rgba(248, 0, 24, .04));
  clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.x-pagehero:not(.x-hero)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; right: calc(44% - 6% + 2px);
  width: 3px;
  background: rgba(255, 255, 255, .85);
  transform: skewX(-34deg);
  transform-origin: top;
  opacity: .0;
  pointer-events: none;
}
.x-pagehero h1 { color: #fff; }

/* ------------------------------------------------------------------ hero */
.x-hero {
  background: #000;
  color: #fff;
  isolation: isolate;
  /* The hero fills the first screen, content centred in it, so the light page below it (and the
     red glow line on the hero's bottom edge) start BELOW the fold on every phone and desktop
     size. The extra 6px keep the glow line itself off screen. svh = the visible height with the
     browser toolbars showing, i.e. what you see on arrival; vh is the fallback. */
  min-height: calc(100vh + 6px);
  min-height: calc(100svh + 6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.x-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(52% 70% at 76% 46%, rgba(248, 0, 24, .42), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(248, 0, 24, .20), transparent 70%);
}
.x-hero__slash {
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; right: -4%;
  width: 52%;
  background: linear-gradient(165deg, rgba(248, 0, 24, .32), rgba(248, 0, 24, .05) 70%);
  clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%);
}
.x-hero__slash::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  background: linear-gradient(#fff, #fff) 24% 0 / 3px 100% no-repeat;
  opacity: .0;
}
.x-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: 24px;
  padding: 128px 0 56px;
}
.x-hero__copy { position: relative; z-index: 2; text-align: left; }
.x-eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 8px;
  color: #cfcfd5;
  font-size: 13px; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase;
}
.x-eyebrow span { display: block; width: 34px; height: 3px; background: var(--x-red); transform: skewX(-30deg); }
.x-hero__brand {
  margin: 4px 0 12px;
  font-size: clamp(46px, 6.6vw, 98px);
  font-weight: 900;
  font-style: italic;
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.x-hero__one { color: var(--x-red); text-shadow: 0 0 40px rgba(248, 0, 24, .45); }
.x-hero__pana { color: #fff; }
.x-hero__tag {
  margin: 0 0 6px;
  font-size: clamp(18px, 2.3vw, 30px);
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #fff;
}
.x-hero__tag span { display: block; color: var(--x-red); }
.x-hero__tag { text-wrap: balance; }
/* The rotating line slides +-10px while it fades: keep a clear gap above the button. */
.x-hero .hero-welcome { margin: 4px 0 32px; color: #d6d6db; }
.x-hero .hero-welcome .hero-rotate,
.x-hero .hero-welcome .hero-rotate * { color: var(--x-red-hot); }
.x-hero__art { position: relative; z-index: 1; display: flex; justify-content: center; }
.x-hero__img {
  display: block;
  width: min(100%, 540px);
  height: auto;
  animation: x-float 7s ease-in-out infinite;
}
.x-hero__cta-m { grid-column: 1 / -1; justify-content: center; width: 100%; }
.x-hero__cta-m .x-btn { width: 100%; }
@keyframes x-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@media (max-width: 1023px) {
  .x-hero__grid { grid-template-columns: 1fr; gap: 6px; padding: 96px 0 28px; }
  .x-hero__copy { text-align: center; }
  .x-eyebrow { justify-content: center; }
  .x-hero__img {
    width: min(86%, clamp(160px, calc(100vh - 334px), 380px));
    height: auto;
  }
  @supports (height: 1svh) {
    .x-hero__img { width: min(86%, clamp(160px, calc(100svh - 334px), 380px)); }
  }
  /* site.css has p:not(:last-child){margin-bottom:32px}, which outranks a single class: these
     selectors are one class longer on purpose. */
  .x-hero__copy > .x-eyebrow { margin-bottom: 14px; }
  .x-hero__copy > .x-hero__brand { margin-bottom: 10px; }
  .x-hero__copy > .x-hero__tag { margin-bottom: 12px; line-height: 1.15; }
  .x-hero .hero-welcome { margin: 0 0 6px; line-height: 1.3; }
  .x-hero__slash { width: 90%; right: -20%; }
}
@media (max-width: 639px) {
  .x-hero__grid { padding-top: 80px; }
  .x-btn { min-height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  .x-hero__img { animation: none; }
}

/* ------------------------------------------------------------------ footer */
.x-footer { background: #000 !important; color: #d6d6db; }
.x-footer a:hover { color: var(--x-red-hot); }
.x-footer a > img { height: 32px !important; width: auto; }

/* ---------------------------------------------------------- mobile drawer */
.x-drawer { background: #000 !important; }
.x-drawer img { height: 28px; width: auto; }
.x-drawer.translate-x-0 { box-shadow: 18px 0 44px rgba(0, 0, 0, .55) !important; border-right: 2px solid var(--x-red); }
.x-drawer:not(.translate-x-0) { box-shadow: none !important; }

/* ------------------------------------------------------------ dark theme */
.dark img[src*="jackpot-crown"] { filter: invert(1); }

/* --------------------------------------------------------- content typography */
/* Orbitron is much wider than the font the layout was drawn for: keep the
   long SEO headings readable. */
main h2.md\:text-5xl,
main h2.md\:text-4xl,
article h2.md\:text-4xl { font-size: clamp(22px, 2.8vw, 34px) !important; line-height: 1.18; }
main h2.md\:text-3xl,
article h2.md\:text-3xl { font-size: clamp(19px, 2.2vw, 27px) !important; line-height: 1.2; }
main h3, article h3 { letter-spacing: .005em; }

/* The 777 glyph used on the King Jackpot heading sits on a red pill: draw it white. */
.from-gradGoldTop.to-gradGoldBottom img { filter: brightness(0) invert(1); }

/* Section headings ("Games", "Games Rates", "Starline Games", ...): the same leaf shape and
   the same face as the Download App buttons (--x-cta-font). */
.text-center > span.inline-flex.from-gradGoldTop.to-gradGoldBottom {
  border-radius: 18px 0 18px 0;
  box-shadow: 0 10px 20px rgba(248, 0, 24, .3);
  font-family: var(--x-cta-font);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
@media (max-width: 639px) {
  .text-center > span.inline-flex.from-gradGoldTop.to-gradGoldBottom { font-size: 16px; }
}

/* Call Now / WhatsApp. The markup arrived with pastel gradients (pink / pale green)
   and coloured text via !important utilities; with the theme's white-on-red rule
   that left white text on pastel, which read as disabled. Make them solid. */
#contact-banner a[data-contact] {
  border: 0 !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .2);
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
#contact-banner a[data-contact],
#contact-banner a[data-contact] svg { color: #fff !important; }
#contact-banner a[data-contact="call"] {
  background-image: linear-gradient(180deg, #FF2038 0%, #D00014 100%) !important;
  box-shadow: 0 8px 18px rgba(248, 0, 24, .32) !important;
}
#contact-banner a[data-contact="whatsapp"] {
  background-image: linear-gradient(180deg, #2BD468 0%, #16A34A 100%) !important;
  box-shadow: 0 8px 18px rgba(22, 163, 74, .32) !important;
}
#contact-banner a[data-contact]:hover { filter: brightness(1.1); transform: translateY(-2px); }
#contact-banner a[data-contact]:active { transform: translateY(0); }
#contact-banner a[data-contact]:focus-visible { outline: 3px solid var(--x-ink); outline-offset: 3px; }
.dark #contact-banner a[data-contact]:focus-visible { outline-color: #fff; }

/* ----------------------------------------------- game rates, dark theme */
/* The rates block was drawn for a light page: the mobile table, its header row and
   its wrapper are hard-coded white / pale pink, and the card icon is dark ink. */
.dark img[src*="loop-icon"] { filter: invert(1); }
.dark .md\:hidden.bg-white,
.dark tr.bg-white { background-color: var(--surface-bg) !important; }
.dark .md\:hidden.bg-white { border-color: var(--border-color) !important; }
.dark thead tr.bg-\[\#FFF5F6\] { background-color: var(--time-bg) !important; border-color: var(--border-color) !important; }
.dark .divide-\[\#F0D0D4\] > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-color) !important; }
.dark .max-md\:bg-white\/40 { background-color: transparent !important; }

/* ----------------------------------------------------------- sticky download bar */
/* Hidden means hidden: no shadow bleeding into the viewport, not focusable, not visible. */
.x-stickybar {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  visibility: hidden;
  box-shadow: none;
  transition: transform .3s ease-in-out, box-shadow .3s ease-in-out, visibility 0s linear .3s;
}
.x-stickybar.translate-y-0 {
  visibility: visible;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .14);
  transition-delay: 0s;
}
.dark .x-stickybar.translate-y-0 { box-shadow: 0 -8px 24px rgba(0, 0, 0, .5); }
.x-btn .animate-bounce { animation-duration: 1s; }
@media (prefers-reduced-motion: reduce) { .x-btn .animate-bounce { animation: none; } }

/* ------------------------------------------------------------ TT Supermolot Neue Trl (buttons) */
/* Self-hosted copy of https://boss777.mobi/fonts/TTSupermolotNeueTrl-Bd.woff2 (that host sends no CORS
   header, so it cannot be hot-linked for a font). Used only through --x-cta-font. */
@font-face {
  font-family: "TTSupermolotNeueTrl";
  src: url("/fonts/TTSupermolotNeueTrl-Bd.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------ Product Sans Bold (menus, FAQ questions, footer lists) */
/* Self-hosted copy of https://fonts.cdnfonts.com/s/14955/ProductSans-Bold.woff, repackaged losslessly as
   WOFF2. Used for: the header menu and its dropdowns, the mobile side menu, the question line of each FAQ
   item (not the FAQ heading, not the answers), and the "Satta Matka Records" footer columns (headings and
   market names). Licence: see the README. */
@font-face {
  font-family: "ProductSans";
  src: url("/fonts/ProductSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root { --x-ui-font: "ProductSans", Inter, system-ui, sans-serif; }

.x-header nav[aria-label="Primary"] a,
.x-header nav[aria-label="Primary"] p,
#mobile-nav a:not(.x-btn),
#mobile-nav button,
#mobile-nav li,
[data-accordion] > button > span:first-child,
details > summary,
#footer-charts h3,
#footer-charts li,
#footer-charts ul a {
  font-family: var(--x-ui-font);
  font-weight: 700;
}

/* --------------------------------------------- market names on the home cards */
/* "Milan Morning", "10:00 AM", ... in Games, Starline Games and Jackpot Games: same face as the buttons. */
#games-grid h5,
#starline-grid h5,
#jackpot-grid h5 {
  font-family: var(--x-cta-font);
  font-weight: 700;
}

/* ------------------------------------------------- game rates: the rate boxes */
/* "10 KA 90": the box takes the colour of the star icon's circle in the "5 Star Rated" card
   (bg-[#FFE9EB] / dark:bg-[#1A1A1D] in index.html). The round icon above each rate is left alone. */
#rates-grid span.bg-timeBg,
#rates-mobile-body span.bg-timeBg { background-color: #FFE9EB; border-color: #FFBFC6; }
.dark #rates-grid span.bg-timeBg,
.dark #rates-mobile-body span.bg-timeBg { background-color: #1A1A1D; border-color: #5C0B14; }

/* ------------------------------------------------------------------ menu in capitals */
/* Header menu (links, dropdown items and headings) and the mobile side menu: all capitals. */
.x-header nav[aria-label="Primary"] a,
.x-header nav[aria-label="Primary"] p,
#mobile-nav a:not(.x-btn),
#mobile-nav li,
#mobile-nav button { text-transform: uppercase; }

/* --------------------------------------------- trust cards (5 Star Rated, ...) */
/* Product Sans Bold for the title and the line under it. */
.x-trust article h5,
.x-trust article span {
  font-family: var(--x-ui-font);
  font-weight: 700;
}

/* ------------------------------------- "Satta Matka Records": column headings */
/* Jodi Charts, Pana Charts, King Starline Charts, King Jackpot Charts: capitals, 2px bigger than
   before (11px -> 13px on phones, 15px -> 17px from 640px up). */
#footer-charts h3 { font-size: 13px; text-transform: uppercase; }
@media (min-width: 640px) {
  #footer-charts h3 { font-size: 17px; }
}

/* ---------------------------------------------------------------- scroll boxes */
/* The small scrollable text boxes (the SEO text above the home FAQ; the two boxes on every chart
   page) had a fixed height of 28-80px, which cut their own heading in half (on a phone the home
   heading is four lines = 104px, in an 56px box). ui.js sizes each one to exactly its heading
   (data-peek="0"; a number N would add N lines of the text below), so the heading is whole and the
   text under it only appears when the visitor scrolls. Without JS the box grows with its content
   up to the max-height. */
.x-scrollbox { height: auto; max-height: 260px; padding-bottom: 0; }
/* no bottom padding on purpose: content scrolled out of view is still painted inside a scroll box's
   padding, which showed a sliver of the next line under the heading */

/* ------------------------------------------------------------- blog "Read More" */
/* White text in every state (the markup had near-black text, and site.css's a:hover turns links red). */
a.blog-read-more,
a.blog-read-more:hover,
a.blog-read-more:focus,
a.blog-read-more:active,
a.blog-read-more:visited { color: #fff; }