/* ============================================================
   GAMEHUB — BLUE CASINO THEME (clean single file)

   สีอ้างอิงจากหลังบ้านผ่าน applyRuntimeTheme() ใน data.js:
     --runtime-primary  ← cfg.primaryColor  (theme_primary_color)
     --runtime-accent   ← cfg.accentColor   (theme_accent_color)
     --runtime-bg       ← cfg.backgroundColor (theme_background_color)

   โลโก้: loadSiteConfig() จัดการ
     - logoText: แสดงข้อความใน .brand-logo
     - logoUrl: JS เพิ่ม .brand-logo-image + <img> อัตโนมัติ

   SEO: loadSiteConfig() อัปเดต <title> / <meta> จาก cfg.seo
     (seo_title, seo_description, seo_keywords, seo_image)

   รูปภาพ: object-fit:contain ทุกที่ — เห็นรูปเต็มไม่ crop

   NOTE: ไฟล์นี้รวม rb-pro.css ไว้ในที่เดียว
         ไม่ต้องโหลด rb-pro.css แยกอีกต่อไป
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. COLOR BRIDGE — เชื่อมต่อ CSS vars จากหลังบ้าน
   ───────────────────────────────────────────────────────────── */
:root {
  /* สีหลัก — กำหนดที่หลังบ้าน field: theme_primary_color */
  --t-primary:  var(--runtime-primary, #00e7ff);
  /* สี accent — กำหนดที่หลังบ้าน field: theme_accent_color */
  --t-accent:   var(--runtime-accent,  #ffd66b);
  /* สีพื้นหลัง — กำหนดที่หลังบ้าน field: theme_background_color */
  --t-bg:       var(--runtime-bg,      #020814);

  /* Theme tokens (ไม่เปลี่ยนตาม backend) */
  --t-panel:    rgba(5,24,56,.86);
  --t-panel2:   rgba(8,38,84,.82);
  --t-border:   rgba(79,188,255,.34);
  --t-border2:  rgba(0,232,255,.72);
  --t-muted:    #9eb9de;
  --t-green:    #35f28a;
  --t-red:      #ff4b63;
  --t-shadow:   0 24px 70px rgba(0,0,0,.46);
  --t-soft:     0 16px 42px rgba(0,0,0,.28);

  /* Layout */
  --max:        1440px;
  --side-w:     86px;
  --bottom:     76px;
}

/* ─────────────────────────────────────────────────────────────
   2. LOADING SCREEN — Cyberpunk Arcade HUD
   สีอิงจาก --runtime-primary / --runtime-accent (หลังบ้าน)
   ───────────────────────────────────────────────────────────── */

.game-loader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 36px;
  overflow: hidden;
  background: #050108;
}
.game-loader.is-done {
  animation: glCollapse .7s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events: none;
}
@keyframes glCollapse {
  0%   { opacity: 1; filter: blur(0); transform: scale(1); }
  40%  { opacity: 1; filter: blur(2px); transform: scale(1.04); }
  100% { opacity: 0; filter: blur(12px); transform: scale(.88); visibility: hidden; }
}

/* ── Animated mesh-gradient bg ── */
.gl-bg {
  position: absolute; inset: -10%;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(var(--runtime-primary-rgb, 233,30,140), .55), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(var(--runtime-accent-rgb, 255,214,107), .25), transparent 30%),
    radial-gradient(circle at 70% 80%, rgba(var(--runtime-primary-rgb, 233,30,140), .45), transparent 32%),
    radial-gradient(circle at 30% 70%, rgba(80, 0, 200, .35), transparent 30%),
    linear-gradient(180deg, #0a0512 0%, #050108 60%, #02000a 100%);
  filter: blur(60px) saturate(1.2);
  animation: glMeshFloat 12s ease-in-out infinite alternate;
}
@keyframes glMeshFloat {
  0%   { transform: scale(1)    translate(0, 0); }
  50%  { transform: scale(1.05) translate(-2%, 1%); }
  100% { transform: scale(1.08) translate(2%, -1%); }
}

/* ── Scanlines overlay ── */
.gl-scan {
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.03) 0,
      rgba(255,255,255,.03) 1px,
      transparent 1px,
      transparent 3px);
  mix-blend-mode: overlay;
  opacity: .6;
}
.gl-scan::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(var(--runtime-primary-rgb, 233,30,140), .15) 50%, transparent 100%);
  height: 120px;
  animation: glScanSweep 4s linear infinite;
}
@keyframes glScanSweep {
  0%   { transform: translateY(-120px); }
  100% { transform: translateY(100vh); }
}

/* ── Noise texture ── */
.gl-noise {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .45;
  mix-blend-mode: overlay;
}

