/* 晚安游戏机 · Nighty — 站点样式（月光卡带主题）
   色值取自 App：LCDTheme.moonlight / NightPalette / CartridgePalette。
   字体是自托管子集（fonts/，由 sleepy-game 的 tools/fonts/subset-site.sh 生成），不引任何外部资源。
   图片在 shots/ 与 art/（由 sleepy-game 的 tools/GameShots 生成），勿手改。 */
@font-face { font-family: "HuangYou"; src: url("fonts/huangyou.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "PressStart"; src: url("fonts/pressstart.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "LongCang"; src: url("fonts/longcang.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "CaveatSite"; src: url("fonts/caveat.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: dark;
  --bg: #0D1221;        /* 页面底色 */
  --glass: #0A1122;     /* 卡带窗口 / 游戏屏底 */
  --surface: #162038;   /* 卡面 */
  --surface2: #1F2C4A;  /* 卡面高一层 */
  --line: #24314F;
  --text: #D2DEE6;
  --soft: #AFBDCB;      /* 正文段落 */
  --muted: #6F819A;
  --star: #F1D48C;
  --moon: #F4EACB;
  --mint: #A8E0C8;
  --grip: #141C34;
  --contact-top: #1B2644;
  --contact-line: #2F3F66;
  --icon: #8FA0B8;
  --hand: #C9D4E0;
  --title: "HuangYou", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --pixel: "PressStart", ui-monospace, Menlo, monospace;
  --body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--body); font-size: 15px; line-height: 1.7;
}
a { color: var(--star); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, .shelf:focus-visible {
  outline: 2px solid var(--star); outline-offset: 3px;
}
img { max-width: 100%; }

/* —— 语言切换：选定语言后只显示该语言；没有 JS 时 data-lang 不存在，三语照旧全显示 —— */
html[data-lang="zh-Hans"] [lang="en"],
html[data-lang="zh-Hans"] [lang="es"],
html[data-lang="en"] [lang="zh-Hans"],
html[data-lang="en"] [lang="es"],
html[data-lang="es"] [lang="zh-Hans"],
html[data-lang="es"] [lang="en"] { display: none; }
/* 外语对照行：只在中文模式下保留，英 / 西模式下会和标题重复 */
html[data-lang="en"] .lang-secondary,
html[data-lang="es"] .lang-secondary { display: none; }
/* 三语 span 并排的标题：flex 让隐藏的 span 不占位 */
.i18n-inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
/* 没有 JS 时三语并排：中间补一个间隔点，免得连成一串 */
html:not([data-lang]) .feat [lang] + [lang]::before, html:not([data-lang]) .foot-links [lang] + [lang]::before { content: " · "; }

/* —— 页头 —— */
.s-nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 16px clamp(16px, 4vw, 48px);
}
.s-brand {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  font-family: var(--title); font-size: 20px; letter-spacing: .05em; color: var(--text);
}
.s-brand:hover { text-decoration: none; color: var(--star); }
.s-brand img { flex: none; width: 30px; height: 30px; border-radius: 7px; }
.lang-switch { flex: none; display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .03); }
.lang-switch button {
  font: inherit; font-size: 12px; padding: 6px 11px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.lang-switch button[aria-pressed="true"] { background: var(--surface2); color: var(--star); }

/* —— 首页首屏：开场故事 —— */
.hero {
  position: relative; min-height: 500px; padding: 70px 16px 0;
  display: grid; align-content: start; justify-items: center; text-align: center;
}
.hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .copy { position: relative; z-index: 1; display: grid; gap: 8px; justify-items: center; }
.hero h1 {
  margin: 0; font-family: var(--title); font-weight: 400; font-size: clamp(40px, 7vw, 68px);
  line-height: 1.2; letter-spacing: .06em; color: var(--text); text-shadow: 0 0 30px var(--bg);
}
.hero .latin { margin: 0; font-family: var(--pixel); font-size: 10px; letter-spacing: .2em; color: var(--muted); }

/* —— 首页介绍 —— */
.intro { max-width: 560px; margin: 8px auto 0; padding: 0 20px; text-align: center; color: var(--soft); }
.intro p { margin: 0 0 10px; }
html:not([data-lang]) .intro-lang + .intro-lang { margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--line); }
/* 晚安一句：中文龙藏体，英 / 西 Caveat（与 App 设置页页尾一致） */
.wish { font-family: "CaveatSite", "LongCang", cursive; font-size: 26px; line-height: 1.4; color: var(--moon); text-wrap: balance; }
[lang="zh-Hans"] .wish, .wish [lang="zh-Hans"] { font-family: "LongCang", cursive; }
.wish [lang="en"], .wish [lang="es"], .intro-lang:not([lang="zh-Hans"]) .wish { font-family: "CaveatSite", cursive; }
.intro .wish { margin-top: 6px; }
.wish .nb { display: inline-block; }

