@font-face{font-family:'Exo 2';font-style:normal;font-weight:400;font-display:swap;src:url('f/exo-regular.woff2') format('woff2')}@font-face{font-family:'Exo 2';font-style:italic;font-weight:400;font-display:swap;src:url('f/exo-italic.woff2') format('woff2')}@font-face{font-family:'Exo 2';font-style:normal;font-weight:500;font-display:swap;src:url('f/exo-500.woff2') format('woff2')}@font-face{font-family:'Exo 2';font-style:normal;font-weight:600;font-display:swap;src:url('f/exo-600.woff2') format('woff2')}@font-face{font-family:'Exo 2';font-style:normal;font-weight:700;font-display:swap;src:url('f/exo-700.woff2') format('woff2')}
:root{--gold:#ffbe25;--gold2:#e8a913;--bg:#0d0d0d;--panel:#1c1a17;--panel2:#252220;--line:#3a3126;--txt:#d9d4cc;--muted:#9c9488}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:'Exo 2',Arial,sans-serif;font-size:14px;line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 14px}
.gold{color:var(--gold)}
/* topbar */
.topbar{background:#0a0a0a;border-bottom:1px solid var(--line);font-size:12.5px}
.topbar .container{display:flex;align-items:center;gap:16px;min-height:56px;flex-wrap:wrap}
.logo img{height:40px;width:auto}
.topbar-links{margin-left:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.topbar-links a{color:var(--muted);display:flex;align-items:center;gap:6px}
.topbar-links a:hover{color:var(--gold)}
.login-panel{display:flex;gap:8px}
.btn{display:inline-block;border-radius:6px;font-weight:700;padding:8px 18px;cursor:pointer;text-align:center;border:1px solid transparent}
.btn-ghost{border-color:var(--gold);color:var(--gold)}
.btn-gold{background:linear-gradient(180deg,#ffd25a,var(--gold) 55%,var(--gold2));color:#231a05}
.btn-gold:hover,.btn-ghost:hover{filter:brightness(1.08)}
/* nav */
.mainnav{background:linear-gradient(180deg,#1f1c18,#141210);border-bottom:2px solid var(--gold2)}
.mainnav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap}
.mainnav li a{display:block;padding:13px 16px;font-weight:600;color:var(--txt);border-right:1px solid rgba(255,190,37,.08)}
.mainnav li a:hover,.mainnav li a.active{color:var(--gold);background:rgba(255,190,37,.06)}
/* banner */
.hero{margin:16px 0}
.hero img{width:100%;border-radius:10px;border:1px solid var(--line)}
.announce{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:16px;font-size:13px;color:var(--muted)}
.announce b{color:var(--gold);white-space:nowrap}
/* section */
.section{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:18px}
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sec-title{font-weight:800;font-size:18px;color:#fff}
.sec-title:before{content:'';display:inline-block;width:5px;height:18px;background:var(--gold);margin-right:9px;vertical-align:-2px;border-radius:2px}
.sec-more{color:var(--gold);font-size:13px;font-weight:600}
/* game grid */
.games{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:560px){.games{grid-template-columns:repeat(3,1fr)}}
@media(min-width:820px){.games{grid-template-columns:repeat(5,1fr)}}
.game{background:var(--panel2);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .15s}
.game:hover{transform:translateY(-4px);border-color:var(--gold)}
.game .thumb{position:relative}
.game .thumb img{width:100%;aspect-ratio:1/1;object-fit:cover}
.game .overlay{position:absolute;inset:0;background:rgba(8,6,3,.72);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s}
.game:hover .overlay{opacity:1}
.game .name{padding:8px 10px;font-size:12.5px;font-weight:600;text-align:center;color:#efe7d8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play{background:var(--gold);color:#231a05;font-weight:800;padding:8px 18px;border-radius:20px;font-size:13px}
/* provider chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--txt)}
.chip:hover{border-color:var(--gold);color:var(--gold)}
/* result table */
.rtp-list{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:700px){.rtp-list{grid-template-columns:1fr 1fr}}
.rtp-item{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.rtp-item img{width:44px;height:44px;border-radius:8px;object-fit:cover}
.rtp-item .meta{flex:1}
.rtp-item .meta .t{font-weight:700;color:#fff}
.rtp-item .meta .s{font-size:12px;color:var(--muted)}
.rtp-bar{width:120px;height:8px;background:#000;border-radius:5px;overflow:hidden}
.rtp-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--gold2),var(--gold))}
.rtp-pct{width:44px;text-align:right;font-weight:800;color:var(--gold)}
/* telegram / cta band */
.ctaband{background:linear-gradient(90deg,#1f1c18,#2a2115);border:1px solid var(--gold2);border-radius:10px;padding:18px;text-align:center;margin-bottom:18px}
.ctaband h3{margin:0 0 10px;color:#fff;font-size:18px}
/* footer */
.footer{background:#0a0a0a;border-top:1px solid var(--line);margin-top:22px;padding:26px 0 40px}
.footer h1{font-size:20px;color:var(--gold);margin:0 0 10px}
.footer h2{font-size:16px;color:var(--gold);margin:18px 0 8px}
.footer p{text-align:justify;color:var(--muted);margin:0 0 12px}
.footer .cols{display:grid;grid-template-columns:1fr;gap:20px;margin-top:22px}
@media(min-width:720px){.footer .cols{grid-template-columns:repeat(4,1fr)}}
.footer .cols h4{color:#fff;font-size:14px;margin:0 0 10px}
.footer .cols a{color:var(--muted);display:block;padding:3px 0}
.footer .cols a:hover{color:var(--gold)}
.faq details{border:1px solid var(--line);border-radius:8px;background:var(--panel2);margin-bottom:8px}
.faq summary{cursor:pointer;padding:11px 14px;font-weight:700;color:#cdb98a;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:'+';float:right;color:var(--gold)}
.faq details[open] summary:after{content:'-'}
.faq p{padding:0 14px 12px;margin:0;color:var(--txt);font-size:13px}
.copyright{border-top:1px solid var(--line);margin-top:22px;padding-top:16px;color:var(--muted);font-size:12.5px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.demo-flag{position:fixed;bottom:10px;right:10px;background:var(--gold);color:#231a05;font-weight:800;font-size:11px;padding:5px 10px;border-radius:6px;z-index:99;opacity:.85}