/* 科学乐园：像儿童游戏一样的界面 —— 天空背景、糖果色的“可按”按钮（底边加厚）、贴纸一样的卡片。
   首页是 7 个学科世界的大图块；进入学科是一排书；打开书是一张纸页 + 一张实验卡片。 */
:root {
  --sky-top: #7FD3FF;
  --sky-bottom: #E3F6FF;
  --paper: #EEF7FD;
  --page: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F3F8FC;
  --ink: #24313F;
  --ink-soft: #66768A;
  --line: #DCE6EF;
  --edge: rgba(36, 49, 63, .14);
  --stage: #EAF5FB;
  --stage-dot: #CFE3EF;
  --go: #2EC26A;
  --go-edge: #1F9B52;
  --accent: #FF7A45;
  --accent-edge: #D9572A;
  --accent-ink: #FFFFFF;
  --star: #FFC83D;
  --star-edge: #E09B00;
  --ok: #1F9B52;
  --ok-soft: #DDF6E7;
  --hilite: #FFEC8F;
  --wood: #D9A066; --wood-dark: #A8703C; --wood-light: #EBC291;
  --cloud: rgba(255, 255, 255, .55);
  /* 学科色：c- 是图块和封面底色（两种主题一样，配白字）；e- 是它的“底边”；不带前缀的是页面上的文字色 */
  --c-astro: #5B5BD6; --e-astro: #3E3EAE;
  --c-aero: #F2545B;  --e-aero: #C73A40;
  --c-geo: #14B8A6;   --e-geo: #0D8C7F;
  --c-bio: #3CC160;   --e-bio: #279946;
  --c-phy: #2F8CFF;   --e-phy: #1F68CC;
  --c-chem: #A35BF5;  --e-chem: #7B3BCB;
  --c-mech: #FF8A1F;  --e-mech: #D06A0A;
  --astro: #4446C9; --aero: #D93A42; --geo: #0E8F82; --bio: #23874F; --phy: #1F6FD6; --chem: #7C3FD0; --mech: #C2610A;
  --shadow: 0 2px 0 rgba(36, 49, 63, .06), 0 14px 30px -18px rgba(36, 49, 63, .45);
  --font-display: "ZCOOL KuaiLe", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-round: "Fredoka", "Noto Sans SC", system-ui, sans-serif;
  --font-latin: "Andika", "Noto Sans SC", system-ui, sans-serif;
  --r: 22px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sky-top: #0B1433; --sky-bottom: #1D2856; --paper: #111A36; --page: #19233F; --surface: #1C2747; --surface-2: #222E52;
    --ink: #EEF3FA; --ink-soft: #A5B3C7; --line: #33416A; --edge: rgba(0, 0, 0, .45); --stage: #1A2549; --stage-dot: #2B3A66;
    --ok: #4CD685; --ok-soft: #173826; --hilite: #6B5A17; --cloud: rgba(160, 180, 255, .07);
    --astro: #9C9DFF; --aero: #FF8A8F; --geo: #4FD9C8; --bio: #5FDB83; --phy: #6FB0FF; --chem: #C69BFF; --mech: #FFB056;
    --shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 14px 30px -18px rgba(0, 0, 0, .9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sky-top: #0B1433; --sky-bottom: #1D2856; --paper: #111A36; --page: #19233F; --surface: #1C2747; --surface-2: #222E52;
  --ink: #EEF3FA; --ink-soft: #A5B3C7; --line: #33416A; --edge: rgba(0, 0, 0, .45); --stage: #1A2549; --stage-dot: #2B3A66;
  --ok: #4CD685; --ok-soft: #173826; --hilite: #6B5A17; --cloud: rgba(160, 180, 255, .07);
  --astro: #9C9DFF; --aero: #FF8A8F; --geo: #4FD9C8; --bio: #5FDB83; --phy: #6FB0FF; --chem: #C69BFF; --mech: #FFB056;
  --shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 14px 30px -18px rgba(0, 0, 0, .9);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--phy); outline-offset: 3px; border-radius: 12px; }
.app { height: 100%; display: flex; flex-direction: column; }
.latin { font-family: var(--font-latin); }
.round { font-family: var(--font-round); }
.view-enter { animation: view-in .42s var(--ease) both; }
@keyframes view-in { from { transform: translateY(16px) scale(.985); } to { transform: none; } }

/* ---------- 按钮：糖果色、底边加厚、按下去会“陷”下去 ---------- */
.btn {
  --b: var(--surface); --be: var(--line); --bi: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: 18px; border: 0;
  background: var(--b); color: var(--bi); box-shadow: 0 5px 0 var(--be), inset 0 0 0 2px var(--be);
  font-weight: 900; font-size: 18px; letter-spacing: .04em; white-space: nowrap;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease), filter .2s;
  touch-action: manipulation; transform: translateY(0);
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--be), inset 0 0 0 2px var(--be); }
.btn:disabled { filter: grayscale(.6) opacity(.6); }
.btn.primary { --b: var(--accent); --be: var(--accent-edge); --bi: #fff; box-shadow: 0 5px 0 var(--be); }
.btn.go { --b: var(--go); --be: var(--go-edge); --bi: #fff; box-shadow: 0 5px 0 var(--be); }
.btn.primary:active, .btn.go:active { box-shadow: 0 1px 0 var(--be); }
.btn svg { width: 24px; height: 24px; flex: none; }
.icon-btn {
  width: 52px; height: 52px; border-radius: 18px; border: 0; padding: 0; flex: none;
  display: inline-grid; place-items: center; background: var(--surface); color: var(--ink);
  box-shadow: 0 4px 0 var(--line), inset 0 0 0 2px var(--line);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
  touch-action: manipulation;
}
.icon-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line), inset 0 0 0 2px var(--line); }
.icon-btn svg { width: 26px; height: 26px; }
.toggle[aria-pressed="true"] { background: var(--ink); color: var(--page); box-shadow: 0 4px 0 var(--edge), inset 0 0 0 2px var(--ink); }
.toggle-text { width: auto; min-width: 52px; padding: 0 12px; font-weight: 900; font-size: 17px; }

