/* JUWAMORE — burgundy, champagne gold, ivory and charcoal. */
:root {
  --city-wine: #4b0919;
  --city-burgundy: #94162f;
  --city-red: #b91f3e;
  --city-gold: #d5a62b;
  --city-gold-light: #f5dc82;
  --city-cream: #fff8e8;
  --city-paper: #fffdf7;
  --city-charcoal: #201b1d;
  --city-blue: #173f78;
  --city-muted: #665a5d;
  --city-line: rgba(146, 104, 24, .25);
}

body {
  color: var(--city-charcoal);
  background:
    radial-gradient(circle at 10% 4%, rgba(213, 166, 43, .17), transparent 25rem),
    radial-gradient(circle at 90% 10%, rgba(148, 22, 47, .12), transparent 27rem),
    #f8f1e3;
  font-family: "Segoe UI", Arial, sans-serif;
}

.site-header {
  min-height: 132px;
  height: 132px;
  background: linear-gradient(100deg, #171416, #320b14 54%, #171416);
  border-bottom: 3px solid var(--city-gold);
  box-shadow: 0 12px 32px rgba(43, 15, 20, .24);
}

.juwa-brand,
.site-header .juwa-brand,
.footer-top .juwa-brand {
  width: clamp(250px, 30vw, 410px);
  height: 124px;
}

.juwa-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .32)) drop-shadow(0 0 11px rgba(233, 187, 63, .24));
}

