/* ============ 基础 ============ */
:root{
  --y:#ffb703;        /* 主黄 */
  --o:#fb8500;        /* 橙 */
  --b:#219ebc;        /* 蓝 */
  --db:#023047;       /* 深蓝，正文色 */
  --pink:#ff8fab;
  --green:#52b788;
  --cream:#fffbf0;
  --radius:28px;
  --fs-story:clamp(20px, 2.6vw, 27px);   /* 正文，可被 .big 放大 */
  --shadow:0 10px 30px rgba(2,48,71,.10);
}

*{box-sizing:border-box;margin:0;padding:0;}

html{-webkit-text-size-adjust:100%;}

body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background:linear-gradient(180deg,#a8dadc 0%,#e8f4f8 26%,var(--cream) 55%);
  color:var(--db);
  min-height:100vh;
  overflow-x:hidden;
  padding-bottom:50px;
  line-height:1.9;
}

/* ============ 天空装饰 ============ */
.sky{position:fixed;inset:0 0 auto 0;height:300px;pointer-events:none;z-index:0;overflow:hidden;}
.cloud{
  position:absolute;background:#fff;border-radius:100px;opacity:.75;
  filter:blur(.3px);
}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%;}
.c1{width:110px;height:34px;top:38px;left:-130px;animation:drift 38s linear infinite;}
.c1::before{width:52px;height:52px;top:-24px;left:18px;}
.c1::after{width:38px;height:38px;top:-16px;left:58px;}
.c2{width:86px;height:27px;top:104px;left:-110px;animation:drift 52s linear infinite 6s;}
.c2::before{width:40px;height:40px;top:-18px;left:14px;}
.c3{width:130px;height:38px;top:164px;left:-160px;animation:drift 66s linear infinite 14s;opacity:.5;}
.c3::before{width:60px;height:60px;top:-28px;left:24px;}
@keyframes drift{to{transform:translateX(calc(100vw + 300px));}}

.sun{
  position:absolute;top:20px;right:6vw;font-size:58px;
  animation:spin 22s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============ 头部 ============ */
.head{position:relative;z-index:1;text-align:center;padding:34px 16px 10px;}

.date-badge{
  display:inline-block;background:#fff;color:var(--o);
  padding:7px 22px;border-radius:999px;
  font-size:16px;font-weight:800;letter-spacing:.5px;
  box-shadow:var(--shadow);
}

.brand{
  margin-top:14px;
  font-size:clamp(32px,6.4vw,52px);
  font-weight:900;letter-spacing:2px;
  color:#fff;
  text-shadow:
    3px 3px 0 var(--o),
    -1px -1px 0 var(--o),
    1px -1px 0 var(--o),
    -1px 1px 0 var(--o),
    0 8px 20px rgba(251,133,0,.35);
}

/* ============ 卡片 ============ */
.wrap{position:relative;z-index:1;max-width:820px;margin:0 auto;padding:0 16px;}

.card{
  background:#fff;border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:34px 26px 30px;
  margin-top:20px;
  animation:pop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97);}to{opacity:1;transform:none;}}

.card-top{text-align:center;border-bottom:3px dashed #ffe8bd;padding-bottom:20px;}

.big-emoji{
  font-size:clamp(64px,13vw,96px);line-height:1;
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-11px) rotate(3deg);}}

.title{
  margin-top:10px;
  font-size:clamp(28px,5.6vw,42px);
  font-weight:900;letter-spacing:1.5px;color:var(--db);
}

.meta{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;}
.from{
  background:#e8f4f8;color:var(--b);
  padding:4px 14px;border-radius:999px;font-size:14px;font-weight:700;
}
.tags{display:inline-flex;gap:6px;flex-wrap:wrap;}
.tag{
  background:#fff4e0;color:var(--o);
  padding:4px 13px;border-radius:999px;font-size:14px;font-weight:700;
}

/* ============ 按钮 ============ */
.controls{
  display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
  margin:24px 0 6px;
}

