/* ================================================================
   SATKA MATKA — dpboss Theme · Fully Responsive
   Mobile → Tablet (640px) → Desktop (1100px)
   ================================================================ */

/* ── CSS Variables ───────────────────────────────────────────── */
:root { --w: 600px; }
@media (min-width: 640px)  { :root { --w: 720px;  } }
@media (min-width: 1100px) { :root { --w: 1100px; } }

/* Reset */
html { overflow-x: hidden; scroll-behavior: smooth; }
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
a, a:hover { text-decoration: none; }
img { max-width: 100%; display: block; margin: auto; }

/* Body */
body {
    background-color: #FFCC99;
    text-align: center;
    padding: 3px 10px;
    margin: 0;
    font-style: italic;
    font-family: Helvetica, sans-serif;
    font-weight: 700;
}
@media (min-width: 1100px) { body { padding: 6px 20px; } }

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

/* ── Site Header / Logo ──────────────────────────────────────── */
.m-icon {
    background: #FFCC99;
    padding: 5px 10px;
    display: block;
    margin: 0 auto 5px;
    max-width: var(--w);
    letter-spacing: 1px;
    font-weight: 700;
    border: 3px solid rgb(255, 0, 22);
    border-radius: 0.75em;
    transition: transform 150ms cubic-bezier(0,0,0.58,1), background 150ms cubic-bezier(0,0,0.58,1);
}
.m-icon a { display: block; }
.m-icon .brand {
    color: rgb(220, 0, 0);
    font-size: 1.7em;
    padding: 4px 0 2px;
    text-shadow: #fff 1px 1px 3px, #FFE0E0 0 0 8px;
    letter-spacing: 2px;
}
.m-icon .site-tagline {
    display: block;
    font-size: 0.82em;
    color: #330000;
    font-style: normal;
    padding-bottom: 3px;
    text-shadow: none;
}
@media (min-width: 640px) {
    .m-icon { padding: 8px 16px; }
    .m-icon .brand { font-size: 2.1em; letter-spacing: 3px; }
    .m-icon .site-tagline { font-size: 0.9em; }
}
@media (min-width: 1100px) {
    .m-icon { padding: 14px 24px; }
    .m-icon .brand { font-size: 2.9em; letter-spacing: 4px; }
    .m-icon .site-tagline { font-size: 1em; margin-top: 2px; }
}

/* ── Navigation ──────────────────────────────────────────────── */
.main-nav {
    background: rgb(200, 0, 0);
    padding: 5px 6px;
    margin: 0 auto 5px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    max-width: var(--w);
}
.main-nav a {
    color: #fff;
    font-size: 0.88em;
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.35);
    transition: background 0.2s;
    font-style: normal;
    white-space: nowrap;
}
.main-nav a:hover, .main-nav a.active { background: rgba(255,255,255,0.22); }
@media (min-width: 640px) {
    .main-nav { padding: 6px 10px; gap: 6px; }
    .main-nav a { padding: 6px 18px; font-size: 0.93em; }
}
@media (min-width: 1100px) {
    .main-nav { padding: 8px 14px; gap: 10px; border-radius: 10px; }
    .main-nav a { padding: 8px 26px; font-size: 1em; border-radius: 25px; }
}

/* ── Marquee Bar ─────────────────────────────────────────────── */
.marquee-bar {
    background: rgb(0, 9, 77);
    padding: 5px 0;
    margin: 0 auto 5px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    max-width: var(--w);
    border-radius: 6px;
}
.marquee-tag {
    background: rgb(255, 0, 22);
    color: #fff;
    padding: 4px 12px;
    font-size: 0.78em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}
.marquee-inner {
    flex: 1;
    color: #FFE500;
    font-size: 0.9em;
    font-weight: 700;
    padding: 4px 0;
}

/* ── Common bordered cards ───────────────────────────────────── */
.a-us, .sky-23, .f-pti, .eml-us, .dis12, .qtn14,
.lst-sec, .liv-rslt, .pow-13, .sta-div, .tkt-val,
.gbl-val, .text2, .info-box, .contact-card, .site-footer {
    color: #000;
    text-align: center;
    margin: 0 auto 5px;
    display: block;
    font-size: 20px;
    border: 2px outset rgb(255, 24, 44);
    border-radius: 10px;
    box-shadow: rgba(0,0,0,0.4) 0 0 20px 0;
    max-width: var(--w);
    overflow: hidden;
}

