/* ============================================================
   KILAT77 — v6 Neon Arcade Night
   Triad: Magenta · Cyan · Lime on near-black with scanlines + grid + vignette
   ============================================================
   Theme tokens live in /v6/css/theme-<name>.css and rebind the --t-magenta,
   --t-cyan, --t-lime triad. main.css here owns layout grammar + glow system. */

@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400..700&display=swap');

/* ============================================================
   Default tokens (also redefined per theme).
   :root[data-theme="X"] in theme-X.css overrides these.
   ============================================================ */
:root {
  --t-night:        #06061A;
  --t-surface:      #0E0E25;
  --t-surface-2:    #14142E;
  --t-hairline:     #2A2A48;
  --t-text:         #F5F1EA;
  --t-dim:          #9D9DB3;

  /* Default triad — overridden by themes */
  --t-magenta:      #FF00B8;
  --t-cyan:         #00E5FF;
  --t-lime:         #D6FF1A;

  /* Aliases used by some legacy components */
  --t-brand:        var(--t-magenta);
  --t-pos:          var(--t-lime);
  --t-neg:          var(--t-magenta);

  /* Cross-version aliases — several inline styles use v5 token names
     (--t-brand-deep, --t-canvas, --t-ink-mute, --t-ink-soft, --t-line,
     --t-on-brand). Aliasing them here is cheaper than refactoring 11
     templates, and prevents the var() from falling back to inherit /
     currentColor (which would make borders use text color and dimmed
     text disappear into the background on dark themes). */
  --t-brand-deep:   var(--t-brand);
  --t-brand-tint:   color-mix(in srgb, var(--t-brand) 10%, transparent);
  --t-canvas:       var(--t-night);
  --t-ink-mute:     var(--t-dim);
  --t-ink-soft:     var(--t-dim);
  --t-line:         var(--t-hairline);
  --t-on-brand:     var(--t-text);

  --t-r-sm:         0;
  --t-r-md:         0;
  --t-r-lg:         0;
}

* { box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  /* Belt-and-suspenders: never let horizontal scroll happen on mobile.
     Marquees are intentionally wider than viewport (they scroll inside an
     overflow:hidden parent), but if any other element overflows we silently
     clip rather than push the page wider than the device. */
  overflow-x: hidden;
  max-width: 100vw;
}
body {
  background: #020210;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--t-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}
img { max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* perspective grid + scanline + vignette overlay (page-level ambient effects) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--t-magenta) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--t-magenta) 5%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
body > * { position: relative; z-index: 2; }

/* ============================================================
   GLOW UTILITIES
   ============================================================ */
.glow-magenta { color: var(--t-magenta); text-shadow: 0 0 4px var(--t-magenta), 0 0 12px var(--t-magenta), 0 0 28px color-mix(in srgb, var(--t-magenta) 60%, transparent); }
.glow-cyan    { color: var(--t-cyan);    text-shadow: 0 0 4px var(--t-cyan),    0 0 12px var(--t-cyan),    0 0 28px color-mix(in srgb, var(--t-cyan) 60%, transparent); }
.glow-lime    { color: var(--t-lime);    text-shadow: 0 0 4px var(--t-lime),    0 0 12px var(--t-lime),    0 0 28px color-mix(in srgb, var(--t-lime) 60%, transparent); }

/* ============================================================
   HEADER (desktop sticky)
   ============================================================ */
.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 32px;
  background: color-mix(in srgb, var(--t-night) 92%, transparent);
  border-bottom: 1px solid var(--t-magenta);
  box-shadow: 0 1px 18px color-mix(in srgb, var(--t-magenta) 50%, transparent);
  gap: 32px;
}
.wordmark { display: flex; align-items: center; gap: 6px; letter-spacing: -0.04em; text-decoration: none; }
.wordmark .kilat {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 900;
  font-size: 24px;
  font-stretch: 110%;
  color: var(--t-text);
  letter-spacing: -0.05em;
}
.wordmark .seven {
  font-family: 'Geist Mono', monospace;
  font-weight: 700;
  font-size: 18px;
  color: var(--t-magenta);
  text-shadow: 0 0 6px var(--t-magenta), 0 0 14px color-mix(in srgb, var(--t-magenta) 70%, transparent);
}
.wordmark img { max-height: 36px; width: auto; }
.bolt-svg {
  display: inline-block;
  vertical-align: middle;
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor);
}

.hdr-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.hdr-nav a {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-dim);
  text-decoration: none;
  padding: 6px 2px;
  position: relative;
  transition: color .18s, text-shadow .18s;
}
.hdr-nav a.active {
  color: var(--t-cyan);
  text-shadow: 0 0 4px var(--t-cyan), 0 0 10px color-mix(in srgb, var(--t-cyan) 60%, transparent);
}
.hdr-nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--t-cyan);
  box-shadow: 0 0 6px var(--t-cyan), 0 0 12px var(--t-cyan);
}
.hdr-nav a:hover:not(.active) {
  color: var(--t-magenta);
  text-shadow: 0 0 6px var(--t-magenta), 0 0 14px color-mix(in srgb, var(--t-magenta) 70%, transparent);
}
.hdr-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
/* Compact the inline auth pill (login form) below 1400px so the right-side
   DAFTAR button doesn't get clipped past viewport edge.
   Probe showed: hdr-actions w=449 right=1345 on a 1280 viewport (65px overflow). */
@media (max-width: 1399px) {
  .hdr-actions form.authpill input { max-width: 96px !important; }
}
@media (max-width: 1199px) {
  .hdr-actions form.authpill input { display: none; }
  .hdr-actions form.authpill button[type="submit"] { display: none; }
}

/* ============================================================
   AUTH PILL
   ============================================================ */
.authpill { display: flex; align-items: center; gap: 12px; }
.avatar-sq, .av {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--t-cyan);
  border: 1px solid var(--t-cyan);
  box-shadow: 0 0 8px color-mix(in srgb, var(--t-cyan) 50%, transparent), inset 0 0 8px color-mix(in srgb, var(--t-cyan) 20%, transparent);
  background: var(--t-surface-2);
  text-shadow: 0 0 4px var(--t-cyan);
}
.user-info { display: flex; flex-direction: column; line-height: 1.1; }
.user-info .name { font-size: 12px; font-weight: 600; color: var(--t-text); letter-spacing: 0.04em; text-transform: uppercase; }
.user-info .bal { font-family: 'Geist Mono', monospace; font-size: 12px; font-weight: 600; color: var(--t-cyan); text-shadow: 0 0 4px var(--t-cyan); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 16px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--t-text);
  cursor: pointer;
  transition: transform .15s, box-shadow .2s, background .2s;
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary, .btn-magenta {
  background: var(--t-magenta);
  color: #1a0010;
  border-color: var(--t-magenta);
  box-shadow: 0 0 0 1px var(--t-magenta), 0 0 12px color-mix(in srgb, var(--t-magenta) 60%, transparent), 0 0 28px color-mix(in srgb, var(--t-magenta) 30%, transparent);
}
.btn-primary:hover, .btn-magenta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--t-magenta), 0 0 18px var(--t-magenta), 0 0 48px color-mix(in srgb, var(--t-magenta) 60%, transparent);
}
.btn-outline, .btn-cyan {
  border-color: var(--t-cyan);
  color: var(--t-cyan);
  background: transparent;
  text-shadow: 0 0 4px var(--t-cyan);
}
.btn-outline:hover, .btn-cyan:hover {
  box-shadow: 0 0 0 1px var(--t-cyan), 0 0 14px color-mix(in srgb, var(--t-cyan) 70%, transparent);
  transform: translateY(-1px);
}
.btn-ghost { border-color: transparent; color: var(--t-dim); }
.btn-ghost:hover { color: var(--t-text); }
.btn-lime {
  border-color: var(--t-lime); color: var(--t-lime);
  background: transparent; text-shadow: 0 0 4px var(--t-lime);
}
.btn-lime:hover { box-shadow: 0 0 0 1px var(--t-lime), 0 0 14px color-mix(in srgb, var(--t-lime) 70%, transparent); }
.btn-danger {
  border-color: var(--t-magenta); color: var(--t-magenta);
  background: transparent; text-shadow: 0 0 4px var(--t-magenta);
}
.btn-sm { padding: 6px 12px; font-size: 11px; }
.btn-lg { padding: 14px 20px; font-size: 13px; }
.btn-block { width: 100%; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  position: relative;
  height: 36px;
  overflow: hidden;
  background: var(--t-night);
  border-top: 1px solid var(--t-cyan);
  border-bottom: 1px solid var(--t-cyan);
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-cyan) 35%, transparent), 0 -2px 12px color-mix(in srgb, var(--t-cyan) 20%, transparent);
  display: flex;
  align-items: center;
}
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee-scroll 30s linear infinite;
}
.marquee-track > div, .marquee-track .seg {
  display: inline-block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--t-magenta);
  text-shadow: 0 0 4px var(--t-magenta), 0 0 14px color-mix(in srgb, var(--t-magenta) 60%, transparent);
  padding: 0 18px;
}
.marquee-track .dot { color: var(--t-cyan); text-shadow: 0 0 4px var(--t-cyan), 0 0 12px var(--t-cyan); margin: 0 14px; }
.marquee-track .num { font-family: 'Geist Mono', monospace; color: var(--t-lime); text-shadow: 0 0 4px var(--t-lime), 0 0 12px var(--t-lime); }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee.small { height: 28px; }
.marquee.small .seg { font-size: 16px; }

