/* Reference palette shared by every route and every viewport. */
:root {
  color-scheme: dark;
  --theme-black: #000;
  --theme-bg: #080705;
  --theme-purple: #49330b;
  --theme-magenta: #ffbd19;
  --theme-green: #ffd000;
  --theme-text: #fffdf4;
  --theme-muted: #d5c7a5;
}
body {
  color: var(--theme-text);
  background-color: var(--theme-bg);
  background-image: url('./images/background.jpg');
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body > header { background: var(--theme-black); border-bottom-color: var(--theme-green); box-shadow: 0 1px 8px #ffd00080; }
body > header .menu { color: var(--theme-green); border-color: var(--theme-green); background: #050505; box-shadow: 0 0 8px #ffd00055; }
.ticker { background: #211a08; border-bottom-color: var(--theme-green); box-shadow: 0 1px 5px #ffbd1980; }
.footer { background: linear-gradient(135deg, #080705f5, #30240ff5); border-color: #c99a2266; color: var(--theme-text); }
.footer-links h3, .licenses h3 { color: var(--theme-green); }
.footer-links, .copyright { border-color: #c99a2244; }
.copyright { color: var(--theme-muted); }
.bottom {
  background: radial-gradient(ellipse at 50% 0%, #ffd000aa, transparent 75%),
    linear-gradient(110deg, #080705, #302408 50%, #080705);
  border-top: 2px solid var(--theme-green);
  box-shadow: 0 -2px 9px #ffd00070;
}
.bottom button { color: var(--theme-magenta); }
.bottom .active { border-color: var(--theme-green); box-shadow: inset 0 0 15px #ffd00040; }
.bottom .nav-art { filter: none; }
.badge { background: var(--theme-magenta); color: #fff; }
.drawer.site-panel { background: linear-gradient(160deg, #100d07, #49330b 65%, #211a0b); border-right: 2px solid var(--theme-green); }
.site-panel .panel-close, .panel-link svg { color: var(--theme-green); fill: var(--theme-green); }
.site-panel .panel-link { background: #c99a2226; color: var(--theme-text); }
.site-panel .panel-link.hot { background: var(--theme-green); color: #000; box-shadow: 0 0 16px #ffd00060; }
.panel-link.hot svg { fill: #000; filter: none; }
.panel-card { background: #c99a2220; border-color: #c99a2260; }
.site-panel .partner-row { background: #c99a2226; }
.site-panel .social-link { background: #49330b; border: 1px solid var(--theme-magenta); }
.site-panel .social-link.facebook { background: #211a0b; }
.social-link b, .facebook b { color: #49330b; }
.panel-footer { border-color: #c99a2260; color: var(--theme-muted); }
.panel-footer a { color: var(--theme-green); }
.categories button.active, .login-submit, .login-page .login-submit, .modal .submit,
.review-form button, .blog-details summary, .explore {
  background: linear-gradient(#ffd000, #d99b00);
  color: #000;
  border-color: var(--theme-green);
  text-shadow: none;
}
.gold, .register, .login-page .register, .account button {
  background: linear-gradient(#49330b, #080705);
  color: #fff;
  border-color: var(--theme-magenta);
  text-shadow: 0 0 5px #ffbd19;
  box-shadow: inset 0 0 8px #c99a2240;
}
.home-blog, .player-reviews, .blog-article, .review-card, .reviews-empty, .rating-summary {
  background: #151108; color: var(--theme-text); border-color: #c99a2280;
}
.blog-intro { background: linear-gradient(120deg, #080705, #49330b); color: var(--theme-text); }
.blog-intro p, .review-card p, .review-form label { color: var(--theme-text); }
.blog-article h2, .blog-article h3, .player-reviews h2, .review-form h3,
.review-card header, .review-stars, .rating-score strong { color: var(--theme-green); }
.blog-kicker, .blog-intro .blog-kicker { color: var(--theme-magenta); }
.review-note, .review-card time, .rating-count, .rating-row, .rating-score p { color: var(--theme-muted); }
.reviews-heading > span, .review-toolbar select { background: #30240f; color: var(--theme-text); border-color: #c99a2280; }
.review-avatar, .rating-bar span { background: var(--theme-green); color: #000; }
.review-form input, .review-form select, .review-form textarea,
.login-page input, .search input, .modal input, .modal select {
  background: #fffdf4; color: #241d0c; border-color: #c99a2280;
}
input::placeholder, textarea::placeholder { color: #776b58; }
.chat-page { color: var(--theme-text); }
body::before { background: #08070540; }
.chat-message, .chat-status { background: #211a0bcc; color: var(--theme-text); }
.chat-sender { color: var(--theme-green); }
.welcome { background: linear-gradient(115deg, #211a0b, #49330b 55%, #805d16); border-color: var(--theme-magenta); color: var(--theme-green); box-shadow: 0 0 12px #c99a2280; }
.welcome-copy { background: #080705a6; color: var(--theme-text); border-color: var(--theme-green); }
.composer { background: #080705e8; border-top: 1px solid var(--theme-magenta); }
.composer input::placeholder { color: var(--theme-muted); }
.notice { background: #fffdf4; color: #241d0c; }
.notice .agree { background: var(--theme-green); color: #000; }
.notice button:not(.agree) { background: #e8e1d1; color: #241d0c; }
.promo-section { background: linear-gradient(110deg, #49330b, #080705); border-color: var(--theme-green); }
.promo-section h2 { color: var(--theme-green); text-shadow: 0 2px 3px #080705; }
.promo-section.compact h2 { color: var(--theme-text); }
.promo-cards { background: linear-gradient(115deg, #30240f, #080705); }
.promo-banner { background: radial-gradient(ellipse at 90% 50%, #ffbd1960, transparent 45%), linear-gradient(130deg, #080705, #49330b); }
.claim-word, .banner-brand, .promo-banner strong { color: var(--theme-green); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline-color: var(--theme-green); }
/* Match component-specific rules without changing responsive geometry. */
.panel h2 { background: #000; color: var(--theme-green); border-bottom: 1px solid var(--theme-magenta); }
.transactions th { background: #000; color: var(--theme-green); }
.transactions td { color: var(--theme-green); border-color: #c99a22; }
.play { background: #000; color: #fff; border: 2px solid var(--theme-green); }
.play:hover { background: #211a0b; border-color: var(--theme-magenta); }
.find { background: linear-gradient(#302408, #050505); border-color: var(--theme-green); }
.find button { color: #fff; background: #050505; border-color: var(--theme-green); }
.find button.active { background: var(--theme-green); color: #000; }
.lobby-auth img { filter: none; }
.player-reviews .review-list .review-card {
  background: linear-gradient(145deg, #30240f, #080705);
  border-color: #c99a22;
  border-top-color: var(--theme-green);
}
.player-reviews .review-list .review-card .review-avatar {
  background: linear-gradient(145deg, #49330b, #c99a22);
  border-color: var(--theme-green);
  color: #fff;
}
.player-reviews .review-form { background: #211a0b; color: var(--theme-text); border-color: #c99a2280; }
.player-reviews .review-toolbar h3, .player-reviews .review-toolbar > span,
.player-reviews .rating-score > span:not(.review-stars), .player-reviews .rating-score small {
  color: var(--theme-muted);
}
.player-reviews .rating-track { background: #49330b; border-color: #c99a22; }
.player-reviews .rating-track span { background: var(--theme-green); }
.player-reviews .review-stars, .player-reviews .rating-score .review-stars { text-shadow: 0 0 5px #ffd00040; }
.player-reviews .review-note { background: #080705; border-left-color: var(--theme-magenta); }
/* All page footers share the original promo background artwork. */
.footer, .bottom { background: #151006 url('./images/f6aa8c46b4086f5392ee7.jpg') center / cover no-repeat; }

/* Original background artwork on every route and screen size. */
body { background-image: url('./images/background.jpg'); background-position: center top; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; }
body::before { background: transparent; }

/* Content footer palette from the supplied reference. */
.footer {
  background: rgba(8, 7, 5, .94);
  border-color: rgba(191, 169, 142, .45);
  color: #e5d8c2;
}
.footer .footer-links h3, .footer .licenses h3 { color: #e8b45d; }
.footer .footer-links, .footer .copyright { border-color: rgba(188, 150, 91, .25); }
.footer .footer-links a, .footer .intro p, .footer .intro small { color: #e5d8c2; }
.footer .license-grid, .footer .copyright { color: #bfa98e; }
/* Reference placement for verification, licensing, and certification artwork. */
.footer .license-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.footer .license-column { min-width: 0; }
.footer .license-logos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-top: 12px; }
.footer .license-logos img { display: block; flex: 0 0 50px; width: 50px; height: 50px; margin: 0; object-fit: contain; object-position: left center; filter: none; }
.footer .license-logos .verified-partner { flex-basis: 85px; width: 85px; height: 50px; }
.footer .certification-logos { max-width: 300px; gap: 12px; }
.footer .cert-row-break { flex-basis: 100%; height: 0; }
@media(max-width:760px) {
  .footer .license-grid { gap: 12px; }
  .footer .license-logos { gap: 8px; }
  .footer .license-logos img { flex-basis: 42px; width: 42px; height: 42px; }
  .footer .license-logos .verified-partner { flex-basis: 75px; width: 75px; height: 43px; max-width: 100%; }
}

/* Original homepage artwork and buttons placed on their matching panels. */
.sidebar .referral-card, .sidebar .draw-card { position: relative; margin: 18px 0; }
.sidebar .referral-card > img, .sidebar .draw-card > img { display: block; height: auto; aspect-ratio: auto; object-fit: contain; }
.sidebar .referral-card .gold-actions { position: absolute; left: 4%; right: 4%; bottom: 5%; margin: 0; gap: 5px; }
.sidebar .referral-card .gold-actions button { min-width: 0; }
.sidebar .draw-card .lucky-number-button { position: absolute; left: 5%; bottom: 6%; width: 46%; padding: 0; border: 0; background: transparent; }
.sidebar .lucky-number-button img { display: block; width: 100%; height: auto; }
.sidebar .art.social, .sidebar .promos .art, .sidebar .art.tips { height: auto; aspect-ratio: auto; object-fit: contain; }
.sidebar .recommended img { object-fit: contain; height: auto; aspect-ratio: 1; }
.sidebar .art, .sidebar .image-action img, .sidebar .lucky-number-button img { filter: none; }

/* Black and gold controls matched to the supplied reference. */
body > header .menu {
  color: #fff;
  background: linear-gradient(110deg, #ffb600, #ffe58a 70%, #fff8df);
  border-color: #fff1c1;
  box-shadow: 0 0 7px #ffce63;
}
.ticker { background: linear-gradient(#fff4bd, #c9a94e); color: #000; border-bottom-color: #927020; box-shadow: 0 1px 5px #d6b34c80; }
.bottom, .promo-reference .bottom { background-color: #000; background-image: none; border-top-color: #a67c19; box-shadow: 0 -2px 9px #000b; }
.bottom button { color: #ffd000; }
.gold, .register, .login-page .register, .account button {
  background: linear-gradient(#49330b, #080705);
  color: #fff8e6;
  border-color: #d6a426;
  text-shadow: 0 1px 2px #000;
}
.categories button.active { background: #ff9900; color: #fff; border-color: #ffb000; }
.find { background: linear-gradient(#302408, #050505); }
.find button.active { background: linear-gradient(#ffe570, #c99a00); color: #000; }
.site-panel .panel-link.hot, .login-submit, .login-page .login-submit,
.modal .submit, .review-form button, .explore { background: linear-gradient(#ffe570, #d99b00); color: #000; }
.site-panel .panel-link:hover, .site-panel .panel-link:focus-visible { outline-color: #ffd000; }
.play:hover { background: #302408; color: #fff; border-color: #ffe58a; }
.footer { background-color: #080705; color: #fff8e6; }
/* New homepage campaign artwork: show the full image at its natural ratio. */
.sidebar .hero-slideshow .hero { aspect-ratio: auto; height: auto; width: 100%; object-fit: contain; }
.sidebar .promos .art, .sidebar .art.social, .sidebar .art.tips {
  display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: contain;
  border-radius: 10px;
}
.sidebar .promos { display: grid; gap: 10px; }
.sidebar .promos .art { margin: 0; }
.sidebar .referral-card { border: 1px solid #bb901e; border-radius: 10px; overflow: hidden; }
.sidebar .referral-card .gold-actions { bottom: 4%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.sidebar .referral-card .gold-actions button { min-height: 30px; padding: 5px 3px; font-size: 11px; }
.sidebar .draw-card { border-radius: 10px; overflow: hidden; }
/* Keep the vault artwork visible behind every route, including mobile. */
html { min-height: 100%; background: #080705; }
html body, html body.promo-reference {
  min-height: 100vh;
  isolation: isolate;
  background: transparent;
}
html body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #080705 url('./images/background.jpg') center center / cover no-repeat;
  filter: brightness(1.35);
}
.layout, .layout > .center, .layout > .sidebar, .login-page, .chat-page {
  background-color: transparent;
}
/* Shared footer artwork and supplied verification partner badge. */
body .footer {
  background: #080705 url('./images/footer_bg.png') center / cover no-repeat;
}
.footer .license-logos .verified-partner {
  flex: 0 1 135px;
  width: 135px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 760px) {
  .footer .license-logos .verified-partner { flex-basis: 100px; width: 100px; height: auto; }
}
/* Footer artwork also belongs behind the fixed bottom navigation. */
body .bottom, body.promo-reference .bottom {
  background: #080705 url('./images/footer_bg.png') center / 100% 100% no-repeat;
}

/* Keep every yellow foreground on a brown or darker visual surface. */
.menu{background:#49330b;box-shadow:0 2px 8px #0008}
.amount,.find small,.balance strong{background:#49330b;color:#ffe27a!important;border-radius:6px;padding:4px 8px;text-shadow:0 1px 2px #000}
.find small{display:inline-block;margin:4px 0 8px}
.balance strong{display:inline-block}
.footer h3,.drawer h3,.modal h2{background:#49330b;color:#ffe27a!important;border-radius:6px;padding:7px 10px}
.footer h3{display:inline-block}
.panel-link svg{background:#49330b;border-radius:7px;padding:4px;box-sizing:content-box}
.login-page>h1,.welcome h1{background:#49330b;color:#ffe27a!important;border-radius:10px;padding:10px 16px;text-shadow:0 2px 2px #000}
.site-panel .panel-close{background:#49330b;border-radius:6px}
.bottom button{background-color:#211a0b}
.bottom button.active{background-color:#49330b}
.licenses h3{background:#49330b;color:#ffe27a!important;border-radius:7px;padding:8px 12px}
.blog-kicker,.guide-section h2:before{background:#49330b;color:#ffe27a!important}
@media(max-width:600px){.amount,.find small,.balance strong{padding:3px 6px}.footer h3,.drawer h3,.modal h2{padding:6px 8px}}