/* Inside grid containers — let grid control sizing */
.top-grid > *,
.games-grid > *,
.contact-grid > * {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Pink/Magenta section titles ─────────────────────────────── */
.sm-ttle, .flyr24, .f-pti h3, .oc-fg h4,
.liv-rslt h4, .f-pti h6, .liv-rslt h6, .page-hd-title {
    background: rgb(255, 0, 162);
    padding: 6px 10px;
    text-shadow: #000 1px 1px 2px;
    display: block;
    color: #fff8f8;
    margin-bottom: 5px;
    letter-spacing: 1px;
    font-weight: 700;
    border: 2px solid #fff;
    border-radius: 0.75em;
}

/* ── .flyr24 — main heading band ─────────────────────────────── */
.flyr24 {
    background: rgb(255, 0, 162) !important;
    padding: 8px 10px;
    font-size: 1em;
    margin: 0 auto 5px;
    border-radius: 10px;
    border: 2px solid #fff;
    max-width: var(--w);
    color: #fff8f8;
    text-shadow: #000 1px 1px 2px;
    letter-spacing: 1px;
    display: block;
    box-shadow: rgba(0,0,0,0.4) 0 0 20px 0;
}
@media (min-width: 640px)  { .flyr24 { font-size: 1.05em; } }
@media (min-width: 1100px) { .flyr24 { font-size: 1.2em; padding: 12px 18px; letter-spacing: 2px; } }

/* ── Result Number ───────────────────────────────────────────── */
.h8 {
    display: block;
    font-size: 1.55em;
    color: rgb(0, 9, 77);
    text-shadow: #fff 1px 1px 2px;
    padding: 5px 5px 3px;
    letter-spacing: 2px;
}
.h8.waiting { color: #888; font-size: 1.3em; letter-spacing: 1px; }
.h9 {
    display: block;
    color: rgb(136, 14, 79);
    text-shadow: rgb(255,226,198) 1px 1px 2px;
    font-size: 1.2em;
    line-height: 1;
    margin: 3px 0;
}
@media (min-width: 640px)  { .h8 { font-size: 1.7em; } }
@media (min-width: 1100px) { .h8 { font-size: 1.95em; } }

/* ── Game Card ───────────────────────────────────────────────── */
.f-pti { padding: 0 0 6px; }
.f-pti h3 {
    margin: 0 3px 4px;
    padding: 6px 10px;
    border-radius: 8px 8px 6px 6px;
    font-size: 1.05em;
    letter-spacing: 1.5px;
}
.gm-time {
    font-size: 0.85em;
    color: #222;
    padding: 2px 0 4px;
    text-shadow: none;
    letter-spacing: 0.5px;
}
.gm-lnk {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 5px 10px 2px;
    border-top: 1px solid rgba(255,0,22,0.2);
    margin-top: 2px;
}
.gm-lnk a {
    color: rgb(0, 9, 77);
    font-size: 0.85em;
    padding: 3px 16px;
    border: 1px solid rgba(0,9,77,0.3);
    border-radius: 4px;
    transition: background 0.2s;
}
.gm-lnk a:hover { background: rgba(0,9,77,0.1); }

/* ── TOP GRID: Lucky + Notice + WA (3-col desktop) ──────────── */
.top-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
    max-width: var(--w);
    margin: 0 auto 5px;
}
@media (min-width: 1100px) {
    .top-grid {
        grid-template-columns: 1.15fr 1fr 0.85fr;
        gap: 10px;
        align-items: start;
    }
}

/* ── GAMES GRID: 1 → 2 → 3 columns ──────────────────────────── */
.games-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: var(--w);
    margin: 0 auto 8px;
}
@media (min-width: 640px)  { .games-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .games-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }

