/* ============================================================
   TAHTA PETIR — KOMPONEN & TATA LETAK
   ============================================================ */

/* ============================================================
   1. KERANGKA
   ============================================================ */

.lpxg .app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: max(var(--sp-4), env(safe-area-inset-left));
}

.lpxg main {
  flex: 1;
}

/* ============================================================
   2. TOPBAR
   ============================================================ */

.lpxg .topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding-block: var(--sp-3);
  margin-inline: calc(var(--sp-4) * -1);
  padding-inline: var(--sp-4);
  background: linear-gradient(180deg, rgb(6 10 24 / 94%) 0%, rgb(6 10 24 / 72%) 70%, transparent 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lpxg .brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  margin-right: auto;
}

.lpxg .brand-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--grad-bolt);
  box-shadow: var(--glow-bolt), var(--shadow-in);
  color: var(--ink-on-gold);
}

.lpxg .brand-mark svg {
  width: 20px;
  height: 20px;
}

.lpxg .brand-name {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lpxg .brand-name b {
  font-size: var(--fs-base);
  color: var(--ink-hi);
  white-space: nowrap;
}

.lpxg .brand-name > span {
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-lo);
  white-space: nowrap;
}

.lpxg .topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ============================================================
   3. TOMBOL
   ============================================================ */

.lpxg .lpxg-btn {
  --btn-bg: var(--sky-600);
  --btn-fg: var(--ink-hi);
  --btn-bd: var(--line);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap-min);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-sm);
  font-weight: 650;
  letter-spacing: var(--track-wide);
  white-space: nowrap;
  box-shadow: var(--shadow-sm), var(--shadow-in);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.lpxg .lpxg-btn:hover:not(:disabled) {
  background: var(--sky-500);
  border-color: var(--line-bright);
  transform: translateY(-1px);
}

.lpxg .lpxg-btn:active:not(:disabled) {
  transform: translateY(0) scale(0.98);
}

.lpxg .lpxg-btn:disabled {
  opacity: 0.42;
  box-shadow: none;
}

.lpxg .lpxg-btn svg {
  flex: none;
  width: 18px;
  height: 18px;
}

.lpxg .lpxg-btn--icon {
  width: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0;
}

.lpxg .lpxg-btn--ghost {
  --btn-bg: transparent;
  --btn-bd: transparent;
  --btn-fg: var(--ink-mid);
  box-shadow: none;
}

.lpxg .lpxg-btn--ghost:hover:not(:disabled) {
  --btn-fg: var(--ink-hi);
  background: var(--sky-700);
  border-color: var(--line);
}

.lpxg .lpxg-btn--info {
  --btn-bg: var(--grad-arc);
  --btn-fg: var(--ink-on-bolt);
  --btn-bd: var(--arc-500);
  font-weight: 750;
  box-shadow: var(--glow-arc), var(--shadow-md);
}

.lpxg .lpxg-btn--danger {
  --btn-fg: var(--bad);
  --btn-bd: rgb(251 113 133 / 36%);
}

.lpxg .lpxg-btn[aria-pressed='true'] {
  --btn-bg: rgb(125 211 252 / 16%);
  --btn-bd: var(--arc-500);
  --btn-fg: var(--arc-200);
  box-shadow: var(--glow-arc);
}

/* ============================================================
   4. PANGGUNG
   ============================================================ */

.lpxg .stage-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-block: var(--sp-3) var(--sp-2);
}