/* Section divider marquee */
.section-marquee {
  height: 28px;
  overflow: hidden;
  border-top: 1px solid var(--t-hairline);
  border-bottom: 1px solid var(--t-hairline);
  background: var(--t-night);
}
.section-marquee.lime    .seg { color: var(--t-lime);    text-shadow: 0 0 4px var(--t-lime),    0 0 12px var(--t-lime); }
.section-marquee.cyan    .seg { color: var(--t-cyan);    text-shadow: 0 0 4px var(--t-cyan),    0 0 12px var(--t-cyan); }
.section-marquee.magenta .seg { color: var(--t-magenta); text-shadow: 0 0 4px var(--t-magenta), 0 0 12px var(--t-magenta); }
.section-marquee .seg {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0 14px;
  display: inline-block;
  line-height: 28px;
}

/* ============================================================
   KILAT HERO CAROUSEL — full-width banner showcase
   Big, bold, neon-framed; auto-cycles + dots + arrows + pause-on-hover.
   This is the home page's primary visual — promotions get the spotlight.
   ============================================================ */
.kilat-hero-carousel {
  position: relative;
  width: 100%;
  margin: 0 auto;
  border-top: 1px solid var(--t-magenta);
  border-bottom: 1px solid var(--t-magenta);
  box-shadow:
    inset 0 0 0 1px var(--t-magenta),
    0 0 28px color-mix(in srgb, var(--t-magenta) 45%, transparent),
    0 0 56px color-mix(in srgb, var(--t-magenta) 20%, transparent);
  background: var(--t-night);
  overflow: hidden;
}
.khc-stage {
  position: relative;
  width: 100%;
  /* Match real promo banner aspect (typically ~4:1, 1250×300). Using a
     similar ratio means object-fit:contain shows the whole banner with
     near-zero letterbox at desktop widths. */
  aspect-ratio: 4 / 1;
  min-height: 200px;
  max-height: 480px;
  overflow: hidden;
}
.khc-stage::after {
  /* scanline overlay on top of the slide for the KILAT77 CRT vibe */
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.04) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 3;
}
.khc-slide {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  color: var(--t-text);
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .6s ease, transform 6s linear;
  pointer-events: none;
  z-index: 1;
}
.khc-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
  animation: khc-slow-zoom 8s ease-out forwards;
}
@keyframes khc-slow-zoom {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.khc-slide img {
  width: 100%;
  height: 100%;
  /* contain (not cover) so the whole banner is always visible, never cropped.
     Wide banners on a 4:1 frame fit edge-to-edge; if a tenant uploads a
     squarer banner the dark night background fills the letterbox cleanly. */
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--t-night);
}
.khc-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 64px 32px;
  background: linear-gradient(to top, rgba(6,6,26,0.92) 0%, rgba(6,6,26,0.6) 60%, transparent 100%);
  z-index: 4;
}
.khc-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-cyan);
  text-shadow: 0 0 4px var(--t-cyan), 0 0 12px color-mix(in srgb, var(--t-cyan) 60%, transparent);
  padding: 6px 12px;
  border: 1px solid var(--t-cyan);
  background: rgba(6,6,26,0.7);
  margin-bottom: 12px;
}
.khc-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900;
  font-size: 56px;
  font-stretch: 110%;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-transform: uppercase;
  margin: 0;
  color: var(--t-text);
  text-shadow: 0 2px 12px rgba(0,0,0,0.8), 0 0 4px color-mix(in srgb, var(--t-magenta) 40%, transparent);
  max-width: 80%;
}

/* arrows */
.khc-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,6,26,0.7);
  color: var(--t-cyan);
  border: 1px solid var(--t-cyan);
  cursor: pointer;
  z-index: 5;
  text-shadow: 0 0 6px var(--t-cyan);
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-cyan) 40%, transparent);
  transition: background .2s, box-shadow .2s, color .2s;
}
.khc-arrow:hover {
  background: var(--t-cyan);
  color: var(--t-night);
  box-shadow: 0 0 20px var(--t-cyan), 0 0 40px color-mix(in srgb, var(--t-cyan) 60%, transparent);
}
.khc-prev { left: 16px; }
.khc-next { right: 16px; }

/* dots */
.khc-dots {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 14px;
  display: flex; gap: 8px;
  z-index: 5;
}
/* Dot is rendered as a thin pill (height 4px) but the BUTTON itself needs
   a much bigger touch target (Apple HIG 44×44, we aim for ~32×32 minimum
   on mobile). Use a transparent border to expand the hit area without
   altering the visual. background-clip:content-box keeps the colored
   pill drawn only inside the content box. */
.khc-dot {
  box-sizing: content-box;
  width: 28px; height: 4px;
  padding: 14px 0;             /* expands clickable area to 32px tall */
  background: rgba(255,255,255,0.25);
  background-clip: content-box;
  border: 0;
  cursor: pointer;
  transition: background .2s, box-shadow .2s, width .2s;
}
.khc-dot.active {
  background: var(--t-magenta);
  background-clip: content-box;
  width: 42px;
  box-shadow: 0 0 8px var(--t-magenta), 0 0 18px color-mix(in srgb, var(--t-magenta) 70%, transparent);
}
.khc-dot:hover:not(.active) { background: var(--t-cyan); background-clip: content-box; box-shadow: 0 0 6px var(--t-cyan); }

/* mobile carousel sizing — keep 4:1 ratio so the wide banner shows uncropped.
   At 390px wide the stage is ~98px tall (matches banner natural ratio). */
