/* ============================================================
   LTE4D — Premium Ruby theme · Mobile-first
   ============================================================ */

:root {
  /* Surfaces — warm dark casino vibe */
  --bg:         #170810;
  --bg-2:       #220c14;
  --bg-3:       #2e1118;
  --surface:    #261019;
  --border:     #4a1d2a;
  --border-lt:  #5e2535;

  /* Text */
  --text:       #fff5f0;
  --text-dim:   #c0a8a8;
  --text-mute:  #8a7070;

  /* Bright Red + Orange — "Fun Casino" gradient */
  --ruby:       #ff1744;     /* bright red primary */
  --ruby-lt:    #ff4d6d;
  --ruby-dk:    #c4001d;
  --orange:     #ff8c00;
  --orange-lt:  #ffab40;
  --orange-dk:  #e65100;
  --ruby-glow:  rgba(255, 23, 68, 0.5);
  --primary-grad:    linear-gradient(135deg, #ff1744 0%, #ff8c00 100%);
  --primary-grad-rv: linear-gradient(135deg, #ff8c00 0%, #ff1744 100%);

  /* Gold (featured + star ratings) */
  --gold:       #ffc107;
  --gold-lt:    #ffd54f;
  --gold-dk:    #b8860b;

  /* Semantic */
  --hot:        #00e676;
  --warm:       #ffb300;
  --cold:       #ff5252;

  --radius:     14px;
  --radius-md:  10px;
  --radius-sm:  8px;
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow:     0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 16px 48px rgba(0, 0, 0, 0.55);
  --container:  1200px;

  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% -20%, rgba(255, 140, 0, 0.15), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 30%, rgba(255, 23, 68, 0.12), transparent 50%),
    radial-gradient(ellipse 60% 50% at 0% 80%, rgba(255, 140, 0, 0.08), transparent 50%);
  background-attachment: fixed;
}

/* Slot-themed decorative pattern overlay (subtle, doesn't disturb content) */
body::before {
  content: ""; position: fixed; inset: 0;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255, 193, 7, 0.06) 0, transparent 2px),
    radial-gradient(circle at 70% 45%, rgba(255, 193, 7, 0.05) 0, transparent 3px),
    radial-gradient(circle at 40% 75%, rgba(255, 23, 68, 0.05) 0, transparent 2px),
    radial-gradient(circle at 85% 85%, rgba(255, 140, 0, 0.05) 0, transparent 3px),
    radial-gradient(circle at 10% 50%, rgba(255, 193, 7, 0.04) 0, transparent 2px);
  background-size: 250px 250px, 320px 320px, 180px 180px, 280px 280px, 200px 200px;
  pointer-events: none; z-index: 0;
  opacity: 0.7;
}
body > * { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; border: 0; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) { .container { padding: 0 24px; } }

@media (max-width: 859px) { body { padding-bottom: 68px; } }

/* ---------- Header ---------- */
.header {
  background: rgba(12, 10, 15, 0.72);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-bottom: 1px solid rgba(45, 34, 48, 0.6);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; gap: 16px;
}
@media (min-width: 768px) { .header-inner { height: 68px; } }

.brand img { height: 30px; }
@media (min-width: 768px) { .brand img { height: 36px; } }

.nav { display: none; gap: 4px; }
@media (min-width: 860px) {
  .nav { display: flex; }
  .nav a {
    padding: 8px 14px; border-radius: 8px;
    font-size: 13px; font-weight: 500; color: var(--text-dim);
    transition: color 0.15s, background 0.15s;
  }
  .nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
  .nav a.active { color: var(--ruby-lt); background: rgba(225, 29, 72, 0.1); }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 18px; border-radius: 10px;
  font-weight: 600; font-size: 13px; min-height: 40px;
  transition: 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary-grad);
  color: #fff;
  box-shadow: 0 2px 12px rgba(255, 23, 68, 0.45), inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 2px rgba(196, 0, 29, 0.5);
}
.btn-primary:hover {
  transform: translateY(-1px);
  background: var(--primary-grad-rv);
  box-shadow: 0 6px 22px rgba(255, 140, 0, 0.55);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost { border: 1px solid var(--border-lt); color: var(--text); }
.btn-ghost:hover { border-color: var(--ruby); color: var(--ruby-lt); }

/* ---------- Hero — Fun Casino ---------- */
.hero {
  padding: 36px 0 32px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 15% 25%, rgba(255, 23, 68, 0.45), transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(255, 140, 0, 0.40), transparent 40%),
    radial-gradient(circle at 50% 100%, rgba(255, 193, 7, 0.18), transparent 50%),
    linear-gradient(180deg, rgba(255, 23, 68, 0.08), transparent);
}
@media (min-width: 768px) { .hero { padding: 64px 0 56px; } }

/* Light rays bursting from center-top */
.hero::before {
  content: ""; position: absolute; top: -30%; left: 50%;
  width: 800px; height: 800px; transform: translateX(-50%);
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(255, 193, 7, 0.08) 30deg,
      transparent 60deg,
      rgba(255, 23, 68, 0.06) 90deg,
      transparent 120deg,
      rgba(255, 140, 0, 0.08) 150deg,
      transparent 180deg,
      rgba(255, 193, 7, 0.06) 210deg,
      transparent 240deg,
      rgba(255, 23, 68, 0.08) 270deg,
      transparent 300deg,
      rgba(255, 140, 0, 0.06) 330deg,
      transparent 360deg);
  animation: rays-spin 30s linear infinite;
  pointer-events: none; opacity: 0.85;
}
@keyframes rays-spin { to { transform: translateX(-50%) rotate(360deg); } }

/* Floating sparkles in hero */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 12% 30%, #ffc107 1.5px, transparent 2px),
    radial-gradient(circle at 75% 20%, #ff8c00 1px, transparent 1.5px),
    radial-gradient(circle at 30% 80%, #ffd54f 1.5px, transparent 2px),
    radial-gradient(circle at 85% 70%, #ff1744 1.5px, transparent 2px),
    radial-gradient(circle at 50% 50%, #ffc107 1px, transparent 1.5px),
    radial-gradient(circle at 18% 65%, #ffab40 1px, transparent 1.5px),
    radial-gradient(circle at 92% 45%, #ffd54f 1.5px, transparent 2px),
    radial-gradient(circle at 60% 90%, #ff1744 1px, transparent 1.5px);
  pointer-events: none;
  animation: sparkle-twinkle 3s ease-in-out infinite;
}
@keyframes sparkle-twinkle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.hero .container { position: relative; z-index: 2; }

/* Floating slot-themed decorations (🍒 7️⃣ 💎 ⭐ 🍀) */
.hero-decor {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  overflow: hidden;
}
.hero-decor span {
  position: absolute;
  font-size: 22px;
  opacity: 0.45;
  animation: float-up 8s ease-in-out infinite;
  filter: drop-shadow(0 2px 6px rgba(255, 23, 68, 0.4));
}
.hero-decor span:nth-child(1) { left: 8%;  top: 30%;  animation-delay: 0s;   font-size: 20px; }
.hero-decor span:nth-child(2) { left: 88%; top: 20%;  animation-delay: 1.2s; font-size: 26px; }
.hero-decor span:nth-child(3) { left: 78%; top: 65%;  animation-delay: 2.5s; font-size: 22px; }
.hero-decor span:nth-child(4) { left: 15%; top: 70%;  animation-delay: 0.8s; font-size: 24px; }
.hero-decor span:nth-child(5) { left: 45%; top: 12%;  animation-delay: 3s;   font-size: 18px; }
.hero-decor span:nth-child(6) { left: 55%; top: 80%;  animation-delay: 1.8s; font-size: 20px; }

@keyframes float-up {
  0%, 100% { transform: translateY(0) rotate(-5deg); opacity: 0.3; }
  50%      { transform: translateY(-14px) rotate(5deg); opacity: 0.7; }
}

.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255, 23, 68, 0.18);
  border: 1px solid rgba(255, 23, 68, 0.45);
  color: #ffab40;
  padding: 6px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
  box-shadow: 0 0 16px rgba(255, 23, 68, 0.3);
}
.hero .eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #00e676;
  box-shadow: 0 0 10px #00e676;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

.hero h1 {
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 900; letter-spacing: -0.02em; line-height: 1.05;
  margin-bottom: 10px;
  text-shadow: 0 2px 20px rgba(255, 23, 68, 0.3);
}
.hero h1 .accent {
  background: var(--primary-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 8px rgba(255, 23, 68, 0.4));
}
.hero p {
  color: var(--text); font-size: 14px; max-width: 540px;
  opacity: 0.85;
}

/* ---------- Section ---------- */
.section { padding: 24px 0; }
@media (min-width: 768px) { .section { padding: 36px 0; } }

.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}
.section-head h2 {
  font-size: 20px; font-weight: 800; letter-spacing: -0.01em;
  position: relative; padding-bottom: 8px;
}
.section-head h2::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 40px; height: 3px; border-radius: 3px;
  background: var(--primary-grad);
}
@media (min-width: 768px) { .section-head h2 { font-size: 24px; } }
.section-head h2 .accent {
  background: var(--primary-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-head .more {
  font-size: 13px; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 4px;
}
.section-head .more:hover { color: var(--ruby-lt); }

/* ---------- Stat cards ---------- */
.cards-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 600px) { .cards-row { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

.info-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
  position: relative; overflow: hidden;
}
.info-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--primary-grad);
}
.info-card .label {
  color: var(--text-dim); font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.info-card .value {
  font-size: 24px; font-weight: 900; margin-top: 4px; letter-spacing: -0.02em;
  background: var(--primary-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.info-card .value.accent {
  background: linear-gradient(135deg, var(--orange-lt), var(--orange));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.info-card .sub { color: var(--text-mute); font-size: 11px; margin-top: 2px; }

/* ---------- LIVE bar ---------- */
.live-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  background:
    linear-gradient(135deg, rgba(255, 23, 68, 0.18), rgba(255, 140, 0, 0.10));
  border: 1px solid rgba(255, 23, 68, 0.3);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
  box-shadow: 0 4px 20px rgba(255, 23, 68, 0.12);
}

/* Minimalist live strip — sebagai pengganti .live-bar yang full-width */
.live-strip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(255,23,68,0.15), rgba(255,140,0,0.10));
  border: 1px solid rgba(255, 23, 68, 0.3);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: var(--text-dim);
  box-shadow: 0 2px 8px rgba(255, 23, 68, 0.15);
}
@media (max-width: 559px) {
  /* Mobile: live-strip full-width centered biar lebih prominent */
  .live-strip {
    display: flex; justify-content: center;
    width: 100%; padding: 8px 14px;
    font-size: 12px;
  }
}
.live-strip .live-label {
  color: var(--ruby-lt);
  letter-spacing: 1.5px; font-weight: 800;
}
.live-strip .live-sep { color: var(--text-mute); opacity: 0.6; }
.live-strip .timer {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700; color: var(--text);
  margin-left: 3px;
}
@media (max-width: 559px) {
  .live-bar { flex-direction: column; align-items: stretch; }
}

.live-indicator {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--text);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 10px var(--hot);
  animation: pulse 1.4s ease-in-out infinite;
}

.live-countdown {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--text-dim);
  flex-wrap: wrap;
}
.live-countdown .timer {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; font-weight: 700; color: var(--ruby-lt);
  padding: 4px 10px; border-radius: 6px;
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.25);
  min-width: 64px; text-align: center;
}
.refresh-btn {
  padding: 6px 12px; font-size: 12px; font-weight: 600;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-lt);
  color: var(--text); border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px;
}
.refresh-btn:hover { background: rgba(225, 29, 72, 0.15); border-color: var(--ruby); }
.refresh-btn.spinning .icon { animation: spin 0.6s linear; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Provider tabs ---------- */
.tabs {
  display: flex; gap: 8px; overflow-x: auto;
  margin-bottom: 16px; padding-bottom: 4px;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--text-dim);
  transition: 0.15s; flex-shrink: 0;
}
.tab img { height: 18px; width: auto; opacity: 0.9; }
.tab:hover { color: var(--text); border-color: var(--border-lt); }
.tab.active {
  background: var(--primary-grad);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 16px rgba(255, 23, 68, 0.45);
}
.tab.active img { filter: brightness(1.5); }