.lpxg .stage-status {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  background: rgb(6 10 24 / 82%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.lpxg .stage-status[data-show='true'] {
  opacity: 1;
}

.lpxg .stage-status .k {
  color: var(--ink-lo);
}

.lpxg .stage-status .v {
  color: var(--arc-200);
}

/* Panggung dibatasi TINGGINYA, bukan lebarnya.
   Papan 6×5 punya rasio 1,2. Kalau hanya lebar yang diatur, tingginya ikut
   selebar shell dan panggung meluber jauh ke bawah layar. Dengan membatasi
   lebar maksimum sebesar (tinggi maksimum × rasio), tingginya dijamin tidak
   pernah melewati jatah ruang yang tersedia. */
.lpxg .stage {
  --stage-ratio: 1.2;
  --stage-max-h: min(52svh, 32rem);

  position: relative;
  width: 100%;
  max-width: calc(var(--stage-max-h) * var(--stage-ratio));
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 92% at 50% -12%, rgb(125 211 252 / 15%) 0%, transparent 62%),
    radial-gradient(96% 74% at 50% 112%, rgb(245 165 36 / 12%) 0%, transparent 66%),
    linear-gradient(180deg, var(--sky-800) 0%, var(--sky-900) 100%);
  box-shadow: var(--shadow-xl), var(--shadow-in);
  overflow: hidden;
}

/* Bingkai emas tipis di dalam panggung — kesan pigura kuil. */
.lpxg .stage::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px solid rgb(255 209 102 / 16%);
  border-radius: var(--r-lg);
  pointer-events: none;
  z-index: 2;
}

.lpxg .stage-canvas-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: var(--stage-ratio);
}

.lpxg .stage-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-stage);
}

/* --- Layar muat aset --- */

.lpxg .stage-loader {
  position: absolute;
  inset: 0;
  z-index: calc(var(--z-overlay) + 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: rgb(6 10 24 / 92%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity var(--dur-slow) var(--ease-out);
}

.lpxg .stage-loader[data-done='true'] {
  opacity: 0;
  pointer-events: none;
}

.lpxg .stage-loader-title {
  font-size: var(--fs-md);
  color: var(--bolt-300);
  letter-spacing: var(--track-wider);
}

.lpxg .stage-loader-bar {
  width: min(18rem, 70%);
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--sky-700);
  overflow: hidden;
}

.lpxg .stage-loader-bar span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--grad-bolt);
  box-shadow: var(--glow-bolt);
  transition: width var(--dur-base) var(--ease-out);
}

.lpxg .stage-loader-text {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-lo);
}

.lpxg .stage-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--sp-6);
  pointer-events: none;
}

/* --- Rel pengali kumulatif (free spins) --- */

.lpxg .multiplier-rail {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgb(157 92 255 / 46%);
  border-radius: var(--r-md);
  background: rgb(10 17 40 / 86%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--glow-orb);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.lpxg .multiplier-rail[data-show='true'] {
  opacity: 1;
  transform: none;
}

.lpxg .multiplier-rail .label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--orb-200);
}

.lpxg .multiplier-rail .lpxg-value {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.1;
  color: var(--orb-100);
  text-shadow: 0 0 18px rgb(157 92 255 / 75%);
}

/* --- Lencana sisa putaran gratis --- */

.lpxg .freespin-badge {
  position: absolute;
  top: var(--sp-4);
  left: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgb(255 209 102 / 46%);
  border-radius: var(--r-md);
  background: rgb(10 17 40 / 86%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--glow-bolt);
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}

.lpxg .freespin-badge[data-show='true'] {
  opacity: 1;
  transform: none;
}

.lpxg .freespin-badge .k {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--bolt-200);
}

.lpxg .freespin-badge .v {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.1;
  color: var(--bolt-100);
}

/* --- Banner kemenangan --- */

.lpxg .win-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-8);
  border: 1px solid rgb(255 209 102 / 42%);
  border-radius: var(--r-lg);
  background: rgb(6 10 24 / 86%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--glow-bolt), var(--shadow-xl);
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-back);
}

.lpxg .win-banner[data-show='true'] {
  opacity: 1;
  transform: scale(1);
}

/* Kemenangan kecil TIDAK memunculkan banner: di papan 6×5 ia justru menutupi
   simbol yang baru saja membuat pemain menang. Umpan baliknya sudah cukup
   dari meter MENANG yang berdenyut dan sorotan simbol di papan. */
.lpxg .win-banner[data-tier='small'] {
  display: none;
}

.lpxg .win-banner .label {
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--bolt-300);
}

