/* 儿童版：更亮的颜色、更大的字、关卡地图、交互组件 */
:root { --primary: #ff8a3d; --primary-dark: #e2691c; --accent: #2bb3c0; --bg: #fff9f0; --line: #f3e3cf; --tip-bg: #e8f8f6; }
body { font-size: 17px; }
.top { background: #fff6ea; }
.star-badge { background: #fff1c2; border-radius: 20px; padding: 3px 10px; font-size: 14px; font-weight: 700; color: #a66a00; }
.song-settings { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; background: #fff7e3; border-radius: 12px; padding: 10px 14px; margin: 8px 0; font-size: 15px; }
.song-settings select { padding: 4px 8px; border: 2px solid var(--line); border-radius: 8px; background: #fff; font-size: 15px; }

/* 首页 */
.hero.kid h1 { font-size: 38px; }
.hero-stats { display: flex; gap: 22px; margin: 6px 0; font-size: 16px; }
.hero-stats b { color: var(--primary-dark); font-size: 20px; }
.levelmap { margin-bottom: 18px; }
.lv-part { margin-bottom: 14px; }
.lv-part h3 { margin: 0 0 8px; font-size: 18px; }
.lv-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.lv { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 12px 8px; color: var(--text); min-height: 118px; transition: transform .1s; }
.lv:hover { transform: translateY(-2px); text-decoration: none; border-color: var(--primary); }
.lv-no { width: 42px; height: 42px; border-radius: 50%; background: #ffe4cc; color: var(--primary-dark); font-weight: 800; font-size: 19px; display: inline-flex; align-items: center; justify-content: center; }
.lv.done .lv-no { background: #c8f0d5; color: #1e7f45; }
.lv.next { border-color: var(--primary); box-shadow: 0 0 0 4px #ffe4cc; }
.lv.next .lv-no { background: var(--primary); color: #fff; animation: bounce 1.2s infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.lv-title { font-size: 13.5px; line-height: 1.3; }
.lv-stars { font-size: 12px; color: #a66a00; min-height: 1em; }

/* 章节页 */
.say-inline, .say-btn { border: 0; background: #fff1c2; border-radius: 50%; width: 30px; height: 30px; cursor: pointer; font-size: 15px; vertical-align: middle; }
.say-btn { position: absolute; right: 8px; top: 8px; }
.say-inline.speaking, .say-btn.speaking, .say.speaking { background: var(--accent); color: #fff; }
.tasks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.task { display: flex; flex-direction: column; align-items: center; background: #fff; border: 2px solid var(--line); border-radius: 14px; padding: 10px 6px; color: var(--text); gap: 2px; }
.task:hover { text-decoration: none; border-color: var(--accent); }
.task.done { background: #e8f8ec; border-color: #7fd49a; }
.task.done .t-name::after { content: " ✓"; color: #1e7f45; }
.t-ico { font-size: 24px; } .t-name { font-weight: 700; } .t-sub { font-size: 12px; color: var(--muted); }
.step { position: relative; background: #fffdf8; border: 1px solid var(--line); border-left: 5px solid var(--primary); border-radius: 12px; padding: 12px 44px 10px 16px; margin: 12px 0; }
.step h4 { margin: 0 0 6px; font-size: 17px; }
.step p { margin: 4px 0; }
.step ul, .step ol { margin: 4px 0; padding-left: 22px; }
.stars { color: #f5a300; letter-spacing: 2px; font-size: 20px; }
.stars.small { font-size: 16px; }
.ex-rate { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; }
.tipcard { background: #fff7e3; }
.quiz-result { margin-top: 10px; font-weight: 700; }
.refs-card summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.chip { background: #fff; border: 2px solid var(--line); border-radius: 20px; padding: 5px 13px; cursor: pointer; font-size: 15px; }
.chip.on, .chip:hover { border-color: var(--primary); background: #ffe4cc; }
.chord-box { cursor: pointer; border-radius: 10px; transition: transform .1s; }
.chord-box:hover { background: #fff3e6; }
.chord-box.ring { transform: scale(1.08); background: #ffe4cc; }
.fb-hit { cursor: pointer; }
.fb-hit.hit circle { fill: #ff8a3d; }

.song-filter { display: flex; flex-direction: column; gap: 8px; }
.song-filter .frow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.song-filter input { flex: 1; min-width: 200px; padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; font-size: 16px; }
.flabel { font-size: 13px; color: var(--muted); width: 36px; flex: none; }
.fchips { display: flex; gap: 6px; flex-wrap: wrap; margin-right: 10px; }
.letters .chip { padding: 3px 8px; font-size: 13px; }
.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin: 16px 0; }
.pager .btn.on { background: var(--primary); color: #fff; }
.badge.ok { background: #e8f8ec; color: #1e7f45; }
.song-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

/* 问老师：一个按钮 + 弹窗 */
.chip.ask { background: var(--primary); color: #fff; border-color: var(--primary); font-weight: 700; }
.chip.wait { background: #fff1c2; color: #a66a00; border-color: #f5dc9a; cursor: default; }
.chat-dlg { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 220; display: flex; align-items: flex-end; justify-content: center; }
.chat-dlg-box { background: #fff; border-radius: 18px 18px 0 0; width: min(100%, 720px); max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 -4px 30px rgba(0,0,0,.2); }
.chat-dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-weight: 700; border-bottom: 1px solid var(--line); }
.chat-dlg-close { border: 0; background: #f3e3cf; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; font-size: 16px; }
.chat-dlg .chat { border: 0; border-radius: 0; overflow: auto; }
.chat-dlg .chat-log { max-height: 50vh; }
@media (min-width: 861px) { .chat-dlg { align-items: center; } .chat-dlg-box { border-radius: 18px; } }
.sheet-thumbs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 8px; padding: 4px 0; }
.sheet-thumbs img { height: 90px; border: 3px solid transparent; border-radius: 6px; cursor: pointer; background: #fff; }
.sheet-thumbs img.on { border-color: var(--primary); }
.sheet img { cursor: pointer; }

/* 问老师 */
.chat { background: #fffdf8; border: 2px solid var(--line); border-radius: 14px; padding: 10px; }
.chat-log { max-height: 380px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px; }
.bub { max-width: 85%; padding: 9px 13px; border-radius: 14px; font-size: 15.5px; line-height: 1.55; position: relative; }
.bub.user { align-self: flex-end; background: #ffe4cc; border-bottom-right-radius: 4px; }
.bub.assistant { align-self: flex-start; background: #e8f8f6; border-bottom-left-radius: 4px; padding-right: 40px; }
.bub.pending { color: var(--muted); font-style: italic; }
.bub .say-inline { position: absolute; right: 6px; top: 6px; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chat-quick .chip { font-size: 13.5px; }
.chat-in { display: flex; gap: 8px; }
.chat-in input { flex: 1; padding: 9px 12px; border: 2px solid var(--line); border-radius: 12px; font-size: 16px; }

/* 谱子解析面板 */
.p-explain { border-top: 2px dashed var(--line); background: #fffdf8; padding: 8px 12px 10px; }
.p-explain-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 6px; }
.p-explain-title { font-weight: 700; font-size: 14.5px; }
.p-explain-body { font-size: 15px; line-height: 1.6; min-height: 1.5em; border-radius: 10px; padding: 6px 10px; transition: background .3s; }
.p-explain-body.flash { background: #fff1c2; }
.p-explain-body ul { margin: 4px 0; padding-left: 20px; }
.p-explain-body li { margin: 3px 0; }
.ex-pos { margin-bottom: 4px; }
.ex-dur { margin-bottom: 4px; }
.ex-marks div { margin: 2px 0; }
.legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 14px; }
.lg-item b { display: block; color: var(--primary-dark); }
@media (max-width: 860px) { .p-explain-body { font-size: 14px; } .legend-grid { grid-template-columns: 1fr; } }

/* 曲目全面解析页 */
.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fact { background: #fff7e3; border-radius: 12px; padding: 6px 12px; display: flex; flex-direction: column; min-width: 80px; }
.fact span { font-size: 12px; color: var(--muted); } .fact b { font-size: 16px; }
.symtab { border-collapse: collapse; width: 100%; }
.symtab td { padding: 7px 10px; border-bottom: 1px dashed var(--line); font-size: 15.5px; }
.symtab .sym { font-weight: 800; color: var(--primary-dark); white-space: nowrap; width: 90px; font-family: Consolas, Menlo, monospace; }
.sec-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.bars-tag { background: #e8f8f6; color: #1b7f78; border-radius: 12px; padding: 3px 10px; font-size: 13px; white-space: nowrap; }
.hand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.hand { background: #fffdf8; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.hand-ico { font-weight: 700; display: block; margin-bottom: 2px; }
.hand p { margin: 0; font-size: 15.5px; }
.lyrics { background: #f3f0ff; border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 16px; }
.barnotes { padding-left: 18px; } .barnotes li { margin: 6px 0; } .barnotes b { color: var(--primary-dark); margin-right: 6px; }
@media (max-width: 860px) { .hand-grid { grid-template-columns: 1fr; } }

/* 音阶把位 */
.sm-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.sm-sel { padding: 6px 10px; border: 2px solid var(--line); border-radius: 10px; background: #fff; font-size: 15px; }
.sm-info { font-size: 15px; margin-bottom: 6px; line-height: 2; }
.sm-note { display: inline-flex; flex-direction: column; align-items: center; background: #e8f8f6; border-radius: 8px; padding: 2px 9px; margin: 0 3px; font-weight: 700; line-height: 1.2; }
.sm-note small { font-weight: 400; font-size: 11px; color: var(--muted); }
.sm-note.root { background: #ffd9d9; color: #c0262b; }

/* 可弹指板 */
.pg-info { font-size: 15px; margin-bottom: 6px; min-height: 1.5em; }
.pg-svg { width: 100%; max-width: 820px; height: auto; display: block; touch-action: none; user-select: none; }
.pg-wood { fill: #f7dfc0; stroke: #d9b48c; }
.pg-fret { stroke: #b89a7a; stroke-width: 2; } .pg-nut { stroke: #3a2a1a; stroke-width: 5; }
.pg-inlay { fill: #fff; opacity: .8; }
.pg-string { stroke: #6a5a4a; }
.pg-sname, .pg-fno { font-size: 11px; fill: var(--muted); }
.pg-dot { fill: #2bb3c0; opacity: 0; transition: opacity .15s; }
.pg-dot.marked { opacity: 1; fill: #ff8a3d; }
.pg-dot.marked.root { fill: #e0393e; }
.pg-nm { font-size: 9.5px; fill: #fff; font-weight: 700; opacity: 0; pointer-events: none; }
.pg-svg.show-names .pg-dot.name-only { opacity: .85; } .pg-svg.show-names .pg-dot.sharp { fill: #9aa8b0; }
.pg-svg.show-names .pg-nm, .pg-dot.marked + .pg-nm { opacity: 1; }
.pg-dot.hit { opacity: 1 !important; fill: #ff4d4d !important; }
.pg-cell { cursor: pointer; }
.pg-bar { margin-top: 6px; }

/* 吉他部位图 */
.gp-wrap { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.gp-svg { width: 100%; height: auto; touch-action: manipulation; }
.gp-body { fill: #e9b56f; stroke: #b07a35; stroke-width: 2; }
.gp-neck { fill: #c48a4a; stroke: #8c5a24; }
.gp-head { fill: #6b3f1d; }
.gp-fb { fill: #3b2414; }
.gp-hole { fill: #2a1a0e; stroke: #d9a35a; stroke-width: 4; }
.gp-bridge { fill: #2a1a0e; } .gp-saddle, .gp-nutp { fill: #fff6e0; }
.gp-fretl { stroke: #d8d0c0; stroke-width: 1.5; }
.gp-str { stroke: #e8e2d0; }
.gp-peg { fill: #f3f3f3; stroke: #777; }
.gp-hot { fill: transparent; stroke: transparent; cursor: pointer; }
.gp-hot.on, .gp-hot:hover { fill: rgba(43, 179, 192, .35); stroke: #2bb3c0; stroke-width: 2; }
.gp-card { background: #fffdf8; border: 2px solid var(--line); border-radius: 14px; padding: 14px 16px; min-height: 120px; }
.gp-title { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.gp-text { font-size: 16px; margin-bottom: 8px; }
.gp-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* 扫弦垫 */
.sp-bar { margin-bottom: 6px; } .sp-chords { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sp-pad { background: #f7dfc0; border-radius: 14px; padding: 18px 16px; display: flex; flex-direction: column; gap: 22px; touch-action: none; user-select: none; cursor: pointer; }
.sp-string { background: #5a4a3a; border-radius: 2px; position: relative; min-height: 2px; }
.sp-string span { position: absolute; left: -14px; top: -10px; font-size: 12px; color: var(--muted); }
.sp-string.hit { background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; }
.sp-string.mute { background: #bbb; }
.sp-auto { margin-top: 8px; display: flex; gap: 8px; }

/* 节奏游戏 */
.rg-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 8px; font-size: 15px; }
.rg-bpm { font-weight: 700; color: var(--primary-dark); }
.rg-stage { display: flex; justify-content: center; padding: 10px 0; }
.rg-ball { width: 150px; height: 150px; border-radius: 50%; border: 0; background: var(--primary); color: #fff; font-size: 26px; font-weight: 800; cursor: pointer; transition: transform .08s; box-shadow: 0 6px 0 #c95a16; touch-action: manipulation; }
.rg-ball.beat { transform: scale(1.12); }
.rg-ball.perfect { background: #2fbf6b; box-shadow: 0 6px 0 #1e7f45; }
.rg-ball.good { background: #f5c400; box-shadow: 0 6px 0 #b58f00; }
.rg-ball.miss { background: #d9534f; box-shadow: 0 6px 0 #a23c38; }
.rg-result { font-size: 16px; } .rg-praise { font-size: 16px; margin-top: 4px; }
.rg-score { text-align: center; }

/* 认音符游戏 */
.sg-stage { background: #fff; border: 2px solid var(--line); border-radius: 12px; min-height: 130px; margin-bottom: 10px; overflow: hidden; }
.sg-score { padding: 4px 10px; }

/* 听音游戏 */
.eg-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.eg-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.eg-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.eg-opts .opt { font-size: 17px; padding: 10px 18px; border-radius: 12px; border: 2px solid var(--line); }
.eg-msg { margin-top: 10px; font-size: 16px; min-height: 1.5em; }

@media (max-width: 860px) {
  .hero.kid h1 { font-size: 28px; }
  .tasks { grid-template-columns: repeat(2, 1fr); }
  .lv-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .gp-wrap { grid-template-columns: 1fr; gap: 10px; }
  .gp-svg { max-height: 340px; width: auto; margin: 0 auto; }
  .rg-ball { width: 130px; height: 130px; }
}