:root{--bg:#101321;--panel:#181c2e;--panel2:#1f2438;--line:#272d45;--red:#e01a33;--red2:#c01029;--lime:#e8f000;--ink:#eef0f8;--mut:#8b93ab;--green:#28a745}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Roboto,system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.layout{display:grid;grid-template-columns:248px minmax(0,1fr)}
main{min-width:0}
/* sidebar */
.sb{padding:14px 12px;display:flex;flex-direction:column;gap:14px}
.sb-hold{flex:1 0 auto;display:flex;flex-direction:column;min-height:340px}
.sb-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.sb-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.sb-tabs a{text-align:center;padding:12px 0;border:1px solid var(--line);border-radius:8px;font-weight:800;font-size:13px;color:var(--mut);letter-spacing:.5px}
.sb-tabs a.on{color:var(--lime);border-color:#3a4160;background:#141828}
.sb-promo{background:linear-gradient(135deg,#a30f24,var(--red));border:1px solid #ff5a70;border-radius:10px;padding:14px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px;line-height:1.25;text-transform:uppercase}
.sb-promo .ball{font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.sb-bonus{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel2);position:sticky;bottom:14px;margin-top:auto}
.sb-bonus img{width:100%;aspect-ratio:972/880;object-fit:cover;object-position:top}
.sb-bonus-body{padding:12px;text-align:center}
.sb-bonus .n{font-size:11px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}
.sb-bonus .v{font-size:16px;font-weight:900;margin:4px 0 10px}
.sb-bonus .b{display:block;background:var(--lime);color:#1a1c00;font-weight:900;font-size:12.5px;padding:10px;border-radius:6px;text-transform:uppercase;letter-spacing:.4px}
.sb-bonus:hover .b{filter:brightness(1.08)}
.sb-nav{display:flex;flex-direction:column}
.sb-nav a{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:8px;color:#c6cbdc;font-weight:600;font-size:13.5px;font-style:italic;text-transform:uppercase;letter-spacing:.3px}
.sb-nav a:hover{background:var(--panel2);color:#fff}
.sb-nav a.on{background:linear-gradient(90deg,rgba(224,26,51,.35),transparent);color:var(--lime);border-left:3px solid var(--lime)}
.sb-nav svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;opacity:.85}
.sb-nav .nuovo{margin-left:auto;background:var(--green);color:#fff;font-size:9px;font-weight:800;font-style:normal;padding:2px 7px;border-radius:4px}
.sb-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding-top:14px}
.sb-foot a{border:1px solid var(--line);border-radius:8px;padding:10px 6px;text-align:center;font-size:11px;color:var(--mut);font-weight:700;text-transform:uppercase}
/* header */
.hd{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hd .logo img{height:44px;width:auto}
.hd .search{flex:1;max-width:520px;margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:11px 14px;color:var(--mut);font-size:13.5px}
.hd .btn{border:1px solid #3a4160;border-radius:8px;padding:12px 22px;font-weight:800;font-size:13px;letter-spacing:.5px;white-space:nowrap}
.hd .btn:hover{border-color:var(--lime);color:var(--lime)}
/* slider */
.slider{position:relative;margin:0;overflow:hidden;background:#000;aspect-ratio:2558/682}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.slide .body{position:absolute;left:6%;top:50%;transform:translateY(-50%);max-width:420px}
.slide .t{font-size:15px;font-weight:800;text-transform:uppercase;color:var(--lime);letter-spacing:.5px;text-shadow:0 2px 6px rgba(0,0,0,.6)}
.slide .d{font-size:clamp(24px,3.2vw,42px);font-weight:900;line-height:1.1;text-transform:uppercase;margin:8px 0 16px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.slide .cta{display:inline-block;background:var(--lime);color:#1a1c00;font-weight:900;font-size:15px;padding:14px 30px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px}
.slide .cta:hover{filter:brightness(1.08)}
.sl-dots{position:absolute;left:6%;bottom:18px;display:flex;gap:6px;z-index:5}
.sl-dots b{width:18px;height:5px;background:rgba(255,255,255,.4);cursor:pointer}
.sl-dots b.on{background:#fff}
.sl-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:rgba(0,0,0,.3);color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.sl-nav:hover{border-color:var(--lime);color:var(--lime)}
.sl-nav.p{left:14px}.sl-nav.n{right:14px}
/* categories */
.cats{display:flex;gap:10px;overflow-x:auto;padding:14px 20px;scrollbar-width:none;border-bottom:1px solid var(--line)}
.cats::-webkit-scrollbar{display:none}
.cat{flex:none;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;padding:11px 16px;font-weight:700;font-size:13px;color:#c6cbdc;text-transform:uppercase;letter-spacing:.3px;background:var(--panel)}
.cat:hover{border-color:var(--lime);color:var(--lime)}
.cat img{width:22px;height:22px;object-fit:contain;filter:grayscale(1) brightness(2)}
/* intro */
.intro{padding:26px 20px 4px}
.intro h1{font-size:clamp(20px,2.6vw,30px);font-weight:900;line-height:1.2;max-width:1000px}
.intro p{color:var(--mut);max-width:860px;margin-top:10px;font-size:14.5px}
/* section titles */
.sec{padding:26px 20px 0}
.sec-h{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.sec-h h2{font-size:19px;font-weight:900;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.sec-h h2:after{content:"";display:block;width:44px;height:3px;background:var(--red);margin-top:6px}
.sec-h .all{margin-left:auto;color:var(--mut);font-weight:700;font-size:13px;white-space:nowrap}
.sec-h .all:hover{color:var(--lime)}
/* events */
.events{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ev{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:10px}
.ev .st{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut)}
.ev .st .live{background:var(--red);color:#fff;font-weight:800;font-size:10.5px;padding:2px 8px;border-radius:4px}
.ev .teams div{display:flex;justify-content:space-between;font-weight:700;font-size:14.5px;padding:3px 0}
.ev .teams span.sc{color:var(--lime);font-weight:800}
.ev .odds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:auto}
.ev .odds a{background:var(--panel2);border:1px solid var(--line);border-radius:8px;text-align:center;padding:9px 4px}
.ev .odds a:hover{border-color:var(--lime)}
.ev .odds b{display:block;font-size:15px}
.ev .odds i{font-style:normal;font-size:10.5px;color:var(--mut);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* wide banners */
.wide{margin:26px 20px 0;position:relative;border-radius:12px;overflow:hidden;display:block;aspect-ratio:2200/396;min-height:150px}
.wide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wide .body{position:absolute;left:4%;top:50%;transform:translateY(-50%);max-width:560px;z-index:2}
.wide .txt{font-size:13px;font-weight:700;text-transform:uppercase;color:#ffd7dd;letter-spacing:.5px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.wide .ttl{font-size:clamp(16px,2vw,26px);font-weight:900;line-height:1.2;margin:6px 0 12px;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.wide .cta{display:inline-block;background:#fff;color:#14172a;font-weight:800;font-size:13px;padding:10px 22px;border-radius:6px}
/* sport cards */
.sports{display:grid;grid-auto-flow:column;grid-auto-columns:150px;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none}
.sports::-webkit-scrollbar{display:none}
.sp{position:relative;border-radius:10px;overflow:hidden;background:linear-gradient(160deg,#232945,#12152a);aspect-ratio:225/337;border:1px solid var(--line)}
.sp:hover{border-color:var(--red)}
.sp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp .nm{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 10px;background:linear-gradient(transparent,rgba(6,8,16,.92));font-weight:800;font-size:13px;text-transform:capitalize;text-align:center}
.sp.ph{display:flex;align-items:center;justify-content:center;background:radial-gradient(120% 90% at 50% 0%,#e01a33 0%,#7c0e20 55%,#2a0a12 100%)}
.sp.ph .ic{font-size:52px;margin-bottom:26px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.sp.ph:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(6,8,16,.9))}
.sp.ph .nm{z-index:2}.sp.ph .ic{z-index:2}
/* game grids */
.gg{display:grid;grid-auto-flow:column;gap:12px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
.gg::-webkit-scrollbar{height:7px}.gg::-webkit-scrollbar-thumb{background:#2c3350;border-radius:4px}
.gg--p{grid-auto-columns:150px}   /* portrait 2:3 */
.gg--v{grid-auto-columns:132px}   /* vertical 9x21 */
.gg--h{grid-auto-columns:300px}   /* 3x2 */
.g{position:relative;border-radius:10px;overflow:hidden;background:var(--panel);border:1px solid var(--line)}
.g:hover{border-color:var(--red)}
.gg--p .g{aspect-ratio:2/3}.gg--v .g{aspect-ratio:9/21}.gg--h .g{aspect-ratio:3/2}
.g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g .idx{position:absolute;left:6px;bottom:2px;z-index:3;font-size:44px;font-weight:900;color:#fff;-webkit-text-stroke:2px rgba(224,26,51,.9);text-shadow:0 2px 8px rgba(0,0,0,.6);line-height:1}
.g .lbl{position:absolute;top:8px;left:-26px;z-index:3;background:var(--lime);color:#1a1c00;font-size:10px;font-weight:800;text-transform:uppercase;padding:3px 28px;transform:rotate(-35deg)}
.g .jack{position:absolute;left:0;right:0;top:0;z-index:3;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(224,26,51,.8));text-align:center;font-weight:800;font-size:12.5px;padding:4px}
.g .bet{position:absolute;left:6px;top:6px;z-index:3;background:rgba(8,10,20,.75);border-radius:5px;font-size:10px;font-weight:700;padding:3px 7px;color:#dfe3f0}
.g .res{position:absolute;left:6px;bottom:8px;z-index:3;display:flex;gap:3px;flex-wrap:wrap;max-width:90%}
.g .res b{width:17px;height:17px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}
.g .res .red{background:#c92038}.g .res .black{background:#20242f}.g .res .green{background:#1d8a3a}
.g .occ{position:absolute;right:6px;top:6px;z-index:3;background:rgba(8,10,20,.75);border-radius:5px;font-size:10px;font-weight:700;padding:3px 7px;color:#dfe3f0}
.g .hover{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(10,12,22,.72);opacity:0;transition:.15s}
.g:hover .hover{opacity:1}
.g .hover .nm{font-weight:800;font-size:13px;text-align:center;padding:0 10px}
.g .hover .play{background:var(--red);color:#fff;font-weight:800;font-size:13px;padding:9px 26px;border-radius:20px}
.g .hover .demo{color:var(--mut);font-size:12px;font-weight:700}
.g.more{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#2a1420,#181c2e);font-weight:800;text-transform:uppercase;font-size:13px;color:var(--lime)}
/* seo */
.seo{margin:40px 20px 0;max-width:1100px}
.seo h2{font-size:18px;font-weight:800;margin:22px 0 10px;color:#c3c9da}
.seo h2:first-of-type{margin-top:0}
.seo p{color:#8f97ad;font-size:14px;margin-bottom:12px;line-height:1.7}
/* footer */
.ft{margin-top:40px;border-top:1px solid var(--line);padding:26px 20px;color:var(--mut);font-size:12.5px}
.ft-badges{display:flex;gap:8px;margin-bottom:12px}
.ft-badges span{border:1px solid var(--line);border-radius:16px;padding:4px 12px;font-weight:700;font-size:11.5px;color:#c6cbdc}
.ft p{margin-bottom:6px;max-width:920px}
@media(max-width:1100px){.events{grid-template-columns:repeat(2,1fr)}}
@media(max-width:920px){.layout{grid-template-columns:minmax(0,1fr)}.sb{display:none}.hd .search{display:none}}
@media(max-width:560px){
.events{grid-template-columns:1fr}
.gg--p{grid-auto-columns:128px}.gg--h{grid-auto-columns:240px}.gg--v{grid-auto-columns:116px}
.hd{flex-wrap:wrap;gap:8px;padding:10px 12px}
.hd .logo img{height:34px}
.hd .btn{padding:9px 12px;font-size:11.5px;margin-left:auto}
.hd .btn+.btn{margin-left:0}
.slider{aspect-ratio:auto;min-height:300px}
.slide .body{left:5%;right:5%;max-width:none}
.slide .d{font-size:22px}
.slide .cta{padding:11px 20px;font-size:13px}
.cats{padding:12px}
.sec{padding:20px 12px 0}
.wide{margin:20px 12px 0;aspect-ratio:auto;min-height:170px}
.seo{margin:32px 12px 0}
.ft{padding:22px 12px}
}
html,body{overflow-x:clip}