/* 视频站样式。
   两个栏目各是一个整页，整页风格跟着栏目走：
   - 科学小课堂（/）：夜空 + 描边卡通贴纸，配色取自 library/style/tokens.json，和科普成片画风一致；
   - 寓言故事（/fables/）：水彩山坡 + 宣纸、楷体、朱砂印，和故事线的古风画风一致。
   页面不用内联样式（CSP 只放行本站样式表），所以星星这类位置各异的元素靠 nth-child 摆放。 */
:root {
  --ink: #1f2a44;
  --paper: #fffdf6;
  --card: #ffffff;
  --muted: #5b6478;
  --accent: #ff8a3d;
  --sun: #ffd23f;
  --sky: #e8f4ff;
  --space: #141a33;
  --space-light: #2a3566;
  --grass: #5cc275;
  /* 寓言故事这一半 */
  --rice: #f6ecd6;
  --rice-deep: #ecdcb8;
  --sepia: #4a3424;
  --sepia-soft: #7a6048;
  --cinnabar: #b5352a;
  --radius: 18px;
  --round: "Yuanti SC", "YouYuan", "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --kai: "Kaiti SC", "STKaiti", "KaiTi", "KaiTi_GB2312", "Songti SC", "SimSun", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  line-height: 1.6;
}
a { color: inherit; }
img, video { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 16px 32px;
}

/* ---------- 栏目页共用：页头文字和切换标签 ---------- */
/* 两个栏目各是一个整页（/ 和 /fables/），整页的底色、字体、卡片都跟着栏目走。
   页面跳转没有加 @view-transition 淡入淡出：排查 iOS 微信里「有声音、画面不动」时先撤掉了它，
   后来确认那个问题只出在微信里，和它是否有关没有验证过，要加回来先在微信里测播放。 */

.masthead { position: relative; z-index: 1; text-align: center; }
.masthead h1 { margin: 0; line-height: 1.15; }
.masthead .tagline { margin: 14px 0 0; font-size: 1.1rem; letter-spacing: 0.04em; }
.tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.tab {
  padding: 9px 26px;
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.tab:hover { transform: translateY(-2px); }
.tab:active { transform: translateY(2px); }
.intro { margin: 0; }

/* ---------- 科学小课堂：整页夜空 ---------- */
.theme-science {
  /* 内容不满一屏时把草坡和页脚压到屏幕底部，下面不露出夜空 */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: #fff;
  /* 最上面两层是铺满整页的小星点，下面是从深到浅的夜空，到页底接草坡 */
  background:
    radial-gradient(#fff 1px, transparent 1.6px) 20px 30px / 190px 170px,
    radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1.4px) 80px 70px / 130px 110px,
    radial-gradient(circle at 80% 160px, rgba(134, 182, 255, 0.25), transparent 420px),
    linear-gradient(var(--space) 0, #1b2347 45%, var(--space-light) 100%);
  background-color: var(--space);
}

.sky {
  position: relative;
  padding: calc(48px + env(safe-area-inset-top)) 16px 26px;
}
/* 近处会眨眼的星星，画法和成片里的四角星一样 */
.stars i {
  position: absolute;
  width: 22px;
  height: 22px;
  background: url("/assets/scene/star.svg") center / contain no-repeat;
  animation: twinkle 3.2s ease-in-out infinite;
}
.stars i:nth-child(1) { left: 7%;  top: 14%; }
.stars i:nth-child(2) { left: 24%; top: 58%; width: 15px; height: 15px; animation-delay: -1.1s; }
.stars i:nth-child(3) { left: 33%; top: 9%;  width: 14px; height: 14px; animation-delay: -2.3s; }
.stars i:nth-child(4) { left: 61%; top: 12%; width: 17px; height: 17px; animation-delay: -0.6s; }
.stars i:nth-child(5) { left: 93%; top: 62%; width: 16px; height: 16px; animation-delay: -1.8s; }
.stars i:nth-child(6) { left: 74%; top: 70%; width: 13px; height: 13px; animation-delay: -2.8s; }
.stars i:nth-child(7) { left: 3%;  top: 88%; width: 12px; height: 12px; animation-delay: -0.2s; }
@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.sky .moon { position: absolute; right: 6%; top: 34px; width: 150px; }
.sky .astronaut {
  position: absolute;
  right: calc(6% + 150px);
  top: 96px;
  width: 78px;
  animation: drift 7s ease-in-out infinite;
}
.sky .earth { position: absolute; left: 7%; top: 150px; width: 112px; }
@keyframes drift {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-16px) rotate(4deg); }
}

