/* 《星河旖旅》精简首页: 通关过场 11.6s 的光径云海铺满全站, 上面放舷窗和一段理念。
   字体层级同厂牌站: 标题 Caveat Brush + 本语言手写体, 正文 Patrick Hand / 沐瑶 / 本语言手写体, 语言菜单和页脚用系统无衬线。
   沐瑶的 unicode-range 只含 CJK 与六个标点, 所以西文和数字会自动落到后面的手写体。
   ja/ko/ru 的 @font-face 在 assets/fonts-game/<lang>.css, 只有对应语言的页面才加载。 */
:root {
  --ink: #33283f;       /* 天顶紫压暗, 云上正文 */
  --ink-2: #54465e;
  --moon: #fdf5e6;      /* 夜空上的文字 */
  --rule: rgba(51, 40, 63, 0.2);
  --bronze: #503718;    /* 够压得住云上的光; 舷窗铜色压暗 */

  --display: "Caveat Brush", "Muyao-Softbrush", "Comic Sans MS", "Segoe Print", cursive;
  --body: "Muyao-Softbrush", "Patrick Hand", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ui: "Avenir Next", Avenir, "Segoe UI", "PingFang SC", "Hiragino Sans", "Hiragino Sans GB", "Apple SD Gothic Neo", "Microsoft YaHei", "Malgun Gothic", sans-serif;
  --copy-size: clamp(1.125rem, 1.3vw, 1.25rem);
  --copy-leading: 1.85;
  --copy-tracking: 0.02em;
  --gutter: clamp(16px, 4vw, 48px);
}
/* 拉丁字母语言和俄文: 字号行距同厂牌站英文页 */
html.latin {
  --body: "Patrick Hand", "Segoe Print", cursive;
  --copy-size: clamp(1.2rem, 1.4vw, 1.35rem);
  --copy-leading: 1.65;
  --copy-tracking: 0.01em;
}
html[lang="ru"] {
  --display: "Caveat Brush", "Marck Script", "LXGW WenKai Screen", "Comic Sans MS", "Segoe Print", cursive;
  --body: "Patrick Hand", "Marck Script", "LXGW WenKai Screen", cursive;
}
/* 日文、韩文: 拉丁字母仍走 Caveat Brush / Patrick Hand, 其余走游戏同款手写体; 字号行距同中文 */
html[lang="ja"] {
  --display: "Caveat Brush", "Hachi Maru Pop", "LXGW WenKai Screen", "Comic Sans MS", "Segoe Print", cursive;
  --body: "Patrick Hand", "Hachi Maru Pop", "LXGW WenKai Screen", cursive;
}
html[lang="ko"] {
  --display: "Caveat Brush", "Gaegu", "LXGW WenKai Screen", "Comic Sans MS", "Segoe Print", cursive;
  --body: "Patrick Hand", "Gaegu", "LXGW WenKai Screen", cursive;
  /* Gaegu 字面小, 同字号下明显比别的语言小一号, 放大补回来 */
  --copy-size: clamp(1.25rem, 1.45vw, 1.4rem);
  --copy-leading: 1.7;
}

