:root{--tex-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' fill='none' stroke='black' stroke-width='1.4'%3E%3Ccircle cx='40' cy='46' r='26'/%3E%3Ccircle cx='40' cy='46' r='14'/%3E%3Ccircle cx='188' cy='30' r='12'/%3E%3Ccircle cx='236' cy='132' r='34'/%3E%3Ccircle cx='236' cy='132' r='19'/%3E%3Ccircle cx='118' cy='150' r='9'/%3E%3Ccircle cx='70' cy='228' r='20'/%3E%3Ccircle cx='70' cy='228' r='10'/%3E%3Ccircle cx='190' cy='238' r='15'/%3E%3Ccircle cx='150' cy='88' r='4' fill='black' stroke='none'/%3E%3Ccircle cx='18' cy='150' r='3' fill='black' stroke='none'/%3E%3Ccircle cx='262' cy='252' r='3' fill='black' stroke='none'/%3E%3C/svg%3E");--tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' fill='none' stroke='white' stroke-width='1.4'%3E%3Ccircle cx='40' cy='46' r='26'/%3E%3Ccircle cx='40' cy='46' r='14'/%3E%3Ccircle cx='188' cy='30' r='12'/%3E%3Ccircle cx='236' cy='132' r='34'/%3E%3Ccircle cx='236' cy='132' r='19'/%3E%3Ccircle cx='118' cy='150' r='9'/%3E%3Ccircle cx='70' cy='228' r='20'/%3E%3Ccircle cx='70' cy='228' r='10'/%3E%3Ccircle cx='190' cy='238' r='15'/%3E%3Ccircle cx='150' cy='88' r='4' fill='white' stroke='none'/%3E%3Ccircle cx='18' cy='150' r='3' fill='white' stroke='none'/%3E%3Ccircle cx='262' cy='252' r='3' fill='white' stroke='none'/%3E%3C/svg%3E");--brand:#1478bd;--brand-d:#0d5a91;--navy:#0b2545;--bg:#f3f5f8;--ink:#14213d;--muted:#5b6880;--line:#e3e8ef;--r:14px;--shadow:0 1px 2px rgba(16,24,40,.05),0 4px 16px rgba(16,24,40,.06);--bs:46px}
*{box-sizing:border-box}
html{scroll-padding-top:72px;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:15px;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1}
a{color:inherit;text-decoration:none}
button,input{font-family:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
/* header */
.util{background:var(--navy);color:#b8c4d6;font-size:12.5px}
.util .wrap{display:flex;justify-content:flex-end;align-items:center;height:34px;gap:16px}
.util b{color:#fff;font-weight:600}
.util .live{display:inline-flex;align-items:center;gap:7px}
.util .live i{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
.top{background:#fff;border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.logo{display:flex;align-items:center;gap:12px}
.app-icon{display:block;border-radius:22.5%;box-shadow:0 0 0 1px rgba(16,24,40,.08),0 2px 6px rgba(16,24,40,.12)}
.logo .app-icon{width:52px;height:52px}
.logo b{display:block;white-space:nowrap;font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.4px;line-height:1.1}
.logo small{display:block;font-size:12px;color:var(--muted);font-weight:500;margin-top:2px}
.top-r{display:flex;align-items:center;gap:18px}
.top .m-dl{display:none;padding:9px 14px;font-size:13.5px}
.dl-mini{display:flex;align-items:center;gap:12px;padding-left:18px;border-left:1px solid var(--line)}
.dl-mini .qr{padding:3px;border:1px solid var(--line);border-radius:6px}
.dl-mini small{display:block;color:var(--muted);font-size:11.5px;line-height:1.35;max-width:110px}
.nav{background:var(--brand);position:sticky;top:0;z-index:10;box-shadow:0 2px 10px rgba(13,90,145,.25)}
.nav .wrap{display:flex;align-items:stretch;height:52px;overflow-x:auto;scrollbar-width:none}
.nav a{color:rgba(255,255,255,.88);font-weight:600;font-size:15px;padding:0 20px;display:flex;align-items:center;white-space:nowrap;border-bottom:3px solid transparent;border-top:3px solid transparent}
.nav a.on,.nav a:hover{color:#fff;border-bottom-color:#fff;background:rgba(255,255,255,.06)}
.nav .sp{flex:1}
.nav .today{gap:8px;font-size:13px;color:#fff}
.nav .today i{width:7px;height:7px;border-radius:50%;background:#ffd34d}
/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:11px 18px;font-weight:600;font-size:14.5px;border:0;cursor:pointer;white-space:nowrap}
.btn-w{background:#fff;color:var(--ink)}
.btn-o{border:1.5px solid rgba(255,255,255,.55);color:#fff}
.btn-o:hover{background:rgba(255,255,255,.12)}
.btn-p{background:var(--brand);color:#fff}
.btn-p:hover{background:var(--brand-d)}
/* balls: every ball sits in a .bw; Joker / SüperStar / +1 get a tiny caption under the ball */
.balls{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.bw{display:flex;flex-direction:column;align-items:center;gap:3px;width:var(--bs)}
.bw small{font-size:9px;font-weight:600;color:var(--muted);line-height:1;white-space:nowrap;max-width:100%;overflow:hidden;letter-spacing:-.1px}
.bw .abbr,.xin .abbr{display:none}
.ball{width:var(--bs);height:var(--bs);border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:calc(var(--bs) * .37);background:#fff;border:2.5px solid var(--c);color:var(--ink);box-shadow:inset 0 -3px 0 rgba(0,0,0,.05)}
.ball.x{background:var(--xc);border-color:var(--xc);color:#fff}
.sm{--bs:38px}
/* hero carousel */
.hero{margin-top:24px}
.slides{position:relative;border-radius:20px;overflow:hidden;height:350px;box-shadow:0 10px 30px rgba(16,24,40,.14)}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;padding:0 52px;color:#fff;opacity:0;visibility:hidden;transition:opacity .7s,visibility .7s;overflow:hidden}
.slide.on{opacity:1;visibility:visible}
.slide::before{content:"";position:absolute;inset:0;background-image:var(--tex);background-size:280px;opacity:.08;pointer-events:none}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(0,0,0,.18));pointer-events:none}
.slide>*{position:relative;z-index:2}
/* slowly turning light rays behind the visuals */
.slide .rays{position:absolute;z-index:0;right:-260px;top:50%;width:1000px;height:1000px;margin-top:-500px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.10) 0deg 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 25%,transparent 62%);mask:radial-gradient(circle,#000 0,#000 25%,transparent 62%);animation:spin 80s linear infinite}
.slide .glow{position:absolute;z-index:0;right:8%;top:50%;width:420px;height:420px;margin-top:-210px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35),transparent 65%)}
@keyframes spin{to{transform:rotate(360deg)}}
.tw{position:absolute;z-index:1;width:var(--z);height:var(--z);background:radial-gradient(circle,#fff 0,rgba(255,255,255,.6) 30%,transparent 70%);border-radius:50%;animation:twinkle 3s ease-in-out infinite;animation-delay:var(--d);opacity:0}
@keyframes twinkle{50%{opacity:.9;transform:scale(1.3)}}
/* text: staggered entrance whenever the slide becomes active */
/* content is visible by default; the entrance animation only plays on top (backwards fill) */
.slide.on .rise{animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d,0s)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.slide .kicker{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:12.5px;letter-spacing:.8px;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px)}
.slide .kicker i{width:7px;height:7px;border-radius:50%;background:#ffd34d;box-shadow:0 0 10px #ffd34d;animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}
.slide .st{font-size:48px;line-height:1.05;margin:14px 0 10px;font-weight:800;letter-spacing:-1.4px;text-shadow:0 2px 20px rgba(0,0,0,.18)}
.slide p{margin:0 0 22px;font-size:16px;color:rgba(255,255,255,.9);max-width:480px;line-height:1.55}
.slide .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cd{display:flex;gap:8px;margin-bottom:22px}
.cd div{background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18);border-radius:10px;min-width:62px;text-align:center;padding:8px 6px 6px}
.cd b{display:block;font-size:26px;font-weight:700;line-height:1}
.cd small{font-size:10.5px;font-weight:600;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:.5px}
.slide .cd div{background:rgba(255,255,255,.12);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.slide .cd b{font-size:30px}
/* gold, shimmering jackpot that counts up */
.slide .slide-jp{font-size:64px;font-weight:800;letter-spacing:-2px;line-height:1;margin:14px 0 12px;white-space:nowrap;
  background:linear-gradient(100deg,#fff 0%,#fff 35%,#ffe28a 45%,#fff6d6 50%,#ffe28a 55%,#fff 65%,#fff 100%);background-size:250% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 4.5s linear infinite;filter:drop-shadow(0 2px 14px rgba(0,0,0,.2))}
@keyframes shine{from{background-position:120% 0}to{background-position:-130% 0}}
/* glossy 3D lottery balls */
.vis{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.brow{display:flex;align-items:center;justify-content:center}
.gb{--s:72px;position:relative;width:var(--s);height:var(--s);border-radius:50%;flex:none;display:grid;place-items:center;margin:0 -3px;
  background:radial-gradient(circle at 33% 27%,#fff 0,#fff 14%,#eef0f3 38%,#cfd4db 72%,#a9b0ba 100%);
  box-shadow:inset -5px -9px 16px rgba(0,0,0,.16),inset 4px 5px 10px rgba(255,255,255,.8),0 16px 26px rgba(0,0,0,.28);
  transform:translateY(var(--y,0))}
.gb span{width:64%;height:64%;border-radius:50%;display:grid;place-items:center;border:3px solid var(--bc);font-weight:800;font-size:calc(var(--s) * .27);color:#14213d;background:radial-gradient(circle at 40% 35%,#fff,#f1f3f5);letter-spacing:-.5px}
.gb.x{background:radial-gradient(circle at 33% 27%,color-mix(in srgb,var(--xc) 30%,#fff) 0,var(--xc) 45%,color-mix(in srgb,var(--xc) 55%,#000) 100%)}
.gb.x span{border-color:rgba(255,255,255,.85)}
.gb small{position:absolute;left:0;right:0;bottom:-15px;text-align:center;font-size:10px;font-weight:600;color:rgba(255,255,255,.85);white-space:nowrap}
.slide.on .gb{animation:drop .8s cubic-bezier(.25,1.5,.45,1) var(--d) backwards,bob 5s ease-in-out calc(var(--d) + .8s) infinite}
@media (prefers-reduced-motion:reduce){.slide *,.slide{animation:none!important;transition:none!important}}
@keyframes drop{from{opacity:0;transform:translateY(calc(var(--y,0px) - 140px)) scale(.6)}to{opacity:1;transform:translateY(var(--y,0))}}
@keyframes bob{0%,100%{opacity:1;transform:translateY(var(--y,0))}50%{opacity:1;transform:translateY(calc(var(--y,0px) - 8px))}}
.brow .gb{--s:76px}.brow.n8 .gb{--s:64px}
.bgrid{display:grid;grid-template-columns:repeat(6,auto);gap:4px 2px}
.bgrid .gb{--s:46px}
.vis .chip{font-size:13px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:999px;backdrop-filter:blur(4px);margin-top:8px}
.vis .chip b{font-weight:600}
.logo-plate{margin-bottom:22px;background:#fff;border-radius:16px;padding:10px 18px;box-shadow:0 14px 30px rgba(0,0,0,.25);transform:rotate(-4deg)}
.logo-plate img{height:86px;display:block}
.slide .phones{position:relative;height:330px;width:360px}
.slide .phones>img{position:absolute;width:150px;border-radius:24px;border:5px solid #0b0b0b;box-shadow:0 22px 44px rgba(0,0,0,.4)}
.slide .phones>img:nth-child(1){left:20px;top:56px;--r:-7deg;transform:rotate(var(--r))}
.slide .phones>img:nth-child(2){left:170px;top:22px;--r:6deg;transform:rotate(var(--r))}
.slide.on .phones>img{animation:phone 6s ease-in-out infinite}
.slide.on .phones>img:nth-child(2){animation-delay:-3s}
@keyframes phone{50%{transform:rotate(var(--r)) translateY(-10px)}}
.slide .qrcard{position:absolute;right:0;bottom:30px;background:#fff;color:var(--ink);border-radius:14px;padding:10px;box-shadow:0 14px 30px rgba(0,0,0,.3);text-align:center;font-size:11px;font-weight:600;z-index:3}
.slide .qrcard .qr{margin-bottom:6px}
/* progress dots */
.dots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.dots i{width:34px;height:4px;border-radius:4px;background:#cbd5e1;cursor:pointer;overflow:hidden;position:relative}
.dots i b{position:absolute;inset:0;width:0;background:var(--brand);border-radius:4px}
.dots i.on b{animation:fill 7s linear forwards}
.slides:hover~.dots i.on b,.dots.paused i.on b{animation-play-state:paused}
@keyframes fill{to{width:100%}}
.arrow{position:absolute;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;display:grid;place-items:center;cursor:pointer;z-index:5;opacity:0;transition:opacity .2s,background .2s;backdrop-filter:blur(4px)}
.arrow:hover{background:rgba(255,255,255,.3)}
.slides:hover .arrow{opacity:1}
.arrow.prev{left:12px}.arrow.next{right:12px}
/* shortcuts */
.shortcuts{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:24px 0 0}
.sc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 8px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;font-weight:600;font-size:13.5px;text-align:center;transition:border-color .15s,box-shadow .15s}
.sc:hover{border-color:var(--c);box-shadow:var(--shadow)}
.sc .ic{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff)}
/* sections */
.sec{margin-top:44px}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px;gap:16px}
.sec-h h2{margin:0;color:var(--navy);font-size:26px;font-weight:800;letter-spacing:-.6px}
.sec-h p{margin:4px 0 0;color:var(--muted)}
.sec-h a{color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* game cards */
.games{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.game{position:relative;border-radius:16px;color:#fff;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch;overflow:hidden;background:radial-gradient(420px 220px at 0% 0%,rgba(255,255,255,.2),transparent 60%),radial-gradient(380px 240px at 100% 100%,color-mix(in srgb,var(--c) 60%,#000) 0,transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--c) 88%,#fff),var(--c) 50%,color-mix(in srgb,var(--c) 80%,#000))}
.game::before{content:"";position:absolute;inset:0;background-image:var(--tex);background-size:260px;opacity:.08;pointer-events:none}
.game>*{position:relative}
.game .l{display:flex;flex-direction:column;justify-content:center}
.game .logo-w{background:#fff;border-radius:12px;height:76px;display:grid;place-items:center;margin-bottom:14px}
.game .logo-w img{height:70px}
.game .lbl{font-weight:600;letter-spacing:.8px;font-size:11.5px;text-transform:uppercase;text-align:center;color:rgba(255,255,255,.85)}
.jack{background:#fff;color:var(--ink);border-radius:10px;font-weight:800;font-size:25px;text-align:center;padding:9px 8px;margin:6px 0 8px;letter-spacing:-.5px;white-space:nowrap}
.jack span{color:var(--c)}
.game .sub{font-size:12.5px;font-weight:500;text-align:center;color:rgba(255,255,255,.88)}
.game .r{border-left:1px solid rgba(255,255,255,.3);padding-left:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.game .when{font-weight:600;font-size:14px;margin:4px 0 12px}
.game .cd{margin-bottom:16px}
.game .cd div{min-width:52px}
.game .cd b{font-size:21px}
.game .btn{padding:9px 16px;font-size:13.5px}
/* results */
.results{background:#fff;border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;padding:0 12px}
.tab{border:0;background:none;padding:16px 16px 13px;font-weight:600;font-size:14.5px;cursor:pointer;white-space:nowrap;color:var(--muted);border-bottom:3px solid transparent}
.tab.on{color:var(--ink);border-bottom-color:var(--c)}
.res{padding:24px;display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:start}
.res h3{margin:0 0 4px;font-size:20px;font-weight:700;letter-spacing:-.3px}
.res .meta{color:var(--muted);margin-bottom:18px}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:var(--muted)}
.kv.first{margin-top:26px}
.kv b{color:var(--ink);font-weight:600}
.kv b.big{font-size:18px;font-weight:700}
.ptitle{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin:0 0 6px}
.prize-t{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.prize-t th{text-align:left;color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;padding:8px 10px;background:var(--bg)}
.prize-t th:first-child{width:40%}.prize-t th:nth-child(2){width:22%}
.prize-t td{padding:9px 10px;border-bottom:1px solid var(--line)}
.prize-t td:nth-child(2),.prize-t th:nth-child(2),.prize-t td:last-child,.prize-t th:last-child{text-align:right}
.prize-t td:first-child,.prize-t td:last-child{font-weight:600}
.prize-t .muted{color:#a0aabb;font-weight:500}
.acc{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-weight:600;font-size:14px;background:#fffaeb}
.acc summary::-webkit-details-marker{display:none}
.acc summary small{color:var(--muted);font-weight:500;margin-left:8px}
.acc summary .ico{transition:transform .2s;color:var(--muted)}
.acc[open] summary .ico{transform:rotate(180deg)}
.acc .prize-t th{background:#fff}
/* tools: full-width cards, the working part keeps its width, a coloured side panel fills the rest */
.tool{background:#fff;border-radius:18px;box-shadow:var(--shadow);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
.tool+.tool{margin-top:44px}
.tool .work{padding:28px 30px;display:flex;flex-direction:column;min-width:0}
.tool .hd{display:flex;gap:12px;align-items:center}
.tool .hd .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:#e8f3fb;color:var(--brand)}
.tool h3,.tool .h3{margin:0;font-size:21px;font-weight:700;color:var(--navy);letter-spacing:-.3px}
.tool .work>p{margin:10px 0 18px;color:var(--muted);line-height:1.55}
.seg{display:flex;gap:4px;background:var(--bg);padding:4px;border-radius:10px;margin-bottom:18px;flex-wrap:wrap}
.seg button{flex:1;border:0;background:none;border-radius:7px;padding:8px 10px;font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(16,24,40,.12),inset 0 -2px 0 var(--c)}
.side{position:relative;color:#fff;padding:28px 30px;background:radial-gradient(420px 260px at 100% 0%,rgba(255,255,255,.18),transparent 60%),radial-gradient(500px 300px at 0% 100%,color-mix(in srgb,var(--c) 55%,#000) 0,transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--c) 75%,#000),var(--c) 60%,color-mix(in srgb,var(--c) 85%,#fff));display:flex;flex-direction:column;gap:16px;transition:background .3s}
.side::before{content:"";position:absolute;inset:0;background-image:var(--tex);background-size:280px;opacity:.08;pointer-events:none}
.side>*{position:relative}
.side .cap{font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.8)}
.side h4,.side .h4{margin:4px 0 0;font-size:19px;font-weight:700}
.side .balls{--c:rgba(255,255,255,.9)}
.side .ball{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7);color:#fff;box-shadow:none;transition:background .2s,border-color .2s,transform .2s}
.side .ball.match{background:#fff;color:var(--ink);border-color:#fff;transform:scale(1.08);box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.side .ball.x{background:var(--xc);border-color:var(--xc);color:#fff}
.side .bw small{color:rgba(255,255,255,.8)}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.side li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:8px 12px;background:rgba(0,0,0,.14);border-radius:8px}
.side li b{font-weight:600}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.facts div{background:rgba(0,0,0,.16);border-radius:10px;padding:12px 14px}
.facts small{display:block;font-size:11.5px;color:rgba(255,255,255,.75);margin-bottom:4px}
.facts b{font-size:15.5px;font-weight:700}
.side .appcta{margin-top:auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding-top:14px;border-top:1px solid rgba(255,255,255,.2);font-size:13.5px;color:rgba(255,255,255,.9)}
.side .appcta .store-badges{gap:8px}
.inputs{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-start}
.inputs input{width:48px;height:48px;border-radius:10px;border:1.5px solid var(--line);text-align:center;font-weight:700;font-size:17px;color:var(--ink);outline:none;background:#fff;padding:0}
.inputs input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,120,189,.15)}
.inputs.many{display:grid;grid-template-columns:repeat(10,minmax(0,48px));gap:6px}  /* On Numara: 10 boxes on one row */
.inputs.many input{width:100%;height:auto;aspect-ratio:1}
.inputs input.hit{background:#16a34a;color:#fff;border-color:#16a34a}
.inputs input.jk{background:#0f172a;color:#fff;border-color:#0f172a}
/* extra pick (SüperStar / +1): a separate box after a divider; SüperStar gets a tiny caption below it */
.inputs .xin{display:flex;flex-direction:column;align-items:center;gap:4px;margin-left:6px;padding-left:12px;border-left:1px solid var(--line)}
.inputs .xin small{font-size:9.5px;font-weight:600;color:var(--muted);line-height:1;white-space:nowrap}
.inputs .xin input{border-color:#f0b429;background:#fffaeb}
.inputs .xin input.hit{background:#f0b429;border-color:#f0b429;color:#fff}
.verdict{margin-top:18px;border-radius:12px;padding:14px 16px;background:var(--bg);color:var(--muted);min-height:54px;line-height:1.5}
.verdict.win{background:#ecfdf3;color:#065f46}
.verdict b{color:var(--ink)}
.verdict.win b{color:#065f46}
.gen-out{min-height:62px;margin:4px 0 20px}
.gen-out .balls{--bs:54px}
.gen-out .ball{animation:pop .35s ease both}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.tool .foot{margin-top:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tool .note{color:var(--muted);font-size:13px}
/* app banner */
.app{position:relative;display:grid;grid-template-columns:1.2fr 1fr;border-radius:18px;overflow:hidden;background:radial-gradient(600px 360px at 85% 0%,rgba(53,179,236,.45),transparent 60%),linear-gradient(120deg,var(--navy),#123a6b 60%,var(--brand));color:#fff;box-shadow:var(--shadow)}
.app::before{content:"";position:absolute;inset:0;background-image:var(--tex);background-size:300px;opacity:.07;pointer-events:none}
.app>*{position:relative}
.app .l{padding:40px 44px}
.app .h3,.app .h1-app{margin:0 0 10px;font-size:30px;font-weight:800;letter-spacing:-.8px;line-height:1.15}
.app .l>p{margin:0 0 22px;color:#c5d3e6;line-height:1.6;max-width:480px}
.app .feats{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:0 0 28px;padding:0;list-style:none}
.app .feats li{display:flex;gap:10px;align-items:center;font-weight:500;color:#e6edf6}
.app .feats .ico{color:#7cc4f2}
.app .dl{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.app .qr{background:#fff;padding:7px;border-radius:10px}
.app .dl small{display:block;color:#9fb3cc;font-size:12px;margin-top:10px}
.app .r{position:relative;min-height:340px}
.app .r img{position:absolute;width:170px;border-radius:26px;border:5px solid #0b0b0b;box-shadow:0 24px 48px rgba(0,0,0,.4)}
.app .r img:nth-child(1){left:12%;top:58px;transform:rotate(-6deg)}
.app .r img:nth-child(2){left:44%;top:26px;transform:rotate(5deg)}
/* footer */
footer{margin-top:56px;background:var(--navy);color:#a9b7cb;padding:44px 0 28px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px}
footer h4,footer .fh{color:#fff;margin:0 0 12px;font-size:14px}
footer a{display:block;line-height:2.1}
footer a:hover{color:#fff}
footer .logo-f{display:flex;align-items:center;gap:12px;margin-bottom:14px}
footer .logo-f .app-icon{width:48px;height:48px;box-shadow:none}
footer .logo-f b{color:#fff;font-size:18px;font-weight:700}
footer p{line-height:1.6;margin:0}
footer .store-badges{flex-direction:column;align-items:flex-start}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:20px;font-size:12.5px;line-height:1.7;display:flex;gap:14px;align-items:flex-start}
footer .legal .age{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid #a9b7cb;display:grid;place-items:center;font-weight:700;font-size:12px;color:#fff}
@media (max-width:1000px){
  .dl-mini{display:none}
  .shortcuts{grid-template-columns:repeat(3,1fr)}
  .slides{height:520px}.slide{grid-template-columns:minmax(0,1fr);padding:28px;align-content:start;gap:8px}.slide .st{font-size:34px}
  .slide .phones{display:none}.slide .slide-jp{font-size:46px}.vis{height:auto;align-items:flex-start}.slide .rays{right:-500px;top:85%}
  .arrow{display:none}
  .games,.res,.tool{grid-template-columns:1fr}
  .tool .side{order:2}
  .app{grid-template-columns:1fr}.app .r{display:none}.app .l{padding:28px}
  footer .wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .util .hide-m{display:none}
  .nav .wrap{padding:0 6px;justify-content:space-between}.nav a{padding:0 9px;font-size:14px}.nav .today,.nav .sp{display:none}
  .logo small{display:none}.logo .app-icon{width:44px;height:44px}.logo b{font-size:17px}
  .top .store-badges{display:none}.top .m-dl{display:inline-flex}
  .brow .gb{--s:44px}.brow.n8 .gb{--s:38px}.bgrid .gb{--s:34px}.bgrid{grid-template-columns:repeat(8,auto)}.vis .chip{font-size:12px}
  .logo-plate{display:none}.slide p{margin-bottom:16px;font-size:15px}.slide .acts .btn{padding:9px 14px;font-size:13.5px}.vis{margin-top:14px}.slide .slide-jp{font-size:38px}.slide .st{font-size:30px}.slide .cd b{font-size:24px}
  .shortcuts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.sc{font-size:12px;padding:12px 4px}.sc .ic{width:40px;height:40px}
  .game{grid-template-columns:1fr}.game .r{border-left:0;border-top:1px solid rgba(255,255,255,.3);padding:16px 0 0}
  :root{--bs:32px}.sm{--bs:30px}.gen-out .balls{--bs:36px}.balls{gap:5px}.bw small{font-size:8.5px}
  .bw .full,.xin .full{display:none}.bw .abbr,.xin .abbr{display:inline}
  .inputs.many{display:flex}.inputs.many input{width:36px;height:40px;aspect-ratio:auto}
  .inputs{gap:6px}.inputs input{width:36px;height:40px;font-size:15px;border-radius:8px}.inputs .xin{margin-left:0;padding-left:0;border-left:0}.inputs .xin small{font-size:9px}
  .prize-t{font-size:12.5px}.prize-t th,.prize-t td{padding:8px 6px}.prize-t th{font-size:10px}.prize-t th:first-child{width:34%}.prize-t th:nth-child(2){width:24%}
  .tool .work,.tool .side{padding:20px}.facts{grid-template-columns:1fr 1fr}
  .sec-h{flex-direction:column;align-items:flex-start}
  .slides{height:520px}.res{padding:18px}.cd div{min-width:54px}
  footer .wrap{grid-template-columns:1fr}
}

/* store badges + QR (formerly injected by ui.js) */
.store-badges{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.sb{display:inline-flex;transition:transform .15s}
.sb:hover{transform:translateY(-2px)}
.sb img{display:block;width:auto}
.ico{display:block;flex:none}
.qr img,.qr canvas{display:block;border-radius:4px}

/* ============================== inner pages ============================== */
.page-hero{--c:#1478bd;position:relative;overflow:hidden;color:#fff;background:radial-gradient(640px 340px at 88% 40%,color-mix(in srgb,var(--c) 55%,#fff) 0,transparent 62%),linear-gradient(115deg,color-mix(in srgb,var(--c) 50%,#000) 0%,color-mix(in srgb,var(--c) 80%,#000) 45%,var(--c) 100%)}
.page-hero::before{content:"";position:absolute;inset:0;background-image:var(--tex);background-size:280px;opacity:.08;pointer-events:none}
.page-hero::after{content:"";position:absolute;right:-220px;top:50%;width:900px;height:900px;margin-top:-450px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.09) 0deg 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 22%,transparent 60%);mask:radial-gradient(circle,#000 0,#000 22%,transparent 60%)}
.page-hero .wrap{z-index:1}
.page-hero .wrap{position:relative;padding-top:34px;padding-bottom:34px}
.crumbs{font-size:13px;color:rgba(255,255,255,.75);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumbs a:hover{color:#fff}
.page-hero h1{margin:8px 0 6px;font-size:36px;font-weight:800;letter-spacing:-1px}
.page-hero p{margin:0;color:rgba(255,255,255,.85);max-width:680px;line-height:1.55}
.page-hero .hero-logo{position:absolute;right:20px;top:50%;transform:translateY(-50%);background:#fff;border-radius:14px;padding:8px 14px;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.page-hero .hero-logo img{height:64px;display:block}
.panel{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:24px}
.panel h2{margin:0 0 4px;font-size:21px;font-weight:700;color:var(--navy);letter-spacing:-.3px}
.panel>p.lead{margin:4px 0 18px;color:var(--muted);line-height:1.55}
.muted-t{color:var(--muted)}
.seg.wide button{flex:1}
.pill-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.pill-tabs a,.pill-tabs button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-weight:600;font-size:14px;color:var(--muted);cursor:pointer}
.pill-tabs .on{background:var(--c);border-color:var(--c);color:#fff}
.loading{color:var(--muted);padding:30px 0;text-align:center}
.err{background:#fef2f2;color:#991b1b;border-radius:12px;padding:14px 16px}

/* results list */
.draw-list{display:grid;gap:12px}
.draw-row{background:#fff;border-radius:14px;box-shadow:var(--shadow);display:grid;grid-template-columns:6px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:12px 18px;padding:16px 20px 16px 0;transition:transform .15s,box-shadow .15s}
.draw-row .strip{grid-row:1 / span 2}
.draw-row .when{grid-column:2;grid-row:1}
.draw-row .jp{grid-column:3;grid-row:1;white-space:nowrap}
.draw-row .balls{grid-column:2 / span 2;grid-row:2}
.draw-row:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(16,24,40,.1)}
.draw-row .strip{align-self:stretch;background:var(--c);border-radius:0 4px 4px 0}
.draw-row .when b{display:block;font-size:16px}
.draw-row .when small{color:var(--muted)}
.draw-row .jp{text-align:right}
.draw-row .jp small{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.draw-row .jp b{font-size:16px}
.draw-row .jp .won{color:#16a34a}
.more-btn{display:flex;justify-content:center;margin-top:18px}
.btn-line{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--brand);color:var(--brand)}
.archive{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;align-items:end}
.archive .btn{grid-column:1 / -1;justify-content:center}
.archive select{width:100%}
.archive label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted)}
select,.field input,.field textarea{font:500 15px Inter,system-ui,sans-serif;color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;background:#fff;outline:none}
select{appearance:none;-webkit-appearance:none;padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b6880' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center;cursor:pointer}
select:focus,.field input:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(20,120,189,.15)}
.layout-2{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}

/* draw detail */
.dnav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap;margin-right:360px}
.dnav .btn{padding:9px 14px;font-size:14px}
.detail-head{display:flex;gap:18px;align-items:center;margin-bottom:20px}
.detail-head .lg{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 10px}
.detail-head .lg img{height:56px;display:block}
.detail-head h2{margin:0;font-size:24px}
.detail-head .meta{color:var(--muted)}
.share{display:inline-flex;gap:8px;align-items:center}

/* games page */
.game-sec{display:grid;grid-template-columns:300px minmax(0,1fr);gap:0;background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:22px}
.game-sec .side{gap:14px}
.game-sec .side .logo-w{background:#fff;border-radius:14px;padding:10px;display:grid;place-items:center}
.game-sec .side .logo-w img{height:90px}
.game-sec .body{padding:26px 30px}
.game-sec h2{margin:0 0 10px;font-size:24px;color:var(--navy)}
.game-sec ul.rules{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px}
.game-sec ul.rules li{display:flex;gap:10px;line-height:1.55;color:#344054}
.game-sec ul.rules li .ico{color:var(--c);margin-top:2px}
.tiers{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.tiers span{border:1.5px solid color-mix(in srgb,var(--c) 35%,#fff);background:color-mix(in srgb,var(--c) 7%,#fff);color:color-mix(in srgb,var(--c) 85%,#000);border-radius:8px;padding:5px 10px;font-weight:600;font-size:13.5px}
.links-row{display:flex;gap:10px;flex-wrap:wrap}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.day{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:14px;min-height:140px}
.day.today{box-shadow:0 0 0 2px var(--brand),var(--shadow)}
.day .dn{font-weight:700}.day .dd{color:var(--muted);font-size:13px;margin-bottom:10px}
.day .ev{display:block;border-radius:8px;padding:7px 9px;margin-top:6px;font-size:12.5px;font-weight:700;background:color-mix(in srgb,var(--c) 10%,#fff);color:color-mix(in srgb,var(--c) 85%,#000);border-left:3px solid var(--c)}
.day .ev small{display:block;font-weight:500;opacity:.8}
.day .tag{display:inline-block;font-size:10.5px;font-weight:700;background:var(--brand);color:#fff;border-radius:5px;padding:2px 6px;margin-left:6px;vertical-align:1px}

/* statistics */
.stat-top{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.kpi{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:16px 18px}
.kpi small{display:block;color:var(--muted);font-size:12.5px;font-weight:600}
.kpi b{font-size:24px;font-weight:800;letter-spacing:-.5px}
.heat{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.heat .cell{position:relative;border-radius:10px;padding:8px 4px 6px;text-align:center;background:color-mix(in srgb,var(--c) calc(var(--a) * 85%),#fff);color:var(--ink);border:1px solid color-mix(in srgb,var(--c) 18%,#fff);cursor:default}
.heat .cell b{display:block;font-size:16px}
.heat .cell small{display:block;font-size:10.5px;opacity:.8}
.heat .cell.dark{color:#fff}
.heat .cell.sel{outline:3px solid var(--navy);outline-offset:1px}
.legend{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:12px}
.legend i{width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,#fff,var(--c));border:1px solid var(--line)}
.lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
.lists .panel h3{margin:0 0 4px;font-size:16px;display:flex;gap:8px;align-items:center}
.lists .panel h3 .ico{color:var(--c)}
.lists .panel p{margin:0 0 14px;color:var(--muted);font-size:13.5px}
.rank{display:grid;gap:6px}
.rank>div{display:grid;grid-template-columns:40px minmax(0,1fr) 92px;gap:10px;align-items:center;font-size:14px}
.rank .bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden}
.rank .bar i{display:block;height:100%;background:var(--c);border-radius:4px}
.rank .ball{--bs:34px}
.rank>div>span:last-child{text-align:right;color:var(--muted);font-weight:600;white-space:nowrap}
.note-box{display:flex;gap:10px;background:#eff6ff;color:#1e3a5f;border-radius:12px;padding:12px 14px;font-size:13.5px;line-height:1.5;margin-top:20px}
.note-box .ico{color:var(--brand);margin-top:1px}

/* FAQ / contact / app */
.faq{background:#fff;border-radius:14px;box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 20px;font-weight:600;font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ico{transition:transform .2s;color:var(--muted)}
.faq[open] summary .ico{transform:rotate(90deg)}
.faq .a{padding:0 20px 18px;color:#344054;line-height:1.65}
.faq .a ul{margin:6px 0;padding-left:20px}
.faq-group{margin:28px 0 12px;font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-weight:600;font-size:13.5px;color:var(--muted)}
.field textarea{min-height:140px;resize:vertical}
.contact-card{display:flex;gap:14px;align-items:center;padding:16px;border-radius:12px;background:var(--bg);margin-bottom:12px}
.contact-card .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:#e8f3fb;color:var(--brand)}
.contact-card b{display:block}
.feat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.feat-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:22px}
.feat-card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);margin-bottom:14px}
.feat-card h3{margin:0 0 6px;font-size:17px}
.feat-card p{margin:0;color:var(--muted);line-height:1.55;font-size:14.5px}
.shots{display:flex;gap:18px;overflow-x:auto;padding:6px max(20px,calc((100% - 1160px) / 2)) 18px;scroll-padding-left:max(20px,calc((100% - 1160px) / 2));scroll-snap-type:x mandatory;scrollbar-width:thin}
.shots.fits{justify-content:center;padding-left:20px;padding-right:20px}
.shots img{width:200px;flex:none;border-radius:26px;border:5px solid #0b0b0b;box-shadow:0 12px 30px rgba(0,0,0,.18);scroll-snap-align:start}
.reviews{display:flex;gap:16px;overflow-x:auto;padding:4px max(20px,calc((100% - 1160px) / 2)) 18px;scroll-padding-left:max(20px,calc((100% - 1160px) / 2));scroll-snap-type:x mandatory;scrollbar-width:thin;-webkit-mask:linear-gradient(90deg,#000 calc(100% - 90px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 90px),transparent)}
.review{flex:0 0 min(376px,82vw);scroll-snap-align:start;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:20px}
.review .stars{color:#f5b301;display:flex;gap:2px;margin-bottom:10px}
.review p{margin:0 0 12px;line-height:1.6;color:#344054}
.review small{color:var(--muted)}
.cta-band{margin-top:44px}

@media (max-width:1000px){
  .layout-2,.game-sec{grid-template-columns:1fr}
  .stat-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lists,.feat-grid{grid-template-columns:1fr}
  .week{grid-template-columns:repeat(7,minmax(130px,1fr));overflow-x:auto;padding-bottom:8px}
  .page-hero .hero-logo{display:none}
}
@media (max-width:560px){
  .page-hero h1{font-size:28px}
  .heat{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
  .heat .cell b{font-size:14px}
  .panel{padding:18px}
}
/* checker in a narrow side column */
.inputs.compact{gap:5px}
.inputs.compact input{width:35px;height:40px;font-size:15px;border-radius:8px}
.inputs.compact .xin{margin-left:2px;padding-left:6px}
.inputs.compact .xin small{font-size:8.5px}
.inputs.compact .xin .full{display:none}.inputs.compact .xin .abbr{display:inline}
.inputs.compact.many{display:flex}
.inputs.compact.many input{aspect-ratio:auto}

/* the hidden attribute must win over component display rules (.btn etc.) */
[hidden]{display:none!important}

/* tinted light surface (e.g. the stats page's generator) */
.tool .work.tinted{position:relative;background:radial-gradient(520px 280px at 0% 0%,color-mix(in srgb,var(--c) 16%,#fff),transparent 70%),linear-gradient(135deg,#fff 30%,color-mix(in srgb,var(--c) 9%,#fff))}
.tool .work.tinted::before{content:"";position:absolute;inset:0;background-image:var(--tex-dark);background-size:260px;opacity:.045;pointer-events:none}
.tool .work.tinted>*{position:relative}

/* draw detail: winning numbers card */
.drawcard{--c:#1478bd;position:relative;overflow:hidden;border-radius:18px;color:#fff;padding:24px 26px;box-shadow:var(--shadow);
  background:radial-gradient(560px 320px at 85% 30%,color-mix(in srgb,var(--c) 55%,#fff) 0,transparent 62%),linear-gradient(115deg,color-mix(in srgb,var(--c) 50%,#000) 0%,color-mix(in srgb,var(--c) 82%,#000) 45%,var(--c) 100%)}
.drawcard::before{content:"";position:absolute;inset:0;background-image:var(--tex);background-size:280px;opacity:.08;pointer-events:none}
.drawcard .rays{position:absolute;right:-300px;top:50%;width:900px;height:900px;margin-top:-450px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.1) 0deg 5deg,transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle,#000 0,#000 22%,transparent 60%);mask:radial-gradient(circle,#000 0,#000 22%,transparent 60%);animation:spin 90s linear infinite}
.drawcard>*{position:relative}
.drawcard .dc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.drawcard .cap{font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.85)}
.drawcard .chip{font-size:13px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.2);padding:6px 12px;border-radius:999px}
.drawcard .stage{display:flex;justify-content:center;padding:34px 0 30px}
.drawcard .gb{animation:drop .8s cubic-bezier(.25,1.5,.45,1) var(--d) backwards,bob 5s ease-in-out calc(var(--d) + .8s) infinite}
.drawcard .gb small{bottom:-16px}
.drawcard .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.drawcard .facts>div{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 14px;backdrop-filter:blur(4px)}
.drawcard .facts small{display:block;font-size:11.5px;color:rgba(255,255,255,.78);margin-bottom:4px}
.drawcard .facts b{font-size:16px;font-weight:700}
.drawcard .facts button{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
@media (prefers-reduced-motion:reduce){.drawcard .gb,.drawcard .rays{animation:none!important}}
@media (max-width:1000px){.dnav{margin-right:0}}
@media (max-width:560px){.drawcard{padding:18px}.drawcard .facts{grid-template-columns:1fr}.drawcard .stage{padding:26px 0 24px}}

/* full-width tinted band (app screenshots) */
.band{background:linear-gradient(180deg,#e9edf3,#e3e8ef);padding:34px 0 24px}
/* rolled-over jackpot: amount + small "(Devretti)" */
.dv{font-size:.72em;font-weight:600;opacity:.75;white-space:nowrap}
/* detail card: static balls, no light rays/glow (texture stays) */
.drawcard{background:linear-gradient(115deg,color-mix(in srgb,var(--c) 62%,#000) 0%,color-mix(in srgb,var(--c) 85%,#000) 50%,var(--c) 100%)}
.drawcard .gb{animation:none}
.drawcard .brow .gb{margin:0 3px}
/* KPI with a number ball */
.kv-ball{display:flex;align-items:center;gap:10px;margin-top:4px;font-weight:600;color:var(--muted)}
.kv-ball .ball{--bs:40px;font-size:16px}
/* plain icon (no tile) on tinted tool cards */
.tool .work.tinted .hd .ic{background:none;width:auto;height:auto;color:var(--navy)}
/* "(Devretti)" stays inline next to the amount wherever it is used */
small.dv{display:inline!important;text-transform:none!important;letter-spacing:0!important;margin:0 0 0 2px!important;font-size:.72em!important;color:inherit!important;opacity:.75}
/* small balls: short caption so it never exceeds the ball width */
.balls.sm .bw .full{display:none}.balls.sm .bw .abbr{display:inline}

.kv-ball{min-height:40px}
.kv-ball .kv-num{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
/* detail card: On Numara's 22 balls in two clean rows (no overlap), 6 per row on phones */
.drawcard .bgrid{grid-template-columns:repeat(11,auto);gap:8px}
.drawcard .bgrid .gb{--s:58px;margin:0}
@media (max-width:560px){.drawcard .bgrid{grid-template-columns:repeat(6,auto);gap:6px}.drawcard .bgrid .gb{--s:40px}}
/* screenshots: room for the phones' shadow so it fades out right at the band's bottom edge */
.band{padding-bottom:0}
.band .shots{padding-bottom:46px}
/* label before the amount (prize tables) */
small.dv.dv-l{margin:0 4px 0 0!important}
/* long menu label on wide screens, short one on phones */
.nl-short{display:none}
@media (max-width:560px){.nl-full{display:none}.nl-short{display:inline}}

/* ---- server-rendered markup (SEO) ---- */
:where(img[width][height]){height:auto}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--navy);color:#fff;padding:10px 14px;border-radius:8px;font-weight:600}
.skip:focus{top:12px}
.slide .st{color:#fff;max-width:none}
.slide p.slide-jp{color:#fff;max-width:none}
.crumbs [aria-current]{color:#fff}
.summary{margin:0;color:#344054;line-height:1.65;font-size:15px}
.sec-title{margin:0;font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.3px}
.text-link{color:var(--brand);font-weight:600}
.text-link:hover{text-decoration:underline}
.seo-text a{color:var(--brand);font-weight:600}
.year-pills{display:flex;flex-wrap:wrap;gap:8px}
.year-pills a{padding:7px 14px;border-radius:999px;background:#f1f5f9;font-weight:600;font-size:14px;color:var(--ink);transition:background .15s,color .15s}
.year-pills a:hover{background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.year-pills a.on{background:var(--c);color:#fff}
.year-pills.wide{margin-bottom:20px}
.overview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.ov-card{background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:22px 24px;border-top:4px solid var(--c)}
.ov-head{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.ov-logo img{width:56px;height:56px;display:block}
.ov-card h2{margin:0;font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.3px}
.ov-card h2 a:hover{color:var(--c)}
.ov-card .muted-t{margin:2px 0 0}
.links-row{display:flex;gap:10px;flex-wrap:wrap}
.link-panel{display:flex;gap:14px;align-items:center}
.link-panel .ic{width:42px;height:42px;flex:none;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c)}
.link-panel>span:nth-child(2){flex:1}
.link-panel b{display:block;color:var(--navy);font-size:16px}
.link-panel small{color:var(--muted);font-size:13px}
.link-panel>.ico{color:var(--muted);transition:transform .15s}
.link-panel:hover>.ico{transform:translateX(3px);color:var(--c)}
.rules.plain{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.rules.plain li{display:flex;gap:10px;align-items:flex-start;line-height:1.55;color:#344054}
.rules.plain .ico{color:var(--c);flex:none;margin-top:2px}
.faq summary h3.q{margin:0;font-size:inherit;font-weight:inherit}
h2.faq-group{line-height:1.3}
.review{margin:0}
.review blockquote{margin:0 0 12px;line-height:1.6;color:#344054}
.review figcaption{color:var(--muted);font-size:13px}
.drawcard .facts .share-btn{all:unset;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
@media (max-width:760px){.overview{grid-template-columns:1fr}.app .h1-app{font-size:30px!important}}
.tool .side h3{color:inherit}