/* 親子報報・捲動版：所有期數共用的樣式。
   一期是一頁長網頁。往下捲，背景的插畫跟著動；字卡從下面捲上來，蓋在插畫上。 */
:root {
  --paper: #fffaf0;
  --ink: #1f2433;
  --muted: #6b7183;
  --line: #e6dfcd;
  --accent: #ff7a1a;
  --teal: #1f9e8f;
  --navy: #0d1b3d;
  --head: "Huninn", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --card: clamp(21px, 2.1vw, 32px);   /* 字卡的字 */
}
* { box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--body); overflow-x: hidden; }
p { margin: 0 0 .55em; }
p:last-child { margin-bottom: 0; }
img, video { max-width: 100%; }
a { color: inherit; }

/* ---------- 注音（國字右邊直排） ---------- */
.z { display: inline-flex; align-items: center; white-space: nowrap; vertical-align: baseline; line-height: 1.25; }
.z > .p { display: inline-flex; align-items: flex-end; font-family: var(--body); font-size: .36em; line-height: 1; font-weight: 400; margin: 0 .35em 0 .15em; }
.z > .p > .y { writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0; }
.z > .p > .t { display: block; width: .9em; margin-left: .05em; position: relative; top: -.3em; }
.nb { display: inline-flex; align-items: center; white-space: nowrap; }
/* 注音關掉（全站共用的設定，見 zy.js） */
html.nozy .z > .p { display: none; }
/* 換行：build.py 把一句話照標點（或 ｜ 記號）切成一小段一小段，每段不拆開，只在段和段之間換行。
   這樣不會有一個字單獨掉到下一行。 */
.phr { display: inline-block; }
.phr b { white-space: nowrap; }   /* 重點的詞（粗體）不拆開 */
.card p, .think .q, .hero h1, .block h2, .block .lead, .real figcaption { text-wrap: balance; }