/* ---------- 首页：科学乐园 ---------- */
.home {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(120px 46px at 12% 9%, var(--cloud), transparent 70%),
    radial-gradient(160px 54px at 82% 6%, var(--cloud), transparent 70%),
    linear-gradient(var(--sky-top), var(--sky-bottom) 420px, var(--paper) 760px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 16px 56px;
}
.home-inner { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.topbar { display: flex; align-items: center; gap: 12px; }
.hello { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.hello .mascot { width: 76px; height: 76px; flex: none; animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-5px) rotate(-2deg); } }
.bubble {
  position: relative; background: var(--surface); border-radius: 20px; padding: 10px 16px; box-shadow: var(--shadow);
  font-family: var(--font-display); font-size: clamp(19px, 2.6vw, 26px); line-height: 1.25; letter-spacing: .03em; min-width: 0;
}
.bubble::before { content: ""; position: absolute; left: -9px; top: 50%; margin-top: -9px; border: 9px solid transparent; border-right-color: var(--surface); border-left: 0; }
.bubble small { display: block; font-family: var(--font-body); font-size: 13px; color: var(--ink-soft); letter-spacing: 0; }
.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 16px 0 10px; border-radius: 999px; border: 0;
  background: var(--surface); box-shadow: 0 4px 0 var(--line), inset 0 0 0 2px var(--line);
  font-family: var(--font-round); font-weight: 700; font-size: 20px; font-variant-numeric: tabular-nums; touch-action: manipulation;
}
.pill svg { width: 30px; height: 30px; }
.pill:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line), inset 0 0 0 2px var(--line); }
.top-actions { display: flex; gap: 10px; align-items: center; }
.brand-mini { display: none; font-family: var(--font-display); font-size: 20px; letter-spacing: .06em; color: var(--ink); }
.welcome .mascot { width: 84px; height: 84px; flex: none; }

.continue {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  background: var(--surface); border-radius: 26px; padding: 14px 16px; box-shadow: 0 6px 0 var(--line), var(--shadow);
  border: 0; text-align: left; touch-action: manipulation; color: var(--ink);
}
.continue:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--line); }
.continue .mini-cover { --c: var(--c-mech); --e: var(--e-mech); width: 74px; height: 92px; border-radius: 10px 16px 16px 10px; position: relative; overflow: hidden; background: var(--c); box-shadow: 0 4px 0 var(--e); }
.continue .mini-cover svg { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
.continue .k { font-size: 13px; font-weight: 700; color: var(--ink-soft); letter-spacing: .1em; }
.continue .t { font-family: var(--font-display); font-size: 26px; line-height: 1.2; letter-spacing: .04em; }
.bar { height: 12px; border-radius: 8px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); overflow: hidden; margin-top: 8px; }
.bar span { display: block; height: 100%; border-radius: 8px; background: var(--go); }

.section-title { display: flex; align-items: baseline; gap: 10px; margin: 6px 4px -6px; }
.section-title h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; letter-spacing: .06em; }
.section-title span { font-family: var(--font-round); color: var(--ink-soft); font-size: 15px; }

.worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 18px; }
.world {
  --c: var(--c-mech); --e: var(--e-mech);
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  min-height: 210px; padding: 16px 18px; border: 0; border-radius: 28px; overflow: hidden; text-align: left; color: #fff;
  background: radial-gradient(130% 90% at 70% 0%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 70%);
  box-shadow: 0 7px 0 var(--e), 0 18px 30px -18px rgba(0, 0, 0, .5);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease); touch-action: manipulation;
}
.world:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--e); }
.world.surprise { --c: #FFB020; --e: #D98A00; }
.world.surprise .scene { display: grid; place-items: center; }
.world .scene { position: absolute; inset: 0 0 auto auto; width: 100%; height: 72%; pointer-events: none; }
.world .scene svg { width: 100%; height: 100%; }
.floaty { animation: floaty 4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.floaty.d2 { animation-delay: -1.3s; } .floaty.d3 { animation-delay: -2.6s; }
@keyframes floaty { 50% { translate: 0 -6px; } }
.twinkle { animation: twinkle 2.6s ease-in-out infinite; }
.twinkle.d2 { animation-delay: -.9s; } .twinkle.d3 { animation-delay: -1.7s; }
@keyframes twinkle { 50% { opacity: .35; } }
.world .name { position: relative; font-family: var(--font-display); font-size: 34px; line-height: 1.1; letter-spacing: .08em; text-shadow: 0 3px 0 var(--e); }
.world .en { position: relative; font-family: var(--font-round); font-weight: 600; font-size: 15px; opacity: .95; }
.world .meta { position: relative; display: flex; gap: 8px; margin-top: 8px; }
.world .meta span { display: inline-flex; align-items: center; gap: 4px; background: rgba(0, 0, 0, .18); border-radius: 999px; padding: 2px 10px; font-family: var(--font-round); font-weight: 600; font-size: 14px; }
.world .meta svg { width: 16px; height: 16px; }

/* ---------- 学科页 ---------- */
.series-view { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--paper); }
.series-head {
  --c: var(--c-mech); --e: var(--e-mech);
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 120% at 80% 0%, color-mix(in srgb, var(--c) 55%, #fff), var(--c) 65%);
  box-shadow: inset 0 -8px 0 var(--e);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 14px 34px;
}
.series-head .row { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.series-head .icon-btn { background: rgba(255, 255, 255, .95); color: #24313F; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); }
.series-head h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 6vw, 56px); letter-spacing: .08em; line-height: 1.1; text-shadow: 0 3px 0 var(--e); }
.series-head .sub { font-family: var(--font-round); font-weight: 600; opacity: .95; }
.series-head .blurb { max-width: 1180px; margin: 12px auto 0; position: relative; z-index: 1; font-size: 17px; font-weight: 500; }
.series-head .blurb span { display: block; max-width: 30em; }
.series-head .scene { position: absolute; right: 0; top: 14px; bottom: 14px; width: min(44%, 400px); opacity: .95; pointer-events: none; }
.series-head .scene svg { width: 100%; height: 100%; overflow: visible; }
.books {
  max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 26px 20px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 26px 60px;
}
.book-card { border: 0; background: none; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 10px; touch-action: manipulation; color: var(--ink); }
.cover {
  --c: var(--c-mech); --e: var(--e-mech);
  position: relative; aspect-ratio: 3 / 4; width: 100%; max-width: 100%; border-radius: 10px 24px 24px 10px; overflow: hidden; color: #fff;
  background: radial-gradient(120% 80% at 75% 10%, color-mix(in srgb, var(--c) 50%, #fff), var(--c) 70%);
  box-shadow: 0 6px 0 var(--e), 0 18px 30px -16px rgba(0, 0, 0, .55);
  transition: transform .2s var(--bounce);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 14px 16px 22px;
}
.book-card:active .cover { transform: translateY(4px) rotate(-1deg); }
@media (hover: hover) { .book-card:hover .cover { transform: rotate(-1.5deg) translateY(-3px); } }
.cover::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 12px; background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(255, 255, 255, .15) 70%, rgba(0, 0, 0, .08)); }
.cover::after { content: ""; position: absolute; inset: 8px 8px 8px 18px; border: 2px solid rgba(255, 255, 255, .35); border-radius: 6px 16px 16px 6px; pointer-events: none; }
.cover .art { position: absolute; left: 14%; right: 4%; top: 6%; height: 60%; pointer-events: none; }
.cover .art svg { width: 100%; height: 100%; }
.cover .t { position: relative; font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; letter-spacing: .05em; text-shadow: 0 2px 0 var(--e); text-wrap: balance; }
.cover .t-en { position: relative; font-family: var(--font-round); font-weight: 600; font-size: 13px; opacity: .95; margin-top: 4px; }
.cover .new { position: absolute; top: 12px; right: 12px; z-index: 1; background: var(--star); color: #5A3A00; font-family: var(--font-round); font-weight: 700; font-size: 13px; padding: 2px 10px; border-radius: 999px; box-shadow: 0 3px 0 var(--star-edge); }
.stars3 { display: flex; justify-content: center; gap: 4px; }
.stars3 svg { width: 30px; height: 30px; }
.book-card .bar { margin: 0 6px; }

/* ---------- 贴纸册 ---------- */
.stickers { max-width: 1180px; margin: 0 auto; padding: 24px max(16px, env(safe-area-inset-right, 0px)) 60px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 26px; }
.sticker-row h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.sticker-row h3 svg { width: 26px; height: 26px; }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 18px 14px; }
.sticker { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; font-size: 14px; font-weight: 700; border: 0; background: none; padding: 0; color: var(--ink); }
.sticker .disc {
  --c: var(--c-mech); --e: var(--e-mech);
  width: 104px; height: 104px; border-radius: 50%; position: relative; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 45%, #fff), var(--c) 70%);
  box-shadow: 0 0 0 5px #fff, 0 6px 0 5px var(--e), 0 16px 22px -10px rgba(0, 0, 0, .5);
}
.sticker .disc svg { width: 72%; height: 72%; }
.sticker.locked .disc { background: var(--surface-2); box-shadow: inset 0 0 0 3px var(--line); }
.sticker.locked .disc::after { content: "?"; font-family: var(--font-round); font-weight: 700; font-size: 40px; color: var(--line); }
.sticker.locked { color: var(--ink-soft); font-weight: 500; }
.passport h3 small { margin-left: 4px; font-family: var(--font-round); font-size: 16px; color: var(--ink-soft); letter-spacing: 0; }
.mini-stamp { width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; justify-items: center; color: var(--stamp); border: 5px double var(--stamp); background: color-mix(in srgb, var(--stamp) 8%, var(--surface)); transform: rotate(-10deg); }
.mini-stamp .em { font-size: 40px; line-height: 1.1; }
.mini-stamp small { font-family: var(--font-round); font-weight: 700; font-size: 13px; }

/* ---------- 阅读器 ---------- */
.reader { flex: 1; min-height: 0; display: grid; grid-template-rows: auto 1fr auto; background: var(--paper); }
.reader-bar {
  display: flex; align-items: center; gap: 10px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-block: 10px 8px;
}
.reader-bar .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.reader-bar .ttl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.reader-bar .ttl b { font-family: var(--font-display); font-weight: 400; font-size: 21px; letter-spacing: .05em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-bar .ttl small { font-family: var(--font-round); color: var(--ink-soft); font-size: 14px; white-space: nowrap; }
.progress { display: flex; gap: 4px; height: 14px; }
.progress button { flex: 1; border: 0; padding: 0; border-radius: 7px; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); min-width: 0; }
.progress button.seen { background: color-mix(in srgb, var(--series, var(--go)) 45%, var(--surface)); box-shadow: none; }
.progress button[aria-current="true"] { background: var(--series, var(--go)); box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--series, var(--go)); }
.reader-tools { display: flex; gap: 8px; }

.book {
  position: relative; min-height: 0; perspective: 2200px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-block: 2px 4px;
}
.page {
  position: absolute; inset: 2px max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
  background: var(--page); border-radius: 12px 30px 30px 12px; overflow: hidden;
  box-shadow: 0 6px 0 var(--line), var(--shadow), inset 16px 0 20px -16px rgba(0, 0, 0, .18);
  transform-origin: left center; backface-visibility: hidden; will-change: transform;
}
.page::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 8px; background: var(--series, var(--line)); z-index: 2; }
.page .shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 60%); opacity: 0; z-index: 3; }
.page-inner { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.spread { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px 16px 26px 22px; }
@media (min-width: 860px) and (min-aspect-ratio: 1/1) {
  .spread.has-fig { grid-template-columns: minmax(300px, .82fr) minmax(0, 1.3fr); height: 100%; padding: 22px 22px 22px 30px; gap: 24px; }
  .spread.has-fig .copy { order: 0; overflow-y: auto; padding-right: 6px; }
  .spread.has-fig .fig { order: 1; height: 100%; min-height: 0; }
}
.copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; order: 1; }
.spread .fig { order: 0; }
.kicker { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 3px 12px 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--series, var(--go)) 14%, transparent); color: var(--series-ink, var(--ink-soft)); font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.kicker svg { width: 18px; height: 18px; }
.copy h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 3.8vw, 42px); line-height: 1.15; letter-spacing: .05em; text-wrap: balance; }
.copy h2 .latin { display: block; font-family: var(--font-round); font-weight: 600; font-size: .44em; letter-spacing: .02em; color: var(--ink-soft); margin-top: 4px; }

