:root{--teal:#008b8d;--blue:#12629b;--line:#c9dedf;--red:#e00016}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:12px}body{margin:0;background:#f3f3f3;color:#222;font-family:Arial,"Microsoft YaHei","PingFang SC",sans-serif;font-size:14px}a{color:inherit}.wrap{max-width:760px;margin:0 auto;background:#fff;border-left:1px solid #ddd;border-right:1px solid #ddd;padding:8px}.masthead{display:flex;align-items:center;justify-content:center;gap:14px;min-height:100px;background:linear-gradient(125deg,#004579,#1479ba 58%,#003e6d);color:#fff;border:2px solid #fff;outline:1px solid #85b6d5;text-align:center}.masthead h1{font-size:32px;margin:0 0 8px;font-weight:900;letter-spacing:2px;text-shadow:2px 2px #00315b}.masthead p{margin:0;font-size:13px;color:#deefff}.brand-mark{font-size:38px;font-weight:900;background:white;color:#1274b0;border:4px solid #bde8ff;border-radius:50%;width:66px;height:66px;display:grid;place-items:center}.main-nav{display:grid;grid-template-columns:repeat(4,1fr);margin:8px 0 6px;background:var(--teal);border-bottom:3px solid #00565b}.main-nav a{padding:12px 2px;text-align:center;color:white;font-weight:bold;text-decoration:none;border-right:1px solid #63c2c1}.main-nav a:hover{background:#006669}.notice{display:flex;gap:12px;align-items:center;padding:10px;background:#fff9cd;border:1px solid #e8db9a;line-height:1.6;margin-bottom:8px}.notice strong{color:#db0013;white-space:nowrap}.panel{border:1px solid var(--line);margin-bottom:10px;scroll-margin-top:12px}.section-heading{margin:0;text-align:center;font-size:20px;line-height:1.3;padding:10px 8px;letter-spacing:1px;font-weight:900}.blue-heading{background:linear-gradient(#3587be,#11558b);color:#fff;border-bottom:3px solid #e6cf58}.teal-heading{background:#008b8d;color:#fff;border-bottom:3px solid #bfe9e0}.yellow-heading{background:#fff200;color:#d80000;border-bottom:2px solid #c3b800}.green-heading{background:#00dc24;color:#051b07;border-bottom:2px solid #009c1b}.draw-banner{background:#00ef20;text-align:center;padding:14px 5px;color:#001505;font-size:23px;font-weight:900}.draw-banner strong{display:block;margin-bottom:8px}#countdown{font-size:20px}.draw-meta{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;background:linear-gradient(#fff4a4,#fffde6);font-size:13px;font-weight:bold}.draw-meta a{color:#e00016}.results-slot{padding:12px 8px}.waiting-balls,.row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}.ball{width:64px;height:64px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:26px;font-weight:900;color:white;border:2px solid rgba(0,0,0,.1);box-shadow:inset 0 3px 4px #ffffff88,0 2px 2px #0002;flex-shrink:0}.ball small{font-size:12px;font-weight:normal;margin-top:2px}.red{background:radial-gradient(circle at 30% 20%,#ff8490,#e70019 65%,#a8000d)}.blue{background:radial-gradient(circle at 30% 20%,#80c9ff,#1679d1 65%,#075194)}.green{background:radial-gradient(circle at 30% 20%,#8ae9a1,#00a940 65%,#007427)}.pending{background:radial-gradient(circle at 30% 20%,#fff,#d8e3e7);color:#8a9ba1}.plus{font-size:24px;color:#333}.empty-note{text-align:center;color:#687e83;font-size:13px;margin:14px 0}.draw-footer{text-align:center;color:#e00016;background:#fff7d4;padding:8px;font-size:12px;font-weight:bold}.card{background:#fff;margin:0;padding:12px 8px;border-bottom:1px solid #d8e7e7;border-radius:0}.card:nth-child(even){background:#f0fafa}.meta{margin-bottom:10px;font-weight:bold;font-size:14px;color:#333}.tool-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#9ad8c5;padding:8px}.tool-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#f9fff7;padding:14px 4px;text-decoration:none}.tool-card:hover{background:#fffbd6}.tool-icon{height:66px;width:66px;border-radius:18px;display:grid;place-items:center;font-size:36px;font-weight:900;color:white;margin-bottom:8px;border:3px double white;box-shadow:0 2px 3px #0003}.zodiac-icon{background:#e61622}.color-icon{background:#006cc3}.number-icon{background:#00a845}.guide-icon{background:#b64cad}.tool-title{font-size:15px;font-weight:bold;color:#003688}.tool-desc{font-size:11px;color:#526b71;margin-top:5px}.table-caption{display:flex;justify-content:space-between;background:#e7f5f4;color:#08626a;padding:8px;font-weight:bold;font-size:13px}.pager{display:flex;justify-content:center;align-items:center;gap:15px;padding:14px;background:#eff7f7;border-top:1px solid var(--line)}button{background:#ec8c00;color:white;border:1px solid #d07700;padding:7px 14px;cursor:pointer;border-radius:3px;font-weight:bold}button:hover{background:#c97300}button:disabled{background:#d0d7d7;border-color:#c1caca;cursor:default}.section-intro{margin:0;padding:10px;font-size:12px;background:#fffde6;text-align:center}.color-reference-row{display:flex;border-top:1px solid #d7e3e3}.color-reference-row>strong{width:64px;flex-shrink:0;display:grid;place-items:center;background:#f1f7f7}.red-label{color:#de001b}.blue-label{color:#126fca}.green-label{color:#00892f}.number-list{display:flex;flex-wrap:wrap;gap:6px;padding:10px}.mini-ball{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:bold;color:white}.guide-row{padding:11px 14px;border-bottom:1px solid #cde2db;background:#f3fff0}.guide-row:nth-child(odd){background:#fffde4}.guide-row strong{color:#007a21}.guide-row p,details p{margin:6px 0 0;line-height:1.7}details{padding:12px 14px;border-bottom:1px solid #ddd}summary{cursor:pointer;font-weight:bold;color:#006a80}footer{text-align:center;font-size:12px;color:#587274;padding:18px 5px;border-top:3px solid #008b8d}footer span{padding:0 8px}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #ed8c00;outline-offset:2px}.reveal-ball{animation:ballReveal .6s ease-out}.reveal-number{animation:numberPop .4s ease-out}@keyframes ballReveal{from{transform:translateY(-15px) scale(.6);opacity:0}to{transform:none;opacity:1}}@keyframes numberPop{from{transform:scale(.4)}to{transform:scale(1)}}.pan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(85px,1fr));gap:6px}.pan-item{padding:10px;background:#fffde1;border:1px solid #dec964;text-align:center}.pan-title{font-weight:bold}.pan-value{font-size:22px;color:#e00016;font-weight:bold}.color-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}.color-card{padding:10px 3px;text-align:center;color:white}.color-card span{display:block;font-size:22px}.red-card{background:#e00016}.blue-card{background:#1679d1}.green-card{background:#00a940}.feature-card{display:block;padding:15px;background:#f1fff1;border:1px solid #9ad8c5;text-align:center;text-decoration:none}.feature-title{font-weight:bold}.feature-desc{font-size:12px;color:#587274}@media(max-width:600px){.wrap{padding:4px}.masthead{min-height:84px;gap:8px}.masthead h1{font-size:25px;letter-spacing:0}.brand-mark{width:52px;height:52px;font-size:30px}.masthead p{font-size:11px}.section-heading{font-size:18px}.ball{width:43px;height:43px;font-size:20px}.ball small{font-size:10px}.waiting-balls,.row{gap:4px}.plus{font-size:18px}.tool-icon{width:52px;height:52px;font-size:28px}.tool-title{font-size:12px}.tool-desc{font-size:10px}.draw-banner{font-size:20px}#countdown{font-size:17px}.main-nav a{font-size:13px}.notice{gap:8px;font-size:12px}.draw-meta{font-size:11px}.table-caption{font-size:11px}}@media(max-width:360px){.ball{width:36px;height:36px;font-size:17px}.row,.waiting-balls{gap:3px}.tool-grid{grid-template-columns:repeat(2,1fr)}.masthead h1{font-size:22px}.draw-meta{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}

/* Live draw panel: reference image */
.live-panel { border: 1px solid #a9d0d0; background: #fff; }
.live-panel .live-heading { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 0; padding: 12px 8px; background: linear-gradient(#008f95, #006c76); color: #ffff00; border: 0; font-size: 24px; letter-spacing: 0; }
.live-badge { display: inline-block; padding: 4px 7px; background: #ed1c24; color: #fff; font-size: 15px; line-height: 1.1; font-weight: 900; letter-spacing: 1px; }
.live-panel .draw-banner { background: #39fa00; padding: 14px 5px; color: #000; font-size: 22px; }
.live-panel .draw-banner strong { margin-bottom: 7px; }
.live-panel #countdown { color: #ff002c; font-size: 23px; font-weight: 900; }
.live-panel .draw-meta { background: #fff; padding: 24px 9px 8px; color: #111; font-size: 17px; }
.live-panel .results-slot { padding: 0 8px 28px; }
.live-panel .live-ball-row { gap: 8px; flex-wrap: nowrap; }
.live-ball-item { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; gap: 4px; }
.live-panel .ball { width: 70px; height: 70px; border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd, 0 2px 4px #0003; font-size: 34px; }
.live-panel .ball.pending { background: radial-gradient(circle at 28% 20%, #e5e5e5 0, #bbb 45%, #b5b5b5 100%); color: #fff; text-shadow: 1px 1px 1px #5d7485; }
.live-ball-label { font-size: 16px; color: #111; font-weight: bold; line-height: 1.2; }
.live-panel .plus { margin-bottom: 23px; color: #555; font-size: 28px; font-weight: bold; }
.live-panel .draw-footer { padding: 8px; background: #fff9b0; color: #806118; font-size: 14px; font-weight: normal; }
@media (max-width: 600px) {
 .live-panel .live-heading { font-size: 20px; gap: 12px; }
 .live-panel .draw-banner { font-size: 18px; }
 .live-panel #countdown { font-size: 19px; }
 .live-panel .draw-meta { padding-top: 20px; font-size: 14px; }
 .live-panel .ball { width: 42px; height: 42px; font-size: 25px; }
 .live-panel .live-ball-row { gap: 4px; }
 .live-ball-label { font-size: 12px; }
 .live-panel .plus { font-size: 22px; margin-bottom: 19px; }
}
@media (max-width: 360px) {
 .live-panel .ball { width: 35px; height: 35px; font-size: 22px; }
 .live-panel .live-ball-row { gap: 3px; }
 .live-panel .plus { font-size: 18px; }
}

/* Zodiac list and five-element reference tables */
.reference-panel { background: #fff; border-color: #abd0df; }
.reference-panel .reference-heading { background: linear-gradient(#287eaf, #194b73); color: #fff; padding: 13px 8px; border: 0; font-size: 23px; letter-spacing: 0; }
.zodiac-list { color: #ec0024; padding: 24px 14px; text-align: center; font-size: 22px; font-weight: bold; line-height: 1.5; }
.reference-footer { background: #fff9b0; color: #806118; padding: 8px 12px; text-align: center; font-size: 14px; line-height: 1.6; }
.element-row { display: flex; align-items: stretch; border-bottom: 1px solid #cbdde5; }
.element-row:nth-of-type(even) { background: #f3f9fc; }
.element-label { width: 84px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 4px; border-right: 1px solid #cbdde5; font-size: 30px; }
.element-label small { color: #526b71; font-size: 12px; font-weight: normal; margin-top: 3px; }
.element-0 { color: #bc8200; }
.element-1 { color: #00892f; }
.element-2 { color: #126fca; }
.element-3 { color: #de001b; }
.element-4 { color: #885028; }
.element-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 14px; }
.element-number { font-size: 22px; font-weight: bold; font-variant-numeric: tabular-nums; }
.red-text { color: #de001b; }
.blue-text { color: #126fca; }
.green-text { color: #00892f; }
@media (max-width: 600px) {
 .reference-panel .reference-heading { font-size: 19px; }
 .zodiac-list { font-size: 18px; padding: 20px 12px; }
 .reference-footer { font-size: 12px; }
 .element-label { width: 62px; font-size: 25px; }
 .element-numbers { gap: 8px 11px; padding: 12px 10px; }
 .element-number { font-size: 18px; }
}

/* Match five-element numbers to the wave-colour chart */
#elements-info .element-numbers { gap: 6px; padding: 10px; }
#elements-info .mini-ball { flex-shrink: 0; }

/* Diamond banner below the website header */
.diamond-banner { display: flex; align-items: center; justify-content: space-around; min-height: 76px; margin-top: 8px; padding: 14px 10px; background: #dcf4f4; }
.diamond-tile { display: grid; place-items: center; width: 45px; height: 45px; background: #fff1be; border: 2px solid #f6ac31; outline: 3px solid #fff5d7; transform: rotate(45deg); }
.diamond-tile > span { color: #e21712; font-size: 32px; font-weight: 900; line-height: 1; transform: rotate(-45deg); }
@media (max-width: 600px) {
 .diamond-banner { min-height: 65px; padding: 12px 8px; }
 .diamond-tile { width: 35px; height: 35px; }
 .diamond-tile > span { font-size: 27px; }
}
@media (max-width: 360px) {
 .diamond-tile { width: 30px; height: 30px; }
 .diamond-tile > span { font-size: 23px; }
}

/* Zodiac number reference: website teal, blue and pale yellow theme */
.zodiac-reference-panel .section-heading { color: #ffff00; border-bottom: 0; font-size: 23px; padding: 12px 8px; }
.zodiac-reference-intro { background: #e7f5f4; color: #08626a; padding: 15px 10px; text-align: center; font-size: 19px; line-height: 1.6; }
.zodiac-reference-intro > div { margin-top: 5px; font-size: 16px; font-weight: bold; }
.zodiac-reference-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.zodiac-reference-table tr { background: #fff; }
.zodiac-reference-table tr:nth-child(even) { background: #fffde4; }
.zodiac-reference-table th, .zodiac-reference-table td { padding: 10px 12px; border-bottom: 1px solid #c9dedf; }
.zodiac-reference-table th { width: 16%; color: #00892f; font-size: 19px; text-align: center; }
.zodiac-number-list { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 18px; }
.zodiac-number { font-size: 19px; font-weight: bold; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
 .zodiac-reference-panel .section-heading { font-size: 20px; }
 .zodiac-reference-intro { font-size: 16px; }
 .zodiac-reference-table th { font-size: 17px; }
 .zodiac-number { font-size: 17px; }
 .zodiac-number-list { gap: 8px 12px; }
}

/* Keep result numbers and zodiac labels fully inside each ball */
.result-ball-row { gap: 8px; }
.ball.result-ball { width: 64px; height: 64px; padding: 7px 0; gap: 4px; overflow: hidden; }
.result-ball .ball-num { display: block; margin: 0; padding: 0; font-size: 28px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.result-ball .ball-zodiac { display: block; margin: 0; padding: 0; font-size: 15px; font-weight: bold; line-height: 1; }
.live-panel .ball-num { margin: 0; padding: 0; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
 .result-ball-row { gap: 4px; }
 .ball.result-ball { width: 43px; height: 43px; padding: 4px 0; gap: 3px; }
 .result-ball .ball-num { font-size: 20px; }
 .result-ball .ball-zodiac { font-size: 11px; }
 .live-panel .ball-num { font-size: 25px; }
}
@media (max-width: 360px) {
 .result-ball-row { gap: 3px; }
 .ball.result-ball { width: 36px; height: 36px; padding: 3px 0; gap: 2px; }
 .result-ball .ball-num { font-size: 17px; }
 .result-ball .ball-zodiac { font-size: 10px; }
 .live-panel .ball-num { font-size: 22px; }
}


/* Match all three reference charts to the wave-colour chart */
#colors .section-heading,
#zodiac-info .section-heading,
#elements-info .section-heading {
 background: #fff200; color: #d80000; border-bottom: 2px solid #c3b800;
 padding: 10px 8px; font-size: 20px; font-weight: 900; line-height: 1.3; letter-spacing: 1px;
}
#zodiac-info, #elements-info { border-color: #c9dedf; background: #fff; }
#zodiac-info .zodiac-reference-intro {
 background: #fffde6; color: #222; padding: 10px; font-size: 12px; line-height: 1.6;
}
#zodiac-info .zodiac-reference-intro > div { font-size: 12px; margin-top: 4px; }
#zodiac-info .zodiac-reference-table tr,
#zodiac-info .zodiac-reference-table tr:nth-child(even),
#elements-info .element-row,
#elements-info .element-row:nth-of-type(even) { background: #fff; }
#zodiac-info .zodiac-reference-table th {
 width: 64px; padding: 10px 4px; background: #f1f7f7; color: #08626a;
 font-size: 16px; border-color: #d7e3e3;
}
#zodiac-info .zodiac-reference-table td { padding: 10px; border-color: #d7e3e3; }
#zodiac-info .zodiac-number-list { justify-content: flex-start; gap: 6px; }
#elements-info .element-label {
 width: 64px; background: #f1f7f7; color: #08626a; font-size: 20px;
 padding: 10px 4px; border: 0;
}
#elements-info .element-label small { font-size: 11px; }
#elements-info .element-row { border-color: #d7e3e3; }
#elements-info .element-numbers { gap: 6px; padding: 10px; }
#zodiac-info .mini-ball, #elements-info .mini-ball { flex-shrink: 0; }
#colors .mini-ball, #zodiac-info .mini-ball, #elements-info .mini-ball {
 width: 30px; height: 30px; font-size: 13px; font-weight: bold; line-height: normal; color: #fff;
}
@media (max-width: 600px) {
 #colors .section-heading, #zodiac-info .section-heading, #elements-info .section-heading { font-size: 18px; }
}

/* Record reference archive */
.archive-panel .section-heading { background: linear-gradient(#008f95, #006c76); color: #fff; border: 0; }
.archive-filters { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: #effafa; padding: 12px; }
.archive-filters label { display: flex; align-items: center; gap: 6px; }
.archive-filters select, .archive-filters input { font: inherit; min-height: 34px; padding: 6px 8px; background: #fff; color: #222; border: 1px solid #9fbcc8; border-radius: 0; }
.archive-filters input { width: 145px; max-width: 100%; }
.archive-filters button { border-radius: 0; }
.archive-disclaimer { margin: 0; padding: 8px 12px; background: #fffde6; font-size: 12px; color: #806118; line-height: 1.6; text-align: center; }
.archive-count { padding: 6px 12px; color: #587274; font-size: 12px; }
.archive-record-heading { margin: 0; padding: 6px 10px; background: #d9ffdb; color: #111; border-top: 1px solid #bdd8cb; border-bottom: 1px solid #bdd8cb; text-align: center; font-size: 19px; font-weight: 900; line-height: 1.4; }
.archive-record-content { background: #fff; padding: 10px 12px; text-align: center; }
.archive-line { display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 22px; font-weight: bold; line-height: 1.7; }
.archive-blue { color: #0000ee; }
.archive-red { color: #ef001b; }
.archive-green { color: #00892f; }
.archive-tag, .archive-highlight { display: inline-block; background: #ffff00; color: #ef001b; padding: 0 3px; }
.archive-tag { margin-left: 12px; }
.archive-record-footer { background: #f6c6ff; padding: 5px 10px; text-align: center; font-size: 18px; font-weight: bold; line-height: 1.5; }
@media (max-width: 600px) {
 .archive-filters { justify-content: flex-start; }
 .archive-filters input, .archive-filters select { font-size: 16px; }
 .archive-line { font-size: 17px; }
 .archive-record-heading { font-size: 16px; }
 .archive-record-footer { font-size: 14px; }
}

/* Each calculator shortcut has its own color. */
.element-icon{background:#e49300}.parity-icon{background:#734bc4}.size-icon{background:#009ba8}.tail-icon{background:#d55385}

/* Live and latest results share the same ball shape and label placement. */
.main-nav{grid-template-columns:repeat(5,minmax(0,1fr))}
.live-panel .ball.result-ball{width:64px;height:64px;padding:7px 0;gap:4px;border:2px solid rgba(0,0,0,.1);box-shadow:inset 0 3px 4px #ffffff88,0 2px 2px #0002}
.live-panel .result-ball .ball-num{font-size:28px;line-height:1}
.ball.result-ball.pending,.live-panel .ball.result-ball.pending{background:radial-gradient(circle at 30% 20%,#ededed,#aaa 65%,#777);color:#fff;text-shadow:none}
.live-panel .plus{margin-bottom:0}
@media(max-width:600px){.live-panel .ball.result-ball{width:43px;height:43px;padding:4px 0;gap:3px}.live-panel .result-ball .ball-num{font-size:20px}.main-nav a{font-size:12px}}
@media(max-width:360px){.live-panel .ball.result-ball{width:36px;height:36px;padding:3px 0;gap:2px}.live-panel .result-ball .ball-num{font-size:17px}.main-nav a{font-size:11px}}

.pager button[hidden]{display:none}

/* Compact header and latest results while scrolling. */
html{scroll-padding-top:var(--scroll-summary-height,124px)}
.panel{scroll-margin-top:0}
.scroll-summary[hidden],.back-to-top[hidden]{display:none}
.scroll-summary{position:fixed;top:0;left:50%;transform:translateX(-50%);width:min(100%,760px);z-index:1000;background:#fff;box-shadow:0 3px 12px #0003;border-bottom:2px solid #008b8d}
.scroll-summary-header{display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(125deg,#004579,#1479ba);color:white;padding:6px 12px;font-size:12px;line-height:20px}
.scroll-summary-header a{text-decoration:none}.scroll-brand{font-size:15px;font-weight:900}
.compact-latest .card{padding:5px 8px;border:0;background:white}
.compact-latest .meta{margin:0 0 3px;font-size:11px;text-align:center}
.compact-latest .result-ball-row{gap:7px;flex-wrap:nowrap}
.compact-latest .ball.result-ball{width:34px;height:34px;padding:3px 0;gap:2px}
.compact-latest .result-ball .ball-num{font-size:15px}
.compact-latest .result-ball .ball-zodiac{font-size:9px}
.compact-latest .plus{font-size:17px}.compact-latest .empty-note{margin:8px;font-size:12px}
.back-to-top{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));z-index:1100;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #fff8;border-radius:50%;background:#087e89;color:white;box-shadow:0 3px 10px #0003}
.back-to-top:hover{background:#005c67}
@media(max-width:360px){.compact-latest .result-ball-row{gap:4px}.compact-latest .ball.result-ball{width:30px;height:30px}.compact-latest .result-ball .ball-num{font-size:14px}.scroll-brand{font-size:13px}}

.tie-icon{background:#b17625}.jin-icon{background:#d3a015}.jucai-icon{background:#4864c7}.guan-icon{background:#cc4655}.liu-icon{background:#278b86}.zhu-icon{background:#7357a6}

.market-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}.market-tab{text-decoration:none;text-align:center;padding:12px 5px;background:#e8eef3;border-radius:8px;font-weight:900;color:#225f7b}.market-tab.active{background:#087c96;color:#fff;box-shadow:inset 0 -3px 0 #075167}.sync-status{font-size:12px;padding:8px;background:#fff8df;color:#725318;line-height:1.5;margin:0 0 8px}.sync-status:empty{display:none}body[data-site="macau"] .main-nav,body[data-site="hk"] .main-nav{grid-template-columns:repeat(4,minmax(0,1fr))}

/* Reel + orbit + 3D landing: only newly published balls receive this scene. */
.reveal-stage{position:relative;isolation:isolate;display:grid;place-items:center;width:64px;height:64px;perspective:420px;--reveal-delay:0s}
.reveal-delay-1{--reveal-delay:.13s}.reveal-delay-2{--reveal-delay:.26s}.reveal-delay-3{--reveal-delay:.39s}.reveal-delay-4{--reveal-delay:.52s}.reveal-delay-5{--reveal-delay:.65s}.reveal-delay-6{--reveal-delay:.78s}
.reveal-stage .ball{position:relative;z-index:2}.live-panel .reveal-stage .ball.is-revealing{animation:sphereLaunch 2.15s var(--reveal-delay) both;transform-style:preserve-3d;overflow:hidden}
.reveal-stage .ball-num{position:relative;width:100%;text-align:center;height:1em}
.reel-window{display:none;position:absolute;inset:0;overflow:hidden;height:1em}
.is-revealing .reel-window{display:block;animation:reelFade 1.8s var(--reveal-delay) both}
.reel-track{display:block;animation:reelSpin 1.8s var(--reveal-delay) both;will-change:transform}
.reel-track>span{display:block;height:1em;line-height:1em}
.is-revealing .final-number{display:block;animation:numberLock 1.8s var(--reveal-delay) both}
.is-revealing .ball-zodiac{animation:zodiacLock 1.85s var(--reveal-delay) both}
.reveal-orbit,.reveal-pulse{position:absolute;inset:-7px;border-radius:50%;pointer-events:none;z-index:1;opacity:0}
.reveal-orbit{border:2px solid #ffe290;border-left-color:transparent;border-right-color:transparent;box-shadow:0 0 10px #ffd56788;animation:orbitCharge 2.15s var(--reveal-delay) both}
.reveal-pulse{border:2px solid #72e0ff;animation:revealPulse 2.15s var(--reveal-delay) both}
.reveal-glint{position:absolute;inset:-30%;background:linear-gradient(110deg,transparent 35%,#ffffffa6 49%,transparent 62%);pointer-events:none;animation:glintSweep 2.15s var(--reveal-delay) both}
.reveal-sparks{position:absolute;inset:0;z-index:3;pointer-events:none}.reveal-sparks i{position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;background:#ffde83;box-shadow:0 0 7px #f8b942;opacity:0;--spark-x:38px;--spark-y:0px;animation:sparkBurst 2.15s var(--reveal-delay) both}.reveal-sparks i:nth-child(2){--spark-x:19px;--spark-y:33px}.reveal-sparks i:nth-child(3){--spark-x:-19px;--spark-y:33px}.reveal-sparks i:nth-child(4){--spark-x:-38px;--spark-y:0px}.reveal-sparks i:nth-child(5){--spark-x:-19px;--spark-y:-33px}.reveal-sparks i:nth-child(6){--spark-x:19px;--spark-y:-33px}
.special-reveal .reveal-orbit{border-width:3px;box-shadow:0 0 14px #ffcf5888}.special-reveal .reveal-sparks i{width:6px;height:6px}
.reveal-finished .reveal-orbit,.reveal-finished .reveal-pulse,.reveal-finished .reveal-sparks,.reveal-finished .reveal-glint,.reveal-finished .reel-window{display:none}
@keyframes sphereLaunch{0%{transform:translateY(-12px) rotateY(-170deg) scale(.72);filter:saturate(.3);opacity:0}16%{opacity:1;transform:translateY(0) rotateY(0deg) scale(.98)}36%{transform:translateY(-3px) rotateY(14deg) scale(1)}64%{transform:translateY(-2px) rotateY(-12deg) scale(1)}82%{transform:translateY(0) rotateY(0) scale(1.12);filter:saturate(1.3)}92%{transform:scale(.96)}100%{transform:none;filter:none;opacity:1}}
@keyframes reelSpin{0%{transform:translateY(0);filter:blur(1.4px)}65%{filter:blur(.8px)}90%{filter:blur(0)}100%{transform:translateY(-90%);filter:blur(0)}}
@keyframes reelFade{0%,97%{opacity:1}100%{opacity:0}}
@keyframes numberLock{0%,97%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}
@keyframes zodiacLock{0%,94%{opacity:0;transform:translateY(5px)}100%{opacity:1;transform:none}}
@keyframes orbitCharge{0%{opacity:0;transform:rotate(0deg) scale(.7)}15%{opacity:1}70%{opacity:.8}100%{opacity:0;transform:rotate(540deg) scale(1.18)}}
@keyframes revealPulse{0%,72%{opacity:0;transform:scale(.7)}80%{opacity:.9}100%{opacity:0;transform:scale(1.65)}}
@keyframes glintSweep{0%,75%{transform:translateX(-110%);opacity:0}80%{opacity:1}100%{transform:translateX(110%);opacity:0}}
@keyframes sparkBurst{0%,77%{opacity:0;transform:translate(-50%,-50%) scale(.1)}82%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.2)}}
@media(max-width:600px){.reveal-stage{width:43px;height:43px}.reveal-orbit,.reveal-pulse{inset:-4px}}
@media(max-width:360px){.reveal-stage{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.reveal-stage .reel-window,.reveal-stage .reveal-orbit,.reveal-stage .reveal-pulse,.reveal-stage .reveal-sparks,.reveal-stage .reveal-glint{display:none}.is-revealing .final-number,.is-revealing .ball-zodiac{opacity:1;transform:none}}

/* Transparent drum, chrome spheres and rolling rail scene. */
.lottery-machine[hidden]{display:none}.lottery-machine{margin:8px 10px 18px;background:#0d0c16;border:1px solid #756294;border-radius:10px;overflow:hidden;box-shadow:0 8px 24px #17102622}.lottery-machine canvas{display:block;width:100%;height:auto;aspect-ratio:12/5}.machine-caption{padding:9px 12px;text-align:center;color:#e8dfff;background:#171224;border-top:1px solid #8470a333;font-size:13px;letter-spacing:1px;min-height:34px}
.live-panel .machine-reveal .ball.is-revealing{animation:none;opacity:0;visibility:hidden}.machine-reveal:has(.is-revealing)::after{content:'抽取中';position:absolute;font-size:12px;color:#80748e;text-align:center}.machine-landed .ball{animation:chromeLanding .6s ease-out both}
@keyframes chromeLanding{0%{transform:translateY(-10px) scale(.75);opacity:0}65%{transform:translateY(1px) scale(1.08);opacity:1}100%{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.machine-landed .ball{animation:none}}
.preview-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:16px}#previewBalls{padding:22px 6px}

.draw-replay-controls{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 10px 14px}.draw-replay-controls button[hidden],.draw-replay-controls span[hidden]{display:none}.draw-replay-controls button{background:#225d86;border-color:#17496a;border-radius:6px}.draw-replay-controls button[aria-pressed="true"]{background:#78506d;border-color:#624258}.draw-replay-controls span{font-size:12px;color:#6a5575}