/* ============================================================
   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: 10.5px; font-weight: 700;
  color: color-mix(in srgb, var(--pasaran-accent) 80%, #ffffff);
  letter-spacing: 0.3px;
}
.prediksi-card .prediksi-note {
  font-size: 11px;
  color: #fde68a;
  background: rgba(255, 179, 0, 0.10);
  border: 1px solid rgba(255, 179, 0, 0.3);
  border-radius: 6px;
  padding: 7px 10px;
  margin: 8px 0 12px;
  text-align: center;
  line-height: 1.4;
}
.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);
}
/* Pill riwayat: distinct (ungu, separate visual dari date pills) */
.bola-dates .date-pill.riwayat {
  border-color: rgba(168, 85, 247, 0.4);
  color: #c4b5fd;
  margin-left: auto; /* push ke kanan untuk visual separation */
}
.bola-dates .date-pill.riwayat:hover {
  border-color: #a855f7;
  background: rgba(168, 85, 247, 0.12);
  color: #fff;
}
.bola-dates .date-pill.riwayat.active {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  border-color: #a855f7;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.4);
}

/* Live "stuck" — kalau live > 30 menit & score 0-0 dari source */
.skor-cell.live .skor-board.stuck {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.18), rgba(180, 83, 9, 0.15));
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
}
.skor-cell.live .skor-board.stuck .skor-num { color: #fde68a; }

.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;
}

/* ============================================================
   Tabel match (gaya asianbookie) — compact, scan-friendly
   ============================================================ */
.liga-section {
  margin-bottom: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.liga-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(225, 29, 72, 0.18), rgba(225, 29, 72, 0.04));
  border-bottom: 1px solid var(--border);
}
.liga-badge {
  width: 22px; height: 22px;
  object-fit: contain;
  flex: 0 0 auto;
}
.liga-name {
  flex: 1;
  font-size: 12px; font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.liga-count {
  font-size: 10px; font-weight: 700;
  color: var(--text-dim);
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
}

.liga-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.match-table {
  width: 100%;
  min-width: 1020px;
  border-collapse: collapse;
  font-size: 12px;
}
.match-table thead {
  background: rgba(0, 0, 0, 0.35);
}
.match-table thead th {
  padding: 10px 14px;
  font-size: 9.5px; font-weight: 800;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.match-table thead .col-home { text-align: right; }
.match-table thead .col-away { text-align: left; }
.match-table tbody tr {
  border-bottom: 1px solid var(--border-lt);
  transition: background 0.12s;
}
.match-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.match-table tbody tr.is-live {
  background: linear-gradient(90deg, rgba(239, 68, 68, 0.08), transparent);
}
.match-table tbody tr.is-finished { opacity: 0.7; }
.match-table tbody td {
  padding: 10px 14px;
  vertical-align: middle;
  font-size: 12px;
  text-align: center;
}

/* Kolom-spesifik (lebih lebar) */
.match-table .col-time {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  color: var(--text-dim);
  min-width: 105px;
  white-space: nowrap;
}
.match-table .row-time {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  line-height: 1.2;
}
.match-table .rt-tanggal {
  font-size: 9.5px; font-weight: 700;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.match-table .rt-jam {
  font-size: 12px; font-weight: 800;
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.match-table .row-time.live .rt-tanggal { color: #fecaca; }
.match-table .row-time.live .rt-jam { color: #fef3c7; }
.match-table .row-time.finished .rt-tanggal { color: var(--text-mute); }
.match-table .row-time.finished .rt-jam { color: var(--text-dim); }

/* ============================================================
   Kolom SKOR — premium scoreboard style (asianbookie/sofascore)
   ============================================================ */
.match-table .col-skor {
  min-width: 105px;
  white-space: nowrap;
  text-align: center;
  padding: 6px 10px;
}

.skor-cell {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* Scoreboard inti — gradient depth + monospace number */
.skor-cell .skor-board {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.35));
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.skor-cell .skor-num {
  font-size: 17px;
  font-weight: 900;
  color: #fef3c7;
  letter-spacing: 0.5px;
  min-width: 14px;
  text-align: center;
}
.skor-cell .skor-sep {
  font-size: 14px;
  color: var(--text-mute);
  opacity: 0.6;
  font-weight: 700;
}

/* Status chip di bawah scoreboard */
.skor-cell .skor-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
}

/* LIVE state — red glow + animated border + spinning ball */
.skor-cell.live .skor-board {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.22), rgba(127, 29, 29, 0.18));
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow:
    0 0 14px rgba(239, 68, 68, 0.25),
    inset 0 1px 2px rgba(0, 0, 0, 0.3);
}
.skor-cell.live .skor-num { color: #fff; }
.skor-cell.live .skor-sep { color: #fecaca; opacity: 0.8; }
.skor-cell.live .skor-chip.live {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  color: #fff;
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
  animation: live-chip-pulse 1.4s ease-in-out infinite;
}
@keyframes live-chip-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4); }
  50%      { box-shadow: 0 2px 14px rgba(239, 68, 68, 0.75); }
}

/* Bola sepak berputar — di dalam scoreboard, aligned dengan number */
.skor-cell .ball-spin {
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 14px;
  line-height: 1;
  margin-right: 2px;
  animation: ball-spin 1.4s linear infinite;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.5));
}
@keyframes ball-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* FINISHED state — neutral, slight muted */
.skor-cell.finished .skor-board {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  border-color: var(--border-lt);
}
.skor-cell.finished .skor-num { color: var(--text); }
.skor-cell.finished .skor-chip.finished {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
  border-color: var(--border-lt);
}

/* FINISHED tapi score belum tersedia dari source (pending update) */
.skor-cell.finished.no-score {
  cursor: help;
}
.skor-cell.finished.no-score .skor-board {
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.04));
  border-color: rgba(99, 102, 241, 0.3);
}
.skor-cell .skor-pending {
  font-size: 16px; font-weight: 800;
  color: #a5b4fc;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  min-width: 14px; text-align: center;
  opacity: 0.7;
}
.skor-cell .skor-chip.pending {
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
  border-color: rgba(99, 102, 241, 0.4);
  letter-spacing: 0.4px;
  font-size: 8.5px;
}