.text { font-size: clamp(20px, 2.3vw, 24px); line-height: 1.9; letter-spacing: .04em; max-width: 34em; font-weight: 500; }
.text.easy { font-size: clamp(24px, 2.8vw, 29px); line-height: 1.95; }
.text p { margin: 0; }
.text ruby { ruby-position: over; }
.text rt { font-family: var(--font-latin); font-size: .5em; letter-spacing: 0; color: var(--ink-soft); font-weight: 400; padding: 0 .18em; }
.sentence { border-radius: 8px; transition: background .2s; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.sentence.reading { background: var(--hilite); }
.term {
  font: inherit; letter-spacing: inherit; border: 0; padding: 0 3px; margin: 0 1px; border-radius: 8px;
  color: var(--series-ink, var(--accent)); font-weight: 900; background: color-mix(in srgb, var(--series, var(--accent)) 12%, transparent);
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--series, var(--accent)) 40%, transparent);
}
.depth { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 999px; font-weight: 700; font-size: 15px; color: var(--series-ink, var(--ink)); background: color-mix(in srgb, var(--series, var(--go)) 14%, var(--surface)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--series, var(--go)) 40%, transparent), 0 3px 0 color-mix(in srgb, var(--series, var(--go)) 30%, transparent); }
.depth:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--series, var(--go)) 40%, transparent); }
.welcome-go { align-self: stretch; min-height: 60px; font-size: 22px; }
.en-text { font-family: var(--font-latin); font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 38em; margin: 0; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); }

