/* ============================================
   jlph slot - Core Stylesheet (v188- prefix)
   Palette: #1A1A2E (deep night) | #7CFC00 (electric green)
   Mobile-first. Root font 62.5% (1rem = 10px)
   ============================================ */
:root {
  --v188-bg:#1A1A2E; --v188-bg-2:#21213a; --v188-bg-3:#2a2a48;
  --v188-surface:#25254a; --v188-surface-hover:#30305a;
  --v188-primary:#7CFC00; --v188-primary-dark:#6ad500;
  --v188-gold:#FFD700; --v188-orange:#FF8C42; --v188-red:#FF4757; --v188-blue:#4A90FF;
  --v188-text:#FFFFFF; --v188-text-muted:#B8B8C8; --v188-text-soft:#8A8AB0;
  --v188-border:#353560; --v188-shadow:0 4px 18px rgba(0,0,0,.45);
  --v188-radius:12px; --v188-radius-lg:18px; --v188-transition:.28s ease;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:62.5%; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  font-family:'Segoe UI','Helvetica Neue',system-ui,-apple-system,sans-serif;
  background:var(--v188-bg); color:var(--v188-text); line-height:1.5; font-size:1.5rem;
  min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
a { color:var(--v188-primary); text-decoration:none; }
a:hover { color:var(--v188-gold); }
img { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; border:none; background:none; color:inherit; }
ul,ol { list-style:none; }

/* ---------- Layout ---------- */
.v188-wrapper { width:100%; max-width:430px; margin:0 auto; position:relative; }
.v188-container { width:100%; padding:0 1.4rem; }
.v188-section { padding:2.4rem 0; }
.v188-section-alt { background:var(--v188-bg-2); }

/* ---------- Header ---------- */
.v188-header {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background:rgba(26,26,46,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--v188-border);
  transition:box-shadow var(--v188-transition);
}
.v188-header-scrolled { box-shadow:0 2px 14px rgba(0,0,0,.6); }
.v188-header-row {
  max-width:430px; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; padding:0.8rem 1.4rem; gap:1rem;
}
.v188-logo { display:flex; align-items:center; gap:0.7rem; font-weight:800; font-size:1.7rem; color:var(--v188-text); flex-shrink:0; }
.v188-logo img { width:28px; height:28px; border-radius:6px; }
.v188-logo-text { color:var(--v188-primary); letter-spacing:0.4px; }
.v188-header-actions { display:flex; align-items:center; gap:0.6rem; }
.v188-menu-btn {
  width:36px; height:36px; border-radius:8px; display:flex;
  align-items:center; justify-content:center; color:var(--v188-text);
  font-size:2rem; background:var(--v188-surface); transition:background var(--v188-transition);
}
.v188-menu-btn:hover { background:var(--v188-surface-hover); }

/* ---------- Buttons ---------- */
.v188-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.8rem 1.4rem; font-size:1.35rem; font-weight:700;
  border-radius:999px; transition:transform var(--v188-transition),background var(--v188-transition),box-shadow var(--v188-transition);
  white-space:nowrap; min-height:38px; text-align:center;
}
.v188-btn-primary { background:linear-gradient(135deg,var(--v188-primary),var(--v188-primary-dark)); color:var(--v188-bg); box-shadow:0 4px 12px rgba(124,252,0,.35); }
.v188-btn-primary:hover { transform:translateY(-1px); color:var(--v188-bg); box-shadow:0 6px 18px rgba(124,252,0,.5); }
.v188-btn-ghost { background:transparent; color:var(--v188-text); border:1.5px solid var(--v188-primary); }
.v188-btn-ghost:hover { background:var(--v188-surface); color:var(--v188-text); }
.v188-btn-gold { background:linear-gradient(135deg,var(--v188-gold),var(--v188-orange)); color:#2a1a00; font-weight:800; }
.v188-btn-lg { padding:1.1rem 2rem; font-size:1.6rem; width:100%; }
.v188-text-link { color:var(--v188-primary); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.v188-text-link:hover { color:var(--v188-gold); }

/* ---------- Mobile menu ---------- */
.v188-mobile-menu {
  position:fixed; top:56px; left:0; right:0; z-index:9999;
  background:var(--v188-bg-2); border-bottom:1px solid var(--v188-border);
  max-height:0; overflow:hidden; transition:max-height .32s ease;
}
.v188-menu-open { max-height:540px; box-shadow:var(--v188-shadow); }
.v188-mobile-menu ul { padding:0.8rem 1.4rem 1.4rem; }
.v188-mobile-menu li { border-bottom:1px solid var(--v188-border); }
.v188-mobile-menu li:last-child { border-bottom:none; }
.v188-mobile-menu a { display:flex; align-items:center; gap:1rem; padding:1.1rem 0.4rem; color:var(--v188-text); font-size:1.4rem; font-weight:600; }
.v188-mobile-menu a:hover { color:var(--v188-primary); }
.v188-mobile-menu i { color:var(--v188-primary); width:22px; text-align:center; }

/* ---------- Main padding ---------- */
.v188-main { padding-top:58px; padding-bottom:80px; }

/* ---------- Hero / Carousel ---------- */
.v188-carousel { position:relative; overflow:hidden; background:var(--v188-bg-2); }
.v188-carousel-track { display:flex; transition:transform .6s cubic-bezier(.4,0,.2,1); }
.v188-carousel-slide { min-width:100%; position:relative; }
.v188-carousel-slide img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.v188-carousel-overlay {
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(26,26,46,.15) 0%,rgba(26,26,46,.82) 100%);
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.6rem;
}
.v188-carousel-title { font-size:2rem; font-weight:800; color:var(--v188-primary); margin-bottom:0.4rem; text-shadow:0 2px 8px rgba(0,0,0,.7); }
.v188-carousel-desc { color:var(--v188-text); font-size:1.3rem; margin-bottom:0.9rem; }
.v188-carousel-dots { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:5; }
.v188-carousel-dot { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.4); transition:background var(--v188-transition),transform var(--v188-transition); }
.v188-dot-active { background:var(--v188-primary); transform:scale(1.35); }
.v188-carousel-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.4); color:#fff; width:36px; height:36px;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; z-index:5;
}
.v188-carousel-arrow:hover { background:var(--v188-primary); color:var(--v188-bg); }
.v188-arrow-prev { left:8px; } .v188-arrow-next { right:8px; }