/* SCHEDULED — empty placeholder, gak ada chip */
.skor-cell.scheduled .skor-board {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}
.skor-cell.scheduled .skor-sep {
  font-size: 16px;
  color: var(--text-mute);
  opacity: 0.4;
}

/* Row cursor pointer karena clickable */
.match-table .match-row { cursor: pointer; }

/* === Modal popup match detail (prediksi + analisa) === */
#bola-match-modal .bmm-header {
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
#bola-match-modal .bmm-liga {
  font-size: 10px; font-weight: 800;
  color: var(--text-mute);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
#bola-match-modal .bmm-matchup {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap;
}
#bola-match-modal .bmm-team {
  font-size: 16px; font-weight: 800;
  color: var(--text);
}
#bola-match-modal .bmm-vs {
  font-size: 12px; font-weight: 700;
  color: var(--text-mute);
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}
#bola-match-modal .bmm-section {
  margin-bottom: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border-lt);
  border-radius: var(--radius-md);
}
#bola-match-modal .bmm-section.bmm-prediksi {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(168, 85, 247, 0.06));
  border-color: rgba(99, 102, 241, 0.3);
}
#bola-match-modal .bmm-section-title {
  font-size: 11px; font-weight: 800;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 10px;
  text-align: center;
}
#bola-match-modal .bmm-skor-board {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px;
}
#bola-match-modal .bmm-skor-num {
  font-size: 36px; font-weight: 900;
  color: #fde68a;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  min-width: 32px; text-align: center;
}
#bola-match-modal .bmm-skor-sep {
  font-size: 28px;
  color: var(--text-mute);
  opacity: 0.6;
}
#bola-match-modal .bmm-disclaimer {
  font-size: 10.5px;
  color: var(--text-mute);
  font-style: italic;
  text-align: center;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-lt);
  line-height: 1.4;
}
#bola-match-modal .bmm-meta-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
@media (min-width: 480px) {
  #bola-match-modal .bmm-meta-grid { grid-template-columns: 1fr 1fr; }
}
#bola-match-modal .bmm-meta-cell {
  text-align: center;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}
#bola-match-modal .bmm-meta-label {
  font-size: 9.5px; font-weight: 800;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}
#bola-match-modal .bmm-meta-val {
  font-size: 14px; font-weight: 800;
  color: var(--text);
}
#bola-match-modal .bmm-meta-val strong {
  color: #c7d2fe;
}
#bola-match-modal .bmm-footer-note {
  font-size: 11px;
  color: var(--text-mute);
  text-align: center;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-lt);
  font-style: italic;
  line-height: 1.4;
}
.match-table .row-time.live .live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  vertical-align: middle;
  margin-left: 4px;
  box-shadow: 0 0 6px rgba(239, 68, 68, 0.7);
  animation: live-pulse 1.4s ease-in-out infinite;
}
.match-table .row-time.finished { color: var(--text-mute); font-weight: 800; }

.match-table .col-home,
.match-table .col-away {
  max-width: 180px;
  padding: 8px 12px;
}
.match-table .col-home { text-align: right; }
.match-table .col-away { text-align: left; }

/* Team cell: pure flexbox, align ke arah masing-masing kolom */
.match-table .team-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.match-table .team-cell.home {
  justify-content: flex-end; /* logo di kanan, text di kiri logo */
}
.match-table .team-cell.away {
  justify-content: flex-start; /* logo di kiri, text di kanan logo */
}
.match-table .team-cell .team-text {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.match-table .team-logo-mini {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  object-fit: contain;
  background: rgba(255,255,255,0.95);
  border-radius: 50%;
  padding: 2px;
  display: block;
}
.match-table .team-logo-mini-fb {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--ruby), #ff8c00);
  color: #fff;
  border-radius: 50%;
  font-size: 10px; font-weight: 800;
}

.match-table .col-odds {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 700;
  color: #fde68a;
  min-width: 65px;
  white-space: nowrap;
}
.match-table .col-handicap {
  min-width: 110px;
  white-space: nowrap;
}
.match-table .hd-value {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-lt);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 800;
  font-size: 11.5px;
  color: var(--text);
  white-space: nowrap;
}
.match-table .hd-value.fav-home {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.4);
  color: #c7d2fe;
}
.match-table .hd-value.fav-away {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
}