.task {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px;
  background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); font-size: 17px; font-weight: 700;
}
.task .tick { width: 40px; height: 40px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--star); box-shadow: 0 3px 0 var(--star-edge); }
.task .tick svg { width: 26px; height: 26px; }
.task small { display: block; font-family: var(--font-latin); color: var(--ink-soft); font-size: 13px; font-weight: 400; }
.task .tag { font-size: 12px; letter-spacing: .1em; color: var(--ink-soft); display: block; font-weight: 700; }
.task.done { background: var(--ok-soft); box-shadow: inset 0 0 0 2px var(--ok); }
.task.done .tick { background: var(--go); box-shadow: 0 3px 0 var(--go-edge); color: #fff; }
.task.pop { animation: pop .5s var(--bounce); }
@keyframes pop { 40% { transform: scale(1.05); } }

.fact { display: flex; gap: 10px; align-items: flex-start; }
.fact .mascot { width: 54px; height: 54px; flex: none; }
.fact .say { position: relative; flex: 1; background: color-mix(in srgb, var(--star) 22%, var(--surface)); border-radius: 18px; padding: 10px 14px; font-size: 16px; line-height: 1.6; }
.fact .say b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 17px; letter-spacing: .05em; }
.fact .say small { display: block; font-family: var(--font-latin); color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

/* 词卡 */
.term-pop {
  position: fixed; z-index: 40; width: min(330px, calc(100vw - 32px)); background: var(--surface); color: var(--ink);
  border-radius: 24px; padding: 16px 18px; box-shadow: 0 6px 0 var(--line), 0 20px 40px -18px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: 6px; animation: view-in .3s var(--bounce);
}
.term-pop .zh { font-family: var(--font-display); font-size: 34px; line-height: 1; letter-spacing: .08em; }
.term-pop .py { font-family: var(--font-latin); font-size: 19px; color: var(--ink-soft); }
.term-pop .en { font-family: var(--font-round); font-size: 22px; font-weight: 700; color: var(--series-ink, var(--phy)); }
.term-pop p { margin: 4px 0 0; font-size: 16px; line-height: 1.6; }
.term-pop .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ---------- 实验卡片（借鉴 anatomy：图号 / 标题 / 提示 / 实时读数） ---------- */
.fig {
  position: relative; border-radius: 26px; overflow: hidden; background: var(--stage);
  min-height: min(62vh, 520px); display: flex; flex-direction: column; isolation: isolate;
  box-shadow: inset 0 0 0 3px var(--line), 0 5px 0 var(--line);
  touch-action: none;
}
@media (max-width: 859px), (max-aspect-ratio: 1/1) { .fig { min-height: 0; height: min(58vh, 560px); } }
.fig-stage {
  position: relative; flex: 1; min-height: 0; margin: 3px 3px 0; border-radius: 23px 23px 0 0; overflow: hidden;
  background-image: radial-gradient(var(--stage-dot) 1.2px, transparent 1.4px); background-size: 20px 20px;
}
.fig-stage > canvas, .fig-stage > svg.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fig-corner { position: absolute; z-index: 4; pointer-events: none; }
.fig-label { top: 12px; left: 12px; background: var(--ink); color: var(--page); font-family: var(--font-round); font-weight: 700; font-size: 13px; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; }
.fig-title { top: 10px; right: 12px; text-align: right; font-weight: 900; font-size: 15px; background: color-mix(in srgb, var(--page) 86%, transparent); padding: 4px 12px; border-radius: 14px; line-height: 1.3; }
.fig-title:empty { display: none; }
.fig-title .latin { font-family: var(--font-round); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; display: block; color: var(--ink-soft); }
.fig-foot {
  position: relative; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin: 0 3px 3px; padding: 10px 14px 12px; border-radius: 0 0 23px 23px; background: var(--page);
  box-shadow: inset 0 2px 0 var(--line);
}
.fig-hint { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink-soft); min-width: 0; }
.fig-hint .hand { width: 28px; height: 28px; flex: none; animation: nudge 1.6s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(5px, -3px); } }
.fig-readout { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 16px; text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 8px; }
.fig-readout .chip-read { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border-radius: 999px; padding: 3px 12px; box-shadow: inset 0 0 0 2px var(--line); }
.fig-readout .dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3); }
.fig-readout .muted { color: var(--ink-soft); font-weight: 500; align-self: center; }
.fig-tools { position: absolute; z-index: 5; right: 12px; bottom: 12px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; max-width: calc(100% - 24px); }
.fig-tools .btn { min-height: 48px; padding: 0 18px; font-size: 17px; }
.fig .loading { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; color: var(--ink-soft); font-size: 15px; font-weight: 700; }
.spinner { width: 42px; height: 42px; border-radius: 50%; border: 5px solid var(--line); border-top-color: var(--series, var(--go)); animation: spin .8s linear infinite; }
.fig-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.fig-tag {
  position: absolute; transform: translate(-50%, -100%); pointer-events: auto; white-space: nowrap;
  background: var(--surface); color: var(--ink); border: 0; border-radius: 14px; padding: 5px 12px;
  font-size: 15px; font-weight: 900; box-shadow: 0 4px 0 var(--line), inset 0 0 0 2px var(--ink); line-height: 1.3; text-align: center;
}
.fig-tag small { display: block; font-family: var(--font-round); font-weight: 600; font-size: 12px; color: var(--ink-soft); }
.fig-tag.active { background: var(--hilite); }
.big-count {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; pointer-events: none;
  font-family: var(--font-display); font-size: clamp(80px, 16vw, 180px); color: #fff; text-shadow: 0 6px 0 rgba(0, 0, 0, .25), 0 10px 40px rgba(0, 0, 0, .4);
}

