/*!
 * Theme Name: UFA432 INFO
 * Description: UFA432.info Thai Gambling Theme — Blue Navy & Soft Gold
 * Version: 1.0.0
 * Text Domain: ufa432info
 */

/* ==========================================================
   DESIGN TOKENS
   ========================================================== */
:root {
  /* Backgrounds — deep navy */
  --bg:        #030812;
  --surface-1: #060f1e;
  --surface-2: #0a1628;
  --surface-3: #0f1e38;
  --surface-4: #152542;

  /* Blue (primary accent) */
  --blue:        #5b9bd5;
  --blue-light:  #80b8e8;
  --blue-bright: #acd4f5;
  --blue-dim:    #3a6ea8;
  --blue-deep:   #1a4478;

  /* Soft/Pale Gold (luxury) */
  --gold:        #c9a84c;
  --gold-light:  #dab96e;
  --gold-bright: #e8d090;
  --gold-dark:   #9a7820;
  --gold-pale:   rgba(201,168,76,.10);
  --gold-border: rgba(201,168,76,.22);

  /* Text */
  --text:   #e8f0f8;
  --text-2: #9db8d0;
  --text-3: #6a8aaa;

  /* Borders */
  --border:   1px solid rgba(91,155,213,.07);
  --border-s: 1px solid rgba(91,155,213,.14);
  --border-g: 1px solid rgba(201,168,76,.22);

  /* Gradients */
  --g-blue:     linear-gradient(135deg, #1a3860 0%, #2a5fa8 50%, #4a90d8 100%);
  --g-blue-h:   linear-gradient(90deg, #2a5fa8 0%, #60aae8 100%);
  --g-gold:     linear-gradient(135deg, #9a7820 0%, #c9a84c 45%, #e8d090 100%);
  --g-gold-h:   linear-gradient(90deg, #c9a84c 0%, #e8d090 100%);
  --g-mesh:
    radial-gradient(ellipse 70% 50% at 12% 8%,  rgba(30,80,160,.08) 0%, transparent 55%),
    radial-gradient(ellipse 55% 65% at 88% 88%, rgba(201,168,76,.05)  0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 50% 50%, rgba(91,155,213,.03) 0%, transparent 60%);

  /* Shadows */
  --shadow-sm:     0 2px 8px rgba(0,0,0,.55);
  --shadow-md:     0 6px 24px rgba(0,0,0,.65);
  --shadow-lg:     0 12px 48px rgba(0,0,0,.75);
  --shadow-gold:   0 0 30px rgba(201,168,76,.18), 0 4px 20px rgba(0,0,0,.55);
  --shadow-blue:   0 0 24px rgba(91,155,213,.14), 0 4px 20px rgba(0,0,0,.55);
  --shadow-card:   0 1px 0 rgba(255,255,255,.03), 0 8px 36px rgba(0,0,0,.60);

  /* Status */
  --green: #16c980;
  --red:   #f04060;

  /* Fonts */
  --f-display: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
  --f-heading: 'IBM Plex Sans Thai', 'Sarabun', sans-serif;
  --f-body:    'Sarabun', 'IBM Plex Sans Thai', sans-serif;
  --f-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Radii */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 999px;

  /* Transitions */
  --ease:        all .2s cubic-bezier(.4, 0, .2, 1);
  --ease-spring: all .32s cubic-bezier(0, .6, .4, 1);

  /* Layout */
  --header-h: 68px;

  /* Backward-compat aliases */
  --silver:             var(--blue);
  --silver-light:       var(--blue-light);
  --silver-bright:      var(--blue-bright);
  --silver-dim:         var(--blue-dim);
  --silver-deep:        var(--blue-deep);
  --g-silver:           var(--g-blue);
  --g-silver-h:         var(--g-blue-h);
  --color-blue:         var(--blue);
  --color-blue-light:   var(--blue-light);
  --color-text:         var(--text);
  --color-text-muted:   var(--text-2);
  --color-text-dim:     var(--text-3);
  --color-surface2:     var(--surface-2);
  --color-border:       rgba(91,155,213,.07);
  --color-green:        var(--green);
  --color-red:          var(--red);
  --font-heading:       var(--f-heading);
  --font-display:       var(--f-display);
  --font-mono:          var(--f-mono);
  --radius-sm:          var(--r-sm);
  --radius-md:          var(--r-md);
  --radius-lg:          var(--r-lg);
  --transition:         var(--ease);
  --border-1:           rgba(91,155,213,.07);
  --border-2:           rgba(91,155,213,.12);
  --shadow-glow:        0 0 50px rgba(91,155,213,.10);
  --text-muted:         var(--text-2);
  --text-dim:           var(--text-3);
}

/* ==========================================================
   RESET
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(58px + env(safe-area-inset-bottom, 0));
}
/* Fixed mesh background via pseudo-element — avoids iOS Safari backdrop-attachment:fixed bug */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--g-mesh);
  z-index: -1;
  pointer-events: none;
}

a { color: var(--blue-light); text-decoration: none; transition: var(--ease); }
a:hover { color: var(--gold-light); }
img { max-width: 100%; height: auto; display: block; }
ul { list-style: none; }
button { cursor: pointer; font-family: var(--f-body); border: none; background: none; }
svg { display: inline-block; vertical-align: middle; flex-shrink: 0; overflow: visible; max-width: none !important; }

.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--gold); color: var(--bg);
  padding: 8px 16px; z-index: 9999; font-weight: 700;
}
.skip-link:focus { top: 0; }

/* ==========================================================
   LAYOUT
   ========================================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-title {
  font-family: var(--f-heading);
  font-size: clamp(.88rem, 1.4vw, 1.1rem);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.section-title span {
  background: var(--g-blue-h);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
}
.section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--g-gold);
  border-radius: var(--r-pill);
  box-shadow: 0 0 10px rgba(201,168,76,.55);
  flex-shrink: 0;
  -webkit-text-fill-color: initial;
}
.section-title::after { display: none; }

.gold-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(201,168,76,.15) 30%, rgba(201,168,76,.35) 50%, rgba(201,168,76,.15) 70%, transparent);
  margin: 24px 0;
  position: relative;
}
.gold-divider::after {
  content: '◆';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  color: rgba(201,168,76,.5);
  padding: 0 12px;
  font-size: .45rem;
}

.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 26px;
  background: rgba(91,155,213,.04);
  border: var(--border-s);
  color: var(--blue);
  border-radius: var(--r-pill);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ease);
  text-decoration: none;
}
.btn-more:hover {
  background: rgba(201,168,76,.07);
  border-color: var(--gold-border);
  color: var(--gold-light);
}
.section-more { text-align: center; margin-top: 36px; }

.fade-in-section {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.fade-in-section.is-visible { opacity: 1; transform: none; }
.ud-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ==========================================================
   HEADER
   ========================================================== */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(3,8,18,.92);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border-bottom: none;
  transition: background .3s, box-shadow .3s;
  overflow: hidden;
  max-width: 100%;
}
/* Blue pinstripe shimmer */
#site-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(91,155,213,.08);
  z-index: 1;
}
#site-header::before {
  content: '';
  position: absolute;
  bottom: 0; left: -30%;
  width: 30%; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,.0) 10%,
    rgba(201,168,76,.6) 40%,
    rgba(232,208,144,1) 50%,
    rgba(201,168,76,.6) 60%,
    rgba(201,168,76,.0) 90%,
    transparent 100%
  );
  z-index: 2;
  animation: ui432-gold-flash 6s ease-in-out infinite;
  animation-delay: 2s;
}
@keyframes ui432-gold-flash {
  0%    { left: -30%; opacity: 0; }
  5%    { opacity: 1; }
  45%   { left: 100%; opacity: 1; }
  50%   { left: 100%; opacity: 0; }
  100%  { left: 100%; opacity: 0; }
}
#site-header.scrolled {
  background: rgba(2,5,12,.98);
  box-shadow: 0 4px 40px rgba(0,0,0,.8);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 12px;
}

