/* ============================================================
   DPBoss – Main Stylesheet
   Extracted & cleaned from reference site
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  background-color: #fc9;          /* peach – exact match */
  text-align: center;
  padding: 3px 10px;
  margin: 0;
  font-style: italic;
  font-family: Helvetica, sans-serif;
  font-weight: 700;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

a, a:hover { text-decoration: none; }

p { color: #000b65; text-shadow: 1px 1px 2px #fff; }

/* ── Shared box style ─────────────────────────────────────── */
.box-border {
  color: #000;
  text-align: center;
  margin-bottom: 4px;
  margin-top: -2px;
  display: block;
  font-size: 20px;
  border: 2px solid #ff182c;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
}

/* ── Logo / header icon bar ───────────────────────────────── */
.m-icon {
  background: #fc9;
  padding: 0 10px;
  display: block;
  color: #fff8f8;
  margin-bottom: 5px;
  letter-spacing: 1px;
  font-weight: 700;
  border: 3px solid #ff0016;
  border-radius: .75em;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
}

.m-icon img { margin: 5px; }

/* ── Welcome strip ────────────────────────────────────────── */
.welcome-strip {
  display: flex;
  padding: 5px;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  border: 2px solid #ff182c;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
  margin-bottom: 5px;
}

.welcome-strip img { width: 90px; height: 68px; }

.welcome-strip p {
  color: black;
  display: inline-block;
  font-size: 16px;
}

/* ── Site title / text2 ───────────────────────────────────── */
.text2 {
  border-width: 3px;
  border: 2px solid #ff182c;
  margin-bottom: 5px;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
}

.text2 h1 {
  font-size: 16px;
  color: #000;
  padding-bottom: 3px;
}

.text2 h2 {
  color: #000;
  font-size: 10px;
  font-weight: 600;
  line-height: 11px;
  text-shadow: none;
}

/* ── text3 – gradient info box ────────────────────────────── */
.text3 {
  background: linear-gradient(187deg, #fc9 50%, #ffc387 50%);
  border: 2px solid #ff0016;
  border-style: outset;
  border-radius: 10px;
  margin-bottom: 5px;
  line-height: 1.4;
  font-size: 14px;
  padding: 4px 10px;
  color: #00094d;
  text-shadow: 1px 1px 2px #fff;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
}

/* ── Section headings (pink bar) ──────────────────────────── */
.sm-ttle,
.f-pti h3,
.oc-fg h4,
.liv-rslt h4,
.matka-result h4,
.banner,
.a-27-title {
  background: #ff00a2;
  padding: 5px 10px;
  text-shadow: 1px 1px 2px #000;
  display: block;
  color: #fff8f8;
  margin-bottom: 5px;
  letter-spacing: 1px;
  font-weight: 700;
  border: 2px solid #fff;
  border-radius: .75em;
}

/* ── Today Lucky Number / Final Ank ──────────────────────── */
.f-pti {
  border: 2px solid #ff182c;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
  margin-bottom: 5px;
}

.f-pti .dflex {
  display: flex;
}

.f-pti .dflex > div { width: 50%; }

.f-pti h4 {
  font-size: 18px;
  color: #001699;
  text-shadow: 1px 1px 2px #fff;
}

.f-pti p {
  font-size: 22px;
  text-shadow: none;
}

.f-pti .bb55 { border-left: 1px solid #000ff4; }

/* ── Scrolling Final Ank ticker ───────────────────────────── */
.amthltg {
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0 5px;
  height: 40px;
}

.amthltg p {
  animation: amthltg 10s linear infinite;
  font-size: 14px;
  margin-top: 20px;
  color: #000;
  text-shadow: 1px 1px 2px #fff;
}

.amthltg p:hover { animation-play-state: paused; }

@keyframes amthltg {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(0, -100%); }
}

/* ── Notice / promo boxes ─────────────────────────────────── */
.notice-box {
  border: 2px solid #ff182c;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
  margin-bottom: 7px;
  font-size: 15px;
  padding: 7px;
  line-height: 22px;
  color: #001699;
}

.notice-title { color: #ff00a2; font-weight: bold; display: block; }

.promo-box {
  margin-bottom: 7px;
  font-size: 14px;
  padding: 8px;
  line-height: 20px;
  background: #8f0000;
  color: #fff;
  text-align: center;
  border-radius: 8px;
}

.download-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 30px;
  font-size: 14px;
  font-weight: 600;
  color: #0a2fbf;
  background: #fff;
  border-radius: 20px;
  text-decoration: none;
  transition: 0.25s;
}

.download-btn:hover { background: #e9edff; transform: scale(1.05); }

/* ── Live Result section ──────────────────────────────────── */
.liv-rslt {
  color: #000;
  text-align: center;
  margin-bottom: 4px;
  display: block;
  font-size: 20px;
  border: 2px solid #ff182c;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
}

.lv-mc .h8 {
  display: block;
  font-size: 22px;
  color: #00094d;
  text-shadow: 1px 1px 2px #fff;
}

.lv-mc .h8:not(:first-child) {
  display: block;
  border-top: 1px solid #ff0020;
  margin-top: 5px;
}

.lv-mc .h9 {
  display: block;
  color: #880e4f;
  text-shadow: 1px 1px 2px #ffe2c6;
  font-size: 21px;
  line-height: 1;
  margin: 3px 0;
}

.lv-mc p {
  font-size: 14px;
  padding-top: 5px;
  color: #000;
  text-shadow: none;
}

.lv-mc button,
.clk1-rld {
  border: 1px solid #e6e6e6;
  background: #522f92;
  color: #fff;
  padding: 5px 7px;
  border-radius: 8px;
  font-size: 12px;
  margin: 2px 0 -1px;
  display: inline-block;
  transition: all .3s;
  cursor: pointer;
}

.lv-mc button:hover,
.clk1-rld:hover {
  box-shadow: 0 0 13px 3px #00000033;
}

/* ── Market result cards (oc-fg) ──────────────────────────── */
.oc-fg {
  border: 2px solid #ff182c;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
  margin-bottom: 5px;
}

.oc-fg h5 {
  font-size: 22px;
  color: #000;
  text-shadow: 1px 1px 2px #fff;
}

.oc-fg .k2w5 { font-size: 22px; }

.d1635 {
  display: flex;
  flex-wrap: wrap;
  margin: 5px;
  border-radius: 10px;
  overflow: hidden;
}

.oc-3a-69 {
  width: 50%;
  display: inline-block;
  padding: 5px;
  border-color: #009206;
  border-style: solid;
}

.oc-3a-69:nth-child(odd)  { border-width: 0 1px 2px 2px; margin: 0; border-radius: 0; }
.oc-3a-69:nth-child(even) { border-width: 0 2px 2px 1px; margin: 0; border-radius: 0; }
.d1635 .oc-3a-69:nth-child(1),
.d1635 .oc-3a-69:nth-child(2) { border-top-width: 2px; }

.oc-fg .oc-3a-69 .g5a1 {
  background: linear-gradient(#00d309, #004503);
  font-size: 22px;
  margin-bottom: 5px;
  padding: 7px 0;
  border-radius: 10px;
  clip-path: polygon(0 0, 97% 0, 100% 48%, 100% 80%, 100% 100%, 3% 100%, 0 46%, 0 20%);
  color: #fff;
  text-shadow: 1px 1px 2px red;
}

.oc-fg .oc-3a-69 .fg-p3 {
  font-size: 22px;
  color: #080808;
  text-shadow: 1px 1px 2px #ffe2c6;
}

.oc-fg .oc-3a-69 .l9w2v {
  font-size: 20px;
  line-height: 24px;
}

/* ── Market result table (sky-23) ─────────────────────────── */
.sky-23 {
  border: 2px solid #1f3092;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
  margin-bottom: 5px;
}

.sky-23 h4 {
  background: #ff1731;
  color: #fff;
  border-radius: 10px;
  font-size: 30px;
  padding: 3px 5px;
  text-shadow: 1px 1px 2px #000;
  clip-path: polygon(0 0, 97% 0, 100% 48%, 100% 80%, 100% 100%, 3% 100%, 0 46%, 0 20%);
}

.sky-23 a {
  background-image: linear-gradient(-225deg, #231557 0, #44107a 29%, #ff1361 67%, #ff0025 100%);
  background-size: 200% auto;
  color: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  font-size: 22px;
  display: block;
  border-bottom: 2px solid #ff0026;
  padding: 5px;
}

.sky-23 a:last-child { border-bottom-width: 0; }

@keyframes textclip { to { background-position: 200% center; } }

/* ── Starline / special tables ────────────────────────────── */
.my-table table { border-collapse: collapse; width: 100%; }

.my-table td,
.my-table th {
  padding: 2px 0;
  font-size: 15px;
  text-shadow: 1px 1px 2px #fff;
  border: 1px solid #ff0016;
}

.my-table tbody  { font-size: 16px; }
.my-table thead  { background-color: #fff; font-size: 16px; }

.my-table.cm-sl h4,
.my-table.mr-sl h4 {
  background: #ffd902;
  padding: 5px 10px;
  text-shadow: 1px 1px 2px #fff;
  display: block;
  color: #000;
  margin-bottom: 5px;
  margin-top: 10px;
  letter-spacing: 1px;
  font-weight: 700;
  border: 2px solid #000;
  border-radius: .75em;
}

.my-table.mumraj-sl h4 {
  background: #ff00a2;
  color: #fff8f8;
  border: 2px solid #fff;
  border-radius: .75em;
  padding: 5px 10px;
  display: block;
  margin-bottom: 5px;
  letter-spacing: 1px;
  font-weight: 700;
}

/* ── Chart links (sta-div) ────────────────────────────────── */
.sta-div {
  color: #000;
  text-align: center;
  margin-bottom: 4px;
  display: block;
  font-size: 20px;
  border: 2px solid #ff182c;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
}

.sta-div h6 {
  color: #fff;
  padding: 5px 10px 3px;
  font-size: 24px;
  background: #ff00a2;
  border-radius: .75em;
  border: 2px solid #fff;
  display: block;
  margin-bottom: 5px;
}

.sta-div a {
  display: block;
  font-size: 22px;
  padding: 5px 7px 4px;
}

.sta-1 a {
  border-bottom: 2px solid #00189f;
  color: #1a237e;
  text-shadow: 1px 1px #d9d9d9;
}

.sta-div a:last-child { border-bottom-width: 0; }
.sta-1 { border-color: #00189f; }

/* ── FAQ / Q&A section ────────────────────────────────────── */
.qtn14 {
  border: 2px solid #003db6;
  border-radius: 10px;
  padding: 3px 0;
  margin: 5px auto;
  display: block;
  font-style: normal;
}

.qtn14 h4 {
  color: #d70544;
  font-size: 22px;
  padding: 5px 5px 6px;
  border-top: 1.5px solid #e0557f;
  margin-top: 5px;
  font-style: normal;
}

.qtn14 h4:first-child { border-top-width: 0; margin-top: 0; }

.qtn14 p {
  font-size: 12px;
  padding: 0 5px 15px;
  line-height: 1.4;
  color: #1a1a1a;
  font-style: normal;
}

.qtn14 label {
  cursor: pointer;
  text-transform: uppercase;
  color: #0013a5;
  text-shadow: 1px 1px 2px #fff;
  font-weight: 800;
  font-size: 17px;
  padding: 3px 0;
  display: block;
}

/* ── Disclaimer / about sections ──────────────────────────── */
.dis12 {
  color: #000;
  text-align: center;
  margin-bottom: 4px;
  display: block;
  font-size: 20px;
  border: 2px solid #ff182c;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
  font-style: normal;
}

.dis12 h6 {
  font-size: 18px;
  margin-bottom: 15px;
  padding-top: 4px;
  text-shadow: 1px 1px 3px #000;
}

.dis12 p {
  font-size: 13px;
  color: #340d7a;
  padding: 2px 5px 5px;
  line-height: 1.2;
  font-style: normal;
}

/* ── About us / article section ───────────────────────────── */
.a-us {
  color: #000;
  text-align: center;
  margin-bottom: 4px;
  display: block;
  font-size: 20px;
  border: 2px solid #ff182c;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
  padding: 5px;
  font-style: normal;
}

.a-us p {
  font-size: 13px;
  margin-bottom: 0;
  color: #000;
  padding-bottom: 15px;
  font-style: normal;
}

.a-us b { color: #0013a5; text-transform: uppercase; }

.a-us a {
  background-color: #e91e63;
  color: #fff;
  padding: 4px 6px;
  display: inline-block;
  text-shadow: 1px 1px 2px #2f2f2f;
  border-radius: 4px;
}

/* ── Powered by / footer text ─────────────────────────────── */
.pow-13 {
  color: #000;
  text-align: center;
  margin-bottom: 4px;
  display: block;
  font-size: 20px;
  border: 2px solid #ff182c;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
  text-shadow: 1px 1px #f4e1e1;
  padding-top: 2px;
  padding-bottom: 1px;
}

/* ── Footer ───────────────────────────────────────────────── */
footer {
  background-color: #fff;
  color: red;
  font-weight: bold;
  font-size: 25px;
  text-decoration: none;
  border: 4px groove purple;
  border-radius: 10px 0 0 0;
  text-shadow: 1px 1px gold;
  margin: 3px;
  font-style: normal;
}

footer > div {
  border-bottom: 2px solid #b2ddff;
  padding: 10px 0;
  margin-bottom: 10px;
}

footer p {
  margin: 10px 0;
  line-height: 35px;
  color: red;
  font-weight: bold;
  font-size: 25px;
  text-shadow: 1px 1px gold;
  font-style: normal;
}

footer .ftr-icon {
  text-decoration: none;
  font-size: 35px;
  text-transform: uppercase;
  color: #007bff;
}

footer p span { color: #36f; }

/* ── Sticky bottom buttons ────────────────────────────────── */
.mp-clk1 {
  position: fixed;
  bottom: 9px;
  left: 5px;
  padding: 5px 8px;
  font-size: 15px;
  border: 1px solid #fff;
  text-decoration: none;
  background-color: #039;
  color: #fff;
  border-radius: 5px;
  z-index: 999;
}

.clk1-rld {
  position: fixed;
  bottom: 9px;
  right: 10px;
  z-index: 999;
}

/* ── Chart list (inner pages) ─────────────────────────────── */
.chart-list {
  border: 2px solid #eb008b;
  border-radius: 10px 0 10px 10px;
  margin-bottom: 2px;
  width: 50%;
  margin: 0 auto 10px;
  text-align: center;
  font-weight: 600;
}

.chart-list h4 {
  color: #fff;
  padding: 5px 10px 3px;
  font-size: 24px;
  border-top-left-radius: 7px;
  margin: 0;
  background: #ff00a2;
}

.chart-list a {
  display: block;
  font-size: 22px;
  padding: 5px 7px 4px;
  text-decoration: none;
  border-bottom: 2px solid #eb008b;
  color: #880e4f;
}

.chart-list a:last-child { border-bottom-width: 0; }
.chart-list a:hover { background-color: #fff; text-decoration: underline; }

/* ── Jodi chart table ─────────────────────────────────────── */
table { box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%); margin: 5px 0; }

.panel.panel-info {
  border: 1px solid #3f51b5;
  width: 50%;
  margin: 0 auto;
}

.panel-heading h1 { margin: 0; padding: 5px; }

table, th, td { border: 1px solid #000; border-collapse: collapse; }

thead { background-color: #ffc107; text-shadow: 1px 1px 2px #9a7400ab; }

tbody td { padding: 5px 0; font-size: 24px; }

td { font-weight: 700; }

.r, .red { color: red; }

/* ── Animated color heading ───────────────────────────────── */
.sun-col-bg-change {
  animation: fajskd 5s infinite;
  border-radius: 10px;
  color: #fff;
  line-height: 1.1;
  padding: 4px 10px 3px;
  text-shadow: 1px 1px 2px #000;
  font-size: 24px;
}

@keyframes fajskd {
  0%   { background-color: #ff019e; }
  25%  { background-color: #ff001d; }
  50%  { background-color: #009a07; }
  75%  { background-color: #001fad; }
  100% { background-color: #ff019e; }
}

/* ── Spinning wheel ───────────────────────────────────────── */
.wheel-section { display: flex; justify-content: center; align-items: center; }
.wheel-container { position: relative; width: 240px; height: 240px; }
.wheel-image { width: 100%; height: 100%; animation: spin 5s linear infinite; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────────── */
@media only screen and (max-width: 500px) {
  body { padding: 2px 5px; }
  .chart-list { width: 95%; }
  .panel.panel-info { width: 100%; }
  .oc-3a-69 { width: 50%; }
}

@media only screen and (max-width: 770px) {
  .panel.panel-info { width: 70%; }
}

/* ============================================================
   REFINEMENTS
   ============================================================ */

/* ── 1. Nav bar ───────────────────────────────────────────── */
.site-nav {
  background: #8f0000;
  padding: 6px 8px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 5px;
  border-radius: 0 0 8px 8px;
  border: 2px solid #ff182c;
  border-top: none;
}

.site-nav a {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  transition: background 0.2s;
  font-style: normal;
}

.site-nav a:hover {
  background: rgba(255,255,255,0.28);
  text-decoration: none;
}

.site-nav a.active {
  background: #ff00a2;
  border-color: #fff;
}

/* ── 2. Final Ank – horizontal scroll (instant start) ─────── */
.ank-scroll-wrap {
  overflow: hidden;
  white-space: nowrap;
  padding: 4px 0;
  /* flex so both copies sit side by side */
  display: flex;
}

/* Both copies animate together — content is always visible */
.ank-scroll-inner {
  display: inline-block;
  flex-shrink: 0;
  min-width: 100%;          /* each copy fills the container width */
  animation: ank-scroll 45s linear infinite;
  font-size: 13px;
  color: #00094d;
  text-shadow: 1px 1px 2px #fff;
  font-style: normal;
}

/* Second copy starts exactly one full width ahead so the loop is seamless */
.ank-scroll-inner:nth-child(2) {
  animation-delay: -22.5s;  /* half of 45s — offset by 50% */
}

.ank-scroll-wrap:hover .ank-scroll-inner { animation-play-state: paused; }

@keyframes ank-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}


/* ── 3. Live Result – proper grid ─────────────────────────── */
.lv-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  padding: 8px;
  text-align: center;
}

@media only screen and (max-width: 900px) {
  .lv-grid { grid-template-columns: repeat(4, 1fr); }
}

@media only screen and (max-width: 600px) {
  .lv-grid { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 380px) {
  .lv-grid { grid-template-columns: 1fr; }
}

.lv-card {
  background: #fff8f0;
  border: 1px solid #ff182c;
  border-radius: 8px;
  padding: 8px 6px;
}

.lv-card .h8 {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #00094d;
  text-transform: uppercase;
  border-bottom: 1px solid #ff182c;
  padding-bottom: 4px;
  margin-bottom: 4px;
  text-shadow: none;
  border-top: none;
  margin-top: 0;
}

.lv-card .h9 {
  display: block;
  color: #880e4f;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
  margin: 4px 0;
  text-shadow: 1px 1px 2px #ffe2c6;
}

.lv-card .h9.loading {
  color: #999;
  font-size: 13px;
  font-style: italic;
}

.lv-card button {
  border: 1px solid #e6e6e6;
  background: #522f92;
  color: #fff;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  margin-top: 4px;
  transition: all .2s;
}

.lv-card button:hover { background: #3a1f6e; }

/* ── 4. Market cards – match reference exactly ────────────── */
.oc-fg {
  border: 2px solid #ff182c;
  border-style: outset;
  border-radius: 10px;
  box-shadow: 0 0 20px 0 rgb(0 0 0 / 40%);
  margin-bottom: 5px;
  background: #fc9;
}

.d1635 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 5px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid #2e7d32;
}

/* Each card */
.oc-3a-69 {
  width: auto !important;
  display: block;
  padding: 6px 5px 8px;
  border: 1px solid #2e7d32;
  background: #fff;
  text-align: center;
}

/* Odd cards – white */
.oc-3a-69:nth-child(odd)  { background: #ffffff; }

/* Even cards – light peach tint */
.oc-3a-69:nth-child(even) { background: #fff3e8; }

/* Remove old nth-child border hacks */
.oc-3a-69:nth-child(odd),
.oc-3a-69:nth-child(even) {
  border-width: 1px;
  margin: 0;
  border-radius: 0;
}

.d1635 .oc-3a-69:nth-child(-n+4) { border-top-width: 1px; }

/* Green gradient name bar – base */
.oc-fg .oc-3a-69 .g5a1 {
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  word-break: break-word;
  white-space: normal;
  padding: 5px 6px;
  margin-bottom: 6px;
  border-radius: 6px;
  clip-path: polygon(0 0, 97% 0, 100% 48%, 100% 80%, 100% 100%, 3% 100%, 0 46%, 0 20%);
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  /* default – row 1 */
  background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%);
}

/* Row 2 – deep blue */
.oc-3a-69:nth-child(n+5):nth-child(-n+8)  .g5a1 { background: linear-gradient(180deg, #1565c0 0%, #0d47a1 100%); }

/* Row 3 – dark maroon/red */
.oc-3a-69:nth-child(n+9):nth-child(-n+12) .g5a1 { background: linear-gradient(180deg, #b71c1c 0%, #7f0000 100%); }

/* Row 4 – dark purple */
.oc-3a-69:nth-child(n+13):nth-child(-n+16) .g5a1 { background: linear-gradient(180deg, #6a1b9a 0%, #4a148c 100%); }

/* Row 5 – teal */
.oc-3a-69:nth-child(n+17):nth-child(-n+20) .g5a1 { background: linear-gradient(180deg, #00695c 0%, #004d40 100%); }

/* Row 6 – dark orange */
.oc-3a-69:nth-child(n+21):nth-child(-n+24) .g5a1 { background: linear-gradient(180deg, #e65100 0%, #bf360c 100%); }

/* Row 7 – indigo */
.oc-3a-69:nth-child(n+25):nth-child(-n+28) .g5a1 { background: linear-gradient(180deg, #283593 0%, #1a237e 100%); }

/* Row 8 – dark pink */
.oc-3a-69:nth-child(n+29):nth-child(-n+32) .g5a1 { background: linear-gradient(180deg, #880e4f 0%, #560027 100%); }

/* Row 9 – brown */
.oc-3a-69:nth-child(n+33):nth-child(-n+36) .g5a1 { background: linear-gradient(180deg, #4e342e 0%, #3e2723 100%); }

/* Row 10 – dark cyan */
.oc-3a-69:nth-child(n+37):nth-child(-n+40) .g5a1 { background: linear-gradient(180deg, #006064 0%, #004d40 100%); }

/* Row 11 – olive/dark yellow */
.oc-3a-69:nth-child(n+41):nth-child(-n+44) .g5a1 { background: linear-gradient(180deg, #827717 0%, #524c00 100%); }

/* Row 12 – dark slate */
.oc-3a-69:nth-child(n+45):nth-child(-n+48) .g5a1 { background: linear-gradient(180deg, #37474f 0%, #263238 100%); }

/* Row 13+ – cycle back to green */
.oc-3a-69:nth-child(n+49):nth-child(-n+52) .g5a1 { background: linear-gradient(180deg, #2e7d32 0%, #1b5e20 100%); }

/* Card left border accent – matches header color per row */
.oc-3a-69:nth-child(n+1):nth-child(-n+4)   { border-left: 3px solid #2e7d32; }
.oc-3a-69:nth-child(n+5):nth-child(-n+8)   { border-left: 3px solid #1565c0; }
.oc-3a-69:nth-child(n+9):nth-child(-n+12)  { border-left: 3px solid #b71c1c; }
.oc-3a-69:nth-child(n+13):nth-child(-n+16) { border-left: 3px solid #6a1b9a; }
.oc-3a-69:nth-child(n+17):nth-child(-n+20) { border-left: 3px solid #00695c; }
.oc-3a-69:nth-child(n+21):nth-child(-n+24) { border-left: 3px solid #e65100; }
.oc-3a-69:nth-child(n+25):nth-child(-n+28) { border-left: 3px solid #283593; }
.oc-3a-69:nth-child(n+29):nth-child(-n+32) { border-left: 3px solid #880e4f; }
.oc-3a-69:nth-child(n+33):nth-child(-n+36) { border-left: 3px solid #4e342e; }
.oc-3a-69:nth-child(n+37):nth-child(-n+40) { border-left: 3px solid #006064; }
.oc-3a-69:nth-child(n+41):nth-child(-n+44) { border-left: 3px solid #827717; }
.oc-3a-69:nth-child(n+45):nth-child(-n+48) { border-left: 3px solid #37474f; }

/* Result number */
.oc-fg .oc-3a-69 .fg-p3 {
  font-size: 22px;
  font-weight: 900;
  color: #000;
  text-shadow: none;
  line-height: 1.2;
  margin: 4px 0;
  font-style: normal;
}

/* Time */
.oc-fg .oc-3a-69 .l9w2v {
  font-size: 11px;
  color: #555;
  line-height: 1.5;
  text-shadow: none;
  font-style: normal;
  font-weight: 600;
  margin-bottom: 5px;
}

/* Jodi / Panel buttons */
.mkt-links {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-top: 4px;
}

.mkt-links a {
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  padding: 3px 12px;
  border-radius: 4px;
  color: #fff;
  text-decoration: none;
  transition: opacity 0.15s;
}

.mkt-links a:hover { opacity: 0.85; text-decoration: none; }
.mkt-links .btn-jodi  { background: #1565c0; }
.mkt-links .btn-panel { background: #2e7d32; }

/* Loading state */
.mkt-loading {
  color: #aaa !important;
  font-size: 13px !important;
  font-style: italic;
}

/* Responsive */
@media only screen and (max-width: 768px) {
  .d1635 { grid-template-columns: repeat(2, 1fr); }
}

@media only screen and (max-width: 380px) {
  .d1635 { grid-template-columns: 1fr; }
}

/* ── 6. Chart links – wrap into a grid ────────────────────── */
.sta-1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0;
}

.sta-1 a {
  border-bottom: 2px solid #00189f;
  border-right: 1px solid #c5cae9;
  font-size: 14px;
  padding: 6px 8px;
  transition: background 0.15s;
}

.sta-1 a:hover {
  background: #e8eaf6;
  text-decoration: none;
}

/* ── 7. Breadcrumb for inner pages ────────────────────────── */
.breadcrumb {
  font-size: 12px;
  font-style: normal;
  color: #555;
  text-align: left;
  padding: 4px 8px;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.5);
  border-radius: 4px;
  border: 1px solid #ffcccc;
}

.breadcrumb a { color: #0013a5; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { color: #888; margin: 0 4px; }

/* ── 8. Body bottom padding (clear sticky bar) ────────────── */
body { padding-bottom: 50px; }

/* ── 9. Smooth hover on welcome strip image ───────────────── */
.welcome-strip img {
  border-radius: 6px;
  transition: transform 0.2s;
}
.welcome-strip img:hover { transform: scale(1.05); }

/* ── 10. Live result subtitle ─────────────────────────────── */
.lv-subtitle {
  font-size: 14px;
  font-weight: 700;
  color: #00094d;
  padding: 4px 0 6px;
  font-style: normal;
  text-shadow: 1px 1px 2px #fff;
}

/* ============================================================
   IMPROVEMENTS – search, status, sticky, shimmer, back-to-top
   ============================================================ */

/* ── Sticky markets heading + search bar ─────────────────── */
.markets-sticky-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ff00a2;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  border-radius: .75em .75em 0 0;
  border: 2px solid #fff;
  color: #fff8f8;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 1px 1px 2px #000;
}

/* ── Search input ────────────────────────────────────────── */
.mkt-search-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mkt-search {
  padding: 4px 10px;
  border-radius: 20px;
  border: 2px solid #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  width: 180px;
  outline: none;
  background: #fff;
  color: #000;
  transition: width 0.2s;
}

.mkt-search:focus { width: 220px; }

.mkt-search-clear {
  background: rgba(255,255,255,0.25);
  border: 1px solid #fff;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 11px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background 0.15s;
}

.mkt-search-clear:hover { background: rgba(255,255,255,0.45); }

/* ── No result message ───────────────────────────────────── */
.mkt-no-result {
  padding: 20px;
  font-size: 14px;
  font-style: normal;
  color: #880e4f;
  background: #fff0f8;
  border: 1px dashed #e91e63;
  border-radius: 6px;
  margin: 8px;
}

/* ── Market status badge ─────────────────────────────────── */
.mkt-status {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  font-style: normal;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0.3px;
  text-shadow: none;
  line-height: 1.4;
}

.mkt-status--live     { background: #00c853; color: #fff; }
.mkt-status--upcoming { background: #ffd600; color: #000; }
.mkt-status--closed   { background: #424242; color: #ccc; }

/* ── Jodi number color ───────────────────────────────────── */
.jodi-num { color: #e91e8c; }

/* ── Shimmer skeleton for loading cards ──────────────────── */
.shimmer-line {
  display: block;
  height: 22px;
  width: 80%;
  margin: 6px auto;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Back to top button ──────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 52px;
  right: 10px;
  z-index: 998;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ff00a2;
  color: #fff;
  border: 2px solid #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s, background 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.back-to-top:hover { background: #c2185b; }

/* ── Tooltip polish (native title attr is enough,
      but we enhance with CSS for browsers that support it) ── */
[title] { cursor: pointer; }

/* ── Responsive search ───────────────────────────────────── */
@media only screen and (max-width: 500px) {
  .markets-sticky-head { flex-direction: column; align-items: flex-start; }
  .mkt-search { width: 100%; }
  .mkt-search:focus { width: 100%; }
  .mkt-search-wrap { width: 100%; }
}

/* ── Ticker bar (pure CSS, no JS, no overlap) ────────────── */
.ticker-bar {
  background: #ff00a2;
  padding: 6px 0;
  overflow: hidden;
  width: 100%;
  border-bottom: 2px solid #fff;
}

.ticker-track {
  display: flex;
  overflow: hidden;
  width: 100%;
}

.ticker-content {
  flex-shrink: 0;
  min-width: 100%;
  white-space: nowrap;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  font-style: normal;
  animation: ticker-move 25s linear infinite;
}

/* Second copy offset by half — starts mid-way, fills gap instantly */
.ticker-content:nth-child(2) {
  animation-delay: -12.5s;
}

.ticker-track:hover .ticker-content {
  animation-play-state: paused;
}

@keyframes ticker-move {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ── Welcome strip ticker ────────────────────────────────── */
.welcome-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.welcome-ticker-wrap {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}

.welcome-ticker-inner {
  display: inline-block;
  white-space: nowrap;
  font-size: 16px;
  font-weight: bold;
  color: #000;
  font-style: normal;
  animation: ticker-scroll 25s linear infinite;
}

.welcome-ticker-wrap:hover .welcome-ticker-inner {
  animation-play-state: paused;
}