.match-table .col-skor {
  min-width: 95px;
  white-space: nowrap;
}
.match-table .col-skor .skor-val {
  display: block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
}
.match-table .col-skor .skor-val.live { color: #fee2e2; }
.match-table .col-skor .skor-val.finished { color: var(--text); }
.match-table .col-skor .skor-val.prediksi { color: #fde68a; }
.match-table .col-skor .skor-val.empty { color: var(--text-mute); }
.match-table .col-skor .skor-tag {
  display: block;
  font-size: 8.5px; font-weight: 800;
  letter-spacing: 0.8px;
  color: var(--text-mute);
  margin-top: 2px;
}
.match-table .col-skor .skor-val.live + .skor-tag { color: #ef4444; }
.match-table .col-skor .skor-val.prediksi + .skor-tag { color: #c7d2fe; }

.match-table .col-ou-total {
  min-width: 70px;
  white-space: nowrap;
}
.match-table .ou-value {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 5px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 800;
  font-size: 11.5px;
  color: #fef3c7;
  white-space: nowrap;
}

.match-table .col-src {
  min-width: 110px;
  white-space: nowrap;
}
.match-table .src-tag {
  display: inline-block;
  font-size: 8.5px; font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.match-table .src-tag.live {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #6ee7b7;
}
.match-table .src-tag.algo {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.35);
  color: #c7d2fe;
}

/* Mobile: tabel scroll horizontal, tetap kolom lebar biar gak wrap */
@media (max-width: 768px) {
  .match-table {
    font-size: 11.5px;
    min-width: 880px; /* tetap lebar supaya handicap & O/U gak menjorok */
  }
  .match-table tbody td { padding: 9px 11px; }
  .match-table thead th { padding: 9px 11px; font-size: 9px; }
  .liga-header { padding: 9px 14px; }
  .liga-name { font-size: 11px; }
}

/* Group per tanggal — legacy untuk match card layout */
.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: 12px;
}
/* 1 kolom semua viewport — user prefer simpel & rapi */

/* ============================================================
   Match card — minimalist (compact, less padding & sizes)
   ============================================================ */
.match-card {
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--surface) 96%, var(--ruby)));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  position: relative;
  transition: 0.18s 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 (compact) */
.match-card .mc-league {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-lt);
  flex-wrap: wrap;
}
.match-card .league-badge-img {
  width: 18px; height: 18px;
  object-fit: contain;
  flex: 0 0 auto;
}
.match-card .mc-league-name {
  flex: 1; min-width: 0;
  font-size: 10px; font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.4px;
  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 compact */
.match-card .mc-kickoff-row {
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  margin-bottom: 6px;
}
.match-card .mc-kickoff-icon { font-size: 12px; opacity: 0.85; }
.match-card .mc-kickoff-jam {
  font-size: 13px; font-weight: 700;
  color: #fde68a;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.3px;
}
.match-card.is-live .mc-kickoff-jam { color: #fee2e2; }
.match-card.is-finished .mc-kickoff-jam { color: var(--text-dim); }

/* === Teams 3-column grid: compact === */
.match-card .mc-teams-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 0 8px;
}

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

/* Logo lebih kecil, no ring shadow */
.match-card .team-logo-wrap {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92);
  border-radius: 50%;
  padding: 3px;
}
.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: 16px;
}

.match-card .mc-team-name {
  font-size: 11.5px; font-weight: 700;
  color: var(--text);
  line-height: 1.2;
  width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}

/* Team meta: rank pill only (form dots dihapus untuk minimalis) */
.match-card .mc-team-meta {
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  min-height: 0;
}
.match-card .team-rank {
  font-size: 9px; font-weight: 700;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: #fde68a;
  padding: 1px 5px;
  background: rgba(255, 179, 0, 0.12);
  border: 1px solid rgba(255, 179, 0, 0.3);
  border-radius: 3px;
}
.match-card .team-form { display: none; } /* hide untuk minimalis */