.site-logo a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.site-logo img { height: auto; max-height: 36px; width: auto; object-fit: contain; display: block; }
.logo-text-wrap { display: flex; flex-direction: column; line-height: 1; }
.logo-text {
  font-family: var(--f-display);
  font-size: 1.4rem; font-weight: 700;
  background: linear-gradient(135deg, #1a4a90 0%, #3a80d0 30%, #70b8f8 55%, #c9a84c 80%, #e8d090 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: .06em;
  filter: drop-shadow(0 0 10px rgba(91,155,213,.25));
}
.logo-sub {
  font-size: .46rem; color: rgba(91,155,213,.4);
  letter-spacing: .22em; text-transform: uppercase;
  margin-top: 4px; font-weight: 500;
}

.header-nav { display: flex; align-items: center; gap: 5px; }

.btn-social {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 16px; height: 33px;
  border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; transition: var(--ease);
}
.btn-social svg { display: block; flex-shrink: 0; }
.btn-telegram { background: rgba(35,162,217,.1); color: #5bc8f5; border: 1px solid rgba(35,162,217,.2); }
.btn-telegram:hover { background: rgba(35,162,217,.18); color: #7fd8ff; }
.btn-line { background: #06C755; color: #fff; }
.btn-line:hover { background: #05b34e; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(6,199,85,.35); }
.btn-football {
  background: rgba(91,155,213,.04);
  border: 1px solid rgba(91,155,213,.14);
  color: var(--blue);
}
.btn-football:hover { background: rgba(201,168,76,.07); border-color: rgba(201,168,76,.25); color: var(--gold-light); }
.btn-football-label { display: inline; }
.btn-football span[aria-hidden],
.mobile-football span[aria-hidden] { filter: grayscale(1); -webkit-text-fill-color: initial; }

/* Login — blue ghost */
.btn-login {
  display: inline-flex; align-items: center; gap: 6px;
  height: 33px; padding: 0 18px;
  background: transparent;
  color: var(--blue);
  border: 1px solid rgba(91,155,213,.20);
  border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 600;
  text-decoration: none; transition: var(--ease);
}
.btn-login svg { display: block; flex-shrink: 0; }
.btn-login:hover { background: rgba(91,155,213,.06); color: var(--blue-bright); border-color: rgba(91,155,213,.35); }

/* Register — soft gold */
.btn-register {
  display: inline-flex; align-items: center; gap: 6px;
  height: 33px; padding: 0 20px;
  background: linear-gradient(135deg, #7a5c10 0%, #b8880a 20%, #dab96e 50%, #b8880a 80%, #7a5c10 100%);
  background-size: 200% 100%;
  color: #0d0800; border: none;
  border-radius: var(--r-pill);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .03em;
  box-shadow: 0 2px 14px rgba(201,168,76,.28), inset 0 1px 0 rgba(255,255,255,.18);
  transition: background-position .4s ease, transform .2s, box-shadow .2s;
  text-decoration: none;
}
.btn-register svg { display: block; flex-shrink: 0; }
.btn-register:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(201,168,76,.45), inset 0 1px 0 rgba(255,255,255,.22);
  color: #0d0800;
}

.menu-toggle {
  display: none; flex-direction: column; gap: 5px;
  border: 1px solid rgba(91,155,213,.14); border-radius: var(--r-sm);
  padding: 8px 10px; cursor: pointer; background: rgba(91,155,213,.04);
}
.menu-toggle span { display: block; width: 20px; height: 1.5px; background: var(--blue); border-radius: 2px; transition: var(--ease); }

#main-content { padding-top: var(--header-h); }

/* ==========================================================
   SLIDER
   ========================================================== */
.slideshow-section { background: var(--surface-1); padding: 0; overflow: hidden; }

.slider-box {
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(91,155,213,.08);
}
.slider-box::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 80px;
  background: linear-gradient(transparent, rgba(3,8,18,.5));
  pointer-events: none; z-index: 2;
}

.slider-track {
  position: relative; width: 100%;
  aspect-ratio: 1280 / 393;
  min-height: 120px; overflow: hidden;
  cursor: grab; user-select: none; -webkit-user-select: none;
  background: var(--surface-2);
}
.slider-track:active { cursor: grabbing; }

.slide {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1s ease;
}
.slide.active { opacity: 1; z-index: 1; }

.slide-bg-1 { background: radial-gradient(ellipse at 65% 50%, #0a1838 0%, #030812 70%); }
.slide-bg-2 { background: radial-gradient(ellipse at 35% 50%, #001428 0%, #020508 70%); }
.slide-bg-3 { background: radial-gradient(ellipse at 65% 50%, #0a1020 0%, #030610 70%); }
.slide-bg-4 { background: radial-gradient(ellipse at 50% 50%, #080e1c 0%, #030608 70%); }
.slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; display: block; }

.slider-dots-bar {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 10; pointer-events: none;
  opacity: 0; transition: opacity .25s ease;
}
.slider-box:hover .slider-dots-bar,
.slider-box.dots-visible .slider-dots-bar { opacity: 1; }
.slider-dots {
  display: flex; gap: 7px; align-items: center;
  background: rgba(0,0,0,.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 7px 12px; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.07);
  pointer-events: auto;
}
.slider-dot {
  width: 6px; height: 6px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.28); border: none; cursor: pointer;
  transition: width .3s ease, background .3s ease, box-shadow .3s ease;
  padding: 0; flex-shrink: 0;
}
.slider-dot.active {
  background: var(--gold); width: 22px;
  box-shadow: 0 0 8px rgba(201,168,76,.65);
}

/* ==========================================================
   WITHDRAW FEED
   ========================================================== */
.withdraw-section { background: var(--surface-1); padding: 16px 0 28px; }
.withdraw-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(22,201,128,.05);
  border: 1px solid rgba(22,201,128,.18);
  color: var(--green);
  padding: 4px 12px; border-radius: var(--r-pill);
  font-size: .66rem; font-weight: 700; letter-spacing: .1em;
  margin-bottom: 16px;
}
.live-dot {
  width: 5px; height: 5px;
  background: var(--green); border-radius: 50%;
  animation: ui432-pulse-live 1.5s infinite;
  flex-shrink: 0; box-shadow: 0 0 6px var(--green);
}
@keyframes ui432-pulse-live { 0%,100% { opacity:1; } 50% { opacity:.2; } }

.withdraw-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  transition: opacity .25s ease;
}
.wd-loading { grid-column: 1 / -1; text-align: center; color: var(--text-3); padding: 32px; font-size: .84rem; }

.wd-card {
  display: flex; flex-direction: column;
  background: var(--surface-2);
  border: 1px solid rgba(91,155,213,.09);
  border-radius: var(--r-lg);
  overflow: hidden;
  padding: 12px 14px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  animation: ui432-wd-in .4s ease both;
  position: relative; min-width: 0;
}
.wd-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
@keyframes ui432-wd-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.wd-g-deco { display: none; }

.wd-g-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px; position: relative; z-index: 1;
}
.wd-g-bank { display: flex; align-items: center; gap: 8px; }
.wd-g-logo-wrap {
  width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid;
}
.wd-g-logo {
  width: 20px; height: 20px; object-fit: contain; display: block;
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.wd-g-bank-info { display: flex; flex-direction: column; gap: 4px; }
.wd-g-bank-label {
  font-size: .74rem; font-weight: 700; color: var(--blue-light);
  letter-spacing: .06em; text-transform: uppercase; line-height: 1;
}
.wd-g-bank-name { font-size: .68rem; color: var(--text-2); line-height: 1; }
.wd-g-time {
  font-size: .58rem; color: var(--text-3);
  font-family: var(--f-mono); white-space: nowrap; flex-shrink: 0;
}
.wd-g-amount {
  font-family: var(--f-mono); font-size: 1.15rem; font-weight: 800;
  color: var(--green); line-height: 1;
  margin-bottom: 8px; position: relative; z-index: 1;
}
.wd-g-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; padding-top: 8px;
  border-top: 1px solid rgba(91,155,213,.07);
  position: relative; z-index: 1;
}
.wd-g-phone {
  font-family: var(--f-mono); font-size: .76rem; color: var(--text-2);
  font-weight: 500; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wd-g-status {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: .6rem; font-weight: 700; color: var(--green);
  background: rgba(22,201,128,.08);
  padding: 2px 8px; border-radius: var(--r-pill);
  border: 1px solid rgba(22,201,128,.18);
  white-space: nowrap; flex-shrink: 0;
}
.wd-g-status svg { display: block; flex-shrink: 0; }

.wd-strip,.wd-bank-col,.wd-info-col,.wd-card-body,.wd-bank-icon { display: none; }

.wd-carousel-wrap { position: relative; overflow: hidden; }
@media (max-width: 991px) {
  .withdraw-cards-grid { display: flex !important; flex-wrap: nowrap; gap: 10px; transition: transform .55s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
  .wd-card { flex: 0 0 calc(100% - 24px); min-width: 0; max-width: 420px; }
}
@media (max-width: 480px) { .wd-card { flex: 0 0 calc(100% - 16px); max-width: 100%; } }

/* ==========================================================
   GAMES
   ========================================================== */
.games-section { background: var(--bg); padding: 20px 0 36px; }

.games-filter { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--r-pill);
  background: var(--surface-2); border: var(--border);
  color: var(--text-2); font-size: .74rem; font-weight: 600;
  cursor: pointer; transition: var(--ease);
}
.filter-btn svg { display: block; flex-shrink: 0; }
.filter-btn:hover { background: var(--surface-3); color: var(--blue); border-color: rgba(91,155,213,.18); }
.filter-btn.active {
  background: var(--g-gold);
  color: #0d0800; border-color: transparent;
  box-shadow: 0 3px 18px rgba(201,168,76,.28);
  font-weight: 700;
}
.filter-btn.active svg { color: #0d0800; }

.games-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  overflow: hidden;
}

.game-card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  border: var(--border);
  cursor: pointer;
  transition: var(--ease);
  min-width: 0; width: 100%;
}
.game-card:hover {
  border-color: var(--gold-border);
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-gold);
  z-index: 1;
}

.game-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.game-card:hover .game-thumb-img { transform: scale(1.08); }
.game-thumb-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.game-placeholder-name { font-size: .58rem; color: var(--text-3); text-align: center; padding: 0 6px; line-height: 1.3; }

.game-overlay {
  position: absolute; inset: 0;
  background: rgba(3,8,18,.48);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .22s ease;
}
.game-card:hover .game-overlay { opacity: 1; }

.btn-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  background: rgba(3,8,18,.55);
  color: var(--gold-light);
  border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(212,168,67,.75);
  transform: scale(.8);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow: 0 0 24px rgba(201,168,76,.3), 0 0 0 6px rgba(201,168,76,.07);
  text-decoration: none; flex-shrink: 0;
}
.btn-play svg { display: block; flex-shrink: 0; }
.game-card:hover .btn-play { transform: scale(1); box-shadow: 0 0 36px rgba(201,168,76,.55), 0 0 0 8px rgba(201,168,76,.12); border-color: rgba(232,208,144,.95); }

.game-name {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 6px 6px 5px;
  background: linear-gradient(transparent, rgba(3,8,18,.92));
  font-size: .6rem; color: rgba(232,240,248,.93);
  text-align: center; line-height: 1.25;
}

/* ==========================================================
   REVIEWS
   ========================================================== */
.reviews-section { background: var(--surface-1); padding: 24px 0 40px; }

@keyframes ui432-spb-arc-in {
  0%   { stroke-dashoffset: 289.0; opacity: 0; }
  8%   { opacity: 1; }
  78%  { stroke-dashoffset: 28.9; }
  100% { stroke-dashoffset: 28.9; }
}
@keyframes ui432-spb-arc-shimmer {
  0%,100% { opacity: .9; filter: drop-shadow(0 0 2px rgba(201,168,76,.4)); }
  50%      { opacity: 1;  filter: drop-shadow(0 0 8px rgba(201,168,76,.95)); }
}
@keyframes ui432-spb-ring-pulse { 0%,100% { opacity:.12; } 50% { opacity:.32; } }
@keyframes ui432-spb-star-glow {
  0%,100% { filter: drop-shadow(0 0 2px rgba(201,168,76,.6)); opacity: 1; }
  50%      { filter: drop-shadow(0 0 9px rgba(201,168,76,1));  opacity: .6; }
}
.spb-arc { animation: ui432-spb-arc-in 2s cubic-bezier(.4,0,.2,1) forwards, ui432-spb-arc-shimmer 3s ease-in-out 2.3s infinite; }
.spb-ring-outer { animation: ui432-spb-ring-pulse 3s ease-in-out infinite; }
.spb-star-1 { animation: ui432-spb-star-glow 2.2s ease-in-out infinite 0.00s; }
.spb-star-2 { animation: ui432-spb-star-glow 2.2s ease-in-out infinite 0.18s; }
.spb-star-3 { animation: ui432-spb-star-glow 2.2s ease-in-out infinite 0.36s; }
.spb-star-4 { animation: ui432-spb-star-glow 2.2s ease-in-out infinite 0.54s; }
.spb-star-5 { animation: ui432-spb-star-glow 2.2s ease-in-out infinite 0.72s; }

.spb-wrap {
  display: flex; align-items: center;
  background: linear-gradient(90deg, rgba(30,80,160,.07) 0%, rgba(91,155,213,.02) 30%, transparent 100%);
  border: 1.5px solid rgba(91,155,213,.18);
  border-radius: var(--r-pill);
  margin-bottom: 36px;
  overflow: hidden;
  padding: 8px 32px 8px 8px;
}
.spb-score { flex-shrink: 0; width: 180px; height: 180px; position: relative; }
.spb-circle-wrap { position: relative; width: 100%; height: 100%; }
.spb-circle-svg { width: 100%; height: 100%; display: block; }
.spb-circle-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 5px;
}
.spb-num { font-family: var(--f-mono); font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--text); }
.spb-stars { display: flex; gap: 3px; color: var(--gold); }
.spb-stars svg { display: block; }
.spb-score-label { font-size: .58rem; color: rgba(201,168,76,.55); white-space: nowrap; letter-spacing: .06em; }
.spb-right { flex: 1; padding-left: 28px; min-width: 0; }
.spb-headline { font-family: var(--f-heading); font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 14px; line-height: 1.3; }
.spb-tagline { display: none; }
.spb-icon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spb-icon-item { display: flex; align-items: center; gap: 10px; }
.spb-icon-circle {
  width: 32px; height: 32px; min-width: 32px; border-radius: 50%;
  background: rgba(201,168,76,.08); border: 1px solid rgba(201,168,76,.22);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); flex-shrink: 0;
}
.spb-icon-circle svg { display: block; }
.spb-icon-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.spb-icon-label { font-size: .78rem; font-weight: 700; color: var(--text); line-height: 1.2; white-space: nowrap; }
.spb-icon-sub { font-size: .64rem; color: var(--text-3); line-height: 1; }
.spb-sep,.spb-center,.spb-badges,.spb-badge,.spb-score-eyebrow,.spb-num-denom { display: none !important; }
.reviews-trust-bar,.reviews-stats,.review-stat-item,.review-stat-num,.review-stars-row,.review-stat-label,.rst-icon,.rst-value,.rst-stars,.rst-label,.rtb-item,.rtb-left,.rtb-right,.rtb-divider { display: none !important; }

@media (max-width: 767px) {
  .spb-wrap { flex-direction: column; border-radius: var(--r-xl); padding: 0; background: rgba(91,155,213,.04); }
  .spb-score { width: 150px; height: 150px; margin: 24px auto 0; }
  .spb-headline { text-align: center; padding: 14px 20px 0; margin-bottom: 14px; }
  .spb-right { padding: 0 20px 20px; width: 100%; }
  .spb-icon-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}

.reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.review-card {
  background: var(--surface-2);
  border: var(--border);
  border-radius: var(--r-xl);
  padding: 18px 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition: var(--ease);
  animation: ui432-rv-in .45s ease both;
}
.review-card:hover { border-color: var(--gold-border); transform: translateY(-4px); box-shadow: var(--shadow-gold); }
@keyframes ui432-rv-in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

.rv3-header { display: flex; align-items: center; gap: 12px; }
.rv3-avatar {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative;
}
.rv3-avatar img { display: block; width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); }
.rv3-verified {
  position: absolute; bottom: -3px; right: -3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--green); border: 2px solid var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.rv3-verified svg { display: block; }
.rv3-meta { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.rv3-phone { font-family: var(--f-mono); font-size: .82rem; font-weight: 700; color: var(--text); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv3-stars { display: flex; gap: 2px; }
.rv3-stars svg { display: block; }
.rv3-time { font-size: .58rem; color: var(--text-3); font-family: var(--f-mono); white-space: nowrap; flex-shrink: 0; align-self: flex-start; }
.rv3-text {
  font-size: .85rem; color: rgba(232,240,248,.93); line-height: 1.72; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0;
}
.rv3-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 12px; border-top: 1px solid rgba(91,155,213,.06); margin-top: auto;
}
.rv3-label { font-size: .62rem; color: var(--text-3); font-weight: 500; letter-spacing: .04em; }
.rv3-amount { font-family: var(--f-mono); font-size: .96rem; font-weight: 800; color: var(--green); text-shadow: 0 0 14px rgba(22,201,128,.28); white-space: nowrap; }

/* ==========================================================
   ARTICLES
   ========================================================== */
.articles-section { background: var(--bg); padding: 20px 0 32px; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.article-card { background: var(--surface-2); border: var(--border); border-radius: var(--r-xl); overflow: hidden; transition: var(--ease); display: flex; flex-direction: column; }
.article-card:hover { border-color: var(--gold-border); transform: translateY(-4px); box-shadow: var(--shadow-gold); }
.article-thumb-wrap { aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; background: var(--surface-3); }
.article-thumb-wrap svg { display: block; opacity: .15; color: var(--blue); }
.article-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.article-card:hover .article-thumb-wrap img { transform: scale(1.05); }
.article-body { padding: 16px 18px; display: flex; flex-direction: column; flex: 1; }
.article-cat { display: inline-block; background: var(--gold-pale); color: var(--gold); font-size: .58rem; font-weight: 700; padding: 2px 11px; border-radius: var(--r-pill); margin-bottom: 10px; letter-spacing: .08em; text-transform: uppercase; border: var(--border-g); }
.article-title { font-family: var(--f-heading); font-size: .92rem; font-weight: 600; color: var(--text); line-height: 1.45; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-title a { color: inherit; }
.article-title a:hover { color: var(--gold-light); }
.article-excerpt { font-size: .78rem; color: var(--text-2); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; flex: 1; }
.article-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: var(--border); }
.article-date { display: inline-flex; align-items: center; gap: 4px; font-size: .68rem; color: var(--text-3); }
.article-date svg { display: block; flex-shrink: 0; }
.article-read { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: var(--gold); transition: var(--ease); }
.article-read svg { display: block; flex-shrink: 0; transition: transform .2s; }
.article-card:hover .article-read svg { transform: translateX(3px); }

/* ==========================================================
   MAINPOST
   ========================================================== */
.mainpost-section { background: var(--bg); padding: 20px 0 24px; }
.mainpost-hero { margin-bottom: 30px; }
.mainpost-h1 { font-family: var(--f-heading); font-size: clamp(1.05rem, 2vw, 1.45rem); font-weight: 700; line-height: 1.4; color: var(--text); margin-bottom: 14px; }
.mainpost-lead { font-size: .9rem; color: var(--text-2); line-height: 1.85; max-width: 860px; }
.mainpost-lead strong { color: var(--blue-light); -webkit-text-fill-color: var(--blue-light); }
.mainpost-toc { background: rgba(201,168,76,.03); border: var(--border-g); border-left: 3px solid var(--gold); border-radius: var(--r-lg); padding: 18px 22px; margin-bottom: 36px; }
.mainpost-toc-title { display: flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 700; color: var(--gold); margin-bottom: 12px; letter-spacing: .06em; text-transform: uppercase; }
.mainpost-toc-title svg { display: block; flex-shrink: 0; }
.mainpost-toc-list { padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
.mainpost-toc-list li { font-size: .8rem; }
.mainpost-toc-list a { color: var(--text-2); transition: var(--ease); }
.mainpost-toc-list a:hover { color: var(--gold-light); }
.mainpost-body h2 { font-family: var(--f-heading); font-size: clamp(1.02rem, 1.7vw, 1.28rem); font-weight: 700; color: var(--blue-light); margin: 44px 0 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(91,155,213,.10); scroll-margin-top: 82px; }
.mainpost-body h3 { font-family: var(--f-heading); font-size: 1rem; font-weight: 600; color: var(--blue); margin: 26px 0 10px; display: flex; align-items: center; gap: 8px; }
.mainpost-body h3::before { content: '\25B8'; color: var(--gold-dark); font-size: .76rem; }
.mainpost-body p { font-size: .93rem; color: rgba(232,240,248,.92); line-height: 1.9; margin-bottom: 16px; }
.mainpost-body strong { color: var(--blue-light); -webkit-text-fill-color: var(--blue-light); }
.mainpost-keypoints { background: rgba(255,255,255,.015); border: var(--border-s); border-radius: var(--r-lg); padding: 16px 20px; margin: 18px 0; }
.mainpost-keypoints-title { font-size: .68rem; font-weight: 700; color: var(--blue); margin-bottom: 10px; letter-spacing: .1em; text-transform: uppercase; }
.mainpost-keypoints ul { padding-left: 0; display: flex; flex-direction: column; gap: 7px; }
.mainpost-keypoints li { font-size: .82rem; color: var(--text-2); display: flex; align-items: flex-start; gap: 8px; }
.mainpost-keypoints li::before { content: '\25C6'; color: var(--gold-dark); font-size: .5rem; margin-top: 5px; flex-shrink: 0; }
.mainpost-checklist { display: flex; flex-direction: column; gap: 8px; margin: 18px 0; }
.mainpost-checklist-title { font-size: .68rem; font-weight: 700; color: var(--blue); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.mainpost-check-item { display: flex; align-items: flex-start; gap: 10px; background: rgba(255,255,255,.015); border: var(--border); border-radius: var(--r-md); padding: 11px 14px; font-size: .82rem; color: rgba(232,240,248,.90); line-height: 1.6; transition: var(--ease); }
.mainpost-check-item:hover { border-color: var(--gold-border); background: var(--gold-pale); }
.mainpost-check-item strong { color: var(--blue-light); -webkit-text-fill-color: var(--blue-light); display: block; margin-bottom: 2px; }
.mainpost-table-wrap { overflow-x: auto; margin: 22px 0; border-radius: var(--r-lg); border: var(--border); }
.mainpost-table { width: 100%; border-collapse: collapse; min-width: 500px; }
.mainpost-table th { background: rgba(91,155,213,.04); color: var(--blue); font-size: .66rem; font-weight: 700; padding: 11px 16px; text-align: left; border-bottom: var(--border); letter-spacing: .07em; text-transform: uppercase; }
.mainpost-table td { padding: 11px 16px; font-size: .8rem; color: rgba(232,240,248,.88); border-bottom: var(--border); }
.mainpost-table tr:last-child td { border-bottom: none; }
.mainpost-table tr:hover td { background: rgba(91,155,213,.02); }
.mainpost-table .highlight-col { background: var(--gold-pale); border-left: 2px solid var(--gold-border); border-right: 2px solid var(--gold-border); }
.mainpost-table .highlight-col strong { color: var(--gold-light); -webkit-text-fill-color: var(--gold-light); }
.mainpost-steps { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; }
.mainpost-step { display: flex; align-items: flex-start; gap: 13px; }
.step-num { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--g-gold); color: #0d0800; font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 2px; box-shadow: 0 0 12px rgba(201,168,76,.35); }
.mainpost-step > div { font-size: .83rem; color: rgba(232,240,248,.90); line-height: 1.68; }
.mainpost-step strong { color: var(--text); -webkit-text-fill-color: var(--text); }
.mainpost-tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 18px 0; }
.mainpost-tip { background: var(--surface-2); border: var(--border); border-radius: var(--r-lg); padding: 16px 14px; transition: var(--ease); }
.mainpost-tip:hover { border-color: var(--gold-border); background: var(--gold-pale); }
.mainpost-tip strong { display: block; font-size: .79rem; color: var(--blue-light); -webkit-text-fill-color: var(--blue-light); margin-bottom: 6px; font-weight: 700; }
.mainpost-tip p { font-size: .74rem; color: var(--text-2); line-height: 1.65; margin: 0; }
.mainpost-security-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.mainpost-security-item { background: var(--surface-2); border: var(--border); border-radius: var(--r-lg); padding: 16px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: var(--ease); }
.mainpost-security-item:hover { border-color: var(--gold-border); }
.mainpost-security-item strong { font-size: .74rem; color: var(--blue); -webkit-text-fill-color: var(--blue); font-weight: 700; }
.mainpost-security-item p { font-size: .69rem; color: var(--text-2); margin: 0; }
.mainpost-contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.mainpost-contact-item { background: var(--surface-2); border: var(--border); border-radius: var(--r-lg); padding: 16px 14px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 1.2rem; transition: var(--ease); }
.mainpost-contact-item:hover { border-color: var(--gold-border); }
.mainpost-contact-item strong { font-size: .76rem; color: var(--text); -webkit-text-fill-color: var(--text); }
.mainpost-contact-item small { font-size: .66rem; color: var(--text-2); }
.mainpost-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0; }
.mainpost-cta-btns .btn-register,
.mainpost-cta-btns .btn-login { padding: 12px 30px; height: auto; font-size: .85rem; border-radius: var(--r-md); }
.mainpost-faq { display: flex; flex-direction: column; gap: 7px; margin-top: 18px; }
.mainpost-faq-item { background: var(--surface-2); border: var(--border); border-radius: var(--r-lg); overflow: hidden; transition: var(--ease); }
.mainpost-faq-item:hover { border-color: var(--gold-border); }
.mainpost-faq-q { padding: 14px 18px; font-size: .85rem; font-weight: 600; color: var(--blue-light); cursor: pointer; display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
.mainpost-faq-q::before { content: 'Q'; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--gold-pale); border: var(--border-g); color: var(--gold); font-size: .64rem; font-weight: 900; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.mainpost-faq-a { padding: 0 18px 14px calc(18px + 32px); font-size: .82rem; color: rgba(232,240,248,.90); line-height: 1.78; }
.mainpost-gold-check { flex-shrink: 0; font-size: 1rem; font-weight: 900; color: var(--gold); line-height: 1; margin-top: 2px; }
.mainpost-article-img { display: block; width: 100%; height: auto; border-radius: var(--r-xl); margin: 24px 0; box-shadow: var(--shadow-md), 0 0 0 1px rgba(201,168,76,.07); }
.mainpost-table-note { font-size: .7rem; color: var(--text-2); padding: 10px 16px; border-top: var(--border); font-style: italic; line-height: 1.6; margin: 0; }
.mainpost-blockquote { border-left: 3px solid var(--gold-dark); background: var(--gold-pale); padding: 14px 18px; border-radius: 0 var(--r-md) var(--r-md) 0; font-style: italic; color: var(--text-2); margin: 18px 0; font-size: .9rem; line-height: 1.7; }

/* ==========================================================
   FOOTER CTA STRIP
   ========================================================== */
.footer-cta-strip {
  background:
    linear-gradient(180deg, rgba(0,8,28,.0) 0%, rgba(0,8,28,.7) 100%),
    linear-gradient(135deg, #020810 0%, #060f20 40%, #050c1a 60%, #030810 100%);
  border-top: 1px solid rgba(91,155,213,.18);
  padding: 40px 0;
  position: relative;
  overflow: hidden;
}
.footer-cta-strip::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 20% 50%, rgba(30,80,160,.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 80% at 80% 50%, rgba(201,168,76,.03) 0%, transparent 60%);
  pointer-events: none;
}
.footer-cta-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; position: relative; z-index: 1;
}
.footer-cta-copy { flex: 1; min-width: 0; }
.footer-cta-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .62rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 8px; opacity: .8;
}
.footer-cta-eyebrow svg { display: block; flex-shrink: 0; }
.footer-cta-heading {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 700; color: var(--text);
  line-height: 1.25; margin-bottom: 8px;
}
.footer-cta-brand {
  background: linear-gradient(135deg, #1a4a90 0%, #3a80d0 40%, #70b8f8 60%, #c9a84c 80%, #e8d090 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.footer-cta-sub { font-size: .78rem; color: rgba(200,218,235,.82); }
.footer-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.footer-cta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 28px; border-radius: var(--r-sm);
  font-size: .82rem; font-weight: 700;
  text-decoration: none; transition: var(--ease);
  white-space: nowrap; letter-spacing: .03em;
  cursor: pointer;
}
.footer-cta-btn svg { display: block; flex-shrink: 0; }
.footer-cta-btn-inner { display: flex; align-items: center; gap: 8px; }
.footer-cta-btn--gold {
  background: linear-gradient(135deg, #7a5c10 0%, #b8880a 20%, #dab96e 50%, #b8880a 80%, #7a5c10 100%);
  background-size: 200% 100%;
  color: #0d0800;
  box-shadow: 0 4px 20px rgba(201,168,76,.35), inset 0 1px 0 rgba(255,255,255,.22);
}
.footer-cta-btn--gold:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 8px 30px rgba(201,168,76,.5); color: #0d0800; }
.footer-cta-btn--line { background: #06C755; color: #fff; box-shadow: 0 4px 16px rgba(6,199,85,.3); }
.footer-cta-btn--line:hover { background: #05b34e; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(6,199,85,.4); color: #fff; }

@media (max-width: 767px) {
  .footer-cta-inner { flex-direction: column; align-items: flex-start; }
  .footer-cta-btns { width: 100%; }
  .footer-cta-btn { flex: 1; justify-content: center; }
}

/* ==========================================================
   FOOTER BODY
   ========================================================== */
.footer-body {
  background: linear-gradient(180deg, #050d1e 0%, #030810 100%);
  padding: 52px 0 36px;
  position: relative;
}
.footer-body::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(201,168,76,.0) 10%,
    rgba(201,168,76,.55) 35%, rgba(232,208,144,.9) 50%,
    rgba(201,168,76,.55) 65%, rgba(201,168,76,.0) 90%,
    transparent 100%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.4fr;
  gap: 48px;
}
.footer-brand-col { display: flex; flex-direction: column; gap: 0; }
.footer-logo-wrap { margin-bottom: 14px; }
.footer-logo-link { display: block; text-decoration: none; }
.footer-logo-wrap img { max-height: 36px !important; width: auto !important; height: auto !important; display: block; }
.footer-logo-text-wrap { display: flex; flex-direction: column; gap: 3px; }
.footer-logo-text {
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 700;
  background: linear-gradient(135deg, #1a4a90 0%, #3a80d0 30%, #70b8f8 55%, #c9a84c 80%, #e8d090 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: .07em; display: block;
}
.footer-logo-sub { font-size: .5rem; color: rgba(200,218,235,.55); letter-spacing: .18em; text-transform: uppercase; }
.footer-brand-desc { font-size: .74rem; color: rgba(200,218,235,.80); line-height: 1.85; margin-bottom: 18px; }
.footer-line-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: rgba(6,199,85,.08);
  border: 1px solid rgba(6,199,85,.22);
  color: #06C755; font-size: .76rem; font-weight: 600;
  border-radius: var(--r-sm); text-decoration: none;
  transition: var(--ease); margin-bottom: 18px; width: fit-content;
}
.footer-line-btn svg { display: block; flex-shrink: 0; }
.footer-line-btn:hover { background: rgba(6,199,85,.15); border-color: rgba(6,199,85,.4); }
.footer-trust-row { display: flex; flex-wrap: wrap; gap: 7px; }
.footer-trust-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: .6rem; font-weight: 700; letter-spacing: .05em;
}
.footer-trust-badge svg { display: block; flex-shrink: 0; }
.footer-trust-badge--18 { background: rgba(240,64,96,.07); border: 1px solid rgba(240,64,96,.2); color: #f04060; }
.footer-trust-badge--ssl { background: rgba(22,201,128,.06); border: 1px solid rgba(22,201,128,.18); color: var(--green); }
.footer-trust-badge--auto { background: var(--gold-pale); border: var(--border-g); color: var(--gold); }
.footer-nav-col { display: flex; flex-direction: column; }
.footer-col-head {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-heading); font-size: .7rem; font-weight: 700;
  color: rgba(232,240,248,.92); letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(201,168,76,.18);
}
.footer-col-head svg { display: block; flex-shrink: 0; color: var(--gold); opacity: .85; }
.footer-col-head-line { display: none; }
.footer-nav-links { display: flex; flex-direction: column; gap: 8px; }
.footer-nav-links a {
  display: inline-flex; align-items: center;
  font-size: .78rem; color: rgba(200,218,235,.82);
  text-decoration: none; transition: var(--ease);
  padding: 2px 0 2px 14px;
  position: relative;
}
.footer-nav-links a::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(201,168,76,.3); transition: var(--ease);
}
.footer-nav-links a:hover { color: var(--gold-light); padding-left: 18px; }
.footer-nav-links a:hover::before { background: var(--gold); box-shadow: 0 0 6px rgba(201,168,76,.6); }
.footer-bank-col { display: flex; flex-direction: column; }
.footer-bank-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 18px; }
.footer-bank-item {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: var(--border);
  border-radius: 50%; padding: 7px; transition: var(--ease); flex-shrink: 0;
}
.footer-bank-item:hover { border-color: var(--gold-border); background: var(--gold-pale); }
.footer-bank-item img { width: 22px; height: 22px; object-fit: contain; filter: brightness(0) invert(1); opacity: .78; transition: opacity .2s; }
.footer-bank-item:hover img { opacity: 1; }
.footer-game-cats { display: flex; flex-wrap: wrap; gap: 6px; }
.footer-game-cat {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .65rem; color: rgba(200,218,235,.78);
  background: var(--surface-2); border: var(--border);
  padding: 3px 9px; border-radius: var(--r-pill); transition: var(--ease);
}
.footer-game-cat:hover { color: var(--gold); border-color: var(--gold-border); }
.footer-bottom-bar {
  background: #020508;
  border-top: 1px solid rgba(201,168,76,.10);
  padding: 16px 0;
}
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.footer-copy { font-size: .68rem; color: rgba(200,218,235,.62); }
.footer-copy a { color: rgba(200,218,235,.62); text-decoration: none; }
.footer-copy a:hover { color: var(--gold-light); }
.footer-legal-links { display: flex; gap: 14px; flex-wrap: wrap; }
.footer-legal-links a { font-size: .68rem; color: rgba(200,218,235,.62); text-decoration: none; transition: var(--ease); }
.footer-legal-links a:hover { color: var(--gold-light); }

@media (max-width: 1199px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; } }
@media (max-width: 991px) {
  /* brand บนสุด (full width) → nav-col ซ้าย/ขวา → bank ล่างสุด (full width) */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-bank-col  { grid-column: 1 / -1; }
  /* bank icons: flex centered แทน grid ชิดซ้าย */
  .footer-bank-grid {
    display: flex; flex-wrap: wrap;
    justify-content: center; gap: 20px;
  }
}
@media (max-width: 767px) {
  .footer-grid { gap: 24px; }
  .footer-bank-grid {
    display: grid;
    grid-template-columns: repeat(4, 44px);
    justify-content: center;
    gap: 20px;
  }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .footer-legal-links { justify-content: center; }
}

/* ==========================================================
   TOAST
   ========================================================== */
.toast-container { position: fixed; bottom: 82px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { background: rgba(6,15,30,.97); border: var(--border-g); border-radius: var(--r-lg); padding: 11px 14px; display: flex; align-items: center; gap: 10px; font-size: .77rem; max-width: 270px; box-shadow: var(--shadow-gold); animation: ui432-toast-in .28s cubic-bezier(0,.55,.45,1) both; backdrop-filter: blur(16px); }
.toast-icon { color: var(--gold); display: flex; flex-shrink: 0; }
.toast-icon svg { display: block; }
.toast-amount { color: var(--green); font-weight: 700; font-family: var(--f-mono); }
@keyframes ui432-toast-in { from { opacity:0; transform:translateX(20px) scale(.96); } to { opacity:1; transform:none; } }

/* ==========================================================
   SCROLLBAR
   ========================================================== */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(91,155,213,.3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ==========================================================
   SINGLE POST
   ========================================================== */
.post-content { font-size: .92rem; line-height: 1.85; color: var(--text); }
.post-content h2 { font-family: var(--f-heading); color: var(--blue-light); margin: 28px 0 12px; font-size: 1.15rem; font-weight: 700; }
.post-content h3 { font-family: var(--f-heading); color: var(--blue); margin: 20px 0 10px; font-size: .98rem; font-weight: 600; }
.post-content p { margin-bottom: 16px; }
.post-content ul, .post-content ol { margin: 0 0 16px 22px; }
.post-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.post-content a:hover { color: var(--gold-light); }
.post-content img { border-radius: var(--r-lg); }
.sp-hero { background: var(--surface-1); border-bottom: var(--border); padding: 32px 0 28px; }
.sp-hero-inner { max-width: 780px; }
.sp-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-3); margin-bottom: 12px; flex-wrap: wrap; }
.sp-breadcrumb a { color: var(--text-3); }
.sp-breadcrumb a:hover { color: var(--gold); }
.sp-breadcrumb span { color: var(--text-3); opacity: .5; }
.sp-cat-badge { display: inline-flex; background: var(--gold-pale); border: var(--border-g); color: var(--gold); font-size: .6rem; font-weight: 700; padding: 3px 12px; border-radius: var(--r-pill); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px; }
.sp-title { font-family: var(--f-heading); font-size: clamp(1.15rem, 2.5vw, 1.6rem); font-weight: 700; color: var(--text); line-height: 1.35; margin-bottom: 14px; }
.sp-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sp-meta-item { display: flex; align-items: center; gap: 5px; font-size: .72rem; color: var(--text-3); }
.sp-meta-item svg { display: block; flex-shrink: 0; }
.sp-content-wrap { max-width: 780px; margin: 32px auto 0; }
.sp-cover { border-radius: var(--r-xl); overflow: hidden; margin-bottom: 28px; box-shadow: var(--shadow-md); }
.sp-cover img { width: 100%; display: block; }
.sp-entry { font-size: .93rem; line-height: 1.9; color: rgba(232,240,248,.78); }
.sp-entry h2 { font-family: var(--f-heading); color: var(--blue-light); font-size: 1.15rem; font-weight: 700; margin: 28px 0 12px; padding-bottom: 8px; border-bottom: var(--border); }
.sp-entry h3 { font-family: var(--f-heading); color: var(--blue); font-size: 1rem; font-weight: 600; margin: 20px 0 10px; }
.sp-entry p { margin-bottom: 14px; }
.sp-entry strong { color: var(--blue-light); -webkit-text-fill-color: var(--blue-light); }
.sp-entry a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.sp-entry a:hover { color: var(--gold-light); }
.sp-entry img { border-radius: var(--r-lg); margin: 18px 0; box-shadow: var(--shadow-md); }
.sp-entry ul, .sp-entry ol { padding-left: 20px; margin-bottom: 14px; }
.sp-entry li { font-size: .9rem; color: rgba(232,240,248,.75); line-height: 1.72; margin-bottom: 4px; }
.sp-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 24px 0; padding-top: 20px; border-top: var(--border); }
.sp-tags-label { font-size: .72rem; color: var(--text-3); font-weight: 600; }
.sp-tag { display: inline-flex; background: var(--surface-3); border: var(--border); color: var(--text-2); font-size: .69rem; padding: 3px 10px; border-radius: var(--r-pill); transition: var(--ease); }
.sp-tag:hover { border-color: var(--gold-border); color: var(--gold); }
.sp-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 24px 0; padding-top: 20px; border-top: var(--border); }
.sp-share-label { font-size: .72rem; color: var(--text-3); font-weight: 600; }
.sp-share-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--r-pill); font-size: .75rem; font-weight: 600; text-decoration: none; transition: var(--ease); border: var(--border); color: var(--text-2); }
.sp-share-btn:hover { border-color: var(--gold-border); color: var(--gold); }