/* ── Lucky Number Section (sky-23) ──────────────────────────── */
.sky-23 { border: 2px solid rgb(31, 48, 146); }
.sky-23 h4 {
    background: rgb(255, 23, 49);
    color: #fff;
    border-radius: 10px;
    font-size: 1.2em;
    padding: 4px 5px;
    text-shadow: #000 1px 1px 2px;
    clip-path: polygon(0 0,97% 0,100% 48%,100% 80%,100% 100%,3% 100%,0 46%,0 20%);
    margin-bottom: 2px;
}
.sky-23 a {
    background-image: linear-gradient(-225deg,#231557 0,#44107a 29%,#ff1361 67%,#ff0025 100%);
    background-size: 200%;
    color: #fff;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: 2s linear infinite textclip;
    font-size: 1.05em;
    display: block;
    border-bottom: 2px solid rgb(255, 0, 38);
    padding: 5px 8px;
}
.sky-23 a:last-child { border-bottom-width: 0; }
@keyframes textclip { 100% { background-position: 200% center; } }

/* ── Notice Box ──────────────────────────────────────────────── */
.text2 h2 {
    color: rgb(6, 22, 153);
    text-shadow: #fff 1px 1px 2px;
    font-size: 1em;
    padding: 5px;
    border-bottom: 1px solid rgba(255,0,22,0.2);
}
.text2 p, .text2 b {
    color: #000;
    font-size: 0.88em;
    padding: 4px 10px;
    display: block;
    text-shadow: none;
}

/* ── SEO Keyword Line ────────────────────────────────────────── */
.text3 {
    background: linear-gradient(187deg, #FFCC99 50%, #FFC387 50%);
    border: 2px outset rgb(255, 0, 22);
    border-radius: 10px;
    margin: 0 auto 5px;
    line-height: 1.4;
    font-size: 0.78em;
    padding: 4px 10px;
    color: rgb(0, 9, 77);
    text-shadow: #fff 1px 1px 2px;
    box-shadow: rgba(0,0,0,0.4) 0 0 20px 0;
    max-width: var(--w);
    font-style: normal;
}

/* ── WhatsApp / Promo Box ────────────────────────────────────── */
.eml-us {
    padding: 7px 10px;
    background-color: rgb(251, 231, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}
.eml-us p { font-size: 1em; color: #000; text-shadow: none; margin: 0; }
.eml-us a {
    background: radial-gradient(#ffe500, #ff9800);
    color: #000;
    padding: 5px 12px 4px;
    border-radius: 80px;
    display: inline-block;
    box-shadow: #000 0 0 10px -3px;
    border: 1px solid rgb(255, 0, 22);
    text-shadow: #fff 1px 1px 2px;
    font-size: 0.95em;
}
.eml-us a:hover { box-shadow: #000 0 0 10px 0; }

/* ── Flash Messages ──────────────────────────────────────────── */
.flash {
    padding: 10px 15px;
    border-radius: 8px;
    margin: 5px auto;
    font-weight: 700;
    font-size: 0.88em;
    max-width: var(--w);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-style: normal;
}
.flash-success { background: rgba(0,180,70,0.15); border: 1px solid rgba(0,180,70,0.4); color: #004d00; }
.flash-danger  { background: rgba(220,0,0,0.1);   border: 1px solid rgba(220,0,0,0.3);  color: #800; }
.flash-warning { background: rgba(255,150,0,0.1); border: 1px solid rgba(255,150,0,0.3); color: #640; }
.flash-info    { background: rgba(0,80,200,0.1);  border: 1px solid rgba(0,80,200,0.3); color: #004; }

/* ── Info / About Box ────────────────────────────────────────── */
.info-box { padding: 12px 14px; font-style: normal; text-align: left; }
.info-box h3 { color: rgb(255, 0, 162); font-size: 1em; margin-bottom: 8px; font-style: italic; }
.info-box p  { color: #222; text-shadow: none; font-size: 0.85em; line-height: 1.7; }
.info-box strong { color: rgb(0, 9, 77); }
@media (min-width: 1100px) {
    .info-box { padding: 18px 22px; }
    .info-box p { font-size: 0.95em; }
}

/* ── Tables ──────────────────────────────────────────────────── */
table {
    box-shadow: rgba(0,0,0,0.4) 0 0 20px 0;
    margin: 5px auto;
    border-collapse: collapse;
    width: 100%;
    max-width: var(--w);
}
table th {
    background: rgb(255, 0, 162);
    color: #fff;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 0.85em;
}
table td {
    background: #fff8ee;
    border: 1px solid rgba(255,0,22,0.18);
    padding: 5px 7px;
    font-size: 0.9em;
    color: rgb(0, 9, 77);
}
table tr:hover td { background: #fff0d0; }
@media (min-width: 1100px) {
    table th { padding: 10px 14px; font-size: 0.9em; }
    table td { padding: 9px 12px; font-size: 0.95em; }
}

/* ── Chart Pages ─────────────────────────────────────────────── */
.page-hd {
    max-width: var(--w);
    margin: 0 auto 6px;
    padding: 8px 10px;
    border: 2px outset rgb(255, 24, 44);
    border-radius: 10px;
    box-shadow: rgba(0,0,0,0.4) 0 0 20px 0;
    background: rgb(255, 0, 162);
}
.page-hd h2 { color: #fff; text-shadow: #000 1px 1px 2px; font-size: 1.1em; }
.page-hd p  { color: #fff; text-shadow: none; font-size: 0.82em; margin-top: 2px; }
@media (min-width: 1100px) {
    .page-hd { padding: 14px 20px; }
    .page-hd h2 { font-size: 1.4em; }
    .page-hd p  { font-size: 0.9em; }
}

.chart-wrap { overflow-x: auto; margin: 0 auto 10px; max-width: var(--w); }
.panel-table { width: 100%; border-collapse: collapse; min-width: 400px; }
.panel-table th {
    background: rgb(255, 0, 162);
    color: #fff;
    padding: 6px 4px;
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 0.78em;
}
.panel-table td {
    background: #fff8ee;
    border: 1px solid rgba(255,0,22,0.18);
    padding: 4px 2px;
    text-align: center;
    font-size: 0.82em;
    color: rgb(0, 9, 77);
}
.panel-table tr:hover td { background: #fff0d0; }
.panel-cell { padding: 4px 2px; min-height: 50px; }
.cell-date  { font-size: 0.68em; color: #777; margin-bottom: 2px; }
.cell-open  { color: rgb(0, 9, 77); font-weight: 700; }
.cell-jodi  { color: rgb(180, 0, 120); font-weight: 700; font-size: 1.05em; }
.cell-close { color: rgb(0, 9, 77); font-weight: 700; }
.cell-empty { color: #bbb; font-size: 0.7em; padding: 14px 2px; }
@media (min-width: 1100px) {
    .panel-cell { padding: 7px 4px; min-height: 64px; }
    .panel-table th { padding: 9px 6px; font-size: 0.85em; }
    .cell-date { font-size: 0.72em; }
    .cell-jodi { font-size: 1.12em; }
}

.jodi-table { width: 100%; border-collapse: collapse; max-width: var(--w); margin: 0 auto; }
.jodi-table th {
    background: rgb(255, 0, 162);
    color: #fff;
    padding: 7px 8px;
    border: 1px solid rgba(255,255,255,0.3);
    font-size: 0.82em;
}
.jodi-table td {
    background: #fff8ee;
    border: 1px solid rgba(255,0,22,0.18);
    padding: 7px 8px;
    text-align: center;
    color: rgb(0, 9, 77);
    font-size: 0.92em;
}
.jodi-table .td-date { color: #666; font-size: 0.85em; }
.jodi-table .no-jodi { color: #bbb; }
@media (min-width: 1100px) {
    .jodi-table th { padding: 10px 14px; font-size: 0.9em; }
    .jodi-table td { padding: 10px 14px; font-size: 1em; }
}

/* ── Game/Chart Pills & Nav ──────────────────────────────────── */
.game-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin: 0 auto 8px;
    max-width: var(--w);
}
.game-pill {
    background: rgb(255, 0, 22);
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.78em;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
    font-style: italic;
    font-family: Helvetica, sans-serif;
    font-weight: 700;
}
.game-pill:hover, .game-pill.active { background: rgb(180, 0, 90); }
@media (min-width: 640px)  { .game-pill { padding: 4px 14px; font-size: 0.82em; } }
@media (min-width: 1100px) { .game-pill { padding: 5px 18px; font-size: 0.88em; } }

.chart-nav {
    display: flex;
    gap: 7px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto 8px;
    max-width: var(--w);
    align-items: center;
}
.chart-nav a {
    color: rgb(0, 9, 77);
    font-size: 0.85em;
    padding: 4px 12px;
    border: 1px solid rgba(0,9,77,0.3);
    border-radius: 20px;
    transition: background 0.2s;
}
.chart-nav a:hover { background: rgba(0,9,77,0.08); }
.game-selector { max-width: var(--w); margin: 0 auto 8px; }
.game-selector h3 {
    color: rgb(0, 9, 77);
    font-size: 0.85em;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-style: normal;
}

/* ── Contact Page ────────────────────────────────────────────── */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-width: var(--w);
    margin: 0 auto 8px;
}
@media (min-width: 640px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }

.contact-card { padding: 15px 14px; font-style: normal; }
.contact-card h3 { color: rgb(255, 0, 162); font-size: 1.05em; margin-bottom: 5px; }
.contact-card p  { color: #333; text-shadow: none; font-size: 0.88em; margin-bottom: 10px; }
.contact-icon { font-size: 2.4em; margin-bottom: 8px; }
.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.92em;
    transition: all 0.2s;
    font-family: Helvetica, sans-serif;
}
.contact-btn.wa { background: #25D366; color: #fff; }
.contact-btn.wa:hover { background: #128C7E; }
.contact-btn.tg { background: #0088cc; color: #fff; }
.contact-btn.tg:hover { background: #006699; }

/* ── Footer ──────────────────────────────────────────────────── */
.site-footer {
    padding: 12px 14px 10px;
    font-style: normal;
    margin-top: 8px;
    margin-bottom: 10px;
}
.footer-links {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 7px;
}
.footer-links a {
    color: rgb(0, 9, 77);
    font-size: 0.82em;
    padding: 2px 9px;
    border: 1px solid rgba(0,9,77,0.3);
    border-radius: 4px;
    font-style: italic;
}
.footer-links a:hover { background: rgba(0,9,77,0.08); }
.site-footer h4 { color: rgb(200, 0, 0); font-size: 1em; margin-bottom: 4px; }
.site-footer .footer-copy { color: #333; font-size: 0.78em; text-shadow: none; margin-bottom: 3px; }
.site-footer .disclaimer   { color: #666; font-size: 0.7em; text-shadow: none; }

/* ── Yesterday's Results ─────────────────────────────────────── */
.yesterday-section {
    max-width: var(--w);
    margin: 0 auto 5px;
    border: 2px outset rgb(255, 24, 44);
    border-radius: 10px;
    box-shadow: rgba(0,0,0,0.4) 0 0 20px 0;
    overflow: hidden;
}
.yesterday-section h4 {
    background: rgb(255, 0, 162);
    color: #fff8f8;
    padding: 5px 10px;
    font-size: 0.95em;
    text-shadow: #000 1px 1px 2px;
    border: 2px solid #fff;
    border-radius: 0.75em;
    margin: 3px;
    letter-spacing: 1px;
}
.yesterday-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 6px;
    padding: 6px 8px;
}
@media (min-width: 1100px) {
    .yesterday-strip {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
        gap: 10px;
        padding: 10px 14px;
    }
}
.ycard {
    background: #fff8ee;
    border: 1px solid rgba(255,0,22,0.25);
    border-radius: 6px;
    padding: 5px 8px;
    font-size: 0.8em;
}
.ycard-name {
    color: rgb(255, 0, 162);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: none;
}
.ycard-nums {
    display: flex;
    gap: 3px;
    align-items: center;
    justify-content: center;
    color: rgb(0, 9, 77);
    font-size: 0.92em;
    letter-spacing: 1px;
}
.ycard-link { display: block; font-size: 0.72em; color: rgb(0,9,77); margin-top: 2px; }
.ycard-link:hover { color: rgb(255, 0, 162); }

/* ── Misc helpers ────────────────────────────────────────────── */
.no-result     { color: #888; letter-spacing: 2px; }
.has-result    { color: rgb(0, 9, 77); }
/* Partial jodi: open digit known, close pending → shows as e.g. "6*" */
.partial-digit { color: rgb(220, 0, 0); font-weight: 700; }
.container  { max-width: var(--w); margin: 0 auto; padding: 0 5px; }
.seo-block  {
    font-size: 0.76em;
    color: rgb(0, 9, 77);
    padding: 5px;
    max-width: var(--w);
    margin: 0 auto 5px;
    font-style: normal;
    text-shadow: none;
}

/* ── Mobile small (< 480px) ──────────────────────────────────── */
@media (max-width: 479px) {
    body { padding: 2px 4px; }
    .m-icon .brand { font-size: 1.2em; }
    .h8 { font-size: 1.15em; letter-spacing: 1px; }
    .flyr24 { font-size: 0.88em; }
    .games-grid { gap: 5px; }
    .main-nav a { padding: 4px 8px; font-size: 0.8em; }
}

/* ── Featured "Live" Result Hero ─────────────────────────────── */
.live-hero {
    max-width: var(--w);
    margin: 0 auto 6px;
    border: 3px solid rgb(255, 0, 22);
    border-radius: 10px;
    box-shadow: rgba(0,0,0,0.4) 0 0 20px 0;
    overflow: hidden;
    background: linear-gradient(187deg, #FFF3E3 50%, #FFE9CF 50%);
    padding-bottom: 8px;
}
.live-hero .lh-title {
    background: rgb(255, 0, 162);
    color: #fff8f8;
    padding: 7px 10px;
    font-size: 1.02em;
    letter-spacing: 1px;
    text-shadow: #000 1px 1px 2px;
    border: 2px solid #fff;
    border-radius: 0.75em;
    margin: 3px;
    display: block;
}
.live-hero .lh-game {
    color: rgb(220, 0, 0);
    font-size: 1.35em;
    padding: 8px 5px 0;
    letter-spacing: 1.5px;
    text-shadow: #fff 1px 1px 2px;
    display: block;
}
.live-hero .lh-result {
    display: block;
    color: rgb(0, 9, 77);
    font-size: 2.3em;
    letter-spacing: 3px;
    padding: 2px 5px 3px;
    text-shadow: #fff 1px 1px 3px;
}
.live-hero .lh-result.waiting { color: #999; font-size: 1.8em; }
.live-hero .lh-time {
    display: block;
    font-size: 0.85em;
    color: #333;
    text-shadow: none;
    padding-bottom: 5px;
}
.live-hero .lh-refresh {
    display: inline-block;
    background: radial-gradient(#ffe500, #ff9800);
    color: #000;
    border: 1px solid rgb(255, 0, 22);
    border-radius: 80px;
    padding: 4px 18px 3px;
    font-size: 0.85em;
    text-shadow: #fff 1px 1px 2px;
    box-shadow: #000 0 0 10px -3px;
}
@media (min-width: 640px)  { .live-hero .lh-result { font-size: 2.7em; } .live-hero .lh-game { font-size: 1.5em; } }
@media (min-width: 1100px) { .live-hero .lh-result { font-size: 3.2em; letter-spacing: 5px; } .live-hero .lh-game { font-size: 1.8em; } .live-hero .lh-title { font-size: 1.2em; } }

/* ── Chart Record link lists ─────────────────────────────────── */
.chart-record {
    max-width: var(--w);
    margin: 0 auto 6px;
    border: 2px outset rgb(255, 24, 44);
    border-radius: 10px;
    box-shadow: rgba(0,0,0,0.4) 0 0 20px 0;
    overflow: hidden;
    background: #fff8ee;
    padding-bottom: 5px;
}
.chart-record .cr-title {
    background: rgb(255, 0, 162);
    color: #fff8f8;
    padding: 7px 10px;
    font-size: 0.98em;
    letter-spacing: 1px;
    text-shadow: #000 1px 1px 2px;
    border: 2px solid #fff;
    border-radius: 0.75em;
    margin: 3px 3px 6px;
    display: block;
}
.cr-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 3px 8px;
}
@media (min-width: 640px)  { .cr-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .cr-list { grid-template-columns: repeat(4, 1fr); gap: 7px; } }
.cr-list a {
    color: rgb(0, 9, 77);
    font-size: 0.8em;
    padding: 6px 6px;
    background: #fff;
    border: 1px solid rgba(255,0,22,0.25);
    border-radius: 6px;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background 0.2s, color 0.2s;
}
.cr-list a:hover { background: rgb(255, 0, 162); color: #fff; }

/* ── Homepage content sections (intro / trick / FAQ / SEO) ───── */
.content-sec {
    max-width: var(--w);
    margin: 0 auto 6px;
    border: 2px outset rgb(255, 24, 44);
    border-radius: 10px;
    box-shadow: rgba(0,0,0,0.4) 0 0 20px 0;
    background: #fff8ee;
    overflow: hidden;
    padding: 10px 14px;
    text-align: left;
    font-style: normal;
}
.content-sec .cs-title {
    display: block;
    background: rgb(255, 0, 162);
    color: #fff8f8;
    text-align: center;
    padding: 7px 10px;
    margin: -10px -14px 10px;
    font-size: 1em;
    letter-spacing: 1px;
    text-shadow: #000 1px 1px 2px;
    font-style: italic;
}
.content-sec p {
    color: rgb(0, 9, 77);
    text-shadow: none;
    font-size: 0.86em;
    line-height: 1.7;
    margin-bottom: 8px;
}
.content-sec p:last-child { margin-bottom: 0; }
.content-sec strong { color: rgb(200, 0, 0); }
@media (min-width: 1100px) { .content-sec { padding: 16px 22px; } .content-sec p { font-size: 0.95em; } }

.content-sec.seo-keywords p {
    font-size: 0.78em;
    text-align: center;
    line-height: 1.6;
}

/* Headings / lists inside content sections (from admin-authored HTML) */
.content-sec h2, .content-sec h3, .content-sec h4 {
    color: rgb(200, 0, 0);
    font-size: 1.02em;
    text-align: center;
    margin: 8px 0 10px;
    font-style: italic;
    text-shadow: #fff 1px 1px 2px;
}
.content-sec ul, .content-sec ol { margin: 6px 0 10px 22px; }
.content-sec li {
    color: rgb(0, 9, 77);
    text-shadow: none;
    font-size: 0.85em;
    line-height: 1.6;
    margin-bottom: 5px;
    list-style: disc;
}
.content-sec.disclaimer-sec p { font-size: 0.8em; color: #444; line-height: 1.65; }
.content-sec table { margin: 8px auto; }

/* FAQ items */
.faq-item { border-bottom: 1px solid rgba(255,0,22,0.18); padding: 8px 0; }
.faq-item:last-child { border-bottom: 0; }
.faq-q { color: rgb(200, 0, 0); font-size: 0.9em; margin-bottom: 4px; font-style: italic; }
.faq-a { color: rgb(0, 9, 77); text-shadow: none; font-size: 0.84em; line-height: 1.65; font-style: normal; font-weight: 400; }
@media (min-width: 1100px) { .faq-q { font-size: 1em; } .faq-a { font-size: 0.92em; } }

/* ── Home block wrapper ──────────────────────────────────────── */
.hb { max-width: var(--w); margin: 0 auto 5px; }

/* ── Welcome bar (deity + scrolling welcome) ─────────────────── */
.welcome-bar {
    display: flex; align-items: center; gap: 8px;
    max-width: var(--w); margin: 0 auto 5px; padding: 4px 8px;
    background: #FFCC99; border: 2px solid rgb(255, 0, 22);
    border-radius: 8px; overflow: hidden;
}
.welcome-img { font-size: 1.7em; flex-shrink: 0; }
.welcome-inner { flex: 1; color: #000B65; font-weight: 700; font-style: italic; font-size: 0.9em; overflow: hidden; white-space: nowrap; }

/* ── Horizontal result cards (Jodi | Name/Result/Time | Panel) ─ */
.result-list { max-width: var(--w); margin: 0 auto 6px; }
.rc {
    display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; gap: 6px;
    background: #FFCC99; border: 1px solid rgba(255, 0, 22, 0.45);
    border-radius: 6px; margin-bottom: 4px; padding: 5px 8px; min-height: 58px;
}
.rc-hl { background: #FFF200; border-color: rgba(200, 0, 0, 0.5); }
.rc-btn {
    background: rgb(74, 20, 140); color: #fff; font-size: 0.68em; font-weight: 700;
    padding: 5px 4px; border-radius: 5px; text-align: center; font-style: normal;
}
.rc-btn:hover { background: rgb(120, 40, 180); }
.rc-mid { text-align: center; line-height: 1.18; }
.rc-name { color: rgb(0, 9, 77); font-size: 1.02em; font-weight: 700; letter-spacing: 0.5px; }
.rc-res  { color: rgb(74, 20, 140); font-size: 1.15em; font-weight: 700; letter-spacing: 1px; }
.rc-res.waiting { color: #9a9a9a; }
.rc-time { color: #333; font-size: 0.72em; text-shadow: none; }
@media (min-width: 1100px) { .rc-name { font-size: 1.18em; } .rc-res { font-size: 1.35em; } .rc-btn { font-size: 0.78em; } }

/* ── Join buttons row ────────────────────────────────────────── */
.join-row { display: flex; flex-direction: column; gap: 5px; max-width: var(--w); margin: 0 auto 5px; }
.join-wa, .join-email {
    display: block; text-align: center; padding: 9px 10px; border-radius: 8px;
    color: #fff; font-weight: 700; border: 2px solid #fff; box-shadow: rgba(0,0,0,0.3) 0 0 12px 0;
}
.join-wa { background: rgb(74, 20, 140); }
.join-email { background: rgb(200, 0, 0); }

/* ── Generic content boxes (used by admin-authored home HTML) ── */
.hbox {
    background: #FFCC99; border: 2px solid rgb(255, 0, 22); border-radius: 8px;
    padding: 8px 10px; text-align: center; overflow: hidden;
    box-shadow: rgba(0,0,0,0.4) 0 0 18px 0;
}
.hbox.red { background: rgb(140, 0, 0); border-color: #600; color: #ffeeee; }
.hbox.red *, .hbox.red p, .hbox.red strong, .hbox.red a { color: #ffeeee; text-shadow: none; }
.hbox.yellow { background: #FFF3B0; }
.hbox-title {
    display: block; background: rgb(255, 0, 162); color: #fff8f8; padding: 6px 10px;
    margin: -8px -10px 8px; font-weight: 700; font-style: italic; letter-spacing: 1px; text-shadow: #000 1px 1px 2px;
}
.hbox-title.red2 { background: rgb(200, 0, 0); }
.hbox p { color: rgb(0,9,77); text-shadow: none; font-size: 0.86em; line-height: 1.5; margin-bottom: 5px; }

/* Today Lucky Number — labels aligned in a row, values below, Final Ank scrolls */
.lucky-box { border: 3px solid rgb(214, 0, 20); }
.lucky-box .hbox-title {
    margin: 4px 4px 9px;           /* float as a rounded pill, not edge-to-edge */
    padding: 11px 10px;
    border: 2px solid #fff;        /* white pill border like .flyr24 */
    border-radius: 10px;
    font-size: 1.35em;
    letter-spacing: 1px;
}
.lucky-tbl { width: 100%; border-collapse: collapse; }
.lucky-tbl td { width: 50%; text-align: center; padding: 4px 8px; vertical-align: middle; }
.lucky-tbl .lk-divide { border-left: 1px solid rgba(255,0,22,0.4); }
.lucky-tbl .lk-label  { color: rgb(20, 60, 190); font-weight: 700; font-style: italic; font-size: 1.15em; padding-top: 8px; }
.lucky-tbl .lk-golden { color: rgb(0, 9, 77); font-weight: 700; font-style: italic; font-size: 1.55em; letter-spacing: 2px; padding-bottom: 6px; }
.final-scroll {
    width: 100%; color: rgb(0, 9, 77); font-weight: 700; font-style: italic;
    font-size: 1.08em; line-height: 1.95; text-shadow: none; text-align: center; overflow: hidden;
}

/* LIVE result list items */
.live-item { border-bottom: 1px solid rgba(255,0,22,0.2); padding: 7px 4px; }
.live-item:last-child { border-bottom: 0; }
.live-item .lg { color: rgb(0,9,77); font-size: 1.05em; font-weight: 700; }
.live-item .ln { color: rgb(74,20,140); font-size: 1.25em; font-weight: 700; letter-spacing: 1px; }

/* App download button */
.dl-btn { display: inline-block; background: rgb(30, 60, 200); color: #fff; padding: 7px 22px; border-radius: 6px; margin-top: 6px; font-weight: 700; text-shadow: none; }

/* Green free-zone boxes */
.fz-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .fz-grid { grid-template-columns: 1fr 1fr; } }
.fz-item { border: 1px solid rgba(0,120,0,0.45); border-radius: 8px; overflow: hidden; background: #fff8ee; }
.fz-item .fz-hd { background: linear-gradient(#0a9a0a, #046604); color: #fff; padding: 7px; font-weight: 700; }
.fz-item .fz-bd { padding: 7px; color: rgb(0,9,77); font-size: 0.9em; line-height: 1.7; text-shadow: none; }

/* ── Footer: Powered by + bottom bar ─────────────────────────── */
.powered-by {
    background: #FFCC99; border: 2px solid rgb(255, 0, 22); border-radius: 8px;
    padding: 9px; margin: 6px auto 4px; max-width: var(--w);
    color: rgb(200, 0, 0); font-weight: 700; text-align: center; letter-spacing: 1px;
}
.bottom-bar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; max-width: var(--w); margin: 6px auto 12px; }
.bb-btn, .bb-mid { padding: 9px; text-align: center; font-weight: 700; border-radius: 6px; font-style: normal; }
.bb-btn { background: rgb(30, 60, 200); color: #fff; }
.bb-btn:hover { background: rgb(20, 45, 160); }
.bb-mid { background: rgb(74, 20, 140); color: #fff; }

/* ── Email support bar ───────────────────────────────────────── */
.email-bar {
    background: #fbe7ff; border: 2px solid rgb(255, 0, 22); border-radius: 8px;
    padding: 9px 10px; text-align: center; color: rgb(0,9,77);
    box-shadow: rgba(0,0,0,0.4) 0 0 18px 0;
}
.email-bar .email-pill {
    display: inline-block; background: radial-gradient(#ffe500, #ff9800); color: #000;
    border: 1px solid rgb(255, 0, 22); border-radius: 80px; padding: 4px 16px; margin-left: 6px; text-shadow: #fff 1px 1px 2px;
}

/* ── Starline tables (Main Starline / Mumbai Rajshree) ───────── */
.star-box { background: #FFCC99; border: 2px solid rgb(255, 0, 22); border-radius: 8px; overflow: hidden; box-shadow: rgba(0,0,0,0.4) 0 0 18px 0; }
.star-hd { padding: 9px; font-weight: 700; font-size: 1.15em; text-align: center; font-style: italic; }
.star-hd.yellow { background: #FFD700; color: #000; text-shadow: none; }
.star-hd.pink   { background: rgb(255, 0, 162); color: #fff8f8; text-shadow: #000 1px 1px 2px; }
.star-tbl { width: 100%; border-collapse: collapse; }
.star-tbl th { background: #fff; color: #000; padding: 6px 4px; border: 1px solid rgba(255,0,22,0.3); font-size: 0.82em; }
.star-tbl td { background: #FFCC99; color: rgb(0,9,77); padding: 5px 4px; border: 1px solid rgba(255,0,22,0.3); font-size: 0.88em; text-align: center; }

/* ── Main Bombay 36 Bazar wheel ──────────────────────────────── */
.bombay-box { background: #FFCC99; border: 2px solid rgb(255, 0, 22); border-radius: 8px; overflow: hidden; box-shadow: rgba(0,0,0,0.4) 0 0 18px 0; }
.bombay-hd { background: #FFD700; color: #000; padding: 10px 14px; font-weight: 700; font-size: 1.15em; font-style: italic; text-align: center; position: relative; }
.bombay-hd .chart-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: #111; color: #fff; font-size: 0.62em; padding: 4px 11px; border-radius: 5px; font-style: normal; }
.bombay-wheel { padding: 12px; text-align: center; }
.bombay-wheel svg { max-width: 260px; width: 100%; height: auto; }
/* the coloured ring spins slowly; the centre result stays fixed */
.bombay-wheel .wheel-spin { transform-box: fill-box; transform-origin: center; animation: wheelspin 18s linear infinite; }
@keyframes wheelspin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ── Full-width link-list boxes (Special Zone / Jodi List) ───── */
.linklist-box { background: #FFCC99; border: 2px solid rgb(255, 0, 22); border-radius: 8px; overflow: hidden; box-shadow: rgba(0,0,0,0.4) 0 0 18px 0; }
.linklist-hd { padding: 9px; font-weight: 700; font-size: 1.12em; text-align: center; font-style: italic; color: #fff; text-shadow: #000 1px 1px 2px; background: linear-gradient(rgb(240,40,60), rgb(200,0,0)); }
.linklist-hd.pink { background: rgb(255, 0, 162); }
.linklist a { display: block; padding: 9px; text-align: center; color: rgb(0,9,77); border-bottom: 1px solid rgba(255,0,22,0.25); font-weight: 700; font-style: italic; text-shadow: none; }
.linklist a:last-child { border-bottom: 0; }
.linklist a:hover { background: rgb(255, 0, 162); color: #fff; }

/* ── Mini weekly panel charts (Kalyan / Kalyan Night) ────────── */
.mini-chart { width: 100%; border-collapse: collapse; }
.mini-chart .mc-hd { background: #FFD700; color: #000B65; font-weight: 700; font-style: italic; text-align: center; padding: 7px; font-size: 1.05em; }
.mini-chart td { border: 1px solid rgba(255,0,22,0.3); padding: 3px 4px; text-align: center; color: rgb(0,9,77); font-size: 0.8em; vertical-align: middle; }
.mini-chart .mc-day { font-weight: 700; }
.mini-chart .mc-dig { font-size: 1.5em; font-weight: 700; color: rgb(74,20,140); }
.mini-chart .mc-pana { line-height: 1.15; font-size: 0.92em; }

/* ── Jodi / Panel chart record page ──────────────────────────── */
.jc-seo {
    max-width: var(--w); margin: 0 auto 5px; border: 2px solid rgb(255, 0, 22); border-radius: 8px;
    padding: 8px 12px; background: #FFCC99; box-shadow: rgba(0,0,0,0.4) 0 0 18px 0;
}
.jc-seo strong { color: rgb(200, 0, 0); display: block; text-align: center; margin-bottom: 5px; font-size: 0.95em; }
.jc-seo p { font-size: 0.72em; color: rgb(0, 9, 77); text-shadow: none; line-height: 1.5; text-align: center; margin: 0; }
.jc-result {
    max-width: var(--w); margin: 0 auto 6px; border: 2px solid rgb(255, 0, 22); border-radius: 8px;
    padding: 12px; background: #FFCC99; text-align: center; box-shadow: rgba(0,0,0,0.4) 0 0 18px 0;
}
.jc-r-name { color: rgb(0, 9, 77); font-size: 1.35em; font-weight: 700; letter-spacing: 1px; }
.jc-r-num  { color: rgb(74, 20, 140); font-size: 1.5em; font-weight: 700; letter-spacing: 2px; margin: 4px 0 8px; }
.jc-refresh { display: inline-block; background: rgb(74, 20, 140); color: #fff; padding: 5px 18px; border-radius: 6px; font-size: 0.85em; text-shadow: none; }
.jc-jump-wrap { text-align: center; max-width: var(--w); margin: 0 auto 6px; }
.jc-jump { display: inline-block; background: #cfe0ff; color: rgb(0, 9, 77); border: 1px solid rgba(0,9,77,0.3); padding: 7px 24px; border-radius: 6px; font-weight: 700; text-shadow: none; }
.jc-jump:hover { background: #b3ccff; }
.jchart { max-width: var(--w); margin: 0 auto 6px; overflow-x: auto; }
.jchart-tbl { width: 100%; border-collapse: collapse; box-shadow: rgba(0,0,0,0.4) 0 0 18px 0; }
.jchart-tbl .jc-hd { background: rgb(50, 55, 190); color: #fff; font-weight: 700; padding: 10px; font-size: 1.15em; text-align: center; }
.jchart-tbl thead th { background: #FFD700; color: rgb(200, 0, 0); padding: 8px 4px; border: 1px solid #fff; font-size: 0.92em; }
.jchart-tbl td { border: 1px solid rgba(255,0,22,0.3); padding: 9px 4px; text-align: center; font-size: 1.1em; font-weight: 700; color: #111; background: #FFCC99; }
.jchart-tbl td.cut { color: #e00000; }
.jchart-tbl td.empty { color: #9a9a9a; }
@media (min-width: 1100px) { .jchart-tbl td { font-size: 1.25em; padding: 11px 6px; } }

/* ── Panel chart grid (open patti | jodi | close patti) ──────── */
.pchart-tbl { width: 100%; border-collapse: collapse; box-shadow: rgba(0,0,0,0.4) 0 0 18px 0; }
.pchart-tbl .jc-hd { background: rgb(50, 55, 190); color: #fff; font-weight: 700; padding: 10px; font-size: 1.1em; text-align: center; }
.pchart-tbl thead th { background: #FFD700; color: rgb(200, 0, 0); padding: 6px 3px; border: 1px solid #fff; font-size: 0.85em; }
.pchart-tbl > tbody > tr > td { border: 1px solid rgba(255,0,22,0.35); padding: 2px; background: #FFCC99; }
.pc-date { font-size: 0.6em; font-weight: 700; color: rgb(200, 0, 0); text-align: center; white-space: nowrap; text-shadow: none; line-height: 1.3; }
.pc-day  { padding: 1px !important; }
.pc-cell { border-collapse: collapse; margin: 0 auto; }
.pc-cell td { border: 0; padding: 0 2px; text-shadow: none; }
.pc-side { font-size: 0.6em; font-weight: 700; color: #111; line-height: 1.05; text-align: center; }
.pc-jodi { font-size: 1.05em; font-weight: 700; color: #111; text-align: center; padding: 0 3px !important; }
.pc-jodi.cut   { color: #e00000; }
.pc-jodi.empty { color: #9a9a9a; }
@media (min-width: 1100px) { .pc-side { font-size: 0.72em; } .pc-jodi { font-size: 1.25em; } .pc-date { font-size: 0.7em; } }

/* ── Matka Jodi Count Chart ──────────────────────────────────── */
.jcount-box { max-width: var(--w); margin: 0 auto 6px; border: 3px solid rgb(30, 40, 120); border-radius: 8px; overflow: hidden; box-shadow: rgba(0,0,0,0.4) 0 0 18px 0; background: #FFCC99; }
.jcount-hd { display: block; background: rgb(70, 20, 95); color: #fff; text-align: center; font-weight: 700; padding: 11px; font-size: 1.2em; letter-spacing: 1px; text-shadow: #000 1px 1px 2px; }
.jcount-row { border-bottom: 1px solid rgba(30,40,120,0.4); padding: 13px 8px; text-align: center; }
.jcount-row:last-child { border-bottom: 0; }
.jcount-n { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 700; color: #333; font-size: 1.35em; margin-bottom: 6px; text-shadow: none; }
.jcount-j { color: rgb(20, 40, 210); font-weight: 700; font-size: 1.05em; letter-spacing: .5px; text-shadow: none; }
@media (min-width: 1100px) { .jcount-j { font-size: 1.15em; } }

/* ── Admin CSS ───────────────────────────────────────────────── */
.admin-body { background: #1a1a2e; color: #f0f0f0; font-family: sans-serif; font-style: normal; font-weight: 400; text-align: left; }