/* JUWA2 — custom black, crimson, ivory and gold artwork theme. */
:root {
  --two-black: #0b0706;
  --two-charcoal: #1b1210;
  --two-crimson: #a91520;
  --two-red: #dd2c2d;
  --two-gold: #e0aa32;
  --two-gold-light: #ffe29a;
  --two-ivory: #fff7e5;
  --two-muted: #cbb8ae;
  --two-line: rgba(224, 170, 50, .26);
}

body {
  color: var(--two-ivory);
  background:
    radial-gradient(circle at 7% 4%, rgba(184, 30, 29, .24), transparent 26rem),
    radial-gradient(circle at 92% 18%, rgba(224, 170, 50, .13), transparent 28rem),
    var(--two-black);
}

.site-header {
  height: 112px;
  min-height: 112px;
  background: linear-gradient(100deg, #080504, #35110b 52%, #0b0706);
  border-bottom: 2px solid #d89e29;
  box-shadow: 0 12px 36px rgba(0,0,0,.34);
}

.juwa-brand,
.site-header .juwa-brand,
.footer-top .juwa-brand {
  width: clamp(285px, 30vw, 430px);
  min-width: 0;
  height: 104px;
}

.juwa-brand img,
.login-brand-logo {
  display: block !important;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  filter: drop-shadow(0 5px 13px rgba(0,0,0,.36));
}

.juwamore-wordmark { display: none !important; }

.site-header .btn,
.signup-card .btn,
.auth-button {
  color: #160a05;
  background: linear-gradient(135deg, #ffe08b, #d6931d 55%, #b81722);
  border: 1px solid #ffd673;
  box-shadow: inset 0 1px rgba(255,255,255,.45), 0 9px 24px rgba(0,0,0,.30);
}

.site-header .btn:hover,
.signup-card .btn:hover,
.auth-button:hover {
  background: linear-gradient(135deg, #fff0b0, #e7aa36 55%, #d0252b);
}

.trust-strip.casino-status {
  width: min(1180px, calc(100% - 44px));
  background: linear-gradient(90deg, #25110d, #5b1814 50%, #25110d);
  border: 1px solid var(--two-line);
  border-radius: 8px;
}

.casino-status > strong,
.casino-status > span:not(.live-dot) {
  color: #f8e7c7;
  background: rgba(0,0,0,.20);
  border-color: rgba(224,170,50,.24);
}

.top-game-marquee,
.featured-hot-games {
  background:
    radial-gradient(circle at 86% 0%, rgba(211, 38, 38, .24), transparent 34%),
    linear-gradient(120deg, #1e0d0a, #120b0a 65%, #32120e);
  border-color: rgba(224,170,50,.28);
}

.top-game-marquee { border-radius: 24px 8px 24px 8px; }
.featured-hot-games { border-radius: 8px 24px 8px 24px; }
.featured-hot-games { display: none !important; }
.top-games-heading h2,
.featured-hot-label strong { color: #fff2d2; }
.top-games-heading a { color: #f3bd52; }
.top-games-hint,
.featured-hot-label small { color: #c9aa99; }

.top-games-window .top-game-tile,
.featured-hot-games .top-game-tile.hot-game {
  background: linear-gradient(145deg, rgba(174,25,29,.18), rgba(255,255,255,.035));
  border-color: rgba(224,170,50,.24);
}

.top-games-window .top-game-copy strong,
.featured-hot-games .hot-game .top-game-copy strong { color: #fff1d0; }
.top-games-window .top-game-copy small,
.featured-hot-games .hot-game .top-game-copy small { color: #c9b2a5; }

/* Split JUWA platform lobby above the scrolling collection. */
.top-game-marquee {
  margin-top: 72px;
  padding-top: 48px;
}

.juwa-platform-lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 0 clamp(24px, 4vw, 58px) 42px;
}

.platform-lanes-intro {
  grid-column: 1 / -1;
  max-width: 760px;
  margin: 4px auto 12px;
  text-align: center;
}

.platform-lanes-intro p {
  margin: 0 0 7px;
  color: #e6b84d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .20em;
}

.platform-lanes-intro h2 {
  margin: 0;
  color: #fff2d4;
  font: 800 clamp(30px, 4vw, 48px)/1 Georgia, Cambria, 'Times New Roman', serif;
  letter-spacing: -.035em;
}

.platform-lanes-intro span {
  display: block;
  margin-top: 10px;
  color: #c9b2a5;
  font-size: 12px;
}

.juwa-platform-lane {
  min-width: 0;
  min-height: 410px;
  padding: 28px;
  border: 1px solid rgba(224,170,50,.30);
  border-radius: 22px 7px 22px 7px;
  background:
    radial-gradient(circle at 100% 0%, rgba(221,44,45,.18), transparent 34%),
    linear-gradient(145deg, rgba(96,19,16,.72), rgba(13,8,7,.88));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 14px 28px rgba(0,0,0,.20);
}

.juwa-platform-lane.lane-classic {
  border-radius: 7px 22px 7px 22px;
  background:
    radial-gradient(circle at 0 0, rgba(224,170,50,.17), transparent 34%),
    linear-gradient(145deg, rgba(48,24,11,.78), rgba(13,8,7,.88));
}

.lane-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 17px;
  margin-bottom: 17px;
  border-bottom: 1px solid rgba(224,170,50,.20);
}

.lane-heading > span {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border: 1px solid #e4b345;
  border-radius: 50%;
  color: #180905;
  background: linear-gradient(145deg, #ffe49c, #c98615);
  box-shadow: 0 0 17px rgba(224,170,50,.24);
  font: 900 18px Georgia, serif;
}

.lane-heading div { min-width: 0; }
.lane-heading small { color: #c9ac9d; font-size: 8px; font-weight: 900; letter-spacing: .16em; }
.lane-heading h3 { margin: 2px 0 0; color: #fff0cd; font: 800 32px/1 Georgia, serif; }

.lane-heading .lane-header-logo {
  width: 112px;
  height: 78px;
  flex: 0 0 112px;
  padding: 5px;
  object-fit: contain;
  border: 1px solid rgba(224,170,50,.48);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(89,15,12,.40));
  box-shadow: 0 9px 20px rgba(0,0,0,.24), 0 0 17px rgba(211,42,40,.16);
}

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

.lane-game {
  min-width: 0;
  min-height: 96px;
  padding: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(224,170,50,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.045);
}

.lane-game.live {
  background: linear-gradient(135deg, rgba(183,24,31,.28), rgba(255,255,255,.055));
  border-color: rgba(231,181,62,.42);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.lane-game.live:hover {
  transform: translateY(-3px);
  border-color: #f0c45a;
  box-shadow: 0 10px 22px rgba(0,0,0,.24), 0 0 18px rgba(212,39,39,.14);
}

.lane-game img,
.lane-game > b {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 10px;
  object-fit: cover;
}

.lane-game > b {
  display: grid;
  place-items: center;
  border: 1px dashed rgba(224,170,50,.42);
  color: #ddb14c;
  background: rgba(255,255,255,.025);
  font: 300 26px/1 Arial, sans-serif;
}

.lane-game > span { min-width: 0; display: flex; flex-direction: column; }
.lane-game strong { color: #fff1d2; font-size: 13px; line-height: 1.2; }
.lane-game small { margin-top: 5px; color: #bda89e; font-size: 9px; line-height: 1.35; }
.lane-game.open-slot { border-style: dashed; opacity: .76; }

/* JUWA 2.0 supplied game-icon gallery. */
.lane-two,
.lane-classic {
  min-height: 650px;
}

.lane-two .lane-game-grid,
.lane-classic .lane-game-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 11px;
}

.lane-icon-game {
  min-width: 0;
  aspect-ratio: 1 / 1;
  padding: 7px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(224,170,50,.28);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(255,255,255,.09), rgba(73,12,10,.24));
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 9px 18px rgba(0,0,0,.20);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.lane-icon-game:hover,
.lane-icon-game:focus-visible {
  transform: translateY(-4px) scale(1.02);
  border-color: #f2c555;
  box-shadow: 0 13px 24px rgba(0,0,0,.26), 0 0 18px rgba(205,38,38,.18);
  outline: none;
}

.lane-icon-game img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  border-radius: 8px;
}

.lane-cta {
  width: fit-content;
  min-width: 190px;
  min-height: 48px;
  margin: 26px auto 0;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #ffb14c;
  border-radius: 999px;
  color: #fff6df;
  background: linear-gradient(135deg, #ed3035, #a80e1b 58%, #5b0710);
  box-shadow: inset 0 1px rgba(255,255,255,.30), 0 8px 20px rgba(0,0,0,.30);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  animation: juwa-lane-red-pulse 1.65s ease-in-out infinite;
}

.lane-cta span {
  font-size: 17px;
  transition: transform .2s ease;
}

.lane-cta:hover span { transform: translateX(4px); }

@keyframes juwa-lane-red-pulse {
  0%, 100% {
    filter: brightness(.96);
    box-shadow: inset 0 1px rgba(255,255,255,.28), 0 0 10px rgba(239,43,48,.30), 0 8px 20px rgba(0,0,0,.30);
  }
  50% {
    filter: brightness(1.15);
    box-shadow: inset 0 1px rgba(255,255,255,.42), 0 0 26px rgba(255,48,52,.78), 0 0 48px rgba(183,17,27,.42), 0 8px 20px rgba(0,0,0,.30);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lane-cta { animation: none; }
}

.juwa-platform-lanes + .top-games-window {
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid rgba(224,170,50,.14);
}

.scrolling-platform-intro {
  padding: 5px clamp(24px, 4vw, 58px) 20px;
  text-align: center;
}

.scrolling-platform-intro p {
  margin: 0 0 7px;
  color: #e6b84d;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .20em;
}

.scrolling-platform-intro h3 {
  margin: 0;
  color: #fff1cf;
  font: 800 clamp(26px, 3.4vw, 40px)/1 Georgia, Cambria, 'Times New Roman', serif;
  letter-spacing: -.025em;
}

.scrolling-platform-intro span {
  display: block;
  margin-top: 9px;
  color: #c4aea2;
  font-size: 11px;
}

.scrolling-platform-intro + .top-games-window {
  margin-top: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(224,170,50,.14);
}

/* Icon-only square cards in the scrolling rail. */
.top-games-window .top-game-copy,
.top-games-window .hot-game-badge,
.top-games-hint {
  display: none !important;
}

.top-games-window .top-games-track,
.top-games-window .top-games-group {
  gap: 14px;
}

.top-games-window .top-game-tile,
.top-games-window .top-game-tile.hot-game {
  width: 138px;
  min-width: 138px;
  min-height: 138px;
  aspect-ratio: 1 / 1;
  padding: 15px;
  display: grid;
  place-items: center;
  border-radius: 16px;
}

.top-games-window .top-game-icon,
.top-games-window .hot-game .top-game-icon {
  width: 104px;
  height: 104px;
  flex-basis: 104px;
  border-radius: 14px;
}

.top-games-window .top-game-icon.has-logo img {
  border-radius: 11px;
}

.hero {
  width: min(1400px, calc(100% - 40px));
  min-height: 720px;
  margin: 46px auto 100px;
  padding: clamp(58px, 7vw, 96px);
  grid-template-columns: 1.1fr .82fr;
  gap: clamp(38px, 6vw, 86px);
  color: #fff4df;
  border-radius: 12px 58px 12px 58px;
  background:
    linear-gradient(90deg, rgba(10,5,4,.95) 0%, rgba(43,9,7,.79) 46%, rgba(32,5,4,.24) 76%),
    url('assets/social-art/juwa2-casino-hero.png') center / cover no-repeat;
  border: 1px solid rgba(224,170,50,.34);
  box-shadow: 0 34px 76px rgba(0,0,0,.42);
}

.hero:before {
  content: attr(data-brand-line);
  left: 6%;
  right: auto;
  color: #f1bd55;
}

.hero-copy {
  order: 1;
  max-width: 650px;
  padding: 0;
  text-align: left;
}

.hero h1,
.hero h1 em {
  color: #fff4dd;
  font-family: Georgia, Cambria, 'Times New Roman', serif;
}

.hero h1 em { color: #f1bd55; }
.hero-copy > p:not(.eyebrow) { margin-left: 0; color: #ead8cb; }
.hero-copy .eyebrow { margin-left: 0; }
.mini-proof { justify-content: flex-start; }

.signup-card {
  order: 2;
  transform: translateY(74px);
  background:
    radial-gradient(circle at 90% 0%, rgba(224,170,50,.15), transparent 30%),
    linear-gradient(150deg, rgba(57,12,10,.96), rgba(11,7,7,.98));
  border: 2px solid rgba(224,170,50,.50);
  border-radius: 30px 8px 30px 8px;
  box-shadow: 0 28px 60px rgba(0,0,0,.48), 0 0 32px rgba(193,36,35,.14);
}

.signup-card h2 span { color: #f4c964; }

.reviews {
  color: #24130e;
  background: linear-gradient(135deg, #fff8e9, #edddbd);
  clip-path: none;
  border-top: 5px solid #b91c24;
  border-bottom: 5px solid #d6a638;
}

.review-card.featured {
  background: linear-gradient(145deg, #a71923, #470d0e);
  border-color: rgba(224,170,50,.50);
}

.review-card .avatar {
  background:
    radial-gradient(circle, #fff8e8 0 49%, transparent 50%),
    repeating-conic-gradient(#e0aa32 0 10deg, #b01822 10deg 20deg);
  box-shadow: inset 0 0 0 4px #8f161c, 0 5px 14px rgba(0,0,0,.24);
}

.social-promo,
.fund-banner,
.final-cta {
  background:
    linear-gradient(90deg, rgba(10,5,4,.98), rgba(86,13,12,.80) 52%, rgba(30,4,3,.24)),
    url('assets/social-art/juwa2-casino-hero.png') center / cover no-repeat;
  border-color: rgba(224,170,50,.46);
}

.games {
  background:
    radial-gradient(circle at 10% 0%, rgba(197,28,34,.22), transparent 28%),
    linear-gradient(180deg, #170b09, #0b0807);
  border-color: rgba(224,170,50,.20);
}

.game-card {
  background: linear-gradient(150deg, #32110e, #100b0a);
  border-color: rgba(224,170,50,.20);
}

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

.why {
  background: linear-gradient(115deg, #1c0c0a, #320f0d);
}

.site-footer,
.footer {
  background: #080504;
  border-top-color: rgba(224,170,50,.52);
}

.login-brand {
  min-height: 150px;
}

.login-brand-logo {
  width: 100%;
  height: 150px;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; background-position: 66% center; }
  .signup-card { transform: translateY(35px); }
  .juwa-platform-lanes { grid-template-columns: 1fr; }
  .lane-two .lane-game-grid,
  .lane-classic .lane-game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lane-two,
  .lane-classic { min-height: 0; }
}

@media (max-width: 620px) {
  .site-header { height: 92px; min-height: 92px; }
  .juwa-brand, .site-header .juwa-brand { width: 225px; height: 84px; }
  .hero { width: calc(100% - 24px); padding: 78px 24px 44px; border-radius: 8px 34px 8px 34px; }
  .signup-card { transform: none; }
  .top-game-marquee { margin-top: 42px; }
  .juwa-platform-lanes { padding-inline: 16px; }
  .platform-lanes-intro { text-align: left; margin-inline: 6px; }
  .scrolling-platform-intro { padding-inline: 20px; text-align: left; }
  .lane-game-grid { grid-template-columns: 1fr; }
  .juwa-platform-lane { min-height: 0; padding: 20px; }
  .lane-two .lane-game-grid,
  .lane-classic .lane-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lane-heading .lane-header-logo { width: 92px; height: 66px; flex-basis: 92px; }
  .top-games-window .top-game-tile,
  .top-games-window .top-game-tile.hot-game { width: 120px; min-width: 120px; min-height: 120px; }
  .top-games-window .top-game-icon,
  .top-games-window .hot-game .top-game-icon { width: 90px; height: 90px; flex-basis: 90px; }
}