.site-header .btn,
.signup-card .btn,
.cta .btn,
.auth-button {
  background: linear-gradient(135deg, #b4203e, #7a1027);
  border: 1px solid var(--city-gold);
  color: #fff9e8;
  box-shadow: inset 0 1px rgba(255,255,255,.2), 0 8px 20px rgba(70, 7, 24, .24);
}

.site-header .btn:hover,
.signup-card .btn:hover,
.cta .btn:hover,
.auth-button:hover {
  background: linear-gradient(135deg, #cb294a, #8b112c);
  box-shadow: 0 0 0 3px rgba(213, 166, 43, .18), 0 12px 24px rgba(70, 7, 24, .28);
}

.trust-strip.casino-status {
  background: linear-gradient(100deg, #fffdf6, #f6e9c9 50%, #fffdf6);
  border: 1px solid var(--city-line);
  box-shadow: 0 8px 22px rgba(84, 55, 20, .10);
}

.casino-status > strong,
.casino-status > span:not(.live-dot) {
  color: #4b2430;
  background: rgba(255,255,255,.70);
  border-color: rgba(157, 111, 22, .24);
}

.casino-status > strong:before,
.casino-status > span:not(.live-dot):before {
  color: var(--city-gold);
  text-shadow: 0 0 10px rgba(213, 166, 43, .42);
}

.hero {
  min-height: 620px;
  grid-template-columns: 1.08fr .92fr;
  border-radius: 10px 46px 10px 46px;
  background:
    radial-gradient(circle at 80% 18%, rgba(213, 166, 43, .18), transparent 32%),
    linear-gradient(130deg, #fffdf7, #f8ecd2 58%, #f2dfb9);
  border: 1px solid rgba(160, 112, 22, .30);
  box-shadow: 0 24px 54px rgba(70, 42, 16, .13);
}

.hero:before {
  content: 'JUWAMORE · WELCOME TO FABULOUS PLAY';
  color: var(--city-burgundy);
  text-shadow: none;
  letter-spacing: .13em;
}

.hero h1,
.hero h1 em {
  color: var(--city-charcoal);
  font-family: Georgia, Cambria, "Times New Roman", serif;
  font-weight: 800;
}

.hero h1 em { color: var(--city-burgundy); }
.hero-copy > p:not(.eyebrow) { color: #5d5053; }

.hero-copy .eyebrow,
.eyebrow,
.kicker {
  color: #fffaf0 !important;
  background: linear-gradient(135deg, var(--city-burgundy), #5f0b1e);
  text-shadow: none;
  border: 1px solid rgba(213, 166, 43, .58);
}

.mini-proof span {
  color: #562331;
  background: rgba(255,255,255,.76);
  border-color: rgba(149, 104, 21, .26);
}

.signup-card {
  transform: translateY(86px);
  color: #fff8e8;
  background:
    radial-gradient(circle at 90% 4%, rgba(213,166,43,.20), transparent 30%),
    linear-gradient(150deg, #5e0d22, #26070f);
  border: 2px solid var(--city-gold);
  box-shadow: 0 28px 58px rgba(49, 7, 18, .30), 0 0 26px rgba(213, 166, 43, .14);
}

.signup-card h2,
.signup-card h3,
.signup-card label,
.signup-card strong,
.signup-card .price,
.signup-card .form-title {
  color: #fff9e9;
}

.signup-card h2 span { color: var(--city-gold-light); }
.signup-card small,
.signup-card .check span { color: #e9d9cf; }

.signup-card input,
.signup-card select,
.signup-card textarea {
  color: #2b1e21;
  background: #fffdf8;
  border-color: rgba(231, 194, 93, .58);
}

.signup-card input::placeholder { color: #77666a; }
.signup-card input:focus { border-color: var(--city-gold); box-shadow: 0 0 0 3px rgba(213,166,43,.20); }

.featured-hot-games,
.top-game-marquee {
  border: 1px solid rgba(157, 111, 22, .30);
  background: linear-gradient(115deg, #fffdf7, #f7e9ca 58%, #fffaf0);
  box-shadow: 0 16px 35px rgba(85, 48, 17, .11);
}

.featured-hot-label strong,
.top-games-heading h2,
.top-game-copy strong,
.featured-hot-games .hot-game .top-game-copy strong {
  color: #48212b;
}

.featured-hot-label small,
.top-game-copy small,
.featured-hot-games .hot-game .top-game-copy small,
.top-games-hint {
  color: #6a5758;
}

.top-games-heading h2,
.section-heading h2,
.why-intro h2,
.social-promo-head h2,
.fund-banner h2,
.final-cta h2 {
  font-family: Georgia, Cambria, "Times New Roman", serif;
  font-weight: 800;
}

.top-games-heading a,
.alpha-text-link,
.reward-dock a,
.social-promo a {
  color: #8c1831;
}

.top-games-window .top-game-tile,
.featured-hot-games .top-game-tile.hot-game,
.game-card,
.review-card,
.promo-new,
.promo-daily,
.promo-community,
.benefits article,
.reward-dock article {
  background: var(--city-paper);
  border-color: rgba(157, 111, 22, .25);
  box-shadow: 0 10px 24px rgba(85, 48, 17, .09);
}

.top-games-window .top-game-tile:hover,
.game-card:hover,
.review-card:hover {
  border-color: var(--city-gold);
  box-shadow: 0 16px 30px rgba(148, 22, 47, .14);
}

.games {
  background: linear-gradient(180deg, #fff9ed, #f3e5c9);
  border-top: 1px solid var(--city-line);
  border-bottom: 1px solid var(--city-line);
}

.game-filters button.active,
.category-pills a:hover,
.game-card .tag,
.game-tile .tag {
  color: #fff;
  background: linear-gradient(135deg, var(--city-burgundy), #650c20);
}

.fund-banner,
.final-cta {
  color: #fff8e8;
  background: linear-gradient(110deg, #3a0915, #86152e 58%, #4a0918);
  border: 1px solid var(--city-gold);
}

.fund-banner h2,
.fund-banner p,
.final-cta h2,
.final-cta .cta-note { color: #fff8e8; }

.site-footer,
.footer {
  color: #d9cdca;
  background: #1b1718;
  border-top: 3px solid var(--city-gold);
}

.site-footer p,
.fine-print p,
.footer-links a { color: #c9bbba; }
.footer-links h3 { color: var(--city-gold-light); }
.socials a { color: #fff7e3; border-color: rgba(213,166,43,.38); }

.login-dialog {
  color: #2d2023;
  background: #fffaf0;
  border: 2px solid var(--city-gold);
}

.login-dialog h2,
.login-dialog label,
.login-dialog p,
.login-dialog small,
.login-options button { color: #4f3037; }

/* Promotional photography blended into selected feature panels. */
.social-promo {
  position: relative;
  overflow: hidden;
  padding: clamp(42px, 6vw, 78px);
  border: 1px solid rgba(213, 166, 43, .45);
  border-radius: 36px 10px 36px 10px;
  background:
    linear-gradient(90deg, rgba(38, 5, 13, .96) 0%, rgba(64, 8, 21, .88) 43%, rgba(56, 5, 16, .34) 75%),
    url('assets/social-art/juwa-city-casino-host.png') center / cover no-repeat;
  box-shadow: 0 24px 50px rgba(53, 9, 20, .24);
}

.social-promo-head {
  position: relative;
  z-index: 1;
  max-width: 58%;
}

.social-promo-head h2,
.social-promo-head > p {
  color: #fff8e8;
}

.promo-cards {
  position: relative;
  z-index: 1;
}

.promo-new,
.promo-daily,
.promo-community {
  background: rgba(255, 253, 247, .94);
  backdrop-filter: blur(9px);
}

.fund-banner {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(35, 4, 12, .98) 0%, rgba(75, 8, 26, .86) 48%, rgba(42, 4, 13, .22) 78%),
    url('assets/social-art/juwa-city-casino-host.png') center / cover no-repeat;
  box-shadow: 0 24px 50px rgba(53, 9, 20, .24);
}

.fund-banner > div:not(.coin-stack) {
  position: relative;
  z-index: 1;
  max-width: 54%;
}

.fund-banner .coin-stack { display: none; }
.fund-banner .btn { position: relative; z-index: 1; }

@media (max-width: 800px) {
  .social-promo,
  .fund-banner {
    background-position: 64% center;
  }

  .social-promo-head,
  .fund-banner > div:not(.coin-stack) {
    max-width: 78%;
  }
}

@media (max-width: 580px) {
  .social-promo,
  .fund-banner {
    background-position: 72% center;
  }

  .social-promo-head,
  .fund-banner > div:not(.coin-stack) {
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .site-header { height: 108px; min-height: 108px; }
  .juwa-brand, .site-header .juwa-brand { width: 275px; height: 100px; }
  .hero { grid-template-columns: 1fr; }
  .signup-card { transform: translateY(42px); }
}

@media (max-width: 620px) {
  .site-header { height: 92px; min-height: 92px; }
  .juwa-brand, .site-header .juwa-brand { width: 215px; height: 84px; }
  .hero { border-radius: 8px 28px 8px 28px; }
  .signup-card { transform: none; }
}

/* JUWAMORE text-only wordmark — no illustrated logo panel. */
.juwa-brand img,
.login-brand-logo {
  display: none !important;
}

.juwa-brand,
.site-header .juwa-brand,
.footer-top .juwa-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: clamp(245px, 25vw, 390px);
  height: auto;
  text-decoration: none;
}

.juwa-brand::before,
.login-brand::before {
  content: 'JUWAMORE';
  display: inline-block;
  font: 950 clamp(34px, 4.2vw, 66px)/.9 Georgia, Cambria, 'Times New Roman', serif;
  letter-spacing: -.045em;
  color: #b71f3f;
  background: linear-gradient(180deg, #fff3ba 0%, #e1ac31 24%, #bc203d 48%, #741027 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255, 223, 126, .82);
  text-shadow:
    0 2px 0 #641023,
    0 5px 0 rgba(52, 6, 17, .72),
    0 0 13px rgba(224, 168, 39, .40);
  white-space: nowrap;
}

.login-brand::before {
  font-size: clamp(34px, 6vw, 54px);
}

@media (max-width: 620px) {
  .juwa-brand,
  .site-header .juwa-brand {
    min-width: 190px;
  }

  .juwa-brand::before {
    font-size: 36px;
  }
}

/* Real DOM wordmark: overrides inherited image-logo glow pseudo-elements. */
.site-header .juwa-brand::before,
.site-header .juwa-brand::after,
.footer-top .juwa-brand::before,
.footer-top .juwa-brand::after,
.login-brand::before,
.login-brand::after {
  content: none !important;
  display: none !important;
}

.juwamore-wordmark {
  display: inline-block;
  position: relative;
  z-index: 3;
  padding: 0 .18em .14em .05em;
  font: italic 900 clamp(36px, 4.5vw, 70px)/.88 'Palatino Linotype', Palatino, Georgia, serif;
  letter-spacing: -.065em;
  color: #d7a634;
  background: linear-gradient(180deg, #fff8cf 0%, #efc958 21%, #c32644 51%, #700d25 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 226, 133, .90);
  text-shadow:
    1px 2px 0 #701126,
    2px 4px 0 #4d0918,
    4px 7px 5px rgba(30, 3, 10, .58),
    0 0 15px rgba(231, 176, 42, .46);
  transform: skewX(-5deg) rotate(-1deg);
  transform-origin: center;
  white-space: nowrap;
}

.juwamore-wordmark::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 1%;
  bottom: 0;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, #f5d46f 12%, #b61c39 75%, transparent);
  box-shadow: 0 2px 0 #641023, 0 0 9px rgba(239, 192, 67, .46);
  transform: skewX(-18deg) rotate(-1.5deg);
}

.login-brand .juwamore-wordmark {
  font-size: clamp(34px, 6vw, 54px);
}

@media (max-width: 620px) {
  .juwa-brand .juwamore-wordmark {
    font-size: 36px;
  }
}

/* JUWAMORE palette variation: plum, antique gold, ivory and emerald. */
:root {
  --city-wine: #3d102f;
  --city-burgundy: #852044;
  --city-red: #aa2b53;
  --city-gold: #d5ad49;
  --city-gold-light: #f3dc94;
  --city-cream: #fff8e9;
  --city-paper: #fffdf7;
  --city-charcoal: #211920;
  --city-blue: #175c59;
  --city-muted: #675862;
  --city-line: rgba(142, 103, 36, .26);
}

body {
  background:
    radial-gradient(circle at 9% 3%, rgba(213, 173, 73, .18), transparent 25rem),
    radial-gradient(circle at 92% 12%, rgba(92, 27, 74, .15), transparent 28rem),
    #f7f0e5;
}

.site-header {
  background: linear-gradient(100deg, #171116, #42132f 54%, #151715);
  border-bottom-color: #d5ad49;
}

.site-header .btn,
.signup-card .btn,
.cta .btn,
.auth-button {
  background: linear-gradient(135deg, #a32a50, #5f173b);
  border-color: #d5ad49;
}

.site-header .btn:hover,
.signup-card .btn:hover,
.cta .btn:hover,
.auth-button:hover {
  background: linear-gradient(135deg, #b93760, #721b46);
}

.hero {
  background:
    radial-gradient(circle at 82% 17%, rgba(24, 102, 95, .12), transparent 30%),
    radial-gradient(circle at 12% 84%, rgba(170, 43, 83, .10), transparent 34%),
    linear-gradient(130deg, #fffdf7, #f7ead2 58%, #efe0c3);
}

.hero:before,
.hero h1 em,
.top-games-heading a,
.alpha-text-link,
.reward-dock a,
.social-promo a {
  color: #7f1f44;
}

.signup-card {
  background:
    radial-gradient(circle at 90% 4%, rgba(213,173,73,.20), transparent 30%),
    linear-gradient(150deg, #54163d, #21101d);
}

.featured-hot-games,
.top-game-marquee {
  background: linear-gradient(115deg, #fffdf7, #f5e9d1 55%, #f2e7ec);
}

.game-filters button.active,
.category-pills a:hover,
.game-card .tag,
.game-tile .tag {
  background: linear-gradient(135deg, #852044, #185e59);
}

.fund-banner,
.final-cta {
  background:
    linear-gradient(110deg, rgba(44, 11, 34, .96), rgba(108, 26, 66, .84) 58%, rgba(17, 77, 72, .35)),
    url('assets/social-art/juwa-city-casino-host.png') center / cover no-repeat;
}

/* Casino-chip player avatars. */
.review-card .avatar {
  width: 52px;
  height: 52px;
  position: relative;
  flex: 0 0 52px;
  color: #4a1637;
  background:
    radial-gradient(circle, #fffaf0 0 49%, transparent 50%),
    repeating-conic-gradient(#d5ad49 0 10deg, #6d244c 10deg 20deg);
  border: 3px solid #f1d680;
  box-shadow: inset 0 0 0 4px #6d244c, 0 5px 14px rgba(59, 15, 43, .22);
  font: 900 23px/1 Georgia, serif;
}

.review-card .avatar-diamond {
  color: #9e234b;
  background:
    radial-gradient(circle, #fffaf0 0 49%, transparent 50%),
    repeating-conic-gradient(#d5ad49 0 10deg, #1a625d 10deg 20deg);
  box-shadow: inset 0 0 0 4px #1a625d, 0 5px 14px rgba(20, 81, 76, .20);
}

.review-card .avatar-crown {
  color: #8a6620;
  background:
    radial-gradient(circle, #fffaf0 0 49%, transparent 50%),
    repeating-conic-gradient(#d5ad49 0 10deg, #33252d 10deg 20deg);
  box-shadow: inset 0 0 0 4px #33252d, 0 5px 14px rgba(33, 25, 32, .22);
}