.lpxg .win-banner .amount {
  font-size: clamp(1.75rem, 6vw, var(--fs-3xl));
  font-weight: 800;
  line-height: 1;
  color: var(--bolt-100);
  text-shadow: 0 0 28px rgb(255 209 102 / 62%);
}

.lpxg .win-banner .tier {
  font-size: var(--fs-xs);
  color: var(--ink-mid);
}

/* ============================================================
   5. HUD
   ============================================================ */

.lpxg .hud {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 'meters spin features';
  align-items: center;
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--glass-strong);
  background-image: var(--grad-sheen);
  box-shadow: var(--shadow-lg);
}

.lpxg .hud-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.lpxg .hud-row--meters {
  grid-area: meters;
}

.lpxg .hud-row--bet {
  grid-area: bet;
}

.lpxg .hud-row--spin {
  grid-area: spin;
  justify-content: center;
}

.lpxg .hud-row--features {
  grid-area: features;
  justify-content: flex-end;
}

/* Baris taruhan berbagi kolom dengan meter pada tata letak lebar.
 *
 * Ambangnya dinaikkan dari 900px ke 1080px setelah ditemukan bug nyata:
 * pada ~897px, kolom taruhan hanya mendapat 205px sementara isinya butuh
 * 290px. Isi baris meluber keluar kolomnya dan mendarat TEPAT DI ATAS tombol
 * putar — itulah "kotak kecil berwarna biru tua" yang terlihat menempel di
 * tombol spin.
 *
 * Empat kolom membutuhkan sekitar 250 + 240 + 112 + 270 px isi ditambah jarak
 * dan padding, jadi 1080px adalah ambang yang benar-benar cukup. Di bawah itu,
 * tata letak bertumpuk yang dipakai.
 */
@media (width > 1080px) {
  .lpxg .hud {
    grid-template-columns: auto 1fr auto auto;
    grid-template-areas: 'meters bet spin features';
  }
}

/* Jaring pengaman: kalaupun ruang tetap kurang di ukuran tak terduga, isi
   baris membungkus ke bawah alih-alih meluber menimpa tetangganya. */
.lpxg .hud-row {
  flex-wrap: wrap;
}

.lpxg .hud-row--bet {
  justify-content: center;
}

.lpxg .meter {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sky-900);
}

.lpxg .meter dt {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-lo);
}

.lpxg .meter dd {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-hi);
  white-space: nowrap;
}

.lpxg .meter--credit dd {
  color: var(--bolt-300);
}

.lpxg .meter--win dd {
  color: var(--ok);
}

.lpxg .meter[data-bump='true'] dd {
  animation: meter-bump var(--dur-slow) var(--ease-back);
}

@keyframes meter-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* --- Taruhan --- */

.lpxg .bet {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sky-900);
}

.lpxg .bet-step {
  display: grid;
  place-items: center;
  /* Dikunci ke ambang target sentuh. Tombol ini yang paling sering ditekan
     berulang di layar sentuh. */
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: var(--r-sm);
  background: var(--sky-700);
  color: var(--ink-hi);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.lpxg .bet-step:hover:not(:disabled) {
  background: var(--bolt-300);
  color: var(--ink-on-gold);
}

.lpxg .bet-step:disabled {
  opacity: 0.35;
}

.lpxg .bet-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 6rem;
  padding-inline: var(--sp-2);
}

.lpxg .bet-value .k {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-lo);
}

.lpxg .bet-value .v {
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-hi);
}

/* --- Tombol putar --- */

