/* Shared visual system for all public pages. */
:root {
  --red: #b62e40;
  --red-deep: #962335;
  --red-soft: #fbf0f2;
  --ink: #253341;
  --muted: #7a8592;
  --line: #e3e7ec;
  --paper: #fff;
  --canvas: #f4f6f8;
  --radius: 10px;
  color: var(--ink);
  background: var(--canvas);
  font: 14px/1.5 "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
body:has(dialog[open]) { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { opacity: .4; cursor: not-allowed; }
button, input, select { border: 1px solid #dce1e7; border-radius: 6px; background: #fff; color: #556271; }
button { padding: 9px 14px; }
input, select { min-width: 0; padding: 9px 11px; }
input::placeholder { color: #969eaa; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, [tabindex="0"]:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
[hidden] { display: none !important; }
.wrap { width: calc(100% - 64px); max-width: 1360px; margin-inline: auto; }
.skip-link { position: fixed; left: 12px; top: -60px; padding: 10px 15px; background: var(--ink); color: #fff; z-index: 100; border-radius: 5px; }
.skip-link:focus { top: 12px; }
.muted { color: var(--muted); font-size: 12px; }
.red-button { display: inline-block; background: var(--red); border: 1px solid var(--red); color: #fff; padding: 9px 17px; border-radius: 6px; }
.red-button:hover { background: var(--red-deep); border-color: var(--red-deep); }

/* Site header and navigation. */
.utility { background: #edf0f3; border-bottom: 1px solid #e7eaee; color: #7c8794; }
.utility .wrap { height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; }
.utility time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.masthead { height: 98px; display: flex; align-items: center; gap: 32px; position: relative; }
.masthead-shell { background: #fff; }
.brand { display: flex; align-items: center; gap: 12px; font-size: 29px; font-weight: 650; letter-spacing: 1px; flex-shrink: 0; }
.brand-emblem { width: 46px; height: 48px; display: grid; place-items: center; background: var(--red); border-radius: 12px 4px 12px 4px; }
.brand-emblem b { color: #fff; font: 32px/1 serif; }
.brand small { display: block; font-size: 10px; letter-spacing: 3px; font-weight: 400; color: #8c96a1; margin-top: 3px; }
.header-search { display: flex; align-items: center; gap: 11px; margin-left: auto; width: 390px; height: 43px; padding: 4px 4px 4px 14px; background: #f6f8fa; border: 1px solid var(--line); border-radius: 7px; }
.header-search:focus-within { border-color: #c18691; }
.header-search svg { width: 18px; height: 18px; flex-shrink: 0; stroke: #8d97a3; stroke-width: 1.7; fill: none; }
.header-search input { border: 0; background: none; outline: 0; width: 100%; padding: 5px 0; font-size: 13px; }
.header-search button { white-space: nowrap; border: 0; background: #fff; font-size: 12px; padding: 7px 16px; }
.header-favorites { color: #697580; font-size: 13px; white-space: nowrap; }
.header-favorites span { color: #a98240; font-size: 22px; vertical-align: -2px; margin-right: 3px; }
#mobile-nav-toggle, .mobile-favorites { display: none; }
.nav-bar { background: var(--red); color: #fff; }
.nav-bar nav { display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; }
.nav-bar a, .nav-bar button { padding: 14px 15px; border: 0; border-radius: 0; background: none; color: #fffd; text-align: center; font-size: 14px; font-weight: 500; letter-spacing: 1px; white-space: nowrap; }
.nav-bar .active, .nav-bar a:hover, .nav-bar button:hover, .nav-bar button[aria-expanded="true"] { background: var(--red-deep); color: #fff; }
.nav-bar .active { box-shadow: inset 0 -3px #e9a9b4; }
.nav-bar button span { font-size: 12px; margin-left: 5px; }

/* Page headings and shared surfaces. */
main.wrap { min-height: 55vh; padding-top: 32px; outline: none; }
.home-intro, .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.section-kicker { font-size: 11px; color: #9a6b74; letter-spacing: 2px; margin-bottom: 6px; }
.home-intro h1, .page-heading h1 { font-size: 28px; font-weight: 650; letter-spacing: .7px; line-height: 1.3; margin: 0; }
.page-description, .page-heading p { margin: 9px 0 0; font-size: 13px; color: var(--muted); }
.intro-tools { display: flex; align-items: center; gap: 25px; font-size: 12px; color: #8a95a0; }
.intro-tools b { font-size: 23px; font-weight: 500; color: #405061; font-variant-numeric: tabular-nums; }
.intro-tools i { color: #c9ced5; margin: 0 9px; font-style: normal; }
.intro-tools>a { border-left: 1px solid #dce1e7; padding-left: 25px; color: #86626b; }
.intro-tools>a>span { margin-left: 8px; }
.page-count { padding: 7px 12px; color: #667384; background: #e9edf1; border-radius: 5px; white-space: nowrap; font-size: 12px; }
.breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #8c97a4; font-size: 12px; margin: 0 0 22px; line-height: 1.8; }
.breadcrumb a:hover { color: var(--red); }
.panel { border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); min-width: 0; overflow: hidden; }
.panel-title { display: flex; align-items: center; gap: 14px; padding: 21px 24px; border-bottom: 1px solid #edf0f4; }
.panel-title h1, .panel-title h2 { font-size: 18px; margin: 0; font-weight: 600; min-width: 0; }
.panel-title>span { margin-left: auto; font-size: 12px; color: var(--muted); }
.panel-title>button { margin-left: auto; font-size: 12px; flex-shrink: 0; }

/* Independent game entry tiles. */
.game-logo { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; }
.game-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.icon-fallback { display: grid; place-items: center; width: 90%; height: 90%; background: #f3e8eb; color: var(--red); border-radius: 9px; font-size: 17px; }
.hot-section { margin-bottom: 33px; }
.hot-label { display: none; }
.hot-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 9px; }
.hot-strip>a { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; min-width: 0; text-align: center; padding: 16px 5px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12px; color: #5e6a78; transition: border-color .15s, transform .15s; }
.hot-strip .game-logo { width: 43px; height: 43px; }
.hot-strip>a:hover { border-color: #c68d98; color: var(--red); transform: translateY(-2px); }
.block-heading { display: flex; align-items: center; gap: 17px; margin-bottom: 17px; }
.block-heading h2 { margin: 0; font-size: 21px; font-weight: 600; }
.block-heading h2 small { font: 12px/1 Arial, sans-serif; color: #7e8996; padding: 4px 7px; border: 1px solid #dce2e8; border-radius: 4px; vertical-align: 3px; margin-left: 6px; }
.block-heading>span { font-size: 12px; color: #8b95a2; }
.block-heading>a { margin-left: auto; font-size: 12px; color: #788593; white-space: nowrap; }
.block-heading>a span { margin-left: 7px; color: var(--red); }
.category-tabs, .directory-categories { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #d4dae2 transparent; padding-bottom: 13px; margin-bottom: 20px; border-bottom: 1px solid #dfe4ea; }
.category-tabs button, .directory-categories button { flex-shrink: 0; background: none; border: 0; padding: 9px 15px; border-radius: 6px; font-size: 13px; color: #72808d; white-space: nowrap; }
.category-tabs button.selected, .directory-categories button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.category-tabs button:not(.selected):hover, .directory-categories button[aria-pressed="false"]:hover { background: #e8edf2; color: #394959; }

/* Result cards: the title link covers the surface; secondary actions remain separate. */
.home-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.draw-card { min-width: 0; position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .15s, box-shadow .15s; }
.draw-card:has(.card-primary-link:hover) { border-color: #c28b97; box-shadow: 0 5px 16px #51223108; }
.draw-card:has(.card-primary-link:hover) strong { color: var(--red); }
.draw-card:has(.card-primary-link:focus-visible) { outline: 2px solid var(--red); outline-offset: 3px; }
.card-primary-link:after { content: ""; position: absolute; inset: 0; z-index: 1; }
.draw-card .star, .draw-card .period a, .draw-card .card-actions a { position: relative; z-index: 2; }
.draw-card-title { display: flex; align-items: center; padding: 19px 22px 13px; gap: 10px; }
.draw-card-title>a { display: flex; align-items: center; gap: 11px; min-width: 0; font-size: 16px; }
.draw-card-title strong { font-weight: 600; }
.draw-card-title .game-logo { width: 42px; height: 42px; }
.star { display: grid; place-items: center; margin-left: auto; padding: 0; border: 0; width: 36px; height: 36px; color: #c0c7d0; font-size: 25px; flex-shrink: 0; }
.star:hover { color: #ac8546; background: #faf7f0; }
.star.saved { color: #ac8546; }
.period { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 22px; font-size: 12px; color: #8b96a3; font-variant-numeric: tabular-nums; }
.period a { font-size: 11px; white-space: nowrap; padding: 3px 0; }
.period a:after { content: " ↗"; color: #acb3bd; }
.card-numbers { min-height: 77px; display: flex; align-items: center; padding: 18px 22px; }
.count-line { display: flex; justify-content: space-between; gap: 10px; color: #8a95a2; padding: 0 22px 17px; font-size: 12px; }
.count-line b { color: #b34a5b; font-weight: 500; }
.countdown { font-variant-numeric: tabular-nums; letter-spacing: .4px; }
.expired { color: #9a8761; }
.mini-stats { width: 100%; table-layout: fixed; border-collapse: collapse; text-align: center; }
.mini-stats th { background: #f7f9fb; color: #8b96a3; font-weight: 400; padding: 8px 2px; font-size: 11px; border: 1px solid #edf0f4; }
.mini-stats td { padding: 10px 3px; color: #546273; font-size: 12px; line-height: 1.7; border: 1px solid #edf0f4; overflow-wrap: anywhere; }
.mini-stats th:first-child, .mini-stats td:first-child { border-left: 0; }
.mini-stats th:last-child, .mini-stats td:last-child { border-right: 0; }
.card-actions { display: flex; padding: 7px 8px; color: #7e8997; font-size: 12px; }
.card-actions a { flex: 1; text-align: center; padding: 8px 3px; }
.card-actions a+a { border-left: 1px solid #edf0f4; }
.card-actions a:hover { color: var(--red); }
.card-empty { min-height: 76px; display: grid; place-items: center; color: #9da6b0; background: #f8f9fb; font-size: 12px; }
.balls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ball { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #cc4658; color: white; font: bold 16px/1 Arial,sans-serif; }
.ball.red { background: #cc4658; }.ball.blue, .sum-ball { background: #3986b8; }.ball.green { background: #47906a; }
.balls em { font: 16px/1 Arial,sans-serif; color: #929eac; margin: 0; }
.race { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; width: 100%; max-width: 385px; }
.race .ball { width: 100%; height: 30px; border-radius: 4px; font-size: 14px; background: #398957; }
.race .ball[data-n="1"]{background:#c4a334}.race .ball[data-n="2"]{background:#408dc5}.race .ball[data-n="3"]{background:#526071}.race .ball[data-n="4"]{background:#d68942}.race .ball[data-n="5"]{background:#51a4b0}.race .ball[data-n="6"]{background:#956db3}.race .ball[data-n="7"]{background:#93a299}.race .ball[data-n="8"]{background:#cc534f}.race .ball[data-n="9"]{background:#91685e}
.dice .ball { font-size: 44px; background: none; color: #bf454b; width: 39px; height: 42px; border-radius: 0; }
.many { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); width: 100%; max-width: 420px; gap: 5px; }
.many .ball { width: 100%; max-width: 29px; aspect-ratio: 1; height: auto; font-size: 12px; }
.home-bottom { margin-top: 29px; }
.home-bottom h2 { font-size: 16px; font-weight: 600; margin: 0; padding: 20px 24px; border-bottom: 1px solid #edf0f4; }
.home-bottom h2 span { font-size: 11px; color: #99a3af; margin-left: 12px; font-weight: 400; }
.quick-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 35px; padding: 10px 24px 16px; }
.quick-links a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 13px; color: #697686; }
.quick-links a span { font-size: 11px; color: #9aa5b2; white-space: nowrap; }
.quick-links a:hover { color: var(--red); }

/* Catalog, trend directory and prediction directory share the same responsive layout. */
.directory-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.directory-tools>span { font-size: 12px; color: #8b97a4; white-space: nowrap; }
.directory-search { display: flex; align-items: center; gap: 10px; width: 360px; max-width: 100%; background: #fff; border: 1px solid #dce2e9; border-radius: 7px; padding-left: 14px; }
.directory-search>span { font: 26px/1 Arial,sans-serif; color: #8895a4; }
.directory-search input { width: 100%; border: 0; background: none; font-size: 13px; outline: 0; }
.directory-search:focus-within { border-color: #bd7e8b; }
.directory-categories { margin-bottom: 0; }
.catalog-row { padding: 26px 0; border-bottom: 1px solid #e0e5eb; }
.catalog-row:last-child { border-bottom: 0; }
.catalog-row h3 { margin: 0 0 15px; font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 12px; }
.catalog-row h3:before { content: ""; width: 3px; height: 15px; background: #b87684; border-radius: 2px; }
.catalog-row h3 small { font-size: 11px; color: #98a2ae; font-weight: 400; }
.catalog-row>div { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.catalog-row a { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 16px 14px; min-height: 78px; background: #fff; border: 1px solid var(--line); border-radius: 8px; transition: border-color .15s, background .15s; }
.catalog-row a:hover { border-color: #c38b97; background: #fffafb; }
.catalog-row .game-logo { width: 38px; height: 38px; }
.tile-label { display: block; min-width: 0; }
.tile-label strong { display: block; font-weight: 500; color: #4b5a6b; font-size: 13px; overflow-wrap: anywhere; }
.tile-label small { display: block; font: 10px/1.5 Arial,sans-serif; color: #a1aab6; margin-top: 5px; overflow-wrap: anywhere; letter-spacing: .4px; }
.tile-arrow { margin-left: auto; color: #b4bcc6; font: 20px/1 Arial,sans-serif; }
.catalog-row a:hover .tile-label strong, .catalog-row a:hover .tile-arrow { color: var(--red); }
.catalog-menu { width: min(1120px, calc(100% - 64px)); max-width: none; max-height: min(820px, calc(100dvh - 64px)); padding: 0; border: 1px solid #dce1e7; border-radius: 12px; background: #f7f9fb; color: var(--ink); box-shadow: 0 20px 70px #17253230; overflow: hidden; }
.catalog-menu[open] { display: flex; flex-direction: column; }
.catalog-menu::backdrop { background: #17253266; }
.catalog-title { display: flex; align-items: center; gap: 20px; padding: 23px 25px; background: #fff; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.catalog-title strong { font-size: 19px; font-weight: 600; }
.catalog-title span { display: block; font-size: 11px; color: #929dab; font-weight: 400; margin-top: 5px; }
.catalog-title input { margin-left: auto; width: 290px; font-size: 13px; background: #f7f9fb; }
.catalog-title button { font: 26px/1 Arial,sans-serif; width: 38px; height: 38px; border: 0; background: #f4f6f8; padding: 0; flex-shrink: 0; }
#catalog-groups { overflow-y: auto; overscroll-behavior: contain; padding: 0 25px 16px; }
.catalog-menu .catalog-row>div { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.catalog-menu .catalog-row { padding: 20px 0; }
.catalog-menu .catalog-row a { padding: 13px 10px; min-height: 70px; }

/* Detail pages: navigation, current result, filters and data surfaces. */
.detail-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 22px; align-items: start; }
.detail-side { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.side-game { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 23px 12px; text-align: center; }
.side-game .game-logo { width: 54px; height: 54px; }
.side-game strong { font-size: 14px; font-weight: 600; }
.detail-side h3 { margin: 0; padding: 10px 18px; background: #f6f8fa; font-size: 11px; letter-spacing: 2px; color: #97a2af; font-weight: 400; }
.detail-side>div { padding: 7px 0; display: grid; }
.detail-side>div a { padding: 10px 18px; border-left: 3px solid transparent; color: #6d7a89; font-size: 13px; }
.detail-side>div a:hover { color: var(--red); }
.detail-side>div a.active { border-color: var(--red); background: var(--red-soft); color: var(--red); font-weight: 500; }
.mobile-view-label, .compact-detail-tabs { display: none; }
.detail-main { min-width: 0; }
.result-banner { display: flex; justify-content: space-between; align-items: stretch; gap: 24px; padding: 26px; margin-bottom: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.result-summary { min-width: 0; flex: 1; }
.result-identity { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.result-identity h1 { font-size: 22px; font-weight: 600; margin: 0; }
.result-identity h1 small { display: block; font-size: 12px; font-weight: 400; color: #8a98a7; margin-top: 5px; font-variant-numeric: tabular-nums; }
.result-summary>.balls:not(.race):not(.many):not(.dice) .ball { width: 35px; height: 35px; font-size: 17px; }
.result-summary .race { max-width: 430px; }.result-summary .race .ball { height: 34px; font-size: 16px; }
.summary-tags { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 21px; font-size: 12px; color: #8996a5; }
.summary-tags b { margin-left: 5px; font-weight: 500; color: #ae596a; }
.next-draw { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; gap: 14px; min-width: 173px; border-left: 1px solid #e9edf2; padding-left: 24px; font-size: 12px; color: #91a0af; }
.next-draw>strong { color: var(--red); font-size: 21px; font-weight: 500; white-space: nowrap; }.next-draw>a { color: #8a7480; font-size: 12px; }
.query-controls { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; padding: 23px 24px 17px; }
.query-controls label { display: flex; flex-direction: column; gap: 8px; color: #7d8997; font-size: 12px; min-width: 0; }
.query-controls input, .query-controls select { width: 152px; height: 40px; font-size: 12px; }.query-controls button { font-size: 12px; min-height: 40px; }
.analysis-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 0 24px 23px; font-size: 12px; color: #7b8796; }
.analysis-controls select { margin-left: 6px; font-size: 12px; padding: 7px 9px; }
.analysis-controls>span { flex-basis: 100%; font-size: 11px; color: #95a0ae; }
.detail-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 24px 22px; }
.detail-shortcuts a { padding: 8px 12px; border: 1px solid #e8dce0; background: #fcf7f8; color: #a16b78; border-radius: 5px; font-size: 12px; }
.detail-shortcuts a:hover { border-color: #c38b97; }
.table-scroll, .chart-scroll { overflow: auto; max-width: 100%; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: #ccd4de #f4f6f9; }
.detail-panel table { width: 100%; border-collapse: collapse; text-align: center; }
.detail-panel th { padding: 13px 10px; background: #f4f7fa; font-size: 12px; font-weight: 500; color: #7f8d9c; border: 1px solid #e4e9ef; white-space: nowrap; }
.detail-panel td { padding: 13px 10px; font-size: 12px; color: #596b7e; border: 1px solid #e9edf2; }
.detail-panel tbody tr:nth-child(even) { background: #fcfdfe; }.detail-panel tbody tr:hover { background: #f7fafc; }
.history-table td:first-child { text-align: left; white-space: nowrap; font-size: 12px; padding-left: 19px; font-variant-numeric: tabular-nums; }
.history-table td small { display: block; font-size: 11px; color: #9ba6b4; margin-top: 5px; }
.history-table .balls { flex-wrap: nowrap; min-width: 210px; gap: 5px; }
.history-table .ball { width: 25px; height: 25px; font-size: 12px; }
.history-table .race { width: 285px; }.history-table .race .ball { width: 100%; height: 27px; }
.history-table .many { min-width: 300px; width: 300px; }.history-table .many .ball { width: 25px; }
.history-table .dice .ball { font-size: 31px; background: none; width: 28px; }
.scroll-help { display: none; color: #8c99a8; font-size: 11px; padding: 10px 18px; background: #f6f8fa; border-top: 1px solid #e9edf2; }
.scroll-help span { float: right; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 21px 24px; color: #8996a6; font-size: 12px; }
.pagination>div { display: flex; gap: 8px; }.pagination button { font-size: 12px; white-space: nowrap; }
.source-warning { border-left: 3px solid #d2b273; background: #fcf8ef; color: #9b8357; margin: 20px 24px; padding: 12px 15px; line-height: 1.9; font-size: 12px; border-radius: 0 5px 5px 0; }
.analysis-note { margin: 5px 0 20px; padding: 0 24px; font-size: 12px; color: #8b99a9; line-height: 1.9; }
.frequency-chart { display: flex; align-items: end; gap: 8px; overflow-x: auto; max-width: 100%; padding: 16px 24px 24px; min-height: 177px; scrollbar-width: thin; }
.frequency-chart>div { display: flex; flex: 1; min-width: 26px; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; }
.frequency-chart i { width: 23px; background: #cb8694; border-radius: 3px 3px 0 0; }.frequency-chart span { color: #95a1b1; }.frequency-chart b { font-weight: 400; }
.road-section { margin: 17px 24px 26px; min-width: 0; }.road-section h3 { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: #6c7c8d; }
.road-scroll { overflow-x: auto; max-width: 100%; border: 1px solid #e6ebf1; scrollbar-width: thin; }
.road { display: grid; grid-template-rows: repeat(6, 36px); grid-auto-columns: 36px; grid-auto-flow: column; justify-content: start; min-height: 216px; min-width: max-content; background: linear-gradient(#e9edf2 1px,transparent 1px),linear-gradient(90deg,#e9edf2 1px,transparent 1px); background-size: 36px 36px; }
.road>span { width: 26px; height: 26px; margin: 5px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }.red{color:#bf5368}.blue{color:#448eb8}
.chart-scroll svg { display: block; width: 100%; height: 290px; padding: 0 15px; }.chart-scroll svg text { font: 10px Arial,sans-serif; fill: #91a0b1; }
.trend-table th,.trend-table td { min-width: 33px; padding: 8px 4px !important; }.trend-table td:first-child { padding: 8px 13px !important; white-space: nowrap; }
.trend-table b { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #c54d65; color: #fff; font-weight: 400; }.trend-table td>span { color: #b0bac6; font-size: 11px; }

/* Reading, empty and loading states. */
.article-body { padding: 28px 30px; font-size: 14px; line-height: 2; color: #6f7c8b; overflow-wrap: anywhere; }
.article-body h1 { margin: 0 0 23px; font-size: 24px; color: var(--ink); font-weight: 600; }.article-body h3 { font-size: 17px; color: #405267; font-weight: 600; margin: 0 0 18px; }.article-body p { max-width: 850px; margin: 0 0 17px; }
.article-list { padding: 24px 28px 16px; min-width: 0; }.article-list+.article-list { border-top: 1px solid var(--line); }
.article-list h3 { font-size: 17px; margin: 0 0 10px; font-weight: 600; color: #46586d; padding-left: 11px; border-left: 3px solid #bc7d8c; }
.article-list a { display: flex; align-items: baseline; justify-content: space-between; gap: 25px; padding: 17px 0; border-bottom: 1px solid #edf0f5; font-size: 14px; line-height: 1.7; }.article-list a:last-child { border-bottom: 0; }
.article-list a span { overflow-wrap: anywhere; min-width: 0; }.article-list small { color: #98a4b2; font-size: 11px; white-space: nowrap; }.article-list a:hover { color: var(--red); }
.forecast-row { padding: 6px 0; line-height: 1.8; overflow-wrap: anywhere; }
.empty { grid-column: 1/-1; text-align: center; padding: 60px 24px; font-size: 13px; line-height: 1.9; color: #8a98a8; background: #fff; border-radius: var(--radius); }
.empty h2,.empty h3 { color: #56697e; font-weight: 500; margin: 6px 0 12px; }.empty h3{font-size:18px}.empty p{margin:8px 0 20px}.empty .red-button { font-size: 12px; margin-top: 5px; }.empty-symbol { display: block; font: 48px/1 Arial; color: #b8a683; margin-bottom: 20px; }
.favorites-grid { margin-top: 8px; }
footer { margin-top: 42px; background: #edf1f5; border-top: 1px solid #e1e7ee; }
.footer-columns { display: grid; grid-template-columns: 1.2fr .8fr 1.5fr; gap: 45px; padding: 30px 0; color: #8b98a8; font-size: 12px; line-height: 1.9; }
.footer-columns h3 { font-size: 14px; color: #667789; font-weight: 600; margin: 0 0 12px; }.footer-columns p{margin:0 0 8px}.footer-columns>div:nth-child(2) a{display:block}.footer-columns a:hover{color:var(--red)}
.copyright { padding: 18px 0 25px; border-top: 1px solid #dee5ec; color: #9aa6b4; text-align: center; font-size: 11px; }
#back-top { position: fixed; right: 10px; bottom: 20px; z-index: 5; width: 38px; padding: 7px 0; font-size: 19px; color: #9b6c78; border-color: #dfe5ec; background: #ffffffed; box-shadow: 0 3px 9px #233f5908; border-radius: 7px; }#back-top small{display:block;font-size:10px}
#toast { position: fixed; bottom: 28px; left: 50%; z-index: 50; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 13px 21px; background: #263746f2; color: #fff; border-radius: 7px; opacity: 0; pointer-events: none; font-size: 13px; transition: opacity .15s; }#toast.show{opacity:1}

/* Tablet and narrower desktop: two result columns, compact detail navigation. */
@media (max-width: 1180px) {
  .wrap { width: calc(100% - 44px); }
  .hot-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; }
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-row>div { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .catalog-menu .catalog-row>div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-row a { gap: 10px; padding: 14px 11px; }
  .detail-layout { grid-template-columns: 162px minmax(0, 1fr); gap: 18px; }
  .detail-side>div a { font-size: 12px; padding-left: 14px; }
  .result-banner { flex-direction: column; }
  .next-draw { flex-direction: row; justify-content: space-between; min-width: 0; border-left: 0; border-top: 1px solid #e9edf2; padding: 18px 0 0; }
  .result-summary .race { max-width: 440px; }
  .scroll-help { display: block; }
}
@media (max-width: 960px) {
  .header-search { width: 310px; }.header-favorites { display:none; }
  .intro-tools>a { display: none; }
  .detail-layout { display: flex; flex-direction: column; gap: 18px; }
  .detail-side { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 18px 0; }
  .detail-side>h3,.detail-side>div { display: none; }
  .side-game { flex-direction: row; gap: 10px; padding: 0; text-align: left; }.side-game .game-logo { width: 35px; height: 35px; }.side-game strong { font-size: 13px; }
  .mobile-view-label { display: flex; align-items: center; gap: 9px; color: #8a98a8; font-size: 12px; }.mobile-view-label select { max-width: 190px; padding: 9px; font-size: 13px; }
  .compact-detail-tabs { display: flex; width: calc(100% + 36px); margin: 0 -18px; border-top: 1px solid #edf0f4; padding: 0 8px; }
  .compact-detail-tabs a { flex: 1; text-align: center; padding: 12px 5px; color: #8190a0; font-size: 12px; border-bottom: 2px solid transparent; }.compact-detail-tabs .active { color: var(--red); background: #fcf6f8; border-color: var(--red); }
  .detail-main { width: 100%; }.result-banner { flex-direction: row; padding: 23px; gap: 24px; }
  .next-draw { flex-direction: column; justify-content: center; border-top: 0; border-left: 1px solid #e9edf2; padding: 0 0 0 22px; }
  .result-summary .race { max-width: 420px; }
  .catalog-row>div { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-columns { gap: 25px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 32px); }
  .masthead { height: auto; min-height: 140px; flex-wrap: wrap; gap: 0; padding: 18px 0 16px; }
  .brand { font-size: 26px; gap: 10px; }.brand-emblem { width: 40px; height: 43px; }.brand-emblem b { font-size: 29px; }.brand small { font-size: 9px; }
  .header-search { order: 3; width: 100%; height: 42px; margin-top: 16px; }
  .header-search input { font-size: 16px; }.header-search button { font-size: 12px; }
  #mobile-nav-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; margin-left: auto; width: 42px; height: 40px; padding: 0; background: #f8fafc; }#mobile-nav-toggle span { width: 16px; height: 1px; background: #596b7e; }#mobile-nav-toggle[aria-expanded="true"] { background: var(--red-soft); border-color: #dec2c9; }
  .nav-bar nav { width: 100%; grid-template-columns: repeat(4, 1fr); }.nav-bar a,.nav-bar button { padding: 13px 5px; font-size: 13px; letter-spacing: 0; }
  .nav-bar [data-nav="articles"],.nav-bar [data-nav="predictions"] { display: none; }.nav-bar .mobile-favorites { display: block; }
  .nav-bar.expanded nav { grid-template-columns: repeat(3, 1fr); }.nav-bar.expanded nav>* { display: block; }
  main.wrap { padding-top: 26px; }.home-intro,.page-heading { margin-bottom: 22px; }.intro-tools b{font-size:18px}.intro-tools{font-size:11px}.intro-tools i{margin:0 5px}
  .home-intro h1,.page-heading h1 { font-size: 25px; }.page-description,.page-heading p { font-size: 12px; max-width: 310px; }
  .hot-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.hot-strip>a { font-size: 12px; padding: 15px 6px; }.hot-strip .game-logo{width:41px;height:41px}
  .catalog-row>div { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.catalog-row a { padding: 13px 10px; gap: 8px; }.catalog-row .game-logo{width:33px;height:33px}.tile-label strong{font-size:12px}.tile-arrow{display:none}
  .catalog-menu { width: calc(100% - 28px); max-height: calc(100dvh - 28px); border-radius: 10px; }.catalog-title { padding: 18px; flex-wrap: wrap; gap: 14px; }.catalog-title strong{font-size:19px}.catalog-title input{order:3;width:100%;margin:0;font-size:16px}.catalog-title button{margin-left:auto;align-self:start;width:40px;height:40px}.catalog-menu .catalog-row>div{grid-template-columns:repeat(2,minmax(0,1fr))}#catalog-groups{padding:0 18px 14px}.catalog-menu .catalog-row a{gap:10px;padding:12px}.catalog-menu .tile-label strong{font-size:13px}.catalog-menu .catalog-row .game-logo{width:36px;height:36px}
  .home-grid { gap: 15px; }.draw-card-title{padding:17px 15px 12px}.draw-card-title>a{font-size:14px;gap:9px}.draw-card-title .game-logo{width:36px;height:36px}.star{font-size:23px;width:32px;height:36px}.period{padding:0 15px;font-size:11px}.period a{font-size:10px}.card-numbers{padding:17px 15px}.count-line{padding:0 15px 16px;font-size:11px}.race{gap:4px}.race .ball{height:27px;font-size:12px}.card-actions{font-size:11px}.mini-stats th{font-size:10px}.mini-stats td{font-size:11px}.ball{width:28px;height:28px;font-size:14px}
  .result-banner { flex-direction: column; gap: 21px; }.next-draw{flex-direction:row;border-left:0;border-top:1px solid #e9edf2;padding:17px 0 0;justify-content:space-between}.result-summary .race .ball{height:33px;font-size:15px}.result-summary .race{max-width:460px}
  .query-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 10px}.query-controls input,.query-controls select{width:100%;font-size:16px;height:43px;padding:8px}.query-controls button{font-size:13px;min-height:42px}.query-controls label{font-size:12px}.analysis-controls select{font-size:14px;min-height:39px}
  .article-list a { flex-direction: column; gap: 7px; }.article-list small{font-size:11px}.footer-columns{grid-template-columns:1fr 1fr;gap:23px;font-size:11px}.footer-columns>div:last-child{grid-column:1/-1}.copyright{font-size:10px;line-height:1.8}
}
/* Phones: one result card per row, two-column directories and touch controls. */
@media (max-width: 600px) {
  .wrap { width: calc(100% - 28px); }
  .utility .wrap { height: 27px; font-size: 9px; gap: 6px; }.utility .wrap>span { font-size: 9px; }
  main.wrap{padding-top:23px}.home-intro{align-items:flex-start;gap:10px}.home-intro h1,.page-heading h1{font-size:24px}.section-kicker{font-size:10px;letter-spacing:1.5px}.page-description{font-size:11px;margin-top:7px}.intro-tools{padding-top:27px;font-size:10px;white-space:nowrap}.intro-tools b{font-size:15px}.intro-tools i{margin:0 3px}.page-heading{align-items:flex-start;gap:12px}.page-count{font-size:11px;padding:6px 9px;margin-top:4px}.page-heading p{font-size:12px;line-height:1.8}.breadcrumb{font-size:11px;gap:6px;margin-bottom:17px}
  .hot-section{margin-bottom:26px}.hot-strip{gap:8px}.hot-strip>a{font-size:11px;padding:13px 4px 11px;gap:8px;border-radius:7px}.hot-strip .game-logo{width:37px;height:37px}
  .block-heading{gap:12px;margin-bottom:14px}.block-heading h2{font-size:19px}.block-heading h2 small{font-size:10px;padding:3px 5px;margin-left:3px;vertical-align:2px}.block-heading>span{display:none}.block-heading>a{font-size:11px}
  .category-tabs,.directory-categories{gap:3px;margin-bottom:17px;padding-bottom:10px}.category-tabs button,.directory-categories button{font-size:12px;padding:9px 13px;min-height:38px}
  .home-grid{grid-template-columns:1fr;gap:16px}.draw-card-title{padding:18px 18px 12px}.draw-card-title>a{font-size:17px;gap:11px}.draw-card-title .game-logo{width:41px;height:41px}.star{width:40px;height:40px;font-size:25px}.period{padding:0 18px;font-size:12px}.period a{font-size:11px;padding:5px 0}.card-numbers{padding:18px;min-height:80px}.ball{width:32px;height:32px;font-size:16px}.count-line{padding:0 18px 17px;font-size:12px}.card-actions{padding:4px 8px;font-size:12px}.card-actions a{padding:12px 4px;min-height:42px}.mini-stats th{font-size:11px;padding:9px 2px}.mini-stats td{font-size:12px}.race{gap:5px}.race .ball{height:30px;font-size:14px}.many .ball{font-size:11px}.home-bottom{margin-top:24px}.home-bottom h2{padding:18px;font-size:15px}.quick-links{padding:8px 18px 14px;gap:0 17px}.quick-links a{font-size:12px;flex-direction:column;gap:3px;padding:11px 0}.quick-links a span{font-size:11px}
  .directory-tools{gap:12px;margin-bottom:12px}.directory-search{width:100%;padding-left:10px}.directory-search input{font-size:16px;padding:11px 9px}.directory-tools>span{font-size:11px}.directory-categories{margin-bottom:0}.catalog-row{padding:22px 0}.catalog-row h3{font-size:15px;margin-bottom:13px}.catalog-row h3 small{font-size:11px}.catalog-row>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.catalog-row a{min-height:80px;padding:14px 10px;gap:9px}.catalog-row .game-logo{width:36px;height:36px}.tile-label strong{font-size:12px}.tile-label small{font-size:10px;margin-top:4px}.catalog-menu .catalog-row a{padding:12px 9px;gap:8px}.catalog-menu .catalog-row .game-logo{width:32px;height:32px}.catalog-menu .tile-label strong{font-size:12px}
  .detail-layout{gap:15px}.detail-side{padding:13px 12px 0;gap:12px}.side-game{gap:7px;max-width:48%}.side-game .game-logo{width:30px;height:30px}.side-game strong{font-size:12px}.mobile-view-label{font-size:0;gap:0;max-width:49%}.mobile-view-label select{font-size:14px;max-width:145px;padding:8px 5px;min-height:40px}.compact-detail-tabs{width:calc(100% + 24px);margin:0 -12px;padding:0 3px}.compact-detail-tabs a{font-size:12px;padding:12px 3px;min-height:44px}
  .result-banner{padding:20px 17px;margin-bottom:16px;gap:19px}.result-identity{gap:11px;margin-bottom:21px}.result-identity h1{font-size:21px}.result-identity h1 small{font-size:12px}.result-identity .game-logo{width:43px;height:43px}.result-summary>.balls:not(.race):not(.many):not(.dice) .ball{width:31px;height:31px;font-size:15px}.result-summary .race{gap:4px}.result-summary .race .ball{height:30px;font-size:14px}.summary-tags{font-size:11px;gap:9px 12px;margin-top:19px}.next-draw{gap:10px;padding-top:16px}.next-draw>span{font-size:11px}.next-draw>strong{font-size:18px}.next-draw>a{font-size:11px}
  .panel-title{padding:17px;gap:12px}.panel-title h2{font-size:16px}.panel-title>button{font-size:12px;min-height:38px;padding:8px 12px}.query-controls{padding:19px 17px 16px;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 10px}.query-controls label:nth-child(3){grid-column:1/-1}.query-controls button{grid-row:3}.query-controls label:nth-child(3){grid-row:2}.query-controls{grid-template-columns:repeat(6,minmax(0,1fr))}.query-controls label{grid-column:span 3}.query-controls label:nth-child(3){grid-column:1/-1}.query-controls button{grid-column:span 2;font-size:12px;padding:8px 4px}.analysis-controls{padding:0 17px 19px;gap:11px}.analysis-controls>span{font-size:11px;line-height:1.8}.detail-shortcuts{padding:0 17px 19px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.detail-shortcuts a{font-size:12px;text-align:center;padding:10px 4px}.scroll-help{display:block;font-size:11px}.detail-panel th{font-size:12px;padding:12px 9px}.detail-panel td{font-size:12px;padding:13px 9px}.history-table td:first-child{padding-left:14px;font-size:11px}.history-table td small{font-size:10px}.history-table .balls{gap:5px}.pagination{padding:16px 14px;gap:12px;flex-wrap:wrap;font-size:11px}.pagination>div{margin-left:auto}.pagination button{font-size:12px;min-height:40px;padding:8px 12px}.analysis-note{padding:0 17px;font-size:11px;line-height:1.9}.source-warning{margin:17px;font-size:11px;padding:11px 12px}.frequency-chart{padding:16px 17px 22px}.road-section{margin:16px 17px 23px}.chart-scroll svg{height:255px}
  .article-list{padding:20px 18px 13px}.article-list h3{font-size:16px}.article-list a{font-size:14px;padding:15px 0;gap:6px}.article-body{padding:23px 19px;font-size:13px;line-height:2}.article-body h3{font-size:16px;line-height:1.8}.empty{padding:45px 20px;font-size:12px}.empty h3{font-size:17px}
  footer{margin-top:31px}.footer-columns{padding:25px 0;gap:23px;font-size:11px}.footer-columns h3{font-size:13px}.copyright{padding:17px 0 25px}#back-top{right:3px;bottom:14px;width:31px;font-size:17px;opacity:.9}#back-top small{font-size:9px}#toast{bottom:20px}
}
@media (max-width: 359px) {
  .wrap{width:calc(100% - 22px)}.utility .wrap>span{display:none}.utility .wrap{justify-content:flex-end}.intro-tools{display:none}.hot-strip>a{font-size:10px}.hot-strip .game-logo{width:33px;height:33px}.draw-card-title>a{font-size:15px}.draw-card-title{padding-inline:15px}.card-numbers,.period,.count-line{padding-left:15px;padding-right:15px}.race{gap:4px}.race .ball{height:28px;font-size:12px}.catalog-row a{gap:7px;padding:12px 7px}.catalog-row .game-logo{width:29px;height:29px}.tile-label strong{font-size:11px}.catalog-menu .catalog-row .game-logo{width:27px;height:27px}.catalog-menu .tile-label strong{font-size:11px}.catalog-menu .catalog-row a{padding:10px 6px;gap:6px}.result-banner{padding:18px 14px}.result-identity h1{font-size:19px}.result-summary>.balls:not(.race):not(.many):not(.dice) .ball{width:27px;height:27px;font-size:13px}.result-summary .race .ball{height:28px;font-size:12px}.next-draw{gap:6px}.next-draw>strong{font-size:16px}.query-controls{padding-inline:14px}.directory-tools>span{display:none}.block-heading h2{font-size:18px}
}
@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Reference-led result display: compact cards, larger numbers and bright type colors. */
:root { --red:#e33330; --red-deep:#cb2825; --red-soft:#fff1ef; --ink:#444; --muted:#888; --line:#e3e3e8; --canvas:#eeeef4; }
.wrap { max-width:1200px; }
main.wrap { padding-top:18px; }
.home-intro { margin-bottom:15px; }
.home-intro h1 { font-size:22px; color:#555; }
.intro-tools { font-size:12px; }
.intro-tools b { font-size:18px; color:#666; }
.hot-section { margin-bottom:15px; }
.hot-strip { gap:0; background:white; border:1px solid #e6e6ec; }
.hot-strip>a { border:0; border-right:1px solid #e9e9ef; border-radius:0; padding:18px 5px 12px; gap:6px; color:#333; font-size:14px; line-height:1.3; min-height:119px; }
.hot-strip>a:last-child { border-right:0; }
.hot-strip>a:hover { background:#fff7f5; transform:none; }
.hot-strip .game-logo { width:58px; height:58px; }
.block-heading { margin-bottom:9px; }
.block-heading h2 { font-size:18px; }
.block-heading>span { font-size:12px; }
.category-tabs { margin-bottom:12px; padding-bottom:9px; gap:3px; }
.category-tabs button { padding:6px 12px; font-size:12px; min-height:32px; }
.category-tabs button.selected { background:var(--red); }
.home-grid { gap:10px; align-items:start; }
.draw-card { border:0; border-radius:4px; padding:9px 10px 10px; background:#fff; box-shadow:0 2px 4px #00000014; }
.draw-card:has(.card-primary-link:hover) { box-shadow:0 2px 7px #00000026; }
.draw-card .draw-card-title { display:flex; align-items:center; gap:10px; padding:0 9px; min-height:71px; position:static; }
.draw-card .game-logo { width:61px; height:61px; }
.card-heading-copy { min-width:0; flex:1; }
.card-heading-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:0 9px; padding-right:7px; line-height:1.45; }
.card-heading-line strong { font-size:19px; font-weight:700; color:#4a4a4a; }
.card-issue { font-size:13px; font-weight:500; color:#858585; font-family:Arial,"Microsoft YaHei",sans-serif; overflow-wrap:anywhere; }
.card-count { display:flex; align-items:baseline; flex-wrap:wrap; gap:3px; margin-top:10px; color:#999; font-size:13px; white-space:nowrap; }
.countdown { display:inline-flex; align-items:baseline; gap:7px; font-family:Arial,"Microsoft YaHei",sans-serif; letter-spacing:0; }
.countdown b { color:#ff2720; font-weight:400; font-size:20px; }
.countdown small { color:#999; font-size:12px; font-weight:400; }
.count-pending { color:#f33; font-size:16px; }
.draw-card .star { position:absolute; right:3px; top:3px; width:22px; height:22px; min-height:0; margin:0; font-size:17px; color:#d4d4d4; background:transparent; }
.draw-card .star.saved { color:#d8a51c; }
.draw-card .star:hover { color:#bb8625; }
.draw-card .card-numbers { display:flex; align-items:center; padding:10px 0; min-height:61px; }
.draw-card .mini-stats { margin:0; table-layout:fixed; width:100%; border-collapse:collapse; }
.draw-card .mini-stats th { border:1px solid #e4e4e4; background:#fafafa; color:#444; padding:7px 2px; font-size:14px; font-weight:400; line-height:1.55; }
.draw-card .mini-stats td { border:1px solid #e4e4e4; color:#383838; padding:8px 2px; font-size:14px; line-height:1.5; }
.ball { background:#00a4eb; color:#fff; }
.ball.red { background:#ff2448; }.ball.blue { background:#009de8; }.ball.green { background:#1abd64; }
.sum-ball.sum-low { background:#079900; }.sum-ball.sum-high { background:#999; }
.draw-card .balls { gap:10px; }
.draw-card .ball { width:40px; height:40px; font:bold 21px/1 Arial,sans-serif; }
.balls em { color:#111; font-style:normal; font-weight:700; }
.draw-card .balls em { margin:0 -2px; font-size:19px; }
.race .ball[data-n="1"]{background:#e0dc00}.race .ball[data-n="2"]{background:#009cde}.race .ball[data-n="3"]{background:#4b4b4b}.race .ball[data-n="4"]{background:#ff7900}.race .ball[data-n="5"]{background:#04d5dd}.race .ball[data-n="6"]{background:#5234ff}.race .ball[data-n="7"]{background:#bfbfbf}.race .ball[data-n="8"]{background:#ff3109}.race .ball[data-n="9"]{background:#850800}.race .ball[data-n="10"]{background:#09bf00}
.draw-card .race { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:8px; max-width:none; width:100%; }
.draw-card .race .ball { width:100%; height:35px; border-radius:3px; font-size:19px; }
.draw-card .many { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:5px; width:100%; }
.draw-card .many .ball { width:100%; max-width:none; height:auto; aspect-ratio:1; font-size:14px; }
.dice .ball, .draw-card .dice .ball, .history-table .dice .ball { background:none; border-radius:0; color:inherit; width:43px; height:43px; }
.die-face { display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr); gap:3px; padding:7px; width:100%; height:100%; border-radius:7px; background:linear-gradient(#f3f3f3,#c9c9c9); box-shadow:inset 0 1px 1px #fff,inset 0 -1px 2px #bbb; }
.die-face i { display:block; aspect-ratio:1; border-radius:50%; background:#080808; box-shadow:inset 0 1px 1px #0008; }
.die-1 i,.die-4 i { background:#c20c1b; }
.die-1 i { transform:scale(1.2); }
.history-table .dice .ball { width:29px; height:29px; }
.history-table .die-face { padding:4px; gap:2px; border-radius:5px; }
.next-draw>strong { font-weight:400; }.next-draw .countdown b{font-size:23px}.next-draw .countdown small{font-size:13px}
.result-summary>.balls:not(.race):not(.many):not(.dice) .ball { width:38px; height:38px; font-size:20px; }
@media (min-width:1181px) { .hot-strip { grid-template-columns:repeat(auto-fit,minmax(86px,1fr)); } }
@media (min-width:961px) and (max-width:1180px) { .home-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.draw-card .game-logo{width:47px;height:47px}.draw-card .draw-card-title{gap:7px;padding-inline:2px}.card-heading-line strong{font-size:16px}.card-issue{font-size:11px}.card-count{font-size:11px;gap:1px}.countdown{gap:4px}.countdown b{font-size:18px}.draw-card .balls{gap:6px}.draw-card .ball{width:34px;height:34px;font-size:19px}.draw-card .race{gap:5px}.draw-card .race .ball{width:100%;font-size:15px;height:31px}.draw-card .mini-stats th,.draw-card .mini-stats td{font-size:12px}.hot-strip>a{min-height:110px} }
@media (min-width:601px) and (max-width:960px) { .home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.draw-card .draw-card-title{padding-inline:1px;gap:8px}.draw-card .game-logo{width:52px;height:52px}.card-heading-line strong{font-size:17px}.card-issue{font-size:12px}.card-count{font-size:11px}.draw-card .balls{gap:7px}.draw-card .ball{width:35px;height:35px;font-size:19px}.draw-card .race{gap:5px}.draw-card .race .ball{width:100%;font-size:16px;height:32px}.draw-card .mini-stats th,.draw-card .mini-stats td{font-size:13px} }
@media (max-width:760px) { .hot-strip>a{font-size:13px;min-height:102px;padding:13px 4px 10px}.hot-strip .game-logo{width:50px;height:50px}.home-intro{margin-bottom:13px}.intro-tools{padding-top:0}.home-intro h1{font-size:20px} }
@media (max-width:600px) { .home-grid{grid-template-columns:1fr;gap:10px}.home-intro{align-items:center}.hot-section{margin-bottom:15px}.draw-card{padding:9px 10px 10px}.draw-card .draw-card-title{padding:0 3px;gap:9px;min-height:70px}.draw-card .game-logo{width:56px;height:56px}.card-heading-line strong{font-size:19px}.card-issue{font-size:12px}.card-count{font-size:12px;margin-top:9px}.draw-card .balls{gap:8px}.draw-card .ball{width:37px;height:37px;font-size:20px}.draw-card .race{gap:6px}.draw-card .race .ball{width:100%;height:34px;font-size:18px}.draw-card .many{gap:5px}.draw-card .many .ball{width:100%;height:auto;font-size:12px}.draw-card .dice .ball{width:42px;height:42px}.draw-card .card-numbers{padding:10px 0;min-height:60px}.draw-card .mini-stats th,.draw-card .mini-stats td{font-size:14px}.category-tabs{margin-bottom:10px}.draw-card .star{width:26px;height:26px;font-size:18px}.result-summary>.balls:not(.race):not(.many):not(.dice) .ball{width:32px;height:32px;font-size:16px} }
@media (max-width:359px) { .hot-strip>a{font-size:11px;min-height:90px}.hot-strip .game-logo{width:43px;height:43px}.draw-card .game-logo{width:45px;height:45px}.draw-card .draw-card-title{gap:7px;min-height:73px}.card-heading-line strong{font-size:17px}.card-issue{font-size:11px}.card-count{font-size:11px}.countdown{gap:4px}.countdown b{font-size:18px}.countdown small{font-size:11px}.draw-card .balls{gap:5px}.draw-card .ball{width:31px;height:31px;font-size:18px}.draw-card .race{gap:5px}.draw-card .race .ball{width:100%;height:31px;font-size:15px}.draw-card .mini-stats th,.draw-card .mini-stats td{font-size:12px}.draw-card .many .ball{font-size:11px}.result-summary>.balls:not(.race):not(.many):not(.dice) .ball{width:27px;height:27px;font-size:14px} }

/* Reference detail layout: result strip, four navigation groups, overview modules. */
main[data-page="game"] { padding-top:10px; }
.detail-page, .detail-loading { min-width:0; }
.detail-top { display:grid; grid-template-columns:minmax(0,1fr) 228px; gap:12px; margin-bottom:10px; }
.detail-page .result-banner { display:flex; flex-direction:row; align-items:center; gap:23px; padding:28px 30px; min-height:167px; margin:0; border:0; border-radius:0; }
.detail-result-identity { display:flex; align-items:center; gap:25px; flex:1; min-width:0; }
.detail-result-identity>.game-logo { width:88px; height:88px; }
.detail-page .result-summary { min-width:0; flex:1; }
.detail-page .result-identity { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 15px; margin:0 0 12px; }
.detail-page .result-identity h1 { font-size:16px; font-weight:400; color:#333; }
.result-issue { color:#444; font-size:14px; white-space:nowrap; }.result-issue b { color:#ff2820; font:16px Arial,sans-serif; }
.detail-page .result-summary>.balls:not(.race):not(.many):not(.dice) .ball { width:40px; height:40px; font-size:20px; }
.detail-page .result-summary>.balls { gap:10px; }
.detail-page .result-summary>.race { gap:5px; max-width:390px; }.detail-page .result-summary>.race .ball { height:33px; font-size:17px; }
.detail-page .result-summary>.many { gap:4px; min-width:0; max-width:390px; }.detail-page .result-summary>.many .ball { font-size:12px; }
.detail-page .next-draw { display:flex; flex-direction:column; gap:13px; min-width:151px; padding:0 18px 0 25px; border-top:0; border-left:1px solid #eee; align-self:stretch; justify-content:center; font-size:14px; color:#444; }
.detail-page .next-draw>strong { font-size:18px; font-weight:400; }.detail-page .next-draw .countdown{gap:3px;flex-wrap:wrap;justify-content:center}.detail-page .next-draw .countdown b{display:inline-grid;place-items:center;min-width:39px;height:40px;padding:0 5px;background:#55bf35;border-radius:4px;font-weight:700;color:#fff;font-size:18px}.detail-page .next-draw .countdown small{font-size:14px;color:#888}.detail-page .next-draw .count-pending{font-size:16px}
.detail-result-actions { display:flex; flex-direction:column; gap:6px; border-left:1px solid #eee; padding-left:24px; flex-shrink:0; }
.detail-result-actions button,.detail-result-actions a { min-width:88px; padding:8px 12px; text-align:center; border-radius:3px; font-size:13px; line-height:1.5; }
.detail-result-actions a { border:1px solid #e3e3e3; background:#fafafa; color:#888; }.detail-result-actions a:hover{border-color:#ff9b91;color:var(--red)}
.detail-live-tile { display:flex; align-items:center; justify-content:center; gap:4px; flex-direction:column; background:#fff; color:#a8bfcd; border-radius:3px; text-align:center; }
.detail-live-tile svg { width:89px; height:86px; fill:none; stroke:currentColor; stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round; }.detail-live-tile .tv-play{stroke-width:3}.detail-live-tile>span{font-size:15px;letter-spacing:2px}.detail-live-tile small{display:block;color:#a1aeb8;letter-spacing:0;font-size:11px;margin-top:3px}.detail-live-tile:hover{color:#77a6c1}
.detail-directory { margin-bottom:10px; background:#fff; }
.detail-nav-groups { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.detail-nav-group { min-width:0; padding:19px 20px 12px 30px; border-right:1px solid #eee; }.detail-nav-group:last-child{border-right:0}
.detail-nav-group h2 { margin:0 0 25px; padding-left:15px; border-left:2px solid #ff342a; color:#444; font-size:18px; line-height:1; font-weight:400; }
.detail-nav-links { display:flex; align-items:center; flex-wrap:wrap; row-gap:10px; margin-left:-8px; }
.detail-nav-links a { color:#444; font-size:12px; line-height:1.3; padding:1px 8px; border-right:1px solid #e8e8e8; margin:0; }.detail-nav-links a:last-child{border-right:0}.detail-nav-links a:hover{color:#ff332a}.detail-nav-links a.active{background:#ff342a;border-color:transparent;color:#fff;padding:4px 3px;margin:-3px 5px}
.detail-nav-more { margin-top:11px; }.detail-nav-more summary{list-style:none;text-align:center;cursor:pointer;font-size:11px;color:#c86c64;user-select:none}.detail-nav-more summary::-webkit-details-marker{display:none}.detail-nav-more summary span{font-size:17px;color:#ff3025;margin-left:4px}.detail-nav-more[open] .detail-nav-links{margin-top:13px;padding-bottom:4px}
.detail-mobile-nav { display:none; }
.detail-page>.source-warning { margin:0 0 10px; }
.overview-panels { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:12px; margin-bottom:10px; align-items:stretch; }
.detail-page .panel { border:0; border-radius:0; background:#fff; }
.detail-page .panel-title { min-height:55px; padding:15px 30px; border-bottom:1px solid #e5e5e5; gap:15px; }
.detail-page .panel-title h2 { font-size:18px; font-weight:400; line-height:1.4; color:#444; }
.detail-page .panel-title>a { margin-left:auto; font-size:12px; white-space:nowrap; color:#555; }.detail-page .panel-title>a:hover{color:var(--red)}
.overview-chart { height:211px; padding:7px 22px 11px; min-width:0; }
.overview-chart svg { width:100%; height:100%; display:block; overflow:visible; }
.overview-chart svg line { stroke:#e4e7eb; stroke-width:1; }
.overview-chart svg text { fill:#666; font:12px Arial,"Microsoft YaHei",sans-serif; }.overview-chart svg .chart-caption{font-size:13px}
.overview-chart svg polyline { fill:none; stroke:#4979b5; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.overview-chart svg circle { fill:#4979b5; }
#overview-articles-content { max-height:211px; overflow:auto; scrollbar-width:thin; }
.overview-article-empty { display:grid; place-items:center; min-height:211px; padding:20px; text-align:center; font-size:15px; color:#999; }
.overview-articles .article-list { padding:7px 26px; }.overview-articles .article-list h3{display:none}.overview-articles .article-list a{font-size:13px;padding:12px 0;gap:8px;align-items:start}.overview-articles .article-list small{font-size:10px}
.overview-record-table { padding:20px 30px 28px; }
.detail-page .history-table { min-width:850px; }
.detail-page .history-table th { padding:9px 8px; color:#444; font-size:13px; font-weight:400; border:1px solid #d7d7d7; background:#f5f5f5; }
.detail-page .history-table td { padding:17px 9px; font-size:13px; color:#333; border:1px solid #dedede; }
.detail-page .history-table tbody tr:nth-child(even) { background:#fafafa; }
.detail-page .history-table .record-time { min-width:217px; font-size:13px; text-align:center; padding-left:9px; white-space:nowrap; }.record-time>span{display:inline-block;margin-right:11px}.record-time time{font-size:12px}
.record-numbers { display:flex; justify-content:center; gap:25px; min-width:215px; font-size:15px; font-weight:700; font-family:Arial,sans-serif; }
.record-red,.detail-page .history-table td.record-red { color:#ff2f22; }.record-blue{color:#748f9f}
.detail-page .history-table .balls { justify-content:center; }.detail-page .history-table .race,.detail-page .history-table .many{margin-inline:auto}
.detail-page .detail-panel:not(.overview-records) { margin-top:0; }
.detail-page .query-controls { padding-top:20px; }
.detail-page .analysis-controls { padding-bottom:20px; }
.detail-loading .detail-directory{margin-bottom:10px}
@media (max-width:1180px) {
  .detail-top{grid-template-columns:minmax(0,1fr) 175px;gap:10px}.detail-page .result-banner{padding:23px 22px;gap:15px;min-height:160px}.detail-result-identity{gap:15px}.detail-result-identity>.game-logo{width:69px;height:69px}.detail-page .next-draw{min-width:134px;padding-left:16px;padding-right:0}.detail-result-actions{padding-left:14px}.detail-result-actions button,.detail-result-actions a{min-width:77px;font-size:12px;padding:8px}.detail-page .result-summary>.balls{gap:7px}.detail-page .result-summary>.balls:not(.race):not(.many):not(.dice) .ball{width:35px;height:35px;font-size:18px}.detail-page .result-summary>.race{gap:4px}.detail-page .result-summary>.race .ball{font-size:14px;height:29px}.detail-page .next-draw .countdown b{min-width:31px;height:35px;font-size:17px}.detail-nav-group{padding-left:22px;padding-right:13px}.detail-nav-group h2{font-size:17px;margin-bottom:22px}.detail-nav-links a{font-size:12px;padding-inline:6px}.detail-page .panel-title{padding-inline:24px}.detail-page .panel-title h2{font-size:17px}.overview-record-table{padding:18px 24px 24px}
}
@media (max-width:960px) {
  .detail-top{grid-template-columns:minmax(0,1fr) 150px}.detail-page .result-banner{flex-wrap:wrap;padding:20px;gap:16px}.detail-result-identity{flex-basis:100%;gap:20px}.detail-result-identity>.game-logo{width:70px;height:70px}.detail-page .result-identity h1{font-size:17px}.detail-page .next-draw{flex-direction:row;justify-content:flex-start;align-self:auto;flex:1;min-width:0;border-left:0;border-top:1px solid #eee;padding:14px 0 0;font-size:13px;gap:10px}.detail-page .next-draw .countdown b{height:33px;min-width:30px}.detail-result-actions{border-left:0;padding:12px 0 0;flex-direction:row;align-self:end;gap:5px}.detail-result-actions button,.detail-result-actions a{min-width:0;padding:7px 10px}.detail-live-tile svg{width:77px;height:77px}.detail-nav-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.detail-nav-group{padding:19px 24px;min-height:116px}.detail-nav-group:nth-child(2){border-right:0}.detail-nav-group:nth-child(-n+2){border-bottom:1px solid #eee}.detail-nav-group h2{margin-bottom:20px}.detail-nav-links{row-gap:14px}.detail-nav-links a{font-size:13px}.detail-nav-more summary{font-size:12px}.overview-panels{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}.detail-page .panel-title{padding:14px 20px}.detail-page .panel-title h2{font-size:16px}.overview-chart{height:205px;padding-inline:8px}.overview-article-empty{min-height:205px;font-size:14px}.overview-articles .article-list{padding-inline:17px}.overview-articles .article-list a{font-size:12px;flex-direction:column;gap:4px}.overview-record-table{padding:16px 20px 22px}.detail-page .result-summary>.race{max-width:440px}.detail-page .result-summary>.many{max-width:420px}
}
@media (max-width:600px) {
  main[data-page="game"]{padding-top:12px}.detail-top{display:block;margin-bottom:12px}.detail-page .result-banner{padding:19px 15px;gap:14px;min-height:0}.detail-result-identity{gap:12px;align-items:flex-start}.detail-result-identity>.game-logo{width:55px;height:55px;margin-top:3px}.detail-page .result-identity{display:block;margin-bottom:13px}.detail-page .result-identity h1{font-size:17px;margin-bottom:5px;font-weight:500}.result-issue{font-size:12px}.result-issue b{font-size:13px}.detail-page .result-summary>.balls{gap:6px}.detail-page .result-summary>.balls:not(.race):not(.many):not(.dice) .ball{width:32px;height:32px;font-size:17px}.detail-page .result-summary>.race{gap:4px;grid-template-columns:repeat(5,minmax(0,1fr));max-width:240px}.detail-page .result-summary>.race .ball{height:31px;font-size:16px}.detail-page .result-summary>.many{grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;max-width:100%}.detail-page .result-summary>.many .ball{font-size:9px}.detail-page .result-summary:has(>.many),.detail-page .result-summary:has(>.balls .green){min-width:0}.detail-page .detail-result-identity:has(.many){flex-wrap:wrap}.detail-page .detail-result-identity:has(.many)>.game-logo{width:45px;height:45px}.detail-page .detail-result-identity:has(.many) .result-summary{flex-basis:100%}.detail-page .result-summary>.dice{gap:8px}.detail-page .result-summary>.dice .ball{width:36px;height:36px}.detail-page .next-draw{width:100%;flex-basis:100%;padding-top:13px;justify-content:space-between;border-top:1px solid #eee;font-size:12px}.detail-page .next-draw .countdown b{min-width:30px;height:33px;font-size:17px}.detail-page .next-draw .countdown small{font-size:12px}.detail-result-actions{width:100%;padding:0;gap:8px}.detail-result-actions button,.detail-result-actions a{flex:1;min-height:38px;font-size:12px;padding:9px}.detail-live-tile{flex-direction:row;gap:9px;margin-top:1px;padding:9px;font-size:12px}.detail-live-tile svg{width:29px;height:29px;stroke-width:6}.detail-live-tile>span{font-size:12px;letter-spacing:0}.detail-live-tile small{display:inline;font-size:11px;margin-left:10px}.detail-nav-groups{display:none}.detail-directory{margin-bottom:12px}.detail-mobile-nav{display:block}.detail-mobile-nav label{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-bottom:1px solid #eee;color:#777;font-size:13px}.detail-mobile-nav select{min-height:39px;max-width:180px;font-size:14px;border-radius:3px}.detail-mobile-nav>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.detail-mobile-nav a{font-size:12px;text-align:center;padding:12px 3px;color:#777;border-bottom:2px solid transparent;min-height:44px}.detail-mobile-nav a.active{color:#ff3327;border-color:#ff3327;background:#fff6f4}.overview-panels{grid-template-columns:1fr;gap:12px;margin-bottom:12px}.detail-page .panel-title{padding:14px 15px;min-height:51px;gap:10px}.detail-page .panel-title h2{font-size:16px;line-height:1.5}.detail-page .panel-title>a{font-size:11px}.overview-chart{height:200px;padding:7px 9px 10px}.overview-chart svg text{font-size:13px}.overview-article-empty{min-height:116px;font-size:13px}.overview-articles .article-list{padding:6px 15px}.overview-articles .article-list a{font-size:13px;padding:12px 0}.overview-record-table{padding:14px 12px 20px}.detail-page .history-table td{padding-block:15px}.detail-page .history-table .record-time{font-size:12px}.detail-page .result-summary>.balls:not(.race):not(.many):not(.dice):has(.green),.detail-page .result-summary>.balls:not(.race):not(.many):not(.dice):has(em){flex-wrap:wrap}
}
@media (max-width:359px) {
  .detail-page .result-banner{padding:17px 12px}.detail-result-identity{gap:9px}.detail-result-identity>.game-logo{width:43px;height:43px}.detail-page .result-identity h1{font-size:16px}.detail-page .result-summary>.balls:not(.race):not(.many):not(.dice) .ball{width:29px;height:29px;font-size:16px}.detail-page .result-summary>.balls{gap:5px}.detail-page .result-summary>.many{gap:3px}.detail-page .result-summary>.race{gap:4px}.detail-page .panel-title h2{font-size:15px}.detail-page .panel-title{padding-inline:13px}.detail-mobile-nav label{padding-inline:13px}.detail-mobile-nav select{max-width:157px}.overview-chart{height:182px}
}
@media (max-width:600px) {
  .detail-page .detail-result-identity { display:grid; grid-template-columns:55px minmax(0,1fr); gap:13px 12px; align-items:center; width:100%; }
  .detail-page .detail-result-identity>.game-logo { grid-column:1; grid-row:1; width:55px; height:55px; margin:0; }
  .detail-page .result-summary { display:contents; }
  .detail-page .result-identity { grid-column:2; grid-row:1; margin:0; }
  .detail-page .result-summary>.balls { grid-column:1/-1; width:100%; }
  .detail-page .result-summary>.race { grid-template-columns:repeat(10,minmax(0,1fr)); max-width:none; gap:4px; }
  .detail-page .result-summary>.race .ball { font-size:15px; height:31px; }
  .detail-page .result-summary>.many { max-width:none; gap:5px; }
  .detail-page .result-summary>.many .ball { max-width:30px; font-size:12px; }
  .detail-page .detail-result-identity:has(.many)>.game-logo { width:55px; height:55px; }
}
@media (max-width:359px) {
  .detail-page .detail-result-identity { grid-template-columns:46px minmax(0,1fr); gap:12px 10px; }
  .detail-page .detail-result-identity>.game-logo,.detail-page .detail-result-identity:has(.many)>.game-logo { width:46px; height:46px; }
  .detail-page .result-summary>.race .ball { font-size:13px; height:28px; }
  .detail-page .result-summary>.many .ball { font-size:10px; }
}

/* Refined detail surfaces and a hover menu that overlays the charts without reflow. */
.detail-top { gap:14px; margin-bottom:14px; }
.detail-page .result-banner { min-height:164px; padding:26px 28px; border:1px solid #e6e6eb; border-radius:7px; box-shadow:0 2px 4px #25304704; }
.detail-result-identity { gap:22px; }
.detail-result-identity>.game-logo { width:84px; height:84px; }
.detail-page .result-identity { align-items:center; gap:6px 14px; margin-bottom:16px; }
.detail-page .result-identity h1 { font-size:20px; font-weight:600; color:#3d4249; }
.result-issue { color:#929398; font-size:12px; }.result-issue b{font-size:14px;color:#e8463d}
.detail-page .next-draw { padding-left:24px; padding-right:10px; gap:13px; min-width:155px; color:#777c83; font-size:12px; }
.detail-page .next-draw .countdown b { height:39px; min-width:35px; font-size:19px; background:#52b84b; border-radius:5px; }
.detail-page .next-draw .countdown small { margin:0 2px; color:#8e9790; font-size:12px; }
.detail-result-actions { padding-left:19px; gap:8px; }
.detail-result-actions button,.detail-result-actions a { border-radius:5px; min-height:36px; padding:8px 14px; font-size:12px; }
.detail-result-actions a { background:#f8f9fa; color:#767b83; border-color:#e6e7ea; }
.detail-live-tile { border:1px solid #e6e6eb; border-radius:7px; color:#8fb0c4; gap:8px; box-shadow:0 2px 4px #25304704; transition:border-color .15s,background .15s; }
.detail-live-tile svg { width:76px; height:73px; }
.detail-live-tile>span { color:#76838e; font-size:14px; letter-spacing:1px; }.detail-live-tile small{font-size:11px;color:#a0a9b2;margin-top:5px}
.detail-live-tile:hover { background:#fafdff; border-color:#bccdd9; }
.detail-directory { position:relative; z-index:6; margin-bottom:14px; border:1px solid #e5e6eb; border-radius:7px; overflow:visible; box-shadow:0 2px 4px #25304703; }
.detail-nav-groups { align-items:stretch; }
.detail-nav-group { position:relative; min-height:153px; padding:0; border-color:#edefef; }
.detail-nav-surface { min-height:153px; padding:22px 24px 13px; background:#fff; }
.detail-nav-group:first-child .detail-nav-surface { border-radius:7px 0 0 7px; }
.detail-nav-group:last-child .detail-nav-surface { border-radius:0 7px 7px 0; }
.detail-nav-group h2 { margin:0 0 24px; padding-left:11px; font-size:17px; font-weight:500; color:#454a51; border-color:#f33b33; }
.detail-nav-links { gap:10px 0; margin-left:-6px; align-items:center; }
.detail-nav-links a { padding:2px 6px; color:#636871; font-size:12px; line-height:1.3; border-right-color:#eceef0; border-radius:0; }
.detail-nav-links a:hover { color:#ed342c; }
.detail-nav-links a.active { padding:4px 5px; margin:-2px 1px; border:0; background:#fa3c31; color:#fff; border-radius:2px; }
.detail-nav-expandable { z-index:2; }
.detail-nav-expandable .detail-nav-surface { position:absolute; left:-1px; top:-1px; width:calc(100% + 2px); border:1px solid transparent; min-height:155px; transition:box-shadow .15s,border-color .15s; }
.detail-nav-expandable.expanded .detail-nav-surface { z-index:7; border-color:#e9e9ee; background:#fff; border-radius:7px; box-shadow:4px 9px 24px #27334424; }
.detail-nav-extra { padding-top:12px; }
.detail-nav-toggle { display:flex; justify-content:center; align-items:center; gap:5px; width:100%; padding:5px 0 0; min-height:24px; margin-top:9px; background:none; border:0; border-radius:0; color:#a4a4a8; font-size:10px; }
.detail-nav-toggle svg { width:14px; height:14px; fill:none; stroke:#f23a31; stroke-width:2; transition:transform .15s; }
.detail-nav-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.detail-nav-toggle:hover,.detail-nav-expandable.expanded .detail-nav-toggle { color:#df5c53; }
.detail-nav-toggle:focus-visible { outline-offset:1px; }
.detail-page .panel { border:1px solid #e6e6eb; border-radius:7px; box-shadow:0 2px 4px #25304703; }
.overview-panels { gap:14px; margin-bottom:14px; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
.detail-page .panel-title { min-height:55px; padding:17px 25px; border-color:#ebedf0; }
.detail-page .panel-title h2 { color:#454b53; font-size:16px; font-weight:500; }
.detail-page .panel-title>a { color:#8b929b; font-size:11px; padding:3px 0; }
.detail-page .panel-title>a:hover { color:#ef3b33; }
.detail-page .panel-title>button { font-size:12px; padding:7px 13px; background:#fafbfc; border-color:#e5e8ec; }
.overview-chart { height:228px; padding:12px 22px 14px; }
.overview-chart svg line { stroke:#e8edf2; }.overview-chart svg polyline{stroke:#4b80be;stroke-width:2.6}.overview-chart svg circle{fill:#4b80be}.overview-chart svg text{fill:#7c8693;font-size:11px}.overview-chart svg .chart-caption{font-size:12px;fill:#68788b}
#overview-articles-content { max-height:228px; }
.overview-article-empty { min-height:228px; color:#b0b6bd; font-size:14px; letter-spacing:.5px; background:#fff; }
.overview-articles .article-list { padding:4px 25px; }.overview-articles .article-list a{padding:13px 0;color:#606873}.overview-articles .article-list a:hover{color:#ee352e}
.overview-record-table { padding:20px 25px 25px; }
.detail-page .history-table th { background:#f6f7f9; border-color:#e0e4e9; color:#707984; padding:11px 8px; font-size:12px; }
.detail-page .history-table td { padding:14px 9px; border-color:#e9ecf0; font-size:13px; color:#5a6572; }
.detail-page .history-table tbody tr:nth-child(even) { background:#fbfcfd; }
.detail-page .history-table tbody tr:hover { background:#fff8f5; }
.detail-page .history-table .record-time { font-size:12px; }.record-time time{font-size:11px;color:#87929e}
.detail-page .history-table td.record-red { color:#ef4037; }.record-numbers{font-size:15px;gap:26px}.record-numbers .record-red{color:#f03b32}.record-numbers .record-blue{color:#678397}
.detail-page .query-controls label,.detail-page .analysis-controls { color:#7c858f; }
.detail-page .detail-panel .source-warning { border-radius:4px; }
@media (max-width:1180px) {
  .detail-page .result-banner{padding:23px 21px;gap:16px}.detail-result-identity{gap:15px}.detail-result-identity>.game-logo{width:69px;height:69px}.detail-page .result-identity h1{font-size:18px}.detail-page .next-draw{min-width:131px;padding-left:16px;padding-right:0}.detail-result-actions{padding-left:15px}.detail-result-actions button,.detail-result-actions a{min-width:77px;padding:8px 10px}.detail-nav-surface{padding:22px 17px 13px}.detail-nav-group h2{font-size:16px}.detail-nav-links a{font-size:12px;padding-inline:5px}.detail-page .panel-title{padding-inline:21px}.overview-record-table{padding-inline:21px}
}
@media (max-width:960px) {
  .detail-page .next-draw{flex-direction:row;border-left:0;border-top:1px solid #eee;padding:13px 0 0;min-width:0;gap:10px}.detail-result-actions{border:0;padding:12px 0 0;gap:7px}.detail-nav-group{min-height:153px}.detail-nav-surface{min-height:153px;padding:21px 23px 14px}.detail-nav-group:first-child .detail-nav-surface{border-radius:7px 0 0 0}.detail-nav-group:last-child .detail-nav-surface{border-radius:0 0 7px 0}.detail-nav-expandable.expanded .detail-nav-surface{border-radius:7px}.detail-nav-links{row-gap:13px}.detail-nav-links a{font-size:13px}.detail-nav-group h2{margin-bottom:23px}.overview-chart{height:219px;padding-inline:12px}.overview-article-empty{min-height:219px}.detail-page .panel-title{padding:15px 19px}.detail-page .panel-title h2{font-size:15px}.overview-articles .article-list{padding-inline:18px}
}
@media (max-width:600px) {
  main[data-page="game"]{padding-top:13px}.detail-top{margin-bottom:13px}.detail-page .result-banner{padding:19px 16px;gap:15px;border-radius:7px 7px 0 0}.detail-page .detail-result-identity{gap:15px 12px}.detail-page .result-identity{margin:0}.detail-page .result-identity h1{font-size:19px;font-weight:600;margin-bottom:5px}.result-issue{font-size:12px}.result-issue b{font-size:13px}.detail-page .next-draw{font-size:12px;padding-top:15px}.detail-page .next-draw .countdown b{min-width:31px;height:34px;font-size:17px}.detail-page .next-draw .countdown small{font-size:12px;margin:0 1px}.detail-result-actions{padding:0;gap:9px}.detail-result-actions button,.detail-result-actions a{min-height:39px;font-size:12px}.detail-live-tile{margin-top:0;border-top:0;border-radius:0 0 7px 7px;padding:10px;gap:8px;box-shadow:none}.detail-live-tile svg{width:26px;height:26px}.detail-live-tile>span{font-size:12px}.detail-live-tile small{font-size:11px;margin-left:8px}.detail-directory{margin-bottom:13px;overflow:hidden}.detail-mobile-nav label{padding:12px 15px;font-size:12px}.detail-mobile-nav select{background:#fafbfc;border-color:#e4e7eb;border-radius:5px}.detail-mobile-nav a{font-size:12px;min-height:45px}.overview-panels{grid-template-columns:1fr;gap:13px;margin-bottom:13px}.detail-page .panel-title{padding:15px 16px;min-height:52px}.detail-page .panel-title h2{font-size:16px}.detail-page .panel-title>a{font-size:11px}.overview-chart{height:222px;padding:11px 12px 14px}.overview-chart svg text{font-size:12px}.overview-chart svg .chart-caption{font-size:12px}.overview-article-empty{min-height:113px;font-size:13px}.overview-record-table{padding:14px 12px 18px}.detail-page .history-table th{font-size:12px}.detail-page .history-table td{padding-block:15px}.detail-page .query-controls{padding-inline:16px}.detail-page .analysis-controls{padding-inline:16px}
}
@media (max-width:359px) {
  .detail-page .result-banner{padding:17px 13px}.detail-page .result-identity h1{font-size:17px}.detail-page .detail-result-identity{gap:13px 10px}.detail-page .next-draw{font-size:11px}.detail-page .next-draw .countdown b{min-width:29px;height:32px;font-size:16px}.detail-page .next-draw .countdown{gap:2px}.detail-page .panel-title{padding-inline:13px}.detail-page .panel-title h2{font-size:15px}.overview-chart{height:201px;padding-inline:8px}
}
@media (min-width:601px) {
  .detail-nav-group,.detail-nav-surface { min-height:163px; }
  .detail-nav-expandable .detail-nav-surface { min-height:165px; }
  .detail-nav-links a { font-size:13px; padding-inline:8px; }
  .detail-nav-links a.active { padding:4px 5px; }
  .detail-nav-links { row-gap:11px; }
}

/* Reference and result comparison: shared table rhythm and aligned columns. */
.forecast-content { padding:22px 25px 28px; }
.forecast-explanation { margin:0 0 22px; color:#767b83; font-size:12px; line-height:1.9; }
.forecast-explanation b { color:#4f555d; font-weight:600; }
.forecast-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); align-items:start; gap:16px; }
.forecast-history,.forecast-references,.forecast-period { min-width:0; }
.forecast-section-heading,.forecast-period-title { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:45px; padding:11px 15px; background:#f5f6f8; border:1px solid #e4e7eb; border-bottom:0; border-radius:4px 4px 0 0; }
.forecast-section-heading h3,.forecast-period-title h3 { margin:0; font-size:13px; color:#454b53; font-weight:500; font-variant-numeric:tabular-nums; }
.forecast-section-heading a,.forecast-period-title>span { color:#8b919a; font-size:11px; white-space:nowrap; }
.forecast-section-heading a:hover { color:#ef4037; }
.forecast-period { margin-bottom:18px; }
.forecast-period:last-child { margin-bottom:0; }
.detail-panel .forecast-table { table-layout:fixed; min-width:420px; }
.forecast-position-col { width:17%; }.forecast-result-col{width:12%}.forecast-candidates-col{width:43%}.forecast-choice-col{width:14%}
.detail-panel .forecast-table thead th,.detail-panel .forecast-history-table thead th { height:38px; padding:8px 5px; background:#f8f9fb; border-color:#e4e7eb; color:#878c94; font-size:11px; }
.detail-panel .forecast-table tbody th,.detail-panel .forecast-table td { height:45px; padding:8px 5px; border-color:#e4e7eb; background:transparent; font-size:13px; font-weight:400; color:#50565f; }
.detail-panel .forecast-table tbody tr:nth-child(even) { background:#fff; }
.detail-panel .forecast-table tbody tr:hover { background:#fafbfc; }
.forecast-candidates { display:flex; align-items:center; justify-content:center; gap:12px; min-height:28px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.forecast-candidates>span { min-width:10px; }
.forecast-result { display:inline-flex; justify-content:center; align-items:center; width:25px; height:25px; background:#f43c32; border-radius:50%; color:#fff; font-size:13px; font-weight:600; }
.forecast-hit { display:inline-block; margin-left:4px; color:#ef4037; font-size:10px; white-space:nowrap; font-weight:500; }
.forecast-candidates>.forecast-hit { margin-left:0; }
.forecast-candidates .matched-number { color:#ef4037; font-weight:700; }
.forecast-pending { color:#b1b6bd; }
.forecast-current .forecast-period-title { background:#fbf1d9; border-color:#eee0b9; }
.forecast-current .forecast-period-title h3 { color:#7b632d; }
.forecast-current .forecast-period-title>span { color:#ab8a44; }
.detail-panel .forecast-current .forecast-table thead th { background:#fdf7e8; border-color:#eee0b9; color:#a18b59; }
.detail-panel .forecast-current .forecast-table tbody tr { background:#fffdf6; }
.detail-panel .forecast-current .forecast-table tbody tr:hover { background:#fff9e9; }
.detail-panel .forecast-current .forecast-table th,.detail-panel .forecast-current .forecast-table td { border-color:#eee0b9; }
.detail-panel .forecast-history-table { min-width:340px; }
.detail-panel .forecast-history-table td { height:36px; padding:8px 5px; border-color:#e4e7eb; font-size:12px; white-space:nowrap; color:#555c65; font-variant-numeric:tabular-nums; }
.detail-panel .forecast-history-table th:first-child { width:34%; }
.detail-panel .forecast-history-table th:nth-child(2),.detail-panel .forecast-history-table th:last-child { width:9%; }
.detail-panel .forecast-history-table tbody tr:nth-child(even) { background:#fafbfc; }
.forecast-history-numbers { display:flex; align-items:center; justify-content:center; gap:15px; color:#6c899c; }
.forecast-history-numbers b { font-size:13px; font-weight:600; }
.forecast-history-numbers.forecast-wide-numbers { display:grid; grid-template-columns:repeat(5,22px); gap:5px; }
.detail-panel .forecast-history-table .forecast-red { color:#ee4038; }
.forecast-history-note { margin:11px 0 0; font-size:11px; color:#a0a5ad; }
.forecast-empty { padding:60px 20px; border:1px solid #e4e7eb; text-align:center; color:#9299a2; }
.forecast-empty h3 { font-size:14px; font-weight:500; }.forecast-empty p{font-size:12px}
@media (max-width:1180px) { .forecast-content{padding:20px 21px 24px}.forecast-layout{gap:12px}.forecast-candidates{gap:8px}.forecast-history-numbers{gap:11px} }
@media (max-width:960px) {
 .forecast-layout{grid-template-columns:1fr;gap:22px}.forecast-history .table-scroll{max-height:330px}.forecast-history-table thead{position:sticky;top:0;z-index:1}.forecast-history-numbers.forecast-wide-numbers{display:flex;flex-wrap:wrap}.forecast-section-heading,.forecast-period-title{padding-inline:14px}.forecast-candidates{gap:15px}
}
@media (max-width:600px) {
 .forecast-content{padding:17px 12px 20px}.forecast-explanation{font-size:11px;margin-bottom:17px}.forecast-layout{gap:20px}.forecast-history .table-scroll{max-height:260px}.detail-panel .forecast-table{min-width:310px}.detail-panel .forecast-history-table{min-width:310px}.forecast-candidates{gap:5px}.forecast-history-numbers{gap:9px}.detail-panel .forecast-table tbody th,.detail-panel .forecast-table td{font-size:12px;height:44px;padding-inline:3px}.forecast-hit{font-size:9px;margin-left:2px}.forecast-candidates>.forecast-hit{font-size:9px}.forecast-period-title h3{font-size:12px}.forecast-result{width:23px;height:23px;font-size:12px}.forecast-period{margin-bottom:15px}
}

/* Individual category tiles keep every filter visibly clickable. */
.category-tabs,.directory-categories {
  flex-wrap:wrap;
  gap:8px;
  overflow:visible;
  padding-bottom:14px;
  margin-bottom:12px;
  border-bottom:1px solid #dfe2e8;
}
.category-tabs button,.directory-categories button {
  min-width:74px;
  min-height:38px;
  padding:9px 17px;
  border:1px solid #dfe2e8;
  border-radius:4px;
  background:#fff;
  color:#59616c;
  font-size:13px;
  line-height:18px;
  transition:background .15s,border-color .15s,color .15s;
}
.category-tabs button:not(.selected):hover,.directory-categories button[aria-pressed="false"]:hover {
  background:#fff5f3;
  border-color:#efaaa5;
  color:#df3028;
}
.category-tabs button.selected,.directory-categories button[aria-pressed="true"] {
  background:var(--red);
  border-color:var(--red);
  color:#fff;
  font-weight:600;
}
.category-tabs button:focus-visible,.directory-categories button:focus-visible {
  outline:2px solid #e7332b;
  outline-offset:3px;
}
.directory-categories { margin-bottom:0; }
@media (max-width:600px) {
  .category-tabs,.directory-categories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding-bottom:13px; }
  .category-tabs button,.directory-categories button { min-width:0; min-height:42px; padding:10px 3px; font-size:12px; }
}

/* A quiet, aligned section header above the category filters. */
.results-section .block-heading {
  min-height:60px;
  padding:14px 18px;
  margin-bottom:12px;
  gap:20px;
  border:1px solid #e1e3e9;
  border-radius:5px;
  background:#fff;
}
.results-heading-title { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.results-heading-title::before { content:""; width:3px; height:19px; border-radius:2px; background:var(--red); }
.results-section .block-heading h2 { font-size:18px; line-height:26px; font-weight:600; letter-spacing:.3px; color:#363b42; }
.results-count { display:inline-flex; align-items:center; gap:4px; min-height:25px; padding:3px 9px; border-radius:4px; background:#f4f5f7; color:#9298a1; font-size:11px; white-space:nowrap; }
.results-count b { font-size:12px; color:#666e79; font-weight:500; font-variant-numeric:tabular-nums; }
.results-section .block-heading>.results-heading-hint { margin-left:auto; color:#939aa4; font-size:12px; }
.results-section .block-heading>a { display:flex; align-items:center; gap:8px; min-height:30px; margin-left:0; padding-left:18px; border-left:1px solid #e9ebef; font-size:12px; color:#666e79; }
.results-section .block-heading>a span { margin:0; font-size:21px; line-height:1; color:#b1b5bd; }
.results-section .block-heading>a:hover,.results-section .block-heading>a:hover span { color:var(--red); }
@media (max-width:600px) {
  .results-section .block-heading { min-height:55px; padding:12px; gap:10px; }
  .results-heading-title { gap:8px; }
  .results-section .block-heading h2 { font-size:16px; line-height:24px; }
  .results-count { padding:3px 6px; font-size:10px; gap:3px; }
  .results-section .block-heading>.results-heading-hint { display:none; }
  .results-section .block-heading>a { margin-left:auto; padding-left:0; border-left:0; font-size:11px; gap:5px; }
}

/* Public portal polish: compact navigation and readable results across views. */
:root { --red:#e5332f; --red-deep:#c92b27; --red-soft:#fff3f1; --ink:#3c424b; --muted:#7b8490; --line:#e3e6eb; --canvas:#f1f2f6; --radius:6px; }
body { background:var(--canvas); }
::selection { background:#ffe0da; color:#97271e; }
button:disabled { cursor:not-allowed; }
input:focus,select:focus { border-color:#e78980; }
.ball,.countdown,.record-numbers,table,.card-issue,.result-issue { font-variant-numeric:tabular-nums; }
.nav-bar { position:sticky; top:0; z-index:30; box-shadow:0 2px 5px #3035410a; }
.nav-bar .active { box-shadow:inset 0 -3px #ffa498; }
.header-search:focus-within { border-color:#e78980; box-shadow:0 0 0 3px #e5332f08; }
.header-favorites { display:flex; align-items:center; gap:6px; padding:7px 0; }
.header-favorites:hover { color:var(--red); }
.home-subtitle { margin:6px 0 0; color:#9399a3; font-size:12px; font-weight:400; letter-spacing:0; }
.home-intro { margin-bottom:18px; }
.hot-strip { border-radius:6px; overflow:hidden; border:1px solid #e1e4ea; }
.hot-strip>a { border-top:0; border-bottom:0; border-left:0; transition:background .15s,color .15s; }
.hot-strip>a:last-child { border-right:0; }
.hot-strip>a:hover { transform:none; background:#fff6f3; }
.draw-card { border:1px solid #e4e6eb; box-shadow:0 2px 3px #31364105; transition:border-color .15s,box-shadow .15s; }
.draw-card:hover,.draw-card:focus-within { border-color:#efb0a9; box-shadow:0 3px 9px #6131290b; }
.draw-card .card-heading-line { padding-right:16px; }
.draw-card .card-issue { color:#92969e; font-size:11px; }
.draw-card .card-count { color:#91969f; }
.draw-card .star { width:30px; height:30px; font-size:22px; border-radius:4px; }
.draw-card .star:hover { background:#fff4e4; color:#b78738; }
.draw-card .mini-stats th { background:#f7f8fa; color:#69717b; font-size:12px; }
.draw-card .mini-stats td { color:#4e555f; }
.draw-card .mini-stats th,.draw-card .mini-stats td { border-color:#e4e6eb; }
.count-pending { display:inline-block; font-size:12px; color:#d98632; }
.page-heading { padding:22px 25px; margin-bottom:16px; background:#fff; border:1px solid var(--line); border-radius:6px; }
.page-heading h1 { font-size:23px; color:#414751; }
.page-heading p { color:#8a919b; font-size:12px; line-height:1.8; }
.page-count { background:#f5f6f8; color:#7c8590; border:1px solid #eceef2; }
.breadcrumb { margin-bottom:13px; font-size:12px; color:#949ba5; }
.breadcrumb strong { font-weight:500; color:#58616e; }
.breadcrumb a { color:#727b86; }
.directory { padding:20px 24px 8px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.directory-tools { padding-bottom:16px; border-bottom:1px solid #eef0f3; margin-bottom:16px; }
.directory-search { max-width:440px; border-color:#e1e4eb; background:#fafbfc; border-radius:5px; }
.directory-search:focus-within { border-color:#e78980; }
.directory-categories { border-bottom:0; padding-bottom:14px; }
.directory-categories button { min-width:68px; padding:8px 13px; }
.catalog-row { padding:23px 0; }
.catalog-row h3 { font-size:15px; color:#484e58; }
.catalog-row h3:before,.article-list h3 { border-color:var(--red); }
.catalog-row h3:before { background:var(--red); }
.catalog-row a { border-radius:5px; background:#fcfcfd; min-height:79px; }
.catalog-row a:hover { background:#fff5f3; border-color:#efb0a9; }
.tile-label strong { color:#4c535e; font-weight:500; }
.tile-label small { color:#959ca6; font-size:10px; letter-spacing:.3px; }
.catalog-title { padding:20px 24px; }.catalog-title button:hover{color:var(--red);background:var(--red-soft)}
.catalog-menu { border-radius:8px; background:#f8f9fb; }
.catalog-menu .catalog-row a { background:#fff; }
.detail-context { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 0 13px; }
.detail-context .breadcrumb { margin:0; gap:9px; }
.detail-context-actions { display:flex; gap:7px; flex-shrink:0; }
.detail-context-actions button { padding:6px 10px; min-height:32px; font-size:11px; border-color:#e0e3e9; background:#fff; border-radius:4px; }
.detail-context-actions button:hover { color:var(--red); border-color:#efb0a9; }
.detail-context-actions button[aria-pressed="true"] { color:#ac7b29; background:#fffaf0; border-color:#eaddbd; }
.detail-nav-group h2 { font-size:15px; margin-bottom:15px; }
.detail-nav-links { gap:6px; margin:0; }
.detail-nav-links a { display:flex; align-items:center; justify-content:center; padding:7px 8px; min-height:31px; border:1px solid #eceef2; border-radius:4px; background:#f8f9fb; color:#66707d; font-size:12px; line-height:1.3; }
.detail-nav-links a:hover { border-color:#efb0a9; background:#fff5f3; color:#d4382e; }
.detail-nav-links a.active { margin:0; border:1px solid var(--red); border-radius:4px; background:var(--red); color:#fff; }
.detail-nav-surface { padding:19px 17px 12px; }
.detail-nav-extra { padding-top:7px; }
.detail-nav-toggle { margin-top:7px; padding-top:4px; min-height:23px; }
@media (min-width:961px) {
 .detail-nav-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
 .detail-nav-group:nth-child(n+3) .detail-nav-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .detail-nav-links a { font-size:12px; padding-inline:2px; }
 .detail-nav-group,.detail-nav-surface { min-height:177px; }
 .detail-nav-expandable .detail-nav-surface { min-height:179px; }
}
.new-results-notice { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 16px; margin-bottom:14px; border:1px solid #f2d7c1; border-radius:5px; background:#fffaf0; color:#947444; font-size:12px; }
.new-results-notice button { flex-shrink:0; padding:6px 11px; color:#9c6e2f; background:#fff; border-color:#eedcc5; font-size:12px; }
.detail-page .query-controls { margin:0; padding:21px 24px 16px; background:#fafbfc; gap:12px; }
.detail-page .query-controls label { gap:6px; color:#757e89; }
.detail-page .query-controls input,.detail-page .query-controls select { border-color:#dfe3e9; border-radius:4px; }
.detail-page .query-controls button { border-radius:4px; }
.detail-page .analysis-controls { background:#fafbfc; padding:0 24px 17px; border-bottom:1px solid #e9ecf0; margin-bottom:17px; }
.detail-page .analysis-controls>span { color:#9098a3; }
.detail-page .analysis-controls b { color:#67727f; font-weight:500; }
.detail-page .analysis-controls select { background:#fff; border-radius:4px; }
.detail-panel>.table-scroll { margin:0 24px 20px; max-width:calc(100% - 48px); border-radius:3px; }
.detail-page .history-table th { color:#6c7581; font-size:12px; }
.detail-page .history-table td { color:#505a67; padding:13px 9px; font-size:13px; }
.detail-page .history-table .record-time { display:table-cell; min-width:145px; }
.record-time span,.record-time time { display:block; }
.record-time time { margin-top:4px; color:#a0a7b1; }
.detail-page .history-table td.record-red { color:#e44238; }
.detail-page .table-scroll:focus-visible,.detail-page .chart-scroll:focus-visible { outline-offset:-2px; }
.detail-page .history-table,.detail-page .trend-table { isolation:isolate; }
.detail-page .history-table tr>:first-child,.detail-page .trend-table tr>:first-child { position:sticky; left:0; z-index:1; background:#fff; box-shadow:1px 0 #e4e7ed; }
.detail-page .history-table thead tr>:first-child,.detail-page .trend-table thead tr>:first-child { background:#f6f7f9; z-index:2; }
.detail-panel .table-scroll:has(.history-table),.detail-panel .table-scroll:has(.trend-table) { max-height:760px; }
.detail-page .history-table thead,.detail-page .trend-table thead { position:sticky; top:0; z-index:3; }
.detail-page .trend-table th { background:#f6f7f9; color:#78818c; }
.detail-page .trend-table td { color:#5f6b78; }
.trend-table b { background:var(--red); font-weight:500; }
.trend-table td>span { color:#a7afb9; }
.frequency-chart { margin-inline:24px; padding-inline:10px; border-bottom:1px solid #edf0f4; }
.frequency-chart i { background:#db6860; border-radius:3px 3px 0 0; }
.frequency-chart span { color:#929aa5; }.frequency-chart b{color:#53606f;font-variant-numeric:tabular-nums}
.road-section { padding:16px; margin:16px 24px; border:1px solid #e4e7ed; border-radius:5px; background:#fff; }
.road-section h3 { margin-bottom:13px; color:#697483; }
.road .red { color:#e3453c; background:#fff7f5; }.road .blue{color:#3489bd;background:#f4faff}
.pagination { padding:17px 24px; border-top:1px solid #edf0f4; background:#fafbfc; color:#88919d; }
.pagination button { min-height:37px; border-radius:4px; }
.pagination button:not(:disabled):hover { border-color:#efb0a9; color:var(--red); }
.article-body { padding:26px; color:#636d7a; line-height:2.1; }
.article-list h3 { color:#48515d; font-size:16px; }
.article-list a { font-size:13px; color:#616b78; }.article-list a:hover{color:var(--red)}
.empty h3 { color:#667281; font-size:16px; font-weight:500; }
.empty-symbol { color:#cfb07d; }
.source-warning { background:#fff9ed; border-color:#f0dfbf; color:#9b7d48; }
footer { background:#fff; border-top:1px solid #e1e5eb; margin-top:30px; }
.footer-columns { padding:28px 0; }.footer-columns h3{font-size:13px;color:#646d79;font-weight:500}.footer-columns p,.footer-columns a{font-size:12px;line-height:1.9;color:#8b939e}.footer-columns a:hover{color:var(--red)}
.copyright { color:#a0a7b1; font-size:11px; }
@media (max-width:960px) {
 .detail-context { align-items:flex-start; }.detail-context .breadcrumb{max-width:65%;font-size:11px;gap:5px}
 .detail-nav-group,.detail-nav-surface { min-height:165px; }.detail-nav-expandable .detail-nav-surface{min-height:167px}
 .detail-nav-links a { padding:7px 9px; font-size:12px; }
 .detail-page .query-controls { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px 9px; }
 .detail-page .query-controls label{grid-column:span 2}.detail-page .query-controls button{grid-column:span 2}.detail-page .query-controls input,.detail-page .query-controls select{width:100%}
 .directory{padding:18px}.page-heading{padding:21px}
}
@media (max-width:600px) {
 .masthead{gap:12px}.header-favorites{display:none}.brand{font-size:25px}.brand small{letter-spacing:2px}
 .home-subtitle{font-size:11px;margin-top:4px}.home-intro{align-items:center}.intro-tools{padding-top:0}
 .draw-card .star{width:34px;height:34px}.draw-card .card-heading-line{padding-right:24px}.draw-card .card-issue{font-size:11px}.draw-card .mini-stats th{font-size:12px}.draw-card .mini-stats td{font-size:13px}
 .page-heading{padding:18px 15px;gap:10px;margin-bottom:13px}.page-heading h1{font-size:21px}.page-heading p{font-size:11px}.page-count{font-size:10px;padding:5px 7px}
 .directory{padding:15px 12px 3px}.directory-tools{margin-bottom:12px;padding-bottom:12px}.directory-search{max-width:none}.directory-categories button{min-width:0;padding:9px 1px;min-height:41px;font-size:11px}
 .catalog-row{padding:19px 0}.catalog-row>div{gap:8px}.catalog-row a{padding:12px 8px;gap:7px;min-height:75px}.catalog-row .game-logo{width:33px;height:33px}.tile-label strong{font-size:12px}.tile-label small{font-size:9px}
 .detail-context{flex-wrap:wrap;gap:10px;margin-bottom:12px}.detail-context .breadcrumb{max-width:100%;width:100%;font-size:11px;gap:6px}.detail-context-actions{width:100%;justify-content:flex-end}.detail-context-actions button{font-size:11px;min-height:34px;padding:6px 11px}
 .detail-mobile-nav>div{gap:6px;padding:8px}.detail-mobile-nav a{background:#f7f8fa;border:1px solid #e8ebf0;border-radius:4px;min-height:38px;padding:9px 2px;font-size:11px}.detail-mobile-nav a.active{background:var(--red);border-color:var(--red);color:#fff}
 .detail-page .query-controls{padding:18px 13px 14px}.detail-page .query-controls label{grid-column:span 3}.detail-page .query-controls label:nth-child(3){grid-column:1/-1}.detail-page .query-controls button{grid-column:span 2;grid-row:3;min-height:42px}.detail-page .query-controls input,.detail-page .query-controls select{font-size:16px;height:43px}
 .detail-page .analysis-controls{padding:0 13px 15px;gap:10px}.detail-page .analysis-controls>span{font-size:11px;line-height:1.8}.detail-page .analysis-controls select{font-size:14px;min-height:40px}
 .detail-panel>.table-scroll{margin:0 12px 17px;max-width:calc(100% - 24px)}.detail-page .history-table .record-time{min-width:125px;font-size:11px}.record-time time{font-size:10px}
 .detail-panel .table-scroll:has(.history-table),.detail-panel .table-scroll:has(.trend-table){max-height:620px}.detail-page .history-table td{font-size:12px;padding:12px 8px}
 .road-section{margin:14px 12px;padding:12px}.frequency-chart{margin-inline:13px}.pagination{padding:15px 13px}.article-body{padding:20px 17px;font-size:13px}.new-results-notice{padding:10px 12px;font-size:11px;align-items:flex-start}.new-results-notice button{font-size:11px;min-height:34px}
 .forecast-explanation{color:#858d97}.footer-columns{gap:20px;padding:23px 0}.footer-columns h3{font-size:12px}.footer-columns p,.footer-columns a{font-size:11px}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important} }
.detail-page .record-time>span { display:block; margin-right:0; }
.detail-page .history-table tr>:first-child { width:165px; }
main h1,main h2,.query-controls,.forecast-period { scroll-margin-top:70px; }
@media (max-width:600px) {
 .detail-page .history-table { min-width:680px; }
 .detail-page .history-table tr>:first-child { width:125px; }
 .detail-page .record-numbers { gap:17px; }
 .detail-page .history-table .record-time { padding-inline:7px; }
}

/* Join the hall heading and its quick-entry tiles into a single section. */
.home-intro {
  min-height:70px;
  margin:0;
  padding:18px 20px;
  gap:16px;
  border:1px solid #e1e4ea;
  border-bottom:0;
  border-radius:6px 6px 0 0;
  background:#fff;
}
.hall-heading { display:flex; align-items:center; gap:16px; min-width:0; }
.home-intro h1 { display:flex; align-items:center; gap:11px; font-size:20px; line-height:28px; font-weight:600; letter-spacing:.3px; color:#383f49; white-space:nowrap; }
.home-intro h1::before { content:""; width:3px; height:20px; border-radius:2px; background:var(--red); }
.home-intro .home-subtitle { margin:0; padding-left:16px; border-left:1px solid #e7e9ee; color:#949ba5; font-size:12px; white-space:nowrap; }
.home-intro .intro-tools { display:flex; align-items:center; gap:8px; padding:0; font-size:11px; }
.hall-count { display:inline-flex; align-items:baseline; gap:4px; padding:4px 8px; background:#f6f7f9; border-radius:4px; color:#939aa4; white-space:nowrap; }
.home-intro .hall-count b { color:#6a7380; font-size:13px; font-weight:500; }
.home-intro .intro-tools>a { display:flex; align-items:center; gap:7px; border:0; margin-left:8px; padding:4px 0 4px 8px; color:#717a86; white-space:nowrap; }
.home-intro .intro-tools>a span { margin:0; font-size:20px; line-height:1; color:#a5acb5; }
.home-intro .intro-tools>a:hover { color:var(--red); }
.home-intro+.hot-section .hot-strip { border-radius:0 0 6px 6px; border-top-color:#edf0f4; }
@media (max-width:760px) {
 .home-intro{padding:15px;min-height:75px;gap:10px}
 .hall-heading{display:block}.home-intro h1{font-size:19px;gap:9px;line-height:26px}.home-intro h1::before{height:18px}
 .home-intro .home-subtitle{margin-top:4px;padding-left:12px;border:0;font-size:11px}
 .home-intro .hall-group-count{display:none}.home-intro .intro-tools{gap:3px}.home-intro .intro-tools>a{font-size:11px;margin-left:3px;padding-left:4px}
}
@media (max-width:359px) {
 .home-intro{padding:13px 12px}.home-intro h1{font-size:18px}.home-intro .hall-count{display:none}.home-intro .intro-tools>a{padding:8px 0;font-size:11px}
}

/* Shared location bar: real parent links and a distinct current location. */
.breadcrumb {
  display:block;
  margin:0 0 13px;
  padding:10px 15px;
  min-height:43px;
  background:#fff;
  border:1px solid #e2e5eb;
  border-radius:5px;
  font-size:12px;
  line-height:22px;
}
.breadcrumb ol { display:flex; align-items:center; flex-wrap:wrap; gap:4px 0; list-style:none; margin:0; padding:0; }
.breadcrumb li { display:flex; align-items:center; min-width:0; }
.breadcrumb li+li::before { content:""; width:5px; height:5px; margin:0 13px; border-top:1px solid #b7bec7; border-right:1px solid #b7bec7; transform:rotate(45deg); flex-shrink:0; }
.breadcrumb li a { display:inline-flex; align-items:center; gap:7px; color:#7f8895; border-radius:3px; }
.breadcrumb li a:hover { color:var(--red); }
.breadcrumb li>span { color:#8b939e; overflow-wrap:anywhere; }
.breadcrumb li>[aria-current="page"] { color:#454f5d; font-weight:500; }
.breadcrumb-home svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.detail-context { padding:8px 13px; background:#fff; border:1px solid #e2e5eb; border-radius:5px; min-height:49px; }
.detail-context .breadcrumb { max-width:none; flex:1; min-width:0; min-height:0; padding:0; border:0; border-radius:0; background:none; margin:0; }
.detail-context-actions button { background:#f9fafb; }
@media(max-width:600px) {
 .breadcrumb{padding:9px 12px;min-height:41px;font-size:11px;margin-bottom:12px}
 .breadcrumb li+li::before{margin-inline:10px;width:4px;height:4px}.breadcrumb-home svg{width:14px;height:14px}
 .detail-context{padding:11px 12px;gap:9px}.detail-context .breadcrumb{flex-basis:100%;font-size:11px;line-height:22px}.detail-context-actions{border-top:1px solid #edf0f4;padding-top:9px}
}

/* Selection only changes color; link dimensions stay identical. */
.detail-nav-links a,.detail-nav-links a.active {
  white-space:nowrap;
  min-width:0;
  margin:0;
  font-weight:400;
  border-width:1px;
  border-style:solid;
  line-height:17px;
}
.detail-nav-links a:last-child { border-right-width:1px; border-right-style:solid; }
@media (min-width:961px) and (max-width:1180px) {
 .detail-nav-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .detail-nav-group,.detail-nav-surface { min-height:211px; }
 .detail-nav-expandable .detail-nav-surface { min-height:213px; }
}
.detail-nav-links a,.detail-nav-links a.active { padding:7px 8px; }
@media (min-width:961px) { .detail-nav-links a,.detail-nav-links a.active { padding:7px 2px; } }
@media (min-width:601px) and (max-width:960px) { .detail-nav-links a,.detail-nav-links a.active { padding:7px 9px; } }
.detail-nav-links a:last-child { border-right-color:#eceef2; }
.detail-nav-links a:last-child:hover { border-right-color:#efb0a9; }
.detail-nav-links a.active:last-child { border-right-color:var(--red); }
.detail-top.without-live { grid-template-columns:minmax(0,1fr); }
.site-notice { display:flex; align-items:baseline; gap:12px; margin-bottom:13px; padding:12px 16px; border:1px solid #f0dfbf; background:#fffaf0; border-radius:5px; font-size:12px; color:#8b7552; }
.site-notice strong{flex-shrink:0;color:#bd7938;font-weight:500}.site-notice span{overflow-wrap:anywhere;white-space:pre-wrap}

.overview-panels.without-articles{grid-template-columns:minmax(0,1fr)}

.simulation-badge{display:inline-block;font-size:10px;line-height:1.5;color:#a16230;background:#fff5e8;border:1px solid #f1dfc5;padding:1px 4px;border-radius:3px;margin-left:6px;vertical-align:middle;font-weight:500}