/* ---------- Toolbar ---------- */
.toolbar {
  display: flex; gap: 10px; margin-bottom: 16px;
}
@media (max-width: 559px) {
  /* Mobile: search & filter masing-masing 1 baris penuh */
  .toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .toolbar .filter-select { width: 100%; }
}
.search { flex: 1; min-width: 0; position: relative; }
@media (min-width: 560px) { .search { min-width: 200px; } }
.search input {
  width: 100%; padding: 11px 14px 11px 40px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-size: 13px;
  transition: 0.15s;
}
.search input::placeholder { color: var(--text-mute); }
.search input:focus { outline: none; border-color: var(--ruby); background: var(--bg-2); }
.search::before {
  content: ""; position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23a1a1aa' stroke-width='2' viewBox='0 0 24 24'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.3-4.3'/></svg>");
  background-repeat: no-repeat;
}
.filter-select {
  padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-size: 13px;
  cursor: pointer; min-height: 42px;
}

/* ---------- Game grid ---------- */
.game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 600px)  { .game-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 820px)  { .game-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }
@media (min-width: 1100px) { .game-grid { grid-template-columns: repeat(5, 1fr); gap: 16px; } }

.game-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s, box-shadow 0.2s;
  position: relative; display: flex; flex-direction: column;
}
@media (hover: hover) {
  .game-card:hover {
    transform: translateY(-4px);
    border-color: var(--ruby);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--ruby);
  }
  .game-card:hover .thumb { transform: scale(1.05); }
}
.game-card:active { transform: scale(0.97); }

.game-card .thumb-wrap {
  position: relative; overflow: hidden;
  background: var(--bg-3);
}
.game-card .thumb {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
  transition: transform 0.4s ease;
}

.game-card .vip-badge {
  position: absolute; top: 6px; right: 6px;
  width: 30px; height: auto; z-index: 2;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  pointer-events: none;
}
@media (min-width: 600px) { .game-card .vip-badge { width: 40px; } }

.game-card .rtp-overlay {
  position: absolute; left: 6px; top: 6px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800;
  background: rgba(12, 10, 15, 0.85);
  color: #fff;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 600px) {
  .game-card .rtp-overlay { font-size: 12px; padding: 4px 10px; left: 8px; top: 8px; }
}
.game-card.hot  .rtp-overlay { color: var(--hot); border-color: rgba(16,185,129,0.4); }
.game-card.warm .rtp-overlay { color: var(--warm); border-color: rgba(245,158,11,0.4); }
.game-card.cold .rtp-overlay { color: var(--cold); border-color: rgba(239,68,68,0.4); }

.game-card .body {
  padding: 10px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.game-card .name {
  font-size: 12px; font-weight: 600; line-height: 1.3;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 600px) { .game-card .name { font-size: 13px; } }

.game-card .progress-row {
  display: flex; align-items: center; gap: 8px;
}
.game-card .progress {
  flex: 1; height: 4px;
  background: var(--bg-3);
  border-radius: 999px; overflow: hidden;
}
.game-card .progress .bar {
  height: 100%; border-radius: 999px;
  transition: width 0.5s cubic-bezier(.2,.9,.3,1.2);
  background: var(--ruby);
}
.game-card.hot  .progress .bar { background: linear-gradient(90deg, #047857, var(--hot)); }
.game-card.warm .progress .bar { background: linear-gradient(90deg, var(--gold-dk), var(--gold)); }
.game-card.cold .progress .bar { background: linear-gradient(90deg, #991b1b, var(--cold)); }

.game-card .rtp-pct {
  font-size: 12px; font-weight: 800;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  min-width: 40px; text-align: right;
}
.game-card.hot  .rtp-pct { color: var(--hot); }
.game-card.warm .rtp-pct { color: var(--warm); }
.game-card.cold .rtp-pct { color: var(--cold); }

.game-card .meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 10px; color: var(--text-mute);
}
.game-card .meta .stars { color: var(--gold); letter-spacing: 0.5px; font-size: 11px; }
.game-card .meta.meta-secondary { display: none; }
@media (min-width: 600px) {
  .game-card .meta { font-size: 11px; }
  .game-card .meta .stars { font-size: 12px; }
  .game-card .meta.meta-secondary { display: flex; }
}

/* Number pulse on update */
@keyframes rtp-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); filter: brightness(1.4); }
  100% { transform: scale(1); }
}
.game-card .rtp-pct.updated,
.game-card .rtp-overlay.updated { animation: rtp-pulse 0.4s ease; }

/* Hot RTP & Featured card — red→orange gradient border + pulsing glow */
.game-card.hot,
.game-card.featured {
  border-color: transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--primary-grad) border-box;
  border: 2px solid transparent;
  animation: featured-glow 2.2s ease-in-out infinite;
}
@keyframes featured-glow {
  0%, 100% { box-shadow: 0 0 18px rgba(255, 23, 68, 0.25); }
  50%      { box-shadow: 0 0 32px rgba(255, 100, 0, 0.55); }
}
.game-card.hot:hover,
.game-card.featured:hover {
  box-shadow: 0 12px 32px rgba(255, 23, 68, 0.4),
              0 0 24px rgba(255, 140, 0, 0.35);
}
/* Featured (hype) tetap distinct: glow animation lebih intens */
.game-card.featured {
  box-shadow: 0 0 22px rgba(255, 23, 68, 0.35);
}

/* 🔥 Real flame animation — width presisi, contain biar pucuk gak terpotong */
.game-card .flame-fx {
  position: absolute;
  left: 50%; bottom: 0;
  width: 80%; height: 75px;
  transform: translateX(-50%);
  pointer-events: none; z-index: 5;
}
.game-card .flame-fx > div {
  position: absolute; inset: 0;
  background: url("../img/brand/fireframe.webp") center bottom / contain no-repeat;
  transform-origin: center bottom;
  will-change: transform, opacity, filter;
}
/* Background layer: blurred, dimmer — simulasi heat haze */
.flame-layer-bg {
  opacity: 0.65;
  filter: blur(2.5px) brightness(0.85) saturate(1.2);
  animation: fire-bg 0.7s ease-in-out infinite alternate;
}
/* Foreground layer: sharp, bright — flame itself */
.flame-layer-fg {
  filter: drop-shadow(0 -2px 10px rgba(255, 77, 0, 0.7))
          drop-shadow(0 -1px 4px rgba(255, 200, 0, 0.5));
  animation: fire-fg 0.45s ease-in-out infinite alternate;
}

@keyframes fire-bg {
  0%   { transform: scaleY(0.92) scaleX(1.05) translateX(-3px); opacity: 0.55; }
  100% { transform: scaleY(1.15) scaleX(0.95) translateX(3px);  opacity: 0.8; }
}
@keyframes fire-fg {
  0%   { transform: scaleY(0.88) scaleX(1.02) translateX(2px);  opacity: 0.9;
         filter: drop-shadow(0 -2px 10px rgba(255, 77, 0, 0.7))
                 drop-shadow(0 -1px 4px rgba(255, 200, 0, 0.5))
                 brightness(1); }
  100% { transform: scaleY(1.18) scaleX(0.94) translateX(-2px); opacity: 1;
         filter: drop-shadow(0 -3px 14px rgba(255, 140, 0, 0.85))
                 drop-shadow(0 -2px 6px rgba(255, 230, 0, 0.6))
                 brightness(1.2); }
}

