/* ============================================================
   v5 — ZAMRUD88 (Glass / Light Theme)

   Lifted from the design's app.css verbatim where possible, plus
   extensions for pages the prototype didn't draw (forms, tables,
   empty states, error pages, history rows).

   Design tokens live in theme-<name>.css (oklch-based). Each theme
   file rebinds ~25 CSS custom properties on :root.
   ============================================================ */

/* ─── default :root tokens (safety net if theme-<name>.css fails to load) ───
   Mirrors emerald defaults. Theme files override via :root[data-theme="<name>"] specificity. */
:root {
  --t-canvas:        oklch(98.4% 0.012 162);
  --t-canvas-2:      oklch(96.2% 0.024 162);
  --t-glass:         color-mix(in srgb, white 70%, transparent);
  --t-glass-strong:  color-mix(in srgb, white 84%, transparent);
  --t-glass-tint:    color-mix(in srgb, oklch(78% 0.13 162) 12%, transparent);
  --t-line:          color-mix(in srgb, oklch(38% 0.06 162) 14%, transparent);
  --t-line-strong:   color-mix(in srgb, oklch(38% 0.06 162) 26%, transparent);
  --t-ink:           oklch(22% 0.03 162);
  --t-ink-soft:      oklch(38% 0.03 162);
  --t-ink-mute:      oklch(54% 0.02 162);
  --t-brand:         oklch(58% 0.16 162);
  --t-brand-2:       oklch(72% 0.18 162);
  --t-brand-deep:    oklch(34% 0.10 162);
  --t-brand-tint:    oklch(94% 0.04 162);
  --t-on-brand:      oklch(99% 0.005 162);
  --t-blob-1:        oklch(82% 0.18 162);
  --t-blob-2:        oklch(80% 0.14 200);
  --t-blob-3:        oklch(86% 0.14 130);
  --t-pos:           oklch(62% 0.16 152);
  --t-neg:           oklch(60% 0.20 28);
  --t-warn:          oklch(76% 0.16 78);
  --t-info:          oklch(64% 0.14 240);
  --t-r-sm: 10px; --t-r-md: 16px; --t-r-lg: 24px; --t-r-xl: 32px;
  --t-shadow-sm: 0 1px 2px rgba(20,40,30,0.04), 0 2px 8px rgba(20,40,30,0.04);
  --t-shadow-md: 0 4px 14px rgba(20,40,30,0.06), 0 16px 40px rgba(20,40,30,0.06);
  --t-shadow-lg: 0 12px 28px rgba(20,40,30,0.08), 0 28px 80px rgba(20,40,30,0.10);
  --t-ring:      0 0 0 3px color-mix(in srgb, var(--t-brand) 35%, transparent);
}

/* ─── reset + base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  /* Belt-and-suspenders: never let horizontal scroll happen on mobile.
     (Lesson from v6 — wide marquees scroll inside their overflow:hidden
     parent rather than pushing the document wider than the device.) */
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  font-family: 'Space Grotesk', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--t-ink);
  background: #ece8e2;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--t-ring); border-radius: 6px; }
main { min-height: 50vh; }

/* serif-italic accent */
.serif-i { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.serif { font-family: 'Instrument Serif', serif; font-weight: 400; letter-spacing: -0.01em; }
.mono-num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ─── screen frame ─────────────────────────────────────────── */
.screen {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(1200px 800px at 8% -10%, var(--t-canvas-2), transparent 60%),
    radial-gradient(900px 600px at 110% 30%, var(--t-canvas-2), transparent 55%),
    var(--t-canvas);
  color: var(--t-ink);
  overflow: hidden;
  transition: background .45s ease;
  min-height: 20vh;
}
.screen.density-compact { --t-density: .85; }
.screen.density-cozy    { --t-density: 1; }

/* Ambient blobs (parallax depth layer) */
.blobs { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.blobs::before, .blobs::after, .blobs > i {
  content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  transition: background .6s ease, opacity .6s ease;
}
.blobs::before { width: 520px; height: 520px; background: var(--t-blob-1); top: -120px; left: -80px; }
.blobs::after  { width: 440px; height: 440px; background: var(--t-blob-2); top: 30%; right: -120px; }
.blobs > i     { width: 380px; height: 380px; background: var(--t-blob-3); bottom: -140px; left: 30%; }

.blobs.mobile::before { width: 280px; height: 280px; top: -80px; left: -60px; }
.blobs.mobile::after  { width: 240px; height: 240px; right: -80px; top: 40%; }
.blobs.mobile > i     { width: 220px; height: 220px; bottom: -80px; left: 30%; }

/* ─── glass primitive ──────────────────────────────────────── */
.glass {
  background: var(--t-glass);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-md);
  box-shadow: var(--t-shadow-sm);
}
.glass-strong {
  background: var(--t-glass-strong);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-md);
  box-shadow: var(--t-shadow-md);
}
.glass-tint {
  background: linear-gradient(135deg, var(--t-glass-tint), color-mix(in srgb, white 60%, transparent));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-md);
}

/* ─── header (sticky) ──────────────────────────────────────── */
.hdr {
  position: sticky; top: 12px; z-index: 30;
  margin: 12px 24px 0;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px;
  border-radius: 999px;
}
.hdr .logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px; }
.hdr .logo .mark {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--t-brand-2), var(--t-brand-deep));
  display: grid; place-items: center; color: var(--t-on-brand);
  box-shadow: var(--t-shadow-sm), inset 0 1px 0 rgba(255,255,255,.35);
  font-family: 'Instrument Serif', serif; font-size: 20px; font-style: italic;
}
.hdr .name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.hdr .name em { font-style: normal; color: var(--t-brand); font-family: 'Instrument Serif', serif; font-size: 19px; }

.nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: center; }
.nav a {
  position: relative; padding: 8px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--t-ink-soft);
  transition: color .18s, background .18s;
}
.nav a:hover { color: var(--t-ink); background: color-mix(in srgb, var(--t-brand) 7%, transparent); }
.nav a.active { color: var(--t-ink); background: var(--t-glass-strong); box-shadow: var(--t-shadow-sm); }

