/* Satta Company visual layer. Content, navigation, ads and live hooks keep their existing DOM. */
:root {
    --ink: #132840;
    --muted: #52677e;
    --paper: #ffffff;
    --soft: #f1f6fa;
    --line: #d9e5ed;
    --accent: #006b60;
    --gold: #d6a441;
    --sc-radius: 18px;
    --sc-shadow: 0 6px 26px #153a5010;
}
[data-theme="dark"] {
    --ink: #e8f1f8;
    --muted: #b3c5d6;
    --paper: #12273a;
    --soft: #091b2b;
    --line: #30485c;
    --accent: #79ead0;
    --gold: #f0c36a;
}
body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--soft);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; letter-spacing: -.035em; }
button, input, textarea, select { font: inherit; }
a, button { touch-action: manipulation; }
img { max-width: 100%; }
.wrap { width: min(1180px, calc(100% - 36px)); }
.site-header {
    background: #0d2236;
    border-bottom: 3px solid #d6a441;
    color: #fff;
}
.header-grid { padding-block: 17px; gap: 24px; }
.brand { gap: 12px; flex-shrink: 0; }
.brand:after { display: none !important; }
.brand img { width: 46px; height: 46px; border-radius: 11px; padding: 4px; background: linear-gradient(135deg, #fff, #cbdce9); border: 1px solid #fff; box-shadow: 0 5px 0 #061422, 0 9px 18px #0005; object-fit: contain; }
.brand-wordmark { display: grid; gap: 2px; line-height: 1.25; }
.brand-wordmark strong { color: #fff; font-size: 1.25rem; letter-spacing: -.035em; }
.brand-wordmark small { color: #b8cedd; font-size: .67rem; font-weight: 500; letter-spacing: .035em; }
.brand:hover { text-decoration: none; }
.top-nav { gap: 6px; }
.top-nav a { border-radius: 10px; min-height: 44px; padding: 10px 15px; color: #d8e6ee; background: transparent; font-size: .87rem; }
.top-nav a:hover, .top-nav a[aria-current="page"] { border-color: #6bd7c143; background: #20463f; color: #fff; }
.theme-toggle { background: #f7dc9e; color: #273549; border-radius: 10px; padding: 10px 14px; min-height: 44px; font-size: .8rem; }
.core-chart-links { background: var(--paper); border-color: var(--line); }
.core-chart-links-inner { padding-block: 12px; }
.core-chart-links nav { gap: 10px; }
.core-chart-links a { background: #edf7f4; border: 1px solid #c9e4dd; color: #124f48; border-radius: 11px; min-height: 48px; font-weight: 750; box-shadow: none; }
.core-chart-links a:hover { background: #dcefe9; border-color: #559e8f; }
.core-chart-links a[aria-current="page"] { background: #006b60; border-color: #006b60; color: #fff; box-shadow: none; }
.breadcrumb-wrap { padding-block: 10px; background: transparent; }
.breadcrumb-list { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px; gap: 8px; }
.breadcrumb-list li { font-size: .78rem; }
.breadcrumb-list li>span[aria-current] { background: #e4f4ee !important; color: #16574e !important; border-color: #bbdcd1 !important; }
.public-result-board { position: relative; margin-top: 18px; padding: 22px; border: 1px solid var(--line); border-top: 3px solid #087c6e; border-radius: var(--sc-radius); background: var(--paper); box-shadow: var(--sc-shadow); }
.public-result-board h2 { font-size: clamp(1.15rem, 2.5vw, 1.45rem); letter-spacing: -.035em; }
.public-result-board h2 small { font-size: .74rem; letter-spacing: 0; font-weight: 500; }
.public-result-board .live-state { margin: 10px 0 14px !important; font-size: .76rem; color: var(--accent); }
.result-card-grid { gap: 12px; }
.public-result-board .result-card { padding: 10px; border: 1px solid var(--line); border-top: 0; border-radius: 13px; background: var(--soft); box-shadow: none; overflow: hidden; }
.public-result-board .result-card:before { background: #0d2236; height: 3px; }
.public-result-board .result-card-game { background: #123b4d !important; border-radius: 8px; padding: 11px 6px; color: #fff !important; font-size: .85rem; letter-spacing: .035em; }
.public-result-board .result-card-time { margin-block: 10px; padding: 5px 1px; border-radius: 0; background: transparent !important; color: var(--muted) !important; font-size: .69rem; }
.public-result-board .result-card-time strong { font-size: .83rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.public-result-board .result-card-values { display: grid; grid-template-columns: minmax(0,1fr) 16px minmax(0,1.18fr); gap: 7px !important; padding: 0; border: 0; background: transparent !important; }
.public-result-board .result-card-values .old-result { padding: 13px 5px; background: #e4edf4; border: 1px solid #94aec2; color: #152f46 !important; border-radius: 9px; font-size: 1.45rem; line-height: 1; box-shadow: none; white-space: nowrap; font-weight: 850; }
.public-result-board .result-card-values .result-value, .public-result-board .result-card.nearest-result .result-value { padding: 11px 5px; background: #00685b !important; border: 1px solid #004a42; color: #fff !important; border-radius: 9px; font-size: 1.95rem; line-height: 1; box-shadow: 0 3px 0 #004b42; text-shadow: none; white-space: nowrap; font-weight: 900; letter-spacing: .02em; }
.public-result-board .result-card-values b { font-size: .75rem; color: var(--muted); text-align: center; line-height: 1.15; }
.public-result-board .record-date { display: block; margin: 12px 0 2px; font-size: .68rem; color: var(--muted) !important; }
.public-result-board .result-card.nearest-result { border-color: #b89955; }
.public-result-board .app-promo-banner { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 14px; min-height: 42px; background: #edf6f5; color: #14584e; border: 1px solid #c8e3dd; border-radius: 9px; font-size: .77rem; text-decoration: none; }
.public-result-board .app-promo-banner span { color: var(--muted); }
.content, .card, .forum-panel, .forum-post-card, .forum-toolbar { border-radius: var(--sc-radius); border-color: var(--line); background: var(--paper); box-shadow: var(--sc-shadow); }
.content, .card { padding: 24px; }
.section { margin-block: 20px; }
.section:nth-of-type(n) { background: transparent; border: 0; border-radius: 0; }
.section.content, .public-result-board.section, .section.chart-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--sc-radius); }
.public-result-board.section { border-top: 3px solid #087c6e; }
.section h2 { color: var(--ink); font-size: clamp(1.05rem, 2.2vw, 1.25rem); }
[data-home-archives] { padding: 20px 22px; background: var(--paper); }
[data-home-archives] h2 { margin: 0 0 14px; font-size: 1.06rem; }
[data-home-archives] .pill-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
[data-home-archives] .pill { margin: 0; padding: 12px 9px; background: var(--soft); text-align: center; border: 1px solid var(--line); }
[data-home-archives]>p { margin: 12px 0 0; font-size: .82rem; }
.pill, .btn, .forum-btn { min-height: 44px; border-radius: 10px; font-weight: 700; }
.pill:not(.light):not(.alt), .forum-btn:not(.light):not(.warn) { background: #006b60; color: #fff; }
.pill.light { background: var(--soft); border-color: var(--line); color: var(--ink); }
.main>.hero { border: 1px solid var(--line); border-left: 4px solid #d6a441; background: var(--paper); padding: 26px; border-radius: var(--sc-radius); margin-top: 16px; }
.hero h1 { margin: 0 0 9px; font-size: clamp(1.5rem,3.5vw,2.2rem); line-height: 1.2; color: var(--ink); }
.hero p { max-width: 84ch; color: var(--muted); font-size: .95rem; }
.chart-hero { background: var(--paper) !important; box-shadow: var(--sc-shadow); }
.chart-hero-copy>p { color: var(--muted); }
.chart-hero-stats { background: #123b4d; border: 1px solid #37586d; box-shadow: none; }
.chart-hero .chart-hero-notice { border-left-color: #d6a441; background: #fbf4e5; color: #6b542a; }
.chart-hub-row { grid-template-columns: 195px minmax(0,1fr); border-radius: 15px; padding: 20px; box-shadow: var(--sc-shadow); border-color: var(--line); }
.chart-hub-row header h2 { font-size: 1.08rem; }
.chart-hub-row header p { font-size: .78rem; }
.chart-hub-years-grid, .year-switch { grid-template-columns: repeat(auto-fit,minmax(65px,1fr)); gap: 8px; }
.chart-hub-years a, .chart-hub-years span, .year-switch a, .year-switch span { min-height: 44px; border-radius: 9px; font-size: .87rem; background: var(--soft); border-color: var(--line); color: var(--ink); }
.chart-hub-years a:hover, .year-switch a:hover { background: #e2f3ec; border-color: #5aa78f; color: #11594c; text-decoration: none; }
.chart-panel { max-width: 1180px; border-color: var(--line); box-shadow: var(--sc-shadow); border-radius: var(--sc-radius); }
.chart-panel-head { background: #123b4d; border-bottom: 3px solid #d6a441; padding: 18px 20px; }
.chart-panel .chart-panel-head h2 { color: #fff; }
.chart-panel-summary { gap: 6px; }
.chart-panel-summary div { border-radius: 8px; }
.chart-table, .mixed-chart-table { width: 100%; min-width: 0 !important; }
.chart-table thead th, .mixed-chart-table thead th { background: #123b4d; }
.chart-table td { font-weight: 750; }
.chart-table-viewport, .mixed-chart-region { max-width: 100%; }
.chart-seo-copy p { max-width: 90ch; font-size: .9rem; line-height: 1.75; color: var(--muted); }
.home-og-banner { border-radius: 0; margin-block: 0 20px; }
.notice-board { background: transparent; }
.notice-item { background: var(--paper); border-radius: 10px; border-color: var(--line); box-shadow: none; }
.pwa-tools { border-radius: 12px; border-color: var(--line); background: var(--paper); padding: 12px 16px; }
.pwa-tools button { min-height: 44px; border-radius: 9px; }
.forum-hero { background: #e8f3f0; border-color: #c9e2d9; }
.forum-hero h1 { color: var(--ink); }
.forum-hero p { color: var(--muted); }
.forum-toolbar, .forum-panel { padding: 18px; }
.forum-message-form textarea { border: 1px solid var(--line); border-radius: 12px; padding: 13px; font-size: 1rem; background: var(--paper); color: var(--ink); }
.forum-card, .forum-form, .forum-profile-card { background: var(--paper); border-color: var(--line); border-radius: 14px; color: var(--ink); }
.forum-card, .forum-post-card { border: 1.5px solid #52687d; border-radius: 20px; box-shadow: 0 10px 22px #10294440, 0 3px 6px #10294426; }
.forum-page #page-content { background: #e3ebf4; color: #102138; --paper: #fff; --ink: #102138; --muted: #52687d; --soft: #f4f7fb; --line: #b6c5d5; --accent: #007f76; }
.forum-page .forum-card, .forum-page .forum-post-card { background: #fff; }
.forum-card-top .forum-author-count { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; color: #fff; }
.forum-card-top .forum-author-count span { padding: 6px 9px; border: 1px solid #ffffff55; border-radius: 8px; background: #ffffff18; }
.forum-quote { margin: 18px 0; padding: 14px 16px; border-left: 4px solid var(--accent); border-radius: 10px; background: var(--soft); color: var(--ink); overflow-wrap: anywhere; }
.forum-quote:before { content: '\201C'; display: block; font: 700 2.5rem/1 Georgia, serif; color: var(--accent); }
.forum-card .forum-quote p { color: var(--ink); line-height: 1.7; margin: 4px 0 0; }
.forum-reaction-bar { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 12px 0; }
.forum-reaction-bar form { margin: 0; min-width: 0; }
.forum-reaction-bar button, .forum-reaction-bar > a, .forum-reaction-bar > .forum-view-count { width: 100%; height: 100%; min-height: 64px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); color: var(--ink); text-align: center; font-family: inherit; font-size: .78rem; font-weight: 700; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.forum-reaction-bar button { cursor: pointer; }
.forum-reaction-bar button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.forum-reaction-bar i { font-size: 1.1rem; }
.forum-form textarea[name="body"] { min-height: calc(5 * 1.6em + 28px); line-height: 1.6; }
@media (max-width: 380px) { .forum-reaction-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.forum-btn.light { background: #e5f3ee; color: #165a4b; }
.forum-post-card, .forum-post-body { overflow-wrap: anywhere; }
.forum-post { background: var(--soft); border-color: var(--line); }
.forum-post h1, .forum-form label, .forum-card h2 a { color: var(--ink); }
.forum-card-top .forum-card-author { color: #ffdf85; }
.forum-card h2 a { border-bottom: 0; }
.forum-card p, .forum-card-foot, .forum-meta, .forum-comment-head, .forum-form .help { color: var(--muted); }
.forum-read-more, .forum-meta a { color: var(--accent); }
.forum-post-card:before { background: #087c6e; }
.forum-post-body { background: var(--soft); border-color: var(--line); border-left-color: #087c6e; color: var(--ink); box-shadow: none; }
.forum-comment, .forum-comment.reply, .forum-empty { background: var(--paper); border-color: var(--line); color: var(--ink); border-radius: 11px; }
.forum-form input, .forum-form select, .forum-form textarea { background: var(--paper); border-color: var(--line); color: var(--ink); border-radius: 9px; }
.forum-form input, .forum-form select { min-height: 46px; }
.forum-card:hover, .forum-share a:hover, .forum-share button:hover { transform: none; }
.site-footer { padding-block: 30px 22px; background: #0d2236; border-top: 3px solid #d6a441; color: #c2d6e1; }
.footer-grid { gap: 30px; }
.footer-brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; }
.footer-brand img { border-radius: 8px; }
.footer-brand strong { font-size: 1.1rem; }
.footer-brand:hover { text-decoration: none; }
.site-footer p { max-width: 47ch; color: #b8cedd; font-size: .83rem; line-height: 1.7; }
.site-footer nav { gap: 5px 20px; }
.site-footer nav a { color: #d8e6ee; font-size: .83rem; min-height: 36px; display: inline-flex; align-items: center; }
.footer-app-link { display: inline-flex; align-items: center; gap: 18px; padding: 9px 13px; min-height: 44px; border: 1px solid #4a746e; border-radius: 9px; background: #173f3b; color: #dcf9ed !important; font-size: .8rem; font-weight: 700; }
.site-disclaimer { padding-block: 16px; background: var(--paper); border-color: var(--line); color: var(--muted); font-size: .73rem; }
.fixed-result { background: #0d2236; border-color: #345168; box-shadow: 0 -3px 16px #0d223610; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid #d6a441; outline-offset: 3px; }
[data-theme="dark"] body { background: var(--soft); color: var(--ink); }
[data-theme="dark"] .card, [data-theme="dark"] .content, [data-theme="dark"] .notice-item, [data-theme="dark"] .map-link { background: var(--paper); border-color: var(--line); color: var(--ink); }
[data-theme="dark"] .hero p, [data-theme="dark"] .notice-item p, [data-theme="dark"] .muted { color: var(--muted); }
[data-theme="dark"] .notice-board { background: transparent; border-color: var(--line); }
[data-theme="dark"] .core-chart-links a { background: #163d3b; border-color: #2e5c50; color: #b4edd9; }
[data-theme="dark"] .core-chart-links a[aria-current="page"] { background: #087969; color: #fff; }
[data-theme="dark"] .public-result-board .result-card-game { background: #254c61 !important; }
[data-theme="dark"] .public-result-board .result-card-values .old-result { background: #dbe8f4; border-color: #c0d8ea; color: #142e45 !important; box-shadow: none; }
[data-theme="dark"] .public-result-board .result-card-values .result-value, [data-theme="dark"] .public-result-board .result-card.nearest-result .result-value { background: #78ebc9 !important; border-color: #bcfce5; color: #062e22 !important; box-shadow: 0 3px 0 #339e7d; }
[data-theme="dark"] .public-result-board .app-promo-banner { background: #173c36; border-color: #315e50; color: #b5eed7; }
[data-theme="dark"] .chart-hero { background: var(--paper) !important; }
[data-theme="dark"] .chart-hero .chart-hero-notice { background: #302b20; color: #e2d3ad; }
[data-theme="dark"] .chart-hub-years a:hover, [data-theme="dark"] .year-switch a:hover { background: #214d42; color: #c4f8e5; }
[data-theme="dark"] .forum-hero { background: #123631; border-color: #32584c; }
[data-theme="dark"] .forum-btn.light { background: #21493f; color: #bcf4dc; }
@media (max-width: 820px) {
    .header-grid { gap: 16px; }
    .brand-wordmark strong { font-size: 1.1rem; }
    .top-nav a { padding-inline: 10px; }
    .chart-hub-row { grid-template-columns: 1fr; gap: 13px; }
}
@media (max-width: 700px) {
    .wrap { width: calc(100% - 24px); }
    .header-grid { display: grid; grid-template-columns: 1fr; padding-block: 14px 12px; gap: 14px; }
    .brand img { width: 40px; height: 40px; }
    .brand-wordmark strong { font-size: 1.16rem; }
    .brand-wordmark small { font-size: .66rem; }
    .header-grid .top-nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; gap: 5px; }
    .top-nav a, .theme-toggle { display: flex; align-items: center; justify-content: center; padding: 10px 5px; min-height: 44px; font-size: .8rem; }
    .core-chart-links nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .core-chart-links a { font-size: .78rem; padding: 9px 5px; }
    .public-result-board { padding: 14px; margin-top: 12px; }
    .public-result-board h2 { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
    .public-result-board h2 small { font-size: .65rem; line-height: 1.5; text-align: right; }
    .result-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .public-result-board .result-card { padding: 8px; }
    .public-result-board .result-card-game { padding-block: 11px; font-size: .76rem; }
    .public-result-board .result-card-values { gap: 5px !important; grid-template-columns: minmax(0,1fr) 12px minmax(0,1.15fr); }
    .public-result-board .result-card-values .old-result { padding: 11px 3px; font-size: 1.2rem; }
    .public-result-board .result-card-values .result-value, .public-result-board .result-card.nearest-result .result-value { padding: 10px 3px; font-size: 1.55rem; }
    .public-result-board .record-date { font-size: .63rem; }
    .content, .card, .forum-panel, .forum-toolbar { padding: 17px; }
    [data-home-archives] { padding: 16px; }
    [data-home-archives] .pill-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
    [data-home-archives] .pill { font-size: .81rem; }
    .main>.hero { padding: 20px 18px; }
    .hero h1 { font-size: 1.5rem; }
    .hero p { font-size: .87rem; }
    .chart-hero { padding: 18px !important; }
    .chart-hub-row { padding: 16px; }
    .chart-hub-years-grid, .year-switch { grid-template-columns: repeat(auto-fit,minmax(56px,1fr)); gap: 7px; }
    .chart-hub-years a, .year-switch a, .year-switch span { min-height: 44px; font-size: .8rem; }
    .chart-panel-head { padding: 14px 12px; gap: 10px; }
    .chart-panel-head p { font-size: .74rem; }
    .chart-panel-summary div { min-width: 48px; padding: 6px; }
    .chart-panel-summary dd { font-size: .88rem; }
    .footer-grid { gap: 22px; }
    .site-footer nav { gap: 4px 15px; }
    .site-footer nav a { min-height: 40px; }
}
@media (max-width: 360px) {
    .public-result-board { padding: 10px; }
    .result-card-grid { gap: 7px; }
    .public-result-board .result-card { padding: 6px; }
    .public-result-board .result-card-game { font-size: .69rem; letter-spacing: 0; }
    .public-result-board .result-card-values .old-result { font-size: 1.05rem; }
    .public-result-board .result-card-values .result-value, .public-result-board .result-card.nearest-result .result-value { font-size: 1.3rem; }
    .public-result-board h2 { flex-direction: column; gap: 3px; }
    .public-result-board h2 small { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    *, *:before, *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Dense yearly chart: digits use the full cell without padding. */
.chart-table th, .chart-table td { padding: 0; line-height: 1.45; white-space: nowrap; }
.chart-table td { font-size: clamp(11px, 3.2vw, 16px); font-weight: 800; letter-spacing: -.025em; }
.chart-table th { font-size: clamp(9px, 2.7vw, 12px); }

/* Game labels remain readable and prominent in both themes. */
.result-card-game, .fixed-result-item, .core-chart-links a,
[data-home-archives] .pill { text-transform: uppercase; }
.result-card-grid .result-card-game {
    background: #fff7e4 !important;
    color: #b71c1c !important;
    font-size: clamp(1.1rem, 3vw, 1.4rem);
    line-height: 1.4;
    overflow-wrap: anywhere;
}
[data-theme="dark"] .result-card-grid .result-card-game {
    background: #172d51 !important;
    color: #ff8a80 !important;
}
.result-card-grid { row-gap: 20px; }
.result-card-grid .result-card { border-radius: 18px; box-shadow: 0 6px 16px #10294425; }