@media (max-width: 720px) {
  .khc-stage { aspect-ratio: 4 / 1; min-height: 96px; max-height: 280px; }
  .khc-overlay { padding: 14px 18px 18px; }
  .khc-title { font-size: 22px; max-width: 100%; }
  .khc-arrow { width: 32px; height: 32px; }
  .khc-prev { left: 6px; }
  .khc-next { right: 6px; }
  .khc-kicker { font-size: 10px; padding: 4px 10px; }
  .khc-dot { width: 22px; height: 3px; }
  .khc-dot.active { width: 32px; }
}

/* ============================================================
   HERO STATEMENT
   ============================================================ */
.hero {
  padding: 56px 32px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
}
/* Modifier: single-column centred hero (used as the "kicker" hero under the carousel) */
.hero--center { grid-template-columns: 1fr; text-align: center; }
.hero--center .hero-sub  { margin-left: auto; margin-right: auto; }
.hero--center .hero-ctas { justify-content: center; }
/* Modifier: smaller "kicker" hero — sits under the big carousel, not the primary visual */
.hero--kicker { padding: 32px 32px 48px; }
.hero--kicker .hero-headline { font-size: 96px; }

.hero-headline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900;
  font-size: 128px;
  font-stretch: 115%;
  letter-spacing: -0.05em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 24px;
  /* Prevent any single-word overflow on narrow screens (e.g. NYALAKAN @40px on 320 viewport) */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hero-headline .l1, .hero-headline .l2 {
  display: block; color: var(--t-text);
  animation: hero-in .6s ease-out both;
}
.hero-headline .l1 { animation-delay: .05s; }
.hero-headline .l2 { animation-delay: .2s; }
.hero-headline .l3 {
  display: block;
  color: var(--t-lime);
  text-shadow: 0 0 6px var(--t-lime), 0 0 18px var(--t-lime), 0 0 42px color-mix(in srgb, var(--t-lime) 60%, transparent);
  animation: hero-in .6s ease-out both;
  animation-delay: .35s;
}
@keyframes hero-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-sub {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: color-mix(in srgb, var(--t-cyan) 80%, var(--t-dim));
  margin: 0 0 28px;
  max-width: 560px;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Issue cards */
.issue-stack { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; }
.issue-card {
  width: 320px; background: var(--t-surface); border: 1px solid var(--t-hairline);
  padding: 14px;
  display: grid; grid-template-columns: 90px 1fr; gap: 14px;
  transform: skewX(-2deg);
  transition: box-shadow .25s, transform .2s;
  text-decoration: none;
}
.issue-card .inner-skew { transform: skewX(2deg); display: contents; }
.issue-card.m { border-color: var(--t-magenta); box-shadow: 0 0 0 1px var(--t-magenta), 0 0 18px color-mix(in srgb, var(--t-magenta) 35%, transparent); }
.issue-card.c { border-color: var(--t-cyan);    box-shadow: 0 0 0 1px var(--t-cyan),    0 0 18px color-mix(in srgb, var(--t-cyan) 35%, transparent); }
.issue-card.l { border-color: var(--t-lime);    box-shadow: 0 0 0 1px var(--t-lime),    0 0 18px color-mix(in srgb, var(--t-lime) 35%, transparent); }
.issue-card:hover { transform: skewX(-2deg) translateY(-2px); }
.issue-thumb {
  height: 64px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 6px, transparent 6px 12px),
    linear-gradient(135deg, var(--t-magenta), var(--t-cyan));
  position: relative;
  border: 1px solid rgba(255,255,255,0.1);
}
.issue-meta { transform: skewX(2deg); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.issue-meta .plate  { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600; color: var(--t-cyan); text-shadow: 0 0 4px var(--t-cyan); letter-spacing: 0.1em; }
.issue-meta .title  { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 15px; color: var(--t-text); line-height: 1.2; }
.issue-meta .kicker { font-family: 'Inter', sans-serif; font-size: 10px; color: var(--t-dim); text-transform: uppercase; letter-spacing: 0.16em; }

/* ============================================================
   BALANCE PLATE
   ============================================================ */
.balance-block {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 20px;
  padding: 24px 32px 32px;
}
/* Grid children must allow shrinking below their content's intrinsic min-width,
   otherwise long mono numerals or label text inflate the grid track and overflow. */
.balance-block > * { min-width: 0; }
.balance-plate {
  background: linear-gradient(180deg, color-mix(in srgb, var(--t-magenta) 8%, var(--t-surface)) 0%, var(--t-surface) 80%);
  border: 1px solid var(--t-magenta);
  box-shadow: 0 0 0 1px var(--t-magenta), 0 0 24px color-mix(in srgb, var(--t-magenta) 35%, transparent), inset 0 0 60px color-mix(in srgb, var(--t-magenta) 8%, transparent);
  padding: 20px 24px 22px;
  position: relative;
}
.label-tiny {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-cyan);
  text-shadow: 0 0 4px color-mix(in srgb, var(--t-cyan) 60%, transparent);
  display: flex; align-items: center; gap: 8px;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--t-cyan);
  box-shadow: 0 0 6px var(--t-cyan), 0 0 14px var(--t-cyan);
  animation: pulse 1.5s ease-in-out infinite;
  display: inline-block;
}
.live-dot.lime    { background: var(--t-lime);    box-shadow: 0 0 6px var(--t-lime),    0 0 14px var(--t-lime); }
.live-dot.magenta { background: var(--t-magenta); box-shadow: 0 0 6px var(--t-magenta), 0 0 14px var(--t-magenta); }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.55; }
}

.balance-num {
  font-family: 'Geist Mono', monospace;
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  color: var(--t-text);
  letter-spacing: -0.02em;
  margin: 14px 0 12px;
  background: linear-gradient(180deg, #ffffff 0%, #c8c8e0 50%, #6c6c84 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 4px var(--t-cyan)) drop-shadow(0 0 14px color-mix(in srgb, var(--t-cyan) 50%, transparent));
}
.balance-num .rp { font-size: 24px; vertical-align: top; margin-right: 8px; letter-spacing: 0.04em; }
.balance-foot {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: color-mix(in srgb, var(--t-cyan) 70%, var(--t-dim));
  letter-spacing: 0.08em;
}

.quick-actions { display: flex; flex-direction: column; gap: 12px; }
.qa-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
  position: relative;
  transition: box-shadow .2s, transform .15s;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text);
  text-decoration: none;
}
.qa-tile .qa-icon {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900; font-size: 22px;
  width: 28px; text-align: center;
}
.qa-tile .qa-badge { margin-left: auto; font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--t-dim); }
.qa-tile.m:hover { box-shadow: 0 0 0 1px var(--t-magenta), 0 0 18px color-mix(in srgb, var(--t-magenta) 60%, transparent); border-color: var(--t-magenta); transform: translateY(-1px); }
.qa-tile.c:hover { box-shadow: 0 0 0 1px var(--t-cyan),    0 0 18px color-mix(in srgb, var(--t-cyan) 60%, transparent);    border-color: var(--t-cyan);    transform: translateY(-1px); }
.qa-tile.l:hover { box-shadow: 0 0 0 1px var(--t-lime),    0 0 18px color-mix(in srgb, var(--t-lime) 60%, transparent);    border-color: var(--t-lime);    transform: translateY(-1px); }
.qa-tile.m .qa-icon { color: var(--t-magenta); text-shadow: 0 0 6px var(--t-magenta), 0 0 14px var(--t-magenta); }
.qa-tile.c .qa-icon { color: var(--t-cyan);    text-shadow: 0 0 6px var(--t-cyan),    0 0 14px var(--t-cyan); }
.qa-tile.l .qa-icon { color: var(--t-lime);    text-shadow: 0 0 6px var(--t-lime),    0 0 14px var(--t-lime); }

/* ============================================================
   GAME GRID
   ============================================================ */