.hdr-actions { display: flex; align-items: center; gap: 8px; }

/* marquee */
.marquee {
  margin: 8px 24px 0;
  border-radius: 999px;
  padding: 8px 18px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--t-ink-soft);
  overflow: hidden;
}
.marquee .pulse {
  flex: 0 0 8px; height: 8px; border-radius: 50%;
  background: var(--t-brand);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-brand) 50%, transparent);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-brand) 60%, transparent); }
  70%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--t-brand) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--t-brand) 0%, transparent); }
}
.marquee-track {
  flex: 1; min-width: 0; position: relative; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.marquee-track > div {
  white-space: nowrap;
  animation: scroll-x 38s linear infinite;
  display: inline-block;
  padding-left: 100%;
}
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ─── buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 500; font-size: 14px; line-height: 1;
  transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: linear-gradient(180deg, var(--t-brand-2), var(--t-brand));
  color: var(--t-on-brand);
  box-shadow: var(--t-shadow-sm), inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-primary:hover { box-shadow: var(--t-shadow-md), inset 0 1px 0 rgba(255,255,255,.4); }
.btn-ghost {
  background: var(--t-glass-strong);
  color: var(--t-ink);
  border-color: var(--t-line);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: white; }
.btn-outline {
  background: transparent; color: var(--t-ink);
  border-color: var(--t-line-strong);
}
.btn-outline:hover { background: var(--t-glass); }
.btn-sm { padding: 7px 12px; font-size: 13px; }
.btn-lg { padding: 14px 22px; font-size: 15px; }
.btn-block { width: 100%; }

/* ─── forms ────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--t-ink-mute); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  appearance: none; -webkit-appearance: none;
  height: 44px; padding: 0 14px;
  border-radius: 12px;
  background: var(--t-glass-strong);
  border: 1px solid var(--t-line);
  color: var(--t-ink);
  font: inherit; font-size: 14px;
  transition: border .15s, box-shadow .15s;
  width: 100%;
}
.field textarea { height: auto; min-height: 80px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--t-brand); box-shadow: var(--t-ring); }
.field input::placeholder { color: var(--t-ink-mute); }
.field .hint { font-size: 11px; color: var(--t-ink-mute); }
.field .err { color: var(--t-neg); font-size: 12px; margin-top: 2px; }

.form-card {
  margin: 24px;
  padding: 32px;
  border-radius: var(--t-r-lg);
  background: var(--t-glass-strong);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow-md);
  max-width: 640px;
  margin-left: auto; margin-right: auto;
}
.form-card.wide { max-width: 880px; }
.form-card .form-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--t-brand-deep); font-weight: 600; margin-bottom: 4px; }
.form-card h1 { font-size: 32px; margin: 0 0 6px; font-weight: 600; letter-spacing: -0.02em; }
.form-card h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--t-brand); padding-right: 4px; }
.form-card .form-sub { color: var(--t-ink-soft); font-size: 14px; margin-bottom: 24px; }

/* 2-col form grid (referral-register, register). Mobile collapses via @media.
   Inline grid-template-columns would beat the media query — use this class. */
.register-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.register-grid > .field { min-width: 0; }
.register-grid > .field input,
.register-grid > .field select { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* 1fr 2fr split on profile page (avatar/balance card + info table). */
.profile-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  align-items: start;
}

/* History/transaction table wrapper. Desktop: overflow:hidden so the rounded
   corners of glass-strong properly clip the table. Mobile: overflow-x:auto so
   users can swipe horizontally to see all 5 columns (Tanggal, Tipe, Metode,
   Jumlah, Status) — the table is naturally ~530px wide and would clip the
   right columns on a 390px screen otherwise. */
.table-wrap { overflow: hidden; }
@media (max-width: 720px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap .data-table { min-width: 540px; }
}

.form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--t-line);
}

/* ─── chip / tag ──────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
  background: var(--t-glass-strong); border: 1px solid var(--t-line);
  color: var(--t-ink-soft);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t-pos); }
.chip-brand { background: var(--t-brand-tint); color: var(--t-brand-deep); border-color: color-mix(in srgb, var(--t-brand) 25%, transparent); }
.chip-warn  { background: color-mix(in srgb, var(--t-warn) 18%, white); color: oklch(38% 0.10 78); border-color: color-mix(in srgb, var(--t-warn) 30%, transparent); }
.chip-pos   { background: color-mix(in srgb, var(--t-pos) 14%, white); color: var(--t-pos); border-color: color-mix(in srgb, var(--t-pos) 30%, transparent); }
.chip-neg   { background: color-mix(in srgb, var(--t-neg) 14%, white); color: var(--t-neg); border-color: color-mix(in srgb, var(--t-neg) 30%, transparent); }

/* ─── alerts ──────────────────────────────────────────────── */
.alert {
  padding: 12px 16px; border-radius: var(--t-r-md);
  font-size: 13px; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 16px;
  border: 1px solid;
}
.alert-info    { background: color-mix(in srgb, var(--t-info) 10%, white); border-color: color-mix(in srgb, var(--t-info) 30%, transparent); color: oklch(34% 0.12 240); }
.alert-warning { background: color-mix(in srgb, var(--t-warn) 14%, white); border-color: color-mix(in srgb, var(--t-warn) 30%, transparent); color: oklch(38% 0.10 78); }
.alert-success { background: color-mix(in srgb, var(--t-pos) 12%, white); border-color: color-mix(in srgb, var(--t-pos) 30%, transparent); color: oklch(36% 0.12 152); }
.alert-danger  { background: color-mix(in srgb, var(--t-neg) 12%, white); border-color: color-mix(in srgb, var(--t-neg) 30%, transparent); color: oklch(36% 0.16 28); }

