:root { color-scheme: light; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { font-family: 'Inter', 'Noto Sans JP', system-ui, sans-serif; color: #61667b; -webkit-font-smoothing: antialiased; }
body { position: relative; }
html { scroll-behavior: smooth; }
img { display: block; max-width: 100%; }
/* Keep sections clear of the floating top-bar when scrolled via menu click. */
#download, #game-intro, #game-features, #collab, #about, #news { scroll-margin-top: 40px; }

/* ---------- Root page ---------- */
.page {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* `clip` keeps the horizontal overflow trimmed (page-bg, side characters). */
  overflow: clip;
  isolation: isolate;
}
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: auto;
  pointer-events: none;
  z-index: -2;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 80px;
  width: 100%;
  position: relative;
  z-index: 20;                 /* Sits above page content; drawer (z-40) slides over it when open */
}
/* Body logo: 1.4× the sticky top-bar logo (120×67 → 168×94) for a bit more
   visual weight in the hero while keeping the sticky bar compact.
   object-fit:contain preserves the SVG's natural aspect. */
.logo {
  position: relative;
  width: 168px;
  height: 94px;
  flex-shrink: 0;
}
.logo img {
  /* 1.5x via real layout size (not transform: scale) so the SVG is
     rasterized at the displayed size and stays sharp on mobile.
     left/top -25% re-centers the 150% box on .logo's center. */
  position: absolute;
  left: -25%;
  top: -25%;
  width: 150%;
  height: 150%;
  max-width: none;
  object-fit: contain;
  /*-webkit-filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));*/
  /*filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));*/
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Icons 1 & 3: the image itself provides the circle + shadow, so no CSS chrome and no clipping */
.icon-raw {
  width: 62px;
  height: 62px;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;

  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  transition: background 180ms ease, transform 0.3s ease;
}

.icon-raw img {
  position: absolute;
  inset: -16.13% -16.13%;
  max-width: none;
  object-fit: contain;

  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 52%;
  height: 52%;
  transform: translate(-50%, -50%);
}
/* Stacked default + hover/active icon swap (purple gradient variant appears on hover/focus) */
.icon-raw .icon-hover {
  opacity: 0;
  transition: opacity 180ms ease;
}
.icon-raw:hover .icon-hover,
.icon-raw:focus-visible .icon-hover {
  opacity: 1;
}
.icon-raw:hover .icon-default,
.icon-raw:focus-visible .icon-default {
  opacity: 0;
}
.icon-raw .icon-default {
  transition: opacity 180ms ease;
}

.icon-raw:hover,
.icon-raw:focus-visible {
  background: radial-gradient(circle at 20% 100%, #969eff 0%, #e0b7ff 100%);
  transform: scale(1.1);
}
.icon-raw:active {
  transform: scale(0.95);
  transition-duration: 80ms;
}

/* ---------- Main column ---------- */
.main {
  width: 100%;
  padding: 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
}

/* ---------- Hero + Download ---------- */
.hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -20px;
  padding-bottom: 180px;
}
.hero-img-wrapper {
  width: 100%; /* 调大（如 110%）铺开，调小（如 80%）收窄 */
  margin-bottom: -180px;
  overflow: visible;
}

.hero-img {
  width: 100%;
  /*aspect-ratio: 2496 / 2240;*/
  object-fit: cover;
}
.download {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  margin-bottom: -180px;
}
.download-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.download-title img { width: 65px; height: 55.282px; }
.download-title p {
  font-weight: 600;
  color: #595e72;
  font-size: 36px;
  white-space: nowrap;
}
.platforms {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.platform {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  width: 140px;
}
/* White circle container with purple outer glow */
.platform-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 140px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(152, 38, 190, 0.2);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.platform-link:hover,
.platform-link:focus-visible {
  transform: scale(1.1);
}
.platform-link:active {
  transform: scale(0.95);
  transition-duration: 80ms;
}
/* Icon shape rendered via mask; default solid #4D4D4D, hover -> gradient */
.platform-icon {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #4D4D4D;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: background 0.3s ease;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}
.platform-icon--ios         { -webkit-mask-image: url("./assets/platform-ios-icon.svg");         mask-image: url("./assets/platform-ios-icon.svg"); }
.platform-icon--google-play { -webkit-mask-image: url("./assets/platform-google-play-icon.svg"); mask-image: url("./assets/platform-google-play-icon.svg"); }
.platform-icon--windows     { -webkit-mask-image: url("./assets/platform-windows-icon.svg");     mask-image: url("./assets/platform-windows-icon.svg"); }
.platform-icon--android     { -webkit-mask-image: url("./assets/platform-android-icon.svg");     mask-image: url("./assets/platform-android-icon.svg"); }
.platform-icon--macos       { -webkit-mask-image: url("./assets/platform-macos-icon.svg");       mask-image: url("./assets/platform-macos-icon.svg"); }

.platform-link:hover .platform-icon,
.platform-link:focus-visible .platform-icon {
  background: linear-gradient(135deg, #41FFFB, #CA83FF);
}
.platform p {
  font-weight: 600;
  font-size: 24px;
  color: #4d4d4d;
  text-align: center;
  line-height: 30px;
  white-space: nowrap;
}

/* ---------- News section ---------- */
.news-wrap {
  position: relative;
  width: 100%;
  padding-top: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.news-card {
  width: 100%;
  border-radius: 100px;
  background: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 0 40px rgba(0,0,0,0.1);
  padding: 70px 60px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  justify-content: center;
}
.news-card > p {
  font-size: 32px;
  color: #7e84c7;
  text-align: center;
  line-height: 36px;
  font-weight: 400;
  width: 100%;
}
.socials {
  display: flex;
  gap: 40px;
  align-items: center;
  justify-content: center;
  width: 780px;
}
/* White circle container with soft shadow; scales up on hover */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 154px;
  height: 154px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.social-link:hover,
.social-link:focus-visible {
  transform: scale(1.1);
}
.social-link:active {
  transform: scale(0.95);
  transition-duration: 80ms;
}
.social-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.discord-btn {
  background: #fff;
  border-radius: 90px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 30px 40px;
  width: 100%;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.3s ease;
}
.discord-btn:hover,
.discord-btn:focus-visible {
  transform: scale(1.05);
}
.discord-btn:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}
.discord-btn img { width: 68px; height: 51px; }
.discord-btn p {
  font-weight: 600;
  font-size: 32px;
  color: #788eaa;
  text-align: center;
  line-height: 26px;
  white-space: nowrap;
}
.news-pill {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #969eff;
  border-radius: 220px;
  box-shadow: 0 0 40px rgba(150, 158, 255, 0.6);
  padding: 10px 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.news-pill p {
  font-weight: 600;
  font-size: 56px;
  color: #fff;
  white-space: nowrap;
}

/* ---------- Game introduction ---------- */
/* Same structure as .feature: character beside the body, vertically centered,
   character on the lower layer and pulled over the body to overlap. The intro
   keeps the character on the left, so it mirrors an even feature card. */
.intro {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  margin-top: -100px;
}
.intro-character {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  position: relative;
  z-index: 0;
  margin-right: -180px;
}
.intro-character img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-right: -40px;
  transform: scale(1.15);
  transform-origin: center;
}
.intro-body {
  flex: 0 0 68%;
  position: relative;
  z-index: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
}
.section-title {
  font-weight: 600;
  font-size: 56px;
  color: #595e72;
  white-space: nowrap;
  width: 100%;
  text-align: center;
}
.intro .section-title {
  text-align: left;
  white-space: normal;
}
.intro-text p {
  font-weight: 400;
  font-size: 24px;
  color: #61667b;
  line-height: 30px;
  width: 100%;
}

/* ---------- Game Features ---------- */
.features {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.features-list {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}
/* Character and content sit side by side, vertically centered. Odd cards put
   the content on the left / character on the right; even cards mirror it. */
.feature {
  width: 100%;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0;
  margin-top: -100px;
}
.feature:nth-child(even) {
  flex-direction: row;
}
.feature-title-wrap {
  display: flex;
  width: 100%;
}
/* Character fills the remaining width beside the container, sits on the lower
   layer (z-index 0), and is pulled toward the content via a negative margin
   so it overlaps it. Odd cards have the char on the right (pull left); even
   cards mirror to the left (pull right). */
.feature-char {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  pointer-events: none;
  position: relative;
  z-index: 0;
  margin-left: -180px;
}
.feature:nth-child(even) .feature-char {
  margin-left: 0;
  margin-right: -180px;
}
.feature-char img {
  display: block;
  max-width: 100%;
  height: auto;
  /* Scale from the center so the character spills a bit past the row,
     top and bottom. Transform is visual-only, so it doesn't grow .feature. */
  transform: scale(1.15);
  transform-origin: center;
}
/* Screenshot + text stack take a fixed share of the row width and sit above
   the character (z-index 1) so the overlap reads as content-over-character. */
.feature-container {
  flex: 0 0 68%;
  position: relative;
  z-index: 1;
  padding: 16px;
}
.feature-img {
  width: 100%;
  aspect-ratio: 780 / 438;
  object-fit: cover;
  border: 6px solid #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  display: block;
  margin-bottom: 16px;
}
.feature-head {
  width: 100%;
  margin-bottom: 6px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.feature-head .title {
  flex: 0 1 auto;
  max-width: 100%;
  font-size: 29px;
  line-height: 34px;
  font-weight: 700;
  white-space: nowrap;
  color: #595E72;
}
.feature-desc {
  width: 100%;
}
.feature-desc p {
  font-weight: 400;
  font-size: 24px;
  line-height: 30px;
  color: #61667b;
}

/* ====================================================================
   Scroll handoff: game-intro and the five feature cards all pin at the
   same spot. The next card rises with the scroll and slides over the
   pinned previous card; once it covers the bottom ~30% of it, the previous
   card's character and content split toward the two sides and fade out.
   Both directions are scrubbed by scroll position through the --enter /
   --exit variables that script.js writes on each card (0→1); the
   defaults below keep every card visible without JS.
   ==================================================================== */
:root {
  --stack-top: 130px;    /* pin offset — clears the sticky top bar (91px) plus
                            the character's ~56px upward scale overflow + a gap */
  --stack-gap: 24px;     /* flow spacing between cards */
  --slide-in: 56px;      /* entry: halves converge from the sides */
  --slide-out: 120px;    /* exit: halves split back outward */
  --exit-fade: 1.4;      /* >1 so a leaving card is gone before being covered */
}
.scroll-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
}
.scroll-stack .features-list { gap: var(--stack-gap); }
/* The pinned cards: intro (layer 0) + the five feature cards (1–5). */
.scroll-stack > .intro,
.features-list > .feature {
  position: sticky;
  top: var(--stack-top);
  z-index: calc(1 + var(--i, 0)); /* later cards slide over earlier ones */
  overflow: visible;              /* let the halves slide out past the box */
  --enter: 1;
  --exit: 0;
}
.scroll-stack > .intro                 { --i: 0; }
.features-list > .feature:nth-child(1) { --i: 1; }
.features-list > .feature:nth-child(2) { --i: 2; }
.features-list > .feature:nth-child(3) { --i: 3; }
.features-list > .feature:nth-child(4) { --i: 4; }
.features-list > .feature:nth-child(5) { --i: 5; }
/* A fully handed-off card stays pinned (sticky) but is dropped from
   hit-testing/selection; script.js toggles this near --exit = 1. */
.scroll-stack .is-gone { visibility: hidden; }

/* Character and content travel on the same axis they entered from:
   converge from ±--slide-in while the card rises (--enter 0→1), then
   split back out to ±--slide-out as the next card takes over (--exit
   0→1). --sx picks the side; out-of-range opacity simply clamps. */
.intro-character, .intro-body,
.feature-char, .feature-container {
  transform: translateX(calc(var(--sx, 1) * ((1 - var(--enter)) * var(--slide-in) + var(--exit) * var(--slide-out))));
  opacity: calc(var(--enter) - var(--exit) * var(--exit-fade));
}
.intro-character                            { --sx: -1; }
.intro-body                                 { --sx:  1; }
.feature-char                               { --sx:  1; }
.feature-container                          { --sx: -1; }
.feature:nth-child(even) .feature-char      { --sx: -1; }
.feature:nth-child(even) .feature-container { --sx:  1; }

/* ---------- Collaboration partner ---------- */
.collab { width: 100%; display:flex; flex-direction:column; gap:16px; align-items:center; }
.collab-title-wrap {
  display: flex;
  width: 100%;
}
.collab-card {
  width: 100%;
  min-height: 100px;
  background: rgba(255,255,255,0.4);
  border-radius: 30px;
  box-shadow: 0 0 40px rgba(0,0,0,0.1);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 40px;
  box-sizing: border-box;
}
.collab-logo {
  height: 80px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.collab-card p {
  font-weight: 400;
  font-size: 42px;
  color: #61667b;
  text-align: center;
  line-height: 22.8px;
  white-space: nowrap;
}

/* ---------- About us ---------- */
.about { width: 100%; display:flex; flex-direction:column; gap:20px; align-items:center; padding-bottom:40px; }
.about-title-wrap { width:100%; display:flex; align-items:center; justify-content:center; }

.team {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 16px;
  justify-content: center;
  align-items: flex-start;
}
.role-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto;
}
.group-avatars {
  display: flex;
  gap: 10px;
}
.member {
  flex: 0 0 auto;
  width: clamp(64px, 8.5vw, 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 40px rgba(0,0,0,0.1);
  padding: 6%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(162, 227, 255, 0.8);
}
.avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.role-group:has(.role-art)    .avatar-img { background: rgba(226, 177, 255, 0.8); }
.role-group:has(.role-bd)     .avatar-img { background: rgba(226, 177, 255, 0.8); }
.member-name {
  font-weight: 400;
  font-size: 22px;
  line-height: 1.2;
  color: #61667b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.role {
  width: 100%;
  min-width: 0;
  height: 32px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #ffffff;
}
.role-code   { background: rgba(162, 227, 255, 0.8); }
.role-art    { background: rgba(226, 177, 255, 0.8); }
.role-design { background: rgba(162, 227, 255, 0.8); }
.role-bd     { background: rgba(226, 177, 255, 0.8); }

.credits {
  width: 100%;
  font-weight: 400;
  font-size: 22px;
  line-height: 32px;
  color: #61667b;
  text-align: center;
}

/* ---------- Unified right-side drawer (menu + language) ---------- */
/* Single implementation used on every breakpoint. Both drawers slide in
   from the right, with a close icon pinned to the top-right and a vertical
   list of items below it. */
.menu-toggle,
.lang-toggle { cursor: pointer; }

.side-nav,
.lang-nav {
  /* --topbar-h is the height of the sticky top bar. The drawer is pinned
     below it whenever `.page.sticky-visible` is set (see block below), so
     the drawer's close button can't be hidden behind the topbar icons. */
  --topbar-h: 0px;
  position: fixed;
  top: var(--topbar-h);
  right: 0;
  left: auto;
  width: 60%;
  max-width: 300px;
  height: calc(100vh - var(--topbar-h));
  padding: 24px 20px;
  background: rgba(255, 255, 255, 0.4); /* 40% 透明 */
  backdrop-filter: blur(40px);         /* 背景模糊 */
  -webkit-backdrop-filter: blur(40px); /* Safari 兼容 */
  border-top-left-radius: 24px;
  border-bottom-left-radius: 24px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  /* Hidden when closed so its box-shadow doesn't bleed onto the viewport's right edge.
     The visibility flip is delayed until the slide-out transform finishes. */
  visibility: hidden;
  transition: transform 240ms ease,
              visibility 0s linear 240ms,
              top 260ms ease,
              height 260ms ease;
}
.page.menu-open .side-nav,
.page.lang-open .lang-nav {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform 240ms ease,
              visibility 0s linear 0s,
              top 260ms ease,
              height 260ms ease;
}
/* When the sticky top bar is on screen, shift every drawer down so its
   close button sits below the topbar row (matches the topbar's own
   slide-in animation). Desktop and mobile topbar heights differ, so the
   value is overridden in the mobile media query at the bottom. */
.page.sticky-visible .side-nav,
.page.sticky-visible .lang-nav { --topbar-h: 91px; }

/* Unified circular close button (X) at top-right of every drawer */
.drawer-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 62px;
  height: 62px;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms ease, transform 0.3s ease;
}
.drawer-close:hover,
.drawer-close:focus-visible {
  background: radial-gradient(circle at 20% 100%, #969eff 0%, #e0b7ff 100%);
  outline: none;
  transform: scale(1.1);
}
.drawer-close:active {
  transform: scale(0.95);
  transition-duration: 80ms;
}
.drawer-close::before,
.drawer-close::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 2.5px;
  border-radius: 2px;
  background: #2a2d3a;
  transition: background 180ms ease;
}
.drawer-close:hover::before,
.drawer-close:hover::after,
.drawer-close:focus-visible::before,
.drawer-close:focus-visible::after {
  background: #ffffff;
}
.drawer-close::before { transform: rotate(45deg); }
.drawer-close::after  { transform: rotate(-45deg); }

/* Items list (vertical stack below the close button) */
.side-nav-items,
.lang-nav-items {
  margin-top: 96px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item,
.lang-item {
  width: 100%;
  height: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border: none;
  background: transparent;
  border-radius: 12px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #595e72;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 180ms ease, color 180ms ease;
}
.nav-item:hover,
.nav-item:focus-visible,
.lang-item:hover,
.lang-item:focus-visible,
.lang-item.is-active {
  background: radial-gradient(circle at 20% 100%, #969eff 0%, #e0b7ff 100%);
  color: #ffffff;
  font-weight: 700;
  outline: none;
}

/* ---------- Sticky top bar (appears after scrolling past one viewport) ---------- */
.top-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 25;                   /* Above page content, below drawer (40) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 40px;
  background: rgba(255, 255, 255, 0.4);   /* 40% 白 */
  -webkit-backdrop-filter: blur(40px);    /* 背景模糊 60 */
          backdrop-filter: blur(40px);
  /* Soft drop shadow separates the bar from the scrolling content below. */
  box-shadow: 0 6px 20px rgba(17, 24, 48, 0.08);
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
  transition: transform 260ms ease, visibility 0s linear 260ms;
}
.top-sticky.is-visible {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform 260ms ease, visibility 0s linear 0s;
}
.top-sticky-logo {
  position: relative;
  width: 120px;
  height: 67px;
  flex-shrink: 0;
}
.top-sticky-logo img {
  /* 1.5x via real layout size (not transform: scale) so the SVG is
     rasterized at the displayed size and stays sharp on mobile.
     left/top -25% re-centers the 150% box on .top-sticky-logo's center. */
  position: absolute;
  left: -25%;
  top: -25%;
  width: 150%;
  height: 150%;
  max-width: none;
  object-fit: contain;
  /*-webkit-filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));*/
  /*filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));*/
}
.top-sticky-icons {
  display: flex;
  align-items: center;
  gap: 20px;
}
/* Sticky-bar icons match the hero top-bar icons exactly (shared .icon-raw rules
   handle size and shadow overflow). Nothing to override at desktop. */
/* Smaller sticky bar on phones.
   Icon row is scaled down to ~70% of the hero top-bar icon size so the
   four circular buttons stay comfortably inside narrow viewports. */
@media (max-width: 767px) {
  .top-sticky               { padding: 10px 16px; }
  .top-sticky-logo          { width: 90px; height: 46px; }
  .top-sticky-icons         { gap: 8px; }
  .top-sticky .icon-raw     { width: 40px; height: 40px; }
  /* Mobile sticky topbar is shorter, so the drawer offset shrinks too. */
  .page.sticky-visible .side-nav,
  .page.sticky-visible .lang-nav { --topbar-h: 66px; }
}

/* ---------- Footer ---------- */
.footer {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 45px;
  padding-bottom: 64px;
}
.footer-text {
  font-weight: 400;
  font-size: 22px;
  color: #788eaa;
  text-align: center;
}
.footer-text p { line-height: 36px; white-space: pre; }
.footer-text a { color: inherit; text-decoration: none; }
.footer-text a:hover,
.footer-text a:focus-visible { text-decoration: underline; }

/* ==================================================================== */
/* Responsive: tablet (<1280px) and mobile (<768px)                      */
/* Breakpoints: xl 1280 / lg 1024 / md 768 / sm 640                      */
/* ==================================================================== */

/* ---- Tablet / small desktop: scale down + switch menus to drawers ---- */
@media (max-width: 1279px) {
  .topbar                { padding: 0 40px; }
  .main                  { padding: 0 40px; gap: 48px; }

  /* .logo and .icon-raw keep their default sizes (120x60 / 62x62) so they
     stay consistent with the sticky top-bar at every breakpoint. */
  .topbar-right          { gap: 24px; }

  .download-title p      { font-size: 30px; }
  .download-title img    { width: 48px; height: 41px; }
  .platforms             { gap: 28px; flex-wrap: wrap; }
  .platform              { width: 120px; }
  .platform .platform-link { width: 110px; height: 110px; }
  .platform p            { font-size: 20px; line-height: 24px; }

  .news-card             { border-radius: 60px; padding: 56px 40px 32px; }
  .news-card > p         { font-size: 24px; line-height: 30px; }
  .socials               { width: 100%; gap: 28px; }
  .social-link           { width: 120px; height: 120px; }
  .discord-btn           { padding: 24px 32px; border-radius: 60px; }
  .discord-btn img       { width: 48px; height: 36px; }
  .discord-btn p         { font-size: 24px; line-height: 24px; }
  .news-pill             { padding: 8px 48px; border-radius: 160px; }
  .news-pill p           { font-size: 40px; }

  .section-title         { font-size: 40px; }
  .intro-text p          { font-size: 24px; line-height: 30px; }

  .feature-head .title   { font-size: 25px; line-height: 29px; }
  .feature-desc p        { font-size: 20px; line-height: 25px; }

  .collab-logo           { height: 64px; }
  .collab-card p         { font-size: 32px; }

  .member-name           { font-size: 18px; }
  .role                  { height: 28px; font-size: 16px; }
  .credits               { font-size: 20px; line-height: 28px; }

  .footer                { padding-top: 32px; padding-bottom: 48px; }
  .footer-text           { font-size: 18px; }
  .footer-text p         { line-height: 30px; }
}

/* ---- Phones: stack, shrink, and use drawer menus ---- */
@media (max-width: 767px) {
  .page                  { padding-top: 16px; gap: 16px; }

  /* Top bar: compact logo + icons (matches .top-sticky mobile sizing) */
  .topbar                { padding: 0 16px; }
  .logo                  { width: 126px; height: 70px; }
  .topbar-right          { gap: 12px; }
  .icon-raw              { width: 40px; height: 40px; border-radius: 50%; }
  .drawer-close          { width: 40px; height: 40px; }

  /* Main column */
  .main                  { padding: 0 6px; gap: 32px; }

  /* Hero + download */
  .hero                  { padding-bottom: 80px; }
  .hero-img-wrapper      { margin-bottom: -80px; }
  .download              { gap: 20px; margin-top: 30px; margin-bottom: -80px; }
  .download-title        { gap: 8px; }
  .download-title p      { font-size: 20px; }
  .download-title img    { width: 28px; height: 24px; }
  .platforms             { gap: 0; flex-wrap: nowrap; justify-content: center; width: 100%; }
  .platform              { width: 64px; height: 70px; gap: 6px; }
  .platform .platform-link { width: 50px; height: 50px; }
  .platform p            { font-size: 10px; line-height: 14px; white-space: nowrap; }

  /* News */
  .news-wrap             { padding-top: 20px; }
  .news-card             { border-radius: 28px; padding: 36px 20px 20px; gap: 20px; }
  .news-card > p         { font-size: 16px; line-height: 22px; }
  .socials               { gap: 16px; }
  .social-link           { width: 62px; height: 62px; }
  .discord-btn           { padding: 14px 16px; border-radius: 40px; gap: 10px; flex-wrap: wrap; }
  .discord-btn img       { width: 28px; height: 21px; }
  .discord-btn p         { font-size: 14px; line-height: 18px; white-space: normal; }
  .news-pill             { padding: 6px 24px; border-radius: 80px; }
  .news-pill p           { font-size: 20px; }

  /* Sections */
  .section-title         { font-size: 24px; white-space: normal; }
  .intro                 { gap: 0; margin-top: -30px; }
  /* Gentler overlap on the narrow viewport, matching the feature cards. */
  .intro-character       { margin-right: -60px; }
  .intro-text p          { font-size: 13px; line-height: 15px; }

  /* Features */
  .features              { gap: 8px; }
  .features-list         { gap: 10px; }

  /* Phones keep the same scrubbed handoff as desktop — just retune for the
     shorter mobile top bar and gentler travel distances. */
  .scroll-stack {
    --stack-top: 75px;   /* mobile bar (66px) + ~19px char overflow + a gap */
    --stack-gap: 16px;
    --slide-in: 40px;
    --slide-out: 90px;
    gap: var(--stack-gap);
  }
  .feature               { gap: 0; margin-top: -20px; }
  /* Gentler overlap on the narrow viewport. */
  .feature-char          { margin-left: -60px; }
  .feature:nth-child(even) .feature-char { margin-left: 0; margin-right: -60px; }
  .feature-img           { border-width: 3px; border-radius: 12px; margin-bottom: 10px; }
  .feature-head          { margin-bottom: 4px; }
  .feature-head .title   { font-size: 16px; line-height: 20px; }
  .feature-desc p        { font-size: 13px; line-height: 15px; }

  /* Collaboration */
  .collab                { gap: 8px; }
  .collab-card           { border-radius: 20px; padding: 10px; }
  .collab-logo           { height: 32px; }
  .collab-card p         { font-size: 20px; }

  /* About */
  .about                 { gap: 12px; padding-bottom: 20px; }
  .about-title-wrap      { padding-bottom: 0; }
  .team                  { gap: 14px 8px; }
  .role-group            { gap: 8px; }
  .group-avatars         { gap: 6px; }
  .member                { gap: 6px; }
  .member-name           { font-size: 13px; }
  .role                  { height: 22px; font-size: 12px; }
  .credits               { font-size: 13px; line-height: 20px; }

  /* Footer */
  .footer                { height: auto; padding: 24px 16px; }
  .footer-text           { font-size: 12px; }
  .footer-text p         { line-height: 20px; white-space: normal; }

  /* Drawer tweaks specific to phones — further reduce sizing */
  .side-nav              { padding: 20px 16px; }
  .side-nav-items        { margin-top: 80px; }
  .nav-item              { height: 52px; font-size: 18px; }

  .lang-nav              { padding: 20px 16px; }
  .lang-nav-items        { margin-top: 80px; }
  .lang-item             { height: 52px; font-size: 18px; margin-bottom: 4px; }
}