/* LEESPIN reference palette: charcoal, electric purple, and neon lime. Load after page and responsive styles.
   Image files, image buttons, and their replacement controls stay intact. */
:root {
  --theme-red: #9a35f0;
  --theme-red-light: #b9ff32;
  --theme-red-deep: #7134d8;
  --theme-black: #11101c;
  --theme-panel: #171820;
  --theme-text: #ffffff;
  --theme-muted: #d6d3df;
  --theme-line: #67348d;
  --theme-button: linear-gradient(180deg, #c6ff00, #aaff25);
  --theme-dark: linear-gradient(180deg, #191b22, #0e0e18);
}
body {
  color: var(--theme-text);
  background-color: #11101c;
  background-image: url('./images/background-leespin-v1.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body > header {
  background: repeating-linear-gradient(165deg, #191b22 0 3px, #191b22 3px 5px);
  border-bottom-color: var(--theme-red);
  box-shadow: 0 1px 8px #9a35f030;
}
body > header .menu {
  color: #fff;
  background: var(--theme-button);
  border: 2px solid var(--theme-red-light);
  border-radius: 20px;
  box-shadow: inset 0 1px 3px #ffffff55, 0 0 10px #9a35f060;
}
.ticker { background: linear-gradient(90deg, #7134e8, #8032ef, #7134e8); border-bottom-color: #b7ff00; color: #fff; }
.center { background: #11101c66; border-inline-color: #ffffff40; }
.panel, .account, .categories, .modal, .dialog, .toast, .empty {
  background: var(--theme-dark);
  border-color: var(--theme-red);
  color: #fff;
}
.account { box-shadow: 0 0 12px #9a35f02b, inset 0 0 18px #9a35f012; }
.panel h2 { background: #191b22; color: #fff; }
.transactions th { background: var(--theme-button); color: #fff; }
.transactions td { background: #050505; border-color: #ffffff80; }
.amount { color: var(--theme-red); text-shadow: none; }
.find h3, .find small, .modal h2, .drawer h3, .login-page h1, .forgot, .form-status { color: #fff; }
.gold, .play, .login-submit, .register, .actions .primary, .notice .agree, .review-form button {
  color: #fff;
  background: var(--theme-button);
  border: 2px solid var(--theme-red-light);
  box-shadow: inset 0 1px 2px #ffffff30, 0 0 8px #9a35f02b;
  text-shadow: 0 1px 2px #151020;
}
.play { font-weight: 700; }
.gold:hover, .play:hover, .login-submit:hover, .register:hover, .actions .primary:hover, .notice .agree:hover, .review-form button:hover {
  background: linear-gradient(180deg, #b9ff32, #b7ff00);
  color: #fff;
}
.categories { border: 1px solid var(--theme-line); }
.categories button, .mini-tabs button, .actions button, .drawer button, .drawer a, .notice button {
  background: var(--theme-dark);
  border-color: var(--theme-line);
  color: #fff;
}
.categories .active, .mini-tabs .active {
  background: var(--theme-button);
  border-color: var(--theme-red-light);
  color: #fff;
  box-shadow: 0 0 16px #9a35f066;
}
.providers { border-bottom-color: var(--theme-red); }
.provider { background-color: #171020; border-color: var(--theme-red); box-shadow: 0 0 7px #9a35f040; }
.provider.active { border-color: #fff; box-shadow: 0 0 12px #9a35f080; }
.balance { background: transparent; }
.balance strong { color: #ffe000; }
.tips { border-color: var(--theme-red); }
.search { border-color: var(--theme-red); outline-color: var(--theme-red); }
.hero-slideshow, .hero-controls { background: #11101c; }
.hero-dots button { background: #77737f; border-color: #aaa5b2; }
.hero-dots button[aria-current=true] { background: var(--theme-red); border-color: var(--theme-red-light); box-shadow: 0 0 5px #9a35f0; }
.footer, .bottom { background-color: #191b22; color: #fff; border-color: var(--theme-red); }
.footer { border-color: var(--theme-line); }
.footer h3 { color: var(--theme-red-light); }
.footer-links, .copyright { border-color: #9a35f033; }
.copyright { color: var(--theme-muted); }
.footer a:hover { color: var(--theme-red-light); }
.bottom button, .bottom a { color: var(--theme-red); }
.bottom .icon { filter: drop-shadow(0 0 3px #9a35f0); }
.bottom .active { border-color: var(--theme-red); box-shadow: inset 0 0 15px #9a35f030; background-color: #12141bd9; }
.badge { background: var(--theme-button); border: 1px solid var(--theme-red-light); color: #fff; box-shadow: 0 0 6px #9a35f0; }
.notice { background: #191b22; color: #fff; border: 1px solid var(--theme-red); }
.drawer, .drawer.site-panel { background: linear-gradient(160deg, #191320, #11101c 65%, #241137); color: #fff; border-right-color: var(--theme-red); }
.panel-head { background: #15151e; border-bottom: 1px solid var(--theme-line); }
.site-panel .panel-close { background: none; border: 0; color: var(--theme-red-light); }
.site-panel .panel-link { background: #9a35f018; border: 1px solid #9a35f030; color: #fff; }
.panel-link svg { fill: var(--theme-red); }
.site-panel .panel-link.hot { background: var(--theme-button); color: #fff; box-shadow: 0 0 16px #9a35f040; }
.panel-link.hot svg { fill: #fff; filter: none; }
.panel-link:hover, .panel-link:focus-visible { outline-color: var(--theme-red-light); }
.panel-card { background: #9a35f00c; border-color: #9a35f038; }
.site-panel .partner-row { background: #ffffff0c; }
.site-panel .social-link, .site-panel .social-link.facebook { background: var(--theme-button); color: #fff; }
.social-link b, .facebook b { color: var(--theme-red-deep); }
.panel-footer { border-color: #9a35f038; color: var(--theme-muted); }
.panel-footer a, .drawer p { color: #fff; }
.promo-rule { background: var(--theme-red); }
.promo-section { background: var(--theme-dark); border-color: var(--theme-red); box-shadow: 0 0 10px #9a35f025; }
.promo-section h2, .promo-section.compact h2 { color: #fff; background-color: #171020; background-image: none; text-shadow: 0 2px #151020; -webkit-text-stroke: 0; }
.promo-cards { background: linear-gradient(115deg, #21132f, #11101c); border-color: var(--theme-red); }
.claim-word { color: #fff; text-shadow: 0 0 6px #9a35f0; }
.chat-page { color: #fff; }
.chat-message { background: #171820e6; border: 1px solid var(--theme-line); }
.chat-sender { color: var(--theme-red-light); }
.home-blog, .player-reviews { color: #fff; background-color: #171820; border-color: var(--theme-line); }
.blog-intro { background: linear-gradient(120deg, #171020, #38204e); color: #fff; }
.blog-kicker, .blog-intro .blog-kicker, .player-reviews .blog-kicker { color: var(--theme-red-light); }
.blog-intro p, .blog-article, .review-note { color: var(--theme-muted); }
.blog-details summary { background: var(--theme-button); color: #fff; }
.blog-article h2, .blog-article h3, .review-form h3, .reviews-heading h2 { color: #fff; }
.player-reviews .reviews-heading h2, .player-reviews .rating-score strong { color: #fff; text-shadow: none; }
.player-reviews .reviews-heading > span { background: #2a173b; color: #fff; border-color: var(--theme-line); }
.player-reviews .review-note { background: #15151eb3; border-left-color: var(--theme-red); color: var(--theme-muted); }
.player-reviews .rating-summary, .rating-summary, .review-form { border-color: #9a35f038; }
.player-reviews .review-stars, .player-reviews .rating-score .review-stars, .review-stars { color: var(--theme-red-light); text-shadow: none; }
.player-reviews .rating-score > span:not(.review-stars), .player-reviews .rating-row, .player-reviews .rating-score small, .player-reviews .review-toolbar > span, .player-reviews .review-badge, .player-reviews .review-card time { color: var(--theme-muted); }
.player-reviews .rating-track { background: #241730; border-color: var(--theme-line); }
.player-reviews .rating-track span, .rating-track span { background: var(--theme-button); }
.player-reviews .review-toolbar h3, .player-reviews .review-card header, .player-reviews .review-card header strong, .player-reviews .review-list .review-card p { color: #fff; }
.player-reviews .review-list .review-card { background: linear-gradient(145deg, #251735, #11101c); border-color: var(--theme-line); border-top-color: var(--theme-red); }
.player-reviews .review-list .review-card .review-avatar { background: var(--theme-button); border-color: var(--theme-red-light); color: #fff; box-shadow: inset 0 0 0 2px #7134d8; }
.review-form { background: #171020; color: #fff; }
.review-toolbar a { border-color: var(--theme-red); color: #fff; }
.reviews-empty { background: #241730; color: var(--theme-muted); }
:is(button, a, input, select, textarea, summary):focus-visible { outline-color: var(--theme-red-light); }
.logo-home-link:focus-visible, .lobby-auth button:focus-visible, .login-page input:focus { outline-color: var(--theme-red-light); }
@media (prefers-reduced-motion: no-preference) {
  .play, .gold, .categories button, .panel-link { transition: background-color .15s ease, box-shadow .15s ease; }
}
/* Page-specific chat controls and non-image credit badges. */
body::before { background: transparent; }
.welcome { background: linear-gradient(115deg, #21132f, #38204e 55%, #21132f); border-color: var(--theme-red); box-shadow: 0 0 12px #9a35f038; color: #fff; }
.welcome hr { border-top-color: var(--theme-red); }
.welcome-copy { background: #11101cb3; border-color: var(--theme-line); color: #fff; }
.explore { background: var(--theme-button); border-color: var(--theme-red-light); color: #fff; box-shadow: 0 0 16px #9a35f055; }
.composer { background: #191b22f2; border-top: 1px solid var(--theme-line); }
.composer button { color: var(--theme-red-light); }
.chat-status { background: #241730e6; color: #fff; }
.credit, .credit:nth-child(3) { background: linear-gradient(135deg, #9a35f0, #191b22 48%, #7134d8); color: #fff; filter: drop-shadow(0 0 2px #9a35f0); }
/* Keep complete character banners and their lettering visible at every width. */
.art:is([data-image="hero"], [data-image="referral"], [data-image="draw"], [data-image="social"], [data-image="whatsapp"], [data-image="free-bonus"], [data-image="checkin"], [data-image="vip"], [data-image="tips"]) {
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
/* Compact license and certificate footer, matching the supplied reference. */
.footer .licenses, .footer .copyright {
  background-color: #191b22;
  background-image: repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 4px), repeating-linear-gradient(177deg, #ffffff02 0 1px, transparent 1px 7px), linear-gradient(100deg, #191b22, #191b22 48%, #191b22);
  color: #b7ff00;
}
.footer .licenses { padding: 32px 40px 42px; min-height: 275px; }
.footer .licenses h3 { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 27px; color: #b7ff00; font: 700 16px/1.4 Arial, sans-serif; text-align: center; }
.footer .licenses .license-icon { width: 22px; height: 22px; object-fit: contain; }
.footer .license-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; align-items: start; }
.footer .license-column { min-width: 0; }
.footer .license-column h4 { margin: 0 0 13px; color: #b7ff00; font: 400 13px/1.4 Arial, sans-serif; }
.footer .license-logos { display: flex; align-items: flex-start; min-width: 0; }
.footer .license-grid img { display: block; flex: 0 1 auto; margin: 0; max-width: 100%; width: auto; height: auto; object-fit: contain; object-position: left center; }
.footer .license-verified img { width: 134px; height: 76px; }
.footer .license-licensed img { width: 52px; height: 42px; }
.footer .certificate-logos { display: grid; gap: 18px; }
.footer .certificate-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.footer .certificate-row img { width: 48px; height: 48px; }
.footer .certificate-row img:nth-child(n+3) { width: 46px; height: 30px; }
.footer .certificate-row + .certificate-row img { width: 54px; height: 30px; }
.footer .copyright { margin: 0; border-top: 1px solid #9a35f040; padding: 22px 14px; color: #b7ff00; text-align: center; font-size: 11px; line-height: 1.6; }
@media (max-width: 760px) {
  .footer .licenses { padding: 26px 18px 32px; min-height: 0; }
  .footer .license-grid { gap: 14px; }
  .footer .license-column h4 { font-size: 11px; }
  .footer .certificate-row { gap: 7px; }
  .footer .certificate-row img { width: 38px; height: 38px; }
  .footer .certificate-row img:nth-child(n+3) { width: 38px; height: 25px; }
}
@media (max-width: 480px) {
  .footer .licenses h3 { font-size: 14px; }
  .footer .license-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .footer .license-certified { grid-column: 1 / -1; }
  .footer .certificate-row { gap: 14px; }
  .footer .certificate-row img { width: 44px; height: 44px; }
  .footer .certificate-row img:nth-child(n+3) { width: 44px; height: 28px; }
}
/* Reference styling shared by the lobby, history, promotions, chat and settings. */
:root {
  --theme-lime: #b7ff00;
  --theme-purple: #9a35f0;
  --theme-charcoal: #191b22;
}
body > header { background: var(--theme-charcoal); border-bottom-color: var(--theme-lime); box-shadow: none; }
body > header .menu {
  color: #101018;
  background: linear-gradient(125deg, #c6ff00 15%, #b7ff00 42%, #8d35da 78%, #bdff37);
  border-color: #b9ee45;
  box-shadow: 0 0 10px #b7ff0040;
}
.ticker { background: #7734eb; color: var(--theme-lime); border-bottom-color: var(--theme-lime); }
.center { background: #11101c; }
.panel h2, .find h3, .find small, .modal h2, .drawer h3,
.login-page h1, .forgot, .form-status, .amount { color: var(--theme-lime); }
.transactions th { color: #101018; }
.gold, .register, .actions button, .drawer button, .drawer a, .notice button,
.categories button, .mini-tabs button, .site-panel .panel-link {
  background: linear-gradient(180deg, #26292d, #090a0e 65%, #171a1f);
  color: var(--theme-lime);
  border-color: var(--theme-purple);
  box-shadow: inset 0 1px 2px #ffffff35, 0 0 7px #9a35f025;
  text-shadow: none;
}
.play, .login-submit, .actions .primary, .notice .agree, .review-form button,
.categories .active, .mini-tabs .active, .site-panel .panel-link.hot,
.blog-details summary, .explore {
  background: var(--theme-button);
  color: #101018;
  border-color: #d4ff74;
  box-shadow: inset 0 1px 2px #ffffff80, 0 0 14px #b7ff0040;
  text-shadow: none;
}
.play:hover, .login-submit:hover, .actions .primary:hover, .notice .agree:hover,
.review-form button:hover, .explore:hover { background: #cbff48; color: #101018; }
.gold:hover, .register:hover, .categories button:not(.active):hover,
.mini-tabs button:not(.active):hover, .site-panel .panel-link:hover {
  color: #ceff63;
  background: linear-gradient(180deg, #36303e, #121018);
  border-color: var(--theme-lime);
}
.provider { background-color: #11101c; color: var(--theme-lime); border-color: #9153b5; }
.provider.active { border-color: var(--theme-lime); }
.providers { border-bottom-color: var(--theme-lime); }
.balance strong { color: #ffe000; }
.footer, .bottom, .footer .licenses, .footer .copyright { background: var(--theme-charcoal); }
.footer h3, .footer .licenses h3, .footer .license-column h4,
.footer a:hover, .bottom button, .bottom a { color: var(--theme-lime); }
.footer .copyright { color: #d6d3df; }
.bottom .active { border-color: var(--theme-lime); box-shadow: inset 0 0 15px #b7ff0020; }
.bottom .icon { filter: drop-shadow(0 0 3px #9a35f0); }
.badge { background: #241730; color: var(--theme-lime); border-color: var(--theme-purple); }
.site-panel .panel-close { background: transparent; color: var(--theme-lime); box-shadow: none; }
.panel-link svg, .panel-link.hot svg { fill: currentColor; }
.site-panel .social-link, .site-panel .social-link.facebook { color: #101018; }
.promo-section h2, .promo-section.compact h2, .claim-word, .chat-sender,
.blog-kicker, .blog-intro .blog-kicker, .player-reviews .blog-kicker,
.player-reviews .review-stars, .player-reviews .rating-score .review-stars,
.review-stars { color: var(--theme-lime); }
.player-reviews .review-list .review-card .review-avatar { color: #101018; }
.welcome { color: var(--theme-lime); }
.composer button { color: var(--theme-lime); }
.composer button svg[fill]:not([fill="none"]) { fill: var(--theme-lime); }
.composer button svg[stroke] { stroke: var(--theme-purple); }
:is(button, a, input, select, textarea, summary):focus-visible { outline-color: var(--theme-lime); }
/* Full transparent gecko category badges, in reference order. */
.providers { gap: 10px; align-items: flex-end; padding-top: 8px; }
.providers .provider {
  flex: 0 0 104px;
  min-width: 88px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  overflow: visible;
  box-shadow: none;
}
.providers .provider img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.providers .provider.active { background: transparent; box-shadow: none; }
.providers .provider.active img { filter: drop-shadow(0 0 7px #b7ff0070); }
.providers .provider:hover img { filter: drop-shadow(0 0 7px #9a35f080); }
.providers .provider:focus-visible { outline: 2px solid #b7ff00; outline-offset: 3px; }
@media (max-width: 760px) {
  .providers { gap: 8px; }
  .providers .provider { flex-basis: 88px; min-width: 88px; }
}
/* Generated LEESPIN page and footer artwork, shared by all pages. */
body {
  background-color: #11101c;
  background-image: url('./images/background-leespin-v1.png');
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.center { background-color: #11101ce8; }
.footer {
  background-color: #11101c;
  background-image: url('./images/footer_bg.png?v=3');
  background-position: center bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.bottom {
  background-color: #11101c;
  background-image: url('./images/footer_bg.png?v=3');
  background-position: center bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.footer .intro, .footer .footer-links, .footer .licenses, .footer .copyright {
  background-color: transparent;
  background-image: none;
}
@media (max-width: 760px) {
  body { background-attachment: scroll; }
}
/* Reference footer: game license, providers and responsible gaming. */
.footer.brand-footer {
  position: relative; margin: 22px 0 16px; padding: 45px 20px 32px;
  border: 2px solid #8730d4; border-radius: 22px;
  background: #11101c url('./images/footer_bg.png?v=3') center / 100% 100% no-repeat;
  color: #d4d5dc; box-shadow: inset 0 0 28px #9a35f00a, 0 0 20px #00000035;
  text-align: center; overflow: hidden;
}
.footer.brand-footer::before, .brand-footer-rule { height: 2px; background: linear-gradient(90deg, transparent, #8438ed 18%, #d3ff9b 50%, #8438ed 82%, transparent); box-shadow: 0 0 8px #b7ff0070; }
.footer.brand-footer::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; }
.brand-footer-about { max-width: 730px; margin: 0 auto; }
.brand-footer-about .logo-home-link { display: inline-block; }
.brand-footer-about .footer-logo { width: 220px; max-width: 80%; height: 70px; object-fit: contain; filter: drop-shadow(0 0 14px #b7ff0035); }
.brand-footer-about p { margin: 24px auto 28px; font-size: 13px; line-height: 1.65; text-align: center; text-align-last: center; }
.brand-footer-rule { width: 80%; margin: 0 auto 32px; }
.brand-footer-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; align-items: center; }
.brand-footer-card { min-width: 0; padding: 16px 12px 14px; border: 1px solid #6f2ca2; border-radius: 16px; background: radial-gradient(ellipse at 50% 70%, #b7ff001a, transparent 75%), linear-gradient(130deg, #22252c, #10101b 75%); box-shadow: inset 0 0 14px #00000070; }
.footer .brand-footer-card h3 { margin: 0 0 12px; color: #eee; font-size: 13px; line-height: 1.4; letter-spacing: 1.5px; font-weight: 700; text-shadow: 0 0 8px #ffffff40; }
.brand-footer-art { height: 76px; display: flex; align-items: center; justify-content: center; }
.brand-footer-art img { display: block; width: 100%; max-width: 200px; height: 100%; object-fit: contain; color: #b8b5c4; font-size: 12px; }
.brand-footer-copyright { margin: 35px 0 6px; color: #c8cad2; font-size: 11px; line-height: 1.6; text-align: center; text-align-last: center; }
@media (max-width: 760px) {
  .footer.brand-footer { padding: 30px 16px 24px; margin: 18px 0 12px; }
  .footer.brand-footer.standalone-footer { margin: 18px 12px 12px; }
  .brand-footer-cards { gap: 12px; }
  .brand-footer-card { padding: 14px 8px; }
  .footer .brand-footer-card h3 { font-size: 10px; letter-spacing: .8px; }
  .brand-footer-art { height: 64px; }
}
@media (max-width: 520px) {
  .brand-footer-cards { grid-template-columns: 1fr; gap: 16px; }
  .brand-footer-card { width: 100%; max-width: 340px; margin: 0 auto; }
  .footer .brand-footer-card h3 { font-size: 12px; }
  .brand-footer-art { height: 78px; }
  .brand-footer-about p { font-size: 12px; }
}

/* Consistent professional SVG navigation icons. */
.bottom .icon{width:28px;height:28px;display:grid;place-items:center;color:var(--theme-lime);filter:drop-shadow(0 0 5px #b7ff0045)}
.bottom .icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bottom button{color:var(--theme-lime);letter-spacing:.45px}
.bottom button:hover .icon,.bottom button:focus-visible .icon{color:#d7ff72;filter:drop-shadow(0 0 7px #b7ff0080)}
.bottom .active{color:#fff;background:linear-gradient(180deg,#9a35f026,#b7ff0010);border-color:var(--theme-lime)}
.bottom .active .icon{color:#fff;filter:drop-shadow(0 0 3px var(--theme-purple)) drop-shadow(0 0 7px var(--theme-lime))}
/* Center every footer element, including mobile heading overrides. */
.footer.brand-footer .brand-footer-about,
.footer.brand-footer .brand-footer-card,
.footer.brand-footer .brand-footer-card h3,
.footer.brand-footer p { text-align: center; text-align-last: center; }
.footer.brand-footer .brand-footer-about { display: flex; flex-direction: column; align-items: center; }
.footer.brand-footer .brand-footer-about .logo-home-link { display: flex; justify-content: center; width: 100%; }
.footer.brand-footer .footer-logo { display: block; margin-inline: auto; object-position: center; }
.footer.brand-footer .brand-footer-cards { justify-items: center; }
.footer.brand-footer .brand-footer-card { width: 100%; }
.footer.brand-footer .brand-footer-art { width: 100%; justify-content: center; }
.footer.brand-footer .brand-footer-art img { margin-inline: auto; object-position: center; text-align: center; }
/* Center the complete footer against the viewport on every page. */
.footer.brand-footer.standalone-footer {
  width: calc(100% - 32px);
  max-width: 1140px;
  margin: 24px auto 20px;
}
@media (max-width: 760px) {
  .footer.brand-footer.standalone-footer {
    width: calc(100% - 24px);
    margin: 18px auto 16px;
  }
}
/* Keep custom button artwork at its natural proportions. */
.user-image-button { padding: 0; border: 0; background: transparent; box-shadow: none; }
.user-image-button img { display: block; width: 100%; height: 100%; max-height: 48px; object-fit: contain; }