/* Surga88 Theme — Casino Red/Gold/Green/Blue/Black/White */
:root{
  --red:#c8102e; --red-d:#8f0a20; --gold:#f5b301; --gold-d:#d49a00;
  --green:#0e7a3d; --green-d:#0a5c2e; --blue:#0b3d91; --blue-d:#082c6b;
  --black:#0d0d12; --dark:#14141c; --white:#ffffff; --grey:#b9b9c6;
  --card:#1b1b26; --line:rgba(245,179,1,.25);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',Roboto,Arial,sans-serif;background:var(--black);color:#e8e8f0;line-height:1.75;font-size:16px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:#ffd44d}
.container{max-width:1180px;margin:0 auto;padding:0 18px}
h1,h2,h3,h4{color:var(--white);line-height:1.35}
h1{font-size:clamp(1.7rem,4vw,2.6rem)}
h2{font-size:clamp(1.4rem,3vw,2rem);margin:2.2rem 0 1rem}
h3{font-size:1.2rem;margin:1.6rem 0 .7rem}
p{margin:0 0 1.1rem}
ul,ol{margin:0 0 1.2rem 1.4rem}
li{margin-bottom:.45rem}
table{width:100%;border-collapse:collapse;margin:1.2rem 0;font-size:.95rem;display:block;overflow-x:auto}
thead,tbody{display:table;width:100%;min-width:560px}
th{background:var(--red-d);color:#fff;padding:.7rem .8rem;text-align:left;border:1px solid rgba(255,255,255,.12)}
td{padding:.65rem .8rem;border:1px solid rgba(255,255,255,.1);background:var(--card)}
tr:nth-child(even) td{background:#20202e}
.badge18{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:2px solid var(--red);border-radius:50%;color:#fff;font-weight:800;font-size:.72rem;background:rgba(200,16,46,.25)}

/* ===== Header ===== */
.topbar{background:linear-gradient(90deg,var(--red-d),var(--red),var(--red-d));color:#fff;font-size:.82rem;padding:.35rem 0;overflow:hidden;white-space:nowrap;max-width:100vw;position:relative}
.topbar .marquee{display:inline-block;animation:marq 28s linear infinite;padding-left:100%}
@keyframes marq{to{transform:translateX(-100%)}}
.site-header{background:rgba(13,13,18,.97);border-bottom:2px solid var(--gold);position:sticky;top:0;z-index:900}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff}
.brand img{width:44px;height:44px}
.brand .bname{font-size:1.5rem;font-weight:900;letter-spacing:.5px;background:linear-gradient(180deg,#ffe27a,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand .bname span{color:var(--red);-webkit-text-fill-color:var(--red)}
.main-nav{display:flex;align-items:center;gap:.2rem;flex-wrap:wrap}
.main-nav a{color:#e8e8f0;font-size:.92rem;padding:.5rem .7rem;border-radius:6px;font-weight:600}
.main-nav a:hover,.main-nav a.active{background:rgba(245,179,1,.14);color:var(--gold)}
.nav-cta{display:flex;gap:.5rem}
.btn{display:inline-block;padding:.65rem 1.4rem;border-radius:8px;font-weight:800;font-size:.95rem;letter-spacing:.3px;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s;text-align:center}
.btn:hover{transform:translateY(-2px)}
.btn-gold{background:linear-gradient(180deg,#ffd44d,var(--gold) 55%,var(--gold-d));color:#3a2a00;box-shadow:0 4px 14px rgba(245,179,1,.35)}
.btn-gold:hover{color:#3a2a00;box-shadow:0 6px 20px rgba(245,179,1,.5)}
.btn-red{background:linear-gradient(180deg,#e8354f,var(--red) 60%,var(--red-d));color:#fff;box-shadow:0 4px 14px rgba(200,16,46,.4)}
.btn-red:hover{color:#fff}
.btn-outline{background:transparent;border:2px solid var(--gold);color:var(--gold)}
.btn-outline:hover{background:rgba(245,179,1,.12)}
.hamburger{display:none;background:none;border:2px solid var(--gold);border-radius:8px;color:var(--gold);font-size:1.3rem;padding:.25rem .6rem;cursor:pointer}

/* ===== Hero ===== */
.hero{position:relative;min-height:430px;display:flex;align-items:center;background:url('../img/hero.webp') center/cover no-repeat}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,13,18,.93) 20%,rgba(13,13,18,.55) 60%,rgba(13,13,18,.35))}
.hero .container{position:relative;z-index:2;padding-top:3.2rem;padding-bottom:3.2rem}
.hero h1 .hl{color:var(--gold)}
.hero p.lead{max-width:640px;color:#d8d8e4;font-size:1.06rem}
.hero-badges{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.1rem 0 1.4rem}
.hero-badges span{background:rgba(255,255,255,.08);border:1px solid var(--line);color:#ffe9a8;font-size:.8rem;padding:.32rem .8rem;border-radius:20px;font-weight:600}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}

/* ===== Sections ===== */
.section{padding:3.2rem 0}
.section.alt{background:linear-gradient(180deg,#12121a,#0d0d12)}
.sec-title{text-align:center;margin-bottom:.6rem}
.sec-title .kicker{color:var(--red);font-weight:800;text-transform:uppercase;letter-spacing:2px;font-size:.78rem}
.sec-title h2{margin:.3rem 0 .5rem}
.sec-title p{color:var(--grey);max-width:720px;margin:0 auto 2rem}
.grid{display:grid;gap:1.2rem}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:1.4rem;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-4px);border-color:var(--line)}
.card .ic{font-size:1.9rem;margin-bottom:.6rem}
.card h3{margin-top:0}
.card p{color:var(--grey);font-size:.93rem;margin-bottom:0}
.card-img{border-radius:14px;overflow:hidden;margin-bottom:1rem;border:1px solid rgba(255,255,255,.08)}
.pay-chip{display:flex;align-items:center;gap:.7rem;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.8rem 1rem}
.pay-chip .dot{width:12px;height:12px;border-radius:50%;flex:none}
.pay-chip b{color:#fff;font-size:.95rem}
.pay-chip small{color:var(--grey);display:block;font-size:.78rem}
.steps{counter-reset:st}
.step{position:relative;padding-left:3.4rem;margin-bottom:1.6rem}
.step::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;border-radius:50%;background:linear-gradient(180deg,#ffd44d,var(--gold-d));color:#3a2a00;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.step h3{margin:0 0 .3rem}
.step p{color:var(--grey);margin:0;font-size:.93rem}

/* FAQ */
.faq details{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:10px;margin-bottom:.7rem}
.faq summary{cursor:pointer;padding:1rem 1.2rem;font-weight:700;color:#fff;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::after{content:'+';color:var(--gold);font-size:1.4rem;font-weight:900;flex:none}
.faq details[open] summary::after{content:'−'}
.faq details p{padding:0 1.2rem 1rem;color:var(--grey);margin:0}

/* Tag cloud */
.tagcloud{display:flex;flex-wrap:wrap;gap:.55rem}
.tagcloud a{background:rgba(245,179,1,.1);border:1px solid var(--line);color:#ffe9a8;font-size:.82rem;padding:.35rem .9rem;border-radius:20px;font-weight:600}
.tagcloud a:hover{background:var(--gold);color:#3a2a00}

/* Search */
.searchbar{display:flex;gap:.5rem;max-width:560px;margin:0 auto}
.searchbar input{flex:1;padding:.75rem 1rem;border-radius:8px;border:1px solid var(--line);background:#101018;color:#fff;font-size:.95rem;min-width:0}
.searchbar input:focus{outline:2px solid var(--gold)}
.search-results{margin-top:1.4rem}
.search-results .sr-item{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:1rem 1.2rem;margin-bottom:.7rem}
.search-results .sr-item b{color:var(--gold)}
.search-results .sr-item p{color:var(--grey);font-size:.88rem;margin:.3rem 0 0}

/* Game cards */
.game-card{background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:14px;overflow:hidden;transition:transform .2s,border-color .2s}
.game-card:hover{transform:translateY(-4px);border-color:var(--gold)}
.game-card .thumb{aspect-ratio:16/9;overflow:hidden}
.game-card .thumb img{width:100%;height:100%;object-fit:cover}
.game-card .body{padding:1.1rem 1.2rem}
.game-card .body h3{margin:0 0 .4rem;font-size:1.05rem}
.game-card .body p{color:var(--grey);font-size:.87rem;margin-bottom:.8rem}
.game-card .meta{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:#9a9aad}
.game-card .meta .rtp{color:var(--green);font-weight:800;background:rgba(14,122,61,.15);padding:.15rem .6rem;border-radius:12px}

/* Article */
.article{max-width:820px;margin:0 auto}
.article h1{margin-bottom:.6rem}
.article .post-meta{color:#8d8da0;font-size:.85rem;margin-bottom:1.6rem;display:flex;gap:1rem;flex-wrap:wrap}
.article .feat{border-radius:14px;margin-bottom:1.8rem;border:1px solid rgba(255,255,255,.08)}
.article p{color:#d5d5e2}
.article li{color:#d5d5e2}
.callout{background:rgba(14,122,61,.12);border-left:4px solid var(--green);border-radius:0 10px 10px 0;padding:1rem 1.2rem;margin:1.4rem 0;color:#cfe9d8;font-size:.93rem}
.callout.warn{background:rgba(200,16,46,.12);border-left-color:var(--red);color:#f3cdd4}
.callout.gold{background:rgba(245,179,1,.1);border-left-color:var(--gold);color:#f7e6b8}

/* Breadcrumb */
.breadcrumb{font-size:.82rem;color:#8d8da0;padding:.8rem 0 0}
.breadcrumb a{color:#b9b9c6}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb .sep{margin:0 .45rem;color:#555}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--red-d),var(--red) 45%,var(--gold-d));border-radius:16px;padding:2.4rem 2rem;text-align:center;margin:2.5rem 0}
.cta-band h2{margin:0 0 .6rem;color:#fff}
.cta-band p{color:#ffe9c8;max-width:640px;margin:0 auto 1.4rem}

/* Forms */
.form-box{max-width:460px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:2rem}
.form-box label{display:block;font-size:.85rem;font-weight:700;color:#ffe9a8;margin:1rem 0 .3rem}
.form-box input{width:100%;padding:.75rem 1rem;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#101018;color:#fff;font-size:.95rem}
.form-box input:focus{outline:2px solid var(--gold)}
.form-box .btn{width:100%;margin-top:1.4rem}
.form-note{font-size:.8rem;color:var(--grey);text-align:center;margin-top:1rem}

/* Footer */
.site-footer{background:#0a0a10;border-top:2px solid var(--gold);padding:2.6rem 0 7.5rem;margin-top:3rem}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
.site-footer h4{color:var(--gold);font-size:.95rem;margin-bottom:.8rem}
.site-footer a{color:#a9a9bc;font-size:.87rem;display:block;margin-bottom:.45rem}
.site-footer a:hover{color:var(--gold)}
.site-footer p{color:#8d8da0;font-size:.85rem}
.footer-legal{border-top:1px solid rgba(255,255,255,.08);margin-top:2rem;padding-top:1.4rem;font-size:.78rem;color:#77778a;text-align:center}
.footer-legal .badge18{margin-bottom:.6rem}

/* ===== Floating bar (slot machine style) ===== */
.floatbar{position:fixed;left:0;right:0;bottom:0;z-index:1000;background:linear-gradient(180deg,#1a0d12,#0d0d12);border-top:2px solid var(--gold);padding:.55rem .8rem;display:flex;gap:.6rem;justify-content:center;box-shadow:0 -6px 24px rgba(0,0,0,.6)}
.fb-btn{position:relative;flex:1;max-width:300px;padding:.7rem 1rem;border-radius:12px;font-weight:900;font-size:1rem;letter-spacing:.5px;text-align:center;overflow:hidden;transition:transform .15s}
.fb-btn:hover{transform:translateY(-3px) scale(1.02)}
.fb-login{background:linear-gradient(180deg,#0f8a47,var(--green) 55%,var(--green-d));color:#fff;box-shadow:0 4px 16px rgba(14,122,61,.5)}
.fb-login:hover{color:#fff}
.fb-register{background:linear-gradient(180deg,#ffd44d,var(--gold) 55%,var(--gold-d));color:#3a2a00;box-shadow:0 4px 16px rgba(245,179,1,.5);animation:pulse 2s infinite}
.fb-register:hover{color:#3a2a00}
@keyframes pulse{0%,100%{box-shadow:0 4px 16px rgba(245,179,1,.5)}50%{box-shadow:0 4px 26px rgba(245,179,1,.85)}}
.fb-btn .reel{display:inline-block;margin-right:.4rem}
.coin{position:fixed;bottom:60px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe98a,var(--gold) 60%,var(--gold-d));box-shadow:0 0 10px rgba(245,179,1,.8);z-index:999;pointer-events:none;animation:coinfly 1.4s ease-in forwards}
.coin::after{content:'$';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:900;color:#7a5a00}
@keyframes coinfly{0%{transform:translateY(0) rotateY(0);opacity:1}70%{opacity:1}100%{transform:translateY(-160px) rotateY(720deg) scale(.4);opacity:0}}

/* Age modal */
.age-modal{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:1rem}
.age-box{background:var(--card);border:2px solid var(--gold);border-radius:16px;max-width:440px;width:100%;padding:2rem;text-align:center}
.age-box h2{margin-top:0}
.age-box p{color:var(--grey);font-size:.9rem}
.age-box .row{display:flex;gap:.8rem;margin-top:1.4rem}
.age-box .row .btn{flex:1}

/* Utility */
.text-c{text-align:center}
.mt-0{margin-top:0}
.note-legal{font-size:.8rem;color:#8d8da0;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.14);border-radius:10px;padding:.9rem 1.1rem;margin:1.4rem 0}

/* ===== Responsive ===== */
@media (max-width:960px){
  .grid.c4{grid-template-columns:repeat(2,1fr)}
  .grid.c3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .hamburger{display:block}
  .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#0d0d12;flex-direction:column;align-items:stretch;padding:.8rem;border-bottom:2px solid var(--gold)}
  .main-nav.open{display:flex}
  .main-nav a{padding:.7rem 1rem}
  .nav-cta .btn{padding:.5rem .9rem;font-size:.82rem}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .hero{min-height:380px}
  .section{padding:2.2rem 0}
  .fb-btn{font-size:.9rem;padding:.65rem .5rem}
  .cta-band{padding:1.8rem 1.2rem}
}