/* Gold Room layout refresh: a new visual hierarchy for the landing page. */
:root {
  --ink: #1b0905;
  --ink-2: #3a1609;
  --surface: #48200d;
  --cream: #fff0c9;
  --violet: #a83b0b;
  --electric: #ffd25a;
  --coral: #f06a17;
  --lime: #ffe083;
  --aqua: #ffaf32;
  --muted: #f1cfa4;
  --line: rgba(255, 216, 104, .42);
}

body { background: #1b0905; }
.site-header {
  height: 146px;
  margin-top: 0;
  background: linear-gradient(90deg, #25130a, #5c3015 45%, #1a0d08);
  border-bottom: 1px solid rgba(246, 198, 104, .25);
}
.site-header .nav-links a { color: #f9e8c7; text-shadow: none; }
.site-header .nav-links a {
  position: relative;
  padding: 9px 12px;
  border: 1px solid rgba(244, 119, 23, .35);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(82, 26, 8, .72), rgba(25, 9, 5, .72));
  box-shadow: inset 0 1px rgba(255, 224, 143, .12), 0 0 12px rgba(240, 75, 12, .1);
}
.site-header .nav-links a:hover {
  color: #ffe2a0;
  border-color: rgba(255, 187, 52, .68);
  background: linear-gradient(145deg, #8b330d, #351006);
  box-shadow: inset 0 1px rgba(255, 232, 158, .26), 0 0 18px rgba(247, 104, 16, .22);
}
.site-header .btn-ghost {
  color: #ffe7ba;
  border-color: rgba(246, 129, 28, .6);
  background: linear-gradient(145deg, rgba(99, 31, 9, .9), rgba(28, 9, 5, .94));
  box-shadow: inset 0 1px rgba(255, 223, 138, .18), 0 0 16px rgba(239, 77, 10, .13);
}
.site-header .btn-ghost:hover { border-color: #ffc24b; background: linear-gradient(145deg, #a43d0c, #471306); }
.site-header .btn-primary {
  color: #fff0ca;
  border: 1px solid rgba(255, 194, 68, .68);
  background: linear-gradient(145deg, #e15a11 0%, #9a300a 50%, #401006 100%);
  box-shadow: inset 0 1px rgba(255, 231, 152, .34), inset 0 -2px rgba(55, 8, 3, .45), 0 0 17px rgba(240, 78, 9, .18);
}
.site-header .btn-primary:hover { background: linear-gradient(145deg, #f27817, #b13c0b 53%, #511306); box-shadow: inset 0 1px rgba(255, 236, 165, .45), 0 0 23px rgba(255, 111, 12, .28); }
.site-header .menu-toggle {
  color: #ffe7ba;
  border-color: rgba(246, 129, 28, .6);
  background: linear-gradient(145deg, rgba(99, 31, 9, .92), rgba(28, 9, 5, .96));
  box-shadow: inset 0 1px rgba(255, 223, 138, .18), 0 0 16px rgba(239, 77, 10, .13);
}
.site-header .menu-toggle:hover,
.site-header .menu-toggle[aria-expanded="true"] {
  color: #fff0cb;
  border-color: #ffc24b;
  background: linear-gradient(145deg, #a43d0c, #471306);
  box-shadow: inset 0 1px rgba(255, 232, 158, .28), 0 0 19px rgba(247, 104, 16, .22);
}
.juwa-brand,
.site-header .juwa-brand,
.footer-top .juwa-brand {
  width: clamp(300px, 29vw, 425px);
  height: 136px;
  padding: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
  isolation: auto;
}
.juwa-brand:before,
.juwa-brand:after { display: none; }
.juwa-brand img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  -webkit-mask-image: none;
  mask-image: none;
  filter: drop-shadow(0 0 3px #fff6b2) drop-shadow(0 0 10px #ffb21d) drop-shadow(0 0 24px #f24f0e) drop-shadow(0 6px 12px rgba(0,0,0,.44));
}
.site-header .juwa-brand { isolation: isolate; }
.site-header .juwa-brand:before {
  content: ''!important;
  display: block!important;
  position: absolute;
  z-index: -1;
  inset: 18% -8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 159, 23, .48) 0%, rgba(244, 67, 8, .24) 34%, transparent 72%);
  filter: blur(13px);
  opacity: .9;
}
.trust-strip.casino-status {
  min-height: 66px;
  margin-top: 22px;
  padding: 11px clamp(16px, 4vw, 62px);
  justify-content: center;
  gap: 10px;
  color: #ffe8bd;
  background: linear-gradient(90deg, #220b05, #4b1708 50%, #220b05);
  border-bottom: 1px solid rgba(255, 177, 50, .27);
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: .025em;
}
.casino-status .live-dot {
  display: none;
}
.casino-status > strong,
.casino-status > span:not(.live-dot) {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 192, 70, .38);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(115, 39, 10, .75), rgba(40, 12, 5, .88));
  box-shadow: inset 0 1px rgba(255, 234, 171, .12), 0 5px 14px rgba(0, 0, 0, .18);
  color: #ffebbf;
  font-family: Inter, 'Segoe UI', Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.casino-status > strong:before,
.casino-status > span:not(.live-dot):before {
  content: '✦';
  flex: 0 0 auto;
  margin-right: 8px;
  color: #ffd568;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 5px #fff2b6, 0 0 12px rgba(255, 118, 8, .95);
}
.casino-status > strong { color: #ffd36a; border-color: rgba(255, 209, 91, .58); }

.hero {
  min-height: 690px;
  margin: 0 clamp(14px, 3.5vw, 58px);
  padding: clamp(52px, 7vw, 110px) clamp(25px, 7vw, 110px) 138px;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
  gap: clamp(36px, 8vw, 130px);
  border: 1px solid rgba(255, 220, 119, .48);
  border-top: 0;
  border-radius: 0 0 42px 42px;
  background:
    radial-gradient(circle at 12% 42%, rgba(255,188,55,.21), transparent 28%),
    linear-gradient(90deg, rgba(27,9,5,.96) 0%, rgba(54,19,7,.9) 52%, rgba(79,24,6,.54)),
    url('assets/brand/juwa777-brand-art.webp') 74% 50% / cover no-repeat;
}
.hero:before {
  content: 'J U W A  ·  7 7 7';
  position: absolute;
  left: 50%;
  top: 28px;
  width: min(92%, 760px);
  transform: translateX(-50%);
  text-align: center;
  color: rgba(247,207,118,.65);
  font-family: Georgia, Cambria, 'Times New Roman', serif;
  font-size: clamp(14px, 1.45vw, 21px);
  font-weight: 800;
  letter-spacing: .48em;
  text-shadow: 0 0 16px rgba(255, 133, 13, .46);
}
.hero-copy { max-width: 680px; padding-top: 42px; }
.hero h1 { font-size: clamp(52px, 7vw, 96px); max-width: 680px; }
.hero h1 em, .why h2 em { color: #f7cf76; }
.hero h1 {
  font-family: Georgia, Cambria, 'Times New Roman', serif;
  font-size: clamp(56px, 6.8vw, 94px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .98;
  text-shadow: 0 4px 24px rgba(255, 172, 39, .18);
}
.hero h1 em {
  display: inline-block;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: .78em;
  font-weight: 800;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.hero-copy > p:not(.eyebrow) {
  color: #ffe1ae;
  max-width: 610px;
  font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.7;
}
.eyebrow, .mini-proof { color: #ffd368; }
.hero-copy .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 5px;
  color: #ffe0a0;
  font-family: Georgia, 'Palatino Linotype', 'Times New Roman', serif;
  font-size: clamp(16px, 1.55vw, 23px);
  font-weight: 700;
  letter-spacing: .11em;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(255, 147, 18, .36);
}
.hero-copy .eyebrow:before,
.hero-copy .eyebrow:after {
  content: '';
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ffb334);
  box-shadow: 0 0 9px rgba(255, 132, 12, .7);
}
.hero-copy .eyebrow:after { background: linear-gradient(90deg, #ffb334, transparent); }
.hero-copy .mini-proof {
  display: flex;
  gap: 10px;
  margin-top: 28px;
  color: #ffe8bd;
}
.hero-copy .mini-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid rgba(255, 192, 70, .42);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(115, 39, 10, .78), rgba(40, 12, 5, .9));
  box-shadow: inset 0 1px rgba(255, 234, 171, .12), 0 7px 16px rgba(0, 0, 0, .17);
  color: #ffebbf;
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.hero-copy .mini-proof span:before {
  content: '✦';
  margin-right: 8px;
  color: #ffd568;
  font-size: 14px;
  line-height: 1;
  text-shadow: 0 0 5px #fff2b6, 0 0 12px rgba(255, 118, 8, .95);
}

/* Hot Games: editorial type paired with a custom molten-flame mark. */
.featured-hot-games {
  border-color: rgba(255, 181, 55, .52);
  background: radial-gradient(circle at 10% 50%, rgba(255, 114, 16, .3), transparent 28%), linear-gradient(110deg, #481706, #7f280b 54%, #301005);
}
.featured-hot-label > .hot-fire-mark {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: url('assets/brand/hot-games-lava-flame.png') center / contain no-repeat;
  filter: drop-shadow(0 0 5px #ffdb6a) drop-shadow(0 0 15px rgba(255, 77, 7, .7));
}
.featured-hot-label > .hot-fire-mark:before,
.featured-hot-label > .hot-fire-mark:after {
  display: none;
}
.featured-hot-label strong {
  color: #fff0cb;
  font-family: Baskerville, Georgia, Cambria, 'Times New Roman', serif;
  font-size: clamp(19px, 1.75vw, 26px);
  font-weight: 700;
  letter-spacing: .08em;
  text-shadow: 0 0 14px rgba(255, 119, 12, .28);
}
.featured-hot-label small { color: #ffdca0; font-family: 'Segoe UI', Arial, sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.hot-game .top-game-copy strong { font-family: Georgia, Cambria, 'Times New Roman', serif; font-size: 18px; letter-spacing: .01em; }

/* JUWA Spark carries the same molten wordmark language as the header logo. */
.alpha-slot-shell { border-color: rgba(255, 190, 62, .38); background: linear-gradient(160deg, #51210c, #1b0a05); box-shadow: 0 35px 90px rgba(0,0,0,.45), 0 0 55px rgba(244, 89, 12, .2); }
.slot-title { background: radial-gradient(circle at 50% 125%, #ffcf56 0%, #f06a14 33%, #9c2f0c 61%, #411206 100%); border: 1px solid rgba(255, 220, 125, .48); box-shadow: inset 0 1px rgba(255,255,255,.34), 0 0 24px rgba(250, 90, 9, .26); }
.slot-title p { color: #ffe9bc; text-shadow: 0 0 8px rgba(255, 189, 58, .34); }
.slot-title > span { color: #ffe070; text-shadow: 0 0 10px #ff8a14, 0 0 22px rgba(255, 76, 8, .78); }
.slot-title h3 {
  color: transparent;
  font-family: Georgia, Cambria, 'Times New Roman', serif;
  font-size: clamp(29px, 4.2vw, 45px);
  font-weight: 800;
  letter-spacing: .075em;
  background: linear-gradient(180deg, #fff4b2 0%, #ffd35e 25%, #ff821b 55%, #c63009 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(91, 19, 5, .82);
  text-shadow: 0 2px 0 rgba(81, 15, 4, .78), 0 0 15px rgba(255, 99, 9, .64);
}

.signup-card {
  padding: 34px;
  border-radius: 6px;
  border: 1px solid rgba(255,225,132,.95);
  background: linear-gradient(155deg, rgba(109,43,9,.98), rgba(35,12,5,.99));
  box-shadow: 0 0 0 4px rgba(255,174,43,.16), 16px 16px 0 rgba(171,58,10,.52), 0 28px 70px rgba(0,0,0,.48), 0 0 42px rgba(255,159,27,.22);
}
/* Disable the earlier animated frame layers; the card border is the single outline. */
.signup-card:before,
.signup-card:after { content: none!important; display: none!important; }
.signup-card h2 span { color: #f7cf76; }
.signup-card h2 {
  font-family: 'Bodoni MT', Didot, Baskerville, Georgia, serif;
  font-size: clamp(38px, 3.3vw, 52px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .94;
  color: #fff0cf;
  text-shadow: 0 2px 0 rgba(76, 18, 5, .6), 0 0 16px rgba(255, 124, 14, .16);
}
.signup-card h2 span {
  display: inline-block;
  margin-top: 5px;
  color: transparent;
  font-family: 'Trebuchet MS', Arial, sans-serif;
  font-size: .78em;
  font-weight: 800;
  letter-spacing: -.045em;
  background: linear-gradient(180deg, #fff4ae, #ffd15a 42%, #f27115 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(86, 19, 5, .5);
  text-shadow: 0 0 13px rgba(255, 121, 9, .34);
}
.signup-card input[type=email], .signup-card input[type=text], .signup-card input[type=password] { background: #230d05; border-color: rgba(255,218,105,.54); box-shadow: inset 0 1px rgba(255,255,255,.07); }
.signup-card input:focus { border-color: #ffe083; box-shadow: 0 0 0 3px rgba(255,192,49,.22), inset 0 1px rgba(255,255,255,.1); }
.btn-primary { color: #351304; background: linear-gradient(110deg, #ffe994, #ffbf35 48%, #ee5a12); box-shadow: inset 0 1px rgba(255,255,255,.7), 0 8px 22px rgba(239,91,15,.36); }

/* The game rail now acts as a lower "lobby floor" beneath the first impression. */
.top-game-marquee {
  z-index: 4;
  margin: -94px clamp(28px, 8vw, 140px) 54px;
  padding: 26px 0 22px;
  border-radius: 6px;
  border-color: rgba(255,218,104,.75);
  background: radial-gradient(circle at 14% 0%, rgba(255,209,74,.25), transparent 32%), linear-gradient(105deg, #59250b, #a44812 54%, #421708);
  box-shadow: 0 0 0 4px rgba(255,173,36,.12), 0 24px 55px rgba(0,0,0,.42), 0 0 45px rgba(255,135,18,.2);
}
.top-games-heading { padding: 0 30px 18px; }
.top-games-heading h2 { font-size: clamp(27px, 3vw, 42px); }
.top-games-heading>a { color: #f7cf76; }
.top-game-tile { border-radius: 6px; background: linear-gradient(145deg, rgba(83,32,8,.78), rgba(21,8,4,.7)); border-color: rgba(255,225,130,.44); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 10px 21px rgba(31,8,2,.22); }
.top-game-tile:hover { border-color: #ffe083; box-shadow: 0 0 24px rgba(255,190,47,.38), inset 0 1px rgba(255,255,255,.17); }
.top-game-icon { border-radius: 4px; outline: 1px solid rgba(255,239,170,.55); outline-offset: 3px; }
.top-games-hint { color: #e5bd80; padding: 0 30px; }

.games { background: radial-gradient(circle at 75% 15%, rgba(255,147,20,.13), transparent 30%), linear-gradient(180deg, #260d05, #160704); }
.games-grid { scrollbar-color: #f0b348 #2d170d; }
.games-grid::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #7d3517, #f0b348); }
.game-card { background: linear-gradient(155deg, #57240d, #271006); border-color: rgba(255,219,108,.42); border-radius: 8px; box-shadow: inset 0 1px rgba(255,255,255,.1), 0 14px 28px rgba(0,0,0,.18); }
.game-card:hover { border-color: #ffe083; box-shadow: 0 0 0 2px rgba(255,182,37,.16), 0 17px 32px rgba(0,0,0,.28), 0 0 28px rgba(255,153,17,.22); }
.game-art { box-shadow: inset 0 0 0 1px rgba(255,235,162,.36); }
.final-cta, .avatar, .game-tag { background: #f7cf76; }

@media (max-width: 900px) {
  .site-header { height: 122px; margin-top: 0; }
  .site-header .nav-links { top: 122px; }
  .hero { grid-template-columns: 1fr; padding-bottom: 130px; }
  .hero-copy { padding-top: 28px; }
  .signup-card { max-width: 560px; }
  .top-game-marquee { margin: -72px 24px 38px; }
}
@media (max-width: 620px) {
  .site-header { height: 94px; margin-top: 0; }
  .site-header .nav-links { top: 94px; }
  .juwa-brand,
  .site-header .juwa-brand { width: 232px; height: 88px; }
  .footer-top .juwa-brand { width: 188px; height: 72px; }
  .trust-strip.casino-status { margin-top: 14px; justify-content: flex-start; overflow-x: auto; padding: 10px 14px; }
  .casino-status > strong,
  .casino-status > span:not(.live-dot) { min-height: 34px; padding: 7px 11px; font-size: 9px; }
  .hero { margin: 0 10px; padding: 68px 22px 104px; border-radius: 0 0 26px 26px; }
  .hero:before { left: 50%; letter-spacing: .25em; font-size: 13px; }
  .hero h1 { font-size: 52px; }
  .signup-card { padding: 26px; box-shadow: 9px 9px 0 rgba(116,55,25,.38); }
  .top-game-marquee { margin: -53px 18px 34px; padding-top: 22px; }
  .top-games-heading { padding: 0 20px 17px; }
  .top-games-hint { padding: 0 20px; }
}