.api-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.api-status-pill.online {
  border-color: rgba(146, 220, 76, 0.44);
  background: rgba(146, 220, 76, 0.14);
  color: #b9f278;
}

.api-status-pill.offline {
  border-color: rgba(255, 102, 102, 0.44);
  background: rgba(255, 102, 102, 0.12);
  color: #ff9b9b;
}

.api-status-pill.checking {
  border-color: rgba(240, 200, 92, 0.44);
  background: rgba(240, 200, 92, 0.12);
  color: #f0c85c;
}

/* Deposit Hub mobile banking redesign */
body.home-v2-active .deposit-modal-panel,
.deposit-modal-panel {
  width: min(100%, 520px);
  max-height: min(92vh, 860px);
  background:
    radial-gradient(circle at 18% 0%, rgba(199, 243, 90, .12), transparent 28%),
    linear-gradient(180deg, #071b24 0%, #06131d 100%);
  border: 1px solid rgba(120, 210, 255, .22);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .62), 0 0 42px rgba(44, 209, 184, .14);
  overflow: hidden;
}

body.home-v2-active .deposit-modal-panel .modal-head,
.deposit-modal-panel .modal-head {
  background: rgba(6, 19, 29, .82);
  border-bottom: 1px solid rgba(120, 210, 255, .16);
  backdrop-filter: blur(14px);
}

body.home-v2-active .deposit-modal-panel .modal-content,
.deposit-modal-panel .modal-content {
  max-height: calc(min(92vh, 860px) - 68px);
  padding: 14px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.deposit-top-tabs {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  margin-bottom: 14px;
  background: rgba(6, 19, 29, .88);
  border: 1px solid rgba(120, 210, 255, .14);
  border-radius: 18px;
  backdrop-filter: blur(12px);
}

.deposit-top-tabs .auth-toggle {
  min-height: 44px;
  border-radius: 14px;
}

.deposit-top-tabs .auth-toggle.active {
  color: #06131d;
  background: linear-gradient(135deg, #c7f35a, #7ee7b4);
  border-color: rgba(199, 243, 90, .85);
  box-shadow: 0 0 22px rgba(199, 243, 90, .28);
}

.deposit-hub,
.withdraw-hub {
  display: grid;
  gap: 16px;
}

.deposit-section {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.deposit-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.deposit-section-head h4 {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.deposit-section-head span {
  color: #9fb3c8;
  font-size: 12px;
  white-space: nowrap;
}

.deposit-collapse-head {
  width: 100%;
  cursor: pointer;
  border: 1px solid rgba(120, 210, 255, .14);
  background: rgba(9, 26, 37, .55);
  border-radius: 14px;
  padding: 10px 14px;
  min-height: 44px;
  transition: background .15s ease;
}

.deposit-collapse-head:active {
  background: rgba(9, 26, 37, .85);
}

.deposit-collapse-head span:not(.deposit-collapse-caret) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.deposit-collapse-caret {
  margin-left: auto;
  color: #7ee7b4;
  font-size: 13px;
  flex: 0 0 auto;
}

.deposit-collapse-head.is-collapsed {
  background: rgba(9, 26, 37, .35);
}

.method-carousel,
.account-carousel {
  display: flex;
  gap: 10px;
  margin: 0 -14px;
  padding: 2px 14px 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.method-carousel::-webkit-scrollbar,
.account-carousel::-webkit-scrollbar {
  height: 4px;
}

.method-carousel::-webkit-scrollbar-thumb,
.account-carousel::-webkit-scrollbar-thumb {
  background: rgba(120, 210, 255, .28);
  border-radius: 999px;
}

.method-card,
.account-card,
.deposit-form-panel,
.withdraw-condition-card {
  background:
    linear-gradient(160deg, rgba(20, 62, 74, .72), rgba(11, 36, 48, .96)),
    #0b2430;
  border: 1px solid rgba(120, 210, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 36px rgba(0, 0, 0, .22);
}

.method-card {
  flex: 0 0 172px;
  min-height: 154px;
  padding: 13px;
  color: #ffffff;
  text-align: left;
  border-radius: 18px;
  scroll-snap-align: start;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.method-card:active,
.account-card:active,
.amount-chip:active,
.deposit-form-panel .primary-btn:active,
.deposit-form-panel .auth-submit:active {
  transform: scale(.98);
}

.method-card.active,
.account-card.active {
  transform: translateY(-3px);
  border-color: rgba(199, 243, 90, .86);
  box-shadow: 0 0 0 1px rgba(199, 243, 90, .28), 0 16px 38px rgba(199, 243, 90, .12);
}

.method-card-top,
.account-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.method-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: #06131d;
  background: linear-gradient(135deg, #c7f35a, #5eead4);
  border-radius: 16px;
  font-size: 24px;
  font-weight: 800;
}

.method-badge,
.method-status,
.account-card em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  color: #c7f35a;
  background: rgba(199, 243, 90, .11);
  border: 1px solid rgba(199, 243, 90, .28);
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.method-card strong {
  display: block;
  margin-top: 12px;
  font-size: 15px;
}

.method-card p {
  min-height: 36px;
  margin: 6px 0 10px;
  color: #9fb3c8;
  font-size: 12px;
  line-height: 1.5;
}

.method-status.success {
  color: #7ee7b4;
  border-color: rgba(126, 231, 180, .28);
}

.method-status.mock {
  color: #9fb3c8;
  border-color: rgba(159, 179, 200, .24);
}

.account-card {
  flex: 0 0 236px;
  min-height: 146px;
  padding: 14px;
  color: #ffffff;
  border-radius: 18px;
  scroll-snap-align: start;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

button.account-card {
  text-align: left;
}

.account-card-head span {
  display: block;
  color: #9fb3c8;
  font-size: 12px;
}

.account-card-head strong {
  display: block;
  margin-top: 3px;
  font-size: 15px;
}

.account-number {
  margin-top: 16px;
  color: #ffffff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
}

.account-actions {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 8px;
  margin-top: 14px;
}

.account-actions .primary-btn,
.account-actions .secondary-btn {
  min-height: 38px;
  padding-inline: 10px;
  border-radius: 12px;
  font-size: 12px;
}

.deposit-form-panel,
.withdraw-condition-card {
  padding: 14px;
  border-radius: 18px;
}

.deposit-form-panel .turnover-bar,
.withdraw-condition-card .turnover-bar {
  color: #06131d;
  background: linear-gradient(135deg, #c7f35a, #7ee7b4);
  border: 0;
  box-shadow: 0 0 22px rgba(199, 243, 90, .2);
}

.amount-chip-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.amount-chip {
  min-height: 42px;
  color: #ffffff;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(120, 210, 255, .22);
  border-radius: 13px;
  font-weight: 800;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.amount-chip.active,
.amount-chip:hover {
  color: #06131d;
  background: #c7f35a;
  border-color: #c7f35a;
}

.deposit-limit-text {
  color: #9fb3c8;
  font-size: 12px;
  text-align: center;
}

.qr-history-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: rgba(6, 19, 29, .45);
  border: 1px solid rgba(120, 210, 255, .14);
  border-radius: 16px;
}

.withdraw-balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.withdraw-balance-grid div {
  padding: 12px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(120, 210, 255, .14);
  border-radius: 14px;
}

.withdraw-balance-grid span {
  display: block;
  color: #9fb3c8;
  font-size: 12px;
}

.withdraw-balance-grid strong {
  display: block;
  margin-top: 4px;
  color: #ffffff;
  font-size: 20px;
}

.deposit-modal-panel .notice-alert.danger,
.deposit-modal-panel .notice-alert.warning {
  border-radius: 15px;
}

.deposit-modal-panel .notice-alert.danger {
  color: #fecaca;
  background: rgba(239, 68, 68, .14);
  border-color: rgba(239, 68, 68, .38);
}

.deposit-modal-panel .notice-alert.warning {
  color: #fef3c7;
  background: rgba(245, 158, 11, .13);
  border-color: rgba(245, 158, 11, .35);
}

.deposit-modal-panel .field-input,
.deposit-modal-panel .select-input,
.deposit-modal-panel .date-input {
  min-height: 46px;
  color: #ffffff;
  background: rgba(3, 13, 20, .58);
  border-color: rgba(120, 210, 255, .2);
}

.deposit-modal-panel .disabled-btn,
.deposit-modal-panel .disabled-btn:hover {
  min-height: 46px;
  color: rgba(255, 255, 255, .48);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .09);
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 768px) {
  .modal-wrap:has(.deposit-modal-panel) {
    align-items: stretch;
    padding: 0;
  }

  body.home-v2-active .deposit-modal-panel,
  .deposit-modal-panel.mobile-sheet,
  .deposit-modal-panel {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-width: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
  }

  .deposit-modal-panel .modal-head {
    flex: 0 0 auto;
  }

  body.home-v2-active .deposit-modal-panel .modal-content,
  .deposit-modal-panel.mobile-sheet .modal-content,
  .deposit-modal-panel .modal-content {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    padding: 12px;
    padding-bottom: 28px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .method-carousel,
  .account-carousel {
    margin-inline: -12px;
    padding-inline: 12px;
  }

  .method-card {
    flex-basis: 164px;
  }

  .account-card {
    flex-basis: 224px;
  }
}

/* v1.1.2 mobile auth focus stability */
.auth-modal-panel {
  max-height: calc(100dvh - 24px);
}

.auth-modal-panel .modal-content {
  max-height: calc(100dvh - 84px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.auth-modal-panel input,
.auth-modal-panel select,
.auth-modal-panel textarea,
.auth-modal-panel .field-input,
.auth-modal-panel .select-input {
  font-size: 16px;
}

.auth-modal-panel .field-shell,
.auth-modal-panel .select-shell {
  position: relative;
  z-index: 1;
}

.auth-modal-panel .field-toggle {
  position: relative;
  z-index: 2;
  touch-action: manipulation;
}

.checkbox-row,
.auth-check-line,
.auth-accept-row,
.radio-row {
  position: relative;
  z-index: 2;
}

.auth-check-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.auth-check-line input,
.radio-chip input {
  flex: 0 0 auto;
  pointer-events: auto;
}

.auth-check-line label,
.radio-chip {
  pointer-events: auto;
}

.radio-chip {
  cursor: pointer;
}

.radio-chip:has(input:checked) {
  color: #07131a;
  background: linear-gradient(145deg, var(--color-primary), #f2c251);
}

@media (max-width: 768px) {
  .auth-modal-panel,
  .auth-register-panel {
    max-height: calc(100dvh - 24px);
  }

  .auth-modal-panel .modal-content {
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .auth-modal-panel .auth-method-card,
  .auth-modal-panel .auth-method-card:hover,
  .auth-modal-panel .auth-submit:hover,
  .auth-modal-panel .field-toggle:hover {
    transform: none;
  }
}

@media (max-width: 390px) {
  .deposit-section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .deposit-section-head span {
    white-space: normal;
  }

  .amount-chip-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-actions {
    grid-template-columns: 1fr;
  }
}

:root {
  --color-primary: #e0a116;
  --color-primary-dark: #b47a00;
  --color-secondary: #4f6d5a;
  --color-bg: #121110;
  --color-bg-soft: #1a1917;
  --color-card: rgba(255, 250, 240, 0.96);
  --color-text: #1d1914;
  --color-muted: #6d6559;
  --color-border: rgba(203, 171, 105, 0.22);
  --color-success: #1f9d63;
  --color-warning: #c88816;
  --color-error: #c94c46;
  --color-info: #3a7ea0;
  --color-disabled-bg: #d3cec5;
  --color-disabled-text: #70685f;
  --shadow-soft: 0 12px 28px rgba(15, 12, 8, 0.12);
  --shadow: 0 18px 40px rgba(12, 10, 8, 0.18);
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --white: #ffffff;
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --bg-dark: var(--color-bg);
  --danger: var(--color-error);
  --warning: var(--color-warning);
  --success: var(--color-success);
  --info: var(--color-info);
  --surface: var(--color-card);
  --surface-soft: rgba(255, 247, 232, 0.82);
  --border: var(--color-border);
  --header-h: 146px;
}

* {
  box-sizing: border-box;
}

/* Solid dark backstop on the root element so no white ever shows through on
   overscroll/bounce or in in-app WebViews that don't honour body gradients or
   :has(). This is the last layer behind everything. */
html {
  background-color: #0f0e0d;
  /* Prevent the mobile rubber-band bounce that reveals the browser's default
     white background when scrolling past the top/bottom. */
  overscroll-behavior: none;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Kanit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background:
    linear-gradient(rgba(16, 14, 11, 0.78), rgba(16, 14, 11, 0.78)),
    radial-gradient(circle at top left, rgba(224, 161, 22, 0.18), transparent 32%),
    radial-gradient(circle at bottom right, rgba(114, 138, 124, 0.18), transparent 28%),
    linear-gradient(180deg, #161412 0%, #1c1a17 36%, #0f0e0d 100%);
}

body {
  overscroll-behavior: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(120deg, rgba(255, 208, 92, 0.04) 25%, transparent 25%) 0 0 / 24px 24px,
    linear-gradient(300deg, rgba(255, 208, 92, 0.03) 25%, transparent 25%) 0 0 / 24px 24px;
  opacity: 0.42;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

input,
select {
  min-width: 0;
}

.app-shell {
  min-height: 100vh;
  position: relative;
  overflow-x: clip;
}

.page-wrap {
  width: min(100%, 1160px);
  margin: 0 auto;
  padding: calc(var(--header-h) + 14px) 14px 190px;
}

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  padding: 10px 12px 0;
}

.topbar-inner {
  width: min(100%, 1160px);
  margin: 0 auto;
}

.topbar-card,
.banner-stage,
.section-card,
.game-card,
.menu-card,
.stat-card,
.modal-panel,
.news-promo,
.drawer-panel,
.empty-box,
.notice-bar,
.auth-brand,
.turnover-bar,
.info-strip {
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.topbar-card {
  border-radius: var(--radius-lg);
  padding: 12px;
  background: linear-gradient(145deg, rgba(30, 27, 23, 0.96), rgba(52, 46, 38, 0.96));
  backdrop-filter: blur(14px);
}

.top-row,
.top-actions,
.balance-strip,
.banner-meta,
.section-head,
.search-row,
.carousel-nav,
.modal-head,
.drawer-head,
.drawer-user,
.field-row,
.inline-actions,
.float-stack,
.toast-stack,
.settings-row,
.auth-tabs,
.auth-row,
.wallet-summary,
.menu-grid,
.category-row,
.banner-dots,
.deposit-grid,
.method-grid,
.amount-grid,
.wallet-grid,
.profile-grid,
.history-grid,
.promo-list,
.action-list,
.bottom-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-row,
.balance-strip,
.section-head,
.modal-head,
.drawer-head,
.drawer-user,
.banner-meta,
.search-row,
.settings-row {
  justify-content: space-between;
}

.top-actions,
.category-row,
.amount-grid,
.wallet-grid,
.menu-grid,
.deposit-grid,
.method-grid,
.inline-actions,
.profile-grid,
.history-grid,
.promo-list,
.action-list {
  flex-wrap: wrap;
}

.logo-pill {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255, 250, 240, 0.98) 0%, rgba(246, 234, 205, 0.94) 48%, rgba(228, 235, 230, 0.92) 100%);
  color: var(--color-primary-dark);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.logo-mark,
.avatar-badge,
.float-icon,
.banner-tag,
.game-rank {
  display: grid;
  place-items: center;
}

.brand-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-logo-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, var(--color-primary), #f2cb71);
  color: #1a1510;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
}

.site-logo {
  width: clamp(38px, 7vw, 68px);
  height: clamp(38px, 7vw, 68px);
}

.modal-logo {
  width: 78px;
  height: 54px;
}

.error-logo {
  width: 112px;
  height: 72px;
  margin: 0 auto 8px;
}

.logo-wordmark {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.icon-btn,
.service-btn,
.float-btn,
.dot-btn,
.tab-btn,
.category-btn,
.amount-btn,
.menu-card,
.method-btn,
.mini-btn,
.bottom-btn,
.quick-btn,
.auth-toggle,
.side-link {
  transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.icon-btn:hover,
.service-btn:hover,
.float-btn:hover,
.dot-btn:hover,
.tab-btn:hover,
.category-btn:hover,
.amount-btn:hover,
.menu-card:hover,
.method-btn:hover,
.mini-btn:hover,
.bottom-btn:hover,
.quick-btn:hover,
.auth-toggle:hover,
.side-link:hover {
  transform: translateY(-1px);
}

.icon-btn,
.mini-btn {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  background: rgba(255, 250, 240, 0.98);
  color: var(--color-primary-dark);
  box-shadow: inset 0 0 0 1px rgba(203, 171, 105, 0.24);
}

.service-btn,
.primary-btn,
.secondary-btn,
.line-btn,
.ghost-btn,
.link-btn,
.disabled-btn,
.auth-submit,
.tab-btn,
.category-btn,
.method-btn,
.amount-btn,
.quick-btn,
.bottom-btn,
.side-link {
  min-height: 44px;
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 700;
}

.primary-btn,
.auth-submit,
.tab-btn.active,
.category-btn.active,
.method-btn.active,
.amount-btn.active,
.bottom-btn.active,
.quick-btn.active {
  color: #1b150f;
  background: linear-gradient(145deg, var(--color-primary), #f2c251);
  box-shadow: 0 12px 24px rgba(176, 122, 0, 0.24);
}

.line-btn {
  color: #fff;
  background: linear-gradient(145deg, #27b35d, #42cf7a);
  box-shadow: 0 14px 28px rgba(39, 179, 93, 0.24);
}

.secondary-btn,
.service-btn,
.tab-btn,
.category-btn,
.method-btn,
.amount-btn,
.quick-btn,
.bottom-btn,
.side-link,
.auth-toggle {
  background: rgba(255, 251, 244, 0.92);
  color: var(--ink);
  border: 1px solid rgba(203, 171, 105, 0.2);
}

.ghost-btn,
.link-btn {
  background: transparent;
  color: var(--color-primary-dark);
  border: 1px solid rgba(176, 122, 0, 0.22);
}

.link-btn {
  padding-inline: 0;
  border: 0;
}

.disabled-btn,
button:disabled {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
}

.notice-bar {
  margin-top: 10px;
  min-height: 42px;
  border-radius: var(--radius-sm);
  background: linear-gradient(145deg, rgba(17, 15, 13, 0.96), rgba(44, 39, 33, 0.94));
  color: #f7f0dd;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
}

.notice-label {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: #f2c251;
}

.notice-marquee {
  overflow: hidden;
  min-width: 0;
}

.notice-track {
  white-space: nowrap;
  display: inline-block;
  padding-left: 100%;
  animation: demo-marquee 20s linear infinite;
}

@keyframes demo-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.balance-strip {
  margin-top: 10px;
}

.balance-box {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: linear-gradient(145deg, rgba(224, 161, 22, 0.96), rgba(133, 157, 140, 0.92));
  color: #18140f;
}

.balance-label {
  display: block;
  font-size: 12px;
  opacity: 0.8;
  font-weight: 700;
}

.balance-value {
  font-size: 18px;
  font-weight: 800;
}

.top-actions {
  margin-top: 10px;
}

.top-actions > * {
  flex: 1;
}

.top-actions .service-btn {
  flex: 0 0 auto;
  min-width: 120px;
}

.banner-stage {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  padding: 0;
  background: linear-gradient(145deg, rgba(35, 31, 26, 0.96), rgba(53, 48, 41, 0.92));
}

.banner-slide {
  min-height: 260px;
  padding: 28px;
  display: grid;
  align-items: end;
  background-size: cover;
  background-position: center;
  position: relative;
}

.banner-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(10, 9, 8, 0.48), rgba(224, 161, 22, 0.18) 45%, rgba(114, 138, 124, 0.28));
}

.banner-content {
  position: relative;
  z-index: 1;
  max-width: 420px;
}

.banner-tag {
  width: 96px;
  height: 32px;
  border-radius: 999px;
  background: rgba(242, 194, 81, 0.18);
  color: #fff5e3;
  font-size: 13px;
  font-weight: 700;
}

.banner-title {
  margin: 14px 0 8px;
  color: #fff9ee;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.08;
}

.banner-text {
  margin: 0;
  color: rgba(255, 248, 232, 0.9);
  font-size: 14px;
}

.banner-meta {
  position: absolute;
  inset: auto 18px 18px 18px;
  z-index: 2;
}

.banner-dots {
  gap: 8px;
}

.dot-btn {
  width: 10px;
  height: 10px;
  padding: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}

.dot-btn.active {
  width: 28px;
  background: #fff;
}

.banner-arrow {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(255, 248, 236, 0.92);
  color: var(--color-primary-dark);
}

.section {
  margin-top: 18px;
}

.section-card {
  border-radius: var(--radius-lg);
  padding: 16px;
  background: var(--surface);
}

.section-title,
.modal-title,
.game-name,
.menu-title,
.drawer-title,
.auth-title {
  margin: 0;
  font-weight: 700;
}

.section-subtitle,
.muted,
.helper-text {
  color: var(--muted);
  font-size: 12px;
}

.search-row {
  margin-top: 14px;
  align-items: stretch;
}

.search-shell,
.field-shell,
.select-shell,
.upload-shell {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(203, 171, 105, 0.18);
  background: rgba(255, 252, 246, 0.98);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.58);
}

.search-shell {
  position: relative;
}

.search-shell::before {
  content: "⌕";
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  color: var(--muted);
}

.search-input,
.field-input,
.select-input,
.date-input {
  width: 100%;
  min-height: 46px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  padding: 0 16px;
  font-size: 14px;
}

.search-input {
  padding-left: 40px;
}

.field-input-wrap {
  display: flex;
  align-items: center;
}

.field-toggle {
  min-width: 68px;
  padding: 0 12px;
  background: transparent;
  color: var(--color-primary-dark);
  font-weight: 700;
}

.games-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.game-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(247, 240, 227, 0.96));
}

.game-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  border-radius: 12px;
  background: linear-gradient(145deg, #d89a13, #f2bd47);
  color: #1b140e;
  font-size: 14px;
  font-weight: 700;
  z-index: 1;
}

.game-thumb {
  min-height: 138px;
  border-radius: 22px;
  padding: 16px;
  display: grid;
  align-content: end;
  background: var(--thumb-bg, linear-gradient(145deg, #16232e, #3b617b));
  color: #fff;
  position: relative;
  overflow: hidden;
}

.game-thumb::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -20px;
  top: -20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.game-provider {
  position: relative;
  z-index: 1;
  font-size: 12px;
  opacity: 0.92;
}

.game-badge {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 600;
}

.game-name {
  margin-top: 12px;
  font-size: 15px;
}

.game-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.game-actions > * {
  flex: 1;
}

.empty-box {
  border-radius: 24px;
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  background: var(--surface-soft);
}

.info-strip {
  border-radius: 24px;
  padding: 16px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(231, 247, 255, 0.96));
}

.stat-card,
.menu-card {
  border-radius: 22px;
  padding: 14px;
  background: var(--surface);
}

.wallet-grid,
.menu-grid,
.profile-grid {
  margin-top: 14px;
}

.wallet-grid,
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.menu-card {
  min-height: 82px;
  text-align: left;
}

.menu-title {
  font-size: 14px;
}

.menu-desc {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

.float-stack {
  position: fixed;
  right: max(12px, calc(50vw - 560px));
  bottom: 110px;
  z-index: 18;
  flex-direction: column;
}

.float-btn {
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(145deg, #f7f0df, #e7dcc2);
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-soft);
}

.wallet-float-btn {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(145deg, #d89a13, #f2bd47);
  color: #1b150f;
  box-shadow: 0 16px 30px rgba(176, 122, 0, 0.24);
}

.wallet-float-btn .float-icon {
  font-size: 26px;
  line-height: 1;
}

.wallet-float-btn .float-label {
  font-size: 10px;
  color: #1b150f;
}

.settings-float-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: linear-gradient(145deg, #3f5848, #6f8778);
  color: #fffef9;
  box-shadow: 0 16px 30px rgba(38, 58, 49, 0.24);
}

.settings-float-btn .float-icon,
.settings-float-btn .float-label {
  color: #fff;
}

.float-label {
  font-size: 11px;
  font-weight: 700;
}

.wallet-modal-panel {
  width: min(100%, 420px);
}

.settings-modal-panel {
  width: min(100%, 340px);
}

.wallet-summary-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 12px;
  margin-top: 0;
}

.wallet-balance-card,
.wallet-status-card,
.wallet-quick-card {
  border-radius: 20px;
  background: rgba(255, 252, 246, 0.98);
  border: 1px solid rgba(203, 171, 105, 0.16);
  box-shadow: var(--shadow-soft);
}

.wallet-balance-card,
.wallet-status-card {
  padding: 16px;
}

.wallet-balance-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.wallet-coin {
  font-size: 22px;
}

.wallet-balance-value {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.wallet-status-card .menu-title {
  margin-top: 4px;
}

.wallet-quick-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.wallet-quick-card {
  position: relative;
  min-height: 96px;
  padding: 14px 10px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wallet-quick-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(23, 35, 78, 0.12);
}

.wallet-quick-icon {
  font-size: 24px;
  line-height: 1;
}

.wallet-quick-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.wallet-quick-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #ba1d26;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.shop-modal-panel,
.provider-modal-panel {
  width: min(100%, 820px);
}

.shop-modal,
.provider-modal {
  min-width: 0;
}

.shop-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: stretch;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, #ffeaf4 0%, #f8fbff 52%, #ddf7ff 100%);
  border: 1px solid rgba(226, 95, 153, 0.16);
  box-shadow: 0 18px 34px rgba(60, 111, 150, 0.12);
  overflow: hidden;
}

.shop-hero-title {
  margin-top: 8px;
  color: #21314a;
  font-size: 22px;
  font-weight: 800;
}

.shop-points-card {
  min-width: 174px;
  display: grid;
  gap: 8px;
  align-content: center;
  justify-items: start;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(100, 181, 220, 0.18);
}

.shop-points-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.shop-points-card strong {
  color: #e23f8f;
  font-size: 28px;
}

.shop-reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.shop-reward-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
  border: 1px solid rgba(226, 95, 153, 0.14);
  box-shadow: 0 14px 26px rgba(60, 111, 150, 0.1);
}

.shop-reward-icon,
.provider-logo-mock {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffebf5, #dff7ff);
  color: #d8378b;
  font-weight: 800;
}

.shop-reward-icon {
  font-size: 24px;
}

.shop-exchange-card {
  background: linear-gradient(180deg, #fff 0%, #f8fcff 100%);
  border-color: rgba(100, 181, 220, 0.16);
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.provider-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(100, 181, 220, 0.16);
  box-shadow: 0 14px 26px rgba(60, 111, 150, 0.09);
  cursor: pointer;
}

.provider-card.active {
  border-color: rgba(226, 95, 153, 0.42);
  box-shadow: 0 18px 32px rgba(226, 95, 153, 0.14);
}

.provider-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.provider-games-panel {
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(180deg, #fff 0%, #f4fbff 100%);
  border: 1px solid rgba(100, 181, 220, 0.16);
}

.provider-game-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.provider-game-card {
  min-width: 0;
}

.provider-game-thumb {
  min-height: 120px;
  background: linear-gradient(145deg, #1c2840, #287ea7 52%, #ef5aa5);
}

.bonus-tracker-card .stat-card {
  background: linear-gradient(180deg, #fff 0%, #f8fcff 100%);
}

.settings-panel {
  gap: 16px;
}

.settings-meta,
.settings-inline-label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-inline-label {
  justify-content: space-between;
}

.settings-icon {
  font-size: 18px;
  line-height: 1;
}

.bottom-dock {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(calc(100% - 22px), 460px);
  z-index: 19;
}

.bottom-nav {
  border-radius: 28px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow);
}

.bottom-btn {
  flex: 1;
  min-height: 52px;
  text-align: center;
}

.bottom-btn.center {
  flex: 0 0 72px;
  width: 72px;
  min-height: 72px;
  border-radius: 24px;
  margin-top: -26px;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  z-index: 30;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 60; /* above the bottom nav (45) so modal buttons are tappable */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

/* Hide the floating bottom nav while a modal is open so it can't cover the
   modal's action buttons (e.g. the Telegram OTP confirm button). */
body:has(.modal-wrap) .home-v2-bottom-nav,
body:has(.drawer.open) .home-v2-bottom-nav {
  display: none !important;
}

.modal-panel {
  width: min(100%, 520px);
  max-height: 88dvh;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #f5ead6 0%, #fff9ef 100%);
}

.modal-panel-wide {
  width: min(100%, 760px);
}

.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 68px;
  padding: 14px 16px;
  background: linear-gradient(145deg, #d89a13, #b47a00);
  color: #fff8eb;
}

.modal-content {
  max-height: calc(88dvh - 68px);
  overflow-y: auto;
  padding: 14px;
  display: grid;
  gap: 14px;
}

.modal-block,
.auth-panel,
.drawer-card,
.history-card,
.promo-card,
.settings-block,
.deposit-block,
.wallet-block {
  border-radius: 20px;
  padding: 14px;
  background: rgba(255, 252, 246, 0.98);
  border: 1px solid rgba(203, 171, 105, 0.16);
}

.promo-card.active {
  border-color: rgba(31, 157, 99, 0.32);
  background: linear-gradient(180deg, #fff 0%, rgba(241, 255, 247, 0.96) 100%);
}

.modal-spacer {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
}

.field-stack {
  display: grid;
  gap: 12px;
}

.select-shell,
.upload-shell {
  padding: 0 14px;
}

.select-input,
.date-input {
  padding: 0;
}

.validation {
  margin-top: 6px;
  color: var(--danger);
  font-size: 12px;
}

.validation-inline {
  color: var(--danger);
  font-size: 12px;
}

.reward-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.diamond-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(224, 161, 22, 0.14);
  color: var(--color-primary-dark);
  font-weight: 700;
  white-space: nowrap;
}

.coupon-shell {
  display: grid;
  gap: 16px;
}

.coupon-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(145deg, #6a1418, #d19c31);
  box-shadow: 0 14px 28px rgba(34, 25, 15, 0.28);
  color: #fff;
  font-size: 34px;
}

.history-scroll {
  max-height: 50dvh;
  overflow-y: auto;
}

.box-open-shell {
  display: grid;
  gap: 14px;
  background: linear-gradient(180deg, #14202a 0%, #22384a 48%, #0f1418 100%);
}

.box-open-head {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #f0c764;
}

.box-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.box-tile {
  min-height: 120px;
  border: none;
  border-radius: 24px;
  background: linear-gradient(145deg, #fff8ec, #e8dcc2);
  box-shadow: 0 14px 28px rgba(10, 10, 10, 0.18);
  color: var(--color-primary-dark);
  font-size: 40px;
  cursor: pointer;
}

.box-tile:hover {
  transform: translateY(-1px);
}

.mermaid-mock {
  text-align: center;
  font-size: 28px;
  color: #8fd9ff;
}

.reward-popup {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(203, 171, 105, 0.2);
  box-shadow: 0 18px 30px rgba(23, 35, 78, 0.12);
}

.reward-popup-value {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--color-primary-dark);
}

.wheel-mock {
  width: 180px;
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #d19c31, #4ea0c8, #7a1117, #d19c31);
  box-shadow: 0 20px 34px rgba(15, 12, 8, 0.26);
  color: #fff;
  font-size: 56px;
  animation: wheelPulse 2.6s ease-in-out infinite;
}

.wheel-mock.spinning {
  animation: wheelSpin 0.9s linear;
}

@keyframes wheelPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes wheelSpin {
  from { transform: rotate(0deg) scale(1); }
  to { transform: rotate(360deg) scale(1.02); }
}

.calendar-grid-box {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.calendar-card {
  min-height: 78px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255, 251, 244, 0.98);
  border: 1px solid rgba(203, 171, 105, 0.14);
  display: grid;
  gap: 4px;
  justify-items: center;
  align-content: center;
  text-align: center;
}

.calendar-icon {
  font-size: 20px;
}

.calendar-label {
  font-size: 11px;
  color: var(--muted);
}

.legend-list {
  display: grid;
  gap: 8px;
}

.legend-row-demo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}

.legend-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
}

.progress-row {
  display: grid;
  gap: 8px;
}

.progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
}

.progress-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(203, 171, 105, 0.16);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(145deg, var(--color-primary), var(--color-secondary));
}

.ranking-modal-wide .promo-thumb-large {
  min-height: 160px;
}

.ranking-level-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ranking-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ranking-column {
  border-radius: 20px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(203, 171, 105, 0.16);
  text-align: center;
}

.ranking-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border-radius: 24px;
  font-size: 36px;
}

.ranking-icon.silver {
  background: linear-gradient(145deg, #d7dee6, #f8fcff);
}

.ranking-icon.gold {
  background: linear-gradient(145deg, #d6a338, #f5ddb0);
}

/* ============ Gaming Ranking (7 ranks, mascot) ============ */
.rkg-wrap {
  border-radius: 20px;
  padding: 16px 14px 18px;
  background:
    radial-gradient(700px 420px at 15% -10%, rgba(80, 120, 255, 0.18), transparent 60%),
    radial-gradient(640px 420px at 100% 0%, rgba(176, 107, 255, 0.15), transparent 55%),
    #0a0e1a;
  color: #e8eefc;
  font-family: inherit;
}
.rkg-banner {
  position: relative; border-radius: 18px; overflow: hidden;
  padding: 16px 18px; margin-bottom: 14px;
  background: linear-gradient(135deg, rgba(77, 163, 255, 0.22), rgba(176, 107, 255, 0.22));
  border: 1px solid rgba(120, 160, 255, 0.16);
}
.rkg-banner small { letter-spacing: 3px; font-size: 10px; color: #4da3ff; font-weight: 700; }
.rkg-banner h3 { font-size: 20px; margin: 4px 0 0; color: #fff; }
.rkg-banner .rkg-sub { color: #93a1c4; font-size: 12px; margin-top: 2px; }

.rkg-hero {
  background: rgba(18, 24, 40, 0.85); border: 1px solid rgba(120, 160, 255, 0.16);
  border-radius: 20px; padding: 20px 16px; margin-bottom: 14px; text-align: center;
}
.rkg-badge {
  width: 128px; height: 144px; margin: 0 auto 12px; position: relative;
  display: grid; place-items: center;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--rk-a, #54d1ff), var(--rk-b, #2b7bd6));
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.06), 0 18px 40px rgba(0, 0, 0, 0.5),
              0 0 40px var(--rk-glow, rgba(84, 209, 255, 0.45));
}
.rkg-badge::before {
  content: ""; position: absolute; inset: 8px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  border: 2px solid rgba(255, 255, 255, 0.4); opacity: .55;
}
.rkg-badge img {
  position: absolute; inset: 14px 10px 10px; width: calc(100% - 20px); height: calc(100% - 24px);
  object-fit: contain; object-position: center;
}
.rkg-badge .rkg-no {
  position: absolute; bottom: 10px; font-size: 11px; font-weight: 800;
  letter-spacing: 1px; color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}
.rkg-hero .rkg-name { font-size: 23px; font-weight: 800; color: #fff; }
.rkg-hero .rkg-en { color: #93a1c4; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; }

.rkg-xp { margin: 16px 6px 6px; }
.rkg-xp-track { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; border: 1px solid rgba(120, 160, 255, 0.16); }
.rkg-xp-fill {
  height: 100%; border-radius: 999px; position: relative;
  background: linear-gradient(90deg, #4da3ff, #b06bff);
  box-shadow: 0 0 16px rgba(120, 150, 255, 0.6);
  transition: width .4s ease;
}
.rkg-xp-fill::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 8px, transparent 8px 16px);
}
.rkg-xp-label { display: flex; justify-content: space-between; font-size: 12px; color: #93a1c4; margin-top: 8px; }
.rkg-xp-next { margin-top: 10px; font-size: 13px; color: #e8eefc; }
.rkg-xp-next strong { color: #ffd76b; }

.rkg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.rkg-stats .rkg-cell { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(120, 160, 255, 0.16); border-radius: 12px; padding: 10px 6px; }
.rkg-stats .rkg-cell b { display: block; font-size: 15px; color: #fff; }
.rkg-stats .rkg-cell span { font-size: 10px; color: #93a1c4; }

.rkg-ladder { display: flex; flex-direction: column; gap: 10px; }
.rkg-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: rgba(18, 24, 40, 0.85); border: 1px solid rgba(120, 160, 255, 0.16); border-radius: 16px;
  position: relative; overflow: hidden;
}
.rkg-row.active { border-color: transparent; box-shadow: 0 0 0 2px var(--rk-a, #54d1ff), 0 10px 30px rgba(0, 0, 0, .4); }
.rkg-row.active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(var(--rk-a, #54d1ff), var(--rk-b, #2b7bd6));
}
.rkg-row.locked { opacity: .5; }
.rkg-ico {
  width: 46px; height: 52px; flex: none; display: grid; place-items: center; overflow: hidden;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--rk-a, #54d1ff), var(--rk-b, #2b7bd6));
  box-shadow: 0 0 18px var(--rk-glow, rgba(84, 209, 255, 0.45));
}
.rkg-ico img { width: 82%; height: 82%; object-fit: contain; object-position: center; }
.rkg-mid { flex: 1; min-width: 0; }
.rkg-mid .rkg-rn { font-weight: 700; font-size: 15px; color: #fff; }
.rkg-mid .rkg-rn small { color: #93a1c4; font-weight: 400; font-size: 11px; margin-left: 6px; letter-spacing: 1px; }
.rkg-mid .rkg-cond { color: #93a1c4; font-size: 11px; margin-top: 2px; }
.rkg-tag { font-size: 10px; font-weight: 800; padding: 4px 8px; border-radius: 999px; flex: none; }
.rkg-tag.now { color: #04121f; background: linear-gradient(135deg, #7ef0c0, #35d0a0); }
.rkg-tag.done { color: #ffd76b; border: 1px solid rgba(255, 215, 107, .4); }
.rkg-tag.lock { color: #93a1c4; border: 1px solid rgba(120, 160, 255, 0.16); }
.rkg-section-title { font-size: 13px; font-weight: 700; color: #93a1c4; margin: 4px 2px 10px; letter-spacing: 1px; }

.notice-alert,
.turnover-bar {
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 13px;
}

.notice-alert.danger {
  background: rgba(201, 76, 70, 0.14);
  color: #9a302b;
}

.notice-alert.info {
  background: rgba(58, 126, 160, 0.14);
  color: #2a6888;
}

.notice-alert.warning {
  background: rgba(226, 63, 143, 0.12);
  color: #a5266c;
}

.mock-account-card,
.success-summary {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 252, 255, 0.96));
  border: 1px solid rgba(100, 181, 220, 0.16);
}

.mock-account-card {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mock-account-card span,
.success-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.mock-account-card strong,
.success-row strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 14px;
}

.decimal-preview {
  display: grid;
  gap: 4px;
}

.success-modal-card,
.qr-modal-card {
  background: linear-gradient(180deg, #fff 0%, #f7fbff 100%);
  border-color: rgba(226, 63, 143, 0.14);
  box-shadow: 0 18px 34px rgba(60, 111, 150, 0.1);
}

.success-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 24px;
  background: linear-gradient(145deg, #e23f8f, #6ecdeb);
  color: #fff;
  font-size: 34px;
  font-weight: 800;
}

.success-icon.small {
  width: 42px;
  height: 42px;
  margin: 0;
  border-radius: 16px;
  font-size: 24px;
  flex: 0 0 auto;
}

.result-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(31, 157, 99, 0.18);
  background: linear-gradient(180deg, rgba(246, 255, 250, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 26px rgba(31, 157, 99, 0.08);
}

.result-card.error {
  border-color: rgba(201, 76, 70, 0.2);
  background: linear-gradient(180deg, rgba(255, 247, 246, 0.98), rgba(255, 255, 255, 0.96));
  box-shadow: 0 14px 26px rgba(201, 76, 70, 0.08);
}

.result-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.result-message {
  margin-top: 4px;
}

.success-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(100, 181, 220, 0.12);
}

.success-row:last-child {
  border-bottom: none;
}

.qr-placeholder {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.9) 12px, transparent 1%) center / 26px 26px,
    linear-gradient(rgba(255, 255, 255, 0.9) 12px, transparent 1%) center / 26px 26px,
    linear-gradient(145deg, #171f2c, #2c6f91);
  color: #fff;
  font-size: 26px;
  font-weight: 800;
}

.demo-pass-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(226, 63, 143, 0.1);
  color: #8b245f;
  font-weight: 700;
}

.turnover-bar {
  color: #6d4a11;
  background: linear-gradient(145deg, rgba(224, 161, 22, 0.12), rgba(114, 138, 124, 0.16));
}

.upload-shell {
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  border-style: dashed;
  color: var(--muted);
}

.input-suffix {
  padding-right: 14px;
  color: var(--muted);
  font-weight: 600;
}

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(209, 156, 49, 0.12), rgba(78, 160, 200, 0.14));
}

.auth-tabs {
  justify-content: center;
}

.auth-toggle {
  min-width: 132px;
}

.checkbox-row,
.radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.radio-chip {
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(203, 171, 105, 0.18);
}

.radio-chip.active {
  color: #17120d;
  background: linear-gradient(145deg, var(--color-primary), #f2c251);
}

.auth-modal-panel {
  width: min(100%, 820px);
  max-height: min(92dvh, 820px);
  color: #f7fbff;
  background: linear-gradient(180deg, #0b2230 0%, #06111c 100%);
  border: 1px solid rgba(167, 217, 59, 0.16);
}

.auth-register-panel {
  width: min(100%, 860px);
}

.auth-modal-panel .modal-head {
  min-height: 60px;
  background: linear-gradient(135deg, #0d3545, #071923);
  border-bottom: 1px solid rgba(216, 166, 58, 0.2);
}

.auth-modal-panel .modal-content {
  max-height: calc(min(92dvh, 820px) - 60px);
  padding: 14px;
  overflow-x: hidden;
}

.auth-modal-panel .auth-brand,
.auth-modal-panel .auth-panel,
.auth-wizard,
.auth-review-card,
.auth-connect-card {
  border-radius: 14px;
  background: rgba(10, 34, 49, 0.88);
  border: 1px solid rgba(168, 186, 199, 0.14);
  box-shadow: none;
}

.auth-modal-panel .auth-brand {
  justify-content: flex-start;
  padding: 12px;
}

.auth-brand-compact .modal-logo {
  width: 62px;
  height: 42px;
}

.auth-modal-panel .auth-title,
.auth-modal-panel .menu-title,
.auth-step-title h4,
.auth-review-card h4 {
  color: #fff;
}

.auth-modal-panel .helper-text,
.auth-step-title p,
.auth-method-card span,
.auth-connect-card span,
.auth-review-card span {
  color: #a8bac7;
}

.auth-modal-panel .field-label {
  color: #dce9f2;
  font-weight: 700;
}

.auth-modal-panel .field-shell,
.auth-modal-panel .select-shell {
  border-radius: 12px;
  background: rgba(4, 15, 25, 0.72);
  border-color: rgba(168, 186, 199, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.auth-modal-panel .field-input,
.auth-modal-panel .select-input {
  color: #fff;
}

.auth-modal-panel .field-input::placeholder {
  color: rgba(168, 186, 199, 0.74);
}

.auth-modal-panel .field-toggle,
.auth-modal-panel .link-btn {
  color: #a7d93b;
}

.auth-icon {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: currentColor;
}

.auth-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-error-summary {
  display: grid;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 12px;
  color: #ffdce4;
  background: rgba(255, 77, 109, 0.1);
  border: 1px solid rgba(255, 77, 109, 0.24);
  font-size: 12px;
}

.auth-error-summary strong {
  color: #ff8aa0;
  font-size: 12px;
}

.auth-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.auth-step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 36px;
  padding: 7px 9px;
  border-radius: 999px;
  color: #a8bac7;
  background: rgba(4, 15, 25, 0.62);
  border: 1px solid rgba(168, 186, 199, 0.12);
  font-size: 12px;
}

.auth-step span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-weight: 800;
}

.auth-step strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.auth-step.active,
.auth-step.done {
  color: #07131a;
  background: linear-gradient(135deg, #a7d93b, #e2bd56);
  border-color: transparent;
}

.auth-wizard {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.auth-wizard-body {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.auth-step-title {
  display: grid;
  gap: 2px;
}

.auth-step-title h4,
.auth-review-card h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
}

.auth-step-title p {
  margin: 0;
  font-size: 12px;
}

.auth-method-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.auth-method-card {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  min-height: 132px;
  padding: 12px;
  border-radius: 14px;
  color: #dce9f2;
  background: rgba(4, 15, 25, 0.7);
  border: 1px solid rgba(168, 186, 199, 0.14);
  text-align: left;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.auth-method-card:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 217, 59, 0.34);
}

.auth-method-card.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(13, 53, 69, 0.96), rgba(6, 17, 28, 0.96));
  border-color: rgba(167, 217, 59, 0.42);
}

.auth-method-card strong {
  color: inherit;
  font-size: 14px;
  line-height: 1.25;
}

.auth-method-card span {
  font-size: 12px;
  line-height: 1.35;
}

.auth-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auth-form-grid.compact {
  grid-template-columns: minmax(0, 1fr);
}

.auth-connect-card {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.auth-connect-card > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.auth-connect-card strong,
.auth-review-card strong {
  color: #fff;
}

.auth-connect-card.connected {
  border-color: rgba(167, 217, 59, 0.34);
}

.auth-accept-row {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 46px;
  color: #dce9f2;
}

.auth-review-card {
  display: grid;
  gap: 8px;
  padding: 12px;
}

.auth-review-card div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-top: 8px;
  border-top: 1px solid rgba(168, 186, 199, 0.12);
}

.auth-review-card strong {
  min-width: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

/* Sign-up OTP verification block (shown on the last register step when the
   tenant requires OTP). */
.auth-otp-block {
  margin: 12px 0 4px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(9, 30, 45, 0.7);
  border: 1px solid rgba(167, 217, 59, 0.24);
}
.auth-otp-block.verified {
  border-color: rgba(88, 214, 126, 0.5);
  background: rgba(16, 46, 30, 0.5);
}
.auth-otp-title {
  font-weight: 700;
  margin-bottom: 4px;
}
.auth-otp-block .field-shell {
  margin: 10px 0;
}
.auth-otp-actions {
  display: flex;
  gap: 8px;
}
.auth-otp-actions .auth-submit,
.auth-otp-actions .secondary-btn {
  flex: 1;
}

/* Telegram login button highlight (real provider). */
.auth-social-button.telegram-real {
  border-color: rgba(51, 170, 255, 0.55);
  background: rgba(20, 40, 60, 0.7);
}

/* LINE Login button: match the Telegram button's dark outlined style so the two
   social buttons read as one consistent set. Keep the LINE brand green on the
   border + logo for instant recognition. */
.auth-social-button.line-real {
  border-color: rgba(6, 199, 85, 0.6);
  background: rgba(16, 46, 30, 0.7);
  color: #eaf7ee;
}
.auth-social-button.line-real:hover {
  border-color: rgba(6, 199, 85, 0.85);
  background: rgba(16, 46, 30, 0.9);
}
.auth-social-button.line-real[disabled] {
  opacity: 0.65;
}
/* The official LINE glyph is a filled path, so override the stroke-only default. */
.auth-icon-line-official svg {
  fill: currentColor;
  stroke: none;
}
.auth-social-button.line-real .auth-icon-line-official svg {
  fill: #06c755;
}

/* Google Sign-In button — same dark/translucent style as LINE & Telegram, with
   Google-blue accent border so it matches the social-button set. */
.auth-social-button.google-real {
  border-color: rgba(66, 133, 244, 0.55);
  background: rgba(20, 34, 56, 0.7);
  color: #e7eefb;
  font-weight: 700;
}
.auth-social-button.google-real:hover {
  border-color: rgba(66, 133, 244, 0.85);
  background: rgba(20, 34, 56, 0.9);
}
.auth-social-button.google-real[disabled] {
  opacity: 0.65;
}
/* The official Google "G" keeps its own 4 fill colours — no stroke override. */
.auth-icon-google-official svg {
  fill: none;
  stroke: none;
}
/* register-method card variant */
.auth-method-card.google-real-card {
  border-color: rgba(66, 133, 244, 0.35);
}

/* Invalid field: red border + subtle shake so the member sees exactly what's
   wrong when registration is rejected. */
.field-invalid.field-shell,
.field-invalid.select-shell,
.field-invalid .field-shell,
.field-invalid input,
.field-invalid select {
  border-color: #ff5b6a !important;
  box-shadow: 0 0 0 2px rgba(255, 91, 106, 0.25) !important;
  animation: field-shake 0.3s ease;
}
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.validation {
  color: #ff7b86;
  font-size: 12px;
  margin-top: 4px;
}

/* Give the register wizard room to scroll a focused field above the on-screen
   keyboard on mobile. */
.auth-register-panel .auth-wizard {
  padding-bottom: 40vh;
}

/* Telegram OTP + recovery + reset-password. */
.tg-otp-step {
  text-align: center;
}
.tg-open-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  margin: 14px 0 8px;
}
.tg-otp-ok {
  color: #58d67e;
  font-weight: 700;
  margin-bottom: 6px;
}
.tg-otp-waiting {
  margin-top: 10px;
  color: #f4c85d;
  font-size: 13px;
}
.recovery-sent,
.reset-card .recovery-icon {
  text-align: center;
}
.recovery-icon {
  font-size: 40px;
  margin-bottom: 8px;
}
.reset-page {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 0%, #0d3b4e 0%, #06111c 60%);
}
.reset-card {
  width: 100%;
  max-width: 380px;
  padding: 28px 22px;
  border-radius: 16px;
  background: rgba(9, 30, 45, 0.92);
  border: 1px solid rgba(168, 186, 199, 0.16);
  text-align: left;
}
.reset-card h2 {
  margin: 0 0 14px;
  text-align: center;
}

.auth-wizard-footer {
  position: sticky;
  bottom: -14px;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 -12px -12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(6, 17, 28, 0.72), #06111c 58%);
  border-top: 1px solid rgba(168, 186, 199, 0.12);
}

.auth-wizard-footer .secondary-btn,
.auth-wizard-footer .auth-submit {
  min-width: 132px;
}

.demo-login-btn {
  width: 100%;
  min-height: 46px;
  color: #1a1205;
  font-weight: 800;
  background: linear-gradient(135deg, #f8dd84 0%, #d7a12b 100%);
  border-color: rgba(255, 226, 142, 0.78);
  box-shadow: 0 12px 28px rgba(215, 161, 43, 0.24);
}

.demo-login-hint {
  text-align: center;
  color: #f8dd84;
  font-size: 13px;
  font-weight: 700;
}

.auth-divider {
  display: grid;
  place-items: center;
  color: #a8bac7;
  font-size: 12px;
}

.auth-social-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.auth-social-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 12px;
  color: #dce9f2;
  background: rgba(4, 15, 25, 0.7);
  border: 1px solid rgba(168, 186, 199, 0.16);
  font-size: 12px;
  font-weight: 700;
}

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(100%, 380px);
  z-index: 34;
  transform: translateX(108%);
  transition: transform 0.24s ease;
}

.drawer.open {
  transform: translateX(0);
}

.drawer-panel {
  height: 100%;
  overflow-y: auto;
  padding: 18px 18px calc(28px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #0f1418 0%, #18242f 34%, #11161b 100%);
  color: #f6eedc;
}

.drawer-card {
  background: linear-gradient(145deg, rgba(31, 39, 48, 0.94), rgba(26, 22, 19, 0.94));
  border-color: rgba(203, 171, 105, 0.16);
}

.guest-drawer-card,
.member-drawer-card {
  display: grid;
  gap: 14px;
  justify-items: start;
}

.avatar-badge {
  width: 62px;
  height: 62px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
  color: #fff;
  font-weight: 700;
  font-size: 22px;
}

/* Profile avatar image (member's chosen ready-made avatar). */
.avatar-badge-img {
  padding: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-badge-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* Avatar picker grid (choose a ready-made avatar). */
.avatar-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 12px;
  margin: 6px 0 4px;
}
.avatar-pick-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.avatar-pick-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-pick-item:hover {
  transform: translateY(-1px);
}
.avatar-pick-item.active {
  border-color: #a7d93b;
  box-shadow: 0 0 0 2px rgba(167, 217, 59, 0.35);
}
.avatar-pick-check {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #a7d93b;
  color: #0d1420;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.side-section {
  margin-top: 18px;
}

.side-title {
  margin: 0 0 10px;
  font-size: 14px;
  opacity: 0.86;
}

.side-list {
  display: grid;
  gap: 8px;
}

.side-link {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: #fff7e7;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(203, 171, 105, 0.12);
}

.side-link-icon {
  width: 26px;
  flex: 0 0 26px;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  filter: drop-shadow(0 2px 8px rgba(209, 156, 49, 0.2));
}

.side-link-text {
  flex: 1;
}

.member-subline {
  color: rgba(246, 238, 220, 0.78);
}

.drawer-stats {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.drawer-stat {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(203, 171, 105, 0.08);
}

.drawer-stat span {
  display: block;
  color: rgba(246, 238, 220, 0.68);
  font-size: 12px;
}

.drawer-stat strong {
  display: block;
  margin-top: 4px;
  color: #f3cb69;
  font-size: 14px;
}

.news-promo {
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(145deg, #161f28, #7b1319 48%, #d4a03b 100%);
  min-height: 240px;
  position: relative;
  padding: 24px;
  color: #fff;
}

.news-promo::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  right: -40px;
  bottom: -40px;
}

.news-promo h3 {
  margin: 0 0 10px;
  font-size: 28px;
  line-height: 1.22;
  max-width: min(100%, 320px);
  overflow-wrap: anywhere;
}

.news-promo .banner-text {
  max-width: min(100%, 330px);
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.wallet-summary {
  align-items: stretch;
}

.wallet-summary .stat-card {
  flex: 1;
}

.deposit-method-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.deposit-method-card {
  min-height: 120px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.deposit-method-icon,
.gift-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(209, 156, 49, 0.16), rgba(78, 160, 200, 0.18));
  font-size: 22px;
}

.method-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(209, 156, 49, 0.14);
  color: var(--color-primary-dark);
  font-size: 12px;
  font-weight: 700;
}

.gift-placeholder,
.gift-card {
  min-height: 180px;
  border-radius: 20px;
  border: 1px dashed rgba(203, 171, 105, 0.24);
  background: linear-gradient(145deg, rgba(255, 251, 244, 0.96), rgba(240, 233, 219, 0.92));
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}

.gift-card {
  min-height: 120px;
  gap: 10px;
}

.bank-list,
.table-list,
.share-grid-box {
  display: grid;
  gap: 10px;
}

.bank-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bank-count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #a7d93b;
  background: rgba(167, 217, 59, 0.14);
  border: 1px solid rgba(167, 217, 59, 0.32);
}

.bank-reject-hint {
  margin-top: 4px;
  color: #f2777a;
}

.bank-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 168px;
  overflow-y: auto;
  padding: 10px;
  margin-top: 6px;
  border-radius: 14px;
  background: rgba(4, 15, 25, 0.55);
  border: 1px solid rgba(168, 186, 199, 0.16);
  -webkit-overflow-scrolling: touch;
}

.bank-chip-grid.field-invalid {
  border-color: rgba(242, 119, 122, 0.7);
}

.bank-chip {
  flex: 1 1 calc(33.333% - 8px);
  min-width: 84px;
  min-height: 40px;
  padding: 0 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #cdd8e2;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(168, 186, 199, 0.2);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.bank-chip:hover {
  border-color: rgba(167, 217, 59, 0.45);
}

.bank-chip.active {
  color: #0c1a08;
  background: linear-gradient(135deg, #b9e95d, #7ee08a);
  border-color: rgba(167, 217, 59, 0.9);
  box-shadow: 0 4px 14px rgba(126, 224, 138, 0.28);
}

.bank-card,
.table-row,
.share-popup,
.promo-thumb-large,
.date-filter {
  border-radius: 18px;
}

.bank-card,
.table-row {
  padding: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(203, 171, 105, 0.14);
}

.table-button {
  width: 100%;
  text-align: left;
}

.bank-card-head,
.bonus-row,
.bonus-side,
.share-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.status-pill.primary {
  background: rgba(58, 126, 160, 0.14);
  color: #2a6888;
}

.status-pill.warning {
  background: rgba(200, 136, 22, 0.16);
  color: #8e5d0c;
}

.status-pill.success {
  background: rgba(39, 179, 93, 0.18);
  color: #1f8d4d;
}

.status-pill.danger {
  background: rgba(220, 53, 69, 0.16);
  color: #b12635;
}

.mini-refresh-btn,
.wallet-refresh-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.mini-refresh-btn:disabled,
.wallet-refresh-btn:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.local-debug-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px dashed rgba(80, 103, 120, 0.35);
  border-radius: 8px;
  background: rgba(15, 23, 32, 0.04);
}

.debug-grid {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(0, 1.2fr);
  gap: 8px 12px;
  font-size: 12px;
}

.debug-grid span {
  color: #6b7580;
  font-weight: 700;
}

.debug-grid strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.history-refresh-row {
  display: flex;
  justify-content: flex-end;
  margin: 10px 0;
}

.promo-thumb-large {
  min-height: 140px;
  display: grid;
  place-items: center;
  color: #fff8eb;
  font-weight: 700;
  background: linear-gradient(145deg, #20201f, #d89a13);
}

.date-filter {
  padding: 12px 14px;
  background: rgba(209, 156, 49, 0.1);
  color: var(--color-primary-dark);
  font-weight: 600;
}

.pagination-mock {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.revenue-panel {
  position: relative;
}

.share-popup {
  position: absolute;
  inset: 24px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(203, 171, 105, 0.14);
  box-shadow: var(--shadow-soft);
}

.settings-slider {
  width: 100%;
  accent-color: #f7a928;
}

.switch-btn {
  width: 54px;
  height: 30px;
  border-radius: 999px;
  background: rgba(209, 156, 49, 0.2);
  position: relative;
}

.switch-btn::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s ease;
}

.switch-btn.on {
  background: linear-gradient(145deg, var(--color-primary), #f2c251);
}

.switch-btn.on::after {
  transform: translateX(24px);
}

.settings-submit-btn {
  min-height: 48px;
  border-radius: 18px;
  background: linear-gradient(145deg, #ffc041, #ff9b2e);
  color: #4b2500;
  font-weight: 800;
  box-shadow: 0 14px 24px rgba(255, 161, 46, 0.22);
}

.toast-stack {
  position: fixed;
  left: 50%;
  top: 88px;
  bottom: auto;
  transform: translateX(-50%);
  z-index: 80;
  width: min(calc(100% - 24px), 380px);
  flex-direction: column;
}

.toast {
  border-radius: 18px;
  padding: 12px 14px;
  color: #fff;
  background: rgba(22, 14, 18, 0.92);
  box-shadow: var(--shadow-soft);
}

.play-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #151412 0%, #1c1a17 18%, #111315 18%, #111315 100%);
}

.play-wrap {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 20px 14px 40px;
}

.play-panel {
  min-height: calc(100vh - 120px);
  display: grid;
  place-items: center;
}

.play-card {
  width: min(100%, 560px);
  padding: 30px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(245, 235, 212, 0.94));
  border: 1px solid rgba(203, 171, 105, 0.18);
  text-align: center;
  color: var(--ink);
}

.play-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 16px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--color-primary), #f2c251);
  color: #23190f;
  font-size: 36px;
  font-weight: 700;
}

@media (max-width: 719px) {
  :root {
    --header-h: 208px;
  }

  .topbar {
    padding: 8px 8px 0;
  }

  .top-row {
    gap: 8px;
    flex-wrap: wrap;
  }

  .top-row .logo-pill {
    order: -1;
    flex: 1 0 100%;
  }

  .top-row .secondary-btn,
  .top-row .primary-btn,
  .top-row .service-btn,
  .top-row .balance-box {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .top-row .secondary-btn,
  .top-row .primary-btn,
  .top-row .service-btn {
    text-align: center;
    padding-inline: 10px;
    min-height: 44px;
  }

  .logo-pill {
    min-height: 48px;
    padding-inline: 10px;
    font-size: 13px;
    gap: 8px;
  }

  .logo-wordmark {
    font-size: 15px;
  }

  .balance-strip {
    gap: 8px;
  }

  .balance-value {
    font-size: 16px;
  }

  .top-actions {
    gap: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .top-actions .service-btn {
    min-width: 0;
  }

  .banner-slide {
    min-height: 204px;
    padding: 18px;
  }

  .banner-title {
    font-size: clamp(22px, 7vw, 28px);
  }

  .banner-text {
    font-size: 13px;
  }

  .section {
    margin-top: 14px;
  }

  .section-card {
    padding: 14px;
  }

  .section-title,
  .modal-title,
  .drawer-title,
  .auth-title {
    font-size: 17px;
  }

  .search-row,
  .inline-actions,
  .checkbox-row,
  .radio-row,
  .field-row {
    gap: 8px;
  }

  .auth-tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .auth-tabs::-webkit-scrollbar {
    display: none;
  }

  .auth-toggle {
    min-width: 122px;
    flex: 0 0 auto;
  }

  .modal-wrap {
    align-items: flex-end;
    padding: 8px;
  }

  .modal-panel {
    width: 94vw;
    max-height: 88dvh;
    border-radius: 24px 24px 16px 16px;
  }

  .modal-content {
    max-height: calc(88dvh - 68px);
    padding: 12px;
    gap: 12px;
  }

  /* Deposit sheet: full-bleed on tablets/phones (beat generic .modal-panel). */
  .modal-wrap:has(.deposit-modal-panel) {
    padding: 0;
  }

  .modal-wrap .modal-panel.deposit-modal-panel {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }

  .drawer {
    width: min(100%, 340px);
  }

  .drawer-panel {
    padding: 16px 14px;
  }

  .float-stack {
    right: 10px;
    bottom: 132px;
    gap: 8px;
  }

  .float-btn {
    width: 52px;
    height: 52px;
  }

  .wallet-summary {
    display: grid;
    grid-template-columns: 1fr;
  }

  .wallet-summary-hero {
    grid-template-columns: 1fr;
  }

  .wallet-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .deposit-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .games-grid {
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-thumb {
    min-height: 124px;
    padding: 14px;
  }

  .game-actions {
    flex-direction: column;
  }

  .game-actions > * {
    width: 100%;
  }

  .table-row {
    align-items: stretch;
    gap: 8px;
  }

  .bottom-dock {
    width: min(calc(100% - 16px), 420px);
    bottom: 14px;
  }

  .bottom-nav {
    gap: 6px;
    padding: 8px;
  }

  .bottom-btn {
    min-height: 48px;
    font-size: 12px;
  }

  .reward-head {
    flex-direction: column;
    align-items: stretch;
  }

  .calendar-grid-box {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ranking-stage {
    grid-template-columns: 1fr;
  }

  .ranking-level-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .modal-wrap {
    padding: 8px;
    overflow-x: hidden;
  }

  .modal-panel {
    width: min(100%, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  .modal-content {
    overflow-x: hidden;
  }

  .inline-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  /* Deposit sheet: full-bleed on phones (must beat the generic .modal-panel
     rules above which cap width at calc(100vw-24px)). */
  .modal-wrap:has(.deposit-modal-panel) {
    padding: 0;
    overflow-x: hidden;
  }

  .modal-wrap .modal-panel.deposit-modal-panel {
    width: 100vw;
    max-width: 100vw;
    border-radius: 0;
  }

  .modal-panel.deposit-modal-panel .modal-content {
    overflow-x: hidden;
  }

  .inline-actions > * {
    width: 100%;
  }

  .mobile-news-fix {
    min-height: 196px;
    padding: 18px;
    border-radius: 22px;
  }

  .mobile-news-fix::after {
    width: 132px;
    height: 132px;
    right: -38px;
    bottom: -28px;
  }

  .mobile-news-fix h3 {
    max-width: calc(100% - 34px);
    font-size: 22px;
    line-height: 1.28;
    overflow-wrap: anywhere;
  }

  .mobile-news-fix .banner-text {
    max-width: calc(100% - 18px);
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  .news-promo + .modal-block {
    gap: 10px;
    padding: 12px;
  }

  .shop-hero {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .shop-hero-title {
    font-size: 18px;
    line-height: 1.3;
  }

  .shop-points-card {
    min-width: 0;
  }

  .shop-reward-grid,
  .provider-grid,
  .provider-game-grid {
    grid-template-columns: 1fr;
  }

  .provider-card {
    grid-template-columns: 1fr;
  }

  .provider-actions {
    grid-column: 1;
    grid-template-columns: 1fr;
  }

  .mock-account-card {
    grid-template-columns: 1fr;
  }

  .success-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .result-card-head {
    align-items: flex-start;
  }
}

@media (max-width: 430px) {
  :root {
    --header-h: 214px;
  }

  html,
  body {
    font-size: 14px;
  }

  .page-wrap {
    padding: calc(var(--header-h) + 10px) 10px 176px;
  }

  .top-row .secondary-btn,
  .top-row .primary-btn,
  .top-row .service-btn,
  .top-row .balance-box {
    flex: 1 1 100%;
  }

  .top-row .icon-btn {
    flex: 0 0 42px;
  }

  .notice-bar {
    min-height: 38px;
    padding-inline: 10px;
  }

  .notice-label,
  .helper-text,
  .menu-desc,
  .validation,
  .validation-inline {
    font-size: 12px;
  }

  .wallet-quick-card {
    min-height: 88px;
    padding: 12px 8px;
  }

  .wallet-quick-label {
    font-size: 11px;
  }
}

@media (max-width: 390px) {
  :root {
    --header-h: 224px;
  }

  .site-logo {
    width: 42px;
    height: 42px;
  }

  .logo-wordmark {
    font-size: 14px;
  }

  .section-title,
  .modal-title,
  .drawer-title,
  .auth-title {
    font-size: 16px;
  }

  .calendar-grid-box,
  .wallet-quick-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .deposit-method-grid {
    grid-template-columns: 1fr;
  }

  .banner-slide {
    min-height: 192px;
    padding: 16px;
  }

  .banner-title {
    font-size: 22px;
  }
}

@media (max-width: 360px) {
  :root {
    --header-h: 232px;
  }

  .page-wrap {
    padding-inline: 8px;
  }

  .topbar {
    padding-inline: 6px;
  }

  .section-card,
  .modal-content,
  .drawer-panel {
    padding-left: 10px;
    padding-right: 10px;
  }

  .float-stack {
    right: 8px;
    bottom: 126px;
  }

  .float-btn {
    width: 48px;
    height: 48px;
  }

  .wallet-float-btn,
  .settings-float-btn {
    width: 54px;
    height: 54px;
  }

  .wallet-float-btn .float-label,
  .settings-float-btn .float-label,
  .float-label {
    font-size: 10px;
  }

  .bottom-btn {
    font-size: 11px;
  }

  .bottom-btn.center {
    width: 66px;
    min-height: 66px;
  }
}

@media (min-width: 720px) {
  .page-wrap {
    padding-inline: 18px;
  }

  .page-grid {
    display: grid;
    grid-template-columns: 1.45fr 0.95fr;
    gap: 18px;
  }

  .games-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wallet-grid,
  .menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .games-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.auth-toggle.active {
  color: #1b150f;
  background: linear-gradient(145deg, var(--color-primary), #f2c251);
  box-shadow: 0 12px 24px rgba(176, 122, 0, 0.2);
}

.category-row {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
}

.category-row::-webkit-scrollbar {
  display: none;
}

.toast-stack {
  bottom: auto;
  top: 88px; /* show toasts near the top so they're clearly visible on mobile */
  z-index: 80; /* above modals + bottom nav */
}

/* Responsive polish: explicit mobile/tablet/PC modes */
:root {
  --content-max: 1500px;
}

html,
body {
  width: 100%;
  overflow-x: hidden;
}

.topbar-inner,
.page-wrap {
  width: min(100%, var(--content-max));
}

.section,
.section-card,
.banner-stage,
.games-grid,
.shop-reward-grid,
.provider-grid,
.provider-game-grid,
.modal-panel,
.drawer,
.drawer-panel {
  min-width: 0;
}

.section-card,
.modal-panel,
.drawer-panel,
.game-card,
.shop-reward-card,
.provider-card,
.provider-game-card {
  overflow-wrap: anywhere;
}

.search-row {
  min-width: 0;
}

.section-card > .search-row .search-shell {
  max-width: 520px;
}

.shop-modal .search-shell,
.provider-modal .search-shell {
  max-width: none;
}

.auth-tabs,
.category-row,
.shop-tabs,
.provider-tabs {
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.auth-tabs::-webkit-scrollbar,
.category-row::-webkit-scrollbar,
.shop-tabs::-webkit-scrollbar,
.provider-tabs::-webkit-scrollbar {
  display: none;
}

.auth-toggle,
.category-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.amount-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
}

.amount-btn,
.primary-btn,
.secondary-btn,
.auth-submit,
.line-btn,
.disabled-btn {
  min-width: 0;
  overflow-wrap: anywhere;
}

.game-card {
  display: grid;
  grid-template-rows: auto minmax(38px, auto) auto auto;
  gap: 8px;
}

.game-thumb {
  min-height: 0;
  aspect-ratio: 1 / 0.74;
}

.game-name {
  min-height: 38px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.table-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.table-row > * {
  min-width: 0;
}

.drawer-panel {
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.32);
}

.drawer-stat strong,
.balance-value,
.shop-points-card strong {
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  :root {
    --header-h: 126px;
  }

  .topbar {
    padding: 10px 16px 0;
  }

  .topbar-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 12px;
    padding: 10px 12px;
    border-radius: 24px;
  }

  .top-row {
    min-width: 0;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .logo-pill {
    flex: 0 1 300px;
    min-height: 50px;
  }

  .site-logo {
    width: 50px;
    height: 50px;
  }

  .balance-box {
    flex: 0 1 160px;
    padding: 8px 10px;
  }

  .balance-value {
    font-size: 16px;
  }

  .top-actions {
    margin-top: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .top-actions > * {
    flex: 0 0 auto;
  }

  .notice-bar {
    grid-column: 1 / -1;
    margin-top: 0;
    min-height: 34px;
  }

  .page-wrap {
    padding: calc(var(--header-h) + 12px) 24px 56px;
  }

  .banner-slide {
    min-height: clamp(230px, 17vw, 300px);
    padding: 30px;
  }

  .banner-content {
    max-width: 520px;
  }

  .games-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .game-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-modal-panel,
  .provider-modal-panel {
    width: min(calc(100vw - 48px), 1180px);
  }

  .modal-panel-wide {
    width: min(calc(100vw - 48px), 900px);
  }

  .shop-modal-panel,
  .provider-modal-panel {
    max-width: 1180px;
  }

  .modal-panel {
    max-height: 90vh;
  }

  .modal-content {
    max-height: calc(90vh - 68px);
    padding: 18px;
  }

  .shop-reward-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .provider-grid,
  .provider-game-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .provider-card {
    grid-template-columns: 1fr;
    align-content: start;
  }

  .provider-actions {
    grid-column: 1;
  }

  .drawer {
    width: min(100vw, 400px);
  }

  .bottom-dock {
    display: none;
  }

  .float-stack {
    right: max(18px, calc((100vw - var(--content-max)) / 2 + 18px));
    bottom: 42px;
  }
}

@media (min-width: 1440px) {
  .games-grid,
  .provider-grid,
  .provider-game-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .page-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  :root {
    --header-h: 150px;
  }

  .bottom-dock {
    display: none;
  }

  .games-grid,
  .provider-grid,
  .provider-game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .shop-reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  :root {
    --header-h: 208px;
  }

  .topbar {
    padding: 8px 8px 0;
  }

  .topbar-card {
    display: block;
    padding: 10px;
    border-radius: 22px;
  }

  .top-row {
    gap: 8px;
    flex-wrap: wrap;
  }

  .top-row .logo-pill {
    order: -1;
    flex: 1 0 100%;
  }

  .top-row .secondary-btn,
  .top-row .primary-btn,
  .top-row .service-btn,
  .top-row .balance-box {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .logo-pill {
    min-height: 48px;
    padding-inline: 10px;
    gap: 8px;
  }

  .top-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .top-actions > *,
  .top-actions .service-btn {
    min-width: 0;
    width: 100%;
  }

  .page-wrap {
    width: 100%;
    padding: calc(var(--header-h) + 10px) 10px calc(118px + env(safe-area-inset-bottom));
  }

  .banner-stage {
    border-radius: 22px;
  }

  .banner-slide {
    min-height: 196px;
    padding: 18px;
  }

  .section-card {
    padding: 14px;
    border-radius: 22px;
  }

  .section-head {
    align-items: flex-start;
    gap: 8px;
  }

  .search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    width: 100%;
  }

  .section-card > .search-row .search-shell {
    max-width: none;
  }

  .games-grid,
  .provider-grid,
  .provider-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .shop-reward-grid {
    grid-template-columns: 1fr;
  }

  .game-card {
    padding: 10px;
    border-radius: 20px;
  }

  .game-thumb {
    aspect-ratio: 1 / 0.78;
    border-radius: 18px;
    padding: 12px;
  }

  .game-actions,
  .provider-actions,
  .inline-actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .amount-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .modal-wrap {
    align-items: center;
    padding: 12px;
  }

  .modal-panel,
  .modal-panel-wide,
  .shop-modal-panel,
  .provider-modal-panel,
  .wallet-modal-panel,
  .settings-modal-panel {
    width: min(100%, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 22px;
  }

  .modal-content {
    max-height: calc(100dvh - 92px);
    overflow-x: hidden;
    padding: 12px;
  }

  .drawer {
    width: min(100vw, 430px);
  }

  .drawer-panel {
    padding: 16px 14px calc(22px + env(safe-area-inset-bottom));
  }

  .drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-bottom: 10px;
    background: linear-gradient(180deg, rgba(15, 20, 24, 0.98), rgba(15, 20, 24, 0.82));
  }

  .drawer-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-hero {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .shop-points-card {
    min-width: 0;
  }

  .provider-card {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .provider-logo-mock,
  .shop-reward-icon {
    width: 44px;
    height: 44px;
    border-radius: 16px;
  }

  .table-row {
    align-items: stretch;
    flex-direction: column;
  }

  .success-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .qr-placeholder {
    min-height: min(42vh, 220px);
  }

  .mobile-news-fix {
    min-height: 196px;
    padding: 18px;
  }

  .mobile-news-fix h3 {
    max-width: calc(100% - 28px);
    font-size: 22px;
    line-height: 1.28;
  }

  .news-promo + .modal-block label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .bottom-dock {
    display: block;
    width: min(calc(100% - 16px), 460px);
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 19;
  }

  .bottom-nav {
    gap: 6px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }

  .bottom-btn {
    min-height: 48px;
    padding-inline: 6px;
    font-size: 12px;
  }

  .bottom-btn.center {
    flex-basis: 64px;
    width: 64px;
    min-height: 64px;
    margin-top: -20px;
  }

  .float-stack {
    right: 10px;
    bottom: calc(102px + env(safe-area-inset-bottom));
  }

  .float-btn {
    width: 50px;
    height: 50px;
  }

  .wallet-float-btn,
  .settings-float-btn {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 430px) {
  :root {
    --header-h: 216px;
  }

  .top-row .secondary-btn,
  .top-row .primary-btn,
  .top-row .service-btn,
  .top-row .balance-box {
    flex: 1 1 100%;
  }

  .banner-title {
    font-size: 22px;
  }

  .game-actions .secondary-btn,
  .game-actions .primary-btn {
    min-height: 42px;
    padding: 9px 8px;
    font-size: 12px;
  }

  .provider-grid,
  .provider-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 390px) {
  :root {
    --header-h: 224px;
  }

  .page-wrap {
    padding-inline: 8px;
  }

  .deposit-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bottom-btn {
    font-size: 11px;
  }

  .float-stack {
    bottom: calc(96px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 1024px) {
  .shop-modal-panel,
  .provider-modal-panel {
    width: min(calc(100vw - 48px), 1180px);
  }
}

@media (max-width: 768px) {
  :root {
    --header-h: 292px;
  }

  .top-row {
    display: grid;
    align-items: center;
  }

  .top-row:has(.balance-box) {
    grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr) 42px;
  }

  .top-row:not(:has(.balance-box)) {
    grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1fr);
  }

  .top-row .logo-pill {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
  }

  .top-row:has(.balance-box) > .icon-btn:first-child {
    grid-column: 1;
    grid-row: 2;
  }

  .top-row:has(.balance-box) > .balance-box:nth-child(2) {
    grid-column: 2;
    grid-row: 2;
  }

  .top-row:has(.balance-box) > .balance-box:nth-child(4) {
    grid-column: 3;
    grid-row: 2;
  }

  .top-row:has(.balance-box) > .icon-btn:last-child {
    grid-column: 4;
    grid-row: 2;
  }

  .top-row:not(:has(.balance-box)) > .icon-btn {
    grid-column: 1;
    grid-row: 2;
  }

  .top-row:not(:has(.balance-box)) > .secondary-btn {
    grid-column: 2;
    grid-row: 2;
  }

  .top-row:not(:has(.balance-box)) > .primary-btn {
    grid-column: 3;
    grid-row: 2;
  }

  .top-row:not(:has(.balance-box)) > .service-btn {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .top-row .secondary-btn,
  .top-row .primary-btn,
  .top-row .service-btn,
  .top-row .balance-box {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
  }

  .top-row .icon-btn {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 430px) {
  :root {
    --header-h: 292px;
  }

  .top-row .secondary-btn,
  .top-row .primary-btn,
  .top-row .service-btn,
  .top-row .balance-box {
    flex: initial;
  }
}

/* Home/header/notification polish */
:root {
  --header-h: 138px;
  --header-expanded-h: 186px;
}

.quick-open .page-wrap {
  padding-top: calc(var(--header-expanded-h) + 14px);
}

.compact-header {
  padding: 10px;
  border-radius: 22px;
}

.guest-top-row,
.member-top-row {
  display: grid;
  align-items: center;
  gap: 8px;
}

.guest-top-row {
  grid-template-columns: 42px minmax(180px, 1fr) minmax(104px, auto) minmax(112px, auto) 46px;
}

.member-top-row {
  grid-template-columns: 42px minmax(180px, 1fr) minmax(128px, auto) 42px 46px;
}

.guest-top-row .logo-pill,
.member-top-row .logo-pill {
  width: 100%;
  min-height: 48px;
  padding-inline: 12px;
}

.member-mini {
  min-height: 48px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 16px;
  background: rgba(255, 251, 244, 0.94);
  color: var(--ink);
  border: 1px solid rgba(203, 171, 105, 0.2);
}

.member-mini span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.member-mini strong {
  color: var(--color-primary-dark);
  font-size: 15px;
  line-height: 1;
}

.header-status-row {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
  align-items: stretch;
  gap: 8px;
}

.guest-status-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.guest-state-pill,
.quick-toggle,
.quick-menu-chip {
  min-height: 40px;
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
}

.guest-state-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  color: #fff7e7;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(203, 171, 105, 0.16);
}

.quick-toggle {
  color: #1b150f;
  background: linear-gradient(145deg, #f6dd9b, #e0a116);
  box-shadow: 0 10px 20px rgba(176, 122, 0, 0.18);
}

.quick-toggle span {
  display: inline-block;
  margin-left: 4px;
}

.quick-menu {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.24s ease, opacity 0.2s ease, margin-top 0.24s ease;
  opacity: 0;
  margin-top: 0;
}

.quick-menu.open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 8px;
}

.quick-menu-inner {
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quick-menu-chip {
  color: var(--ink);
  background: rgba(255, 251, 244, 0.94);
  border: 1px solid rgba(203, 171, 105, 0.2);
}

.notification-bell {
  position: relative;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.notification-bell:hover {
  transform: translateY(-1px);
}

.notification-bell.unread {
  background: linear-gradient(145deg, #f53845, #b80f20);
  box-shadow: 0 0 0 5px rgba(245, 56, 69, 0.14), 0 16px 30px rgba(184, 15, 32, 0.32);
  animation: bellPulse 1.7s ease-in-out infinite;
}

.notification-bell.read {
  background: linear-gradient(145deg, #fff1c4, #f3c66c);
  color: #7b4b08;
}

.bell-icon {
  font-size: 20px;
  line-height: 1;
}

.bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: #fff;
  color: #b80f20;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid rgba(184, 15, 32, 0.18);
}

.floating-bell {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
}

.floating-bell .bell-icon {
  font-size: 24px;
}

@keyframes bellPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.announcement-strip {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border-radius: 16px;
  padding: 0 12px;
  border: 1px solid rgba(203, 171, 105, 0.18);
  background: linear-gradient(145deg, rgba(255, 251, 244, 0.97), rgba(241, 229, 204, 0.94));
  box-shadow: var(--shadow-soft);
}

.announcement-label {
  flex: 0 0 auto;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: #1b150f;
  background: linear-gradient(145deg, var(--color-primary), #f2c251);
  font-size: 12px;
  font-weight: 800;
}

.announcement-marquee {
  min-width: 0;
  overflow: hidden;
}

.announcement-track {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  white-space: nowrap;
  padding-left: 100%;
  animation: demo-marquee 28s linear infinite;
}

.announcement-item {
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.announcement-dot {
  color: var(--color-primary-dark);
}

.guest-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.guest-home-panel {
  background: linear-gradient(145deg, rgba(255, 251, 244, 0.98), rgba(238, 247, 241, 0.96));
}

.notification-panel {
  width: min(100%, 720px);
}

.notification-detail-panel {
  width: min(100%, 640px);
}

.notification-center {
  display: grid;
  gap: 12px;
}

.notification-summary,
.notification-card-head,
.notification-detail-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.notification-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.notification-tabs::-webkit-scrollbar {
  display: none;
}

.notification-tab {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(203, 171, 105, 0.18);
  font-size: 13px;
  font-weight: 700;
}

.notification-tab.active {
  color: #1b150f;
  background: linear-gradient(145deg, var(--color-primary), #f2c251);
}

.notification-list {
  display: grid;
  gap: 10px;
}

.notification-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.98);
  border: 1px solid rgba(203, 171, 105, 0.16);
  box-shadow: var(--shadow-soft);
}

.notification-card.unread {
  border-color: rgba(245, 56, 69, 0.26);
  background: linear-gradient(145deg, rgba(255, 249, 241, 0.98), rgba(255, 239, 241, 0.96));
}

.notification-card-main {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  padding: 0;
  text-align: left;
  background: transparent;
}

.notification-cover,
.notification-hero {
  display: grid;
  place-items: center;
  color: #fff8eb;
  font-weight: 800;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(18, 17, 16, 0.16), rgba(224, 161, 22, 0.2)),
    linear-gradient(145deg, #18242f, #8b1c24 52%, #d7a12b);
}

.notification-cover {
  min-height: 92px;
  border-radius: 16px;
  font-size: 13px;
}

/* When a real image is set, show it at its real proportions (no crop). */
.notification-cover.notification-cover-img {
  padding: 0;
  overflow: hidden;
  background: #0c1420;
  min-height: 0;
  height: auto;
  display: block;
}
.notification-cover.notification-cover-img img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: inherit;
}

.notification-copy h4,
.notification-detail h3 {
  margin: 8px 0 4px;
  line-height: 1.22;
}

.notification-copy p,
.notification-detail p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.notification-richtext {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notification-richtext p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
  word-break: break-word;
}

.notification-richtext strong { color: var(--text, #14202b); font-weight: 800; }
.notification-richtext em { font-style: italic; }

.notification-richtext a {
  color: #0a66c2;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

/* Rich (Tiptap) content inside the compact news modal. Reset the flex layout
   for headings/media so block elements stack normally. */
.notification-richtext h2 { margin: 14px 0 6px; font-size: 17px; font-weight: 800; color: var(--text, #14202b); line-height: 1.35; }
.notification-richtext h3 { margin: 12px 0 6px; font-size: 15px; font-weight: 800; color: var(--text, #14202b); line-height: 1.35; }
.notification-richtext ul,
.notification-richtext ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.notification-richtext li { margin: 2px 0; }
.notification-richtext blockquote { margin: 0; padding: 6px 12px; border-left: 3px solid var(--accent, #0a66c2); color: var(--muted); font-style: italic; }
.notification-richtext pre { margin: 0; padding: 12px; background: #0f172a; color: #e2e8f0; border-radius: 10px; overflow-x: auto; font-size: 12.5px; }
.notification-richtext pre code { background: none; color: inherit; padding: 0; }
.notification-richtext code { background: rgba(0,0,0,0.06); padding: 1px 5px; border-radius: 5px; font-size: 0.9em; }
.notification-richtext hr { border: none; border-top: 1px solid rgba(0,0,0,0.1); margin: 4px 0; width: 100%; }
.notification-richtext img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.notification-richtext figure { margin: 0; }
.notification-richtext figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 4px; }
.notification-richtext iframe { max-width: 100%; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; }

/* Entry/login promo popup */
.promo-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 10, 18, 0.72);
  backdrop-filter: blur(3px);
  z-index: 1400;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.promo-popup-overlay.show { opacity: 1; pointer-events: auto; }
.promo-popup-wrap {
  position: fixed;
  inset: 0;
  z-index: 1401;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  pointer-events: none;
}
.promo-popup-card {
  position: relative;
  width: min(380px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c2432 0%, #141a25 100%);
  border: 1px solid rgba(244, 200, 93, 0.35);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  animation: promoPopupIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes promoPopupIn {
  from { transform: translateY(16px) scale(0.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.promo-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}
.promo-popup-hero {
  height: 150px;
  background-size: cover;
  background-position: center;
  border-radius: 18px 18px 0 0;
}
.promo-popup-hero-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  background: radial-gradient(circle at 50% 40%, rgba(244, 200, 93, 0.22), transparent 70%);
}
.promo-popup-body { padding: 16px 18px 18px; }
.promo-popup-meta { margin-bottom: 8px; }
.promo-popup-body h3 {
  margin: 4px 0 6px;
  font-size: 18px;
  color: #f4c85d;
  line-height: 1.35;
}
.promo-popup-body > p {
  margin: 0 0 14px;
  color: #c7cfdb;
  font-size: 13.5px;
  line-height: 1.55;
}
.promo-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.promo-popup-actions .primary-btn { width: 100%; }
.promo-popup-more {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #e7ecf3;
  font-weight: 700;
  cursor: pointer;
}
.promo-popup-suppress {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 6px;
  border: none;
  background: none;
  color: #8a93a3;
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.notification-tag {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: #8b4f04;
  background: rgba(224, 161, 22, 0.14);
  font-size: 12px;
  font-weight: 800;
}

.notification-more {
  justify-self: end;
  min-height: 28px;
}

.notification-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.empty-icon {
  font-size: 28px;
}

.notification-detail {
  display: grid;
  gap: 12px;
}

.notification-hero {
  min-height: 210px;
  border-radius: 22px;
  font-size: 26px;
}
/* Announcement image hero: real <img> for SEO; show real proportions (no crop). */
.notification-hero-img { overflow: hidden; padding: 0; display: block; min-height: 0; height: auto; }
.notification-hero-img img { display: block; width: 100%; height: auto; object-fit: contain; border-radius: 22px; }
/* ⚡ Quick-takeover popup — full-screen announcement on load (every page). */
.qtakeover-overlay{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(6,8,20,.78);backdrop-filter:blur(3px);animation:qtoFade .18s ease-out}
.qtakeover-card{position:relative;width:min(440px,92vw);max-height:90vh;overflow:auto;background:linear-gradient(180deg,#0c2033,#06131f);border:1px solid rgba(244,200,93,.35);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.6);animation:qtoPop .22s cubic-bezier(.2,.9,.3,1.2)}
.qtakeover-x{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(244,200,93,.7);background:rgba(6,19,31,.72);color:#ffd27a;font-size:18px;font-weight:700;cursor:pointer;line-height:1;transition:background .15s,transform .15s;box-shadow:0 4px 14px rgba(0,0,0,.4)}
.qtakeover-x:hover{background:#f4c85d;color:#06131f;transform:scale(1.08)}
/* Hero image locked to a 4:3 ratio per the template. */
.qtakeover-hero{width:100%;background:#0b0b17;aspect-ratio:4/3;overflow:hidden}
.qtakeover-hero img{display:block;width:100%;height:100%;object-fit:cover}
.qtakeover-card.qtakeover-image-only .qtakeover-hero{border-radius:22px}
.qtakeover-body{padding:18px 20px 22px;text-align:center;color:#eaf1f8}
.qtakeover-badge{display:inline-block;font-size:12px;font-weight:800;color:#ffd27a;background:rgba(244,200,93,.14);border:1px solid rgba(244,200,93,.4);padding:3px 12px;border-radius:999px;margin-bottom:10px}
.qtakeover-title{font-size:19px;font-weight:800;margin:0 0 8px;line-height:1.35;color:#fff}
.qtakeover-detail{font-size:14px;color:#9fb4cc;line-height:1.55;margin:0 0 16px}
.qtakeover-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.qtakeover-cta{text-decoration:none;padding:11px 20px;border-radius:12px;font-weight:700;color:#1b1130;background:linear-gradient(135deg,#ffd27a,#f5a623)}
.qtakeover-ok{padding:11px 20px;border-radius:12px;font-weight:700;border:1px solid rgba(244,200,93,.45);background:transparent;color:#f4e4c0;cursor:pointer}
@keyframes qtoFade{from{opacity:0}to{opacity:1}}
@keyframes qtoPop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

.notification-detail-meta {
  justify-content: flex-start;
  color: var(--muted);
  font-size: 13px;
}

@media (max-width: 768px) {
  :root {
    --header-h: 154px;
    --header-expanded-h: 224px;
  }

  .topbar {
    padding: 8px 8px 0;
  }

  .guest-top-row,
  .member-top-row {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
  }

  .guest-top-row .logo-pill,
  .member-top-row .logo-pill {
    grid-column: 2;
    grid-row: 1;
  }

  .guest-top-row > .icon-btn,
  .member-top-row > .icon-btn:first-child {
    grid-column: 1;
    grid-row: 1;
  }

  .guest-top-row .top-bell,
  .member-top-row .top-bell {
    grid-column: 3;
    grid-row: 1;
  }

  .guest-top-row .secondary-btn {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .guest-top-row .primary-btn {
    grid-column: 3;
    grid-row: 2;
  }

  .member-top-row .member-mini {
    grid-column: 1 / 3;
    grid-row: 2;
  }

  .member-top-row > .icon-btn:not(:first-child) {
    grid-column: 3;
    grid-row: 2;
  }

  .header-status-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-status-row .quick-toggle {
    grid-column: 1 / -1;
  }

  .guest-status-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .guest-status-row .quick-toggle {
    grid-column: auto;
  }

  .page-wrap {
    padding-top: calc(var(--header-h) + 10px);
  }

  .quick-open .page-wrap {
    padding-top: calc(var(--header-expanded-h) + 10px);
  }

  .announcement-strip {
    min-height: 40px;
    border-radius: 14px;
  }

  .guest-action-grid {
    grid-template-columns: 1fr;
  }

  .notification-card-main {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  .notification-cover {
    min-height: 84px;
    font-size: 12px;
  }

  .notification-hero {
    min-height: 176px;
    font-size: 22px;
  }

  .floating-bell {
    width: 56px;
    height: 56px;
    flex-basis: 56px;
  }
}

@media (max-width: 430px) {
  :root {
    --header-h: 162px;
    --header-expanded-h: 246px;
  }

  .compact-header {
    padding: 8px;
  }

  .guest-top-row .primary-btn,
  .guest-top-row .secondary-btn {
    min-height: 40px;
    padding: 8px 8px;
    font-size: 12px;
  }

  .guest-state-pill,
  .quick-toggle,
  .quick-menu-chip {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
  }

  .notification-card-main {
    grid-template-columns: 1fr;
  }

  .notification-cover {
    min-height: 112px;
  }
}

/* Home Redesign Prototype v2 */
body.home-v2-active {
  --v2-bg: #06111c;
  --v2-surface: #0a2231;
  --v2-surface-2: #10364a;
  --v2-lime: #a7d93b;
  --v2-lime-soft: rgba(167, 217, 59, 0.14);
  --v2-gold: #d8a63a;
  --v2-gold-soft: rgba(216, 166, 58, 0.16);
  --v2-text: #ffffff;
  --v2-muted: #a8bac7;
  --v2-danger: #ff4d6d;
  --v2-line: rgba(167, 217, 59, 0.16);
  --v2-card-line: rgba(168, 186, 199, 0.14);
  /* clip (not hidden) so the sticky header keeps sticking to the viewport */
  overflow-x: clip;
  min-height: 100vh;
  color: var(--v2-text);
  background-color: #06111c;
  background:
    linear-gradient(180deg, #06111c 0%, #071b2a 45%, #030b12 100%);
}

html:has(body.home-v2-active),
body.home-v2-active #app {
  min-height: 100vh;
  background: #06111c;
}

body.home-v2-active::before {
  opacity: 0;
}

.home-v2 {
  --v2-bg: #06111c;
  --v2-surface: #0a2231;
  --v2-surface-2: #10364a;
  --v2-lime: #a7d93b;
  --v2-lime-soft: rgba(167, 217, 59, 0.14);
  --v2-gold: #d8a63a;
  --v2-gold-soft: rgba(216, 166, 58, 0.16);
  --v2-text: #ffffff;
  --v2-muted: #a8bac7;
  --v2-danger: #ff4d6d;
  --v2-line: rgba(167, 217, 59, 0.16);
  --v2-card-line: rgba(168, 186, 199, 0.14);
  --v2-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
  --v2-layer-bg:
    radial-gradient(circle at 12% 0%, rgba(167, 217, 59, 0.08), transparent 30%),
    radial-gradient(circle at 96% 12%, rgba(216, 166, 58, 0.09), transparent 28%),
    linear-gradient(145deg, rgba(12, 38, 53, 0.96), rgba(5, 17, 28, 0.95) 58%, rgba(8, 27, 40, 0.94));
  --v2-layer-bg-subtle:
    radial-gradient(circle at 10% 0%, rgba(167, 217, 59, 0.055), transparent 26%),
    linear-gradient(145deg, rgba(9, 30, 45, 0.92), rgba(4, 14, 24, 0.92));
  --v2-layer-border: rgba(178, 205, 217, 0.16);
  --v2-layer-border-hover: rgba(167, 217, 59, 0.28);
  --v2-layer-shadow: 0 18px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.055);
  --v2-layer-shadow-hover: 0 22px 44px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.075);
  --v2-watermark: linear-gradient(135deg, rgba(167, 217, 59, 0.72), rgba(216, 166, 58, 0.62));
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--v2-text);
  background:
    linear-gradient(180deg, rgba(6, 17, 28, 0.98), rgba(3, 11, 18, 1));
  width: 100%;
  max-width: 100vw;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.45;
}

.home-v2 button,
.home-v2 input {
  font: inherit;
  max-width: 100%;
}

.home-v2 button {
  -webkit-tap-highlight-color: transparent;
}

.home-v2-icon {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: currentColor;
  line-height: 1;
}

.home-v2-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-v2-shell {
  position: relative;
  width: 100%;
  max-width: 100vw;
  /* Use clip (not hidden) so the sticky header still sticks to the viewport.
     overflow-x:hidden creates a scroll container that breaks position:sticky. */
  overflow-x: clip;
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}

.home-v2-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 40;
  padding: 10px 16px;
  background:
    linear-gradient(180deg, rgba(8, 22, 35, 0.94), rgba(4, 13, 22, 0.9));
  border-bottom: 1px solid rgba(168, 186, 199, 0.14);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(18px);
}

.home-v2-header-inner {
  display: grid;
  grid-template-columns: 42px minmax(150px, 190px) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 14px;
  max-width: 1540px;
  margin: 0 auto;
}

.home-v2-icon-btn,
.home-v2-profile {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: var(--v2-text);
  background: rgba(9, 30, 45, 0.86);
  border: 1px solid rgba(168, 186, 199, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.home-v2-icon-btn .home-v2-icon,
.home-v2-profile .home-v2-icon,
.home-v2-bell .home-v2-icon {
  width: 20px;
  height: 20px;
}

.home-v2-icon-btn:hover,
.home-v2-profile:hover,
.home-v2-bell:hover {
  transform: translateY(-1px);
  color: var(--v2-lime);
  background: rgba(13, 46, 66, 0.96);
  border-color: rgba(167, 217, 59, 0.28);
}

/* Highlight the refresh (↻) button while a live game is in progress so the
   member knows to tap it to pull their credit back from the game. */
.home-v2-icon-btn.live-active,
.mini-refresh-btn.live-active,
.wallet-refresh-btn.live-active {
  color: #08131c;
  background: linear-gradient(135deg, #f7d872 0%, #f4c04a 100%);
  border-color: #f4c04a;
  font-weight: 700;
  animation: live-refresh-pulse 1.2s ease-in-out infinite;
}

@keyframes live-refresh-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(244, 192, 74, 0.55);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(244, 192, 74, 0);
    transform: scale(1.08);
  }
}

.home-v2-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: #f5cc68;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(216, 166, 58, 0.24);
}

.home-v2-logo {
  width: 52px;
  height: 38px;
  filter: drop-shadow(0 5px 14px rgba(216, 166, 58, 0.26));
}

.home-v2-logo .brand-logo-fallback,
.home-v2-footer-logo .brand-logo-fallback {
  border-radius: 8px;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.5), transparent 22%),
    linear-gradient(145deg, #f2c85b, #a7d93b 58%, #4aa7bd);
  color: #06111c;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38), 0 10px 18px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  font-weight: 900;
}

.home-v2-search {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 34px;
  align-items: center;
  min-height: 42px;
  padding: 0 6px 0 13px;
  border-radius: 999px;
  background: rgba(5, 18, 29, 0.72);
  border: 1px solid rgba(168, 186, 199, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.home-v2-search-icon {
  display: grid;
  place-items: center;
  color: var(--v2-lime);
}

.home-v2-search input {
  width: 100%;
  min-width: 0;
  color: var(--v2-text);
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 13px;
  font-weight: 600;
}

.home-v2-search input::placeholder {
  color: rgba(159, 184, 200, 0.78);
}

.home-v2-search button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--v2-muted);
  background: rgba(255, 255, 255, 0.06);
}

.home-v2-search button .home-v2-icon {
  width: 16px;
  height: 16px;
}

.home-v2-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}

.home-v2-login-btn,
.home-v2-register-btn,
.home-v2-wallet-actions button,
.home-v2-guest-cta button,
.home-v2-guest-panel button {
  min-height: 40px;
  padding: 0 15px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  white-space: nowrap;
  border: 1px solid rgba(178, 205, 217, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.home-v2-login-btn {
  color: var(--v2-text);
  background:
    radial-gradient(circle at 10% 0%, rgba(167, 217, 59, 0.075), transparent 30%),
    linear-gradient(145deg, rgba(8, 28, 43, 0.82), rgba(3, 14, 23, 0.82));
}

.home-v2-register-btn,
.home-v2-wallet-actions button:first-child,
.home-v2-guest-cta button:last-child,
.home-v2-guest-panel button:first-of-type {
  color: #07131a;
  background:
    radial-gradient(circle at 26% 12%, rgba(255, 255, 255, 0.5), transparent 20%),
    linear-gradient(135deg, #a7d93b, #e2bd56);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 10px 20px rgba(167, 217, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.home-v2-bell {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: var(--v2-text);
  background: rgba(9, 30, 45, 0.86);
  border: 1px solid rgba(168, 186, 199, 0.16);
  border-radius: 12px;
  box-shadow: none;
  animation: none;
}

.home-v2-bell .bell-icon {
  display: grid;
  place-items: center;
  color: currentColor;
}

.home-v2-bell.unread {
  color: #fff9f9;
  background:
    radial-gradient(circle at 68% 28%, rgba(255, 255, 255, 0.16), transparent 30%),
    linear-gradient(145deg, rgba(77, 30, 45, 0.9), rgba(16, 42, 58, 0.94));
  border-color: rgba(255, 88, 116, 0.48);
  box-shadow: 0 0 0 3px rgba(255, 77, 109, 0.1), 0 12px 24px rgba(0, 0, 0, 0.22);
}

.home-v2-bell.unread .bell-badge {
  top: -5px;
  right: -5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #ff365f;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.34);
  font-size: 10px;
  box-shadow: 0 0 12px rgba(255, 54, 95, 0.28);
}

.home-v2-bell.read {
  color: var(--v2-muted);
  opacity: 0.84;
  background: rgba(7, 24, 37, 0.72);
}

.home-v2-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px 0 11px;
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(4, 15, 25, 0.7);
  border: 1px solid rgba(168, 186, 199, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 20px rgba(0, 0, 0, 0.16);
}

.home-v2-pill .home-v2-icon {
  width: 17px;
  height: 17px;
  opacity: 0.95;
}

.home-v2-pill > span:not(.home-v2-icon) {
  color: rgba(168, 186, 199, 0.82);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
}

.home-v2-pill strong {
  color: var(--v2-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.home-v2-pill.credit {
  color: #f2c85b;
  border-color: rgba(216, 166, 58, 0.42);
}

.home-v2-pill.diamond {
  color: #b9e95d;
  border-color: rgba(167, 217, 59, 0.38);
}

.home-v2-pill.gold {
  color: #ffcf3f;
  border-color: rgba(255, 191, 0, 0.5);
  background: linear-gradient(180deg, rgba(255, 191, 0, 0.12), rgba(255, 191, 0, 0.04));
}

.home-v2-member-strip {
  display: none;
  max-width: 1540px;
  margin: 7px auto 0;
  gap: 8px;
  justify-content: center;
}

.home-v2-member-strip .home-v2-pill {
  min-height: 32px;
  justify-content: center;
  flex: 0 1 138px;
  padding: 0 10px;
}

.home-v2-member-strip .home-v2-pill strong {
  font-size: 12px;
}

.home-v2-main {
  padding: 14px 12px 22px;
  max-width: 100vw;
  overflow-x: hidden;
}

.home-v2-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 1500px;
  margin: 0 auto;
  min-width: 0;
}

.home-v2-left {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.home-v2-announcement {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--v2-text);
  background: rgba(10, 34, 49, 0.86);
  border: 1px solid rgba(216, 166, 58, 0.2);
  overflow: hidden;
  cursor: pointer;
}

.home-v2-announcement > span {
  position: relative;
  z-index: 2;
  color: var(--v2-gold);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.home-v2-announcement-marquee {
  min-width: 0;
  overflow: hidden;
}

.home-v2-announcement-track {
  display: inline-flex;
  align-items: center;
  width: max-content;
  min-width: 100%;
  gap: 12px;
  animation: home-v2-marquee 34s linear infinite;
  will-change: transform;
}

.home-v2-announcement-track::-webkit-scrollbar,
.home-v2-scroll-row::-webkit-scrollbar,
.home-v2-provider-row::-webkit-scrollbar {
  display: none;
}

.home-v2-announcement-track button {
  flex: 0 0 auto;
  color: var(--v2-muted);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}

.home-v2-announcement:hover .home-v2-announcement-track {
  animation-play-state: paused;
}

.home-v2-announcement-dot {
  flex: 0 0 auto;
  color: rgba(216, 166, 58, 0.84);
  font-size: 13px;
}

@keyframes home-v2-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.home-v2-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.home-v2-hero-main,
.home-v2-hero-side,
.home-v2-section,
.home-v2-wallet,
.home-v2-actions,
.home-v2-guest-cta,
.home-v2-guest-panel,
.home-v2-mini-list,
.home-v2-contact {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--v2-layer-border);
  background: var(--v2-layer-bg);
  box-shadow: var(--v2-layer-shadow);
}

.home-v2-hero-side::before,
.home-v2-section::before,
.home-v2-wallet::before,
.home-v2-actions::before,
.home-v2-guest-cta::before,
.home-v2-guest-panel::before,
.home-v2-mini-list::before,
.home-v2-contact::before,
.home-v2-bottom-section::before,
.home-v2-help-strip::before,
.home-v2-footer::before {
  content: "";
  position: absolute;
  right: -24px;
  top: -18px;
  width: 132px;
  height: 132px;
  background: var(--v2-watermark);
  opacity: 0.055;
  pointer-events: none;
  transform: rotate(-12deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 5 54 18v28L32 59 10 46V18L32 5Z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M32 5v54M10 18l22 13 22-13M10 46l22-13 22 13' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 5 54 18v28L32 59 10 46V18L32 5Z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M32 5v54M10 18l22 13 22-13M10 46l22-13 22 13' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-v2-hero-side > *,
.home-v2-section > *,
.home-v2-wallet > *,
.home-v2-actions > *,
.home-v2-guest-cta > *,
.home-v2-guest-panel > *,
.home-v2-mini-list > *,
.home-v2-contact > *,
.home-v2-bottom-section > *,
.home-v2-help-strip > *,
.home-v2-footer > * {
  position: relative;
  z-index: 1;
}

.home-v2-hero-main {
  position: relative;
  min-height: 212px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #092033;
}

.home-v2-slider-track {
  display: flex;
  width: 100%;
  min-height: inherit;
  transform: translate3d(calc(var(--active-index, 0) * -100%), 0, 0);
  transition: transform 0.5s ease;
}

.home-v2-slide {
  position: relative;
  flex: 0 0 100%;
  display: grid;
  align-content: end;
  min-width: 0;
  min-height: inherit;
  padding: 22px;
  overflow: hidden;
  background: var(--banner-bg);
  isolation: isolate;
}

.home-v2-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--banner-accent) 46%, transparent), transparent 24%),
    linear-gradient(90deg, rgba(3, 11, 18, 0.84), rgba(3, 11, 18, 0.32) 58%, rgba(3, 11, 18, 0.08)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 16px);
  pointer-events: none;
}

.home-v2-slide::after {
  content: "";
  position: absolute;
  right: -9%;
  bottom: -34%;
  width: min(420px, 58vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.24), transparent 10%),
    conic-gradient(from 20deg, rgba(255, 255, 255, 0.08), color-mix(in srgb, var(--banner-accent) 64%, transparent), rgba(255, 255, 255, 0.08), transparent);
  opacity: 0.72;
  filter: blur(0.1px);
  pointer-events: none;
}

.home-v2-slide > * {
  position: relative;
  z-index: 2;
}

.home-v2-slide-art {
  position: absolute;
  top: 18px;
  right: 22px;
  bottom: 18px;
  width: min(36%, 320px);
  z-index: 1;
  pointer-events: none;
}

.home-v2-slide-art span,
.home-v2-slide-art i,
.home-v2-slide-art b {
  position: absolute;
  display: block;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.22);
}

.home-v2-slide-art span {
  right: 12%;
  top: 6%;
  width: 52%;
  height: 42%;
  background: linear-gradient(145deg, color-mix(in srgb, var(--banner-accent) 62%, #ffffff 10%), rgba(255, 255, 255, 0.08));
}

.home-v2-slide-art i {
  right: 0;
  bottom: 12%;
  width: 68%;
  height: 38%;
  transform: rotate(-5deg);
}

.home-v2-slide-art b {
  left: 8%;
  bottom: 28%;
  width: 34%;
  height: 30%;
  transform: rotate(8deg);
  background: rgba(255, 255, 255, 0.1);
}

.home-v2-hero-copy {
  max-width: min(620px, 72%);
}

.home-v2-hero-main span,
.home-v2-hero-side span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #06111c;
  background: var(--v2-gold);
  font-size: 12px;
  font-weight: 900;
}

.home-v2-hero-main h1 {
  margin: 0;
  max-width: 13ch;
  font-size: 42px;
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.home-v2-hero-main p,
.home-v2-hero-side p,
.home-v2-section-head p,
.home-v2-card-body p,
.home-v2-guest-cta p,
.home-v2-guest-panel p,
.home-v2-mini-list span {
  margin: 0;
  color: var(--v2-muted);
  font-size: 13px;
  font-weight: 500;
}

.home-v2-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.home-v2-hero-actions button,
.home-v2-section-head button,
.home-v2-card-body button,
.home-v2-contact button {
  position: relative;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  color: #06111c;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.46), transparent 20%),
    linear-gradient(135deg, var(--v2-lime), #d7bd4b);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 20px rgba(167, 217, 59, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.32);
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.home-v2-hero-actions button:last-child,
.home-v2-section-head button,
.home-v2-contact button {
  color: var(--v2-text);
  background:
    radial-gradient(circle at 8% 0%, rgba(167, 217, 59, 0.09), transparent 30%),
    linear-gradient(145deg, rgba(16, 54, 74, 0.92), rgba(6, 21, 33, 0.92));
  border: 1px solid rgba(178, 205, 217, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.home-v2-hero-actions button:hover,
.home-v2-section-head button:hover,
.home-v2-card-body button:hover,
.home-v2-contact button:hover,
.home-v2-wallet-actions button:hover,
.home-v2-guest-cta button:hover,
.home-v2-guest-panel button:hover,
.home-v2-bottom-head button:hover,
.home-v2-footer-admin:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 217, 59, 0.3);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  filter: saturate(1.02);
}

.home-v2-hero-actions button:active,
.home-v2-section-head button:active,
.home-v2-card-body button:active,
.home-v2-contact button:active,
.home-v2-wallet-actions button:active,
.home-v2-guest-cta button:active,
.home-v2-guest-panel button:active,
.home-v2-bottom-head button:active,
.home-v2-footer-admin:active {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 1px 8px rgba(0, 0, 0, 0.18);
}

.home-v2-dots {
  position: absolute;
  right: 16px;
  bottom: 14px;
  display: inline-flex;
  gap: 6px;
  z-index: 4;
}

.home-v2-dots button {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}

.home-v2-dots button.active {
  width: 22px;
  background: var(--v2-lime);
}

.home-v2-hero-nav {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  color: var(--v2-text);
  background: rgba(3, 11, 18, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.home-v2-hero-nav:hover {
  background: rgba(10, 34, 49, 0.82);
  border-color: rgba(167, 217, 59, 0.32);
}

.home-v2-hero-nav:active {
  transform: translateY(-50%) scale(0.96);
}

.home-v2-hero-nav.prev {
  left: 12px;
}

.home-v2-hero-nav.next {
  right: 12px;
}

.home-v2-hero-nav .home-v2-icon {
  width: 18px;
  height: 18px;
}

.home-v2-hero-side {
  display: none;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(10, 34, 49, 0.96), rgba(6, 17, 28, 0.96)),
    linear-gradient(135deg, rgba(216, 166, 58, 0.2), rgba(167, 217, 59, 0.12));
}

.home-v2-hero-side strong {
  display: block;
  font-size: 24px;
  line-height: 1.16;
}

.home-v2-hero-side-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.home-v2-hero-side-grid button {
  min-height: 38px;
  border-radius: 8px;
  color: var(--v2-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--v2-card-line);
  font-weight: 800;
}

.home-v2-category {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.home-v2-scroll-row,
.home-v2-provider-row {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.home-v2-scroll-row button {
  position: relative;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--v2-muted);
  background:
    linear-gradient(145deg, rgba(11, 35, 50, 0.88), rgba(5, 18, 29, 0.88));
  border: 1px solid rgba(178, 205, 217, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-weight: 800;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.home-v2-scroll-row button:hover {
  transform: translateY(-1px);
  color: var(--v2-text);
  border-color: rgba(167, 217, 59, 0.22);
  background:
    radial-gradient(circle at 20% 0%, rgba(167, 217, 59, 0.09), transparent 32%),
    linear-gradient(145deg, rgba(14, 44, 61, 0.94), rgba(5, 18, 29, 0.94));
}

.home-v2-scroll-row button.active {
  color: #06111c;
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.48), transparent 20%),
    linear-gradient(135deg, var(--v2-lime), #dce985);
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(167, 217, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.home-v2-scroll-row button:active {
  transform: translateY(1px) scale(0.98);
}

.home-v2-section {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.home-v2-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-v2-section-head h2,
.home-v2-actions h2,
.home-v2-guest-cta h2,
.home-v2-guest-panel h2,
.home-v2-mini-list h2 {
  margin: 0;
  color: var(--v2-text);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0;
}

.home-v2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.home-v2-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
  color: var(--v2-text);
  background: var(--v2-layer-bg-subtle);
  border: 1px solid rgba(178, 205, 217, 0.14);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  cursor: pointer;
}

.home-v2-card::before {
  content: "";
  position: absolute;
  right: -28px;
  top: -22px;
  width: 96px;
  height: 96px;
  background: var(--v2-watermark);
  opacity: 0.045;
  pointer-events: none;
  transform: rotate(16deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 12h32v40H16z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M23 24h18M23 34h12M42 12v40' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 12h32v40H16z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M23 24h18M23 34h12M42 12v40' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-v2-card > * {
  position: relative;
  z-index: 1;
}

.home-v2-card:hover {
  transform: translateY(-3px);
  border-color: var(--v2-layer-border-hover);
  background:
    radial-gradient(circle at 18% 0%, rgba(167, 217, 59, 0.09), transparent 30%),
    linear-gradient(145deg, rgba(16, 54, 74, 0.96), rgba(5, 17, 28, 0.96));
  box-shadow: var(--v2-layer-shadow-hover);
}

.home-v2-card:active {
  transform: translateY(1px) scale(0.99);
}

/* "NEXT »" card — last cell of each home section, runs into the full lobby */
.home-v2-next-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 150px;
  border-radius: 8px;
  border: 1px dashed rgba(167, 217, 59, 0.5);
  background: linear-gradient(145deg, rgba(167, 217, 59, 0.1), rgba(5, 17, 28, 0.6));
  color: #cfe8a0;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.home-v2-next-card .home-v2-next-arrow {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: #a7d93b;
}
.home-v2-next-card strong { font-size: 15px; font-weight: 800; }
.home-v2-next-card small { font-size: 11px; opacity: 0.8; }
.home-v2-next-card:hover {
  transform: translateY(-3px);
  border-color: #a7d93b;
  background: linear-gradient(145deg, rgba(167, 217, 59, 0.2), rgba(5, 17, 28, 0.7));
}
.home-v2-next-card:active { transform: translateY(1px) scale(0.99); }
.home-v2-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid rgba(178, 205, 217, 0.14);
  background: var(--v2-layer-bg-subtle);
  color: #8ea3b5;
  text-align: center;
}
.home-v2-empty strong { color: #cfe0ee; font-size: 14px; }
.home-v2-empty span { font-size: 12px; }

.home-v2-card-art {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 122px;
  padding: 10px;
  overflow: hidden;
}

.home-v2-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, 0.24), transparent 18%),
    linear-gradient(180deg, rgba(3, 11, 18, 0.02), rgba(3, 11, 18, 0.48));
  pointer-events: none;
}

.home-v2-card-art span {
  position: relative;
  z-index: 1;
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  color: #06111c;
  background: var(--v2-gold);
  font-size: 11px;
  font-weight: 900;
}

.home-v2-card-art strong {
  position: relative;
  z-index: 1;
  justify-self: end;
  color: rgba(255, 255, 255, 0.76);
  font-size: 28px;
  line-height: 1;
}

.home-v2-card-art em {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-v2-card-maint {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.9);
  color: #1a1206;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
}

.home-v2-card-body {
  display: grid;
  gap: 7px;
  padding: 10px;
  grid-template-rows: minmax(38px, auto) auto auto;
}

.home-v2-card-body h3 {
  margin: 0;
  min-height: 38px;
  color: var(--v2-text);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0;
}

.home-v2-card-body p {
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-v2-card-body button {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  box-shadow: none;
}

.home-v2-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  gap: 4px;
  border-radius: 8px;
  color: var(--v2-muted);
  background: rgba(6, 17, 28, 0.62);
  border: 1px dashed rgba(168, 186, 199, 0.24);
  text-align: center;
}

.home-v2-empty strong {
  color: var(--v2-text);
}

.home-v2-empty span {
  padding: 0 12px;
  color: var(--v2-muted);
  font-size: 13px;
}

.home-v2-provider-chip {
  position: relative;
  flex: 0 0 138px;
  display: grid;
  gap: 4px;
  min-height: 76px;
  padding: 12px;
  border-radius: 8px;
  color: var(--v2-text);
  background: var(--v2-layer-bg-subtle);
  border: 1px solid rgba(216, 166, 58, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-align: left;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.home-v2-provider-chip::before {
  content: "";
  position: absolute;
  right: -18px;
  top: -18px;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(216, 166, 58, 0.18);
  border-radius: 18px;
  opacity: 0.42;
  transform: rotate(18deg);
}

.home-v2-provider-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 217, 59, 0.26);
  background:
    radial-gradient(circle at 88% 10%, rgba(216, 166, 58, 0.11), transparent 26%),
    linear-gradient(145deg, rgba(16, 54, 74, 0.96), rgba(5, 17, 28, 0.96));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.home-v2-provider-chip:active {
  transform: translateY(1px) scale(0.99);
}

.home-v2-provider-chip span {
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 700;
}

.home-v2-wallet,
.home-v2-actions,
.home-v2-guest-cta,
.home-v2-guest-panel,
.home-v2-mini-list,
.home-v2-contact {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.home-v2-wallet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-v2-wallet-head span {
  color: var(--v2-gold);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.home-v2-wallet-head strong {
  color: var(--v2-gold);
  font-size: 28px;
  line-height: 1;
}

.home-v2-wallet-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-v2-wallet-grid div {
  position: relative;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(6, 22, 34, 0.78), rgba(4, 14, 24, 0.72));
  border: 1px solid rgba(178, 205, 217, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.home-v2-wallet-grid div::after {
  content: "";
  position: absolute;
  right: -12px;
  top: -16px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(167, 217, 59, 0.06);
  pointer-events: none;
}

.home-v2-wallet-grid span {
  display: block;
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 800;
}

.home-v2-wallet-grid strong {
  display: block;
  overflow-wrap: anywhere;
  color: var(--v2-text);
  font-size: 14px;
}

/* Two-wallet accents: เงินสด (เขียว/ถอนได้) vs โบนัส (ทอง/ติดเทิร์น) vs ล็อก (แดง) */
.home-v2-wallet-grid .wallet-cell-cash {
  border: 1px solid rgba(46, 204, 113, 0.55);
  background:
    linear-gradient(145deg, rgba(12, 46, 32, 0.85), rgba(6, 26, 18, 0.78));
}
.home-v2-wallet-grid .wallet-cell-cash strong {
  color: #4be08a;
}
.home-v2-wallet-grid .wallet-cell-bonus {
  border: 1px solid rgba(215, 161, 43, 0.6);
  background:
    linear-gradient(145deg, rgba(52, 40, 10, 0.85), rgba(28, 22, 6, 0.78));
}
.home-v2-wallet-grid .wallet-cell-bonus strong {
  color: #f4c343;
}
.home-v2-wallet-grid .wallet-cell-frozen {
  border: 1px solid rgba(231, 76, 60, 0.5);
  background:
    linear-gradient(145deg, rgba(48, 16, 16, 0.85), rgba(26, 8, 8, 0.78));
}
.home-v2-wallet-grid .wallet-cell-frozen strong {
  color: #ff8a80;
}

.wallet-breakdown-card {
  margin: 12px 0;
  padding: 12px;
  border-radius: 12px;
  background: rgba(6, 22, 34, 0.55);
  border: 1px solid rgba(120, 160, 190, 0.18);
}
.wallet-breakdown-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--v2-text, #e8f1f8);
  margin-bottom: 10px;
}
.wallet-breakdown-note {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--v2-muted, #8fa9bd);
}

.home-v2-wallet-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.home-v2-wallet-actions button:nth-child(2),
.home-v2-wallet-actions button:nth-child(3),
.home-v2-guest-cta button:first-child,
.home-v2-guest-panel button:last-child {
  color: var(--v2-text);
  background: rgba(16, 54, 74, 0.92);
  border: 1px solid var(--v2-card-line);
}

.home-v2-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.home-v2-actions-grid button {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 84px;
  padding: 11px 7px;
  border-radius: 8px;
  color: var(--v2-text);
  background:
    linear-gradient(180deg, rgba(12, 42, 58, 0.72), rgba(6, 17, 28, 0.74));
  border: 1px solid rgba(168, 186, 199, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.home-v2-actions-grid button::before {
  content: "";
  position: absolute;
  right: -18px;
  top: -20px;
  width: 82px;
  height: 82px;
  background: var(--v2-watermark);
  opacity: 0.052;
  pointer-events: none;
  transform: rotate(-10deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 8a24 24 0 1 0 0 48 24 24 0 0 0 0-48Z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M32 18v28M18 32h28M23 23l18 18M41 23 23 41' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 8a24 24 0 1 0 0 48 24 24 0 0 0 0-48Z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M32 18v28M18 32h28M23 23l18 18M41 23 23 41' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-v2-actions-grid button > * {
  position: relative;
  z-index: 1;
}

.home-v2-actions-grid button:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 217, 59, 0.34);
  background:
    radial-gradient(circle at 50% 0, rgba(167, 217, 59, 0.16), transparent 44%),
    linear-gradient(180deg, rgba(16, 54, 74, 0.92), rgba(7, 24, 37, 0.9));
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.2);
}

.home-v2-actions-grid button:active {
  transform: translateY(1px) scale(0.98);
}

.home-v2-actions-grid button > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  color: #06111c;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.7), transparent 20%),
    linear-gradient(135deg, var(--v2-gold), var(--v2-lime));
  box-shadow: 0 10px 20px rgba(167, 217, 59, 0.13);
}

.home-v2-actions-grid .home-v2-action-icon .home-v2-icon {
  width: 24px;
  height: 24px;
  color: currentColor;
}

.home-v2-actions-grid strong {
  color: rgba(255, 255, 255, 0.94);
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 800;
}

.home-v2-guest-cta div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-v2-right-panel {
  display: none;
}

.home-v2-mini-list button {
  position: relative;
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  color: var(--v2-text);
  background: var(--v2-layer-bg-subtle);
  border: 1px solid rgba(178, 205, 217, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  text-align: left;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.home-v2-mini-list button::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -28px;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(216, 166, 58, 0.055);
  pointer-events: none;
}

.home-v2-mini-list button:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 217, 59, 0.22);
  background:
    radial-gradient(circle at 100% 0%, rgba(216, 166, 58, 0.08), transparent 32%),
    linear-gradient(145deg, rgba(12, 42, 58, 0.86), rgba(5, 17, 28, 0.86));
}

.home-v2-mini-list button:active {
  transform: translateY(1px) scale(0.99);
}

.home-v2-mini-list span {
  display: -webkit-box;
  overflow: hidden;
  font-size: 12px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.home-v2-contact span {
  color: var(--v2-gold);
  font-size: 11px;
  font-weight: 900;
}

.home-v2-contact strong {
  color: var(--v2-text);
  line-height: 1.25;
}

.home-v2-bottom-sections,
.home-v2-footer {
  width: min(100%, 1540px);
  margin: 18px auto 0;
  min-width: 0;
}

.home-v2-bottom-sections {
  display: grid;
  gap: 14px;
}

.home-v2-bottom-section,
.home-v2-help-strip,
.home-v2-footer {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--v2-layer-border);
  background: var(--v2-layer-bg);
  box-shadow: var(--v2-layer-shadow);
}

.home-v2-bottom-section {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.home-v2-bottom-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.home-v2-bottom-head h2 {
  margin: 0;
  color: var(--v2-text);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
}

.home-v2-bottom-head p {
  margin: 2px 0 0;
  color: var(--v2-muted);
  font-size: 13px;
  font-weight: 500;
}

.home-v2-bottom-head button,
.home-v2-footer-admin {
  min-height: 38px;
  padding: 0 14px;
  border-radius: 8px;
  color: #06111c;
  background: linear-gradient(135deg, var(--v2-lime), #d8e781);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.home-v2-provider-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-v2-provider-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "icon name"
    "icon meta";
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
  min-height: 72px;
  padding: 10px;
  border-radius: 8px;
  color: var(--v2-text);
  background: var(--v2-layer-bg-subtle);
  border: 1px solid rgba(216, 166, 58, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  text-align: left;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.home-v2-provider-card::before {
  content: "";
  position: absolute;
  right: -16px;
  top: -22px;
  width: 82px;
  height: 82px;
  border-radius: 22px;
  background: rgba(216, 166, 58, 0.055);
  transform: rotate(18deg);
  pointer-events: none;
}

.home-v2-provider-card:hover,
.home-v2-promo-card:hover,
.home-v2-news-card:hover,
.home-v2-help-strip button:hover,
.home-v2-footer button:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 217, 59, 0.28);
  box-shadow: var(--v2-layer-shadow-hover);
}

.home-v2-provider-card span {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  color: #06111c;
  background: linear-gradient(135deg, var(--v2-gold), #efca68);
  font-size: 12px;
  font-weight: 900;
}

.home-v2-provider-card strong {
  grid-area: name;
  overflow: hidden;
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-v2-provider-card em {
  grid-area: meta;
  color: var(--v2-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.home-v2-bottom-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.home-v2-promo-grid,
.home-v2-news-list {
  display: grid;
  gap: 8px;
}

.home-v2-promo-card,
.home-v2-news-card {
  position: relative;
  min-width: 0;
  border-radius: 8px;
  color: var(--v2-text);
  background: var(--v2-layer-bg-subtle);
  border: 1px solid rgba(178, 205, 217, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  text-align: left;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.home-v2-promo-card::before,
.home-v2-news-card::before {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 82px;
  height: 82px;
  background: var(--v2-watermark);
  opacity: 0.046;
  pointer-events: none;
  transform: rotate(-12deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 20h36v30H14z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M20 14h24v12H20zM20 34h24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 20h36v30H14z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M20 14h24v12H20zM20 34h24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.home-v2-promo-card > *,
.home-v2-news-card > * {
  position: relative;
  z-index: 1;
}

.home-v2-promo-card {
  display: grid;
  gap: 7px;
  padding: 10px;
}

/* Featured promo mini card: real promo image (16:9) on top, compact text below.
   promoThumbHtml() emits .promo-thumb-large (real img) or .promo-mock-thumb (fallback). */
.home-v2-promo-card .promo-thumb-mini {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--v2-layer-bg-subtle);
}
.home-v2-promo-card .promo-thumb-mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.home-v2-promo-card .promo-thumb-mini.promo-mock-thumb {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 2px;
  padding: 8px;
}
.home-v2-promo-card .promo-thumb-mini.promo-mock-thumb strong { font-size: 12px; }
.home-v2-promo-card .promo-thumb-mini.promo-mock-thumb span { font-size: 10px; }

.home-v2-promo-card span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: #06111c;
  background: var(--v2-gold);
  font-size: 11px;
  font-weight: 900;
}

.home-v2-promo-card strong,
.home-v2-news-card strong {
  color: var(--v2-text);
  font-size: 14px;
  font-weight: 800;
}

.home-v2-promo-card p,
.home-v2-news-card p {
  margin: 0;
  color: var(--v2-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.home-v2-promo-card em,
.home-v2-news-card em {
  color: #c9a24f;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.home-v2-news-card {
  display: grid;
  gap: 6px;
  padding: 11px;
}

.home-v2-news-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.home-v2-news-card span {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.home-v2-news-card.unread {
  border-color: rgba(167, 217, 59, 0.22);
  background: rgba(13, 53, 69, 0.76);
}

.home-v2-news-card.unread span {
  color: #06111c;
  background: var(--v2-lime);
}

.home-v2-news-card.read span {
  color: var(--v2-muted);
  background: rgba(255, 255, 255, 0.08);
}

.home-v2-help-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.home-v2-help-strip button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--v2-text);
  background: var(--v2-layer-bg-subtle);
  border: 1px solid rgba(178, 205, 217, 0.11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
  text-align: left;
  overflow: hidden;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.home-v2-help-strip button::after {
  content: "";
  position: absolute;
  right: -16px;
  top: -18px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(167, 217, 59, 0.05);
  pointer-events: none;
}

.home-v2-help-strip strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-v2-help-strip span {
  color: var(--v2-muted);
  font-size: 11px;
  font-weight: 600;
}

.home-v2-footer {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 34, 49, 0.94), rgba(3, 11, 18, 0.98));
}

.home-v2-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  padding: 16px;
}

.home-v2-footer-brand,
.home-v2-footer-col {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.home-v2-footer-logo {
  width: 58px;
  height: 40px;
}

.home-v2-footer-brand strong {
  color: var(--v2-text);
  font-size: 18px;
  font-weight: 900;
}

.home-v2-footer-brand p {
  margin: 0;
  color: var(--v2-muted);
  font-size: 13px;
}

.home-v2-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-v2-footer-badges span {
  padding: 5px 8px;
  border-radius: 999px;
  color: #06111c;
  background: linear-gradient(135deg, var(--v2-gold), #efca68);
  font-size: 11px;
  font-weight: 900;
}

.home-v2-footer-col h3 {
  margin: 0 0 2px;
  color: var(--v2-text);
  font-size: 14px;
  font-weight: 800;
}

.home-v2-footer-col button {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  color: var(--v2-muted);
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: transform 0.16s ease, color 0.16s ease;
}

.home-v2-footer-col button:hover {
  color: var(--v2-lime);
}

.home-v2-footer-admin {
  width: fit-content;
  margin-top: 2px;
}

.home-v2-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  padding: 10px 16px;
  color: rgba(168, 186, 199, 0.82);
  background: rgba(3, 11, 18, 0.56);
  border-top: 1px solid rgba(168, 186, 199, 0.1);
  font-size: 12px;
}

.home-v2-bottom-nav {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 4px;
  width: calc(100% - 16px);
  max-width: 760px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 8px;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(167, 217, 59, 0.07), transparent 34%),
    linear-gradient(180deg, rgba(5, 18, 29, 0.97), rgba(2, 9, 16, 0.97));
  border: 1px solid rgba(167, 217, 59, 0.18);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

.home-v2-bottom-nav button {
  min-width: 0;
  min-height: 42px;
  padding: 4px 2px;
  border-radius: 8px;
  color: var(--v2-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  display: grid;
  justify-items: center;
  gap: 2px;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.home-v2-bottom-nav button:hover {
  color: var(--v2-text);
  background: rgba(255, 255, 255, 0.035);
}

.home-v2-bottom-nav button:active {
  transform: translateY(1px) scale(0.98);
}

.home-v2-bottom-nav button span {
  font-size: 15px;
  line-height: 1;
}

.home-v2-bottom-nav button strong {
  overflow: hidden;
  max-width: 100%;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-v2-bottom-nav button.active {
  color: var(--v2-lime);
}

.home-v2-bottom-nav .home-v2-center-nav {
  min-height: 52px;
  color: #06111c;
  background:
    radial-gradient(circle at 26% 12%, rgba(255, 255, 255, 0.52), transparent 20%),
    linear-gradient(135deg, var(--v2-lime), #d8e781);
  box-shadow: 0 10px 22px rgba(167, 217, 59, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.home-v2-active .modal-panel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(178, 205, 217, 0.16);
  background:
    radial-gradient(circle at 12% 0%, rgba(167, 217, 59, 0.07), transparent 30%),
    radial-gradient(circle at 94% 10%, rgba(216, 166, 58, 0.075), transparent 28%),
    linear-gradient(180deg, rgba(11, 34, 48, 0.98), rgba(4, 14, 24, 0.98));
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body.home-v2-active .modal-panel::before {
  content: "";
  position: absolute;
  right: -38px;
  top: -34px;
  width: 156px;
  height: 156px;
  background: var(--v2-watermark);
  opacity: 0.04;
  pointer-events: none;
  transform: rotate(-14deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 6 56 20v24L32 58 8 44V20L32 6Z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M20 32h24M32 20v24' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 6 56 20v24L32 58 8 44V20L32 6Z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M20 32h24M32 20v24' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.home-v2-active .modal-panel > * {
  position: relative;
  z-index: 1;
}

body.home-v2-active .modal-wrap {
  z-index: 60;
}

body.home-v2-active .notification-panel,
body.home-v2-active .notification-detail-panel {
  width: min(100%, 720px);
  max-height: calc(100dvh - 28px);
  background: linear-gradient(180deg, #0b2230 0%, #06111c 100%);
  color: var(--v2-text);
  border: 1px solid rgba(167, 217, 59, 0.16);
}

body.home-v2-active .notification-panel .modal-head,
body.home-v2-active .notification-detail-panel .modal-head {
  background: linear-gradient(135deg, #0d3545, #071923);
  border-bottom: 1px solid rgba(216, 166, 58, 0.2);
}

body.home-v2-active .notification-card,
body.home-v2-active .notification-tab,
body.home-v2-active .notification-empty {
  color: var(--v2-text);
  background: var(--v2-layer-bg-subtle);
  border-color: rgba(168, 186, 199, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body.home-v2-active .notification-card.unread {
  border-color: rgba(167, 217, 59, 0.28);
  background: linear-gradient(145deg, rgba(10, 34, 49, 0.98), rgba(13, 53, 69, 0.92));
}

body.home-v2-active .notification-card.read {
  opacity: 0.74;
}

body.home-v2-active .notification-tab.active,
body.home-v2-active .notification-summary .primary-btn {
  color: #06111c;
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.46), transparent 20%),
    linear-gradient(135deg, var(--v2-lime), #d8e781);
  box-shadow: 0 10px 20px rgba(167, 217, 59, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

body.home-v2-active .notification-tag {
  color: #06111c;
  background: var(--v2-gold);
}

body.home-v2-active .notification-copy p,
body.home-v2-active .notification-detail p,
body.home-v2-active .notification-detail-meta,
body.home-v2-active .notification-summary .helper-text {
  color: var(--v2-muted);
}

/* ข่าวสาร (home-v2 พื้นเข้ม): ตัวอักษรเนื้อหา/หัวข้อ ให้อ่านชัดเป็นสีสว่าง (แก้ตัวดำมองไม่ชัด) */
body.home-v2-active .notification-detail h3,
body.home-v2-active .notification-copy h4 {
  color: #ffffff;
}
body.home-v2-active .notification-richtext p,
body.home-v2-active .notification-detail .notification-richtext p {
  color: #e8f0f7;
}
body.home-v2-active .notification-richtext strong {
  color: #ffffff;
}
body.home-v2-active .notification-richtext a {
  color: #7fc4ff;
}

body.home-v2-active .drawer-panel {
  border-left: 1px solid rgba(178, 205, 217, 0.16);
  background:
    radial-gradient(circle at 16% 0%, rgba(167, 217, 59, 0.075), transparent 30%),
    radial-gradient(circle at 100% 18%, rgba(216, 166, 58, 0.075), transparent 28%),
    linear-gradient(180deg, rgba(10, 33, 47, 0.98), rgba(4, 14, 24, 0.98));
  box-shadow: -28px 0 58px rgba(0, 0, 0, 0.44), inset 1px 0 0 rgba(255, 255, 255, 0.045);
}

body.home-v2-active .drawer-card,
body.home-v2-active .drawer-stat,
body.home-v2-active .side-link,
body.home-v2-active .menu-card,
body.home-v2-active .stat-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(178, 205, 217, 0.13);
  background:
    radial-gradient(circle at 100% 0%, rgba(216, 166, 58, 0.055), transparent 28%),
    linear-gradient(145deg, rgba(9, 30, 45, 0.9), rgba(4, 14, 24, 0.9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

body.home-v2-active .side-link:hover,
body.home-v2-active .menu-card:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 217, 59, 0.26);
  background:
    radial-gradient(circle at 12% 0%, rgba(167, 217, 59, 0.085), transparent 30%),
    linear-gradient(145deg, rgba(13, 42, 58, 0.94), rgba(5, 17, 28, 0.94));
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body.home-v2-active .side-link:active,
body.home-v2-active .menu-card:active {
  transform: translateY(1px) scale(0.99);
}

body.home-v2-active .modal-head {
  min-height: 64px;
  padding: 12px 14px;
  color: var(--v2-text);
  background:
    radial-gradient(circle at 20% 0%, rgba(167, 217, 59, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(12, 42, 57, 0.98), rgba(5, 17, 28, 0.98));
  border-bottom: 1px solid rgba(216, 166, 58, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.home-v2-active .modal-title {
  color: var(--v2-text);
  letter-spacing: 0;
}

body.home-v2-active .modal-head .icon-btn {
  color: var(--v2-text);
  background: rgba(6, 17, 28, 0.74);
  border: 1px solid rgba(178, 205, 217, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.home-v2-active .modal-head .icon-btn:hover {
  transform: translateY(-1px);
  color: var(--v2-lime);
  border-color: rgba(167, 217, 59, 0.34);
  background: rgba(13, 53, 69, 0.9);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body.home-v2-active .modal-content {
  color: var(--v2-text);
  background: transparent;
  scrollbar-color: rgba(167, 217, 59, 0.36) rgba(255, 255, 255, 0.05);
}

body.home-v2-active .modal-content::-webkit-scrollbar {
  width: 8px;
}

body.home-v2-active .modal-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(167, 217, 59, 0.32);
}

body.home-v2-active .modal-block,
body.home-v2-active .auth-panel,
body.home-v2-active .settings-block,
body.home-v2-active .deposit-block,
body.home-v2-active .wallet-block,
body.home-v2-active .promo-card,
body.home-v2-active .bank-card,
body.home-v2-active .table-row,
body.home-v2-active .result-card,
body.home-v2-active .success-summary,
body.home-v2-active .mock-account-card,
body.home-v2-active .empty-box,
body.home-v2-active .date-filter,
body.home-v2-active .share-popup,
body.home-v2-active .shop-hero,
body.home-v2-active .shop-points-card,
body.home-v2-active .shop-reward-card,
body.home-v2-active .shop-exchange-card,
body.home-v2-active .provider-card,
body.home-v2-active .provider-games-panel,
body.home-v2-active .provider-game-card,
body.home-v2-active .reward-popup,
body.home-v2-active .box-tile,
body.home-v2-active .calendar-card,
body.home-v2-active .legend-row-demo,
body.home-v2-active .field-shell,
body.home-v2-active .upload-shell,
body.home-v2-active .select-shell,
body.home-v2-active .auth-toggle,
body.home-v2-active .wallet-balance-card,
body.home-v2-active .wallet-status-card,
body.home-v2-active .wallet-quick-card {
  position: relative;
  overflow: hidden;
  color: var(--v2-text);
  border-color: rgba(178, 205, 217, 0.14);
  background:
    radial-gradient(circle at 100% 0%, rgba(216, 166, 58, 0.055), transparent 30%),
    linear-gradient(145deg, rgba(10, 34, 49, 0.92), rgba(5, 17, 28, 0.92));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* The quick-card label used var(--ink) (near-black) and was unreadable on the
   dark wallet card. Force light text in the dark home-v2 theme. */
body.home-v2-active .wallet-quick-label {
  color: var(--v2-text);
}

/* In the dark mobile (home-v2) theme the success/account cards get a dark
   background above, but the inner rows still inherited the light-theme dark
   text (var(--ink)) and became unreadable. Force readable light text here. */
body.home-v2-active .success-row strong,
body.home-v2-active .mock-account-card strong {
  color: var(--v2-text);
}

body.home-v2-active .success-row span,
body.home-v2-active .mock-account-card span {
  color: var(--v2-muted);
}

body.home-v2-active .modal-block::before,
body.home-v2-active .promo-card::before,
body.home-v2-active .table-row::before,
body.home-v2-active .shop-reward-card::before,
body.home-v2-active .provider-card::before,
body.home-v2-active .provider-games-panel::before,
body.home-v2-active .provider-game-card::before,
body.home-v2-active .calendar-card::before,
body.home-v2-active .box-tile::before {
  content: "";
  position: absolute;
  right: -24px;
  top: -24px;
  width: 88px;
  height: 88px;
  opacity: 0.035;
  pointer-events: none;
  background: var(--v2-watermark);
  transform: rotate(-12deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 22h44v30H10z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M18 22c0-8 5-12 14-12s14 4 14 12M24 34h16M32 28v12' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 22h44v30H10z' fill='none' stroke='black' stroke-width='5'/%3E%3Cpath d='M18 22c0-8 5-12 14-12s14 4 14 12M24 34h16M32 28v12' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.home-v2-active .modal-block > *,
body.home-v2-active .promo-card > *,
body.home-v2-active .table-row > *,
body.home-v2-active .shop-reward-card > *,
body.home-v2-active .provider-card > *,
body.home-v2-active .provider-games-panel > *,
body.home-v2-active .provider-game-card > *,
body.home-v2-active .calendar-card > *,
body.home-v2-active .box-tile > * {
  position: relative;
  z-index: 1;
}

body.home-v2-active .shop-modal-panel,
body.home-v2-active .provider-modal-panel {
  width: min(100%, 860px);
}

body.home-v2-active .menu-title,
body.home-v2-active .section-title,
body.home-v2-active .game-name,
body.home-v2-active .shop-hero-title,
body.home-v2-active .auth-title {
  color: var(--v2-text);
}

body.home-v2-active .menu-desc,
body.home-v2-active .helper-text,
body.home-v2-active .section-subtitle,
body.home-v2-active .calendar-label,
body.home-v2-active .legend-row-demo,
body.home-v2-active .date-filter,
body.home-v2-active .pagination-mock,
body.home-v2-active .field-label,
body.home-v2-active .input-suffix {
  color: var(--v2-muted);
}

body.home-v2-active .field-shell,
body.home-v2-active .search-shell,
body.home-v2-active .select-shell,
body.home-v2-active .upload-shell {
  border: 1px solid rgba(178, 205, 217, 0.16);
  background: rgba(4, 14, 24, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

body.home-v2-active .field-input,
body.home-v2-active .search-input,
body.home-v2-active .select-input,
body.home-v2-active .date-input {
  color: var(--v2-text);
  background: transparent;
}

body.home-v2-active .field-input::placeholder,
body.home-v2-active .search-input::placeholder {
  color: rgba(202, 214, 220, 0.55);
}

body.home-v2-active .field-shell:focus-within,
body.home-v2-active .search-shell:focus-within,
body.home-v2-active .select-shell:focus-within {
  border-color: rgba(167, 217, 59, 0.36);
  box-shadow: 0 0 0 3px rgba(167, 217, 59, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body.home-v2-active .primary-btn,
body.home-v2-active .auth-submit,
body.home-v2-active .settings-submit-btn {
  color: #06111c;
  border: 1px solid rgba(229, 240, 138, 0.36);
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.46), transparent 22%),
    linear-gradient(135deg, var(--v2-lime), #d8e781);
  box-shadow: 0 12px 24px rgba(167, 217, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body.home-v2-active .primary-btn:hover,
body.home-v2-active .auth-submit:hover,
body.home-v2-active .settings-submit-btn:hover {
  transform: translateY(-1px);
  filter: saturate(1.04);
  box-shadow: 0 16px 28px rgba(167, 217, 59, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

body.home-v2-active .secondary-btn,
body.home-v2-active .line-btn,
body.home-v2-active .disabled-btn,
body.home-v2-active .link-btn,
body.home-v2-active .amount-btn {
  color: var(--v2-text);
  border: 1px solid rgba(178, 205, 217, 0.16);
  background:
    radial-gradient(circle at 100% 0%, rgba(216, 166, 58, 0.05), transparent 28%),
    linear-gradient(145deg, rgba(10, 34, 49, 0.9), rgba(5, 17, 28, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.home-v2-active .secondary-btn:hover,
body.home-v2-active .line-btn:hover,
body.home-v2-active .link-btn:hover,
body.home-v2-active .amount-btn:hover {
  transform: translateY(-1px);
  color: var(--v2-lime);
  border-color: rgba(167, 217, 59, 0.3);
  background: linear-gradient(145deg, rgba(13, 53, 69, 0.94), rgba(5, 17, 28, 0.94));
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

body.home-v2-active .disabled-btn,
body.home-v2-active .disabled-btn:hover {
  opacity: 0.56;
  color: rgba(222, 230, 234, 0.66);
  transform: none;
  cursor: not-allowed;
}

body.home-v2-active .auth-tabs,
body.home-v2-active .shop-tabs,
body.home-v2-active .provider-tabs,
body.home-v2-active .notification-tabs {
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(4, 14, 24, 0.62);
  border: 1px solid rgba(178, 205, 217, 0.12);
}

body.home-v2-active .auth-toggle,
body.home-v2-active .notification-tab {
  border-radius: 999px;
  color: var(--v2-muted);
  box-shadow: none;
}

body.home-v2-active .auth-toggle.active,
body.home-v2-active .notification-tab.active {
  color: #06111c;
  border-color: rgba(229, 240, 138, 0.36);
  background:
    radial-gradient(circle at 24% 12%, rgba(255, 255, 255, 0.44), transparent 22%),
    linear-gradient(135deg, var(--v2-lime), #d8e781);
  box-shadow: 0 10px 20px rgba(167, 217, 59, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.home-v2-active .shop-hero {
  grid-template-columns: minmax(0, 1fr) minmax(174px, auto);
  border-color: rgba(167, 217, 59, 0.18);
  background:
    radial-gradient(circle at 82% 6%, rgba(216, 166, 58, 0.14), transparent 26%),
    radial-gradient(circle at 10% 0%, rgba(167, 217, 59, 0.1), transparent 30%),
    linear-gradient(135deg, rgba(13, 53, 69, 0.96), rgba(5, 17, 28, 0.96));
}

body.home-v2-active .banner-tag {
  color: #06111c;
  background: linear-gradient(135deg, var(--v2-gold), #f4d783);
  border: 1px solid rgba(255, 245, 198, 0.3);
}

body.home-v2-active .shop-points-card strong {
  color: var(--v2-lime);
}

body.home-v2-active .shop-reward-card,
body.home-v2-active .provider-game-card {
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

body.home-v2-active .shop-reward-card:hover,
body.home-v2-active .provider-card:hover,
body.home-v2-active .provider-game-card:hover,
body.home-v2-active .promo-card:hover,
body.home-v2-active .table-button:hover,
body.home-v2-active .calendar-card:hover,
body.home-v2-active .box-tile:hover,
body.home-v2-active .wallet-quick-card:hover {
  transform: translateY(-2px);
  border-color: rgba(167, 217, 59, 0.28);
  background:
    radial-gradient(circle at 12% 0%, rgba(167, 217, 59, 0.085), transparent 30%),
    linear-gradient(145deg, rgba(13, 42, 58, 0.96), rgba(5, 17, 28, 0.96));
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.home-v2-active .shop-reward-icon,
body.home-v2-active .provider-logo-mock,
body.home-v2-active .coupon-icon {
  color: #06111c;
  background:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(135deg, var(--v2-gold), #d8e781);
  border: 1px solid rgba(255, 245, 198, 0.26);
  box-shadow: 0 10px 20px rgba(216, 166, 58, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

body.home-v2-active .provider-card.active,
body.home-v2-active .promo-card.active {
  border-color: rgba(167, 217, 59, 0.42);
  background:
    radial-gradient(circle at 18% 0%, rgba(167, 217, 59, 0.12), transparent 32%),
    linear-gradient(145deg, rgba(13, 53, 69, 0.98), rgba(5, 17, 28, 0.96));
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28), inset 3px 0 0 rgba(167, 217, 59, 0.72);
}

body.home-v2-active .provider-games-panel .section-head {
  margin-bottom: 12px;
}

body.home-v2-active .provider-game-thumb,
body.home-v2-active .game-thumb,
body.home-v2-active .promo-thumb-large {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  color: #f7fbff;
  border-radius: 16px;
  border: 1px solid rgba(178, 205, 217, 0.14);
  background:
    radial-gradient(circle at 18% 18%, rgba(167, 217, 59, 0.18), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(216, 166, 58, 0.2), transparent 24%),
    linear-gradient(145deg, #102f44, #071923 64%, #04101a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

body.home-v2-active .provider-game-card:nth-child(3n + 2) .provider-game-thumb {
  background:
    radial-gradient(circle at 22% 18%, rgba(216, 166, 58, 0.2), transparent 24%),
    radial-gradient(circle at 84% 10%, rgba(167, 217, 59, 0.16), transparent 24%),
    linear-gradient(145deg, #233a2d, #071923 62%, #04101a);
}

body.home-v2-active .provider-game-card:nth-child(3n) .provider-game-thumb {
  background:
    radial-gradient(circle at 18% 18%, rgba(87, 151, 185, 0.22), transparent 24%),
    radial-gradient(circle at 84% 12%, rgba(216, 166, 58, 0.18), transparent 24%),
    linear-gradient(145deg, #26233f, #071923 62%, #04101a);
}

body.home-v2-active .provider-game-thumb::before,
body.home-v2-active .game-thumb::before,
body.home-v2-active .promo-thumb-large::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255, 255, 255, 0.07) 42% 45%, transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.4), transparent 58%);
  pointer-events: none;
}

body.home-v2-active .provider-game-thumb::after,
body.home-v2-active .game-thumb::after,
body.home-v2-active .promo-thumb-large::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 56px;
  height: 56px;
  opacity: 0.08;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 22h36v28H14zM22 22c0-7 4-10 10-10s10 3 10 10' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M24 34h16' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 22h36v28H14zM22 22c0-7 4-10 10-10s10 3 10 10' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M24 34h16' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.home-v2-active .game-provider,
body.home-v2-active .game-badge {
  position: relative;
  z-index: 1;
}

body.home-v2-active .game-badge,
body.home-v2-active .status-pill.primary {
  color: #06111c;
  background: var(--v2-gold);
}

body.home-v2-active .status-pill.success {
  color: #06111c;
  background: rgba(167, 217, 59, 0.86);
}

body.home-v2-active .status-pill.warning {
  color: #06111c;
  background: rgba(216, 166, 58, 0.88);
}

body.home-v2-active .status-pill.danger {
  color: #fff4f5;
  background: rgba(197, 45, 60, 0.88);
}

body.home-v2-active .reward-head {
  align-items: stretch;
}

body.home-v2-active .diamond-pill {
  color: #06111c;
  background: linear-gradient(135deg, var(--v2-gold), #d8e781);
  border: 1px solid rgba(255, 245, 198, 0.28);
}

body.home-v2-active .coupon-shell {
  align-items: center;
}

body.home-v2-active .box-open-shell {
  border-color: rgba(167, 217, 59, 0.16);
  background:
    radial-gradient(circle at 50% 0%, rgba(167, 217, 59, 0.09), transparent 36%),
    linear-gradient(180deg, rgba(13, 42, 58, 0.96), rgba(4, 14, 24, 0.98));
}

body.home-v2-active .box-open-head,
body.home-v2-active .reward-popup-value {
  color: var(--v2-gold);
}

body.home-v2-active .box-tile {
  min-height: 116px;
  color: var(--v2-gold);
  font-size: 38px;
}

body.home-v2-active .mermaid-mock {
  color: var(--v2-lime);
  opacity: 0.84;
}

body.home-v2-active .wheel-mock {
  color: #06111c;
  border: 6px solid rgba(255, 255, 255, 0.08);
  background: conic-gradient(from 0deg, var(--v2-gold), var(--v2-lime), #234d60, var(--v2-gold));
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.32), inset 0 0 0 10px rgba(5, 17, 28, 0.28);
}

body.home-v2-active .calendar-grid-box {
  gap: 10px;
}

body.home-v2-active .calendar-card {
  min-height: 82px;
  border-radius: 16px;
}

body.home-v2-active .calendar-card.reward {
  border-color: rgba(167, 217, 59, 0.34);
  background:
    radial-gradient(circle at 16% 8%, rgba(167, 217, 59, 0.13), transparent 28%),
    linear-gradient(145deg, rgba(13, 53, 69, 0.98), rgba(5, 17, 28, 0.96));
}

body.home-v2-active .legend-dot {
  background: linear-gradient(145deg, var(--v2-lime), var(--v2-gold));
}

body.home-v2-active .success-icon,
body.home-v2-active .qr-placeholder,
body.home-v2-active .qr-mock-box {
  color: #06111c;
  background: linear-gradient(135deg, var(--v2-lime), #d8e781);
  box-shadow: 0 12px 24px rgba(167, 217, 59, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

@media (max-width: 768px) {
  .auth-modal-panel,
  .auth-register-panel {
    width: min(100%, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }

  .auth-modal-panel .modal-head {
    min-height: 56px;
    padding: 10px 12px;
  }

  .auth-modal-panel .modal-content {
    max-height: calc(100dvh - 72px);
    padding: 10px;
    gap: 10px;
  }

  .auth-modal-panel .auth-brand {
    padding: 10px;
  }

  .auth-brand-compact .modal-logo {
    width: 54px;
    height: 36px;
  }

  .auth-stepper {
    gap: 6px;
  }

  .auth-step {
    justify-content: center;
    min-height: 32px;
    padding: 5px;
  }

  .auth-step strong {
    display: none;
  }

  .auth-step span {
    width: 22px;
    height: 22px;
  }

  .auth-wizard {
    gap: 10px;
    padding: 10px;
  }

  .auth-method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .auth-method-card {
    min-height: 116px;
    padding: 10px;
  }

  .auth-form-grid,
  .auth-form-grid.compact {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .auth-step-title h4,
  .auth-review-card h4 {
    font-size: 16px;
  }

  .auth-wizard-footer {
    bottom: -10px;
    margin: 0 -10px -10px;
    padding: 10px;
  }

  .auth-wizard-footer .secondary-btn,
  .auth-wizard-footer .auth-submit {
    flex: 1;
    min-width: 0;
  }

  .auth-social-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .auth-social-button {
    padding: 0 6px;
    font-size: 11px;
  }

  .home-v2-shell {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .home-v2-header {
    padding: 7px 10px 6px;
  }

  .home-v2-header-inner {
    position: relative;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    min-height: 40px;
    gap: 7px;
    width: 100%;
  }

  .home-v2-header-search,
  .home-v2-head-actions .home-v2-pill,
  .home-v2-head-actions.guest .home-v2-bell {
    display: none;
  }

  .home-v2-brand {
    position: static;
    justify-self: start;
    gap: 7px;
    max-width: 112px;
    overflow: hidden;
    font-size: 24px;
    transform: none;
  }

  .home-v2-logo {
    width: 31px;
    height: 31px;
  }

  .home-v2-icon-btn,
  .home-v2-bell,
  .home-v2-profile {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    border-radius: 12px;
  }

  .home-v2-head-actions {
    position: absolute;
    right: 0;
    top: 50%;
    justify-self: end;
    gap: 6px;
    transform: translateY(-50%);
  }

  .home-v2-head-actions.guest {
    display: grid;
    grid-template-columns: 58px;
    justify-self: end;
    gap: 6px;
    width: 58px;
    min-width: 0;
  }

  .home-v2-head-actions.guest .home-v2-login-btn {
    display: none;
  }

  .home-v2-login-btn,
  .home-v2-register-btn {
    min-height: 36px;
    width: 100%;
    padding: 0 4px;
    font-size: 11.5px;
  }

  .home-v2-register-btn {
    min-width: 50px;
  }

  .home-v2-member-strip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-top: 6px;
  }

  .home-v2-wallet-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .home-v2-wallet-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    border-radius: 999px;
    color: #b9e95d;
    font-size: 12px;
    line-height: 1;
    background: rgba(167, 217, 59, 0.12);
    border: 1px solid rgba(167, 217, 59, 0.32);
    transition: transform 0.24s ease;
  }

  .home-v2-member-strip.open .home-v2-wallet-caret {
    transform: rotate(180deg);
  }

  .home-v2-wallet-drop {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    overflow: hidden;
    opacity: 0;
    transition: grid-template-rows 0.28s ease, opacity 0.24s ease, margin-top 0.24s ease;
  }

  .home-v2-member-strip.open .home-v2-wallet-drop {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 8px;
  }

  .home-v2-wallet-drop-inner {
    min-height: 0;
    overflow: hidden;
  }

  .home-v2-wallet-drop-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .home-v2-drop-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 27px;
    padding: 0 10px;
    border-radius: 999px;
    white-space: nowrap;
    background: rgba(4, 15, 25, 0.7);
    border: 1px solid rgba(168, 186, 199, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .home-v2-drop-pill span {
    font-size: 9px;
    font-weight: 500;
    color: rgba(168, 186, 199, 0.82);
  }

  .home-v2-drop-pill strong {
    font-size: 10.5px;
    font-weight: 800;
    color: #f6eedc;
  }

  .home-v2-member-strip .home-v2-pill.cash {
    color: #7ee08a;
    border-color: rgba(126, 224, 138, 0.42);
  }

  .home-v2-member-strip .home-v2-pill.bonus {
    color: #f2c94c;
    border-color: rgba(242, 201, 76, 0.42);
  }

  .home-v2-member-strip .home-v2-pill {
    min-height: 27px;
    max-width: 120px;
    gap: 5px;
    padding: 0 8px;
  }

  .home-v2-member-strip .home-v2-pill .home-v2-icon {
    width: 13px;
    height: 13px;
  }

  .home-v2-member-strip .home-v2-pill > span:not(.home-v2-icon) {
    font-size: 9px;
  }

  .home-v2-member-strip .home-v2-pill strong {
    font-size: 10.5px;
  }

  .home-v2-hero-main {
    min-height: 178px;
    padding: 16px;
  }

  .home-v2-hero-main h1 {
    font-size: 28px;
  }

  .home-v2-section-head h2,
  .home-v2-actions h2,
  .home-v2-guest-cta h2,
  .home-v2-guest-panel h2,
  .home-v2-mini-list h2 {
    font-size: 18px;
  }

  .home-v2-hero-main p {
    max-width: 96%;
    font-size: 13px;
    line-height: 1.42;
    overflow-wrap: anywhere;
  }

  .home-v2-guest-cta p,
  .home-v2-guest-panel p {
    overflow-wrap: anywhere;
  }

  .home-v2-hero-actions {
    margin-top: 12px;
  }

  .home-v2-hero-nav {
    display: none;
  }

  .home-v2-member-mobile {
    display: grid;
    gap: 12px;
  }

  .home-v2-wallet-head strong {
    font-size: 24px;
  }

  .home-v2-wallet-grid div {
    padding: 9px;
  }

  .home-v2-actions-grid button {
    min-height: 70px;
  }

  body.home-v2-active .modal-wrap {
    align-items: flex-end;
    padding: 10px;
  }

  body.home-v2-active .modal-panel {
    width: min(100%, 720px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 20px);
  }

  /* Deposit sheet must be full-bleed even under body.home-v2-active (whose
     .modal-wrap padding + .modal-panel max-width cap left side gaps that cut
     off account text). Higher specificity so it wins. */
  body.home-v2-active .modal-wrap:has(.deposit-modal-panel) {
    padding: 0;
  }

  body.home-v2-active .modal-panel.deposit-modal-panel {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }

  body.home-v2-active .notification-card-main {
    grid-template-columns: 84px minmax(0, 1fr);
  }

  body.home-v2-active .notification-cover {
    min-height: 80px;
  }

  body.home-v2-active .notification-hero {
    min-height: 170px;
  }
}

@media (min-width: 768px) {
  .home-v2-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-v2-provider-showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-v2-footer-inner {
    grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(0, 1fr));
  }

  .home-v2-hero-main {
    min-height: 248px;
  }

  .home-v2-member-mobile {
    display: grid;
    gap: 12px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .home-v2-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .home-v2-shell {
    padding-bottom: 0;
  }

  .home-v2-header {
    padding: 11px 22px;
  }

  .home-v2-brand {
    font-size: 31px;
  }

  .home-v2-logo {
    width: 39px;
    height: 39px;
  }

  .home-v2-header-search {
    max-width: 560px;
  }

  .home-v2-main {
    padding: 18px 20px 34px;
  }

  .home-v2-bottom-sections,
  .home-v2-footer {
    margin-top: 22px;
  }

  .home-v2-provider-showcase-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-v2-bottom-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  }

  .home-v2-promo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .home-v2-help-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-v2-help-strip button {
    display: grid;
    justify-items: start;
    align-content: center;
  }

  .home-v2-footer-inner {
    grid-template-columns: minmax(260px, 1.45fr) repeat(3, minmax(150px, 1fr));
    gap: 24px;
    padding: 22px;
  }

  .home-v2-content {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 18px;
  }

  .home-v2-hero {
    grid-template-columns: minmax(0, 1.72fr) minmax(220px, 0.66fr);
  }

  .home-v2-hero-side {
    display: grid;
    align-content: end;
    min-height: 260px;
  }

  .home-v2-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .home-v2-right-panel {
    position: sticky;
    top: 82px;
    display: grid;
    gap: 12px;
    width: 320px;
    max-height: calc(100dvh - 100px);
    overflow: auto;
    scrollbar-width: none;
  }

  .home-v2-right-panel::-webkit-scrollbar {
    display: none;
  }

  .home-v2-card {
    display: grid;
    grid-template-rows: auto 1fr;
  }

  .home-v2-member-mobile,
  .home-v2-left > .home-v2-guest-cta {
    display: none;
  }

  .home-v2-bottom-nav {
    display: none;
  }

  .home-v2-provider-chip {
    flex-basis: 148px;
  }
}

@media (min-width: 1440px) {
  .home-v2-header-inner,
  .home-v2-content,
  .home-v2-member-strip,
  .home-v2-bottom-sections,
  .home-v2-footer {
    max-width: 1560px;
  }

  .home-v2-bottom-sections,
  .home-v2-footer {
    width: min(100%, 1560px);
  }

  .home-v2-brand {
    font-size: 33px;
  }

  .home-v2-logo {
    width: 40px;
    height: 40px;
  }

  .home-v2-content {
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .home-v2-right-panel {
    width: 340px;
  }

  .home-v2-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-v2-hero-main,
  .home-v2-hero-side {
    min-height: 286px;
  }

  .home-v2-hero-main h1 {
    font-size: 48px;
  }
}

@media (max-width: 767px) {
  .home-v2-bottom-sections {
    display: none;
  }

  .home-v2-footer {
    margin-top: 14px;
    margin-bottom: calc(82px + env(safe-area-inset-bottom));
  }

  .home-v2-footer-inner {
    padding: 14px;
  }

  .home-v2-footer-col {
    display: none;
  }

  .home-v2-footer-brand {
    gap: 6px;
  }

  .home-v2-footer-brand strong {
    font-size: 16px;
  }

  .home-v2-footer-bottom {
    display: grid;
    justify-content: stretch;
    gap: 4px;
    padding: 10px 14px;
  }
}

@media (max-width: 430px) {
  .home-v2-header {
    padding: 7px 8px 6px;
  }

  .home-v2-header-inner {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 6px;
  }

  .home-v2-brand {
    max-width: 108px;
    font-size: 23px;
  }

  .home-v2-bell,
  .home-v2-icon-btn,
  .home-v2-profile {
    width: 40px;
    height: 40px;
  }

  .home-v2-head-actions {
    justify-self: end;
    gap: 5px;
  }

  .home-v2-head-actions.guest {
    align-items: center;
    grid-template-columns: 58px;
    width: 58px;
  }

  .home-v2-login-btn,
  .home-v2-register-btn {
    min-height: 36px;
    padding: 0 4px;
    font-size: 11px;
  }

  .home-v2-register-btn {
    min-width: 46px;
  }

  .home-v2-guest .home-v2-brand {
    max-width: 108px;
  }

  .home-v2-member .home-v2-brand span {
    display: inline;
  }

  .home-v2-main {
    padding: 10px 8px 18px;
  }

  .home-v2-bottom-nav {
    left: 8px;
    right: 8px;
    grid-template-columns: repeat(5, 1fr);
    width: auto;
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    transform: none;
  }

  .home-v2-section {
    padding: 10px;
  }

  .home-v2-grid {
    gap: 8px;
  }

  .home-v2-card-art {
    min-height: 106px;
  }

  .home-v2-card-body h3 {
    font-size: 13px;
  }

  .home-v2-wallet-actions,
  .home-v2-actions-grid {
    gap: 6px;
  }

  .home-v2-wallet-actions button {
    padding: 0 6px;
    font-size: 12px;
  }
}

@media (max-width: 400px) {
  .home-v2-head-actions.guest {
    grid-template-columns: 58px;
    width: 58px;
  }

  .home-v2-head-actions.guest .home-v2-login-btn {
    display: none;
  }
}

@media (max-width: 768px) {
  body.home-v2-active .shop-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  body.home-v2-active .shop-points-card {
    width: 100%;
    min-width: 0;
  }

  body.home-v2-active .reward-head {
    flex-direction: column;
    align-items: stretch;
  }

  body.home-v2-active .auth-tabs,
  body.home-v2-active .shop-tabs,
  body.home-v2-active .provider-tabs,
  body.home-v2-active .notification-tabs {
    border-radius: 16px;
  }
}

.shop-modal-panel {
  width: min(100%, 960px);
  border: 1px solid rgba(235, 194, 105, 0.24);
  background:
    radial-gradient(circle at 12% 0%, rgba(229, 177, 73, 0.15), transparent 26%),
    radial-gradient(circle at 100% 10%, rgba(116, 204, 230, 0.12), transparent 28%),
    linear-gradient(180deg, #0b1723 0%, #06111c 58%, #040b12 100%);
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.shop-modal-panel .modal-head {
  color: #fff7dd;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.32), transparent 20%),
    linear-gradient(135deg, #f2cc71 0%, #d8a63a 42%, #8f5a14 100%);
  border-bottom: 1px solid rgba(255, 239, 187, 0.28);
  box-shadow: 0 12px 26px rgba(4, 11, 18, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.shop-modal-panel .modal-title {
  color: #251605;
  font-weight: 900;
}

.shop-modal-panel .modal-head .icon-btn {
  color: #fff8df;
  background: rgba(37, 22, 5, 0.38);
  border: 1px solid rgba(255, 247, 221, 0.38);
  box-shadow: 0 10px 20px rgba(61, 35, 5, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.shop-modal-panel .modal-head .icon-btn:hover {
  color: #251605;
  background: rgba(255, 248, 223, 0.86);
  border-color: rgba(255, 255, 255, 0.58);
}

.shop-modal-panel .modal-content {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
    radial-gradient(circle at 0% 100%, rgba(229, 177, 73, 0.09), transparent 26%);
}

.shop-modal {
  gap: 16px;
}

body.home-v2-active .shop-modal-panel .shop-hero,
.shop-modal-panel .shop-hero {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(190px, auto);
  gap: 18px;
  padding: 22px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background:
    radial-gradient(circle at 8% 0%, rgba(255, 226, 242, 0.9), transparent 26%),
    radial-gradient(circle at 64% 8%, rgba(195, 239, 255, 0.86), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(245, 211, 124, 0.9), transparent 34%),
    linear-gradient(135deg, #ffe7f3 0%, #e4f7ff 52%, #f7d989 100%);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.shop-hero-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  gap: 8px;
}

.shop-modal-panel .shop-hero-title {
  color: #201528;
  font-size: 24px;
  line-height: 1.2;
}

.shop-modal-panel .shop-hero .helper-text {
  color: rgba(32, 21, 40, 0.68);
  font-weight: 700;
}

.shop-hero-watermark {
  position: absolute;
  right: 138px;
  bottom: -22px;
  z-index: 1;
  font-size: 112px;
  line-height: 1;
  opacity: 0.12;
  filter: saturate(0.9);
  pointer-events: none;
}

.shop-modal-panel .banner-tag {
  width: max-content;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  color: #2b1804;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(135deg, #f8d778, #f4b24b);
  border: 1px solid rgba(255, 248, 217, 0.66);
  box-shadow: 0 8px 18px rgba(143, 90, 20, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.home-v2-active .shop-modal-panel .shop-points-card,
.shop-modal-panel .shop-points-card {
  position: relative;
  z-index: 2;
  min-width: 190px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(8, 17, 28, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 16px 30px rgba(4, 11, 18, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.shop-modal-panel .shop-points-card span {
  color: rgba(255, 248, 223, 0.76);
}

body.home-v2-active .shop-modal-panel .shop-points-card strong,
.shop-modal-panel .shop-points-card strong {
  color: #f4d369;
  font-size: 34px;
  line-height: 1;
  text-shadow: 0 0 22px rgba(244, 211, 105, 0.28);
}

.shop-points-refresh {
  justify-self: end;
  width: 38px;
  height: 38px;
  color: #271807;
  background: linear-gradient(135deg, #f9e39a, #d8a63a);
  border: 1px solid rgba(255, 248, 223, 0.46);
}

body.home-v2-active .shop-modal-panel .shop-tabs,
.shop-modal-panel .shop-tabs {
  gap: 8px;
  padding: 7px;
  border-radius: 999px;
  background: rgba(4, 12, 20, 0.76);
  border: 1px solid rgba(178, 205, 217, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.shop-modal-panel .shop-tabs .auth-toggle {
  min-height: 40px;
  border-radius: 999px;
  color: rgba(229, 239, 244, 0.78);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.shop-modal-panel .shop-tabs .auth-toggle.active {
  color: #221608;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.5), transparent 24%),
    linear-gradient(135deg, #f4d369, #d8a63a);
  border-color: rgba(255, 247, 221, 0.36);
  box-shadow: 0 10px 22px rgba(216, 166, 58, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

body.home-v2-active .shop-modal-panel .shop-reward-card,
.shop-modal-panel .shop-reward-card,
body.home-v2-active .shop-modal-panel .shop-exchange-card,
.shop-modal-panel .shop-exchange-card,
.shop-modal-panel .shop-history-row,
.shop-modal-panel .shop-empty-state {
  border: 1px solid rgba(178, 205, 217, 0.15);
  background:
    radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.055), transparent 26%),
    linear-gradient(145deg, rgba(13, 38, 53, 0.94), rgba(5, 17, 28, 0.95));
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.shop-reward-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.shop-modal-panel .shop-reward-card {
  grid-template-rows: auto minmax(74px, 1fr) auto;
  padding: 12px;
  border-radius: 18px;
}

.shop-reward-cover {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 104px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.shop-reward-cover::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 52px;
  height: 52px;
  opacity: 0.1;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 22h36v28H14zM22 22c0-7 4-10 10-10s10 3 10 10' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M24 34h16' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 22h36v28H14zM22 22c0-7 4-10 10-10s10 3 10 10' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M24 34h16' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.shop-reward-cover span {
  position: relative;
  z-index: 1;
  font-size: 38px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.22));
}

.shop-reward-cover.pink {
  background: linear-gradient(135deg, #ff8fc2, #ffd8ec 48%, #f3c86c);
}

.shop-reward-cover.blue {
  background: linear-gradient(135deg, #7ad8ff, #d7f5ff 48%, #e6bf63);
}

.shop-reward-cover.gold {
  background: linear-gradient(135deg, #f6cf63, #fff0a6 46%, #c98c21);
}

.shop-reward-cover.mint {
  background: linear-gradient(135deg, #8ae8c4, #e7fff4 48%, #f0c25d);
}

.shop-reward-cover.violet {
  background: linear-gradient(135deg, #b99cff, #efdfff 48%, #77d5ff);
}

.shop-reward-cover.amber {
  background: linear-gradient(135deg, #f3a94a, #ffe7a8 48%, #ffb7c8);
}

.shop-reward-body {
  display: grid;
  gap: 8px;
  align-content: start;
}

.shop-modal-panel .shop-reward-meta {
  display: grid;
  gap: 8px;
  color: rgba(202, 214, 220, 0.82);
  font-size: 13px;
  font-weight: 800;
}

.shop-modal-panel .shop-exchange-card {
  padding: 18px;
  border-radius: 20px;
}

.shop-exchange-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.shop-rate-badge {
  flex: 0 0 auto;
  padding: 9px 12px;
  border-radius: 999px;
  color: #261704;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(135deg, #f7d978, #d8a63a);
  border: 1px solid rgba(255, 247, 221, 0.34);
}

.shop-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.shop-submit-disabled {
  min-height: 48px;
  border-radius: 18px;
}

.shop-modal-panel .shop-history-list {
  display: grid;
  gap: 10px;
}

.shop-modal-panel .shop-history-row {
  border-radius: 16px;
}

.shop-modal-panel .status-pill.success {
  color: #071708;
  background: linear-gradient(135deg, #83e65f, #c6f28a);
}

.shop-modal-panel .status-pill.warning {
  color: #281808;
  background: linear-gradient(135deg, #f7c65a, #f2df97);
}

@media (max-width: 768px) {
  .shop-modal-panel .modal-content {
    padding: 12px;
  }

  body.home-v2-active .shop-modal-panel .shop-hero,
  .shop-modal-panel .shop-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }

  .shop-hero-watermark {
    right: 8px;
    bottom: -14px;
    font-size: 78px;
  }

  body.home-v2-active .shop-modal-panel .shop-points-card,
  .shop-modal-panel .shop-points-card {
    width: 100%;
    min-width: 0;
  }

  .shop-reward-grid,
  .shop-form-grid {
    grid-template-columns: 1fr;
  }

  .shop-exchange-head {
    display: grid;
  }

  .shop-rate-badge {
    width: max-content;
  }
}

.checkin-modal-panel {
  width: min(100%, 900px);
  border: 1px solid rgba(235, 194, 105, 0.24);
  background:
    radial-gradient(circle at 12% 0%, rgba(229, 177, 73, 0.16), transparent 26%),
    radial-gradient(circle at 92% 14%, rgba(116, 204, 230, 0.12), transparent 28%),
    linear-gradient(180deg, #0b1723 0%, #06111c 58%, #040b12 100%);
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.checkin-modal-panel .modal-head {
  color: #fff7dd;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.32), transparent 20%),
    linear-gradient(135deg, #f2cc71 0%, #d8a63a 44%, #8f5a14 100%);
  border-bottom: 1px solid rgba(255, 239, 187, 0.28);
  box-shadow: 0 12px 26px rgba(4, 11, 18, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.checkin-modal-panel .modal-title {
  color: #251605;
  font-weight: 900;
}

.checkin-modal-panel .modal-head .icon-btn {
  color: #fff8df;
  background: rgba(37, 22, 5, 0.38);
  border: 1px solid rgba(255, 247, 221, 0.38);
  box-shadow: 0 10px 20px rgba(61, 35, 5, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.checkin-modal-panel .modal-head .icon-btn:hover {
  color: #251605;
  background: rgba(255, 248, 223, 0.86);
  border-color: rgba(255, 255, 255, 0.58);
}

.checkin-modal-panel .modal-content {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
    radial-gradient(circle at 0% 100%, rgba(229, 177, 73, 0.09), transparent 26%);
}

.checkin-modal {
  gap: 16px;
}

body.home-v2-active .checkin-modal-panel .checkin-shell-card,
.checkin-modal-panel .checkin-shell-card,
.checkin-modal-panel .checkin-rules-card {
  gap: 16px;
  padding: 18px;
  border-radius: 24px;
  color: #231b15;
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 235, 184, 0.34), transparent 28%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(248, 239, 221, 0.98));
  border: 1px solid rgba(235, 194, 105, 0.22);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.checkin-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.checkin-summary-card {
  min-width: 0;
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(244, 211, 105, 0.28), transparent 34%),
    linear-gradient(145deg, #111d29, #07111c);
  border: 1px solid rgba(216, 166, 58, 0.24);
  box-shadow: 0 14px 28px rgba(7, 17, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.checkin-summary-card span {
  color: rgba(255, 248, 223, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.checkin-summary-card strong {
  color: #f4d369;
  font-size: 22px;
  line-height: 1.1;
}

.checkin-modal-panel .checkin-calendar-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

body.home-v2-active .checkin-modal-panel .calendar-card,
.checkin-modal-panel .calendar-card {
  position: relative;
  min-height: 92px;
  padding: 10px 8px;
  border-radius: 18px;
  display: grid;
  gap: 6px;
  justify-items: center;
  align-content: center;
  color: #2d241b;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(208, 183, 132, 0.32);
  box-shadow: 0 10px 20px rgba(82, 61, 29, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.checkin-modal-panel .calendar-card:hover {
  transform: translateY(-3px);
  border-color: rgba(216, 166, 58, 0.48);
  box-shadow: 0 16px 28px rgba(82, 61, 29, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.checkin-day-number {
  position: absolute;
  top: 8px;
  left: 9px;
  color: rgba(45, 36, 27, 0.64);
  font-size: 11px;
  font-weight: 900;
}

.checkin-modal-panel .calendar-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
}

.checkin-modal-panel .calendar-label {
  color: rgba(45, 36, 27, 0.74);
  font-size: 11px;
  font-weight: 900;
}

.checkin-status-denied .calendar-icon {
  color: #fff;
  background: linear-gradient(135deg, #d93b48, #9f1d2a);
}

.checkin-status-ready {
  background: linear-gradient(180deg, #fff9e2, #ffe7a4);
  border-color: rgba(216, 166, 58, 0.56);
}

.checkin-status-ready .calendar-icon {
  color: #271807;
  background: linear-gradient(135deg, #f8d978, #d8a63a);
  box-shadow: 0 0 18px rgba(216, 166, 58, 0.34);
}

.checkin-status-claimed {
  background: linear-gradient(180deg, #fff, #eef9e7);
  border-color: rgba(84, 174, 84, 0.34);
}

.checkin-status-claimed .calendar-icon {
  background: linear-gradient(135deg, #8ce46c, #d8f7aa);
}

.checkin-status-future,
.checkin-status-next {
  background: linear-gradient(180deg, #fff, #f2f0eb);
}

.checkin-status-future .calendar-icon,
.checkin-status-next .calendar-icon {
  color: #7d7f83;
  background: #e2e3e5;
}

.checkin-status-next {
  border-style: dashed;
}

.checkin-day-card.current {
  border-color: rgba(31, 119, 186, 0.54);
  box-shadow: 0 0 0 3px rgba(31, 119, 186, 0.12), 0 12px 24px rgba(82, 61, 29, 0.11);
}

.checkin-day-card.current::after {
  content: "วันนี้";
  position: absolute;
  top: 7px;
  right: 7px;
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  background: #1f77ba;
  font-size: 10px;
  font-weight: 900;
}

.checkin-legend-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.checkin-modal-panel .checkin-legend-card {
  min-width: 0;
  padding: 11px 12px;
  border-radius: 16px;
  color: rgba(45, 36, 27, 0.82);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(208, 183, 132, 0.22);
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 8px 16px rgba(82, 61, 29, 0.06);
}

.checkin-modal-panel .legend-dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 999px;
  background: #c7c8ca;
}

.legend-dot-1,
.legend-dot-2 {
  background: #d8a63a;
}

.legend-dot-3 {
  background: #6ac95d;
}

.legend-dot-4,
.legend-dot-5 {
  background: #d93b48;
}

.legend-dot-6 {
  background: #b7bbc0;
}

.checkin-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.checkin-deposit-btn {
  min-height: 50px;
  color: #271807;
  border: 1px solid rgba(143, 90, 20, 0.18);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.48), transparent 24%),
    linear-gradient(135deg, #f8d978, #d8a63a);
  box-shadow: 0 14px 26px rgba(216, 166, 58, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.checkin-rule-link {
  color: #6f4b12;
  font-weight: 900;
}

.checkin-rule-row {
  justify-content: flex-start;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
}

.checkin-rule-index {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #251605;
  font-weight: 900;
  background: linear-gradient(135deg, #f8d978, #d8a63a);
}

@media (max-width: 768px) {
  .checkin-modal-panel .modal-content {
    padding: 12px;
  }

  .checkin-summary-grid,
  .checkin-legend-grid,
  .checkin-actions {
    grid-template-columns: 1fr;
  }

  .checkin-modal-panel .checkin-calendar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  body.home-v2-active .checkin-modal-panel .calendar-card,
  .checkin-modal-panel .calendar-card {
    min-height: 84px;
    border-radius: 16px;
  }
}

.wheel-modal-panel {
  width: min(100%, 900px);
  border: 1px solid rgba(235, 194, 105, 0.24);
  background:
    radial-gradient(circle at 14% 0%, rgba(229, 177, 73, 0.16), transparent 28%),
    radial-gradient(circle at 94% 10%, rgba(116, 204, 230, 0.12), transparent 28%),
    linear-gradient(180deg, #0b1723 0%, #06111c 58%, #040b12 100%);
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wheel-modal-panel .modal-head {
  color: #fff7dd;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.32), transparent 20%),
    linear-gradient(135deg, #f2cc71 0%, #d8a63a 44%, #8f5a14 100%);
  border-bottom: 1px solid rgba(255, 239, 187, 0.28);
  box-shadow: 0 12px 26px rgba(4, 11, 18, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.wheel-modal-panel .modal-title {
  color: #251605;
  font-weight: 900;
}

.wheel-modal-panel .modal-head .icon-btn {
  color: #fff8df;
  background: rgba(37, 22, 5, 0.38);
  border: 1px solid rgba(255, 247, 221, 0.38);
  box-shadow: 0 10px 20px rgba(61, 35, 5, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.wheel-modal-panel .modal-head .icon-btn:hover {
  color: #251605;
  background: rgba(255, 248, 223, 0.86);
  border-color: rgba(255, 255, 255, 0.58);
}

.wheel-modal-panel .modal-content {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
    radial-gradient(circle at 0% 100%, rgba(229, 177, 73, 0.09), transparent 26%);
}

.wheel-modal {
  gap: 16px;
}

body.home-v2-active .wheel-modal-panel .wheel-shell-card,
.wheel-modal-panel .wheel-shell-card,
.wheel-modal-panel .wheel-result-card,
.wheel-modal-panel .wheel-history-card,
.wheel-modal-panel .wheel-rules-card {
  gap: 16px;
  padding: 20px;
  border-radius: 24px;
  color: #231b15;
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 235, 184, 0.34), transparent 28%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(248, 239, 221, 0.98));
  border: 1px solid rgba(235, 194, 105, 0.22);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.wheel-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 318px;
  padding: 18px 0 8px;
}

.wheel-pointer {
  position: absolute;
  top: 6px;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 34px solid #f6d56d;
  filter: drop-shadow(0 8px 12px rgba(75, 43, 8, 0.24));
}

body.home-v2-active .wheel-modal-panel .wheel-mock,
.wheel-modal-panel .wheel-mock {
  position: relative;
  width: min(300px, 72vw);
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #251605;
  border: 10px solid rgba(255, 244, 206, 0.9);
  background:
    conic-gradient(from -18deg, #f4d369 0 16%, #65d5ff 16% 32%, #ff8fbf 32% 49%, #9ee06a 49% 66%, #f0a545 66% 83%, #bba2ff 83% 100%);
  box-shadow: 0 26px 54px rgba(25, 19, 11, 0.24), 0 0 0 12px rgba(216, 166, 58, 0.16), inset 0 0 0 14px rgba(8, 17, 28, 0.1);
  animation: wheelPulse 2.8s ease-in-out infinite;
}

.wheel-modal-panel .wheel-mock::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 1px dashed rgba(38, 23, 4, 0.28);
  box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.26);
}

.wheel-modal-panel .wheel-mock::after {
  content: "";
  position: absolute;
  inset: 50%;
  width: 104px;
  height: 104px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 26%),
    linear-gradient(135deg, #fff1b4, #d8a63a);
  border: 1px solid rgba(92, 55, 7, 0.18);
  box-shadow: 0 12px 22px rgba(75, 43, 8, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.wheel-center-icon {
  position: relative;
  z-index: 2;
  font-size: 46px;
  filter: drop-shadow(0 8px 14px rgba(75, 43, 8, 0.22));
}

.wheel-modal-panel .wheel-mock.spinning {
  animation: wheelSpin 1.35s cubic-bezier(0.18, 0.72, 0.2, 1);
}

/* Real reward wheel disc — coloured slices from the backend rewards, rotates to
   the winning slot with a long ease-out so it visibly spins. */
.wheel-disc {
  position: relative;
  width: min(300px, 72vw);
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 50%;
  color: #251605;
  border: 10px solid rgba(255, 244, 206, 0.95);
  box-shadow: 0 26px 54px rgba(25, 19, 11, 0.28), 0 0 0 12px rgba(216, 166, 58, 0.18), inset 0 0 0 14px rgba(8, 17, 28, 0.1);
  transform: rotate(0deg);
  transition: transform 0.2s ease;
  will-change: transform;
}

.wheel-disc.is-spinning {
  /* 5.6s to match spinWheelToIndex timeout; strong ease-out for a natural stop. */
  transition: transform 5.6s cubic-bezier(0.12, 0.66, 0.08, 1);
}

.wheel-disc::before {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px dashed rgba(38, 23, 4, 0.28);
  box-shadow: inset 0 0 34px rgba(255, 255, 255, 0.24);
  pointer-events: none;
}

.wheel-disc .wheel-center-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  font-size: 40px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 26%),
    linear-gradient(135deg, #fff1b4, #d8a63a);
  border: 1px solid rgba(92, 55, 7, 0.2);
  box-shadow: 0 12px 22px rgba(75, 43, 8, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Each slice label is rotated to its slice's mid-angle; the inner span pushes the
   text outward toward the rim. */
.wheel-seg-label {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.wheel-seg-label > span {
  display: block;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  color: #2a1806;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  max-width: 68px;
  text-align: center;
  transform-origin: center;
  white-space: nowrap;
}

/* ===== Chinese-New-Year themed wheel ===== */
@font-face {
  font-family: "SP KanEng";
  src: url("fonts/SP_KanEng.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Torsilp MangThoe";
  src: url("fonts/TorsilpThamnganMangThoe.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.wheel-modal-panel .wheel-shell-card.wheel-shell-cny {
  position: relative;
  overflow: hidden;
  color: #fff3cf;
  border: 2px solid rgba(247, 208, 120, 0.5);
  background:
    radial-gradient(circle at 50% 6%, rgba(255, 214, 120, 0.2), transparent 46%),
    linear-gradient(180deg, #a8161a 0%, #7d0f13 60%, #620b0e 100%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.cny-lantern {
  position: absolute;
  top: 10px;
  font-size: 28px;
  z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
  animation: cnyLanternSway 3.4s ease-in-out infinite;
}
.cny-lantern.l1 { left: 12px; }
.cny-lantern.l2 { right: 12px; animation-delay: -1.7s; }
@keyframes cnyLanternSway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}

.cny-banner {
  position: relative;
  z-index: 2;
  text-align: center;
  margin: 2px auto 6px;
  max-width: 300px;
  padding: 9px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, #e63a2f, #c31f1f);
  border: 1px solid rgba(255, 224, 150, 0.7);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.cny-banner small {
  display: block;
  color: #ffd76a;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 10px;
}
.cny-banner strong {
  display: block;
  color: #fff3cf;
  font-family: "Torsilp MangThoe", "Noto Sans Thai", sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(120, 10, 10, 0.6);
}

/* ===== โหมดโทรศัพท์: จัด layout กงล้อทั้งชุดให้สมดุล/กึ่งกลาง/ต่อเนื่องสวยงาม =====
   สาเหตุที่ทุกอย่างเยื้องขวา ~23px: .wheel-shell เป็น grid ที่มี column กว้างคงที่
   (~333px) กว้างกว่าเนื้อการ์ด จึงดันลูกทุกตัวไปทางขวา. ชดเชยด้วย translateX(-23px)
   ทุกองค์ประกอบให้กลับมากึ่งกลางเฟรมพอดี (วัดในสภาพมือถือจริงที่ scrollbar overlay).
   ส่วนแนวตั้ง: ยกป้ายขึ้นใกล้ขอบบน + ยกกงล้อตาม + ดึงการ์ด/ปุ่มขึ้นชิด (margin ลบ). */
@media (max-width: 768px) {
  /* ป้าย "หมุนปั๊บ รับเฮง" — ขึ้นบนใกล้เพดาน + กึ่งกลาง */
  .cny-banner {
    transform: translate(-23px, -118px);
  }
  /* ดึงการ์ดข้อมูล (แต้ม/ค่าใช้จ่าย) ขึ้นชิดกงล้อ (margin ลบ) + กึ่งกลาง */
  .wheel-info-grid {
    transform: translateX(-23px);
    margin-top: -96px;
  }
  /* ข้อความ + ปุ่ม + เมนูย่อย: จัดกึ่งกลางเฟรมให้ตรงแนวเดียวกันทั้งหมด */
  .wheel-cost-note,
  .wheel-quota-note,
  .wheel-spin-btn,
  .wheel-mini-actions {
    transform: translateX(-23px);
  }
  /* ซ่อนปุ่มปรับตำแหน่งลูกศร/ฐาน — เป็นเครื่องมือ dev ไม่ให้ลูกค้าเห็น */
  .wheel-tuner-toggle,
  .wheel-tuner-panel {
    display: none !important;
  }
}

.wheel-stage-cny {
  --wheel-bulb-radius: -152px;
  position: relative;
  z-index: 2;
  /* Fixed-width, auto-centred box that matches the gold frame width exactly.
     This is the anchor that keeps every layer aligned: the in-flow disc
     (margin:auto) and the absolutely-positioned frame/hub/pointer (left:50%)
     all reference THIS same box, so the pointer can never drift off the disc
     centre regardless of scrollbars or panel width. No magic offset needed. */
  width: min(336px, 85vw);
  margin-left: auto;
  margin-right: auto;
  padding: 16px 0;
  margin-bottom: 60px;
}

/* โหมดโทรศัพท์: ขยับทั้งเซทกงล้อให้อยู่กึ่งกลางการ์ดพอดี (สมดุลซ้าย-ขวา) +
   ขยับขึ้นเล็กน้อย. สาเหตุที่กงล้อเยื้องขวา: .wheel-shell เป็น grid ที่มี column
   กว้างคงที่ (~333px) กว้างกว่าเนื้อการ์ด จึงดัน stage box ไปทางขวา ~23px.
   ชดเชยด้วย translate ซ้าย 23px (วัดในสภาพมือถือจริงที่ scrollbar เป็น overlay
   ไม่กินพื้นที่) → frame อยู่กึ่งกลางการ์ดพอดี (offset 0). ขึ้น 18px ให้ลงตัว.
   ใช้ translate ที่ตัว stage (parent) จึงไม่กระทบ transform หมุนของ .wheel-disc. */
@media (max-width: 768px) {
  .wheel-stage-cny {
    /* ซ้าย 23px = กึ่งกลางเฟรม · ขึ้น 85px = ยกกงล้อขึ้นตามป้ายที่ยกขึ้นไป
       ให้ป้าย–กงล้อ–การ์ด เรียงต่อเนื่องชิดกันสวยงาม ไม่มีช่องโหว่กลาง. */
    transform: translate(-23px, -85px);
  }
}

.wheel-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(336px, 85vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Glossy RED rim ring (True You style) that carries the gold bulbs. */
  background: radial-gradient(circle at 50% 34%, #e0342c, #b3161a 60%, #7d0f13 100%);
  box-shadow:
    0 22px 44px rgba(0, 0, 0, 0.5),
    0 7px 0 #6a0d10, 0 11px 0 #540a0d,
    inset 0 3px 8px rgba(255, 255, 255, 0.28),
    inset 0 -8px 18px rgba(60, 4, 6, 0.7);
  z-index: 1;
}
/* Thin gold ring separating the red rim from the disc. */
.wheel-frame-inner {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255, 224, 150, 0.55), inset 0 0 14px rgba(60, 4, 6, 0.5);
}

.wheel-bulb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffdf0, #ffd45e 55%, #d98b16);
  box-shadow: 0 0 8px 2px rgba(255, 214, 110, 0.85), inset 0 -1px 2px rgba(150, 90, 10, 0.5);
  animation: bulbBlink 1.4s ease-in-out infinite;
}
@keyframes bulbBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Bottom stand + long arrow pointing UP into the wheel (winner lands here). */
.wheel-stage-cny .wheel-stand {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  /* No baked offset: the fixed-width .wheel-stage-cny box now guarantees this
     left:50% pointer lines up with the disc centre. --stand-dx / --stand-dy stay
     as optional live fine-tune from the tuner (#tune), default 0. */
  --stand-base-dx: 0px;
  transform: translate(calc(-50% + var(--stand-base-dx, 0px) + var(--stand-dx, 0px)), calc(min(280px, 71vw) / 2 - 22px + var(--stand-dy, 0px)));
  display: grid;
  justify-items: center;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.5));
}

.wheel-tuner {
  align-self: center;
  width: min(280px, 90%);
  margin: -34px auto 4px;
  padding: 10px 12px;
  border-radius: 14px;
  text-align: center;
  color: #fff3cf;
  background: rgba(10, 18, 28, 0.92);
  border: 1px solid rgba(235, 194, 105, 0.4);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.4);
}

.wheel-tuner-title {
  font-weight: 900;
  font-size: 13px;
  color: #ffe08a;
}

.wheel-tuner-read {
  margin: 4px 0 8px;
  font-size: 13px;
}

.wheel-tuner-read strong {
  color: #ffe08a;
}

.wheel-tuner-pad {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.wheel-tuner-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wheel-tuner-pad button {
  min-width: 44px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  font-weight: 800;
  color: #251605;
  background: linear-gradient(135deg, #f8d978, #d8a63a);
  border: 1px solid rgba(143, 90, 20, 0.4);
  cursor: pointer;
}

.wheel-tuner-hint {
  margin-top: 8px;
  font-size: 11px;
  color: rgba(255, 243, 207, 0.72);
}

.wheel-tuner-step {
  justify-content: center;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255, 243, 207, 0.85);
}
.wheel-tuner-step button {
  min-width: 40px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 9px;
  font-weight: 800;
  color: #fff3cf;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(235, 194, 105, 0.4);
  cursor: pointer;
}
.wheel-tuner-step button.is-on {
  color: #251605;
  background: linear-gradient(135deg, #f8d978, #d8a63a);
}

/* Toggle button that opens/closes the alignment panel (visible to operator). */
.wheel-tuner-toggle {
  align-self: center;
  margin-top: 4px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  color: #ffe08a;
  background: rgba(10, 18, 28, 0.65);
  border: 1px dashed rgba(235, 194, 105, 0.45);
  cursor: pointer;
}

.wheel-stage-cny .wheel-pointer {
  position: relative;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 46px solid #1c1c1c;
  z-index: 3;
}
.wheel-stage-cny .wheel-pointer::after {
  content: "";
  position: absolute;
  left: -6px;
  top: 38px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #e0ab3e);
  box-shadow: 0 0 6px rgba(240, 200, 92, 0.7);
}
.wheel-base {
  width: 118px;
  height: 30px;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(180deg, #2a2a2a, #111);
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.12);
}
.wheel-base-plate {
  width: 162px;
  height: 18px;
  border-radius: 999px;
  margin-top: -4px;
  background: linear-gradient(180deg, #222, #0b0b0b);
}

.wheel-stage-cny .wheel-disc {
  z-index: 3;
  width: min(280px, 71vw);
  border: 4px solid rgba(255, 224, 150, 0.6);
  box-shadow: inset 0 0 30px rgba(60, 4, 6, 0.5);
}
.wheel-stage-cny .wheel-disc::before {
  inset: 0;
  border: none;
  /* Darken toward the centre so slices get a 3D radial depth. */
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.3), transparent 46%);
  box-shadow: inset 0 0 30px rgba(60, 4, 6, 0.4);
}

/* ===== upright label layer (icon badge + gold text pill) ===== */
.wheel-stage-cny .wheel-labels {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Must match .wheel-disc size exactly so each label sits on its own slice. */
  width: min(300px, 72vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
}
.wheel-labels .wheel-seg-label {
  transform-origin: center;
  align-items: flex-start;
}
.wheel-labels.is-spinning .wheel-seg-label,
.wheel-labels.is-spinning .wheel-seg-label > span {
  transition: transform 5.6s cubic-bezier(0.12, 0.66, 0.08, 1);
}
.wheel-labels .wheel-seg-label > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  max-width: 92px;
  transform-origin: center;
  will-change: transform;
}
.wheel-seg-ic {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 23px;
  background: radial-gradient(circle at 36% 28%, #ffffff, #ffe9c2 62%, #f4cf94 100%);
  box-shadow:
    0 4px 8px rgba(60, 4, 6, 0.4),
    inset 0 2px 3px rgba(255, 255, 255, 0.95),
    inset 0 -3px 6px rgba(180, 120, 40, 0.5);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
  animation: wheelSegBob 2.8s ease-in-out infinite;
}
@keyframes wheelSegBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-2px) scale(1.05); }
}
.wheel-seg-tx {
  font-family: "SP KanEng", "Noto Sans Thai", sans-serif;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  padding: 2px 9px;
  border-radius: 999px;
  color: #7d0f13;
  background: linear-gradient(180deg, #ffe08a, #f0c85c);
  border: 1px solid rgba(125, 15, 19, 0.35);
  box-shadow: 0 2px 4px rgba(60, 4, 6, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

.wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  width: 84px;
  height: 84px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  border-radius: 50%;
  /* Dark centre hub (reference) with a gold ring. */
  background:
    radial-gradient(circle at 36% 28%, #4a4a4a, #1c1c1c 66%, #0a0a0a 100%);
  border: 4px solid #ffdf8a;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55), 0 0 18px rgba(240, 200, 92, 0.4), inset 0 2px 5px rgba(255, 255, 255, 0.18);
  color: #ffe08a;
  font-weight: 900;
  line-height: 1.05;
}
.wheel-hub b { font-family: "SP KanEng", "Noto Sans Thai", sans-serif; font-size: 20px; color: #ffe08a; }
.wheel-hub small { font-family: "SP KanEng", "Noto Sans Thai", sans-serif; font-size: 10px; color: #f0c85c; letter-spacing: 1px; }

.wheel-stage-cny .wheel-seg-label > span {
  font-family: "SP KanEng", "Noto Sans Thai", sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-shadow: none;
}

.wheel-shell-cny .wheel-cost-note {
  color: #fff3cf;
  font-size: 14px;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.wheel-shell-cny .wheel-cost-note strong {
  color: #ffe08a;
}

.wheel-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Two-card layout (points / cost-per-spin): centre the pair so it stays
   balanced under the wheel instead of hugging the left edge. */
.wheel-info-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}

.wheel-info-card {
  min-width: 0;
  display: grid;
  gap: 5px;
  padding: 13px;
  border-radius: 18px;
  color: #fff8df;
  background:
    radial-gradient(circle at 100% 0%, rgba(244, 211, 105, 0.22), transparent 34%),
    linear-gradient(145deg, #111d29, #07111c);
  border: 1px solid rgba(216, 166, 58, 0.24);
  box-shadow: 0 12px 24px rgba(7, 17, 28, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.wheel-info-card span {
  color: rgba(255, 248, 223, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.wheel-info-card strong {
  color: #f4d369;
  font-size: 20px;
  line-height: 1.1;
}

.wheel-cost-note {
  text-align: center;
  color: rgba(45, 36, 27, 0.68);
  font-weight: 800;
}

.wheel-quota-note {
  margin-top: -2px;
  color: #b8791a;
}

.wheel-quota-note strong {
  color: #a85a1a;
}

.wheel-quota-note.is-out {
  color: #c0392b;
}

.wheel-spin-btn {
  min-height: 52px;
  color: #271807;
  border: 1px solid rgba(143, 90, 20, 0.18);
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.48), transparent 24%),
    linear-gradient(135deg, #f8d978, #d8a63a);
  box-shadow: 0 14px 26px rgba(216, 166, 58, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.wheel-exchange-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(208, 183, 132, 0.24);
  box-shadow: 0 10px 22px rgba(82, 61, 29, 0.07);
}

.wheel-exchange-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.wheel-exchange-btn {
  min-height: 46px;
  padding-inline: 18px;
}

.wheel-mini-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.wheel-mini-actions .secondary-btn,
.wheel-mini-actions .link-btn {
  min-height: 40px;
  border-radius: 999px;
}

.wheel-result-card {
  text-align: center;
}

.wheel-result-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 36px;
  background: linear-gradient(135deg, #f8d978, #d8a63a);
  box-shadow: 0 16px 30px rgba(216, 166, 58, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.wheel-result-prize {
  color: #8f5a14;
  font-size: 28px;
  font-weight: 900;
}

.wheel-history-table {
  overflow-x: auto;
}

.wheel-history-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  align-items: center;
}

.wheel-rule-row {
  justify-content: flex-start;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
}

.wheel-rule-index {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #251605;
  font-weight: 900;
  background: linear-gradient(135deg, #f8d978, #d8a63a);
}

@media (max-width: 768px) {
  .wheel-modal-panel .modal-content {
    padding: 12px;
  }

  .wheel-modal-panel .wheel-shell-card,
  .wheel-modal-panel .wheel-result-card,
  .wheel-modal-panel .wheel-history-card,
  .wheel-modal-panel .wheel-rules-card {
    padding: 14px;
    border-radius: 20px;
  }

  .wheel-stage {
    min-height: 242px;
  }

  body.home-v2-active .wheel-modal-panel .wheel-mock,
  .wheel-modal-panel .wheel-mock {
    width: min(232px, 78vw);
    border-width: 8px;
  }

  .wheel-modal-panel .wheel-mock::after {
    width: 82px;
    height: 82px;
  }

  .wheel-center-icon {
    font-size: 36px;
  }

  .wheel-info-grid,
  .wheel-exchange-grid {
    grid-template-columns: 1fr;
  }

  .wheel-info-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wheel-history-row,
  .wheel-history-table .table-header-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .wheel-result-prize {
    font-size: 24px;
  }
}

.random-box-modal-panel {
  width: min(100%, 900px);
  border: 1px solid rgba(235, 194, 105, 0.24);
  background:
    radial-gradient(circle at 14% 0%, rgba(229, 177, 73, 0.16), transparent 28%),
    radial-gradient(circle at 94% 10%, rgba(116, 204, 230, 0.12), transparent 28%),
    linear-gradient(180deg, #0b1723 0%, #06111c 58%, #040b12 100%);
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.random-box-modal-panel .modal-head {
  color: #fff7dd;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.32), transparent 20%),
    linear-gradient(135deg, #f2cc71 0%, #d8a63a 44%, #8f5a14 100%);
  border-bottom: 1px solid rgba(255, 239, 187, 0.28);
  box-shadow: 0 12px 26px rgba(4, 11, 18, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.random-box-modal-panel .modal-title {
  color: #251605;
  font-weight: 900;
}

.random-box-modal-panel .modal-head .icon-btn {
  color: #fff8df;
  background: rgba(37, 22, 5, 0.38);
  border: 1px solid rgba(255, 247, 221, 0.38);
  box-shadow: 0 10px 20px rgba(61, 35, 5, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.random-box-modal-panel .modal-head .icon-btn:hover {
  color: #251605;
  background: rgba(255, 248, 223, 0.86);
  border-color: rgba(255, 255, 255, 0.58);
}

.random-box-modal-panel .modal-content {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
    radial-gradient(circle at 0% 100%, rgba(229, 177, 73, 0.09), transparent 26%);
}

.random-box-modal {
  gap: 16px;
}

body.home-v2-active .random-box-modal-panel .random-box-shell-card,
.random-box-modal-panel .random-box-shell-card,
.random-box-modal-panel .random-box-history-card,
.random-box-modal-panel .box-open-shell,
.random-box-modal-panel .random-box-result-card {
  gap: 16px;
  padding: 20px;
  border-radius: 24px;
  color: #231b15;
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 235, 184, 0.34), transparent 28%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(248, 239, 221, 0.98));
  border: 1px solid rgba(235, 194, 105, 0.22);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.random-box-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.random-box-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.random-box-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(120px, 0.9fr) minmax(0, 1.1fr);
  gap: 14px;
  padding: 14px;
  border-radius: 22px;
  overflow: hidden;
  color: #fff8df;
  border: 1px solid rgba(255, 244, 206, 0.18);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.12), transparent 26%),
    linear-gradient(145deg, #12283a, #07111c);
  box-shadow: 0 16px 34px rgba(7, 17, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.random-box-card.gold {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.14), transparent 26%),
    linear-gradient(145deg, #5c3b10, #17202b 54%, #07111c);
}

.random-box-card.blue {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.14), transparent 26%),
    linear-gradient(145deg, #123d5a, #17202b 54%, #07111c);
}

.random-box-thumb {
  position: relative;
  min-height: 148px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 18%, rgba(255, 255, 255, 0.48), transparent 24%),
    linear-gradient(135deg, #f8d978, #ff9fc4 48%, #78d7ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.random-box-thumb::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 58px;
  height: 58px;
  opacity: 0.14;
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 22h36v28H14zM22 22c0-7 4-10 10-10s10 3 10 10' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M24 34h16' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 22h36v28H14zM22 22c0-7 4-10 10-10s10 3 10 10' fill='none' stroke='black' stroke-width='5' stroke-linejoin='round'/%3E%3Cpath d='M24 34h16' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.random-box-thumb span {
  position: relative;
  z-index: 1;
  font-size: 54px;
  filter: drop-shadow(0 10px 18px rgba(75, 43, 8, 0.24));
}

.random-box-card-body {
  display: grid;
  align-content: space-between;
  gap: 12px;
}

.random-box-card .menu-title {
  color: #fff;
}

.random-box-card .helper-text {
  color: rgba(255, 248, 223, 0.7);
}

.random-box-card-actions {
  display: grid;
  gap: 8px;
}

.random-box-card-actions .primary-btn {
  color: #271807;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.48), transparent 24%),
    linear-gradient(135deg, #f8d978, #d8a63a);
  border: 1px solid rgba(255, 244, 206, 0.34);
}

.random-box-modal-panel .box-open-head {
  color: #8f5a14;
  font-size: 20px;
}

.random-box-opening-stage {
  position: relative;
  min-height: 230px;
  display: grid;
  place-items: center;
}

.random-box-opening-glow {
  position: absolute;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 166, 58, 0.44), transparent 64%);
  animation: randomBoxGlow 1.2s ease-in-out infinite;
}

.random-box-opening-gift {
  position: relative;
  z-index: 1;
  width: 138px;
  height: 138px;
  display: grid;
  place-items: center;
  border-radius: 32px;
  font-size: 66px;
  background:
    radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.6), transparent 26%),
    linear-gradient(135deg, #f8d978, #ff9fc4 48%, #78d7ff);
  box-shadow: 0 22px 42px rgba(75, 43, 8, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.random-box-opening-gift.opening {
  animation: randomBoxBounce 1.2s ease-in-out infinite;
}

.random-box-result-card {
  text-align: center;
}

.random-box-result-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 36px;
  background: linear-gradient(135deg, #f8d978, #d8a63a);
  box-shadow: 0 16px 30px rgba(216, 166, 58, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.random-box-result-prize {
  color: #8f5a14;
  font-size: 28px;
  font-weight: 900;
}

.random-box-history-table {
  overflow-x: auto;
}

.random-box-history-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.8fr auto;
  align-items: center;
}

.random-box-empty {
  color: #6c5a41;
  background: rgba(255, 255, 255, 0.74);
}

@keyframes randomBoxBounce {
  0%, 100% { transform: translateY(0) scale(1) rotate(-2deg); }
  42% { transform: translateY(-12px) scale(1.04) rotate(2deg); }
  70% { transform: translateY(2px) scale(0.98) rotate(-1deg); }
}

@keyframes randomBoxGlow {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 0.9; transform: scale(1.08); }
}

/* Win banner shown at the top of the box modal after a successful open. */
.random-box-win-banner {
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(199, 243, 90, 0.22), rgba(126, 231, 180, 0.18));
  border: 1px solid rgba(199, 243, 90, 0.5);
  color: #eafff0;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 8px 22px rgba(126, 231, 180, 0.18);
  animation: randomBoxWinPop 0.5s ease;
}

.random-box-win-banner strong { color: #c7f35a; }

@keyframes randomBoxWinPop {
  0% { transform: scale(0.9); opacity: 0; }
  60% { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 768px) {
  .random-box-modal-panel .modal-content {
    padding: 12px;
  }

  .random-box-modal-panel .random-box-shell-card,
  .random-box-modal-panel .random-box-history-card,
  .random-box-modal-panel .box-open-shell,
  .random-box-modal-panel .random-box-result-card {
    padding: 14px;
    border-radius: 20px;
  }

  .random-box-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .random-box-grid,
  .random-box-card {
    grid-template-columns: 1fr;
  }

  .random-box-thumb {
    min-height: 132px;
  }

  .random-box-history-row,
  .random-box-history-table .table-header-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .random-box-result-prize {
    font-size: 24px;
  }
}

.freebies-modal-panel {
  width: min(100%, 860px);
  border: 1px solid rgba(235, 194, 105, 0.24);
  background:
    radial-gradient(circle at 14% 0%, rgba(229, 177, 73, 0.16), transparent 28%),
    radial-gradient(circle at 94% 10%, rgba(116, 204, 230, 0.12), transparent 28%),
    linear-gradient(180deg, #0b1723 0%, #06111c 58%, #040b12 100%);
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.freebies-modal-panel .modal-head {
  color: #fff7dd;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.32), transparent 20%),
    linear-gradient(135deg, #f2cc71 0%, #d8a63a 44%, #8f5a14 100%);
  border-bottom: 1px solid rgba(255, 239, 187, 0.28);
  box-shadow: 0 12px 26px rgba(4, 11, 18, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.freebies-modal-panel .modal-title {
  color: #251605;
  font-weight: 900;
}

.freebies-modal-panel .modal-head .icon-btn {
  color: #fff8df;
  background: rgba(37, 22, 5, 0.38);
  border: 1px solid rgba(255, 247, 221, 0.38);
  box-shadow: 0 10px 20px rgba(61, 35, 5, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.freebies-modal-panel .modal-head .icon-btn:hover {
  color: #251605;
  background: rgba(255, 248, 223, 0.86);
  border-color: rgba(255, 255, 255, 0.58);
}

.freebies-modal-panel .modal-content {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
    radial-gradient(circle at 0% 100%, rgba(229, 177, 73, 0.09), transparent 26%);
}

.freebies-modal {
  gap: 16px;
}

body.home-v2-active .freebies-modal-panel .freebies-shell-card,
.freebies-modal-panel .freebies-shell-card {
  gap: 16px;
  padding: 20px;
  border-radius: 24px;
  color: #231b15;
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 235, 184, 0.34), transparent 28%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(248, 239, 221, 0.98));
  border: 1px solid rgba(235, 194, 105, 0.22);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.freebies-head {
  align-items: center;
}

body.home-v2-active .freebies-modal-panel .freebies-tabs,
.freebies-modal-panel .freebies-tabs {
  gap: 8px;
  padding: 7px;
  border-radius: 999px;
  background: rgba(4, 12, 20, 0.76);
  border: 1px solid rgba(178, 205, 217, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.freebies-modal-panel .freebies-tabs .auth-toggle {
  min-height: 40px;
  border-radius: 999px;
  color: rgba(229, 239, 244, 0.78);
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.freebies-modal-panel .freebies-tabs .auth-toggle.active {
  color: #221608;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.5), transparent 24%),
    linear-gradient(135deg, #f4d369, #d8a63a);
  border-color: rgba(255, 247, 221, 0.36);
  box-shadow: 0 10px 22px rgba(216, 166, 58, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.freebies-balance {
  color: #251605;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.48), transparent 24%),
    linear-gradient(135deg, #f8d978, #d8a63a);
  border: 1px solid rgba(143, 90, 20, 0.18);
  box-shadow: 0 12px 22px rgba(216, 166, 58, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.freebies-reward-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.freebies-reward-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(244, 211, 105, 0.22), transparent 34%),
    linear-gradient(145deg, #111d29, #07111c);
  border: 1px solid rgba(216, 166, 58, 0.2);
  box-shadow: 0 16px 34px rgba(7, 17, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.freebies-reward-card.diamond {
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 215, 255, 0.2), transparent 34%),
    linear-gradient(145deg, #102f44, #07111c);
}

.freebies-reward-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  font-size: 28px;
  background:
    radial-gradient(circle at 30% 16%, rgba(255, 255, 255, 0.48), transparent 28%),
    linear-gradient(135deg, #f8d978, #ffb2ce 52%, #78d7ff);
  border: 1px solid rgba(255, 244, 206, 0.28);
  box-shadow: 0 12px 22px rgba(75, 43, 8, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.34);
}
.freebies-reward-icon svg { width: 32px; height: 32px; display: block; }

.freebies-reward-body {
  min-width: 0;
  display: grid;
  gap: 8px;
}

.freebies-reward-card .menu-title {
  color: #fff;
}

.freebies-reward-card .helper-text {
  color: rgba(255, 248, 223, 0.7);
  font-weight: 700;
}

.freebies-claim-btn {
  grid-column: 1 / -1;
  min-height: 46px;
  color: #271807;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.48), transparent 24%),
    linear-gradient(135deg, #f8d978, #d8a63a);
  border: 1px solid rgba(255, 244, 206, 0.34);
}

.freebies-modal-panel .disabled-btn.freebies-claim-btn {
  color: rgba(50, 54, 58, 0.72);
  background: linear-gradient(145deg, #d3d5d8, #aeb3b8);
  border-color: rgba(120, 126, 132, 0.22);
  box-shadow: none;
}

.freebies-modal-panel .status-pill.success {
  color: #071708;
  background: linear-gradient(135deg, #83e65f, #c6f28a);
}

.freebies-modal-panel .status-pill.claimed {
  color: #2f353a;
  background: linear-gradient(135deg, #d5d8dc, #b6bcc2);
}

.freebies-empty {
  color: #6c5a41;
  background: rgba(255, 255, 255, 0.74);
}

@media (max-width: 768px) {
  .freebies-modal-panel .modal-content {
    padding: 12px;
  }

  .freebies-modal-panel .freebies-shell-card {
    padding: 14px;
    border-radius: 20px;
  }

  .freebies-head {
    flex-direction: column;
    align-items: stretch;
  }

  .freebies-reward-grid {
    grid-template-columns: 1fr;
  }

  .freebies-reward-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
}

.promotion-modal-panel {
  width: min(100%, 900px);
  border: 1px solid rgba(235, 194, 105, 0.24);
  background:
    radial-gradient(circle at 14% 0%, rgba(229, 177, 73, 0.16), transparent 28%),
    radial-gradient(circle at 94% 10%, rgba(116, 204, 230, 0.12), transparent 28%),
    linear-gradient(180deg, #0b1723 0%, #06111c 58%, #040b12 100%);
  box-shadow: 0 30px 74px rgba(0, 0, 0, 0.54), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.promotion-modal-panel .modal-head {
  color: #fff7dd;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.32), transparent 20%),
    linear-gradient(135deg, #f2cc71 0%, #d8a63a 44%, #8f5a14 100%);
  border-bottom: 1px solid rgba(255, 239, 187, 0.28);
  box-shadow: 0 12px 26px rgba(4, 11, 18, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.promotion-modal-panel .modal-title {
  color: #251605;
  font-weight: 900;
}

.promotion-modal-panel .modal-head .icon-btn {
  color: #fff8df;
  background: rgba(37, 22, 5, 0.38);
  border: 1px solid rgba(255, 247, 221, 0.38);
  box-shadow: 0 10px 20px rgba(61, 35, 5, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.promotion-modal-panel .modal-head .icon-btn:hover {
  color: #251605;
  background: rgba(255, 248, 223, 0.86);
  border-color: rgba(255, 255, 255, 0.58);
}

.promotion-modal-panel .modal-content {
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 18%),
    radial-gradient(circle at 0% 100%, rgba(229, 177, 73, 0.09), transparent 26%);
  scrollbar-color: rgba(216, 166, 58, 0.56) rgba(255, 255, 255, 0.08);
}

.promotion-modal-panel .modal-content::-webkit-scrollbar {
  width: 9px;
}

.promotion-modal-panel .modal-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #f2cc71, #8f5a14);
}

.promotion-modal-panel .modal-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.06);
}

.promotions-modal {
  gap: 16px;
}

body.home-v2-active .promotion-modal-panel .promotion-shell-card,
.promotion-modal-panel .promotion-shell-card,
.promotion-modal-panel .promotion-detail-card {
  gap: 16px;
  padding: 20px;
  border-radius: 24px;
  color: #231b15;
  background:
    radial-gradient(circle at 94% 0%, rgba(255, 235, 184, 0.34), transparent 28%),
    linear-gradient(180deg, rgba(255, 253, 248, 0.99), rgba(248, 239, 221, 0.98));
  border: 1px solid rgba(235, 194, 105, 0.22);
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.promotion-select-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(208, 183, 132, 0.24);
  box-shadow: 0 10px 22px rgba(82, 61, 29, 0.07);
}

.promotion-select-shell {
  background: rgba(8, 17, 28, 0.9);
  border-color: rgba(216, 166, 58, 0.26);
}

.promotion-select-shell .select-input {
  color: #fff8df;
}

.promotion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.promotion-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(244, 211, 105, 0.18), transparent 34%),
    linear-gradient(145deg, #111d29, #07111c);
  border: 1px solid rgba(216, 166, 58, 0.2);
  box-shadow: 0 16px 34px rgba(7, 17, 28, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.promotion-card.active {
  border-color: rgba(131, 230, 95, 0.42);
  box-shadow: 0 16px 34px rgba(7, 17, 28, 0.2), inset 4px 0 0 rgba(131, 230, 95, 0.76);
}

.promo-mock-thumb {
  position: relative;
  min-height: 136px;
  display: grid;
  align-content: end;
  justify-items: start;
  gap: 6px;
  padding: 16px;
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  border: 1px solid rgba(255, 244, 206, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.promo-mock-thumb.gold {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.36), transparent 22%),
    linear-gradient(135deg, #6b4210, #d8a63a 54%, #12283a);
}

.promo-mock-thumb.pink {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.36), transparent 22%),
    linear-gradient(135deg, #7a2048, #ff93c1 52%, #12283a);
}

.promo-mock-thumb.blue {
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.36), transparent 22%),
    linear-gradient(135deg, #123d5a, #79d7ff 52%, #d8a63a);
}

.promo-mock-thumb::after {
  content: "🎁";
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 54px;
  opacity: 0.18;
}

.promo-mock-thumb.large {
  min-height: 210px;
}

.promo-mock-thumb span {
  position: relative;
  z-index: 1;
  padding: 6px 10px;
  border-radius: 999px;
  color: #251605;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(135deg, #f8d978, #fff1b4);
}

.promo-mock-thumb strong {
  position: relative;
  z-index: 1;
  font-size: 22px;
  line-height: 1.15;
}

.promotion-card-body {
  display: grid;
  gap: 10px;
}

.promotion-card .menu-title,
.promotion-detail-card .menu-title {
  color: #fff;
}

.promotion-detail-card .menu-title {
  color: #231b15;
  font-size: 22px;
}

.promotion-card .helper-text {
  color: rgba(255, 248, 223, 0.72);
  font-weight: 700;
}

.promotion-card-title,
.promotion-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.promotion-card-actions,
.promotion-detail-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.promotion-card-actions .primary-btn,
.promotion-detail-actions .primary-btn {
  color: #271807;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.48), transparent 24%),
    linear-gradient(135deg, #f8d978, #d8a63a);
  border: 1px solid rgba(255, 244, 206, 0.34);
}

.promotion-condition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.promotion-condition-card {
  display: grid;
  gap: 5px;
  padding: 13px;
  border-radius: 16px;
  color: #fff8df;
  background: linear-gradient(145deg, #111d29, #07111c);
  border: 1px solid rgba(216, 166, 58, 0.2);
}

.promotion-condition-card span {
  color: rgba(255, 248, 223, 0.72);
  font-size: 12px;
  font-weight: 800;
}

.promotion-condition-card strong {
  color: #f4d369;
}

.promotion-empty {
  display: grid;
  gap: 8px;
  place-items: center;
  color: #6c5a41;
  background: rgba(255, 255, 255, 0.74);
}

.promotion-empty-icon {
  font-size: 34px;
}

@media (max-width: 768px) {
  .promotion-modal-panel .modal-content {
    padding: 12px;
  }

  .promotion-modal-panel .promotion-shell-card,
  .promotion-modal-panel .promotion-detail-card {
    padding: 14px;
    border-radius: 20px;
  }

  .promotion-grid,
  .promotion-condition-grid,
  .promotion-card-actions,
  .promotion-detail-actions {
    grid-template-columns: 1fr;
  }

  .promo-mock-thumb.large {
    min-height: 160px;
  }

  .promotion-card-title,
  .promotion-detail-head {
    display: grid;
  }
}

/* Provider premium mock UI */
body.home-v2-active .provider-modal-panel,
.provider-modal-panel {
  width: min(100%, 1180px);
  max-height: min(92vh, 900px);
  overflow: hidden;
  border-radius: 28px;
  background:
    radial-gradient(circle at 12% 0%, rgba(244, 211, 105, 0.24), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(103, 215, 255, 0.16), transparent 32%),
    linear-gradient(145deg, #111b27 0%, #07111c 58%, #12100b 100%);
  border: 1px solid rgba(216, 166, 58, 0.28);
  box-shadow: 0 30px 84px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.provider-modal-panel .modal-head {
  color: #fff8df;
  background:
    linear-gradient(135deg, rgba(248, 217, 120, 0.22), rgba(216, 166, 58, 0.08)),
    rgba(7, 17, 28, 0.76);
  border-bottom: 1px solid rgba(216, 166, 58, 0.25);
}

.provider-modal-panel .modal-title {
  color: #f8d978;
  text-shadow: 0 0 20px rgba(216, 166, 58, 0.22);
}

.provider-modal-panel .modal-head .icon-btn {
  color: #fff1b4;
  background: rgba(255, 244, 206, 0.08);
  border: 1px solid rgba(248, 217, 120, 0.28);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.provider-modal-panel .modal-head .icon-btn:hover {
  color: #261705;
  background: linear-gradient(135deg, #fff1b4, #d8a63a);
  transform: translateY(-1px);
}

.provider-modal-panel .modal-content {
  padding: 18px;
  overflow: auto;
  background:
    linear-gradient(180deg, rgba(255, 248, 230, 0.06), rgba(255, 248, 230, 0.02)),
    rgba(6, 13, 22, 0.72);
}

.provider-modal-panel .modal-content::-webkit-scrollbar {
  width: 9px;
}

.provider-modal-panel .modal-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #f8d978, #8f631c);
  border: 2px solid #07111c;
}

.provider-modal-panel .modal-content::-webkit-scrollbar-track {
  background: rgba(255, 248, 223, 0.06);
}

.provider-modal {
  gap: 16px;
}

.provider-control-card,
.provider-games-panel {
  position: relative;
  padding: 16px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 94% 0%, rgba(244, 211, 105, 0.14), transparent 30%),
    linear-gradient(145deg, rgba(255, 251, 239, 0.94), rgba(246, 235, 212, 0.9));
  border: 1px solid rgba(235, 194, 105, 0.28);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.provider-control-card .search-shell {
  background: rgba(8, 17, 28, 0.9);
  border-color: rgba(216, 166, 58, 0.3);
}

.provider-control-card .search-input {
  color: #fff8df;
}

.provider-control-card .search-input::placeholder {
  color: rgba(255, 248, 223, 0.58);
}

.provider-tabs {
  display: flex;
  gap: 8px;
  padding: 8px;
  overflow-x: auto;
  border-radius: 999px;
  background: rgba(8, 17, 28, 0.92);
  border: 1px solid rgba(216, 166, 58, 0.2);
}

.provider-tabs::-webkit-scrollbar {
  height: 0;
}

.provider-tabs .auth-toggle {
  flex: 0 0 auto;
  border-radius: 999px;
  color: rgba(255, 248, 223, 0.76);
  background: transparent;
  border: 1px solid transparent;
}

.provider-tabs .auth-toggle.active {
  color: #241604;
  background: linear-gradient(135deg, #fff1b4, #d8a63a);
  border-color: rgba(255, 244, 206, 0.5);
  box-shadow: 0 10px 24px rgba(216, 166, 58, 0.24);
}

body.home-v2-active .provider-grid,
.provider-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

body.home-v2-active .provider-card,
.provider-card {
  position: relative;
  min-width: 0;
  display: grid;
  gap: 11px;
  padding: 13px;
  border-radius: 22px;
  overflow: hidden;
  color: #fff8df;
  cursor: pointer;
  background:
    radial-gradient(circle at 22% 0%, rgba(244, 211, 105, 0.2), transparent 32%),
    radial-gradient(circle at 100% 18%, rgba(103, 215, 255, 0.14), transparent 26%),
    linear-gradient(145deg, #101c28, #07111c);
  border: 1px solid rgba(216, 166, 58, 0.18);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

body.home-v2-active .provider-card:hover,
.provider-card:hover {
  transform: translateY(-3px);
  border-color: rgba(248, 217, 120, 0.48);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.3), 0 0 24px rgba(216, 166, 58, 0.14);
}

body.home-v2-active .provider-card.active,
.provider-card.active {
  border-color: rgba(131, 230, 95, 0.48);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.3), inset 4px 0 0 rgba(131, 230, 95, 0.78);
}

.provider-card-top,
.provider-card-copy,
.provider-card .provider-actions {
  position: relative;
  z-index: 1;
}

.provider-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

body.home-v2-active .provider-logo-mock,
.provider-logo-mock {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: #231604;
  font-size: 15px;
  font-weight: 950;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.72), transparent 22%),
    linear-gradient(135deg, #fff1b4, #d8a63a 58%, #67d7ff);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}

.provider-category-badge,
.provider-games-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  padding: 5px 9px;
  border-radius: 999px;
  color: #2b1a06;
  font-size: 11px;
  font-weight: 900;
  background: linear-gradient(135deg, #fff6d1, #e8c968);
}

.provider-card .menu-title {
  color: #fff;
  font-size: 14px;
  line-height: 1.25;
}

.provider-card .menu-desc {
  color: rgba(255, 248, 223, 0.64);
  font-size: 12px;
}

.provider-mini-covers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.provider-mini-cover {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid rgba(255, 244, 206, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.provider-mini-cover b {
  font-size: 18px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28));
}

.provider-actions,
.provider-game-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.provider-actions .secondary-btn,
.provider-actions .primary-btn,
.provider-game-actions .secondary-btn,
.provider-game-actions .primary-btn {
  min-height: 36px;
  padding-inline: 9px;
  border-radius: 13px;
  font-size: 12px;
  white-space: nowrap;
}

.provider-actions .primary-btn,
.provider-game-actions .primary-btn {
  color: #251705;
  background:
    radial-gradient(circle at 20% 12%, rgba(255, 255, 255, 0.56), transparent 24%),
    linear-gradient(135deg, #fff1b4, #d8a63a);
  border-color: rgba(255, 244, 206, 0.38);
}

.provider-actions .secondary-btn,
.provider-game-actions .secondary-btn {
  color: #fff8df;
  background: rgba(255, 248, 223, 0.08);
  border-color: rgba(255, 244, 206, 0.18);
}

.provider-games-panel .section-head {
  align-items: center;
  margin-bottom: 14px;
}

.provider-games-panel .section-title {
  color: #231b15;
}

.provider-games-panel .section-subtitle {
  color: #7a6646;
}

body.home-v2-active .provider-game-grid,
.provider-game-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.home-v2-active .provider-game-card,
.provider-game-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(208, 183, 132, 0.26);
  box-shadow: 0 12px 28px rgba(82, 61, 29, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* ===== "กำลังเล่นเกม" live game modal ===== */
.playing-live-modal {
  width: min(100%, 440px);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, #10233a 0%, #071320 100%);
  border: 1px solid rgba(167, 217, 59, 0.35);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  color: #e7ecf5;
}
.playing-live-modal .modal-head {
  min-height: auto;
  padding: 16px 20px;
  background: rgba(167, 217, 59, 0.12);
  border-bottom: 1px solid rgba(167, 217, 59, 0.25);
}
.playing-live-modal .modal-head h3 { margin: 0; font-size: 18px; color: #cfe8a0; }
.playing-live-modal .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.playing-live-modal .pl-game-name { font-size: 20px; font-weight: 800; color: #fff; }
.playing-live-modal .pl-game-prov { font-size: 13px; color: #8ea3b5; }
.playing-live-modal .pl-transfer {
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(167, 217, 59, 0.1);
  border: 1px solid rgba(167, 217, 59, 0.3);
  font-size: 14px;
}
.playing-live-modal .pl-transfer strong { color: #a7d93b; font-size: 16px; }
.playing-live-modal .pl-note { font-size: 13px; color: #a9bccb; line-height: 1.6; margin: 8px 0; }
.playing-live-modal .pl-note strong { color: #cfe8a0; }
.playing-live-modal .pl-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.playing-live-modal .pl-reopen {
  padding: 11px;
  border-radius: 10px;
  border: 1px solid rgba(84, 199, 255, 0.4);
  background: rgba(84, 199, 255, 0.1);
  color: #bfe6ff;
  font-weight: 700;
  cursor: pointer;
}
.playing-live-modal .pl-reopen:hover { background: rgba(84, 199, 255, 0.2); }
.playing-live-modal .pl-settle {
  padding: 13px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #a7d93b, #6fae1f);
  color: #0c1a05;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
}
.playing-live-modal .pl-settle:hover { filter: brightness(1.08); }
.playing-live-modal .pl-settle:disabled { opacity: 0.6; cursor: default; }

body.home-v2-active .provider-game-card:hover,
.provider-game-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(82, 61, 29, 0.16);
}

body.home-v2-active .provider-game-thumb,
.provider-game-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  min-height: 150px;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: 14px;
  overflow: hidden;
  border-radius: 18px;
  color: #fff;
  border: 1px solid rgba(255, 244, 206, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.provider-game-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.56));
}

/* =====================================================================
 * PERFORMANCE / SMOOTH SCROLL (2026-07-25)
 * Fixes mobile stutter, white-flash-on-scroll and "ghost old layer" by
 * cutting GPU compositing load: too many blurred backdrops + dozens of
 * infinite animations (one per game card badge) overwhelm the phone GPU so
 * layers repaint late (white flashes) and old layers linger.
 * ===================================================================== */

/* 1) Per-card infinite badge glow ran on EVERY game card (30+ at once). Make it
 *    a cheap static glow instead of an infinite box-shadow animation. */
.home-v2-card-art span:first-child {
  animation: none !important;
}

/* 2) Section-title shimmer animates background-position on text every frame
 *    (expensive text repaint). Keep the gradient look, drop the animation. */
.game-section-title,
.home-v2-section-head h2 {
  animation: none !important;
  background-position: 0% 50%;
}

/* 3) Respect users who ask for reduced motion — kill all non-essential motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 4) Mobile: blur backdrops are the #1 cause of white-flash while scrolling on
 *    phones (the GPU can't repaint the blurred layer fast enough). Replace them
 *    with a solid translucent colour on small screens, and trim will-change so
 *    the compositor keeps fewer layers alive. */
@media (max-width: 768px) {
  .deposit-modal-panel .modal-head,
  .modal-head,
  .home-v2-header,
  .home-v2-bottom-nav,
  .deposit-top-tabs,
  .auth-modal-panel .modal-head,
  .notification-panel .modal-head,
  .provider-modal-panel .modal-head,
  .home-v2-hero-nav,
  .overlay,
  .modal-wrap {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Trim GPU layers: only animate transform where we truly need it.
     !important to beat the base .home-v2-card { will-change: transform } rule. */
  .home-v2-card,
  .home-v2-marquee,
  .home-v2-announcement-track,
  .wheel-disc {
    will-change: auto !important;
  }

  /* Card entrance animation retriggers on every re-render while scrolling,
     causing the fl\u200bicker. Disable it on mobile for a stable, smooth list. */
  .home-v2-grid .home-v2-card,
  .game-section-grid .home-v2-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Smooth momentum scrolling + contain repaints to each scroller. */
  .home-v2-shell,
  .modal-content,
  .lobby-scroll {
    -webkit-overflow-scrolling: touch;
  }
}

.provider-game-shine {
  position: absolute;
  inset: -40% auto auto -20%;
  width: 90%;
  height: 70%;
  transform: rotate(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
}

.provider-game-icon {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  font-size: 36px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.32));
}

.provider-game-thumb strong,
.provider-game-thumb em {
  position: relative;
  z-index: 1;
}

.provider-game-thumb strong {
  max-width: 100%;
  font-size: 18px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.provider-game-thumb em {
  font-style: normal;
  color: rgba(255, 248, 223, 0.78);
  font-size: 12px;
  font-weight: 800;
}

.provider-game-body {
  display: grid;
  gap: 8px;
}

.provider-game-body .game-name {
  color: #231b15;
  line-height: 1.2;
}

.provider-game-body .helper-text {
  color: #7a6646;
}

.provider-tone-gold { background: linear-gradient(135deg, #6b4210, #f8d978 58%, #123d5a); }
.provider-tone-pink { background: linear-gradient(135deg, #7a2048, #ff9ec8 56%, #67d7ff); }
.provider-tone-violet { background: linear-gradient(135deg, #25113d, #8b5cf6 54%, #f8d978); }
.provider-tone-blue { background: linear-gradient(135deg, #123d5a, #67d7ff 56%, #d8a63a); }
.provider-tone-storm { background: linear-gradient(135deg, #101827, #6a8ba7 54%, #e7edf4); }
.provider-tone-royal { background: linear-gradient(135deg, #36184f, #d8a63a 56%, #ff8fb3); }
.provider-tone-green { background: linear-gradient(135deg, #103628, #83e65f 54%, #67d7ff); }
.provider-tone-ocean { background: linear-gradient(135deg, #0b3147, #3dc7d8 54%, #f8d978); }
.provider-tone-amber { background: linear-gradient(135deg, #4a230d, #f2a93b 54%, #fff1b4); }
.provider-tone-ruby { background: linear-gradient(135deg, #4c1020, #d7374d 54%, #f8d978); }
.provider-tone-aqua { background: linear-gradient(135deg, #06344a, #31d5d0 54%, #8af2ff); }
.provider-tone-crimson { background: linear-gradient(135deg, #40121f, #d84b5f 54%, #2b2230); }

body.home-v2-active .provider-game-thumb.provider-tone-gold,
body.home-v2-active .provider-mini-cover.provider-tone-gold { background: linear-gradient(135deg, #6b4210, #f8d978 58%, #123d5a); }
body.home-v2-active .provider-game-thumb.provider-tone-pink,
body.home-v2-active .provider-mini-cover.provider-tone-pink { background: linear-gradient(135deg, #7a2048, #ff9ec8 56%, #67d7ff); }
body.home-v2-active .provider-game-thumb.provider-tone-violet,
body.home-v2-active .provider-mini-cover.provider-tone-violet { background: linear-gradient(135deg, #25113d, #8b5cf6 54%, #f8d978); }
body.home-v2-active .provider-game-thumb.provider-tone-blue,
body.home-v2-active .provider-mini-cover.provider-tone-blue { background: linear-gradient(135deg, #123d5a, #67d7ff 56%, #d8a63a); }
body.home-v2-active .provider-game-thumb.provider-tone-storm,
body.home-v2-active .provider-mini-cover.provider-tone-storm { background: linear-gradient(135deg, #101827, #6a8ba7 54%, #e7edf4); }
body.home-v2-active .provider-game-thumb.provider-tone-royal,
body.home-v2-active .provider-mini-cover.provider-tone-royal { background: linear-gradient(135deg, #36184f, #d8a63a 56%, #ff8fb3); }
body.home-v2-active .provider-game-thumb.provider-tone-green,
body.home-v2-active .provider-mini-cover.provider-tone-green { background: linear-gradient(135deg, #103628, #83e65f 54%, #67d7ff); }
body.home-v2-active .provider-game-thumb.provider-tone-ocean,
body.home-v2-active .provider-mini-cover.provider-tone-ocean { background: linear-gradient(135deg, #0b3147, #3dc7d8 54%, #f8d978); }
body.home-v2-active .provider-game-thumb.provider-tone-amber,
body.home-v2-active .provider-mini-cover.provider-tone-amber { background: linear-gradient(135deg, #4a230d, #f2a93b 54%, #fff1b4); }
body.home-v2-active .provider-game-thumb.provider-tone-ruby,
body.home-v2-active .provider-mini-cover.provider-tone-ruby { background: linear-gradient(135deg, #4c1020, #d7374d 54%, #f8d978); }
body.home-v2-active .provider-game-thumb.provider-tone-aqua,
body.home-v2-active .provider-mini-cover.provider-tone-aqua { background: linear-gradient(135deg, #06344a, #31d5d0 54%, #8af2ff); }
body.home-v2-active .provider-game-thumb.provider-tone-crimson,
body.home-v2-active .provider-mini-cover.provider-tone-crimson { background: linear-gradient(135deg, #40121f, #d84b5f 54%, #2b2230); }

body.home-v2-active .provider-game-thumb::after {
  inset: 0;
  width: auto;
  height: auto;
  opacity: 1;
  background: linear-gradient(180deg, transparent 28%, rgba(0, 0, 0, 0.56));
  -webkit-mask: none;
  mask: none;
}

.provider-empty {
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 180px;
  color: #6c5a41;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(235, 194, 105, 0.24);
}

.provider-empty-icon {
  font-size: 36px;
}

@media (max-width: 1180px) {
  body.home-v2-active .provider-grid,
  .provider-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.home-v2-active .provider-grid,
  .provider-grid,
  body.home-v2-active .provider-game-grid,
  .provider-game-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  body.home-v2-active .provider-modal-panel,
  .provider-modal-panel {
    width: 100%;
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
  }

  .provider-modal-panel .modal-content {
    padding: 12px;
  }

  .provider-control-card,
  .provider-games-panel {
    padding: 12px;
    border-radius: 20px;
  }

  body.home-v2-active .provider-grid,
  .provider-grid,
  body.home-v2-active .provider-game-grid,
  .provider-game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .provider-card {
    padding: 11px;
    border-radius: 18px;
  }

  .provider-logo-mock {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    font-size: 13px;
  }

  .provider-category-badge {
    font-size: 10px;
    padding-inline: 7px;
  }

  .provider-actions,
  .provider-game-actions {
    grid-template-columns: 1fr;
  }

  .provider-game-thumb {
    min-height: 134px;
    padding: 12px;
  }

  .provider-game-thumb strong {
    font-size: 15px;
  }

  .provider-game-icon {
    font-size: 30px;
  }
}

/* Deposit Hub final overrides must stay after global modal/home-v2 rules. */
body.home-v2-active .deposit-modal-panel,
.deposit-modal-panel {
  width: min(100%, 520px);
  max-height: min(92vh, 860px);
  background:
    radial-gradient(circle at 18% 0%, rgba(199, 243, 90, .12), transparent 28%),
    linear-gradient(180deg, #071b24 0%, #06131d 100%);
  border: 1px solid rgba(120, 210, 255, .22);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .62), 0 0 42px rgba(44, 209, 184, .14);
  overflow: hidden;
}

body.home-v2-active .deposit-modal-panel .modal-head,
.deposit-modal-panel .modal-head {
  background: rgba(6, 19, 29, .82);
  border-bottom: 1px solid rgba(120, 210, 255, .16);
  backdrop-filter: blur(14px);
}

body.home-v2-active .deposit-modal-panel .modal-content,
.deposit-modal-panel .modal-content {
  max-height: calc(min(92vh, 860px) - 68px);
  padding: 14px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

body.home-v2-active .deposit-top-tabs .auth-toggle.active,
.deposit-top-tabs .auth-toggle.active,
body.home-v2-active .amount-chip.active,
.amount-chip.active {
  color: #06131d;
  background: linear-gradient(135deg, #c7f35a, #7ee7b4);
  border-color: rgba(199, 243, 90, .85);
  box-shadow: 0 0 22px rgba(199, 243, 90, .28);
}

body.home-v2-active .method-card,
body.home-v2-active .account-card,
body.home-v2-active .deposit-form-panel,
body.home-v2-active .withdraw-condition-card,
.method-card,
.account-card,
.deposit-form-panel,
.withdraw-condition-card {
  background:
    linear-gradient(160deg, rgba(20, 62, 74, .72), rgba(11, 36, 48, .96)),
    #0b2430;
  border: 1px solid rgba(120, 210, 255, .22);
  border-radius: 18px;
}

body.home-v2-active .method-card.active,
body.home-v2-active .account-card.active,
.method-card.active,
.account-card.active {
  transform: translateY(-3px);
  border-color: rgba(199, 243, 90, .86);
  box-shadow: 0 0 0 1px rgba(199, 243, 90, .28), 0 16px 38px rgba(199, 243, 90, .12);
}

body.home-v2-active .method-carousel,
body.home-v2-active .account-carousel,
.method-carousel,
.account-carousel {
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

body.home-v2-active .deposit-form-panel .primary-btn,
body.home-v2-active .deposit-form-panel .auth-submit,
body.home-v2-active .account-actions .primary-btn,
.deposit-form-panel .primary-btn,
.deposit-form-panel .auth-submit,
.account-actions .primary-btn {
  min-height: 46px;
  color: #06131d;
  background: linear-gradient(135deg, #c7f35a, #7ee7b4);
  border: 0;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(199, 243, 90, .2);
}

body.home-v2-active .deposit-modal-panel .disabled-btn,
.deposit-modal-panel .disabled-btn,
body.home-v2-active .deposit-modal-panel .disabled-btn:hover,
.deposit-modal-panel .disabled-btn:hover {
  min-height: 46px;
  color: rgba(255, 255, 255, .48);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .09);
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 768px) {
  .modal-wrap:has(.deposit-modal-panel) {
    align-items: stretch;
    padding: 0;
  }

  body.home-v2-active .deposit-modal-panel,
  .deposit-modal-panel.mobile-sheet {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-width: 0;
    border-radius: 0;
  }

  body.home-v2-active .deposit-modal-panel .modal-content,
  .deposit-modal-panel .modal-content {
    max-height: calc(100dvh - 62px);
    padding: 12px;
  }
}

/* v1.1.1 lightweight provider modal and readable native controls */
select,
.select-input,
.form-select,
.wallet-select,
.deposit-select,
.withdraw-select,
.modal select {
  color: #ffffff;
  background-color: #07131d;
  border-color: rgba(120, 210, 255, 0.32);
  color-scheme: dark;
}

select option,
.select-input option,
.form-select option,
.wallet-select option,
.deposit-select option,
.withdraw-select option,
.modal select option {
  color: #111827;
  background: #ffffff;
}

body.home-v2-active .auth-toggle,
.auth-toggle {
  color: #d5e0e7;
  background: rgba(6, 19, 29, 0.72);
  border-color: rgba(178, 205, 217, 0.16);
}

body.home-v2-active .auth-toggle.active,
.auth-toggle.active,
body.home-v2-active .deposit-top-tabs .auth-toggle.active,
.deposit-top-tabs .auth-toggle.active {
  color: #06131d;
  background: linear-gradient(135deg, #c7f35a, #7ee7b4);
  border-color: rgba(199, 243, 90, 0.8);
}

body.home-v2-active .provider-modal-panel,
.provider-modal-panel {
  width: min(100%, 1080px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border-radius: 20px;
  background: #07131d;
  border: 1px solid rgba(120, 210, 255, 0.2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.provider-modal-panel *,
.provider-modal-panel *::before,
.provider-modal-panel *::after {
  box-sizing: border-box;
}

.provider-modal-panel .modal-head {
  position: sticky;
  top: 0;
  z-index: 5;
  min-height: 58px;
  color: #ffffff;
  background: #07131d;
  border-bottom: 1px solid rgba(120, 210, 255, 0.16);
}

.provider-modal-panel .modal-title {
  color: #ffffff;
  text-shadow: none;
}

.provider-modal-panel .modal-head .icon-btn,
.provider-modal-panel .modal-head .icon-btn:hover {
  color: #d5e0e7;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(178, 205, 217, 0.18);
  box-shadow: none;
  transform: none;
}

.provider-modal-panel .modal-content {
  max-height: calc(100vh - 106px);
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  background: #06111c;
}

.provider-modal {
  width: 100%;
  gap: 12px;
  overflow-x: hidden;
}

.provider-control-card,
.provider-games-panel {
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  color: #ffffff;
  background: #0b1b27;
  border: 1px solid rgba(120, 210, 255, 0.16);
  box-shadow: none;
}

.provider-control-card .search-shell {
  background: #07131d;
  border-color: rgba(120, 210, 255, 0.24);
  box-shadow: none;
}

.provider-control-card .search-input {
  color: #ffffff;
}

/* =====================================================================
 * LOGIN / AUTH MODAL POLISH (2026-07-28)
 * Refines the member login & register modal: nicer brand card, tab pills,
 * input focus glow, tidy remember/forgot row, glowing submit button.
 * Additive layer — overrides the base auth styles above.
 * ===================================================================== */
.auth-modal-panel {
  border-radius: 22px;
  box-shadow: 0 24px 70px -28px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(167, 217, 59, 0.08) inset;
}
.auth-modal-panel .modal-head {
  min-height: 64px;
}
.auth-modal-panel .modal-title {
  letter-spacing: 0.02em;
  font-weight: 800;
}
.auth-modal-panel .modal-content {
  padding: 16px 16px 18px;
  display: grid;
  gap: 14px;
}

/* Brand card — compact, centred, subtle sheen */
.auth-modal-panel .auth-brand {
  position: relative;
  overflow: hidden;
  justify-content: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 18px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(167, 217, 59, 0.16), transparent 55%),
    linear-gradient(135deg, rgba(13, 53, 69, 0.95), rgba(7, 25, 35, 0.95));
  border: 1px solid rgba(167, 217, 59, 0.2);
}
.auth-modal-panel .auth-brand::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.06) 50%, transparent 60%);
  pointer-events: none;
}
.auth-modal-panel .auth-brand .modal-logo {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  box-shadow: 0 8px 22px -10px rgba(226, 189, 86, 0.6);
}
.auth-modal-panel .auth-title {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, #f2c251, #a7d93b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tab pills — segmented control feel */
.auth-modal-panel .auth-tabs {
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(4, 15, 25, 0.7);
  border: 1px solid rgba(168, 186, 199, 0.14);
}
.auth-modal-panel .auth-tabs .auth-toggle {
  flex: 1;
  min-width: 0;
  border-radius: 999px;
  padding: 11px 14px;
  font-weight: 700;
  color: #a8bac7;
  background: transparent;
  border: none;
  transition: color 0.18s ease, background 0.18s ease;
}
.auth-modal-panel .auth-tabs .auth-toggle.active {
  color: #07131a;
  background: linear-gradient(135deg, #a7d93b, #e2bd56);
  box-shadow: 0 8px 20px -10px rgba(167, 217, 59, 0.7);
}

/* Input fields — focus glow + comfortable height */
.auth-modal-panel .field-shell,
.auth-modal-panel .select-shell {
  border-radius: 13px;
  min-height: 50px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.auth-modal-panel .field-shell:focus-within,
.auth-modal-panel .select-shell:focus-within {
  border-color: rgba(167, 217, 59, 0.6);
  box-shadow: 0 0 0 3px rgba(167, 217, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.auth-modal-panel .field-input {
  font-size: 15px;
}
.auth-modal-panel .field-toggle {
  font-weight: 700;
}

/* Remember-me / forgot-password row — space-between, aligned */
.auth-modal-panel .checkbox-row {
  justify-content: space-between;
  gap: 12px;
}
.auth-modal-panel .checkbox-row .auth-check-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.auth-modal-panel .checkbox-row .link-btn {
  white-space: nowrap;
  font-weight: 700;
}

/* Submit button — gradient + glow + press feedback */
.auth-modal-panel .auth-submit {
  min-height: 52px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #a7d93b 0%, #7bc23a 45%, #e2bd56 120%);
  color: #07131a;
  box-shadow: 0 14px 30px -14px rgba(167, 217, 59, 0.75);
  transition: transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.auth-modal-panel .auth-submit:hover {
  filter: brightness(1.04);
  box-shadow: 0 18px 36px -14px rgba(167, 217, 59, 0.85);
}
.auth-modal-panel .auth-submit:active {
  transform: translateY(1px) scale(0.995);
}

/* Social login row — cleaner divider + buttons */
.auth-modal-panel .auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #8fa4b3;
  font-size: 12px;
}
.auth-modal-panel .auth-divider::before,
.auth-modal-panel .auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 186, 199, 0.28), transparent);
}
.auth-modal-panel .auth-social-button {
  min-height: 48px;
  border-radius: 12px;
  font-weight: 700;
  transition: transform 0.12s ease, border-color 0.18s ease;
}
.auth-modal-panel .auth-social-button:hover {
  transform: translateY(-1px);
}

/* CS contact line — subtle, centred */
.auth-modal-panel .auth-cs-line {
  text-align: center;
  padding-top: 2px;
}

/* Register wizard stepper — brighter active step */
.auth-modal-panel .auth-step.active,
.auth-modal-panel .auth-step.done {
  box-shadow: 0 8px 20px -12px rgba(167, 217, 59, 0.6);
}

@media (max-width: 520px) {
  .auth-modal-panel .auth-title {
    font-size: 20px;
  }
  .auth-modal-panel .modal-content {
    padding: 13px 13px 16px;
    gap: 12px;
  }
  .auth-modal-panel .checkbox-row {
    flex-wrap: nowrap;
  }
}

.provider-control-card .search-input::placeholder {
  color: #9fb3c8;
}

.provider-tabs {
  max-width: 100%;
  gap: 6px;
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 14px;
  background: #07131d;
  border: 1px solid rgba(120, 210, 255, 0.16);
}

.provider-tabs .auth-toggle {
  min-height: 36px;
  color: #d5e0e7;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(178, 205, 217, 0.14);
  box-shadow: none;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.provider-tabs .auth-toggle.active {
  color: #06131d;
  background: #7ee7b4;
  border-color: #7ee7b4;
  box-shadow: none;
}

body.home-v2-active .provider-grid,
.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

body.home-v2-active .provider-card,
.provider-card {
  min-width: 0;
  min-height: 178px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  color: #ffffff;
  background: #0b1b27;
  border: 1px solid rgba(120, 210, 255, 0.16);
  border-radius: 14px;
  box-shadow: none;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

body.home-v2-active .provider-card:hover,
.provider-card:hover,
body.home-v2-active .provider-card.active,
.provider-card.active {
  transform: none;
  border-color: rgba(126, 231, 180, 0.62);
  box-shadow: inset 3px 0 0 rgba(126, 231, 180, 0.72);
}

.provider-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

/* ค่ายเกมทั้งหมด (all providers grid) */
.home-v2-allprov-btn {
  white-space: nowrap;
  background: linear-gradient(135deg, #1b6d3a, #a7d93b) !important;
  color: #06210f !important;
  font-weight: 800;
}
.all-prov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.all-prov-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px 10px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(160deg, rgba(16, 32, 47, 0.30), rgba(26, 51, 72, 0.30));
  color: #f4f9ff;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.all-prov-card:hover {
  transform: translateY(-3px);
  border-color: rgba(167, 217, 59, 0.6);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
}
.all-prov-logo {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  color: #06210f;
  background: linear-gradient(135deg, #7ee7b4, #a7d93b);
}
.all-prov-card strong {
  font-size: 13px;
  text-align: center;
  line-height: 1.2;
}
.all-prov-card em {
  font-size: 11px;
  color: #9fb0c9;
  font-style: normal;
}

/* Lobby header vendor rail (horizontal scroll of all providers) */
.lobby-vendor-rail-wrap {
  position: relative;
  margin: 8px 0 6px;
}
.lobby-vendor-rail {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px 12px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
/* PC left/right arrows — glassy, glowing. Hidden on touch/small screens. */
.lobby-rail-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #eaffe6;
  background: rgba(10, 24, 18, 0.45);
  border: 1px solid rgba(167, 217, 59, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 14px rgba(167, 217, 59, 0.45), inset 0 0 8px rgba(167, 217, 59, 0.25);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.lobby-rail-arrow:hover {
  background: rgba(167, 217, 59, 0.22);
  box-shadow: 0 0 22px rgba(167, 217, 59, 0.8), inset 0 0 10px rgba(167, 217, 59, 0.4);
  transform: translateY(-50%) scale(1.08);
}
.lobby-rail-arrow svg { width: 18px; height: 18px; }
.lobby-rail-arrow.prev { left: -6px; }
.lobby-rail-arrow.next { right: -6px; }
@media (min-width: 900px) and (hover: hover) {
  .lobby-rail-arrow { display: flex; }
  .lobby-vendor-rail { scroll-behavior: smooth; }
}
.lobby-vendor-rail::-webkit-scrollbar { height: 6px; }
.lobby-vendor-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 6px; }
.lobby-vendor-chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: linear-gradient(160deg, rgba(16, 32, 47, 0.30), rgba(26, 51, 72, 0.30));
  color: #f4f9ff;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.lobby-vendor-chip.active {
  border-color: #a7d93b;
  box-shadow: 0 0 0 2px rgba(167, 217, 59, 0.35) inset;
}
.lobby-vendor-chip:hover { transform: translateY(-2px); }
.lobby-vendor-chip { position: relative; }
.lobby-vendor-badge {
  position: absolute;
  top: -6px;
  right: -4px;
  z-index: 3;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  color: #1a0e00;
  background: linear-gradient(135deg, #ffd85e, #f5a623);
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  white-space: nowrap;
  pointer-events: none;
}
.lobby-vendor-logo {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  color: #06210f;
  background: linear-gradient(135deg, #7ee7b4, #a7d93b);
}
.lobby-vendor-logo.all {
  font-size: 12px;
  background: linear-gradient(135deg, #64d6ff, #3b82f6);
  color: #04121f;
}
.lobby-vendor-logo.fav {
  font-size: 20px;
  background: linear-gradient(135deg, #ffd85e, #f5a623);
  color: #3a2400;
}
/* Favorite star button on each game card */
.home-v2-card-art { position: relative; }
.home-v2-card-fav {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  color: #ffd85e;
  background: rgba(4, 12, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, background 0.2s ease;
}
.home-v2-card-fav:hover { transform: scale(1.15); background: rgba(4, 12, 20, 0.75); }
.home-v2-card-fav.is-fav {
  color: #ffcf33;
  text-shadow: 0 0 8px rgba(255, 207, 51, 0.9);
}
/* Uploaded provider logo (full-frame, name+count overlaid below) */
.lobby-vendor-logo-img {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  object-fit: cover;
  background: #0c1a26;
}
.lobby-vendor-chip.has-logo .lobby-vendor-logo-img {
  width: 46px;
  height: 46px;
}
.lobby-vendor-chip b {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 1.15;
  max-width: 82px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lobby-vendor-chip em {
  font-size: 10px;
  color: #9fb0c9;
  font-style: normal;
}
.lobby-vendor-chip.active em { color: #a7d93b; }

body.home-v2-active .provider-logo-mock,
.provider-logo-mock {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #06131d;
  font-size: 13px;
  font-weight: 900;
  background: #7ee7b4;
  box-shadow: none;
}

.provider-category-badge,
.provider-games-count {
  max-width: 92px;
  min-height: 24px;
  padding: 4px 8px;
  overflow: hidden;
  color: #d5e0e7;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(178, 205, 217, 0.14);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.provider-card-copy {
  min-width: 0;
}

.provider-card .menu-title,
.provider-game-row .game-name {
  display: -webkit-box;
  overflow: hidden;
  color: #ffffff;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.provider-card .menu-desc {
  display: -webkit-box;
  min-height: 36px;
  overflow: hidden;
  color: #9fb3c8;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.provider-mini-covers,
.provider-mini-cover,
.provider-game-thumb,
.provider-game-icon,
.provider-game-shine,
.provider-empty-icon {
  display: none;
}

.provider-actions,
.provider-game-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: auto;
}

.provider-actions .secondary-btn,
.provider-actions .primary-btn,
.provider-game-actions .secondary-btn,
.provider-game-actions .primary-btn {
  min-width: 0;
  min-height: 36px;
  padding-inline: 8px;
  overflow: hidden;
  border-radius: 10px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.provider-actions .primary-btn,
.provider-game-actions .primary-btn {
  color: #06131d;
  background: #7ee7b4;
  border-color: #7ee7b4;
}

.provider-actions .secondary-btn,
.provider-game-actions .secondary-btn {
  color: #d5e0e7;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(178, 205, 217, 0.16);
}

.provider-games-panel .section-head {
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.provider-games-panel .section-title {
  color: #ffffff;
}

.provider-games-panel .section-subtitle,
.provider-game-row .helper-text {
  color: #9fb3c8;
}

.provider-game-list {
  display: grid;
  gap: 8px;
}

.provider-game-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(178, 205, 217, 0.12);
  border-radius: 12px;
}

.provider-empty {
  min-height: 118px;
  color: #d5e0e7;
  background: #0b1b27;
  border: 1px solid rgba(120, 210, 255, 0.16);
}

body.home-v2-active .deposit-modal-panel,
.deposit-modal-panel {
  overflow-x: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44);
}

body.home-v2-active .deposit-modal-panel .modal-head,
.deposit-modal-panel .modal-head,
.deposit-top-tabs {
  backdrop-filter: none;
}

body.home-v2-active .deposit-modal-panel .modal-content,
.deposit-modal-panel .modal-content {
  overflow-x: hidden;
}

body.home-v2-active .method-card,
body.home-v2-active .account-card,
.method-card,
.account-card {
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

body.home-v2-active .method-card.active,
body.home-v2-active .account-card.active,
.method-card.active,
.account-card.active,
.method-card:active,
.account-card:active,
.amount-chip:active {
  transform: none;
}

.deposit-modal-panel .select-shell,
.deposit-modal-panel .field-shell {
  min-width: 0;
  background: rgba(3, 13, 20, 0.68);
  border-color: rgba(120, 210, 255, 0.28);
}

.deposit-modal-panel .field-input,
.deposit-modal-panel .select-input,
.deposit-modal-panel .date-input {
  color: #ffffff;
  background-color: rgba(3, 13, 20, 0.68);
}

.deposit-modal-panel .select-input option {
  color: #111827;
  background: #ffffff;
}

body.home-v2-active .deposit-modal-panel select.select-input,
.deposit-modal-panel select.select-input,
body.home-v2-active select.select-input,
select.select-input {
  color: #ffffff;
  background: #07131d;
  border: 1px solid rgba(120, 210, 255, 0.28);
}

body.home-v2-active .deposit-modal-panel select.select-input option,
.deposit-modal-panel select.select-input option,
body.home-v2-active select.select-input option,
select.select-input option {
  color: #111827;
  background: #ffffff;
}

@media (max-width: 640px) {
  body.home-v2-active .provider-modal-panel,
  .provider-modal-panel {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-radius: 18px 18px 0 0;
  }

  .provider-modal-panel .modal-content {
    max-height: calc(100vh - 82px);
    padding: 10px;
  }

  .provider-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .provider-card {
    min-height: 174px;
    padding: 10px;
  }

  .provider-game-row {
    grid-template-columns: 1fr;
  }
}

/* v1.1.2 final auth modal overrides for mobile keyboard stability */
body.home-v2-active .auth-modal-panel,
.auth-modal-panel {
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

body.home-v2-active .auth-modal-panel .modal-content,
.auth-modal-panel .modal-content {
  max-height: calc(100dvh - 84px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

body.home-v2-active .auth-modal-panel input,
body.home-v2-active .auth-modal-panel select,
body.home-v2-active .auth-modal-panel textarea,
.auth-modal-panel input,
.auth-modal-panel select,
.auth-modal-panel textarea {
  font-size: 16px;
}

@media (max-width: 768px) {
  body.home-v2-active .auth-modal-panel,
  .auth-modal-panel,
  .auth-register-panel {
    max-height: calc(100dvh - 24px);
  }

  body.home-v2-active .auth-modal-panel .modal-content,
  .auth-modal-panel .modal-content {
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  body.home-v2-active .auth-modal-panel .auth-method-card,
  .auth-modal-panel .auth-method-card,
body.home-v2-active .auth-modal-panel .auth-method-card:hover,
  .auth-modal-panel .auth-method-card:hover {
    transform: none;
  }
}

/* v1.1.4 deposit click coverage and viewport safety */
body.home-v2-active .deposit-modal-panel,
.deposit-modal-panel {
  max-height: calc(100dvh - 24px);
  overflow: hidden;
}

body.home-v2-active .deposit-modal-panel .modal-content,
.deposit-modal-panel .modal-content {
  max-height: calc(100dvh - 84px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.home-v2-active .deposit-modal-panel input,
body.home-v2-active .deposit-modal-panel select,
body.home-v2-active .deposit-modal-panel textarea,
.deposit-modal-panel input,
.deposit-modal-panel select,
.deposit-modal-panel textarea,
.deposit-modal-panel .field-input,
.deposit-modal-panel .select-input,
.deposit-modal-panel .date-input {
  font-size: 16px;
}

.deposit-modal-panel .method-carousel,
.deposit-modal-panel .account-carousel {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: auto;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.deposit-modal-panel .method-card {
  position: relative;
  flex: 0 0 min(140px, 62vw);
  min-height: 142px;
  cursor: pointer;
  touch-action: manipulation;
}

.deposit-modal-panel .deposit-action-footer {
  position: sticky;
  bottom: -1px;
  z-index: 6;
  display: flex;
  gap: 8px;
  padding: 10px 0 0;
  margin-top: 4px;
  background: linear-gradient(180deg, rgba(11, 36, 48, 0), rgba(11, 36, 48, .98) 34%);
}

.deposit-modal-panel .deposit-action-footer .link-btn {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 768px) {
  body.home-v2-active .deposit-modal-panel,
  .deposit-modal-panel.mobile-sheet {
    height: auto;
    max-height: calc(100dvh - 24px);
    border-radius: 18px 18px 0 0;
  }

  body.home-v2-active .deposit-modal-panel .modal-content,
  .deposit-modal-panel .modal-content {
    max-height: calc(100dvh - 80px);
  }
}


/* PG77 UI Polish v3 — layout, spacing, and premium color pass */
body.home-v2-active {
  --v2-bg: #050b12;
  --v2-surface: #081a28;
  --v2-surface-2: #102c40;
  --v2-lime: #9ff24a;
  --v2-gold: #f4c85d;
  --v2-teal: #39d5c8;
  --v2-blue: #64d6ff;
  --v2-text: #f8fbff;
  --v2-muted: #a9bed0;
  --v2-line: rgba(134, 221, 255, 0.18);
  --v2-card-line: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at 12% -8%, rgba(57, 213, 200, 0.16), transparent 34%),
    radial-gradient(circle at 86% 4%, rgba(244, 200, 93, 0.13), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(100, 214, 255, 0.08), transparent 40%),
    linear-gradient(180deg, #050b12 0%, #071521 44%, #03070d 100%);
}

/* #app inherits the body gradient visually but must NOT be transparent —
   otherwise scrolling/overscroll reveals the root white in WebViews that
   don't support :has(). Give it the same solid dark base as the body. */
body.home-v2-active #app {
  background: #050b12;
}
/* Root backstop for home-v2 (works even without :has() support). */
html {
  background-color: #050b12;
}

.home-v2 {
  --v2-shadow: 0 22px 56px rgba(0, 0, 0, 0.35);
  --v2-layer-border: rgba(134, 221, 255, 0.16);
  --v2-layer-border-hover: rgba(159, 242, 74, 0.42);
  --v2-layer-bg:
    radial-gradient(circle at 8% 0%, rgba(57, 213, 200, 0.10), transparent 30%),
    radial-gradient(circle at 94% 10%, rgba(244, 200, 93, 0.10), transparent 30%),
    linear-gradient(145deg, rgba(13, 39, 58, 0.94), rgba(4, 15, 25, 0.96) 62%, rgba(8, 27, 40, 0.94));
  --v2-layer-bg-subtle:
    radial-gradient(circle at 10% 0%, rgba(57, 213, 200, 0.06), transparent 30%),
    linear-gradient(145deg, rgba(9, 31, 47, 0.92), rgba(4, 13, 23, 0.94));
  --v2-layer-shadow: 0 20px 44px rgba(0, 0, 0, 0.27), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --v2-layer-shadow-hover: 0 28px 56px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --v2-watermark: linear-gradient(135deg, rgba(57, 213, 200, 0.75), rgba(244, 200, 93, 0.62));
  background: transparent;
}

.home-v2-header {
  padding: 12px 22px;
  background:
    linear-gradient(180deg, rgba(5, 13, 23, 0.94), rgba(5, 13, 23, 0.82));
  border-bottom: 1px solid rgba(134, 221, 255, 0.16);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
}

.home-v2-header-inner {
  grid-template-columns: 44px minmax(138px, 190px) auto minmax(260px, 1fr) auto;
  gap: 12px;
}

.home-v2-brand {
  color: #ffe07a;
  text-shadow: 0 0 22px rgba(244, 200, 93, 0.28);
}

.home-v2-logo {
  filter: drop-shadow(0 8px 18px rgba(244, 200, 93, 0.28));
}

.api-status-pill {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(7, 25, 38, 0.72);
}

.home-v2-icon-btn,
.home-v2-profile,
.home-v2-bell,
.home-v2-search,
.home-v2-pill {
  border-color: rgba(134, 221, 255, 0.17);
  background: rgba(6, 22, 34, 0.76);
}

.home-v2-search {
  min-height: 44px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 28px rgba(0, 0, 0, 0.16);
}

.home-v2-main {
  padding: 20px 22px 40px;
}

.home-v2-content,
.home-v2-bottom-sections,
.home-v2-footer,
.home-v2-header-inner,
.home-v2-member-strip {
  max-width: 1480px;
}

.home-v2-left {
  gap: 18px;
}

.home-v2-announcement {
  min-height: 44px;
  padding: 9px 14px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(244, 200, 93, 0.13), transparent 28%),
    rgba(7, 25, 38, 0.88);
  border-color: rgba(244, 200, 93, 0.22);
}

.home-v2-hero {
  gap: 16px;
}

.home-v2-hero-main,
.home-v2-hero-side,
.home-v2-section,
.home-v2-wallet,
.home-v2-actions,
.home-v2-guest-cta,
.home-v2-guest-panel,
.home-v2-mini-list,
.home-v2-contact,
.home-v2-bottom-section,
.home-v2-help-strip,
.home-v2-footer {
  border-radius: 24px;
}

.home-v2-hero-main {
  min-height: 310px;
  background: #081927;
}

.home-v2-slide {
  padding: 32px;
}

.home-v2-slide::before {
  background:
    radial-gradient(circle at 82% 14%, color-mix(in srgb, var(--banner-accent) 52%, transparent), transparent 25%),
    linear-gradient(90deg, rgba(3, 9, 15, 0.88), rgba(3, 9, 15, 0.44) 56%, rgba(3, 9, 15, 0.12)),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 18px);
}

.home-v2-slide::after {
  right: -7%;
  bottom: -32%;
  width: min(500px, 56vw);
  opacity: 0.8;
}

.home-v2-slide-art span,
.home-v2-slide-art i,
.home-v2-slide-art b {
  border-radius: 24px;
}

.home-v2-hero-copy {
  max-width: min(700px, 74%);
}

.home-v2-hero-main span,
.home-v2-hero-side span,
.home-v2-card-art span,
.home-v2-promo-card span,
.home-v2-footer-badges span,
.home-v2-provider-card span {
  border-radius: 999px;
}

.home-v2-hero-main h1 {
  max-width: 14ch;
  font-size: clamp(34px, 4.5vw, 58px);
  letter-spacing: -0.02em;
}

.home-v2-hero-main p {
  max-width: 520px;
  color: rgba(248, 251, 255, 0.78);
  font-size: 15px;
}

.home-v2-hero-actions {
  gap: 10px;
  margin-top: 20px;
}

.home-v2-hero-actions button,
.home-v2-section-head button,
.home-v2-card-body button,
.home-v2-contact button,
.home-v2-bottom-head button,
.home-v2-footer-admin,
.home-v2-wallet-actions button,
.home-v2-guest-cta button,
.home-v2-guest-panel button {
  min-height: 42px;
  border-radius: 14px;
}

.home-v2-hero-actions button:first-child,
.home-v2-card-body button,
.home-v2-register-btn,
.home-v2-wallet-actions button:first-child,
.home-v2-guest-cta button:last-child,
.home-v2-guest-panel button:first-of-type,
.home-v2-bottom-head button,
.home-v2-footer-admin {
  background:
    radial-gradient(circle at 24% 14%, rgba(255, 255, 255, 0.52), transparent 22%),
    linear-gradient(135deg, #9ff24a, #f4c85d);
  color: #071018;
  box-shadow: 0 14px 28px rgba(159, 242, 74, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.home-v2-hero-side {
  padding: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(244, 200, 93, 0.18), transparent 34%),
    linear-gradient(155deg, rgba(13, 48, 66, 0.96), rgba(4, 15, 25, 0.96));
}

.home-v2-scroll-row {
  gap: 10px;
  padding: 2px 2px 4px;
}

.home-v2-scroll-row button,
.home-v2-provider-chip,
.home-v2-card,
.home-v2-card-art,
.home-v2-wallet-grid div,
.home-v2-actions-grid button,
.home-v2-mini-list button,
.home-v2-provider-card,
.home-v2-promo-card,
.home-v2-news-card,
.home-v2-help-strip button {
  border-radius: 18px;
}

.home-v2-category > .home-v2-search:not(.home-v2-header-search) {
  display: none;
}

.home-v2-section,
.home-v2-wallet,
.home-v2-actions,
.home-v2-guest-cta,
.home-v2-guest-panel,
.home-v2-mini-list,
.home-v2-contact,
.home-v2-bottom-section {
  padding: 18px;
}

.home-v2-section-head h2,
.home-v2-actions h2,
.home-v2-guest-cta h2,
.home-v2-guest-panel h2,
.home-v2-mini-list h2,
.home-v2-bottom-head h2 {
  font-size: 22px;
  letter-spacing: -0.01em;
}

.home-v2-grid {
  gap: 14px;
}

.home-v2-card {
  background:
    radial-gradient(circle at 10% 0%, rgba(57, 213, 200, 0.07), transparent 32%),
    linear-gradient(145deg, rgba(10, 32, 48, 0.94), rgba(4, 14, 24, 0.96));
}

.home-v2-card-art {
  min-height: 148px;
  padding: 14px;
}

.home-v2-card-art strong {
  font-size: 34px;
}

.home-v2-card-body {
  gap: 9px;
  padding: 13px;
}

.home-v2-card-body h3 {
  min-height: 40px;
  font-size: 15px;
  font-weight: 800;
}

.home-v2-wallet-head strong {
  color: #ffe07a;
  text-shadow: 0 0 22px rgba(244, 200, 93, 0.2);
}

.home-v2-wallet-grid {
  gap: 10px;
}

.home-v2-actions-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-v2-actions-grid button {
  min-height: 84px;
}

.home-v2-action-icon {
  width: 42px;
  height: 42px;
}

.home-v2-provider-row {
  gap: 10px;
}

.home-v2-provider-chip {
  min-height: 84px;
  padding: 14px;
}

.home-v2-bottom-sections,
.home-v2-footer {
  margin-top: 24px;
}

.home-v2-footer-inner {
  padding: 24px;
}

.home-v2-bottom-nav {
  border-radius: 26px;
  padding: 9px;
  background:
    radial-gradient(circle at 50% 0%, rgba(159, 242, 74, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(6, 19, 30, 0.97), rgba(2, 8, 14, 0.98));
  border-color: rgba(134, 221, 255, 0.18);
}

.home-v2-bottom-nav button,
.home-v2-bottom-nav .home-v2-center-nav {
  border-radius: 18px;
}

@media (min-width: 1024px) {
  .home-v2-content {
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 22px;
  }

  .home-v2-right-panel {
    top: 92px;
    width: 340px;
    gap: 14px;
  }

  .home-v2-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-v2-hero {
    grid-template-columns: minmax(0, 1.78fr) minmax(250px, 0.66fr);
  }

  .home-v2-hero-main,
  .home-v2-hero-side {
    min-height: 320px;
  }
}

@media (min-width: 1380px) {
  .home-v2-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .home-v2-content {
    grid-template-columns: minmax(0, 1fr) 360px;
  }

  .home-v2-right-panel {
    width: 360px;
  }
}

@media (max-width: 768px) {
  .home-v2-header {
    padding: 8px 10px 7px;
  }

  .home-v2-header-inner {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .home-v2-header-inner > .api-status-pill,
  .home-v2-header-search,
  .home-v2-head-actions .home-v2-pill,
  .home-v2-head-actions.guest .home-v2-bell {
    display: none;
  }

  .home-v2-brand {
    max-width: 128px;
    font-size: 25px;
  }

  .home-v2-logo {
    width: 34px;
    height: 34px;
  }

  .home-v2-main {
    padding: 12px 10px 22px;
  }

  .home-v2-left {
    gap: 12px;
  }

  .home-v2-announcement {
    min-height: 40px;
    border-radius: 16px;
  }

  .home-v2-hero-main {
    min-height: 196px;
    border-radius: 22px;
  }

  .home-v2-slide {
    padding: 18px;
  }

  .home-v2-hero-copy {
    max-width: 82%;
  }

  .home-v2-slide-art {
    right: 10px;
    width: 34%;
    opacity: 0.65;
  }

  .home-v2-hero-main h1 {
    font-size: 30px;
  }

  .home-v2-hero-main p {
    max-width: 88%;
    font-size: 13px;
  }

  .home-v2-hero-actions button {
    min-height: 38px;
    padding: 0 12px;
  }

  .home-v2-section,
  .home-v2-wallet,
  .home-v2-actions,
  .home-v2-guest-cta,
  .home-v2-guest-panel,
  .home-v2-mini-list,
  .home-v2-contact {
    padding: 12px;
    border-radius: 20px;
  }

  .home-v2-section-head h2,
  .home-v2-actions h2,
  .home-v2-guest-cta h2,
  .home-v2-guest-panel h2,
  .home-v2-mini-list h2 {
    font-size: 18px;
  }

  .home-v2-grid {
    gap: 9px;
  }

  .home-v2-card-art {
    min-height: 112px;
    padding: 10px;
  }

  .home-v2-card-body {
    padding: 10px;
  }

  .home-v2-card-body h3 {
    font-size: 13px;
  }

  .home-v2-actions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .home-v2-actions-grid button {
    min-height: 76px;
  }

  .home-v2-bottom-nav {
    width: calc(100% - 18px);
    border-radius: 24px;
  }
}

@media (max-width: 430px) {
  .home-v2-main {
    padding: 10px 8px 20px;
  }

  .home-v2-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-v2-card-art {
    min-height: 108px;
  }

  .home-v2-card-body h3 {
    min-height: 34px;
  }
}

/* ============================================================
 * "จ๊าบๆ" enhancement layer for the member game lobby.
 * Adds shine sweep, badge glow, and play-button pulse without
 * changing the blueprint structure. Appended, non-destructive.
 * ============================================================ */
.home-v2-card { will-change: transform; }

/* Shine sweep on hover */
.home-v2-card-art::before {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.16) 45%, rgba(255,255,255,0.28) 50%, rgba(255,255,255,0.16) 55%, transparent 100%);
  transform: skewX(-18deg);
  transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.home-v2-card:hover .home-v2-card-art::before { left: 140%; }

/* Zoom art slightly on hover */
.home-v2-card:hover .home-v2-card-art { transform: scale(1.04); transition: transform 0.4s ease; }
.home-v2-card-art { transition: transform 0.4s ease; }

/* Badge glow */
.home-v2-card-art span:first-child {
  box-shadow: 0 0 10px rgba(167, 217, 59, 0.45);
  animation: v2BadgePulse 2.6s ease-in-out infinite;
}
@keyframes v2BadgePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(167, 217, 59, 0.35); }
  50% { box-shadow: 0 0 16px rgba(167, 217, 59, 0.7); }
}

/* Play button pulse + gradient sheen */
.home-v2-card-body button {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.home-v2-card:hover .home-v2-card-body button {
  box-shadow: 0 6px 18px rgba(167, 217, 59, 0.35);
}
.home-v2-card-body button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.5s ease;
}
.home-v2-card:hover .home-v2-card-body button::after { transform: translateX(120%); }

/* Section title accent shimmer */
.game-section-title, .home-v2-section-head h2 {
  background: linear-gradient(90deg, #ffe0ef, #a7d93b, #54c7ff, #ffe0ef);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: v2TitleShimmer 6s linear infinite;
}
@keyframes v2TitleShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* Card entrance animation */
.home-v2-grid .home-v2-card, .game-section-grid .home-v2-card {
  animation: v2CardIn 0.4s ease both;
}
@keyframes v2CardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Ranking leaderboard (real data) */
.ranking-leaderboard-box { margin: 14px 0; padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(178,205,217,0.14); }
.ranking-lb-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ranking-lb-row .menu-title { flex: 1; }
.ranking-lb-rank { min-width: 34px; font-weight: 800; font-size: 15px; }
.ranking-row-me { background: rgba(167,217,59,0.12); border-radius: 8px; }
.ranking-lb-me-note { margin-top: 10px; padding: 8px 12px; border-radius: 8px; background: rgba(167,217,59,0.14); color: #cde98a; font-weight: 700; font-size: 13px; }

/* Daily free credit card (real backend) */
.freebies-daily-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; margin-bottom: 14px; border-radius: 12px; background: linear-gradient(135deg, #142433, #0a1622); border: 1px solid rgba(167,217,59,0.35); }
.freebies-daily-card .menu-title { font-size: 15px; color: #ffffff; font-weight: 800; } .freebies-daily-card .helper-text { color: rgba(255,255,255,0.82); font-weight: 600; } body.home-v2-active .freebies-daily-card .menu-title { color: #ffffff; } body.home-v2-active .freebies-daily-card .helper-text { color: rgba(255,255,255,0.82); }

/* อ่านชัดในโมดัลเครดิตฟรี: หัวข้อรางวัลของฉัน (บน shell พื้นครีม) = ดำ,
   เลขเวลา/โค้ด/รายละเอียด (ในการ์ดพื้นเข้ม) = สว่าง */
.freebies-shell-card .freebies-wallet-title,
body.home-v2-active .freebies-shell-card .freebies-wallet-title { color: #231b15 !important; font-weight: 800; }
.freebies-daily-card .freebies-countdown,
body.home-v2-active .freebies-daily-card .freebies-countdown { color: #ffffff !important; background: transparent !important; border-color: transparent !important; font-weight: 800; }
.freebies-reward-card .reward-code-val,
body.home-v2-active .freebies-reward-card .reward-code-val { color: #ffffff !important; background: transparent !important; padding: 0 !important; border: none !important; letter-spacing: 1px; }
.freebies-reward-card .helper-text,
body.home-v2-active .freebies-reward-card .helper-text,
body.home-v2-active .freebies-reward-card .menu-title { color: #ffffff !important; }
.freebies-reward-card .helper-text { color: rgba(255,248,223,0.85) !important; }
/* Check-in progress note (deposit-gated) */
.checkin-progress-note { text-align: center; font-size: 13px; color: #a7d93b; font-weight: 700; margin-bottom: 8px; }

/* VIP tier ranking (real) */
.ranking-vip-summary { margin: 10px 0 14px; }
.ranking-vip-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 8px 0; }
.ranking-vip-fill { height: 100%; background: linear-gradient(90deg, #a7d93b, #54c7ff); transition: width 0.4s ease; }
.ranking-vip-next { font-size: 13px; color: #cde98a; font-weight: 600; }
.ranking-tier-list { display: flex; flex-direction: column; gap: 4px; }
.ranking-tier-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; font-size: 13px; }
.ranking-tier-active { background: rgba(167,217,59,0.14); border: 1px solid rgba(167,217,59,0.35); }
.ranking-tier-name { font-weight: 700; }

/* Real shop + mystery box in member modals */
.shop-real-box, .real-box-wrap { margin: 12px 0; padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(167,217,59,0.25); }
.shop-real-title, .real-box-title { margin-bottom: 10px; }
.shop-real-item, .real-box-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.shop-real-item:last-child, .real-box-item:last-child { border-bottom: none; }
.real-box-result { text-align: center; padding: 10px; margin-bottom: 10px; border-radius: 10px; background: rgba(167,217,59,0.15); color: #cde98a; font-weight: 700; }

/* Help link modal (embed / text) */
.help-embed-wrap { width: 100%; }
.help-embed-frame { width: 100%; min-height: 320px; border: none; border-radius: 12px; background: #fff; }
.help-text-body { padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.04); line-height: 1.7; white-space: pre-wrap; }

/* ===== Lobby view (full game grid per category, inside /member) ===== */
.home-v2-lobby-view { max-width: 1240px; margin: 0 auto; padding: 16px; }
.lobby-view-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lobby-back-btn {
  border: 1px solid rgba(178,205,217,0.2); background: rgba(255,255,255,0.04); color: var(--v2-text, #f7f8fc);
  padding: 9px 16px; border-radius: 12px; font-weight: 800; cursor: pointer; font-size: 14px; white-space: nowrap;
}
.lobby-back-btn:hover { background: rgba(255,255,255,0.08); border-color: #54c7ff; }
.lobby-view-title { display: flex; flex-direction: column; }
.lobby-view-title h1 { margin: 0; font-size: 26px; line-height: 1.1; }
.lobby-view-title span { color: #8ea3b5; font-size: 13px; }
.lobby-search { margin-bottom: 12px; }
.lobby-category-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 10px; }
.lobby-category-tabs button {
  border: 1px solid rgba(178,205,217,0.18); background: rgba(255,255,255,0.03); color: #b9c8d4;
  padding: 8px 18px; border-radius: 999px; font-weight: 700; cursor: pointer; white-space: nowrap; font-size: 14px;
}
.lobby-category-tabs button.active {
  background: linear-gradient(135deg, #a7d93b, #7cb518); color: #0b1120; border-color: transparent;
}
.lobby-provider-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 12px; }
.lobby-prov-chip {
  border: 1px solid rgba(178,205,217,0.16); background: rgba(255,255,255,0.03); color: #9fb2c0;
  padding: 6px 14px; border-radius: 999px; font-weight: 600; cursor: pointer; white-space: nowrap; font-size: 13px;
}
.lobby-prov-chip.active { background: rgba(84,199,255,0.16); color: #bfe6ff; border-color: rgba(84,199,255,0.4); }
.lobby-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important; gap: 12px !important; }
.lobby-more { text-align: center; margin: 22px 0; }
.lobby-more button {
  border: 1px solid rgba(178,205,217,0.2); background: rgba(255,255,255,0.04); color: var(--v2-text, #f7f8fc);
  padding: 12px 32px; border-radius: 12px; font-weight: 800; cursor: pointer; font-size: 15px;
}
.lobby-more button:hover { background: rgba(255,255,255,0.08); border-color: #a7d93b; }
@media (max-width: 640px) {
  .lobby-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .lobby-view-title h1 { font-size: 22px; }
}

/* ===== Real-thumbnail game cards (prettier) ===== */
.home-v2-card-art.has-thumb {
  min-height: 150px;
  transition: transform 0.35s ease;
}
/* Real game art layered over the gradient base; hides itself on permanent load
   failure (see gameImgError) so the gradient shows instead of a blank card. */
.home-v2-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border: 0;
  background: transparent;
  /* PERF: fade the art in when it decodes so fast scrolling never flashes a
     half-loaded image; the gradient underneath shows until the art is ready. */
  opacity: 1;
  transition: opacity 0.25s ease;
}
/* Start transparent only until decoded; cached images (already complete) keep
   opacity:1 because onload still fires and the default above is 1. */
.home-v2-card-thumb:not(.is-loaded) { opacity: 0; }
.home-v2-card-thumb.is-loaded { opacity: 1; }
/* PERF: let the browser skip rendering off-screen cards (smoother fast scroll)
   while reserving their height so the scrollbar never jumps. */
.home-v2-grid .home-v2-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 210px;
}
.home-v2-card:hover .home-v2-card-art.has-thumb {
  transform: scale(1.06);
}
/* Dark gradient overlay so the provider chip + name stay readable on art. */
.home-v2-card-art.has-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3,11,18,0.05) 0%, rgba(3,11,18,0.12) 55%, rgba(3,11,18,0.78) 100%);
  pointer-events: none;
}
.home-v2-card-art.has-thumb em {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  font-style: normal;
  font-weight: 700;
  font-size: 11px;
  color: #e7ecf5;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
.home-v2-card-art.has-thumb span {
  z-index: 2;
  background: linear-gradient(135deg, #ffd34d, #f2a33c);
  color: #241202;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
/* Glow ring on hover */
.home-v2-card:hover {
  border-color: rgba(167,217,59,0.5) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,0.4), 0 0 0 1px rgba(167,217,59,0.25) !important;
}
/* Play button in card body */
.home-v2-card-body button {
  background: linear-gradient(135deg, #a7d93b, #7cb518);
  color: #0b1120;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  padding: 7px 0;
  width: 100%;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.home-v2-card-body button:hover { filter: brightness(1.08); }
.home-v2-card-body button:active { transform: scale(0.97); }

/* Full-bleed banner: single column (no side card), image fills the slide.
   Overrides the 2-column hero layout at all breakpoints. */
.home-v2-hero.home-v2-hero-full {
  grid-template-columns: minmax(0, 1fr) !important;
}
.home-v2-hero-full .home-v2-hero-main {
  aspect-ratio: 16 / 6;
  min-height: 150px;
}
.home-v2-slide.home-v2-slide-image {
  /* Dark base so a slow/failed banner image never leaves a bright flash or a
     blank white gap while it loads. */
  background: #0a1420 !important;
  overflow: hidden;
}
.home-v2-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* แบนเนอร์จริงเป็น 1920×600 (16:5). PC: กรอบ 16:5 + cover เต็มพอดี.
     มือถือ: ปรับด้านล่างเป็น contain เห็นภาพเต็มใบ ไม่ตัด (ดู @media). */
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.home-v2-slide-img.loaded { opacity: 1; }
/* ===== PC / จอกว้าง (ค่าเริ่มต้น): กรอบ 16:5 + cover — เต็มกรอบสวย ไม่มีขอบ ===== */
.home-v2-hero-full .home-v2-hero-main {
  aspect-ratio: 16 / 5;
  min-height: 0;
  height: auto;
}
.home-v2-hero-full .home-v2-slider-track { min-height: 0; height: 100%; }
.home-v2-hero-full .home-v2-slide.home-v2-slide-image { min-height: 0; height: 100%; padding: 0; }

/* ===== มือถือ / จอแคบ: แบนเนอร์สูงขึ้น + เห็นเต็มใบ ไม่ตัด ไม่แหว่ง ===== */
/* ภาพเป็นแนวนอนยาว (16:5). บนมือถือถ้าล็อก 16:5 กรอบเตี้ยมาก (~112px) อ่านไม่ออก
   = ดูแหว่ง. แก้: ทำกรอบสูงขึ้น (16:9) + ใช้ contain เพื่อแสดงภาพเต็มทั้งใบ
   (ไม่ตัดข้อความ 100%/1000 บาท/ตัวละคร) โดยมีพื้นเข้มกลืนธีมรองด้านบน-ล่างเล็กน้อย.
   ผลลัพธ์: ภาพใหญ่ขึ้นเกือบ 2 เท่า อ่านออกชัด ครบทั้งใบ. */
@media (max-width: 768px) {
  .home-v2-mobile .home-v2-hero-full .home-v2-hero-main,
  .home-v2-tablet .home-v2-hero-full .home-v2-hero-main {
    aspect-ratio: 16 / 9;
    background: #0a1420;
    /* ลบ padding/border ที่ทำให้ภาพในกรอบเล็กลง ~34px เกิดขอบว่างรอบด้าน.
       ให้ track/slide/img เต็มกรอบ hero เป๊ะ 100%. */
    padding: 0 !important;
    border: 0 !important;
  }
  .home-v2-mobile .home-v2-hero-full .home-v2-slide.home-v2-slide-image,
  .home-v2-tablet .home-v2-hero-full .home-v2-slide.home-v2-slide-image {
    background: #0a1420 !important;
  }
  .home-v2-mobile .home-v2-hero-full .home-v2-slide-img,
  .home-v2-tablet .home-v2-hero-full .home-v2-slide-img {
    object-fit: contain;
    object-position: center center;
  }
  /* รูปแบนเนอร์มือถือแยก: JS (pg77FitMobileBanner) จะเซ็ต aspect-ratio ของกรอบ
     ให้ตรงสัดส่วนภาพจริงหลังโหลด → ใช้ cover ได้เต็มกรอบพอดี "ไม่มีขอบว่าง ไม่ตัด".
     ค่า 16/9 ด้านล่างเป็นแค่ default กันกระตุกก่อน JS ทำงาน (ภาพส่วนใหญ่แนวนอน). */
  .home-v2-mobile .home-v2-hero-full .home-v2-hero-main:has(.home-v2-slide-image.has-mobile-art.active),
  .home-v2-tablet .home-v2-hero-full .home-v2-hero-main:has(.home-v2-slide-image.has-mobile-art.active) {
    aspect-ratio: 16 / 9;
    background: #0a1420;
  }
  .home-v2-mobile .home-v2-hero-full .home-v2-slide-image.has-mobile-art .home-v2-slide-img,
  .home-v2-tablet .home-v2-hero-full .home-v2-slide-image.has-mobile-art .home-v2-slide-img {
    object-fit: cover;
  }
}

/* Telegram OTP modal: anchor near the top so the on-screen keyboard (which
   pops up when the code input is focused) doesn't cover the input/confirm. */
.modal-wrap:has(.telegram-otp-modal),
.modal-wrap:has(.recovery-modal) {
  align-items: flex-start;
  padding-top: 14px;
}
.telegram-otp-modal,
.recovery-modal {
  margin-top: 0;
}

/* On desktop (PC) the top-anchored placement above looks off-centre / floats
   near the top edge. Re-centre these modals vertically for wider screens. */
@media (min-width: 769px) {
  .modal-wrap:has(.telegram-otp-modal),
  .modal-wrap:has(.recovery-modal) {
    align-items: center;
    padding-top: 16px;
  }
}

/* Tighter, better-proportioned deposit/withdraw sheet on mobile. */
@media (max-width: 768px) {
  .deposit-modal-panel .amount-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px;
  }
  .deposit-modal-panel .amount-btn {
    min-height: 40px;
    padding: 9px 4px;
    font-size: 14px;
    border-radius: 10px;
  }
  .deposit-modal-panel .deposit-section {
    margin-bottom: 12px;
  }
  .deposit-modal-panel .deposit-form-panel {
    gap: 10px;
    padding: 12px;
  }
  .deposit-modal-panel .field-input {
    font-size: 15px;
  }
  .deposit-modal-panel .auth-submit,
  .deposit-modal-panel .disabled-btn {
    min-height: 46px;
    font-size: 15px;
  }
  .deposit-modal-panel .account-card {
    min-width: 240px;
  }
}

/* ===== 3D Gacha Mystery Box (member) ===== */
.mbox-panel { width: min(100%, 460px); }
.mbox-panel .mbox-wrap { padding: 0; }
.mbox-topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 4px 2px 2px;
}
.mbox-name {
  font-family: "SP KanEng", "Noto Sans Thai", sans-serif; font-weight: 400;
  font-size: 18px; letter-spacing: .5px; color: #ffe08a;
}
.mbox-pts {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: 999px; font-weight: 800; font-size: 13px; color: #0b1a10;
  background: linear-gradient(180deg, #ffe08a, #f0c85c);
  box-shadow: 0 6px 16px rgba(240, 200, 92, .28);
}
.mbox-sub { color: rgba(198, 224, 240, .62); font-size: 12.5px; margin: 8px 2px 4px; }
.mbox-types { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 2px 2px; }
.mbox-type {
  flex: 1 1 auto; min-width: 96px; border-radius: 12px; cursor: pointer;
  padding: 8px 12px; font-family: "SP KanEng", "Noto Sans Thai", sans-serif;
  font-size: 13px; color: #eaf6ff; text-align: left; line-height: 1.25;
  background: rgba(10, 36, 48, .7); border: 1px solid rgba(120, 210, 255, .2);
}
.mbox-type span { display: block; font-size: 11px; color: rgba(198, 224, 240, .6); }
.mbox-type.on { border-color: #f0c85c; color: #ffe08a; box-shadow: inset 0 0 16px rgba(240, 200, 92, .25); }

.mbox-stage { padding: 14px 2px 6px; perspective: 1000px; position: relative; }
.mbox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mbox-cell {
  position: relative; aspect-ratio: 1 / 1; border-radius: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2, .9, .3, 1.4);
  animation: mboxFloaty 3.6s ease-in-out infinite;
}
.mbox-cell:nth-child(2) { animation-delay: .2s } .mbox-cell:nth-child(3) { animation-delay: .4s }
.mbox-cell:nth-child(4) { animation-delay: .6s } .mbox-cell:nth-child(5) { animation-delay: .15s }
.mbox-cell:nth-child(6) { animation-delay: .5s } .mbox-cell:nth-child(7) { animation-delay: .35s }
.mbox-cell:nth-child(8) { animation-delay: .25s } .mbox-cell:nth-child(9) { animation-delay: .45s }
@keyframes mboxFloaty { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }

.mbox-3d {
  position: relative; width: 74%; height: 74%; transform-style: preserve-3d;
  transform: rotateX(-10deg) rotateY(164deg);
  transition: transform .6s cubic-bezier(.3, .9, .3, 1.2);
}
.mbox-face { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; }
.mbox-face.back {
  transform: rotateY(180deg) translateZ(30px);
  background: linear-gradient(160deg, #0c3644 0%, #071f29 70%, #05161e 100%);
  border: 1px solid rgba(120, 210, 255, .2); box-shadow: inset 0 0 16px rgba(0, 0, 0, .5);
  display: flex; align-items: center; justify-content: center;
}
.mbox-face.back::after { content: "?"; font-size: 26px; font-weight: 900; color: rgba(120, 210, 255, .35); }
.mbox-face.base {
  transform: translateZ(30px);
  background: radial-gradient(circle at 50% 45%, #0e3a4a, #07202b 75%);
  border: 1px solid rgba(120, 210, 255, .28); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.mbox-core { font-size: 26px; filter: drop-shadow(0 0 10px rgba(240, 200, 92, .7)); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .3s; }
.mbox-face.side { width: 60px; left: auto; right: 0; transform: rotateY(90deg) translateZ(30px); background: linear-gradient(160deg, #0c3644, #061e28); border: 1px solid rgba(120, 210, 255, .18); }
.mbox-face.top { height: 60px; top: auto; bottom: 0; transform: rotateX(-90deg) translateZ(30px); background: linear-gradient(160deg, #0c3644, #061e28); border: 1px solid rgba(120, 210, 255, .18); }
.mbox-door { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; z-index: 3; transition: transform .6s cubic-bezier(.3, .85, .3, 1.15); }
.mbox-panel-f { position: absolute; inset: 0; background: linear-gradient(160deg, #12475a 0%, #0b3243 60%, #082633 100%); border: 1px solid rgba(120, 210, 255, .34); box-shadow: inset 0 0 16px rgba(44, 209, 184, .22); }
.mbox-door.left { left: 0; transform-origin: left center; transform: translateZ(30px); }
.mbox-door.right { right: 0; transform-origin: right center; transform: translateZ(30px); }
.mbox-door.left .mbox-panel-f { border-radius: 10px 2px 2px 10px; }
.mbox-door.right .mbox-panel-f { border-radius: 2px 10px 10px 2px; }
.mbox-ribbon-v { position: absolute; top: 0; bottom: 0; left: 50%; width: 12px; margin-left: -6px; z-index: 4; background: linear-gradient(180deg, #ffe08a, #f0c85c); transform: translateZ(31px); box-shadow: 0 0 10px rgba(240, 200, 92, .6); transition: opacity .3s; }
.mbox-ribbon-h { position: absolute; left: 0; right: 0; top: 50%; height: 12px; margin-top: -6px; z-index: 4; background: linear-gradient(90deg, #f0c85c, #ffe08a, #f0c85c); transform: translateZ(31px); box-shadow: 0 0 10px rgba(240, 200, 92, .6); transition: opacity .3s; }
.mbox-knot { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; z-index: 5; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe08a, #f0c85c); transform: translateZ(32px); box-shadow: 0 0 10px rgba(240, 200, 92, .7); transition: opacity .3s; }
.mbox-glow { position: absolute; inset: -6px; border-radius: 16px; pointer-events: none; background: radial-gradient(circle at 50% 55%, rgba(44, 209, 184, .28), transparent 70%); opacity: .35; }

.mbox-cell.selected { filter: drop-shadow(0 10px 26px rgba(240, 200, 92, .5)); }
.mbox-cell.selected .mbox-3d { transform: rotateX(-8deg) rotateY(0deg) scale(1.04); }
.mbox-cell.selected .mbox-glow { opacity: .75; }
.mbox-cell.selected::after { content: ""; position: absolute; inset: -3px; border-radius: 18px; border: 2px solid #f0c85c; opacity: .9; animation: mboxPulse 1.2s infinite; }
@keyframes mboxPulse { 0%, 100% { opacity: .5 } 50% { opacity: 1 } }

.mbox-cell.opening .mbox-3d { transform: rotateX(-6deg) rotateY(0deg) scale(1.06); }
.mbox-cell.opening .mbox-door.left { transform: translateZ(30px) rotateY(-118deg); }
.mbox-cell.opening .mbox-door.right { transform: translateZ(30px) rotateY(118deg); }
.mbox-cell.opening .mbox-ribbon-v, .mbox-cell.opening .mbox-ribbon-h, .mbox-cell.opening .mbox-knot { opacity: 0; }
.mbox-cell.opening .mbox-core { opacity: 1; transform: scale(1); }
.mbox-cell.opening .mbox-glow { opacity: 1; animation: mboxBurst 1.2s ease-out; }
@keyframes mboxBurst { 0% { transform: scale(.6); opacity: .25 } 50% { opacity: 1 } 100% { transform: scale(1.7); opacity: .3 } }

.mbox-bigprize {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(0) rotate(-12deg);
  z-index: 14; font-size: 108px; pointer-events: none; opacity: 0;
  filter: drop-shadow(0 10px 26px rgba(240, 200, 92, .75));
  transition: transform .7s cubic-bezier(.2, 1.5, .35, 1.05), opacity .4s;
}
.mbox-bigprize.show { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); animation: mboxBob 1.8s ease-in-out .7s infinite; }
@keyframes mboxBob { 0%, 100% { margin-top: 0 } 50% { margin-top: -10px } }

.mbox-foot { padding: 8px 2px 4px; }
.mbox-play {
  width: 100%; border: 0; border-radius: 14px; padding: 15px; font-size: 16px; font-weight: 900;
  cursor: pointer; color: #08210f; letter-spacing: .6px;
  font-family: "SP KanEng", "Noto Sans Thai", sans-serif;
  background: linear-gradient(180deg, #b9f278, #c7f35a);
  box-shadow: 0 10px 26px rgba(150, 220, 80, .34), inset 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform .12s, box-shadow .2s;
}
.mbox-play:active { transform: translateY(2px); }
.mbox-play:disabled { filter: grayscale(.5) brightness(.8); cursor: default; }
.mbox-hint { text-align: center; color: rgba(198, 224, 240, .62); font-size: 12px; margin-top: 9px; }

.mbox-result {
  position: absolute; inset: 0; background: rgba(4, 12, 18, .86); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
  z-index: 20; opacity: 0; pointer-events: none; transition: opacity .35s; border-radius: 18px;
}
.mbox-result.on { opacity: 1; pointer-events: auto; }
.mbox-rcard {
  width: 78%; max-width: 320px; border-radius: 18px; padding: 22px 18px; text-align: center;
  background: linear-gradient(180deg, rgba(12, 42, 54, .96), rgba(6, 20, 29, .98));
  border: 1px solid #f0c85c; box-shadow: 0 0 44px rgba(240, 200, 92, .3), 0 20px 60px rgba(0, 0, 0, .6);
  transform: scale(.7); transition: transform .4s cubic-bezier(.2, 1.5, .4, 1);
}
.mbox-result.on .mbox-rcard { transform: scale(1); }
.mbox-rgift { font-size: 52px; filter: drop-shadow(0 6px 14px rgba(240, 200, 92, .5)); animation: mboxFloaty 2s ease-in-out infinite; }
.mbox-rwin { color: #ffe08a; font-weight: 800; letter-spacing: 2px; font-size: 13px; margin-top: 4px; }
.mbox-rprize { font-family: "SP KanEng", "Noto Sans Thai", sans-serif; font-size: 26px; font-weight: 400; letter-spacing: .5px; margin: 6px 0 2px; color: #fff; }
.mbox-rnote { color: rgba(198, 224, 240, .62); font-size: 12px; }
.mbox-rok { margin-top: 16px; border: 0; border-radius: 12px; padding: 12px 30px; font-weight: 800; cursor: pointer; color: #08210f; background: linear-gradient(180deg, #b9f278, #c7f35a); }

/* ==== Daily check-in v2 (site palette: teal bg + lime + yellow) ==== */
.modal-panel.checkin-modal-panel.checkin-modal-v2 {
  width: min(560px, 94vw);
  max-width: 560px;
  background: linear-gradient(180deg, #0C2A38 0%, #081926 62%, #050B12 100%);
  border: 1px solid #233B49;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.checkin-modal-v2 .modal-head {
  background: linear-gradient(180deg, #A4D739 0%, #96CB2E 45%, #7FB71A 100%);
  color: #07110B;
  border-bottom: 1px solid #527B25;
}
.checkin-modal-v2 .modal-head .modal-title,
.checkin-modal-v2 .modal-head h2,
.checkin-modal-v2 .modal-head h3 { color: #07110B; }
.checkin-modal-v2 .modal-head .modal-close { color: #07110B; }
.checkin-modal-v2 .modal-content { padding: 16px; }

.checkin-modal-v2-body { display: flex; flex-direction: column; gap: 14px; }

/* Hero */
.ck-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #A4D739 0%, #96CB2E 55%, #7FB71A 100%);
  border: 1px solid #527B25;
  box-shadow: 0 10px 24px rgba(127, 183, 26, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ck-hero-gift { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 3px rgba(7, 17, 11, 0.25)); }
.ck-hero-text { flex: 1; min-width: 0; }
.ck-hero-title { font-size: 17px; font-weight: 800; color: #07110B; letter-spacing: 0.2px; }
.ck-hero-sub { font-size: 12.5px; font-weight: 600; color: #143104; opacity: 0.85; margin-top: 2px; }
.ck-hero-btn {
  flex-shrink: 0;
  padding: 12px 24px;
  border: 1px solid #d8951f;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.3px;
  color: #07110B;
  cursor: pointer;
  background: linear-gradient(180deg, #FFDA6E 0%, #FCC749 40%, #F8B944 70%, #F0A233 100%);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.75),
    inset 0 -3px 4px rgba(176, 110, 12, 0.55),
    0 5px 0 #c07d13,
    0 8px 14px rgba(176, 110, 12, 0.5);
  transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.12s ease;
}
.ck-hero-btn:hover:not([disabled]) {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.85),
    inset 0 -3px 4px rgba(176, 110, 12, 0.55),
    0 6px 0 #c07d13,
    0 11px 18px rgba(176, 110, 12, 0.55);
}
.ck-hero-btn:active:not([disabled]) {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 3px rgba(176, 110, 12, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 1px 0 #c07d13,
    0 2px 6px rgba(176, 110, 12, 0.45);
}
.ck-hero-btn.is-done { background: rgba(7, 17, 11, 0.18); color: #0a2b12; box-shadow: none; cursor: default; }
.ck-hero-btn.is-lock { background: linear-gradient(180deg, #FCC749 0%, #F5AE40 100%); }
.ck-hero-btn[disabled] { opacity: 0.75; cursor: not-allowed; }

/* Inline note */
.ck-note {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: #CFE8A0;
  background: rgba(150, 203, 46, 0.10);
  border: 1px solid rgba(150, 203, 46, 0.30);
}
.ck-note.ck-note-hot {
  color: #07110B;
  background: linear-gradient(180deg, #FCC749, #F5AE40);
  border-color: #F5AE40;
  font-weight: 800;
}

/* Day grid (7-per-window) */
.ck-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}
.ck-days[data-count="1"] { grid-template-columns: repeat(1, 1fr); }
.ck-days[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.ck-days[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.ck-days[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.ck-days[data-count="5"] { grid-template-columns: repeat(5, 1fr); }
.ck-days[data-count="6"] { grid-template-columns: repeat(6, 1fr); }
.ck-days[data-count="7"] { grid-template-columns: repeat(7, 1fr); }

.ck-day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px 8px;
  border-radius: 14px;
  background: linear-gradient(180deg, #081A28 0%, #071723 100%);
  border: 1px solid #1D2D3A;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  min-height: 84px;
  justify-content: center;
}
.ck-day:hover { transform: translateY(-2px); }
.ck-day-ico { font-size: 20px; line-height: 1; }
.ck-day-amt { font-size: 13px; font-weight: 800; color: #F4F6F7; }
.ck-day-no { font-size: 10.5px; font-weight: 600; color: #9CAEBB; }

/* Icon chip variety per weekday column */
.ck-day .ck-day-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(150, 203, 46, 0.12);
  border: 1px solid rgba(150, 203, 46, 0.22);
}
.ck-c1 .ck-day-ico { background: rgba(164, 215, 57, 0.16); border-color: rgba(164, 215, 57, 0.32); }
.ck-c2 .ck-day-ico { background: rgba(150, 203, 46, 0.16); border-color: rgba(150, 203, 46, 0.32); }
.ck-c3 .ck-day-ico { background: rgba(143, 188, 57, 0.16); border-color: rgba(143, 188, 57, 0.32); }
.ck-c4 .ck-day-ico { background: rgba(252, 199, 73, 0.16); border-color: rgba(252, 199, 73, 0.32); }
.ck-c5 .ck-day-ico { background: rgba(248, 185, 68, 0.16); border-color: rgba(248, 185, 68, 0.32); }
.ck-c6 .ck-day-ico { background: rgba(64, 200, 220, 0.14); border-color: rgba(64, 200, 220, 0.30); }
.ck-c7 .ck-day-ico { background: rgba(207, 232, 160, 0.16); border-color: rgba(207, 232, 160, 0.34); }

/* States */
.ck-day.ck-claimed { opacity: 0.82; border-color: #22452a; }
.ck-day.ck-claimed .ck-day-ico { background: rgba(150, 203, 46, 0.22); border-color: #7FB71A; color: #A4D739; }
.ck-day.ck-claimed::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 7px;
  font-size: 11px;
  font-weight: 900;
  color: #96CB2E;
}
.ck-day.ck-ready {
  border-color: #96CB2E;
  box-shadow: 0 0 0 1px #96CB2E, 0 8px 20px rgba(150, 203, 46, 0.30);
  background: linear-gradient(180deg, #0d2416 0%, #0a1d13 100%);
}
.ck-day.ck-ready .ck-day-amt { color: #A4D739; }
.ck-day.ck-denied { border-color: #4a2530; }
.ck-day.ck-denied .ck-day-ico { background: rgba(255, 120, 120, 0.10); border-color: rgba(255, 120, 120, 0.28); }
.ck-day.ck-next,
.ck-day.ck-future { opacity: 0.9; }
.ck-day.ck-next .ck-day-amt,
.ck-day.ck-future.ck-day:last-child .ck-day-amt { color: #FCC749; }
.ck-day.is-current {
  border-color: #A4D739;
  box-shadow: 0 0 0 1px #A4D739, 0 10px 22px rgba(164, 215, 57, 0.35);
}
.ck-day.is-current::before {
  content: "วันนี้";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  font-size: 9.5px;
  font-weight: 800;
  color: #07110B;
  background: linear-gradient(180deg, #A4D739, #7FB71A);
  border-radius: 999px;
  white-space: nowrap;
}

/* Footer */
.ck-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: #9CAEBB;
}
.ck-foot > span { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ck-week-badge {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  color: #CFE8A0;
  background: rgba(150, 203, 46, 0.12);
  border: 1px solid rgba(150, 203, 46, 0.28);
}
.ck-rule-link {
  background: none;
  border: none;
  color: #A4D739;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.ck-rule-link:hover { text-decoration: underline; }

/* Celebration popup */
.modal-panel.checkin-celebrate-panel {
  width: min(400px, 90vw);
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, #0C2A38 0%, #081926 70%, #050B12 100%);
  border: 1px solid #527B25;
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.ck-cel-body {
  position: relative;
  padding: 30px 24px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1;
}
.ck-cel-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: #F4F6F7;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.ck-cel-close:hover { background: rgba(255, 255, 255, 0.20); }
.ck-cel-badge {
  width: 92px;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #A4D739 0%, #96CB2E 55%, #7FB71A 100%);
  box-shadow: 0 10px 26px rgba(127, 183, 26, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}
.ck-cel-title { font-size: 20px; font-weight: 900; color: #F4F6F7; }
.ck-cel-amt {
  font-size: 34px;
  font-weight: 900;
  color: #FCC749;
  text-shadow: 0 2px 10px rgba(252, 199, 73, 0.35);
}
.ck-cel-sub { font-size: 13px; color: #9CAEBB; }
.ck-cel-btn {
  margin-top: 8px;
  padding: 12px 30px;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  color: #07110B;
  cursor: pointer;
  background: linear-gradient(180deg, #FCC749 0%, #F8B944 55%, #F5AE40 100%);
  box-shadow: 0 8px 20px rgba(245, 174, 64, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: transform 0.12s ease, filter 0.12s ease;
}
.ck-cel-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* Confetti */
.ck-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ck-confetti i {
  position: absolute;
  top: -14px;
  width: 7px;
  border-radius: 2px;
  animation-name: ckFall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes ckFall {
  0% { transform: translateY(-14px) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(340px) rotate(360deg); opacity: 0.9; }
}

@media (max-width: 420px) {
  .ck-days { gap: 6px; }
  .ck-day { min-height: 76px; padding: 8px 2px 6px; }
  .ck-day .ck-day-ico { width: 30px; height: 30px; font-size: 17px; }
  .ck-day-amt { font-size: 12px; }
  .ck-day-no { font-size: 9.5px; }
  .ck-hero { flex-wrap: wrap; }
  .ck-hero-btn { width: 100%; }
}

/* ==========================================================================
 * Deposit: bank logo chip + account card + slip form + pending block
 * (2026-07-28) — full account number shown, no "เลือกบัญชีนี้" button,
 * colored bank logo (PNG at /admin/assets/banks/<code>.png or colored initials)
 * ========================================================================== */
.bank-logo{display:inline-flex;align-items:center;justify-content:center;border-radius:12px;overflow:hidden;flex:0 0 auto;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.bank-logo img{width:100%;height:100%;object-fit:contain;background:#fff}
.bank-logo.bank-logo-noimg::after{content:attr(data-short);color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px}
.bank-logo-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px}

.bank-account-card{cursor:pointer;border:1.5px solid rgba(255,255,255,.10);border-radius:16px;padding:14px;transition:border-color .15s,box-shadow .15s,transform .12s;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01))}
.bank-account-card:hover{transform:translateY(-1px);border-color:var(--bank-accent,#2b6cb0)}
.bank-account-card.active{border-color:var(--bank-accent,#38b26a);box-shadow:0 0 0 2px color-mix(in srgb,var(--bank-accent,#38b26a) 35%,transparent)}
.bank-account-card .account-card-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.bank-account-card .account-card-name{display:flex;flex-direction:column;min-width:0;flex:1}
.bank-account-card .account-card-name span{font-size:12px;color:#9aa4b2;line-height:1.2}
.bank-account-card .account-card-name strong{font-size:15px;color:#eef3fb;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bank-account-card .account-card-head em{font-size:11px;color:#9aa4b2;font-style:normal;background:rgba(255,255,255,.06);padding:3px 8px;border-radius:20px;flex:0 0 auto}
.account-selected-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--bank-accent,#38b26a);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.account-number-row{display:flex;align-items:center;gap:10px}
.bank-account-card .account-number{flex:1;font-family:"Courier New",monospace;font-size:17px;font-weight:800;letter-spacing:1px;color:#fff;white-space:nowrap;overflow-x:auto}
.account-copy-btn{flex:0 0 auto;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);color:#e6eaf2;border-radius:10px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s}
.account-copy-btn:hover{background:rgba(255,255,255,.12)}

/* Slip form: clean spacing so labels/inputs never overlap */
.slip-head-note{margin-bottom:14px}
.slip-field{margin-bottom:14px}
.slip-field .field-label{display:block;margin-bottom:6px;font-size:13px;color:#cdd6e4;font-weight:600}
.slip-field .field-hint{color:#8a94a6;font-weight:400;font-size:11.5px}
/* Example/help text under register inputs (เบอร์/เลขบัญชี/ชื่อ). */
.field-hint{color:#8a94a6;font-weight:400;font-size:11.5px;margin-top:4px;line-height:1.35}
.slip-preview{margin-top:8px;border:1px solid rgba(255,255,255,.14);border-radius:12px;overflow:hidden;background:#0b121c}
.slip-preview img{display:block;width:100%;max-height:260px;object-fit:contain}
.slip-actions{margin-top:6px}
.upload-shell.is-uploaded{border-color:#38b26a;color:#38b26a}
/* วันที่ + เวลา ตามสลิป */
.slip-date-input::-webkit-calendar-picker-indicator{filter:invert(.75);cursor:pointer}
.slip-time-row{display:flex;gap:8px;align-items:stretch}
.slip-time-row .slip-time-hhmm{flex:1 1 auto}
.slip-time-row .slip-time-ampm{flex:0 0 92px}
.slip-time-row .slip-time-ampm .select-shell,.slip-time-row .slip-time-ampm select{height:100%}
.slip-time-hhmm input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(.75);cursor:pointer}
/* จำนวนเงิน: บาท : สตางค์ (แนวเดียวกับช่องเวลา) */
.slip-amount-row{display:flex;gap:8px;align-items:center}
.slip-amount-row .slip-amount-baht{flex:1 1 auto}
.slip-amount-row .slip-amount-satang{flex:0 0 74px}
.slip-amount-row .slip-amount-satang input{text-align:center}
.slip-amount-row .slip-amount-colon{font-size:20px;font-weight:700;color:#cdd6e4;padding:0 2px}
.slip-amount-row .slip-amount-suffix{flex:0 0 auto;white-space:nowrap;padding-left:4px}

/* Slip pending block: shown when a previous slip is still under review */
.slip-pending-block{text-align:center;padding:28px 20px;border:1.5px dashed rgba(251,191,36,.4);border-radius:16px;background:rgba(251,191,36,.06)}
.slip-pending-icon{font-size:40px;margin-bottom:10px}
.slip-pending-block h4{margin:0 0 8px;font-size:17px;color:#fbbf24}
.slip-pending-block p{margin:0 0 16px;font-size:13.5px;color:#cdd6e4;line-height:1.7}

/* ===== Promo claim confirmation popup (stays on top, blocks accidental claim) ===== */
.promo-confirm-wrap{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,8,16,.72);backdrop-filter:blur(2px)}
.promo-confirm-card{width:min(400px,94vw);max-height:92vh;overflow:auto;background:#0f1d2e;border:1px solid rgba(120,210,255,.22);border-radius:18px;padding:16px 18px 18px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.promo-confirm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.promo-confirm-title{font-size:17px;font-weight:800;color:#fff}
.promo-confirm-x{background:rgba(255,255,255,.08);border:none;color:#cdd6e4;width:32px;height:32px;border-radius:9px;font-size:20px;cursor:pointer;line-height:1}
.promo-confirm-x:hover{background:rgba(255,255,255,.16)}
.promo-confirm-card .promo-thumb-large.confirm{height:120px;border-radius:12px;margin-bottom:12px}
.promo-confirm-name{font-size:16px;font-weight:800;color:#fff;text-align:center;margin-bottom:12px}
.promo-confirm-grid{display:grid;gap:7px;margin-bottom:12px}
.promo-confirm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.05);font-size:13.5px}
.promo-confirm-row span{color:#9fb0c9}
.promo-confirm-row strong{color:#fff}
.promo-confirm-note{margin-bottom:10px;padding:8px 12px;border-radius:10px;background:rgba(255,176,32,.12);color:#ffcf99;font-size:12.5px;line-height:1.6}
.promo-confirm-warn{margin-bottom:14px;padding:9px 12px;border-radius:10px;background:rgba(11,100,209,.14);color:#bcd6ff;font-size:12px;line-height:1.6}
.promo-confirm-actions{display:flex;gap:10px}
.promo-confirm-actions button{flex:1;padding:11px 0;font-size:14.5px;font-weight:700;border-radius:11px}

/* COMING SOON popup (not-live rooms: Evolution / Sexy / Sportsbook) */
.coming-soon-wrap{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(3,8,16,.72);backdrop-filter:blur(2px)}
.coming-soon-card{position:relative;width:min(400px,94vw);max-height:92vh;overflow:auto;background:#0f1d2e;border:1px solid rgba(255,120,110,.28);border-radius:18px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.55);text-align:center}
.coming-soon-x{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.08);border:none;color:#cdd6e4;width:32px;height:32px;border-radius:9px;font-size:20px;cursor:pointer;line-height:1}
.coming-soon-x:hover{background:rgba(255,255,255,.16)}
.coming-soon-img{width:100%;border-radius:14px;display:block;margin:4px 0 14px;box-shadow:0 10px 30px rgba(224,27,18,.25)}
.coming-soon-name{font-size:17px;font-weight:800;color:#fff;margin-bottom:6px}
.coming-soon-note{font-size:13px;color:#9fb0c9;line-height:1.6;margin-bottom:14px}
.coming-soon-ok{width:100%;padding:11px 0;font-size:14.5px;font-weight:700;border-radius:11px}

/* Referral tier ladder + free-credit campaign banner (สร้างรายได้ modal) */
.referral-tier-box{margin-top:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(120,210,255,.14)}
.referral-tier-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(255,255,255,.06);font-size:13px}
.referral-tier-row:first-of-type{border-top:0}
.referral-tier-rank{flex:0 0 60px;font-weight:700;color:#a7d93b}
.referral-tier-pct{flex:0 0 56px;font-weight:800;color:#ffd24a}
.referral-tier-need{flex:1;text-align:right;color:#9fb0c9;font-size:12px}
.referral-freecredit{margin-top:12px;padding:14px;border-radius:16px;background:linear-gradient(145deg,rgba(167,217,59,.14),rgba(11,100,209,.12));border:1px solid rgba(167,217,59,.3)}
.referral-fc-tag{display:inline-block;margin-bottom:6px;padding:3px 10px;border-radius:999px;background:rgba(255,176,32,.2);color:#ffcf99;font-size:11px;font-weight:700}
.referral-fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.referral-fc-grid>div{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.18)}
.referral-fc-grid span{color:#9fb0c9;font-size:11.5px}
.referral-fc-grid strong{color:#fff;font-size:15px;font-weight:800}
.referral-wallet-card{margin-top:10px;padding:12px 14px;border-radius:14px;background:linear-gradient(145deg,rgba(167,217,59,.12),rgba(0,0,0,.16));border:1px solid rgba(167,217,59,.26)}
.referral-wallet-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.referral-wallet-amount{color:#a7d93b;font-size:20px;font-weight:800;margin-top:2px}
.referral-wallet-top .primary-btn{flex:0 0 auto;padding:9px 14px;font-size:13px;font-weight:700;white-space:nowrap}
.referral-wallet-top .primary-btn:disabled{opacity:.5}


/* ============================================================
   HOME LAYOUT SKINS (re-arrange only; buttons/actions unchanged)
   Scoped under .home-v2-layout-<id>. Default (classic) untouched.
   ============================================================ */

/* Floating layout switcher (bottom-right FAB + menu) */
.home-v2-layout-switcher{position:fixed;right:14px;bottom:96px;z-index:60;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:10px}
.home-v2-layout-fab{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:linear-gradient(145deg,rgba(20,60,82,.96),rgba(6,17,28,.96));color:#fff;font-size:20px;cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.4);display:grid;place-items:center;transition:transform .16s ease,box-shadow .16s ease}
.home-v2-layout-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 30px rgba(0,0,0,.5)}
.home-v2-layout-fab:active{transform:scale(.95)}
.home-v2-layout-menu{display:none;flex-direction:column;gap:4px;min-width:170px;padding:8px;border-radius:14px;background:rgba(8,18,28,.97);border:1px solid rgba(255,255,255,.12);box-shadow:0 18px 40px rgba(0,0,0,.5);backdrop-filter:blur(6px)}
.home-v2-layout-switcher.open .home-v2-layout-menu{display:flex}
.home-v2-layout-menu-head{font-size:11px;color:#8a94a6;padding:2px 8px 6px;font-weight:700;letter-spacing:.02em}
.home-v2-layout-opt{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;border:1px solid transparent;background:transparent;color:#cfd6e4;font-size:13px;cursor:pointer;text-align:left;transition:background .14s ease,border-color .14s ease}
.home-v2-layout-opt:hover{background:rgba(255,255,255,.06)}
.home-v2-layout-opt.active{background:rgba(167,217,59,.12);border-color:rgba(167,217,59,.35);color:#fff}
.home-v2-layout-opt-icon{font-size:16px;width:20px;text-align:center;color:#7cc5ff}
.home-v2-layout-opt.active .home-v2-layout-opt-icon{color:#a7d93b}
.home-v2-layout-opt-check{margin-left:auto;color:#a7d93b;font-weight:800}
@media (max-width:768px){.home-v2-layout-switcher{bottom:84px;right:10px}.home-v2-layout-fab{width:42px;height:42px;font-size:18px}}

/* NOTE: the experimental modern / compact / sidebar skins were removed on
   2026-07-31. V1 ships only classic + pg77plus. */

/* ============================================================
   PG77+ (ม่วง-ทอง) SKIN — ported from the casino-lobby template.
   Only re-skins the home-v2 shell; layout/handlers/backend unchanged.
   The skin class sits on the inner shell, so we RETINT the whole page
   via :has() on the body + override the --v2-* tokens it consumes.
   ============================================================ */
:root{
  --pgp-bg:#090627; --pgp-panel:#130E3D; --pgp-panel2:#1A1550;
  --pgp-purple:#6846FF; --pgp-purple2:#6D61FE; --pgp-cyan:#1FB2E4;
  --pgp-gold:#f8c85b; --pgp-pink:#CF49FD; --pgp-green:#98FC44;
  --pgp-muted:#A9A7D1; --pgp-line:#272066;
}

/* Repaint the full-page background when the pg77plus skin is active */
body.home-v2-active:has(.home-v2-layout-pg77plus){
  --v2-bg:#090627;
  --v2-surface:#1a1550;
  --v2-surface-2:#231a63;
  --v2-lime:#98FC44;
  --v2-gold:#f8c85b;
  --v2-muted:#A9A7D1;
  --v2-line:rgba(179,133,255,.22);
  --v2-card-line:rgba(179,133,255,.20);
  background:
    radial-gradient(circle at 70% -5%, #2a1f74 0, transparent 34%),
    radial-gradient(circle at 5% 105%, #23124f 0, transparent 36%),
    linear-gradient(180deg, #0d0932 0%, #090627 55%, #060420 100%) !important;
}
html:has(body.home-v2-active .home-v2-layout-pg77plus),
body.home-v2-active:has(.home-v2-layout-pg77plus) #app{background:#090627}

/* Retint the home-v2 layer tokens (surfaces/borders used across the page) */
.home-v2-layout-pg77plus.home-v2,
.home-v2-layout-pg77plus .home-v2,
.home-v2-layout-pg77plus{
  --v2-bg:#090627;
  --v2-surface:#1a1550;
  --v2-surface-2:#231a63;
  --v2-lime:#98FC44;
  --v2-gold:#f8c85b;
  --v2-muted:#A9A7D1;
  --v2-line:rgba(179,133,255,.22);
  --v2-card-line:rgba(179,133,255,.20);
  --v2-layer-bg:
    radial-gradient(circle at 12% 0%, rgba(150,71,252,.16), transparent 32%),
    radial-gradient(circle at 96% 12%, rgba(31,178,228,.12), transparent 30%),
    linear-gradient(145deg, rgba(38,31,101,.96), rgba(19,14,61,.95) 58%, rgba(26,21,80,.94));
  --v2-layer-bg-subtle:
    radial-gradient(circle at 10% 0%, rgba(150,71,252,.10), transparent 28%),
    linear-gradient(145deg, rgba(26,21,80,.92), rgba(15,11,50,.92));
  --v2-layer-border:rgba(179,133,255,.22);
  --v2-layer-border-hover:rgba(170,128,255,.42);
  --v2-watermark:linear-gradient(135deg, rgba(150,71,252,.72), rgba(248,200,91,.6));
  color:#f8f7ff;
}

/* Announcement / marquee */
.home-v2-layout-pg77plus .home-v2-announcement{
  background:linear-gradient(90deg,rgba(104,70,255,.16),rgba(207,73,253,.12));
  border:1px solid rgba(179,133,255,.24);border-radius:14px;color:#e7ddff
}

/* Hero */
.home-v2-layout-pg77plus .home-v2-hero-main{
  border-radius:24px;border:1px solid rgba(181,133,255,.24);
  box-shadow:0 26px 70px rgba(0,0,0,.42)
}
/* Fallback hero slides (no admin image yet) get a bright Space-Slotz-style
   purple->cyan gradient instead of the dim mock tone. Real uploaded banners
   (.home-v2-slide-image) are untouched. */
.home-v2-layout-pg77plus .home-v2-slide:not(.home-v2-slide-image){
  background:
    radial-gradient(circle at 82% 18%, rgba(31,178,228,.45), transparent 46%),
    radial-gradient(circle at 60% 120%, rgba(207,73,253,.35), transparent 50%),
    linear-gradient(120deg, #3a2f9e 0%, #6846ff 42%, #7a3fb8 100%) !important;
}
.home-v2-layout-pg77plus .home-v2-slide:not(.home-v2-slide-image) .home-v2-hero-copy span{
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28);
  padding:5px 12px;border-radius:999px;display:inline-block;font-weight:700;
  letter-spacing:.06em;
}
.home-v2-layout-pg77plus .home-v2-slide:not(.home-v2-slide-image) .home-v2-hero-copy h1{color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.35)}
.home-v2-layout-pg77plus .home-v2-slide:not(.home-v2-slide-image) .home-v2-hero-copy p{color:rgba(255,255,255,.85)}

/* Category chips */
.home-v2-layout-pg77plus .home-v2-category-strip button,
.home-v2-layout-pg77plus .home-v2-categories button{
  border:1px solid var(--pgp-line);background:rgba(255,255,255,.035);
  color:#b6b0d6;border-radius:11px
}
.home-v2-layout-pg77plus .home-v2-category-strip button.active,
.home-v2-layout-pg77plus .home-v2-categories button.active{
  background:linear-gradient(180deg,var(--pgp-purple),var(--pgp-purple2));
  color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(104,70,255,.34)
}

/* Quick-action tiles — coloured glow cards like the template */
.home-v2-layout-pg77plus .home-v2-actions-grid button{
  border:1px solid var(--pgp-line);
  background:linear-gradient(145deg,#261F65,#1b1550);
  border-radius:18px;position:relative;overflow:hidden;transition:.2s ease
}
.home-v2-layout-pg77plus .home-v2-actions-grid button:hover{
  transform:translateY(-3px);border-color:rgba(170,128,255,.42)
}
.home-v2-layout-pg77plus .home-v2-actions-grid button:nth-child(6n+1){background:linear-gradient(160deg,#7169ff,#3a2f9e)}
.home-v2-layout-pg77plus .home-v2-actions-grid button:nth-child(6n+2){background:linear-gradient(160deg,#307DD1,#1C2568)}
.home-v2-layout-pg77plus .home-v2-actions-grid button:nth-child(6n+3){background:linear-gradient(160deg,#1FB2E4,#173a72)}
.home-v2-layout-pg77plus .home-v2-actions-grid button:nth-child(6n+4){background:linear-gradient(160deg,#2b2568,#3a3170);box-shadow:inset 0 0 0 1px rgba(241,181,48,.3)}
.home-v2-layout-pg77plus .home-v2-actions-grid button:nth-child(6n+5){background:linear-gradient(160deg,#9647FC,#CF49FD)}
.home-v2-layout-pg77plus .home-v2-actions-grid button:nth-child(6n){background:linear-gradient(160deg,#5a51d8,#7a3fb8)}

/* Game cards */
.home-v2-layout-pg77plus .home-v2-card{
  border-radius:16px;border:1px solid var(--pgp-line);
  background:linear-gradient(145deg,#1a1550,#130e3d);
  box-shadow:0 16px 34px rgba(0,0,0,.34)
}
.home-v2-layout-pg77plus .home-v2-card:hover{
  transform:translateY(-4px);border-color:rgba(170,128,255,.42)
}

/* Section headings */
.home-v2-layout-pg77plus .home-v2-section-head h2{color:#fff}
.home-v2-layout-pg77plus .home-v2-section-head .home-v2-section-sub{color:var(--pgp-muted)}

/* Wallet / member strip */
.home-v2-layout-pg77plus .home-v2-member-strip,
.home-v2-layout-pg77plus .home-v2-wallet{
  border:1px solid rgba(179,133,255,.22);
  background:linear-gradient(160deg,rgba(38,31,101,.9),rgba(19,14,61,.9));border-radius:18px
}

/* Primary buttons -> purple gradient, secondary accent stays green */
.home-v2-layout-pg77plus .home-v2-hero button.primary,
.home-v2-layout-pg77plus .auth-submit,
.home-v2-layout-pg77plus .primary-btn{
  background:linear-gradient(180deg,var(--pgp-purple),var(--pgp-purple2)) !important;
  color:#fff !important;box-shadow:0 10px 26px rgba(104,70,255,.32);border:0 !important
}

/* Bottom nav active -> purple */
.home-v2-layout-pg77plus .home-v2-bottom-nav button.active,
.home-v2-layout-pg77plus .home-v2-bottom-nav .active{color:#b087ff}

/* Section sub-labels + "ดูทั้งหมด" pill accent */
.home-v2-layout-pg77plus .home-v2-section-head .home-v2-view-all,
.home-v2-layout-pg77plus .home-v2-section-head a{color:#98FC44}

/* Search bar */
.home-v2-layout-pg77plus .home-v2-search,
.home-v2-layout-pg77plus .home-v2-topbar input[type="search"],
.home-v2-layout-pg77plus .home-v2-topbar input[type="text"]{
  border:1px solid rgba(179,133,255,.24);background:rgba(255,255,255,.04)
}
.home-v2-layout-pg77plus .home-v2-search:focus-within{
  border-color:rgba(155,116,255,.55);box-shadow:0 0 0 3px rgba(139,92,246,.12)
}

/* Header / topbar tint */
.home-v2-layout-pg77plus .home-v2-topbar{
  background:linear-gradient(180deg,rgba(9,6,39,.98) 74%,rgba(9,6,39,0))
}

/* News / promo side cards */
.home-v2-layout-pg77plus .home-v2-news,
.home-v2-layout-pg77plus .home-v2-side-card,
.home-v2-layout-pg77plus .home-v2-promo-side{
  border:1px solid rgba(179,133,255,.22);
  background:linear-gradient(160deg,rgba(38,31,101,.85),rgba(19,14,61,.9));border-radius:16px
}

/* Register button keeps the green accent for contrast, login goes purple */
.home-v2-layout-pg77plus .home-v2-login,
.home-v2-layout-pg77plus button.login{
  background:var(--pgp-panel);border:1px solid var(--pgp-line);color:#fff
}

/* Lobby view (full game list) — keep the purple theme consistent with home.
   Applies at every viewport (lobby is used on both mobile + desktop). */
.home-v2-layout-pg77plus .lobby-vendor-chip.active{
  background:linear-gradient(160deg,var(--pgp-purple),var(--pgp-purple2)) !important;
  border-color:transparent !important;
  box-shadow:0 8px 22px rgba(104,70,255,.34) !important;
}
.home-v2-layout-pg77plus .lobby-rail-arrow{
  background:linear-gradient(160deg,rgba(104,70,255,.9),rgba(58,47,158,.9));
  border:1px solid rgba(179,133,255,.3);color:#fff;
}
.home-v2-layout-pg77plus .lobby-back-btn{
  border:1px solid rgba(179,133,255,.28);color:#d8ccff;
}
.home-v2-layout-pg77plus .lobby-view-title h1{color:#fff}
.home-v2-layout-pg77plus .lobby-more button{
  background:linear-gradient(180deg,var(--pgp-purple),var(--pgp-purple2));
  color:#fff;border:0;
}

/* ============================================================
   PG77+ DESKTOP SIDEBAR LAYOUT (MetBet-style, CSS-only)
   On desktop the skin turns the home-v2-left grid into a real
   left sidebar (category nav + quick-actions) beside a wide
   content column. Purely presentational — no HTML/handler change.
   The existing DOM order is: announcement, hero, category, actions,
   site-menus, game sections. We place them with grid areas so the
   category nav + quick actions stack in the sticky left rail.
   ============================================================ */
@media (min-width:1024px){
  /* Full-width content: drop the 320px right panel so the game grid
     uses the whole page like the template. */
  .home-v2-layout-pg77plus .home-v2-content{
    grid-template-columns:minmax(0,1fr);
  }
  .home-v2-layout-pg77plus .home-v2-right-panel{display:none}

  /* Two-column shell using padding + an absolute sidebar. The content column is
     normal block flow (no gaps); the category nav is absolutely positioned in
     the reserved left gutter, and space is reserved with padding-left so it
     never overlaps content. DOM order preserved. */
  .home-v2-layout-pg77plus .home-v2-left{
    display:block;
    position:relative;
    padding-left:258px;
  }
  .home-v2-layout-pg77plus .home-v2-announcement{margin:0 0 14px}
  .home-v2-layout-pg77plus .home-v2-hero,
  .home-v2-layout-pg77plus .home-v2-member-mobile,
  .home-v2-layout-pg77plus .home-v2-left > .home-v2-actions,
  .home-v2-layout-pg77plus .home-v2-site-menus,
  .home-v2-layout-pg77plus .home-v2-left > .home-v2-section{
    margin:0 0 18px;
  }

  /* The category strip becomes the vertical sidebar nav. It is pulled out of
     normal flow into the reserved left gutter (absolute) so its tall height
     never affects the content column, then made sticky-like by tracking scroll
     is not possible with absolute — so we keep it absolute within the tall
     .home-v2-left, which is fine since the nav is short relative to the page. */
  .home-v2-layout-pg77plus .home-v2-category{
    position:absolute;left:0;top:0;
    width:236px;margin:0;
    background:linear-gradient(180deg,rgba(30,23,84,.94),rgba(17,12,52,.96));
    border:1px solid rgba(179,133,255,.20);
    border-radius:20px;padding:14px 12px;
    box-shadow:0 22px 54px rgba(0,0,0,.4);
  }
  /* Sidebar section label (like MetBet's "Casino" group header). Pure CSS
     label — not a hardcoded logo (the real brand logo stays in the header). */
  .home-v2-layout-pg77plus .home-v2-category::before{
    content:"หมวดเกม";display:block;
    font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
    color:var(--pgp-muted);padding:2px 6px 10px;
  }
  .home-v2-layout-pg77plus .home-v2-category .home-v2-scroll-row{
    display:flex;flex-direction:column;gap:7px;overflow:visible;
  }
  .home-v2-layout-pg77plus .home-v2-category .home-v2-scroll-row button{
    width:100%;justify-content:flex-start;text-align:left;
    padding:10px 14px;border-radius:12px;font-size:14px;font-weight:600;
    white-space:nowrap;color:#c6c0e6;
    background:transparent;border:1px solid transparent;
    display:flex;align-items:center;gap:10px;
  }
  /* Space-Slotz-style: an icon in front of each nav item (CSS-only, mapped by
     data-action so no HTML change is needed). */
  .home-v2-layout-pg77plus .home-v2-category .home-v2-scroll-row button::before{
    font-size:16px;line-height:1;flex:0 0 auto;width:20px;text-align:center;
    opacity:.9;
  }
  .home-v2-layout-pg77plus .home-v2-category button[data-action="category-เกมโปรด"]::before{content:"★"}
  .home-v2-layout-pg77plus .home-v2-category button[data-action="category-เกมใหม่"]::before{content:"✦"}
  .home-v2-layout-pg77plus .home-v2-category button[data-action="category-เกมแตก"]::before{content:"🔥"}
  .home-v2-layout-pg77plus .home-v2-category button[data-action="category-สล็อต"]::before{content:"🎰"}
  .home-v2-layout-pg77plus .home-v2-category button[data-action="category-คาสิโน"]::before{content:"🎴"}
  .home-v2-layout-pg77plus .home-v2-category button[data-action="category-ยิงปลา"]::before{content:"🎣"}
  .home-v2-layout-pg77plus .home-v2-category button[data-action="category-หวย"]::before{content:"🎟️"}
  .home-v2-layout-pg77plus .home-v2-category button[data-action="category-โต๊ะ"]::before{content:"♠"}
  .home-v2-layout-pg77plus .home-v2-category .home-v2-scroll-row button:hover{
    background:rgba(139,92,246,.14);color:#fff;
  }
  /* Active nav item -> purple with a gold left indicator (MetBet-style) */
  .home-v2-layout-pg77plus .home-v2-category .home-v2-scroll-row button.active{
    background:linear-gradient(135deg,var(--pgp-purple),var(--pgp-purple2)) !important;
    color:#fff !important;border-color:transparent !important;
    box-shadow:inset 3px 0 0 0 var(--pgp-gold),0 8px 22px rgba(104,70,255,.34) !important;
  }
  .home-v2-layout-pg77plus .home-v2-category .home-v2-allprov-btn{
    margin-top:6px;border-top:1px solid rgba(179,133,255,.16);padding-top:14px;
    color:var(--pgp-green);
  }
  /* Hide the in-sidebar search (the header search covers it on desktop) */
  .home-v2-layout-pg77plus .home-v2-category > .home-v2-search{display:none}

  /* Quick actions ("Other bonuses") sit in the content column as a horizontal
     row of coloured bonus cards, matching the template. */
  .home-v2-layout-pg77plus .home-v2-actions-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;
  }
  .home-v2-layout-pg77plus .home-v2-actions-grid button{
    min-height:104px;flex-direction:column;justify-content:center;
    align-items:center;text-align:center;padding:14px 10px;gap:8px;
  }
  .home-v2-layout-pg77plus .home-v2-actions-grid button .home-v2-action-icon{
    font-size:26px;
  }

  /* Wider game grid to fill the reclaimed right-panel space */
  .home-v2-layout-pg77plus .home-v2-grid{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}
@media (min-width:1280px){
  .home-v2-layout-pg77plus .home-v2-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}
@media (min-width:1440px){
  .home-v2-layout-pg77plus .home-v2-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
  }
  /* A touch more breathing room for the sidebar on very wide screens */
  .home-v2-layout-pg77plus .home-v2-left{padding-left:270px}
  .home-v2-layout-pg77plus .home-v2-category{width:248px}
}

/* ===== PromptPay QR deposit (no-gateway) ===== */
.ppqr-field{margin-bottom:12px}
.ppqr-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 14px}
.ppqr-chip{padding:12px 6px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all .14s ease}
.ppqr-chip:hover{border-color:var(--brand-primary,#a7d93b)}
.ppqr-chip.active{background:linear-gradient(135deg,var(--brand-primary,#a7d93b),#7ee08a);color:#04121f;border-color:transparent}
.ppqr-box{text-align:center;padding:6px 2px}
.ppqr-timer{display:inline-block;margin-bottom:12px;padding:6px 16px;border-radius:999px;background:rgba(216,166,58,.16);color:#ffcf99;font-size:14px;font-weight:700}
.ppqr-timer.is-expired{background:rgba(255,77,109,.18);color:#ff9db0}
.ppqr-timer strong{font-size:17px;font-variant-numeric:tabular-nums}
.ppqr-qr-wrap{display:flex;justify-content:center;margin:6px 0}
.ppqr-img{width:230px;height:230px;border-radius:16px;background:#fff;padding:10px;object-fit:contain;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.ppqr-img.placeholder{display:grid;place-items:center;color:#8a94a6;font-size:14px}
.ppqr-amount{font-size:30px;font-weight:900;color:var(--brand-primary,#a7d93b);margin-top:10px}
.ppqr-payto{font-size:13px;color:#a8bac7;margin-top:2px}
.ppqr-stamp{font-size:11px;color:rgba(168,186,199,.45);margin-top:4px;letter-spacing:.02em}
.ppqr-note{font-size:12.5px;color:#9fb0c9;margin:10px auto 0;max-width:280px;line-height:1.5}
.ppqr-actions{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.ppqr-actions .secondary-btn,.ppqr-actions .link-btn{width:100%}
.ppqr-hint{font-size:11.5px;color:#7c8aa0;margin-top:10px}
.ppqr-result{text-align:center;padding:22px 12px}
.ppqr-result-icon{font-size:46px}
.ppqr-result h4{margin:8px 0 4px;color:#fff;font-size:19px}
.ppqr-result p{color:#a8bac7;font-size:14px;margin-bottom:16px}
.ppqr-result .auth-submit,.ppqr-result .secondary-btn{width:100%}
/* ===== PWA install button (ติดตั้งแอป PG77) ===== */
/* Desktop / tablet: floating pill above the bottom nav (original look). */
.pg77-install-fab{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(84px + env(safe-area-inset-bottom,0)); z-index:9999;
  padding:11px 20px; border:none; border-radius:999px;
  background:linear-gradient(135deg,#c6f24a,#8fd42f); color:#0a1420;
  font-family:'Kanit',sans-serif; font-weight:700; font-size:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.45); cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
/* Phone: dock it flat to the very bottom, under the bottom nav, full width so
   it no longer floats over the game cards. */
@media (max-width:768px){
  .pg77-install-fab{
    left:0; right:0; transform:none;
    bottom:0; width:100%; border-radius:0;
    padding:calc(9px + env(safe-area-inset-bottom,0)) 16px 9px;
    font-size:13px; justify-content:center;
    box-shadow:0 -6px 18px rgba(0,0,0,.4);
    z-index:60; /* same layer as bottom nav so it sits with it, not over cards */
  }
}

/* Maintenance takeover: freeze the page under the full-screen overlay */
body.maintenance-locked{overflow:hidden!important}
body.maintenance-locked #app,body.maintenance-locked .home-v2-shell{filter:blur(2px);pointer-events:none;user-select:none}

/* Web Push enable banner (ศูนย์ข่าวสาร) */
.push-enable-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,rgba(100,214,255,.14),rgba(59,130,246,.14));border:1px solid rgba(100,214,255,.3)}
.push-enable-banner strong{color:#eaf6ff;font-size:14px}
.push-enable-banner .helper-text{margin-top:2px}
.push-enable-banner.denied{color:#f8c9c9;justify-content:center;text-align:center;font-size:13px;background:rgba(220,60,60,.12);border-color:rgba(220,60,60,.3)}
.push-enable-banner .primary-btn{white-space:nowrap;flex:0 0 auto}

/* ============================================================
   SKIN: FLING Neo (violet + indigo + lime) — from the owner's
   fling-home-preview design. CSS-only, scoped under
   .home-v2-layout-flingneo. Same mechanism as pg77plus.
   Palette: violet #704dfc · indigo #241c5d · ink #120e2f ·
            lime #c8dd82 · sky #8da9db · gold #d8b06a
   ============================================================ */
body.home-v2-active:has(.home-v2-layout-flingneo){
  --v2-bg:#120e2f;
  --v2-surface:#241c5d;
  --v2-surface-2:#2f2670;
  --v2-lime:#c8dd82;
  --v2-gold:#d8b06a;
  --v2-muted:#8da9db;
  --v2-line:rgba(112,77,252,.26);
  --v2-card-line:rgba(112,77,252,.22);
  background:
    radial-gradient(circle at 72% -6%, #3a2c8f 0, transparent 34%),
    radial-gradient(circle at 4% 106%, #241c5d 0, transparent 36%),
    linear-gradient(180deg, #1a1442 0%, #120e2f 55%, #0d0a24 100%) !important;
}
html:has(body.home-v2-active .home-v2-layout-flingneo),
body.home-v2-active:has(.home-v2-layout-flingneo) #app{background:#120e2f}

.home-v2-layout-flingneo.home-v2,
.home-v2-layout-flingneo .home-v2,
.home-v2-layout-flingneo{
  --v2-bg:#120e2f;
  --v2-surface:#241c5d;
  --v2-surface-2:#2f2670;
  --v2-lime:#c8dd82;
  --v2-lime-bright:#d6e896;
  --v2-lime-soft:rgba(200,221,130,.14);
  --v2-gold:#d8b06a;
  --v2-gold-soft:rgba(216,176,106,.16);
  --v2-muted:#8da9db;
  --v2-line:rgba(112,77,252,.26);
  --v2-card-line:rgba(112,77,252,.22);
  --v2-layer-bg:
    radial-gradient(circle at 12% 0%, rgba(112,77,252,.20), transparent 32%),
    radial-gradient(circle at 96% 12%, rgba(141,169,219,.12), transparent 30%),
    linear-gradient(145deg, rgba(47,38,112,.96), rgba(26,20,66,.95) 58%, rgba(36,28,93,.94));
  --v2-layer-bg-subtle:
    radial-gradient(circle at 10% 0%, rgba(112,77,252,.12), transparent 28%),
    linear-gradient(145deg, rgba(36,28,93,.92), rgba(18,14,47,.92));
  --v2-layer-border:rgba(112,77,252,.26);
  --v2-layer-border-hover:rgba(125,105,236,.46);
  --v2-watermark:linear-gradient(135deg, rgba(112,77,252,.72), rgba(200,221,130,.6));
  color:#ffffff;
}

/* ---- FLING Neo full element styling (mirrors pg77plus, own palette) ---- */
/* palette: violet #704dfc/#7d69ec · lime #c8dd82 · indigo surfaces · sky #8da9db */

/* Announcement marquee */
.home-v2-layout-flingneo .home-v2-announcement{
  background:linear-gradient(90deg,rgba(112,77,252,.18),rgba(141,169,219,.10));
  border:1px solid rgba(112,77,252,.26);border-radius:14px;color:#e7ddff
}

/* Hero */
.home-v2-layout-flingneo .home-v2-hero-main{
  border-radius:24px;border:1px solid rgba(112,77,252,.26);
  box-shadow:0 26px 70px rgba(0,0,0,.42)
}
.home-v2-layout-flingneo .home-v2-slide:not(.home-v2-slide-image){
  background:
    radial-gradient(circle at 82% 18%, rgba(141,169,219,.40), transparent 46%),
    radial-gradient(circle at 60% 120%, rgba(200,221,130,.28), transparent 50%),
    linear-gradient(120deg, #241c5d 0%, #704dfc 46%, #4a37b0 100%) !important;
}
.home-v2-layout-flingneo .home-v2-slide:not(.home-v2-slide-image) .home-v2-hero-copy span{
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28);
  padding:5px 12px;border-radius:999px;display:inline-block;font-weight:700;letter-spacing:.06em;
}
.home-v2-layout-flingneo .home-v2-slide:not(.home-v2-slide-image) .home-v2-hero-copy h1{color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.35)}
.home-v2-layout-flingneo .home-v2-slide:not(.home-v2-slide-image) .home-v2-hero-copy p{color:rgba(255,255,255,.85)}

/* Category chips */
.home-v2-layout-flingneo .home-v2-category-strip button,
.home-v2-layout-flingneo .home-v2-categories button,
.home-v2-layout-flingneo .home-v2-category .home-v2-scroll-row button{
  border:1px solid rgba(112,77,252,.26);background:rgba(255,255,255,.04);
  color:#b9c4e6;border-radius:11px
}
.home-v2-layout-flingneo .home-v2-category-strip button.active,
.home-v2-layout-flingneo .home-v2-categories button.active,
.home-v2-layout-flingneo .home-v2-category .home-v2-scroll-row button.active{
  background:linear-gradient(135deg,#704dfc,#7d69ec);
  color:#fff;border-color:rgba(200,221,130,.5);box-shadow:0 8px 22px rgba(112,77,252,.34)
}

/* Quick-action tiles — violet/lime glow cards */
.home-v2-layout-flingneo .home-v2-actions-grid button{
  border:1px solid rgba(112,77,252,.26);
  background:linear-gradient(145deg,#2a2160,#1a1442);
  border-radius:18px;position:relative;overflow:hidden;transition:.2s ease
}
.home-v2-layout-flingneo .home-v2-actions-grid button:hover{
  transform:translateY(-3px);border-color:rgba(125,105,236,.46)
}
.home-v2-layout-flingneo .home-v2-actions-grid button:nth-child(6n+1){background:linear-gradient(160deg,#7d69ec,#3f2f9e)}
.home-v2-layout-flingneo .home-v2-actions-grid button:nth-child(6n+2){background:linear-gradient(160deg,#8da9db,#2f3f78)}
.home-v2-layout-flingneo .home-v2-actions-grid button:nth-child(6n+3){background:linear-gradient(160deg,#704dfc,#241c5d)}
.home-v2-layout-flingneo .home-v2-actions-grid button:nth-child(6n+4){background:linear-gradient(160deg,#2f2670,#3a3170);box-shadow:inset 0 0 0 1px rgba(200,221,130,.3)}
.home-v2-layout-flingneo .home-v2-actions-grid button:nth-child(6n+5){background:linear-gradient(160deg,#8a63d8,#a55870)}
.home-v2-layout-flingneo .home-v2-actions-grid button:nth-child(6n){background:linear-gradient(160deg,#5a4fd0,#6a3fa8)}

/* Game cards */
.home-v2-layout-flingneo .home-v2-card{
  border-radius:16px;border:1px solid rgba(112,77,252,.24);
  background:linear-gradient(145deg,#241c5d,#161138);
  box-shadow:0 16px 34px rgba(0,0,0,.34)
}
.home-v2-layout-flingneo .home-v2-card:hover{
  transform:translateY(-4px);border-color:rgba(125,105,236,.46)
}

/* Section headings */
.home-v2-layout-flingneo .home-v2-section-head h2{color:#fff}
.home-v2-layout-flingneo .home-v2-section-head .home-v2-section-sub{color:#8da9db}
.home-v2-layout-flingneo .home-v2-section-head .home-v2-view-all,
.home-v2-layout-flingneo .home-v2-section-head a{color:#c8dd82}

/* Wallet / member strip */
.home-v2-layout-flingneo .home-v2-member-strip,
.home-v2-layout-flingneo .home-v2-wallet{
  border:1px solid rgba(112,77,252,.24);
  background:linear-gradient(160deg,rgba(47,38,112,.9),rgba(26,20,66,.9));border-radius:18px
}

/* Primary buttons -> lime with dark ink (from the preview design) */
.home-v2-layout-flingneo .home-v2-hero button.primary,
.home-v2-layout-flingneo .auth-submit,
.home-v2-layout-flingneo .primary-btn,
.home-v2-layout-flingneo .home-v2-register-btn,
.home-v2-layout-flingneo .home-v2-play-btn{
  background:linear-gradient(180deg,#d6e896,#c8dd82) !important;
  color:#17200a !important;box-shadow:0 10px 26px rgba(200,221,130,.28);border:0 !important
}

/* Bottom nav active -> violet */
.home-v2-layout-flingneo .home-v2-bottom-nav button.active,
.home-v2-layout-flingneo .home-v2-bottom-nav .active{color:#a892ff}

/* Search bar */
.home-v2-layout-flingneo .home-v2-search,
.home-v2-layout-flingneo .home-v2-topbar input[type="search"],
.home-v2-layout-flingneo .home-v2-topbar input[type="text"]{
  border:1px solid rgba(112,77,252,.26);background:rgba(255,255,255,.04)
}
.home-v2-layout-flingneo .home-v2-search:focus-within{
  border-color:rgba(125,105,236,.55);box-shadow:0 0 0 3px rgba(112,77,252,.14)
}

/* Header / topbar tint */
.home-v2-layout-flingneo .home-v2-topbar,
.home-v2-layout-flingneo .home-v2-header{
  background:linear-gradient(180deg,rgba(18,14,47,.98) 74%,rgba(18,14,47,0))
}

/* News / promo side cards */
.home-v2-layout-flingneo .home-v2-news,
.home-v2-layout-flingneo .home-v2-side-card,
.home-v2-layout-flingneo .home-v2-promo-side{
  border:1px solid rgba(112,77,252,.24);
  background:linear-gradient(160deg,rgba(47,38,112,.85),rgba(26,20,66,.9));border-radius:16px
}

/* Lobby view (full game list) — keep the violet theme */
.home-v2-layout-flingneo .lobby-vendor-chip.active{
  background:linear-gradient(135deg,#704dfc,#7d69ec) !important;
  border-color:rgba(200,221,130,.5) !important;color:#fff
}
.home-v2-layout-flingneo .lobby-rail-arrow{background:rgba(112,77,252,.3);color:#fff}
.home-v2-layout-flingneo .lobby-back-btn,
.home-v2-layout-flingneo .lobby-more button{color:#c8dd82}

/* ============================================================
   FLING77 skin — .home-v2-layout-fling. Same mechanism as
   flingneo/pg77plus (CSS only, re-arrange none — buttons/actions
   unchanged). Palette = mockup "fling-classic":
     navy #06111c/#0a2231 · lime #a7d93b/#4bea15 · gold #d8a63a
   ============================================================ */
body.home-v2-active:has(.home-v2-layout-fling){
  --v2-bg:#06111c;
  --v2-surface:#0a2231;
  --v2-surface-2:#10364a;
  --v2-lime:#a7d93b;
  --v2-gold:#d8a63a;
  --v2-muted:#a8bac7;
  --v2-line:rgba(167,217,59,.16);
  --v2-card-line:rgba(168,186,199,.14);
  background:
    radial-gradient(circle at 72% -6%, #0b2740 0, transparent 34%),
    radial-gradient(circle at 4% 106%, #081a28 0, transparent 36%),
    linear-gradient(180deg, #081a28 0%, #06111c 55%, #04101a 100%) !important;
}
html:has(body.home-v2-active .home-v2-layout-fling),
body.home-v2-active:has(.home-v2-layout-fling) #app{background:#06111c}

.home-v2-layout-fling.home-v2,
.home-v2-layout-fling .home-v2,
.home-v2-layout-fling{
  --v2-bg:#06111c;
  --v2-surface:#0a2231;
  --v2-surface-2:#10364a;
  --v2-lime:#a7d93b;
  --v2-lime-bright:#4bea15;
  --v2-lime-soft:rgba(167,217,59,.14);
  --v2-gold:#d8a63a;
  --v2-gold-soft:rgba(216,166,58,.16);
  --v2-muted:#a8bac7;
  --v2-line:rgba(167,217,59,.16);
  --v2-card-line:rgba(168,186,199,.14);
  --v2-layer-bg:
    radial-gradient(circle at 12% 0%, rgba(167,217,59,.16), transparent 32%),
    radial-gradient(circle at 96% 12%, rgba(216,166,58,.12), transparent 30%),
    linear-gradient(145deg, rgba(16,54,74,.96), rgba(10,34,49,.95) 58%, rgba(6,17,28,.94));
  --v2-layer-bg-subtle:
    radial-gradient(circle at 10% 0%, rgba(167,217,59,.10), transparent 28%),
    linear-gradient(145deg, rgba(10,34,49,.92), rgba(6,17,28,.92));
  --v2-layer-border:rgba(167,217,59,.22);
  --v2-layer-border-hover:rgba(167,217,59,.42);
  --v2-watermark:linear-gradient(135deg, rgba(167,217,59,.72), rgba(216,166,58,.6));
  color:#ffffff;
}

/* ---- FLING77 full element styling (mirrors flingneo, own palette) ---- */
/* palette: lime #a7d93b/#4bea15 · gold #d8a63a · navy surfaces · muted #a8bac7 */

/* Announcement marquee */
.home-v2-layout-fling .home-v2-announcement{
  background:linear-gradient(90deg,rgba(167,217,59,.16),rgba(216,166,58,.08));
  border:1px solid rgba(167,217,59,.24);border-radius:14px;color:#e8f4cf
}

/* Hero */
.home-v2-layout-fling .home-v2-hero-main{
  border-radius:24px;border:1px solid rgba(167,217,59,.24);
  box-shadow:0 26px 70px rgba(0,0,0,.42)
}
.home-v2-layout-fling .home-v2-slide:not(.home-v2-slide-image){
  background:
    radial-gradient(circle at 82% 18%, rgba(216,166,58,.34), transparent 46%),
    radial-gradient(circle at 60% 120%, rgba(167,217,59,.30), transparent 50%),
    linear-gradient(120deg, #0a2231 0%, #10364a 48%, #0b2740 100%) !important;
}
.home-v2-layout-fling .home-v2-slide:not(.home-v2-slide-image) .home-v2-hero-copy span{
  background:rgba(167,217,59,.18);color:#eaffc7;border:1px solid rgba(167,217,59,.4);
  padding:5px 12px;border-radius:999px;display:inline-block;font-weight:700;letter-spacing:.06em;
}
.home-v2-layout-fling .home-v2-slide:not(.home-v2-slide-image) .home-v2-hero-copy h1{color:#fff;text-shadow:0 4px 18px rgba(0,0,0,.35)}
.home-v2-layout-fling .home-v2-slide:not(.home-v2-slide-image) .home-v2-hero-copy p{color:rgba(255,255,255,.85)}

/* Category chips */
.home-v2-layout-fling .home-v2-category-strip button,
.home-v2-layout-fling .home-v2-categories button,
.home-v2-layout-fling .home-v2-category .home-v2-scroll-row button{
  border:1px solid rgba(167,217,59,.22);background:rgba(255,255,255,.04);
  color:#c3d1b6;border-radius:11px
}
.home-v2-layout-fling .home-v2-category-strip button.active,
.home-v2-layout-fling .home-v2-categories button.active,
.home-v2-layout-fling .home-v2-category .home-v2-scroll-row button.active{
  background:linear-gradient(135deg,#a7d93b,#6fbf2f);
  color:#06131b;border-color:rgba(216,166,58,.5);box-shadow:0 8px 22px rgba(167,217,59,.30)
}

/* Quick-action tiles — navy cards with lime/gold glow */
.home-v2-layout-fling .home-v2-actions-grid button{
  border:1px solid rgba(167,217,59,.22);
  background:linear-gradient(145deg,#10364a,#0a2231);
  border-radius:18px;position:relative;overflow:hidden;transition:.2s ease
}
.home-v2-layout-fling .home-v2-actions-grid button:hover{
  transform:translateY(-3px);border-color:rgba(167,217,59,.42)
}
.home-v2-layout-fling .home-v2-actions-grid button:nth-child(6n+1){background:linear-gradient(160deg,#12405a,#0a2231)}
.home-v2-layout-fling .home-v2-actions-grid button:nth-child(6n+2){background:linear-gradient(160deg,#0e3346,#0a2231);box-shadow:inset 0 0 0 1px rgba(167,217,59,.28)}
.home-v2-layout-fling .home-v2-actions-grid button:nth-child(6n+3){background:linear-gradient(160deg,#10364a,#06111c)}
.home-v2-layout-fling .home-v2-actions-grid button:nth-child(6n+4){background:linear-gradient(160deg,#123a52,#0b2740);box-shadow:inset 0 0 0 1px rgba(216,166,58,.3)}
.home-v2-layout-fling .home-v2-actions-grid button:nth-child(6n+5){background:linear-gradient(160deg,#0f3a4d,#0a2231)}
.home-v2-layout-fling .home-v2-actions-grid button:nth-child(6n){background:linear-gradient(160deg,#10364a,#0d2a3c)}

/* Game cards */
.home-v2-layout-fling .home-v2-card{
  border-radius:16px;border:1px solid rgba(167,217,59,.2);
  background:linear-gradient(145deg,#0a2231,#071a26);
  box-shadow:0 16px 34px rgba(0,0,0,.34)
}
.home-v2-layout-fling .home-v2-card:hover{
  transform:translateY(-4px);border-color:rgba(167,217,59,.42)
}

/* Section headings */
.home-v2-layout-fling .home-v2-section-head h2{color:#fff}
.home-v2-layout-fling .home-v2-section-head .home-v2-section-sub{color:#a8bac7}
.home-v2-layout-fling .home-v2-section-head .home-v2-view-all,
.home-v2-layout-fling .home-v2-section-head a{color:#a7d93b}

/* Wallet / member strip */
.home-v2-layout-fling .home-v2-member-strip,
.home-v2-layout-fling .home-v2-wallet{
  border:1px solid rgba(167,217,59,.2);
  background:linear-gradient(160deg,rgba(16,54,74,.9),rgba(10,34,49,.9));border-radius:18px
}

/* Primary buttons -> lime with dark ink (from the preview design) */
.home-v2-layout-fling .home-v2-hero button.primary,
.home-v2-layout-fling .auth-submit,
.home-v2-layout-fling .primary-btn,
.home-v2-layout-fling .home-v2-register-btn,
.home-v2-layout-fling .home-v2-play-btn{
  background:linear-gradient(180deg,#b7e84a,#a7d93b) !important;
  color:#06131b !important;box-shadow:0 10px 26px rgba(167,217,59,.28);border:0 !important
}

/* Bottom nav active -> lime */
.home-v2-layout-fling .home-v2-bottom-nav button.active,
.home-v2-layout-fling .home-v2-bottom-nav .active{color:#a7d93b}

/* Search bar */
.home-v2-layout-fling .home-v2-search,
.home-v2-layout-fling .home-v2-topbar input[type="search"],
.home-v2-layout-fling .home-v2-topbar input[type="text"]{
  border:1px solid rgba(167,217,59,.22);background:rgba(255,255,255,.04)
}
.home-v2-layout-fling .home-v2-search:focus-within{
  border-color:rgba(167,217,59,.55);box-shadow:0 0 0 3px rgba(167,217,59,.14)
}

/* Header / topbar tint */
.home-v2-layout-fling .home-v2-topbar,
.home-v2-layout-fling .home-v2-header{
  background:linear-gradient(180deg,rgba(6,17,28,.98) 74%,rgba(6,17,28,0))
}

/* News / promo side cards */
.home-v2-layout-fling .home-v2-news,
.home-v2-layout-fling .home-v2-side-card,
.home-v2-layout-fling .home-v2-promo-side{
  border:1px solid rgba(167,217,59,.2);
  background:linear-gradient(160deg,rgba(16,54,74,.85),rgba(10,34,49,.9));border-radius:16px
}

/* Lobby view (full game list) — keep the lime theme */
.home-v2-layout-fling .lobby-vendor-chip.active{
  background:linear-gradient(135deg,#a7d93b,#6fbf2f) !important;
  border-color:rgba(216,166,58,.5) !important;color:#06131b
}
.home-v2-layout-fling .lobby-rail-arrow{background:rgba(167,217,59,.3);color:#06131b}
.home-v2-layout-fling .lobby-back-btn,
.home-v2-layout-fling .lobby-more button{color:#a7d93b}

/* ============================================================
   READABILITY POLISH LAYER (2026-08-06) — คมชัดขึ้นทั้งหน้า
   Additive override; scoped to .home-v2 (ไม่กระทบ skin อื่น).
   แก้จุดที่ "สีล้น/อักษรจม" ที่ยืนยันจากหน้าจริง.
   ============================================================ */

/* 1) กล่องข่าวสารฝั่งขวา — หัวข้อจมพื้น gradient teal สว่าง.
   ยกพื้นการ์ดให้สว่างขึ้น + ขอบเรืองแสง lime + หัวข้อคม อ่านง่ายชัดเจน. */
.home-v2 .home-v2-mini-list button {
  border: 1px solid rgba(159, 242, 74, 0.16);
  background: linear-gradient(145deg, rgba(16, 48, 68, 0.96), rgba(7, 22, 36, 0.97));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.home-v2 .home-v2-mini-list button:hover {
  border-color: rgba(159, 242, 74, 0.4);
}
.home-v2 .home-v2-mini-list button strong {
  color: #eafff0;
  font-weight: 800;
  letter-spacing: 0.1px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.home-v2 .home-v2-mini-list button span {
  color: #cdddec;
}
.home-v2 .home-v2-mini-list button em,
.home-v2 .home-v2-mini-list button i {
  color: #9fd45f;
}

/* 2) ปุ่ม "ค่ายเกมทั้งหมด" — ครึ่งซ้ายพื้นเขียวเข้ม ตัวเขียวเข้มจม.
   ปรับตัวอักษรเป็นดำอมเขียวเข้มพร้อมเงาสว่าง ให้อ่านคมทั้งปุ่ม. */
.home-v2 .home-v2-allprov-btn {
  color: #04140a;
  font-weight: 900;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.28);
}

/* 3) subtitle/หัวข้อรอง (muted) ทั่วหน้า — ยกให้สว่างขึ้นเล็กน้อยให้คมขึ้น */
.home-v2 .home-v2-section-head p,
.home-v2 .home-v2-actions p,
.home-v2 .home-v2-mini-head p {
  color: #b7cadb;
}

/* 4) การ์ดเกม — ชื่อค่าย (provider) ใต้ชื่อเกม ยกให้อ่านชัดขึ้นนิด */
.home-v2 .home-v2-card-body p {
  color: #b3c6d6;
}

/* 5) ซ่อนปุ่มลอย 🎛️ เปลี่ยนรูปแบบหน้าจอ (layout switcher) — ไม่ให้ลูกค้าเห็น.
   layout ต่อ site คุมจากหลังบ้านแทน. โค้ดเดิมเก็บไว้ เผื่อเปิดใช้ทีหลัง. */
.home-v2-layout-switcher {
  display: none !important;
}

/* ============================================================
   ฝากผ่านธนาคาร — 3-STEP WIZARD (method "auto") 2026-08-07
   ============================================================ */
.dep-wizard { display: flex; flex-direction: column; gap: 14px; }
.dep-steps { display: flex; align-items: center; gap: 4px; justify-content: center; margin: 2px 0 6px; }
.dep-step { display: flex; flex-direction: column; align-items: center; gap: 4px; opacity: 0.5; transition: opacity 0.2s; }
.dep-step.active, .dep-step.done { opacity: 1; }
.dep-step-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: rgba(134, 221, 255, 0.14); color: #cfe0ee; border: 1px solid rgba(134, 221, 255, 0.22); }
.dep-step.active .dep-step-dot { background: linear-gradient(135deg, #9ff24a, #f4c85d); color: #071018; border-color: transparent; }
.dep-step.done .dep-step-dot { background: rgba(159, 242, 74, 0.2); color: #9ff24a; border-color: rgba(159, 242, 74, 0.4); }
.dep-step-label { font-size: 11px; color: #a9bed0; font-weight: 600; }
.dep-step.active .dep-step-label { color: #fff; }
.dep-step-line { flex: 0 0 24px; height: 2px; background: rgba(134, 221, 255, 0.18); margin: 0 2px 16px; }
.dep-step-hint { color: #b7cadb; font-size: 13px; margin: 0 0 8px; text-align: center; }

.dep-pick-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 480px) { .dep-pick-grid { grid-template-columns: 1fr 1fr; } }
.dep-pick-card { cursor: pointer; transition: transform 0.14s, border-color 0.14s; }
.dep-pick-card:hover { transform: translateY(-2px); }

.dep-acct-chip { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(16, 48, 68, 0.6); border: 1px solid rgba(134, 221, 255, 0.18); margin-bottom: 12px; }
.dep-acct-chip > div { display: flex; flex-direction: column; line-height: 1.25; }
.dep-acct-chip span { font-size: 12px; color: #a9bed0; }
.dep-acct-chip strong { color: #fff; font-size: 14px; }
.dep-acct-chip .link-btn { margin-left: auto; color: #9ff24a; }

.dep-transfer-card { display: flex; flex-direction: column; gap: 12px; }
.dep-transfer-amount { text-align: center; font-size: 26px; font-weight: 900; color: #f4c85d; letter-spacing: 0.3px; }
.dep-transfer-timer { text-align: center; color: #b7cadb; font-size: 13px; }
.dep-transfer-timer strong { color: #9ff24a; font-size: 16px; }
.dep-transfer-timer.is-expired strong { color: #f87171; }
.dep-transfer-note { text-align: center; color: #b7cadb; font-size: 12.5px; margin: 2px 0; }
.dep-transfer-actions { display: flex; gap: 10px; }
.dep-transfer-actions button { flex: 1; }

/* Admin-uploaded image inside a deposit method card (fallback = emoji icon). */
.method-icon.method-icon-img { padding: 0; overflow: hidden; border-radius: 12px; width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255,255,255,.06); }
.method-icon.method-icon-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

/* ประวัติการใช้งาน: 4 แท็บบนเลื่อนแนวนอนได้ลื่น + แท็บสุดท้ายไม่ถูกตัด */
.history-tabs {
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding-right: 14px;
}
.history-tabs .auth-toggle {
  flex: 0 0 auto;
  scroll-snap-align: start;
  min-width: max-content;
  white-space: nowrap;
}

/* free-credit menu: force reward card dark bg + readable text (fix white-on-light) */
.freebies-modal-panel .freebies-reward-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(244, 211, 105, 0.22), transparent 34%),
    linear-gradient(145deg, #111d29, #07111c) !important;
  border: 1px solid rgba(216, 166, 58, 0.28) !important;
}
.freebies-modal-panel .freebies-reward-card.diamond {
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 215, 255, 0.2), transparent 34%),
    linear-gradient(145deg, #102f44, #07111c) !important;
}
.freebies-modal-panel .freebies-reward-card .menu-title { color: #ffffff !important; }
.freebies-modal-panel .freebies-reward-card .helper-text { color: rgba(255, 248, 223, 0.82) !important; }

/* 🔔 Push opt-in prompt (soft nudge card, bottom center) */
.pg77-push-prompt{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:10000;width:min(92vw,380px);background:#12203a;color:#eaf2ff;border:1px solid rgba(120,170,255,.35);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.5);padding:14px 16px;display:flex;flex-direction:column;gap:12px;animation:pg77PushIn .3s ease}
@keyframes pg77PushIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}}
.pg77-push-prompt-title{font-weight:800;font-size:15px}
.pg77-push-prompt-sub{font-size:12.5px;color:#a9c4ea;margin-top:3px}
.pg77-push-prompt-actions{display:flex;gap:10px;justify-content:flex-end}
.pg77-push-prompt-no{background:transparent;border:1px solid rgba(160,190,240,.4);color:#c8d8f5;border-radius:10px;padding:8px 16px;font-weight:600;cursor:pointer}
.pg77-push-prompt-yes{background:linear-gradient(135deg,#ffcf5c,#ff9d3c);border:none;color:#3a2400;border-radius:10px;padding:8px 20px;font-weight:800;cursor:pointer}
.pg77-push-prompt-yes:hover{filter:brightness(1.05)}

/* ===== Launch-game loading overlay (re-added; was dropped from #4 commit) ===== */
.launch-loading-wrap{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;background:rgba(3,11,18,0.72);backdrop-filter:blur(2px)}
.launch-loading-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 34px;border-radius:16px;background:rgba(12,22,34,0.95);border:1px solid rgba(167,217,59,0.35);box-shadow:0 18px 44px rgba(0,0,0,0.5)}
.launch-spinner{width:42px;height:42px;border-radius:50%;border:4px solid rgba(167,217,59,0.25);border-top-color:#a7d93b;animation:launchSpin 0.8s linear infinite}
.launch-loading-text{color:#eef4ff;font-size:14px;font-weight:700}
@keyframes launchSpin{to{transform:rotate(360deg)}}

/* ===== News card on MOBILE: full rectangular image + white text (owner request) ===== */
@media (max-width: 768px) {
  /* keep the compact left-thumbnail layout, just make the image a wider rectangle (not a cramped square) */
  .notification-card-main,
  body.home-v2-active .notification-card-main { grid-template-columns: 96px minmax(0, 1fr) !important; }
  .notification-cover,
  .notification-cover-img,
  body.home-v2-active .notification-cover {
    width: 96px !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 12px;
    overflow: hidden;
    align-self: start;
  }
  /* show the real image proportions (no crop) */
  .notification-cover img,
  .notification-cover-img img { width: 100% !important; height: auto !important; display: block; object-fit: contain !important; }
  /* text -> white/readable on the dark card */
  body.home-v2-active .notification-copy h4 { color: #ffffff !important; }
  body.home-v2-active .notification-copy p { color: #dbe6f2 !important; }
  body.home-v2-active .notification-copy .helper-text,
  body.home-v2-active .notification-card .helper-text { color: #cdd9e6 !important; }
}


/* แถวปุ่มแชร์ข่าว (แบบ Wattpad) — ปุ่มดำ ไอคอนขาว hover=สีแบรนด์ */
.article-share-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 4px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.article-share-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-right: 4px;
}
.article-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: #111827;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.article-share-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(15, 23, 42, 0.22); }
.article-share-btn:active { transform: translateY(0); }
.article-share-btn.share-fb:hover { background: #1877f2; }
.article-share-btn.share-x:hover { background: #000; }
.article-share-btn.share-line:hover { background: #06c755; }
.article-share-btn.share-tg:hover { background: #229ed9; }
.article-share-btn.share-wa:hover { background: #25d366; }
.article-share-btn.share-copy:hover { background: #64748b; }

/* ===== หน้าอ่านบทความเต็มจอ (แบบ Medium) + ฟีดบทความ ===== */
.article-page {
  min-height: 100vh;
  background: #ffffff;
  color: #242424;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.article-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(1.2) blur(8px);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.article-topbar-back,
.article-topbar-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #242424;
  font-size: 20px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.article-topbar-back:hover,
.article-topbar-more:hover { background: rgba(0, 0, 0, 0.06); }
.article-topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
}
.article-topbar-brand img,
.article-topbar-brand svg { height: 24px; width: auto; }
.article-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}
.article-loading {
  padding: 80px 0;
  text-align: center;
  color: #6b6b6b;
  font-size: 15px;
}
.article-empty {
  padding: 80px 20px;
  text-align: center;
}
.article-empty-icon { font-size: 48px; margin-bottom: 12px; }
.article-empty h2 { font-size: 20px; margin: 0 0 18px; color: #242424; }
.article-meta-top {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b6b6b;
  margin-bottom: 10px;
}
.article-tag {
  font-weight: 800;
  color: #1a8917;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 12px;
}
.article-dot { color: #b3b3b3; }
.article-title {
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0 12px;
  color: #242424;
}
.article-summary {
  font-size: clamp(18px, 2.6vw, 22px);
  line-height: 1.5;
  color: #6b6b6b;
  font-weight: 400;
  margin: 0 0 24px;
}
.article-hero {
  margin: 8px -20px 26px;
  line-height: 0;
}
.article-hero img {
  width: 100%;
  aspect-ratio: 1.91 / 1;
  height: auto;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.article-badge-row { margin: -14px 0 22px; }
.article-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: #f2f2f2;
  color: #444;
  font-size: 12px;
  font-weight: 800;
}
.article-richtext {
  font-size: clamp(18px, 2.4vw, 20px);
  line-height: 1.72;
  color: #242424;
}
.article-richtext p { margin: 0 0 26px; }
.article-richtext h2 { font-size: 26px; font-weight: 800; margin: 34px 0 12px; letter-spacing: -0.01em; }
.article-richtext h3 { font-size: 22px; font-weight: 800; margin: 28px 0 10px; }
.article-richtext img { max-width: 100%; height: auto; border-radius: 6px; margin: 12px 0 26px; display: block; }
.article-richtext ul,
.article-richtext ol { margin: 0 0 26px; padding-left: 26px; }
.article-richtext li { margin: 0 0 8px; }
.article-richtext a { color: #1a8917; text-decoration: underline; }
.article-richtext blockquote {
  margin: 0 0 26px;
  padding: 4px 0 4px 20px;
  border-left: 3px solid #242424;
  color: #6b6b6b;
  font-style: italic;
}
.article-richtext pre {
  margin: 0 0 26px;
  padding: 16px 18px;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 12px;
  overflow-x: auto;
  font-size: 15px;
  line-height: 1.55;
}
.article-richtext pre code { background: none; color: inherit; padding: 0; font-size: inherit; }
.article-richtext code {
  background: #eef2f7;
  color: #be123c;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.88em;
}
.article-richtext hr { border: none; border-top: 1px solid rgba(0, 0, 0, 0.1); margin: 34px 0; }
.article-richtext figure { margin: 0 0 26px; }
.article-richtext figcaption { font-size: 14px; color: #6b6b6b; text-align: center; margin-top: 8px; }
.article-richtext iframe {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  margin: 0 0 26px;
  display: block;
}
.article-cta { margin: 8px 0 4px; }
.article-cta .primary-btn { width: 100%; }
.article-footer {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
/* ---- ฟีดบทความ (การ์ดเรียง) ---- */
.article-feed-title {
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: #242424;
}
.article-feed-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.article-feed-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  text-align: left;
  padding: 22px 0;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: transparent;
  cursor: pointer;
  width: 100%;
}
.article-feed-card:hover h3 { text-decoration: underline; }
.article-feed-thumb {
  flex: 0 0 112px;
  width: 112px;
  height: 112px;
  border-radius: 4px;
  overflow: hidden;
  background: #f2f2f2;
}
.article-feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-feed-copy { flex: 1; min-width: 0; }
.article-feed-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #6b6b6b;
  margin-bottom: 6px;
}
.article-feed-copy h3 {
  font-size: clamp(17px, 2.6vw, 21px);
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 6px;
  color: #242424;
}
.article-feed-copy p {
  font-size: 14px;
  line-height: 1.5;
  color: #6b6b6b;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ปุ่มลิงก์ "อ่านบทความทั้งหมด" ในศูนย์ข่าวสาร */
.notif-feed-link {
  display: inline-block;
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: #1a8917;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.notif-feed-link:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .article-hero { margin-left: -20px; margin-right: -20px; }
  .article-feed-thumb { flex-basis: 84px; width: 84px; height: 84px; }
}