/* Simsinos brand palette : violet / or */
:root{
  --bg:#1B0044;
  --bg-2:#39007C;
  --bg-3:#10081C;
  --purple-700:#5715B4;
  --purple-600:#673B9A;
  --purple-400:#986AD1;
  --purple-300:#9952FF;
  --gold:#FFB80E;
  --gold-2:#FDB300;
  --orange:#FF9D00;
  --red:#C8102E;
  --green:#0B6623;
  --text:#EDE7F6;
  --text-dim:rgba(237,231,246,.72);
  --border:rgba(152,106,209,.28);
  --max-w:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 50%,var(--bg-3) 100%);color:var(--text);font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.55;min-height:100%}
body{padding-bottom:96px}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 18px}
.gold{color:var(--gold)}
.muted{color:var(--text-dim)}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:rgba(27,0,68,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;gap:18px}
.site-logo img{height:46px;width:auto;max-width:200px;object-fit:contain}
.main-nav{display:flex;gap:6px;align-items:center}
.main-nav a,.main-nav span{color:var(--text);font-weight:600;padding:8px 14px;border-radius:30px;font-size:.94em;letter-spacing:.2px;text-decoration:none;transition:background .15s, color .15s}
.main-nav a:hover{background:rgba(152,106,209,.18);color:var(--gold)}
.header-cta{display:flex;gap:10px;align-items:center}
.lang-switch{color:var(--text);font-weight:600;padding:7px 12px;border-radius:30px;background:rgba(152,106,209,.22);font-size:.82em;text-transform:uppercase;letter-spacing:1px}
.btn-cta,.btn-cta:link,.btn-cta:visited{
  display:inline-block;
  padding:12px 28px;
  border-radius:50px;
  background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);
  color:#1B0044 !important;
  font-weight:800;
  font-size:.98em;
  text-decoration:none;
  letter-spacing:.3px;
  box-shadow:0 4px 22px rgba(255,184,14,.38);
  position:relative;
  overflow:hidden;
  transition:transform .15s, box-shadow .15s;
  animation:pulse-gold 2.4s ease-in-out infinite;
}
.btn-cta::before{
  content:"";
  position:absolute;
  top:0;left:-130%;
  width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-22deg);
  animation:shine 3.5s linear infinite;
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,184,14,.55)}
@keyframes pulse-gold{0%,100%{box-shadow:0 4px 22px rgba(255,184,14,.38)}50%{box-shadow:0 6px 28px rgba(255,184,14,.6)}}
@keyframes shine{0%{left:-130%}55%,100%{left:130%}}