.lpxg .spin {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(92px, 17vw, 112px);
  height: clamp(92px, 17vw, 112px);
  border-radius: 50%;
  border: 2px solid var(--bolt-500);
  background: var(--grad-bolt);
  color: var(--ink-on-gold);
  box-shadow: var(--glow-bolt), var(--shadow-lg), inset 0 2px 0 rgb(255 255 255 / 46%);
  transition:
    transform var(--dur-fast) var(--ease-out),
    filter var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.lpxg .spin::after {
  content: '';
  position: absolute;
  inset: -8px;
  border: 2px solid var(--bolt-300);
  border-radius: 50%;
  opacity: 0;
  animation: spin-pulse 2.8s var(--ease-in-out) infinite;
  pointer-events: none;
}

@keyframes spin-pulse {
  0% { opacity: 0.5; transform: scale(0.94); }
  70%, 100% { opacity: 0; transform: scale(1.17); }
}

.lpxg .spin:hover:not(:disabled) {
  filter: brightness(1.1);
  transform: scale(1.04);
}

.lpxg .spin:active:not(:disabled) {
  transform: scale(0.97);
}

.lpxg .spin:disabled {
  filter: grayscale(0.55) brightness(0.72);
  box-shadow: var(--shadow-md);
}

.lpxg .spin:disabled::after,
.lpxg .spin[data-busy='true']::after {
  animation: none;
  opacity: 0;
}

.lpxg .spin-glyph svg {
  width: 30px;
  height: 30px;
}

.lpxg .spin[data-busy='true'] .spin-glyph {
  display: block;
  animation: spin-busy calc(900ms / var(--motion-scale)) linear infinite;
}

@keyframes spin-busy {
  to { transform: rotate(360deg); }
}

.lpxg .spin-sub {
  position: absolute;
  bottom: 17%;
  font-size: var(--fs-2xs);
  font-weight: 700;
  opacity: 0.78;
}

/* --- Tombol fitur (Ante & Beli Bonus) --- */

.lpxg .feature {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-height: var(--tap-min);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--sky-900);
  text-align: left;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.lpxg .feature:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: var(--line-bright);
  background: var(--sky-700);
}

.lpxg .feature:disabled {
  opacity: 0.4;
}

.lpxg .feature-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  color: var(--ink-hi);
  white-space: nowrap;
}

.lpxg .feature-sub {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.lpxg .feature-note {
  font-size: var(--fs-2xs);
  color: var(--ink-lo);
  white-space: nowrap;
}

.lpxg .feature--ante .feature-sub {
  color: var(--arc-300);
}

.lpxg .feature--buy .feature-sub {
  color: var(--orb-200);
}

.lpxg .feature--ante[aria-pressed='true'] {
  border-color: var(--arc-500);
  background: rgb(125 211 252 / 14%);
  box-shadow: var(--glow-arc);
}

.lpxg .feature--buy:hover:not(:disabled) {
  border-color: rgb(157 92 255 / 52%);
  box-shadow: var(--glow-orb);
}

/* ============================================================
   6. MODAL
   ============================================================ */

.lpxg dialog.lpxg-modal {
  /* margin:auto WAJIB. Reset `* { margin: 0 }` di base.css ikut menimpa
     margin bawaan <dialog>, dan tanpa baris ini dialog menempel di pojok
     kiri atas layar alih-alih di tengah. */
  margin: auto;
  width: min(48rem, calc(100vw - 2rem));
  max-height: min(86svh, 54rem);
  padding: 0;
  border: 1px solid var(--line-bright);
  border-radius: var(--r-lg);
  background: var(--sky-800);
  color: var(--ink);
  box-shadow: var(--shadow-xl);
  overscroll-behavior: contain;
}

.lpxg dialog.lpxg-modal::backdrop {
  background: rgb(3 5 15 / 80%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lpxg dialog.lpxg-modal[open] {
  animation: modal-in var(--dur-base) var(--ease-out);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.lpxg .lpxg-modal-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--sky-800);
}

.lpxg .lpxg-modal-head h2 {
  margin-right: auto;
  font-size: var(--fs-md);
}

.lpxg .lpxg-modal-body {
  padding: var(--sp-5);
  overflow-y: auto;
}

.lpxg .lpxg-modal-section + .lpxg-modal-section {
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-faint);
}

.lpxg .lpxg-modal-section h3 {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-base);
  color: var(--bolt-300);
}

