:root {
  --aqua: #22e6cf;
  --violet: #b41024;
  --coral: #ff5a1f;
  --lime: #90f18d;
  --kirin-ink: #030b10;
  --kirin-navy: #071822;
  --kirin-emerald: #063f36;
  --kirin-gold: #ffd361;
  --kirin-fire: #ff4a16;
}

body {
  background:
    radial-gradient(circle at 78% 7%, rgba(13, 141, 120, .18), transparent 28%),
    linear-gradient(180deg, #02090d, #07151a 46%, #020709);
  color: #f8f3df;
}
main { display: flex; flex-direction: column; }
.hero { order: -2; }
.top-game-marquee { order: -1; }

.site-header {
  background: linear-gradient(90deg, rgba(2, 10, 13, .98), rgba(5, 32, 32, .97), rgba(2, 10, 13, .98));
  border-bottom: 1px solid rgba(255, 195, 70, .38);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .34), inset 0 -1px rgba(38, 230, 204, .08);
}
.site-header .juwa-brand { width: 350px; height: 102px; overflow: visible; }
.site-header .juwa-brand img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 13px rgba(255, 74, 22, .24)); }
.trust-strip.casino-status {
  background: linear-gradient(100deg, #f8e3a0, #fff6d2 44%, #d9fbef);
  color: #10211f;
  border-color: #dca63b;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(255, 255, 255, .76);
}
.trust-strip.casino-status > strong,
.trust-strip.casino-status > span:not(.live-dot) {
  color: #fff7dc;
  background: linear-gradient(145deg, #103c37, #071619);
  border: 1px solid rgba(255, 199, 73, .78);
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 4px 12px rgba(1, 20, 17, .24);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
}
.header-actions .btn-support,
.header-actions .btn-ghost {
  border-color: rgba(255, 202, 83, .5);
  background: rgba(4, 78, 67, .3);
  color: #fff0bd;
}
.header-actions .btn-support:hover,
.header-actions .btn-ghost:hover { background: rgba(8, 116, 99, .48); border-color: #2de5ca; }
.header-actions .btn-primary {
  background: linear-gradient(115deg, #ffe07a, #ff922f 56%, #d51b26);
  color: #1d0704;
  box-shadow: 0 0 0 1px rgba(255, 231, 155, .48), 0 0 24px rgba(255, 75, 22, .22);
}

.hero {
  width: min(1450px, calc(100% - 38px));
  min-height: 410px;
  margin: 8px auto 10px;
  padding: 54px clamp(24px, 6vw, 92px);
  grid-template-columns: 1fr;
  overflow: hidden;
  border-radius: 8px 64px 8px 64px;
  border: 1px solid rgba(255, 197, 66, .42);
  background:
    linear-gradient(90deg, rgba(2, 11, 16, .98) 0%, rgba(3, 21, 26, .91) 35%, rgba(2, 20, 23, .46) 61%, rgba(2, 12, 16, .12) 100%),
    url("assets/brand/kirin777-hero-art.png") 67% center / cover no-repeat;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .42), inset 0 0 60px rgba(11, 125, 108, .09);
}
.hero::after {
  content: "KIRIN777 · FIRE MEETS FORTUNE";
  position: absolute;
  left: clamp(24px, 6vw, 92px);
  bottom: 25px;
  color: rgba(255, 226, 139, .78);
  font: 800 11px/1.2 "Segoe UI", Arial, sans-serif;
  letter-spacing: .25em;
}
.hero-art { display: none !important; }
.hero-copy { max-width: 600px; margin: 0; z-index: 2; }
.hero h1,
.hero h1 em { font-family: Georgia, "Times New Roman", serif; }
.hero h1 { color: #fff9e5; font-size: clamp(44px, 5.7vw, 78px); line-height: .94; letter-spacing: -.045em; text-shadow: 0 3px 28px rgba(0, 0, 0, .9); }
.hero h1 em { color: #ffd360; text-shadow: 0 0 26px rgba(255, 83, 24, .35), 0 2px 10px #000; }
.hero::before { display: none; }
.hero-copy > p:not(.eyebrow),
.hero .mini-proof,
.hero-game-showcase { display: none; }
.hero-copy .eyebrow { margin-bottom: 14px; color: #72f4de; letter-spacing: .2em; text-shadow: 0 0 16px rgba(26, 229, 196, .33); }

.top-game-marquee {
  width: min(1380px, calc(100% - 66px));
  margin: 8px auto 18px;
  border-radius: 44px 8px 44px 8px;
  border-color: rgba(255, 197, 69, .4);
  background:
    radial-gradient(circle at 0 0, rgba(255, 71, 22, .2), transparent 30%),
    radial-gradient(circle at 100% 8%, rgba(14, 204, 170, .16), transparent 27%),
    linear-gradient(145deg, #082a29, #061014 56%, #21090a);
  box-shadow: 0 26px 60px rgba(0, 0, 0, .36), inset 0 0 0 1px rgba(255, 255, 255, .025);
}
.top-games-heading h2 { color: #fff5d5; }
.top-games-heading .eyebrow,
.platform-lanes-intro p,
.scrolling-platform-intro p { color: #ffca54; }
.top-games-heading a,
.top-games-hint { color: #8bf2df; }
.juwa-platform-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.juwa-platform-lane {
  min-height: 0;
  padding: 22px;
  border-radius: 32px 7px 32px 7px;
  border-color: rgba(255, 199, 79, .4);
  background: linear-gradient(135deg, rgba(6, 76, 67, .92), rgba(4, 17, 21, .97) 58%, rgba(77, 14, 16, .76));
  box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 18px 34px rgba(0, 0, 0, .2);
}
.lane-two .lane-game-grid,
.lane-classic .lane-game-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-content: start; }
.platform-lanes-intro { text-align: left; margin-left: 0; }
.platform-lanes-intro h2,
.scrolling-platform-intro h3 { color: #fff1c6; }
.platform-lanes-intro span,
.scrolling-platform-intro span { color: #bdd4d0; }
.lane-heading small { color: #78efd9; }
.lane-heading h3 { color: #ffe092; }
.lane-icon-game {
  width: 100%;
  max-width: 96px;
  justify-self: center;
  padding: 5px;
  border-color: rgba(255, 209, 102, .28);
  background: #041216;
}
.lane-icon-game:hover { border-color: #ffc84b; box-shadow: 0 0 22px rgba(255, 77, 24, .3); }
.lane-cta,
.choice-button {
  background: linear-gradient(110deg, #ffe275, #ff9b2f 53%, #d41e29);
  color: #210704;
  border-color: rgba(255, 234, 170, .62);
  box-shadow: 0 0 0 1px rgba(255, 77, 23, .16), 0 0 26px rgba(255, 76, 20, .2);
}

.signup-card {
  transform: none;
  border-radius: 40px 8px 40px 8px;
  border-color: rgba(255, 201, 82, .5);
  background:
    radial-gradient(circle at 100% 0, rgba(16, 196, 163, .19), transparent 34%),
    linear-gradient(150deg, rgba(10, 66, 59, .98), rgba(3, 16, 20, .99) 61%, rgba(73, 12, 14, .95));
  box-shadow: 0 32px 70px rgba(0, 0, 0, .48), inset 0 0 0 1px rgba(255, 255, 255, .035);
}
.signup-card.standalone-signup {
  order: 0;
  width: min(720px, calc(100% - 44px));
  max-width: 720px;
  margin: 8px auto 24px;
  padding: 46px;
}
.signup-card h2 { color: #fff4d2; }
.signup-card h2 span,
.signup-card .kicker { color: #ffca55; }
.signup-card label,
.signup-card small { color: #d1dedb; }
.signup-card input { background: rgba(1, 10, 13, .74); border-color: rgba(82, 225, 201, .27); color: #fff; }
.signup-card input:focus { border-color: #ffcb56; box-shadow: 0 0 0 3px rgba(255, 196, 64, .13); }
.signup-card .btn { background: linear-gradient(115deg, #ffe17b, #ff912b 60%, #d71d26); color: #210704; }

.reviews { background: linear-gradient(180deg, #effaf5, #f8ecd0); color: #13231f; }
.review-card { border-color: rgba(8, 95, 79, .2); }
.games { background: linear-gradient(180deg, #06231f, #030a0d); }
.fund-banner,
.final-cta { background: linear-gradient(110deg, #07574d, #0b8977 45%, #bd341f 78%, #ef9f2f); }
.site-footer { background: #02080a; border-top-color: rgba(255, 200, 75, .24); }

.login-dialog {
  border-color: rgba(255, 199, 72, .56);
  background:
    radial-gradient(circle at 50% 0, rgba(8, 172, 145, .24), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(208, 32, 32, .22), transparent 35%),
    linear-gradient(145deg, #07302c, #040d10 66%, #260708);
}
.login-choice,
.contact-choice { border-color: rgba(255, 206, 93, .3); background: linear-gradient(145deg, rgba(8, 82, 72, .72), rgba(3, 14, 17, .97)); }
.login-choice:hover,
.contact-choice:hover { border-color: #ffc94d; box-shadow: 0 0 24px rgba(255, 84, 22, .2); }
#xyz-support-root .support-launcher { border-color: #ffcf57; background: linear-gradient(110deg, #087865, #0ca48a 48%, #d93220 82%, #ef9b2b); }
#xyz-support-root .support-panel { border-color: rgba(255, 202, 80, .54); background: linear-gradient(160deg, #073a34, #030d10 64%, #250708); }

/* Kirin777 shared support window and footer controls */
.footer-support-trigger,.footer-contact-trigger{border:0;color:inherit;font:inherit;cursor:pointer}
.footer-support-trigger{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,202,80,.42);border-radius:50%;background:rgba(8,120,101,.18)}
.footer-contact-trigger{padding:0;background:transparent;color:#ffd363;text-align:left}
.footer-contact-trigger:hover,.footer-contact-trigger:focus-visible{color:#fff3c5;outline:0}
.contact-dialog{border-color:rgba(255,202,80,.58);background:radial-gradient(circle at 88% 0,rgba(255,74,22,.20),transparent 35%),linear-gradient(150deg,#073a34,#030d10 64%,#250708);box-shadow:0 38px 120px rgba(0,0,0,.78),0 0 52px rgba(7,164,138,.18)}
.contact-dialog::backdrop{background:rgba(1,8,9,.86);backdrop-filter:blur(9px)}
.contact-dialog h2{color:#fff2c5}
.contact-dialog>p{color:#c9ddd6}
#xyz-support-root .support-launcher{min-width:216px;justify-content:flex-start;gap:12px}
#xyz-support-root .support-launcher-copy{display:flex;flex-direction:column;align-items:flex-start;gap:3px;white-space:nowrap}
#xyz-support-root .support-launcher-copy small{color:#ffe09a;font-size:7px;font-weight:900;letter-spacing:.16em;line-height:1}

body::before {
  background:
    radial-gradient(circle at 26% 44%, rgba(12, 165, 138, .22), transparent 30%),
    radial-gradient(circle at 76% 38%, rgba(244, 62, 21, .22), transparent 27%),
    linear-gradient(145deg, #020a0d, #083029 55%, #160506);
}
body::after {
  content: "FIRE MEETS FORTUNE\A Preparing your Kirin777 experience";
  white-space: pre;
  border-color: rgba(255, 202, 72, .68);
  background:
    url("assets/brand/kiringames-logo.png?v=1") center 43% / 94% auto no-repeat,
    radial-gradient(circle at 50% 34%, rgba(10, 167, 140, .26), transparent 49%),
    linear-gradient(145deg, rgba(4, 38, 34, .98), rgba(3, 10, 13, .99) 65%, rgba(51, 7, 8, .98));
  color: #ffd363;
}

@media (max-width: 950px) {
  .hero { min-height: 360px; background-position: 62% center; }
  .hero-copy { max-width: 530px; }
  .lane-two .lane-game-grid,
  .lane-classic .lane-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .site-header .juwa-brand { width: 220px; height: 72px; }
  .hero,
  .top-game-marquee { width: calc(100% - 22px); }
  .hero {
    min-height: 390px;
    padding: 36px 22px 54px;
    background:
      linear-gradient(180deg, rgba(2, 12, 16, .62), rgba(2, 12, 16, .94) 72%),
      url("assets/brand/kirin777-hero-art.png") 68% center / cover no-repeat;
  }
  .hero h1 { font-size: clamp(40px, 13vw, 60px); }
  .hero::after { left: 22px; bottom: 22px; font-size: 9px; letter-spacing: .17em; }
  .juwa-platform-lanes { grid-template-columns: 1fr; }
  .lane-two .lane-game-grid,
  .lane-classic .lane-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .signup-card.standalone-signup { padding: 30px 22px; }
}