:root{--green:#08c765;--red:#ff272d;--text:#353535}


*{box-sizing:border-box}


html,body{margin:0;min-height:100%;font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;color:var(--text);background:#e9e9e9}


button{font:inherit;color:inherit;cursor:pointer}


.site-shell{width:100%;max-width:496px;min-height:100vh;margin:auto;background:#fff;position:relative;padding-bottom:calc(70px + env(safe-area-inset-bottom));box-shadow:0 0 3px #aaa}


.topbar{height:56px;display:grid;grid-template-columns:110px 1fr 112px;align-items:center;padding:0 18px;border-top:1px solid #ddd}


.topbar>strong{text-align:center;font:400 21px serif}


.backup{justify-self:start;border:0;border-radius:3px;background:#08bd61;color:#fff;font:bold 12px Arial;padding:2px 9px;line-height:13px}


.backup b{display:block;color:#f4ff2b;font:700 12px/13px Arial,sans-serif}
.backup small{display:flex;align-items:center;justify-content:center;gap:2px;color:#fff;font:700 10px/12px "Microsoft YaHei",sans-serif}
.backup-hand{display:block;width:13px;height:13px;flex:0 0 13px;overflow:visible}


.top-actions{display:flex;justify-content:flex-end;gap:10px}


.top-actions span{display:flex;flex-direction:column;text-align:center;font:bold 23px serif;line-height:20px}


.top-actions small{font:13px serif;margin-top:3px;color:#111}


.hero{height:auto;aspect-ratio:480/178;margin:0 9px;background:#fff;position:relative;overflow:hidden}


.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;background:#bcd6e8}


.hero:before{width:112px;height:112px;left:-45px;bottom:-34px}


.hero:after{width:125px;height:125px;right:-58px;top:-25px;background:#c8dce8}


.hero-copy{position:relative;z-index:2;text-align:center;padding:14px 80px 0 48px}


.hero-copy>b{display:block;font-size:27px;color:#ef3b9b;white-space:nowrap;text-shadow:1px 1px #fff}


.hero-copy>strong{display:block;font-size:32px;line-height:38px;color:#05afdc;text-shadow:2px 2px #fff}


.hero-copy>em{display:inline-block;background:#ed0b85;color:#fff;border-radius:22px;padding:0 13px;font:bold 29px Arial;line-height:37px;font-style:normal}


.hero-copy>em span{color:#222;background:#fff;margin-left:5px;font-size:21px}


.hero-copy>div{display:flex;gap:7px;justify-content:center;margin-top:10px}


.hero-copy i{font-style:normal;font-weight:bold;color:#fff;padding:5px 10px;border-radius:18px;background:linear-gradient(#e07cfb,#9024dd);white-space:nowrap}


.hero-copy i:nth-child(2){background:linear-gradient(#3fc7f5,#088ccf)}


.hero-copy i:nth-child(3){background:linear-gradient(#42d490,#08a94f)}


.lottery-machine{position:absolute;right:13px;bottom:26px;z-index:3;transform:rotate(-8deg)}


.lottery-machine span{display:inline-grid;place-items:center;width:27px;height:27px;border-radius:50%;background:linear-gradient(#fff,#e0648e);border:2px solid #eee;color:#fff;font:bold 11px Arial;margin-left:-7px}


.marquee{height:40px;margin:0 9px;display:flex;align-items:center;gap:10px;border-bottom:6px solid #f4f4f4;padding:0 10px}


.marquee span{font-size:13px}


.marquee p{margin:0 0 0 auto;font:14px serif}


.tabs{margin:0 9px;display:grid;grid-template-columns:repeat(3,1fr);height:62px;background:#f6f6f6;overflow:hidden}


.tab{border:0;background:#f7f7f7;font:17px serif;color:#333}


.tab span{display:block;margin-top:3px;font:16px serif;color:#999}


.tab.active{background:var(--green);color:#fff}


.tab.active span{color:#fff}


.tab em{font:10px sans-serif;background:#ff3d4a;color:#fff;border-radius:7px;padding:1px 4px;margin-left:3px}


.live-toggle{display:block;width:130px;height:39px;margin:0 auto -1px;border:0;background:var(--green);color:#fff;clip-path:polygon(0 0,100% 0,82% 100%,18% 100%);position:relative;z-index:2}


.player-wrap{margin:0 19px;background:#111;padding:7px}


.player-wrap video,.player-wrap iframe{display:block;width:100%;aspect-ratio:16/9;border:0;background:#000}


.player-wrap p{color:#ddd;font-size:11px;word-break:break-all;margin:5px}


.sim-stage{aspect-ratio:16/7;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;background:linear-gradient(135deg,#03b85c,#05d574)}


.sim-stage span{font-size:12px;margin-top:6px}


.draw-box{margin:0 19px;border:1px solid var(--green);border-radius:2px;padding:10px 12px 7px}


.draw-meta{display:flex;align-items:center;gap:13px;font:18px serif;white-space:nowrap}


.draw-meta>span:first-child b{color:#0abf62;font-weight:400}


.draw-meta>span:nth-child(2){color:var(--red);font-size:16px}


.draw-meta>span:nth-child(2) b{font-weight:400}


.draw-meta button{border:0;background:none;color:#08ae5b;margin-left:auto;padding:0;font:17px serif}


.balls,.traits{display:grid;grid-template-columns:repeat(8,1fr);align-items:center;gap:5px}


.balls{margin-top:10px}


.ball{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font:bold 28px Arial;color:#555;background:#eee;border:5px solid;box-shadow:inset 0 0 0 2px #fff}


.ball.red{border-color:#ff4a4e}


.ball.blue{border-color:#379de8}


.ball.green{border-color:#24c26b}


.plus{text-align:center;font:24px Arial;color:#999}


.traits{margin-top:4px;text-align:center;font:15px serif}


.next-line{text-align:center;color:red;margin:8px 0 0;font-size:14px}


.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:19px 13px;padding:13px 23px}


.quick-grid button{height:39px;border:0;border-radius:4px;background:#f7f7f7;font:18px serif}


.wide-divider{height:7px;margin:0 9px;background:#eee}


.feature-grid{display:grid;grid-template-columns:repeat(5,1fr);padding:27px 14px 8px}


.feature-grid button{border:0;background:#fff;padding:0;font:16px serif}


.feature-grid span{display:block;margin-top:9px;white-space:nowrap}


.feature{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:auto;color:#fff;font:30px Arial;font-style:normal}


.feature.video{background:#53dfb8}


.feature.books{background:#429dec}


.feature.chart{background:#f89527}


.feature.query{background:#5ed755}


.feature.baby{background:#45afe0}


.bottom-nav{position:fixed;z-index:20;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:496px;height:calc(62px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);overflow:visible;border:1px solid #ddd;background:#fff;box-shadow:0 -2px 5px #aaa3}


.bottom-nav button{border:0;background:#fff;color:#888;padding:3px}


.bottom-nav i{display:block;font:24px serif;line-height:23px}


.bottom-nav span{font-size:12px}


.bottom-nav .active{color:var(--green)}


.bottom-nav button:nth-child(3) i{width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;margin:-24px auto 1px;display:grid;place-items:center;border:4px solid #fff}


.modal{position:fixed;inset:0;z-index:50;background:#f5f5f5;overflow:auto}


.modal-card{width:100%;max-width:496px;margin:auto;background:#fff;min-height:100vh}


.modal-card>header{height:46px;display:grid;grid-template-columns:48px 1fr 48px;align-items:center;border-bottom:1px solid #f1f1f1;text-align:center;background:#fff}


.modal-card>header button{height:46px;border:0;background:#fff;font:300 29px/1 Arial;color:#222;text-align:left;padding:0 0 2px 14px}
.modal-card>header strong{font-size:16px;font-weight:400;color:#222}
.history-tabs{height:45px;display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid #eee;background:#fff}
.history-tabs button{position:relative;border:0;background:#fff;font-size:15px;color:#111}
.history-tabs button.active{color:#05bc60}
.history-tabs button.active:after{content:"";position:absolute;left:50%;bottom:-1px;width:64px;height:2px;background:#05bc60;transform:translateX(-50%)}
.history-toolbar{height:57px;padding:0 25px 0 7px;display:flex;align-items:center;justify-content:space-between;background:#f0f0f0}
.history-toolbar>strong{font-size:18px;font-weight:400;white-space:nowrap}
.history-toolbar>div{display:flex;align-items:center;gap:14px}
.history-toolbar button{min-width:43px;height:27px;padding:0 10px;border:0;border-radius:15px;background:#fff;font-size:12px;color:#333}
.history-toolbar button:last-child{min-width:74px}
.history-toolbar button.active{background:#05bf62;color:#fff}
.history-date-filter{height:48px;padding:7px 12px;display:flex;gap:8px;background:#fafafa;border-bottom:1px solid #eee}
.history-date-filter[hidden]{display:none}
.history-date-filter input{flex:1;min-width:0;padding:0 10px;border:1px solid #ddd;border-radius:4px;background:#fff;font:14px inherit}
.history-date-filter button{width:76px;border:0;border-radius:4px;background:#08c765;color:#fff}


.history-row{padding:17px 4px 6px;border:0;background:#fff}


.history-row-head{height:24px;display:flex;align-items:center;justify-content:space-between;padding:0 3px;margin-bottom:6px}
.history-row-head strong{font-size:18px;font-weight:400;color:#333}


.history-row time{color:#999;font-size:16px;font-weight:400}
.history-result{padding:14px 8px 12px;border:1px solid #07bd60;border-radius:4px;background:#fff}


.history-result .mini-balls{display:grid;grid-template-columns:repeat(6,1fr) min(4vw,20px) 1fr;align-items:center;gap:0}


.mini{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#555;background:#eee;border:3px solid;font:bold 14px Arial}


.mini.red{border-color:#ff4a4e}


.mini.blue{border-color:#379de8}


.mini.green{border-color:#24c26b}


.history-result .mini-balls .plus{font-size:min(5vw,24px);color:#888;text-align:center}
.history-ball-traits{display:grid;grid-template-columns:repeat(6,1fr) min(4vw,20px) 1fr;gap:0;margin-top:6px;color:#333;font-size:min(3vw,15px);text-align:center}
.history-ball-traits span:nth-child(7){grid-column:8}
.history-ball-traits[hidden]{display:none}
.history-empty{padding:50px 0;text-align:center;color:#999}


.more{display:block;margin:18px auto 30px;border:1px solid #ddd;background:#fff;padding:8px 35px;border-radius:5px}


@media(max-width:420px){.topbar{padding:0 10px;grid-template-columns:95px 1fr 100px}


.hero-copy{padding-left:18px;padding-right:60px}


.hero-copy>b{font-size:22px}


.hero-copy>strong{font-size:28px}


.hero-copy i{font-size:12px;padding:4px 7px}


.draw-box{margin:0 10px;padding-left:8px;padding-right:8px}


.draw-meta{gap:7px;font-size:16px}


.draw-meta>span:nth-child(2){font-size:13px}


.draw-meta button{font-size:15px}


.ball{width:44px;height:44px;font-size:23px;border-width:4px}


.quick-grid{padding-left:14px;padding-right:14px;gap:14px 8px}


.quick-grid button{font-size:16px}


.feature{width:52px;height:52px}


.feature-grid span{font-size:14px}


}



/* Source-site fidelity overrides */
.topbar>strong,.marquee p,.tab,.tab span,.draw-meta,.draw-meta button,.traits,.quick-grid a,.feature-grid button{font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif;font-style:normal}

.topbar>strong{font-weight:400}

.backup{display:block;text-align:center;text-decoration:none}

.top-actions{gap:8px}

.top-actions button,.top-actions a{border:0;background:none;padding:0;text-decoration:none;color:#111;display:flex;flex-direction:column;text-align:center;font:bold 23px Arial;line-height:20px}

.top-actions small{font:13px "Microsoft YaHei";margin-top:3px}

.hero{display:block;background:#eaf2f7}

.hero:before,.hero:after{display:none}

.hero img{display:block;width:100%;height:100%;object-fit:contain}

.quick-grid a{height:39px;border:0;border-radius:4px;background:#f7f7f7;font-size:18px;text-decoration:none;display:grid;place-items:center;color:#333}

.tool-modal{position:fixed;inset:0;z-index:60;background:#0007;display:grid;place-items:center;padding:20px}

.tool-modal[hidden]{display:none}

.tool-modal section{width:min(420px,100%);min-height:170px;border-radius:10px;background:#fff;padding:22px;position:relative}

.tool-modal section>button{position:absolute;right:10px;top:6px;border:0;background:none;font-size:28px;color:#999}

.tool-modal h3{text-align:center;margin:5px 0 20px}

.tool-modal input{width:100%;height:40px;border:1px solid #ddd;border-radius:5px;padding:0 12px}

.tool-modal p{line-height:1.8;color:#666}

.tool-modal .tool-links{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

.tool-modal .tool-links a{background:#f4f4f4;border-radius:4px;padding:9px 3px;text-align:center;text-decoration:none;color:#333;font-size:14px}


@media(max-width:420px){.quick-grid a{font-size:16px}

}



.top-actions button,.top-actions a{width:34px;align-items:center}

.top-actions img{width:23px;height:23px;object-fit:contain}

.feature-grid{row-gap:18px}

.feature-grid button{transition:transform .16s ease,opacity .16s ease}

.feature-grid button:active,.quick-grid a:active,.bottom-nav button:active{transform:scale(.94);opacity:.72}

.feature{background:none!important;overflow:visible}

.feature img{display:block;width:100%;height:100%;object-fit:contain}

.tab{transition:background-color .22s ease,color .22s ease}

.live-toggle{transition:filter .2s ease,transform .2s ease}

.live-toggle:active{transform:scale(.97);filter:brightness(.92)}

.ball{animation:ball-pop .32s cubic-bezier(.2,.85,.35,1.25) both}

.ball:nth-of-type(2){animation-delay:.035s}

.ball:nth-of-type(3){animation-delay:.07s}

.ball:nth-of-type(4){animation-delay:.105s}

.ball:nth-of-type(5){animation-delay:.14s}

.ball:nth-of-type(6){animation-delay:.175s}

.ball:nth-of-type(7){animation-delay:.21s}

@keyframes ball-pop{from{opacity:0;transform:translateY(6px) scale(.7)}

to{opacity:1;transform:none}

}


.gallery-section{border-top:7px solid #eee;background:#fff;padding-bottom:26px}

.gallery-context{display:flex;align-items:center;gap:8px;padding:11px 12px 0;font-size:14px;color:#555}
.gallery-context strong{color:#08b95e;font-size:16px}
.gallery-context span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gallery-context em{flex:0 0 auto;margin-left:auto;padding:2px 6px;border-radius:8px;background:#ff3d4a;color:#fff;font-size:10px;font-style:normal}

.year-tabs{display:flex;gap:8px;padding:12px 12px 10px;overflow-x:auto;scrollbar-width:none}

.year-tabs::-webkit-scrollbar{display:none}

.year-tabs button{flex:0 0 auto;border:0;border-radius:4px;background:#07c160;color:#fff;padding:7px 15px;font-size:14px}

.year-tabs button.active{background:#f59f00}

.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:10px;padding:0 12px}

.gallery-item{margin:0;border:1px solid #eee;border-radius:3px;background:#fff;overflow:hidden;box-shadow:0 1px 4px #0000000d;transition:transform .18s ease,box-shadow .18s ease}

.gallery-item:active{transform:scale(.985)}

.gallery-item button{display:block;width:100%;padding:0;border:0;background:#f4f4f4}

.gallery-item img{display:block;width:100%;height:auto;min-height:120px;object-fit:cover}

.picture-frame,.full-picture-frame{position:relative;display:block;container-type:inline-size;overflow:hidden}
.picture-frame img{position:relative;z-index:1}
.embedded-name{position:absolute;z-index:3;top:0;left:0;width:100%;min-height:7cqw;display:flex;align-items:center;justify-content:center;background:#fffffff5;color:#07964e;font-weight:800;font-size:3.8cqw;line-height:1;white-space:nowrap}
.embedded-result{position:absolute;z-index:2;top:8.5cqw;left:15cqw;width:70cqw;min-height:5.6cqw;display:flex;align-items:center;justify-content:center;padding:0 1cqw;background:#fff;color:#e42d25;font-weight:700;font-size:3.15cqw;line-height:1.15;white-space:nowrap}

.gallery-item figcaption{height:34px;padding:7px 8px;overflow:hidden;font-size:14px;text-align:center;text-overflow:ellipsis;white-space:nowrap}

.gallery-loading{grid-column:1/-1;text-align:center;color:#999;padding:30px}

.image-viewer{position:fixed;inset:0;z-index:80;background:#000e;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 10px 30px}

.image-viewer[hidden]{display:none}

.image-viewer>button{position:absolute;top:12px;right:16px;width:38px;height:38px;border:0;border-radius:50%;background:#ffffff26;color:#fff;font-size:28px}

.full-picture-frame{width:min(100%,400px);max-height:82vh}
.image-viewer img{display:block;width:100%;max-height:82vh;object-fit:contain}
.full-picture-frame .embedded-name{font-size:15.2px}
.full-picture-frame .embedded-result{font-size:12.6px}

.image-viewer strong{margin-top:10px;color:#fff;font-weight:400}

.bottom-nav{height:calc(62px + env(safe-area-inset-bottom))}

.bottom-nav button{height:61px}

.bottom-nav i{width:28px;height:28px;margin:0 auto;display:grid;place-items:center}

.bottom-nav i img{display:block;max-width:28px;max-height:28px;object-fit:contain}

.bottom-nav .special{height:78px;margin-top:-16px;justify-content:flex-start}

.bottom-nav .special i{width:50px;height:50px;margin-top:-4px;overflow:hidden;border:5px solid #fff;border-radius:50%;background:#07c160;box-shadow:0 2px 7px #0000002e}

.bottom-nav .special i img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
.bottom-nav .special i .expert-icon{display:block;width:32px;height:32px}

.bottom-nav .special span{margin-top:-1px;white-space:nowrap}

@media(max-width:420px){.top-actions img{width:21px;height:21px}

.feature-grid{padding-left:8px;padding-right:8px}

.gallery-grid{gap:8px;padding:0 9px}

.feature-grid span{font-size:13px}

.history-toolbar{padding-right:10px}

.history-toolbar>strong{font-size:16px}

.history-toolbar>div{gap:6px}

.history-toolbar button{min-width:40px;padding:0 8px}

.history-toolbar button:last-child{min-width:58px}

}

@media(prefers-reduced-motion:reduce){.ball,.feature-grid button,.quick-grid a,.tab{animation:none;transition:none}

}

.hero{position:relative}
.hero img{transition:opacity .24s ease}
.hero img.fade{opacity:.25}
.hero-dots{position:absolute;left:50%;bottom:6px;display:flex;gap:5px;transform:translateX(-50%)}
.hero-dots i{display:block;width:6px;height:6px;border-radius:50%;background:#ffffff80}
.hero-dots i.active{background:#d9d9d9}


/* Original draw-ball artwork and geometry */
.balls{grid-template-columns:repeat(6,1fr) min(4vw,20px) 1fr;gap:0;margin-top:min(3vw,15px)}
.ball{width:min(11.4vw,56.5px);height:min(11.4vw,56.5px);margin:0 auto;border:0;border-radius:0;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:100% 100%;box-shadow:none;color:#666;font-family:"DIN Alternate",Bahnschrift,"Avenir Next Condensed",Arial,sans-serif;font-size:min(5.7vw,28.3px);font-weight:800;line-height:1}
.ball.red{background-image:url('/assets/draw/ball-red.png');background-color:transparent;border:0}
.ball.blue{background-image:url('/assets/draw/ball-blue.png');background-color:transparent;border:0}
.ball.green{background-image:url('/assets/draw/ball-green.png');background-color:transparent;border:0}
.balls .plus{font-size:min(5.7vw,28.3px);font-weight:500;color:#777}
.traits{grid-template-columns:repeat(6,1fr) min(4vw,20px) 1fr;gap:0;margin-top:min(1.4vw,7px);font-size:min(3.15vw,15.6px);color:#333}
.traits span:nth-child(7){grid-column:8}
.mini-balls{display:grid;grid-template-columns:repeat(6,1fr) min(4vw,20px) 1fr;gap:0}
.mini{width:min(11.4vw,56.5px);height:min(11.4vw,56.5px);border:0;border-radius:0;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:100% 100%;color:#666;font-family:"DIN Alternate",Bahnschrift,"Avenir Next Condensed",Arial,sans-serif;font-size:min(5.7vw,28.3px);font-weight:700;line-height:1}
.mini.red{background-image:url('/assets/draw/ball-red.png');border:0}
.mini.blue{background-image:url('/assets/draw/ball-blue.png');border:0}
.mini.green{background-image:url('/assets/draw/ball-green.png');border:0}

/* Exact type scale, announcement motion and centered special tab */
html,body,.topbar>strong,.marquee p,.tab,.tab span,.draw-meta,.draw-meta button,.traits,.quick-grid a,.feature-grid button,.history-tabs,.history-toolbar,.history-row,.bottom-nav{font-family:Avenir,Helvetica,Arial,sans-serif}.topbar>strong{font-size:min(4.65vw,22.6px);font-weight:500}.tab{font-size:min(3.8vw,18.47px);font-weight:900;line-height:1.1}.tab span{margin-top:min(.5vw,2.43px);font-size:min(3vw,14.58px);font-weight:400;line-height:normal}.live-toggle{font-family:Avenir,Helvetica,Arial,sans-serif;font-size:min(3.8vw,18.47px);font-weight:900;line-height:min(7vw,34px)}.draw-meta{font-size:min(3.9vw,19.3px)}.draw-meta>span:nth-child(2){font-size:min(3.55vw,17.6px);font-weight:500}.draw-meta button{font-size:min(3.65vw,18.1px)}.next-line{font-family:Avenir,Helvetica,Arial,sans-serif;font-size:min(3.45vw,17.1px)}.bottom-nav span{font-size:13px}
.marquee{gap:min(1.55vw,8px);height:min(7.2vw,36px);padding:0 min(2.3vw,11px);border-bottom:1px solid #e6e6e6}.marquee .notice-icon{display:inline-flex;flex:0 0 min(4.2vw,21px);width:min(4.2vw,21px);height:min(4.2vw,21px);align-items:center;justify-content:center;color:#e62755}.marquee .notice-icon svg{display:block;width:100%;height:100%;overflow:visible}.marquee .notice-icon path{fill:currentColor}.marquee .notice-icon path+path{fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}.marquee-window{min-width:0;flex:1;overflow:hidden;white-space:nowrap}.marquee-window p{display:inline-block;margin:0;white-space:nowrap;animation:notice-marquee 16s linear infinite}@keyframes notice-marquee{0%{transform:translateX(100%)}to{transform:translateX(-100%)}}
.bottom-nav button{position:relative;display:flex;height:62px;flex-direction:column;align-items:center;justify-content:center;gap:2px}.bottom-nav .special{position:relative;top:-16px;height:78px;margin-top:0;justify-content:flex-start;gap:0;background:transparent}.bottom-nav .special i,.bottom-nav button:nth-child(3) i{width:50px;height:50px;margin:0;overflow:hidden;border:5px solid #fff;border-radius:50%;background:#07c160;box-shadow:0 2px 7px #0000002e}.bottom-nav .special span{margin-top:0;line-height:18px}

/* Three-game overview, following the compact stacked layout of the reference. */
.draw-list{margin:0 9px 8px;background:#fff}
.draw-item{padding:10px 6px 7px;border-bottom:1px dashed #cfcfcf}
.draw-item:last-child{border-bottom:0}
.draw-item .draw-meta{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;font-size:min(4.2vw,20px)}
.draw-item .draw-meta>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draw-item .draw-meta>span b{font-weight:400}
.draw-item .game-countdown{font-size:min(4.1vw,20px);font-weight:500;color:#222;text-align:center}
.draw-item .row-history{justify-self:end;border:0;background:none;padding:2px 0;color:#555;font-size:min(3.8vw,18px)}
.draw-item .balls{margin-top:7px}
.draw-item .ball{width:min(10.7vw,53px);height:min(10.7vw,53px);font-size:min(5.3vw,26px)}
.draw-item .traits{margin-top:1px;font-size:min(3.1vw,15px)}
.draw-next{display:flex;align-items:center;gap:8px;min-height:27px;margin-top:4px;color:#555;font-size:min(3.25vw,16px)}
.draw-next span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.draw-next button{flex:0 0 auto;margin-left:auto;padding:3px 7px;border:0;border-radius:3px;background:#ed9a23;color:#fff;font-size:min(3.1vw,15px)}
.draw-next button:active{filter:brightness(.92)}
.live-toggle{margin-top:0}

@media(max-width:360px){
.draw-list{margin-left:5px;margin-right:5px}
.draw-item{padding-left:3px;padding-right:3px}
.draw-item .draw-meta{gap:3px}
.draw-next{font-size:11px}
}