/* 画画台阶 · 孩子优先样式：图大、字大、按钮大、好点 */
:root{
  --bg:#fff7ec; --card:#fffdf8; --ink:#33312e; --muted:#8a857a; --line:#efe6d6;
  --accent:#ff5a8a; --accent2:#ffd34d; --radius:20px;
  --shadow:0 6px 18px rgba(120,90,40,.10);
  --font:"Yuanti SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:18px; line-height:1.6;
  background-image:radial-gradient(circle at 12% 10%, #ffe9c722, transparent 40%),radial-gradient(circle at 88% 8%, #d6f0ff33, transparent 38%);
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1000px;margin:0 auto;padding:0 16px 60px}

/* 顶栏 */
.site-head{display:flex;align-items:center;justify-content:space-between;max-width:1000px;margin:0 auto;padding:14px 16px}
.brand{font-size:24px;font-weight:800;display:flex;align-items:center;letter-spacing:.5px}
.brand span{background:linear-gradient(90deg,#ff7eb3,#ff9a5a,#ffd34d);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-btn{background:#fff;border:2px solid var(--line);border-radius:999px;padding:8px 16px;font-size:17px;font-weight:700;box-shadow:var(--shadow)}
.home-btn:active{transform:translateY(1px)}

/* 首页 hero */
.hero{text-align:center;padding:12px 8px 8px}
.hero h1{font-size:30px;margin:.2em 0}
.hero .lead{color:#6f6a60;font-size:18px;margin:.2em auto;max-width:34em}
.hero b{color:var(--accent)}

/* 筛选 */
.filters{margin:14px 0 18px}
.frow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.levels{margin-bottom:8px}
.lvbtn{
  --c:#bbb; cursor:pointer; border:3px solid #fff; background:#fff;
  border-radius:18px; padding:10px 14px; min-width:96px; box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15;transition:transform .08s}
.lvbtn .e{font-size:26px}
.lvbtn .n{font-weight:800;font-size:17px}
.lvbtn .s{font-size:11px;color:#9a9488;max-width:9em}
.lvbtn:active{transform:translateY(1px)}
.lvbtn.active{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff);box-shadow:0 4px 0 var(--c),var(--shadow)}
.more{margin-top:12px;text-align:center}
.more>summary{cursor:pointer;color:#7a756a;font-weight:700;list-style:none}
.more>summary::-webkit-details-marker{display:none}
.chips{margin-top:10px}
.chip{cursor:pointer;border:2px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;font-size:15px;font-weight:600;box-shadow:var(--shadow)}
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 画廊 */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
@media(min-width:560px){.gallery{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:block;border:3px solid #fff;transition:transform .1s,box-shadow .1s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(120,90,40,.16)}
.card:active{transform:translateY(0)}
.cover{aspect-ratio:1/1;background:#fffdf8}
.cover svg,.draw-svg{width:100%;height:100%;display:block}
.card-meta{padding:8px 10px 12px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.card-meta .title{font-weight:800;font-size:17px}
.badge{--c:#888;font-size:13px;font-weight:800;color:#fff;background:var(--c);border-radius:999px;padding:3px 10px;line-height:1.5}
.empty{text-align:center;color:#9a9488;padding:30px}

/* ====== 单幅画 ====== */
.draw{max-width:680px;margin:0 auto}
.back{display:inline-block;margin:6px 0 4px;color:#7a756a;font-weight:700;font-size:16px}
.draw-title{font-size:30px;margin:.1em 0 .25em}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tag{background:#fff;border:2px solid var(--line);border-radius:999px;padding:3px 12px;font-size:14px;font-weight:600;color:#6f6a60}

/* 分步舞台 */
.stage-wrap{background:var(--card);border-radius:24px;box-shadow:var(--shadow);padding:14px;border:3px solid #fff}
.stage{aspect-ratio:1/1;background:#fffdf8;border-radius:18px;overflow:hidden}
.stage-svg-holder,.stage-svg-holder svg{width:100%;height:100%;display:block}
.stage-svg{width:100%;height:100%;display:block}
/* 已画：正常；当前这一笔：粉色光晕 + 弹入，告诉孩子“现在画这个” */
.stage-svg g.cur{animation:pop .45s cubic-bezier(.34,1.56,.64,1) both;transform-origin:center;filter:drop-shadow(0 0 1px var(--accent)) drop-shadow(0 0 6px var(--accent))}
@keyframes pop{from{transform:scale(.55);opacity:0}60%{transform:scale(1.06)}to{transform:scale(1);opacity:1}}
@media(prefers-reduced-motion:reduce){.stage-svg g.cur{animation:none}}

.say{display:flex;align-items:center;gap:10px;justify-content:center;margin:14px 4px 6px;min-height:2.4em}
#saytext{font-size:22px;font-weight:800;text-align:center}
.speak{flex:none;border:none;background:var(--accent2);width:46px;height:46px;border-radius:50%;font-size:22px;cursor:pointer;box-shadow:var(--shadow)}
.speak:active{transform:translateY(1px)}
.speak.on{animation:wobble .6s infinite}
@keyframes wobble{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

.dots{display:flex;gap:8px;justify-content:center;margin:6px 0 12px;flex-wrap:wrap}
.dot{width:13px;height:13px;border-radius:50%;background:#e7ddca;transition:background .2s,transform .2s}
.dot.on{background:var(--accent);transform:scale(1.18)}

.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ctrl{cursor:pointer;border:none;border-radius:16px;padding:16px 10px;font-size:19px;font-weight:800;background:#fff;box-shadow:0 3px 0 #e7ddca,var(--shadow);color:var(--ink)}
.ctrl:active{transform:translateY(2px);box-shadow:0 1px 0 #e7ddca}
.ctrl:disabled{opacity:.4;box-shadow:none;cursor:default}
.ctrl.big{grid-column:1/3;background:linear-gradient(180deg,#ff7eb3,#ff5a8a);color:#fff;box-shadow:0 4px 0 #d83c6e,var(--shadow);font-size:22px}
.ctrl.big:active{box-shadow:0 1px 0 #d83c6e}

/* 你自己的版本 */
.myversion{margin:20px 0;background:linear-gradient(180deg,#fff7d6,#ffeede);border:3px dashed #ffce5a;border-radius:22px;padding:16px 18px;text-align:center}
.myversion h2{margin:.1em 0;font-size:23px}
.myversion em{color:var(--accent);font-style:normal}
.myversion p{margin:.4em 0 0;font-size:18px;color:#6a6356}

.tools{color:#7a756a;font-size:16px;text-align:center;margin:14px 0}

.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.actbtn{cursor:pointer;border:2px solid var(--line);background:#fff;border-radius:16px;padding:12px 18px;font-size:17px;font-weight:800;box-shadow:var(--shadow)}
.actbtn:active{transform:translateY(1px)}

.dadtip{margin:16px auto 0;max-width:40em;background:#f3f0ea;border-radius:16px;padding:4px 16px}
.dadtip>summary{cursor:pointer;font-weight:700;color:#8a8478;padding:10px 0;list-style:none}
.dadtip>summary::-webkit-details-marker{display:none}
.dadtip p{margin:0 0 12px;color:#5f5a50;font-size:16px}

/* 视频 / 图序列 */
.video{position:relative;padding-top:62%;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.credit{color:#8a8478;font-size:15px;text-align:center;margin:10px 0}
.imgsteps{display:grid;gap:12px}
.imgsteps img{width:100%;border-radius:16px;box-shadow:var(--shadow)}
.steps{font-size:18px;line-height:2}

/* 页脚 */
.site-foot{text-align:center;color:#9a9488;font-size:14px;padding:30px 16px;border-top:1px solid var(--line);margin-top:30px}
.site-foot .ai{font-size:12px;opacity:.8}

/* 打印涂色页：只留黑白线稿，A4 友好 */
.print-sheet{display:none}
@media print{
  body{background:#fff}
  .site-head,.site-foot,.tags,.back,.controls,.dots,.say,.actions,.dadtip,.myversion,.tools,.stage-wrap,.video,.credit,.imgsteps,.draw-title{display:none!important}
  .print-sheet{display:block;text-align:center}
  .print-sheet svg{width:100%;max-width:680px;height:auto}
  .print-sheet svg *{fill:#fff!important;stroke:#000!important;stroke-width:3!important}
  .print-sheet svg rect[width="240"]{fill:#fff!important;stroke:#fff!important}
  .ps-title{font-size:20px;color:#000;margin-top:10px}
}

/* 投影模式：放大、隐藏次要，适合投到电视/投影一起画 */
body.tv .site-head,body.tv .site-foot,body.tv .actions,body.tv .dadtip,body.tv .tags,body.tv .back{display:none}
body.tv .draw{max-width:980px}
body.tv .stage-wrap{padding:22px}
body.tv #saytext{font-size:40px}
body.tv .speak{width:64px;height:64px;font-size:30px}
body.tv .ctrl{font-size:30px;padding:24px}
body.tv .ctrl.big{font-size:34px}
body.tv .dot{width:20px;height:20px}
body.tv .myversion{display:block}