.game-section { padding: 24px 32px 36px; }
.game-grid, .grid-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.game-tile, .tile {
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
  padding: 12px;
  position: relative;
  transition: box-shadow .25s, border-color .2s, transform .15s;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  color: var(--t-text);
  display: block;
}
.game-tile:hover, .tile:hover {
  border-color: var(--t-magenta);
  box-shadow: 0 0 0 1px var(--t-magenta), 0 0 22px color-mix(in srgb, var(--t-magenta) 55%, transparent);
  transform: translateY(-2px);
}
.tile-plate {
  position: absolute; top: 8px; left: 8px;
  font-family: 'Geist Mono', monospace;
  font-size: 9px; font-weight: 600;
  color: var(--t-cyan); text-shadow: 0 0 4px var(--t-cyan);
  letter-spacing: 0.1em;
  z-index: 2;
  background: rgba(6,6,26,0.6);
  padding: 2px 5px;
}
.tile-thumb, .tile-art {
  height: 110px;
  margin-bottom: 10px;
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px),
    linear-gradient(135deg, var(--t-magenta) 0%, var(--t-cyan) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  transition: filter .2s;
}
.game-tile:hover .tile-thumb, .tile:hover .tile-art { filter: brightness(1.18) saturate(1.1); }
.tile-thumb img, .tile-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-thumb::after, .tile-art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,6,26,0.6), transparent 60%);
  pointer-events: none;
}
.tile-name, .tile-meta .name {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--t-text);
  margin: 0 0 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-prov, .tile-meta .prov {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  line-height: 1.3;
  color: var(--t-dim);
  letter-spacing: 0.06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Favorite-toggle button on game tiles. Was inheriting browser-default
   padding (~29×22px), too small for a touch target. Sized to ≥32×32 for
   the Apple HIG guideline; positioned top-right of the tile. */
.tile-fav {
  position: absolute;
  top: 6px; right: 6px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,6,26,0.45);
  color: var(--t-dim);
  border: 1px solid var(--t-hairline);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.tile-fav:hover, .tile-fav:focus-visible {
  color: var(--t-magenta);
  border-color: var(--t-magenta);
  background: rgba(255,60,150,0.1);
}
.tile-fav.is-fav {
  color: var(--t-magenta);
  border-color: var(--t-magenta);
  background: rgba(255,60,150,0.18);
  text-shadow: 0 0 6px var(--t-magenta);
}
.tile-fav svg { width: 14px; height: 14px; }

.tile-rtp {
  position: absolute; bottom: 8px; right: 8px;
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--t-lime);
  border: 1px solid var(--t-lime);
  background: rgba(6,6,26,0.65);
  padding: 2px 6px;
  text-shadow: 0 0 4px var(--t-lime);
  box-shadow: 0 0 8px color-mix(in srgb, var(--t-lime) 35%, transparent);
}
.tile-play-overlay, .tile-play {
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 30px;
  background: var(--t-magenta);
  color: #1a0010;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(40px);
  transition: transform .2s ease-out;
  box-shadow: 0 0 18px color-mix(in srgb, var(--t-magenta) 80%, transparent);
}
.game-tile:hover .tile-play-overlay, .tile:hover .tile-play { transform: translateY(0); }

.see-all {
  margin-top: 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-cyan);
  text-shadow: 0 0 6px var(--t-cyan), 0 0 14px color-mix(in srgb, var(--t-cyan) 60%, transparent);
  text-decoration: none;
  display: inline-block;
}

/* .section-head: single-row header (h2 + meta link). Flex makes sense here. */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-top: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
/* .cat-head: stacks 3 child blocks vertically (title-row, prov-wall, toolbar).
   It must NOT be display:flex, or the prov-wall gets squeezed into ~180px and
   stacks single-column instead of the auto-fill 140px grid. The first child
   (the title+chips row) carries its own inline display:flex. */
.cat-head {
  margin-top: 20px;
}
.section-head h2, .section-head h1, .cat-head h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0;
  color: var(--t-text);
}
.section-head .meta, .cat-head .meta { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--t-cyan); text-shadow: 0 0 4px var(--t-cyan); letter-spacing: 0.1em; }
.section { padding: 24px 32px 36px; }

/* ============================================================
   PASARAN
   ============================================================ */
.pasaran-section { padding: 24px 32px 36px; }
.pasaran-card {
  margin-top: 20px;
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
}
.pasaran-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 0.8fr;
  align-items: center;
  padding: 0 20px;
  height: 64px;
  border-bottom: 1px solid var(--t-hairline);
  gap: 16px;
  text-decoration: none;
}
.pasaran-row:last-child { border-bottom: none; }
.market-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em; color: var(--t-text);
}
.draw-time { font-family: 'Geist Mono', monospace; font-size: 12px; color: color-mix(in srgb, var(--t-cyan) 75%, var(--t-dim)); letter-spacing: 0.08em; }
.result-num {
  font-family: 'Geist Mono', monospace;
  font-weight: 700; font-size: 36px;
  letter-spacing: 0.18em;
  color: var(--t-cyan);
  text-shadow: 0 0 4px var(--t-cyan), 0 0 12px var(--t-cyan), 0 0 28px color-mix(in srgb, var(--t-cyan) 50%, transparent);
}
.pasang-link {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-magenta);
  text-shadow: 0 0 4px var(--t-magenta), 0 0 12px var(--t-magenta);
  text-decoration: none;
  text-align: right;
}

/* ============================================================
   LIVE TICKER
   ============================================================ */
.ticker-section { padding: 24px 32px 36px; }
.ticker-head { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; gap: 12px; flex-wrap: wrap; }
.live-badge {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-cyan);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--t-cyan);
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-cyan) 40%, transparent);
}
.ticker-list { margin-top: 18px; background: var(--t-surface); border: 1px solid var(--t-hairline); }
.ticker-row {
  display: grid;
  grid-template-columns: 40px 1.5fr 28px 1fr 80px;
  align-items: center;
  gap: 14px;
  height: 56px;
  padding: 0 18px;
  border-bottom: 1px solid var(--t-hairline);
}
.ticker-row:last-child { border-bottom: none; }
.ticker-avatar, .ticker-row .ava {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Geist Mono', monospace;
  font-weight: 600; font-size: 12px;
  color: var(--t-cyan);
  border: 1px solid var(--t-hairline);
  background: var(--t-surface-2);
  text-shadow: 0 0 4px var(--t-cyan);
}
.ticker-name, .ticker-row .name { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 14px; color: var(--t-text); }
.ticker-amt, .ticker-row .amt {
  font-family: 'Geist Mono', monospace;
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.04em; text-align: right;
}
.ticker-amt.dep, .ticker-amt.pos, .ticker-row .amt.pos { color: var(--t-lime);    text-shadow: 0 0 4px var(--t-lime),    0 0 12px color-mix(in srgb, var(--t-lime) 60%, transparent); }
.ticker-amt.wd,  .ticker-amt.neg, .ticker-row .amt.neg { color: var(--t-magenta); text-shadow: 0 0 4px var(--t-magenta), 0 0 12px color-mix(in srgb, var(--t-magenta) 60%, transparent); }
.tag-pill {
  font-family: 'Geist Mono', monospace;
  font-weight: 700; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 8px; text-align: center;
  border: 1px solid currentColor;
}
.tag-pill.dep, .chip-pos { color: var(--t-lime);    text-shadow: 0 0 4px var(--t-lime); }
.tag-pill.wd,  .chip-neg { color: var(--t-magenta); text-shadow: 0 0 4px var(--t-magenta); }
.ticker-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--t-cyan);
  box-shadow: 0 0 6px var(--t-cyan), 0 0 14px var(--t-cyan);
  animation: pulse 1.5s ease-in-out infinite;
  justify-self: center;
}