/* ─── hero (carousel) ──────────────────────────────────────── */
.hero {
  position: relative;
  margin: 24px;
  border-radius: var(--t-r-xl);
  overflow: hidden;
  min-height: 380px;
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .9s ease;
  display: flex; align-items: center;
  pointer-events: none;
}
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide .panel {
  position: absolute; left: 36px; top: 50%; transform: translateY(-50%);
  max-width: 56%; padding: 32px 36px;
  border-radius: var(--t-r-lg);
}
.hero-slide .kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--t-brand-deep);
  padding: 5px 10px; border-radius: 999px;
  background: var(--t-brand-tint);
  border: 1px solid color-mix(in srgb, var(--t-brand) 25%, transparent);
}
.hero-slide h1 {
  margin: 14px 0 10px; font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 600;
}
.hero-slide h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--t-brand); padding-right: 6px; }
.hero-slide p { margin: 0 0 18px; font-size: 15px; color: var(--t-ink-soft); line-height: 1.55; }
.hero-art {
  position: absolute; right: -40px; top: -40px; bottom: -40px; width: 60%;
  background:
    radial-gradient(circle at 30% 30%, var(--t-blob-1), transparent 60%),
    radial-gradient(circle at 70% 70%, var(--t-blob-2), transparent 60%),
    radial-gradient(circle at 50% 50%, var(--t-blob-3), transparent 70%);
  filter: blur(8px) saturate(140%);
  opacity: .8;
}
.hero-art-card {
  position: absolute; right: 8%; top: 50%; transform: translateY(-50%) rotate(-6deg);
  width: 240px; height: 300px; border-radius: 24px;
  background: linear-gradient(160deg, var(--t-brand-2) 0%, var(--t-brand-deep) 100%);
  box-shadow: var(--t-shadow-lg), inset 0 1px 0 rgba(255,255,255,.25);
  display: flex; flex-direction: column; justify-content: space-between; padding: 24px;
  color: var(--t-on-brand);
  overflow: hidden;
}
.hero-art-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.35), transparent 50%);
}
.hero-art-card-2 {
  position: absolute; right: 22%; top: 50%; transform: translateY(-50%) translate(-40px, 30px) rotate(8deg);
  width: 220px; height: 280px; border-radius: 24px;
  background: var(--t-glass-strong);
  border: 1px solid var(--t-line);
  box-shadow: var(--t-shadow-md);
  backdrop-filter: blur(18px);
  padding: 20px; display: flex; flex-direction: column; gap: 10px;
}

.hero-dots {
  position: absolute; bottom: 22px; left: 36px;
  display: flex; gap: 6px; z-index: 3;
}
.hero-dots button {
  width: 28px; height: 4px; border-radius: 2px; border: none;
  background: color-mix(in srgb, var(--t-ink) 20%, transparent);
  transition: background .2s, width .25s;
  cursor: pointer;
}
.hero-dots button.active { background: var(--t-brand); width: 44px; }
.hero-arrows {
  position: absolute; bottom: 18px; right: 24px;
  display: flex; gap: 8px; z-index: 3;
}
.hero-arrows button {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--t-line);
  background: var(--t-glass-strong);
  display: grid; place-items: center;
  color: var(--t-ink);
  transition: background .15s;
  cursor: pointer;
}
.hero-arrows button:hover { background: white; }

/* Static hero slide — when route serves real banner image.
   background-size: contain so wide promo banners (~4:1) always show fully
   instead of being cropped by the cover behaviour (lesson from v6). The
   wider hero frame may letterbox above/below for non-wide images, but the
   panel overlays the left half anyway so the visual stays balanced. */
.hero-slide.bg-image { background-color: var(--t-canvas-2, #f7f4ee); }
.hero-slide.bg-image .panel { background: rgba(255,255,255,0.75); backdrop-filter: blur(14px); }
/* Banner image — preserves natural aspect ratio. Desktop: positioned absolute
   so the panel can overlay (as designed). Mobile: shown via flex column above
   the panel (defined in @media block below). */
.hero-slide-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ─── section ──────────────────────────────────────────────── */
.section { margin: 8px 24px 24px; }
.section-head {
  display: flex; align-items: end; justify-content: space-between; gap: 16px;
  margin-bottom: 14px; padding: 0 4px;
}
.section-head h2 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin: 0;
  display: flex; align-items: baseline; gap: 8px;
}
.section-head h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--t-brand); font-size: 26px; }
.section-head .meta { font-size: 13px; color: var(--t-ink-mute); }
.section-head a { font-size: 13px; color: var(--t-ink-soft); padding: 6px 12px; border-radius: 999px; }
.section-head a:hover { background: var(--t-glass); color: var(--t-ink); }

/* ─── game tile ────────────────────────────────────────────── */
.tile {
  position: relative;
  border-radius: var(--t-r-md);
  overflow: hidden;
  aspect-ratio: 3/4;
  background: var(--t-glass-strong);
  border: 1px solid var(--t-line);
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s;
  text-decoration: none; color: inherit;
  display: block;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--t-shadow-md); border-color: color-mix(in srgb, var(--t-brand) 35%, transparent); }
.tile-art {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.tile-art img { width: 100%; height: 100%; object-fit: cover; }
.tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(20,30,25,.55) 100%);
}
.tile-rtp {
  position: absolute; top: 8px; left: 8px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,.85); color: var(--t-ink); backdrop-filter: blur(10px);
  font-size: 10px; font-weight: 600; letter-spacing: 0.02em;
}
.tile-fav {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.85); border: none;
  display: grid; place-items: center; color: var(--t-ink-mute);
  backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .2s;
}
.tile:hover .tile-fav { opacity: 1; }
.tile-fav.is-fav { color: var(--t-neg); opacity: 1; }
.tile-meta {
  position: absolute; left: 10px; right: 10px; bottom: 10px;
  color: white;
}
.tile-meta .name { font-size: 13px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 4px rgba(0,0,0,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-meta .prov { font-size: 11px; line-height: 1.3; opacity: .85; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--t-brand-deep) 50%, transparent);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .2s;
}
.tile:hover .tile-play { opacity: 1; }
.tile-play span {
  padding: 9px 18px; border-radius: 999px;
  background: white; color: var(--t-ink); font-size: 13px; font-weight: 600;
}

/* striped placeholder for tile art */
.stripe-art {
  background:
    repeating-linear-gradient(
      var(--stripe-angle, 35deg),
      var(--stripe-a, oklch(82% 0.18 162)) 0 14px,
      var(--stripe-b, oklch(72% 0.16 162)) 14px 28px
    );
}