/* === Centerpiece: compact === */
.match-card .match-center {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-width: 50px;
  padding: 0 4px;
}
.match-card .match-center .ms-vs {
  font-size: 11px; font-weight: 800;
  color: var(--text-mute);
  letter-spacing: 1.5px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.match-card .match-center.scored .ms-board {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  background: rgba(0,0,0,0.4);
  border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.match-card .match-center.scored .ms-num {
  font-size: 18px; font-weight: 800;
  color: #fef3c7;
  min-width: 14px; text-align: center;
}
.match-card .match-center.scored .ms-dash {
  font-size: 14px; opacity: 0.4;
}
.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 — compact */
.match-card .mc-prediksi {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 6px;
  padding: 6px 10px;
  background: rgba(99, 102, 241, 0.08);
  border: 1px solid rgba(99, 102, 241, 0.22);
  border-radius: 6px;
}
.match-card .mc-pred-tag {
  font-size: 8.5px; font-weight: 700;
  color: #a5b4fc;
  text-align: center;
  letter-spacing: 0.5px;
  opacity: 0.85;
}
.match-card .mc-pred-tag.live-odds {
  color: #6ee7b7; /* green untuk yang voor real dari bandar */
}
.match-card .mc-pred-skor,
.match-card .mc-pred-voor,
.match-card .mc-pred-ou {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
}
.match-card .mp-label {
  font-size: 9px; font-weight: 700;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.match-card .mp-skor-val {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px; font-weight: 800;
  color: #fef3c7;
}
.match-card .mc-pred-voor .mp-voor-team {
  font-size: 11px; font-weight: 700;
  color: #c7d2fe;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px;
}
.match-card .mp-voor-val {
  font-size: 11px; font-weight: 800;
  color: #fef3c7;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  padding: 1px 7px;
  background: rgba(255, 215, 0, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  border-radius: 4px;
}

/* 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 ---------- */

/* ---------- 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); }
/* ============================================================
   BUKTI-MENANG — PREMIUM REDESIGN (Olympic Podium Style)
   #1 tengah tinggi + crown floating + pulse glow
   #2 kiri silver, #3 kanan bronze
   #4-5 horizontal progress rows
   ============================================================ */

/* === STAT BANNER (mobile-first 2-col, desktop 3-col + divider) === */

/* ============================================================
   TOP GAMES PODIUM (Olympic Style)
   #1 tengah, lebih tinggi + crown 👑 + pulse glow
   ============================================================ */

/* === Olympic podium top 3 === */

/* Common tier card */
/* Rank emoji (top of card) */
@keyframes float{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-4px)}
}

/* #1 GOLD — TALLER + CROWN + PULSE GLOW */
@keyframes pulse-gold{
  0%,100%{box-shadow:0 0 0 4px rgba(255,193,7,.1),0 10px 30px rgba(255,193,7,.35),inset 0 1px 0 rgba(255,255,255,.15)}
  50%{box-shadow:0 0 0 4px rgba(255,193,7,.25),0 14px 40px rgba(255,193,7,.55),inset 0 1px 0 rgba(255,255,255,.2)}
}

/* #2 SILVER — kiri */
/* #3 BRONZE — kanan */
/* Game name & meta in podium */
/* === #4-5 Horizontal Progress Rows === */
.top-games-rest{
  display:flex;flex-direction:column;gap:8px;
  padding-top:6px;border-top:1px solid rgba(255,255,255,.06);
  margin-top:8px;
}
.tg-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:10px;
  position:relative;overflow:hidden;
}
.tg-row .tg-rank{
  width:26px;height:26px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border-radius:50%;
  font-size:.78rem;font-weight:900;color:#94a3b8;
}
.tg-row .tg-info{flex:1;min-width:0}
.tg-row .tg-info .tg-name{
  font-size:.86rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tg-row .tg-info .tg-meta{font-size:.7rem;color:#71717a;font-weight:600}
.tg-row .tg-bar{
  position:absolute;bottom:0;left:0;height:2px;
  background:linear-gradient(90deg,#ffc107,#ff8c00);
  border-radius:0 2px 2px 0;
}
.tg-row .tg-count{
  font-size:.95rem;font-weight:900;color:#ffc107;flex-shrink:0;
}

/* Desktop podium scaling */

/* ============================================================
   WIN CARD UPGRADES — Badge + Hover Lift + Glow
   ============================================================ */

@keyframes badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Amount jumbo emas */

/* Game chip ungu */

/* ============================================================
   LIGHTBOX MODAL
   ============================================================ */

@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.wins-lightbox[hidden]{display:none}

/* ============================================================
   PAGINATION
   ============================================================ */

/* ============================================================
   TOGEL TABS (Result / Prediksi / Mimpi)
   ============================================================ */
.togel-tabs-wrap{padding:14px 0 6px;background:linear-gradient(180deg,rgba(0,0,0,.15),transparent)}
.togel-tabs{
  display:flex;gap:6px;
  background:rgba(255,255,255,.04);
  padding:5px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
}
.tg-tab{
  flex:1;padding:11px 8px;
  border:none;background:transparent;
  color:#94a3b8;font-weight:700;font-size:.88rem;
  border-radius:10px;cursor:pointer;
  transition:all .15s;font-family:inherit;
  -webkit-tap-highlight-color:transparent;
}
.tg-tab:active{transform:scale(.97)}
.tg-tab.active{
  background:linear-gradient(135deg,#ff2d2d,#c10000);
  color:#fff;box-shadow:0 4px 12px rgba(255,45,45,.35);
}
.togel-tab-panel[hidden]{display:none}
@media (min-width:560px){.tg-tab{font-size:.95rem;padding:13px 16px}}
@media (min-width:900px){.togel-tabs{max-width:600px;margin:0 auto}}

/* ============================================================
   HEADER NAV — Desktop with active dot indicator
   ============================================================ */
@media (min-width:860px){
  .nav{flex:1;justify-content:center;margin:0 12px;gap:2px}
  .nav a{
    position:relative;padding:9px 16px;
    font-size:13.5px;font-weight:600;
  }
  .nav a:hover{color:#fff;background:rgba(255,255,255,.05)}
  .nav a.active{
    color:#fff;
    background:linear-gradient(135deg,rgba(255,23,68,.18),rgba(255,140,0,.12));
    box-shadow:inset 0 0 0 1px rgba(255,23,68,.3);
  }
  .nav a.active::after{
    content:'';position:absolute;bottom:-6px;left:50%;
    width:4px;height:4px;background:#ff1744;border-radius:50%;
    transform:translateX(-50%);
    box-shadow:0 0 8px #ff1744;
  }
}
@media (min-width:1100px){.nav a{padding:10px 18px;font-size:14px}}
/* ============================================================
   COMMON: .cta (header CTA wrap)
   ============================================================ */
.cta{display:inline-flex;align-items:center;gap:8px}
/* ============================================================
   PODIUM TOP 5 GAMES — MATCH bukti

/* Crown / medal emoji */

@keyframes podium-float{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-5px)}
}

/* Rank number */

/* Game name */

/* Count display */

/* Progress bar */

/* === TIER 1 (GOLD #1 — tengah, paling tinggi) === */

@keyframes tier1-glow{
  0%,100%{box-shadow:0 0 0 4px rgba(255,193,7,.12),0 12px 32px rgba(255,193,7,.4),inset 0 1px 0 rgba(255,255,255,.2)}
  50%{box-shadow:0 0 0 4px rgba(255,193,7,.3),0 16px 44px rgba(255,193,7,.6),inset 0 1px 0 rgba(255,255,255,.25)}
}

/* === TIER 2 (SILVER #2 — kiri) === */

/* === TIER 3 (BRONZE #3 — kanan) === */

/* === REST #4-5 horizontal rows === */

/* Mobile podium scaling */

/* ============================================================
   OTHER MISSING CLASSES
   ============================================================ */

/* Bola info banner tags */
.bib-tag-live{
  display:inline-block;padding:2px 8px;border-radius:6px;
  background:rgba(34,197,94,.15);color:#4ade80;
  font-size:.92em;font-weight:700;
}
.bib-tag-analisa{
  display:inline-block;padding:2px 8px;border-radius:6px;
  background:rgba(96,165,250,.15);color:#93c5fd;
  font-size:.92em;font-weight:700;
}

/* Live text */
.live-text{color:#ff1744;font-weight:800}

/* Mimpi tab sub label */
.mtab-sub{
  display:block;font-size:.65rem;color:#94a3b8;
  margin-top:2px;font-weight:600;
  text-transform:none;letter-spacing:0;
}

/* Info table generic */
.info-table{
  width:100%;border-collapse:collapse;
  font-size:.85rem;
}
.info-table tr{border-bottom:1px solid rgba(255,255,255,.06)}
.info-table tr:last-child{border-bottom:none}
.info-table td{padding:10px 6px;line-height:1.4}

/* EAT pages content */
.eat-content{
  max-width:780px;margin:0 auto;padding:20px 0;
  color:#e4e4e7;line-height:1.7;
}
.eat-content h2,.eat-content h3{color:#fff;margin:24px 0 12px}
.eat-content p{margin-bottom:12px}
.eat-content a{color:#ff8c00}
.eat-content ul,.eat-content ol{margin:12px 0 12px 24px}
.eat-content li{margin-bottom:6px}

/* Contact card */
.contact-card{
  padding:18px;border-radius:14px;
  background:linear-gradient(180deg,rgba(20,12,16,.7),rgba(12,6,8,.85));
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:14px;
}

/* Hero clean (bonus page) */
.hero-clean{
  padding:40px 0;
  background:radial-gradient(circle at 50% 0%,rgba(255,23,68,.15),transparent 60%);
}

/* Pola modal / Bola match modal */
.bola-match-modal,.pola-modal{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;
  padding:20px;backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.bola-match-modal.active,.pola-modal.active{display:flex}

/* ============================================================
   FINAL MISC — eat-links, sticky-cta-close, modals
   ============================================================ */
.eat-links{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-top:10px;padding-top:10px;
  border-top:1px solid rgba(255,255,255,.06);
  opacity:.75;font-size:11px;
}
.sticky-cta-close{
  position:absolute;top:6px;right:8px;
  width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.5);color:#fff;
  border:none;cursor:pointer;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s;z-index:2;
}
.sticky-cta-close:hover{background:rgba(255,23,68,.5)}
.ticker-backup{display:none}
.togel-riwayat-modal{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;
  padding:20px;backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.togel-riwayat-modal.active{display:flex}
.togel-riwayat-modal .trm-inner{
  background:linear-gradient(180deg,#1a0a05,#0c0608);
  border:1px solid rgba(255,193,7,.3);
  border-radius:16px;
  max-width:600px;width:100%;max-height:80vh;
  overflow-y:auto;padding:24px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
/* ============================================================
   BOLA + WIN CARD — FINAL CLEAN (no duplicate, no conflict)
   ============================================================ */

/* === STATUS ROW (mobile stack, desktop row) === */
.bola-status-row{
  display:flex;flex-direction:column;gap:8px;
  align-items:stretch;
  margin:10px 0 12px;
}
.bola-status{
  display:flex;align-items:center;justify-content:center;gap:7px;
  align-self:stretch;
  font-size:.82rem;font-weight:800;color:#fff;
  padding:0 18px;
  height:46px;line-height:1;
  border-radius:11px;
  background:linear-gradient(135deg,rgba(255,23,68,.18),rgba(255,140,0,.1));
  border:1px solid rgba(255,23,68,.35);
  text-align:center;box-sizing:border-box;
  white-space:nowrap;
  margin:0;
}
.bola-status::before{content:"⚽";font-size:1rem}
.bola-search-wrap{
  position:relative;display:flex;align-items:center;
  width:100%;height:46px;
  margin:0;
}
.bola-search-icon{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:.95rem;opacity:.55;pointer-events:none;z-index:1;
}
.bola-search-input{
  width:100%;height:46px;
  padding:0 38px 0 36px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:11px;
  color:#fff;font-size:.86rem;font-family:inherit;
  transition:border-color .18s, background .18s, box-shadow .18s;
  -webkit-appearance:none;appearance:none;box-sizing:border-box;
}
.bola-search-input:focus{
  outline:none;border-color:rgba(255,23,68,.5);
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 3px rgba(255,23,68,.12);
}
.bola-search-input::placeholder{color:rgba(255,255,255,.4)}
.bola-search-clear{
  position:absolute;right:9px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;
  border:none;cursor:pointer;font-size:.72rem;
  display:flex;align-items:center;justify-content:center;
  transition:background .15s, transform .15s;
}
.bola-search-clear:hover{background:rgba(255,23,68,.35);transform:translateY(-50%) scale(1.1)}
.bola-search-clear[hidden]{display:none}

@media (min-width:640px){
  .bola-status-row{
    display:flex;flex-direction:row;
    align-items:stretch;
    gap:12px;
    margin:12px 0 14px;
    height:46px;
  }
  .bola-status{
    flex:0 0 auto;
    align-self:stretch;
    font-size:.86rem;
    min-width:200px;
    height:46px;line-height:46px;
    margin:0;
    box-shadow:none;
  }
  .bola-search-wrap{
    flex:1;
    max-width:520px;
    margin-left:auto;
    height:46px;
    align-self:stretch;
  }
  .bola-search-input{
    font-size:.9rem;
    height:46px;line-height:1;
    margin:0;
  }
  .bola-search-icon,.bola-search-clear{top:23px}
}
@media (min-width:1100px){
  .bola-search-wrap{max-width:600px}
  .bola-status{min-width:220px}
}

/* === BOLA LIST + LIGA SECTIONS === */
.bola-list{display:flex;flex-direction:column;gap:0;margin:0}

/* === MATCH TABLE — TABLE LAYOUT EVERYWHERE (mobile horizontal scroll) === */
.liga-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.liga-table-wrap::-webkit-scrollbar{height:6px}
.liga-table-wrap::-webkit-scrollbar-track{background:rgba(0,0,0,.2)}
.liga-table-wrap::-webkit-scrollbar-thumb{background:rgba(255,23,68,.3);border-radius:3px}

.match-table{
  width:100%;min-width:920px;
  border-collapse:collapse;border-spacing:0;
}
.match-table thead{
  display:table-header-group;
  background:rgba(0,0,0,.3);
}
.match-table th{
  padding:10px 8px;text-align:center;
  font-size:.66rem;color:#94a3b8;
  text-transform:uppercase;letter-spacing:.08em;font-weight:800;
  white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.match-row{
  display:table-row;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .15s;
}
.match-row:hover{background:rgba(255,255,255,.03)}
.match-row td{
  display:table-cell;padding:11px 8px;vertical-align:middle;
  font-size:.82rem;color:#e4e4e7;
}
.match-row.is-live{
  background:linear-gradient(90deg,rgba(255,23,68,.06),transparent);
  border-left:3px solid #ff1744;
}

/* Columns alignment + min-width */
.col-time{text-align:center;min-width:90px}
.col-skor{text-align:center;min-width:80px}
.col-home,.col-away{min-width:150px}
.col-handicap{text-align:center;min-width:80px}
.col-odds{text-align:center;min-width:55px;font-weight:700;color:#fff}
.col-ou-total{text-align:center;min-width:60px}
.col-src{text-align:center;min-width:100px}

/* Row time */
.row-time{display:flex;flex-direction:column;align-items:center;gap:2px}
.rt-tanggal{font-size:.7rem;color:#94a3b8;font-weight:700}
.rt-jam{font-size:.82rem;font-weight:800;color:#fff;display:inline-flex;align-items:center;gap:5px}
.row-time.live .rt-jam{color:#ff1744}
.row-time.finished{opacity:.65}

/* Live dot */
.live-dot{
  display:inline-block;width:6px;height:6px;
  background:#ff1744;border-radius:50%;
  box-shadow:0 0 8px #ff1744;
  animation:live-pulse 1.2s ease-in-out infinite;
}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Skor cell */
.skor-cell{display:flex;flex-direction:column;align-items:center;gap:3px}
.skor-cell .skor-sep{color:#71717a;font-size:1rem;padding:0 4px}
.skor-board{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:8px;
  background:rgba(255,255,255,.04);
  font-weight:900;font-size:.92rem;
}
.skor-cell.live .skor-board{
  background:linear-gradient(135deg,#ff1744,#c41032);color:#fff;
  box-shadow:0 2px 8px rgba(255,23,68,.4);
}
.skor-num{font-size:.95rem;font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1}
.skor-chip{
  display:inline-block;font-size:.58rem;font-weight:800;
  padding:2px 7px;border-radius:999px;
  letter-spacing:.04em;text-transform:uppercase;
}
.skor-chip.live{
  background:rgba(255,23,68,.18);color:#ff1744;
  border:1px solid rgba(255,23,68,.4);
  animation:live-pulse 1.4s ease-in-out infinite;
}
.ball-spin{display:inline-block;animation:ball-roll 2s linear infinite}
@keyframes ball-roll{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Team cell */
.team-cell{display:flex;align-items:center;gap:8px}
.team-cell.home{justify-content:flex-end}
.team-cell.away{justify-content:flex-end;flex-direction:row-reverse}
.team-text{
  font-size:.86rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:130px;
}
.team-logo-mini{
  width:22px;height:22px;border-radius:50%;
  background:#fff;padding:2px;flex-shrink:0;object-fit:contain;
}
.team-logo-mini-fb{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#94a3b8;
  font-size:.72rem;font-weight:800;flex-shrink:0;
}

/* Handicap, OU, Source */
.hd-value{
  display:inline-block;padding:5px 12px;border-radius:8px;
  font-weight:800;font-size:.82rem;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}
.hd-value.fav-home{background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.4);color:#93c5fd}
.hd-value.fav-away{background:rgba(168,85,247,.15);border-color:rgba(168,85,247,.4);color:#c4b5fd}
.ou-value{
  display:inline-block;padding:4px 10px;border-radius:7px;
  font-weight:800;font-size:.82rem;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.3);
  color:#86efac;
}
.src-tag{
  display:inline-block;padding:3px 9px;border-radius:999px;
  font-size:.64rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.src-tag.live{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.3)}
.src-tag.algo{background:rgba(96,165,250,.12);color:#93c5fd;border:1px solid rgba(96,165,250,.3)}

/* === WIN CARD wc-* (bukti-menang) === */

/* === MOBILE SCROLL HINT === */
@media (max-width:767.98px){
  .liga-table-wrap{position:relative}
}


/* ============================================================
   BUKTI-MENANG — FULL CLEAN REBUILD (no duplicate)
   Mobile-first responsive, balanced UI/UX
   ============================================================ */

/* === STAT BANNER (3 stats horizontal mobile + desktop) === */
.stat-banner{
  position:relative;
  margin:14px 0 20px;
  padding:16px 14px;
  background:
    radial-gradient(circle at 20% 30%,rgba(255,193,7,.15),transparent 50%),
    radial-gradient(circle at 80% 70%,rgba(255,23,68,.12),transparent 50%),
    linear-gradient(135deg,#1a0a05 0%,#0c0608 100%);
  border:1px solid rgba(255,193,7,.22);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.4);
}
.stat-banner-decor{
  position:absolute;top:8px;right:12px;
  font-size:1.4rem;opacity:.25;pointer-events:none;
}
.stat-banner-items{
  position:relative;
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;
  gap:8px;align-items:center;
}
.stat-item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;
}
.stat-icon{font-size:1.4rem;line-height:1}
.stat-num{
  font-size:1.15rem;font-weight:900;color:#fff;
  letter-spacing:-.015em;line-height:1.1;
  font-family:inherit;
}
.stat-num.accent{
  background:linear-gradient(135deg,#ffc107 0%,#ff8c00 60%,#ff1744 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-num.small{font-size:.88rem;font-weight:800;line-height:1.2}
.stat-label{
  font-size:.6rem;color:#94a3b8;
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;
  white-space:nowrap;
}
.stat-divider{
  width:1px;height:34px;
  background:linear-gradient(180deg,transparent,rgba(255,193,7,.4),transparent);
}
@media (min-width:560px){
  .stat-banner{padding:20px 18px}
  .stat-num{font-size:1.4rem}
  .stat-num.small{font-size:1.05rem}
  .stat-icon{font-size:1.65rem}
  .stat-label{font-size:.66rem}
  .stat-divider{height:42px}
}
@media (min-width:900px){
  .stat-banner{padding:24px 22px}
  .stat-num{font-size:1.65rem}
  .stat-num.small{font-size:1.2rem}
  .stat-icon{font-size:1.85rem}
}

/* === TOP GAMES SECTION === */
.top-games-section{
  margin:0 0 20px;
  padding:18px 14px;
  background:
    radial-gradient(ellipse at top,rgba(255,193,7,.08),transparent 60%),
    linear-gradient(180deg,rgba(20,12,16,.7) 0%,rgba(12,6,8,.85) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  position:relative;overflow:hidden;
}
.tgs-head{text-align:center;margin-bottom:18px}
.tgs-title{
  font-size:1rem;font-weight:900;color:#fff;letter-spacing:-.01em;
  margin-bottom:4px;
}
.tgs-sub{
  font-size:.72rem;color:#94a3b8;font-weight:600;
  letter-spacing:.04em;
}
@media (min-width:560px){
  .top-games-section{padding:22px 18px}
  .tgs-title{font-size:1.15rem}
  .tgs-sub{font-size:.78rem}
}

/* === PODIUM Olympic (3 tier mobile-balanced) === */
.podium-tiers{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:6px;align-items:end;
  margin-bottom:14px;
}
.podium-card{
  position:relative;
  padding:32px 8px 14px;
  border-radius:12px;
  text-align:center;
  transition:transform .2s;
  min-width:0;
  overflow:hidden;
}
.podium-card:hover{transform:translateY(-3px)}
.podium-crown{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font-size:1.85rem;line-height:1;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.5));
  animation:podium-float 3s ease-in-out infinite;
}
@keyframes podium-float{
  0%,100%{transform:translateX(-50%) translateY(0)}
  50%{transform:translateX(-50%) translateY(-4px)}
}
.podium-rank-num{
  position:absolute;top:4px;right:6px;
  font-size:.58rem;font-weight:900;
  color:rgba(255,255,255,.45);
  letter-spacing:.04em;
}
.podium-name{
  font-size:.72rem;font-weight:800;color:#fff;
  margin-bottom:7px;letter-spacing:-.01em;line-height:1.22;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.44em;
  padding:0 1px;word-wrap:break-word;
  text-overflow:ellipsis;
}
.podium-count{
  display:flex;align-items:baseline;justify-content:center;gap:3px;
  margin-bottom:8px;
}
.pc-num{font-size:1.05rem;font-weight:900;letter-spacing:-.02em;line-height:1}
.pc-label{font-size:.55rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.podium-bar{
  width:100%;height:3px;
  background:rgba(255,255,255,.08);
  border-radius:2px;overflow:hidden;
}
.podium-bar-fill{height:100%;border-radius:2px;transition:width .5s ease}

/* Tier 1 (GOLD) — tengah, paling tinggi */
.podium-card.tier-1{
  background:
    radial-gradient(circle at 50% 0%,rgba(255,215,0,.45),transparent 60%),
    linear-gradient(180deg,rgba(255,193,7,.3) 0%,rgba(255,140,0,.16) 50%,rgba(40,20,5,.92) 100%);
  border:2px solid rgba(255,193,7,.6);
  box-shadow:0 0 0 3px rgba(255,193,7,.1),0 10px 26px rgba(255,193,7,.35);
  padding:44px 10px 18px;
  margin-top:-14px;
  animation:tier1-glow 2.4s ease-in-out infinite;
}
@keyframes tier1-glow{
  0%,100%{box-shadow:0 0 0 3px rgba(255,193,7,.1),0 10px 26px rgba(255,193,7,.35)}
  50%{box-shadow:0 0 0 3px rgba(255,193,7,.25),0 14px 36px rgba(255,193,7,.55)}
}
.podium-card.tier-1 .podium-crown{font-size:2.2rem;top:-19px}
.podium-card.tier-1 .podium-name{font-size:.82rem;min-height:2.44em;line-height:1.22}
.podium-card.tier-1 .pc-num{
  font-size:1.35rem;
  background:linear-gradient(135deg,#ffd700,#ff8c00);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.podium-card.tier-1 .pc-label{color:#ffc107}
.podium-card.tier-1 .podium-bar-fill{
  background:linear-gradient(90deg,#ffd700,#ff8c00);
  box-shadow:0 0 6px rgba(255,193,7,.5);
}

/* Tier 2 (SILVER) — kiri */
.podium-card.tier-2{
  background:linear-gradient(180deg,rgba(192,192,192,.26) 0%,rgba(160,160,160,.13) 50%,rgba(30,30,35,.92) 100%);
  border:2px solid rgba(192,192,192,.42);
  box-shadow:0 6px 18px rgba(192,192,192,.2);
}
.podium-card.tier-2 .pc-num{color:#d4d4d8}
.podium-card.tier-2 .podium-bar-fill{background:linear-gradient(90deg,#e5e5e5,#a3a3a3)}

/* Tier 3 (BRONZE) — kanan */
.podium-card.tier-3{
  background:linear-gradient(180deg,rgba(205,127,50,.26) 0%,rgba(180,110,40,.13) 50%,rgba(30,20,15,.92) 100%);
  border:2px solid rgba(205,127,50,.42);
  box-shadow:0 6px 18px rgba(205,127,50,.2);
}
.podium-card.tier-3 .pc-num{color:#fed7aa}
.podium-card.tier-3 .podium-bar-fill{background:linear-gradient(90deg,#cd7f32,#a0522d)}

/* Podium rest #4-5 */
.podium-rest{
  display:flex;flex-direction:column;gap:7px;
  padding-top:12px;margin-top:4px;
  border-top:1px solid rgba(255,255,255,.06);
}
.podium-row{
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:10px;
  padding:9px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:9px;
  position:relative;overflow:hidden;
}
.pr-rank{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  border-radius:50%;font-size:.72rem;font-weight:900;color:#94a3b8;
}
.pr-name{
  font-size:.82rem;font-weight:700;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pr-count{font-size:.88rem;font-weight:900;color:#ffc107}
.pr-bar{
  position:absolute;bottom:0;left:0;right:0;
  height:2px;background:rgba(255,255,255,.04);
}
.pr-bar-fill{
  height:100%;background:linear-gradient(90deg,#ff8c00,#ffc107);
  transition:width .5s ease;
}

.podium-loading{text-align:center;padding:30px;color:#94a3b8;font-size:.85rem}

@media (min-width:560px){
  .podium-card{padding:42px 10px 14px}
  .podium-card.tier-1{padding:52px 10px 16px}
  .podium-name{font-size:.82rem}
  .podium-card.tier-1 .podium-name{font-size:.92rem}
  .pc-num{font-size:1.3rem}
  .podium-card.tier-1 .pc-num{font-size:1.55rem}
}
@media (min-width:900px){
  .podium-tiers{gap:14px;max-width:640px;margin:0 auto 18px}
  .podium-card.tier-1 .pc-num{font-size:1.8rem}
  .pc-num{font-size:1.5rem}
}

/* === WINS GRID === */
.wins-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
@media (min-width:560px){.wins-grid{grid-template-columns:repeat(3,1fr);gap:12px}}
@media (min-width:900px){.wins-grid{grid-template-columns:repeat(4,1fr);gap:14px}}
@media (min-width:1200px){.wins-grid{grid-template-columns:repeat(5,1fr)}}

.wins-loading{
  grid-column:1 / -1;
  text-align:center;padding:40px 20px;color:#94a3b8;font-size:.9rem;
}

/* === WIN CARD === */
.win-card{
  position:relative;
  background:linear-gradient(180deg,rgba(20,12,16,.7),rgba(12,6,8,.85));
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  overflow:hidden;
  transition:transform .25s, box-shadow .25s, border-color .25s;
  cursor:pointer;
}
.win-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,140,0,.35);
  box-shadow:0 10px 24px rgba(255,140,0,.2),0 4px 10px rgba(0,0,0,.4);
}
.win-card .img-wrap{
  position:relative;width:100%;aspect-ratio:1/1;
  background:#0a0608;overflow:hidden;
}
.win-card .img-wrap img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .35s;
}
.win-card:hover .img-wrap img{transform:scale(1.05)}

/* Overlay on hover */
.wc-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.85) 100%);
  display:flex;align-items:flex-end;justify-content:center;
  padding:10px;opacity:0;transition:opacity .2s;
  pointer-events:none;
}
.win-card:hover .wc-overlay{opacity:1}
.wc-overlay-amount{
  font-size:.95rem;font-weight:900;color:#ffc107;
  text-shadow:0 2px 6px rgba(0,0,0,.8);
}

/* Body */
.win-card .body{padding:10px 12px 12px}
.wc-amount-big{
  font-size:1.05rem;font-weight:900;
  background:linear-gradient(135deg,#ffc107 0%,#ff8c00 50%,#ff1744 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.015em;line-height:1.1;
  margin-bottom:7px;
}
.wc-game-chip{
  display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding:4px 9px;border-radius:7px;
  background:linear-gradient(135deg,rgba(139,92,246,.18),rgba(168,85,247,.12));
  border:1px solid rgba(139,92,246,.3);
  color:#c4b5fd;font-size:.68rem;font-weight:700;
  margin-bottom:7px;line-height:1.2;
}
.wc-prov{
  font-size:.6rem;opacity:.75;font-weight:600;
  padding:1px 5px;border-radius:5px;
  background:rgba(139,92,246,.18);
}
.wc-meta{
  display:flex;align-items:center;justify-content:space-between;
  gap:6px;font-size:.66rem;color:#94a3b8;font-weight:600;
}
.wc-user,.wc-date{display:inline-flex;align-items:center;gap:3px}

/* Badges (kanan-atas image) */
.wc-badges{
  position:absolute;top:7px;right:7px;
  display:flex;flex-direction:column;gap:4px;z-index:2;
}
.wc-badge{
  padding:3px 8px;border-radius:999px;
  font-size:.56rem;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;
  box-shadow:0 3px 10px rgba(0,0,0,.4);
}
.wc-badge.wc-mega{
  background:linear-gradient(135deg,#ff1744,#ff8c00);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.4);
  animation:badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.wc-badge.wc-jackpot{background:linear-gradient(135deg,#ffc107,#ff8c00);color:#1a0a05}
.wc-badge.wc-baru{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff}

@media (min-width:560px){
  .win-card .body{padding:11px 13px 13px}
  .wc-amount-big{font-size:1.15rem;margin-bottom:8px}
  .wc-game-chip{font-size:.72rem;padding:5px 10px}
  .wc-meta{font-size:.7rem}
}

/* === PAGINATION === */
.wins-pagination{
  display:flex;align-items:center;justify-content:center;
  gap:10px;margin-top:22px;padding:14px;
  border-top:1px solid rgba(255,255,255,.06);
}
.pg-btn{
  padding:9px 16px;border-radius:9px;
  background:rgba(255,255,255,.06);color:#fff;
  border:1px solid rgba(255,255,255,.12);
  font-weight:700;font-size:.82rem;cursor:pointer;
  transition:all .15s;font-family:inherit;
}
.pg-btn:hover{background:rgba(255,23,68,.15);border-color:rgba(255,23,68,.4)}
.pg-btn:disabled{opacity:.4;cursor:not-allowed}
.pg-info{
  font-size:.82rem;color:#94a3b8;font-weight:700;
  min-width:90px;text-align:center;
}

/* === LIGHTBOX (JS toggle [hidden] attribute) === */
.wins-lightbox{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.93);padding:20px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.wins-lightbox[hidden]{display:none}
.wlb-img{
  max-width:92vw;max-height:78vh;
  object-fit:contain;border-radius:12px;
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 2px rgba(255,193,7,.18);
}
.wlb-caption{
  position:absolute;bottom:18px;left:18px;right:18px;
  text-align:center;color:#fff;font-size:.86rem;font-weight:600;
  background:rgba(0,0,0,.8);padding:11px 16px;border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  max-width:600px;margin:0 auto;
}
.wlb-close{
  position:absolute;top:18px;right:18px;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;
  border:1px solid rgba(255,255,255,.2);
  font-size:1.4rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.wlb-close:hover{background:rgba(255,23,68,.3);border-color:rgba(255,23,68,.6);transform:rotate(90deg)}