/* =========================================================
 * 小星绘 · 儿童版样式（明亮、圆润、大按钮）
 * ======================================================= */
:root{
  --bg1:#fff6e9; --bg2:#ffe3f1; --bg3:#e3f6ff;
  --ink:#3a2e3f; --card:#ffffff; --shadow:0 10px 0 rgba(0,0,0,.08), 0 16px 30px rgba(0,0,0,.12);
  --r:26px;
}
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:"PingFang SC","Microsoft YaHei",-apple-system,"Comic Sans MS",sans-serif;
  color:var(--ink); min-height:100vh; overflow-x:hidden;
  background:linear-gradient(135deg,var(--bg1),var(--bg2) 50%,var(--bg3));
  background-attachment:fixed;
  user-select:none;
}

/* 漂浮的装饰泡泡 */
body::before{content:"☁️ 🌈 ⭐ 🎈 🌸 🦋"; position:fixed; inset:0; z-index:0;
  font-size:38px; opacity:.18; letter-spacing:120px; line-height:230px;
  white-space:pre-wrap; word-break:break-all; pointer-events:none}

/* ===== 欢迎页 ===== */
.welcome{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px;
  background:linear-gradient(135deg,#ffd6e8,#d6f0ff,#fff3d6); transition:.5s}
.welcome.hide{opacity:0; pointer-events:none; transform:scale(1.1)}
.welcome-card{background:var(--card); border-radius:40px; padding:36px 30px; text-align:center;
  box-shadow:var(--shadow); max-width:680px; width:100%}
.welcome-logo{font-size:64px; animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-12px)}}
.welcome-card h1{font-size:46px; margin:6px 0; color:#ff5d8f; letter-spacing:4px}
.welcome-sub{font-size:22px; color:#7a6b80; margin-bottom:24px}
.age-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media(max-width:560px){.age-grid{grid-template-columns:repeat(2,1fr)}}
.age-card{cursor:pointer; border:none; border-radius:28px; padding:22px 10px; background:var(--c);
  color:#fff; display:flex; flex-direction:column; align-items:center; gap:6px;
  box-shadow:0 8px 0 rgba(0,0,0,.12); transition:.12s; font-family:inherit}
.age-card:hover{transform:translateY(-4px)}
.age-card:active{transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,.12)}
.age-emoji{font-size:46px}
.age-num{font-size:22px; font-weight:800}
.age-name{font-size:15px; opacity:.95}
.welcome-tip{margin-top:22px; font-size:15px; color:#a596ad}

/* ===== 顶部条 ===== */
.kidbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px;
  padding:12px 18px; background:rgba(255,255,255,.75); backdrop-filter:blur(10px);
  border-bottom:3px solid #ffe0ef}
.kbrand{font-size:22px; font-weight:900; color:#ff5d8f; letter-spacing:2px}
.kbrand span{font-size:15px; color:#7a6b80; margin-left:6px; font-weight:600}
.kbar-right{margin-left:auto; display:flex; gap:10px}
.kbtn{cursor:pointer; border:none; background:#fff; border-radius:18px; width:54px; height:54px;
  font-size:26px; box-shadow:0 5px 0 rgba(0,0,0,.1); transition:.1s; font-family:inherit}
.kbtn:active{transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.1)}
.home-btn{background:#fff4cc}

/* ===== 视图切换 ===== */
.home,.studio,.gallery,.achv{display:none; position:relative; z-index:1}
.home.active,.gallery.active,.achv.active{display:block}
.studio.active{display:flex; flex-direction:column}
.home-title{text-align:center; font-size:30px; font-weight:900; margin:24px 16px; color:#5a4a60}

/* ===== 房间卡片 ===== */
.rooms{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1000px;
  margin:0 auto 40px; padding:0 20px}
@media(max-width:780px){.rooms{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.rooms{grid-template-columns:1fr}}
.room{position:relative; cursor:pointer; border:none; border-radius:var(--r); padding:30px 18px;
  background:var(--card); box-shadow:var(--shadow); display:flex; flex-direction:column;
  align-items:center; gap:8px; transition:.14s; font-family:inherit;
  border-bottom:8px solid var(--rc); animation:pop .4s both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.room:hover{transform:translateY(-6px) rotate(-1deg)}
.room:active{transform:translateY(2px)}
.room-emoji{font-size:60px; filter:drop-shadow(0 4px 4px rgba(0,0,0,.15))}
.room-title{font-size:26px; font-weight:900; color:var(--rc)}
.room-desc{font-size:15px; color:#8a7b90}
.rec{position:absolute; top:14px; right:14px; background:#ff5d8f; color:#fff; font-size:13px;
  padding:4px 12px; border-radius:14px; font-weight:800; box-shadow:0 3px 0 rgba(0,0,0,.12)}

/* ===== 工作室 ===== */
.studio{padding:14px; gap:12px; align-items:center}
.banner{width:100%; max-width:980px; background:#fff; border-radius:22px; padding:14px 18px;
  box-shadow:var(--shadow); font-size:20px; font-weight:700}
.banner.prompt,.banner.master{display:flex; align-items:center; gap:14px; color:#5a4a60;
  background:linear-gradient(120deg,#fff6cf,#ffe1ef)}
.prompt-icon{font-size:34px}
.prompt-text{flex:1; line-height:1.4}
.prompt-new{cursor:pointer; border:none; background:#ffca3a; color:#5a4a60; font-weight:800;
  font-size:16px; padding:10px 16px; border-radius:16px; box-shadow:0 4px 0 rgba(0,0,0,.12);
  font-family:inherit; white-space:nowrap}
.prompt-new:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.12)}
.banner-label{font-size:18px; color:#7a6b80; display:block; margin-bottom:8px}
.tmpl-row{display:flex; gap:10px; overflow-x:auto; padding-bottom:4px}
.tmpl{cursor:pointer; border:none; background:#f6f1ff; border-radius:18px; padding:10px 8px;
  min-width:84px; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:34px;
  box-shadow:0 4px 0 rgba(0,0,0,.08); font-family:inherit}
.tmpl span{font-size:14px; color:#7a6b80; font-weight:700}
.tmpl.on{background:#ffe0ef; outline:3px solid #ff8fab}
.tmpl:active{transform:translateY(2px)}

.studio-main{display:flex; gap:16px; align-items:flex-start; width:100%; max-width:980px;
  justify-content:center}
@media(max-width:760px){.studio-main{flex-direction:column; align-items:center}}

/* 参考名画 */
.reference{flex-direction:column; gap:8px; width:300px; flex-shrink:0;
  background:#fff; border-radius:22px; padding:12px; box-shadow:var(--shadow)}
.reference img{width:100%; border-radius:14px; display:block; min-height:120px; background:#f3eefa}
.ref-info{font-size:15px; color:#6a5b70; text-align:center; line-height:1.4}

/* 画布 */
.canvas-wrap{position:relative; flex:1; max-width:560px; width:100%}
#board{width:100%; aspect-ratio:1/1; background:#fff; border-radius:24px; display:block;
  box-shadow:var(--shadow); touch-action:none; cursor:crosshair; border:4px solid #fff}
.canvas-hint{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font-size:30px; font-weight:900; color:#ff8fab; text-align:center; transition:opacity .4s;
  text-shadow:0 2px 0 #fff}

/* 工具条 */
.toolbar{width:100%; max-width:980px; background:#fff; border-radius:24px; padding:14px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px}
.tool-colors{display:flex; flex-wrap:wrap; gap:8px; justify-content:center}
.sw{width:42px; height:42px; border-radius:50%; border:3px solid #fff; cursor:pointer;
  box-shadow:0 3px 6px rgba(0,0,0,.18); transition:.1s}
.sw:active{transform:scale(.9)}
.sw.on{outline:4px solid #ffca3a; transform:scale(1.12)}
.tool-group{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-items:center}
.tb{cursor:pointer; border:none; background:#f3eefa; border-radius:18px; min-width:56px; height:56px;
  font-size:26px; padding:0 12px; box-shadow:0 5px 0 rgba(0,0,0,.08); transition:.1s; font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:6px; color:#5a4a60; font-weight:800}
.tb:active{transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.08)}
.tb.on{background:#ffe0ef; outline:3px solid #ff8fab}
.tb.big{font-size:18px}
.tb.save{background:#c5f8d8; color:#1f8a4c; font-size:18px}
.sizedot{display:inline-block; width:18px; height:18px; background:#5a4a60; border-radius:50%}
.tool-stamps{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; border-top:2px dashed #eee; padding-top:10px}
.stamp-b{cursor:pointer; border:none; background:#fff7e6; border-radius:14px; width:50px; height:50px;
  font-size:28px; box-shadow:0 3px 0 rgba(0,0,0,.08); font-family:inherit}
.stamp-b.on{background:#ffe0ef; outline:3px solid #ff8fab}
.stamp-b:active{transform:translateY(2px)}

/* 背景选择 */
.tool-extra{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center;
  border-top:2px dashed #eee; padding-top:10px}
.extra-label{font-size:14px; color:#8a7b90; font-weight:700; margin-right:4px}
.bgb{cursor:pointer; border:none; background:#f3eefa; border-radius:14px; width:50px; height:50px;
  font-size:26px; box-shadow:0 3px 0 rgba(0,0,0,.08); font-family:inherit}
.bgb.on{background:#ffe0ef; outline:3px solid #ff8fab}
.bgb:active{transform:translateY(2px)}

/* ===== 我的徽章 / 成长档案 ===== */
.achv-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; max-width:760px;
  margin:0 auto 26px; padding:0 20px}
@media(max-width:560px){.achv-stats{grid-template-columns:repeat(2,1fr)}}
.astat{background:#fff; border-radius:20px; padding:18px 8px; text-align:center; box-shadow:var(--shadow)}
.astat-e{font-size:30px}
.astat-v{font-size:30px; font-weight:900; color:#ff5d8f; margin:2px 0}
.astat-l{font-size:14px; color:#8a7b90}
.badge-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px;
  max-width:900px; margin:0 auto 26px; padding:0 20px}
.badge{background:#fff; border-radius:20px; padding:18px 12px; text-align:center; box-shadow:var(--shadow);
  border-bottom:6px solid #ffd166; transition:.15s}
.badge.lock{filter:grayscale(1); opacity:.55; border-bottom-color:#ccc}
.badge.got:hover{transform:translateY(-4px) rotate(-2deg)}
.badge-emoji{font-size:46px}
.badge-name{font-size:17px; font-weight:900; color:#5a4a60; margin-top:6px}
.badge-desc{font-size:13px; color:#9a8ba0; margin-top:2px}
.parent-note{max-width:760px; margin:0 auto 50px; padding:22px 24px; background:#fff;
  border-radius:24px; box-shadow:var(--shadow)}
.pn-title{font-size:18px; font-weight:900; color:#5a4a60; margin-bottom:8px}
.parent-note p{font-size:16px; color:#6a5b70; line-height:1.7}
.fav-row{margin-top:12px; font-size:15px; color:#8a7b90; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.fav-sw{width:26px; height:26px; border-radius:50%; border:2px solid #fff; box-shadow:0 2px 5px rgba(0,0,0,.2)}

/* 徽章弹窗 */
.praise-card.badge{display:flex; flex-direction:column; align-items:center; gap:6px; font-size:22px; padding:30px 40px}
.badge-pop-emoji{font-size:64px; animation:bob 1s ease-in-out infinite}
.badge-pop-name{font-size:24px; color:#ff5d8f; font-weight:900}
.badge-pop-desc{font-size:15px; color:#9a8ba0}

/* ===== 我的作品 ===== */
.kid-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px;
  max-width:1000px; margin:0 auto 40px; padding:0 20px}
.kid-card{position:relative; background:#fff; border-radius:20px; padding:10px; box-shadow:var(--shadow)}
.kid-card img{width:100%; border-radius:14px; display:block; aspect-ratio:1/1; object-fit:cover;
  background:#f3eefa}
.kid-card figcaption{text-align:center; font-size:15px; font-weight:700; color:#7a6b80; margin-top:8px}
.kid-del{position:absolute; top:14px; right:14px; border:none; background:#fff; border-radius:12px;
  width:40px; height:40px; font-size:20px; cursor:pointer; box-shadow:0 3px 8px rgba(0,0,0,.2)}
.kid-empty{display:none; flex-direction:column; align-items:center; gap:14px; padding:70px 20px;
  text-align:center; color:#8a7b90; font-size:20px; font-weight:700}
.big-emoji{font-size:70px}

/* ===== 表扬弹层 ===== */
.praise{position:fixed; inset:0; z-index:80; display:grid; place-items:center; pointer-events:none;
  opacity:0; transition:.2s}
.praise.show{opacity:1}
.praise-card{background:#fff; color:#ff5d8f; font-size:40px; font-weight:900; padding:28px 44px;
  border-radius:30px; box-shadow:var(--shadow); transform:scale(.5); transition:.3s cubic-bezier(.2,1.6,.4,1)}
.praise.show .praise-card{transform:scale(1)}