/* 温度计（水分子配图） */
.thermo { position: absolute; z-index: 3; left: 14px; top: 48px; bottom: 14px; width: 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; touch-action: none; user-select: none; -webkit-user-select: none; }
.thermo-track { position: relative; flex: 1; width: 28px; border-radius: 14px; background: var(--page); border: 3px solid var(--ink); }
.thermo-fill { position: absolute; left: 3px; right: 3px; bottom: 3px; border-radius: 10px; background: var(--accent); }
.thermo-bulb { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); border: 3px solid var(--ink); margin-top: -12px; position: relative; }
.thermo-knob { position: absolute; left: 50%; width: 56px; height: 36px; margin-left: -28px; margin-top: -18px; border-radius: 18px; background: var(--page); border: 3px solid var(--ink); display: grid; place-items: center; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; box-shadow: 0 3px 0 var(--ink); }
.thermo-ticks { position: absolute; inset: 0 -26px 0 auto; width: 22px; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.thermo-ticks span { position: absolute; right: 0; transform: translateY(-50%); }

/* 火箭高度尺（场景自带天空色，用固定的深色半透明底） */
.alt-gauge { position: absolute; left: 12px; top: 48px; bottom: 16px; width: 112px; pointer-events: none; }
.alt-bar { position: absolute; left: 10px; top: 8px; bottom: 8px; width: 8px; border-radius: 4px; background: rgba(10, 16, 28, .45); box-shadow: 0 0 0 2px rgba(255, 255, 255, .6); }
.alt-mark { position: absolute; left: -4px; width: 16px; height: 2px; background: #fff; }
.alt-mark span { position: absolute; left: 22px; top: -10px; white-space: nowrap; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
.alt-mark.karman { height: 3px; background: #FFD84A; left: -8px; width: 24px; }
.alt-mark.karman span { color: #FFD84A; }
.alt-rocket { position: absolute; left: -9px; width: 26px; height: 26px; margin-bottom: -13px; border-radius: 50%; background: #E0533D; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }

/* 测验 */
.quiz { display: flex; flex-direction: column; gap: 18px; }
.quiz .options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.quiz .opt {
  --b: var(--surface); --be: var(--line);
  position: relative; min-height: 96px; border-radius: 24px; border: 0; background: var(--b); font-size: 24px; font-weight: 900; color: var(--ink);
  box-shadow: 0 6px 0 var(--be), inset 0 0 0 3px var(--be);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 14px 12px 10px; touch-action: manipulation;
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.quiz .opt:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--be), inset 0 0 0 3px var(--be); }
.quiz .opt .letter { position: absolute; top: 10px; left: 12px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-round); font-size: 16px; color: #fff; background: var(--lc); }
.quiz .opt:nth-child(1) { --lc: var(--c-phy); } .quiz .opt:nth-child(2) { --lc: var(--c-mech); } .quiz .opt:nth-child(3) { --lc: var(--c-chem); } .quiz .opt:nth-child(4) { --lc: var(--c-geo); }
.quiz .opt small { font-family: var(--font-round); font-size: 14px; color: var(--ink-soft); font-weight: 600; }
.quiz .opt.right { --b: var(--ok-soft); --be: var(--ok); animation: pop .5s var(--bounce); }
.quiz .opt.wrong { animation: shake .4s; opacity: .5; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.quiz .feedback { display: flex; align-items: center; gap: 12px; min-height: 70px; font-size: 19px; }
.quiz .feedback .mascot { width: 70px; height: 70px; flex: none; }
.quiz .feedback .say { background: var(--surface-2); border-radius: 20px; padding: 10px 16px; }

/* 封面页、结束页 */
.cover-page {
  min-height: 100%; display: grid; place-items: center; text-align: center; padding: 28px 20px; position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 90% at 70% 10%, color-mix(in srgb, var(--c) 50%, #fff), var(--c) 70%);
}
.cover-page .inner { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; z-index: 1; max-width: 680px; }
.cover-page .series-tag { font-size: 15px; font-weight: 900; letter-spacing: .2em; background: rgba(0, 0, 0, .16); padding: 3px 14px; border-radius: 999px; }
.cover-page h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(48px, 8vw, 92px); line-height: 1.05; letter-spacing: .06em; text-shadow: 0 5px 0 var(--e); }
.cover-page .en { font-family: var(--font-round); font-weight: 600; font-size: clamp(18px, 2.4vw, 24px); opacity: .95; }
.cover-page .motif-big { width: min(46vw, 290px); aspect-ratio: 1; animation: floaty 4s ease-in-out infinite; }
.cover-page .motif-big svg { width: 100%; height: 100%; }
.cover-page .meta { font-size: 15px; font-weight: 700; opacity: .95; }
.cover-page .btn { --b: #fff; --be: rgba(0, 0, 0, .22); --bi: #24313F; box-shadow: 0 5px 0 var(--be); font-size: 20px; min-height: 58px; padding: 0 28px; }
.cover-page .rays { position: absolute; inset: -40%; background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .08) 0 10deg, transparent 10deg 20deg); animation: spin 70s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.end-page { min-height: 100%; display: grid; place-items: center; padding: 28px 20px; text-align: center; position: relative; overflow: hidden; }
.end-page .inner { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 560px; position: relative; z-index: 1; }
.end-page h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(30px, 5vw, 46px); letter-spacing: .05em; text-wrap: balance; }
.end-page .sticker .disc { width: 170px; height: 170px; animation: sticker-in .9s var(--bounce) both; }
@keyframes sticker-in { from { transform: scale(.2) rotate(-200deg); } to { transform: none; } }
.end-page .stars3 svg { width: 58px; height: 58px; animation: star-in .5s var(--bounce) both; animation-delay: .7s; }
.end-page .stars3 svg:nth-child(2) { animation-delay: .95s; } .end-page .stars3 svg:nth-child(3) { animation-delay: 1.2s; }
@keyframes star-in { from { transform: scale(0) rotate(-90deg); } }
.end-page .tally { display: flex; gap: 22px; font-size: 16px; color: var(--ink-soft); }
.end-page .tally b { display: block; font-family: var(--font-round); font-size: 30px; color: var(--ink); font-variant-numeric: tabular-nums; }
.end-page .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.end-page .rate { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.end-page .rate .q { font-weight: 900; font-size: 17px; }
.end-page .faces { display: flex; gap: 10px; }
.end-page .faces button {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 84px; padding: 8px 10px 10px; border: 0; border-radius: 20px;
  background: var(--surface-2); color: var(--ink-soft); font-size: 14px; font-weight: 700; box-shadow: inset 0 0 0 2px var(--line), 0 4px 0 var(--line);
  transition: transform .18s var(--bounce);
}
.end-page .faces .face { font-size: 40px; line-height: 1.15; }
.end-page .faces button[aria-pressed="true"] { background: color-mix(in srgb, var(--go) 16%, var(--surface)); color: var(--ink); box-shadow: inset 0 0 0 3px var(--go), 0 4px 0 var(--go-edge); transform: scale(1.08); }
.end-page .faces button:active { transform: translateY(3px); }

/* 无配图的故事页 */
.story-solo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 26px 22px 34px 30px; max-width: 920px; margin: 0 auto; }
.story-solo .copy { order: 0; }
.story-solo .things { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.thing {
  border-radius: 24px; border: 0; background: var(--surface-2); padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 19px; font-weight: 900; touch-action: manipulation; text-align: center; color: var(--ink);
  box-shadow: 0 5px 0 var(--line), inset 0 0 0 2px var(--line);
}
.thing:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line), inset 0 0 0 2px var(--line); }
.thing svg { width: 76px; height: 76px; color: var(--series-ink, var(--ink)); }
.thing-emoji { font-size: 58px; line-height: 76px; height: 76px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .12)); }
.thing-badge { width: 72px; height: 72px; margin: 2px; border-radius: 22px; display: grid; place-items: center; font-family: var(--font-display); font-size: 40px; font-weight: 400; color: #fff; background: var(--series, var(--go)); box-shadow: 0 4px 0 var(--e, rgba(0, 0, 0, .2)); }
.thing small { font-family: var(--font-round); font-weight: 600; color: var(--ink-soft); font-size: 13px; }
.thing[aria-pressed="true"] { background: var(--ok-soft); box-shadow: 0 5px 0 var(--ok), inset 0 0 0 2px var(--ok); }

/* 底部翻页 */
.reader-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-block: 8px calc(12px + env(safe-area-inset-bottom, 0px));
}
.turn {
  width: 66px; height: 60px; border-radius: 22px; border: 0; display: grid; place-items: center; flex: none; touch-action: manipulation;
  background: var(--surface); color: var(--ink); box-shadow: 0 5px 0 var(--line), inset 0 0 0 2px var(--line);
  transition: transform .12s var(--ease), box-shadow .12s var(--ease);
}
.turn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--line), inset 0 0 0 2px var(--line); }
.turn svg { width: 32px; height: 32px; }
.turn:disabled { opacity: .3; }
.turn.next { width: auto; padding: 0 22px 0 26px; gap: 6px; display: inline-flex; align-items: center; font-weight: 900; font-size: 18px; background: var(--go); color: #fff; box-shadow: 0 5px 0 var(--go-edge); }
.turn.next:active { box-shadow: 0 1px 0 var(--go-edge); }
.turn.next.ready { animation: wiggle 2.4s ease-in-out infinite; }
@keyframes wiggle { 0%, 70%, 100% { transform: none; } 75% { transform: rotate(-4deg) scale(1.05); } 85% { transform: rotate(4deg) scale(1.05); } }
.page-count { font-family: var(--font-round); font-weight: 600; color: var(--ink-soft); font-size: 15px; font-variant-numeric: tabular-nums; }

/* 家长区 */
.sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(10, 16, 28, .5); display: grid; place-items: center; padding: 16px; }
.sheet {
  width: min(580px, 100%); max-height: calc(100% - 24px); overflow-y: auto; background: var(--surface); color: var(--ink);
  border-radius: 28px; padding: 22px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 8px 0 var(--line), var(--shadow);
  animation: view-in .35s var(--bounce);
}
.sheet h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 30px; letter-spacing: .05em; }
.sheet .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sheet .row > span { font-weight: 700; }
.sheet .row small { display: block; color: var(--ink-soft); font-weight: 400; font-size: 13px; }
.sheet input[type="text"] { font: inherit; font-size: 17px; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface-2); color: var(--ink); min-width: 0; width: 180px; }
.seg { display: inline-flex; border-radius: 16px; padding: 4px; gap: 4px; flex-wrap: wrap; background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--line); }
.seg button { border: 0; background: none; min-height: 40px; padding: 0 14px; border-radius: 12px; font-weight: 700; font-size: 15px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.gate { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; padding: 10px 0; }
.hold { position: relative; width: 140px; height: 140px; border-radius: 50%; border: 0; background: var(--surface-2); box-shadow: inset 0 0 0 4px var(--ink); font-weight: 900; font-size: 18px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.hold .fill { position: absolute; inset: auto 0 0; height: 0; background: var(--ok-soft); }
.hold span { position: relative; }
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stat-grid div { border-radius: 18px; padding: 10px; text-align: center; font-size: 13px; color: var(--ink-soft); background: var(--surface-2); }
.stat-grid b { display: block; font-family: var(--font-round); font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; }
.playlog { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border-radius: 20px; background: var(--surface-2); }
.log-sum { margin: 0; font-size: 14px; color: var(--ink-soft); }
.log-sum b { color: var(--ink); }
.log-list { list-style: none; margin: 0; padding: 0 4px 0 0; display: flex; flex-direction: column; gap: 8px; max-height: 210px; overflow-y: auto; }
.log-list li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; font-size: 15px; }
.log-list .dot { width: 10px; height: 10px; border-radius: 50%; }
.log-list b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-list .faces { font-size: 16px; letter-spacing: 1px; }
.log-list small { grid-column: 2 / -1; color: var(--ink-soft); font-size: 13px; }
.log-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.log-text { width: 100%; min-height: 170px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: var(--surface); color: var(--ink); font: 13px/1.55 ui-monospace, "SF Mono", Menlo, monospace; resize: vertical; }

.toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60;
  background: var(--ink); color: var(--page); padding: 12px 20px; border-radius: 18px; font-size: 16px; font-weight: 700; max-width: calc(100vw - 32px); text-align: center;
  animation: view-in .3s var(--bounce);
}
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