.btn{
  border:none;cursor:pointer;
  font-family:inherit;font-size:19px;font-weight:800;
  padding:15px 30px;border-radius:999px;
  color:#fff;
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 6px 0 rgba(0,0,0,.14);
  transition:transform .12s, box-shadow .12s, filter .15s;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.btn .ico{font-size:23px;}
.btn:active{transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.14);}
.btn:hover{filter:brightness(1.06);}

.btn-play{background:linear-gradient(180deg,#5ec26a,var(--green));}
.btn-stop{background:linear-gradient(180deg,#ff9f9f,#e5646d);}
.btn-size{background:linear-gradient(180deg,#4cb8d4,var(--b));}

/* 朗读进行中：按钮呼吸 */
.btn-play.reading{animation:breathe 1.5s ease-in-out infinite;}
@keyframes breathe{0%,100%{filter:brightness(1);}50%{filter:brightness(1.22);}}

/* ============ 正文 ============ */
.story{margin-top:22px;}

.story p{
  font-size:var(--fs-story);
  line-height:2.15;
  margin:0 0 18px;
  padding:14px 18px;
  border-radius:16px;
  transition:background .25s, transform .25s;
}

/* 交错底色，方便小朋友跟读时不串行 */
.story p:nth-child(odd){background:#fffdf6;}
.story p:nth-child(even){background:#f7fcfd;}

/* 正在朗读的这一句 */
.story p.on{
  background:#fff2cc;
  transform:scale(1.014);
  box-shadow:0 0 0 3px var(--y) inset;
  font-weight:600;
}

/* 大字模式 */
body.big{--fs-story:clamp(27px,3.7vw,38px);}
body.big .story p{line-height:2.05;}

/* ============ 道理 & 提问 ============ */
.lesson{
  margin-top:26px;padding:22px 24px;
  background:linear-gradient(135deg,#fff8e1,#ffeec2);
  border-radius:20px;
  border-left:8px solid var(--y);
}
.lesson-head{font-size:17px;font-weight:900;color:var(--o);margin-bottom:8px;letter-spacing:1px;}
.lesson p{font-size:clamp(19px,2.3vw,24px);line-height:1.95;font-weight:600;}

.ask{margin-top:20px;padding:22px 24px;background:#f2fbf6;border-radius:20px;border-left:8px solid var(--green);}
.ask-head{font-size:17px;font-weight:900;color:#2d8659;margin-bottom:10px;letter-spacing:1px;}
.ask ul{list-style:none;}
.ask li{
  font-size:clamp(17px,2.1vw,21px);
  padding:9px 0 9px 30px;position:relative;line-height:1.85;
}
.ask li::before{
  content:"？";position:absolute;left:0;top:9px;
  width:22px;height:22px;background:var(--green);color:#fff;
  border-radius:50%;font-size:14px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}

/* ============ 翻页 ============ */
.pager{display:flex;gap:11px;justify-content:center;margin-top:24px;flex-wrap:wrap;}
.pg{
  border:none;cursor:pointer;font-family:inherit;
  font-size:17px;font-weight:800;
  padding:13px 24px;border-radius:999px;
  background:#fff;color:var(--b);
  box-shadow:var(--shadow);
  transition:transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.pg:active{transform:scale(.95);}
.pg-main{background:linear-gradient(180deg,var(--y),var(--o));color:#fff;}

/* ============ 目录 ============ */
.list-box{
  margin-top:26px;background:#fff;border-radius:22px;
  box-shadow:var(--shadow);overflow:hidden;
}
.list-box summary{
  cursor:pointer;padding:19px 24px;
  font-size:19px;font-weight:800;color:var(--db);
  list-style:none;
}
.list-box summary::-webkit-details-marker{display:none;}
.list-box summary::after{content:"▾";float:right;color:var(--o);}
.list-box[open] summary::after{content:"▴";}

.list{padding:0 20px 22px;margin:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:9px;}
.list li{
  padding:13px 15px;border-radius:14px;background:#fffbf0;
  cursor:pointer;font-size:17px;font-weight:700;
  display:flex;align-items:center;gap:9px;
  transition:background .15s, transform .12s;
}
.list li:hover{background:#fff2cc;transform:translateX(3px);}
.list li.cur{background:var(--y);color:#fff;}
.list li .n{font-size:14px;opacity:.6;min-width:22px;}

/* ============ 页脚 ============ */
.foot{text-align:center;margin-top:30px;font-size:15px;color:#7a9aa8;line-height:1.8;}

/* ============ 小屏 ============ */
@media (max-width:520px){
  .card{padding:26px 16px 24px;border-radius:22px;}
  .btn{font-size:17px;padding:14px 22px;width:100%;justify-content:center;}
  .controls{flex-direction:column;}
  .pg{flex:1;min-width:96px;font-size:15px;padding:12px 10px;}
  .story p{padding:12px 14px;}
  .lesson,.ask{padding:18px 17px;}
  .sun{font-size:44px;}
  .list{grid-template-columns:1fr 1fr;}
}

/* 减少动画偏好 */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* ============ 右上角小工具 ============ */
.tools{
  position:fixed;top:14px;right:14px;z-index:20;
  display:flex;gap:9px;
}
.tool{
  width:50px;height:50px;border:none;border-radius:50%;
  background:#fff;box-shadow:var(--shadow);
  font-size:24px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .14s, background .2s;
  -webkit-tap-highlight-color:transparent;
}
.tool:active{transform:scale(.9);}
.tool.on{background:linear-gradient(180deg,var(--y),var(--o));}
/* 音乐播放时转圈 */
.tool.on#btn-music{animation:spin 4s linear infinite;}

/* 悬浮「停一下」——朗读时出现在工具栏最左边，
   和 🎵 一排，上下拖动页面时随时能按到 */
.tool-stop{
  background:linear-gradient(180deg,#ff9f9f,#e5646d);
  color:#fff;font-size:22px;
  animation:stop-in .22s ease-out;
}
.tool-stop:active{transform:scale(.9);}
@keyframes stop-in{
  from{opacity:0;transform:scale(.5);}
  to{opacity:1;transform:scale(1);}
}
/* 朗读中轻微呼吸，提示"正在读，点我可停" */
@keyframes stop-pulse{
  0%,100%{box-shadow:var(--shadow);}
  50%{box-shadow:0 0 0 7px rgba(229,100,109,.22);}
}
.tool-stop{animation:stop-in .22s ease-out, stop-pulse 2s ease-in-out .22s infinite;}

/* 手机屏幕小，工具栏可能挤，缩一点保证一行放得下 */
@media (max-width:380px){
  .tools{gap:7px;}
  .tool{width:44px;height:44px;font-size:21px;}
}

/* ============ 星星奖励条 ============ */
.stars-bar{
  background:#fff;border-radius:22px;
  box-shadow:var(--shadow);
  padding:18px 22px;margin-top:20px;
}
.stars-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.stars-title{font-size:17px;font-weight:900;color:var(--db);letter-spacing:1px;}
.streak{
  font-size:15px;font-weight:800;color:var(--o);
  background:#fff4e0;padding:4px 14px;border-radius:999px;
}

.stars-row{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:7px;margin-top:14px;
}
.slot{
  aspect-ratio:1;border-radius:15px;
  background:#f4f7f8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;position:relative;
  transition:transform .2s, background .3s;
}
.slot .s{font-size:clamp(21px,4.6vw,30px);line-height:1;filter:grayscale(1) opacity(.28);}
.slot .d{font-size:11px;color:#93a9b3;font-weight:700;}

.slot.got{background:linear-gradient(160deg,#fff6d8,#ffe9a8);}
.slot.got .s{filter:none;animation:twinkle 2.4s ease-in-out infinite;}
.slot.got .d{color:var(--o);}

.slot.today{box-shadow:0 0 0 3px var(--b) inset;}
.slot.today .d{color:var(--b);}

/* 新得到的星星：蹦出来 */
.slot.pop .s{animation:starPop .7s cubic-bezier(.34,1.7,.64,1);}
@keyframes starPop{
  0%{transform:scale(0) rotate(-180deg);}
  60%{transform:scale(1.45) rotate(12deg);}
  100%{transform:scale(1) rotate(0);}
}
@keyframes twinkle{0%,100%{transform:scale(1);}50%{transform:scale(1.13);}}

/* 集满 7 颗：整条发光 */
.stars-bar.full{
  background:linear-gradient(135deg,#fffbe8,#fff2c9);
  box-shadow:0 0 0 4px var(--y), var(--shadow);
}

.stars-tip{margin-top:12px;font-size:14px;color:#7a9aa8;text-align:center;line-height:1.7;}

/* ============ 庆祝弹窗 ============ */
.celebrate{
  position:fixed;inset:0;z-index:50;
  background:rgba(2,48,71,.55);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:fadeIn .25s;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.cel-box{
  background:#fff;border-radius:28px;
  padding:34px 28px 30px;
  max-width:400px;width:100%;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  animation:pop .45s cubic-bezier(.34,1.56,.64,1);
}
.cel-star{font-size:76px;line-height:1;animation:starPop .8s cubic-bezier(.34,1.7,.64,1);}
.cel-title{font-size:30px;font-weight:900;color:var(--o);margin-top:8px;letter-spacing:2px;}
.cel-text{font-size:19px;margin-top:10px;line-height:1.85;font-weight:600;}
.cel-row{
  display:flex;justify-content:center;gap:5px;margin:18px 0 20px;
  font-size:27px;flex-wrap:wrap;
}
.cel-box .btn{width:100%;justify-content:center;}

/* 撒花 */
.confetti{
  position:fixed;top:-20px;z-index:60;font-size:22px;
  pointer-events:none;
  animation:fall linear forwards;
}
@keyframes fall{
  to{transform:translateY(105vh) rotate(540deg);opacity:0;}
}

/* ============ 主角设置 ============ */
.who-input{
  width:100%;margin-top:16px;padding:14px 18px;
  font-family:inherit;font-size:20px;font-weight:700;
  border:3px solid #ffe8bd;border-radius:16px;
  text-align:center;color:var(--db);
  outline:none;transition:border-color .2s;
}
.who-input:focus{border-color:var(--y);}

.who-check{
  display:flex;align-items:center;justify-content:center;gap:9px;
  margin-top:16px;font-size:17px;font-weight:700;cursor:pointer;
}
.who-check input{width:22px;height:22px;accent-color:var(--o);cursor:pointer;}

.who-btns{display:flex;gap:10px;margin-top:20px;}
.who-btns .btn{flex:1;justify-content:center;}

/* 正文里被替换的名字，高亮一下 */
.story .hero{
  color:var(--o);font-weight:900;
  background:#fff4e0;padding:1px 6px;border-radius:8px;
}

@media (max-width:520px){
  .stars-bar{padding:15px 15px;border-radius:18px;}
  .stars-row{gap:5px;}
  .slot{border-radius:12px;}
  .tool{width:44px;height:44px;font-size:21px;}
  .tools{top:10px;right:10px;}
  .cel-box{padding:28px 20px 24px;}
}

/* ============ 选声音 ============ */
.voice-list{
  margin-top:16px;max-height:270px;overflow-y:auto;
  display:flex;flex-direction:column;gap:8px;
  text-align:left;
  -webkit-overflow-scrolling:touch;
}
.vitem{
  display:flex;align-items:center;gap:11px;
  padding:13px 15px;border-radius:15px;
  background:#fffbf0;cursor:pointer;
  border:3px solid transparent;
  transition:background .16s, border-color .16s, transform .12s;
}
.vitem:active{transform:scale(.98);}
.vitem:hover{background:#fff4e0;}
.vitem.on{border-color:var(--y);background:#fff2cc;}

.vitem .vico{font-size:26px;flex-shrink:0;}
.vitem .vmain{flex:1;min-width:0;}
.vitem .vname{font-size:17px;font-weight:800;color:var(--db);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.vitem .vnote{font-size:13px;color:#7a9aa8;font-weight:600;margin-top:1px;}
.vitem .vplay{
  font-size:20px;flex-shrink:0;width:38px;height:38px;
  border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(2,48,71,.12);
}
.vitem.on .vplay{background:var(--y);}

/* 推荐徽标 */
.vitem .vbest{
  font-size:11px;font-weight:900;color:#fff;
  background:var(--green);padding:2px 8px;border-radius:999px;
  flex-shrink:0;
}

.voice-hint{
  margin-top:12px;font-size:14px;color:#7a9aa8;line-height:1.75;
}

/* ============ 装到桌面 引导条 ============ */
.install-tip{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:40;
  animation:slideUp .5s cubic-bezier(.34,1.4,.64,1);
}
@keyframes slideUp{from{transform:translateY(130%);opacity:0;}to{transform:none;opacity:1;}}

.itip-box{
  background:#fff;border-radius:22px;
  box-shadow:0 12px 40px rgba(2,48,71,.28);
  padding:16px 18px;
  display:flex;align-items:center;gap:14px;
  max-width:560px;margin:0 auto;
  position:relative;
  border:3px solid var(--y);
}

.itip-x{
  position:absolute;top:7px;right:11px;
  border:none;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:#b9ccd4;
  padding:2px 6px;
}
.itip-x:active{color:var(--o);}

.itip-ico{font-size:38px;flex-shrink:0;animation:bob 2.6s ease-in-out infinite;}
.itip-main{flex:1;min-width:0;padding-right:14px;}
.itip-title{font-size:17px;font-weight:900;color:var(--db);letter-spacing:.5px;}
.itip-steps{font-size:14px;color:#6b8e9c;line-height:1.7;margin-top:4px;}
.itip-steps b{color:var(--o);}

.install-tip .btn{padding:12px 22px;font-size:16px;flex-shrink:0;}

/* 独立 App 模式（已装到桌面）下的微调 */
@media (display-mode:standalone){
  /* 顶部留出刘海/状态栏空间 */
  .head{padding-top:max(34px, env(safe-area-inset-top));}
  .tools{top:max(14px, calc(env(safe-area-inset-top) + 4px));}
  body{padding-bottom:max(50px, env(safe-area-inset-bottom));}
  /* 装了就不用再提示 */
  .install-tip{display:none !important;}
}

@media (max-width:520px){
  .itip-box{padding:14px 15px;gap:11px;}
  .itip-ico{font-size:32px;}
  .itip-title{font-size:15px;}
  .itip-steps{font-size:13px;}
  .install-tip .btn{padding:11px 16px;font-size:15px;}
}

/* ============ 关键兜底 ============
   HTML 的 hidden 属性优先级很低，会被 .celebrate{display:flex}
   这类规则盖掉，导致弹窗根本藏不住、遮罩挡住整个屏幕点不动。
   必须用 !important 强制生效。 */
[hidden]{display:none !important;}

/* ============ 正在播放 状态条 ============ */
.now-bar{
  margin:0 0 14px;padding:11px 16px;
  background:linear-gradient(100deg,#fff6dc,#ffeec2);
  border-radius:16px;
  display:flex;align-items:center;gap:10px;
  font-weight:800;color:var(--db);
  border:2px solid #ffe0a0;
}
.now-bar .nb-ico{font-size:20px;animation:bob 1.8s ease-in-out infinite;}
.now-bar .nb-txt{flex:1;font-size:15px;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.now-bar .nb-left{
  font-size:15px;font-weight:900;color:var(--o);
  background:#fff;padding:3px 11px;border-radius:999px;flex-shrink:0;
  font-variant-numeric:tabular-nums;
}

/* ============ 定时/循环 设置 ============ */
.set-group{margin-top:20px;text-align:left;}
.set-label{
  font-size:15px;font-weight:800;color:var(--db);
  margin-bottom:9px;
}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{
  border:3px solid #ffe4b0;background:#fffbf0;
  padding:9px 15px;border-radius:999px;
  font-size:15px;font-weight:800;color:#7a6a4a;
  cursor:pointer;font-family:inherit;
  transition:transform .12s, background .16s, border-color .16s, color .16s;
}
.chip:active{transform:scale(.94);}
.chip.on{
  background:var(--y);border-color:var(--o);color:var(--db);
  box-shadow:0 3px 10px rgba(251,133,0,.3);
}

@media (max-width:520px){
  .chip{padding:8px 13px;font-size:14px;}
  .now-bar{padding:10px 13px;}
  .now-bar .nb-txt{font-size:14px;}
}