.theme-science .masthead h1 {
  font-family: var(--round);
  font-size: clamp(2.4rem, 7vw, 4rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--sun);
  /* 深色粗描边 + 硬投影，做成贴纸字 */
  -webkit-text-stroke: 8px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 var(--ink);
}
.theme-science .tab {
  font-family: var(--round);
  color: #fff;
  border: 3px solid #fff;
  border-radius: 999px;
}
.theme-science .tab.is-on {
  color: var(--ink);
  background: var(--sun);
  border-color: var(--ink);
  box-shadow: 0 4px 0 var(--ink);
}
.theme-science .intro { margin-top: 22px; color: #c9d6ff; }

.theme-science main { flex: 1; width: 100%; }
.series { margin-top: 30px; }
.series h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  font-family: var(--round);
  font-size: 1.45rem;
  color: var(--sun);
}
/* 系列名前面挂一颗四角星 */
.series h2::before {
  content: "";
  flex: none;
  align-self: center;
  width: 26px;
  height: 26px;
  background: url("/assets/scene/star.svg") center / contain no-repeat;
}
.series .count { font-family: inherit; font-size: 0.85rem; font-weight: 400; color: #c9d6ff; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  /* 夜空底色上深色描边看不出来，外面再套一圈白边，卡片才像贴在天上的贴纸 */
  box-shadow: 0 0 0 3px #fff, 0 8px 0 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s ease;
}
.card:hover, .card:focus-visible { transform: translateY(-3px) rotate(-0.6deg); }
.card:active { transform: translateY(2px); }
.thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--sky); }
.card .thumb { border-bottom: 3px solid var(--ink); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.duration {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.card-title { padding: 12px 14px 2px; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.card-meta { padding: 0 14px 12px; font-size: 0.85rem; color: var(--muted); }

/* 页底的草坡：小朋友指着天上问，爷爷在旁边讲，整页夜空就是他们在看的东西 */
.ground {
  position: relative;
  height: 230px;
  margin-top: 40px;
  overflow: hidden;
}
.ground::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: 110px;
  height: 400px;
  background: var(--grass);
  border: 5px solid var(--ink);
  border-radius: 50%;
}
.ground .kid { position: absolute; left: 20%; top: 12px; width: 124px; }
.ground .grandpa { position: absolute; right: 20%; top: 4px; width: 128px; }
.theme-science .site-footer { background: var(--grass); color: var(--ink); }

/* ---------- 寓言故事：整页宣纸 ---------- */
.theme-fables { background: var(--rice); color: var(--sepia); font-family: var(--kai); }

/* 页头是一幅水彩山坡：放羊娃在喊，羊在吃草，狼从右边探出半个身子 */
.hillside {
  position: relative;
  overflow: hidden;
  height: clamp(430px, 48vw, 600px);
  padding: calc(34px + env(safe-area-inset-top)) 16px 0;
  background: url("/assets/scene/hill.webp") center 70% / cover no-repeat;
}
/* 上沿加一层淡淡的宣纸色，站名才压得住；下沿晕进纸里，不留硬边 */
.hillside::before, .hillside::after { content: ""; position: absolute; left: 0; right: 0; }
.hillside::before { top: 0; height: 62%; background: linear-gradient(rgba(246, 236, 214, 0.95) 30%, rgba(246, 236, 214, 0)); }
.hillside::after { bottom: 0; height: 70px; background: linear-gradient(rgba(246, 236, 214, 0), var(--rice)); }
.cast img { position: absolute; }
.cast .boy { left: 20%; bottom: 11%; height: 46%; width: auto; }
.cast .sheep { left: 44%; bottom: 12%; height: 25%; width: auto; }
.cast .sheep-graze { left: 57%; bottom: 8%; height: 21%; width: auto; }
.cast .wolf { right: -7%; bottom: 10%; height: 30%; width: auto; }

.theme-fables .masthead h1 {
  font-size: clamp(2.4rem, 7vw, 3.8rem);
  font-weight: 700;
  letter-spacing: 0.14em;
}
.theme-fables .masthead .tagline { letter-spacing: 0.12em; }
.theme-fables .tab {
  letter-spacing: 0.16em;
  color: var(--sepia);
  background: rgba(255, 250, 240, 0.85);
  border: 1px solid var(--sepia-soft);
  border-radius: 6px;
}
/* 当前栏目是一方朱砂印 */
.theme-fables .tab.is-on {
  color: var(--rice);
  background: var(--cinnabar);
  border: 3px double var(--rice);
}
.theme-fables .intro { padding: 6px 0 26px; font-size: 1.25rem; text-align: center; letter-spacing: 0.08em; }
.theme-fables .page { padding-bottom: 56px; }
.theme-fables .grid { justify-content: center; grid-template-columns: repeat(auto-fit, minmax(260px, 380px)); gap: 30px; }

/* 故事卡是一张裱好的小画，不是贴纸 */
.scroll-card {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 14px;
  background: #fffaf0;
  border: 1px solid var(--sepia-soft);
  border-radius: 4px;
  box-shadow: 0 0 0 5px var(--rice-deep), 0 0 0 6px var(--sepia-soft);
  text-decoration: none;
}
.scroll-card .thumb { border: 1px solid var(--sepia-soft); }
.scroll-title { padding: 12px 4px 0; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.12em; }
.scroll-moral { padding: 2px 4px 0; font-size: 1.05rem; color: var(--sepia-soft); }
.soon {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 3px 10px;
  letter-spacing: 0.1em;
  color: var(--rice);
  background: var(--cinnabar);
  border-radius: 4px;
}
.theme-fables .site-footer { color: var(--sepia-soft); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif; }

/* ---------- 播放页 ---------- */
.crumb { max-width: 1080px; margin: 0 auto; padding: calc(14px + env(safe-area-inset-top)) 16px 12px; }
.crumb a { font-weight: 700; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

.player {
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 5px 0 var(--ink);
}
.player video { width: 100%; aspect-ratio: 16 / 9; }

.info h1 { margin: 22px 0 8px; font-size: 1.5rem; line-height: 1.35; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.tag {
  padding: 2px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--sky);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.points {
  padding: 16px 18px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
}
.points h2 { margin: 0 0 8px; font-size: 1.05rem; }
.points ul { margin: 0; padding-left: 1.2em; }
.points li { margin: 4px 0; }
.points li::marker { color: var(--accent); }

.neighbors { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.neighbor {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border: 3px solid var(--ink);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
  min-width: 0;
}
.neighbor:last-child { text-align: right; }
.neighbor.empty { visibility: hidden; }
.neighbor-label { font-size: 0.8rem; color: var(--muted); }
.neighbor-title { font-weight: 700; overflow-wrap: anywhere; }
a.neighbor:hover { background: var(--sky); }

.notfound { padding-top: 64px; text-align: center; }

/* ---------- 页脚 ---------- */
.site-footer {
  padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 0.82rem;
  color: var(--muted);
}
.site-footer .ai-notice { margin: 0 0 8px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
/* 公安备案徽标，贴在备案号文字前面 */
.site-footer .police-badge { display: inline; width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

@media (max-width: 720px) {
  .sky { padding-top: calc(118px + env(safe-area-inset-top)); }
  .theme-science .masthead h1 { -webkit-text-stroke-width: 6px; text-shadow: 0 4px 0 var(--ink); }
  .sky .moon { right: 5%; top: 18px; width: 92px; }
  .sky .astronaut { right: calc(5% + 100px); top: 34px; width: 52px; }
  .sky .earth { left: 5%; top: 24px; width: 70px; }
  .tab { padding: 8px 20px; font-size: 1.05rem; }
  .ground { height: 190px; }
  .ground::before { left: -30%; right: -30%; top: 96px; }
  .ground .kid { left: 9%; width: 96px; }
  .ground .grandpa { right: 9%; width: 98px; }
  .cast .boy { left: 7%; height: 40%; }
  .cast .sheep { left: 38%; height: 21%; }
  .cast .sheep-graze { display: none; }
  .cast .wolf { right: -24%; height: 26%; }
  .theme-fables .intro { font-size: 1.1rem; }
}

@media (max-width: 520px) {
  .grid { grid-template-columns: 1fr; }
  .info h1 { font-size: 1.3rem; }
  /* 手机上让播放器贴边，画面尽量大 */
  .watch { padding-left: 0; padding-right: 0; }
  .watch .player { border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
  .watch .info, .watch .neighbors { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .tab { transition: none; }
  .stars i, .sky .astronaut { animation: none; }
}