/* Glowing bottom rim — efek "panas" di base thumbnail (semua Hot card, bukan cuma featured) */
.game-card.hot .thumb-wrap::before,
.game-card.featured .thumb-wrap::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 35%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 77, 0, 0.5) 0%, transparent 65%);
  pointer-events: none; z-index: 4;
  animation: bottom-glow 1.4s ease-in-out infinite alternate;
}
@keyframes bottom-glow {
  0%   { opacity: 0.5; }
  100% { opacity: 1; }
}
.game-card .hot-tag {
  position: absolute; bottom: 6px; left: 6px;
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--primary-grad);
  color: #fff; font-size: 9px; font-weight: 800;
  padding: 3px 7px; border-radius: 999px; letter-spacing: 0.5px;
  box-shadow: 0 2px 12px rgba(255, 23, 68, 0.6);
  z-index: 2;
  animation: hot-glow 1.6s ease-in-out infinite;
}
@keyframes hot-glow {
  0%, 100% { box-shadow: 0 2px 12px rgba(255, 23, 68, 0.6); }
  50%      { box-shadow: 0 2px 20px rgba(255, 140, 0, 0.9); }
}
@media (min-width: 600px) {
  .game-card .hot-tag { font-size: 10px; padding: 4px 9px; bottom: 8px; left: 8px; }
}

/* ============================================================
   CURATED INFO — banner tampilan pilihan 20 game per provider
   ============================================================ */
.curated-info-banner {
  display: none;
  margin: 16px 0 18px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(255, 140, 0, 0.10) 0%, rgba(255, 23, 68, 0.10) 100%);
  border: 1px solid rgba(255, 140, 0, 0.28);
  border-left: 3px solid #ff8c00;
  border-radius: var(--radius-md);
  gap: 12px; align-items: center;
}
.curated-info-banner.show { display: flex; }
.curated-info-banner .cib-icon {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff1744, #ff8c00);
  color: #fff;
  border-radius: 8px;
  font-size: 15px; font-weight: 800;
  box-shadow: 0 2px 8px rgba(255, 23, 68, 0.35);
}
.curated-info-banner .cib-body { flex: 1; min-width: 0; }
.curated-info-banner .cib-title {
  font-size: 13px; font-weight: 700;
  color: #fed7aa;
  letter-spacing: 0.2px;
  margin-bottom: 3px;
}
.curated-info-banner .cib-text {
  font-size: 12px; line-height: 1.5;
  color: var(--text-dim, #d1d5db);
}
.curated-info-banner .cib-text strong {
  color: #fef3c7;
  font-weight: 700;
}
@media (min-width: 600px) {
  .curated-info-banner { padding: 14px 18px; }
  .curated-info-banner .cib-title { font-size: 13px; }
  .curated-info-banner .cib-text { font-size: 13px; }
}

/* ============================================================
   COLD RTP — peringatan kategori RTP rendah
   ============================================================ */

/* Visual kartu COLD: subtle desaturate + border merah supaya terbaca
   sebagai "tidak disarankan", tapi tetap kelihatan jelas */
.game-card.cold:not(.featured) {
  border: 1px solid rgba(220, 38, 38, 0.35);
  background: linear-gradient(180deg, rgba(127, 29, 29, 0.06), var(--surface));
}
.game-card.cold .thumb {
  filter: saturate(0.55) brightness(0.82) contrast(0.95);
  transition: filter 0.25s ease;
}
.game-card.cold:hover .thumb {
  filter: saturate(0.8) brightness(0.92);
}
.game-card.cold .thumb-wrap::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(127, 29, 29, 0.35) 100%);
  pointer-events: none; z-index: 1;
}

/* Badge "RTP RENDAH" — mirror posisi hot-tag, palet dark-red profesional */
.game-card .cold-tag {
  position: absolute; bottom: 6px; left: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  color: #fee2e2; font-size: 9px; font-weight: 700;
  padding: 3px 7px; border-radius: 4px;
  letter-spacing: 0.6px; text-transform: uppercase;
  border: 1px solid rgba(254, 226, 226, 0.18);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  z-index: 2;
  cursor: help;
}
.game-card .cold-tag .cold-arrow {
  font-size: 9px; color: #fca5a5; line-height: 1;
  animation: cold-arrow-pulse 1.8s ease-in-out infinite;
}
@keyframes cold-arrow-pulse {
  0%, 100% { transform: translateY(0); opacity: 0.85; }
  50%      { transform: translateY(2px); opacity: 1; }
}
@media (min-width: 600px) {
  .game-card .cold-tag { font-size: 10px; padding: 4px 9px; bottom: 8px; left: 8px; }
}

/* Banner peringatan saat filter "Cold" aktif */
.cold-warning-banner {
  display: none;
  margin: 16px 0 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.12) 0%, rgba(69, 10, 10, 0.18) 100%);
  border: 1px solid rgba(220, 38, 38, 0.32);
  border-left: 3px solid #dc2626;
  border-radius: var(--radius-md);
  gap: 14px; align-items: flex-start;
}
.cold-warning-banner.show { display: flex; }
.cold-warning-banner .cwb-icon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(220, 38, 38, 0.18);
  color: #fca5a5;
  border-radius: 8px;
  font-size: 18px; font-weight: 700;
  border: 1px solid rgba(220, 38, 38, 0.3);
}
.cold-warning-banner .cwb-body { flex: 1; min-width: 0; }
.cold-warning-banner .cwb-title {
  font-size: 13px; font-weight: 700;
  color: #fecaca;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
}
.cold-warning-banner .cwb-text {
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-dim, #d1d5db);
}
.cold-warning-banner .cwb-text strong {
  color: #fef3c7;
  font-weight: 700;
}
@media (min-width: 600px) {
  .cold-warning-banner { padding: 16px 18px; gap: 16px; }
  .cold-warning-banner .cwb-title { font-size: 13px; }
  .cold-warning-banner .cwb-text { font-size: 13px; }
}

/* Modal: warning untuk game COLD */
.modal.modal-cold {
  border: 1px solid rgba(220, 38, 38, 0.4);
  box-shadow: 0 24px 80px rgba(127, 29, 29, 0.55), 0 0 0 1px rgba(220, 38, 38, 0.15);
}
.modal-cold-warning {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(127, 29, 29, 0.18) 0%, rgba(69, 10, 10, 0.28) 100%);
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-left: 3px solid #dc2626;
  border-radius: var(--radius-md);
}
.modal-cold-warning .mcw-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.modal-cold-warning .mcw-icon {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(220, 38, 38, 0.22);
  color: #fca5a5;
  border: 1px solid rgba(220, 38, 38, 0.4);
  border-radius: 6px;
  font-size: 15px; font-weight: 700;
}
.modal-cold-warning .mcw-title {
  font-size: 13px; font-weight: 700;
  color: #fecaca;
  letter-spacing: 0.2px;
}
.modal-cold-warning .mcw-text {
  margin: 0 0 8px;
  font-size: 12.5px; line-height: 1.6;
  color: var(--text-dim, #d1d5db);
}
.modal-cold-warning .mcw-text:last-child { margin-bottom: 0; }
.modal-cold-warning .mcw-text strong {
  color: #fde68a;
  font-weight: 700;
}
@media (min-width: 600px) {
  .modal-cold-warning .mcw-text { font-size: 13px; }
}

.pola-cta.pola-cta-cold {
  background: rgba(127, 29, 29, 0.18);
  border: 1px dashed rgba(220, 38, 38, 0.4);
  color: #fecaca;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.btn-close.btn-recommend {
  background: var(--primary-grad, linear-gradient(135deg, #ff1744, #ff8c00));
  color: #fff; font-weight: 700;
  border: none;
  box-shadow: 0 4px 14px rgba(255, 23, 68, 0.4);
}
.btn-close.btn-recommend:hover {
  box-shadow: 0 6px 22px rgba(255, 140, 0, 0.55);
  transform: translateY(-1px);
}
.btn-close.btn-close-cold {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #fecaca;
}

/* Load more */
.load-more {
  display: block; margin: 24px auto 0;
  padding: 12px 28px;
  background: var(--surface); border: 1px solid var(--border-lt);
  color: var(--text); border-radius: 999px;
  font-weight: 600; font-size: 13px; transition: 0.15s;
}
.load-more:hover { border-color: var(--ruby); background: rgba(225, 29, 72, 0.1); color: var(--ruby-lt); }
.load-more.hidden { display: none; }
.grid-status { text-align: center; color: var(--text-mute); font-size: 12px; margin-top: 14px; }

/* ---------- Togel ---------- */
.togel-grid {
  display: grid; grid-template-columns: repeat(1, 1fr); gap: 10px;
}
@media (min-width: 500px) { .togel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) { .togel-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .togel-grid { grid-template-columns: repeat(4, 1fr); } }

.togel-card {
  --pasaran-accent: #e11d48;
  background:
    radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--pasaran-accent) 8%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 92%, var(--pasaran-accent)) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 64px;
  position: relative; overflow: hidden;
  transition: 0.22s ease;
  isolation: isolate;
}
/* Top accent stripe (color per pasaran) */
.togel-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pasaran-accent) 60%, transparent) 0%,
    var(--pasaran-accent) 50%,
    color-mix(in srgb, var(--pasaran-accent) 60%, transparent) 100%);
  z-index: 2;
}
/* Subtle dot pattern overlay */
.togel-card::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.025) 1px, transparent 0);
  background-size: 14px 14px;
  pointer-events: none;
  z-index: 0;
}
.togel-card > * { position: relative; z-index: 1; }