/* ─── live ticker ──────────────────────────────────────────── */
.ticker { position: relative; overflow: hidden; padding: 0; }
.ticker-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--t-line); transition: background .25s; }
.ticker-row:last-child { border-bottom: 0; }
.ticker-row.is-new { background: color-mix(in srgb, var(--t-brand) 8%, transparent); }
.ticker-row .who { display: flex; align-items: center; gap: 10px; }
.ticker-row .ava {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--t-brand-2), var(--t-brand-deep));
  display: grid; place-items: center;
  color: var(--t-on-brand); font-size: 11px; font-weight: 600;
}
.ticker-row .name { font-size: 13px; font-weight: 500; }
.ticker-row .time { font-size: 11px; color: var(--t-ink-mute); }
.ticker-row .amt { font-weight: 600; color: var(--t-pos); font-variant-numeric: tabular-nums; font-size: 14px; }
.ticker-row.wd .amt { color: var(--t-info); }

/* avatar gradient pool */
.av-1 { background: linear-gradient(135deg, oklch(80% 0.16 162), oklch(50% 0.12 162)) !important; }
.av-2 { background: linear-gradient(135deg, oklch(80% 0.16 240), oklch(50% 0.12 240)) !important; }
.av-3 { background: linear-gradient(135deg, oklch(80% 0.16 30),  oklch(50% 0.12 30)) !important; }
.av-4 { background: linear-gradient(135deg, oklch(80% 0.16 310), oklch(50% 0.12 310)) !important; }
.av-5 { background: linear-gradient(135deg, oklch(80% 0.16 80),  oklch(50% 0.12 80)) !important; }

/* ─── trust strip ─────────────────────────────────────────── */
.trust {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 22px;
  padding: 10px 18px;
  border-radius: 999px;
  background: transparent;
  margin: 16px 24px 0;
}
.trust-item { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t-ink-mute); }
.trust-item .icon { width: 18px; height: 18px; display: inline-grid; place-items: center; color: var(--t-ink-mute); opacity: .7; }
.trust-item .lbl { font-weight: 500; letter-spacing: 0.02em; }
.trust-item .val { font-weight: 600; color: var(--t-ink-soft); font-variant-numeric: tabular-nums; }
.trust-item .sep { width: 1px; height: 12px; background: var(--t-line); margin: 0 4px; }

/* ─── bottom nav (mobile) ──────────────────────────────────── */
.bnav {
  position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px;
  border-radius: 28px;
}
.bnav a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 0; border-radius: 22px;
  font-size: 10px; color: var(--t-ink-mute); font-weight: 500;
  transition: color .15s, background .15s;
}
.bnav a.active { color: var(--t-on-brand); background: linear-gradient(180deg, var(--t-brand-2), var(--t-brand)); box-shadow: var(--t-shadow-sm); }
/* FAB: anchor itself is transparent + flex column. The circular button is a
   nested .fab-circle, with the label as a sibling below — same flex-column
   pattern as siblings, so the text "Home" sits in the same vertical rhythm. */
.bnav a.fab {
  background: transparent;
  box-shadow: none;
  padding-top: 0;
  align-self: end;
  gap: 4px;
}
.bnav a.fab .fab-circle {
  width: 44px; height: 44px;
  margin-top: -22px;  /* lift the circle above the bar */
  border-radius: 50%;
  background: linear-gradient(180deg, var(--t-brand-2), var(--t-brand));
  color: var(--t-on-brand);
  display: grid; place-items: center;
  box-shadow: var(--t-shadow-md);
}
.bnav a.fab .fab-label {
  font-size: 10px;
  color: var(--t-ink-mute);
  font-weight: 500;
}
.bnav a.fab.active { background: transparent; box-shadow: none; }
.bnav a.fab.active .fab-label { color: var(--t-brand-deep); }

/* ─── auth pill ──────────────────────────────────────────── */
.authpill {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 4px 12px; border-radius: 999px;
  background: var(--t-glass-strong);
  border: 1px solid var(--t-line);
}
.authpill .bal { font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 600; }
.authpill .bal small { color: var(--t-ink-mute); font-weight: 500; margin-right: 4px; }
.authpill .av {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--t-brand-2), var(--t-brand-deep));
  display: grid; place-items: center; color: var(--t-on-brand); font-size: 12px; font-weight: 600;
}

/* ─── prov wall ──────────────────────────────────────────── */
.prov-wall { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
/* Hide duplicate (aria-hidden) provider cells on desktop. They exist only
   so the mobile marquee scroll loop is seamless. Re-enabled inside the
   marquee container at mobile breakpoint below. */
.prov-cell[aria-hidden="true"] { display: none; }
/* Provider tile: fixed height (consistent grid alignment), flexible width
   via auto-fit grid. No aspect-ratio constraint so portrait/square/landscape
   logos all render at their natural shape inside the box. Image height fills
   the tile minus padding; width follows aspect (max 100%). */
.prov-cell {
  height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Instrument Serif', serif; font-size: 18px;
  letter-spacing: -0.02em;
  /* Use the site's primary brand color as the tile background — matches the
     active "Semua" tag-chip below (.tab-chip.active.brand uses the same
     var(--t-brand)). White-on-transparent provider PNGs (designed for v3's
     dark page bg) show with high contrast on this. The .glass class is
     overridden because its translucent white background was making white
     logos invisible. */
  background: var(--t-brand) !important;
  color: var(--t-on-brand);
  border: 1px solid transparent;
  border-radius: var(--t-r-sm);
  transition: transform .2s, color .2s, background .2s, border-color .2s, box-shadow .2s;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 8px 10px;
  overflow: hidden;
}
.prov-cell:hover, .prov-cell.active {
  transform: scale(1.04);
  color: var(--t-on-brand);
  background: var(--t-brand-deep) !important;
  border-color: var(--t-brand-2);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--t-brand) 40%, transparent);
}
.prov-cell .tag { font-size: 10px; font-family: 'Space Grotesk', sans-serif; color: var(--t-ink-mute); letter-spacing: 0.05em; text-transform: uppercase; display: block; margin-top: 2px; }
.prov-cell img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: filter 0.15s;
}
.prov-cell:hover img,
.prov-cell.active img { filter: drop-shadow(0 0 4px var(--t-brand)); }