/* ============================================================
   TRUST STRIP / FOOTER
   ============================================================ */
.trust-strip, .trust {
  padding: 22px 32px;
  border-top: 1px solid var(--t-cyan);
  border-bottom: 1px solid var(--t-cyan);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--t-cyan) 40%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--t-cyan) 40%, transparent),
    0 0 14px color-mix(in srgb, var(--t-cyan) 18%, transparent);
  display: flex; justify-content: center; align-items: center;
  gap: 18px; flex-wrap: wrap;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text);
}
.trust-strip .b, .trust .b { color: var(--t-lime); display: inline-flex; }
.trust-item { display: inline-flex; align-items: center; gap: 6px; }

.foot, .footer {
  padding: 36px 32px 28px;
  background: var(--t-surface);
  border-top: 1px solid var(--t-magenta);
  box-shadow: 0 -1px 18px color-mix(in srgb, var(--t-magenta) 35%, transparent);
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.4fr;
  gap: 32px;
}
.footer-col h4, .foot h4, .footer-col-head {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-cyan);
  text-shadow: 0 0 4px var(--t-cyan), 0 0 12px color-mix(in srgb, var(--t-cyan) 60%, transparent);
  margin: 0 0 14px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a, .foot a {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--t-dim);
  text-decoration: none;
  transition: color .15s, text-shadow .15s;
  display: block;
}
.footer-col a:hover, .foot a:hover {
  color: var(--t-magenta);
  text-shadow: 0 0 4px var(--t-magenta), 0 0 12px var(--t-magenta);
}
.payment-row {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--t-hairline);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 14px;
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text);
}
.payment-row .b { color: var(--t-lime); }
/* Payment logo images render at natural aspect inside the inline payment row.
   Fixed height keeps the row's vertical rhythm consistent. */
.payment-row .payment-logo {
  display: inline-block;
  height: 26px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  vertical-align: middle;
  filter: brightness(1) drop-shadow(0 0 4px rgba(255,255,255,0.1));
}
.legal {
  margin-top: 20px;
  text-align: center;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-dim);
}
.legal .b { color: var(--t-magenta); margin: 0 6px; }

/* ============================================================
   CHIPS / ALERTS / FORMS / TABLES
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-cyan);
  border: 1px solid var(--t-hairline);
  background: var(--t-surface);
  text-shadow: 0 0 4px color-mix(in srgb, var(--t-cyan) 50%, transparent);
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t-lime); box-shadow: 0 0 6px var(--t-lime); }
.chip-brand { color: var(--t-magenta); border-color: var(--t-magenta); text-shadow: 0 0 4px var(--t-magenta); }

.alert {
  padding: 12px 16px;
  border: 1px solid var(--t-hairline);
  background: var(--t-surface);
  font-size: 13px;
  margin-bottom: 16px;
}
.alert-info    { border-color: var(--t-cyan);    color: var(--t-cyan);    text-shadow: 0 0 4px var(--t-cyan); }
.alert-warning { border-color: var(--t-lime);    color: var(--t-lime);    text-shadow: 0 0 4px var(--t-lime); }
.alert-danger  { border-color: var(--t-magenta); color: var(--t-magenta); text-shadow: 0 0 4px var(--t-magenta); }

.form-card {
  padding: 24px;
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
  margin: 20px auto;
  max-width: 520px;
}
.form-card.wide { max-width: 720px; }
.form-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-cyan);
  text-shadow: 0 0 4px var(--t-cyan);
  margin-bottom: 6px;
}
.form-card h1, .form-card h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--t-text);
  margin: 0 0 8px;
}
.form-card h1 em { font-style: normal; color: var(--t-magenta); text-shadow: 0 0 6px var(--t-magenta), 0 0 14px var(--t-magenta); }
.form-sub { font-size: 13px; color: var(--t-dim); margin-bottom: 18px; line-height: 1.5; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-cyan);
}
.field input, .field select, .field textarea {
  background: var(--t-surface-2);
  border: 1px solid var(--t-hairline);
  color: var(--t-text);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--t-cyan);
  box-shadow: 0 0 0 1px var(--t-cyan), 0 0 12px color-mix(in srgb, var(--t-cyan) 40%, transparent);
}
.form-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.field-err { font-size: 12px; color: var(--t-magenta); margin-top: 4px; text-shadow: 0 0 4px var(--t-magenta); }

/* Register form 2-col grid (replaces inline style on register-content.ejs).
   Mobile collapses to single column — inline style was overriding media queries
   and producing 121px body.scrollWidth overflow on 390px viewport. */
.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).
   Same root cause as register-grid: inline grid-template-columns was beating
   the @media rule, leaving the right-side info table crushed on mobile. */
.profile-split {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  align-items: start;
}

/* History/transaction table wrapper. Desktop: overflow:hidden for rounded
   corner clip; mobile: overflow-x:auto so users can swipe to see Jumlah and
   Status columns (the table is ~506px wide, would clip on a 390px screen). */
.table-wrap { overflow: hidden; }

@media (max-width: 720px) {
  .register-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .profile-split { grid-template-columns: 1fr; gap: 12px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap .data-table { min-width: 540px; }
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
}
.data-table thead {
  background: var(--t-surface-2);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-cyan);
  text-shadow: 0 0 4px var(--t-cyan);
}
.data-table th, .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--t-hairline); text-align: left; }
.data-table .when { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--t-dim); }
.data-table .amt  { font-family: 'Geist Mono', monospace; font-weight: 600; }
.data-table .amt.pos { color: var(--t-lime);    text-shadow: 0 0 4px var(--t-lime); }
.data-table .amt.neg { color: var(--t-magenta); text-shadow: 0 0 4px var(--t-magenta); }

.tab-chip {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-dim);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--t-hairline);
  background: var(--t-surface);
  transition: color .15s, border-color .15s;
}
.tab-chip:hover { color: var(--t-cyan); border-color: var(--t-cyan); }
.tab-chip.active, .tab-chip.brand {
  color: var(--t-magenta);
  border-color: var(--t-magenta);
  text-shadow: 0 0 4px var(--t-magenta);
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-magenta) 40%, transparent);
}

.prov-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin: 18px 0;
  width: 100%;
  min-width: 0;   /* let the wall shrink with its parent on narrow screens */
}
/* 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 for consistent grid alignment. Logos render at
   their natural aspect inside the box (no cropping or distortion). */
.prov-cell {
  height: 56px;
  padding: 8px 10px;
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  text-decoration: none;
  color: var(--t-text);
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  transition: border-color .15s, box-shadow .15s;
  overflow: hidden;
}
.prov-cell.active, .prov-cell:hover {
  border-color: var(--t-cyan);
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-cyan) 40%, transparent);
  color: var(--t-cyan);
  text-shadow: 0 0 4px var(--t-cyan);
}
.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 6px var(--t-cyan)); }

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--t-dim);
}
.empty-state .glyph {
  font-size: 48px;
  color: var(--t-cyan);
  text-shadow: 0 0 8px var(--t-cyan);
  font-family: 'Geist Mono', monospace;
  margin-bottom: 12px;
}

.mono-num { font-family: 'Geist Mono', monospace; font-feature-settings: "tnum"; }
.balance-display { font-family: 'Geist Mono', monospace; }