.lpxg .lpxg-modal-section p {
  max-width: 68ch;
  font-size: var(--fs-base);
  color: var(--ink-mid);
}

.lpxg .lpxg-modal-section p + p {
  margin-top: var(--sp-3);
}

/* --- Dialog konfirmasi --- */

.lpxg dialog.lpxg-modal--confirm {
  width: min(28rem, calc(100vw - 2rem));
}

.lpxg .lpxg-modal--confirm .lpxg-modal-body p {
  white-space: pre-line; /* pesan konfirmasi memakai baris baru untuk penekanan */
}

.lpxg .confirm-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  margin-top: var(--sp-6);
}

.lpxg .confirm-actions .lpxg-btn {
  flex: 1;
}

/* --- Tabel bayar --- */

.lpxg .paytable {
  display: grid;
  gap: var(--sp-2);
}

.lpxg .paytable-row {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-sm);
  background: var(--sky-900);
}

.lpxg .paytable-row .name {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

/* Gambar simbol asli, bukan titik warna. Kotak berukuran tetap mencegah
   pergeseran tata letak saat gambar selesai dimuat. */
.lpxg .paytable-row .sym-art {
  flex: none;
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 55%));
}

.lpxg .paytable-row .name-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lpxg .paytable-row .name-text b {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-hi);
}

.lpxg .paytable-row .name-text small {
  font-size: var(--fs-2xs);
  color: var(--ink-lo);
}

.lpxg .paytable-row .pays {
  display: flex;
  gap: var(--sp-4);
}

/* Tiap kolom bayaran punya label ambang di atas dan nilainya di bawah,
   sehingga "8–9" tidak lagi menempel pada angkanya dan mudah dibaca sekilas. */
.lpxg .pay-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 3.6rem;
}

.lpxg .pay-cell i {
  font-style: normal;
  font-size: var(--fs-2xs);
  letter-spacing: var(--track-wide);
  color: var(--ink-lo);
}

.lpxg .pay-cell b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--bolt-300);
}

/* --- Tangga nilai orb pengali --- */

.lpxg .orb-scale {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}

.lpxg .orb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--chip-glow) 55%, transparent);
  border-radius: var(--r-sm);
  background: rgb(22 4 48 / 82%);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--chip-size, 0.78rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--chip-fill, #fff);
  text-shadow: 0 0 10px var(--chip-glow);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 6%), 0 0 18px -6px var(--chip-glow);
}

/* Cincin tambahan per tingkat — penanda yang sama seperti di papan. */
.lpxg .orb-chip[data-tier='2'] {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 8%), 0 0 24px -5px var(--chip-glow);
}

.lpxg .orb-chip[data-tier='3'] {
  border-width: 2px;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 10%),
    0 0 0 4px color-mix(in srgb, var(--chip-glow) 22%, transparent),
    0 0 30px -4px var(--chip-glow);
}

/* --- Riwayat --- */

.lpxg .history-list {
  display: grid;
  gap: var(--sp-2);
}

.lpxg .history-row {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-sm);
  background: var(--sky-900);
  font-size: var(--fs-sm);
}

.lpxg .history-row .idx {
  font-family: var(--font-num);
  font-size: var(--fs-2xs);
  color: var(--ink-lo);
}

.lpxg .history-row .detail {
  min-width: 0;
  color: var(--ink-mid);
  overflow-wrap: anywhere;
}

.lpxg .history-row .amount {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.lpxg .history-row[data-win='true'] .amount {
  color: var(--ok);
}

.lpxg .history-row[data-win='false'] .amount {
  color: var(--ink-lo);
}

.lpxg .history-row[data-bonus='true'] {
  border-color: rgb(255 209 102 / 40%);
  background: rgb(255 209 102 / 7%);
}

.lpxg .history-empty {
  padding: var(--sp-8);
  text-align: center;
  color: var(--ink-lo);
}

/* --- Statistik --- */

.lpxg .stat-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}

.lpxg .stat {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-sm);
  background: var(--sky-900);
}

