/* Rich's City 每日阅读页 v8.0 · 亮色果冻风 · 手机优先 */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { font-size: 16px; }
body {
  font-family: 'PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  min-height: 100vh; color: #3a3f4b;
  background: linear-gradient(160deg, #fdf6e3 0%, #e8f6ff 45%, #eafbe7 100%);
  background-attachment: fixed;
}
.boot { text-align: center; padding-top: 30vh; color: #8a93a5; }
.boot-emoji { font-size: 52px; animation: bob 1.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-8px) } }

.wrap { max-width: 640px; margin: 0 auto; padding: 14px 14px calc(40px + env(safe-area-inset-bottom)); }

/* 顶栏 */
.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 2px 4px; }
.topbar .logo { font-size: 26px; }
.topbar h1 { font-size: 18px; font-weight: 900; color: #2b5aa0; flex: 1; }
.topbar .who { font-size: 12px; color: #8a93a5; }
.topbar .icon-btn { border: none; background: rgba(255,255,255,.7); border-radius: 12px; width: 36px; height: 36px; font-size: 15px; color: #667; cursor: pointer; box-shadow: 0 2px 6px rgba(80,120,200,.12); }

/* 卡片：果冻质感 */
.card {
  background: rgba(255,255,255,.88);
  border-radius: 20px; padding: 18px; margin-top: 14px;
  box-shadow: 0 6px 18px rgba(90,130,220,.10), inset 0 2px 0 rgba(255,255,255,.9);
  border: 1.5px solid rgba(255,255,255,.8);
}

/* 进度条 */
.progress-line { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #667; font-weight: 700; }
.pbar { flex: 1; height: 12px; background: #e6ecf5; border-radius: 999px; overflow: hidden; }
.pbar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg,#7ec8ff,#5aa9f7); box-shadow: inset 0 -2px 3px rgba(0,0,0,.08); transition: width .5s; }

/* 级别徽章 */
.lv-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 900; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.lv-warm { background: linear-gradient(180deg,#ffd66e,#f5a623); }
.lv-1 { background: linear-gradient(180deg,#8ee08e,#4caf50); }
.lv-2 { background: linear-gradient(180deg,#7ec8ff,#3d94e6); }
.lv-3 { background: linear-gradient(180deg,#b79cff,#7c5cd6); }
.lv-4 { background: linear-gradient(180deg,#ff9d9d,#e05b5b); }
.lv-5 { background: linear-gradient(180deg,#ffb26e,#e8590c); }
.reward-badge { display: inline-flex; align-items: center; gap: 4px; background: #fff7e0; border: 1.5px solid #f5d67a; color: #b8860b; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 900; }

/* 文章 */
.a-title { font-size: 22px; font-weight: 900; color: #24304a; margin-top: 10px; line-height: 1.35; }
.a-text { font-size: 18px; line-height: 1.95; margin-top: 12px; color: #2f3542; white-space: pre-wrap; font-family: Georgia,'Times New Roman','PingFang SC',serif; }
.a-cn { font-size: 15px; line-height: 1.9; color: #5a6372; white-space: pre-wrap; margin-top: 10px; }
/* v9.39 按段翻译：每段一块，与英文段落一一对应 */
.cn-para { padding: 6px 0; }
.cn-para + .cn-para { border-top: 1px dashed #e3e8f0; margin-top: 4px; }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 16px; padding: 13px 20px; font-size: 16px; font-weight: 900;
  cursor: pointer; color: #fff; width: 100%;
  box-shadow: 0 5px 0 rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.35);
  transition: transform .08s, box-shadow .08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.15), inset 0 2px 0 rgba(255,255,255,.35); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-green { background: linear-gradient(180deg,#7cd47c,#3f9d42); }
.btn-blue  { background: linear-gradient(180deg,#7ec8ff,#3d84d6); }
.btn-gray  { background: linear-gradient(180deg,#c3cbd8,#98a3b3); }
.btn-ghost { background: rgba(255,255,255,.85); color: #4a5568; box-shadow: 0 3px 0 rgba(0,0,0,.08); border: 1.5px solid #dde5ef; }
.btn-half { width: calc(50% - 5px); }
.btn-row { display: flex; gap: 10px; margin-top: 12px; }

/* 折叠翻译 */
.fold-head { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 900; color: #5a7; font-size: 15px; user-select: none; }
.fold-head .chev { margin-left: auto; transition: transform .2s; color: #9aa5b5; }
.fold-open .chev { transform: rotate(180deg); }

/* 状态横幅 */
.banner { border-radius: 16px; padding: 14px 16px; font-size: 14px; font-weight: 700; line-height: 1.7; margin-top: 14px; }
.banner-wait { background: #fff4dd; border: 1.5px solid #f5d67a; color: #a06a00; }
.banner-redo { background: #ffe9e9; border: 1.5px solid #f0a8a8; color: #b03030; }
.banner-done { background: #e5f8e5; border: 1.5px solid #9ed89e; color: #2c7a2f; }

/* 登录 */
.login-box { max-width: 380px; margin: 10vh auto 0; }
.login-logo { text-align: center; font-size: 54px; }
.login-title { text-align: center; font-size: 21px; font-weight: 900; color: #2b5aa0; margin-top: 8px; }
.login-sub { text-align: center; font-size: 13px; color: #8a93a5; margin-top: 6px; line-height: 1.7; }
input.txt { width: 100%; border: 2px solid #dde5ef; border-radius: 14px; padding: 13px 14px; font-size: 16px; margin-top: 10px; background: #fff; }
input.txt:focus { outline: none; border-color: #7ec8ff; }
.err { color: #e03131; font-size: 13px; margin-top: 8px; min-height: 18px; font-weight: 700; }

/* 孩子选择 */
.child-item { display: flex; align-items: center; gap: 12px; background: #f6f9ff; border: 2px solid #dde5ef; border-radius: 16px; padding: 14px; margin-top: 10px; cursor: pointer; font-weight: 900; font-size: 16px; }
.child-item:active { border-color: #7ec8ff; background: #eef6ff; }
.child-item .em { font-size: 26px; }

/* TTS 控制 */
.tts-row { display: flex; gap: 8px; margin-top: 14px; }
.tts-row .btn { padding: 10px 12px; font-size: 14px; }

#toast { position: fixed; left: 50%; top: 16px; transform: translateX(-50%); background: rgba(40,46,60,.95); color: #fff; padding: 11px 22px; border-radius: 14px; font-size: 14px; font-weight: 700; display: none; z-index: 99; box-shadow: 0 6px 20px rgba(0,0,0,.25); max-width: 88vw; }

.done-big { text-align: center; padding: 30px 0 16px; }
.done-big .em { font-size: 64px; }
.done-big h2 { color: #2c7a2f; margin-top: 10px; }
.muted { color: #9aa5b5; font-size: 13px; }
.center { text-align: center; }

/* ===== v8.1 分段听读 ===== */
.tts-label { font-size: 13px; color: #8a94a6; flex: 1; align-self: center; }
.speed-toggle { display: flex; background: #eef2f8; border-radius: 999px; padding: 3px; gap: 2px; }
.spd { border: none; background: transparent; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 700; color: #8a94a6; cursor: pointer; font-family: inherit; }
.spd.on { background: linear-gradient(180deg,#7ec8ff,#4aa8f5); color: #fff; box-shadow: 0 2px 6px rgba(74,168,245,.35); }
.a-text { white-space: normal; }
.para { display: flex; gap: 10px; align-items: flex-start; padding: 8px 8px 8px 4px; border-radius: 14px; margin-top: 4px; transition: background .25s; }
.para.playing { background: linear-gradient(180deg,#fff7dd,#ffefc2); box-shadow: inset 0 0 0 2px #ffd766; }
.para-play { flex: none; width: 34px; height: 34px; margin-top: 4px; border: none; border-radius: 50%; cursor: pointer; color: #fff; font-size: 14px;
  background: linear-gradient(180deg,#7ec8ff,#4aa8f5); box-shadow: 0 3px 0 #2f8bd8; }
.para-play:active { transform: translateY(2px); box-shadow: 0 1px 0 #2f8bd8; }
.para.playing .para-play { background: linear-gradient(180deg,#ffc94d,#ff9f2e); box-shadow: 0 3px 0 #d97e14; }
.para-body { flex: 1; min-width: 0; }
.para-text { display: block; }

/* ===== v9.13 段尾生词卡（单词+音标+中文，点击朗读） ===== */
.vocab-box { margin-top: 8px; padding: 8px 10px; background: linear-gradient(180deg,#f2fbf3,#e8f7ec); border: 1.5px dashed #9ed7a8; border-radius: 14px; }
.vocab-title { font-size: 12px; font-weight: 700; color: #4a9a58; margin-bottom: 6px; }
/* v9.13.1 两列网格：左3右3，音标换行不挤位 */
.vocab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; }
.vocab-chip { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; padding: 5px 10px; background: #fff; border: 1.5px solid #bfe5c6; border-radius: 12px; cursor: pointer; font-family: inherit; transition: transform .12s, box-shadow .12s; box-shadow: 0 2px 0 #d4ecd8; text-align: left; min-width: 0; }
.vocab-chip:active { transform: translateY(2px); box-shadow: none; }
.vocab-chip.vplay { border-color: #ff9f2e; box-shadow: 0 0 0 3px rgba(255,159,46,.25); }
.vocab-chip .vw { font-size: 15px; font-weight: 800; color: #2e7d3c; }
.vocab-chip .vp { font-size: 12px; color: #8a94a6; }
.vocab-chip .vcn { font-size: 13px; color: #5b6472; }
@media (max-width: 480px) {
  .vocab-chip { padding: 4px 8px; }
  .vocab-chip .vw { font-size: 14px; }
  .vocab-chip .vp { font-size: 11px; }
}

/* ===== C3 环境兼容提示 ===== */
.env-tip { position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 999; background: linear-gradient(180deg,#fff8e6,#ffefc8); border: 1.5px solid #ffd766; border-radius: 16px; padding: 12px 36px 12px 14px; font-size: 13px; line-height: 1.6; color: #7a5b12; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
.env-tip .env-x { position: absolute; right: 10px; top: 8px; font-size: 18px; color: #b8963f; cursor: pointer; padding: 4px 6px; }

/* ---------- v8.6 LOL 式阅读段位 ---------- */
.rank-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, #ffffff, #f4f8ff); border-radius: 20px; padding: 12px 16px; margin-bottom: 12px; box-shadow: 0 4px 14px var(--rkglow, rgba(80,120,200,.15)), inset 0 0 0 2px rgba(255,255,255,.6); border: 2px solid var(--rk, #7ec8ff); }
.rank-img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 4px 8px var(--rkglow, rgba(0,0,0,.15))); animation: rank-float 3s ease-in-out infinite; }
@keyframes rank-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font-size: 20px; font-weight: 900; letter-spacing: 1px; }
.rank-sub { font-size: 12.5px; color: #667; margin: 3px 0 7px; }
.rank-sub b { color: #e06b12; }
.rank-bar { height: 10px; background: #e6ecf5; border-radius: 999px; overflow: hidden; }
.rank-bar > i { display: block; height: 100%; border-radius: 999px; transition: width .6s; box-shadow: inset 0 -2px 3px rgba(0,0,0,.1); }

/* 升段庆祝弹层 */
#rankup { position: fixed; inset: 0; background: rgba(20,30,60,.55); backdrop-filter: blur(3px); z-index: 999; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ru-box { position: relative; background: linear-gradient(160deg, #ffffff, #f0f6ff); border-radius: 26px; padding: 30px 34px 26px; text-align: center; box-shadow: 0 18px 50px rgba(0,0,0,.3); animation: ru-pop .45s cubic-bezier(.2,1.6,.4,1); max-width: 320px; }
@keyframes ru-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ru-rays { position: absolute; left: 50%; top: 78px; width: 220px; height: 220px; transform: translate(-50%,-50%); background: conic-gradient(from 0deg, rgba(255,215,80,.35) 0 12deg, transparent 12deg 30deg, rgba(255,215,80,.35) 30deg 42deg, transparent 42deg 60deg, rgba(255,215,80,.35) 60deg 72deg, transparent 72deg 90deg, rgba(255,215,80,.35) 90deg 102deg, transparent 102deg 120deg, rgba(255,215,80,.35) 120deg 132deg, transparent 132deg 150deg, rgba(255,215,80,.35) 150deg 162deg, transparent 162deg 180deg, rgba(255,215,80,.35) 180deg 192deg, transparent 192deg 210deg, rgba(255,215,80,.35) 210deg 222deg, transparent 222deg 240deg, rgba(255,215,80,.35) 240deg 252deg, transparent 252deg 270deg, rgba(255,215,80,.35) 270deg 282deg, transparent 282deg 300deg, rgba(255,215,80,.35) 300deg 312deg, transparent 312deg 330deg, rgba(255,215,80,.35) 330deg 342deg, transparent 342deg 360deg); border-radius: 50%; animation: ru-spin 8s linear infinite; pointer-events: none; }
@keyframes ru-spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
.ru-img { position: relative; width: 128px; height: 128px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); animation: ru-bounce 1.2s ease-in-out infinite; }
@keyframes ru-bounce { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.ru-title { font-size: 16px; font-weight: 900; color: #445; margin-top: 6px; }
.ru-rank { font-size: 28px; font-weight: 900; letter-spacing: 2px; margin-top: 2px; text-shadow: 0 2px 0 rgba(255,255,255,.8); }
.ru-sub { font-size: 13px; color: #778; margin-top: 6px; }
.ru-confetti { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 3px; animation: ru-fall linear forwards; pointer-events: none; }
@keyframes ru-fall { to { transform: translateY(105vh) rotate(720deg); } }

/* ---------- v8.7 AI 录音判分 ---------- */
.btn-red-rec { background: linear-gradient(180deg,#ff8a8a,#e0524f); }
.rec-live {
  margin-top: 14px; padding: 14px 16px; border-radius: 16px;
  background: #fff1f1; border: 2px solid #ffb8b8; color: #c0392b;
  font-weight: 700; font-size: 15px; text-align: center;
}
.rec-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: #e74c3c; margin-right: 6px; vertical-align: middle;
  animation: rec-pulse 1s infinite;
}
@keyframes rec-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.grade-card {
  margin-top: 14px; padding: 16px; border-radius: 16px; text-align: center;
  font-weight: 700; font-size: 15px; line-height: 1.6;
}
.grade-card .g-em { font-size: 40px; line-height: 1.2; margin-bottom: 6px; }
.grade-card .g-score { font-size: 17px; margin-bottom: 4px; }
.grade-card .g-score b { font-size: 24px; }
.grade-wait { background: #eef5ff; border: 2px solid #bcd6ff; color: #3d6fb4; }
.grade-pass { background: #eeffe9; border: 2px solid #a8e39b; color: #2e7d32; }
.grade-fail { background: #fff8e6; border: 2px solid #ffdf9e; color: #a07417; }
.spin-em { display: inline-block; animation: g-bob 1.1s ease-in-out infinite; }
@keyframes g-bob { 0%,100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-6px) rotate(6deg); } }

/* ===== v8.8 逐小段闯关 ===== */
.seg-line { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0 2px; font-size:14px; font-weight:700; color:#7a6a4f; }
.seg-dots { display:inline-flex; gap:5px; }
.seg-dot { width:20px; height:20px; border-radius:50%; background:#eee4d2; display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#fff; border:2px solid #e2d6bf; box-sizing:border-box; }
.seg-d-done { background:#7bc86c; border-color:#66b45a; }
.seg-d-cur { background:#ffd45e; border-color:#f4b942; animation:seg-cur-pulse 1.4s ease-in-out infinite; }
@keyframes seg-cur-pulse { 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.22);} }
.a-text-seg .para-text { font-size:20px; line-height:1.85; }
.seg-coin { font-size:17px; font-weight:800; color:#c58a00; margin-top:4px; animation:seg-coin-pop .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes seg-coin-pop { 0%{ transform:scale(.3); opacity:0;} 100%{ transform:scale(1); opacity:1;} }

/* ---------- v8.17 每周阅读挑战卡 ---------- */
.wk-card { background: linear-gradient(135deg, #fff8ec, #ffefd6); border: 2px solid #ffc46b; border-radius: 20px; padding: 12px 16px; margin-bottom: 12px; box-shadow: 0 4px 14px rgba(255,170,60,.18), inset 0 0 0 2px rgba(255,255,255,.6); }
.wk-head { display: flex; justify-content: space-between; align-items: center; }
.wk-title { font-weight: 800; font-size: 15px; color: #b06a12; }
.wk-num { font-weight: 800; font-size: 14px; color: #ff8f3d; }
.wk-dots { display: flex; gap: 8px; margin: 8px 0 6px; }
.wk-dot { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px dashed #ffc46b; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.wk-dot.wk-on { border-style: solid; background: #ffe9c4; box-shadow: 0 2px 6px rgba(255,170,60,.25); }
.wk-bar { height: 10px; border-radius: 999px; background: #ffe9c4; overflow: hidden; }
.wk-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffb44d, #ff8f3d); transition: width .5s ease; }
.wk-tail { margin-top: 7px; font-size: 13px; color: #9a7546; }
.wk-tail.wk-got { color: #1f9d55; font-weight: 700; }

/* ---------- v9.21 点词朗读 + 词义气泡 + 生词本 ---------- */
.w { cursor: pointer; border-radius: 5px; padding: 0 1px; transition: background .12s; -webkit-tap-highlight-color: transparent; }
.w:active { background: #ffe9b0; }
.w-hot { background: #ffe9b0; box-shadow: 0 0 0 2px rgba(255,196,80,.45); }
.w-bubble { position: fixed; z-index: 60; background: #2f3b52; color: #fff; border-radius: 12px; padding: 8px 12px; font-size: 14px; box-shadow: 0 6px 20px rgba(20,30,60,.35); max-width: 240px; animation: wb-pop .18s cubic-bezier(.2,1.5,.4,1) both; pointer-events: none; }
.w-bubble b { font-size: 16px; color: #ffd45e; margin-right: 4px; }
.w-bubble .wb-p { font-size: 12px; color: #aab6cc; margin-right: 4px; }
.w-bubble .wb-cn { display: inline-block; font-size: 14px; color: #d9f6de; margin-left: 2px; }
.w-bubble .wb-dim { color: #8a94a6; }
/* v9.38 词形还原提示：点 dogs 显示"← dog"，帮孩子建立词根意识 */
.w-bubble .wb-root { font-size: 12px; color: #7fd7a0; margin-right: 4px; }
@keyframes wb-pop { 0% { transform: scale(.7) translateY(6px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
#vb-btn { color: #b06a12; }
.vb-pop { animation: vb-pop .6s cubic-bezier(.2,1.8,.4,1); }
@keyframes vb-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(-8deg); } 100% { transform: scale(1); } }
.vb-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(30,40,60,.45); display: flex; align-items: center; justify-content: center; padding: 18px; animation: wb-pop .18s both; }
.vb-card { width: 100%; max-width: 480px; max-height: 82vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #fffdf6, #fff6e4); border: 3px solid #ffd766; border-radius: 22px; box-shadow: 0 16px 50px rgba(20,30,60,.35); overflow: hidden; }
.vb-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 2px dashed #ffe0a0; }
.vb-title { font-size: 17px; font-weight: 900; color: #b06a12; }
.vb-close { border: none; background: rgba(176,106,18,.1); color: #b06a12; width: 32px; height: 32px; border-radius: 10px; font-size: 15px; cursor: pointer; }
.vb-body { overflow-y: auto; padding: 12px 16px 18px; }
.vb-count { font-size: 13px; color: #9a7546; margin-bottom: 8px; }
.vb-count b { color: #ff8f3d; font-size: 16px; }
.vb-day { font-size: 13px; font-weight: 800; color: #b06a12; margin: 12px 0 6px; display: flex; align-items: center; gap: 8px; }
.vb-day::after { content: ''; flex: 1; height: 2px; background: #ffe9c4; border-radius: 2px; }
.vb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 8px; }
.vb-loading, .vb-empty { text-align: center; padding: 30px 10px; color: #9a7546; font-size: 14px; line-height: 1.8; }