/* melbet.vg — Melbet brand look: graphite #212121 + Melbet yellow #FFB802 */
:root{
 --y:#FFB802;--y2:#FFC633;--y-ink:#1B1B1B;
 --k1:#212121;--k2:#2B2B2B;--k3:#3A3A3A;--k4:#464646;
 --g0:#E8E8E8;--g1:#DEDEDE;--g2:#F3F3F3;--line:#D2D2D2;
 --txt:#262626;--mut:#6B6B6B;--good:#2E9E4F;--bad:#D9443A;
 --hf:"Roboto Condensed","Arial Narrow",Arial,sans-serif;--bf:"Roboto",Arial,Helvetica,sans-serif;
 --r:6px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--g0);color:var(--txt);font:400 16.5px/1.65 var(--bf);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:#0B6BCB}
h1,h2,h3,h4{font-family:var(--hf);line-height:1.15;margin:0 0 .6em}
p{margin:0 0 1em}
.wrap{max-width:1440px;margin:0 auto;padding:0 16px}
.i{width:20px;height:20px;flex:none}
:focus-visible{outline:3px solid var(--y);outline-offset:2px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border:2px solid transparent;border-radius:var(--r);font:700 15px/1 var(--hf);letter-spacing:.04em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,border-color .15s,transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn-y{background:var(--y);color:var(--y-ink)}
.btn-y:hover{background:var(--y2)}
.btn-d{background:var(--k2);color:#fff;border-color:var(--k4)}
.btn-d:hover{background:var(--k3)}
.btn-w{background:#fff;color:var(--k1)}
.btn-w:hover{background:var(--g2)}
.btn-o{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-o:hover{border-color:var(--y);color:var(--y)}
.btn-s{min-height:36px;padding:7px 14px;font-size:14px}
.btn-block{width:100%}
.btn .i{width:18px;height:18px}

/* header: one row — logo, nav, affiliate buttons */
.hdr{position:sticky;top:0;z-index:50;background:var(--k1);border-bottom:3px solid var(--y);box-shadow:0 2px 12px rgba(0,0,0,.3)}
.hdr-in{display:flex;align-items:center;gap:22px;min-height:66px}
.logo{flex:none}
.logo img{width:auto;height:30px}
.nav{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.nav a{padding:9px 13px;border-radius:var(--r);color:#E6E6E6;font:700 16px/1 var(--hf);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--y);background:var(--k2)}
.nav a.on{color:var(--y);box-shadow:inset 0 -3px 0 var(--y);border-radius:var(--r) var(--r) 0 0}
.hdr-btns{display:flex;gap:10px;flex:none}
.hdr-btns .btn{min-height:40px;padding:8px 18px;font-size:15px}
.burger{display:none;width:44px;height:44px;border:1px solid var(--k4);border-radius:var(--r);background:var(--k2);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:none}
.burger span{width:20px;height:2px;background:#fff;border-radius:2px;transition:.2s}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero */
.hero{background:radial-gradient(900px 420px at 80% 30%,rgba(255,184,2,.16),transparent 65%),linear-gradient(180deg,#1A1A1A,#262626);color:#E9E9E9;padding:30px 0 40px}
.crumbs{display:flex;align-items:center;gap:6px;font-size:14px;color:#9C9C9C;margin-bottom:18px}
.crumbs a{color:#D8D8D8;text-decoration:none}
.crumbs a:hover{color:var(--y)}
.crumbs .i{width:14px;height:14px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{color:#fff;font-size:clamp(30px,3.8vw,50px);font-weight:800;text-transform:uppercase;letter-spacing:.01em}
.hero h1::after{content:"";display:block;width:84px;height:5px;background:var(--y);margin-top:16px;border-radius:3px}
.hero .lead{color:#CFCFCF;font-size:17px}
.hero .lead a.il{color:var(--y)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero-cta .btn{min-height:50px;padding:12px 30px;font-size:17px}
.hero-img{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.5);border:1px solid #333}
.hero-side{display:grid;gap:10px}
.hs-row{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--k2);border:1px solid var(--k3);border-left:4px solid var(--y);border-radius:var(--r)}
.hs-row .i{width:26px;height:26px;color:var(--y)}
.hs-row small{display:block;color:#9C9C9C;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.hs-row b{color:#fff;font:700 19px/1.25 var(--hf)}

/* content: full width text */
.content{padding-top:18px;padding-bottom:30px}
.toc{background:var(--k1);border-radius:var(--r);margin-bottom:14px;overflow:hidden}
.toc-h{padding:13px 18px;color:#fff;font:700 15px/1 var(--hf);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--k3)}
.toc ol{list-style:none;margin:0;padding:12px;display:flex;flex-wrap:wrap;gap:8px;counter-reset:t}
.toc a{display:flex;align-items:center;gap:9px;padding:8px 12px 8px 8px;border-radius:var(--r);background:var(--k2);color:#E6E6E6;text-decoration:none;font-size:14.5px;line-height:1.25;transition:background .15s,color .15s}
.toc a::before{counter-increment:t;content:counter(t);min-width:22px;height:22px;border-radius:4px;background:var(--k3);color:#BDBDBD;font:700 12px/22px var(--hf);text-align:center}
.toc a:hover,.toc a.on{background:var(--k3);color:var(--y)}
.toc a:hover::before,.toc a.on::before{background:var(--y);color:var(--y-ink)}

/* sections */
.sec{background:#fff;border-radius:var(--r);margin-bottom:14px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.05)}
.sec h2{margin:0;padding:15px 22px;background:var(--g1);border-left:5px solid var(--y);font-size:clamp(20px,2vw,25px);font-weight:700;text-transform:uppercase;color:var(--k1)}
.sec-b{padding:22px 24px 10px}
.sec h3{font-size:20px;color:var(--k1);margin-top:1.2em}
.sec a.il{color:#0B6BCB;text-decoration:underline;text-decoration-color:rgba(11,107,203,.35);text-underline-offset:3px}
.sec a.il:hover{text-decoration-color:currentColor}
.steps,.ticks{list-style:none;margin:0 0 1.2em;padding:0}
.steps{counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:12px 14px 12px 58px;margin-bottom:8px;background:var(--g2);border-radius:var(--r)}
.steps li::before{content:counter(s);position:absolute;left:12px;top:10px;width:32px;height:32px;border-radius:50%;background:var(--y);color:var(--y-ink);font:800 16px/32px var(--hf);text-align:center}
.ticks li{position:relative;padding:4px 0 4px 30px;margin-bottom:6px}
.ticks li::before{content:"";position:absolute;left:4px;top:12px;width:12px;height:7px;border-left:3px solid var(--y);border-bottom:3px solid var(--y);transform:rotate(-45deg)}
.tw{overflow-x:auto;margin:6px 0 20px;border-radius:var(--r);border:1px solid var(--line)}
.tw table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.tw thead th{background:var(--k4);color:#fff;text-align:left;padding:12px 14px;font:700 14.5px/1.25 var(--hf);text-transform:uppercase;letter-spacing:.03em}
.tw td,.tw tbody th{padding:11px 14px;border-top:1px solid var(--g1);text-align:left;vertical-align:top}
.tw tbody th{font-weight:700;color:var(--k1)}
.tw tbody tr:nth-child(even){background:var(--g2)}
.tw-pc thead th.pro{background:#2B6B3D}
.tw-pc thead th.con{background:#8C2E28}
.tw-pc td{width:50%}
.tw-pc td.pro{border-left:4px solid var(--good)}
.tw-pc td.con{border-left:4px solid var(--bad)}
.more{display:inline-flex;align-items:center;gap:6px;margin:4px 0 14px;padding:9px 14px;border-radius:var(--r);background:var(--k1);color:var(--y);font:700 14.5px/1 var(--hf);text-transform:uppercase;letter-spacing:.04em;text-decoration:none}
.more:hover{background:var(--k2)}
.more .i{width:16px;height:16px}
.promo{display:flex;align-items:center;gap:16px;margin:4px 0 16px;padding:16px 18px;border-radius:var(--r);background:linear-gradient(100deg,#1C1C1C,#333);color:#fff}
.promo>.i{width:38px;height:38px;color:var(--y)}
.promo div{flex:1}
.promo b{display:block;font:800 20px/1.2 var(--hf);color:var(--y);text-transform:uppercase}
.promo span{font-size:14.5px;color:#CFCFCF}

/* faq */
.qa{border:1px solid var(--g1);border-radius:var(--r);margin-bottom:8px;background:#fff}
.qa summary{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary h3{margin:0;font-size:18px;flex:1}
.qa summary .i{transition:transform .2s;color:var(--k4)}
.qa[open]{border-color:var(--y)}
.qa[open] summary{background:var(--g2)}
.qa[open] summary .i{transform:rotate(180deg)}
.qa-a{padding:12px 16px 2px}

/* slots */
.slots-wrap{margin:6px 0 18px}
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--g1);margin-bottom:14px}
.tabs span{padding:9px 14px;font:700 15px/1 var(--hf);text-transform:uppercase;color:var(--mut)}
.tabs span.on{color:var(--k1);box-shadow:inset 0 -3px 0 var(--y)}
.slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.slot{background:var(--k1);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.slot-img{position:relative;aspect-ratio:276/177;background:var(--k2)}
.slot-img img{width:100%;height:100%;object-fit:cover}
.slot-demo{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;border:0;background:var(--y);color:var(--y-ink);display:grid;place-items:center;cursor:pointer;opacity:0;transform:scale(.85);transition:.2s}
.slot-demo .i{width:24px;height:24px}
.slot:hover .slot-demo,.slot-demo:focus-visible{opacity:1;transform:none}
.slot-b{padding:10px 12px 12px;display:flex;flex-direction:column;flex:1}
.slot-b b{color:#fff;font:700 16px/1.25 var(--hf)}
.slot-b small{color:#9C9C9C;font-size:13px;margin-bottom:10px}
.slot-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:auto}
.slot-btns .btn{padding:7px 4px;min-height:34px;font-size:13.5px}

/* app (inside the H1 block on /mobile/) */
.app-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:6px 0 4px;max-width:560px}
.app-facts div{padding:9px 12px;background:var(--k2);border-radius:var(--r);border-left:3px solid var(--y)}
.app-facts dt{font-size:12px;color:#9C9C9C;text-transform:uppercase;letter-spacing:.06em}
.app-facts dd{margin:2px 0 0;color:#fff;font-weight:500;font-size:14.5px}
.btn-app{min-height:50px;padding:12px 26px;font-size:17px}
.app-shots{list-style:none;margin:0 0 14px;padding:4px 2px 8px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.app-shots li{flex:0 0 calc((100% - 80px)/6);min-width:150px;scroll-snap-align:start}
.app-shots img{border-radius:18px;border:3px solid #2B2B2B;box-shadow:0 10px 22px rgba(0,0,0,.25)}

/* footer */
.ftr{background:#181818;color:#BDBDBD;padding:40px 0 22px;font-size:14.5px}
.ftr-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
.ftr-about img{height:30px;width:auto;margin-bottom:14px}
.ftr-aff{font-size:13.5px;color:#8E8E8E}
.ftr h4{color:var(--y);font-size:16px;text-transform:uppercase;letter-spacing:.05em}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:8px}
.ftr a{color:#DADADA;text-decoration:none}
.ftr a:hover{color:var(--y)}
.ftr-apps{display:flex;flex-direction:column;gap:8px;max-width:200px}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:28px;padding-top:18px;border-top:1px solid #2E2E2E;font-size:13.5px;color:#8E8E8E}
.age{display:inline-block;padding:2px 7px;margin-right:6px;border:2px solid var(--bad);border-radius:4px;color:#fff;background:var(--bad);font-size:12px}

/* to top + modal */
.totop{position:fixed;right:16px;bottom:16px;z-index:40;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--y);color:var(--y-ink);box-shadow:0 6px 18px rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:.2s}
.totop.show{opacity:1;pointer-events:auto}
.modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;padding:14px}
.modal.open{display:flex}
.modal-box{width:min(1100px,100%);background:var(--k1);border-radius:8px;overflow:hidden;display:flex;flex-direction:column;max-height:94vh}
.modal-h{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--k1);border-bottom:2px solid var(--y)}
.modal-h b{flex:1;color:#fff;font:700 17px/1.2 var(--hf);text-transform:uppercase}
.modal-x{width:38px;height:38px;border-radius:50%;border:1px solid var(--k4);background:var(--k2);color:#fff;font-size:24px;line-height:1;cursor:pointer}
.modal-b{aspect-ratio:16/9;background:#000}
.modal-b iframe{width:100%;height:100%;border:0;display:block}

/* responsive */
@media (max-width:1180px){
 .hdr-in{gap:14px}
 .nav a{padding:9px 9px;font-size:15px}
 .hdr-btns .btn{padding:8px 13px;font-size:14px}
}
@media (max-width:1020px){
 .burger{display:flex}
 .hdr-in{gap:10px}
 .sp-m{flex:1}
 .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;padding:6px 16px 14px;background:var(--k1);border-bottom:3px solid var(--y)}
 .nav.open{display:flex}
 .nav a{padding:14px 4px;border-bottom:1px solid var(--k3);border-radius:0;font-size:16px}
 .nav a.on{box-shadow:none}
 .hdr-btns{margin-left:auto}
 .hero-grid{grid-template-columns:1fr;gap:24px}
 .slots{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1300px) and (min-width:1021px){.slots{grid-template-columns:repeat(5,1fr)}}
@media (max-width:640px){
 .wrap{padding:0 12px}
 .logo img{height:22px}
 .hdr-in{min-height:58px;gap:8px}
 .hdr-btns{gap:6px}
 .hdr-btns .btn{min-height:36px;padding:7px 10px;font-size:13px}
 .hdr-app{font-size:0!important;gap:0;padding:7px 9px!important}
 .hdr-app .i{width:18px;height:18px}
 .burger{width:38px;height:38px}
 .hero{padding:22px 0 28px}
 .hero-cta .btn{flex:1 1 100%}
 .sec-b{padding:16px 14px 6px}
 .sec h2{padding:13px 14px}
 .slots{grid-template-columns:1fr 1fr;gap:10px}
 .slot-btns{grid-template-columns:1fr}
 .app-facts div{padding:8px 10px}
 .app-facts dd{font-size:13.5px}
 .hero-cta .btn-app{flex:1 1 0;padding:12px 8px}
 .app-shots li{flex-basis:42%}
 .toc ol{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
 .toc ol::-webkit-scrollbar{display:none}
 .toc li{flex:none;scroll-snap-align:start}
 .toc a{white-space:nowrap}
 .promo{flex-wrap:wrap}
 .promo .btn{width:100%}
 .steps li{padding-left:52px}
 .ftr-grid{grid-template-columns:1fr}
}
@media (max-width:400px){.logo img{height:19px}.hdr-in{gap:6px}.hdr-btns .hdr-reg{padding:6px 8px;font-size:12.5px;letter-spacing:.02em}.burger{width:36px;height:36px}}
@media (max-width:340px){.wrap{padding:0 8px}.logo img{height:15px}.hdr-in{gap:4px}.hdr-btns{gap:4px}.hdr-btns .hdr-reg{padding:6px 6px;font-size:11.5px}.hdr-app{padding:6px 7px!important}.burger{width:34px;height:34px}}