/* HERO */
.hero{padding:48px 0 56px;background:radial-gradient(ellipse at 25% 0%,rgba(87,21,180,.55) 0%,transparent 55%),radial-gradient(ellipse at 80% 30%,rgba(255,184,14,.16) 0%,transparent 50%);}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}
.hero h1{font-family:'Playfair Display',Georgia,serif;font-size:2.6em;line-height:1.12;color:var(--gold);letter-spacing:.2px;text-shadow:0 4px 24px rgba(0,0,0,.45)}
.hero .tagline{font-size:1.12em;margin:16px 0 22px;color:var(--text)}
.hero .stats-inline{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 24px}
.hero .stats-inline .pill{background:rgba(152,106,209,.18);border:1px solid var(--border);color:var(--gold);padding:6px 14px;border-radius:30px;font-weight:700;font-size:.9em}
.hero-cta-block{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-cta-block .legal{color:var(--text-dim);font-size:.8em;margin-top:10px;flex:1 1 100%}
.hero-image{position:relative;text-align:center}
.hero-image img{margin:0 auto;max-width:600px;width:100%;height:auto;border-radius:16px;border:1px solid var(--border);box-shadow:0 18px 50px rgba(0,0,0,.55)}

/* USP STRIP */
.usp-strip{background:rgba(57,0,124,.55);padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.usp-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
.usp strong{display:block;color:var(--gold);font-family:'Playfair Display',Georgia,serif;font-size:1.7em;letter-spacing:.4px;margin-bottom:2px}
.usp span{color:var(--text);font-size:.92em}

/* SECTIONS */
section{padding:46px 0}
section h2{font-family:'Playfair Display',Georgia,serif;color:var(--gold);text-align:center;font-size:2em;letter-spacing:.4px;margin-bottom:24px}
section h3{font-family:'Playfair Display',Georgia,serif;color:var(--text);font-size:1.35em;margin:18px 0 8px}

/* RATINGS */
.ratings{padding:42px 0}
.ratings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.rating{background:rgba(152,106,209,.12);border:1px solid var(--border);padding:18px;border-radius:14px;text-align:center}
.rating h3{font-size:1em;margin:0 0 6px;color:var(--text)}
.rating .stars{color:var(--gold);font-size:1.2em;letter-spacing:1px;margin-bottom:4px}
.rating .score{font-family:'Playfair Display',Georgia,serif;color:var(--gold);font-size:1.6em;font-weight:700}

/* FEATURES + IMG */
.features{padding:46px 0}
.features-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center}
.features-list{list-style:none;padding:0}
.features-list li{padding:10px 0 10px 28px;position:relative;color:var(--text);font-size:1em}
.features-list li:before{content:"\2728";position:absolute;left:0;color:var(--gold)}
.features-img img{max-width:600px;width:100%;height:auto;margin:0 auto;border-radius:16px;border:1px solid var(--border);box-shadow:0 14px 40px rgba(0,0,0,.5)}

/* GAMES GRID */
.games{padding:46px 0}
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.game{background:rgba(152,106,209,.12);border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center;transition:transform .15s, background .15s}
.game:hover{transform:translateY(-3px);background:rgba(255,184,14,.12);border-color:var(--gold)}
.game-icon{font-size:2.2em;margin-bottom:6px}
.game-name{color:var(--gold);font-weight:700;font-size:1.05em;margin-bottom:2px;letter-spacing:.2px}
.game-info{color:var(--text-dim);font-size:.86em}

/* BONUS TABLE */
.bonus-table{padding:46px 0}
table.specs{width:100%;border-collapse:collapse;background:rgba(57,0,124,.55);border-radius:14px;overflow:hidden;border:1px solid var(--border)}
table.specs th,table.specs td{padding:13px 16px;text-align:left;border-bottom:1px solid rgba(152,106,209,.18);color:var(--text)}
table.specs th{background:rgba(87,21,180,.55);color:var(--gold);font-weight:700;font-family:'Playfair Display',Georgia,serif;letter-spacing:.3px}
table.specs tr:last-child td{border-bottom:none}
table.specs strong{color:var(--gold)}

/* VIP */
.vip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.vip-card{background:linear-gradient(135deg,rgba(87,21,180,.55) 0%,rgba(27,0,68,.55) 100%);border:1px solid var(--border);padding:18px 12px;border-radius:14px;text-align:center}
.vip-card strong{display:block;color:var(--gold);font-family:'Playfair Display',Georgia,serif;font-size:1.25em;margin-bottom:6px}
.vip-card span{color:var(--text);font-size:.88em;display:block;line-height:1.4}

/* FAQ */
.faq-list{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
.faq-list details{background:rgba(57,0,124,.55);border:1px solid var(--border);padding:14px 18px;border-radius:12px;cursor:pointer}
.faq-list summary{font-weight:700;color:var(--gold);list-style:none;position:relative;padding-right:26px;cursor:pointer;font-size:1.02em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;right:0;top:0;font-size:1.4em;color:var(--text)}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list details p{margin-top:10px;color:var(--text);font-size:.95em}

/* CTA SECTION (final) */
.cta-final{padding:56px 0;text-align:center;background:radial-gradient(ellipse at 50% 50%,rgba(255,184,14,.16) 0%,transparent 65%)}
.cta-final h2{font-size:2.2em;margin-bottom:8px}
.cta-final p{color:var(--text);margin-bottom:22px;font-size:1.05em}

/* FOOTER */
.site-footer{background:#10081C;padding:42px 0 22px;margin-top:36px;border-top:1px solid var(--border)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:36px;margin-bottom:30px}
.foot-col h3,.foot-col h4{font-family:'Playfair Display',Georgia,serif;color:var(--gold);font-size:1.05em;letter-spacing:.4px;margin-bottom:12px}
.foot-col p,.foot-col li{color:var(--text-dim);font-size:.92em;line-height:1.6}
.foot-col ul{list-style:none}
.foot-col a{color:var(--gold);text-decoration:none}
.foot-col a:hover{color:var(--gold-2)}
.foot-bottom{border-top:1px solid var(--border);padding-top:20px;text-align:center;color:var(--text-dim);font-size:.82em;line-height:1.7}
.foot-bottom .badges{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.foot-bottom .badge{padding:5px 12px;background:rgba(152,106,209,.22);border:1px solid var(--border);border-radius:6px;font-size:.82em;color:var(--gold);font-weight:600}
.foot-mid-empty{min-height:1px}

/* BOTTOM BAR */
.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:99;background:linear-gradient(135deg,#1B0044 0%,#39007C 100%);border-top:2px solid var(--gold);padding:12px 16px;display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;box-shadow:0 -4px 18px rgba(0,0,0,.5)}
.bottom-bar-info{display:flex;align-items:center;gap:14px}
.bottom-bar-info img{height:30px;width:auto}
.bottom-bar-text{display:flex;flex-direction:column;line-height:1.25}
.bottom-bar-text .b1{color:var(--gold);font-weight:800;font-size:1em;letter-spacing:.3px}
.bottom-bar-text .b2{color:var(--text-dim);font-size:.82em}
.bottom-bar-text .b2 .age{color:var(--red);font-weight:700;margin-right:6px}
.bottom-bar .btn-cta{padding:10px 24px;font-size:.96em}

/* RESPONSIVE */
@media (max-width:991px){
  .hero-grid,.features-grid{grid-template-columns:1fr;gap:28px}
  .hero h1{font-size:2em}
  .usp-strip .wrap{grid-template-columns:repeat(2,1fr);gap:16px}
  .foot-grid{grid-template-columns:1fr;gap:24px}
  .foot-mid-empty{display:none}
}
@media (max-width:640px){
  body{padding-bottom:118px}
  .hero h1{font-size:1.65em}
  .main-nav{display:none}
  .header-cta .lang-switch{display:none}
  .bottom-bar{padding:10px 12px;gap:10px}
  .bottom-bar-text .b2{display:none}
  .bottom-bar .btn-cta{padding:9px 18px;font-size:.92em}
  section{padding:32px 0}
  section h2{font-size:1.5em}
  .cta-final h2{font-size:1.6em}
}


/* ========================================
   Table : scrollable wrapper on small screens
   ======================================== */
.table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0; border-radius:14px; max-width:100%; }
.table-wrap table.specs { margin:0; min-width:560px; }
.table-wrap::-webkit-scrollbar { height:6px; }
.table-wrap::-webkit-scrollbar-thumb { background:var(--gold-2); border-radius:3px; }

/* ========================================
   Side drawer menu + hamburger
   ======================================== */
.hamburger-btn { position:fixed; top:14px; left:14px; z-index:200; background:rgba(57,0,124,.92); color:var(--gold); border:1px solid var(--border); padding:6px 12px; border-radius:10px; font-size:1.4em; cursor:pointer; line-height:1; backdrop-filter:blur(6px); transition:background .15s, transform .15s; }
.hamburger-btn:hover { background:rgba(87,21,180,.95); transform:scale(1.06); }
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:300; opacity:0; pointer-events:none; transition:opacity .25s; backdrop-filter:blur(2px); }
.drawer-overlay.open { opacity:1; pointer-events:auto; }
.side-drawer { position:fixed; top:0; left:0; bottom:0; width:min(380px,88vw); background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 60%,var(--bg-3) 100%); z-index:301; transform:translateX(-110%); transition:transform .3s ease; box-shadow:6px 0 30px rgba(0,0,0,.55); padding:24px 22px; display:flex; flex-direction:column; gap:18px; overflow-y:auto; }
.side-drawer.open { transform:translateX(0); }
.drawer-close { position:absolute; top:14px; right:14px; background:none; border:0; color:var(--text); font-size:1.8em; cursor:pointer; padding:6px 12px; line-height:1; font-family:inherit; }
.drawer-close:hover { color:var(--gold); }
.drawer-header { text-align:center; padding-top:14px; padding-bottom:6px; }
.drawer-header img { max-width:220px; width:80%; height:auto; margin:0 auto; }
.drawer-cta { display:flex; flex-direction:column; gap:12px; padding:6px 0; }
.drawer-cta .btn-cta { width:100%; text-align:center; animation:none; }
.drawer-cta .btn-ghost { width:100%; padding:13px; border:2px solid var(--gold); color:var(--gold) !important; background:transparent; border-radius:50px; text-align:center; font-weight:800; text-decoration:none; font-size:1em; display:inline-block; }
.drawer-cta .btn-ghost:hover { background:rgba(255,184,14,.12); }
.drawer-nav { display:flex; flex-direction:column; gap:6px; padding:6px 0; }
.drawer-nav a { display:flex; flex-direction:column; align-items:center; padding:14px 12px; color:var(--text); text-decoration:none; font-weight:700; border-radius:10px; gap:6px; }
.drawer-nav a:hover { background:rgba(255,184,14,.12); color:var(--gold); }
.drawer-nav .icon { font-size:1.8em; line-height:1; }
.drawer-foot { margin-top:auto; padding-top:18px; border-top:1px solid var(--border); display:flex; justify-content:center; gap:14px; align-items:center; }
.drawer-foot .lang-pill { padding:6px 16px; border:1px solid var(--text); border-radius:30px; color:var(--text); font-weight:700; font-size:.92em; }
.drawer-foot .search-btn { background:none; border:0; color:var(--text); font-size:1.2em; cursor:pointer; padding:6px 10px; border-radius:30px; font-family:inherit; }
.drawer-foot .search-btn:hover { color:var(--gold); }
@media (max-width:991px) {
  .site-header .main-nav { display:none; }
  .site-header .wrap { padding-left:60px; }
}


/* ========================================
   Mobile : prevent horizontal scroll
   ======================================== */
html, body { overflow-x: hidden; }
.wrap { box-sizing: border-box; }
img, table { max-width: 100%; }
.features-grid > * { min-width: 0; }
@media (max-width: 991px) {
  .table-wrap table.specs { min-width: 0; width: 100%; }
  .hero h1 { word-wrap: break-word; overflow-wrap: anywhere; }
  .hero-image img { max-width: 100%; }
  .site-header .wrap { padding-left: 56px; padding-right: 14px; }
}