.togel-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px; flex-wrap: wrap;
  margin-bottom: 4px;
}
.togel-card .pasaran-id {
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 auto; min-width: 0;
}
.togel-card .flag {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-lt);
  border-radius: 8px;
  font-size: 18px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.togel-card .pasaran-text {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; flex: 1;
}
.togel-card .pasaran {
  font-size: 12.5px; color: var(--text);
  font-weight: 800; letter-spacing: 0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.togel-card .periode-pill {
  font-size: 9.5px; font-weight: 700;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: color-mix(in srgb, var(--pasaran-accent) 70%, #f9a8d4);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.togel-card .status-badge {
  font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
  padding: 3px 8px; border-radius: 999px;
  white-space: nowrap;
  flex: 0 1 auto;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
  text-align: center;
}
.togel-card .libur-tag {
  /* badge libur biasanya paling panjang — allow wrap di card */
  white-space: normal;
  line-height: 1.35;
}
.togel-card .fresh-tag {
  background: linear-gradient(135deg, #047857, #10b981);
  color: #fff;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.45);
  animation: live-pulse 1.4s ease-in-out infinite;
}
.togel-card .waiting-tag {
  background: linear-gradient(135deg, #78350f, #b45309);
  color: #fde68a;
  border: 1px solid rgba(251, 191, 36, 0.35);
  letter-spacing: 0.4px;
}
.togel-card .libur-tag {
  background: linear-gradient(135deg, #44403c, #57534e);
  color: #d6d3d1;
  border: 1px solid rgba(168, 162, 158, 0.35);
  letter-spacing: 0.4px;
  padding: 4px 9px;
  line-height: 1.3;
  text-align: center;
}
.togel-card .libur-tag .badge-sub {
  display: block;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  opacity: 0.85;
  margin-top: 1px;
}
@keyframes live-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(16, 185, 129, 0.45); }
  50%      { box-shadow: 0 2px 14px rgba(16, 185, 129, 0.85); }
}
@media (min-width: 600px) {
  .togel-card .status-badge { font-size: 10px; padding: 4px 10px; }
}
/* Number area: bola billiard + halo glow background */
.togel-card .number-area {
  position: relative;
  padding: 18px 8px 14px;
  margin: 10px -4px 6px;
}
.togel-card .number-halo {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--pasaran-accent) 18%, transparent) 0%,
    transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.togel-card.fresh .number-halo {
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--pasaran-accent) 28%, transparent) 0%,
    transparent 70%);
  animation: halo-pulse 3s ease-in-out infinite;
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
.togel-card.stale .number-halo {
  background: radial-gradient(ellipse at center,
    rgba(127, 127, 127, 0.08) 0%, transparent 60%);
}

/* Bola billiard untuk angka result */
.togel-card .number {
  position: relative; z-index: 1;
  display: flex; justify-content: center; gap: 8px;
  perspective: 600px;
}
@media (min-width: 600px) { .togel-card .number { gap: 10px; } }

.togel-card .number-date {
  position: relative; z-index: 1;
  margin-top: 10px;
  text-align: center;
  font-size: 10.5px; color: var(--text-dim);
  font-style: italic;
  letter-spacing: 0.3px;
  opacity: 0.85;
}

.card-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  margin: 8px 0 10px;
}

.ball {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800; font-size: 18px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0.4);
  position: relative;
  flex: 0 0 auto;
  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.55),
    inset 0 -7px 12px rgba(0, 0, 0, 0.35),
    inset 0 3px 6px rgba(255, 255, 255, 0.18);
  transition: transform 0.25s ease;
}
@media (min-width: 600px) { .ball { width: 44px; height: 44px; font-size: 19px; } }

/* Highlight gloss putih kiri atas */
.ball::before {
  content: ""; position: absolute;
  top: 4px; left: 8px;
  width: 14px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 75%);
  pointer-events: none;
  filter: blur(0.5px);
}
/* Outer rim shadow */
.ball::after {
  content: ""; position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.togel-card .ball:hover { transform: translateY(-2px) scale(1.06); }

/* Konvensi warna bola billiard standard (0-9) */
.ball-0 {
  background: radial-gradient(circle at 32% 32%, #fafafa 0%, #e5e7eb 55%, #9ca3af 100%);
  color: #1f2937;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}
.ball-1 { background: radial-gradient(circle at 32% 32%, #fde047 0%, #eab308 55%, #854d0e 100%); }
.ball-2 { background: radial-gradient(circle at 32% 32%, #60a5fa 0%, #2563eb 55%, #1e3a8a 100%); }
.ball-3 { background: radial-gradient(circle at 32% 32%, #f87171 0%, #dc2626 55%, #7f1d1d 100%); }
.ball-4 { background: radial-gradient(circle at 32% 32%, #c084fc 0%, #7c3aed 55%, #4c1d95 100%); }
.ball-5 { background: radial-gradient(circle at 32% 32%, #fb923c 0%, #ea580c 55%, #7c2d12 100%); }
.ball-6 { background: radial-gradient(circle at 32% 32%, #34d399 0%, #059669 55%, #064e3b 100%); }
.ball-7 { background: radial-gradient(circle at 32% 32%, #c2410c 0%, #7c2d12 55%, #451a03 100%); }
.ball-8 { background: radial-gradient(circle at 32% 32%, #4b5563 0%, #1f2937 55%, #030712 100%); }
.ball-9 { background: radial-gradient(circle at 32% 32%, #facc15 0%, #d97706 55%, #78350f 100%); }
.ball-empty {
  background: radial-gradient(circle at 32% 32%, #3f3f46 0%, #27272a 55%, #18181b 100%);
  color: #71717a;
}

/* Stale card: bola sedikit desaturate biar terlihat "belum keluar" */
.togel-card.stale .ball {
  filter: saturate(0.55) brightness(0.78);
  opacity: 0.85;
}
.togel-card.stale .ball:hover { filter: saturate(0.85) brightness(0.95); opacity: 1; }
/* Info jadwal: hari + jam tutup/result (di bawah divider, table-like layout) */
.togel-card .jadwal-info {
  display: flex; flex-direction: column; gap: 5px;
  font-size: 11px;
}
.togel-card .jadwal-row {
  display: flex; align-items: baseline; gap: 10px;
  color: var(--text-dim, #d1d5db);
  line-height: 1.45;
}
.togel-card .jadwal-row .jadwal-lbl {
  flex: 0 0 auto;
  color: var(--text-mute, #9ca3af);
  font-weight: 700;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  min-width: 52px;
  position: relative;
}
.togel-card .jadwal-row .jadwal-lbl::after {
  content: "";
  position: absolute;
  right: -4px; top: 50%;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: var(--text-mute);
  opacity: 0.5;
}
.togel-card .jadwal-row .jadwal-val {
  color: var(--text);
  font-size: 11px;
  flex: 1;
}
@media (min-width: 600px) {
  .togel-card .jadwal-info { font-size: 11.5px; }
  .togel-card .jadwal-row .jadwal-val { font-size: 11.5px; }
}
.togel-card.featured::before {
  background: linear-gradient(90deg, #ffb300, #ff8c00, var(--pasaran-accent), #ff8c00, #ffb300);
  height: 4px;
  background-size: 200% 100%;
  animation: stripe-shimmer 4s linear infinite;
}
@keyframes stripe-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.togel-card.featured {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--pasaran-accent) 22%, transparent);
}
.togel-card.fresh:not(.featured)::before {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pasaran-accent) 50%, transparent) 0%,
    var(--pasaran-accent) 30%,
    #10b981 50%,
    var(--pasaran-accent) 70%,
    color-mix(in srgb, var(--pasaran-accent) 50%, transparent) 100%);
}
.togel-card:hover {
  border-color: color-mix(in srgb, var(--pasaran-accent) 60%, transparent);
  transform: translateY(-3px);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.45),
    0 0 0 1px color-mix(in srgb, var(--pasaran-accent) 30%, transparent),
    0 8px 22px color-mix(in srgb, var(--pasaran-accent) 18%, transparent);
}
.togel-card.stale:hover { transform: translateY(-1px); }

.togel-card .riwayat-btn {
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.04),
    color-mix(in srgb, var(--pasaran-accent) 8%, transparent));
  border: 1px solid var(--border-lt);
  color: var(--text-dim);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.3px;
  padding: 8px 12px; border-radius: 8px;
  cursor: pointer; transition: 0.18s ease;
  backdrop-filter: blur(4px);
}
.togel-card .riwayat-btn .riwayat-icon {
  font-size: 12px;
  opacity: 0.8;
}
.togel-card .riwayat-btn:hover {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pasaran-accent) 18%, transparent),
    color-mix(in srgb, var(--pasaran-accent) 10%, transparent));
  border-color: color-mix(in srgb, var(--pasaran-accent) 50%, transparent);
  color: #fff;
}
.togel-card .riwayat-btn:hover .riwayat-icon { opacity: 1; }

/* Banner info statistik di section prediksi */
.prediksi-info-banner {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(99, 102, 241, 0.10) 100%);
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-left: 3px solid #6366f1;
  border-radius: var(--radius-md);
}
.prediksi-info-banner .pib-icon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
  border-radius: 8px;
  font-size: 15px;
  border: 1px solid rgba(99, 102, 241, 0.3);
}
.prediksi-info-banner .pib-body { flex: 1; min-width: 0; }
.prediksi-info-banner .pib-title {
  font-size: 13px; font-weight: 700;
  color: #c7d2fe;
  margin-bottom: 4px;
}
.prediksi-info-banner .pib-text {
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-dim, #d1d5db);
}
.prediksi-info-banner .pib-text strong {
  color: #fef3c7;
  font-weight: 700;
}
@media (min-width: 600px) {
  .prediksi-info-banner { padding: 16px 18px; }
  .prediksi-info-banner .pib-title { font-size: 13px; }
  .prediksi-info-banner .pib-text { font-size: 13px; }
}

.prediksi-list { display: grid; gap: 14px; }
@media (min-width: 900px) { .prediksi-list { grid-template-columns: 1fr 1fr; gap: 18px; } }

.prediksi-card {
  --pasaran-accent: #e11d48;
  background:
    radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.03) 0%, transparent 40%),
    radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--pasaran-accent) 6%, transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 95%, var(--pasaran-accent)) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  position: relative; overflow: hidden;
  isolation: isolate;
}
.prediksi-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pasaran-accent) 50%, transparent) 0%,
    var(--pasaran-accent) 50%,
    color-mix(in srgb, var(--pasaran-accent) 50%, transparent) 100%);
}
.prediksi-card > * { position: relative; z-index: 1; }

.prediksi-card .head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 14px;
}
.prediksi-card .prediksi-id {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 0;
}
.prediksi-card .flag {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-lt);
  border-radius: 7px;
  font-size: 15px;
}
.prediksi-card .prediksi-text {
  display: flex; flex-direction: column; gap: 2px;
}
.prediksi-card .pasaran {
  font-weight: 800; font-size: 13px;
  color: var(--text);
  letter-spacing: 0.2px;
}
.prediksi-card .hari-pill {
  font-size: 10px; font-weight: 700;
  color: color-mix(in srgb, var(--pasaran-accent) 80%, #ffffff);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.prediksi-card .date {
  font-size: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #c7d2fe; font-weight: 700; letter-spacing: 0.4px;
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ANGKA JITU UTAMA — block highlight dengan bola besar */
.prediksi-card .angka-jitu {
  background:
    radial-gradient(ellipse at center, color-mix(in srgb, var(--pasaran-accent) 14%, transparent) 0%, transparent 70%),
    rgba(0, 0, 0, 0.25);
  border: 1px solid color-mix(in srgb, var(--pasaran-accent) 40%, transparent);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  margin-bottom: 14px;
}
.prediksi-card .aj-label {
  font-size: 9px; font-weight: 800; letter-spacing: 2px;
  color: color-mix(in srgb, var(--pasaran-accent) 75%, #ffffff);
  margin-bottom: 10px;
}
.prediksi-card .aj-balls {
  display: flex; justify-content: center; gap: 8px;
  margin-bottom: 8px;
}
.prediksi-card .aj-balls .ball {
  width: 36px; height: 36px; font-size: 15px;
}
.prediksi-card .aj-tafsir {
  font-size: 12px;
  color: var(--text-dim);
  padding-top: 8px;
  border-top: 1px dashed var(--border-lt);
}
.prediksi-card .aj-tafsir strong {
  color: #fef3c7;
  font-weight: 700;
}

/* Section grup 2D/3D/4D */
.prediksi-section {
  margin-bottom: 12px;
}
.prediksi-section .ps-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.3px;
  color: var(--text-mute);
  margin-bottom: 6px;
  text-transform: uppercase;
}

.prediksi-card .numbers {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.prediksi-card .num-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 8px;
  background: var(--bg-3); border: 1px solid var(--border-lt);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700; font-size: 13px; color: var(--text);
  cursor: help;
  transition: 0.15s;
}
.prediksi-card .num-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.prediksi-card .num-chip .chip-lbl {
  font-size: 9px; font-weight: 700;
  opacity: 0.7;
  letter-spacing: 0.5px;
}
.prediksi-card .num-chip.hot {
  background: linear-gradient(135deg, rgba(255, 23, 68, 0.22), rgba(255, 140, 0, 0.14));
  border-color: var(--ruby);
  color: #fee2e2;
  box-shadow: 0 2px 8px rgba(255, 23, 68, 0.2);
}
.prediksi-card .num-chip.warm {
  background: rgba(255, 179, 0, 0.12);
  border-color: rgba(255, 179, 0, 0.45);
  color: #fde68a;
}
.prediksi-card .num-chip.cool {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
}

/* Meta grid: colok bebas + shio main + shio alt */
.prediksi-card .prediksi-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border: 1px solid var(--border-lt);
}
.prediksi-card .pm-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  text-align: center;
}
.prediksi-card .pm-label {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  color: var(--text-mute);
  text-transform: uppercase;
}
.prediksi-card .pm-value {
  font-size: 12px; font-weight: 700;
  color: var(--text);
}
.prediksi-card .colok-list {
  display: flex; gap: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.prediksi-card .colok-digit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--pasaran-accent), color-mix(in srgb, var(--pasaran-accent) 70%, #000));
  color: #fff;
  border-radius: 50%;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--pasaran-accent) 50%, transparent);
}