@font-face {
  font-family: "Muyao-Softbrush";
  src: url("assets/muyao-home.woff2") format("woff2");
  unicode-range: U+2014, U+2018-2019, U+201C-201D, U+2026, U+3000-303F, U+4E00-9FFF, U+FF00-FFEF;
  size-adjust: 110%;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat Brush";
  src: url("assets/caveat-brush-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Patrick Hand";
  src: url("assets/patrick-hand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }
html { background: #c9a1ae; -webkit-text-size-adjust: 100%; } /* 图片未到时的云色 */
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--copy-size);
  line-height: var(--copy-leading);
  letter-spacing: var(--copy-tracking);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; } /* 韩文按词断行 */
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.display { font-family: var(--display); font-weight: 400; }

/* 全站背景: 钉在视口上, 不随内容滚动; 用 lvh 避免手机地址栏收起时缩放跳动 */
.sky {
  position: fixed; top: 0; left: 0; right: 0; z-index: -1;
  height: 100vh; height: 100lvh;
  background: url("assets/sky.webp") 50% 0 / cover no-repeat;
}

/* 顶部只留语言菜单: 叠在夜空上, 随页面滚走。details 不需要脚本, 键盘和触屏都能开 */
.top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: flex-end;
  padding: 12px clamp(16px, 4vw, 56px);
}
.lang-menu { position: relative; font-family: var(--ui); font-size: 0.95rem; line-height: 1.3; letter-spacing: 0.02em; }
.lang-menu summary {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 2px; color: var(--moon); cursor: pointer; list-style: none;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after {
  content: ""; width: 0.42em; height: 0.42em; margin-left: 1px;
  border-right: 1.5px solid; border-bottom: 1.5px solid;
  transform: translateY(-2px) rotate(45deg);
}
.lang-menu[open] summary::after { transform: translateY(2px) rotate(225deg); }
.lang-menu summary:hover span { text-decoration: underline; text-underline-offset: 4px; }
.lang-menu summary:focus-visible { outline: 2px solid var(--moon); outline-offset: 2px; border-radius: 2px; }
.lang-menu ul {
  position: absolute; top: 100%; right: 0; margin: 2px 0 0; padding: 6px; min-width: 11.5em;
  list-style: none; color: var(--ink);
  background: rgba(247, 241, 229, 0.98); border-radius: 10px;
  box-shadow: 0 14px 32px rgba(38, 24, 56, 0.34);
}
.lang-menu a { display: block; padding: 9px 12px; border-radius: 6px; white-space: nowrap; }
.lang-menu a:hover { background: rgba(51, 40, 63, 0.08); }
.lang-menu a[aria-current] { background: rgba(51, 40, 63, 0.12); }

/* 首屏 */
.hero {
  display: grid; grid-template-columns: 1.04fr 0.96fr; align-items: center;
  gap: clamp(20px, 3.5vw, 56px);
  max-width: 1240px;
  /* 比视口矮一点, 让理念卡在首屏底部露出一截, 提示下面还有内容 */
  min-height: calc(100vh - 96px); min-height: calc(100svh - 96px);
  margin: 0 auto; padding: 64px var(--gutter) 24px;
}
.porthole-frame {
  width: min(100%, 70vh); margin: 0 auto;
  filter: drop-shadow(0 22px 34px rgba(58, 32, 74, 0.38));
}
.hero-title { margin: 0; font-size: clamp(56px, 6.8vw, 96px); line-height: 1.05; letter-spacing: 0.02em; white-space: nowrap; }
html:not([lang="zh-CN"]) .hero-title { font-size: clamp(56px, 7vw, 100px); letter-spacing: 0.01em; }
/* 中文页这行是 Astralfarer, 其余语言是“星河旖旅”: 沐瑶排第一, 它的 unicode-range 不含拉丁字母。“旖”日文字体没有 */
.hero-alt { font-family: "Muyao-Softbrush", var(--display); margin: 6px 0 0 4px; font-size: 1.4rem; line-height: 1.3; letter-spacing: 0.12em; color: var(--ink); }
html:not([lang="zh-CN"]) .hero-alt { letter-spacing: 0.2em; }
.hero-line { margin: 24px 0 0; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.65; text-wrap: pretty; }
html.latin .hero-line { line-height: 1.45; max-width: 20em; }
html[lang="ja"] .hero-line { word-break: keep-all; }
html[lang="ko"] .hero-line { font-size: clamp(23px, 2.4vw, 30px); line-height: 1.5; }
.release { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; line-height: 1.35; }
.release strong { font-size: clamp(25px, 2.5vw, 31px); letter-spacing: 0.02em; color: var(--ink); text-wrap: balance; }
.release span { color: var(--ink-2); font-size: 1.05rem; }
.hero-text .release span { color: var(--ink); } /* 云上比纸卡上更需要对比 */

/* 理念: 云上的一张纸 */
.idea {
  max-width: 760px; margin: clamp(24px, 4vh, 48px) auto 0; padding: clamp(26px, 4vw, 48px);
  width: calc(100% - 2 * var(--gutter));
  background: rgba(247, 241, 229, 0.9); border-radius: 12px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 18px 40px rgba(58, 32, 74, 0.2);
}
.statement { margin: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.4; letter-spacing: 0.02em; text-wrap: pretty; }
html.cjk .statement { word-break: keep-all; overflow-wrap: anywhere; }
html.latin .statement { font-size: clamp(32px, 3.7vw, 46px); line-height: 1.16; letter-spacing: 0.01em; }
.lead { display: block; margin-bottom: 8px; font-family: var(--body); font-size: 0.56em; line-height: 1.5; letter-spacing: 0.04em; color: var(--bronze); }
.prose { margin: 20px 0 0; text-wrap: pretty; }
.idea .release { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); }

/* 页脚 */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 28px;
  margin-top: clamp(48px, 8vh, 88px); padding: 20px var(--gutter);
  background: rgba(247, 241, 229, 0.88);
  font-family: var(--ui); font-size: 0.88rem; letter-spacing: normal; color: var(--ink-2);
}
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 404 */
.missing { display: grid; align-content: center; justify-items: center; min-height: 100vh; min-height: 100svh; padding: 24px var(--gutter); text-align: center; }
.missing .hero-alt { margin-left: 0; }
.missing .hero-line { font-family: "Muyao-Softbrush", var(--body); }
.missing .release a { font-size: clamp(25px, 2.5vw, 31px); }
.missing .release a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* 响应式 */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding: 68px var(--gutter) 24px; gap: 18px; }
  .porthole-frame { width: min(78%, 46vh); }
  /* 舷窗居中后文字也居中 */
  .hero-text { text-align: center; }
  .hero-alt { margin-left: 0; }
  .hero-line, html.latin .hero-line { margin: 18px auto 0; }
  .hero-text .release { justify-content: center; }
}
@media (max-width: 420px) {
  .hero-title, html:not([lang="zh-CN"]) .hero-title { font-size: 54px; }
}