.cat-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 18px;
  align-items: center;
}
.cat-search {
  flex: 1;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--t-surface-2);
  border: 1px solid var(--t-hairline);
  color: var(--t-text);
}
.cat-search svg { color: var(--t-cyan); flex-shrink: 0; }
.cat-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--t-text); font: inherit; font-size: 14px; }
.cat-search input::placeholder { color: var(--t-dim); }

.lead { font-size: 14px; color: var(--t-dim); line-height: 1.5; max-width: 640px; margin-top: 8px; }

/* Promotions cards */
.promo-card {
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color .15s, box-shadow .2s, transform .15s;
  text-decoration: none; color: var(--t-text);
}
.promo-card:hover { border-color: var(--t-magenta); box-shadow: 0 0 0 1px var(--t-magenta), 0 0 18px color-mix(in srgb, var(--t-magenta) 40%, transparent); transform: translateY(-2px); }
.promo-card .promo-img { width: 100%; height: 180px; object-fit: cover; }
.promo-card .promo-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.promo-card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px; margin: 0; color: var(--t-text); letter-spacing: -0.02em; }
.promo .cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.promo.cols-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

/* ============================================================
   MOBILE
   ============================================================ */
.mob-hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: color-mix(in srgb, var(--t-night) 95%, transparent);
  border-bottom: 1px solid var(--t-magenta);
  box-shadow: 0 1px 14px color-mix(in srgb, var(--t-magenta) 50%, transparent);
  gap: 10px;
}
.mob-hdr .wordmark .kilat { font-size: 18px; }
.mob-hdr .wordmark .seven { font-size: 14px; }
.mob-hdr img { max-height: 28px; }
.mob-bal-pill {
  font-family: 'Geist Mono', monospace;
  font-size: 11px; font-weight: 600;
  color: var(--t-cyan); text-shadow: 0 0 4px var(--t-cyan);
  border: 1px solid var(--t-hairline);
  padding: 4px 8px;
  white-space: nowrap;
  text-decoration: none;
}
.mob-fab {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: var(--t-magenta);
  color: #1a0010;
  font-weight: 900; font-size: 18px;
  font-family: 'Bricolage Grotesque', sans-serif;
  box-shadow: 0 0 0 1px var(--t-magenta), 0 0 14px var(--t-magenta);
  cursor: pointer;
  text-decoration: none;
}
.pull-hint {
  text-align: center;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--t-cyan) 70%, var(--t-dim));
  text-shadow: 0 0 4px color-mix(in srgb, var(--t-cyan) 60%, transparent);
  padding: 8px 0 4px;
}
.mob-marquee, .marquee.mob-marquee { height: 28px; }
.mob-marquee .seg { font-size: 16px; }

/* Category nav grid — wrapping multi-row strip under the sticky header.
   Game categories only (Beranda + Promosi live in the bottom tab bar to
   avoid duplication). Uses a 4-column CSS grid so every link gets the
   same width and the rows align cleanly regardless of label length —
   "Mini Game" no longer pushes its row wider than the others. */
.mob-cat-nav {
  position: sticky;
  top: 52px;            /* sit directly under .mob-hdr (height: 52px) */
  z-index: 49;          /* below the header (z 50), above page content */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  background: color-mix(in srgb, var(--t-night) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--t-cyan) 30%, transparent);
  box-shadow: 0 1px 8px color-mix(in srgb, var(--t-cyan) 20%, transparent);
  padding: 6px 12px;
}
.mob-cat-link {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--t-cyan) 60%, var(--t-dim));
  text-decoration: none;
  padding: 7px 4px;
  text-align: center;
  border: 1px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .15s ease, border-color .15s ease, text-shadow .15s ease;
}
.mob-cat-link:hover, .mob-cat-link:focus-visible {
  color: var(--t-cyan);
  border-color: color-mix(in srgb, var(--t-cyan) 50%, transparent);
}
.mob-cat-link.active {
  color: var(--t-lime);
  border-color: var(--t-lime);
  text-shadow: 0 0 4px var(--t-lime);
}
/* Drop to 3 columns on very narrow phones so labels keep breathing room. */
@media (max-width: 360px) {
  .mob-cat-nav { grid-template-columns: repeat(3, 1fr); }
}

.mob-balance-card {
  margin: 16px;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--t-magenta) 10%, var(--t-surface)) 0%, var(--t-surface) 100%);
  border: 1px solid var(--t-magenta);
  box-shadow: 0 0 0 1px var(--t-magenta), 0 0 18px color-mix(in srgb, var(--t-magenta) 35%, transparent);
}
.mob-balance-card .balance-num { font-size: 56px; margin: 10px 0 14px; }
.mob-balance-card .balance-num .rp { font-size: 16px; }
.mob-qa-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.mob-qa {
  height: 64px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--t-surface-2);
  border: 1px solid var(--t-hairline);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text);
  text-decoration: none;
}
.mob-qa .qa-icon { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 900; font-size: 18px; }
.mob-qa.m { border-color: var(--t-magenta); box-shadow: 0 0 0 1px var(--t-magenta), 0 0 12px color-mix(in srgb, var(--t-magenta) 50%, transparent); }
.mob-qa.c { border-color: var(--t-cyan);    box-shadow: 0 0 0 1px var(--t-cyan),    0 0 12px color-mix(in srgb, var(--t-cyan) 50%, transparent); }
.mob-qa.l { border-color: var(--t-lime);    box-shadow: 0 0 0 1px var(--t-lime),    0 0 12px color-mix(in srgb, var(--t-lime) 50%, transparent); }
.mob-qa.m .qa-icon { color: var(--t-magenta); text-shadow: 0 0 4px var(--t-magenta), 0 0 12px var(--t-magenta); }
.mob-qa.c .qa-icon { color: var(--t-cyan);    text-shadow: 0 0 4px var(--t-cyan),    0 0 12px var(--t-cyan); }
.mob-qa.l .qa-icon { color: var(--t-lime);    text-shadow: 0 0 4px var(--t-lime),    0 0 12px var(--t-lime); }

.mob-hero { padding: 16px 16px 8px; }
.mob-hero h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900;
  font-size: 56px;
  font-stretch: 110%;
  letter-spacing: -0.05em;
  line-height: 0.95;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.mob-hero h1 .l3 {
  color: var(--t-lime);
  text-shadow: 0 0 4px var(--t-lime), 0 0 14px var(--t-lime), 0 0 32px color-mix(in srgb, var(--t-lime) 60%, transparent);
}
.mob-hero p.sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: color-mix(in srgb, var(--t-cyan) 80%, var(--t-dim));
  margin: 0 0 14px;
  line-height: 1.4;
}
.mob-hero .ctas { display: flex; flex-direction: column; gap: 8px; }
.mob-hero .ctas .btn { width: 100%; padding: 14px 16px; font-size: 12px; }

.mob-issue-strip {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 16px;
  scrollbar-width: none;
}
.mob-issue-strip::-webkit-scrollbar { display: none; }
.mob-issue {
  flex: 0 0 240px;
  scroll-snap-align: start;
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
  padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--t-text);
}
.mob-issue.m { border-color: var(--t-magenta); box-shadow: 0 0 0 1px var(--t-magenta), 0 0 14px color-mix(in srgb, var(--t-magenta) 35%, transparent); }
.mob-issue.c { border-color: var(--t-cyan);    box-shadow: 0 0 0 1px var(--t-cyan),    0 0 14px color-mix(in srgb, var(--t-cyan) 35%, transparent); }
.mob-issue.l { border-color: var(--t-lime);    box-shadow: 0 0 0 1px var(--t-lime),    0 0 14px color-mix(in srgb, var(--t-lime) 35%, transparent); }
.mob-issue .issue-thumb { height: 100px; }