/* Kode alam block */
.prediksi-card .kode-alam {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(20, 184, 166, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-left: 3px solid #10b981;
  border-radius: 10px;
}
.prediksi-card .kode-alam .ka-icon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  font-size: 18px;
}
.prediksi-card .kode-alam .ka-body { flex: 1; }
.prediksi-card .kode-alam .ka-title {
  font-size: 12px; color: #d1fae5;
  margin-bottom: 2px;
}
.prediksi-card .kode-alam .ka-title strong {
  color: #6ee7b7; font-weight: 800;
}
.prediksi-card .kode-alam .ka-meta {
  font-size: 11px; color: var(--text-dim);
  font-style: italic;
}

.prediksi-card .desc {
  font-size: 12.5px; color: var(--text-dim); line-height: 1.65;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.025);
  border-left: 3px solid color-mix(in srgb, var(--pasaran-accent) 60%, transparent);
  border-radius: 0 8px 8px 0;
}
.prediksi-card .desc strong {
  color: #fef3c7;
  font-weight: 700;
}
.prediksi-card .desc em {
  color: #c7d2fe;
  font-style: italic;
}

/* Status text di section-head */
.section-head .grid-status {
  font-size: 12px; color: var(--text-mute);
  background: rgba(255, 255, 255, 0.03);
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border-lt);
}
.grid-empty {
  grid-column: 1/-1;
  text-align: center; padding: 40px 20px;
  color: var(--text-mute); font-size: 13px;
}

/* Modal: riwayat table */
.riwayat-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.riwayat-table thead th {
  text-align: left;
  padding: 10px 12px;
  background: var(--bg-3);
  color: var(--text-dim);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  border-bottom: 1px solid var(--border);
}
.riwayat-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.riwayat-table .r-tgl { color: var(--text-dim); }
.riwayat-table .r-per { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-mute); }
.riwayat-table .r-angka strong {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 14px; letter-spacing: 2px;
  color: var(--ruby-lt);
}
.riwayat-table tbody tr:hover { background: rgba(255, 255, 255, 0.02); }

/* ---------- Buku Mimpi (premium) ---------- */

/* Search box dengan icon */
.mimpi-search-box {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 18px;
  transition: 0.2s;
}
.mimpi-search-box:focus-within {
  border-color: var(--ruby);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
}
.mimpi-search-box .msb-icon {
  font-size: 18px; opacity: 0.7;
  flex: 0 0 auto;
}
.mimpi-search-box input {
  flex: 1; background: transparent; border: none; outline: none;
  font-size: 13px; color: var(--text);
  font-family: inherit;
}
.mimpi-search-box input::placeholder { color: var(--text-mute); }
.mimpi-search-box .msb-clear {
  display: none; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border-lt);
  color: var(--text-dim);
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 15px; font-weight: 700;
  cursor: pointer; transition: 0.15s;
}
.mimpi-search-box .msb-clear:hover {
  background: rgba(225, 29, 72, 0.2);
  color: #fff;
  border-color: var(--ruby);
}

/* Tabs 2D/3D/4D premium */
.mimpi-tabs {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 16px;
}
.mimpi-tabs .mtab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 12px 8px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: 0.18s ease;
  font-family: inherit;
  font-weight: 600;
  position: relative;
  overflow: hidden;
}
.mimpi-tabs .mtab::before {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 0;
  background: linear-gradient(90deg, transparent, var(--ruby), transparent);
  transition: 0.18s ease;
}
.mimpi-tabs .mtab:hover {
  border-color: color-mix(in srgb, var(--ruby) 50%, transparent);
  color: var(--text);
  transform: translateY(-1px);
}
.mimpi-tabs .mtab.active {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.18), rgba(255, 140, 0, 0.10));
  border-color: var(--ruby);
  color: #fff;
  box-shadow: 0 4px 16px rgba(225, 29, 72, 0.25);
}
.mimpi-tabs .mtab.active::before { height: 3px; }
.mimpi-tabs .mtab-icon { font-size: 20px; }
.mimpi-tabs .mtab-text { font-size: 14px; font-weight: 800; letter-spacing: 0.5px; }
.mimpi-tabs .mtab-count {
  font-size: 10px; opacity: 0.7;
  font-family: ui-monospace, monospace;
  font-weight: 600;
}

.mimpi-status {
  display: flex; justify-content: flex-end;
  margin-bottom: 14px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-lt);
  border-radius: 999px;
  font-size: 12px;
  color: var(--text-dim);
  width: fit-content;
  margin-left: auto;
}

/* ============================================================
   Buku Mimpi — tampilan simple/clean (tidak pakai bola billiard)
   ============================================================ */

.mimpi-list {
  display: flex; flex-direction: column;
  gap: 8px;
}