/* ─── promo card ────────────────────────────────────────── */
.promo { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.promo.cols-2 { grid-template-columns: 1fr 1fr; }
.promo.cols-4 { grid-template-columns: repeat(4, 1fr); }
.promo-card {
  position: relative;
  border-radius: var(--t-r-lg);
  padding: 22px;
  overflow: hidden;
  min-height: 180px;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: transform .25s, box-shadow .25s;
  text-decoration: none; color: inherit;
}
.promo-card:hover { transform: translateY(-3px); box-shadow: var(--t-shadow-md); }
.promo-card .tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; opacity: .8; }
.promo-card h3 { margin: 8px 0 4px; font-size: 22px; letter-spacing: -0.02em; line-height: 1.1; font-weight: 600; }
.promo-card h3 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
.promo-card p { margin: 0; font-size: 13px; opacity: .8; }
.promo-card .arrow {
  align-self: end; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--t-glass-strong);
  border: 1px solid var(--t-line);
  transition: transform .2s;
}
.promo-card:hover .arrow { transform: translate(2px, -2px); }
.promo-card .promo-img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--t-r-md); margin-bottom: 12px; }

/* ─── footer ─────────────────────────────────────────────── */
.foot {
  margin: 16px 24px 24px;
  padding: 28px 28px 24px;
  border-radius: var(--t-r-lg);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 28px;
}
.foot h4, .footer-col-head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-ink-mute); margin: 0 0 12px; font-weight: 500; }
.foot a { display: block; font-size: 13px; color: var(--t-ink-soft); padding: 4px 0; }
.foot a:hover { color: var(--t-ink); }
.foot .legal { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--t-line); display: flex; justify-content: space-between; font-size: 12px; color: var(--t-ink-mute); flex-wrap: wrap; gap: 8px; }

/* ─── slots-catalog page ────────────────────────────────── */
.cat-head { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.cat-head h1 { margin: 0; font-size: 36px; letter-spacing: -0.02em; font-weight: 600; }
.cat-head h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--t-brand); padding-right: 6px; }
.cat-head .lead { font-size: 15px; color: var(--t-ink-soft); max-width: 720px; }
.cat-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cat-search { position: relative; flex: 1; max-width: 360px; }
.cat-search input {
  width: 100%; height: 40px; padding: 0 14px 0 38px;
  border-radius: 999px;
  background: var(--t-glass-strong); border: 1px solid var(--t-line);
  font: inherit; font-size: 14px; color: var(--t-ink);
  outline: none;
}
.cat-search input:focus { border-color: var(--t-brand); box-shadow: var(--t-ring); }
.cat-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--t-ink-mute); }
.tab-chip {
  padding: 7px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--t-ink-soft);
  background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: all .15s;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab-chip:hover { color: var(--t-ink); background: var(--t-glass); }
.tab-chip.active { background: var(--t-glass-strong); border-color: var(--t-line); color: var(--t-ink); box-shadow: var(--t-shadow-sm); }
.tab-chip.active.brand { background: var(--t-brand); color: var(--t-on-brand); border-color: transparent; }

.grid-tiles {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 14px;
  padding: 0 24px 24px;
}
.density-compact .grid-tiles { grid-template-columns: repeat(10, 1fr); gap: 10px; }

.pagination {
  display: flex; gap: 6px; justify-content: center;
  padding: 0 24px 32px;
}
.pagination a, .pagination span {
  padding: 8px 14px; border-radius: 999px;
  background: var(--t-glass-strong); border: 1px solid var(--t-line);
  font-size: 13px; color: var(--t-ink-soft);
  text-decoration: none;
}
.pagination a:hover { background: white; }
.pagination .active { background: var(--t-brand); color: var(--t-on-brand); border-color: transparent; }

/* ─── member balance hero ─────────────────────────────── */
.bal-hero {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px;
  margin: 24px 24px 8px;
}
.bal-card {
  padding: 26px;
  border-radius: var(--t-r-lg);
  position: relative;
  overflow: hidden;
}
.bal-card.primary {
  background: linear-gradient(140deg, var(--t-brand-deep) 0%, var(--t-brand) 60%, var(--t-brand-2) 100%);
  color: var(--t-on-brand);
  box-shadow: var(--t-shadow-lg);
}
.bal-card.primary::before {
  content:""; position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.32), transparent 50%);
}
.bal-card .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: .8; margin-bottom: 6px; }
.bal-card .val { font-size: 38px; font-weight: 600; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1; }
.bal-card .val small { font-size: 14px; opacity: .65; font-weight: 500; margin-right: 6px; letter-spacing: 0; }
.bal-card .delta { font-size: 12px; opacity: .8; margin-top: 6px; }
.bal-card .actions { display: flex; gap: 8px; margin-top: 18px; position: relative; z-index: 1; flex-wrap: wrap; }
.bal-card.secondary { background: var(--t-glass); border: 1px solid var(--t-line); }
.bal-card.secondary .val { font-size: 28px; }
.bal-card.secondary .lbl, .bal-card.secondary .val { color: var(--t-ink); }
.bal-card.secondary .meta { color: var(--t-ink-mute); }

.progress { width: 100%; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--t-ink) 8%, transparent); overflow: hidden; margin-top: 12px; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--t-brand-2), var(--t-brand)); border-radius: 999px; }

.spark {
  display: flex; align-items: end; gap: 4px;
  height: 36px; margin-top: 12px;
}
.spark > i {
  flex: 1; min-width: 4px;
  background: linear-gradient(180deg, var(--t-brand-2), var(--t-brand));
  border-radius: 2px;
  opacity: .9;
}

/* member quick-action grid */
.quick {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  padding: 14px;
  margin: 0 24px;
  border-radius: var(--t-r-md);
}
.quick a {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 6px; border-radius: var(--t-r-sm);
  font-size: 12px; font-weight: 500; text-align: center;
  color: var(--t-ink-soft);
  transition: background .15s, color .15s;
  text-decoration: none;
}
.quick a:hover { background: var(--t-glass-tint); color: var(--t-ink); }
.quick a .icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--t-brand-tint);
  color: var(--t-brand-deep);
  display: grid; place-items: center;
}