/* ==========================================================
   PROMOTIONS
   ========================================================== */
.promo-hero { background: var(--surface-1); border-bottom: var(--border); padding: 16px 0 14px; }
.promo-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--gold-pale); border: var(--border-g); border-radius: var(--r-pill); padding: 4px 12px; font-size: .65rem; font-weight: 700; color: var(--gold); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 10px; }
.promo-hero-title { font-family: var(--f-heading); font-size: clamp(1.1rem, 2.4vw, 1.65rem); font-weight: 700; background: var(--g-gold-h); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.35; margin-bottom: 6px; }
.promo-hero-sub { font-size: .82rem; color: var(--text-2); }
.promo-body { padding: 28px 0 52px; }
.promo-content-wrap { max-width: 900px; margin: 0 auto; }
.promo-cover-img { border-radius: var(--r-lg); overflow: hidden; margin-bottom: 28px; box-shadow: var(--shadow-card); }
.promo-cover-img img { width: 100%; height: auto; display: block; }
.promo-entry { font-size: .93rem; line-height: 1.9; color: rgba(255,255,255,.8); margin-bottom: 36px; }
.promo-entry h2 { font-family: var(--f-heading); font-size: clamp(1.02rem, 1.7vw, 1.28rem); font-weight: 700; background: var(--g-gold-h); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: var(--border); }
.promo-entry h3 { font-family: var(--f-heading); font-size: 1rem; font-weight: 700; color: var(--gold-light); margin: 22px 0 8px; }
.promo-entry p { margin-bottom: 14px; }
.promo-entry a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.promo-entry a:hover { color: var(--gold-light); }
.promo-entry strong { color: var(--gold-light); -webkit-text-fill-color: var(--gold-light); }
.promo-entry ul, .promo-entry ol { padding-left: 20px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.promo-entry li { font-size: .9rem; color: rgba(255,255,255,.75); line-height: 1.72; }
.promo-entry blockquote { border-left: 3px solid var(--gold-dark); background: var(--gold-pale); padding: 13px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 18px 0; font-style: italic; color: var(--text-2); }
.promo-entry img { border-radius: var(--r-lg); width: 100%; height: auto; margin: 18px 0; box-shadow: var(--shadow-md); }
.promo-cta { background: var(--gold-pale); border: var(--border-g); border-radius: var(--r-xl); padding: 26px 30px; }
.promo-cta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.promo-cta-title { font-family: var(--f-heading); font-size: 1.1rem; font-weight: 700; background: var(--g-gold-h); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 5px; }
.promo-cta-desc { font-size: .82rem; color: var(--text-2); }
.promo-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.ud-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: .72rem; color: var(--text-3); margin-bottom: 10px; }
.ud-breadcrumb a { color: var(--text-3); }
.ud-breadcrumb a:hover { color: var(--gold); }

