
:root{--ink:#26123b;--purple:#4d2473;--purple2:#70419a;--gold:#d6a84b;--cream:#fff8e8;--paper:#fffdf8;--muted:#6d6571;--line:#e5d7bf}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--cream);color:var(--ink)}
a{color:var(--purple);text-decoration:none}
.top{background:linear-gradient(135deg,var(--ink),var(--purple));color:#fff;text-align:center;padding:18px 12px 14px;border-bottom:4px solid var(--gold)}
.brand{display:inline-flex;gap:8px;align-items:center;color:#fff;font-weight:900;font-size:30px;letter-spacing:1px}
.crown{color:var(--gold);font-size:32px}
.tagline{font-size:13px;margin-top:4px;color:#f6e8c6}
.nav{display:flex;justify-content:center;gap:4px;flex-wrap:wrap;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.nav a{padding:11px 15px;font-weight:800;font-size:13px}
.nav a:hover{background:var(--purple);color:#fff}
.container{width:min(1120px,96%);margin:16px auto 32px}
.hero{text-align:center;background:linear-gradient(180deg,#fff,#fff7e8);border:2px solid var(--gold);border-radius:12px;padding:20px 14px;margin-bottom:14px;box-shadow:0 3px 12px #3a215014}
.hero.compact{padding:14px}
.hero h1{margin:0 0 8px;font-size:28px;color:var(--purple)}
.hero p{margin:0;color:var(--muted)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:10px;margin:14px 0;overflow:hidden;box-shadow:0 2px 9px #28123e0d}
.panel-title{background:linear-gradient(90deg,var(--purple),var(--purple2));color:#fff;text-align:center;font-weight:900;padding:10px;border-bottom:3px solid var(--gold)}
.result-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line)}
.result-card{background:#fff;text-align:center;padding:12px 8px}
.market{font-weight:900;color:var(--purple);font-size:15px}
.number{font-size:28px;font-weight:900;color:#c33732;margin:8px 0}
.number.wait{font-size:19px;color:#8b6b1d;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.35}}
.result-link a{font-size:12px;font-weight:700}
.guess-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px}
.guess-card{border:1px solid var(--gold);background:#fff8e8;border-radius:8px;padding:15px 10px;text-align:center}
.guess-card strong{display:block;color:var(--purple)}
.guess-card span{font-size:12px;color:var(--muted)}
.mini-info,.content-panel{padding:18px;text-align:center}
.mini-info h2,.content-panel h2{color:var(--purple);margin:2px 0 8px}
.cta{display:inline-block;background:var(--purple);color:#fff;padding:10px 16px;border-radius:7px;font-weight:900;border-bottom:3px solid var(--gold)}
.archive-panel{padding-bottom:8px}
.year-row{padding:10px 12px;border-bottom:1px dashed var(--line)}
.year-row h2{text-align:center;margin:0 0 8px;font-size:18px;color:var(--purple)}
.year-links{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.year-links a{border:1px solid var(--line);border-radius:6px;background:#fff;padding:8px;text-align:center;font-weight:800}
.chart-scroll{overflow:auto}
.chart-table{width:100%;border-collapse:collapse;min-width:760px}
.chart-table th{background:var(--purple);color:#fff;position:sticky;top:0}
.chart-table th,.chart-table td{border:1px solid var(--line);padding:7px;text-align:center;font-size:13px}
.chart-table tr:nth-child(even) td{background:#fff9ed}
.history-placeholder{padding:36px;text-align:center;color:var(--muted)}
.center{text-align:center;padding:18px}
footer{background:var(--ink);color:#eee;text-align:center;padding:22px 12px;border-top:4px solid var(--gold)}
footer a{color:#ffe5a1;font-weight:700}
.foot-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
footer p{font-size:12px;margin:10px 0 0}
.build-note{color:#ffdf88}
@media(max-width:800px){
 .brand{font-size:26px}
 .result-grid{grid-template-columns:repeat(2,1fr)}
 .result-card:last-child{grid-column:1/-1}
 .guess-grid{grid-template-columns:repeat(2,1fr)}
 .year-links{grid-template-columns:repeat(2,1fr)}
 .hero h1{font-size:23px}
}
@media(max-width:430px){
 .container{width:97%}
 .nav a{padding:9px 8px;font-size:11px}
 .result-grid{grid-template-columns:1fr 1fr}
 .number{font-size:24px}
 .guess-grid{gap:6px;padding:8px}
 .year-row{padding:8px}
}

@media(max-width:430px){
 html,body{max-width:100%;overflow-x:hidden}
 .top,.nav,footer{width:100%}
 .nav{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
 .nav a{padding:9px 2px;font-size:10px;white-space:nowrap;text-align:center;min-width:0}
 .container{width:100%;padding:0 8px;margin:12px auto 26px}
 .hero,.panel{width:100%;max-width:100%}
 .hero h1{font-size:21px;line-height:1.2;overflow-wrap:anywhere}
 .hero p{font-size:13px;line-height:1.35}
 .result-card,.guess-card,.year-links a{min-width:0;overflow-wrap:anywhere}
 .market{font-size:13px}
 .guess-grid,.year-links{width:100%}
 .panel-title{font-size:13px;line-height:1.25}
 .mini-info h2,.content-panel h2{font-size:20px}
}

/* Monthly chart layout inspired by the requested mobile structure */
.monthly-page{max-width:980px}
.monthly-heading{text-align:center;padding:28px 10px 22px}
.monthly-heading h1{font-size:34px;letter-spacing:.4px;margin:0 0 15px;color:#17131b}
.monthly-heading p{font-size:20px;margin:0 0 10px;color:#36303a}
.monthly-heading strong{font-size:21px;color:var(--purple)}
.monthly-table-card{background:#fff;border:1px solid #ddd;border-radius:4px;box-shadow:0 6px 18px #0001;overflow:hidden}
.monthly-table{width:100%;border-collapse:collapse;table-layout:fixed}
.monthly-table th{background:#37343b;color:#fff;padding:20px 8px;font-size:19px;border-right:1px solid #bbb;border-bottom:4px solid var(--gold)}
.monthly-table td{text-align:center;padding:19px 8px;font-size:19px;border-right:1px solid #ddd}
.monthly-table .date-cell{color:#d31524;font-weight:800}
.month-nav{display:grid;grid-template-columns:64px auto 1fr auto 64px;align-items:center;gap:10px;background:#fff;margin:24px 0 16px;padding:14px 22px;border:1px solid #ddd;box-shadow:0 4px 14px #0001}
.month-nav b{font-size:24px;color:#111}
.month-arrow{display:grid;place-items:center;width:58px;height:58px;border-radius:8px;background:var(--purple);color:#fff;font-size:46px;line-height:1;font-weight:500}
.month-picker{background:linear-gradient(160deg,var(--purple),#34154f);padding:28px 26px;border-radius:12px;box-shadow:0 5px 16px #0002}
.month-picker p{color:#fff;text-align:center;font-size:19px;line-height:1.55;margin:0 0 23px}
.month-picker form{display:grid;gap:16px}
.month-picker select,.month-picker button{width:100%;min-height:64px;border-radius:8px;border:1px solid #d9d5dd;padding:0 18px;font-size:20px;background:#fff;color:#403943}
.month-picker button{font-weight:800;cursor:pointer;border:2px solid var(--gold);color:var(--ink)}
.month-picker button:hover{background:var(--gold)}

.monthly-notice{background:#fff8c9;border:1px solid #d8b74c;border-radius:10px;padding:14px 18px;text-align:center;font-size:16px;line-height:1.55;color:#2f2636;margin:4px 0 18px}
@media(max-width:640px){
 .monthly-page{width:98%;margin-top:10px}
 .monthly-heading{padding:22px 4px 18px}
 .monthly-heading h1{font-size:29px}
 .monthly-heading p{font-size:17px;line-height:1.45}
 .monthly-heading strong{font-size:19px}
 .monthly-table{min-width:0}
 .monthly-table th{font-size:15px;padding:16px 4px}
 .monthly-table td{font-size:17px;padding:17px 4px}
 .month-nav{grid-template-columns:56px auto 1fr auto 56px;padding:12px 14px}
 .month-nav b{font-size:21px}
 .month-arrow{width:52px;height:52px;font-size:40px}
 .month-picker{padding:24px 18px}
 .month-picker p{font-size:17px}
 .month-picker select,.month-picker button{min-height:58px;font-size:18px}
 .monthly-notice{font-size:14px;padding:12px}
}

.header-ticker{width:100%;overflow:hidden;margin-top:12px;border-top:1px solid #ffffff40;border-bottom:1px solid #ffffff40;background:#ffffff12}
.header-ticker__track{display:flex;align-items:center;gap:28px;width:max-content;white-space:nowrap;padding:8px 0;font-weight:800;font-size:15px;color:#fff;animation:sattaTicker 20s linear infinite;will-change:transform}
.header-ticker__track span{display:inline-block;padding-left:12px}
.header-ticker__track i{font-style:normal;color:var(--gold);font-size:20px}
@keyframes sattaTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){.header-ticker__track{font-size:13px;gap:20px;animation-duration:17s;padding:7px 0}}
@media(prefers-reduced-motion:reduce){.header-ticker__track{animation:none}}

.header-ticker{margin-top:12px;overflow:hidden;border-top:1px solid #ffffff33;border-bottom:1px solid #ffffff33;background:#ffffff0d;white-space:nowrap}
.header-ticker__track{display:flex;align-items:center;width:max-content;gap:22px;padding:8px 0;animation:headerTicker 18s linear infinite;will-change:transform}
.header-ticker__track span{font-weight:800;font-size:16px;color:#fff6d6;letter-spacing:.15px}
.header-ticker__track i{font-style:normal;color:var(--gold);font-size:20px}
@keyframes headerTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){.header-ticker__track{animation-duration:14s}.header-ticker__track span{font-size:14px}}
