:root{
  --bg-void:#0b0e14;
  --bg-panel:#141b16;
  --bg-panel-raised:#1a2320;
  --gold:#d4af6a;
  --gold-bright:#f2cf8e;
  --gold-dim:#8a7141;
  --emerald:#1f6b52;
  --emerald-bright:#2f9c76;
  --ruby:#b8433f;
  --ivory:#efe9dc;
  --ivory-dim:#a8a597;
  --line:#2a332c;
  --shadow-deep: 0 30px 80px -20px rgba(0,0,0,0.7);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(47,156,118,0.10), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(212,175,106,0.08), transparent 55%),
    var(--bg-void);
  color:var(--ivory);
  font-family:'Manrope', sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
::selection{ background:var(--gold-dim); color:var(--bg-void); }
a{color:inherit; text-decoration:none;}
.mono{ font-family:'JetBrains Mono', monospace; }

.felt-noise{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.subdomain-bar{
  position:relative; z-index:20;
  background:#070907;
  border-bottom:1px solid var(--line);
  font-family:'JetBrains Mono', monospace;
  font-size:11.5px;
  letter-spacing:0.02em;
  color:var(--ivory-dim);
  padding:7px 24px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:6px;
}
.subdomain-bar .path span{ color:var(--gold); }
.subdomain-bar .badge{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--emerald-bright);
  border:1px solid rgba(47,156,118,0.35);
  background:rgba(47,156,118,0.08);
  padding:2px 9px; border-radius:20px;
}
.subdomain-bar .badge::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--emerald-bright); display:inline-block;}

header.main-nav{
  position:sticky; top:0; z-index:30;
  background:rgba(11,14,20,0.92);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
  row-gap:12px;
  padding:14px 24px;
}
.brand{ display:flex; align-items:center; gap:12px; order:1; }
.brand-mark{
  width:38px; height:38px; border-radius:50%;
  background: conic-gradient(from 200deg, var(--gold-dim), var(--gold-bright), var(--gold-dim), var(--emerald), var(--gold-dim));
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.4), 0 0 20px rgba(212,175,106,0.25);
  animation: spin-slow 14s linear infinite;
}
@keyframes spin-slow{ to{ transform: rotate(360deg); } }
.brand-word{ font-family:'Cinzel', serif; font-weight:700; font-size:19px; letter-spacing:0.06em; color:var(--ivory); }
.brand-word small{ display:block; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:0.18em; color:var(--gold); font-weight:600; }

nav.pages{
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:12px; padding:4px;
  order:3; flex-basis:100%; justify-content:center;
}
nav.pages button{
  font-family:'Manrope', sans-serif; font-weight:700; font-size:13px; letter-spacing:0.02em;
  color:var(--ivory-dim); background:transparent; border:none; padding:9px 14px; border-radius:8px;
  cursor:pointer; transition:.2s ease; white-space:nowrap;
}
nav.pages button:hover{ color:var(--ivory); }
nav.pages button.active{ color:var(--bg-void); background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 4px 14px rgba(212,175,106,0.3); }

.nav-dropdown{ position:relative; }
.nav-dropdown-trigger{
  font-family:'Manrope', sans-serif; font-weight:700; font-size:13px; letter-spacing:0.02em;
  color:var(--ivory-dim); background:transparent; border:none; padding:9px 14px; border-radius:8px;
  cursor:pointer; transition:.2s ease; display:flex; align-items:center; gap:5px; white-space:nowrap;
}
.nav-dropdown-trigger:hover{ color:var(--ivory); }
.nav-dropdown-trigger.active{ color:var(--bg-void); background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 4px 14px rgba(212,175,106,0.3); }
.nav-dropdown-trigger .caret{ font-size:9px; transition:.2s; }

/* Dropdown: display:none/block (bukan cuma opacity) supaya tidak pernah
   ikut mendorong layout normal-flow, apa pun kondisi rendering-nya. */
.nav-dropdown-menu{
  display:none;
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%);
  min-width:200px;
  background:var(--bg-panel-raised); border:1px solid var(--line); border-radius:12px;
  padding:8px; box-shadow:var(--shadow-deep);
  z-index:50;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu{
  display:block;
}
.nav-dropdown:hover .nav-dropdown-trigger .caret,
.nav-dropdown.open .nav-dropdown-trigger .caret{ transform:rotate(180deg); }
.nav-dropdown-menu a{
  display:block; padding:9px 12px; border-radius:8px; font-size:13px; font-weight:600;
  color:var(--ivory-dim); transition:.15s; white-space:nowrap;
}
.nav-dropdown-menu a:hover{ background:rgba(212,175,106,0.1); color:var(--gold-bright); }