.lpxg .stat dt {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-lo);
}

.lpxg .stat dd {
  margin: 2px 0 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-hi);
}

/* --- Pengaturan --- */

.lpxg .setting {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}

.lpxg .setting + .setting {
  border-top: 1px solid var(--line-faint);
}

.lpxg .setting-text {
  flex: 1;
  min-width: 0;
}

.lpxg .setting-text label,
.lpxg .setting-text .lbl {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--ink-hi);
}

.lpxg .setting-text small {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--ink-lo);
}

.lpxg .seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sky-900);
}

.lpxg .seg button {
  min-height: 34px;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 650;
  color: var(--ink-mid);
  transition:
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.lpxg .seg button:hover {
  color: var(--ink-hi);
  background: var(--sky-700);
}

.lpxg .seg button[aria-pressed='true'] {
  background: var(--arc-400);
  color: var(--ink-on-bolt);
}

.lpxg input[type='range'] {
  flex: none;
  width: 9rem;
  accent-color: var(--arc-400);
}

/* ============================================================
   7. TOAST
   ============================================================ */

.lpxg .toast-region {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sp-6) + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  width: min(32rem, calc(100vw - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}

.lpxg .toast {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 100%;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line-bright);
  border-radius: var(--r-pill);
  background: var(--sky-700);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  color: var(--ink-hi);
  animation: toast-in var(--dur-base) var(--ease-back);
}

.lpxg .toast[data-tone='win'] {
  border-color: rgb(255 209 102 / 46%);
  box-shadow: var(--glow-bolt), var(--shadow-lg);
  color: var(--bolt-200);
}

.lpxg .toast[data-tone='warn'] {
  border-color: rgb(251 191 36 / 46%);
  color: var(--warn);
}

.lpxg .toast[data-tone='error'] {
  border-color: rgb(251 113 133 / 46%);
  color: var(--bad);
}

.lpxg .toast[data-leaving='true'] {
  animation: toast-out var(--dur-fast) var(--ease-in-out) forwards;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(8px) scale(0.97); }
}

/* ============================================================
   8. FOOTER
   ============================================================ */

.lpxg .foot {
  padding-block: var(--sp-6) var(--sp-8);
  border-top: 1px solid var(--line-faint);
  font-size: var(--fs-xs);
  color: var(--ink-lo);
  text-align: center;
}

.lpxg .foot p + p {
  margin-top: var(--sp-2);
}

/* ============================================================
   9. RESPONSIF
   ============================================================ */

@media (width <= 900px) {
  .lpxg .hud {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'meters   meters'
      'features features'
      'bet      spin';
    gap: var(--sp-4);
  }

  .lpxg .hud-row--meters {
    justify-content: space-between;
  }

  .lpxg .meter {
    flex: 1;
  }

  .lpxg .hud-row--features {
    justify-content: stretch;
  }

  .lpxg .feature {
    flex: 1;
  }
}

@media (width <= 560px) {
  .lpxg .brand-name > span {
    display: none;
  }

  .lpxg .stage {
    --stage-max-h: min(44svh, 26rem);
    border-radius: var(--r-lg);
  }

  .lpxg .bet-value {
    min-width: 4.5rem;
  }

  .lpxg .feature-note {
    display: none;
  }
}

@media (width <= 420px) {
  .lpxg .app {
    padding-inline: var(--sp-3);
  }

  .lpxg .topbar {
    margin-inline: calc(var(--sp-3) * -1);
    padding-inline: var(--sp-3);
  }
}

/* Matikan animasi dekoratif yang berulang terus bagi pengguna reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .lpxg .spin::after,
  .lpxg .spin[data-busy='true'] .spin-glyph {
    animation: none;
  }

  .lpxg dialog.lpxg-modal[open],
  .lpxg .toast {
    animation-duration: var(--dur-fast);
  }
}

.lpxg[data-motion='reduced'] .spin::after,
.lpxg[data-motion='reduced'] .spin[data-busy='true'] .spin-glyph {
  animation: none;
}