/* ============================================================
   诗画小园 · 样式
   温暖绘本感 + 一点宣纸质感，全部离线可用
   ============================================================ */

@font-face {
  font-family: 'PoemKai';
  src: url('../fonts/poem-kai-grade23.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #faf5e9;
  --paper-2: #fffcf4;
  --paper-3: #f5eddd;
  --ink: #2f2a25;
  --ink-2: #6b6157;
  --ink-3: #9c9184;
  --line: #ece2cf;
  --accent: #c8763f;
  --accent-soft: #f7e6d6;
  --green: #6e9b63;
  --green-soft: #eaf2e2;
  --gold: #d9a441;
  --red: #cf5f4c;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow: 0 14px 30px -22px rgba(88, 66, 38, 0.55);
  --shadow-lift: 0 18px 40px -24px rgba(88, 66, 38, 0.6);
  --font: 'PoemKai', 'LXGW WenKai', 'Kaiti SC', 'STKaiti', 'KaiTi', 'Songti SC', 'Songti TC', serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% -4%, #fffaf0 0%, rgba(255, 250, 240, 0) 55%),
    radial-gradient(circle at 100% 8%, #f2f7e8 0%, rgba(242, 247, 232, 0) 45%),
    radial-gradient(circle at 50% 120%, #f6ecd9 0%, rgba(246, 236, 217, 0) 60%),
    var(--paper);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

button, input, select { font-family: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
img, svg { display: block; }
a { color: inherit; }

#app { max-width: 720px; margin: 0 auto; padding: 0 16px calc(96px + var(--safe-b)); position: relative; }

/* ---------- 顶栏 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  margin: 0 -16px; padding: 12px 16px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(rgba(250, 245, 233, 0.96) 62%, rgba(250, 245, 233, 0));
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-size: 18px; letter-spacing: 0.14em; font-weight: 600; }
.brand-sub { display: block; font-size: 10px; letter-spacing: 0.22em; color: var(--ink-3); margin-top: 1px; }
.stats { display: flex; gap: 6px; }
.stat {
  display: flex; align-items: center; gap: 4px;
  background: rgba(255, 252, 244, 0.86); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 9px 5px 7px; font-size: 12px; color: var(--ink-2);
  box-shadow: 0 4px 10px -8px rgba(90, 70, 40, 0.4);
}
.stat svg { width: 15px; height: 15px; }
.stat b { font-weight: 600; color: var(--ink); font-size: 13px; }

/* ---------- 通用 ---------- */
.view { animation: fade-up 0.4s ease both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 4px 12px; }
.sec-title { font-size: 17px; letter-spacing: 0.1em; font-weight: 600; }
.sec-more { font-size: 12.5px; color: var(--ink-3); letter-spacing: 0.06em; }
.muted { color: var(--ink-2); }
.tiny { font-size: 12px; color: var(--ink-3); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; letter-spacing: 0.06em; font-weight: 600;
  background: var(--paper-3); color: var(--ink); border: 1px solid transparent;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--accent); color: #fff9ef; box-shadow: 0 10px 20px -14px rgba(160, 90, 40, 0.9); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn-soft { background: var(--accent-soft); color: #9a5a2e; }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; pointer-events: none; }

.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px; letter-spacing: 0.04em;
  background: var(--paper-3); color: var(--ink-2); white-space: nowrap;
}
.chip-green { background: var(--green-soft); color: #4e7a45; }
.chip-gold { background: #fbf0d6; color: #9a7120; }
.chip-red { background: #fbe5e0; color: #a94a38; }

/* ---------- 首页 ---------- */
.greet { padding: 8px 4px 2px; }
.greet h1 { margin: 0; font-size: 25px; line-height: 1.35; letter-spacing: 0.04em; font-weight: 600; }
.greet h1 em { font-style: normal; color: var(--accent); }
.greet p { margin: 5px 0 0; font-size: 13px; color: var(--ink-3); letter-spacing: 0.06em; }

.today { margin-top: 16px; padding: 16px; position: relative; overflow: hidden; }
.today::after {
  content: ''; position: absolute; right: -30px; top: -34px; width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(217, 164, 65, 0.16), transparent 70%);
}
.today-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.today-title { font-size: 15.5px; font-weight: 600; letter-spacing: 0.08em; display: flex; align-items: center; gap: 7px; }
.today-title svg { width: 19px; height: 19px; }
.today-date { font-size: 11.5px; color: var(--ink-3); }
.task-row {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  padding: 11px 12px; border-radius: 16px; background: rgba(245, 237, 221, 0.55);
  border: 1px dashed #e3d7c0;
}
.task-row.is-done { background: var(--green-soft); border-color: #cfe0c2; border-style: solid; }
.task-ico { width: 38px; height: 38px; border-radius: 12px; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 4px 10px -8px rgba(0,0,0,.4); }
.task-ico svg { width: 21px; height: 21px; }
.task-main { flex: 1; min-width: 0; }
.task-name { font-size: 14.5px; font-weight: 600; letter-spacing: 0.04em; }
.task-desc { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-go { flex: none; }
.today-progress { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.bar { flex: 1; height: 7px; border-radius: 99px; background: #efe6d4; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #e2a85c, #c8763f); transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
.today-progress span { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }

/* 花园 */
.garden { margin-top: 14px; padding: 16px 16px 12px; position: relative; overflow: hidden; background: linear-gradient(180deg, #fffcf4 0%, #f6faee 100%); }
.garden-head { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 2; }
.garden-title { font-size: 15.5px; font-weight: 600; letter-spacing: 0.08em; display: flex; align-items: center; gap: 6px; }
.garden-count { font-size: 11.5px; color: #5f7f54; background: rgba(255,255,255,.75); border: 1px solid #dfeacf; padding: 3px 9px; border-radius: 999px; }
.garden-hill { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; opacity: 0.42; pointer-events: none; }
.plots { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px 6px; margin-top: 14px; }
.plot {
  position: relative; aspect-ratio: 1; border-radius: 16px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.55); border: 1px dashed #d9e4c9; transition: transform 0.2s ease, background 0.2s ease;
}
.plot:active { transform: scale(0.94); }
.plot svg { width: 72%; height: 72%; }
.plot .plot-dot { position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); opacity: 0; }
.plot.is-due .plot-dot { opacity: 1; }
.plot.is-bloomed { background: rgba(255,255,255,.92); border-style: solid; border-color: #e6efd8; box-shadow: 0 6px 14px -12px rgba(70, 100, 50, 0.8); }
.plot.is-growing { background: rgba(255,255,255,.8); border-style: solid; border-color: #e8e0cc; }
.plot.is-locked { opacity: 0.5; }

/* 继续学 */
.continue {
  margin-top: 14px; display: flex; gap: 14px; align-items: stretch; padding: 12px; text-align: left; width: 100%;
}
.continue-thumb { width: 128px; flex: none; border-radius: 16px; overflow: hidden; position: relative; background: #e8e0d0; }
.continue-thumb .scene-svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.continue-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.continue-kicker { font-size: 11px; letter-spacing: 0.16em; color: var(--accent); }
.continue-title { font-size: 21px; font-weight: 600; letter-spacing: 0.08em; display: flex; align-items: baseline; gap: 8px; }
.continue-title small { font-size: 12px; color: var(--ink-3); font-weight: 400; letter-spacing: 0.04em; }
.continue-line { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.continue-prog { display: flex; gap: 4px; margin-top: 2px; }
.continue-prog i { width: 18px; height: 4px; border-radius: 99px; background: #ece2cf; }
.continue-prog i.on { background: var(--accent); }

/* 亲子 */
.parent-card { margin-top: 14px; padding: 16px; background: linear-gradient(135deg, #fff8ec, #fdf3e4); border-color: #efdfc6; }
.parent-eye { font-size: 10.5px; letter-spacing: 0.2em; color: #a9865a; }
.parent-text { margin-top: 6px; font-size: 14.5px; line-height: 1.7; color: #5a4a37; }
.parent-text b { color: #a0602f; font-weight: 600; }
.parent-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- 诗库 ---------- */
.lib-head { padding: 6px 4px 0; }
.lib-head h1 { margin: 0 0 4px; font-size: 23px; letter-spacing: 0.06em; font-weight: 600; }
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filter {
  flex: none; padding: 7px 14px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--line); background: rgba(255,252,244,.7); color: var(--ink-2);
}
.filter.on { background: var(--ink); color: #fdf7ea; border-color: var(--ink); }

.poem-list { display: grid; gap: 12px; margin-top: 14px; }
.poem-card { display: flex; gap: 12px; padding: 10px; align-items: center; width: 100%; text-align: left; position: relative; overflow: hidden; }
.poem-card .thumb { width: 112px; height: 76px; flex: none; border-radius: 14px; overflow: hidden; position: relative; background: var(--paper-3); }
.poem-card .thumb .scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.poem-info { flex: 1; min-width: 0; }
.poem-title-row { display: flex; align-items: center; gap: 7px; }
.poem-title { font-size: 18px; font-weight: 600; letter-spacing: 0.08em; }
.poem-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.poem-line { font-size: 14px; color: var(--ink-2); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poem-foot { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.dots { display: flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #e7dcc7; }
.dots i.on { background: var(--c, var(--accent)); }

/* 空状态 */
.empty { text-align: center; padding: 48px 20px; color: var(--ink-3); }
.empty svg { width: 68px; height: 68px; margin: 0 auto 12px; opacity: 0.75; }

/* ---------- 学诗页 ---------- */
.poem-page { margin: 0 -16px; }
.poem-top { position: sticky; top: 0; z-index: 35; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(250,245,233,.92); backdrop-filter: blur(8px); }
.icon-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,252,244,.9); border: 1px solid var(--line); flex: none; }
.icon-btn svg { width: 19px; height: 19px; }
.poem-top-title { flex: 1; min-width: 0; }
.poem-top-title b { font-size: 16px; letter-spacing: 0.1em; font-weight: 600; display: block; }
.poem-top-title span { font-size: 11px; color: var(--ink-3); }
.dew-pill { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #9a6a2a; background: #fbf0d6; border-radius: 999px; padding: 5px 10px; border: 1px solid #f0e0bb; }

.stage { position: relative; margin: 0 16px; border-radius: 26px; overflow: hidden; aspect-ratio: 16 / 9; background: #e6dfd0; box-shadow: var(--shadow-lift); }
.stage .scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); border-radius: inherit; pointer-events: none; }
.stage-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px;
  background: linear-gradient(transparent, rgba(35, 28, 22, 0.62));
  color: #fff9ef; font-size: 12.5px; line-height: 1.55; letter-spacing: 0.04em;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.stage-play { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 6px; background: rgba(255,252,244,.92); border-radius: 999px; padding: 7px 14px 7px 10px; font-size: 13px; box-shadow: 0 8px 20px -12px rgba(0,0,0,.6); }
.stage-play svg { width: 17px; height: 17px; }
.stage-play.is-on { background: var(--ink); color: #fff9ef; }

/* 步骤 */
.steps { display: flex; gap: 7px; overflow-x: auto; padding: 14px 16px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.steps::-webkit-scrollbar { display: none; }
.step {
  flex: none; scroll-snap-align: center; display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(255,252,244,.7); color: var(--ink-2); font-size: 13px; transition: 0.2s;
}
.step .num { width: 17px; height: 17px; border-radius: 50%; background: #ece2cf; color: #8a7c66; display: grid; place-items: center; font-size: 10px; }
.step.on { background: var(--c, var(--accent)); border-color: var(--c, var(--accent)); color: #fff9ef; box-shadow: 0 8px 18px -12px var(--c, var(--accent)); }
.step.on .num { background: rgba(255,255,255,.26); color: #fff; }
.step.done .num { background: #6e9b63; color: #fff; }
.step.done { border-color: #cfe0c2; }

.panel { padding: 8px 16px 0; }
.panel-card { padding: 16px; margin-top: 12px; }
.panel-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; }
.panel-title svg { width: 18px; height: 18px; color: var(--accent); }
.panel-sub { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.6; }

/* 诗句 */
.poem-wrap { margin-top: 12px; padding: 18px 10px 14px; position: relative; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.poem-wrap::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: repeating-linear-gradient(#e8ddc8 0 6px, transparent 6px 12px); opacity: .0;
}
.poem-text { display: flex; flex-direction: column; gap: 2px; }
.line {
  display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap;
  padding: 5px 8px; border-radius: 14px; transition: background 0.25s, box-shadow 0.25s;
  position: relative;
}
.line.active { background: var(--soft, #f7efe0); box-shadow: inset 0 0 0 1px rgba(200,118,63,.18); }
.line.active::before { content: ''; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: var(--c, var(--accent)); transform: translateY(-50%); opacity: .7; }
.ch { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; padding: 2px 1px; border-radius: 8px; cursor: pointer; }
.ch:active { background: #f0e5d0; }
.py { font-size: 10.5px; color: var(--ink-3); height: 13px; letter-spacing: 0; font-family: 'Songti SC', 'Times New Roman', serif; transition: opacity .2s; }
.zi { font-size: clamp(24px, 6.4vw, 31px); margin-top: 2px; transition: color .2s, background .2s; }
.punct { font-size: clamp(20px, 5.4vw, 26px); color: var(--ink-2); padding: 0 1px 4px; }
.poem-text.no-py .py { display: none; }
.poem-text.no-py .zi { margin-top: 0; }

.ch.masked .zi { color: transparent; background: #efe5d2; border-radius: 7px; box-shadow: inset 0 -2px 0 #dcc9a8; min-width: .86em; }
.ch.masked::after { content: ''; }
.ch.peek .zi { color: inherit; background: transparent; box-shadow: none; }
.ch .zi { min-width: 0; text-align: center; }

.poem-tools { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.tool {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); font-size: 12.5px; color: var(--ink-2); background: #fffdf7;
}
.tool svg { width: 15px; height: 15px; }
.tool.on { background: var(--green-soft); border-color: #cfe0c2; color: #4e7a45; }

/* 讲解 */
.meaning-list { display: grid; gap: 10px; margin-top: 14px; }
.meaning { display: flex; gap: 10px; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.meaning .idx { flex: none; width: 20px; height: 20px; border-radius: 7px; background: var(--soft, #f2ead9); color: var(--c, var(--accent)); font-size: 11px; display: grid; place-items: center; margin-top: 2px; }
.words { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.word { background: #f8f1e4; border: 1px solid #eee2cc; border-radius: 12px; padding: 7px 10px; font-size: 12.5px; color: var(--ink-2); }
.word b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.word i { font-style: normal; color: var(--ink-3); font-size: 11px; margin-left: 4px; }
.story p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.85; color: #574c40; }
.tip-box { margin-top: 14px; padding: 12px 14px; border-radius: 16px; background: linear-gradient(135deg, #fdf6e6, #fbf0dc); border: 1px dashed #e6d3ae; font-size: 13.5px; line-height: 1.7; color: #6b5330; display: flex; gap: 9px; }
.tip-box svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: #c9922f; }
.tip-box b { color: #8f5a20; }

/* 看画面 */
.observes { display: grid; gap: 9px; margin-top: 14px; }
.observe { width: 100%; text-align: left; padding: 12px 14px; border-radius: 14px; background: #f7f3e8; border: 1px solid #ece2cf; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); transition: .25s; }
.observe .ans { display: none; margin-top: 6px; color: #4e7a45; font-size: 13px; }
.observe.open { background: #f0f7e8; border-color: #d7e6c8; }
.observe.open .ans { display: block; }
.observe .q { display: flex; gap: 8px; align-items: flex-start; }
.observe .q svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: #c9922f; }

/* 跟读 */
.reader-line { padding: 10px 12px; border-radius: 14px; display: flex; align-items: center; gap: 12px; border: 1px solid transparent; transition: .2s; }
.reader-line + .reader-line { margin-top: 4px; }
.reader-line.on { background: var(--soft, #f7efe0); border-color: #ead9bb; }
.reader-line .rl-text { flex: 1; font-size: 19px; letter-spacing: 0.08em; }
.reader-line .rl-py { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; letter-spacing: .02em; }
.rl-play { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; flex: none; }
.rl-play svg { width: 15px; height: 15px; }
.rl-play.on { background: var(--c, var(--accent)); color: #fff; border-color: transparent; }
.rate-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: var(--ink-3); }
.seg { display: flex; background: #f1e9d8; border-radius: 999px; padding: 3px; }
.seg button { padding: 5px 12px; border-radius: 999px; font-size: 12px; color: var(--ink-2); }
.seg button.on { background: #fff; color: var(--ink); box-shadow: 0 2px 6px -4px rgba(0,0,0,.5); }

/* 录音 */
.rec-card { margin-top: 14px; padding: 14px; border-radius: 16px; background: #f7f3e8; border: 1px dashed #e0d3b9; display: flex; align-items: center; gap: 12px; }
.rec-btn { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid #e5d8bf; display: grid; place-items: center; flex: none; color: var(--red); }
.rec-btn svg { width: 21px; height: 21px; }
.rec-btn.recording { background: var(--red); color: #fff; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(207,95,76,.4); } 50% { box-shadow: 0 0 0 10px rgba(207,95,76,0); } }
.rec-info { flex: 1; min-width: 0; }
.rec-title { font-size: 13.5px; font-weight: 600; }
.rec-sub { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.rec-play { width: 36px; height: 36px; border-radius: 50%; background: var(--green-soft); color: #4e7a45; display: grid; place-items: center; flex: none; }
.rec-play svg { width: 16px; height: 16px; }

/* 游戏 */
.game-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.game-tab { padding: 9px 6px; border-radius: 13px; font-size: 12.5px; border: 1px solid var(--line); background: #fffdf7; color: var(--ink-2); text-align: center; }
.game-tab.on { background: var(--ink); color: #fff9ef; border-color: var(--ink); }
.game-tab.done { color: #4e7a45; border-color: #cfe0c2; background: var(--green-soft); }
.game-stage { margin-top: 14px; }
.game-q { font-size: 14px; line-height: 1.65; color: var(--ink-2); margin-bottom: 12px; }
.game-q b { color: var(--ink); }
.choices { display: grid; gap: 9px; }
.choice { padding: 13px 14px; border-radius: 14px; border: 1px solid #e8ddc8; background: #fffdf7; font-size: 18px; letter-spacing: .08em; text-align: left; transition: .18s; display: flex; align-items: center; gap: 10px; }
.choice .k { width: 22px; height: 22px; border-radius: 7px; background: #f3ecdc; font-size: 11px; display: grid; place-items: center; color: #8a7c66; flex: none; letter-spacing: 0; }
.choice.ok { background: var(--green-soft); border-color: #a9c99a; }
.choice.no { background: #fbe5e0; border-color: #e6b3a8; animation: shake .3s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

.order-slots { display: grid; gap: 8px; }
.order-slot { min-height: 46px; border-radius: 12px; border: 1px dashed #dfd2b8; display: flex; align-items: center; padding: 4px 10px; font-size: 15px; letter-spacing: .06em; color: var(--ink-3); }
.order-slot.filled { border-style: solid; border-color: #e8ddc8; background: #fffdf7; color: var(--ink); }
.order-slot .n { font-size: 10px; color: var(--ink-3); margin-right: 8px; }
.order-pool { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.order-pool button { padding: 9px 12px; border-radius: 11px; background: #f7f1e3; border: 1px solid #e8dcc6; font-size: 14px; letter-spacing: .05em; }
.order-pool button.used { opacity: .25; pointer-events: none; }

.blank-row { display: flex; justify-content: center; gap: 4px; flex-wrap: wrap; margin: 6px 0 16px; }
.blank-ch { font-size: 26px; padding: 2px 5px; border-radius: 8px; }
.blank-ch.hole { background: #f1e7d4; color: transparent; min-width: 34px; text-align: center; box-shadow: inset 0 -2px 0 #dcc9a8; }
.blank-ch.done { color: #4e7a45; }

.game-feedback { margin-top: 12px; font-size: 13px; color: var(--ink-2); min-height: 20px; }
.game-stars { display: flex; gap: 3px; }
.game-stars svg { width: 15px; height: 15px; color: #e3d6bd; }
.game-stars svg.on { color: var(--gold); }

/* 背诵 */
.recite-levels { display: flex; gap: 8px; margin-top: 12px; }
.recite-levels button { flex: 1; padding: 10px 6px; border-radius: 13px; border: 1px solid var(--line); font-size: 12.5px; background: #fffdf7; color: var(--ink-2); }
.recite-levels button.on { background: var(--soft, #f7efe0); border-color: var(--c, var(--accent)); color: var(--ink); }
.recite-hint { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
.recite-actions { display: flex; gap: 8px; margin-top: 14px; }

/* 完成弹层 */
.modal-mask { position: fixed; inset: 0; background: rgba(40, 32, 24, 0.45); backdrop-filter: blur(4px); z-index: 80; display: grid; place-items: center; padding: 20px; animation: fade .25s both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 400px; background: var(--paper-2); border-radius: 28px; padding: 26px 22px 20px;
  text-align: center; box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); animation: pop .4s cubic-bezier(.2,.9,.3,1.2) both;
  position: relative; overflow: hidden;
}
@keyframes pop { from { opacity: 0; transform: scale(.9) translateY(10px); } to { opacity: 1; transform: none; } }
.modal h3 { margin: 12px 0 6px; font-size: 21px; letter-spacing: 0.1em; }
.modal p { margin: 0; font-size: 13.5px; line-height: 1.75; color: var(--ink-2); }
.modal .flower-big { width: 110px; height: 110px; margin: 0 auto; animation: bloom .8s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes bloom { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-actions { display: flex; gap: 8px; margin-top: 20px; }
.modal-actions .btn { flex: 1; }
.confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.confetti i { position: absolute; width: 8px; height: 8px; border-radius: 2px; top: -12px; animation: confetti 2.6s linear infinite; }
@keyframes confetti { to { transform: translateY(420px) rotate(540deg); opacity: 0; } }

/* 我的 */
.me-head { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.avatar { width: 62px; height: 62px; border-radius: 50%; background: linear-gradient(135deg, #f7dfc0, #eec49a); display: grid; place-items: center; font-size: 26px; border: 2px solid #fff; box-shadow: 0 8px 18px -12px rgba(120,80,40,.9); }
.me-name { font-size: 19px; font-weight: 600; letter-spacing: .06em; }
.me-sub { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.me-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.me-stat { padding: 13px 8px; text-align: center; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line); }
.me-stat b { display: block; font-size: 23px; font-weight: 600; letter-spacing: .02em; }
.me-stat span { font-size: 11px; color: var(--ink-3); }
.me-stat em { font-style: normal; font-size: 10px; color: var(--ink-3); }

.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.badge {
  text-align: center; padding: 12px 4px 10px; border-radius: 16px; background: #fffdf7; border: 1px solid var(--line);
  filter: grayscale(1); opacity: .45; transition: .3s;
}
.badge.on { filter: none; opacity: 1; background: linear-gradient(180deg, #fffdf5, #fdf5e4); }
.badge .b-ico { width: 34px; height: 34px; margin: 0 auto 6px; }
.badge span { font-size: 10.5px; color: var(--ink-2); display: block; line-height: 1.3; }

.report { padding: 16px; }
.report-row { display: flex; align-items: flex-end; justify-content: space-between; height: 92px; gap: 8px; margin-top: 14px; }
.report-day { flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 5px; }
.report-day i { display: block; width: 100%; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #e9c58a, #d8a35e); min-height: 3px; }
.report-day span { font-size: 9.5px; color: var(--ink-3); }
.report-day b { font-size: 9px; color: var(--ink-3); font-weight: 400; }
.review-list { margin-top: 12px; display: grid; gap: 8px; }
.review-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 13px; background: #f8f3e7; font-size: 13px; }
.review-item .when { margin-left: auto; font-size: 11px; color: var(--ink-3); }

.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px dashed #e8ddc8; }
.setting-row:last-child { border-bottom: 0; }
.setting-label { font-size: 13.5px; }
.setting-label small { display: block; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.switch { width: 46px; height: 27px; border-radius: 99px; background: #e4d9c3; position: relative; transition: .2s; flex: none; }
.switch::after { content: ''; position: absolute; width: 21px; height: 21px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.switch.on { background: var(--green); }
.switch.on::after { left: 22px; }

/* 家长门 */
.gate { text-align: left; }
.gate h3 { text-align: center; margin-top: 4px; }
.gate .q { font-size: 26px; text-align: center; letter-spacing: .1em; margin: 16px 0; }
.gate input { width: 100%; height: 50px; text-align: center; font-size: 22px; border-radius: 14px; border: 1px solid var(--line); background: #fffdf7; letter-spacing: .1em; }
.gate .err { color: var(--red); font-size: 12px; text-align: center; height: 18px; margin-top: 6px; }

/* 奖状 */
.certificate { display: none; }
body.printing .certificate { display: block; }
@media print {
  body { background: #fff; }
  #app, .tabbar, .toast, .modal-mask { display: none !important; }
  .certificate {
    display: block !important; position: fixed; inset: 0; padding: 20mm; background: #fff; color: #2f2a25;
  }
  .certificate .cert-inner { border: 3px double #b98a4a; padding: 18mm 12mm; text-align: center; border-radius: 4mm; height: 100%; }
  .certificate h1 { font-size: 30pt; letter-spacing: .3em; margin: 8mm 0 2mm; }
  .certificate .cert-sub { font-size: 11pt; letter-spacing: .3em; color: #8a7358; }
  .certificate .cert-body { font-size: 14pt; line-height: 2.2; margin-top: 12mm; }
  .certificate .cert-name { font-size: 20pt; border-bottom: 1px solid #b98a4a; padding: 0 8mm 2mm; }
  .certificate .cert-foot { margin-top: 16mm; display: flex; justify-content: space-between; font-size: 10pt; color: #8a7358; }
}

/* ---------- 底部导航 ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 8px 16px calc(8px + var(--safe-b));
  background: linear-gradient(rgba(250,245,233,0), rgba(250,245,233,.94) 38%);
  backdrop-filter: blur(10px);
}
.tabbar-inner {
  max-width: 460px; margin: 0 auto; display: flex; justify-content: space-around;
  background: rgba(255,252,244,.95); border: 1px solid var(--line); border-radius: 22px;
  padding: 7px 6px; box-shadow: 0 -4px 30px -18px rgba(80, 60, 30, 0.6);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 14px; color: var(--ink-3); border-radius: 14px; }
.tab svg { width: 22px; height: 22px; }
.tab span { font-size: 10px; letter-spacing: .1em; }
.tab.on { color: var(--accent); }
.tab.on svg { transform: translateY(-1px); }

/* 提示 */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translate(-50%, 16px);
  background: rgba(47, 42, 37, 0.94); color: #fff9ef; padding: 10px 18px; border-radius: 999px;
  font-size: 13px; letter-spacing: .04em; opacity: 0; pointer-events: none; transition: .3s; z-index: 90;
  max-width: 88vw; text-align: center; line-height: 1.5;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 露珠飘字 */
.dew-fly { position: fixed; z-index: 95; font-size: 14px; color: #b57b28; font-weight: 600; pointer-events: none; animation: dewfly 1.1s ease-out forwards; }
@keyframes dewfly { 0% { opacity: 0; transform: translateY(0) scale(.8); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scale(1.1); } }

/* ---------- 场景动效 ---------- */
.scene-svg g { transform-box: fill-box; }
.scene-svg .drift { animation: drift 26s ease-in-out infinite alternate; }
.scene-svg .bob { animation: bob 4s ease-in-out infinite; }
.scene-svg .sway { animation: sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
.scene-svg .fall { animation: fall 12s linear infinite; }
.scene-svg .ripple { animation: ripple 6s ease-out infinite; }
.scene-svg .twinkle { animation: twinkle 3.4s ease-in-out infinite; }
.scene-svg .swim { animation: swim 7s ease-in-out infinite alternate; }
.scene-svg .hover { animation: hover 3s ease-in-out infinite; }
.scene-svg .chirp { animation: chirp 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
.scene-svg .float { animation: float 4s ease-in-out infinite; }
.scene-svg .drip { animation: drip 3s ease-in infinite; }
.scene-svg .wave { animation: wave 5s ease-in-out infinite; }
.scene-svg .feet { animation: feet 3.4s ease-in-out infinite; }
.scene-svg .spin-slow { animation: spin 40s linear infinite; }
.scene-svg .gust { animation: gust 6s ease-in-out infinite; }
.scene-svg .shout { animation: shout 3s ease-in-out infinite; }
.scene-svg .flow { animation: flow 3s ease-in-out infinite; }

@keyframes drift { from { transform: translateX(-10px); } to { transform: translateX(16px); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes sway { 0%, 100% { transform: rotate(-1.8deg); } 50% { transform: rotate(2.2deg); } }
@keyframes fall { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 12% { opacity: .95; } 100% { transform: translate(46px, 300px) rotate(240deg); opacity: 0; } }
@keyframes ripple { 0% { transform: scale(.82); opacity: .65; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes swim { from { transform: translateX(-16px); } to { transform: translateX(16px); } }
@keyframes hover { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes chirp { 0%, 100% { transform: rotate(0) scale(1); } 30% { transform: rotate(-7deg) scale(1.04); } 60% { transform: rotate(4deg) scale(1.02); } }
@keyframes float { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-12px); opacity: 1; } }
@keyframes drip { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(58px); opacity: 0; } }
@keyframes wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-22px); } }
@keyframes feet { 0%, 100% { transform: translateX(0) rotate(0); } 50% { transform: translateX(4px) rotate(4deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gust { 0% { stroke-dashoffset: 0; opacity: .15; } 55% { opacity: .95; } 100% { stroke-dashoffset: -260; opacity: .15; } }
@keyframes shout { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes flow { 0%, 100% { opacity: .5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(4px); } }

.scene-svg .thumb-still *, .thumb .scene-svg * { animation: none !important; }

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  #app { padding-left: 24px; padding-right: 24px; }
  .topbar { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .poem-page { margin-left: -24px; margin-right: -24px; }
  .stage { margin-left: 24px; margin-right: 24px; }
  .steps, .panel { padding-left: 24px; padding-right: 24px; }
  .poem-list { grid-template-columns: 1fr 1fr; }
  .plots { grid-template-columns: repeat(7, 1fr); }
  .greet h1 { font-size: 29px; }
  .zi { font-size: 34px; }
  .poem-text { padding: 0 16px; }
}

@media (max-width: 360px) {
  .zi { font-size: 21px; }
  .py { font-size: 9px; height: 11px; }
  .plots { gap: 5px 4px; }
  .continue-thumb { width: 104px; }
  .stat { padding: 4px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .scene-svg * { animation: none !important; }
}

/* 学诗页隐藏全局导航 */
body.is-poem .topbar, body.is-poem .tabbar { display: none; }
body.is-poem #app { padding-bottom: 28px; }

/* 拼音/正文补充 */
.no-py .py { display: none; }
.py { font-family: -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC', sans-serif; font-weight: 500; }
.cert-name { border-bottom: 1px solid #b98a4a; padding: 0 3mm 1mm; font-size: 1.25em; }

/* 图标与花朵尺寸 */
.ico { width: 1em; height: 1em; flex: none; display: block; }
.flower { width: 100%; height: 100%; display: block; }
#certFlower .flower { height: auto; }
.garden-title svg { width: 1.15em; height: 1.15em; }
.brand-mark .flower { width: 100%; height: 100%; }

/* 跟读行的字符排布 */
.rl-text { display: flex; flex-wrap: wrap; align-items: flex-end; }
.rl-text .ch { cursor: pointer; }

/* ---- 细节修正 ---- */
.steps { gap: 5px; padding: 14px 12px 6px; }
.step { flex: 1; justify-content: center; padding: 7px 2px; font-size: 12px; gap: 4px; white-space: nowrap; }
.step .num { width: 15px; height: 15px; font-size: 9px; }
.step .num svg { width: 9px; height: 9px; }

.game-tab.done { color: #4e7a45; border-color: #cfe0c2; background: var(--green-soft); }
.game-tab.on { background: var(--ink); color: #fff9ef; border-color: var(--ink); }
.game-tab.on.done { background: #3f6b52; border-color: #3f6b52; color: #fff; }

.game-stars svg { color: #e3d6bd; }
.game-stars .on svg { color: var(--gold); }

.dew-fly { z-index: 70; }

.ch.masked .zi { color: transparent; background: #f7efe1; box-shadow: inset 0 -2px 0 #ddc9a6; }
.ch.masked.peek .zi { color: var(--ink); background: transparent; box-shadow: none; }
.ch.masked:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 勋章 */
.badge { filter: none; opacity: .5; }
.badge.on { opacity: 1; }
.b-medal {
  width: 38px; height: 38px; border-radius: 50%; margin: 0 auto 7px;
  display: grid; place-items: center; background: #f2ece0; color: #b8ae9c;
  box-shadow: inset 0 0 0 1px #e6ddcc;
}
.badge.on .b-medal {
  background: color-mix(in srgb, var(--bc) 15%, #fff);
  color: var(--bc);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 28%, #fff);
}
.b-medal svg { width: 20px; height: 20px; }
.b-desc { color: #b3a795; font-size: 9px; margin-top: 2px; display: block; line-height: 1.3; }
.wrong-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 55%; }

/* 诗库筛选换行 */
.filters { flex-wrap: wrap; overflow: visible; }
.review-item { cursor: pointer; }

.b-medal-flower .flower { width: 25px; height: 25px; }
.avatar .flower { width: 34px; height: 34px; }

/* ============================================================
   字号整体上调（儿童阅读）
   ============================================================ */
body { font-size: 17px; }
.tiny { font-size: 13px; }
.brand-name { font-size: 20px; }
.greet h1 { font-size: 28px; }
.greet p { font-size: 14.5px; }
.today-title { font-size: 17px; }
.today-date { font-size: 13px; }
.task-name { font-size: 16px; }
.task-desc { font-size: 13px; }
.task-ico { width: 42px; height: 42px; border-radius: 13px; }
.task-ico svg { width: 23px; height: 23px; }
.btn { font-size: 16px; min-height: 46px; }
.btn-sm { font-size: 14px; min-height: 36px; }
.today-progress span { font-size: 12.5px; }
.garden-title { font-size: 17px; }
.garden-count { font-size: 12.5px; }
.continue-kicker { font-size: 12.5px; }
.continue-title { font-size: 23px; }
.continue-line { font-size: 14.5px; }
.parent-text { font-size: 16px; margin-top: 0; }
.sec-title { font-size: 19px; }
.sec-more { font-size: 13.5px; }
.poem-title { font-size: 20px; }
.poem-meta { font-size: 12.5px; }
.poem-line { font-size: 13.5px; }
.chip { font-size: 12.5px; padding: 4px 10px; }
.filter { font-size: 14.5px; padding: 8px 16px; }
.lib-head h1 { font-size: 26px; }
.step { font-size: 13.5px; }
.step .num { width: 16px; height: 16px; font-size: 9.5px; }
.panel-title { font-size: 16.5px; }
.panel-sub { font-size: 13.5px; }
.py { font-size: 11.5px; height: 14px; }
.zi { font-size: clamp(26px, 7vw, 34px); }
.punct { font-size: clamp(22px, 6vw, 29px); }
.meaning { font-size: 15.5px; }
.word { font-size: 13.5px; padding: 8px 11px; }
.story p { font-size: 16px; }
.tip-box { font-size: 15px; padding: 13px 15px; }
.observe { font-size: 15px; padding: 13px 15px; }
.observe .ans { font-size: 14px; }
.reader-line .rl-text { font-size: 21px; }
.rl-play { width: 38px; height: 38px; }
.rate-row { font-size: 13px; }
.seg button { font-size: 13px; padding: 6px 14px; }
.rec-title { font-size: 14.5px; }
.rec-sub { font-size: 12px; }
.game-tab { font-size: 13.5px; padding: 10px 6px; }
.game-q { font-size: 15.5px; }
.choice { font-size: 19.5px; padding: 14px 15px; }
.order-slot { font-size: 16.5px; min-height: 50px; }
.order-pool button { font-size: 15.5px; padding: 10px 13px; }
.blank-ch { font-size: 28px; }
.recite-levels button { font-size: 14px; padding: 11px 6px; }
.recite-hint { font-size: 13.5px; }
.stage-cap { font-size: 13.5px; padding: 34px 16px 14px; }
.dew-pill { font-size: 13px; padding: 6px 12px; }
.dew-pill svg { width: 15px; height: 15px; }
.poem-top-title b { font-size: 17.5px; }
.poem-top-title span { font-size: 12px; }
.me-name { font-size: 21px; }
.me-sub { font-size: 13px; }
.me-stat b { font-size: 25px; }
.me-stat span { font-size: 12.5px; }
.me-stat em { font-size: 11px; }
.badge span { font-size: 11.5px; }
.b-desc { font-size: 10px; }
.report-day span { font-size: 10.5px; }
.report-day b { font-size: 10px; }
.review-item { font-size: 14.5px; padding: 12px 14px; }
.setting-label { font-size: 15px; }
.setting-label small { font-size: 12.5px; }
.modal h3 { font-size: 23px; }
.modal p { font-size: 15px; }
.tab span { font-size: 11px; }
.tab svg { width: 24px; height: 24px; }
.toast { font-size: 14px; }

/* 听全诗：更大更醒目 */
.stage-play {
  right: 14px; top: 14px;
  font-size: 16px; font-weight: 600; letter-spacing: .04em;
  padding: 12px 20px 12px 16px; gap: 9px;
  background: rgba(255, 252, 244, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 14px 30px -12px rgba(40, 30, 20, 0.65);
}
.stage-play svg { width: 21px; height: 21px; }

/* 诗库搜索 */
.search-box {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; padding: 0 12px; height: 50px;
  border-radius: 16px; background: var(--paper-2);
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.search-box > svg { width: 20px; height: 20px; color: var(--ink-3); flex: none; }
.search-box input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  outline: none; font-size: 16.5px; color: var(--ink); letter-spacing: .02em;
  appearance: none; -webkit-appearance: none;
}
.search-box input::placeholder { color: #b3a795; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-box:focus-within { border-color: #d9c6a4; }
.search-clear {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--paper-3); color: var(--ink-3); display: grid; place-items: center;
}
.search-clear svg { width: 15px; height: 15px; }
.search-clear[hidden] { display: none; }
.is-hidden { display: none !important; }
.lib-head h1 { margin: 0; }

@media (min-width: 640px) {
  .greet h1 { font-size: 32px; }
  .brand-name { font-size: 21px; }
  .search-box { height: 54px; }
}

/* 筛选：三列两行，整齐不换行 */
.filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  overflow: visible;
}
.filter { width: 100%; text-align: center; padding: 9px 4px; }

/* 勋章：三列，给文字更多空间 */
.badge-grid { grid-template-columns: repeat(3, 1fr); }
.badge span:not(.b-desc) { font-size: 12px; }
.badge .b-desc { font-size: 10.5px; }

@media (min-width: 640px) {
  .filters { grid-template-columns: repeat(6, 1fr); }
  .badge-grid { grid-template-columns: repeat(4, 1fr); }
}

/* 顶栏统计稍放大 */
.stat { font-size: 13px; padding: 6px 10px 6px 8px; }
.stat b { font-size: 14px; }
.stat svg { width: 16px; height: 16px; }

/* 五步导航在窄屏也完整可见 */
.steps { gap: 4px; padding: 14px 10px 6px; }
@media (max-width: 380px) {
  .step { font-size: 13px; gap: 3px; padding: 7px 1px; }
  .step .num { width: 15px; height: 15px; }
}

/* 听全诗：场景下方的大按钮，不挡画面 */
.listen-bar {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin: 14px 16px 0; height: 52px; width: calc(100% - 32px);
  border-radius: 16px; background: linear-gradient(180deg, #fdf5e7, #f9ecd7);
  border: 1px solid #ecd7b5; color: #8f5326;
  font-size: 16.5px; font-weight: 600; letter-spacing: .08em;
  box-shadow: 0 12px 26px -20px rgba(80, 60, 30, 0.8);
  transition: background .2s, color .2s, transform .16s;
}
.listen-bar svg { width: 22px; height: 22px; color: #c8763f; }
.listen-bar:active { transform: scale(.99); }
.listen-bar.is-on { background: var(--ink); color: #fff9ef; border-color: var(--ink); }
.listen-bar.is-on svg { color: #fff; }
@media (min-width: 640px) {
  .listen-bar { margin-left: 24px; margin-right: 24px; width: calc(100% - 48px); height: 56px; font-size: 17.5px; }
}

/* ============================================================
   诗页新版：全文在上，逐句画面在下
   ============================================================ */
.poem-top { justify-content: space-between; }
.poem-top .dew-pill { margin-left: auto; }

.poem-head {
  padding: 0 16px 14px;
  text-align: center;
}
.poem-head h1 {
  margin: 0;
  font-size: clamp(28px, 7.4vw, 36px);
  font-weight: 600;
  letter-spacing: .18em;
  line-height: 1.25;
}
.poem-by {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: .1em;
}
.poem-by span { margin-left: 8px; color: #b9ad9a; }
.poem-lines {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pline {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  padding: 4px 6px;
  border-radius: 12px;
  transition: background .25s ease;
}
.pline.on { background: var(--soft); }
.pline .ch { padding: 1px; }
.pline .zi { font-size: clamp(24px, 6.3vw, 31px); }
.pline .py { font-size: 11px; height: 13px; }
.pline .punct { font-size: clamp(20px, 5.3vw, 26px); padding-bottom: 3px; }

/* 画面：相机推拉 + 慢速漂移 */
.stage { cursor: pointer; }
.stage-cam {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: transform 1.15s cubic-bezier(.34, .02, .2, 1);
  will-change: transform;
}
.stage-drift { position: absolute; inset: 0; }
.stage-drift.kb { animation: kb 10s ease-out both; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.04); } }
.stage-drift .scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-ov {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
}
.stage-ov.in { opacity: 1; }
.stage-ov .ov-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.stage-bars {
  position: absolute;
  top: 10px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 5px;
  z-index: 4;
}
.stage-bars i {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, .38);
  box-shadow: 0 0 0 1px rgba(60, 45, 30, .08);
}
.stage-bars i b {
  display: block;
  height: 100%;
  width: 0;
  background: #fff;
  border-radius: 3px;
  transition: width .15s linear;
}
.stage-bars i.done b { width: 100%; }
.stage-bars i.on b { background: #FFF3C4; }

/* 画面字幕在画面下方，不遮住画 */
.stage-sub { margin: 10px 20px 0; min-height: 42px; text-align: center; }
.stage-sub.in { animation: subIn .4s ease both; }
@keyframes subIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.stage-sub-line { font-size: 16px; font-weight: 600; letter-spacing: .08em; color: var(--ink); }
.stage-sub-gloss { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); letter-spacing: .03em; }

/* 逐句画面里的动效 */
.ov-svg .ov-glow { animation: glowPulse 4.4s ease-in-out infinite; }
@keyframes glowPulse { 0%, 100% { opacity: .12; } 50% { opacity: .32; } }
.ov-svg .ov-spark { animation: sparkPulse 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sparkPulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.08); } }
.ov-svg .call-arc { animation: callArc 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes callArc { 0%, 100% { opacity: .15; transform: translateX(0) scale(.94); } 50% { opacity: .95; transform: translateX(4px) scale(1.04); } }
.ov-svg .note-rise { animation: noteRise 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes noteRise { 0% { opacity: 0; transform: translateY(18px) scale(.9); } 22% { opacity: .9; } 100% { opacity: 0; transform: translateY(-42px) scale(1); } }
.ov-svg .feather-drift { animation: featherDrift 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes featherDrift { 0%, 100% { transform: translate(0, 0) rotate(-6deg); } 50% { transform: translate(10px, -8px) rotate(6deg); } }
.ov-svg .ring-pulse { animation: ringPulse 3.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ringPulse { 0% { opacity: .6; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.25); } }
.ov-svg .paddle { animation: paddle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes paddle { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(8deg) translateY(3px); } }
.ov-svg .bubble { animation: bubbleUp 4.4s ease-in infinite; transform-box: fill-box; transform-origin: center; }
@keyframes bubbleUp { 0% { opacity: 0; transform: translateY(8px); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-26px); } }
.ov-svg .petal-float { animation: petalFloat 5.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes petalFloat { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(6px, -14px) rotate(12deg); } }
.ov-svg .koi { animation: koiSwim var(--dur, 7s) ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes koiSwim { from { transform: translate(-120px, 0); } to { transform: translate(120px, 0); } }
.ov-svg .koi-2 { animation-delay: -2.5s; }
.ov-svg .dir-fish { animation: dirSwim 2.8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes dirSwim { from { transform: translate(0, 0); } to { transform: translate(var(--dx), var(--dy)); } }
.ov-svg .spring-word { animation: springAway 5.5s ease-out both; transform-box: fill-box; transform-origin: center; opacity: .22; }
@keyframes springAway { 0% { opacity: .26; transform: translateY(0); } 100% { opacity: .02; transform: translateY(-46px); } }
.ov-svg .approach { animation: approach 5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes approach { from { transform: translateX(-8px); } to { transform: translateX(12px); } }

@media (min-width: 640px) {
  .poem-head { max-width: 640px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
  .poem-head h1 { font-size: 36px; }
  .pline .zi { font-size: 31px; }
  .stage-sub { margin-left: 28px; margin-right: 28px; }
  .stage-sub-line { font-size: 17px; }
  .stage-sub-gloss { font-size: 13.5px; }
}

/* 光晕更柔 */
.ov-svg .ov-glow { filter: blur(6px); }

/* ============================================================
   视频封面 + 影院式朗读
   ============================================================ */
.cover {
  margin: 0 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}
.cover-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #e6dfd0; cursor: pointer; }
.cover-art-bg { position: absolute; inset: 0; animation: kb 14s ease-out both; }
.cover-art-bg .scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-art-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30, 24, 18, .38) 0%, rgba(30, 24, 18, 0) 42%, rgba(30, 24, 18, .55) 100%);
}
.cover-art-text { position: absolute; left: 16px; top: 14px; z-index: 2; color: #fff8e8; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.cover-art-text h1 { margin: 0; font-size: clamp(30px, 8vw, 40px); font-weight: 600; letter-spacing: .16em; line-height: 1.2; }
.cover-art-text div { margin-top: 2px; font-size: 12.5px; letter-spacing: .1em; opacity: .92; }
.cover-play {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  z-index: 3; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px; border-radius: 999px;
  background: rgba(255, 252, 244, .96); color: var(--ink);
  font-size: 15.5px; font-weight: 600; letter-spacing: .06em;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7);
}
.cover-play svg { width: 19px; height: 19px; color: var(--accent); }
.cover-poem { padding: 8px 10px 14px; }
.cover-poem .pline { padding: 4px 6px; }

/* 影院 */
.cinema {
  position: fixed; inset: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(circle at 50% 32%, #1b1712 0%, #0b0907 72%);
  color: #fff8e8;
  padding: calc(8px + env(safe-area-inset-top)) 0 calc(8px + env(safe-area-inset-bottom));
}
.cinema[hidden] { display: none; }
body.cinema-open { overflow: hidden; }
.cinema-top {
  width: 100%; max-width: 1000px; display: flex; align-items: center; gap: 12px;
  padding: 0 14px 8px; position: relative; z-index: 8;
}
.cinema-close {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: #fff8e8;
}
.cinema-close svg { width: 20px; height: 20px; }
.cine-bars { flex: 1; display: flex; gap: 5px; }
.cine-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .18); overflow: hidden; }
.cine-bars i b { display: block; height: 100%; width: 0; background: #fff3c4; border-radius: 3px; transition: width .15s linear; }
.cine-bars i.done b { width: 100%; background: #fff; }
.cine-count { font-size: 12px; opacity: .65; white-space: nowrap; }
.cinema-stage {
  position: relative; width: 100%; max-width: 1000px; aspect-ratio: 16 / 9;
  overflow: hidden; background: #000; margin-top: auto;
  box-shadow: 0 30px 80px -30px #000;
}
.cine-cam { position: absolute; inset: 0; transform-origin: 50% 50%; transition: transform 1.15s cubic-bezier(.34, .02, .2, 1); will-change: transform; }
.cine-drift { position: absolute; inset: 0; }
.cine-drift.kb { animation: kb 10s ease-out both; }
.cine-drift .scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine-ov { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.cine-ov.in { opacity: 1; }
.cine-ov .ov-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine-vignette { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 80px rgba(0, 0, 0, .38); }
.cine-sub {
  min-height: 66px; display: flex; align-items: center; justify-content: center;
  padding: 0 18px; margin-bottom: auto;
  font-size: clamp(20px, 5.6vw, 28px); letter-spacing: .12em;
  text-align: center; color: #fff8e8; text-shadow: 0 2px 18px rgba(0, 0, 0, .9);
}
.cine-sub.in { animation: subIn .35s ease both; }

.cinema-cover {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; padding: 20px;
  background: rgba(10, 8, 6, .62); backdrop-filter: blur(10px);
  transition: opacity .55s ease, transform .55s ease;
}
.cinema-cover[hidden] { display: none; }
.cinema-cover.is-out { opacity: 0; transform: scale(1.02); pointer-events: none; }
.cine-paper {
  width: min(520px, 100%); max-height: 86vh; overflow: auto;
  background: var(--paper-2); color: var(--ink);
  border-radius: 24px; padding: 22px 20px 18px; text-align: center;
  box-shadow: 0 30px 80px -30px #000;
}
.cine-paper h2 { margin: 0; font-size: 30px; font-weight: 600; letter-spacing: .18em; }
.cine-by { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); letter-spacing: .1em; }
.cine-poem { margin-top: 10px; }
.cine-line { display: flex; justify-content: center; align-items: flex-end; padding: 3px 0; }
.cine-poem .zi { font-size: clamp(21px, 5.4vw, 27px); }
.cine-poem .py { font-size: 10.5px; height: 12px; }
.cine-poem .punct { font-size: clamp(18px, 4.6vw, 23px); padding-bottom: 3px; }

.cinema-end {
  position: absolute; left: 0; right: 0; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 7; display: flex; justify-content: center;
}
.cinema-end[hidden] { display: none; }
.cine-end-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(22, 17, 13, .9); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 999px; padding: 8px 10px 8px 18px; backdrop-filter: blur(8px);
}
.cine-end-title { font-size: 14px; letter-spacing: .08em; color: #fff8e8; }
.cine-end-actions { display: flex; gap: 8px; }
.cine-end .btn { min-height: 38px; padding: 0 16px; font-size: 14px; }
.cine-end .btn-ghost { color: #fff8e8; border-color: rgba(255, 255, 255, .25); }

@media (min-width: 640px) {
  .cover { margin-left: 24px; margin-right: 24px; }
  .cinema-stage { border-radius: 14px; margin-top: 8vh; }
  .cine-sub { font-size: 30px; min-height: 80px; }
  .cine-paper { padding: 28px 26px 22px; }
  .cine-paper h2 { font-size: 34px; }
  .cine-poem .zi { font-size: 27px; }
}

/* 影院环境光：把画面颜色铺满整屏，避免上下大黑边 */
.cine-bg {
  position: absolute; inset: -8%; z-index: 0;
  filter: blur(30px) brightness(.5) saturate(1.15);
  opacity: .8; pointer-events: none; transform: scale(1.1);
}
.cine-bg .scene-svg { width: 100%; height: 100%; display: block; }
.cine-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 44%, rgba(0, 0, 0, .08), rgba(0, 0, 0, .78) 78%);
}
.cinema-top, .cinema-stage, .cine-sub { position: relative; z-index: 2; }

/* 片头封面时，关闭/进度仍在最上层 */
.cinema-top { z-index: 8; }

/* 片头封面上的“正在朗读”声波 */
.cine-sound {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  height: 16px; margin-top: 12px; opacity: .55;
}
.cine-sound i { width: 3px; border-radius: 2px; background: var(--accent); animation: soundBar 1s ease-in-out infinite; }
.cine-sound i:nth-child(1) { height: 7px; }
.cine-sound i:nth-child(2) { height: 14px; animation-delay: -.25s; }
.cine-sound i:nth-child(3) { height: 10px; animation-delay: -.5s; }
.cine-sound i:nth-child(4) { height: 16px; animation-delay: -.75s; }
@keyframes soundBar { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

/* 环境光稍亮，片头不至于全黑 */
.cine-bg { filter: blur(24px) brightness(.62) saturate(1.2); opacity: .9; }
.cinema-cover { background: rgba(10, 8, 6, .5); }

/* 封面标题在浅色画面上更清楚 */
.cover-art-shade {
  background: linear-gradient(180deg, rgba(30, 24, 18, .55) 0%, rgba(30, 24, 18, .02) 46%, rgba(30, 24, 18, .58) 100%);
}
.cover-art-text h1 { text-shadow: 0 3px 22px rgba(0, 0, 0, .7); }
.cover-art-text div { text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }

/* 封面标题再压暗一点，保证在浅色画面上可读 */
.cover-art-shade {
  background: linear-gradient(180deg, rgba(30, 24, 18, .66) 0%, rgba(30, 24, 18, .04) 42%, rgba(30, 24, 18, .6) 100%);
}
.cover-art-text h1 { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 5px 26px rgba(0, 0, 0, .55); }
.cover-art-text div { text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 2px 12px rgba(0, 0, 0, .55); }

/* 影院打开时先隐藏下面的页面，省性能 */
body.cinema-open .poem-page { visibility: hidden; }

/* 矮屏（横屏/小窗口）时按可用高度收一下视频，保持 16:9 */
.cinema-stage {
  width: min(100%, 1000px, calc((100vh - 170px) * 16 / 9));
  width: min(100%, 1000px, calc((100dvh - 170px) * 16 / 9));
}

/* 说明弹层在矮屏上可滚动 */
.modal { max-height: 88vh; overflow-y: auto; }

/* ============================================================
   1920 × 1080 HTML 视频播放器
   ============================================================ */
body.is-poem #app { max-width: 1200px; }

.poem-body { max-width: 720px; margin: 0 auto; padding-bottom: 44px; }

.player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.player-frame { position: absolute; inset: 0; overflow: hidden; }
.video-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  will-change: transform;
}

/* 场景 / 运镜 */
.vc-cam {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transition: transform 1.15s cubic-bezier(.34, .02, .2, 1);
  will-change: transform;
}
.vc-drift { position: absolute; inset: 0; }
.vc-drift.kb { animation: kb 10s ease-out both; }
.vc-drift .scene-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vc-ov { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.vc-ov.in { opacity: 1; }
.vc-ov .ov-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vc-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 8, 6, .38) 0%, rgba(10, 8, 6, 0) 22%, rgba(10, 8, 6, 0) 64%, rgba(10, 8, 6, .62) 100%);
}

/* 全诗封面：直接贴在视频画面上 */
.vc-cover {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(ellipse at center, rgba(14, 24, 19, .76), rgba(14, 24, 19, .3) 85%),
    linear-gradient(180deg, rgba(14, 24, 19, .18), rgba(14, 24, 19, .3));
}
.vc-cover[hidden] { display: none; }
.vc-cover-inner {
  position: absolute; inset: 56px 96px 72px; width: auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color: #fff8e8; text-align:center;
}
.vc-cover-kicker {
  font-size: 22px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 248, 232, .56); margin-bottom: 8px;
}
.vc-cover-title {
  margin: 0; font-size: 112px; line-height: 1.06; font-weight: 600;
  letter-spacing: .12em; color: #fff8e8;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .5);
}
.vc-cover-by {
  font-size: 38px; letter-spacing: .1em; margin-top: 8px;
  color: rgba(255, 248, 232, .82); text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.vc-cover-rule { width: 94px; height: 2px; flex-shrink:0; background: rgba(255, 248, 232, .5); margin: 22px auto 20px; }
.vc-cover-poem { width:100%; }
.vc-cover-poem .vc-line { display: flex; align-items: flex-end; justify-content: center; gap:44px; padding: 5px 0; }
.vc-cover-poem .vc-verse { display:flex; align-items:flex-end; justify-content:center; white-space:nowrap; }
.vc-cover-poem .ch { padding: 0 3px; }
.vc-cover-poem .zi {
  font-size: var(--cover-font,112px); line-height: 1.06; color: #fff8e8;
  text-shadow: 0 3px 18px rgba(0, 0, 0, .55);
}
.vc-cover-poem .py {
  font-size: 28px; height: 32px; line-height: 1; letter-spacing: .02em;
  color: rgba(255, 248, 232, .58);
}
.vc-cover-poem .punct { font-size: calc(var(--cover-font,112px) * .8); color: #fff8e8; padding-bottom: 3px; }

/* 片头：标题 + 作者 */
.vc-opening {
  position: absolute; left: 96px; bottom: 104px; z-index: 3; pointer-events: none;
  color: #fff8e8; text-shadow: 0 4px 26px rgba(0, 0, 0, .75);
}
.vc-opening[hidden] { display: none; }
.vc-opening-kicker { font-size: 24px; letter-spacing: .22em; color: rgba(255, 248, 232, .62); }
.vc-opening-title { font-size: 108px; line-height: 1.08; letter-spacing: .12em; font-weight: 600; margin-top: 4px; }
.vc-opening-by { font-size: 36px; letter-spacing: .1em; color: rgba(255, 248, 232, .82); margin-top: 6px; }

/* 单行字幕 */
.vc-sub {
  position: absolute; left: 0; right: 0; bottom: 74px; z-index: 3; pointer-events: none;
  text-align: center; padding: 0 80px;
  font-size: 86px; line-height: 1.2; letter-spacing: .12em; color: #fff8e8;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .9), 0 1px 4px rgba(0, 0, 0, .8);
  opacity: 0; transition: opacity .18s ease;
}
.vc-sub.on { opacity: 1; }

/* 片尾 */
.vc-end {
  position: absolute; left: 0; right: 0; top: 25%; z-index: 4; pointer-events: none;
  text-align: center; color: #fff8e8; text-shadow: 0 4px 30px rgba(0, 0, 0, .85);
}
.vc-end[hidden] { display: none; }
.vc-end-title { font-size: 100px; letter-spacing: .22em; font-weight: 600; }
.vc-end-sub { font-size: 32px; letter-spacing: .14em; color: rgba(255, 248, 232, .7); margin-top: 10px; }

/* 播放器控件（CSS 像素，不随 1920 画布缩放） */
.player-ui { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.player-top {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-top));
  background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent);
  pointer-events: auto;
}
.player-bars { flex: 1; display: flex; gap: 4px; min-width: 0; }
.player-bars button {
  flex: 1; height: 2px; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, .14); cursor: pointer;
  padding: 8px 0; margin: -8px 0; box-sizing: content-box; background-clip: content-box;
}
.player-bars button b {
  display: block; height: 2px; width: 0; border-radius: 4px;
  background: #fff5d9b3; transition: width .15s linear;
}
.player-bars button.done b { width: 100%; background: #ffffffb3; }
.player-bars button.on b { background: #fff5d9b3; }
.player-count {
  font-size: 12px; letter-spacing: .04em; color: rgba(255, 248, 232, .82);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.player-icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: #fff8e8; background: rgba(20, 16, 12, .32);
  border: 1px solid rgba(255, 255, 255, .18);
}
.player-icon svg { width: 17px; height: 17px; }
.player-icon:hover { background: rgba(20, 16, 12, .55); }
.player-big {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 80px; height: 80px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(28, 31, 28, .1);
  color: #fffdf6;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: none;
  transition: transform .18s ease;
  pointer-events: auto;
}
.player-big svg { width: 44px; height: 44px; margin-left: 1px; }
.player-big[aria-label="播放"] svg { opacity: .8; }
.player-big[aria-label="重播"] svg { margin-left:0; }
.player-big[hidden] { display: none; }
.player-big:active { transform: translate(-50%, -50%) scale(.96); }

/* 全屏：原生 + iOS/不支持时的兜底 */
.player:fullscreen {
  width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0;
  display: flex; align-items: center; justify-content: center; background: #000;
}
.player:fullscreen .player-frame {
  position: relative; inset: auto;
  width: min(100vw, calc(100vh * 16 / 9));
  height: auto; aspect-ratio: 16 / 9;
}
.player.is-fs {
  position: fixed; inset: 0; z-index: 200;
  width: 100vw; height: 100vh; height: 100dvh; aspect-ratio: auto; border-radius: 0;
  display: flex; align-items: center; justify-content: center; background: #000;
}
.player.is-fs .player-frame {
  position: relative; inset: auto;
  width: min(100vw, calc(100vh * 16 / 9));
  height: auto; aspect-ratio: 16 / 9;
}
body.player-fs { overflow: hidden; }

@media (min-width: 640px) {
  .player { border-radius: 18px; }
  .player-big { width: 84px; height: 84px; }
  .player-big svg { width: 46px; height: 46px; }
}
@media (max-width: 380px) {
  .player-count { font-size: 12px; }
  .player-icon { width: 30px; height: 30px; }
  .player-icon svg { width: 15px; height: 15px; }
}

/* 封面状态：隐藏进度工具栏，保留中央播放与全屏按钮 */
.player.poster .player-top { justify-content: flex-end; }
.player.poster .player-bars,
.player.poster .player-count,
.player.poster #playerToggle { display: none; }

/* 进度条点击区 */
.player-bars button {
  position: relative; flex: 1; height: 18px; cursor: pointer;
  padding: 0; margin: 0; background: none; overflow: visible; border-radius: 0;
}
.player-bars button::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px;
  border-radius: 4px; background: rgba(255, 255, 255, .22);
}
.player-bars button b {
  position: absolute; left: 0; top: 7px; height: 4px; width: 0;
  border-radius: 4px; background: #fff3c4; transition: width .15s linear;
}
.player-bars button.done b { width: 100%; background: #fff; }
.player-bars button.on b { background: #fff3c4; }
.vc-end { top: 18%; }
@media (max-width: 640px) {
  .player-big { width: 64px; height: 64px; }
  .player-big svg { width: 36px; height: 36px; }
}
.player:fullscreen .player-icon, .player.is-fs .player-icon { width: 44px; height: 44px; }
.player:fullscreen .player-icon svg, .player.is-fs .player-icon svg { width: 21px; height: 21px; }
.player:fullscreen .player-count, .player.is-fs .player-count { font-size: 14px; }
.player:fullscreen .player-big, .player.is-fs .player-big { width: 100px; height: 100px; }
.player:fullscreen .player-big svg, .player.is-fs .player-big svg { width: 54px; height: 54px; }

/* ============================================================
   电影感运动层：连续运镜 + 叠化 + 光 / 颗粒 / 浮尘
   ============================================================ */
.vc-cam { transition: transform 2.4s cubic-bezier(.22, .61, .36, 1); }
.vc-float {
  position: absolute; inset: -2%;
  animation: vcFloat 17s ease-in-out infinite alternate;
  will-change: transform;
}
.vc-float .vc-drift { inset: 0; }
.vc-drift.kb { animation: kb 22s ease-out both; }
.vc-drift .scene-svg { filter: saturate(.9) contrast(1.05) brightness(1.01); }

@keyframes vcFloat {
  from { transform: translate3d(-.35%, .2%, 0) scale(1.01); }
  to { transform: translate3d(.4%, -.3%, 0) scale(1.015); }
}

/* 两层叠加，替代每句硬切 */
.vc-ov {
  position: absolute; inset: 0; z-index: 1; opacity: 0;
  transition: opacity .6s ease;
}
.vc-ov.on { opacity: 1; z-index: 2; }

/* 调色 / 光晕 / 暗角 / 浮尘 */
.vc-grade {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 196, 120, .10), rgba(20, 35, 55, .10));
  mix-blend-mode: soft-light;
}
.vc-glow {
  position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 62% 42%, var(--glow, #f7e4b0) 0%, transparent 46%);
  opacity: .16; mix-blend-mode: screen;
  animation: glowBreathe 9s ease-in-out infinite alternate;
}
@keyframes glowBreathe {
  from { opacity: .11; transform: scale(1); }
  to { opacity: .20; transform: scale(1.04); }
}
.vc-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, transparent 48%, rgba(10, 8, 6, .38) 100%);
}
.vc-shade { z-index: 2; }
.vc-motes { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.vc-motes i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: #fff4d0; opacity: 0; filter: blur(.4px);
  box-shadow: 0 0 8px rgba(255, 240, 190, .5);
  animation: moteRise var(--d) linear infinite;
  animation-delay: var(--delay);
}
@keyframes moteRise {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: var(--o); }
  82% { opacity: var(--o); }
  100% { transform: translate3d(var(--dx), -180px, 0); opacity: 0; }
}

/* 单行字幕：两层叠化，不再硬跳 */
.vc-sub {
  position: absolute; left: 0; right: 0; bottom: 74px; z-index: 4; pointer-events: none;
  text-align: center; padding: 0 80px;
  font-size: 86px; line-height: 1.2; letter-spacing: .12em; color: #fff8e8;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .9), 0 1px 4px rgba(0, 0, 0, .8);
  opacity: 0; transform: translateY(16px); filter: blur(4px);
  transition: opacity .38s ease, transform .38s cubic-bezier(.22, .61, .36, 1), filter .38s ease;
}
.vc-sub.on { opacity: 1; transform: none; filter: none; }

/* 封面内容：海报式入场 */
.vc-cover-inner > * {
  opacity: 0;
  animation: coverIn .95s cubic-bezier(.22, .61, .36, 1) both;
}
.vc-cover-kicker { animation-delay: .05s; }
.vc-cover-title { animation-delay: .12s; }
.vc-cover-by { animation-delay: .24s; }
.vc-cover-rule { animation-delay: .32s; }
.vc-cover-poem { animation-delay: .40s; }
.vc-cover-poem .vc-line {
  opacity: 0;
  animation: coverLineIn .8s cubic-bezier(.22, .61, .36, 1) both;
}
.vc-cover-poem .vc-line:nth-child(1) { animation-delay: .42s; }
.vc-cover-poem .vc-line:nth-child(2) { animation-delay: .47s; }
.vc-cover-poem .vc-line:nth-child(3) { animation-delay: .52s; }
.vc-cover-poem .vc-line:nth-child(4) { animation-delay: .57s; }
.vc-cover-poem .vc-line:nth-child(5) { animation-delay: .62s; }
.vc-cover-poem .vc-line:nth-child(6) { animation-delay: .67s; }
.vc-cover-poem .vc-line:nth-child(7) { animation-delay: .72s; }
@keyframes coverIn {
  from { opacity: 0; transform: translateY(22px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes coverLineIn {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}

/* 片头标题：分层揭示，和字幕交接 */
.vc-opening { z-index: 4; }
.vc-opening-kicker, .vc-opening-title, .vc-opening-by {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .61, .36, 1), filter .8s ease;
}
.vc-opening.in .vc-opening-kicker { opacity: .62; transform: none; filter: none; transition-delay: .02s; }
.vc-opening.in .vc-opening-title { opacity: 1; transform: none; filter: none; transition-delay: .12s; }
.vc-opening.in .vc-opening-by { opacity: .82; transform: none; filter: none; transition-delay: .24s; }

/* 片尾：暗场 + 标题浮起 */
.vc-dim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: #0b0906; opacity: 0; transition: opacity 1.1s ease;
}
.vc-dim.on { opacity: .42; }
.vc-end {
  top: 18%; z-index: 6;
  opacity: 0; transform: translateY(18px); filter: blur(6px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1), filter .9s ease;
}
.vc-end.in { opacity: 1; transform: none; filter: none; }

/* 转场光：3 帧封面切走时的柔光 + 一次扫光 */
.vc-sweep {
  position: absolute; inset: -10%; z-index: 6; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(108deg, transparent 34%, rgba(255, 248, 220, .16) 50%, transparent 66%);
  transform: translateX(-100%);
}
.vc-sweep.go { animation: lightSweep 1.25s ease-out both; }
@keyframes lightSweep {
  0% { opacity: 0; transform: translateX(-100%); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateX(100%); }
}
.vc-flash {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 46%, rgba(255, 246, 218, .7) 0%, rgba(255, 240, 200, .25) 28%, transparent 62%);
}
.vc-flash.go { animation: softFlash .55s ease-out both; }
@keyframes softFlash {
  0% { opacity: 0; transform: scale(1.05); }
  15% { opacity: .75; }
  100% { opacity: 0; transform: scale(1); }
}

/* 胶片颗粒 */
.vc-grain {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

@media (prefers-reduced-motion: reduce) {
  .vc-float, .vc-drift.kb, .vc-motes i, .vc-glow, .player-big svg { animation: none !important; }
  .vc-cam { transition-duration: .01s; }
  .vc-cover-inner > *, .vc-cover-poem .vc-line {
    animation: none; opacity: 1; transform: none; filter: none;
  }
  .vc-sub, .vc-opening-kicker, .vc-opening-title, .vc-opening-by, .vc-end { transition-duration: .01s; }
}
.vc-cam { transition-duration: 1.7s; }
/* 字幕不要 30px 大阴影，避免看起来像重影；靠画面下方的渐变保证可读性 */
.vc-sub { text-shadow: 0 2px 14px rgba(0, 0, 0, .7), 0 1px 2px rgba(0, 0, 0, .55); }
.vc-end-title { text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.vc-end-sub { text-shadow: 0 1px 10px rgba(0, 0, 0, .55); }

/* Picture scenes sampled from the narration audio clock. */
.film-stage, .film-world, .film-camera { position: absolute; inset: 0; }
.film-stage { overflow: hidden; background: #92b9a8; }
.film-world { opacity: 0; }
.film-camera { transform-origin: center; will-change: transform; }
.film-camera > svg { display: block; width: 100%; height: 100%; }
.film-stage * { animation: none !important; }
.vc-cam[hidden] { display: none; }
.has-film .vc-grade { opacity: .18; }
.has-film .vc-vignette { opacity: .28; }
.has-film .vc-glow, .has-film .vc-motes, .has-film .vc-grain { display: none; }
.has-film .vc-shade { background: linear-gradient(transparent 66%, rgba(12,36,29,.48)); }
.has-film .vc-cover { background: radial-gradient(ellipse at center,rgba(14,30,24,.78),rgba(14,30,24,.32) 88%); }
.has-film .vc-sub { transition: opacity .07s linear; transform: none; filter: none; }
.player:not([data-phase="end"]) .vc-dim { opacity: 0; transition: none; }
.player[data-mode="full"] .vc-sub { bottom: 194px; }
.player:not(.is-playing) .vc-cam *,
.player:not(.is-playing) .vc-glow,
.player:not(.is-playing) .vc-motes i { animation-play-state: paused; }
.player-bars button { border: 0; border-radius: 2px; }
.player-bars button:focus-visible, .player-icon:focus-visible,
.player-big:focus-visible { outline: 3px solid #d5a052; outline-offset: 4px; }
.player-bars button:focus-visible { outline-color: #fff2c9; }
.player[data-mode="full"] .player-bars button b { transition: none; }
.full-transport {
  position: absolute; bottom: 10px; left: 16px; right: 16px;
  display: flex; align-items: center; gap: 12px; pointer-events: auto;
  color: #fff9e9b8; padding: 0 2px; background: none; text-shadow: 0 1px 3px #10251d99;
}
.full-transport[hidden] { display: none; }
.player-idle-target { transition: opacity .22s ease, visibility .22s; }
.is-controls-idle .player-idle-target { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .player-idle-target { transition: none; } }
#fullSeek {
  --played: 0%; appearance: none; -webkit-appearance: none;
  height: 44px; min-width: 0; flex: 1; margin: 0; padding: 0; cursor: pointer;
  background: linear-gradient(to right,#fff4d6a6 var(--played),#ffffff29 var(--played)) center / 100% 2px no-repeat;
}
#fullSeek::-webkit-slider-runnable-track { height: 2px; background: transparent; }
#fullSeek::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; margin-top: -3px; border-radius: 50%; background: #fff7e2b3; }
#fullSeek::-moz-range-track { height: 2px; border: 0; background: transparent; }
#fullSeek::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #fff7e2b3; }
#fullSeek:focus-visible { outline: 2px solid #fff3d3; outline-offset: 2px; border-radius: 4px; }
#playerTime { min-width: 78px; text-align: right; font: 12px/1.3 ui-monospace,monospace; font-variant-numeric: tabular-nums; }
.film-compass {
  position: absolute; top: 115px; left: 96px; width: 160px; height: 160px;
  display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr);
  align-items: center; justify-items: center; color: #153e31; font: 32px/1 system-ui,sans-serif;
  background: rgba(243,248,221,.86); border-radius: 50%; opacity: 0;
}
.film-compass span:first-child { grid-column: 2; grid-row: 1; }
.film-compass span:nth-child(2) { grid-column: 1; grid-row: 2; }
.film-compass i { grid-column: 2; grid-row: 2; font-style: normal; color: #56755e; }
.film-compass span:nth-child(4) { grid-column: 3; grid-row: 2; }
.film-compass span:last-child { grid-column: 2; grid-row: 3; }
.film-compass .active { color: #a34320; font-weight: 700; }
@media (max-width: 480px) {
  .full-transport { left: 12px; right: 12px; bottom: 4px; padding: 0; gap: 8px; }
  #playerTime { font-size: 12px; min-width: 75px; }
  .player[data-mode="full"] .vc-sub { bottom: 218px; }
  .has-film .vc-sub { font-size: 100px; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .player *, .player *::before, .player *::after { animation: none !important; transition: none !important; }
}

/* Scene review v2: calm painted backdrops. */
.has-film .vc-grade, .has-film .vc-vignette { opacity: 0; }
.has-film .vc-shade { background: linear-gradient(transparent 70%,rgba(15,29,21,.42)); }
@media(max-width:480px){#playerTime{font-size:12px;min-width:75px}}

.vc-cover-inner[data-dense="true"]{inset:30px 96px;}
.vc-cover-inner[data-dense="true"] .vc-cover-title{font-size:96px;}
.vc-cover-inner[data-dense="true"] .vc-cover-by{font-size:32px;}
.vc-cover-inner[data-dense="true"] .vc-cover-rule{margin:12px auto;}
.vc-cover-inner[data-dense="true"] .vc-line{padding:2px 0;}
.vc-cover-inner[data-dense="true"] .py{font-size:22px;height:24px;}

/* Reading subtitles: character-aligned pinyin sized for the scaled video canvas. */
.player .vc-sub { display: flex; justify-content: center; align-items: flex-end; gap: .04em; font-family: PoemKai, 'Songti SC', serif; font-size: var(--subtitle-size, 86px); line-height: 1.25; letter-spacing: .04em; white-space: nowrap; }
.vc-sub .ch { cursor: default; border-radius: 0; padding: 0 .04em; gap: .15em; }
.vc-sub .zi { font-size: 1em; line-height: 1.25; color: inherit; margin: 0; }
.vc-sub .py { font-family: system-ui, sans-serif; font-size: var(--subtitle-pinyin-size, 36px); font-weight: 400; line-height: 1.2; height: auto; color: inherit; letter-spacing: 0; }
.vc-sub .punct { font-size: 1em; line-height: 1.25; color: inherit; padding: 0; }

/* Keep the singing UI separate from the existing reading player. */
.tab span { font-size: 12px; }
.sg-library { padding: 20px 0 8px; }
.sg-heading { margin: 4px 0 26px; }
.sg-kicker { font-size: 13px; color: #796957; letter-spacing: .12em; }
.sg-heading h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 600; margin: 8px 0; }
.sg-heading p { color: #796957; font-size: 15px; margin: 8px 0; }
.sg-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
.sg-card { display: block; text-align: left; min-width: 0; width: 100%; border-radius: 20px; overflow: hidden; background: #fffcf4; border: 1px solid #e7dfcf; transition: transform .18s; }
.sg-card:hover { transform: translateY(-3px); }
.sg-card:focus-visible, .sg-page button:focus-visible, .song-step:focus-visible { outline: 3px solid #a25927; outline-offset: 4px; }
.sg-art { display: block; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #edf0df; }
.sg-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-card-play { position: absolute; right: 12px; bottom: 10px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff9efed; color: var(--song-color); box-shadow: 0 2px 12px #3c462a1a; }
.sg-card-play svg { width: 22px; height: 22px; }
.sg-card-copy { padding: 15px 16px 17px; display: block; }
.sg-card-copy strong { display: block; font-size: 21px; font-weight: 600; margin-bottom: 6px; line-height: 1.5; }
.sg-card-copy > span { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; color: #796957; }
.sg-card-copy small { font-size: 12px; font-variant-numeric: tabular-nums; }
.sg-source { font-size: 12px; line-height: 1.8; color: #847461; text-align: center; margin: 24px 0 8px; }
.song-step-icon { display: grid; place-items: center; }
.song-step-icon svg { width: 17px; height: 17px; }
.steps.has-song .step { min-width: 0; }
.steps.has-song .num { font-size: 12px; width: 18px; height: 18px; }
/* Playback mode: only the picture, captions, progress and controls. */
body.is-song { background: #101b17; overflow: hidden; }
body.is-song #app { max-width: none; padding: 0; }
.sg-page { color: #f6f3e8; }
.sg-back { position: absolute; z-index: 10; top: max(16px, env(safe-area-inset-top)); left: max(16px, env(safe-area-inset-left)); display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 10px 14px; border: 1px solid #ffffff1a; border-radius: 24px; background: #0a211b99; color: #f6f3e8; font-size: 16px; }
.sg-back svg { width: 22px; height: 22px; }
.sg-back:hover { background: #294437d9; }
.sg-stage.is-rotated .sg-back { top: max(16px, env(safe-area-inset-right)); left: max(16px, env(safe-area-inset-top)); }
.sg-stage:not(.is-fs) .sg-screen, .sg-stage:not(.is-fs) .sg-controls { max-width: 960px; }
.sg-stage { width: 100%; height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; background: #101b17; }
.sg-screen { position: relative; width: min(100%, calc((100dvh - var(--song-controls-height, 132px)) * 16 / 9)); aspect-ratio: 16 / 9; flex-shrink: 0; overflow: hidden; background: var(--song-soft); cursor: pointer; container-type: inline-size; isolation: isolate; }
.sg-screen video { display: block; width: 100%; height: 100%; object-fit: contain; }
.sg-film { pointer-events: none; }
.sg-picture-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(transparent 56%, #092724b8); }
.sg-captions { position: absolute; left: 4%; right: 4%; bottom: 6%; text-align: center; color: #fff9e9; pointer-events: none; opacity: 0; }
.sg-captions.has-lyric { opacity: 1; }
.sg-caption-line { font-family: PoemKai, 'Songti SC', serif; font-size: clamp(24px, 4.6cqw, 46px); line-height: 1.5; letter-spacing: .05em; white-space: nowrap; text-shadow: 0 2px 4px #102d27, 0 0 14px #102d27; }
.sg-caption-line ruby { ruby-align: center; margin: 0 .07em; }
.sg-caption-line rt { font-family: system-ui, sans-serif; font-size: max(12px, .35em); font-weight: 400; letter-spacing: .02em; }
.sg-no-pinyin rt { display: none; }
.sg-screen-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #ffffff1a; background: #ffffff1a; color: #ffffffcc; box-shadow: 0 3px 20px #10251d14; }
.sg-screen-play svg { width: 32px; height: 32px; }
.sg-controls { width: 100%; max-width: 1440px; flex-shrink: 0; padding: 10px max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.sg-progress { display: flex; align-items: center; gap: 14px; }
.sg-progress input { --played: 0%; appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; width: 100%; height: 44px; min-height: 44px; padding: 0; margin: 0; border: 0; border-radius: 0; cursor: pointer; background: linear-gradient(to right,#dce8d4a6 var(--played),#ffffff29 var(--played)) center / 100% 2px no-repeat; }
.sg-progress input::-webkit-slider-runnable-track { height: 2px; background: transparent; }
.sg-progress input::-webkit-slider-thumb { appearance: none; width: 8px; height: 8px; margin-top: -3px; border-radius: 50%; background: #e8f0dfb3; }
.sg-progress input::-moz-range-track { height: 2px; border: 0; background: transparent; }
.sg-progress input::-moz-range-thumb { width: 8px; height: 8px; border: 0; border-radius: 50%; background: #e8f0dfb3; }
.sg-progress output { font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; color: #d4d8ccb3; }
.sg-buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px; margin-top: 6px; }
.sg-transport, .sg-tools { display: flex; align-items: center; justify-content: center; gap: 8px; }
.sg-play, .sg-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 14px; border-radius: 24px; font-size: 14px; white-space: nowrap; }
.sg-play { background: #dfe9d4; color: #243d2b; min-width: 118px; }
.sg-tool { color: #e2e4da; background: #ffffff09; }
.sg-tool:hover { background: #ffffff18; }
.sg-tool[aria-pressed=true] { background: #c9dcba1c; color: #e6f1d8; }
.sg-adjacent { min-width: 94px; }
.sg-page button:focus-visible, .sg-progress input:focus-visible { outline: 2px solid #d6eabf; outline-offset: 3px; }
.sg-status { font-size: 13px; text-align: center; color: #e6d9ae; margin: 8px 0 0; }
.sg-page [hidden] { display: none !important; }
.song-fs { overflow: hidden; }
.sg-stage:fullscreen, .sg-stage.is-fs { height: 100dvh; width: 100%; }
.sg-stage.is-fs { position: fixed; inset: 0; z-index: 1000; }
@media (max-width: 820px) {
  .sg-buttons { flex-direction: column; gap: 8px; }
  .sg-tools .sg-tool { min-width: 48px; }
}
@media (max-width: 560px) {
  .steps.has-song .num, .steps.has-song .song-step-icon { display: none; }
  .steps.has-song .step { font-size: 13px; padding: 10px 0; }
}
@media (max-width: 480px) {
  .sg-grid { gap: 14px 10px; }
  .sg-card { border-radius: 16px; }
  .sg-card-copy { padding: 12px 10px 14px; }
  .sg-card-copy strong { font-size: 19px; }
  .sg-card-copy > span { font-size: 13px; }
  .sg-card-play { width: 32px; height: 32px; right: 8px; bottom: 8px; }
  .sg-controls { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  .sg-transport { gap: 8px; }
  .sg-tool { padding: 10px; }
  .sg-adjacent { min-width: 88px; }
  .sg-play { min-width: 108px; }
  .sg-screen-play { width: 54px; height: 54px; }
  .sg-caption-line { letter-spacing: 0; font-size: clamp(23px, 6.8cqw, 30px); }
  .sg-caption-line ruby { margin: 0 .02em; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .sg-buttons { flex-direction: row; gap: 8px; }
  .sg-play, .sg-tool { padding: 8px; font-size: 13px; }
  .sg-play { min-width: 100px; }
  .sg-adjacent { min-width: 80px; }
}
@media (prefers-reduced-motion: reduce) { .sg-card { transition: none; } }

/* The plate fills the existing 16:9 film surface; subtitles stay above it. */
.cinematic-film { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cinematic-plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: center; will-change: transform; }
.cinematic-film[hidden], .cinematic-plate[hidden] { display: none !important; }
.film-stage[data-cinematic-active="true"] > :not(.cinematic-film) { visibility: hidden; }

.hybrid-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; pointer-events: none; }
.film-stage[data-hybrid-active="true"] > :not(.hybrid-video) { visibility: hidden !important; }
.film-stage[data-hybrid-active="true"] > .hybrid-video { visibility: visible !important; }

/* Portrait tablet workspace; fullscreen players share a landscape surface. */
:root { --tablet-width: 880px; }
#app { max-width: var(--tablet-width); }
body.is-poem #app { max-width: var(--tablet-width); }
body.is-song #app { max-width: none; padding: 0; }
.tabbar-inner { max-width: var(--tablet-width); }
.brand-sub, .today-date, .task-desc, .today-progress span, .garden-count,
.continue-kicker, .parent-eye, .me-stat em, .badge span, .b-desc,
.report-day span, .report-day b { font-size: 12px; }
.step .num { font-size: 12px; }

.landscape-surface { position: relative; width: 100%; height: 100%; }
.player-surface { position: absolute; inset: 0; }
.player-controls { position:absolute; left:0; right:0; bottom:0; padding:0 18px max(8px,env(safe-area-inset-bottom)); pointer-events:auto; background:linear-gradient(transparent,#10251d70); }
.player-controls .full-transport { position:static; gap:12px; padding:0; }
.player-controls .player-top { position:static; padding:10px 0 4px; background:none; }
.player-controls .player-top[hidden] { display:none; }
.player-buttons { display:flex; align-items:center; gap:12px; min-height:44px; }
.player-buttons .player-tool { display:flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; padding:0 10px; border:0; background:transparent; color:#f4f4e6d9; font-size:14px; border-radius:12px; }
.player-tool svg { width:18px; height:18px; }
.player-tool:hover { background:#ffffff12; }
.player-tool:focus-visible { outline:2px solid #f7ecc5; outline-offset:1px; }
.player-buttons .player-icon { width:44px; height:44px; background:transparent; border:0; }
.player-buttons .player-fullscreen { margin-left:auto; }
.player-controls #fullSeek { height:30px; }
.player.poster #playerToggle { display:grid; }
.player.is-controls-idle { cursor:none; }
.player .vc-cover-inner, .player .vc-cover-inner[data-dense="true"] { bottom:var(--reading-controls-clearance,250px); }
.player .vc-sub, .player[data-mode="full"] .vc-sub, .player .vc-opening { bottom:var(--reading-controls-clearance,250px); }
@media(max-width:480px) { .player-controls { padding:0 10px 5px; } .player-buttons { gap:3px; } .player-buttons .player-tool { padding:0 5px; font-size:12px; } }
.sg-surface { display: flex; flex-direction: column; align-items: center; justify-content: center; container: song-surface / inline-size; }
.sg-screen { width: min(100%, calc((var(--player-view-height, 100dvh) - var(--song-controls-height, 132px)) * 16 / 9)); }
.sg-screen-play { z-index: 6; }
.sg-cover-frame { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: hidden; }
.sg-cover-canvas { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: 0 0; }
.sg-cover-canvas .vc-cover-inner > *, .sg-cover-canvas .vc-line { animation: none; opacity: 1; transform: none; }
.vc-cover-poem .py { font-size: var(--cover-pinyin-size, 28px); height: 1.15em; }
.vc-cover-inner[data-dense="true"] .py { font-size: var(--cover-dense-pinyin-size, 22px); height: 1.15em; }
.vc-cover-kicker { font-size: var(--cover-kicker-size, 22px); }
.vc-cover-by { font-size: var(--cover-author-size, 38px); }
.vc-cover-inner[data-dense="true"] .vc-cover-by { font-size: var(--cover-dense-author-size, 32px); }
.vc-cover-poem .zi { font-size: var(--cover-fit-font, var(--cover-font, 112px)); }
.vc-cover-poem .punct { font-size: calc(var(--cover-fit-font, var(--cover-font, 112px)) * .8); }
.player.is-compact-cover { aspect-ratio:auto; }
.player.is-compact-cover .film-stage { height:1080px; transform:scale(var(--compact-scene-scale,1)); transform-origin:50% 0; }
.player.is-compact-cover .vc-cover-inner { top:64px; }
.player.is-compact-cover .vc-cover-title { font-size:var(--cover-title-size,112px); }
.player.is-compact-cover .vc-cover-poem .vc-line { flex-direction:column; align-items:center; gap:0; padding:0; }
.player.is-compact-cover .vc-cover-poem .ch { padding:0 var(--cover-character-gap,3px); }
.player.is-compact-cover .vc-cover-rule { margin:18px auto; }

body.video-fullscreen { overflow: hidden; }
.player.is-fs, .sg-stage.is-fs { position: fixed; inset: 0; width: 100vw; height: 100dvh; z-index: 1000; margin: 0; border: 0; border-radius: 0; overflow: hidden; }
.is-fs > .landscape-surface {
  position: absolute; inset: auto; left: 50%; top: 50%;
  width: var(--player-view-width, 100vw); height: var(--player-view-height, 100dvh);
  max-width: none; transform: translate(-50%, -50%); transform-origin: center;
}
.is-fs.is-rotated > .landscape-surface { transform: translate(-50%, -50%) rotate(90deg); }
.player.is-fs .player-frame {
  position: absolute; inset: auto; left: 50%; top: 50%;
  width: min(var(--player-view-width, 100vw), calc(var(--player-view-height, 100dvh) * 16 / 9));
  height: auto; aspect-ratio: 16 / 9; transform: translate(-50%, -50%);
}
.sg-stage.is-fs .sg-buttons { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.sg-stage.is-fs .sg-controls { max-width: none; }
@container song-surface (min-width: 900px) { .sg-buttons { flex-direction: row; } }

@media (min-width: 600px) {
  #app { padding: 0 28px calc(116px + var(--safe-b)); }
  .topbar { min-height: 88px; margin: 0 -28px; padding: 18px 28px; }
  .brand { gap: 12px; }
  .brand-mark { width: 42px; height: 42px; }
  .brand-name { font-size: 24px; letter-spacing: .1em; }
  .stat { min-height: 40px; padding: 8px 13px; font-size: 15px; }
  .stat b { font-size: 16px; }
  .stat svg { width: 19px; height: 19px; }
  .greet { padding: 20px 4px 26px; }
  .greet h1 { font-size: 34px; }
  .greet p { font-size: 16px; margin-top: 10px; }
  .card { border-radius: 24px; }
  .today, .garden, .parent-card { padding: 24px; margin-top: 20px; }
  .today-title, .garden-title, .sec-title { font-size: 22px; }
  .today-date, .garden-count, .today-progress span { font-size: 14px; }
  .task-row { min-height: 88px; padding: 16px; gap: 16px; margin-top: 18px; }
  .task-ico { width: 48px; height: 48px; border-radius: 16px; }
  .task-name { font-size: 20px; }
  .task-desc { font-size: 15px; margin-top: 6px; }
  .btn, .btn-sm { min-height: 52px; padding: 0 24px; font-size: 17px; }
  .today-progress { margin-top: 20px; gap: 16px; }
  .plots { grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 10px; margin-top: 20px; }
  .plot { min-height: 56px; border-radius: 18px; }
  .continue { min-height: 168px; padding: 16px; gap: 22px; margin-top: 20px; }
  .continue-thumb { width: 210px; border-radius: 18px; }
  .continue-title { font-size: 28px; }
  .continue-title small, .continue-kicker { font-size: 14px; }
  .continue-line, .parent-text { font-size: 18px; line-height: 1.8; }
  .parent-actions { margin-top: 16px; }
  .sec-head { margin: 30px 4px 16px; }
  .sec-more { font-size: 16px; min-height: 44px; padding: 8px; }
  .lib-head { padding: 22px 4px 8px; }
  .lib-head h1, .sg-heading h1 { font-size: 34px; }
  .search-box { height: 62px; border-radius: 18px; margin-top: 18px; padding-left: 20px; }
  .search-box input { font-size: 18px; }
  .search-clear { width: 48px; height: 48px; }
  .filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; padding: 18px 0 4px; overflow: visible; }
  .filter { min-height: 48px; font-size: 16px; padding: 10px 8px; }
  .poem-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
  .poem-card { flex-direction: column; align-items: stretch; gap: 16px; padding: 14px; }
  .poem-card .thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; }
  .poem-info { padding: 0 4px 6px; }
  .poem-title-row { flex-wrap: wrap; gap: 8px; }
  .poem-title { font-size: 24px; letter-spacing: .04em; }
  .poem-meta { font-size: 14px; margin-top: 6px; }
  .poem-line { font-size: 16px; line-height: 1.6; margin-top: 8px; }
  .poem-foot { margin-top: 12px; }
  .chip { font-size: 14px; }
  .tabbar { padding: 12px 28px max(12px, env(safe-area-inset-bottom)); background: linear-gradient(transparent, #faf5e9 35%); border: 0; }
  .tabbar-inner { max-width: 824px; padding: 8px; border: 1px solid #e6ddca; border-radius: 26px; background: #fffdf5f2; box-shadow: 0 12px 36px #40381b12; }
  .tab { min-height: 64px; border-radius: 18px; }
  .tab span { font-size: 15px; }
  .tab svg { width: 25px; height: 25px; }
  .tab.on { background: #eef1e3; }
  .poem-page { margin: 0; }
  .poem-top { min-height: 80px; padding: 14px 0; }
  .icon-btn { width: 50px; height: 50px; }
  .dew-pill { min-height: 42px; padding: 8px 16px; font-size: 16px; }
  .player { border-radius: 24px; }
  .poem-body { max-width: none; padding-bottom: 28px; }
  .steps { padding: 24px 0 12px; gap: 8px; }
  .step, .steps.has-song .step { min-height: 52px; font-size: 15px; gap: 6px; padding: 8px 4px; }
  .step .num, .steps.has-song .num { width: 20px; height: 20px; font-size: 12px; }
  .song-step-icon svg { width: 20px; height: 20px; }
  .panel { padding: 12px 0 0; }
  .panel-title { font-size: 21px; }
  .panel-sub, .tip-box { font-size: 16px; line-height: 1.8; }
  .observe { min-height: 62px; padding: 18px; font-size: 18px; }
  .observe .ans, .meaning { font-size: 16px; }
  .story p { font-size: 19px; line-height: 1.9; }
  .reader-line { padding: 18px; }
  .rl-play { width: 48px; height: 48px; }
  .rl-text .py { font-size: 14px; height: 18px; }
  .rl-text .zi { font-size: 34px; }
  .poem-text .py, .rl-py { font-size: 14px; height: 18px; }
  .word i, .meaning .idx { font-size: 12px; }
  .rec-title, .game-q, .rate-row { font-size: 16px; }
  .rec-sub { font-size: 14px; }
  .rec-play { width: 48px; height: 48px; }
  .tool, .seg button, .game-tab, .recite-levels button { min-height: 48px; font-size: 16px; }
  .choice { min-height: 64px; font-size: 22px; }
  .order-pool button, .word { min-height: 48px; font-size: 16px; }
  .order-slot .n { font-size: 12px; }
  .player-icon { width: 44px; height: 44px; }
  .player-icon svg { width: 20px; height: 20px; }
  .player-count, #playerTime { font-size: 14px; }
  .me-name { font-size: 28px; }
  .me-sub, .me-stat span, .b-desc { font-size: 14px; }
  .me-stat b { font-size: 34px; }
  .me-stat em, .badge span { font-size: 14px; }
  .badge-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .badge { padding: 18px 8px; opacity: .65; }
  .badge span:not(.b-desc) { font-size: 15px; }
  .badge .b-desc { font-size: 12px; }
  .badge .b-medal { width: 42px; height: 42px; margin-bottom: 10px; }
  .setting-row, .review-item { min-height: 64px; font-size: 17px; }
  .setting-label { font-size: 17px; }
  .setting-label small, .review-item .when { font-size: 14px; }
  .switch { width: 70px; height: 44px; }
  .switch::after { width: 32px; height: 32px; top: 6px; left: 6px; }
  .switch.on::after { left: 32px; }
  #parentArea input { min-height: 48px; }
  .modal { width: min(640px, calc(100vw - 64px)); max-width: 640px; max-height: calc(100dvh - 64px); padding: 28px; border-radius: 26px; }
  .modal h3 { font-size: 26px; }
  .modal p { font-size: 17px; }
  .modal .tiny { font-size: 14px; }
  .modal input { min-height: 52px; font-size: 18px; }
  .sg-grid { gap: 24px; }
  .sg-card { border-radius: 24px; }
  .sg-card-copy { padding: 20px; }
  .sg-card-copy strong { font-size: 26px; }
  .sg-card-copy > span { font-size: 16px; }
  .sg-card-copy small { font-size: 14px; }
  .sg-heading p { font-size: 18px; }
  .sg-controls { padding: 16px 24px max(20px, env(safe-area-inset-bottom)); }
  .sg-progress { gap: 20px; }
  .sg-progress input { min-height: 40px; }
  .sg-progress output { font-size: 14px; }
  .sg-buttons { gap: 14px 24px; margin-top: 10px; }
  .sg-play, .sg-tool { min-height: 52px; padding: 12px 18px; font-size: 17px; }
  .sg-play { min-width: 140px; }
  .sg-adjacent { min-width: 112px; }
}
.is-fs[data-compact-landscape="true"] .sg-controls { padding: 6px 12px 10px; }
.is-fs[data-compact-landscape="true"] .sg-progress input { min-height: 28px; }
.is-fs[data-compact-landscape="true"] .sg-buttons { gap: 8px; margin-top: 4px; }
.is-fs[data-compact-landscape="true"] .sg-play, .is-fs[data-compact-landscape="true"] .sg-tool { min-height: 44px; font-size: 14px; padding: 8px 10px; }
.is-fs[data-compact-landscape="true"] .sg-play { min-width: 108px; }
.is-fs[data-compact-landscape="true"] .sg-adjacent { min-width: 88px; }

.co-task-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: #81715e; }
.co-stat { gap: 5px; min-height: 38px; }
.co-stat svg { width: 20px; height: 20px; }
.co-stat span { font-size: 12px; }
.co-home { width: 100%; display: flex; align-items: center; text-align: left; gap: 18px; padding: 16px; margin: 20px 0; border-color: #d6c9aa; background: #f5edda; }
.co-home > span:nth-child(2) { flex: 1; min-width: 0; }
.co-home small { font-size: 13px; color: #887354; }
.co-home strong { display: block; font-size: 21px; font-weight: 500; line-height: 1.6; margin: 5px 0; }
.co-home em { font-size: 13px; font-style: normal; color: #887354; }
.co-home-art { width: 88px; flex-shrink: 0; border-radius: 18px; overflow: hidden; }
.co-figure { display: block; width: 100%; aspect-ratio: 1; background-repeat: no-repeat; background-size: var(--sheet-size); background-position: var(--sheet-position); }
.co-pups { background-image: url('../assets/collectibles/pups-atlas.png'); }
.co-teenie { background-image: url('../assets/collectibles/teenie-atlas.png'); }
.co-magic { background-image: url('../assets/collectibles/magic-atlas.png'); }
.co-dream { background-image: url('../assets/collectibles/dream-atlas.png'); }
.co-crown { background-image: url('../assets/collectibles/crown-atlas.png'); }
.co-page { padding: 24px 0 8px; }
.co-heading h1 { font-size: 34px; margin: 10px 0; }
.co-heading p { font-size: 15px; color: #80715f; }
.co-kicker { font-size: 13px; color: #907d5f; letter-spacing: .1em; }
.co-box-panel { display: flex; align-items: center; gap: 16px; margin: 24px 0 16px; padding: 22px; background: #f1e8d2; border: 1px solid #decba4; border-radius: 22px; }
.co-box-icon { display: grid; place-items: center; width: 54px; height: 62px; color: #8e6939; flex-shrink: 0; }
.co-box-icon svg { width: 48px; height: 48px; }
.co-box-panel > div:nth-child(2) { flex: 1; }
.co-box-panel h2 { font-size: 20px; font-weight: 500; margin: 0 0 7px; }
.co-box-panel p { font-size: 14px; color: #857156; margin: 0; line-height: 1.6; }
.co-box-panel .btn { white-space: nowrap; font-size: 15px; min-height: 46px; }
.co-box-panel button:disabled { background: #d0c5af; color: #61584b; opacity: .8; }
.co-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 12px; font-size: 15px; color: #806137; }
.co-toolbar button { min-height: 44px; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.co-filters { display: flex; gap: 8px; margin: 8px 0 22px; flex-wrap: wrap; }
.co-filters button { padding: 10px 14px; border: 1px solid #e1d6c1; border-radius: 99px; min-height: 44px; font-size: 14px; color: #76644d; background: #fffaf0; }
.co-filters button[aria-pressed=true] { background: #536b56; color: #fff; border-color: #536b56; }
.co-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
.co-tier-N { --rarity: #7c8d80; --rarity-soft: #edf0e8; }
.co-tier-R { --rarity: #6c8da5; --rarity-soft: #e6eef4; }
.co-tier-SR { --rarity: #9472a0; --rarity-soft: #f0e8f2; }
.co-tier-SSR { --rarity: #b48a30; --rarity-soft: #f8ecc5; }
.co-card { overflow: hidden; min-width: 0; border-radius: 20px; border: 2px solid var(--rarity); background: #fffaf0; display: flex; flex-direction: column; text-align: center; position: relative; padding: 8px 8px 14px; }
.co-card .co-figure { border-radius: 12px; margin-bottom: 12px; }
.co-rarity { display: inline-block; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 8px; background: var(--rarity-soft); color: color-mix(in srgb, var(--rarity) 70%, #161813); }
.co-card .co-rarity { align-self: flex-start; margin: 0 0 8px; }
.co-card strong { font-size: 19px; font-weight: 500; line-height: 1.5; }
.co-edition { font-size: 13px; color: #81705a; margin: 3px 0 10px; }
.co-count { font-size: 12px; color: #81705a; }
.co-owned .co-count { color: #47724e; }
.co-locked .co-figure { filter: grayscale(.35); opacity: .7; }
.co-card:hover { border-color: #615342; }
.co-card:focus-visible, .co-filters button:focus-visible { outline: 3px solid #a25927; outline-offset: 3px; }
.co-tier-SSR.co-owned { box-shadow: 0 0 0 3px #e9cd7f40; }
.co-footer, .co-empty { font-size: 14px; color: #88765f; text-align: center; padding: 22px 0 0; }
.modal.collection-modal { max-width: 430px; padding: 24px; }
.modal.collection-modal, .modal.collection-rules-modal { max-height: calc(100dvh - 40px); overflow: auto; overscroll-behavior: contain; }
.co-offer h2 { font-size: 26px; line-height: 1.5; margin: 12px 0; }
.co-offer .co-offer-gift { width: 150px; height: 150px; display: grid; place-items: center; margin: 12px auto; }
.co-offer-gift svg { width: 48px; height: 48px; }
.co-offer p { font-size: 17px; }
.co-offer .co-offer-count { font-size: 14px; margin-top: 12px; }
.co-offer .co-offer-note { font-size: 13px; margin-top: 16px; }
.co-offer .btn { font-size: 16px; min-height: 48px; padding: 0 15px; }
.co-opportunities { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.co-opportunities button { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 14px; min-height: 48px; border: 1px solid #d9c9a8; border-radius: 14px; background: #fffaf0; font-size: 16px; }
.co-opportunities span { font-size: 13px; color: #81705a; }
.co-unbox { text-align: center; }
.co-reveal { width: 230px; max-width: 100%; margin: 14px auto 20px; border-radius: 24px; overflow: hidden; border: 4px solid var(--rarity); box-shadow: 0 12px 35px #604d2526; animation: co-appear .55s ease both; }
.co-unbox h2 { font-size: 28px; font-weight: 500; margin: 10px 0 5px; }
.co-unbox p { font-size: 15px; color: #796c59; }
.co-unbox .co-reveal-note { font-size: 15px; line-height: 1.8; margin: 14px 0 20px; }
.co-unbox .btn { min-height: 46px; font-size: 15px; }
.co-rules h2 { font-size: 23px; line-height: 1.5; }
.co-rules p, .co-rules li { font-size: 15px; line-height: 1.8; }
.co-rules ul { padding-left: 22px; }
.co-rules li { margin: 9px 0; }
.co-rule-note { color: #80715f; }
@keyframes co-appear { from { opacity: .2; transform: scale(.9) translateY(8px); } to { opacity: 1; transform: none; } }

body.challenge-active #app { visibility: hidden; }
.modal.challenge-modal { max-width: 640px; width: 100%; max-height: calc(100dvh - 40px); overflow: auto; padding: 24px 30px 20px; text-align: center; }
.ch-head { display: flex; align-items: center; justify-content: space-between; }
.ch-label { font-size: 14px; color: #89795f; }
.ch-close { width: 44px; height: 44px; display: grid; place-items: center; background: #f0e9da; border-radius: 50%; }
.challenge-modal h2 { font-size: 32px; line-height: 1.5; margin: 5px 0 18px; }
.ch-teacher { width: 90px; height: 90px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; background: #e5ecdd; border: 8px solid #f4f5eb; color: #6d8866; }
.ch-teacher span { font-size: 42px; }
.ch-dialog { font-size: 21px !important; line-height: 1.8 !important; margin: 14px 0 !important; color: #453c30 !important; min-height: 70px; }
.ch-meter { --voice: 0; height: 40px; display: flex; gap: 6px; justify-content: center; align-items: center; margin: 4px 0 10px; }
.ch-meter i { width: 7px; height: calc(9px + var(--voice) * 28px); border-radius: 6px; background: #7c9b72; transition: height .1s; }
.ch-meter i:nth-child(2n) { height: calc(14px + var(--voice) * 20px); }
.ch-state { font-size: 15px !important; color: #82735c !important; }
.ch-clock { font-size: 13px; color: #82735c; margin: 12px 0; font-variant-numeric: tabular-nums; }
.ch-clock b { font-weight: 400; }
.ch-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 12px; }
.ch-actions .btn { min-height: 48px; font-size: 17px; }
.ch-privacy { font-size: 12px !important; color: #8c7b64 !important; line-height: 1.7 !important; margin: 18px 0 0 !important; }
.ch-issues { text-align: left; }
.ch-issues > div { padding: 14px; background: #f4eddf; border-radius: 14px; margin: 10px 0; }
.ch-issues b { font-size: 14px; color: #96663b; }
.ch-issues p { font-size: 16px; line-height: 1.7; margin: 5px 0; }
.ch-issues span { display: block; font-size: 21px; line-height: 1.6; color: #536d50; }
.ch-note { font-size: 14px !important; text-align: center; color: #81715f; }
.ch-passed .ch-teacher { background: #e4edd5; border-color: #f4efdc; color: #59824c; }
.challenge-modal [hidden] { display: none !important; }
@media (max-width: 600px) {
  .co-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .co-card { border-radius: 16px; }
  .co-card strong { font-size: 18px; }
  .co-filters { gap: 6px; }
  .co-filters button { padding: 9px 11px; font-size: 13px; }
  .co-box-panel { display: grid; grid-template-columns: 64px minmax(0, 1fr); padding: 18px; gap: 12px; }
  .co-box-panel .btn { grid-column: 1 / -1; width: 100%; }
  .co-home { padding: 12px; gap: 12px; }
  .co-home-art { width: 68px; border-radius: 14px; }
  .co-home strong { font-size: 18px; }
  .co-home small, .co-home em { font-size: 12px; }
  .modal.challenge-modal { padding: 18px; }
  .ch-dialog { font-size: 19px !important; }
  .ch-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .co-reveal { animation: none; } .ch-meter i { transition: none; } }

/* Poem blind boxes: a compact tablet shelf, with one durable place per poem. */
body.is-home .topbar { min-height: 72px; padding-top: 12px; padding-bottom: 12px; }
.brand-name { letter-spacing: .04em; }
.home-view .today { padding: 16px 18px; margin: 4px 0 16px; }
.home-view .today-title { font-size: 20px; }
.home-view .task-row { min-height: 74px; margin-top: 12px; padding: 12px; gap: 12px; }
.home-view .task-ico { width: 42px; height: 42px; }
.home-view .task-name { font-size: 19px; }
.home-view .task-desc { font-size: 14px; margin-top: 3px; }
.home-view .task-go { min-height: 46px; padding: 0 20px; font-size: 16px; }
.home-view .sec-head { margin: 20px 2px 10px; }
.home-view .poem-list { margin-top: 8px; gap: 12px; }
.co-garden { padding: 18px; margin: 0; background: #fffdf8; border-color: #e6dce4; }
.co-garden-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.co-garden-head h2 { font-size: 23px; font-weight: 600; margin: 0; }
.co-garden-head p { margin: 4px 0 0; font-size: 13px; color: #887580; }
.co-cabinet-link { display: flex; align-items: center; gap: 5px; min-height: 44px; font-size: 14px; color: #865971; }
.co-cabinet-link span { font-size: 12px; color: #887580; }
.co-cabinet-link svg { width: 16px; height: 16px; }
.co-poem-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 6px; }
.co-poem-slot { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 4px 2px 7px; border: 1px solid #e6efe5; border-radius: 16px; background: #f5f9f1; }
.co-poem-slot.is-opened { background: #fcf3ed; border-color: #f0e7df; }
.co-poem-slot.is-ready { border-color: #9dc6b2; background: #edf8f0; }
.co-poem-slot:hover { background: #fffef7; border-color: #bad5c4; }
.co-poem-slot strong { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; font-size: 14px; line-height: 22px; padding: 0 3px; }
.co-slot-count { font-size: 12px; color: #887580; line-height: 18px; }
.is-ready .co-slot-count { color: #487e68; font-weight: 600; }
.co-stack { display: block; position: relative; width: 100%; height: 104px; }
.co-mini { position: absolute; left: 50%; top: 9px; margin-left: -35px; width: 70px; display: block; overflow: hidden; border: 2px solid #fff9f7; background: #fff9f7; border-radius: 9px; box-shadow: 0 2px 6px #5c394c30; transform: translateX(calc((var(--stack-index) - (var(--stack-count) - 1) / 2) * 10px)) rotate(calc((var(--stack-index) - (var(--stack-count) - 1) / 2) * 7deg)); }
.co-mini > .co-mini-rank { display: block; font-size: 12px; line-height: 19px; text-align: center; background: var(--rarity-soft); color: var(--rarity); }
.co-poem-grid[data-expanded=false] .co-poem-slot:nth-child(n+19) { display: none; }
.co-expand { width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; border-top: 1px solid #eee5ec; color: #85687a; font-size: 14px; }
.co-expand span { font-size: 20px; }
.co-poem-slot:focus-visible, .co-expand:focus-visible, .co-cabinet-link:focus-visible { outline: 3px solid #a77693; outline-offset: 3px; }
.co-mystery { display: grid; place-items: center; position: relative; isolation: isolate; width: 100%; aspect-ratio: 1; overflow: visible; }
.co-mystery-art { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s; }
.co-mystery-halo { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(ellipse, #fffef4 10%, #e5f3e880 48%, transparent 72%); }
.co-mystery-light { position: absolute; z-index: 2; inset: 16%; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at 63% 42%, #fff9c2b3, transparent 16%); opacity: 0; transition: opacity .4s; mix-blend-mode: screen; }
.co-stack > .co-mystery { width: 88px; max-width: 100%; height: 100px; margin: 0 auto; background: transparent; }
.co-page { padding: 12px 0 8px; }
.co-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.co-heading h1 { font-size: 30px; margin: 4px 0; }
.co-heading p { margin: 0; white-space: nowrap; font-size: 14px; }
.co-levels { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.co-level { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 16px; background: var(--rarity-soft); color: var(--rarity); }
.co-level > span { display: grid; place-items: center; height: 32px; font-size: 32px; line-height: 1; }
.co-level svg { width: 32px; height: 32px; }
.co-level strong { font-size: 16px; font-weight: 600; }
.co-level small { font-size: 12px; color: #7f6c77; }
.co-tier-N { --rarity: #9e6f8b; --rarity-soft: #f4e9ef; }
.co-tier-R { --rarity: #7e6baf; --rarity-soft: #eee9f7; }
.co-tier-SR { --rarity: #9c6594; --rarity-soft: #f5e5f2; }
.co-tier-SSR { --rarity: #9b7132; --rarity-soft: #f8edce; }
.co-box-panel { padding: 12px 16px; margin: 16px 0 10px; background: #f2f8ee; border-color: #dbe9d9; border-radius: 18px; }
.co-box-icon { width: 64px; height: 68px; }
.co-box-panel h2 { font-size: 18px; }
.co-box-panel p { color: #6b8271; }
.co-toolbar { padding-bottom: 2px; }
.co-filters { margin: 4px 0 14px; }
.co-filters button[aria-pressed=true] { background: #927087; border-color: #927087; }
.co-card { border-width: 1px; border-color: color-mix(in srgb, var(--rarity) 60%, white); background: #fffcf9; }
.co-card .co-mystery { margin-bottom: 12px; }
.co-locked { background: #fdf9fc; border-color: #e2d5e2; }
.co-locked strong { color: #8a6e86; }
.co-locked .co-edition { color: #93818e; }
.co-locked .co-count { color: #937b8e; }
.co-home { background: #f5edf3; border-color: #e0cfda; }
.co-home-art > .co-mystery { width: 100%; }
.co-earned-cards { display: flex; justify-content: center; gap: 8px; margin: 18px 0; }
.co-earned-cards .co-card { width: 30%; padding: 5px 5px 10px; border-radius: 14px; }
.co-earned-cards .co-card strong { font-size: 15px; }
.co-earned-cards .co-rarity { padding: 4px 5px; }
.co-earned-cards .co-edition, .co-earned-cards .co-count { display: none; }
.co-poem-detail { text-align: center; }
.co-poem-detail h2 { margin: 10px 0; font-size: 27px; line-height: 1.5; }
.co-poem-detail p { color: #8b7482; font-size: 14px; line-height: 1.7; }
.co-empty-box { width: 150px; margin: 12px auto; }
.modal.collection-poem-modal { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; }
@media (min-width: 600px) and (max-width: 719px) {
  .co-poem-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .co-poem-grid[data-expanded=false] .co-poem-slot:nth-child(n+13) { display: none; }
}
@media (max-width: 599px) {
  .brand-name { font-size: 20px; letter-spacing: 0; }
  .brand { gap: 6px; }
  .co-garden { padding: 14px 10px 6px; }
  .co-garden-head { padding: 0 3px; }
  .co-garden-head h2 { font-size: 21px; }
  .co-cabinet-link { font-size: 13px; gap: 2px; }
  .co-cabinet-link span { display: none; }
  .co-poem-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px 6px; }
  .co-poem-grid[data-expanded=false] .co-poem-slot:nth-child(n+10) { display: none; }
  .home-view .today { padding: 14px 12px; margin-top: 0; }
  .home-view .task-row { padding: 10px 8px; gap: 8px; }
  .home-view .task-name { font-size: 17px; }
  .home-view .task-ico { width: 34px; height: 38px; }
  .home-view .task-go { padding: 0 14px; }
  .co-heading { flex-wrap: wrap; margin-bottom: 14px; gap: 5px; }
  .co-heading h1 { font-size: 27px; }
  .co-levels { gap: 5px; }
  .co-level { border-radius: 12px; }
  .co-level strong { font-size: 14px; }
  .co-box-panel { padding: 14px; grid-template-columns: 64px minmax(0, 1fr); }
  .co-box-panel h2 { font-size: 17px; }
  .co-box-panel .btn { grid-column: 1 / -1; }
  .co-earned-cards .co-card strong { font-size: 14px; }
  .co-earned-cards .co-card .co-rarity { font-size: 12px; padding: 4px 2px; }
}
@media (max-width: 359px) {
  .brand-mark { width: 28px; }
  .brand-name { font-size: 19px; }
  .stats { gap: 4px; }
  .stat { padding: 6px; }
  .co-level small { letter-spacing: -.03em; }
}

/* Countable rank stars: satin rose, amethyst, rose gold, then jeweled gold. */
.co-stars { --star-size: 28px; display: inline-flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; line-height: 1; vertical-align: middle; }
.co-stars .co-star { display: block; width: var(--star-size); height: var(--star-size); flex: 0 0 var(--star-size); overflow: visible; }
.co-star-facets { opacity: .45; }
.co-star-glint { opacity: .9; }
.co-star-sheen { opacity: 0; transform: translateX(-20px); animation: co-foil-sweep 12s ease-in-out infinite; animation-delay: calc(var(--star-index) * .18s); }
.co-star-scintillation { opacity: .8; transform-origin: 25px 8px; animation: co-gem-glint 8s ease-in-out infinite; animation-delay: calc(var(--star-index) * .65s); }
.co-stars-N { filter: drop-shadow(0 1px 0 #9954751c); }
.co-stars-R { filter: drop-shadow(0 1px 1px #9470bf3d); }
.co-stars-SR { filter: drop-shadow(0 1px 1px #c47f8b50) drop-shadow(0 0 2px #f3b4d44d); }
.co-stars-SR .co-star-facets { opacity: .6; }
.co-stars-SR .co-star-sheen { animation-duration: 9s; }
.co-stars-SSR { filter: drop-shadow(0 1px 1px #aa702743) drop-shadow(0 0 3px #ffd86e80); }
.co-stars-SSR .co-star-facets { opacity: .75; }
.co-stars-SSR .co-star-outline { stroke-width: 1.15; }
.co-stars-SSR .co-star-sheen { animation-duration: 6.5s; }
.co-stars-SSR .co-star-scintillation { animation-duration: 5.5s; }
@keyframes co-foil-sweep { 0%, 68% { opacity: 0; transform: translateX(-20px); } 73% { opacity: .15; } 79% { opacity: .8; } 88%, 100% { opacity: 0; transform: translateX(42px); } }
@keyframes co-gem-glint { 0%, 55%, 100% { opacity: .45; transform: scale(.72); } 70% { opacity: 1; transform: scale(1.15); } 85% { opacity: .65; transform: scale(.9); } }
.co-rarity { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 8px; border-radius: 10px; }
.co-rarity-label { display: block; font-size: 12px; line-height: 16px; white-space: nowrap; }
.co-card .co-rarity { align-self: stretch; min-height: 52px; }
.co-mini > .co-mini-rank { display: flex; align-items: center; justify-content: center; height: 19px; }
.co-mini-rank .co-stars { --star-size: 13px; gap: 0; }
.co-level > .co-stars { --star-size: 26px; display: flex; height: 34px; gap: 2px; }
.co-unbox .co-rarity { min-width: 150px; padding: 8px 16px; gap: 5px; }
.co-unbox .co-stars { --star-size: 30px; gap: 4px; }
.co-unbox .co-rarity-label { font-size: 14px; line-height: 20px; }
.co-earned-cards .co-stars { --star-size: 13px; gap: 0; }
.co-earned-cards .co-card .co-rarity { min-height: 38px; gap: 2px; }
@media (max-width: 599px) {
  .co-level > .co-stars { --star-size: 16px; gap: 0; }
  .co-card .co-stars { --star-size: 22px; gap: 1px; }
  .co-earned-cards .co-card .co-stars { --star-size: 13px; gap: 0; }
}
@media (max-width: 359px) {
  .co-level > .co-stars { --star-size: 14px; }
  .co-card .co-stars { --star-size: 20px; }
  .co-earned-cards .co-card .co-stars { --star-size: 12px; }
}

/* The illustration, foil stars and lettering share one continuous card face. */
.co-card { display: block; padding: 0; border: 0; background: none; border-radius: 18px; text-align: center; overflow: visible; }
.co-card.co-tier-SSR.co-owned { box-shadow: none; }
.co-card-face { display: block; position: relative; isolation: isolate; container-type: inline-size; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid color-mix(in srgb, var(--rarity) 65%, #fff); border-radius: 18px; background: radial-gradient(ellipse at 40% 72%, #ffffff6b, transparent 65%), linear-gradient(var(--card-tone), var(--card-mist)); box-shadow: 0 4px 12px #714b6112, inset 0 0 0 2px #ffffff70; }
.co-card-face::after { content: ''; position: absolute; z-index: 3; inset: 6px; border: 1px solid #ffffffa8; border-radius: 12px; pointer-events: none; }
.co-card-face > .co-figure { position: absolute; inset: 0 2% auto; z-index: 0; width: 96%; height: auto; aspect-ratio: 1; border-radius: 0; margin: 0; mask-image: linear-gradient(#000 74%, #000c 87%, transparent 100%); }
.co-card-face .co-card-lettering { position: absolute; z-index: 2; inset: auto 0 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 9px clamp(10px, 5cqw, 16px); color: var(--card-ink); }
.co-card-face .co-stars { --star-size: clamp(22px, 14cqw, 40px); gap: 2px; background: none; padding: 0; }
.co-card-face .co-stars-N { filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 1px 1px #ae668b30); }
.co-card-face .co-stars-R { filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 0 2px #a479db70); }
.co-card-face .co-stars-SR { filter: drop-shadow(0 1px 0 #fff9) drop-shadow(0 0 3px #f2bc8e90); }
.co-card-face .co-stars-SSR { filter: drop-shadow(0 1px 0 #fffa) drop-shadow(0 0 4px #ffcf64b3); }
.co-card-face .co-card-name { display: block; margin: 0; padding: 0; color: var(--card-ink); font-family: var(--font, 'Kaiti SC', 'STKaiti', serif); font-size: clamp(16px, 9cqw, 27px); font-weight: 600; letter-spacing: .08em; line-height: 1.35; text-shadow: 0 1px 0 #fff9; }
.co-card-face .co-edition { display: block; margin: 0; color: var(--card-ink); opacity: .8; font-size: clamp(12px, 5.8cqw, 14px); line-height: 1.5; letter-spacing: .08em; }
.co-card-face .co-count { position: absolute; top: 12px; right: 13px; z-index: 2; color: var(--card-ink); font-size: 12px; text-shadow: 0 1px 3px #fff; }
.co-card-engraving { position: absolute; z-index: 2; inset: 8px; border: 1px solid color-mix(in srgb, var(--rarity) 32%, transparent); border-radius: 11px; pointer-events: none; }
.co-card-engraving::before, .co-card-engraving::after { content: ''; position: absolute; width: 5px; height: 5px; top: -3px; left: calc(50% - 3px); border: 1px solid var(--rarity); background: var(--card-tone); transform: rotate(45deg); }
.co-card-engraving::after { top: auto; bottom: -3px; }
.co-tier-N > .co-card-engraving { display: none; }
.co-card-face.co-tier-SR { border-color: #c59485; }
.co-card-face.co-tier-SR::after { border-color: #fff0c5b3; }
.co-card-face.co-tier-SSR { border-color: #b88a43; box-shadow: 0 4px 14px #b88a4326, inset 0 0 0 2px #ffefbb; }
.co-card-face.co-tier-SSR::after { border-color: #fff3c1; }
.co-tier-SSR > .co-card-engraving { border-color: #ba94556b; }
.co-tier-SSR > .co-card-engraving::before, .co-tier-SSR > .co-card-engraving::after { width: 7px; height: 7px; left: calc(50% - 4px); top: -4px; background: #f8df9b; border-color: #b38a43; }
.co-tier-SSR > .co-card-engraving::after { top: auto; bottom: -4px; }
.co-card-face.is-mystery { border-color: color-mix(in srgb, var(--card-ink) 30%, #fff); background: radial-gradient(ellipse at 50% 35%, #fffffff0 6%, transparent 60%), linear-gradient(150deg, var(--card-tone), var(--card-mist)); box-shadow: 0 4px 12px #61796a0f, inset 0 0 0 2px #ffffffb3; }
.co-card-face.is-mystery::after { border-color: #fff; }
.co-card-face.is-mystery .co-card-engraving { border-color: color-mix(in srgb, var(--card-ink) 20%, transparent); }
.co-card-face.is-mystery .co-card-engraving::before, .co-card-face.is-mystery .co-card-engraving::after { display: none; }
.co-card-face > .co-mystery { position: absolute; inset: 12% 10% auto; width: 80%; aspect-ratio: 1; border-radius: 0; margin: 0; }
.co-mystery-seal { position: absolute; z-index: 2; inset: 7% 0 auto; color: var(--card-ink); font-size: 12px; line-height: 1.5; text-align: center; letter-spacing: .18em; opacity: .8; pointer-events: none; }
.co-card-face.is-mystery .co-stars { opacity: 1; }
.co-card .co-card-face:hover { box-shadow: 0 7px 18px #714b6126, inset 0 0 0 2px #ffffff70; }
@media (hover: hover) {
  .co-card:hover .co-mystery-art, .co-poem-slot:hover .co-mystery-art { transform: translateY(-4px) rotate(-3deg); }
  .co-card:hover .co-mystery-light, .co-poem-slot:hover .co-mystery-light { opacity: .8; }
}
.co-card:focus-visible .co-mystery-art, .co-poem-slot:focus-visible .co-mystery-art { transform: translateY(-4px); }
.co-card:active .co-card-face, .co-poem-slot:active .co-stack { transform: scale(.975); }
.co-mini { border: 0; border-radius: 8px; background: none; box-shadow: 0 2px 5px #5c394c35; }
.co-mini > .co-card-face { border-radius: 8px; }
.co-mini .co-card-face::after { inset: 3px; border-radius: 5px; }
.co-mini .co-card-engraving { display: none; }
.co-mini .co-card-lettering { padding: 0 3px 4px; gap: 0; }
.co-mini .co-card-name { font-size: 12px; line-height: 1.25; letter-spacing: 0; }
.co-mini .co-card-face .co-stars { --star-size: 14px; gap: 0; }
.co-mini .co-star-sheen, .co-mini .co-star-scintillation, .co-level .co-star-sheen, .co-level .co-star-scintillation { animation: none; }
.co-mini .co-edition, .co-mini .co-count { display: none; }
.co-earned-cards .co-card { padding: 0; width: 31%; border-radius: 12px; }
.co-earned-cards .co-card-face { border-radius: 12px; }
.co-earned-cards .co-card .co-card-name { font-size: clamp(12px, 9cqw, 18px); letter-spacing: 0; }
.co-earned-cards .co-card-face .co-stars { --star-size: clamp(14px, 13cqw, 24px); gap: 0; }
.co-earned-cards .co-card-lettering { gap: 1px; padding: 0 3px 10px; }
.co-earned-cards .co-card-face .co-edition { display: none; }
.co-reveal { width: 270px; max-width: 100%; margin: 14px auto 18px; padding: 0; border: 0; border-radius: 20px; overflow: visible; box-shadow: none; }
.co-unbox .co-card-face .co-card-name { font-size: clamp(20px, 9cqw, 27px); margin: 0; }
.co-unbox .co-card-face .co-stars { --star-size: clamp(26px, 14cqw, 40px); gap: 3px; }
@container (max-width: 180px) {
  .co-card-face > .co-figure { inset: 0 7% auto; width: 86%; }
  .co-card-face > .co-mystery { inset: 3% 12% auto; width: 76%; }
  .co-mystery-seal { display: none; }
}
@media (max-width: 599px) {
  .co-card-face { border-radius: 14px; }
  .co-card-face::after { inset: 5px; border-radius: 9px; }
  .co-card-engraving { inset: 7px; border-radius: 7px; }
  .co-card-face .co-card-lettering { gap: 2px; padding-bottom: 9px; }
  .co-mini .co-card-lettering { gap: 0; padding-bottom: 4px; }
  .co-card-face .co-card-name { letter-spacing: .03em; }
  .co-card-face .co-edition { letter-spacing: 0; }
  .co-earned-cards .co-card-lettering { gap: 0; padding-bottom: 7px; }
  .co-earned-cards .co-card .co-card-name { font-size: 12px; }
  .co-reveal { width: min(250px, 62vw); }
}
@media (prefers-reduced-motion: reduce) {
  .co-star-sheen, .co-star-scintillation { animation: none; }
  .co-mystery-art, .co-mystery-light { transition: none; }
}

/* The complete cabinet lives in My, with a compact four-column shelf. */
.co-cabinet { margin-top:28px; scroll-margin-top:100px; }
.co-cabinet .co-heading { align-items:center; margin-bottom:14px; }
.co-cabinet .co-heading h2 { margin:0; font-size:24px; font-weight:600; }
.co-cabinet .co-heading p { font-size:13px; color:var(--ink-2); }
.co-cabinet .co-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px 12px; }
.co-cabinet .co-grid[data-expanded=false] > .co-card:nth-child(n+13) { display:none; }
.co-cabinet .co-card-face { border-radius:14px; }
.co-cabinet .co-card-face::after { inset:5px; border-radius:9px; }
.co-cabinet .co-card-engraving { inset:7px; border-radius:8px; }
.co-cabinet .co-card-lettering { gap:2px; padding:0 5px 9px; }
.co-cabinet .co-card-face .co-stars { --star-size:clamp(12px,14cqw,26px); gap:1px; }
.co-cabinet .co-card-face .co-card-name { font-size:clamp(12px,9cqw,18px); letter-spacing:0; }
.co-cabinet .co-card-face .co-edition { font-size:12px; letter-spacing:0; }
.co-cabinet .co-expand { margin-top:16px; min-height:48px; font-size:16px; }
@media(max-width:599px) {
  .co-cabinet { margin-top:22px; }
  .co-cabinet .co-heading { gap:6px; }
  .co-cabinet .co-heading h2 { font-size:21px; }
  .co-cabinet .co-heading p { font-size:12px; }
  .co-cabinet .co-grid { gap:10px 6px; }
  .co-cabinet .co-card-face { border-radius:10px; }
  .co-cabinet .co-card-face::after { inset:3px; border-radius:7px; }
  .co-cabinet .co-card-engraving { inset:5px; border-radius:6px; }
  .co-cabinet .co-card-lettering { gap:1px; padding:0 3px 5px; }
  .co-cabinet .co-card-face .co-edition { display:none; }
  .co-cabinet .co-card-face .co-count { top:5px; right:6px; }
  .co-cabinet .co-level > .co-stars { --star-size:13px; gap:0; }
  .co-cabinet .co-filters { gap:6px; }
  .co-cabinet .co-filters button { padding:8px 10px; }
}

.primary-library .lib-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.library-total,.library-count { font-size:14px; color:var(--ink-2); }
.library-grades { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin:18px 0 12px; }
.library-grades .filter { min-height:46px; font-size:15px; padding:8px 2px; }
.library-options { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.library-terms { display:flex; flex:0 1 auto; width:fit-content; gap:5px; padding:4px; background:#f0e9db; border-radius:14px; }
.library-terms .filter { width:auto; flex:0 0 auto; min-width:72px; min-height:40px; border:0; background:transparent; font-size:14px; }
.library-terms .filter.on { background:var(--paper-2); color:var(--ink); box-shadow:0 2px 5px #6b614b0a; }
#libStatus { max-width:130px; min-height:44px; border:1px solid var(--line); border-radius:12px; padding:0 12px; background:var(--paper-2); font:inherit; font-size:14px; color:var(--ink-2); }
.library-count { margin:14px 2px 0; }
.primary-library .poem-list { margin-top:12px; }
.brand { min-width:0; flex:1; }
.brand-copy { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px; min-width:0; }
.brand .brand-name { margin:0; line-height:1.4; overflow-wrap:anywhere; }
.brand-caption { font-size:14px; line-height:1.5; color:var(--ink-2); white-space:nowrap; }
.topbar .stats { flex:none; }
.home-view .today-head { align-items:flex-start; }
.home-view .today-title { min-width:0; line-height:1.5; letter-spacing:0; align-items:flex-start; }
.home-view .today-title svg { flex:none; margin-top:5px; }
.home-view .today-title span { overflow-wrap:anywhere; }
.home-view .today-date { flex:none; padding-top:4px; }
.primary-library.sg-library { padding:0; }
.song-card-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:48px; height:48px; display:grid; place-items:center; border-radius:50%; color:#426d58; background:#fffdf1d9; border:1px solid #ffffffb3; box-shadow:0 3px 16px #193c2d26; pointer-events:none; }
.song-card-play svg { width:24px; height:24px; }
.song-card:focus-visible { outline:2px solid #426d58; outline-offset:3px; }
.song-card:hover .song-card-play { background:#fffdf4f2; }
@media(min-width:600px) { .song-card-play { width:56px; height:56px; } .song-card-play svg { width:28px; height:28px; } }
@media(max-width:600px) { .brand-caption { width:100%; font-size:12px; } .home-view .today-head { flex-wrap:wrap; } .home-view .today-date { margin-left:auto; } }
.primary-thumb { display:flex; position:relative; width:100%; height:100%; min-height:100px; align-items:center; justify-content:center; overflow:hidden; background:var(--book-paper); color:var(--book-ink); }
.primary-thumb::before { content:''; position:absolute; inset:12% 7%; border:1px solid currentColor; opacity:.15; border-radius:2px; }
.primary-thumb-rule { position:absolute; top:0; bottom:0; left:13%; border-left:2px solid currentColor; opacity:.15; }
.primary-thumb-verse { font-family:PoemKai,'Kaiti SC',serif; font-size:clamp(16px,2.6vw,27px); letter-spacing:.08em; padding:12px; }
.primary-thumb-stamp { position:absolute; right:11%; bottom:17%; font-family:PoemKai,serif; color:#ad715e; border:1px solid currentColor; border-radius:3px; font-size:14px; padding:1px 3px; opacity:.7; }
.primary-sources { color:var(--ink-2); font-size:14px; line-height:1.8; margin:14px 20px; }
.primary-sources summary { cursor:pointer; min-height:44px; display:list-item; padding:9px 0; }
.primary-sources p { margin:8px 0 12px; }
.primary-sources small { display:block; font-size:12px; color:var(--ink-2); }
.primary-sources a { color:#476b5a; text-underline-offset:4px; }
.library-edition { margin:22px 2px 0; border-top:1px solid var(--line); padding-top:8px; }
.primary-poem { max-width:960px; margin:auto; }
.primary-poem .poem-top { color:var(--ink-2); font-size:14px; }
.primary-sheet { padding:32px 20px; text-align:center; background:linear-gradient(135deg,#fffdf8,#faf5e9); border:1px solid #eae1d0; border-radius:22px; box-shadow:0 10px 35px #6c523805; }
.primary-sheet-kicker { color:var(--c); font-size:13px; letter-spacing:.25em; margin-bottom:26px; }
.primary-sheet h1 { font-family:PoemKai,'Kaiti SC',serif; font-size:clamp(24px,3.8vw,34px); line-height:2.5; font-weight:400; margin:0 auto; max-width:100%; overflow-wrap:anywhere; }
.primary-sheet h1 ruby { margin:0 .04em; }
.primary-sheet h1 rt { font-family:system-ui,sans-serif; color:var(--ink-2); font-size:12px; font-weight:400; letter-spacing:0; }
.primary-sheet.no-py rt { display:none; }
.primary-by { font-size:15px; color:var(--ink-2); margin:8px 0 28px; }
.primary-verses { display:flex; flex-direction:column; gap:12px; margin:0 auto 24px; }
.primary-verse-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 18px; }
.primary-line { display:flex; align-items:flex-end; column-gap:3px; white-space:nowrap; border-radius:10px; padding:5px 2px; transition:background .2s; }
.primary-line.is-reading { background:var(--soft); color:var(--c); }
.primary-line .zi { font-family:PoemKai,'Kaiti SC',serif; font-size:clamp(24px,3.6vw,32px); }
.primary-line .py { font-size:12px; height:16px; color:var(--ink-2); }
.primary-line .punct { font-family:PoemKai,serif; font-size:26px; line-height:1; padding-bottom:2px; }
.primary-audio { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px; margin-top:26px; }
.primary-audio .btn { min-width:148px; }
.primary-audio .tool { min-height:44px; min-width:60px; font-size:14px; }
#textReadStatus { font-size:14px; color:var(--ink-2); }
.primary-excerpt-note { margin:24px 0 18px; color:var(--ink-2); font-size:14px; line-height:1.8; }
.primary-poem .reader-line .py,.primary-poem .poem-text .py { font-size:12px; height:16px; }
@media(max-width:600px) {
  .primary-library .lib-head { align-items:center; }
  .library-total { font-size:12px; }
  .library-grades { grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; margin-top:14px; }
  .library-grades .filter { font-size:14px; }
  .library-options { gap:8px; }
  .library-terms .filter { min-width:58px; padding:6px; }
  #libStatus { max-width:114px; padding:0 6px; }
  .primary-sheet { padding:24px 9px; border-radius:18px; }
  .primary-verse-row { flex-direction:column; align-items:center; gap:12px; }
  .primary-line { max-width:100%; }
  .primary-line .ch { padding-left:0; padding-right:0; }
  .primary-line .zi { font-size:25px; }
  .primary-line .py { font-size:12px; letter-spacing:-.25px; }
  .primary-thumb { min-height:0; }
  .primary-thumb-verse { writing-mode:vertical-rl; font-size:16px; padding:8px; letter-spacing:.03em; line-height:1.2; }
  .primary-thumb-stamp { right:9%; bottom:9%; font-size:12px; }
  .primary-poem .reader-line { padding:10px 4px; gap:5px; }
  .primary-poem .reader-line .zi { font-size:25px; }
  .primary-poem .reader-line .ch { padding-left:0; padding-right:0; }
}
@media(prefers-reduced-motion:reduce) { .primary-line { transition:none; } }

.film-stage.has-primary-film{isolation:isolate;background:#afbaa5;overflow:hidden}
.primary-film-svg{display:block;width:100%;height:100%;overflow:hidden}
.sg-film.has-primary-film{opacity:1}
.primary-film-svg [data-figure]{filter:drop-shadow(0 2px 2px #1f49351a)}
@media(prefers-reduced-motion:reduce){.primary-film-svg{transition:none}}

/* A quiet tablet-sized entrance, using the garden's existing paper and green. */
body.is-auth #topbar, body.is-auth #tabbar { display:none; }
body.is-auth #app { min-height:100dvh; padding:0; }
body.is-auth #view { padding:0; }
.account-welcome { width:min(100%,520px); margin:auto; padding:clamp(32px,8vh,90px) 24px 32px; }
.account-brand { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:30px; }
.account-brand img { width:64px; height:64px; border-radius:20px; }
.account-brand > span { font-size:28px; font-weight:650; letter-spacing:2px; color:var(--ink); }
.account-brand small { display:block; margin-top:5px; font-size:14px; font-weight:400; letter-spacing:1px; color:#7d7768; }
.account-card { background:#fffdf7; border:1px solid #e8e0ce; border-radius:28px; padding:28px 30px; box-shadow:0 12px 40px #5b694609; }
.account-tabs { display:flex; border-bottom:1px solid #ebe5d6; gap:30px; margin-bottom:28px; }
.account-tabs button { border:0; border-bottom:3px solid transparent; border-radius:0; padding:4px 3px 13px; background:transparent; font-size:18px; color:#807c71; cursor:pointer; }
.account-tabs [aria-pressed=true] { color:#426d58; border-bottom-color:#426d58; font-weight:650; }
.account-card label, .account-dialog label { display:block; font-size:15px; margin:19px 0 8px; font-weight:550; }
.account-card input, .account-dialog input { display:block; width:100%; min-width:0; min-height:50px; border:1px solid #dfddcf; border-radius:13px; padding:12px 14px; background:#fffefb; font:inherit; font-size:16px; color:#302e27; }
.account-card input::placeholder, .account-dialog input::placeholder { color:#8d897f; font-size:14px; }
.account-card input:focus, .account-dialog input:focus { outline:2px solid #a0bba4; outline-offset:2px; border-color:#6d9479; }
.account-password { position:relative; }
.account-password input { padding-right:67px; }
.account-password button { position:absolute; inset:3px 3px 3px auto; min-width:58px; border:0; background:transparent; color:#456c57; font-size:14px; cursor:pointer; }
.account-submit { width:100%; min-height:52px; border-radius:15px; font-size:18px; }
.account-error { margin:12px 0; font-size:14px; color:#a34d3e; line-height:1.6; min-height:0; }
.account-error:empty { margin:18px 0; }
.account-settings-card { padding:4px 16px; }
.account-settings .setting-row { width:100%; min-height:56px; text-align:left; font-size:16px; }
.account-settings .setting-row svg { width:20px; height:20px; color:var(--ink-3); }
.account-settings .setting-row:hover { color:#426d58; }
.account-dialog { text-align:left; }
.account-dialog h2 { font-size:23px; margin:0 0 14px; }
.account-dialog p { font-size:15px; line-height:1.8; }
.account-welcome button:focus-visible, .account-settings button:focus-visible { outline:2px solid #426d58; outline-offset:3px; }
.account-welcome button:disabled, .account-settings button:disabled { opacity:.6; cursor:wait; }
@media(min-width:600px) { .account-settings .setting-row { min-height:64px; font-size:17px; } }
@media(max-width:420px) {
  .account-welcome { padding:28px 18px; }
  .account-card { padding:24px 22px; border-radius:24px; }
  .account-brand > span { font-size:24px; }
  .account-brand img { width:54px; height:54px; }
}