/* ─── data table (history pages) ──────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th, .data-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--t-line);
}
.data-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--t-ink-mute); font-weight: 500;
  background: var(--t-glass);
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: color-mix(in srgb, var(--t-brand) 4%, transparent); }
.data-table .amt { font-variant-numeric: tabular-nums; font-weight: 600; }
.data-table .amt.pos { color: var(--t-pos); }
.data-table .amt.neg { color: var(--t-neg); }
.data-table .when { color: var(--t-ink-mute); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ─── empty / error state ─────────────────────────────── */
.empty-state {
  margin: 48px 24px;
  padding: 64px 24px;
  text-align: center;
  border-radius: var(--t-r-lg);
  background: var(--t-glass);
  border: 1px solid var(--t-line);
}
.empty-state .glyph {
  font-family: 'Instrument Serif', serif;
  font-size: 96px; line-height: 1; font-style: italic;
  color: var(--t-brand);
  margin-bottom: 16px;
}
.empty-state h1, .empty-state h2 {
  font-size: 28px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px;
}
.empty-state h1 em, .empty-state h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--t-brand); padding-right: 4px; }
.empty-state p { font-size: 14px; color: var(--t-ink-soft); margin: 0 0 20px; max-width: 480px; margin-left: auto; margin-right: auto; }
.empty-state .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ─── pasaran / lottery card ─────────────────────────── */
.pasaran-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pasaran-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.pasaran-tile {
  padding: 14px;
  border-radius: var(--t-r-md);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 8px;
}
.pasaran-tile .name { font-weight: 600; font-size: 14px; }
.pasaran-tile .when { font-size: 11px; color: var(--t-ink-mute); }
.pasaran-tile .number { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 28px; color: var(--t-brand-deep); letter-spacing: 0.06em; line-height: 1; }
.pasaran-tile .row { display: flex; justify-content: space-between; align-items: center; }
.pasaran-tile .pasang {
  font-size: 12px; color: var(--t-brand-deep); font-weight: 500;
  text-decoration: none;
}

/* ─── mobile-specific ─────────────────────────────────── */
.mob {
  width: 100%; min-height: 100vh;
  display: flex; flex-direction: column;
  background:
    radial-gradient(600px 400px at 0% 0%, var(--t-canvas-2), transparent 60%),
    radial-gradient(500px 320px at 100% 30%, var(--t-canvas-2), transparent 55%),
    var(--t-canvas);
  position: relative;
}
.mob-scroll { flex: 1; padding-bottom: 100px; }
.mob-hdr {
  position: sticky; top: 8px; z-index: 30; margin: 8px;
  padding: 8px 10px 8px 14px;
  display: flex; align-items: center; gap: 10px;
  border-radius: 999px;
}
.mob-hdr .logo .mark { width: 28px; height: 28px; font-size: 16px; border-radius: 9px; }
.mob-hdr .name { font-size: 14px; }
.mob-marquee {
  margin: 4px 8px 0;
  border-radius: 999px;
  padding: 6px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--t-ink-soft); overflow: hidden;
}
/* 5-col grid accommodates the full feature-gated category set (9 items =
   2 rows of 5+4). At 4 cols the ninth item dangled alone on row 3. */
.mob-cat {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  margin: 12px 12px 0;
}
.mob-cat a {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 2px; border-radius: 12px;
  font-size: 10px; font-weight: 500;
  color: var(--t-ink-soft);
  text-decoration: none;
  text-align: center;
  min-width: 0;
}
.mob-cat a .icon {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--t-brand-tint);
  color: var(--t-brand-deep);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.mob-cat a.active { color: var(--t-ink); }
.mob-cat a.active .icon { background: linear-gradient(135deg, var(--t-brand-2), var(--t-brand)); color: var(--t-on-brand); }

.mob-grid-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 12px; }
.density-compact .mob-grid-tiles { grid-template-columns: repeat(4, 1fr); gap: 6px; }

.mob-hero {
  margin: 12px;
  border-radius: var(--t-r-lg);
  position: relative; overflow: hidden;
  height: 200px;
}
.mob-hero h1 { font-size: 22px; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 6px; font-weight: 600; }
.mob-hero h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--t-brand); padding-right: 4px; }
.mob-hero p { font-size: 12px; color: var(--t-ink-soft); margin: 0 0 12px; }
.mob-hero .panel { padding: 18px; }

.mob-section-head {
  display: flex; align-items: end; justify-content: space-between;
  padding: 0 16px; margin: 18px 0 10px;
}
.mob-section-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.mob-section-head h2 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--t-brand); }
.mob-section-head a { font-size: 12px; color: var(--t-ink-mute); }