.mob-section-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 16px;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 10px;
}
.mob-section-head h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 900; font-size: 26px;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0; color: var(--t-text);
}
.mob-section-head .meta {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--t-cyan);
  text-shadow: 0 0 4px var(--t-cyan);
  letter-spacing: 0.1em;
}

.mob-game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px 16px 8px;
}
.mob-game-tile {
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
  padding: 10px;
  position: relative;
  transition: box-shadow .2s, border-color .2s;
  text-decoration: none;
  color: var(--t-text);
  display: block;
}
.mob-game-tile:active {
  border-color: var(--t-magenta);
  box-shadow: 0 0 0 1px var(--t-magenta), 0 0 18px color-mix(in srgb, var(--t-magenta) 60%, transparent);
}
.mob-game-tile .tile-thumb { height: 110px; margin-bottom: 8px; }
.mob-game-tile .tile-name  { font-size: 13px; }
.mob-game-tile .tile-prov  { font-size: 10px; }
.mob-game-tile .tile-rtp   { font-size: 9px; }

.mob-pasaran {
  padding: 10px 16px 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.mob-pasaran-card {
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
  padding: 12px 14px;
  height: 80px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-decoration: none;
  color: var(--t-text);
}
.mob-pasaran-card .top    { display: flex; justify-content: space-between; align-items: baseline; }
.mob-pasaran-card .top .market { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; color: var(--t-text); }
.mob-pasaran-card .top .draw   { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--t-dim); letter-spacing: 0.06em; }
.mob-pasaran-card .bottom { display: flex; justify-content: space-between; align-items: center; }
.mob-pasaran-card .bottom .res    { font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 28px; letter-spacing: 0.16em; color: var(--t-cyan); text-shadow: 0 0 4px var(--t-cyan), 0 0 12px var(--t-cyan), 0 0 24px color-mix(in srgb, var(--t-cyan) 50%, transparent); }
.mob-pasaran-card .bottom .pasang { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t-magenta); text-shadow: 0 0 4px var(--t-magenta), 0 0 12px var(--t-magenta); text-decoration: none; }

.mob-ticker {
  margin: 10px 16px;
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
}
.mob-ticker .ticker-row {
  grid-template-columns: 28px 1fr 16px 1fr 56px;
  height: 48px;
  padding: 0 12px;
  gap: 10px;
}
.mob-ticker .ticker-avatar { width: 28px; height: 28px; font-size: 11px; }
.mob-ticker .ticker-name   { font-size: 12px; }
.mob-ticker .ticker-amt    { font-size: 12px; }
.mob-ticker .tag-pill      { font-size: 9px; padding: 2px 5px; }

.mob-trust {
  margin: 14px 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 12px;
  padding: 12px;
  border-top: 1px solid var(--t-cyan);
  border-bottom: 1px solid var(--t-cyan);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--t-cyan) 40%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--t-cyan) 40%, transparent), 0 0 14px color-mix(in srgb, var(--t-cyan) 18%, transparent);
}
.mob-trust .item {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-text);
}

.mob-footer {
  padding: 16px;
  background: var(--t-surface);
  border-top: 1px solid var(--t-magenta);
  box-shadow: 0 -1px 14px color-mix(in srgb, var(--t-magenta) 35%, transparent);
}
.mob-footer .col { border-bottom: 1px solid var(--t-hairline); padding: 12px 0; }
.mob-footer .col:last-of-type { border-bottom: none; }
.mob-footer h4 {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-cyan);
  text-shadow: 0 0 4px var(--t-cyan), 0 0 10px color-mix(in srgb, var(--t-cyan) 60%, transparent);
  margin: 0 0 8px;
}
.mob-footer .col-row { display: flex; gap: 14px; flex-wrap: wrap; }
.mob-footer .col-row a {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--t-dim);
  text-decoration: none;
}
.mob-footer .pay-scroll {
  margin-top: 14px;
  display: flex;
  gap: 12px;
  overflow-x: auto;
  white-space: nowrap;
  padding: 10px 0;
  border-top: 1px solid var(--t-hairline);
  scrollbar-width: none;
}
.mob-footer .pay-scroll::-webkit-scrollbar { display: none; }
.mob-footer .pay-scroll span {
  font-family: 'Geist Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--t-text);
  display: inline-flex; align-items: center; gap: 12px;
}

/* mobile bottom tab bar */
.mob-tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 64px;
  background: color-mix(in srgb, var(--t-night) 95%, transparent);
  border-top: 1px solid var(--t-magenta);
  box-shadow: 0 -1px 14px color-mix(in srgb, var(--t-magenta) 50%, transparent);
  display: none;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  z-index: 60;
}
.mob-tabbar::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.mob-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--t-cyan) 50%, var(--t-dim));
  cursor: pointer;
  position: relative;
  height: 100%;
  text-decoration: none;
}
.mob-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.mob-tab.active {
  color: var(--t-lime);
  text-shadow: 0 0 4px var(--t-lime), 0 0 12px color-mix(in srgb, var(--t-lime) 60%, transparent);
}
.mob-tab.active svg { filter: drop-shadow(0 0 4px var(--t-lime)) drop-shadow(0 0 10px var(--t-lime)); }
.mob-tab.center { position: relative; }
.mob-tab.center .center-btn {
  position: absolute;
  top: -22px;
  width: 56px; height: 56px;
  background: var(--t-magenta);
  color: #1a0010;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 2px solid var(--t-night);
  box-shadow: 0 0 0 1px var(--t-magenta), 0 0 18px var(--t-magenta), 0 0 32px color-mix(in srgb, var(--t-magenta) 60%, transparent);
  animation: pulse-glow 2s ease-in-out infinite;
}
.mob-tab.center .center-btn svg { width: 26px; height: 26px; stroke: #1a0010; stroke-width: 2; }
.mob-tab.center .center-label {
  position: absolute;
  bottom: 6px;
  font-size: 9px;
  color: color-mix(in srgb, var(--t-cyan) 50%, var(--t-dim));
  letter-spacing: 0.16em;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--t-magenta), 0 0 14px var(--t-magenta), 0 0 24px color-mix(in srgb, var(--t-magenta) 50%, transparent); }
  50%      { box-shadow: 0 0 0 1px var(--t-magenta), 0 0 22px var(--t-magenta), 0 0 44px color-mix(in srgb, var(--t-magenta) 70%, transparent); }
}
body.is-mobile .mob-tabbar { display: grid; }
body.is-mobile { padding-bottom: 88px; }

/* Dashboard activity grid — replaces an inline `grid-template-columns:1fr 1fr`
   that previously sat on the wrapping <div>. Two columns on desktop, one
   column on mobile so the DEPOSIT SAYA / WITHDRAW SAYA cards stop squeezing
   into 180px-wide slivers on a 360px viewport. */