.nav-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; order:2; }
.chip-balance{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:30px;
  padding:7px 14px 7px 8px;
}
.chip-icon{ width:22px; height:22px; border-radius:50%; background:radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-dim) 70%); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.3); }
.chip-balance .amt{ font-family:'JetBrains Mono', monospace; font-weight:700; font-size:14px; color:var(--gold-bright); }
.btn-topup{
  font-weight:800; font-size:12.5px; letter-spacing:0.02em;
  background:transparent; color:var(--emerald-bright); border:1px solid rgba(47,156,118,0.5);
  padding:9px 16px; border-radius:30px; cursor:pointer; transition:.2s;
}
.btn-topup:hover{ background:rgba(47,156,118,0.12); }

@media (max-width: 980px){
  header.main-nav{ padding:14px 18px; }
  nav.pages{ display:none; } /* replaced by hamburger + mobile-menu panel below */
  .nav-right{ width:100%; justify-content:space-between; }
}
@media (max-width: 560px){
  .brand-word{ font-size:16px; }
  .chip-balance .amt{ font-size:12.5px; }
  .btn-nav-sm{ padding:8px 12px; font-size:12px; }
}

/* ---------- Hamburger button (mobile only) ---------- */
.hamburger-btn{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:10px;
  background:var(--bg-panel); border:1px solid var(--line); color:var(--ivory);
  font-size:18px; cursor:pointer; flex-shrink:0;
}
@media (max-width:980px){
  .hamburger-btn{ display:flex; order:4; }
  .nav-right{ order:2; }
  .brand{ order:1; }
}

/* ---------- Mobile menu panel (accordion, normal document flow) ---------- */
.mobile-menu{
  display:none;
  background:var(--bg-panel-raised);
  border-bottom:1px solid var(--line);
  padding:8px 12px 16px;
}
.mobile-menu.open{ display:block; }
.mobile-menu-link{
  display:block; padding:14px 12px; border-radius:8px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px; color:var(--ivory);
}
.mobile-menu-link.active{
  color:var(--bg-void); background:linear-gradient(180deg,var(--gold-bright),var(--gold));
}
.mobile-accordion{ border-top:1px solid var(--line); }
.mobile-accordion:last-of-type{ border-bottom:1px solid var(--line); }
.mobile-accordion-trigger{
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:transparent; border:none; color:var(--ivory);
  font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px;
  padding:14px 12px; cursor:pointer;
}
.mobile-accordion-trigger.active{ color:var(--gold-bright); }
.mobile-accordion-trigger .plus{ color:var(--gold-bright); font-size:18px; transition:.2s; }
.mobile-accordion.open .mobile-accordion-trigger .plus{ transform:rotate(45deg); }
.mobile-accordion-panel{ display:none; padding:2px 0 10px 12px; }
.mobile-accordion.open .mobile-accordion-panel{ display:block; }
.mobile-accordion-panel a{
  display:block; padding:11px 12px; color:var(--ivory-dim); font-size:13.5px; border-radius:8px;
}
.mobile-accordion-panel a:hover{ background:rgba(212,175,106,0.1); color:var(--gold-bright); }

main{ position:relative; z-index:1; }
section{ padding:60px 32px; max-width:1180px; margin:0 auto; }
.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.22em; color:var(--gold); text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--gold-dim); }
h1,h2,h3{ font-family:'Cinzel', serif; font-weight:700; color:var(--ivory); }
.lede{ color:var(--ivory-dim); font-size:16px; line-height:1.7; max-width:60ch; }

.hero{ padding-top:64px; padding-bottom:60px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; }
.hero h1{ font-size:52px; line-height:1.12; margin-bottom:20px; }
.hero h1 em{ font-style:normal; color:transparent; background:linear-gradient(180deg,var(--gold-bright),var(--gold-dim)); -webkit-background-clip:text; background-clip:text; }
.hero .lede{ margin-bottom:32px; font-size:16.5px; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; }
.btn-primary{
  font-family:'Manrope',sans-serif; font-weight:800; font-size:14.5px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  color:var(--bg-void); padding:15px 26px; border-radius:10px; border:none; cursor:pointer;
  box-shadow:0 10px 30px -8px rgba(212,175,106,0.45);
  transition:.2s;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -8px rgba(212,175,106,0.6); }
.btn-ghost{
  font-family:'Manrope',sans-serif; font-weight:700; font-size:14.5px;
  background:transparent; color:var(--ivory); padding:15px 24px; border-radius:10px; border:1px solid var(--line); cursor:pointer; transition:.2s;
}
.btn-ghost:hover{ border-color:var(--gold-dim); color:var(--gold-bright); }

.disclaimer-strip{
  margin-top:34px; display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ivory-dim);
  border-left:2px solid var(--emerald); padding-left:12px;
}