@media (max-width: 560px) {
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .top-actions { margin-left: auto; }
  .brand-mini { display: block; }
  .hello { order: 2; flex-basis: 100%; }
  .continue { grid-template-columns: auto minmax(0, 1fr); }
  .continue .btn { grid-column: 1 / -1; }
  .continue .t { font-size: 23px; }
  .worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .world { min-height: 168px; padding: 12px 14px; border-radius: 24px; }
  .world .name { font-size: 25px; letter-spacing: .04em; }
  .world .en { font-size: 12px; }
  .world .meta span { font-size: 12px; padding: 1px 8px; }
  .world .meta span:first-child { display: none; }
  .hello .mascot { width: 58px; height: 58px; }
  .pill { height: 44px; font-size: 18px; padding: 0 12px 0 8px; }
  .pill svg { width: 26px; height: 26px; }
  .pill .label { display: none; }
  .reader-bar .ttl small { display: none; }
  .reader-tools { gap: 6px; }
  .reader-tools .icon-btn { width: 46px; height: 46px; border-radius: 15px; }
  .toggle-text { min-width: 46px; padding: 0 8px; font-size: 15px; }
  .turn.next .label { display: none; }
  .turn.next { padding: 0 20px; }
  .books { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .cover .t { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* 风光小岛（《环游世界》里的“进去看看”） */
.trip { position: fixed; inset: 0; z-index: 45; overflow: hidden; color: var(--ink); background: linear-gradient(180deg, #6CC8FF, #D9F3FF 78%); animation: view-in .35s var(--bounce); }
.trip-stage { position: absolute; inset: 0; }
.trip-stage canvas { display: block; width: 100%; height: 100%; }
.trip-stage .loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; font-weight: 700; font-size: 18px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
.trip-bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); }
.trip-title { flex: 1; min-width: 0; padding: 6px 16px 8px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 4px 0 var(--line); }
.trip-title b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: .05em; }
.trip-title small { display: block; color: var(--ink-soft); font-family: var(--font-round); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip-finds { position: absolute; z-index: 2; top: calc(86px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; }
.trip-finds > * { pointer-events: auto; }
.trip-find { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 8px; border: 0; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: 15px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line); }
.trip-find .em { font-size: 24px; line-height: 1; filter: grayscale(1) opacity(.5); transition: filter .3s; }
.trip-find[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--go), 0 3px 0 var(--go-edge); }
.trip-find[aria-pressed="true"] .em { filter: none; }
.trip-count { padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--page); font-family: var(--font-round); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.trip-card {
  position: absolute; z-index: 3; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(92px + env(safe-area-inset-bottom, 0px)); width: min(460px, calc(100% - 32px));
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 14px 14px 16px; border-radius: 22px;
  background: var(--surface); box-shadow: 0 6px 0 var(--line), var(--shadow); animation: view-in .3s var(--bounce);
}
.trip-card .em { font-size: 40px; line-height: 1; }
.trip-card b { display: block; font-size: 19px; }
.trip-card small { color: var(--ink-soft); font-family: var(--font-round); font-size: 13px; }
.trip-card p { margin: 6px 0 0; font-size: 16px; line-height: 1.6; }
.trip-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.trip-facts span { padding: 4px 10px; border-radius: 12px; background: var(--surface-2); font-weight: 700; font-size: 14px; }
.trip-facts small { margin-right: 4px; }
.trip-dock { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(14px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); pointer-events: none; }
.trip-dock > * { pointer-events: auto; }
.trip-times { display: inline-flex; gap: 4px; padding: 4px; border-radius: 18px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 4px 0 var(--line); }
.trip-times button { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px; background: none; color: var(--ink); font-weight: 700; font-size: 15px; }
.trip-times button[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.trip-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.trip-actions .btn { min-height: 48px; padding: 0 18px; font-size: 17px; }
.trip-stamp { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(10, 16, 28, .45); }
.stamp-card { width: min(420px, 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 24px; border-radius: 28px; text-align: center; background: var(--surface); box-shadow: 0 8px 0 var(--line), var(--shadow); }
.stamp { width: 170px; height: 170px; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; color: var(--stamp); border: 7px double var(--stamp); background: color-mix(in srgb, var(--stamp) 8%, var(--surface)); transform: rotate(-12deg); animation: stamp-in .6s var(--bounce); }
.stamp .em { font-size: 46px; line-height: 1.1; }
.stamp b { font-family: var(--font-display); font-weight: 400; font-size: 24px; letter-spacing: .06em; }
.stamp small { font-family: var(--font-round); font-weight: 700; color: inherit; }
@keyframes stamp-in { from { transform: rotate(-32deg) scale(2); } }
.stamp-card h3 { margin: 6px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; }
.stamp-card p { margin: 0; color: var(--ink-soft); }
.stamp-card .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
@media (max-width: 560px) {
  .trip-title b { font-size: 21px; }
  .trip-finds { top: calc(78px + env(safe-area-inset-top, 0px)); }
  .trip-find { min-height: 40px; font-size: 14px; }
  .trip-card { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); padding: 12px; gap: 10px; }
  .trip-card .em { font-size: 30px; }
  .trip-card p { font-size: 15px; line-height: 1.5; }
  .trip-facts span { font-size: 13px; padding: 3px 8px; }
  .trip-times button { padding: 0 8px; font-size: 14px; }
}