/* ---------- 最上面的進度條 ---------- */
.progress { position: fixed; left: 0; top: 0; height: 5px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent); z-index: 50; }
/* 左上角：回首頁、注音開關（.topbar 寫在 index.html，按鈕由 build.py 換掉 @@ZYBTN@@） */
.topbar { position: fixed; left: 14px; top: 14px; z-index: 50; display: flex; gap: 8px; }
.home, .zy-btn { font: 600 14px/1.4 var(--body); text-decoration: none; color: #fff; background: rgba(0,0,0,.35); padding: 6px 14px; border: 0; border-radius: 999px; backdrop-filter: blur(6px); cursor: pointer; }
.zy-btn .on, .zy-btn .off { opacity: .5; }
html:not(.nozy) .zy-btn .on, html.nozy .zy-btn .off { opacity: 1; color: #ffd23f; }

/* ---------- 開場 ---------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10vh 6vw; color: #fff; overflow: hidden; background: radial-gradient(ellipse at 50% 110%, #ff9a4d 0%, #7b3f8a 30%, #1b2558 62%, #070d24 100%); }
.hero .stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .issue { position: relative; font: 700 clamp(14px, 1.4vw, 18px) var(--head); letter-spacing: .3em; color: #ffd23f; margin-bottom: 2vh; }
.hero h1 { position: relative; font: 400 clamp(36px, 5.4vw, 84px)/1.35 var(--head); margin: 0; text-shadow: 0 4px 30px rgba(0,0,0,.4); }
.hero .sub { position: relative; font: 400 clamp(20px, 2.2vw, 30px)/1.8 var(--head); margin-top: 3vh; opacity: .92; }
.hero .cue { position: absolute; bottom: 4vh; left: 50%; transform: translateX(-50%); font: 400 18px var(--head); opacity: .85; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero .cue::after { content: ""; width: 18px; height: 18px; border-right: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(45deg); animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(8px) rotate(45deg); } }

/* ---------- 場景：背景固定、字卡捲過去 ---------- */
.scene { position: relative; }
.scene .bg { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
/* 插畫和字卡各佔一區，字卡不會蓋到動畫：
   橫的螢幕（教室投影、電腦）：左邊 38% 放字卡，插畫畫在右邊；
   直的螢幕（手機）：字卡在上面，插畫在下面一半。
   地面、天空會延伸到整個畫面（overflow: visible），但主角只在插畫區裡動。 */
.scene .bg > svg.art, .scene .bg > .world, .scene .bg > canvas.gl { position: absolute; top: 0; left: 38%; width: 62%; height: 100%; overflow: visible; }
/* 3D 的畫布蓋滿整個背景，主角由程式畫在插畫區裡 */
.scene .bg > canvas.gl, .scene .bg > canvas.gl { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
/* 照片場景（例如從台灣拉遠到整個地球）：照片放在 .world 裡，由 JS 算位置和大小 */
.world img { position: absolute; display: block; max-width: none; }
.world img.globe { border-radius: 50%; }   /* 地球照片四個角是黑的，切成圓的才看得到後面的星星 */
.scene .bg > .ring { position: absolute; z-index: 1; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 3px solid #ffd23f; border-radius: 50%; opacity: 0; transition: opacity .3s; pointer-events: none; }
.scene .bg > .ring.on { opacity: 1; }
.scene .bg > .flash { position: absolute; inset: 0; z-index: 1; background: #fff; opacity: 0; pointer-events: none; }
.scene .bg > .flash.on { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }
.scene .bg > .scredit { position: absolute; right: 12px; bottom: 8px; z-index: 1; font: 400 11px/1.4 var(--body); color: rgba(255, 255, 255, .55); }
.scene .bg > .scredit a { color: inherit; }
.scene .steps { position: relative; z-index: 2; margin-top: -100vh; margin-top: -100svh; pointer-events: none; }
.step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding: 0 0 0 max(4vw, 66px); }
.card {
  pointer-events: auto;
  max-width: min(540px, 34vw);
  background: rgba(255, 250, 240, .96);
  border-radius: 22px;
  padding: 1em 1.05em;
  font: 400 var(--card)/1.85 var(--head);
  box-shadow: 0 14px 40px rgba(10, 15, 40, .22);
}
.card .when { display: inline-block; font: 700 .62em var(--head); letter-spacing: .12em; color: #fff; background: var(--accent); border-radius: 6px; padding: .1em .6em; margin-bottom: .5em; }
.card b, .card .hl { color: var(--accent-dark, #c25205); }
.card.big { font-size: calc(var(--card) * 1.2); }

/* 背景上的小標籤（例如高度計） */
.hud { position: absolute; z-index: 1; font: 400 clamp(18px, 1.8vw, 26px) var(--head); color: #fff; background: rgba(0,0,0,.32); padding: .4em .9em; border-radius: 14px; backdrop-filter: blur(4px); }
.hud b { font-size: 1.5em; color: #ffd23f; font-variant-numeric: tabular-nums; }
.pop { position: absolute; z-index: 1; font: 400 clamp(30px, 4vw, 60px) var(--head); color: var(--ink); transform: translate(-50%, -50%) scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); white-space: nowrap; }
.pop.on { transform: translate(-50%, -50%) scale(1); }

/* ---------- 一般段落（照片、說明） ---------- */
.block { position: relative; padding: 14vh 6vw; max-width: 1180px; margin: 0 auto; }
.block h2 { font: 400 clamp(30px, 3.6vw, 52px)/1.45 var(--head); margin: 0 0 .6em; }
.block .lead { font: 400 calc(var(--card) * 1.05)/1.9 var(--head); max-width: 34em; }
.kicker { display: inline-block; font: 700 clamp(14px, 1.2vw, 17px) var(--head); letter-spacing: .2em; color: var(--teal); margin-bottom: 1em; }

/* 「這是真的」照片 */
.real { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); margin-top: 1.4em; }
.real figure { margin: 0; }
.real .ph { position: relative; border-radius: 18px; overflow: hidden; background: #ddd; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.real img, .real video { display: block; width: 100%; height: clamp(260px, 42vh, 520px); object-fit: cover; }
.real .tag { position: absolute; left: 14px; top: 14px; font: 700 15px var(--head); background: #fff; color: var(--ink); padding: 3px 12px; border-radius: 999px; }
.real figcaption { font: 400 clamp(18px, 1.6vw, 24px)/1.75 var(--head); margin-top: .7em; }
.real .credit { display: block; font: 400 12px/1.5 var(--body); color: var(--muted); margin-top: .3em; }
.real .credit a { color: var(--muted); }
.real.one { grid-template-columns: 1fr; }
.real .ph.fit { background: #1f2433; }
.real .ph.fit img, .real.one .ph.fit img { width: auto; max-width: 100%; height: min(86vh, 1000px); margin: 0 auto; object-fit: contain; }
.real.one img, .real.one video { height: clamp(300px, 62vh, 720px); }
/* 照片上標出「台灣」「颱風眼」：照片不裁切，標籤用百分比放 */
.real .ph.full img { height: auto; }
.real .mark { position: absolute; transform: translate(0, -50%); font: 700 clamp(15px, 1.6vw, 22px) var(--head); color: #c25205; background: rgba(255, 255, 255, .92); padding: 2px 12px; border-radius: 999px; white-space: nowrap; }
.real .mark.left { transform: translate(-100%, -50%); }
.real .ph svg.outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.real .eye { position: absolute; width: 9%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 3px dashed #ff7a1a; border-radius: 50%; }

/* ---------- 比例尺：真的照比例往下捲 ---------- */
.tall { position: relative; --m: min(3vh, 3.4vw); padding: 10vh 0 0; background: linear-gradient(#9fd3ff, #d9efff 85%, #e8f5ff); }
.tall .track { position: relative; z-index: 2; height: calc(124.4 * var(--m)); margin: 0 auto; width: min(1000px, 100%); }
.tall .ship { position: absolute; left: 50%; top: 0; height: calc(124.4 * var(--m)); width: calc(13 * var(--m)); transform: translateX(-50%); }
.tall .tick { position: absolute; left: calc(50% + 7.5 * var(--m)); transform: translateY(-50%); display: flex; align-items: center; gap: 8px; font: 400 clamp(14px, 1.3vw, 18px) var(--head); color: #34516e; }
.tall .tick::before { content: ""; width: 26px; height: 3px; background: #34516e; }
.tall .meter { position: sticky; top: 45vh; z-index: 3; width: max-content; margin-left: max(3vw, calc(50% - 6.5 * var(--m) - 260px)); margin-bottom: calc(-1 * 3.2em); font: 400 clamp(18px, 1.8vw, 26px)/1.6 var(--head); background: #fff; padding: .35em .9em; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.tall .meter b { font-size: 1.6em; color: var(--accent); font-variant-numeric: tabular-nums; }
.tall .ground { position: relative; height: 22vh; background: #9bc27a; border-top: 6px solid #7aa35a; }
.tall .school { position: absolute; bottom: 100%; left: calc(50% + 9 * var(--m)); width: calc(18 * var(--m)); height: calc(15 * var(--m)); }
.tall .kid { position: absolute; bottom: 100%; left: calc(50% + 6 * var(--m)); width: calc(.6 * var(--m)); height: calc(1.2 * var(--m)); }
.tall .school { z-index: 1; }
.tall .kid { z-index: 3; }
.tall .say { position: absolute; z-index: 3; font: 400 clamp(15px, 1.4vw, 20px)/1.5 var(--head); background: #fff; padding: .2em .7em; border-radius: 10px; white-space: nowrap; }
.tall .say.kid-say { bottom: calc(100% + 1.2 * var(--m) + 18px); left: calc(50% + 6 * var(--m)); transform: translateX(-30%); }
.tall .say.kid-say::after { content: ""; position: absolute; left: 30%; top: 100%; border: 8px solid transparent; border-top-color: #fff; }
.tall .say.school-say { bottom: calc(100% + 15 * var(--m) + 10px); left: calc(50% + 9 * var(--m)); }

/* 比高的圖 */
.fig { position: relative; max-width: 760px; margin: 1.5em auto 0; }
.fig svg { display: block; width: 100%; height: auto; }
.fig .lab { position: absolute; transform: translate(-50%, -100%); font: 700 clamp(14px, 1.6vw, 20px)/1.3 var(--head); white-space: nowrap; }
.fig .lab.below { transform: translate(-50%, 0); font-weight: 400; color: var(--muted); }

/* ---------- 想一想、動手做、給大人 ---------- */
.think { background: var(--navy); color: #fff; text-align: center; padding: 18vh 6vw; }
.think .kicker { color: #ffd23f; }
.think .q { font: 400 clamp(30px, 4.2vw, 62px)/1.7 var(--head); max-width: 18em; margin: 0 auto; }
.think .a { font: 400 clamp(40px, 6vw, 92px)/1.5 var(--head); color: #ffd23f; margin-top: 8vh; }
.make { background: #fff3df; }
.make .mats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1.2em; padding: 0; list-style: none; }
.make .mats li { background: #fff; border: 2px solid #f0d5ab; border-radius: 999px; padding: .2em .9em; font: 400 calc(var(--card) * .85) var(--head); }
.make ol { font: 400 var(--card)/1.9 var(--head); padding-left: 1.4em; margin: 0; }
.make ol li { margin-bottom: .3em; }
.make .challenge { margin-top: 1.4em; background: #fff; border: 3px dashed var(--accent); border-radius: 18px; padding: 1em 1.3em; font: 400 var(--card)/1.85 var(--head); }
.make .warn { margin-top: 1em; color: #b3261e; font: 400 calc(var(--card) * .85) var(--head); }
.adults { font-size: 17px; line-height: 1.8; }
.adults h2 { font-size: clamp(24px, 2.4vw, 32px); }
.adults h3 { font: 700 19px var(--body); margin: 1.6em 0 .4em; }
.adults ul { padding-left: 1.2em; margin: 0; }
.adults li { margin-bottom: .35em; }
.foot { text-align: center; padding: 6vh 6vw 10vh; color: var(--muted); font-size: 14px; }

/* 手機：字卡置中，留空間給背景 */
@media (max-width: 700px) {
  .tall .meter { top: 56px; margin-left: 3vw; }
  .tall .say.kid-say { transform: translateX(-60%); }
  .tall .tick { left: calc(50% + 6.6 * var(--m)); gap: 4px; }
  .tall .tick::before { width: 12px; }
}
/* 學校在星艦右邊放不下的時候（手機、直的平板、比較窄的電腦），躲在星艦後面 */
@media (max-width: 1100px), (max-aspect-ratio: 10/11) {
  .tall .school, .tall .say.school-say { left: calc(50% - 9 * var(--m)); }
}
@media (max-aspect-ratio: 10/11) {
  .scene .bg > svg.art, .scene .bg > .world, .scene .bg > canvas.gl { left: 0; width: 100%; top: 50%; height: 50%; }
  .step { justify-content: center; align-items: flex-start; padding: 5vh 4vw 0; }
  .card { max-width: min(600px, 92vw); }
  :root { --card: clamp(18px, 4.9vw, 26px); }
  .card.big { font-size: calc(var(--card) * 1.2); }
  .hud { top: auto !important; bottom: 66px !important; left: 50% !important; right: auto !important; transform: translateX(-50%); font-size: 17px; white-space: nowrap; }   /* 直的螢幕：放在最下面、按鈕上方，不會被字卡蓋到 */
}
/* ---------- 失敗了好多次：一列一件事，叉叉和勾勾（捲到時跳出來，data-scroll-fn="fails"） ---------- */
.fails .tally { display: grid; gap: 18px; margin: 1.4em 0 2.4em; }
.fails .row { background: #fff; border-radius: 20px; padding: 1em 1.3em; box-shadow: 0 8px 24px rgba(10, 15, 40, .1); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4em 1.2em; align-items: center; }
.fails .what { font: 400 calc(var(--card) * .95)/1.6 var(--head); }
.fails .say { grid-column: 1 / -1; font: 400 calc(var(--card) * .9)/1.7 var(--head); color: var(--muted); text-wrap: balance; }
.fails .say b { color: #c25205; font-size: 1.3em; }
.fails .marks { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.fails .marks i { width: clamp(30px, 3.2vw, 44px); aspect-ratio: 1; border-radius: 50%; position: relative; background: #e5484d; transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.fails .marks i.o { background: #2f9e44; }
.fails .marks i::before, .fails .marks i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 56%; height: 4px; margin: -2px 0 0 -28%; background: #fff; border-radius: 2px; transform: rotate(45deg); }
.fails .marks i::after { transform: rotate(-45deg); }
.fails .marks i.o::before { width: 30%; margin: 0; left: 24%; top: 54%; transform: rotate(45deg); transform-origin: 0 50%; }
.fails .marks i.o::after { width: 50%; margin: 0; left: 38%; top: 70%; transform: rotate(-50deg); transform-origin: 0 50%; }
.fails.seen .marks i { transform: scale(1); }
.fails h3 { font: 400 clamp(24px, 2.8vw, 40px)/1.5 var(--head); margin: 0 0 .6em; text-wrap: balance; }
.fails .found { list-style: none; padding: 0; margin: 0 0 2.4em; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.fails .found li p, .fails .what { text-wrap: balance; }
.fails .found li { background: #fff3df; border-radius: 18px; padding: 1em 1.2em; font: 400 calc(var(--card) * .85)/1.75 var(--head); }
.fails .found .when { display: inline-block; font: 700 .75em var(--head); letter-spacing: .1em; color: #fff; background: var(--accent); border-radius: 6px; padding: .05em .55em; margin-bottom: .4em; }
.fails .found .fix { color: #1f7a4a; margin-top: .4em; }
.fails .big-lead { font: 400 calc(var(--card) * 1.2)/1.9 var(--head); background: var(--navy); color: #fff; border-radius: 24px; padding: 1.1em 1.4em; text-wrap: balance; }
.fails .big-lead b { color: #ffd23f; }
@media (max-width: 640px) {
  .fails .row { grid-template-columns: 1fr; }
  .fails .marks { justify-content: flex-start; }
}

/* ---------- 截圖模式（?shot=段落:p）：插畫鋪滿畫面，沒有字卡 ---------- */
.shot .scene .steps { display: none; }
.shot .scene .bg > svg.art, .shot .scene .bg > .world { left: 0 !important; width: 100% !important; top: 0 !important; height: 100% !important; }
.shot .pop, .shot .plab, .shot .ring { transition: none !important; }

/* ---------- 左右兩邊的上下按鈕（教室觸控不好用時，點這裡往下、往上） ---------- */
.navbtns { position: fixed; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 12px; }
.navbtns.l { left: 8px; }
.navbtns.r { right: 8px; }
.navbtns button { width: 52px; height: 52px; border: 0; border-radius: 50%; background: rgba(20, 26, 48, .42); color: #fff; cursor: pointer; display: grid; place-items: center; padding: 0; backdrop-filter: blur(4px); -webkit-tap-highlight-color: transparent; transition: background .15s, transform .1s; }
.navbtns button:hover { background: rgba(20, 26, 48, .7); }
.navbtns button:active { transform: scale(.92); }
.navbtns button::before { content: ""; width: 14px; height: 14px; border-left: 4px solid #fff; border-top: 4px solid #fff; transform: translateY(3px) rotate(45deg); }
.navbtns button.down::before { transform: translateY(-3px) rotate(225deg); }
@media (max-aspect-ratio: 10/11) {
  .navbtns { top: auto; bottom: 12px; transform: none; flex-direction: row; gap: 8px; }
  .navbtns button { width: 44px; height: 44px; }
}
@media print { .navbtns { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero .cue::after { animation: none; }
  .pop { transition: none; }
  .scene .bg > .flash.on { animation: none; }
}