/* —— 卡带架：横滑；编号用 CSS 计数器，加游戏只需加一张卡 —— */
.shelf-title {
  margin: 34px 0 14px; text-align: center; font-family: var(--pixel); font-weight: 400;
  font-size: 9px; letter-spacing: .18em; color: var(--muted);
}
.shelf {
  display: flex; gap: 16px; overflow-x: auto; counter-reset: cart;
  padding: 6px clamp(16px, 4vw, 48px) 14px; scroll-snap-type: x mandatory;
}
.shelf > :first-child { margin-left: auto; }
.shelf > :last-child { margin-right: auto; }
.shelf > * { flex: none; display: flex; scroll-snap-align: center; }
.cart {
  width: 176px; display: flex; flex-direction: column; gap: 8px; counter-increment: cart;
  padding: 10px 10px 12px; border-radius: 16px; background: var(--surface);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45); color: var(--text);
}
a.cart:hover { text-decoration: none; background: var(--surface2); }
.cart .win {
  aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px;
  border: 2px solid var(--c); background: var(--glass);
}
.cart .win img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cart .lab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; }
.cart .no {
  font-family: var(--pixel); font-size: 7px; line-height: 1; padding: 4px 6px;
  border-radius: 4px; color: var(--bg); background: var(--c);
}
.cart .no::before { content: "NO." counter(cart, decimal-leading-zero); }
.cart h3 { margin: 0; font-family: var(--title); font-weight: 400; font-size: 17px; line-height: 1.3; white-space: nowrap; }
.cart .grip { display: flex; gap: 4px; margin-top: auto; }
.cart .grip i { flex: 1; height: 8px; border-radius: 2px; background: var(--grip); }
.cart .demo { font-size: 11px; text-align: center; color: var(--mint); }
.cart.more {
  counter-increment: none; align-items: center; justify-content: center; text-align: center;
  background: transparent; box-shadow: none; border: 1px dashed var(--line);
  color: var(--muted); font-size: 13px; line-height: 1.6;
}
.cart.more .no { background: var(--line); color: var(--muted); }
.cart.more .no::before { content: "NO.??"; }

.feat { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 26px auto 0; padding: 0 16px; font-size: 13px; color: var(--muted); }
.feat .it::before { content: "✦ "; color: var(--star); }

/* —— 页尾：睡着的小孩靠着收好的箱子 —— */
.foot { display: grid; gap: 8px; justify-items: center; margin: 44px auto 0; padding: 0 16px 40px; text-align: center; font-size: 12px; color: var(--muted); }
.foot .kid { width: 260px; height: auto; }
.foot .wish { margin: 0; font-size: 22px; color: var(--hand); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
.foot-links a { color: var(--muted); }
.foot-links a:hover { color: var(--star); }
.foot p { margin: 0; }

/* —— 内页（技术支持 / 隐私 / 试玩） —— */
.page { max-width: 620px; margin: 0 auto; padding: 10px 20px 0; }
.page .eyebrow { margin: 0; font-family: var(--pixel); font-size: 9px; letter-spacing: .14em; color: var(--muted); }
.page h1 { margin: 10px 0 4px; font-family: var(--title); font-weight: 400; font-size: 36px; line-height: 1.25; letter-spacing: .05em; }
.page p { margin: 8px 0; }
.page .sub { margin: 0; color: var(--soft); }
.promise { font-size: 13px; color: var(--muted); }
.lead { color: var(--star); letter-spacing: .04em; }
.card { margin-top: 16px; padding: 18px 20px; border-radius: 18px; background: var(--surface); }
.card h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.card h2 svg { flex: none; width: 13px; height: 13px; fill: var(--icon); }
.policy section { color: var(--soft); }
html:not([data-lang]) .policy section + section { margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--line); }
.back { display: inline-block; margin-top: 26px; color: var(--muted); }
.back:hover { color: var(--star); text-decoration: none; }

/* 联系开发者：App 的「给我留言」打开 support.html#contact */
.contact { border: 1px solid var(--contact-line); background: linear-gradient(180deg, var(--contact-top), var(--surface)); scroll-margin-top: 16px; }
.contact:target { border-color: var(--star); }
.mailrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.mail {
  padding: 8px 12px; border-radius: 10px; background: var(--bg); color: var(--star);
  font-family: ui-monospace, Menlo, monospace; font-size: 14px; overflow-wrap: anywhere;
}
.copybtn {
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border: 0; border-radius: 999px;
  background: var(--mint); color: var(--bg); cursor: pointer;
}
.copybtn .done { display: none; }
.copybtn.is-done .idle { display: none; }
.copybtn.is-done .done { display: inline; }
.contact .hint { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

/* 常见问题：<details> 原生折叠，没有 JS 也能用 */
.faq details { padding: 10px 0; border-top: 1px solid var(--line); }
.faq details:first-of-type { border-top: 0; }
.faq summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--pixel); font-size: 10px; color: var(--star); }
.faq details[open] summary::after { content: "-"; }
.faq details p { margin: 8px 0 0; font-size: 14px; color: var(--soft); }

@media (max-width: 480px) {
  .page h1 { font-size: 30px; }
  .card { padding: 16px; }
}

@media (max-width: 340px) { .wish { font-size: 22px; } .foot .wish { font-size: 19px; } .s-brand { font-size: 17px; } }