/* ── Floating particles ── */
.gl-particles {
  position: absolute; inset: 0; pointer-events: none;
}
.gl-particles span {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--runtime-primary, #ff3a8c);
  box-shadow: 0 0 8px var(--runtime-primary, #ff3a8c);
  opacity: 0;
  animation: glParticleFloat 7s ease-in-out infinite;
}
.gl-particles span:nth-child(1)  { left: 8%;  top: 80%; animation-delay: 0s;   }
.gl-particles span:nth-child(2)  { left: 18%; top: 90%; animation-delay: .5s;  }
.gl-particles span:nth-child(3)  { left: 28%; top: 75%; animation-delay: 1.0s; }
.gl-particles span:nth-child(4)  { left: 38%; top: 92%; animation-delay: 1.5s; }
.gl-particles span:nth-child(5)  { left: 48%; top: 85%; animation-delay: 2.0s; background: var(--runtime-accent, #ffd66b); box-shadow: 0 0 8px var(--runtime-accent, #ffd66b); }
.gl-particles span:nth-child(6)  { left: 58%; top: 88%; animation-delay: 2.5s; }
.gl-particles span:nth-child(7)  { left: 68%; top: 78%; animation-delay: 3.0s; }
.gl-particles span:nth-child(8)  { left: 78%; top: 90%; animation-delay: 3.5s; }
.gl-particles span:nth-child(9)  { left: 88%; top: 82%; animation-delay: 4.0s; background: var(--runtime-accent, #ffd66b); box-shadow: 0 0 8px var(--runtime-accent, #ffd66b); }
.gl-particles span:nth-child(10) { left: 12%; top: 65%; animation-delay: 1.2s; width: 2px; height: 2px; }
.gl-particles span:nth-child(11) { left: 25%; top: 60%; animation-delay: 2.2s; width: 4px; height: 4px; }
.gl-particles span:nth-child(12) { left: 45%; top: 55%; animation-delay: 3.2s; width: 2px; height: 2px; }
.gl-particles span:nth-child(13) { left: 65%; top: 60%; animation-delay: 4.2s; width: 4px; height: 4px; }
.gl-particles span:nth-child(14) { left: 82%; top: 65%; animation-delay: .8s;  width: 2px; height: 2px; }
.gl-particles span:nth-child(15) { left: 35%; top: 35%; animation-delay: 5.0s; }
.gl-particles span:nth-child(16) { left: 70%; top: 38%; animation-delay: 5.5s; }
@keyframes glParticleFloat {
  0%,100% { transform: translate(0, 0) scale(.5); opacity: 0; }
  20%     { opacity: 1; }
  50%     { transform: translate(8px, -80px) scale(1.2); opacity: .9; }
  80%     { opacity: .6; }
}

/* ── HUD corner brackets ── */
.gl-hud { position: absolute; inset: 28px; pointer-events: none; }
.gl-corner {
  position: absolute;
  width: 38px; height: 38px;
  border: 2px solid var(--runtime-primary, #ff3a8c);
  filter: drop-shadow(0 0 6px rgba(var(--runtime-primary-rgb, 233,30,140), .8));
  opacity: 0;
  animation: glCornerIn .8s cubic-bezier(.3,.7,.3,1) forwards .2s;
}
.gl-corner.gl-tl { top: 0; left: 0;  border-right: none; border-bottom: none; }
.gl-corner.gl-tr { top: 0; right: 0; border-left:  none; border-bottom: none; }
.gl-corner.gl-bl { bottom: 0; left: 0;  border-right: none; border-top: none; }
.gl-corner.gl-br { bottom: 0; right: 0; border-left:  none; border-top: none; }
@keyframes glCornerIn {
  from { opacity: 0; transform: scale(.5); }
  to   { opacity: 1; transform: scale(1);  }
}

/* ── Stage (logo + rings + hex + orbit) ── */
.gl-stage {
  position: relative; z-index: 5;
  width: 320px; height: 320px;
  display: flex; align-items: center; justify-content: center;
}

/* ── Pulse rings ── */
.gl-pulse { position: absolute; inset: 0; pointer-events: none; }
.gl-pulse span {
  position: absolute; inset: 0; margin: auto;
  width: 200px; height: 200px;
  border-radius: 50%;
  border: 2px solid var(--runtime-primary, #ff3a8c);
  opacity: 0;
  animation: glPulseRing 2.4s cubic-bezier(.2,.6,.4,1) infinite;
}
.gl-pulse span:nth-child(1) { animation-delay: 0s;   }
.gl-pulse span:nth-child(2) { animation-delay: .8s;  border-color: var(--runtime-accent, #ffd66b); }
.gl-pulse span:nth-child(3) { animation-delay: 1.6s; }
@keyframes glPulseRing {
  0%   { opacity: .8; transform: scale(.4); }
  100% { opacity: 0;  transform: scale(1.6); }
}

/* ── Hexagonal frame (2 layers counter-rotating) ── */
.gl-hex { position: absolute; inset: 0; pointer-events: none; }
.gl-hex span {
  position: absolute; inset: 0; margin: auto;
  width: 260px; height: 260px;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
.gl-hex-l1 {
  background: linear-gradient(135deg,
    transparent 0%,
    var(--runtime-primary, #ff3a8c) 30%,
    transparent 31%,
    transparent 69%,
    var(--runtime-primary, #ff3a8c) 70%,
    transparent 100%);
  filter: drop-shadow(0 0 12px rgba(var(--runtime-primary-rgb, 233,30,140), .8));
  animation: glHexSpinCW 8s linear infinite;
}
.gl-hex-l2 {
  width: 220px !important; height: 220px !important;
  background: linear-gradient(45deg,
    transparent 0%,
    var(--runtime-accent, #ffd66b) 25%,
    transparent 26%,
    transparent 74%,
    var(--runtime-accent, #ffd66b) 75%,
    transparent 100%);
  filter: drop-shadow(0 0 10px rgba(var(--runtime-accent-rgb, 255,214,107), .65));
  animation: glHexSpinCCW 6s linear infinite;
}
@keyframes glHexSpinCW  { to { transform: rotate(360deg); } }
@keyframes glHexSpinCCW { to { transform: rotate(-360deg); } }

/* ── Orbital ring with 3 dots ── */
.gl-orbit {
  position: absolute; inset: 0; margin: auto;
  width: 290px; height: 290px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--runtime-primary-rgb, 233,30,140), .35);
  animation: glOrbitSpin 10s linear infinite;
}
.gl-orbit-dot {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--runtime-primary, #ff3a8c);
  box-shadow:
    0 0 14px var(--runtime-primary, #ff3a8c),
    0 0 28px var(--runtime-primary, #ff3a8c);
  top: -6px; left: 50%; margin-left: -6px;
}
.gl-orbit-dot-1 { transform-origin: 50% 151px; transform: rotate(0deg); }
.gl-orbit-dot-2 {
  transform-origin: 50% 151px;
  transform: rotate(120deg);
  background: var(--runtime-accent, #ffd66b);
  box-shadow: 0 0 14px var(--runtime-accent, #ffd66b), 0 0 28px var(--runtime-accent, #ffd66b);
}
.gl-orbit-dot-3 {
  transform-origin: 50% 151px;
  transform: rotate(240deg);
}
@keyframes glOrbitSpin { to { transform: rotate(360deg); } }

/* ── Logo + glow ── */
.gl-logo-wrap {
  position: relative; z-index: 6;
  display: flex; align-items: center; justify-content: center;
}
.gl-logo-glow {
  position: absolute;
  width: 280px; height: 120px; border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(var(--runtime-primary-rgb, 233,30,140), .85) 0%,
    rgba(var(--runtime-primary-rgb, 233,30,140), .25) 35%,
    transparent 70%);
  filter: blur(38px);
  animation: glGlowBreath 2.4s ease-in-out infinite;
  pointer-events: none; z-index: 0;
}
@keyframes glGlowBreath {
  0%,100% { opacity: .6; transform: scale(1); }
  50%     { opacity: 1;  transform: scale(1.25); }
}
.gl-logo-area {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  min-width: 180px; max-width: 300px;
  padding: 6px;
  opacity: 0;
  transform: scale(.6) translateY(8px);
  transition: opacity 1s cubic-bezier(.34,1.56,.64,1),
              transform 1s cubic-bezier(.34,1.56,.64,1);
  font-size: 62px; font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #fff 0%, var(--runtime-primary, #ff3a8c) 65%, var(--runtime-accent, #ffd66b) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 0 22px rgba(var(--runtime-primary-rgb, 233,30,140), .9),
    0 0 48px rgba(var(--runtime-primary-rgb, 233,30,140), .55);
  letter-spacing: -.5px; line-height: 1.1;
  word-break: break-word; text-align: center;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.game-loader.loader-ready .gl-logo-area {
  opacity: 1; transform: scale(1) translateY(0);
}
.gl-logo-area img {
  max-height: 140px; max-width: 260px;
  width: auto; height: auto; object-fit: contain;
  filter: drop-shadow(0 0 28px rgba(var(--runtime-primary-rgb, 233,30,140), .8))
          drop-shadow(0 4px 12px rgba(0,0,0,.55));
  animation: glLogoFloat 3.5s ease-in-out infinite;
}
@keyframes glLogoFloat {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-6px) rotate(.5deg); }
}

/* ── Shine sweep across logo area ── */
.gl-shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(115deg,
    transparent 35%,
    rgba(255,255,255,.55) 50%,
    transparent 65%);
  mix-blend-mode: overlay;
  transform: translateX(-150%);
  animation: glShineSweep 3.2s ease-in-out infinite;
}
@keyframes glShineSweep {
  0%,40% { transform: translateX(-150%); }
  70%    { transform: translateX(150%);  }
  100%   { transform: translateX(150%);  }
}

/* ── Step cards (3 phases) ── */
.gl-steps {
  position: relative; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
}
.gl-step {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 12px rgba(0,0,0,.4);
  color: rgba(255,255,255,.45);
  font-size: 13px; font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: .35s cubic-bezier(.3,.7,.2,1);
  position: relative;
}
.gl-step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.45);
  font-size: 13px;
  transition: .35s;
}
.gl-step-label { transition: .35s; }
.gl-step-status {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.08);
  font-size: 9px; font-weight: 900;
  color: transparent;
  transition: .35s;
}
.gl-step-link {
  width: 28px; height: 2px;
  background: rgba(255,255,255,.08);
  position: relative; overflow: hidden;
  transition: background .35s;
}
.gl-step-link::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--runtime-primary, #ff3a8c) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.gl-step-link.is-flowing::after {
  animation: glLinkFlow 1.2s linear infinite;
}
@keyframes glLinkFlow {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ── Active: glowing, pulsing ── */
.gl-step.is-active {
  background: rgba(var(--runtime-primary-rgb, 233,30,140), .14);
  border-color: rgba(var(--runtime-primary-rgb, 233,30,140), .65);
  color: #fff;
  box-shadow:
    inset 0 0 14px rgba(var(--runtime-primary-rgb, 233,30,140), .25),
    0 0 22px rgba(var(--runtime-primary-rgb, 233,30,140), .45);
  animation: glStepBreath 1.6s ease-in-out infinite;
}
.gl-step.is-active .gl-step-icon {
  background: var(--runtime-primary, #ff3a8c);
  color: #fff;
  box-shadow:
    0 0 12px rgba(var(--runtime-primary-rgb, 233,30,140), .9),
    0 0 24px rgba(var(--runtime-primary-rgb, 233,30,140), .5);
  animation: glStepIconSpin 1.4s linear infinite;
}
.gl-step.is-active .gl-step-status {
  background: rgba(var(--runtime-primary-rgb, 233,30,140), .35);
  border: 1.5px solid var(--runtime-primary, #ff3a8c);
  border-top-color: transparent;
  animation: glStepDotSpin .9s linear infinite;
}
@keyframes glStepBreath {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}
@keyframes glStepIconSpin {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.12); }
}
@keyframes glStepDotSpin {
  to { transform: rotate(360deg); }
}

/* ── Done: filled, with checkmark ── */
.gl-step.is-done {
  background: rgba(var(--runtime-accent-rgb, 255,214,107), .08);
  border-color: rgba(var(--runtime-accent-rgb, 255,214,107), .45);
  color: rgba(255,255,255,.88);
  box-shadow:
    inset 0 0 10px rgba(var(--runtime-accent-rgb, 255,214,107), .15),
    0 0 14px rgba(var(--runtime-accent-rgb, 255,214,107), .25);
}
.gl-step.is-done .gl-step-icon {
  background: var(--runtime-accent, #ffd66b);
  color: #1a0a0a;
  box-shadow: 0 0 10px rgba(var(--runtime-accent-rgb, 255,214,107), .75);
}
.gl-step.is-done .gl-step-status {
  background: var(--runtime-accent, #ffd66b);
  color: #1a0a0a;
  box-shadow: 0 0 8px rgba(var(--runtime-accent-rgb, 255,214,107), .85);
}
.gl-step.is-done .gl-step-status::before {
  content: '\f00c'; /* fa-check */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 9px;
  color: #1a0a0a;
}
.gl-step-link.is-done {
  background: rgba(var(--runtime-accent-rgb, 255,214,107), .45);
  box-shadow: 0 0 8px rgba(var(--runtime-accent-rgb, 255,214,107), .35);
}
.gl-step-link.is-done::after { display: none; }

/* ── Logo 2 Box (Loading Screen) ── */
.gl-logo2-box {
  position: relative; z-index: 5;
  width: min(320px, 80vw);
  padding: 16px 24px;
  margin-bottom: 16px;
  border: none;
  border-radius: 12px;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gl-logo2-img {
  max-width: var(--runtime-loading-logo2-width, 100%);
  max-height: var(--runtime-loading-logo2-height, 80px);
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 15px rgba(var(--runtime-primary-rgb, 233,30,140), .5));
}

/* ── Energy bar ── */
.gl-energy {
  position: relative; z-index: 5;
  width: min(320px, 80vw);
  display: flex; flex-direction: column; gap: 6px;
}
.gl-energy-track {
  height: 8px; border-radius: 99px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  box-shadow:
    inset 0 1px 3px rgba(0,0,0,.6),
    0 0 0 1px rgba(var(--runtime-primary-rgb, 233,30,140), .25);
  position: relative;
}
.gl-energy-track::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg,
    transparent 0,
    transparent 8px,
    rgba(0,0,0,.4) 8px,
    rgba(0,0,0,.4) 9px);
  z-index: 2; pointer-events: none;
}
.gl-energy-fill {
  height: 100%; border-radius: 99px;
  width: 0;
  background: linear-gradient(90deg,
    var(--runtime-primary, #ff3a8c) 0%,
    var(--runtime-accent, #ffd66b) 100%);
  background-size: 200% 100%;
  box-shadow:
    0 0 12px var(--runtime-primary, #ff3a8c),
    0 0 24px rgba(var(--runtime-primary-rgb, 233,30,140), .6);
  transition: width .25s linear;
  animation: glEnergyShine 1.8s linear infinite;
}
@keyframes glEnergyShine {
  from { background-position: 0%   0%; }
  to   { background-position: 200% 0%; }
}
.gl-energy-meta {
  display: flex; justify-content: space-between;
  font-family: 'Courier New', monospace;
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px;
  color: rgba(255,255,255,.7);
}
.gl-energy-pct {
  color: var(--runtime-primary, #ff3a8c);
  text-shadow: 0 0 8px rgba(var(--runtime-primary-rgb, 233,30,140), .8);
}

@media (max-width: 480px) {
  .game-loader { gap: 24px; }
  .gl-stage { width: 260px; height: 260px; }
  .gl-pulse span { width: 160px; height: 160px; }
  .gl-hex span { width: 210px !important; height: 210px !important; }
  .gl-hex-l2  { width: 175px !important; height: 175px !important; }
  .gl-orbit   { width: 235px; height: 235px; }
  .gl-orbit-dot-1 { transform-origin: 50% 123px; }
  .gl-orbit-dot-2 { transform-origin: 50% 123px; transform: rotate(120deg); }
  .gl-orbit-dot-3 { transform-origin: 50% 123px; transform: rotate(240deg); }
  .gl-logo-area { font-size: 46px; }
  .gl-logo-glow { width: 220px; height: 100px; }
  .gl-hud { inset: 18px; }
  .gl-corner { width: 28px; height: 28px; }
  .gl-steps { gap: 0; transform: scale(.9); transform-origin: top center; }
  .gl-step  { padding: 8px 11px; font-size: 11px; gap: 7px; }
  .gl-step-icon { width: 24px; height: 24px; font-size: 11px; }
  .gl-step-status { width: 14px; height: 14px; font-size: 8px; }
  .gl-step-link { width: 18px; }
}
@media (max-width: 380px) {
  .gl-step-label { display: none; }
  .gl-step { padding: 8px; }
}

/* ─────────────────────────────────────────────────────────────
   3. GLOBAL BASE
   ───────────────────────────────────────────────────────────── */
* { scrollbar-color: rgba(var(--runtime-primary-rgb,0,231,255),.42) rgba(var(--runtime-bg-rgb,4,15,36),.7) }

html, body {
  background: var(--t-bg) !important;
  color: #f7fbff;
  overflow-x: hidden;
}
::selection { background: rgba(var(--runtime-primary-rgb,0,231,255),.36); color: #fff }

/* Background gradients */
body::before {
  background:
    radial-gradient(circle at 12% -8%,  rgba(var(--runtime-primary-rgb,0,231,255),.22),  transparent 28%),
    radial-gradient(circle at 92% 12%,  rgba(var(--runtime-primary-rgb,20,113,255),.18), transparent 26%),
    radial-gradient(circle at 50% 120%, rgba(var(--runtime-primary-rgb,0,76,180),.24),   transparent 34%),
    linear-gradient(180deg, var(--t-bg,#010611) 0%, rgba(var(--runtime-primary-rgb,2,26,67),.4) 36%, var(--t-bg,#020714) 74%, rgba(var(--runtime-primary-rgb,3,29,72),.3) 100%) !important;
}
body::after {
  opacity: .95;
  background:
    radial-gradient(circle at 16% 26%, rgba(var(--runtime-primary-rgb,0,231,255),.10),   transparent 24%),
    radial-gradient(circle at 88% 8%,  rgba(var(--runtime-accent-rgb,255,211,105),.10),  transparent 28%),
    linear-gradient(90deg,  rgba(var(--runtime-primary-rgb,0,231,255),.028) 1px, transparent 1px),
    linear-gradient(        rgba(var(--runtime-primary-rgb,0,231,255),.022) 1px, transparent 1px),
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(255,255,255,.016) 23px 24px) !important;
  background-size: auto, auto, 48px 48px, 48px 48px, auto !important;
}

/* Background image จากหลังบ้าน (cfg.backgroundUrl) */
html.runtime-bg-image body::before {
  background-image: var(--runtime-bg-image) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  opacity: .4;
}


/* ─────────────────────────────────────────────────────────────
   3. BRAND LOGO
   โลโก้ถูกจัดการโดย loadSiteConfig() ใน data.js:
   - logoUrl ไม่ว่าง → JS เพิ่ม .brand-logo-image + <img>
   - logoUrl ว่าง     → แสดง logoText เป็นข้อความ
   ───────────────────────────────────────────────────────────── */

/* Text logo (default) */
.brand-logo {
  height: 44px;
  min-width: 158px;
  max-width: 178px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 22px;
  font-family: 'Noto Sans Thai', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  color: #e9fbff;
  text-shadow: 0 0 10px rgba(0,231,255,.9), 0 2px 0 rgba(0,0,0,.56);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), transparent 38%),
    linear-gradient(135deg, #05205b, #064ed2 46%, #01dbff);
  border: 1px solid rgba(155,239,255,.68);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 0 26px rgba(0,231,255,.34), 0 12px 26px rgba(0,0,0,.34);
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}
.brand-logo::before, .brand-logo::after { display: none !important }

/* Image logo (เมื่อหลังบ้านตั้ง logoUrl) */
.brand-logo.brand-logo-image {
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(0,231,255,.28);
  box-shadow: none;
  clip-path: none;
  border-radius: 10px;
  min-width: 0;
  padding: 4px 10px;
}
.brand-logo.brand-logo-image img {
  display: block;
  height: 100%;
  max-width: 180px;
  object-fit: contain;
}


/* ─────────────────────────────────────────────────────────────
   4. APP INSTALL BAR (ซ่อน — ใช้ PWA prompt แทน)
   ───────────────────────────────────────────────────────────── */
.app-install { display: none !important }


/* ─────────────────────────────────────────────────────────────
   5. TOP BAR
   ───────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  background: linear-gradient(180deg, rgba(var(--runtime-bg-rgb,2,13,33),.98), rgba(var(--runtime-bg-rgb,1,8,23),.98));
  border-bottom: 1px solid rgba(var(--runtime-primary-rgb,0,231,255),.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.30);
  backdrop-filter: blur(16px);
}
.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 74px;
  padding: 0 18px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
}

/* Hamburger button */
.icon-btn {
  width: 44px; height: 44px;
  border: 0; background: transparent;
  color: rgba(255,255,255,.84);
  font-size: 20px; border-radius: 12px;
  display: grid; place-items: center;
  flex-shrink: 0; cursor: pointer;
  transition: background .15s;
}
.icon-btn:hover { background: rgba(255,255,255,.1) }

/* ซ่อน hamburger / flag บน desktop */
.topbar .flag-btn { display: none }

.topbar .logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Desktop nav links */
.site-nav-primary {
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.site-nav-primary .sn-link {
  height: 40px;
  padding: 0 11px;
  border-radius: 13px;
  font-size: 12px;
  color: rgba(255,255,255,.82);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  background: transparent;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  transition: .18s;
}
.site-nav-primary .sn-link i { color: var(--t-accent); font-size: 14px }
.site-nav-primary .sn-link:hover {
  border-color: rgba(var(--runtime-primary-rgb,0,231,255),.28);
  background: rgba(var(--runtime-primary-rgb,0,40,90),.18);
  color: #fff;
}
.site-nav-primary .sn-link.sn-active {
  border-color: rgba(var(--runtime-primary-rgb,0,231,255),.45);
  background: linear-gradient(180deg, rgba(var(--runtime-primary-rgb,0,231,255),.12), rgba(var(--runtime-bg-rgb,6,34,74),.52));
  color: #fff;
}

/* Contact modal — channel grid */
.contact-ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px,1fr)); gap: 10px; margin-top: 6px; }
.contact-ch-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #eef6ff; text-decoration: none;
  font-weight: 700; font-size: 14px;
  transition: .18s;
}
.contact-ch-item:hover {
  background: rgba(var(--ch-rgb, 255,255,255), .12);
  border-color: var(--ch, rgba(255,255,255,.32));
  transform: translateY(-1px);
}
.contact-ch-item i { color: var(--ch, #00dcff); font-size: 22px; min-width: 24px; text-align: center; }
.contact-ch-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-ch-empty { padding: 24px 12px; text-align: center; color: #8faabf; font-size: 13px; }

/* Auth buttons (top-right — guest state) */
.desktop-auth { display: none; align-items: center; gap: 12px }
.desktop-auth .btn-login,
.btn-login {
  height: 42px;
  padding: 0 18px;
  font-size: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffe07b, #ffb331 58%, #b56a12);
  color: #160b00;
  border: 0;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}
.desktop-auth .btn-register,
.btn-register {
  height: 42px;
  padding: 0 18px;
  font-size: 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #40f4ff 0%, #0487ff 52%, #0459d6 100%);
  color: #fff;
  border: 0;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

/* Search button */
.desktop-search-btn {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0,231,255,.38);
  background: linear-gradient(180deg, rgba(14,78,166,.92), rgba(3,25,66,.96));
  color: #c9fbff;
  font-size: 17px;
  align-items: center;
  justify-content: center;
}

.top-right-block  { min-width: 0; display: flex; align-items: center; gap: 12px }

/* User card (after login — desktop) */
.desktop-auth.is-user .top-user-card,
.desktop-auth.is-user .top-balance-card {
  height: 48px;
  border: 1px solid rgba(74,142,225,.45);
  background: linear-gradient(180deg, rgba(14,49,100,.96), rgba(5,18,40,.96));
  border-radius: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  min-width: 0;
}
.top-user-card    { gap: 10px; padding: 0 12px; max-width: 220px }
.top-avatar       { width: 34px; height: 34px; border-radius: 12px; background: linear-gradient(180deg,var(--t-accent),#b57a1b); color: #201100; display: grid; place-items: center; flex: 0 0 auto }
.top-user-meta    { display: block; min-width: 0; line-height: 1.1 }
.top-user-meta b  { display: block; font-size: 13px; font-weight: 1000; max-width: 132px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.top-user-meta small { display: block; color: var(--t-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.top-balance-card { flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 14px; min-width: 132px }
.top-balance-card small { font-size: 10px; color: var(--t-muted) }
.top-balance-card b     { font-size: 14px; color: var(--t-accent); font-weight: 1000; line-height: 1.1 }
.top-action { height: 48px; border: 0; border-radius: 14px; padding: 0 16px; font-weight: 1000; display: inline-flex; align-items: center; gap: 7px }
.top-action.deposit  { background: linear-gradient(180deg, var(--t-primary), #008bd8); color: #fff }
.top-action.withdraw { background: linear-gradient(180deg, var(--t-accent), #b97c1c); color: #201100 }
.top-logout { width: 46px; height: 46px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(3,11,26,.72); color: #b8c9e7; display: grid; place-items: center }
.top-logout:hover { color: #fff; background: rgba(255,65,65,.18); border-color: rgba(255,65,65,.5) }


/* ─────────────────────────────────────────────────────────────
   6. CATEGORY TABS — ซ่อน (ย้ายไปอยู่ใน sidebar แล้ว)
   ───────────────────────────────────────────────────────────── */
.cat-tabs {
  display: none !important;
  position: sticky;
  top: 74px;
  z-index: 88;
  background: linear-gradient(180deg, rgba(1,12,31,.9), rgba(1,8,22,.92));
  border-bottom: 1px solid rgba(0,231,255,.18);
  backdrop-filter: blur(18px);
}
.cat-tabs-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  overflow: auto;
  scrollbar-width: none;
}
.cat-tabs-inner::-webkit-scrollbar { display: none }
.cat-tab {
  height: 42px;
  min-width: 0;
  padding: 0 13px;
  border-radius: 13px;
  border: 1px solid transparent;
  background: transparent;
  color: #bad2f4;
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition: .18s;
}
.cat-tab i { color: var(--t-primary); font-size: 16px }
.cat-tab:hover { background: rgba(0,231,255,.08); border-color: rgba(0,231,255,.2); color: #fff }
.cat-tab.active {
  background: linear-gradient(180deg, rgba(0,231,255,.18), rgba(0,105,255,.08));
  border: 1px solid rgba(0,231,255,.38);
  box-shadow: inset 0 -2px 0 var(--t-primary);
  color: #fff;
}
.cat-tab .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--t-red); box-shadow: 0 0 8px var(--t-red);
  animation: livePulse 1.4s infinite; display: inline-block;
}
@keyframes livePulse { 0%,100%{opacity:1} 50%{opacity:.4} }


/* ─────────────────────────────────────────────────────────────
   7. APP SHELL LAYOUT
   ───────────────────────────────────────────────────────────── */
.app {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0,1fr);
  gap: 10px;
  padding: 10px 10px calc(var(--bottom) + 18px);
  align-items: start;
}
.main { min-width: 0; position: relative }

.desktop-side {
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 92px);
  overflow: auto;
  scrollbar-width: thin;
}
.desktop-side::-webkit-scrollbar       { width: 4px }
.desktop-side::-webkit-scrollbar-thumb { background: rgba(var(--runtime-primary-rgb,0,231,255),.28); border-radius: 99px }

.right-sidebar {
  display: none;
  position: sticky;
  top: 84px;
  align-self: start;
  max-height: calc(100vh - 92px);
  overflow: auto;
  scrollbar-width: thin;
  padding: 14px;
  background: linear-gradient(180deg, rgba(var(--runtime-primary-rgb,7,36,77),.45), rgba(var(--runtime-bg-rgb,3,17,41),.92));
  border: 1px solid rgba(var(--runtime-primary-rgb,0,231,255),.18);
  border-radius: 18px;
  box-sizing: border-box;
  grid-column: 3;
  min-width: 0;
}
.right-sidebar::-webkit-scrollbar       { width: 4px }
.right-sidebar::-webkit-scrollbar-thumb { background: rgba(var(--runtime-primary-rgb,0,231,255),.28); border-radius: 99px }

/* ── Hot Providers Sidebar ── */
.hot-providers-box {
  background: linear-gradient(180deg, rgba(var(--runtime-primary-rgb,20,40,80),.35), rgba(var(--runtime-bg-rgb,8,20,45),.85));
  border: 1px solid rgba(var(--runtime-primary-rgb,233,30,140),.25);
  border-radius: 16px;
  padding: 14px;
}
.hot-providers-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hot-providers-title i {
  color: #ff6b35;
  filter: drop-shadow(0 0 8px rgba(255,107,53,.6));
}
.hot-providers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hot-provider-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s ease;
}
.hot-provider-card:hover {
  background: linear-gradient(135deg, rgba(var(--runtime-primary-rgb,233,30,140),.15), rgba(var(--runtime-primary-rgb,233,30,140),.05));
  border-color: rgba(var(--runtime-primary-rgb,233,30,140),.4);
  transform: translateY(-2px);
}
.hot-provider-img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(0,0,0,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hot-provider-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hot-provider-name {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hot-providers-empty {
  text-align: center;
  color: var(--t-muted);
  padding: 16px;
  font-size: 13px;
}

/* ─────────────────────────────────────────────────────────────
   8. COMMON PANEL / CARD BASE
   ───────────────────────────────────────────────────────────── */
.panel,
.notice,
.bar-title,
.jackpot-card,
.lb-card,
.shortcut-card,
.rail-account,
.rail-link,
.online-box,
.live-card,
.guide-row,
.modal-card {
  border: 1px solid var(--t-border);
  background: linear-gradient(180deg, rgba(9,38,84,.82), rgba(2,12,31,.92));
  box-shadow: var(--t-soft);
  backdrop-filter: blur(14px);
}
.panel { border-radius: 20px; padding: 14px }
.notice {
  height: auto;
  min-height: 46px;
  border-radius: 16px;
  color: #e7f7ff;
  background: linear-gradient(90deg, rgba(4,25,60,.86), rgba(3,45,101,.66), rgba(4,25,60,.86));
}
.notice i { color: var(--t-primary); filter: drop-shadow(0 0 8px rgba(0,231,255,.55)) }

.bar-title {
  border-radius: 16px;
  padding: 13px 16px;
  background: linear-gradient(90deg, rgba(0,231,255,.16), rgba(0,94,225,.14), rgba(255,214,107,.1));
}
.bar-title i       { color: var(--t-primary); filter: drop-shadow(0 0 10px rgba(0,231,255,.42)) }
.bar-title .extra  { color: var(--t-muted) }

/* Section head */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px }
.section-head h2 { font-size: clamp(20px,2.3vw,28px); line-height: 1.05; margin: 0; font-weight: 1000; letter-spacing: -.5px }
.section-head h2 i { color: var(--t-primary); filter: drop-shadow(0 0 10px rgba(0,231,255,.42)) }
.section-head small,
.section-head p { color: var(--t-muted) }

/* Tab pills */
.tab-row {
  background: linear-gradient(180deg, rgba(9,31,67,.82), rgba(4,12,27,.86));
  border: 1px solid rgba(0,231,255,.16);
  border-radius: 20px;
  padding: 8px;
  gap: 10px;
  overflow: auto;
  scrollbar-width: none;
}
.tab-row::-webkit-scrollbar { display: none }
.tab-pill {
  border: 1px solid rgba(0,231,255,.26);
  background: rgba(5,26,62,.66);
  color: #d9edff;
  border-radius: 999px;
  min-width: 130px;
}
.tab-pill.active {
  background: linear-gradient(180deg, #34eefe, #0869ef);
  color: #fff;
  box-shadow: 0 12px 26px rgba(0,126,255,.22);
}


/* ─────────────────────────────────────────────────────────────
   9. SIDE RAIL
   ───────────────────────────────────────────────────────────── */
.rail-account {
  border-radius: 20px;
  padding: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.rail-account-top { display: flex; align-items: center; gap: 10px; min-width: 0 }
.rail-avatar {
  width: 42px; height: 42px; border-radius: 14px;
  background: linear-gradient(180deg, var(--t-accent), #b57919);
  color: #1e1200; display: grid; place-items: center; flex: 0 0 auto;
}
.rail-account b     { display: block; font-size: 14px; font-weight: 1000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rail-account small { display: block; color: var(--t-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rail-balance {
  margin-top: 10px;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(0,7,22,.54);
  border: 1px solid rgba(0,231,255,.22);
}
.rail-balance span { display: block; color: var(--t-muted); font-size: 11px }
.rail-balance b    { color: var(--t-accent); font-size: 16px }

.rail-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px }
.rail-quick button,
.rail-account.guest button {
  height: 38px; border: 0; border-radius: 8px; font-weight: 1000;
  background: linear-gradient(180deg, var(--t-primary), #008bd8);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.rail-quick button:nth-child(2) { background: linear-gradient(180deg, var(--t-accent), #b97c1c); color: #1f1100 }
.rail-account.guest {
  text-align: center;
  background: radial-gradient(circle at 50% 0, rgba(0,231,255,.14), transparent 38%), linear-gradient(180deg,#102d5a,#06142c);
}
.rail-account.guest b     { font-size: 15px }
.rail-account.guest small { margin: 4px 0 10px; white-space: normal }
.rail-account-logout {
  width: 100%; margin-top: 10px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid rgba(255,70,70,.28);
  background: rgba(60,5,5,.7); color: #ffb0b0;
  font-size: 13px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: .15s;
}
.rail-account-logout:hover { background: rgba(120,15,15,.85); color: #ffd0d0 }

/* Rail nav links */
.rail-link {
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(9,42,93,.82), rgba(3,14,35,.94));
  color: #dceeff;
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-auto-flow: column;
  justify-content: start;
  text-align: left;
  padding: 8px 10px;
  gap: 8px;
}
.rail-link .ricon {
  width: 34px; height: 34px; border-radius: 11px;
  background: rgba(0,231,255,.1);
  color: var(--t-primary);
  border: 1px solid rgba(0,231,255,.18);
  display: grid; place-items: center;
}
.rail-link.active {
  background: linear-gradient(180deg, #ecfbff, #99ddff);
  color: #031733;
  box-shadow: 0 16px 34px rgba(0,151,255,.24);
}
.rail-link.active .ricon { background: rgba(4,76,167,.14); color: #005ce8 }
.rail-text { font-size: 12px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

/* Rail history dropdown */
.rail-history-group {
  display: flex;
  flex-direction: column;
}
.rail-link-parent {
  position: relative;
}
.rail-link-parent .rail-text i {
  font-size: 10px;
  margin-left: 4px;
  transition: transform .2s ease;
}
.rail-link-parent.open .rail-text i {
  transform: rotate(180deg);
}
.rail-history-sub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0 6px 12px;
  margin-top: 2px;
}
.rail-sub-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  background: rgba(var(--runtime-primary-rgb, 0,231,255), .06);
  border: 1px solid rgba(var(--runtime-primary-rgb, 0,231,255), .12);
  color: #c8ddf5;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  text-align: left;
}
.rail-sub-link:hover {
  background: rgba(var(--runtime-primary-rgb, 0,231,255), .15);
  border-color: rgba(var(--runtime-primary-rgb, 0,231,255), .3);
  color: #fff;
}
.rail-sub-link i {
  font-size: 14px;
  width: 20px;
  text-align: center;
  color: var(--t-primary);
}


/* ─────────────────────────────────────────────────────────────
   10. QUICK LOBBY ICONS (rb-quick)
   ───────────────────────────────────────────────────────────── */
.rb-quick-title { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; font-size: 18px; font-weight: 1000 }
.rb-quick-title i { color: var(--t-accent) }

.rb-quick-menu {
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: 12px;
  margin: 14px 0;
}
.rb-quick-item {
  height: 96px;
  border: 1px solid rgba(var(--runtime-primary-rgb,79,188,255),.22);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(var(--runtime-primary-rgb,9,48,109),.12), rgba(var(--runtime-bg-rgb,3,15,38),.94));
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 1000;
  color: #fff;
  cursor: pointer;
  transition: .18s;
  position: relative;
  overflow: hidden;
}
.rb-quick-item:hover { transform: translateY(-3px); border-color: rgba(var(--runtime-primary-rgb,0,232,255),.72) }
.rb-quick-item span {
  width: 44px; height: 44px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(var(--runtime-primary-rgb,0,231,255),.18), rgba(var(--runtime-primary-rgb,0,93,255),.08));
  border: 1px solid rgba(var(--runtime-primary-rgb,0,231,255),.26);
  color: var(--t-primary);
  display: grid; place-items: center; font-size: 19px;
}
.rb-quick-item b     { font-size: 12px }
.rb-quick-item small { font-size: 10px; color: var(--t-muted); font-weight: 800 }

/* Image card mode — เมื่อมีรูปจากหลังบ้าน */
.rb-quick-item-img {
  padding: 0;
  overflow: hidden;
  position: relative;
}
.rb-quick-item-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}
.rb-quick-img-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 8px 7px;
  background: linear-gradient(0deg, rgba(0,0,0,.72) 0%, transparent 100%);
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  text-align: center;
  z-index: 2;
}


/* ─────────────────────────────────────────────────────────────
   11. HERO SLIDER
   รูปภาพ: object-fit:contain เห็นรูปเต็ม ไม่ crop
   ───────────────────────────────────────────────────────────── */
.hero-slider {
  height: clamp(240px, 24vw, 330px);
  border-radius: 16px;
  border: 1px solid rgba(var(--runtime-primary-rgb,0,231,255),.35);
  box-shadow: 0 28px 86px rgba(0,0,0,.5);
  background: rgba(var(--runtime-primary-rgb,3,22,52),.15);
  overflow: hidden;
  position: relative;
}
.hero-slide { background: transparent }

/* ซ่อน blur bg — ไม่ต้องการภาพซ้อนหลัง */
.hero-slide .blur-bg { display: none !important }

/* รูปสไลด์ — เห็นเต็ม ไม่ crop ไม่ยืด */
.hero-slide picture img,
.hero-slide > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.hero-fallback {
  background:
    radial-gradient(circle at 78% 36%, rgba(0,231,255,.24), transparent 30%),
    radial-gradient(circle at 90% 12%, rgba(255,214,107,.22), transparent 22%),
    linear-gradient(135deg, #04122c, #09419d 70%, #031028);
}
.hero-fallback h1 { color: #ebfbff; text-shadow: 0 0 18px rgba(0,231,255,.58), 0 2px 0 rgba(0,0,0,.52) }
.hero-arrow {
  background: rgba(2,14,34,.68);
  border: 1px solid rgba(0,231,255,.38);
  backdrop-filter: blur(12px);
}
.hero-dot { background: rgba(255,255,255,.32) }
.hero-dot.active {
  width: 26px;
  background: linear-gradient(90deg, var(--t-primary), #1c78ff);
  box-shadow: 0 0 14px rgba(0,231,255,.55);
}


/* ─────────────────────────────────────────────────────────────
   12. AUTH ROW & BUTTONS
   ───────────────────────────────────────────────────────────── */
.auth-row { margin: 14px 0 }
.auth-row button { height: 54px; border-radius: 18px; font-size: 16px }
.auth-row .login    { background: linear-gradient(180deg, var(--t-accent), #ffb331 58%, #b56a12); color: #160b00; border: 0 }
.auth-row .register { background: linear-gradient(180deg, #40f4ff 0%, #0487ff 52%, #0459d6 100%); color: #fff; border: 0 }

.btn-main     { background: linear-gradient(180deg, var(--t-primary), #0084d6); color: #fff; border: 0 }
.game-lobby-hero { background: linear-gradient(180deg, rgba(var(--runtime-primary-rgb,8,42,93),.18), rgba(var(--runtime-bg-rgb,4,14,38),.94)); border-color: rgba(var(--runtime-primary-rgb,93,157,245),.42) }
.game-lobby-title i { color: var(--t-primary) }
.btn-gold     { background: linear-gradient(180deg, var(--t-accent), #b97c1c); color: #201100; border: 0 }
.btn-dark     { background: linear-gradient(180deg, rgba(var(--runtime-primary-rgb,20,58,112),.22), rgba(var(--runtime-bg-rgb,7,24,50),.94)); border: 1px solid rgba(var(--runtime-primary-rgb,0,231,255),.28); color: #fff }
.install-btn,
.deposit-action { background: linear-gradient(180deg, #40f4ff 0%, #0487ff 52%, #0459d6 100%); color: #fff; border: 0 }


/* ─────────────────────────────────────────────────────────────
   13. GAME CARDS (UNIFIED - ไม่มี CSS ที่อื่นแล้ว)
   แนวนอน + พื้นหลัง blur + ชื่อทับรูป
   ───────────────────────────────────────────────────────────── */
.game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.game-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 16 / 10;
  background: #0a1628;
  border: 1px solid rgba(80, 150, 255, .22);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
  cursor: pointer;
  touch-action: manipulation;
  min-width: 0;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.game-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .55);
  border-color: rgba(255, 200, 80, .5);
}

/* Thumbnail container */
.game-thumb {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Blurred background layer */
.game-thumb::before {
  content: '';
  position: absolute;
  inset: -20px;
  background: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(25px) saturate(1.3) brightness(.6);
  transform: scale(1.2);
  z-index: 1;
}

.game-thumb img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: transform .3s ease;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
}

.game-card:hover .game-thumb img {
  transform: scale(1.05);
}

.game-thumb i {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-size: 32px;
  color: var(--t-primary);
  text-shadow: 0 0 20px rgba(0, 231, 255, .6);
}

/* Game info overlay at bottom */
.game-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 20px 8px 8px;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 60%, transparent 100%);
}

.game-info b {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

.game-info span {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  color: rgba(255,255,255,.7);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-count-note { display: none }

/* Play overlay removed - using SweetAlert loading instead */

/* Badge */
.game-badge {
  position: absolute;
  z-index: 12;
  top: 5px;
  right: 5px;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 8px;
  font-weight: 800;
  white-space: nowrap;
  background: linear-gradient(180deg, #ff6b3d, #e52d12);
  color: #fff;
  box-shadow: 0 4px 12px rgba(229, 45, 18, .45);
}

.game-badge.new {
  background: linear-gradient(180deg, #2ce065, #0d9940);
  box-shadow: 0 4px 12px rgba(13, 153, 64, .45);
}

/* Launching state */
.game-card.launching {
  pointer-events: none;
  opacity: .7;
  filter: saturate(.6);
}

.game-card.launching::after {
  content: 'กำลังเข้าเกม...';
  position: absolute;
  inset: 10px;
  border-radius: 8px;
  background: rgba(1,7,18,.76);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0,231,255,.35);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 1000;
  font-size: 12px;
  z-index: 10;
}


/* ─────────────────────────────────────────────────────────────
   14. PROVIDER CARDS
   รูปภาพ: object-fit:contain เห็นรูปเต็ม ไม่ crop
   ───────────────────────────────────────────────────────────── */
.provider-grid { gap: 10px; align-items: stretch }
.provider-card {
  display: block;
  padding: 0;
  min-height: 0;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 14px;
  background: #020b1d;
  isolation: isolate;
  position: relative;
  cursor: pointer;
  transition: transform .2s ease;
}
.provider-card:hover { transform: translateY(-3px); border-color: var(--t-border2); box-shadow: 0 23px 55px rgba(0,0,0,.38), 0 0 28px rgba(0,231,255,.12) }

.provider-logo {
  position: absolute;
  inset: 0;
  margin: 0; padding: 0; border: 0;
  border-radius: inherit;
  background: #020b1d;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.provider-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  background: #020b1d;
}
.provider-logo i { font-size: 38px; color: var(--t-primary); text-shadow: 0 0 16px rgba(0,231,255,.5) }
.provider-meta,
.provider-count { display: none }

.provider-badge {
  position: absolute;
  z-index: 5;
  top: 8px; right: 8px;
  border-radius: 999px;
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────
   15. JACKPOT CARD
   ───────────────────────────────────────────────────────────── */
.jackpot-card { border-radius: 14px; margin-bottom: 14px }
.jp-title i,
.lb-title i  { color: var(--t-accent) }

.jp-img.jackpot-gif {
  position: relative;
  min-height: 180px;
  border-radius: 16px;
  overflow: hidden;
  background-color: #020b1d;
  background-image: url('https://cdn.zabbet.com/JG8U/highlight/1725948738165-4cb4f1ec-44ed-4b21-99ed-398fbb6d7b25.gif');
  background-size: 108% auto;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid rgba(255,224,122,.32);
  animation: jackpotFade 4.4s ease-in-out infinite;
}
.jp-img.jackpot-gif > div {
  position: absolute;
  left: 0; right: 0;
  top: 50%; bottom: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 9.5%;
  transform: translateY(-30%);
  text-align: center;
  pointer-events: none;
}
.jp-img.jackpot-gif b,
.jp-img.jackpot-gif b.jp-num-fade,
#jpVal,
.jp-mobile-val {
  font-family: Arial, Helvetica, 'Noto Sans Thai', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 45px);
  color: #fff;
  opacity: .96;
  text-shadow: 0 2px 6px rgba(0,0,0,.72), 0 0 6px rgba(255,255,255,.38);
  display: block;
  width: 100%;
  white-space: nowrap;
  text-align: center;
  line-height: .9;
  animation: jackpotPulse 2.2s ease-in-out infinite;
}
.jp-img.jackpot-gif b.jp-num-fade { animation: jackpotFadeNum .46s ease both }

@keyframes jackpotFade    { 0%,100%{opacity:.88;filter:saturate(1.04) brightness(.94)} 50%{opacity:1;filter:saturate(1.2) brightness(1.18)} }
@keyframes jackpotPulse   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.025)} }
@keyframes jackpotFadeNum { 0%{opacity:.22;transform:translateY(8px) scale(.96)} 55%{opacity:1;transform:translateY(0) scale(1.02)} 100%{opacity:.96;transform:translateY(0) scale(1)} }

/* Leaderboard */
.lb-table.real-users th:nth-child(3),
.lb-table.real-users td:nth-child(3) { display: table-cell }
.lb-subname { display: block; font-size: 10px; color: #85a8d4; margin-top: 2px }
.lb-win     { color: var(--t-green); text-shadow: 0 0 10px rgba(53,242,138,.35) }

/* ซ่อน elements ที่ไม่ใช้ */
.online-grid,
.live-list,
.minigame-card,
.shortcut-card { display: none }


/* ─────────────────────────────────────────────────────────────
   16. FOOTER & BOTTOM NAV
   ───────────────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid rgba(0,231,255,.2);
  background: #020814;
}
.footer .brand-logo,
.shortcut-left,
.shortcut-right { display: none }

/* Bank logos */
.bank-logo {
  background: rgba(255,255,255,.96);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
}
.bank-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* Bottom navigation */
.bottom-nav {
  background: linear-gradient(180deg, rgba(2,18,44,.84), rgba(1,8,22,.96));
  border-top: 1px solid rgba(0,231,255,.22);
  backdrop-filter: blur(18px);
}
.bottom-nav-inner {
  left: 10px;
  right: 10px;
  bottom: 8px;
  width: auto;
  border-radius: 24px;
  background: rgba(5,11,24,.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(0,231,255,.22);
  box-shadow: 0 18px 44px rgba(0,0,0,.48);
  height: 70px;
}
.nav-item       { color: #b8d0ef }
.nav-item.active { color: #fff }
.nav-icon { background: rgba(0,231,255,.1); border: 1px solid rgba(0,231,255,.18); border-radius: 16px }
.nav-item.active .nav-icon { background: linear-gradient(180deg, #35eeff, #0b6fff); color: #fff; box-shadow: 0 0 18px rgba(0,231,255,.34) }

/* Floating CS */
.cs-float {
  background: radial-gradient(circle at 50% 30%, var(--t-primary, #00e7ff), #0055cc);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 0 0 6px rgba(var(--runtime-primary-rgb,0,231,255),.15), 0 12px 28px rgba(0,0,0,.4);
}


/* ─────────────────────────────────────────────────────────────
   17. DRAWER
   ───────────────────────────────────────────────────────────── */
.drawer        { background: linear-gradient(180deg, rgba(var(--runtime-bg-rgb,2,20,48),.98), rgba(var(--runtime-bg-rgb,1,8,20),.99)); border-right: 1px solid rgba(var(--runtime-primary-rgb,0,231,255),.24) }
.drawer-head   { border-bottom: 1px solid rgba(var(--runtime-primary-rgb,0,231,255),.18) }
.drawer-nav-item {
  background: rgba(var(--runtime-primary-rgb,5,28,66),.14);
  border: 1px solid rgba(var(--runtime-primary-rgb,0,231,255),.22);
  border-radius: 16px;
}
.drawer-nav-item:hover {
  background: rgba(var(--runtime-primary-rgb,0,231,255),.2);
  border-color: rgba(var(--runtime-primary-rgb,0,231,255),.45);
}
.drawer-nav-item i { color: var(--t-accent, #ffd66b) }

/* guest-box / profile-box — ใช้สีธีมจากหลังบ้าน */
.guest-box, .profile-box {
  background:
    radial-gradient(circle at 50% 0, rgba(var(--runtime-primary-rgb,0,231,255),.16), transparent 44%),
    linear-gradient(180deg, rgba(var(--runtime-primary-rgb,8,36,84),.72), rgba(var(--runtime-bg-rgb,2,10,28),.96)) !important;
  border: 1px solid rgba(var(--runtime-primary-rgb,0,231,255),.28) !important;
  padding: 14px 12px !important;
}
.guest-box > i {
  width: 48px !important; height: 48px !important;
  font-size: 22px !important;
  margin-bottom: 0 !important;
  background: linear-gradient(180deg, var(--t-primary,#00e7ff), rgba(var(--runtime-primary-rgb,0,80,180),.7)) !important;
  color: #fff !important;
  border-color: rgba(var(--runtime-primary-rgb,0,231,255),.35) !important;
}
.guest-box i, .profile-avatar {
  background: linear-gradient(180deg, var(--t-primary,#00e7ff), rgba(var(--runtime-primary-rgb,0,80,180),.7)) !important;
  color: #fff !important;
  border-color: rgba(var(--runtime-primary-rgb,0,231,255),.35) !important;
}

/* ปุ่ม Login/Register ใน drawer — แถวเดียว เล็กลง */
.guest-btns {
  display: flex;
  gap: 8px;
  width: 100%;
}
.guest-btns .btn-main,
.guest-btns .btn-dark {
  flex: 1;
  min-width: 0;
  height: 38px !important;
  font-size: 12px !important;
  padding: 0 8px !important;
  border-radius: 10px !important;
}
/* Reset icon ภายในปุ่มใน guest-box ไม่ให้รับ circle style จาก .guest-box i */
.guest-btns button i,
.guest-btns .btn-main i,
.guest-btns .btn-dark i {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  display: inline !important;
  margin: 0 3px 0 0 !important;
  padding: 0 !important;
  font-size: inherit !important;
  color: inherit !important;
  box-shadow: none !important;
}
.drawer-logout-btn {
  width: 100%; padding: 14px 18px; border-radius: 14px;
  border: 1px solid rgba(255,80,80,.3);
  background: linear-gradient(180deg, rgba(80,10,10,.85), rgba(40,5,5,.95));
  color: #ffb8b8; font-size: 15px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  cursor: pointer; transition: .15s; margin-bottom: 8px;
}
.drawer-logout-btn:hover { filter: brightness(1.15) }


/* ─────────────────────────────────────────────────────────────
   18. MODALS
   ───────────────────────────────────────────────────────────── */
.modal {
  background: rgba(1,5,14,.78);
  backdrop-filter: blur(8px);
  /* transition handled below */
}
/* ป้องกัน modal ค้างบน screen เมื่อไม่มี .show */
.modal:not(.show) {
  display: none !important;
  pointer-events: none !important;
  backdrop-filter: none !important;
}
.modal.show {
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  animation: modalIn .24s ease both;
}
@keyframes modalIn  { from{opacity:0} to{opacity:1} }
@keyframes modalPop { from{opacity:0;transform:translateY(18px) scale(.985)} to{opacity:1;transform:translateY(0) scale(1)} }

.modal-card {
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(8,39,88,.96), rgba(2,10,28,.98));
  border-color: rgba(0,231,255,.38);
  box-shadow: 0 34px 105px rgba(0,0,0,.72), 0 0 42px rgba(0,231,255,.12);
  position: relative;
  z-index: 9002;
  pointer-events: auto;
  max-height: 92vh;
  overflow: auto;
  animation: modalPop .24s ease both;
}
.modal-head {
  border-bottom: 1px solid rgba(0,231,255,.18);
  background: linear-gradient(90deg, rgba(4,25,58,.98), rgba(2,12,30,.98));
  position: sticky;
  top: 0;
  z-index: 9010;
  pointer-events: auto;
  isolation: isolate;
}

/* Close button — ใหญ่พอแตะบนมือถือ + ใช้สีธีมจากหลังบ้าน */
.close-btn,
.modal-close-page,
[data-close-modal],
[data-close-page] {
  position: relative;
  z-index: 2147483647;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(var(--runtime-primary-rgb,0,231,255),.22);
  cursor: pointer;
  user-select: none;
  min-width: 48px;   min-height: 48px;
  width: 48px;       height: 48px;
  border-radius: 16px;
  display: inline-grid;
  place-items: center;
  background: linear-gradient(180deg,
    rgba(var(--runtime-primary-rgb,15,54,104),.22),
    rgba(var(--runtime-bg-rgb,2,14,34),.96));
  border: 1px solid rgba(var(--runtime-primary-rgb,0,231,255),.48);
  color: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.35),
              0 0 0 1px rgba(var(--runtime-primary-rgb,0,231,255),.12);
}
/* ขยาย hit area */
.close-btn::before,
.modal-close-page::before,
[data-close-modal]::before,
[data-close-page]::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 24px;
  pointer-events: auto;
}
.close-btn i,
.modal-close-page i { pointer-events: none; font-size: 22px }

/* Auth modal */
.auth-tabs { padding: 8px; gap: 8px; background: rgba(1,9,24,.72); border-radius: 0 }
.auth-tab {
  height: 54px; border-radius: 16px;
  border: 1px solid rgba(122,169,232,.18);
  background: rgba(5,22,52,.8);
  color: #d9e5ff;
}
.auth-tab.active {
  background: linear-gradient(180deg, #25e8ff, #027bd9);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,180,255,.34);
  border-color: rgba(255,255,255,.22);
}
.auth-content { padding: 22px }

/* Auth side panel (desktop) */
.auth-modal.has-side .modal-card { overflow: hidden; border-radius: 24px }
.auth-modal.has-side .modal-card-inner {
  min-width: 0;
  background: linear-gradient(180deg, rgba(8,35,80,.98), rgba(2,10,27,.98));
}
.auth-modal.has-side .modal-head {
  height: 66px; padding: 0 18px 0 24px;
  border-bottom: 1px solid rgba(0,231,255,.22);
  border-radius: 24px 24px 0 0;
  display: flex; align-items: center; justify-content: space-between;
}
.auth-modal.has-side .close-btn { position: absolute; right: 12px; top: 12px }

/* Promo modal */
.promo-item { border-radius: 18px; background: rgba(4,20,50,.68); border: 1px solid rgba(0,231,255,.18) }
.promo-item.active { border-color: rgba(0,231,255,.7); background: linear-gradient(180deg, rgba(0,231,255,.16), rgba(4,25,60,.76)) }
.promo-preview h2 { color: #eafcff; text-shadow: 0 0 14px rgba(0,231,255,.36) }

/* Step form badge */
.step-section .stepno,
.step-section .stepno.empty {
  width: 40px; height: 40px;
  flex: 0 0 40px; min-width: 40px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  background: #fff; color: #001633;
  border: 0; font-weight: 1000; font-size: 15px;
}

/* Wallet modal pages */
.wallet-modal-section {
  position: fixed; z-index: 1000; inset: 0;
  padding: clamp(12px,3vw,28px);
  background: rgba(0,5,18,.86);
  overflow: auto; display: block;
  animation: modalIn .22s ease both;
}
.wallet-modal-section > .section-head {
  max-width: 920px; margin: 24px auto 0;
  border: 1px solid rgba(0,231,255,.28);
  border-bottom: 0; border-radius: 24px 24px 0 0;
  padding: 16px 18px;
  background: linear-gradient(90deg, rgba(0,231,255,.18), rgba(4,20,50,.94));
  position: sticky; top: 8px; z-index: 20002;
}
.wallet-modal-section > .deposit-wrap,
.wallet-modal-section > .panel {
  max-width: 920px; margin: 0 auto;
  border-radius: 0 0 24px 24px;
  border: 1px solid rgba(0,231,255,.28);
  background: linear-gradient(180deg, rgba(5,26,60,.96), rgba(1,8,24,.98));
  padding: 18px;
}
.modal-close-page { background: linear-gradient(180deg, #153a79, #061b3f); border: 1px solid rgba(0,231,255,.45) }
.modalized-head .modal-close-page { margin-left: auto }


/* ─────────────────────────────────────────────────────────────
   19. WALLET / DEPOSIT / INPUTS
   ───────────────────────────────────────────────────────────── */
.deposit-method {
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(8,37,84,.82), rgba(3,14,34,.94));
  border: 1px solid rgba(0,231,255,.26);
}
.deposit-method i { color: var(--t-primary) }
.deposit-method.active {
  background: linear-gradient(180deg, rgba(0,231,255,.2), rgba(0,94,255,.12));
  border-color: rgba(0,231,255,.74);
}
.deposit-account {
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(7,35,78,.78), rgba(2,10,27,.9));
  border: 1px solid rgba(0,231,255,.24);
}
.history-item { border-radius: 16px; background: rgba(0,9,25,.55); border: 1px solid rgba(0,231,255,.18) }

.input, input, select, textarea {
  background: rgba(0,8,24,.68);
  border: 1px solid rgba(107,180,255,.34);
  border-radius: 16px;
}
.input:focus, input:focus, select:focus, textarea:focus {
  border-color: rgba(0,231,255,.82);
  box-shadow: 0 0 0 3px rgba(0,231,255,.12);
}
label       { color: #bad0ed }
.copy-btn   { background: rgba(0,231,255,.12); border: 1px solid rgba(0,231,255,.32); color: #e8fbff; border-radius: 14px }


/* ─────────────────────────────────────────────────────────────
   20. CASINO STATS BLOCK
   ───────────────────────────────────────────────────────────── */
.casino-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 14px 0 }
.casino-stats > div {
  min-height: 86px; border-radius: 22px;
  border: 1px solid rgba(0,231,255,.26);
  background: linear-gradient(180deg, rgba(7,37,84,.78), rgba(2,12,31,.92));
  display: grid; grid-template-columns: 48px 1fr; grid-template-rows: 1fr 1fr;
  column-gap: 10px; align-items: center; padding: 14px; position: relative; overflow: hidden;
}
.casino-stats > div::before { content:""; position:absolute; inset:auto -18px -36px auto; width:90px; height:90px; border-radius:50%; background:rgba(0,231,255,.08) }
.casino-stats i {
  grid-row: 1/3; width: 48px; height: 48px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #35eeff, #0b6fff);
  color: #fff; font-size: 20px; box-shadow: 0 0 20px rgba(0,231,255,.26);
}
.casino-stats b    { font-size: 15px; font-weight: 1000; color: #fff; align-self: end }
.casino-stats span { font-size: 12px; color: var(--t-muted); align-self: start }


/* ─────────────────────────────────────────────────────────────
   21. FA ICON ALIASES (free-tier fallback)
   ───────────────────────────────────────────────────────────── */
.fa-user-crown::before      { content: "\f007" !important }
.fa-vault::before            { content: "\f555" !important }
.fa-dharmachakra::before     { content: "\f522" !important }
.fa-money-bill-trend-up::before { content: "\f201" !important }
.fa-ticket::before           { content: "\f145" !important }
.fa-award::before            { content: "\f559" !important }


/* ─────────────────────────────────────────────────────────────
   21.5 SWEETALERT THEME (ใช้สี runtime จาก admin)
   ───────────────────────────────────────────────────────────── */
.swal2-popup.swal-game-loading {
  border-radius: 20px !important;
  border: 1px solid rgba(var(--runtime-primary-rgb, 0,231,255), .25) !important;
  box-shadow: 0 25px 80px rgba(0,0,0,.6), 0 0 40px rgba(var(--runtime-primary-rgb, 0,231,255), .15) !important;
}
.swal2-popup .swal2-title {
  color: #fff !important;
  font-weight: 800 !important;
}
.swal2-popup .swal2-html-container {
  color: rgba(255,255,255,.7) !important;
}
.swal2-popup .swal2-loader {
  border-color: var(--runtime-primary, #13eaff) transparent var(--runtime-primary, #13eaff) transparent !important;
}
.swal2-popup .swal2-confirm {
  background: linear-gradient(180deg, var(--runtime-primary, #13eaff), var(--runtime-accent, #0080d0)) !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  padding: 12px 28px !important;
}
.swal2-popup .swal2-icon.swal2-error {
  border-color: #ff4b63 !important;
  color: #ff4b63 !important;
}


/* ─────────────────────────────────────────────────────────────
   22. RESPONSIVE
   ───────────────────────────────────────────────────────────── */

/* ── Desktop ≥1024px ── */
@media (min-width:1024px) {
  .topbar-inner {
    grid-template-columns: auto minmax(0,1fr) auto;
    height: 74px;
  }
  .topbar .icon-btn    { display: none }
  /* .cat-tabs hidden via global rule above */
  .site-nav-primary    { display: flex }
  .desktop-auth        { display: flex }
  .desktop-search-btn  { display: inline-flex }
  .right-sidebar       { display: block }
  .app {
    grid-template-columns: minmax(210px,230px) minmax(0,1fr) minmax(276px,304px);
    gap: 18px;
    padding: 18px 22px 34px;
  }
  .desktop-side  { top: calc(74px + 50px + 8px) }
  .right-sidebar { top: calc(74px + 50px + 8px) }
  .hero-slider   { height: clamp(260px, 24vw, 340px) }
  .game-grid     { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
  .provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .auth-modal.has-side .modal-card { grid-template-columns: .88fr 1.12fr; width: min(1040px,94vw) }
  .auth-modal.has-side .auth-side  { min-height: 610px; border-radius: 24px 0 0 24px }
  .auth-modal.has-side .modal-head { border-radius: 0 }
  .auth-content  { padding: 24px 30px 30px }
  .footer        { padding-bottom: 36px }
}
@media (min-width:1280px) {
  .game-grid     { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
  .provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .app           { grid-template-columns: 230px minmax(0, 1fr) 310px }
}
@media (min-width:1440px) {
  .app { grid-template-columns: 240px minmax(0,1fr) 320px }
}
@media (max-width:1240px) and (min-width:1024px) {
  .app { grid-template-columns: 210px minmax(0,1fr) 276px; gap: 12px; padding-left: 14px; padding-right: 14px }
  .topbar .logo .brand-logo { max-width: 168px; min-width: 112px }
  .top-user-card  { display: none }
  .top-balance-card { min-width: 118px }
}

/* ── iPad / Tablet Portrait (768px-1023px) ── */
@media (min-width:768px) and (max-width:1023px) {
  /* Layout - ซ่อน sidebar ใช้แบบ mobile */
  .app           { display: block !important; max-width: 820px !important; margin: 0 auto; padding: 12px 14px calc(var(--bottom) + 18px) !important }
  .desktop-side  { display: none !important }
  .right-sidebar { display: none !important }
  .rail-account  { display: none !important }
  .main          { width: 100% !important }

  /* Topbar */
  .topbar        { top: 0 !important }
  .topbar-inner  { height: 68px !important }
  .cat-tabs      { display: none !important }

  /* Quick menu */
  .rb-quick-menu { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px }
  .rb-quick-item { height: 88px; border-radius: 16px }
  .rb-quick-item span { width: 38px; height: 38px; font-size: 17px }
  .rb-quick-item b { font-size: 12px }

  /* Game & Provider grids */
  .game-grid     { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important }
  .provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important }
  .game-card     { border-radius: 10px }
  .game-info     { padding: 16px 6px 6px }
  .game-info b   { font-size: 10px }
  .game-info span { font-size: 8px }
  .game-badge    { top: 4px; right: 4px; padding: 2px 6px; font-size: 7px }

  /* Hero & sections */
  .hero-slider   { height: clamp(200px, 28vw, 300px); border-radius: 16px }
  .section-head h2 { font-size: 22px }

  /* Footer */
  .footer        { padding-bottom: calc(var(--bottom) + 18px) }
  .footer-grid   { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px }

  /* Cards */
  .jp-img.jackpot-gif { min-height: 160px; background-size: 110% auto }
  .casino-stats  { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px }
  .casino-stats > div { min-height: 76px; border-radius: 16px }

  /* Bottom nav */
  .bottom-nav    { display: block !important }

  /* Modals */
  .promo-modal .modal-card { width: min(720px, 94vw) }
  .promo-layout  { grid-template-columns: 240px 1fr; gap: 16px }
  .auth-modal.has-side .modal-card { width: min(860px, 94vw); max-height: 88vh }
}

/* ── Mobile <768px ── */
@media (max-width:767px) {
  .topbar-inner {
    height: 58px;
    padding: 0 9px;
    grid-template-columns: auto 1fr;
  }
  .topbar .logo { display: none }
  .top-right-block { justify-self: end }
  .cat-tabs  { top: 58px; display: none }
  .desktop-side { display: none }
  .app       { grid-template-columns: minmax(0,1fr); padding: 8px 12px calc(var(--bottom) + 20px) }
  .hero-slider  { height: auto; min-height: 150px; border-radius: 14px }
  .auth-row button { height: 48px; font-size: 14px; border-radius: 15px }
  .rb-quick-menu { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; margin: 10px 0 }
  .rb-quick-item { height: 76px; border-radius: 15px }
  .rb-quick-item span { width: 32px; height: 32px; border-radius: 12px; font-size: 16px }
  .rb-quick-item b   { font-size: 11px }
  .section-head h2   { font-size: 20px }
  .game-grid     { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
  .provider-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px }
  .panel         { border-radius: 14px; padding: 10px }
  .bar-title     { border-radius: 12px; font-size: 14px; padding: 10px 12px }
  .provider-badge { top: 6px; right: 6px; font-size: 9px; padding: 4px 8px }
  .provider-card { border-radius: 10px }
  .game-card     { border-radius: 8px }
  .game-info     { padding: 14px 5px 5px }
  .game-info b   { font-size: 9px }
  .game-info span { font-size: 7px }
  .game-badge    { top: 3px; right: 3px; padding: 2px 5px; font-size: 7px }
  .modal { padding: 10px; align-items: flex-start; padding-top: calc(env(safe-area-inset-top,0px) + 12px) }
  .modal-card { width: calc(100vw - 20px); max-height: calc(100dvh - 28px); border-radius: 22px }
  .auth-modal.has-side .modal-card { border-radius: 22px }
  .auth-modal.has-side .modal-head { height: 62px; border-radius: 22px 22px 0 0; padding: 0 12px 0 18px }
  .auth-tabs  { padding: 6px; gap: 6px }
  .auth-tab   { height: 50px; font-size: 15px; border-radius: 14px }
  .auth-content { padding: 16px 16px 22px }
  .close-btn, .modal-close-page, [data-close-modal], [data-close-page] {
    min-width: 56px; min-height: 56px;
    width: 56px; height: 56px;
    border-radius: 17px;
  }
  .wallet-modal-section { z-index: 8500; padding: 10px; padding-top: calc(env(safe-area-inset-top,0px) + 10px) }
  .wallet-modal-section > .section-head { margin-top: 8px; border-radius: 18px 18px 0 0 }
  .wallet-modal-section > .deposit-wrap,
  .wallet-modal-section > .panel { border-radius: 0 0 18px 18px; padding: 12px }
  .cs-float { right: 10px; bottom: calc(var(--bottom) + 8px) }
  .step-section .stepno, .step-section .stepno.empty { width: 36px; height: 36px; flex-basis: 36px; min-width: 36px; font-size: 14px }
  .jp-img.jackpot-gif { min-height: 148px; background-size: 116% auto; border-radius: 14px }
  .jp-img.jackpot-gif b, #jpVal, .jp-mobile-val { font-size: clamp(27px, 8vw, 36px) }
  .jp-img.jackpot-gif > div { top: 50%; transform: translateY(-36%); padding-left: 7.8%; padding-right: 7.8% }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px }
  .footer-cert .cert { min-width: 0; height: auto; min-height: 34px; padding: 7px 9px; font-size: 10px }
}
@media (max-width:390px) {
  .app { padding-left: 8px; padding-right: 8px }
  .game-grid, .provider-grid { gap: 6px }
  .brand-logo { min-width: 92px }
  .rb-quick-menu { grid-template-columns: repeat(2,minmax(0,1fr)) }
}

/* ─────────────────────────────────────────────────────────────
   Games Layout — Sidebar ค่ายเกมยอดนิยม
   ───────────────────────────────────────────────────────────── */
.games-layout {
  display: block;
}
.games-main { min-width: 0; }
#gameLobbyHighlights {
  display: none;
}

.popular-providers-box {
  background: linear-gradient(180deg, rgba(var(--runtime-primary-rgb,20,40,80),.35), rgba(var(--runtime-bg-rgb,8,20,45),.85));
  border: 1px solid rgba(var(--runtime-primary-rgb,0,231,255),.25);
  border-radius: 16px;
  padding: 16px;
  margin: 14px 0 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.popular-providers-title {
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.popular-providers-title i {
  color: #ff6b35;
  filter: drop-shadow(0 0 8px rgba(255,107,53,.6));
}
.popular-providers-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  overflow-x: visible;
  padding: 2px 2px 8px;
}
.popular-provider-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 112px;
  padding: 12px 10px;
  background: linear-gradient(135deg, rgba(var(--runtime-primary-rgb,255,255,255),.08), rgba(var(--runtime-primary-rgb,255,255,255),.03));
  border: 1px solid rgba(var(--runtime-primary-rgb,255,255,255),.15);
  border-radius: 12px;
  cursor: pointer;
  transition: all .2s ease;
  min-width: 0;
}

.games-right-sidebar .popular-providers-grid {
  grid-auto-flow: row;
  grid-auto-columns: unset;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: visible;
  padding: 0;
}
.games-right-sidebar .popular-providers-grid {
  gap: 8px;
}
.games-right-sidebar .popular-provider-card {
  display: block;
  min-height: 0;
  padding: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  text-align: center;
}
.games-right-sidebar .popular-provider-card:hover {
  transform: translateY(-3px);
}
.games-right-sidebar .popular-provider-img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.games-right-sidebar .popular-provider-img img {
  object-fit: cover;
}
.popular-provider-card:hover {
  background: linear-gradient(135deg, rgba(var(--runtime-primary-rgb,0,231,255),.15), rgba(var(--runtime-primary-rgb,0,231,255),.05));
  border-color: rgba(var(--runtime-primary-rgb,0,231,255),.4);
  transform: translateY(-3px);
}
.popular-provider-img {
  width: 68px;
  height: 56px;
  border-radius: 10px;
  background: rgba(var(--runtime-bg-rgb,0,0,0),.4);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.popular-provider-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.popular-provider-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.popular-empty {
  text-align: center;
  color: var(--t-muted);
  padding: 20px;
  font-size: 13px;
}

@media (max-width:1024px) {
  .games-layout {
    display: block;
  }
  #gameLobbyHighlights {
    display: block;
  }
  .popular-providers-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
  .popular-provider-card {
    min-height: 90px;
  }
  .popular-provider-img {
    width: 50px;
    height: 50px;
  }
  .popular-provider-name {
    font-size: 10px;
  }
}
@media (max-width:600px) {
  .popular-providers-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }
  .popular-provider-card { min-height: 80px; padding: 8px 6px }
  .popular-provider-img {
    width: 44px;
    height: 44px;
  }
}