/* === 2D: kode 00-99 dengan kombinasi + 6 tafsir === */
.mimpi2d-row {
  display: flex; gap: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--ruby);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  align-items: flex-start;
  transition: 0.15s ease;
}
.mimpi2d-row:hover {
  border-color: var(--ruby);
  background: color-mix(in srgb, var(--surface) 90%, var(--ruby));
}
.mimpi2d-row .m2d-kode-main {
  flex: 0 0 auto;
  width: 56px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ruby), #ff8c00);
  color: #fff;
  border-radius: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 24px; font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 4px 14px rgba(225, 29, 72, 0.35);
}
.mimpi2d-row .m2d-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.mimpi2d-row .m2d-row {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap;
}
.mimpi2d-row .m2d-label {
  flex: 0 0 auto;
  font-size: 10px; font-weight: 800;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 72px;
}
.mimpi2d-row .m2d-values {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.mimpi2d-row .m2d-kode {
  display: inline-block;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(255, 179, 0, 0.12);
  border: 1px solid rgba(255, 179, 0, 0.4);
  color: #fde68a;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700; font-size: 13px;
}
.mimpi2d-row .m2d-tafsir {
  display: flex; gap: 5px; flex-wrap: wrap;
  align-items: center;
}
.mimpi2d-row .m2d-tafsir-item {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #c7d2fe;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
}

@media (max-width: 600px) {
  .mimpi2d-row { padding: 12px 14px; gap: 12px; }
  .mimpi2d-row .m2d-kode-main { width: 48px; height: 48px; font-size: 20px; }
  .mimpi2d-row .m2d-row { flex-direction: column; gap: 4px; }
  .mimpi2d-row .m2d-label { min-width: auto; }
}

/* === 3D/4D: list alphabetical dengan grouping huruf === */
.mimpi-letter-group {
  margin-bottom: 18px;
}
.mimpi-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, var(--ruby), #ff8c00);
  color: #fff;
  font-size: 20px; font-weight: 800;
  border-radius: 10px;
  margin-bottom: 10px;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
}
.mimpi-letter-rows {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 6px;
}
@media (min-width: 600px) { .mimpi-letter-rows { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
@media (min-width: 1000px) { .mimpi-letter-rows { grid-template-columns: repeat(3, 1fr); } }

.mimpi-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  transition: 0.15s;
}
.mimpi-row:hover {
  border-color: var(--ruby);
  background: color-mix(in srgb, var(--surface) 92%, var(--ruby));
}
.mimpi-row .mr-name {
  flex: 1; min-width: 0;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mimpi-row .mr-kodes {
  display: flex; gap: 5px;
  flex: 0 0 auto;
}
.mimpi-row .mr-kode {
  display: inline-block;
  padding: 3px 9px;
  background: rgba(255, 179, 0, 0.12);
  border: 1px solid rgba(255, 179, 0, 0.4);
  color: #fde68a;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700; font-size: 12px;
}

/* Empty / loading state */
.mimpi-empty, .mimpi-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--border-lt);
  border-radius: var(--radius);
  color: var(--text-mute);
}
.mimpi-empty .me-icon {
  font-size: 48px; opacity: 0.6;
  margin-bottom: 12px;
}
.mimpi-empty .me-title {
  font-size: 15px; font-weight: 700;
  color: var(--text-dim);
  margin-bottom: 4px;
}
.mimpi-empty .me-text {
  font-size: 13px;
}
.mimpi-loading { font-size: 13px; }

/* Pagination */
.mimpi-pagination {
  display: flex; justify-content: center; align-items: center; gap: 14px;
  margin-top: 24px;
}
.mimpi-pagination .page-btn {
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 8px;
  font-weight: 600; font-size: 13px;
  cursor: pointer; transition: 0.15s;
}
.mimpi-pagination .page-btn:hover:not(:disabled) {
  background: rgba(225, 29, 72, 0.12);
  border-color: var(--ruby);
}
.mimpi-pagination .page-btn:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.mimpi-pagination .page-info {
  font-size: 13px; color: var(--text-dim);
  font-weight: 600;
}

/* Modal detail mimpi */
#mimpi-detail-modal .md-header {
  text-align: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
#mimpi-detail-modal .md-name {
  font-size: 24px; font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
  background: linear-gradient(135deg, #fff, #fde68a);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
#mimpi-detail-modal .md-sub {
  font-size: 12px; color: var(--text-mute);
  font-style: italic;
}
#mimpi-detail-modal .md-section {
  margin-bottom: 18px;
}
#mimpi-detail-modal .md-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
#mimpi-detail-modal .md-tipe-pill {
  --mimpi-accent: #e11d48;
  padding: 5px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mimpi-accent) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--mimpi-accent) 50%, transparent);
  color: color-mix(in srgb, var(--mimpi-accent) 80%, #ffffff);
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.5px;
}
#mimpi-detail-modal .md-count {
  font-size: 11px; color: var(--text-mute);
  font-family: ui-monospace, monospace;
}
#mimpi-detail-modal .md-empty {
  font-size: 11px; color: var(--text-mute);
  font-style: italic;
}
#mimpi-detail-modal .md-kode-list {
  display: flex; flex-direction: column; gap: 8px;
}
#mimpi-detail-modal .md-kode-row {
  display: flex; gap: 6px; justify-content: center;
  padding: 10px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  border: 1px solid var(--border-lt);
}
#mimpi-detail-modal .md-kode-row .ball {
  width: 36px; height: 36px; font-size: 15px;
}
#mimpi-detail-modal .md-footer {
  display: flex; gap: 10px; margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
#mimpi-detail-modal .md-footer .btn-recommend {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 16px;
  background: linear-gradient(135deg, #ff1744, #ff8c00);
  color: #fff;
  border-radius: 8px;
  font-weight: 700; font-size: 13px;
  text-decoration: none;
  transition: 0.18s;
}
#mimpi-detail-modal .md-footer .btn-recommend:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255, 23, 68, 0.45);
}
#mimpi-detail-modal .md-footer .btn-close {
  padding: 10px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-lt);
  color: var(--text-dim);
  border-radius: 8px;
  font-weight: 600; font-size: 13px;
  cursor: pointer; transition: 0.15s;
}
#mimpi-detail-modal .md-footer .btn-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
}

/* ---------- Bola — premium ---------- */

/* Banner info: disclaimer prediksi & voor dari analisa internal */
.bola-info-banner {
  display: flex; align-items: flex-start; gap: 14px;
  margin: 0 0 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.10) 0%, rgba(99, 102, 241, 0.10) 100%);
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-left: 3px solid #6366f1;
  border-radius: var(--radius-md);
}
.bola-info-banner .bib-icon {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
  border-radius: 8px;
  font-size: 15px;
  border: 1px solid rgba(99, 102, 241, 0.3);
}
.bola-info-banner .bib-body { flex: 1; min-width: 0; }
.bola-info-banner .bib-title {
  font-size: 13px; font-weight: 700;
  color: #c7d2fe;
  margin-bottom: 4px;
}
.bola-info-banner .bib-text {
  font-size: 12.5px; line-height: 1.55;
  color: var(--text-dim, #d1d5db);
}
.bola-info-banner .bib-text strong {
  color: #fef3c7; font-weight: 700;
}
@media (min-width: 600px) {
  .bola-info-banner { padding: 16px 18px; }
  .bola-info-banner .bib-title { font-size: 13px; }
  .bola-info-banner .bib-text { font-size: 13px; }
}


/* Filter bar */
.bola-filter {
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.bola-filter .bf-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
}
.bola-filter .bf-label {
  font-size: 10px; font-weight: 800;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 50px;
}
.bola-filter .bf-select {
  flex: 1; min-width: 180px;
  padding: 8px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border-lt);
  color: var(--text);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.bola-filter .bf-pills {
  display: flex; gap: 6px; flex-wrap: wrap;
  flex: 1;
}
.bola-filter .bf-pill {
  padding: 6px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border-lt);
  color: var(--text-dim);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: 0.15s;
}
.bola-filter .bf-pill:hover {
  border-color: var(--ruby);
  color: var(--text);
}
.bola-filter .bf-pill.active {
  background: linear-gradient(135deg, var(--ruby), #ff8c00);
  border-color: var(--ruby);
  color: #fff;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.35);
}

/* Date pills */
.bola-dates {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 6px;
}
.bola-dates .date-pill {
  padding: 8px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: 0.15s;
  white-space: nowrap;
}
.bola-dates .date-pill small {
  font-size: 10px;
  opacity: 0.7;
  font-weight: 600;
  margin-left: 4px;
}
.bola-dates .date-pill:hover {
  border-color: color-mix(in srgb, var(--ruby) 60%, transparent);
  color: var(--text);
}
.bola-dates .date-pill.active {
  background: linear-gradient(135deg, var(--ruby), #ff8c00);
  border-color: var(--ruby);
  color: #fff;
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.4);
}

.bola-status {
  text-align: right;
  margin-bottom: 12px;
  font-size: 12px; color: var(--text-mute);
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-lt);
  border-radius: 999px;
  width: fit-content;
  margin-left: auto;
}

/* Group per tanggal */
.match-date-group {
  margin-bottom: 20px;
}
.match-date-head {
  font-size: 13px; font-weight: 800;
  color: var(--text);
  margin-bottom: 10px;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(225, 29, 72, 0.18), transparent);
  border-left: 3px solid var(--ruby);
  border-radius: 0 8px 8px 0;
  letter-spacing: 0.3px;
}
.match-rows {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
@media (min-width: 768px) { .match-rows { grid-template-columns: 1fr 1fr; gap: 12px; } }

/* ============================================================
   Match card — score-centric premium (Sofascore/Flashscore style)
   ============================================================ */
.match-card {
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, 0.025) 0%, transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(225, 29, 72, 0.06) 0%, transparent 70%),
    linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--ruby)));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  position: relative;
  transition: 0.22s ease;
  overflow: hidden;
  isolation: isolate;
}
.match-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ruby), transparent);
  z-index: 2;
}
.match-card::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.02) 1px, transparent 0);
  background-size: 18px 18px;
  pointer-events: none; z-index: 0;
}
.match-card > * { position: relative; z-index: 1; }
.match-card:hover {
  border-color: color-mix(in srgb, var(--ruby) 50%, transparent);
  transform: translateY(-3px);
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(225, 29, 72, 0.25),
    0 6px 20px rgba(225, 29, 72, 0.15);
}
.match-card.is-live {
  border-color: #ef4444;
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.4), 0 6px 22px rgba(239, 68, 68, 0.25);
}
.match-card.is-live::before {
  background: linear-gradient(90deg, #ef4444, #f97316, #fbbf24, #f97316, #ef4444);
  background-size: 200% 100%;
  animation: live-stripe 3s linear infinite;
  height: 3px;
}
@keyframes live-stripe {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.match-card.is-finished { opacity: 0.88; }

/* League info row — top header */
.match-card .mc-league {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-lt);
  flex-wrap: wrap;
}
.match-card .league-badge-img {
  width: 24px; height: 24px;
  object-fit: contain;
  flex: 0 0 auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.match-card .mc-league-name {
  flex: 1; min-width: 0;
  font-size: 11px; font-weight: 800;
  color: var(--text);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.match-card .mc-round-pill {
  font-size: 9px; font-weight: 800;
  color: #fde68a;
  padding: 3px 8px;
  background: rgba(255, 179, 0, 0.12);
  border: 1px solid rgba(255, 179, 0, 0.35);
  border-radius: 999px;
  letter-spacing: 0.4px;
  flex: 0 0 auto;
}

/* Status badge */
.match-card .match-status {
  flex: 0 0 auto;
  font-size: 9px; font-weight: 800; letter-spacing: 0.6px;
  padding: 4px 10px; border-radius: 999px;
}
.match-card .match-status.live {
  background: linear-gradient(135deg, #dc2626, #f87171);
  color: #fff;
  animation: live-pulse 1.4s ease-in-out infinite;
}
.match-card .match-status.scheduled {
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, 0.4);
}
.match-card .match-status.finished {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-dim);
  border: 1px solid var(--border-lt);
}

/* Kickoff time row — di ATAS teams, plain text simpel */
.match-card .mc-kickoff-row {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}
.match-card .mc-kickoff-icon {
  font-size: 14px;
  opacity: 0.85;
}
.match-card .mc-kickoff-jam {
  font-size: 15px; font-weight: 800;
  color: #fde68a;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.5px;
}
@media (min-width: 600px) {
  .match-card .mc-kickoff-jam { font-size: 16px; }
  .match-card .mc-kickoff-icon { font-size: 16px; }
}
.match-card.is-live .mc-kickoff-jam { color: #fee2e2; }
.match-card.is-finished .mc-kickoff-jam { color: var(--text-dim); }

/* === Teams 3-column grid: HOME | CENTER (score/vs) | AWAY === */
.match-card .mc-teams-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 4px 16px;
}

/* Team column */
.match-card .mc-team {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  text-align: center;
  min-width: 0;
}

/* Logo wrap dengan ring + shadow */
.match-card .team-logo-wrap {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,255,255,0.85));
  border-radius: 50%;
  padding: 6px;
  box-shadow:
    0 6px 14px rgba(0, 0, 0, 0.4),
    0 0 0 2px rgba(255, 255, 255, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
  transition: transform 0.2s ease;
}
.match-card:hover .team-logo-wrap { transform: scale(1.05); }
@media (min-width: 600px) {
  .match-card .team-logo-wrap { width: 72px; height: 72px; padding: 7px; }
}
.match-card .team-logo {
  width: 100%; height: 100%;
  object-fit: contain;
}
.match-card .team-logo-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--ruby), #ff8c00);
  color: #fff;
  border-radius: 50%;
  font-weight: 800; font-size: 24px;
}