/* ---------- Hero CTA ---------- */
.v188-hero-cta { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; padding:1.2rem 1.4rem; background:linear-gradient(135deg,var(--v188-bg-3),var(--v188-bg-2)); }
.v188-hero-cta .v188-btn { width:100%; }

/* ---------- Section title ---------- */
.v188-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; padding:0 1.4rem; }
.v188-section-title { font-size:1.7rem; font-weight:800; color:var(--v188-text); display:flex; align-items:center; gap:0.6rem; }
.v188-section-title i { color:var(--v188-primary); }
.v188-section-more { color:var(--v188-primary); font-size:1.2rem; font-weight:600; }

/* ---------- Filter chips ---------- */
.v188-filters { display:flex; gap:0.6rem; padding:0 1.4rem 1rem; overflow-x:auto; scrollbar-width:none; }
.v188-filters::-webkit-scrollbar { display:none; }
.v188-filter-chip { padding:0.5rem 1.1rem; background:var(--v188-surface); color:var(--v188-text-muted); border-radius:999px; font-size:1.2rem; font-weight:600; white-space:nowrap; transition:all var(--v188-transition); }
.v188-filter-active { background:var(--v188-primary); color:var(--v188-bg); }

/* ---------- Game grid ---------- */
.v188-game-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.7rem; padding:0 1.4rem; }
.v188-game-card {
  background:var(--v188-surface); border-radius:var(--v188-radius);
  overflow:hidden; position:relative; border:1px solid var(--v188-border);
  transition:transform var(--v188-transition),box-shadow var(--v188-transition);
}
.v188-game-card:hover { transform:translateY(-2px); box-shadow:var(--v188-shadow); border-color:var(--v188-primary); }
.v188-game-img { width:100%; aspect-ratio:1; object-fit:cover; background:var(--v188-bg-3); }
.v188-game-name { padding:0.5rem 0.4rem 0.6rem; font-size:1.1rem; font-weight:600; text-align:center; color:var(--v188-text); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v188-game-badge { position:absolute; top:4px; left:4px; background:var(--v188-red); color:#fff; font-size:0.9rem; font-weight:700; padding:1px 6px; border-radius:4px; text-transform:uppercase; }
.v188-game-badge.v188-badge-hot { background:var(--v188-orange); }
.v188-game-badge.v188-badge-new { background:var(--v188-primary); color:var(--v188-bg); }

/* ---------- Content blocks ---------- */
.v188-content-block { background:var(--v188-bg-2); border-radius:var(--v188-radius-lg); padding:1.6rem; margin:1.2rem 1.4rem; border:1px solid var(--v188-border); }
.v188-content-block h2 { font-size:1.7rem; font-weight:800; color:var(--v188-primary); margin-bottom:0.8rem; display:flex; align-items:center; gap:0.6rem; }
.v188-content-block h3 { font-size:1.4rem; font-weight:700; color:var(--v188-text); margin:1rem 0 0.5rem; }
.v188-content-block p { color:var(--v188-text-muted); font-size:1.3rem; line-height:1.65; margin-bottom:0.8rem; }
.v188-content-block ul, .v188-content-block ol { padding-left:1.4rem; margin-bottom:0.8rem; }
.v188-content-block li { color:var(--v188-text-muted); font-size:1.3rem; margin-bottom:0.4rem; list-style:disc; }
.v188-content-block ol li { list-style:decimal; }
.v188-faq-item { border-bottom:1px solid var(--v188-border); padding:0.8rem 0; }
.v188-faq-item:last-child { border-bottom:none; }
.v188-faq-q { font-weight:700; color:var(--v188-text); margin-bottom:0.4rem; font-size:1.3rem; }
.v188-faq-a { color:var(--v188-text-muted); font-size:1.25rem; line-height:1.6; }

/* ---------- Feature cards ---------- */
.v188-feature-row { display:grid; grid-template-columns:repeat(2,1fr); gap:0.8rem; margin-top:1rem; }
.v188-feature-card { background:var(--v188-surface); padding:1.1rem; border-radius:var(--v188-radius); border:1px solid var(--v188-border); text-align:center; }
.v188-feature-card i { font-size:2.4rem; color:var(--v188-primary); margin-bottom:0.5rem; }
.v188-feature-card h4 { font-size:1.25rem; font-weight:700; margin-bottom:0.3rem; color:var(--v188-text); }
.v188-feature-card p { font-size:1.1rem; color:var(--v188-text-muted); line-height:1.4; }

/* ---------- RTP table ---------- */
.v188-rtp-table { width:100%; border-collapse:collapse; margin-top:0.8rem; font-size:1.2rem; }
.v188-rtp-table th, .v188-rtp-table td { padding:0.7rem 0.5rem; text-align:left; border-bottom:1px solid var(--v188-border); }
.v188-rtp-table th { color:var(--v188-primary); font-weight:700; }
.v188-rtp-table td { color:var(--v188-text-muted); }
.v188-rtp-bar { display:inline-block; height:6px; background:linear-gradient(90deg,var(--v188-primary),var(--v188-gold)); border-radius:3px; vertical-align:middle; margin-left:6px; }

/* ---------- Winners / Testimonials ---------- */
.v188-winner-card, .v188-testimonial { background:var(--v188-surface); padding:1rem; border-radius:var(--v188-radius); margin-bottom:0.7rem; border-left:3px solid var(--v188-primary); }
.v188-winner-row { display:flex; justify-content:space-between; align-items:center; gap:0.6rem; }
.v188-winner-name { font-weight:700; color:var(--v188-text); font-size:1.2rem; }
.v188-winner-amount { color:var(--v188-gold); font-weight:800; font-size:1.3rem; }
.v188-winner-meta { color:var(--v188-text-soft); font-size:1.05rem; margin-top:0.2rem; }
.v188-stars { color:var(--v188-gold); font-size:1.1rem; margin-bottom:0.3rem; }

/* ---------- Payment ---------- */
.v188-payment-row { display:flex; gap:0.7rem; flex-wrap:wrap; margin-top:0.8rem; }
.v188-payment-chip { background:var(--v188-surface); border:1px solid var(--v188-border); padding:0.6rem 1rem; border-radius:8px; font-size:1.15rem; font-weight:600; color:var(--v188-text); display:flex; align-items:center; gap:0.4rem; }
.v188-payment-chip i { color:var(--v188-primary); }

/* ---------- Promo banner ---------- */
.v188-promo-banner { background:linear-gradient(135deg,#4a1a8a 0%,#1A1A2E 100%); border:1px solid var(--v188-primary); border-radius:var(--v188-radius-lg); padding:1.6rem; margin:1.4rem; text-align:center; }
.v188-promo-banner h3 { color:var(--v188-gold); font-size:1.7rem; font-weight:800; margin-bottom:0.4rem; }
.v188-promo-banner p { color:var(--v188-text-muted); margin-bottom:1rem; }

/* ---------- Footer ---------- */
.v188-footer { background:var(--v188-bg-2); border-top:1px solid var(--v188-border); padding:2rem 1.4rem 2.4rem; margin-top:1.4rem; }
.v188-footer-brand { display:flex; align-items:center; gap:0.7rem; margin-bottom:1rem; }
.v188-footer-brand img { width:28px; height:28px; border-radius:6px; }
.v188-footer-brand-name { font-weight:800; color:var(--v188-primary); font-size:1.5rem; }
.v188-footer-desc { color:var(--v188-text-muted); font-size:1.2rem; line-height:1.6; margin-bottom:1.2rem; }
.v188-footer-links { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem 1rem; margin-bottom:1.2rem; }
.v188-footer-links a { color:var(--v188-text-muted); font-size:1.15rem; padding:0.35rem 0; }
.v188-footer-links a:hover { color:var(--v188-primary); }
.v188-footer-promos { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; margin:1rem 0; }
.v188-footer-promos .v188-btn { font-size:1.15rem; padding:0.7rem; }
.v188-footer-copy { text-align:center; color:var(--v188-text-soft); font-size:1.1rem; border-top:1px solid var(--v188-border); padding-top:1rem; margin-top:0.6rem; }

/* ---------- Bottom navigation ---------- */
.v188-bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:1000;
  background:rgba(21,21,38,.98); backdrop-filter:blur(12px);
  border-top:1px solid var(--v188-border);
  display:flex; justify-content:space-around; align-items:center;
  padding:0.4rem 0; height:62px;
}
.v188-bottom-nav-btn {
  position:relative; flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
  min-width:60px; min-height:58px; color:var(--v188-text-muted);
  font-size:1rem; font-weight:600;
  transition:color var(--v188-transition),transform var(--v188-transition);
}
.v188-bottom-nav-btn i, .v188-bottom-nav-btn span.material-icons-outlined { font-size:22px; }
.v188-bottom-nav-btn ion-icon { font-size:24px; }
.v188-bottom-nav-btn:hover { color:var(--v188-primary); transform:scale(1.05); }
.v188-nav-current { color:var(--v188-primary); }
.v188-nav-current i, .v188-nav-current span.material-icons-outlined, .v188-nav-current ion-icon { color:var(--v188-primary); }

/* ---------- Help pages ---------- */
.v188-page-hero { padding:2rem 1.4rem; background:linear-gradient(145deg,var(--v188-bg-3),var(--v188-bg)); border-bottom:1px solid var(--v188-border); }
.v188-page-kicker { color:var(--v188-primary); font-size:1.15rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:.5rem; }
.v188-page-title { font-size:2.2rem; line-height:1.18; font-weight:900; color:var(--v188-text); margin-bottom:.8rem; }
.v188-page-lead { color:var(--v188-text-muted); font-size:1.35rem; line-height:1.65; margin-bottom:1.2rem; }
.v188-step-list { display:grid; gap:.9rem; margin-top:1rem; }
.v188-step-card { background:var(--v188-surface); border:1px solid var(--v188-border); border-radius:var(--v188-radius); padding:1rem; display:flex; gap:.9rem; align-items:flex-start; }
.v188-step-num { width:30px; height:30px; border-radius:50%; background:var(--v188-primary); color:var(--v188-bg); display:flex; align-items:center; justify-content:center; font-weight:900; flex-shrink:0; }
.v188-step-card h3 { margin:0 0 .3rem; color:var(--v188-text); font-size:1.35rem; }
.v188-step-card p { margin:0; color:var(--v188-text-muted); font-size:1.2rem; line-height:1.55; }
.v188-alert-card { margin:1rem 1.4rem; padding:1.2rem; border-radius:var(--v188-radius); background:rgba(255,215,0,.08); border:1px solid rgba(255,215,0,.35); }
.v188-alert-card h2 { color:var(--v188-gold); font-size:1.55rem; margin-bottom:.5rem; }
.v188-alert-card p { color:var(--v188-text-muted); font-size:1.25rem; line-height:1.6; }
.v188-mini-grid { display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin-top:1rem; }
.v188-mini-card { background:var(--v188-surface); border:1px solid var(--v188-border); border-radius:var(--v188-radius); padding:1rem; }
.v188-mini-card i, .v188-mini-card span.material-icons-outlined, .v188-mini-card ion-icon { color:var(--v188-primary); font-size:2.2rem; margin-bottom:.4rem; }
.v188-mini-card h3 { color:var(--v188-text); font-size:1.25rem; margin-bottom:.35rem; }
.v188-mini-card p { color:var(--v188-text-muted); font-size:1.15rem; line-height:1.45; }
.v188-link-line { margin-top:.8rem; color:var(--v188-text-muted); font-size:1.25rem; line-height:1.6; }

/* ---------- Misc ---------- */
.v188-pill { display:inline-block; padding:0.3rem 0.8rem; background:var(--v188-surface); color:var(--v188-primary); border-radius:999px; font-size:1.1rem; font-weight:600; border:1px solid var(--v188-border); }

/* ---------- Responsive ---------- */
@media (min-width:769px) {
  .v188-bottom-nav { display:none; }
  .v188-main { padding-bottom:0; }
  .v188-wrapper { max-width:720px; }
}
@media (max-width:360px) {
  .v188-game-grid { grid-template-columns:repeat(2,1fr); }
  .v188-feature-row, .v188-footer-links, .v188-footer-promos { grid-template-columns:1fr; }
}