/* ==========================================================
   CASINO STICKY BOTTOM NAV
   ========================================================== */
.sticky-bottom-nav { all: unset; }
.sbn-item, .sbn-register, .sbn-center-icon, .sbn-icon, .sbn-label { all: unset; }

.casino-nav {
  display: flex;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 1100;
  height: 58px;
  background: rgba(2,5,12,.98);
  backdrop-filter: blur(30px) saturate(2);
  -webkit-backdrop-filter: blur(30px) saturate(2);
  align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-sizing: border-box;
  max-width: 100vw;
  border: none;
}
.casino-nav::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,168,76,.0) 5%,
    rgba(201,168,76,.6) 30%,
    rgba(232,208,144,.95) 50%,
    rgba(201,168,76,.6) 70%,
    rgba(201,168,76,.0) 95%,
    transparent 100%
  );
}
.casino-nav::after {
  content: '';
  position: absolute; top: -12px; left: 0; right: 0; height: 12px;
  background: linear-gradient(transparent, rgba(201,168,76,.04));
  pointer-events: none;
}

body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)); }

.casino-nav-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: rgba(200,218,238,.78);
  font-size: .64rem; font-weight: 600; letter-spacing: .03em;
  padding: 6px 4px;
  transition: color .2s, background .2s;
  position: relative; overflow: hidden;
  min-width: 0; cursor: pointer;
}
.casino-nav-item::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 20px; height: 2px;
  background: var(--g-gold);
  border-radius: 0 0 2px 2px;
  opacity: 0; transition: opacity .2s, width .2s;
}
.casino-nav-item:hover,
.casino-nav-item.active { color: var(--gold-light); background: rgba(201,168,76,.04); }
.casino-nav-item:hover::before,
.casino-nav-item.active::before { opacity: 1; width: 28px; }
.casino-nav-icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.casino-nav-icon svg { width: 18px; height: 18px; display: block; }
.casino-nav-label { line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; font-size: .64rem; }