.match-card .mc-team-name {
  font-size: 12.5px; font-weight: 800;
  color: var(--text);
  line-height: 1.25;
  width: 100%;
  letter-spacing: 0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 600px) { .match-card .mc-team-name { font-size: 13.5px; } }

/* Team meta: rank pill + form dots */
.match-card .mc-team-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  min-height: 18px;
}
.match-card .team-rank {
  font-size: 9.5px; font-weight: 800;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: #fde68a;
  padding: 2px 6px;
  background: rgba(255, 179, 0, 0.15);
  border: 1px solid rgba(255, 179, 0, 0.35);
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.match-card .team-form {
  display: inline-flex; gap: 2px;
}
.match-card .form-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  border-radius: 3px;
  font-size: 8px; font-weight: 800;
  color: #fff;
  line-height: 1;
}
.match-card .form-dot.w { background: #10b981; }
.match-card .form-dot.d { background: #6b7280; }
.match-card .form-dot.l { background: #ef4444; }
.match-card .form-dot.n { background: #374151; color: #9ca3af; }

/* === Centerpiece: score atau VS + kickoff === */
.match-card .match-center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  min-width: 72px;
  padding: 0 6px;
}
.match-card .match-center .ms-vs {
  font-size: 15px; font-weight: 900;
  color: var(--text-mute);
  letter-spacing: 2px;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-lt);
  border-radius: 6px;
}
.match-card .match-center .ms-kickoff {
  font-size: 11px; font-weight: 700;
  color: var(--text-dim);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.3px;
}
.match-card .match-center.scored .ms-board {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));
  border: 1px solid var(--border-lt);
  border-radius: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}
.match-card .match-center.scored .ms-num {
  font-size: 26px; font-weight: 900;
  color: #fef3c7;
  min-width: 18px; text-align: center;
}
.match-card .match-center.scored .ms-dash {
  font-size: 20px; opacity: 0.4; color: var(--text-mute);
}
.match-card .match-center.scored.live .ms-board {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.25), rgba(249, 115, 22, 0.15));
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.3), inset 0 1px 2px rgba(0,0,0,0.3);
}
.match-card .match-center.scored.live .ms-num { color: #fff; }
.match-card .ms-live-dot {
  font-size: 9px; font-weight: 900;
  color: #fca5a5;
  letter-spacing: 1.2px;
  animation: live-pulse 1.4s ease-in-out infinite;
}
.match-card .ms-status-text {
  font-size: 9.5px; font-weight: 700;
  color: var(--text-mute);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Footer bar (jam, kalau scheduled tanpa score) — moved INSIDE match-center, but legacy fallback */
.match-card .mc-footer-bar {
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-lt);
  border-radius: 6px;
  text-align: center;
  font-size: 10.5px; font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.3px;
}

/* Prediksi block (skor + voor) — center semua, stacked vertikal */
.match-card .mc-prediksi {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(168, 85, 247, 0.08));
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 8px;
}
.match-card .mc-pred-tag {
  font-size: 9px; font-weight: 800;
  color: #a5b4fc;
  text-align: center;
  letter-spacing: 1px;
  padding-bottom: 6px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(99, 102, 241, 0.25);
}
.match-card .mc-pred-skor,
.match-card .mc-pred-voor {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center;
}
.match-card .mc-pred-skor + .mc-pred-voor {
  border-top: 1px dashed rgba(99, 102, 241, 0.35);
  padding-top: 8px;
}
.match-card .mp-label {
  font-size: 9px; font-weight: 800;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.match-card .mp-skor-val {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 18px; font-weight: 800;
  color: #fef3c7;
  letter-spacing: 1px;
}
.match-card .mc-pred-voor .mp-voor-team {
  font-size: 12px; font-weight: 700;
  color: #c7d2fe;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.match-card .mp-voor-val {
  font-size: 13px; font-weight: 800;
  color: #fef3c7;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  padding: 3px 12px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: 6px;
  white-space: nowrap;
}

/* Footer */
.match-card .mc-footer {
  display: flex; justify-content: center; align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-lt);
}
.match-card .mc-time {
  font-size: 11px; font-weight: 600;
  color: var(--text-dim);
}

/* Old match-card-text-center fallback kept for legacy */
.match-card-old {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  text-align: center;
}
.match-card .teams {
  font-size: 13px; line-height: 1.4;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.match-card .teams b {
  color: var(--text); font-weight: 700;
}
.match-card .score-row {
  margin-bottom: 8px;
}
.match-card .score {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 18px; font-weight: 800;
  padding: 5px 14px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 23, 68, 0.18), rgba(255, 140, 0, 0.15));
  border: 1px solid rgba(255, 23, 68, 0.4);
  color: var(--ruby-lt);
  display: inline-block;
}
.match-card .meta {
  font-size: 11px;
  color: var(--text-mute);
  padding-top: 8px; border-top: 1px dashed var(--border);
}
@media (min-width: 600px) {
  .match-card { padding: 16px 18px; }
  .match-card .teams { font-size: 15px; }
  .match-card .score { font-size: 20px; }
  .match-card .meta { font-size: 12px; }
}

.bola-filters {
  display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap;
}
.bola-filters .chip {
  padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
}
.bola-filters .chip.active { background: var(--ruby); color: #fff; border-color: var(--ruby); }

/* ---------- Bukti Kemenangan gallery ---------- */
.wins-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 600px) { .wins-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 900px) { .wins-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

.win-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: 0.18s;
}
@media (hover: hover) {
  .win-card:hover { transform: translateY(-3px); border-color: var(--ruby); }
}
.win-card .img-wrap {
  width: 100%; aspect-ratio: 3 / 4;
  background:
    linear-gradient(135deg, var(--bg-3) 0%, rgba(225, 29, 72, 0.15) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mute); font-size: 28px;
  position: relative;
}
.win-card .body { padding: 10px 12px 12px; }
.win-card .user { font-weight: 700; font-size: 13px; }
.win-card .amount {
  color: var(--hot); font-weight: 800; font-size: 13px; margin-top: 2px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.win-card .game { color: var(--text-mute); font-size: 11px; margin-top: 4px; }

/* ---------- Modal (pola spin) — bottom sheet on mobile ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(8px);
  display: none; align-items: flex-end; justify-content: center;
  overflow-y: auto;
}
.modal-backdrop.open { display: flex; animation: fadein 0.2s ease; }
@keyframes fadein { from { opacity: 0; } }

.modal {
  background: var(--bg-2); border: 1px solid var(--border-lt);
  border-radius: 18px 18px 0 0;
  width: 100%; max-width: 520px;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7);
  animation: slideup 0.3s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes slideup { from { transform: translateY(100%); } }
@media (min-width: 600px) {
  .modal-backdrop { align-items: center; padding: 16px; }
  .modal { border-radius: var(--radius); animation: fadein 0.2s; }
}

.modal-header {
  display: flex; align-items: center; gap: 14px; padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-2); z-index: 1;
}
.modal-header img {
  width: 64px; height: 64px; border-radius: 10px;
  object-fit: cover; border: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-header .info { flex: 1; min-width: 0; }
.modal-header .info h3 {
  font-size: 15px; font-weight: 700; line-height: 1.3;
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.modal-header .info .prov { color: var(--text-dim); font-size: 12px; }
.modal-header .rtp { text-align: center; font-weight: 800; flex-shrink: 0; }
.modal-header .rtp .num {
  font-size: 22px; line-height: 1;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.modal-header .rtp .lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.modal-header .rtp.hot .num { color: var(--hot); }
.modal-header .rtp.warm .num { color: var(--warm); }
.modal-header .rtp.cold .num { color: var(--cold); }

.modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: var(--ruby); }

.modal-body { padding: 20px; }
.modal-body h4 {
  font-size: 11px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 1.5px;
  margin-bottom: 12px; font-weight: 700;
}
.step-list { display: flex; flex-direction: column; gap: 8px; }
.step {
  display: flex; gap: 12px; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px;
}
.step .num {
  width: 28px; height: 28px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--ruby-lt), var(--ruby));
  color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.step .body { flex: 1; }
.step .title { font-weight: 600; font-size: 13px; }
.step .bet { color: var(--ruby-lt); font-weight: 700; font-size: 12px; margin-top: 2px; }
.step .note { color: var(--hot); font-size: 11px; margin-top: 3px; }

.buyspin {
  margin-top: 14px; padding: 14px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(225, 29, 72, 0.08));
  border: 1px dashed var(--gold);
  border-radius: 10px;
}
.buyspin .lbl {
  font-size: 11px; color: var(--gold);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.buyspin .val { margin-top: 6px; font-size: 13px; }
.buyspin .val strong { color: var(--text); font-size: 14px; }

.pola-cta {
  margin-top: 16px; padding: 12px; text-align: center;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 8px;
  color: var(--hot); font-weight: 600; font-size: 12px;
}

/* ---------- Bottom Nav ---------- */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  background: rgba(12, 10, 15, 0.92);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-top: 1px solid var(--border);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
}
@media (max-width: 859px) { .bottom-nav { display: flex; } }
.bottom-nav a {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 6px 4px;
  color: var(--text-mute); font-size: 10px; font-weight: 700;
  text-decoration: none; transition: color 0.18s;
  position: relative;
}
.bottom-nav a .ico {
  font-size: 24px; line-height: 1;
  display: inline-block;
  transition: transform 0.25s cubic-bezier(.2,1.5,.5,1);
  filter: grayscale(60%) brightness(0.75);
}
.bottom-nav a:hover .ico { transform: scale(1.15); }
.bottom-nav a:active .ico { transform: scale(0.85); }