.jackpot-card{
  background:linear-gradient(160deg, var(--bg-panel-raised), var(--bg-panel));
  border:1px solid var(--line); border-radius:22px; padding:34px;
  box-shadow:var(--shadow-deep); position:relative; overflow:hidden;
}
.jackpot-card::before{
  content:''; position:absolute; top:-40%; right:-30%; width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(212,175,106,0.16), transparent 70%);
}
.jackpot-label{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.16em; color:var(--ivory-dim); text-transform:uppercase; margin-bottom:10px;}
.jackpot-number{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:40px; color:var(--gold-bright); letter-spacing:0.02em; }
.jackpot-number .unit{ font-size:16px; color:var(--gold-dim); margin-left:6px; }
.jackpot-sub{ color:var(--ivory-dim); font-size:12.5px; margin-top:6px; margin-bottom:26px; }
.mini-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mini-card{ background:var(--bg-void); border:1px solid var(--line); border-radius:12px; padding:14px 10px; text-align:center; }
.mini-card .num{ font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--emerald-bright); font-size:17px; }
.mini-card .lbl{ font-size:10px; color:var(--ivory-dim); margin-top:4px; letter-spacing:0.04em;}

@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; }
  .hero h1{ font-size:36px; }
}

.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; flex-wrap:wrap; gap:14px;}
.game-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
@media (max-width:980px){ .game-grid{ grid-template-columns:repeat(2,1fr);} }
.game-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; transition:.25s;
  position:relative; display:block;
}
.game-card:hover{ transform:translateY(-4px); border-color:var(--gold-dim); box-shadow:0 16px 30px -12px rgba(0,0,0,0.6); }
.game-thumb{ height:110px; display:flex; align-items:center; justify-content:center; font-size:38px; }
.game-card.c-emerald .game-thumb{ background:linear-gradient(135deg,#2f9c76,#123a2c); }
.game-card.c-ruby .game-thumb{ background:linear-gradient(135deg,#b8433f,#3a1513); }
.game-card.c-gold .game-thumb{ background:linear-gradient(135deg,#d4af6a,#4a3a1a); }
.game-card.c-blue .game-thumb{ background:linear-gradient(135deg,#3d5aa8,#151d3a); }
.game-info{ padding:14px 16px 16px; }
.game-info .name{ font-weight:800; font-size:14.5px; margin-bottom:3px; }
.game-info .tag{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--ivory-dim); }
.rtp-tag{ position:absolute; top:10px; right:10px; background:rgba(0,0,0,0.55); color:var(--gold-bright); font-family:'JetBrains Mono',monospace; font-size:10px; padding:3px 8px; border-radius:20px; border:1px solid rgba(212,175,106,0.3); }

.machine-wrap{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:28px; }
@media (max-width:900px){ .machine-wrap{ grid-template-columns:1fr; } }
.machine{
  background:linear-gradient(170deg, var(--bg-panel-raised), var(--bg-panel));
  border:1px solid var(--line); border-radius:24px; padding:32px; box-shadow:var(--shadow-deep);
}
.reels{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; background:var(--bg-void); border-radius:16px; padding:20px; border:1px solid var(--line); margin-bottom:22px; }
.reel{ background:#070907; border-radius:10px; height:110px; display:flex; align-items:center; justify-content:center; font-size:52px; border:1px solid var(--line); overflow:hidden; }
.reel.spinning{ animation: reelblur .08s linear infinite; }
@keyframes reelblur{ 0%{filter:blur(0px);} 50%{filter:blur(3px);} 100%{filter:blur(0px);} }
.machine-controls{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.bet-control{ display:flex; align-items:center; gap:10px; background:var(--bg-void); border:1px solid var(--line); border-radius:12px; padding:8px 14px; }
.bet-control button{ background:var(--bg-panel-raised); border:1px solid var(--line); color:var(--ivory); width:28px; height:28px; border-radius:8px; cursor:pointer; font-weight:800;}
.bet-control .val{ font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--gold-bright); min-width:64px; text-align:center; }
.spin-btn{
  font-family:'Cinzel',serif; font-weight:700; font-size:15px; letter-spacing:0.04em;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:var(--bg-void);
  padding:16px 40px; border-radius:14px; border:none; cursor:pointer; box-shadow:0 10px 28px -6px rgba(212,175,106,0.5);
  transition:.15s;
}
.spin-btn:active{ transform:scale(0.97); }
.spin-btn:disabled{ opacity:0.5; cursor:not-allowed; }
.result-line{ margin-top:16px; min-height:22px; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--emerald-bright); text-align:center; }

.side-panel{ display:flex; flex-direction:column; gap:16px; }
.panel-box{ background:var(--bg-panel); border:1px solid var(--line); border-radius:16px; padding:20px; }
.panel-box h3{ font-size:15px; margin-bottom:12px; }
.paytable-row{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.paytable-row:last-child{ border-bottom:none; }
.paytable-row .sym{ font-size:20px; }
.paytable-row .mult{ font-family:'JetBrains Mono',monospace; color:var(--gold-bright); font-weight:700; }
.balance-box .amt{ font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:700; color:var(--gold-bright); }
.balance-box .lbl{ font-size:11px; color:var(--ivory-dim); letter-spacing:0.05em; margin-bottom:6px; }
.reset-link{ font-size:11.5px; color:var(--emerald-bright); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

.live-wrap{ display:grid; grid-template-columns:0.55fr 0.45fr; gap:28px; align-items:start; }
@media (max-width:900px){ .live-wrap{ grid-template-columns:1fr; } }
.wheel-stage{ background:linear-gradient(170deg,var(--bg-panel-raised),var(--bg-panel)); border:1px solid var(--line); border-radius:24px; padding:36px; display:flex; flex-direction:column; align-items:center; box-shadow:var(--shadow-deep); }
.wheel-outer{ width:260px; height:260px; border-radius:50%; position:relative; margin-bottom:22px; }
.wheel{ width:100%; height:100%; border-radius:50%; position:relative; transition: transform 3.2s cubic-bezier(.17,.67,.16,.99); box-shadow:0 0 0 8px var(--bg-void), 0 0 0 10px var(--gold-dim), inset 0 0 30px rgba(0,0,0,0.5);
  background: conic-gradient(
    var(--emerald) 0deg 16.36deg, #0b0e14 16.36deg 32.72deg,
    var(--ruby) 32.72deg 49.08deg, #0b0e14 49.08deg 65.44deg,
    var(--ruby) 65.44deg 81.8deg, #0b0e14 81.8deg 98.16deg,
    var(--ruby) 98.16deg 114.5deg, #0b0e14 114.5deg 130.9deg,
    var(--ruby) 130.9deg 147.3deg, #0b0e14 147.3deg 163.6deg,
    var(--emerald) 163.6deg 180deg, #0b0e14 180deg 196.3deg,
    var(--ruby) 196.3deg 212.7deg, #0b0e14 212.7deg 229.1deg,
    var(--ruby) 229.1deg 245.4deg, #0b0e14 245.4deg 261.8deg,
    var(--ruby) 261.8deg 278.1deg, #0b0e14 278.1deg 294.5deg,
    var(--ruby) 294.5deg 310.9deg, #0b0e14 310.9deg 327.2deg,
    var(--ruby) 327.2deg 343.6deg, #0b0e14 343.6deg 360deg
  );
}
.wheel-pin{ position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:16px solid var(--gold-bright); z-index:5; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.wheel-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--gold-bright),var(--gold-dim)); box-shadow:0 0 0 4px var(--bg-void); }
.bet-chips{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; justify-content:center; }
.chip-btn{ font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; padding:12px 22px; border-radius:12px; border:1px solid var(--line); background:var(--bg-void); color:var(--ivory); cursor:pointer; transition:.2s; }
.chip-btn[data-color="hijau"]{ border-color:rgba(47,156,118,0.5); color:var(--emerald-bright); }
.chip-btn[data-color="merah"]{ border-color:rgba(184,67,63,0.5); color:#e08a87; }
.chip-btn.selected{ transform:translateY(-3px); box-shadow:0 8px 18px -6px rgba(0,0,0,0.6); }
.chip-btn[data-color="hijau"].selected{ background:rgba(47,156,118,0.16); }
.chip-btn[data-color="merah"].selected{ background:rgba(184,67,63,0.16); }
.live-result{ font-family:'JetBrains Mono',monospace; font-size:13.5px; color:var(--ivory-dim); min-height:20px; }

.live-info .panel-box{ margin-bottom:16px; }
.history-dots{ display:flex; gap:6px; flex-wrap:wrap; }
.history-dot{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; }

.promo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:980px){ .promo-grid{ grid-template-columns:1fr; } }
.promo-card{ background:var(--bg-panel); border:1px solid var(--line); border-radius:18px; padding:26px; position:relative; overflow:hidden; }
.promo-card .ribbon{ position:absolute; top:16px; right:-30px; background:var(--emerald); color:#fff; font-size:10px; font-weight:800; letter-spacing:0.08em; padding:4px 34px; transform:rotate(35deg); }
.promo-card h3{ font-size:17px; margin:8px 0 10px; }
.promo-card p{ font-size:13.5px; color:var(--ivory-dim); line-height:1.6; margin-bottom:16px; }
.promo-card .claim{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--gold-bright); border:1px solid var(--gold-dim); border-radius:8px; padding:10px 16px; display:inline-block; cursor:pointer; }
.promo-card .claim.claimed{ color:var(--ivory-dim); border-color:var(--line); cursor:default; }

.tier-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:10px;}
@media (max-width:980px){ .tier-track{ grid-template-columns:1fr 1fr; } }
.tier-card{ background:var(--bg-panel); border:1px solid var(--line); border-radius:16px; padding:22px; text-align:center; }
.tier-card.active-tier{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 12px 30px -10px rgba(212,175,106,0.35); }
.tier-icon{ font-size:28px; margin-bottom:10px; }
.tier-card h4{ font-family:'Cinzel',serif; font-size:14px; letter-spacing:0.05em; margin-bottom:6px; }
.tier-card .req{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ivory-dim); }

footer{ border-top:1px solid var(--line); padding:44px 32px 30px; margin-top:40px; }
.footer-inner{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.footer-disclaimer{ max-width:620px; font-size:12px; color:var(--ivory-dim); line-height:1.8; }
.footer-disclaimer b{ color:var(--gold); }
.footer-links{ display:flex; gap:40px; flex-wrap:wrap; }
.footer-links .col h5{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em; color:var(--gold); margin-bottom:12px; }
.footer-links .col a{ display:block; font-size:13px; color:var(--ivory-dim); margin-bottom:9px; }
.footer-links .col a:hover{ color:var(--ivory); }
.footer-bottom{ max-width:1180px; margin:34px auto 0; padding-top:20px; border-top:1px solid var(--line); font-size:11px; color:var(--ivory-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--bg-panel-raised); border:1px solid var(--gold-dim); color:var(--gold-bright);
  font-family:'JetBrains Mono',monospace; font-size:12.5px; padding:12px 22px; border-radius:30px;
  z-index:100; transition:.3s; pointer-events:none; box-shadow:var(--shadow-deep);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Nav account area ---------- */
.btn-nav-sm{ padding:9px 18px; font-size:13px; }
.user-pill{
  display:flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:600;
  background:var(--bg-panel); border:1px solid var(--line); border-radius:30px; padding:8px 14px; color:var(--ivory);
}
.user-dot{ width:7px; height:7px; border-radius:50%; background:var(--emerald-bright); display:inline-block; }

/* ---------- Auth forms (login/registration) ---------- */
.auth-wrap{ max-width:440px; margin:0 auto; }
.auth-card{
  background:linear-gradient(170deg, var(--bg-panel-raised), var(--bg-panel));
  border:1px solid var(--line); border-radius:22px; padding:36px; box-shadow:var(--shadow-deep);
}
.auth-card h2{ font-size:24px; margin-bottom:8px; text-align:center; }
.auth-card .sub{ text-align:center; color:var(--ivory-dim); font-size:13px; margin-bottom:28px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.08em; color:var(--gold); margin-bottom:8px; text-transform:uppercase; }
.field input{
  width:100%; background:var(--bg-void); border:1px solid var(--line); border-radius:10px;
  padding:13px 14px; color:var(--ivory); font-family:'Manrope',sans-serif; font-size:14px; outline:none; transition:.2s;
}
.field input:focus{ border-color:var(--gold-dim); }
.auth-submit{
  width:100%; font-family:'Cinzel',serif; font-weight:700; font-size:14.5px; letter-spacing:0.03em;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:var(--bg-void);
  padding:14px; border-radius:10px; border:none; cursor:pointer; margin-top:6px;
  box-shadow:0 10px 26px -8px rgba(212,175,106,0.45); transition:.2s;
}
.auth-submit:hover{ transform:translateY(-1px); }
.auth-alt{ text-align:center; font-size:12.5px; color:var(--ivory-dim); margin-top:20px; }
.auth-alt a{ color:var(--gold-bright); font-weight:700; }
.auth-error{
  background:rgba(184,67,63,0.1); border:1px solid rgba(184,67,63,0.4); color:#e08a87;
  font-size:12.5px; padding:11px 14px; border-radius:10px; margin-bottom:18px;
}
.auth-success{
  background:rgba(47,156,118,0.1); border:1px solid rgba(47,156,118,0.4); color:var(--emerald-bright);
  font-size:12.5px; padding:11px 14px; border-radius:10px; margin-bottom:18px;
}
.auth-note{ margin-top:26px; font-size:11px; color:var(--ivory-dim); text-align:center; line-height:1.7; }

/* ---------- Provider / Game categories grid ---------- */
.provider-grid, .category-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media (max-width:980px){ .provider-grid, .category-grid{ grid-template-columns:repeat(2,1fr);} }
.provider-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:16px; padding:26px 18px; text-align:center; transition:.2s;
}
.provider-card:hover{ border-color:var(--gold-dim); transform:translateY(-3px); }
.provider-card .mark{ font-family:'Cinzel',serif; font-weight:700; font-size:18px; color:var(--gold-bright); margin-bottom:8px; }
.provider-card .count{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ivory-dim); }

.category-card{
  background:var(--bg-panel); border:1px solid var(--line); border-radius:16px; padding:24px; display:flex; align-items:center; gap:16px; transition:.2s;
}
.category-card:hover{ border-color:var(--gold-dim); transform:translateY(-3px); }
.category-card .icon{ font-size:28px; }
.category-card .name{ font-weight:800; font-size:14.5px; margin-bottom:3px; }
.category-card .desc{ font-size:12px; color:var(--ivory-dim); }

/* ---------- FAQ accordion ---------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; max-width:760px; }
.faq-item{ background:var(--bg-panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.faq-q{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 22px; cursor:pointer; font-weight:700; font-size:14.5px; user-select:none;
}
.faq-q .plus{ font-family:'JetBrains Mono',monospace; color:var(--gold-bright); font-size:18px; transition:.25s; flex-shrink:0; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a p{ padding:0 22px 18px; color:var(--ivory-dim); font-size:13.5px; line-height:1.7; }
.faq-item.open .faq-a{ max-height:220px; }

/* ---------- Simple content page (About / How to Play) ---------- */
.content-block{ max-width:760px; }
.content-block p{ color:var(--ivory-dim); font-size:15px; line-height:1.8; margin-bottom:18px; }
.step-list{ display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.step-item{ display:flex; gap:16px; background:var(--bg-panel); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.step-num{ font-family:'Cinzel',serif; font-weight:700; color:var(--gold-bright); font-size:20px; flex-shrink:0; width:32px; }
.step-item h4{ font-size:14.5px; margin-bottom:5px; }
.step-item p{ margin-bottom:0; font-size:13px; }
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0; }
@media (max-width:700px){ .about-stats{ grid-template-columns:1fr; } }

.game-thumb {
    width: 100%;
    height: 180px;           /* Sesuaikan tinggi sesuai keinginan */
    overflow: hidden;
    position: relative;
}

.thumb-image {
    width: 100%;
    height: 100%;
    object-fit: cover;       /* Agar gambar tidak gepeng */
    transition: all 0.3s ease;
}

.game-card:hover .thumb-image {
    transform: scale(1.08);
}
.games-description {
    margin-top: 40px;
    color: #ddd;
}

.section-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 30px;
    color: #fff;
}

.game-article {
    margin-bottom: 35px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    border-left: 5px solid #00ff9d;
}

.game-article h3 {
    color: #00ff9d;
    margin-top: 0;
}

.cta-bottom {
    text-align: center;
    font-size: 1.1rem;
    margin-top: 40px;
    font-weight: bold;
}
.service-area {
    margin: 60px 0;
    padding: 30px;
    background: rgba(0,0,0,0.6);
    border-radius: 16px;
}

.location-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 1.4rem;
}

.map-container {
    margin: 25px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.7);
}

.map-note {
    text-align: center;
    margin-top: 15px;
}
.faq-section {
    margin: 60px 0;
    padding: 40px 0;
}

.faq-item {
    background: rgba(0,0,0,0.7);
    margin-bottom: 12px;
    border-radius: 8px;
    overflow: hidden;
}

.faq-question {
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.faq-answer {
    padding: 0 20px 20px;
    display: none;
    line-height: 1.6;
}

.faq-item.active .faq-answer {
    display: block;
}
.trust-section {
    margin: 60px 0;
    padding: 40px 0;
    text-align: center;
}

.trust-subtitle {
    color: #aaa;
    margin-bottom: 40px;
    font-size: 1.2rem;
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.trust-card {
    background: rgba(0, 0, 0, 0.75);
    padding: 35px 25px;
    border-radius: 12px;
    border-top: 5px solid #00ff9d;
    transition: all 0.3s;
    height: 100%;
}

.trust-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 255, 157, 0.15);
}

.trust-card h3 {
    color: #fff;
    margin-bottom: 18px;
    font-size: 1.35rem;
}
.payment-section {
    margin: 60px 0;
    padding: 40px 0;
    text-align: center;
}

.payment-header .badge {
    background: #00ff9d;
    color: black;
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: bold;
}

.payment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 18px;
    margin-top: 35px;
}

.payment-card {
    background: rgba(0, 0, 0, 0.8);
    padding: 28px 15px;
    border-radius: 12px;
    transition: all 0.3s;
    border: 1px solid #222;
}

.payment-card:hover {
    transform: translateY(-8px);
    border-color: #00ff9d;
    box-shadow: 0 10px 25px rgba(0, 255, 157, 0.2);
}

.payment-icon {
    font-size: 2.2rem;
    margin-bottom: 12px;
}

.payment-card h4 {
    margin: 0;
    color: #fff;
    font-size: 1.1rem;
}

.payment-note {
    margin-top: 35px;
    color: #aaa;
    font-size: 1.05rem;
}
.providers-section {
    margin: 60px 0;
    padding: 40px 0;
}

.providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.provider-card {
    background: rgba(0, 0, 0, 0.8);
    padding: 30px;
    border-radius: 12px;
    border-top: 5px solid #00ff9d;
    transition: 0.4s;
}

.provider-card:hover {
    transform: translateY(-10px);
}

.provider-logo {
    font-size: 2rem;
    font-weight: bold;
    color: #00ff9d;
    margin-bottom: 15px;
}

.provider-desc {
    line-height: 1.7;
    color: #ddd;
    margin-bottom: 20px;
}

/* ---------- Slot theme gallery (image cards with baked-in captions) ---------- */
.slot-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:980px){ .slot-gallery{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .slot-gallery{ grid-template-columns:1fr; } }
.slot-gallery-card{
  display:block; border-radius:16px; overflow:hidden; border:1px solid var(--line);
  background:var(--bg-panel); transition:.25s; position:relative; cursor:pointer;
}
.slot-gallery-card img{ display:block; width:100%; height:auto; aspect-ratio:800/480; object-fit:cover; }
.slot-gallery-card:hover{ transform:translateY(-4px); border-color:var(--gold-dim); box-shadow:0 16px 30px -12px rgba(0,0,0,0.6); }
.slot-gallery-card.is-soon{ cursor:default; }
.slot-gallery-card.is-soon:hover{ transform:none; box-shadow:none; border-color:var(--line); }
.slot-gallery-card.is-soon img{ filter:saturate(0.6) brightness(0.85); }

.machine-wrap{ display:grid; grid-template-columns:1.3fr 0.7fr; gap:28px; }
@media (max-width:900px){ .machine-wrap{ grid-template-columns:1fr; } }
.machine{
  background:linear-gradient(170deg, var(--bg-panel-raised), var(--bg-panel));
  border:1px solid var(--line); border-radius:24px; padding:32px; box-shadow:var(--shadow-deep);
}
.reels{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; background:var(--bg-void); border-radius:16px; padding:20px; border:1px solid var(--line); margin-bottom:22px; }
.reel{ background:#070907; border-radius:10px; height:110px; display:flex; align-items:center; justify-content:center; font-size:52px; border:1px solid var(--line); overflow:hidden; }
.reel.spinning{ animation: reelblur .08s linear infinite; }
@keyframes reelblur{ 0%{filter:blur(0px);} 50%{filter:blur(3px);} 100%{filter:blur(0px);} }
.machine-controls{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.bet-control{ display:flex; align-items:center; gap:10px; background:var(--bg-void); border:1px solid var(--line); border-radius:12px; padding:8px 14px; }
.bet-control button{ background:var(--bg-panel-raised); border:1px solid var(--line); color:var(--ivory); width:28px; height:28px; border-radius:8px; cursor:pointer; font-weight:800;}
.bet-control .val{ font-family:'JetBrains Mono',monospace; font-weight:700; color:var(--gold-bright); min-width:64px; text-align:center; }
.spin-btn{
  font-family:'Cinzel',serif; font-weight:700; font-size:15px; letter-spacing:0.04em;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold)); color:var(--bg-void);
  padding:16px 40px; border-radius:14px; border:none; cursor:pointer; box-shadow:0 10px 28px -6px rgba(212,175,106,0.5);
  transition:.15s;
}
.spin-btn:active{ transform:scale(0.97); }
.spin-btn:disabled{ opacity:0.5; cursor:not-allowed; }
.result-line{ margin-top:16px; min-height:22px; font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--emerald-bright); text-align:center; }

.side-panel{ display:flex; flex-direction:column; gap:16px; }
.panel-box{ background:var(--bg-panel); border:1px solid var(--line); border-radius:16px; padding:20px; }
.panel-box h3{ font-size:15px; margin-bottom:12px; }
.paytable-row{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13px; }
.paytable-row:last-child{ border-bottom:none; }
.paytable-row .sym{ font-size:20px; }
.paytable-row .mult{ font-family:'JetBrains Mono',monospace; color:var(--gold-bright); font-weight:700; }
.balance-box .amt{ font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:700; color:var(--gold-bright); }
.balance-box .lbl{ font-size:11px; color:var(--ivory-dim); letter-spacing:0.05em; margin-bottom:6px; }
.reset-link{ font-size:11.5px; color:var(--emerald-bright); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

.live-wrap{ display:grid; grid-template-columns:0.55fr 0.45fr; gap:28px; align-items:start; }
@media (max-width:900px){ .live-wrap{ grid-template-columns:1fr; } }
.wheel-stage{ background:linear-gradient(170deg,var(--bg-panel-raised),var(--bg-panel)); border:1px solid var(--line); border-radius:24px; padding:36px; display:flex; flex-direction:column; align-items:center; box-shadow:var(--shadow-deep); }
.wheel-outer{ width:260px; height:260px; border-radius:50%; position:relative; margin-bottom:22px; }
.wheel{ width:100%; height:100%; border-radius:50%; position:relative; transition: transform 3.2s cubic-bezier(.17,.67,.16,.99); box-shadow:0 0 0 8px var(--bg-void), 0 0 0 10px var(--gold-dim), inset 0 0 30px rgba(0,0,0,0.5);
  background: conic-gradient(
    var(--emerald) 0deg 16.36deg, #0b0e14 16.36deg 32.72deg,
    var(--ruby) 32.72deg 49.08deg, #0b0e14 49.08deg 65.44deg,
    var(--ruby) 65.44deg 81.8deg, #0b0e14 81.8deg 98.16deg,
    var(--ruby) 98.16deg 114.5deg, #0b0e14 114.5deg 130.9deg,
    var(--ruby) 130.9deg 147.3deg, #0b0e14 147.3deg 163.6deg,
    var(--emerald) 163.6deg 180deg, #0b0e14 180deg 196.3deg,
    var(--ruby) 196.3deg 212.7deg, #0b0e14 212.7deg 229.1deg,
    var(--ruby) 229.1deg 245.4deg, #0b0e14 245.4deg 261.8deg,
    var(--ruby) 261.8deg 278.1deg, #0b0e14 278.1deg 294.5deg,
    var(--ruby) 294.5deg 310.9deg, #0b0e14 310.9deg 327.2deg,
    var(--ruby) 327.2deg 343.6deg, #0b0e14 343.6deg 360deg
  );
}
.wheel-pin{ position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:9px solid transparent; border-right:9px solid transparent; border-top:16px solid var(--gold-bright); z-index:5; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.wheel-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:50%; background:radial-gradient(circle at 35% 30%,var(--gold-bright),var(--gold-dim)); box-shadow:0 0 0 4px var(--bg-void); }
.bet-chips{ display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; justify-content:center; }
.chip-btn{ font-family:'Manrope',sans-serif; font-weight:800; font-size:13px; padding:12px 22px; border-radius:12px; border:1px solid var(--line); background:var(--bg-void); color:var(--ivory); cursor:pointer; transition:.2s; }
.chip-btn[data-color="green"]{ border-color:rgba(47,156,118,0.5); color:var(--emerald-bright); }
.chip-btn[data-color="red"]{ border-color:rgba(184,67,63,0.5); color:#e08a87; }
.chip-btn.selected{ transform:translateY(-3px); box-shadow:0 8px 18px -6px rgba(0,0,0,0.6); }
.chip-btn[data-color="green"].selected{ background:rgba(47,156,118,0.16); }
.chip-btn[data-color="red"].selected{ background:rgba(184,67,63,0.16); }
.live-result{ font-family:'JetBrains Mono',monospace; font-size:13.5px; color:var(--ivory-dim); min-height:20px; }

.live-info .panel-box{ margin-bottom:16px; }
.history-dots{ display:flex; gap:6px; flex-wrap:wrap; }
.history-dot{ width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; }

.promo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:980px){ .promo-grid{ grid-template-columns:1fr; } }
.promo-card{ background:var(--bg-panel); border:1px solid var(--line); border-radius:18px; padding:26px; position:relative; overflow:hidden; }
.promo-card .ribbon{ position:absolute; top:16px; right:-30px; background:var(--emerald); color:#fff; font-size:10px; font-weight:800; letter-spacing:0.08em; padding:4px 34px; transform:rotate(35deg); }
.promo-card h3{ font-size:17px; margin:8px 0 10px; }
.promo-card p{ font-size:13.5px; color:var(--ivory-dim); line-height:1.6; margin-bottom:16px; }
.promo-card .claim{ font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:var(--gold-bright); border:1px solid var(--gold-dim); border-radius:8px; padding:10px 16px; display:inline-block; cursor:pointer; }
.promo-card .claim.claimed{ color:var(--ivory-dim); border-color:var(--line); cursor:default; }

.tier-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:10px;}
@media (max-width:980px){ .tier-track{ grid-template-columns:1fr 1fr; } }
.tier-card{ background:var(--bg-panel); border:1px solid var(--line); border-radius:16px; padding:22px; text-align:center; }
.tier-card.active-tier{ border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), 0 12px 30px -10px rgba(212,175,106,0.35); }
.tier-icon{ font-size:28px; margin-bottom:10px; }
.tier-card h4{ font-family:'Cinzel',serif; font-size:14px; letter-spacing:0.05em; margin-bottom:6px; }
.tier-card .req{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--ivory-dim); }

footer{ border-top:1px solid var(--line); padding:44px 32px 30px; margin-top:40px; }
.footer-inner{ max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.footer-disclaimer{ max-width:620px; font-size:12px; color:var(--ivory-dim); line-height:1.8; }
.footer-disclaimer b{ color:var(--gold); }
.footer-links{ display:flex; gap:40px; flex-wrap:wrap; }
.footer-links .col h5{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:0.1em; color:var(--gold); margin-bottom:12px; }
.footer-links .col a{ display:block; font-size:13px; color:var(--ivory-dim); margin-bottom:9px; }
.footer-links .col a:hover{ color:var(--ivory); }
.footer-bottom{ max-width:1180px; margin:34px auto 0; padding-top:20px; border-top:1px solid var(--line); font-size:11px; color:var(--ivory-dim); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); opacity:0;
  background:var(--bg-panel-raised); border:1px solid var(--gold-dim); color:var(--gold-bright);
  font-family:'JetBrains Mono',monospace; font-size:12.5px; padding:12px 22px; border-radius:30px;
  z-index:100; transition:.3s; pointer-events:none; box-shadow:var(--shadow-deep);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }