.theme-picker {
  position: relative;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.theme-picker select {
  min-height: 30px;
  max-width: 126px;
  border: 0;
  border-radius: 999px;
  padding: 0 28px 0 11px;
  background: var(--surface-strong);
  color: var(--text);
  outline: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  text-transform: none;
}

html[data-theme="reelgate"] {
  --bg: #020817;
  --surface: rgb(6 17 36 / 90%);
  --surface-strong: rgb(8 22 45 / 96%);
  --surface-soft: rgb(239 211 143 / 6%);
  --line: rgb(216 177 91 / 18%);
  --line-strong: rgb(224 185 98 / 44%);
  --text: #f8f5ed;
  --muted: #aeb8c8;
  --faint: #707d91;
  --blue: #d7ad58;
  --cyan: #f0d58c;
  --violet: #9b6d29;
  --pink: #c99942;
  --gold: #e7bf68;
  --gold-deep: #79501c;
}

html[data-theme="reelgate"] body {
  background:
    radial-gradient(circle at 10% -8%, rgb(33 81 135 / 28%), transparent 30rem),
    radial-gradient(circle at 88% 8%, rgb(184 133 43 / 12%), transparent 28rem),
    linear-gradient(180deg, #07162c 0%, #030b1b 48%, #020714 100%);
}

html[data-theme="reelgate"] body::after {
  background: radial-gradient(ellipse at center, rgb(188 139 52 / 10%), transparent 64%);
}

html[data-theme="reelgate"] .topbar {
  border-bottom-color: rgb(221 181 94 / 17%);
  background: rgb(2 8 23 / 94%);
  box-shadow: 0 14px 38px rgb(0 4 15 / 38%);
}

html[data-theme="reelgate"] .brand__badge {
  display: inline-flex;
  padding: 5px 6px;
  border: 1px solid rgb(228 197 107 / 60%);
  border-radius: 9px;
  background: linear-gradient(180deg, #173a60, #0b1e37);
  box-shadow: inset 0 1px 0 rgb(255 231 180 / 14%);
}

html[data-theme="reelgate"] .brand img {
  filter: brightness(0) invert(0.82) sepia(0.12) hue-rotate(178deg) saturate(1.6);
}

html[data-theme="reelgate"] .btn-primary,
html[data-theme="reelgate"] .auth-form .btn,
html[data-theme="reelgate"] .mobile-dock button {
  border: 1px solid rgb(228 197 107 / 52%);
  background: linear-gradient(180deg, #173a60, #0b1e37);
  color: #f3e6c2;
  text-shadow: none;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgb(255 231 180 / 12%),
    0 8px 22px rgb(0 5 20 / 50%);
}

html[data-theme="reelgate"] .btn-ghost,
html[data-theme="reelgate"] .btn-outline {
  border-color: rgb(218 180 98 / 20%);
  background: rgb(7 20 42 / 78%);
}

html[data-theme="reelgate"] .jackpot-card,
html[data-theme="reelgate"] .casino-hero__content,
html[data-theme="reelgate"] .casino-strip,
html[data-theme="reelgate"] .quick-panel,
html[data-theme="reelgate"] .account-card,
html[data-theme="reelgate"] .game-card {
  border-color: rgb(216 177 91 / 18%);
  background-color: rgb(6 18 38 / 86%);
}

html[data-theme="reelgate"] .jackpot-card--main {
  background:
    radial-gradient(circle at 84% 50%, rgb(225 184 94 / 18%), transparent 15rem),
    linear-gradient(135deg, rgb(202 158 73 / 16%), rgb(7 24 48 / 94%) 58%, rgb(25 23 50 / 92%));
}

html[data-theme="reelgate"] .kicker,
html[data-theme="reelgate"] .promo-badge,
html[data-theme="reelgate"] .casino-hero__eyebrow,
html[data-theme="reelgate"] .lobby-heading p,
html[data-theme="reelgate"] .quick-panel__eyebrow {
  color: #e9c66f;
}

html[data-theme="reelgate"] .slider-dots button.is-active {
  background: linear-gradient(90deg, #f0d58c, #9b6d29);
}

html[data-theme="reelgate"] .promo-slide img {
  content: url("reelgate-casino-banner.png");
  opacity: 1;
  filter: saturate(1.04) contrast(1.03);
  transform: none;
  object-position: center;
}

html[data-theme="reelgate"] .promo-slide::before,
html[data-theme="reelgate"] .promo-slide::after {
  display: none;
}

html[data-theme="reelgate"] .auth-modal__art img {
  content: url("auth-art-reelgate.png");
  object-position: center;
}

html[data-theme="reelgate"] .auth-overlay {
  background:
    linear-gradient(rgb(0 7 22 / 68%), rgb(0 7 22 / 84%)),
    url("reelgate-casino-banner.png") center / cover;
}

html[data-theme="reelgate"] .auth-modal {
  width: min(820px, calc(100vw - 24px));
  border-color: rgb(61 173 255 / 28%);
  background:
    radial-gradient(circle at 8% 0%, rgb(34 83 137 / 24%), transparent 19rem),
    radial-gradient(circle at 100% 100%, rgb(190 139 47 / 16%), transparent 22rem),
    linear-gradient(145deg, #07162b, #071124 58%, #121329);
  box-shadow:
    0 34px 110px rgb(0 4 18 / 76%),
    inset 0 1px 0 rgb(142 218 255 / 16%);
}

html[data-theme="reelgate"] .auth-modal[open] {
  grid-template-columns: .78fr 1fr;
}

html[data-theme="reelgate"] .auth-modal__art {
  min-height: 480px;
  margin: 12px;
  border-color: rgb(54 171 255 / 28%);
  box-shadow:
    inset 0 0 45px rgb(0 0 0 / 32%),
    0 18px 46px rgb(0 4 18 / 32%);
}

html[data-theme="reelgate"] .auth-modal__art img {
  transform: scale(1.18);
  transform-origin: center bottom;
  object-position: center bottom;
  filter: saturate(1.12) contrast(1.04);
}

html[data-theme="reelgate"] .auth-modal__art strong {
  top: 24px;
  left: 24px;
  padding: 9px 12px;
  border-color: rgb(77 185 255 / 34%);
  background: rgb(3 13 31 / 74%);
  color: #dff5ff;
  font-size: 17px;
  letter-spacing: .16em;
  box-shadow: 0 14px 36px rgb(0 0 0 / 28%);
}

html[data-theme="reelgate"] .auth-modal__body {
  padding: 26px;
}

html[data-theme="reelgate"] .auth-modal__body::before {
  width: 240px;
  height: 240px;
  right: -90px;
  top: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(55 178 255 / 20%), transparent 68%);
}

html[data-theme="reelgate"] .auth-modal__body::after {
  background:
    linear-gradient(135deg, rgb(44 178 255 / 10%), transparent 42%),
    linear-gradient(315deg, rgb(99 70 255 / 14%), transparent 48%);
}

html[data-theme="reelgate"] .modal-close {
  border-color: rgb(82 185 255 / 32%);
  background: linear-gradient(135deg, #13314e, #181d3d);
  color: #f4fbff;
  box-shadow: 0 12px 30px rgb(0 5 20 / 42%);
}

html[data-theme="reelgate"] .auth-tabs {
  border-color: rgb(69 174 255 / 22%);
  background: rgb(7 22 43 / 74%);
}

html[data-theme="reelgate"] .auth-tabs button.is-active {
  background: linear-gradient(115deg, #8c6023, #e4c474 52%, #946324);
  color: #071225;
  box-shadow: 0 10px 28px rgb(132 92 27 / 22%);
}

html[data-theme="reelgate"] .auth-form label {
  color: #b9c7dc;
}

html[data-theme="reelgate"] .auth-form input {
  border-color: rgb(68 167 255 / 20%);
  background: rgb(5 15 32 / 78%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

html[data-theme="reelgate"] .auth-form input:focus {
  border-color: rgb(65 181 255 / 68%);
  box-shadow: 0 0 0 3px rgb(42 151 255 / 14%);
}

html[data-theme="reelgate"] .auth-form .btn {
  border-color: rgb(255 235 177 / 28%);
}

html[data-theme="red"] {
  color-scheme: dark;
  --bg: #260200;
  --surface: rgb(66 5 3 / 90%);
  --surface-strong: rgb(84 8 4 / 96%);
  --surface-soft: rgb(255 213 117 / 8%);
  --line: rgb(255 196 75 / 24%);
  --line-strong: rgb(255 202 80 / 58%);
  --text: #fff9ea;
  --muted: #dcbf9b;
  --faint: #9f725b;
  --blue: #ff9e27;
  --cyan: #ffd66d;
  --violet: #bf1d0a;
  --pink: #ff3a21;
  --green: #8ee2a6;
  --gold: #ffd16c;
  --gold-deep: #a84b0c;
  --danger: #ff7b6d;
  --shadow: 0 24px 80px rgb(27 0 0 / 58%);
}

html[data-theme="red"] .auth-modal__art img {
  content: url("auth-art-red.png");
  object-position: center;
}

html[data-theme="red"] .auth-overlay {
  background:
    linear-gradient(rgb(38 0 0 / 72%), rgb(18 0 0 / 88%)),
    url("red-fortune-hero.jpg") center / cover;
}

html[data-theme="red"] .jackpot-card--main::after {
  width: 92px;
  height: 54px;
  background:
    radial-gradient(circle at 21% 66%, #ffe69a 0 8%, #d99012 9% 24%, #6e2604 26% 31%, #f6be43 33% 39%, transparent 41%),
    radial-gradient(circle at 52% 38%, #fff0aa 0 8%, #e1a124 9% 24%, #711f03 26% 31%, #f7c84e 33% 39%, transparent 41%),
    radial-gradient(circle at 80% 68%, #ffd86e 0 8%, #c8750c 9% 24%, #681b02 26% 31%, #eba92c 33% 39%, transparent 41%);
}

html[data-theme="red"] body {
  background:
    radial-gradient(circle at 18% -8%, rgb(255 153 32 / 10%), transparent 30rem),
    radial-gradient(circle at 82% 8%, rgb(215 55 22 / 12%), transparent 34rem),
    linear-gradient(180deg, #420602 0%, #230200 48%, #120100 100%);
}

html[data-theme="red"] body::before {
  background:
    radial-gradient(circle at center, transparent 0 19px, rgb(255 202 80 / 4%) 20px 21px, transparent 22px) 0 0 / 62px 62px,
    linear-gradient(rgb(255 218 130 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 218 130 / 3%) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

html[data-theme="red"] body::after {
  background: radial-gradient(ellipse at center, rgb(255 91 20 / 9%), transparent 64%);
}

html[data-theme="red"] .topbar {
  border-color: rgb(255 202 80 / 28%);
  background: rgb(54 4 2 / 90%);
  box-shadow: 0 12px 40px rgb(20 0 0 / 36%);
}

html[data-theme="red"] .brand img {
  filter: sepia(1) saturate(1.25) hue-rotate(350deg) brightness(1.28);
}

html[data-theme="red"] .brand span {
  color: #ffd77a;
  text-shadow: 0 0 24px rgb(255 172 45 / 28%);
}

html[data-theme="red"] .topnav a:hover,
html[data-theme="red"] .category.is-active,
html[data-theme="red"] .account-nav a:hover {
  background: rgb(255 202 80 / 13%);
  color: #ffe6a4;
}

html[data-theme="red"] .btn-primary {
  color: #3d0c00;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 26%), transparent 42%),
    linear-gradient(135deg, #ffd878, #f09223 56%, #ffbf45);
  box-shadow: 0 14px 34px rgb(255 137 20 / 20%), inset 0 1px 0 rgb(255 255 255 / 42%);
}

html[data-theme="red"] .btn-ghost {
  border-color: rgb(255 202 80 / 30%);
  background: rgb(62 4 2 / 74%);
}

html[data-theme="red"] .jackpot-card,
html[data-theme="red"] .promo-slider,
html[data-theme="red"] .casino-hero__content,
html[data-theme="red"] .casino-strip,
html[data-theme="red"] .quick-panel,
html[data-theme="red"] .account-card,
html[data-theme="red"] .game-card,
html[data-theme="red"] .auth-modal {
  border-color: rgb(255 202 80 / 22%);
  background-color: rgb(57 4 2 / 88%);
  box-shadow: 0 22px 64px rgb(24 0 0 / 38%), inset 0 1px 0 rgb(255 227 153 / 7%);
}

html[data-theme="red"] .jackpot-card--main {
  background:
    radial-gradient(circle at 88% 50%, rgb(255 200 75 / 18%), transparent 20rem),
    linear-gradient(135deg, #760b03, #390200 68%);
}

html[data-theme="red"] .jackpot-card--main strong,
html[data-theme="red"] .kicker,
html[data-theme="red"] .promo-label,
html[data-theme="red"] .game-card p span {
  color: #ffd16c;
}

html[data-theme="red"] .promo-slide::before {
  background:
    linear-gradient(90deg, rgb(50 0 0 / 91%) 0%, rgb(76 5 1 / 66%) 47%, transparent 78%),
    linear-gradient(0deg, rgb(25 0 0 / 88%), transparent 50%);
}

html[data-theme="red"] .casino-hero__content {
  background:
    radial-gradient(circle at 90% 0%, rgb(255 197 69 / 12%), transparent 18rem),
    linear-gradient(145deg, rgb(82 6 3 / 97%), rgb(42 2 1 / 96%));
}

html[data-theme="red"] input,
html[data-theme="red"] select {
  border-color: rgb(255 202 80 / 25%);
  background: rgb(33 1 0 / 78%);
  color: #fff7e5;
}

html[data-theme="red"] .game-card:hover {
  border-color: #f5b83b;
  box-shadow: 0 20px 46px rgb(58 2 0 / 52%);
}

html[data-theme="white"] {
  color-scheme: light;
  --bg: #f7f7fb;
  --surface: rgb(255 255 255 / 92%);
  --surface-strong: #ffffff;
  --surface-soft: rgb(84 46 235 / 5%);
  --line: rgb(36 29 71 / 10%);
  --line-strong: rgb(92 45 238 / 34%);
  --text: #17142a;
  --muted: #69647a;
  --faint: #9691a5;
  --blue: #6540ee;
  --cyan: #8a5cff;
  --violet: #4e20df;
  --pink: #b635e7;
  --green: #159a72;
  --gold: #aa7219;
  --gold-deep: #754a08;
  --danger: #d83f67;
  --shadow: 0 24px 70px rgb(40 26 82 / 10%);
}

html[data-theme="white"] .auth-modal__art img {
  content: url("auth-art-white.png");
  object-position: center;
}

html[data-theme="white"] .auth-overlay {
  background:
    linear-gradient(rgb(248 246 255 / 72%), rgb(239 234 255 / 84%)),
    url("white-luxe-hero.jpg") center / cover;
}

html[data-theme="white"] .jackpot-card--main::after {
  background:
    radial-gradient(ellipse at 22% 70%, #fff 0 8%, #bda7ff 9% 29%, #674ad2 31% 35%, transparent 37%),
    radial-gradient(ellipse at 51% 42%, #fff 0 8%, #e5d7ff 9% 29%, #8b6ee8 31% 35%, transparent 37%),
    radial-gradient(ellipse at 78% 66%, #fff7d2 0 8%, #e7bd55 9% 29%, #98701b 31% 35%, transparent 37%);
}

html[data-theme="white"] body {
  background:
    radial-gradient(circle at 18% -6%, rgb(104 65 239 / 8%), transparent 32rem),
    radial-gradient(circle at 90% 20%, rgb(190 76 237 / 7%), transparent 28rem),
    linear-gradient(180deg, #fff 0%, #f8f7fc 52%, #f2f1f8 100%);
}

html[data-theme="white"] body::before {
  background:
    linear-gradient(rgb(62 45 120 / 3%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(62 45 120 / 3%) 1px, transparent 1px);
}

html[data-theme="white"] body::after {
  background: radial-gradient(ellipse at center, rgb(101 64 238 / 8%), transparent 64%);
}

html[data-theme="white"] .topbar {
  margin: 10px;
  border: 1px solid rgb(30 20 70 / 8%);
  border-radius: 22px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 12px 44px rgb(45 30 91 / 9%);
}

html[data-theme="white"] .brand span {
  color: #17142a;
}

html[data-theme="white"] .brand img {
  filter: hue-rotate(30deg) saturate(1.2);
}

html[data-theme="white"] .btn {
  border-radius: 14px;
}

html[data-theme="white"] .btn-primary {
  color: #fff;
  background: linear-gradient(135deg, #7650f4, #4b1cdf);
  box-shadow: 0 15px 32px rgb(89 49 223 / 22%);
}

html[data-theme="white"] .btn-ghost {
  border-color: rgb(70 52 135 / 15%);
  background: #fff;
  color: #322c4c;
}

html[data-theme="white"] .welcome-chip,
html[data-theme="white"] .balance-chip,
html[data-theme="white"] .theme-picker {
  border-color: rgb(80 54 177 / 12%);
  background: #f8f6ff;
  color: #625c76;
}

html[data-theme="white"] .theme-picker select {
  background: #fff;
  color: #2d2742;
}

html[data-theme="white"] .jackpot-card,
html[data-theme="white"] .casino-hero__content,
html[data-theme="white"] .casino-strip,
html[data-theme="white"] .quick-panel,
html[data-theme="white"] .account-card,
html[data-theme="white"] .game-card {
  border-color: rgb(59 42 119 / 9%);
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 20px 58px rgb(48 33 97 / 8%);
}

html[data-theme="white"] .jackpot-card--main {
  color: #fff;
  background:
    radial-gradient(circle at 86% 48%, rgb(255 208 107 / 18%), transparent 18rem),
    linear-gradient(135deg, #251050, #5b2bd6);
}

html[data-theme="white"] .jackpot-card--main span,
html[data-theme="white"] .jackpot-card--main b {
  color: #dcd2ff;
}

html[data-theme="white"] .promo-slider {
  min-height: 500px;
  border-color: rgb(65 42 146 / 12%);
  background: #fff;
  box-shadow: 0 22px 60px rgb(47 29 95 / 16%);
}

html[data-theme="white"] .promo-slide img {
  content: url("white-luxe-hero.jpg");
  opacity: 1;
  filter: none;
  transform: none;
}

html[data-theme="white"] .promo-slide::before,
html[data-theme="white"] .promo-slide::after {
  display: none;
}

html[data-theme="white"] .promo-slide__shade {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 94%) 32%, rgb(255 255 255 / 30%) 58%, transparent 76%),
    linear-gradient(0deg, rgb(255 255 255 / 54%), transparent 58%);
}

html[data-theme="white"] .promo-slide__content {
  bottom: 76px;
  width: min(510px, calc(100% - 36px));
}

html[data-theme="white"] .promo-slide__content h1,
html[data-theme="white"] .promo-slide__content h2 {
  color: #141025;
  font-size: clamp(36px, 4.5vw, 60px);
  letter-spacing: -.035em;
}

html[data-theme="white"] .promo-slide__content p {
  color: #625c76;
}

html[data-theme="white"] .promo-badge {
  border-color: rgb(103 65 232 / 16%);
  background: rgb(247 244 255 / 88%);
  color: #6035dc;
}

html[data-theme="white"] .slider-controls {
  border-color: rgb(83 52 190 / 12%);
  background: rgb(255 255 255 / 82%);
}

html[data-theme="white"] .slider-controls button {
  background: rgb(83 52 190 / 8%);
  color: #4e28c5;
}

html[data-theme="white"] .slider-dots button {
  background: rgb(69 45 149 / 20%);
}

html[data-theme="white"] .casino-hero__content {
  min-height: 500px;
  background:
    radial-gradient(circle at 100% 0%, rgb(101 64 238 / 9%), transparent 17rem),
    #fff;
}

html[data-theme="white"] .casino-strip span,
html[data-theme="white"] .kicker,
html[data-theme="white"] .promo-label,
html[data-theme="white"] .game-card p span {
  color: #6035dc;
}

html[data-theme="white"] .category-row,
html[data-theme="white"] .account-nav {
  border-color: rgb(65 42 146 / 10%);
  background: rgb(255 255 255 / 80%);
}

html[data-theme="white"] .category,
html[data-theme="white"] .account-nav a {
  color: #655f74;
}

html[data-theme="white"] .category.is-active {
  color: #fff;
  background: linear-gradient(135deg, #7650f4, #4b1cdf);
}

html[data-theme="white"] .btn-link {
  border-color: rgb(83 52 190 / 14%);
  background: #f7f4ff;
  color: #5a30d2;
}

html[data-theme="white"] input,
html[data-theme="white"] select {
  border-color: rgb(64 45 129 / 14%);
  background: #fbfaff;
  color: #211b38;
}

html[data-theme="white"] .game-card:hover {
  border-color: rgb(101 64 238 / 38%);
  box-shadow: 0 22px 52px rgb(72 44 162 / 13%);
}

html[data-theme="white"] .auth-overlay {
  background: rgb(31 22 62 / 38%);
}

html[data-theme="white"] .auth-modal,
html[data-theme="white"] .game-modal {
  border-color: rgb(74 48 169 / 14%);
  background: #fff;
  color: #17142a;
}

html[data-theme="white"] table,
html[data-theme="white"] th,
html[data-theme="white"] td {
  border-color: rgb(60 43 120 / 10%);
}

.red-jackpot-art,
.red-fortune-showcase {
  display: none;
}

html[data-theme="red"] .app-shell {
  width: min(1720px, 100%);
}

html[data-theme="red"] main {
  position: relative;
}

html[data-theme="red"] .topbar {
  min-height: 70px;
  border-bottom: 2px solid #a83a10;
  background:
    linear-gradient(180deg, rgb(104 8 3 / 96%), rgb(49 2 1 / 96%)),
    #410301;
  box-shadow:
    0 12px 40px rgb(20 0 0 / 45%),
    inset 0 -1px 0 rgb(255 204 91 / 42%);
}

html[data-theme="red"] .brand {
  position: relative;
  padding-right: 24px;
}

html[data-theme="red"] .brand::after {
  content: "福";
  order: -1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid #ffd36c;
  border-radius: 50%;
  background: linear-gradient(145deg, #9d1508, #4b0301);
  color: #ffd675;
  font-family: Georgia, serif;
  font-size: 24px;
  box-shadow: 0 0 24px rgb(255 173 45 / 22%);
}

html[data-theme="red"] .brand img {
  display: none;
}

html[data-theme="red"] .brand span {
  letter-spacing: .15em;
}

html[data-theme="red"] .topnav {
  color: #efc989;
}

html[data-theme="red"] .topnav a {
  border-radius: 8px;
}

html[data-theme="red"] .jackpot-bar {
  grid-template-columns: minmax(0, 1.7fr) minmax(160px, .65fr) minmax(160px, .65fr);
}

html[data-theme="red"] .jackpot-card {
  min-height: 58px;
  border: 1px solid #9f3c13;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgb(141 20 7 / 84%), rgb(52 2 1 / 96%));
  box-shadow:
    0 18px 40px rgb(26 0 0 / 38%),
    inset 0 0 0 1px rgb(255 206 92 / 12%);
}

html[data-theme="red"] .jackpot-card--main {
  min-height: 66px;
  padding-right: 150px;
  overflow: hidden;
}

html[data-theme="red"] .jackpot-card--main strong {
  font-family: Georgia, serif;
  font-size: clamp(26px, 3vw, 40px);
  text-shadow: 0 3px 20px rgb(255 185 51 / 28%);
}

html[data-theme="red"] .red-jackpot-art {
  position: absolute;
  z-index: 0;
  top: -45%;
  right: -3%;
  width: 180px;
  height: 210%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: .72;
  mask-image: linear-gradient(90deg, transparent, #000 28%);
}

html[data-theme="red"] .promo-slider {
  min-height: 540px;
  border: 2px solid rgb(255 205 110 / 30%);
  border-radius: 16px;
  box-shadow:
    0 24px 70px rgb(29 0 0 / 54%),
    inset 0 0 0 1px rgb(255 212 100 / 15%);
}

html[data-theme="red"] .promo-slide img {
  content: url("bg-hero.png?v=1");
  opacity: 1;
  filter: saturate(1.05) contrast(1.02);
  transform: none;
  object-position: right center;
}

html[data-theme="red"] .promo-slide::before,
html[data-theme="red"] .promo-slide::after {
  display: none;
}

html[data-theme="red"] .promo-slide__shade {
  background:
    linear-gradient(90deg, rgb(36 0 0 / 94%) 0%, rgb(48 0 0 / 75%) 34%, rgb(48 0 0 / 12%) 68%, rgb(40 0 0 / 8%) 100%),
    linear-gradient(0deg, rgb(35 0 0 / 70%), transparent 50%);
}

html[data-theme="red"] .promo-slide__content {
  bottom: 96px;
  width: min(550px, calc(100% - 36px));
}

html[data-theme="red"] .promo-slide__content h1,
html[data-theme="red"] .promo-slide__content h2 {
  color: #fff0bf;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5vw, 68px);
  line-height: .94;
  text-shadow: 0 4px 22px rgb(39 0 0 / 75%);
}

html[data-theme="red"] .promo-slide__content p {
  color: #f3d6a0;
  font-size: 16px;
  text-shadow: 0 2px 10px rgb(32 0 0 / 80%);
}

html[data-theme="red"] .promo-badge {
  border-color: rgb(255 217 117 / 56%);
  background: rgb(91 4 1 / 74%);
  color: #ffe09a;
}

html[data-theme="red"] .slider-controls {
  border-color: rgb(255 205 92 / 32%);
  background: rgb(63 2 0 / 78%);
}

html[data-theme="red"] .casino-hero {
  grid-template-columns: minmax(0, 2.1fr) minmax(300px, .72fr);
  gap: 14px;
}

html[data-theme="red"] .casino-hero__content {
  position: relative;
  justify-content: center;
  min-height: 540px;
  padding-top: 46px; /* leave room for the PROGRESSIVE JACKPOT label */
  overflow: hidden;
  border: 2px solid rgb(255 205 110 / 30%);
  background:
    linear-gradient(0deg, rgb(42 0 0 / 97%) 0%, rgb(48 1 1 / 90%) 48%, rgb(52 2 1 / 74%) 100%),
    url("red-fortune-dragon.jpg") right 24% / cover no-repeat;
}

html[data-theme="red"] .casino-hero__content .kicker,
html[data-theme="red"] .casino-hero__content h2,
html[data-theme="red"] .casino-hero__content .hero-note {
  text-shadow: 0 2px 12px rgb(20 0 0 / 85%);
}

html[data-theme="red"] .casino-hero__content::before {
  content: "PROGRESSIVE JACKPOT";
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  color: #ffe19b;
  font-family: Georgia, serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
  text-shadow: 0 2px 10px #2a0000;
}

html[data-theme="red"] .casino-hero__content > * {
  position: relative;
  z-index: 1;
}

html[data-theme="red"] .casino-hero__content .kicker {
  margin-top: 0;
}

html[data-theme="red"] .casino-hero__content h2 {
  color: #ffe4a4;
  font-family: Georgia, serif;
}

html[data-theme="red"] .hero-note {
  color: #eac894;
}

html[data-theme="red"] .hero-stats {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

html[data-theme="red"] .hero-stats div {
  border-color: rgb(255 210 104 / 22%);
  background: rgb(73 4 1 / 70%);
}

html[data-theme="red"] .casino-strip {
  border: 1px solid #9f3c13;
  background:
    linear-gradient(180deg, rgb(116 12 4 / 92%), rgb(56 2 1 / 95%));
}

html[data-theme="red"] .casino-strip > div {
  border-color: rgb(255 205 91 / 18%);
}

html[data-theme="red"] .red-fortune-showcase {
  display: grid;
  grid-template-columns: minmax(280px, 1.3fr) minmax(220px, .8fr) minmax(220px, .8fr);
  gap: 12px;
  margin: 14px 0;
}

html[data-theme="red"] .red-fortune-showcase article {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border: 1px solid rgb(255 205 110 / 30%);
  border-radius: 14px;
  background:
    radial-gradient(circle at 80% 10%, rgb(255 191 58 / 18%), transparent 16rem),
    linear-gradient(145deg, #861106, #3a0201 72%);
  box-shadow: 0 20px 48px rgb(25 0 0 / 38%), inset 0 0 0 1px rgb(255 218 116 / 8%);
}

html[data-theme="red"] .red-fortune-vip {
  display: flex;
  align-items: end;
  padding: 24px 24px 24px 48%;
}

html[data-theme="red"] .red-fortune-vip img {
  position: absolute;
  inset: 0 auto 0 0;
  width: 52%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  mask-image: linear-gradient(90deg, #000 70%, transparent);
}

html[data-theme="red"] .red-fortune-vip div,
html[data-theme="red"] .red-fortune-promo,
html[data-theme="red"] .red-fortune-tournament {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

html[data-theme="red"] .red-fortune-promo,
html[data-theme="red"] .red-fortune-tournament {
  padding: 24px;
}

html[data-theme="red"] .red-fortune-showcase span {
  color: #ffd575;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html[data-theme="red"] .red-fortune-showcase strong {
  margin: 8px 0;
  color: #fff1bd;
  font-family: Georgia, serif;
  font-size: clamp(26px, 3vw, 42px);
  line-height: 1;
}

html[data-theme="red"] .red-fortune-showcase small,
html[data-theme="red"] .red-fortune-showcase p {
  margin: 0 0 16px;
  color: #e4c28e;
  line-height: 1.45;
}

html[data-theme="red"] .red-fortune-promo::after {
  content: "福";
  position: absolute;
  right: 18px;
  bottom: -22px;
  color: rgb(255 212 105 / 10%);
  font-family: Georgia, serif;
  font-size: 150px;
  line-height: 1;
}

html[data-theme="red"] .red-fortune-tournament {
  background:
    radial-gradient(circle at 75% 70%, rgb(255 192 53 / 28%), transparent 9rem),
    linear-gradient(145deg, #7c0b03, #350101 75%);
}

html[data-theme="red"] .section-bar h2,
html[data-theme="red"] .card-head h2 {
  color: #ffe5a6;
  font-family: Georgia, serif;
}

html[data-theme="red"] .category-row {
  border: 1px solid #8d310f;
  border-radius: 12px;
  background: linear-gradient(180deg, #670701, #330100);
}

html[data-theme="red"] .category {
  color: #ddb77f;
}

html[data-theme="red"] .category.is-active {
  color: #421000;
  background: linear-gradient(180deg, #ffe08b, #e98a22);
}

html[data-theme="red"] .game-card {
  border: 1px solid #8f310f;
  background:
    linear-gradient(180deg, rgb(124 13 5 / 82%), rgb(45 2 1 / 96%));
}

html[data-theme="red"] .game-card__media {
  border-bottom: 1px solid rgb(255 200 75 / 24%);
}

html[data-theme="red"] .game-card__media img {
  filter: saturate(1.12) contrast(1.05);
}

html[data-theme="red"] .game-card h3 {
  color: #fff0bf;
}

@media (max-width: 1080px) {
  .theme-picker span {
    display: none;
  }

  .theme-picker {
    padding-left: 7px;
  }

  html[data-theme="red"] .casino-hero {
    grid-template-columns: 1fr;
  }

  html[data-theme="red"] .casino-hero__content {
    min-height: 400px;
    background-position: center 38%;
  }

  html[data-theme="red"] .casino-hero__content .kicker {
    margin-top: 190px;
  }

  html[data-theme="red"] .red-fortune-showcase {
    grid-template-columns: 1.4fr 1fr;
  }

  html[data-theme="red"] .red-fortune-tournament {
    grid-column: 1 / -1;
    min-height: 180px;
  }
}

@media (max-width: 760px) {
  .topbar {
    grid-template-columns: auto 1fr;
  }

  .theme-picker {
    order: -1;
  }

  .theme-picker select {
    max-width: 106px;
    padding-left: 8px;
    font-size: 11px;
  }

  html[data-theme="white"] .topbar {
    margin: 6px;
    border-radius: 17px;
  }

  html[data-theme="red"] .topbar {
    min-height: 68px;
  }

  html[data-theme="red"] .brand::after {
    width: 36px;
    height: 36px;
    font-size: 20px;
  }

  html[data-theme="red"] .jackpot-bar {
    grid-template-columns: 1fr 1fr;
  }

  html[data-theme="red"] .jackpot-card--main {
    grid-column: 1 / -1;
    padding-right: 125px;
  }

  html[data-theme="red"] .red-jackpot-art {
    width: 150px;
  }

  html[data-theme="red"] .promo-slider {
    min-height: 500px;
  }

  html[data-theme="red"] .promo-slide__content {
    bottom: 82px;
  }

  html[data-theme="red"] .red-fortune-showcase {
    grid-template-columns: 1fr;
  }

  html[data-theme="red"] .red-fortune-tournament {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .theme-picker {
    position: fixed;
    right: 10px;
    bottom: 72px;
    z-index: 40;
    min-height: 38px;
    padding: 4px;
    box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
  }

  html[data-theme="red"] main {
    padding-inline: 8px;
  }

  html[data-theme="red"] .promo-slider {
    min-height: 540px;
  }

  html[data-theme="red"] .promo-slide img {
    object-position: 66% center;
  }

  html[data-theme="red"] .promo-slide__shade {
    background:
      linear-gradient(0deg, rgb(38 0 0 / 96%) 0%, rgb(44 0 0 / 68%) 62%, rgb(44 0 0 / 12%) 100%);
  }

  html[data-theme="red"] .promo-slide__content {
    left: 18px;
    bottom: 78px;
  }

  html[data-theme="red"] .promo-slide__content h1,
  html[data-theme="red"] .promo-slide__content h2 {
    font-size: 38px;
  }

  html[data-theme="red"] .casino-hero__content {
    min-height: 460px;
  }

  html[data-theme="red"] .red-fortune-vip {
    min-height: 330px;
    padding: 190px 18px 20px;
  }

  html[data-theme="red"] .red-fortune-vip img {
    width: 100%;
    height: 72%;
    mask-image: linear-gradient(180deg, #000 65%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after {
    transition-duration: .01ms !important;
  }
}

html[data-theme="red"] .welcome-bonus-card {
  border-color: rgb(255 201 97 / 42%);
  background:
    radial-gradient(circle at 12% 18%, rgb(255 225 132 / 34%), transparent 34%),
    radial-gradient(circle at 92% 26%, rgb(255 190 79 / 20%), transparent 30%),
    linear-gradient(135deg, rgb(92 7 5 / 92%), rgb(147 17 13 / 88) 56%, rgb(58 0 0 / 92%));
  box-shadow:
    0 22px 42px rgb(44 0 0 / 32%),
    inset 0 1px 0 rgb(255 231 152 / 18%);
}

html[data-theme="red"] .welcome-bonus-card__visual {
  border-color: rgb(255 213 105 / 56%);
  background:
    radial-gradient(circle at 50% 30%, rgb(255 226 132 / 54%), transparent 42%),
    linear-gradient(160deg, #7c0703, #d92717);
}

html[data-theme="red"] .welcome-bonus-card__body strong {
  color: #ffe19b;
}

html[data-theme="red"] .welcome-bonus-card__body p {
  color: rgb(255 231 197 / 78%);
}

html[data-theme="white"] .welcome-bonus-card {
  border-color: rgb(211 151 60 / 30%);
  background:
    radial-gradient(circle at 14% 18%, rgb(255 218 118 / 36%), transparent 35%),
    linear-gradient(135deg, rgb(255 250 241 / 94%), rgb(255 238 211 / 90) 46%, rgb(239 248 255 / 92));
  box-shadow:
    0 18px 34px rgb(126 84 43 / 13%),
    inset 0 1px 0 rgb(255 255 255 / 86%);
}

html[data-theme="white"] .welcome-bonus-card__visual {
  border-color: rgb(188 71 47 / 26%);
  background:
    radial-gradient(circle at 50% 30%, rgb(255 220 121 / 56%), transparent 42%),
    linear-gradient(160deg, #b91913, #f06b31);
}

html[data-theme="white"] .welcome-bonus-card__body strong {
  color: #a52a21;
}

html[data-theme="white"] .welcome-bonus-card__body p {
  color: #654a3f;
}

/* --- Toast: themed (base .toast is dark-navy for blue; adapt for white/red) --- */
html[data-theme="white"] .toast {
  border-color: rgb(101 64 238 / 22%);
  background: linear-gradient(135deg, #ffffff, #f2eeff);
  color: #2a2350;
  box-shadow: 0 16px 44px rgb(80 60 160 / 20%);
}

html[data-theme="red"] .toast {
  border-color: rgb(255 204 91 / 42%);
  background: linear-gradient(135deg, #6d0803, #3a0201);
  color: #ffe6b0;
  box-shadow: 0 16px 44px rgb(20 0 0 / 48%);
}

/* --- White theme: keep "Scale the pool" legible over the coin motif --- */
html[data-theme="white"] .jackpot-card--main::after {
  opacity: .38;
}

html[data-theme="white"] .jackpot-card--main span,
html[data-theme="white"] .jackpot-card--main b {
  color: #f4f0ff;
  text-shadow: 0 1px 6px rgb(24 10 64 / 55%);
}

/* White theme: form messages were near-white text on a light card (unreadable) */
html[data-theme="white"] .form-message[data-kind="success"] {
  border-color: rgb(22 130 90 / 32%);
  background: rgb(22 130 90 / 10%);
  color: #0f6b46;
}
html[data-theme="white"] .form-message[data-kind="error"] {
  border-color: rgb(179 38 30 / 32%);
  background: rgb(179 38 30 / 8%);
  color: #b3261e;
}

/* ============================================================
   RED THEME — YUWA-style Asian casino layout
   Scoped to html[data-theme="red"]; white / reelgate untouched.
   New blocks are hidden by default so other themes never show them.
   ============================================================ */
.asian-rail,
.asian-right,
.asian-trust { display: none; }

/* ---------- Ornate gold frames around every game (all widths) ---------- */
html[data-theme="red"] .game-card {
  border: 2px solid transparent;
  border-radius: 15px;
  background:
    linear-gradient(180deg, rgb(120 12 4 / 92%), rgb(41 2 1 / 98%)) padding-box,
    linear-gradient(150deg, #ffedb4 0%, #e5992f 30%, #8a4410 56%, #ffd271 100%) border-box;
  box-shadow: 0 16px 40px rgb(18 0 0 / 42%), inset 0 0 0 1px rgb(46 2 1 / 80%);
}
html[data-theme="red"] .game-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: 3;
  pointer-events: none;
  border-radius: 10px;
  background:
    linear-gradient(#ffdf8f, #ffdf8f) left 2px top 2px / 13px 2px no-repeat,
    linear-gradient(#ffdf8f, #ffdf8f) left 2px top 2px / 2px 13px no-repeat,
    linear-gradient(#ffdf8f, #ffdf8f) right 2px top 2px / 13px 2px no-repeat,
    linear-gradient(#ffdf8f, #ffdf8f) right 2px top 2px / 2px 13px no-repeat,
    linear-gradient(#ffdf8f, #ffdf8f) left 2px bottom 2px / 13px 2px no-repeat,
    linear-gradient(#ffdf8f, #ffdf8f) left 2px bottom 2px / 2px 13px no-repeat,
    linear-gradient(#ffdf8f, #ffdf8f) right 2px bottom 2px / 13px 2px no-repeat,
    linear-gradient(#ffdf8f, #ffdf8f) right 2px bottom 2px / 2px 13px no-repeat;
  opacity: .85;
}
html[data-theme="red"] .game-card__media {
  border-bottom: 1px solid rgb(255 210 110 / 45%);
}
html[data-theme="red"] .game-card:hover {
  border-color: transparent;
  box-shadow: 0 22px 52px rgb(40 2 0 / 55%), 0 0 0 1px rgb(255 214 108 / 55%);
}
html[data-theme="red"] .game-card:hover::before { opacity: 1; }
html[data-theme="red"] .games-grid {
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
}

/* ---------- Category chips → YUWA gold pills ---------- */
html[data-theme="red"] .category {
  border: 1px solid rgb(255 202 80 / 34%);
  border-radius: 12px;
  background: linear-gradient(180deg, rgb(120 12 4 / 78%), rgb(60 4 2 / 90%));
  color: #f1cd93;
  box-shadow: inset 0 1px 0 rgb(255 224 150 / 12%);
}
html[data-theme="red"] .category.is-active {
  color: #3d0c00;
  border-color: #ffd066;
  background: linear-gradient(180deg, #ffe49a, #ee9a26);
  box-shadow: 0 8px 22px rgb(238 154 38 / 30%);
}

/* ============================================================
   LEFT SIDEBAR RAIL (desktop >= 1081)
   ============================================================ */
@media (min-width: 1081px) {
  html[data-theme="red"] .app-shell {
    width: auto;
    max-width: none;
    margin-left: 282px;
    margin-right: 0;
  }
  html[data-theme="red"] .topbar > .brand { display: none; } /* brand lives in the rail */

  html[data-theme="red"] .asian-rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: fixed;
    top: 0;
    left: 0;
    bottom: auto;              /* hug the content instead of stretching full height */
    max-height: 100vh;
    width: 270px;
    box-sizing: border-box;
    z-index: 25;
    padding: 10px 14px 12px;
    /* logo sits on the bare red bg; the thin gold frame wraps only menu..VIP below */
    border: 0;
    border-right: 1px solid rgb(255 205 92 / 22%);
    background:
      radial-gradient(120% 20% at 50% 0%, rgb(255 135 46 / 20%), transparent 60%),
      linear-gradient(180deg, #6c0803 0%, #4a0201 55%, #2f0100 100%);
    box-shadow: 16px 0 42px rgb(12 0 0 / 48%);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgb(255 200 90 / 40%) transparent;
  }
  html[data-theme="red"] .asian-rail__brand { margin-top: 2px; }
  html[data-theme="red"] .asian-rail::-webkit-scrollbar { width: 6px; }
  html[data-theme="red"] .asian-rail::-webkit-scrollbar-thumb {
    background: rgb(255 200 90 / 35%); border-radius: 6px;
  }

  html[data-theme="red"] .asian-rail__brand {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 4px 6px 10px;
    margin-bottom: 8px;
    text-decoration: none;
  }

  /* Thin gentle gold frame around menu + VIP + cat (starts below the logo).
     Top of the frame = real art strip (arch ornament + corner curls). */
  html[data-theme="red"] .asian-rail__frame {
    position: relative;
    flex: 0 0 auto; /* natural height — no stretched emptiness on tall screens */
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 46px 9px 0;
    border: 1px solid rgb(214 160 70 / 78%);
    border-radius: 15px;
    box-shadow:
      inset 0 0 0 2px rgb(64 5 2 / 75%),
      0 10px 26px rgb(12 0 0 / 30%);
    background:
      radial-gradient(90% 26% at 50% 0%, rgb(255 150 55 / 10%), transparent 70%),
      linear-gradient(180deg, #7a0e06, #4a0201 60%, #300100);
    overflow: hidden;
  }
  html[data-theme="red"] .asian-rail__frame::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    aspect-ratio: 946 / 190;
    background: url("sidebar-frame-top.png?v=1") center top / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }
  html[data-theme="red"] .asian-rail__fu {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border: 2px solid #ffd36c;
    border-radius: 13px;
    background: linear-gradient(150deg, #b3160a, #560201);
    color: #ffd979;
    font: 700 26px/1 Georgia, serif;
    box-shadow: 0 0 22px rgb(255 176 48 / 30%), inset 0 1px 0 rgb(255 236 180 / 30%);
  }
  html[data-theme="red"] .asian-rail__brand-text {
    display: flex;
    flex-direction: column;
    color: #ffe6a8;
    font: 800 19px/1.05 "Inter", sans-serif;
    letter-spacing: .12em;
  }
  html[data-theme="red"] .asian-rail__brand-text small {
    margin-top: 3px;
    color: #d79a63;
    font-size: 11px;
    letter-spacing: .3em;
    font-weight: 600;
  }

  html[data-theme="red"] .asian-rail__nav {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  html[data-theme="red"] .asian-rail__nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #e9c290;
    text-decoration: none;
    font-weight: 700;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
  }
  html[data-theme="red"] .asian-rail__ic {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    color: #ffcf72;
  }
  html[data-theme="red"] .asian-rail__ic svg { width: 21px; height: 21px; }
  html[data-theme="red"] .asian-rail__lbl {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
    font-size: 14.5px;
  }
  html[data-theme="red"] .asian-rail__lbl small {
    margin-top: 2px;
    color: #b07a54;
    font-size: 10px;
    letter-spacing: .18em;
    font-weight: 600;
  }
  html[data-theme="red"] .asian-rail__chev {
    margin-left: auto;
    color: rgb(255 205 120 / 45%);
    font-size: 18px;
    font-weight: 700;
  }
  html[data-theme="red"] .asian-rail__nav a:hover {
    border-color: rgb(255 205 92 / 26%);
    background: rgb(255 200 90 / 9%);
    color: #ffe6a8;
  }
  html[data-theme="red"] .asian-rail__nav a.is-active {
    color: #47110a;
    background: linear-gradient(180deg, #ffe6a0, #ef9c27);
    border-color: #ffd873;
    box-shadow: 0 10px 26px rgb(230 140 30 / 32%), inset 0 1px 0 rgb(255 255 255 / 45%);
  }
  html[data-theme="red"] .asian-rail__nav a.is-active .asian-rail__ic,
  html[data-theme="red"] .asian-rail__nav a.is-active .asian-rail__chev { color: #6b1c04; }
  html[data-theme="red"] .asian-rail__nav a.is-active .asian-rail__lbl small { color: rgb(90 30 6 / 75%); }

  html[data-theme="red"] .asian-rail__mascot {
    margin-top: 18px;
    padding-top: 12px;
    text-align: center;
  }
  html[data-theme="red"] .asian-rail__mascot img {
    width: 78%;
    max-width: 170px;
    filter: drop-shadow(0 12px 22px rgb(0 0 0 / 45%));
    -webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 62%, transparent 92%);
    mask-image: radial-gradient(120% 100% at 50% 30%, #000 62%, transparent 92%);
  }

  html[data-theme="red"] .asian-rail__vip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 6px;
    padding: 14px 15px 15px;
    border: 1px solid rgb(255 205 92 / 34%);
    border-radius: 15px;
    text-align: center;
    text-decoration: none;
    background:
      radial-gradient(80% 60% at 50% 0%, rgb(255 190 70 / 20%), transparent 70%),
      linear-gradient(160deg, #7c0b03, #3a0101);
    box-shadow: 0 16px 34px rgb(18 0 0 / 44%), inset 0 1px 0 rgb(255 230 150 / 14%);
  }
  html[data-theme="red"] .asian-rail__vip-kicker {
    color: #ffd575;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
  }
  html[data-theme="red"] .asian-rail__vip strong {
    color: #fff1bd;
    font: 800 17px/1.1 Georgia, serif;
  }
  html[data-theme="red"] .asian-rail__vip-level { color: #e9c28e; font-size: 11px; }
  html[data-theme="red"] .asian-rail__vip-level b { color: #ffe19b; }
  html[data-theme="red"] .asian-rail__vip-bar {
    height: 7px;
    margin: 5px 0 3px;
    border-radius: 999px;
    background: rgb(0 0 0 / 38%);
    overflow: hidden;
  }
  html[data-theme="red"] .asian-rail__vip-bar i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffe08b, #ee8a22);
  }
  html[data-theme="red"] .asian-rail__vip-xp { color: #c79a6e; font-size: 10.5px; letter-spacing: .04em; }
  html[data-theme="red"] .asian-rail__vip-btn {
    margin-top: 9px;
    padding: 9px 12px;
    border-radius: 11px;
    color: #47110a;
    font-weight: 800;
    font-size: 13px;
    background: linear-gradient(180deg, #ffe49a, #ee9a26);
    box-shadow: 0 8px 20px rgb(230 140 30 / 30%);
  }
  html[data-theme="red"] .asian-rail__tassel {
    display: block;
    width: 2px;
    height: 30px;
    margin: 12px auto 2px;
    background: linear-gradient(#ffd066, transparent);
    position: relative;
  }
  html[data-theme="red"] .asian-rail__tassel::before {
    content: "福";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid #ffd36c;
    background: radial-gradient(circle, #d21a0a, #6a0201);
    color: #ffe08a;
    font: 700 13px/1 Georgia, serif;
    box-shadow: 0 6px 16px rgb(0 0 0 / 45%);
  }

  /* Center column: keep the YUWA flow (hero -> categories -> games) */
  html[data-theme="red"] .jackpot-bar,
  html[data-theme="red"] .casino-strip,
  html[data-theme="red"] .red-fortune-showcase,
  html[data-theme="red"] .casino-hero__content { display: none; }
  html[data-theme="red"] .casino-hero { grid-template-columns: 1fr; }
  html[data-theme="red"] .promo-slider { min-height: 500px; }
  html[data-theme="red"] .promo-slide__content {
    bottom: 60px;
    top: 60px;
    justify-content: center;
    width: min(560px, calc(100% - 40px));
  }
  html[data-theme="red"] .promo-slide__content h1,
  html[data-theme="red"] .promo-slide__content h2 {
    font-size: clamp(30px, 3.1vw, 46px);
    line-height: 1.02;
  }

  /* Bottom trust bar */
  html[data-theme="red"] .asian-trust {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding: 16px 18px;
    border: 1px solid #9f3c13;
    border-radius: 14px;
    background: linear-gradient(180deg, rgb(116 12 4 / 92%), rgb(56 2 1 / 95%));
    box-shadow: 0 16px 40px rgb(18 0 0 / 34%);
  }
  html[data-theme="red"] .asian-trust > div {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  html[data-theme="red"] .asian-trust > div + div { border-left: 1px solid rgb(255 205 91 / 16%); padding-left: 12px; }
  html[data-theme="red"] .asian-trust__ic {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: none;
    border: 1px solid rgb(255 205 92 / 40%);
    border-radius: 12px;
    color: #ffcf72;
    background: rgb(0 0 0 / 22%);
  }
  html[data-theme="red"] .asian-trust__ic svg { width: 22px; height: 22px; }
  html[data-theme="red"] .asian-trust strong { display: block; color: #ffe6a8; font-size: 14px; }
  html[data-theme="red"] .asian-trust small { color: #d0a374; font-size: 11.5px; }
}

/* ============================================================
   RIGHT RAIL (desktop >= 1280)
   ============================================================ */
@media (min-width: 1280px) {
  html[data-theme="red"] main { margin-right: 336px; }

  html[data-theme="red"] .asian-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* part of the page (scrolls with the games), not pinned to the screen */
    position: absolute;
    top: 84px;
    right: 16px;
    width: 306px;
    z-index: 15;
    padding-right: 2px;
  }
  html[data-theme="red"] .asian-right::-webkit-scrollbar { width: 6px; }
  html[data-theme="red"] .asian-right::-webkit-scrollbar-thumb { background: rgb(255 200 90 / 32%); border-radius: 6px; }

  html[data-theme="red"] .asian-right > div {
    position: relative;
    flex: none;
    overflow: hidden;
    border: 1px solid rgb(255 202 80 / 30%);
    border-radius: 16px;
    padding: 16px;
    background: linear-gradient(160deg, rgb(124 13 5 / 94%), rgb(45 2 1 / 97%));
    box-shadow: 0 16px 40px rgb(16 0 0 / 40%), inset 0 1px 0 rgb(255 227 153 / 10%);
  }
  html[data-theme="red"] .asian-right__cap {
    display: block;
    color: #ffd575;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-align: center;
  }

  /* Jackpot card */
  html[data-theme="red"] .asian-right__jackpot { text-align: center; padding-bottom: 18px; }
  html[data-theme="red"] .asian-right__jp-value {
    display: block;
    margin: 6px 0 4px;
    color: #ffe9b0;
    font: 800 27px/1 Georgia, serif;
    text-shadow: 0 3px 18px rgb(255 176 48 / 30%);
  }
  html[data-theme="red"] .asian-right__dragon {
    width: 150px;
    height: 150px;
    margin: 2px auto 6px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 10px 22px rgb(0 0 0 / 45%));
  }
  html[data-theme="red"] .asian-right__timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 14px;
  }
  html[data-theme="red"] .asian-right__timer span {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
    padding: 7px 4px;
    border: 1px solid rgb(255 205 92 / 34%);
    border-radius: 10px;
    background: rgb(0 0 0 / 30%);
  }
  html[data-theme="red"] .asian-right__timer b { color: #ffe6a8; font: 800 20px/1 Georgia, serif; }
  html[data-theme="red"] .asian-right__timer small { color: #c79a6e; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
  html[data-theme="red"] .asian-right__timer i { color: #ffcf72; font-style: normal; font-weight: 800; }

  html[data-theme="red"] .asian-right__btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    padding: 12px;
    border-radius: 12px;
    color: #47110a;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(180deg, #ffe49a, #ee9a26);
    box-shadow: 0 10px 24px rgb(230 140 30 / 32%), inset 0 1px 0 rgb(255 255 255 / 45%);
  }
  html[data-theme="red"] .asian-right__btn--sm { padding: 9px 12px; font-size: 13px; }
  html[data-theme="red"] .asian-right__btn--ghost {
    color: #ffdf9a;
    background: rgb(255 200 90 / 10%);
    border: 1px solid rgb(255 205 92 / 32%);
    box-shadow: none;
  }

  /* Red envelope */
  html[data-theme="red"] .asian-right__envelope {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  html[data-theme="red"] .asian-right__env-body { flex: 1; }
  html[data-theme="red"] .asian-right__env-body .asian-right__cap { text-align: left; }
  html[data-theme="red"] .asian-right__env-body > small { display: block; color: #e0b488; font-size: 11px; margin: 3px 0 4px; }
  html[data-theme="red"] .asian-right__env-body strong { display: block; color: #ffe6a8; font: 800 15px/1 "Inter", sans-serif; margin-bottom: 10px; }
  html[data-theme="red"] .asian-right__env-body strong b { color: #ffce5f; font-size: 30px; font-family: Georgia, serif; }
  html[data-theme="red"] .asian-right__envelope img {
    width: 132px;
    height: 116px;
    margin: -6px -6px -10px 0;
    object-fit: contain;
    flex: none;
    filter: drop-shadow(0 10px 18px rgb(0 0 0 / 45%));
  }

  /* Tournament */
  html[data-theme="red"] .asian-right__tournament { text-align: center; }
  html[data-theme="red"] .asian-right__tournament .asian-right__cap { margin-bottom: 6px; }
  html[data-theme="red"] .asian-right__tournament > small { display: block; color: #d0a374; font-size: 11px; }
  html[data-theme="red"] .asian-right__tournament strong { display: block; color: #ffe9b0; font: 800 24px/1.1 Georgia, serif; margin: 3px 0; }
  html[data-theme="red"] .asian-right__t-left { color: #e0b488 !important; margin-bottom: 12px; }
  html[data-theme="red"] .asian-right__live {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff4f3a, #c01507);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    box-shadow: 0 4px 12px rgb(200 20 5 / 45%);
  }

  /* Winners */
  html[data-theme="red"] .asian-right__winners ol {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  html[data-theme="red"] .asian-right__winners li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #f2d5a8;
    padding: 7px 10px;
    border-radius: 10px;
    background: rgb(0 0 0 / 26%);
    border: 1px solid rgb(255 205 92 / 14%);
  }
  html[data-theme="red"] .asian-right__winners i {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 8px;
    background: linear-gradient(160deg, #ffe08b, #ee9a26);
    color: #47110a;
    font: 800 12px/1 "Inter", sans-serif;
    font-style: normal;
  }
  html[data-theme="red"] .asian-right__winners li span { flex: 1; font-weight: 700; }
  html[data-theme="red"] .asian-right__winners li b { color: #ffd884; font-weight: 800; }
}

/* ---------- Top nav icons (YUWA-style): icon above label, red only ---------- */
/* Hidden by default so white / blue keep their existing text-only top nav. */
.topnav .nav-ic { display: none; }

html[data-theme="red"] .topnav { gap: 2px; align-items: stretch; }
html[data-theme="red"] .topnav a {
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 52px;
  padding: 5px 13px;
  border-radius: 12px;
  color: #e7c187;
  font-size: 12px;
  font-weight: 700;
}
html[data-theme="red"] .topnav .nav-ic {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #ffcf72;
}
html[data-theme="red"] .topnav .nav-ic svg { width: 22px; height: 22px; }
html[data-theme="red"] .topnav a:hover,
html[data-theme="red"] .topnav a.is-active {
  background: rgb(255 200 90 / 10%);
  color: #ffe7ab;
}
html[data-theme="red"] .topnav a:hover .nav-ic,
html[data-theme="red"] .topnav a.is-active .nav-ic { color: #ffe7ab; }

/* ---------- Ornate gold game-card frame: double line + ornamental corners (YUWA/LUCKY PANDA) ---------- */
/* Game tile like the mockup: ornate frame hugs the ART only; text/buttons sit below */
html[data-theme="red"] .game-card {
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
html[data-theme="red"] .game-card::before { display: none; }
html[data-theme="red"] .games-grid {
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
}
html[data-theme="red"] .game-card__body { padding: 8px 4px 2px; }
html[data-theme="red"] .game-card h3 { min-height: 0; font-size: 13.5px; }
html[data-theme="red"] .game-card__actions .btn { min-height: 32px; }
html[data-theme="red"] .game-card__body p { display: none; } /* mockup cards have no tag chips row */
/* long game names: one line + ellipsis so rows stay aligned */
html[data-theme="red"] .game-card h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme="red"] .game-card::before { display: none; }
html[data-theme="red"] .game-card:hover {
  box-shadow: 0 20px 46px rgb(40 2 0 / 55%), 0 0 0 1px rgb(255 214 108 / 35%);
}

/* ===== More "азиатчина": frames on right-rail cards + blend the art into backgrounds ===== */
@media (min-width: 1280px) {
  /* One delicate frame for every rail card — thin gold line like the sidebar */
  html[data-theme="red"] .asian-right > div {
    border: 1px solid rgb(214 160 70 / 78%);
    border-radius: 16px;
    padding: 16px;
    background:
      radial-gradient(120% 85% at 50% 0%, rgb(255 145 45 / 24%), rgb(0 0 0 / 0) 60%) padding-box,
      linear-gradient(160deg, #a91409, #660803) padding-box;
    box-shadow:
      inset 0 0 0 2px rgb(64 5 2 / 75%),
      inset 0 0 0 3px rgb(255 208 102 / 26%),
      0 16px 40px rgb(16 0 0 / 40%);
  }

  /* Jackpot dragon: glowing medallion halo behind + fade edges so it sits in the scene */
  html[data-theme="red"] .asian-right__jackpot { position: relative; }
  html[data-theme="red"] .asian-right__jackpot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 66px;
    width: 168px;
    height: 168px;
    transform: translateX(-50%);
    border-radius: 50%;
    background:
      radial-gradient(circle, rgb(255 170 55 / 34%) 0 38%, rgb(200 60 10 / 22%) 52%, transparent 70%);
    box-shadow: inset 0 0 0 1px rgb(255 205 92 / 30%);
    pointer-events: none;
  }
  html[data-theme="red"] .asian-right__dragon {
    position: relative;
    z-index: 1;
    -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 92%);
    mask-image: radial-gradient(closest-side, #000 60%, transparent 92%);
  }
}

/* ===== Sidebar mascot: transparent maneki-neko cutout sits directly on the red bg (like the mockup) ===== */
@media (min-width: 1081px) {
  html[data-theme="red"] .asian-rail__mascot {
    flex: none;              /* don't let the sidebar flex-shrink & clip the cat */
    margin-top: auto;
    padding: 8px 6px 2px;
    text-align: center;
    overflow: visible;
  }
  html[data-theme="red"] .asian-rail__vip,
  html[data-theme="red"] .asian-rail__brand { flex: none; }
  html[data-theme="red"] .asian-rail__mascot img {
    display: block;
    width: 86%;
    height: auto;
    max-width: 182px;
    margin: 0 auto;
    object-fit: contain;
    transform: none;
    filter: drop-shadow(0 10px 18px rgb(35 0 0 / 55%));
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Category chips with icons (YUWA-style) — red only ---------- */
.category .cat-ic { display: none; } /* hidden for white/blue: they keep text pills */

html[data-theme="red"] .category-row { gap: 8px; }
html[data-theme="red"] .category {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-height: auto;
  padding: 9px 15px;
  border-radius: 14px;
  line-height: 1.1;
}
html[data-theme="red"] .category .cat-ic {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: #ffcf72;
}
html[data-theme="red"] .category .cat-ic svg { width: 23px; height: 23px; }
html[data-theme="red"] .category.is-active .cat-ic { color: #5a1602; }

/* Tactile press feedback on right-rail buttons */
@media (min-width: 1280px) {
  html[data-theme="red"] .asian-right__btn { transition: transform .08s ease, filter .12s ease; }
  html[data-theme="red"] .asian-right__btn:hover { filter: brightness(1.04); }
  html[data-theme="red"] .asian-right__btn:active { transform: translateY(1px) scale(.985); filter: brightness(.93); }
}

/* ===== Right-rail cards: real art backgrounds (Andrey's mockup) ===== */
@media (min-width: 1280px) {
  /* Jackpot: golden dragon fills the whole block */
  html[data-theme="red"] .asian-right > .asian-right__jackpot {
    min-height: 430px;
    padding-bottom: 18px;
    background:
      linear-gradient(0deg, rgb(26 1 0 / 86%) 0%, rgb(26 1 0 / 22%) 40%, transparent 62%) padding-box,
      linear-gradient(180deg, rgb(26 1 0 / 62%) 0%, transparent 24%) padding-box,
      url("bg-jackpot.png?v=1") center bottom / cover padding-box;
  }
  html[data-theme="red"] .asian-right__dragon,
  html[data-theme="red"] .asian-right__jackpot::before { display: none; }
  html[data-theme="red"] .asian-right__jp-value { margin-top: 2px; }

  /* Tournament: new art with baked-in gold frame + cup; live text on the left.
     Slight oversize crops the art's dark outer margin so its gold frame sits at the card edge. */
  html[data-theme="red"] .asian-right > .asian-right__tournament {
    min-height: 172px;
    /* art oversized past its own painted frame; the unified CSS gold frame is drawn on top */
    background:
      linear-gradient(90deg, rgb(26 1 0 / 42%) 0%, transparent 55%) padding-box,
      url("bg-tournament.png?v=2") center / 106% 112% no-repeat padding-box;
    text-align: left;
  }
  html[data-theme="red"] .asian-right__tournament .asian-right__cap,
  html[data-theme="red"] .asian-right__tournament > small,
  html[data-theme="red"] .asian-right__tournament strong { text-align: left; }
  html[data-theme="red"] .asian-right__tournament .asian-right__btn { max-width: 62%; }

  /* Red envelope: new art with baked-in gold frame; live text on the left */
  html[data-theme="red"] .asian-right > .asian-right__envelope {
    display: block;
    min-height: 142px;
    background:
      linear-gradient(90deg, rgb(26 1 0 / 42%) 0%, transparent 50%) padding-box,
      url("bg-envelope.png?v=2") center / 106% 112% no-repeat padding-box;
  }
  html[data-theme="red"] .asian-right__envelope img { display: none; }
  html[data-theme="red"] .asian-right__env-body { width: auto; max-width: 66%; }
  html[data-theme="red"] .asian-right__env-body .asian-right__btn { max-width: 100%; }
}

/* Game art = portrait 3:4 tile; icon fills the whole tile and the ornate frame
   is drawn ON TOP of it (frame works as a clipping mask) */
html[data-theme="red"] .game-card__media {
  aspect-ratio: 3 / 4;
  position: relative;
  border: 0;
  border-image: none;
  border-radius: 10px;
  overflow: hidden;
  background: #2c0100;
}
html[data-theme="red"] .game-card__media img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
html[data-theme="red"] .game-card__media::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: none;
  border: 14px solid transparent;
  border-image: url("frame-game.png?v=1") 150 round;
  pointer-events: none;
}
html[data-theme="red"] .game-badge { top: 10px; left: 10px; }

/* Hide the sidebar scrollbar (content still scrolls) */
html[data-theme="red"] .asian-rail { scrollbar-width: none; }
html[data-theme="red"] .asian-rail::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ===== Sidebar: match YUWA exactly — compact single-line menu, no scrollbar ===== */
@media (min-width: 1081px) {
  html[data-theme="red"] .asian-rail {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
  }
  html[data-theme="red"] .asian-rail::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
  html[data-theme="red"] .asian-rail__nav { gap: 4px; margin-bottom: 4px; }
  /* Plain rows: ornate icon seal + label, no pill background (mockup) */
  html[data-theme="red"] .asian-rail__nav a { padding: 4px 7px; border-radius: 12px; }
  html[data-theme="red"] .asian-rail__nav a:hover { background: rgb(255 200 90 / 7%); border-color: transparent; }
  html[data-theme="red"] .asian-rail__lbl { font-size: 14.5px; }
  html[data-theme="red"] .asian-rail__lbl small { display: none; }   /* drop CN subtitle like the mockup */
  html[data-theme="red"] .asian-rail__ic {
    width: 30px;
    height: 30px;
    border: 1.4px solid rgb(240 190 100 / 80%);
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px rgb(90 20 5 / 60%), inset 0 0 6px rgb(255 190 80 / 18%);
    background: radial-gradient(circle at 50% 30%, rgb(120 20 6 / 55%), rgb(50 4 1 / 40%));
  }
  html[data-theme="red"] .asian-rail__ic svg { width: 17px; height: 17px; }
  html[data-theme="red"] .asian-rail__chev { font-size: 15px; opacity: .55; }
  /* Active item: the big gold plaque like «Главная» in the mockup */
  html[data-theme="red"] .asian-rail__nav a.is-active {
    padding: 11px 12px;
    border: 1px solid #8a4a10;
    box-shadow:
      0 8px 20px rgb(180 90 10 / 35%),
      inset 0 0 0 1.5px rgb(255 244 200 / 65%),
      inset 0 -10px 18px rgb(190 100 20 / 45%);
    background: linear-gradient(180deg, #ffefb2 0%, #f6c765 45%, #e9a334 100%);
  }
  html[data-theme="red"] .asian-rail__nav a.is-active .asian-rail__ic {
    border-color: #7c3d0c;
    background: none;
    box-shadow: none;
  }
  html[data-theme="red"] .asian-rail__nav a.is-active .asian-rail__lbl { font-size: 15.5px; }
  html[data-theme="red"] .asian-rail__nav a.is-active .asian-rail__chev { opacity: 1; }
  html[data-theme="red"] .asian-rail__brand { padding-bottom: 8px; margin-bottom: 2px; }
  /* Cat block from the real art: full-bleed at the bottom of the frame */
  html[data-theme="red"] .asian-rail__mascot {
    flex: 0 1 auto;
    min-height: 0;
    margin: 10px -10px 0;  /* right after the menu — no stretched gap; bleeds over frame side padding */
    padding: 0;
    overflow: hidden;
  }
  html[data-theme="red"] .asian-rail__mascot img {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    filter: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 90%, transparent 100%);
  }
  html[data-theme="red"] .asian-rail__vip { padding: 10px 13px 11px; margin: 2px 2px 10px; }
  html[data-theme="red"] .asian-rail__vip-bar { margin: 4px 0 2px; }
  html[data-theme="red"] .asian-rail__tassel { display: none; } /* keep everything inside the frame, no overflow */
}

/* ===== Right rail: no scrollbar, fit all cards like the mockup ===== */
@media (min-width: 1280px) {
  html[data-theme="red"] .asian-right {
    scrollbar-width: none;
    gap: 10px;
  }
  html[data-theme="red"] .asian-right::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
  /* Jackpot laid out like the reference: value on top, dragon in the middle,
     timer + button pinned to the bottom */
  html[data-theme="red"] .asian-right > .asian-right__jackpot {
    display: flex;
    flex-direction: column;
    min-height: 330px;
  }
  html[data-theme="red"] .asian-right__jackpot .asian-right__timer { margin-top: auto; }
  html[data-theme="red"] .asian-right > .asian-right__tournament { min-height: 168px; }
  html[data-theme="red"] .asian-right > .asian-right__envelope { min-height: 138px; }
  html[data-theme="red"] .asian-right__winners ol { gap: 4px; margin: 8px 0 10px; }
  html[data-theme="red"] .asian-right__winners li { padding: 3px 0; }
  /* Winners: muted, darker card so it stops shouting next to the art blocks */
  html[data-theme="red"] .asian-right > .asian-right__winners {
    /* muted interior, but the same gold frame as every other rail card */
    background:
      radial-gradient(120% 55% at 50% 0%, rgb(160 40 12 / 22%), transparent 65%) padding-box,
      linear-gradient(165deg, rgb(84 9 3 / 96%), rgb(40 2 1 / 98%)) padding-box;
  }
}
/* also make sure the left sidebar never shows a scrollbar */
html[data-theme="red"] .asian-rail { scrollbar-width: none !important; }
html[data-theme="red"] .asian-rail::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* ===== Hero buttons: compact + left-aligned like the mockup (not full-width) ===== */
html[data-theme="red"] .promo-slide__content .casino-hero__actions {
  display: flex;
  flex-flow: row wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  max-width: 560px;
}
html[data-theme="red"] .promo-slide__content .casino-hero__actions .btn {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 24px;
  font-size: 14.5px;
  border-radius: 10px;
}
/* ===== Section head «Игры»: asian ornament + gold search/select ===== */
html[data-theme="red"] .lobby .kicker {
  color: #ffd575;
  font-weight: 900;
  letter-spacing: .24em;
}
html[data-theme="red"] .section-bar h2 {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #ffeeba;
  font-family: Georgia, "Times New Roman", serif;
  text-shadow: 0 3px 18px rgb(255 170 50 / 28%);
}
html[data-theme="red"] .section-bar h2::after {
  content: "";
  flex: 0 1 190px;
  height: 9px;
  margin-top: 4px;
  background:
    radial-gradient(circle, #ffd875 0 2.6px, transparent 3.4px) left center / 9px 9px no-repeat,
    radial-gradient(circle, rgb(255 216 117 / 70%) 0 1.6px, transparent 2.2px) 13px center / 7px 7px no-repeat,
    linear-gradient(90deg, rgb(255 216 117 / 80%), rgb(255 216 117 / 0%)) 22px center / calc(100% - 22px) 1.5px no-repeat;
}
html[data-theme="red"] .games-tools input,
html[data-theme="red"] .games-tools select {
  border: 1px solid rgb(255 205 92 / 46%);
  border-radius: 12px;
  color: #ffe6a8;
  background: linear-gradient(180deg, rgb(96 9 3 / 88%), rgb(44 3 1 / 94%));
  box-shadow:
    inset 0 0 0 2px rgb(58 4 2 / 65%),
    inset 0 0 0 3px rgb(255 205 92 / 16%),
    0 8px 20px rgb(15 0 0 / 30%);
}
html[data-theme="red"] .games-tools input:focus,
html[data-theme="red"] .games-tools select:focus {
  border-color: #ffd066;
  outline: none;
  box-shadow:
    inset 0 0 0 2px rgb(58 4 2 / 65%),
    inset 0 0 0 3px rgb(255 205 92 / 25%),
    0 0 0 3px rgb(255 176 48 / 18%);
}
html[data-theme="red"] .games-tools input::placeholder { color: #d8a06c; }
html[data-theme="red"] .games-tools select { color: #ffe6a8; }

html[data-theme="red"] .promo-slide__content .casino-hero__actions .btn-ghost {
  background: transparent;
  border: 0;
  color: #ffe6a8;
  padding: 0 8px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* #5 (right rail scroll) reverted — sticky/flex rewrite broke the main column; needs a safer approach */

/* ===== Game modal follows the active theme (was always blue-dark) ===== */
html[data-theme="red"] .game-modal {
  background:
    radial-gradient(circle at 12% 0%, rgb(255 145 45 / 13%), transparent 18rem),
    radial-gradient(circle at 100% 20%, rgb(247 200 94 / 12%), transparent 16rem),
    #2a0402;
  box-shadow: 0 34px 120px rgb(0 0 0 / 70%), inset 0 0 0 1px rgb(255 205 92 / 22%);
}
html[data-theme="red"] .game-modal__bar { border-bottom-color: rgb(255 205 92 / 20%); }
html[data-theme="red"] .game-modal__stage,
html[data-theme="red"] .game-modal__loader {
  background:
    radial-gradient(circle at 50% 42%, rgb(255 150 50 / 12%), transparent 18rem),
    #1d0301;
}
html[data-theme="red"] .game-modal__spinner {
  border-color: rgb(255 220 150 / 22%);
  border-top-color: #ffd873;
  border-right-color: #ff9a3a;
}
html[data-theme="red"] .game-modal::backdrop {
  background:
    linear-gradient(rgb(24 1 0 / 68%), rgb(24 1 0 / 84%)),
    radial-gradient(80% 60% at 50% 0%, #6c0803, #240100);
}

html[data-theme="white"] .game-modal__stage,
html[data-theme="white"] .game-modal__loader {
  background: #f3f1fb;
  color: #17142a;
}
html[data-theme="white"] .game-modal__bar { border-bottom-color: rgb(60 43 120 / 12%); }
html[data-theme="white"] .game-modal__spinner {
  border-color: rgb(23 20 42 / 14%);
  border-top-color: #b09032;
  border-right-color: #6b4de0;
}
html[data-theme="white"] .game-modal::backdrop {
  background: linear-gradient(rgb(242 240 251 / 78%), rgb(233 230 247 / 88%));
}