:root {
  --ink: #151823;
  --muted: #777b89;
  --purple: #7560e9;
  --line: #ebebf0;
  --page: #f6f6f8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--page);
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; }
button { cursor: pointer; }

.page-shell {
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 40px rgba(27, 31, 53, .08);
}

.hero {
  position: relative;
  height: 398px;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(152deg, #151b3c 0%, #25255c 46%, #7356a1 100%);
}

.hero::after {
  position: absolute;
  z-index: 1;
  right: -5%; bottom: -2%; left: -5%;
  height: 130px;
  background: linear-gradient(transparent, rgba(13, 15, 41, .42));
  content: "";
}

.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}

.brand, .footer-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; letter-spacing: .5px; }
.brand { color: #fff; text-decoration: none; }
.brand-mark { display: inline-grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(255,255,255,.63); border-radius: 8px; color: #fff; font-size: 15px; font-family: Georgia, serif; font-style: italic; line-height: 1; }

.hero-art { position: absolute; inset: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(2px); opacity: .85; }
.orb-one { top: -120px; right: -85px; width: 380px; height: 380px; background: radial-gradient(circle at 32% 36%, rgba(238, 217, 250, .56), rgba(188, 114, 212, .11) 43%, transparent 65%); }
.orb-two { right: 125px; bottom: 5px; width: 210px; height: 210px; background: radial-gradient(circle, rgba(78, 223, 227, .2), transparent 67%); }
.star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(219, 241, 255, .67); }
.star-one { top: 83px; left: 72%; }.star-two { top: 150px; left: 88%; width: 5px; height: 5px; }.star-three { top: 67px; left: 47%; width: 2px; height: 2px; }
.mountain { position: absolute; bottom: -75px; display: block; width: 390px; height: 300px; transform: rotate(38deg) skewX(-9deg); border-radius: 66px 0 0; }
.mountain-back { right: -180px; background: linear-gradient(130deg, rgba(139, 109, 195, .42), rgba(49, 31, 101, .8)); }
.mountain-front { right: -240px; bottom: -180px; background: linear-gradient(130deg, rgba(80, 58, 140, .85), #171940); }
.planet { position: absolute; right: 53px; bottom: 74px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #d8d4ff 0 2%, #8b83cf 6%, #4b498c 45%, #27265d 78%); box-shadow: 0 0 0 14px rgba(128, 119, 209, .09), 0 0 44px rgba(140, 125, 245, .34); }
.planet::after { position: absolute; top: 43px; left: -37px; width: 166px; height: 23px; transform: rotate(-16deg); border: 4px solid rgba(206, 191, 255, .44); border-right-color: transparent; border-radius: 50%; content: ""; }

.astronaut { position: absolute; z-index: 2; right: 146px; bottom: 76px; width: 54px; height: 96px; transform: rotate(14deg); filter: drop-shadow(0 10px 12px rgba(18, 15, 52, .38)); }
.helmet { position: absolute; top: 0; left: 7px; width: 40px; height: 39px; border: 4px solid #e9e6fb; border-radius: 48% 48% 45% 45%; background: linear-gradient(135deg, #b5bce0, #343d77 50%, #1e254f); }
.helmet::after { position: absolute; top: 5px; left: 5px; width: 22px; height: 13px; border-radius: 50%; background: rgba(195, 235, 247, .7); content: ""; }
.body { position: absolute; top: 35px; left: 10px; width: 35px; height: 45px; border: 3px solid #e8e5fb; border-radius: 10px 10px 17px 17px; background: linear-gradient(110deg, #a5add3, #626496); }
.body::after { position: absolute; top: 9px; left: 9px; width: 12px; height: 15px; border: 2px solid #e6e3f8; border-radius: 2px; background: #42518b; content: ""; }
.arm { position: absolute; top: 39px; width: 13px; height: 39px; border: 3px solid #e8e5fb; border-radius: 12px; background: #9198c3; }
.arm-left { left: 1px; transform: rotate(24deg); }.arm-right { right: 1px; transform: rotate(-28deg); }

.hero-copy { position: absolute; z-index: 3; right: 24px; bottom: 29px; left: 24px; }
.eyebrow, .section-kicker { margin: 0 0 7px; color: #afa9dc; font-size: 10px; font-weight: 700; letter-spacing: 1.65px; }
h1 { margin: 0; font-size: clamp(37px, 10vw, 48px); font-weight: 800; letter-spacing: 3px; line-height: 1.12; text-shadow: 0 3px 15px rgba(15, 11, 56, .31); }
.tagline { margin: 8px 0 14px; color: rgba(255,255,255,.8); font-size: 14px; letter-spacing: .4px; }
.game-meta { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.8); font-size: 12px; }
.score { display: inline-flex; align-items: baseline; gap: 2px; color: #ffc765; }.score strong { font-size: 18px; }.score span { font-size: 11px; }
.meta-divider { width: 1px; height: 10px; background: rgba(255,255,255,.4); }

.download-panel { position: relative; z-index: 4; margin: -1px 16px 0; padding: 22px 18px 17px; border-radius: 18px; background: #fff; box-shadow: 0 11px 30px rgba(38, 36, 81, .12); transform: translateY(-15px); }
.game-icon { position: relative; float: left; width: 58px; height: 58px; margin: 0 12px 17px 0; overflow: hidden; border-radius: 15px; color: #fff; background: radial-gradient(circle at 67% 28%, #d7cefa 0 3%, #7056c0 23%, #2d316c 75%); box-shadow: inset 0 0 18px rgba(255,255,255,.18); }
.game-icon span { position: absolute; z-index: 2; top: 15px; left: 20px; font-size: 23px; font-family: serif; }.icon-ring { position: absolute; top: 23px; left: -8px; width: 72px; height: 12px; transform: rotate(-23deg); border: 2px solid rgba(245, 234, 255, .62); border-radius: 50%; }.icon-ship { position: absolute; right: 7px; bottom: 7px; width: 0; height: 0; transform: rotate(-28deg); border-top: 11px solid transparent; border-bottom: 4px solid transparent; border-left: 17px solid #f9dba9; filter: drop-shadow(0 0 4px #fbbd71); }
.download-heading { min-height: 75px; }.download-heading h2 { margin: 2px 0 4px; font-size: 18px; }.download-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.download-actions { clear: both; display: grid; gap: 9px; }
.download-button, .ios-button { display: flex; align-items: center; min-height: 55px; border-radius: 12px; text-align: left; transition: transform .2s, box-shadow .2s; }
.download-button { padding: 0 15px; border: 0; color: #fff; background: linear-gradient(112deg, #7060e8, #9a68e5); box-shadow: 0 8px 18px rgba(116, 88, 218, .27); }.download-button:hover, .ios-button:hover { transform: translateY(-2px); }.download-button:active, .ios-button:active { transform: translateY(0); }
.download-button svg, .ios-button svg { width: 22px; height: 22px; fill: currentColor; }.download-button span { margin-left: 12px; font-size: 16px; font-weight: 700; }.download-button small { display: block; margin-top: 1px; color: rgba(255,255,255,.64); font-size: 10px; font-weight: 400; }.download-button .arrow { width: 19px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 2; }
.ios-button { justify-content: center; gap: 7px; border: 1px solid #e6e5ec; color: #636573; background: #fff; font-size: 13px; }
.facts { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 14px 0 9px; color: #999ba7; font-size: 10px; }.facts i { width: 2px; height: 2px; border-radius: 50%; background: #c9c9d0; }
.safe-note { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 0; color: #8f919d; font-size: 10px; }.safe-note svg { width: 14px; height: 14px; fill: #76ae8d; }

.content-card { margin: 7px 16px 14px; padding: 25px 19px 22px; border: 1px solid #f0f0f2; border-radius: 17px; background: #fff; }
.section-title-row { display: flex; justify-content: space-between; align-items: flex-start; }.section-kicker { margin-bottom: 5px; color: #a09bbd; }.section-title-row h2 { margin: 0; font-size: 21px; letter-spacing: .3px; }.chapter-number { color: #dedce6; font-size: 28px; font-weight: 800; line-height: 1; font-family: Georgia, serif; }
.intro-text { margin: 17px 0 20px; color: #6f7180; font-size: 13px; line-height: 1.9; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 17px 10px; }.feature-item { display: flex; gap: 9px; align-items: center; }.feature-item h3 { margin: 0 0 3px; font-size: 13px; }.feature-item p { margin: 0; color: #9798a2; font-size: 10px; white-space: nowrap; }.feature-icon { display: grid; flex: 0 0 auto; width: 33px; height: 33px; place-items: center; border-radius: 10px; font-size: 17px; }.purple { color: #856fe7; background: #f0edff; }.pink { color: #dd79a5; background: #fff0f5; }.orange { color: #db9b50; background: #fff6e9; }.blue { color: #5a9ed5; background: #edf7ff; }
.update-card { padding-bottom: 19px; }.update-banner { position: relative; height: 154px; margin-top: 19px; overflow: hidden; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #6251bb, #7f98ce 47%, #bcc6eb); }.update-banner::after { position: absolute; right: -31px; bottom: -68px; width: 170px; height: 170px; border-radius: 49% 49% 0 0; background: linear-gradient(145deg, rgba(255,255,255,.8), rgba(196,217,255,.14)); box-shadow: -28px -8px 0 13px rgba(198, 171, 239, .16); content: ""; }.banner-light { position: absolute; top: -55px; right: 25px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.35); filter: blur(18px); }.update-banner p, .update-banner strong, .update-banner span { position: relative; z-index: 1; display: block; margin-left: 18px; }.update-banner p { padding-top: 23px; margin-bottom: 8px; color: rgba(255,255,255,.75); font-size: 10px; letter-spacing: 1px; }.update-banner strong { font-size: 21px; line-height: 1.42; letter-spacing: .7px; }.update-banner span { margin-top: 10px; color: rgba(255,255,255,.72); font-size: 9px; letter-spacing: 1.5px; }
.update-list { display: grid; gap: 12px; padding: 0; margin: 19px 0 0; list-style: none; }.update-list li { display: flex; align-items: center; color: #696b78; font-size: 12px; }.update-list span { width: 27px; color: #aca9bd; font-size: 10px; font-weight: 700; }
footer { padding: 23px 28px 30px; color: #aaaab2; background: #f6f6f8; text-align: center; font-size: 9px; line-height: 1.8; }.footer-brand { justify-content: center; margin-bottom: 8px; color: #74747e; font-size: 13px; }.footer-brand .brand-mark { width: 22px; height: 22px; border-color: #85858d; color: #85858d; font-size: 13px; } footer p { margin: 3px 0; }
.toast { position: fixed; z-index: 10; bottom: 26px; left: 50%; max-width: calc(100% - 32px); padding: 10px 16px; transform: translate(-50%, 80px); border-radius: 100px; color: #fff; background: rgba(28, 28, 39, .88); box-shadow: 0 8px 18px rgba(17,17,27,.18); opacity: 0; font-size: 12px; transition: .28s ease; pointer-events: none; }.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 680px) { body { padding: 28px 0; }.page-shell { border-radius: 20px; }.hero { height: 410px; } }
@media (max-width: 380px) { .feature-grid { gap: 14px 5px; }.feature-item p { font-size: 9px; }.content-card { margin-right: 13px; margin-left: 13px; }.download-panel { margin-right: 13px; margin-left: 13px; } }

/* Youyang Erpai theme */
:root { --purple: #9c2920; }
.hero { background: linear-gradient(130deg, #171e1b 0%, #253126 45%, #101613 100%); }
.hero::after { background: linear-gradient(transparent 30%, rgba(4, 9, 6, .75)); }
.brand-mark { border-color: rgba(255,224,156,.8); color: #ffe0a1; font-style: normal; }
.eyebrow, .section-kicker { color: #f3bf72; }
.tagline { color: rgba(255,240,216,.84); }
.score { color: #ffcf6e; }

/* Premium in-game lobby artwork replaces the earlier CSS illustration. */
.game-room {
  background:
    linear-gradient(90deg, rgba(5, 11, 8, .34) 0%, rgba(5, 11, 8, .08) 68%, rgba(5, 11, 8, .12) 100%),
    url("assets/bohu-youyang-lobby.png") center 34% / cover no-repeat !important;
}
.game-room::before,
.game-room::after { display: none; }

.hero-qr {
  position: absolute;
  z-index: 4;
  top: 102px;
  right: 28px;
  display: block;
  width: 184px;
  padding: 8px 8px 7px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(2, 11, 8, .38);
}
.hero-qr img { display: block; width: 100%; height: auto; object-fit: contain; }
.hero-qr span {
  display: block;
  margin-top: 6px;
  color: #9d2a1f;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.1;
  text-align: center;
}

.game-icon { color: #ffe0a3; background: radial-gradient(circle at 67% 28%, #e98752 0 3%, #b53222 28%, #6d1713 77%); }
.game-icon::after { position: absolute; inset: 7px; border: 1px solid rgba(255,229,166,.52); border-radius: 10px; content: ""; }
.game-icon span { top: 14px; left: 18px; font-size: 24px; font-weight: 700; }.icon-ring { border-color: rgba(255, 220, 145, .55); }
.download-button { background: linear-gradient(112deg, #9c271b, #d5502c); box-shadow: 0 8px 18px rgba(155, 43, 27, .27); }
.section-title-row .section-kicker { color: #b97763; }.chapter-number { color: #e8dcd7; }
.purple { color: #a83227; background: #fff0ec; }.pink { color: #c05a68; background: #fff0f2; }.orange { color: #c07b2d; background: #fff6e9; }.blue { color: #4b849b; background: #edf7ff; }
.update-banner { background: linear-gradient(135deg, #801d16, #bd492a 52%, #e3a461); }.update-banner::after { background: linear-gradient(145deg, rgba(255,237,188,.88), rgba(196,87,48,.14)); box-shadow: -28px -8px 0 13px rgba(250,196,112,.2); }.banner-light { background: rgba(255,245,191,.38); }.update-banner p { color: rgba(255,247,220,.83); }.update-banner span { color: rgba(255,245,211,.78); }