.promo{margin:12px 14px 0;position:relative;border-radius:18px;overflow:hidden;border:1px solid rgba(139,92,246,.35);background:linear-gradient(150deg,#241a3d,#170f28 60%);min-height:132px}
.promo-slide{position:absolute;inset:0;padding:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;opacity:0;pointer-events:none;transition:opacity .4s ease}
.promo-slide.active{opacity:1;pointer-events:auto}
.promo-eyebrow{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--jade);background:rgba(52,211,153,.12);padding:3px 8px;border-radius:999px}
.promo-title{font-weight:800;font-size:17px;line-height:1.15;margin-top:8px;max-width:190px;color:#f4f0fb}
.promo-btn{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:#f4f0fb;color:#0b0714;font-weight:700;font-size:12px;padding:7px 13px;border-radius:999px;border:none;cursor:pointer;font-family:inherit}
.promo-btn.ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border-str)}
.promo-art{font-size:44px}
.promo-dots{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:3}
.promo-dot{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.25);cursor:pointer;border:none;padding:0}
.promo-dot.active{width:16px;background:#f4f0fb}
.grid{padding:0 14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.game-card{border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--border);text-align:left;cursor:pointer;padding:0;color:inherit;font-family:inherit}
.card-art{aspect-ratio:3/4;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card-badge{position:absolute;top:6px;left:6px;font-size:8px;font-weight:800;padding:2px 6px;border-radius:999px;z-index:3}
.card-badge.new{background:var(--jade);color:#04331f}
.card-fav{position:absolute;top:6px;right:6px;z-index:3;background:rgba(0,0,0,.35);border:none;border-radius:999px;width:22px;height:22px;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.card-emoji{font-size:30px;z-index:2}
.card-body{padding:8px 9px 10px}
.card-name{font-size:11px;font-weight:700;line-height:1.2}
.card-sub{font-size:9px;color:var(--text-dim);margin-top:2px}
.fill-1{background:linear-gradient(160deg,#3a2d63,#221641)}.fill-2{background:linear-gradient(160deg,#2e2350,#180f2c)}.fill-3{background:linear-gradient(160deg,#1f3a4a,#132430)}.fill-4{background:linear-gradient(160deg,#3a2440,#211129)}.fill-5{background:linear-gradient(160deg,#243a2e,#132419)}.fill-6{background:linear-gradient(160deg,#4a3320,#241407)}.fill-7{background:linear-gradient(160deg,#1f2f4a,#0d1626)}.fill-8{background:linear-gradient(160deg,#3d1f2b,#1f0d15)}.fill-9{background:linear-gradient(160deg,#1c2f3f,#0a1622)}.fill-10{background:linear-gradient(160deg,#4a2c10,#2b1608)}.fill-11{background:linear-gradient(160deg,#4a1010,#2b0808)}.fill-12{background:linear-gradient(160deg,#0e4a4a,#082929)}.fill-13{background:linear-gradient(160deg,#104a3a,#082c22)}.fill-14{background:linear-gradient(160deg,#3a2c63,#1f1641)}.fill-15{background:linear-gradient(160deg,#4a3520,#241a08)}.fill-olympus{background:linear-gradient(160deg,#1e3a8a,#0c1e4a)}.fill-solitaire{background:linear-gradient(160deg,#0f4a2e,#052918)}.fill-domino{background:linear-gradient(160deg,#4a1a3a,#1f0a19)}
.promo-banner{margin:20px 14px 0;border-radius:14px;padding:12px;background:var(--panel-2);border:1px solid var(--border);display:flex;align-items:center;gap:11px}
.promo-banner .ic{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--violet),var(--pink));display:flex;align-items:center;justify-content:center;font-size:16px;flex:none}
.promo-banner .tt{font-size:12px;font-weight:700}
.promo-banner .ds{font-size:10px;color:var(--text-dim);margin-top:1px}

/* ============================================
   GAMBAR BANNER KARTU GAME (PNG)
   ============================================ */
.card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
}

/* Overlay gelap supaya teks Lv/BARU tetap kebaca di atas gambar terang */
.card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 28%, transparent 70%, rgba(0,0,0,.45) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Label Level / HI di pojok kanan bawah */
.card-lv {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 8.5px;
  font-weight: 800;
  background: rgba(0,0,0,.6);
  color: #fff;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .02em;
  z-index: 3;
  backdrop-filter: blur(4px);
}
.card-lv.hi { color: var(--gold); }