.mob-bal {
  margin: 12px; padding: 20px;
  border-radius: var(--t-r-lg);
  background: linear-gradient(140deg, var(--t-brand-deep) 0%, var(--t-brand) 60%, var(--t-brand-2) 100%);
  color: var(--t-on-brand);
  position: relative; overflow: hidden;
  box-shadow: var(--t-shadow-md);
}
.mob-bal::before { content:""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.32), transparent 50%); }
.mob-bal .lbl { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: 0.08em; }
.mob-bal .val { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.mob-bal .actions { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 14px; }
.mob-bal .actions .btn { flex: 1; }

.mob-form-card {
  margin: 12px; padding: 20px;
  border-radius: var(--t-r-lg);
}

/* ─── density tweak ─────────────────────────────────── */
.density-compact .section { margin: 4px 24px 16px; }
.density-compact .section-head { margin-bottom: 8px; }
.density-compact .hero { min-height: 320px; }
.density-compact .promo-card { min-height: 140px; padding: 16px; }
.density-compact .promo-card h3 { font-size: 18px; }

/* ─── theme crossfade ──────────────────────────────── */
.screen, .mob { transition: background .45s ease, color .3s ease; }
.glass, .glass-strong, .glass-tint, .btn-primary, .btn-ghost, .chip, .tile, .promo-card, .bal-card { transition: background .35s ease, color .3s ease, border-color .3s ease; }

/* ─── utility ──────────────────────────────────────── */
.divider { height: 1px; background: var(--t-line); margin: 16px 24px; }

/* mobile adapts when desktop layout is used */
@media (max-width: 768px) {
  body { font-size: 13px; }
  .hdr { margin: 8px; padding: 8px 10px; gap: 8px; }
  .hdr .logo .mark { width: 26px; height: 26px; font-size: 14px; }
  .hdr .name { font-size: 13px; }
  .nav { display: none; }
  .marquee { margin: 6px 8px 0; padding: 6px 12px; font-size: 11px; }
  /* Mobile hero: image flows above with its NATURAL aspect ratio, panel
     strip sits below it. Banner aspect (typically 4:1 to 5:1 wide) is
     preserved — no forced 220px crop/squish. Desktop's absolute panel-over-
     image overlay is replaced with normal-flow flex column. */
  .hero {
    margin: 12px 8px;
    min-height: 0;
    height: auto;
    border-radius: var(--t-r-lg);
  }
  .hero-slides { position: relative; height: auto; }
  .hero-slide {
    position: absolute; inset: 0; left: 0; right: 0;
    display: flex; flex-direction: column;
    height: auto;
  }
  .hero-slide:not(.is-active) { display: none; } /* one slide visible at a time */
  .hero-slide.is-active { position: relative; inset: auto; opacity: 1; pointer-events: auto; }
  /* Image: natural aspect, full width */
  .hero-slide-img {
    position: relative; inset: auto;
    width: 100%; height: auto;
    object-fit: contain;
    aspect-ratio: auto;
    display: block;
  }
  .hero-slide.bg-image {
    background: var(--t-canvas-2, #f7f4ee);
    padding-top: 0;
  }
  /* Hide the entire panel/strip on mobile — image-only carousel.
     Banner image + carousel arrows/dots are sufficient for promo browsing
     at this viewport; the kicker/headline/subtitle/CTAs were redundant. */
  .hero-slide .panel { display: none; }
  .hero-art-card, .hero-art-card-2 { display: none; }
  /* Carousel arrows tucked into the image area (not over the panel/strip). */
  .hero-arrows { top: 50%; transform: translateY(-50%); }
  .section { margin: 8px 12px 18px; }
  .section-head h2 { font-size: 17px; }
  .grid-tiles { grid-template-columns: repeat(3, 1fr); padding: 0 12px 16px; gap: 8px; }
  .density-compact .grid-tiles { grid-template-columns: repeat(4, 1fr); }
  .prov-wall { grid-template-columns: repeat(4, 1fr); }

  /* === MOBILE PROVIDER WALL — auto-scrolling 3-row marquee (lesson from v6) ===
     Same pattern as v4/v6: a wide grid of providers becomes 3 rows of
     horizontally-streaming pills instead of a tall wall. The .ejs renders
     cells twice for a seamless translateX(0→-50%) loop. Pauses on hover/
     focus/touch; respects prefers-reduced-motion. */
  /* Re-enable duplicate cells inside the mobile marquee for the seamless loop. */
  .prov-wall-marquee .prov-cell[aria-hidden="true"] { display: flex; }
  .prov-wall-marquee {
    overflow: hidden;
    margin: 12px -8px;
    padding: 4px 0;
  }
  .prov-wall-marquee .prov-wall {
    display: grid;
    grid-template-columns: none;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
    grid-auto-columns: 96px;
    gap: 8px;
    padding: 4px 12px 8px;
    width: max-content;
    margin: 0;
    animation: v5-prov-marquee 35s linear infinite;
    will-change: transform;
  }
  .prov-wall-marquee:hover .prov-wall,
  .prov-wall-marquee:focus-within .prov-wall,
  .prov-wall-marquee:active .prov-wall { animation-play-state: paused; }
  @media (prefers-reduced-motion: reduce) {
    .prov-wall-marquee .prov-wall { animation: none; }
  }
  @keyframes v5-prov-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .prov-wall-marquee .prov-cell {
    aspect-ratio: auto;
    height: auto;
    padding: 8px 6px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  /* Promo cards stack vertically on mobile so the banner image displays full
     width at its natural aspect (no cover-crop), matching the v4 behavior. */
  .promo, .promo.cols-4 { grid-template-columns: 1fr; gap: 14px; }
  .promo-card .promo-img {
    width: 100%; height: auto;
    object-fit: contain; aspect-ratio: auto;
    margin-bottom: 0;
  }
  .pasaran-grid { grid-template-columns: repeat(2, 1fr); }
  .bal-hero { grid-template-columns: 1fr; gap: 10px; margin: 12px 8px; }
  .quick { grid-template-columns: repeat(3, 1fr); margin: 0 8px; }
  .foot { grid-template-columns: 1fr; padding: 18px; gap: 16px; margin: 12px 8px; }
  .form-card { margin: 12px 8px; padding: 18px; }
  .form-card h1 { font-size: 22px; }
  .register-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .profile-split { grid-template-columns: 1fr; gap: 12px; }
  body.is-mobile .bnav { display: grid; }
  body.is-mobile { padding-bottom: 80px; }
}

/* Hero headline: visually identical to the old h1 styling (was h1 prior to fix), now h2 to preserve single-h1-per-page */
.hero-slide .hero-headline,
.hero-slide h2.hero-headline {
  margin: 14px 0 10px; font-size: 44px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 600;
  font-family: 'Space Grotesk', system-ui, sans-serif;
}
.hero-slide .hero-headline em,
.hero-slide h2.hero-headline em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--t-brand); padding-right: 6px; }

/* Mobile override for the h2.hero-headline — needs to come AFTER the desktop
   rule (same specificity, later wins) so the headline stays compact in the
   below-image strip layout. */
@media (max-width: 768px) {
  .hero-slide .hero-headline,
  .hero-slide h2.hero-headline {
    font-size: 18px;
    line-height: 1.2;
    margin: 6px 0 4px;
  }
}

/* ============ LOTTO RESULT CARDS (v5 — /games/Lottery rich pasaran view)
   Same EJS template as v4, adapted for v5 design tokens (--t-brand, --t-line,
   etc). Ball graphics reused from /v3/img/. */
.lotto-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lotto-tab {
  background: var(--t-glass-strong);
  border: 1px solid var(--t-line);
  color: var(--t-ink-soft);
  padding: 8px 18px; border-radius: 999px;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.lotto-tab:hover { border-color: var(--t-brand); color: var(--t-ink); }
.lotto-tab.active {
  background: linear-gradient(180deg, var(--t-brand-2), var(--t-brand));
  color: var(--t-on-brand); border-color: transparent;
}
.lotto-grid-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
.lotto-result-card {
  background: var(--t-glass-strong);
  border: 1px solid var(--t-line);
  border-radius: var(--t-r-md);
  padding: 14px; text-align: center;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.lotto-result-card:hover { border-color: var(--t-brand); box-shadow: var(--t-shadow-sm); }
.lotto-result-card.is-closed { opacity: 0.7; }
.lotto-result-head { display: flex; flex-direction: column; gap: 2px; }
.lotto-result-name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 14px;
  color: var(--t-brand-deep); letter-spacing: 0.04em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.lotto-result-fullbadge {
  background: var(--t-brand-tint); color: var(--t-brand-deep);
  padding: 1px 6px; font-size: 9px; border-radius: 3px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
}
.lotto-result-round { font-family: 'Space Grotesk', sans-serif; font-size: 11px; color: var(--t-ink-mute); }
.lotto-result-date {
  font-size: 11px; color: var(--t-ink-mute);
  padding: 6px 0; border-top: 1px dashed var(--t-line); border-bottom: 1px dashed var(--t-line);
}
.lotto-prize-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-ink-mute); margin-top: 2px; }
.lotto-ball-row { display: flex; gap: 4px; justify-content: center; flex-wrap: nowrap; }
.lotto-ball {
  width: 32px; height: 32px;
  background-position: 50%; background-repeat: no-repeat; background-size: contain;
  display: inline-block;
  filter: drop-shadow(1px 1px 3px rgba(0,0,0,0.3));
}
.lotto-ball-x { background-image: url(/v3/img/x.webp); }
.lotto-ball-0 { background-image: url(/v3/img/0.webp); }
.lotto-ball-1 { background-image: url(/v3/img/1.webp); }
.lotto-ball-2 { background-image: url(/v3/img/2.webp); }
.lotto-ball-3 { background-image: url(/v3/img/3.webp); }
.lotto-ball-4 { background-image: url(/v3/img/4.webp); }
.lotto-ball-5 { background-image: url(/v3/img/5.webp); }
.lotto-ball-6 { background-image: url(/v3/img/6.webp); }
.lotto-ball-7 { background-image: url(/v3/img/7.webp); }
.lotto-ball-8 { background-image: url(/v3/img/8.webp); }
.lotto-ball-9 { background-image: url(/v3/img/9.webp); }
.lotto-result-times { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.lotto-time-badge {
  font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 600;
  background: var(--t-brand-tint); color: var(--t-brand-deep);
  padding: 3px 8px; border-radius: 4px;
}
.lotto-status-row { display: flex; justify-content: center; }
.lotto-status {
  font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.lotto-status.open  { background: rgba(74,222,128,0.15); color: #4ade80; border: 1px solid rgba(74,222,128,0.4); }
.lotto-status.closed { background: rgba(240,98,98,0.15); color: #f06262; border: 1px solid rgba(240,98,98,0.4); }
.lotto-launch { margin-top: auto; }
.lotto-play {
  width: 100%; padding: 8px 12px; font-size: 12px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* RTP mini bar — slots-only fill bar with tier-coloured fill behind the % text. */
.rtp-mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  width: 78px;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  font-size: 10px;
  font-weight: 600;
  color: #0b0b0c;
  letter-spacing: 0.02em;
  padding: 0;
}
.rtp-mini-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  z-index: 0;
  transition: width .25s ease;
}
.rtp-mini--bad  .rtp-mini-fill { background: rgba(240,98,98,0.55); }
.rtp-mini--warn .rtp-mini-fill { background: rgba(234,179,8,0.55); }
.rtp-mini--good .rtp-mini-fill { background: rgba(74,222,128,0.55); }
.rtp-mini-text {
  position: relative;
  z-index: 1;
  padding: 0 6px;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .rtp-mini { width: 52px; height: 16px; font-size: 9px; }
  .rtp-mini-text { padding: 0 4px; }
}

/* ===== Lottery: nav + per-market Riwayat ===== */

/* Riwayat is secondary to Main and must not read as a second primary button.
   .lotto-result-card is a flex column, which stretches children to full width by default —
   that is what turned this into a slab under the play button. align-self keeps it its own
   size. Colour/border come from the template's own pill class, not from here, because
   v5/v6 keep their tokens in the theme files. */
.lotto-history {
  align-self: center;
  margin-top: 2px;
  padding: 4px 12px;
  font-size: 11px;
  text-decoration: none;
}

/* Nav and the Normal/Full tabs sit on their OWN rows, both centred. They were briefly merged
   into one row; five nav entries plus two tabs is too many for one line, so they are separate
   again. Kept as separate .lotto-tabs containers regardless — switchLottoTab does
   `#lotto-tabs .lotto-tab` (v7: `.chip`) and strips `active` off everything it matches, so a
   merged nav would lose its highlight the moment someone clicked Normal or Full. */
.lotto-tabs { justify-content: center; margin-bottom: 8px; }

/* Image Slider Captcha */
.text-red {
  color: #dc3545;
}
.cap {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 320 / 160;   /* keeps height in proportion when width shrinks */
  overflow: hidden;
  border-radius: 6px;
}
.cap img.bg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;           /* override the global img{max-width:100%} */
  user-select: none;
  -webkit-user-drag: none;
}
.cap img.piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 15.625%;            /* 50 / 320 */
  height: 100%;
  max-width: none;
  pointer-events: none;
}
#slider {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-top: 10px;
  touch-action: pan-y;       /* horizontal drags go to the slider, vertical scroll still works */
}