.casino-nav-item--line { color: rgba(6,199,85,.82); }
.casino-nav-item--line:hover { color: #06C755; background: rgba(6,199,85,.06); }
.casino-nav-item--line:hover::before { background: linear-gradient(90deg, #06C755, #05e060, #06C755); opacity: 1; }
.casino-nav-item--line .casino-nav-label { color: inherit; }

.casino-nav-center {
  flex: 1.4; overflow: visible; color: var(--gold);
  padding-top: 0; justify-content: flex-end; padding-bottom: 4px;
}
.casino-nav-center::before { display: none; }
.casino-nav-center:hover { background: transparent; color: var(--gold-bright); }

/* Casino chip — blue/gold split design */
.casino-chip {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  margin-top: -20px;
  position: relative; flex-shrink: 0;
  background:
    conic-gradient(
      #1a4890   0deg  30deg,
      transparent  30deg  60deg,
      #1a4890   60deg  90deg,
      transparent  90deg  120deg,
      #1a4890   120deg 150deg,
      transparent  150deg 180deg,
      #c9a84c   180deg 210deg,
      transparent  210deg 240deg,
      #c9a84c   240deg 270deg,
      transparent  270deg 300deg,
      #c9a84c   300deg 330deg,
      transparent  330deg 360deg
    );
  padding: 3px;
  box-shadow:
    0 -4px 20px rgba(91,155,213,.4),
    0 2px 8px rgba(0,0,0,.5),
    inset 0 0 0 2px rgba(201,168,76,.2);
  transition: transform .22s, box-shadow .22s;
}
.casino-chip-inner {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 50%;
  background: linear-gradient(145deg, #040e24 0%, #081828 30%, #061220 60%, #030a18 100%);
  border: 1px solid rgba(201,168,76,.35);
  color: var(--gold);
}
.casino-chip-inner svg { display: block; }
.casino-nav-center:hover .casino-chip {
  transform: translateY(-4px);
  box-shadow: 0 -8px 30px rgba(91,155,213,.5), 0 4px 12px rgba(0,0,0,.6);
}
.casino-nav-label--center { font-size: .64rem; color: var(--gold); margin-top: 2px; display: block; font-weight: 700; white-space: nowrap; }

/* Reviews carousel */
.reviews-grid.rv-active {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 12px;
}
.reviews-grid.rv-active .review-card { flex: 0 0 calc(50% - 6px); min-width: 0; max-width: none; }
@media (max-width: 767px) {
  .reviews-grid.rv-active .review-card { flex: 0 0 100%; }
}

/* ==========================================================
   PAGE TEMPLATES
   ========================================================== */
.upage-hero {
  position: relative; width: 100%;
  aspect-ratio: 1440 / 400;
  min-height: 180px; max-height: 400px;
  overflow: hidden; background: var(--surface-2);
}
.upage-hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.upage-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(3,8,18,.85) 0%, rgba(3,8,18,.3) 50%, transparent 100%);
}
.upage-hero-text { position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 0; }
.upage-hero-title { font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 700; color: #fff; line-height: 1.2; text-shadow: 0 2px 20px rgba(0,0,0,.6); }
.upage-hero--no-img { background: linear-gradient(135deg, var(--surface-2) 0%, var(--bg) 100%); border-bottom: 1px solid var(--gold-border); aspect-ratio: unset; min-height: unset; padding: calc(var(--header-h,68px) + 28px) 0 32px; }
.upage-title-plain { font-family: var(--f-display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; background: var(--g-gold); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.upage-breadcrumb { background: var(--surface-1); border-bottom: 1px solid rgba(91,155,213,.05); padding: 10px 0; }
.upage-bc-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.upage-bc-item a { font-size: .76rem; color: var(--text-3); text-decoration: none; transition: var(--ease); }
.upage-bc-item a:hover { color: var(--gold-light); }
.upage-bc-item--current { font-size: .76rem; color: var(--text-2); }
.upage-bc-sep { font-size: .72rem; color: var(--text-3); }
.upage-body { padding: 48px 0 60px; }
.upage-container { max-width: 860px; }
.upage-content { font-size: .92rem; line-height: 1.9; color: rgba(232,240,248,.82); }
.upage-content h2 { font-family: var(--f-heading); font-size: clamp(1.1rem,2vw,1.4rem); font-weight: 700; color: var(--blue-light); margin: 40px 0 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(91,155,213,.10); }
.upage-content h3 { font-family: var(--f-heading); font-size: 1.05rem; font-weight: 600; color: var(--blue); margin: 26px 0 10px; }
.upage-content p { margin-bottom: 16px; }
.upage-content ul, .upage-content ol { padding-left: 22px; margin-bottom: 16px; }
.upage-content li { margin-bottom: 6px; }
.upage-content a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.upage-content a:hover { color: var(--gold-bright); }
.upage-content strong { color: var(--blue-light); font-weight: 700; }
.upage-content blockquote { border-left: 3px solid var(--gold-dark); background: var(--gold-pale); padding: 14px 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0; margin: 20px 0; font-style: italic; color: var(--text-2); }
.upage-content img { max-width: 100%; height: auto; border-radius: var(--r-lg); display: block; margin: 20px auto; }
.upage-cta-strip { background: linear-gradient(135deg, #030810 0%, #060f20 100%); border-top: 1px solid rgba(91,155,213,.18); padding: 36px 0; }
.upage-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.upage-cta-text { font-size: 1rem; font-weight: 600; color: var(--text); }
.upage-cta-text strong { color: var(--gold-light); }
.upage-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 767px) {
  .upage-cta-inner { flex-direction: column; align-items: flex-start; }
  .upage-cta-btns { width: 100%; }
  .upage-cta-btns .btn-register, .upage-cta-btns .btn-login { flex: 1; justify-content: center; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 1199px) {
  .games-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 991px) {
  .games-grid    { grid-template-columns: repeat(4, 1fr); }
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
  .mainpost-security-grid, .mainpost-contact-grid { grid-template-columns: repeat(2, 1fr); }
  .mainpost-tips-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1025px) {
  #site-header { height: var(--header-h); overflow: visible; }
  .header-inner { flex-wrap: nowrap; padding: 10px 0; }
  .site-logo { flex: none; height: auto; order: 0; }
  .header-nav {
    display: flex !important; position: static !important;
    width: auto; height: auto;
    background: none !important; backdrop-filter: none !important;
    flex-direction: row; border: none; padding: 0; gap: 5px; order: 0;
  }
  .header-nav .btn-social { display: inline-flex !important; }
  .mobile-header-social { display: none !important; }
  .menu-toggle { display: none !important; }
}

.mobile-header-social { display: none; }
.mobile-social-btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  text-decoration: none; transition: var(--ease); flex-shrink: 0;
}
.mobile-social-btn svg { display: block; }
.mobile-line { background: #06C755; color: #fff; }
.mobile-line:hover { background: #05b54c; }
.mobile-football {
  background: rgba(91,155,213,.04); border: 1px solid rgba(91,155,213,.14);
  color: var(--blue); display: inline-flex; align-items: center; gap: 6px;
  padding: 0 13px; font-size: .77rem; font-weight: 600;
  width: auto; height: 32px; white-space: nowrap; border-radius: var(--r-sm);
}
.mobile-football:hover { background: rgba(201,168,76,.07); border-color: rgba(201,168,76,.25); color: var(--gold-light); }
.mobile-football span[aria-hidden] { font-size: 1.05rem; line-height: 1; }
.mobile-football-label { display: inline; }

@media (max-width: 1024px) {
  :root { --header-h: 104px; }
  #site-header {
    height: var(--header-h);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(2,5,12,.97);
  }
  .casino-nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .header-inner {
    display: flex; flex-wrap: wrap; align-items: center;
    align-content: flex-start; height: var(--header-h);
    gap: 0; padding: 9px 0 7px;
  }
  .site-logo { order: 1; flex: 1; display: flex; align-items: center; height: 46px; }
  .mobile-header-social { order: 2; display: flex; align-items: center; gap: 8px; height: 46px; flex-shrink: 0; }
  .header-nav {
    order: 3; display: flex !important; position: static !important;
    background: none !important; backdrop-filter: none !important;
    border: none; padding: 0; flex-direction: row;
    width: 100%; height: 38px; gap: 8px;
  }
  .header-nav .btn-social { display: none !important; }
  .header-nav .btn-football { display: none !important; }
  .btn-football-label { display: none !important; }
  .mobile-football-label { display: none !important; }
  .header-nav .btn-login,
  .header-nav .btn-register { flex: 1; justify-content: center; height: 36px; font-size: .79rem; padding: 0 10px; min-width: 0; border-radius: var(--r-pill); }
  .menu-toggle { display: none !important; }
  #main-content { padding-top: var(--header-h); }
}

@media (max-width: 767px) {
  .slider-track { min-height: 90px; }
  .games-grid    { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .articles-grid { grid-template-columns: 1fr; }
  .mainpost-tips-grid { grid-template-columns: 1fr; }
  .mainpost-cta-btns  { flex-direction: column; }
}
@media (max-width: 480px) {
  .logo-sub { display: none; }
  .games-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .game-card .game-overlay { display: none; }
}
@media (max-width: 680px) {
  .promo-cta-inner { flex-direction: column; text-align: center; }
  .promo-cta-btns  { width: 100%; justify-content: center; }
}

.page-template-template-promotions #main-content,
.page-template-template-blog #main-content,
.page-template-template-score-football #main-content,
.page-template-template-page-content #main-content,
.page-template-template-page #main-content,
.single #main-content,
.category #main-content,
.tag #main-content,
.archive #main-content,
.error404 #main-content { padding-top: 0 !important; }

/* Remove old conflict helpers */
.hdr-nav-left,.hdr-logo,.hdr-actions,.hdr-mobile-right { display: none !important; }