.bottom-nav a.active {
  color: var(--ruby-lt);
}
.bottom-nav a.active .ico {
  filter: none;
  animation: nav-bounce 1.8s ease-in-out infinite;
}
@keyframes nav-bounce {
  0%, 100% { transform: translateY(0) scale(1) rotate(0); }
  25%      { transform: translateY(-3px) scale(1.18) rotate(-8deg); }
  50%      { transform: translateY(-1px) scale(1.1) rotate(0); }
  75%      { transform: translateY(-3px) scale(1.15) rotate(8deg); }
}
/* Glow di belakang ikon aktif */
.bottom-nav a.active::before {
  content: ""; position: absolute; top: 4px;
  width: 36px; height: 36px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 23, 68, 0.35), transparent 70%);
  z-index: -1;
  animation: nav-pulse 1.8s ease-in-out infinite;
}
@keyframes nav-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.3); opacity: 1; }
}

/* Hide SVG fallback kalau masih ada */
.bottom-nav a svg { display: none; }

/* ============================================================
   CONVERSION COMPONENTS — Wins ticker, Promo banner,
   WhatsApp float, Sticky CTA bar
   ============================================================ */

/* ---------- Live wins ticker (marquee scroll) ---------- */
.wins-ticker {
  background: linear-gradient(90deg, rgba(255, 23, 68, 0.18), rgba(255, 140, 0, 0.18));
  border-bottom: 1px solid rgba(255, 23, 68, 0.3);
  overflow: hidden; position: relative;
  padding: 8px 0;
}
.wins-ticker::before, .wins-ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40px;
  z-index: 2; pointer-events: none;
}
.wins-ticker::before { left: 0;  background: linear-gradient(90deg, var(--bg), transparent); }
.wins-ticker::after  { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }
.wins-ticker-inner {
  display: inline-flex; gap: 36px;
  white-space: nowrap;
  padding-left: 36px;
  animation: ticker-scroll 50s linear infinite;
  will-change: transform;
}
.wins-ticker-inner span {
  font-size: 12px; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 6px;
}
.wins-ticker-inner b { color: var(--text); font-weight: 700; }
.wins-ticker-inner em {
  color: var(--hot); font-weight: 800; font-style: normal;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* karena duplikat 2x, slide 50% = seamless */
}
.wins-ticker:hover .wins-ticker-inner { animation-play-state: paused; }

/* ---------- Promo banner (hero CTA) ---------- */
.promo-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-top: 18px;
  background: linear-gradient(135deg, #ff1744 0%, #ff8c00 100%);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(255, 23, 68, 0.4),
              inset 0 1px 0 rgba(255, 255, 255, 0.2);
  color: #fff; text-decoration: none;
  position: relative; overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.promo-banner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg,
    transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: promo-shine 4s ease-in-out infinite;
}
@keyframes promo-shine {
  0%, 30%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(200%); }
}
.promo-banner:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255, 23, 68, 0.55); }
.promo-banner:active { transform: scale(0.98); }

.promo-icon {
  font-size: 32px; flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  z-index: 1;
}
.promo-text { flex: 1; min-width: 0; z-index: 1; }
.promo-title {
  font-size: 13px; font-weight: 800; line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  letter-spacing: 0.3px;
}
.promo-title span {
  background: rgba(255, 255, 255, 0.25);
  padding: 2px 8px; border-radius: 6px;
  font-size: 15px; margin-left: 4px;
  display: inline-block;
}
.promo-sub {
  font-size: 11px; opacity: 0.95; margin-top: 3px;
  line-height: 1.3;
}
.promo-cta {
  flex-shrink: 0; padding: 8px 14px;
  background: #fff; color: var(--ruby-dk);
  border-radius: 10px; font-weight: 800; font-size: 12px;
  letter-spacing: 0.5px;
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
@media (min-width: 600px) {
  .promo-banner { padding: 16px 20px; gap: 16px; }
  .promo-icon { font-size: 42px; }
  .promo-title { font-size: 15px; }
  .promo-title span { font-size: 20px; }
  .promo-sub { font-size: 12px; }
  .promo-cta { padding: 10px 18px; font-size: 13px; }
}

/* ---------- Live Chat floating button ---------- */
.chat-float {
  position: fixed; right: 14px; bottom: 80px;   /* mobile: di atas bottom-nav */
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--primary-grad);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 6px 22px rgba(255, 23, 68, 0.55),
              0 0 0 4px rgba(255, 23, 68, 0.18);
  z-index: 70; cursor: pointer;
  transition: bottom 0.35s cubic-bezier(.2,.9,.3,1.1),
              transform 0.15s, box-shadow 0.2s;
  animation: chat-pulse 2.2s ease-in-out infinite;
}
.chat-float:hover { transform: scale(1.08); }
.chat-float:active { transform: scale(0.93); }
.chat-float svg { width: 28px; height: 28px; fill: currentColor; }
@keyframes chat-pulse {
  0%, 100% { box-shadow: 0 6px 22px rgba(255, 23, 68, 0.55), 0 0 0 0 rgba(255, 23, 68, 0.55); }
  50%      { box-shadow: 0 6px 22px rgba(255, 23, 68, 0.55), 0 0 0 16px rgba(255, 23, 68, 0); }
}

/* Push chat button UP saat sticky CTA muncul (mencegah overlap) */
.sticky-cta.show ~ .chat-float {
  bottom: 152px;   /* 68 bottom-nav + 60 sticky-cta + spacing */
}

@media (min-width: 860px) {
  .chat-float { bottom: 28px; right: 28px; width: 62px; height: 62px; }
  .chat-float svg { width: 32px; height: 32px; }
  .sticky-cta.show ~ .chat-float { bottom: 28px; }   /* desktop tdk ada sticky cta */
}

/* Tooltip "Live Chat 24/7" — muncul saat hover di desktop */
.chat-float::before {
  content: "💬 Live Chat 24/7";
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  background: #1a1a1a; color: #fff;
  padding: 6px 12px; border-radius: 6px;
  font-size: 12px; font-weight: 600;
  white-space: nowrap; opacity: 0;
  transition: opacity 0.2s; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
@media (hover: hover) {
  .chat-float:hover::before { opacity: 1; }
}

/* ---------- Sticky bottom CTA bar (mobile) ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 68px;   /* di atas bottom-nav */
  background: linear-gradient(180deg, #ff1744, #c4001d);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 14px;
  display: none; align-items: center; gap: 10px;
  z-index: 55;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.4);
}
.sticky-cta.show { display: flex; transform: translateY(0); }
@media (min-width: 860px) { .sticky-cta { display: none !important; } }   /* desktop: hide */

.sticky-cta-text {
  flex: 1; color: #fff;
}
.sticky-cta-text .ttl {
  font-weight: 800; font-size: 13px; line-height: 1.1;
}
.sticky-cta-text .sub {
  font-size: 11px; opacity: 0.9; margin-top: 2px;
}
.sticky-cta a.btn {
  background: #fff; color: var(--ruby-dk);
  padding: 8px 16px; border-radius: 10px;
  font-weight: 800; font-size: 13px;
  white-space: nowrap; flex-shrink: 0;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ---------- Modal MAIN SEKARANG button ---------- */
.modal-action {
  margin-top: 18px;
  display: flex; gap: 8px;
}
.modal-action .btn-play {
  flex: 1;
  background: var(--primary-grad);
  color: #fff; font-weight: 800; font-size: 13px;
  padding: 13px 20px; border-radius: 10px;
  text-align: center; text-decoration: none;
  box-shadow: 0 4px 16px rgba(255, 23, 68, 0.4);
  letter-spacing: 0.5px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.modal-action .btn-play:hover { filter: brightness(1.1); transform: translateY(-1px); }
.modal-action .btn-close {
  background: var(--bg-3); color: var(--text-dim);
  font-weight: 600; font-size: 13px;
  padding: 13px 18px; border-radius: 10px;
  border: 1px solid var(--border);
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-2);
  padding: 24px 0;
  color: var(--text-mute); font-size: 12px; text-align: center;
}
.footer strong { color: var(--text); }
.footer .links { margin-top: 8px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.footer a:hover { color: var(--ruby-lt); }