.dashboard-activity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 720px) {
  .dashboard-activity-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1024px) {
  .game-grid, .grid-tiles { grid-template-columns: repeat(4, 1fr); }
  .balance-block { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .pasaran-row { grid-template-columns: 1.5fr 1fr 1fr 0.6fr; }
  .promo.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hdr { padding: 0 16px; gap: 14px; }
  .hdr-nav { display: none; }
  .game-grid, .grid-tiles { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .game-section { padding: 16px; }
  .pasaran-section, .ticker-section, .section { padding: 16px; }
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 18px; }
  /* Hero scaled to fit 390px viewport without horizontal overflow.
     "NYALAKAN" is the longest word at 8 chars; at 48px Bricolage tight tracking
     it measures ~310px. Stays well under 390 - 32 (padding) = 358px. */
  .hero-headline { font-size: 48px; line-height: 1; margin-bottom: 16px; }
  .hero, .hero--kicker { padding: 24px 16px; gap: 18px; }
  .hero--kicker .hero-headline { font-size: 48px; }
  .hero-sub { font-size: 14px; margin-bottom: 18px; }
  .hero-ctas { flex-direction: column; gap: 8px; }
  .hero-ctas .btn { width: 100%; }
  /* Balance number must fit "Rp 99.000.000.000" (14 chars + Rp prefix) on
     a 360px viewport (310px content area after .balance-plate's 24px×2
     padding). At 48px Geist Mono each digit ≈ 30px → 420px → overflow.
     Drop to 36px max with `clamp` so it scales fluidly with viewport. */
  .balance-num {
    font-size: clamp(28px, 8.5vw, 36px);
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .balance-num .rp { font-size: 14px; }
  .pasaran-row { grid-template-columns: 1fr 1fr; height: auto; padding: 14px 16px; gap: 8px; }
  .pasaran-row .draw-time, .pasaran-row .pasang-link { display: none; }
  .ticker-row { grid-template-columns: 32px 1fr 16px 1fr 56px; padding: 0 12px; }
  .balance-block { padding: 14px 16px 18px; gap: 12px; }
  /* On phones, tiles go side-by-side AND stack icon-over-label so each tile
     can shrink below its desktop intrinsic width. min-width:0 + overflow
     hidden gives flex-1 the freedom to actually divide the row evenly. */
  .quick-actions { flex-direction: row; gap: 8px; }
  .qa-tile {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 10px 6px;
    font-size: 10px;
    letter-spacing: 0.1em;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .qa-tile .qa-icon { width: auto; font-size: 18px; }
  .qa-tile .qa-badge { display: none; }
  .section-head h2, .section-head h1 { font-size: 26px; }
  .promo.cols-4 { grid-template-columns: 1fr; gap: 14px; }
  /* Promo banner displays at natural aspect (no cover-crop) on mobile. */
  .promo-card .promo-img {
    width: 100%; height: auto;
    object-fit: contain; aspect-ratio: auto;
  }
}
@media (max-width: 480px) {
  /* Smaller still on phones — keep MAINKAN/MENANG/NYALAKAN comfortably inside 360px */
  .hero-headline, .hero--kicker .hero-headline { font-size: 40px; }
  /* clamp() above already handles this fluidly, but keep a hard ceiling at
     32px for very narrow phones where 8.5vw still rounds large. */
  .balance-num { font-size: clamp(26px, 8vw, 32px); }
}

/* ============================================================
   MOBILE PROVIDER WALL — static 4-column grid
   Earlier this used an auto-scrolling 3-row marquee that needed the cells
   rendered TWICE in the EJS for a seamless loop. The duplication looked like
   a doubled provider list whenever the animation paused (touch/hover/reduced-
   motion), so the marquee is OFF on mobile now. Cells are laid out in a
   normal grid with the duplicate (aria-hidden) set hidden via display:none.
   ============================================================ */
@media (max-width: 720px) {
  .prov-wall-marquee {
    overflow: visible;
    margin: 12px 0;
    padding: 0;
  }
  /* Hide the second EJS-rendered set on mobile too (matches desktop rule) so
     each provider only appears once. The duplicate set existed for the old
     marquee loop and is no longer needed. */
  .prov-wall-marquee .prov-cell[aria-hidden="true"] { display: none; }
  .prov-wall {
    display: grid;
    grid-template-columns: repeat(4, 1fr);    /* 4 cols at phone widths */
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 8px;
    padding: 4px 0;
    width: 100%;
    animation: none;                          /* marquee disabled on mobile */
    transform: none;
  }
  /* Drop to 3 columns on very narrow phones so the logos keep breathing room. */
  @media (max-width: 360px) {
    .prov-wall { grid-template-columns: repeat(3, 1fr); }
  }
  .prov-cell {
    padding: 10px 8px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;       /* allow nowrap text to be ellipsised cleanly */
  }
  /* The ".cat-head > div" inline flex used in games-content.ejs needs to wrap
     on mobile; otherwise the chip+title row constrains everything below it. */
  .cat-head > div[style*="flex"]:first-child { flex-wrap: wrap; }
  .cat-head { padding: 0 16px; }
}

.toast {
  position: fixed; bottom: 80px; left: 16px; right: 16px;
  padding: 12px 16px;
  background: var(--t-surface);
  border: 1px solid var(--t-cyan);
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-cyan) 50%, transparent);
  z-index: 200;
  transition: opacity .3s;
}

/* sr-only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============ LOTTO RESULT CARDS (v6 — /games/Lottery rich pasaran view)
   Same EJS template as v4, adapted for v6 KILAT77 design tokens (--t-cyan,
   --t-magenta, --t-night). Ball graphics reused from /v3/img/. */
.lotto-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lotto-tab {
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
  color: var(--t-dim);
  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-cyan); color: var(--t-text); }
.lotto-tab.active {
  background: var(--t-surface-2);
  color: var(--t-cyan); border-color: var(--t-cyan);
  box-shadow: 0 0 12px color-mix(in srgb, var(--t-cyan) 35%, transparent);
  text-shadow: 0 0 4px var(--t-cyan);
}
.lotto-grid-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px; margin-bottom: 24px;
}
/* Mobile responsive: force exactly 2 columns at phone widths so cards don't
   collapse to 1-col at narrow viewports OR overflow when the 180px minmax is
   bigger than (viewport - gap) / 2. Below 360px the cards get full-width. */
@media (max-width: 720px) {
  .lotto-grid-results {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
@media (max-width: 360px) {
  .lotto-grid-results { grid-template-columns: 1fr; }
}
.lotto-result-card {
  background: var(--t-surface);
  border: 1px solid var(--t-hairline);
  border-radius: 4px;
  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-cyan);
  box-shadow: 0 0 16px color-mix(in srgb, var(--t-cyan) 30%, transparent);
}
.lotto-result-card.is-closed { opacity: 0.6; }
.lotto-result-head { display: flex; flex-direction: column; gap: 2px; }
.lotto-result-name {
  font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 14px;
  color: var(--t-cyan); letter-spacing: 0.04em; text-transform: uppercase;
  text-shadow: 0 0 4px color-mix(in srgb, var(--t-cyan) 50%, transparent);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.lotto-result-fullbadge {
  background: var(--t-surface-2); color: var(--t-magenta);
  padding: 1px 6px; font-size: 9px; border-radius: 3px;
  font-family: 'Geist Mono', monospace; font-weight: 700;
  border: 1px solid var(--t-magenta);
  text-shadow: 0 0 4px var(--t-magenta);
}
.lotto-result-round { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--t-dim); }
.lotto-result-date {
  font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--t-dim);
  padding: 6px 0; border-top: 1px dashed var(--t-hairline); border-bottom: 1px dashed var(--t-hairline);
}
.lotto-prize-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--t-dim); 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(0 0 4px rgba(0,0,0,0.6));
}
.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: 'Geist Mono', monospace; font-size: 10px; font-weight: 600;
  background: var(--t-surface-2); color: var(--t-cyan);
  padding: 3px 8px; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--t-cyan) 40%, transparent);
}
.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(80, 250, 120, 0.15); color: var(--t-lime); border: 1px solid color-mix(in srgb, var(--t-lime) 50%, transparent); text-shadow: 0 0 4px var(--t-lime); }
.lotto-status.closed { background: rgba(255, 60, 100, 0.15); color: var(--t-magenta); border: 1px solid color-mix(in srgb, var(--t-magenta) 50%, transparent); text-shadow: 0 0 4px var(--t-magenta); }
.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;
}