/* ============================================================





   浦漫少儿语文 · 页面专属样式





   ============================================================ */











/* ---------- 首页 Hero ---------- */





.hero {





  position: relative;





  padding: clamp(30px, 6vw, 70px) 0 clamp(24px, 4vw, 40px);





  overflow: hidden;





}





.hero::before {





  content: "";





  position: absolute;





  inset: 0;





  background:





    radial-gradient(ellipse 60% 70% at 78% 30%, rgba(255, 175, 51, .22), transparent 70%),





    radial-gradient(ellipse 50% 60% at 18% 80%, rgba(52, 199, 174, .18), transparent 70%),





    radial-gradient(ellipse 40% 50% at 55% 10%, rgba(255, 140, 162, .16), transparent 70%);





  pointer-events: none;





}





.hero-inner {





  position: relative;





  display: grid;





  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);





  gap: clamp(20px, 4vw, 48px);





  align-items: center;





}





@media (max-width: 900px) {





  .hero-inner { grid-template-columns: minmax(0, 1fr); }





  .hero-art { min-height: 300px; }





}











.hero-badge {





  font-size: 14px;





  padding: 8px 18px;





  margin-bottom: 16px;





  box-shadow: var(--stk-1);





}





.hero-sub {





  margin-top: 16px;





  font-size: clamp(18px, 2.6vw, 25px);





  line-height: 1.62;





  color: var(--ink);





  opacity: .88;





}





.hero-sub b { color: var(--ink); font-weight: 800; }





.hero-cta {





  display: flex;





  flex-wrap: wrap;





  gap: 14px;





  margin-top: 28px;





}





.hero-stats {





  display: flex;





  flex-wrap: wrap;





  gap: 12px;





  margin-top: 30px;





}





.hero-stat {





  background: rgba(255, 255, 255, .78);





  border: 2.5px solid var(--line-strong);





  border-radius: var(--r-md);





  padding: 10px 18px;





  box-shadow: var(--stk-1);





  display: flex;





  align-items: baseline;





  gap: 7px;





}





.hero-stat b {





  font-family: var(--font-display);





  font-size: 25px;





  font-weight: 800;





  color: var(--ink);





  line-height: 1;





}





.hero-stat span { font-size: 13px; color: var(--ink-soft); font-weight: 700; }











/* Hero 插画区 */





.hero-art {





  position: relative;





  min-height: clamp(330px, 42vw, 430px);





}





.hero-blob {





  position: absolute;





  inset: 10% 8%;





  background: linear-gradient(150deg, var(--han-soft), var(--poem-soft) 55%, var(--pin-soft));





  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;





  border: 3px solid rgba(74, 55, 40, .12);





}





.hero-card {





  position: absolute;





  background: rgba(255,255,255,.18);





  border: 3px solid var(--ink);





  border-radius: var(--r-lg);





  box-shadow: var(--stk-2), var(--pop);





  padding: 12px 12px 10px;





  width: clamp(118px, 15.5vw, 156px);





  z-index: 1;





}





.hero-card .tian { border-width: 2.5px; }





.hero-card .tian-char { font-size: clamp(38px, 5.4vw, 52px); }





.hero-card-tag {





  margin-top: 8px;





  text-align: center;





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 12.5px;





  color: var(--ink-soft);





  letter-spacing: .06em;





}





/* 三张卡沿对角线错开，互不遮挡 */





.hero-card-1 { top: 0;     left: 2%;   transform: rotate(-6deg); z-index: 3; }





.hero-card-2 { top: 30%;   right: 1%;  transform: rotate(5deg);  z-index: 2; }





.hero-card-3 { bottom: 0;  left: 26%;  transform: rotate(-3deg); z-index: 1; }











.hero-py {





  font-family: var(--font-display);





  font-size: clamp(19px, 2.4vw, 25px);





  font-weight: 800;





  color: var(--ink);





  text-align: center;





  padding: 22px 6px;





  letter-spacing: .06em;





  background: var(--pin-soft);





  border-radius: var(--r-sm);





  border: 2px dashed var(--pin-main);





}





.hero-poem-emoji {





  font-size: clamp(46px, 7vw, 66px);





  text-align: center;





  padding: 12px 0 16px;





  background: var(--poem-soft);





  border-radius: var(--r-sm);





  border: 2px dashed var(--poem-main);





}











.hero-float {





  position: absolute;





  font-size: 30px;





  opacity: .9;





  animation: float-y 4.2s ease-in-out infinite;





  filter: drop-shadow(0 3px 0 rgba(74,55,40,.16));





}





.hero-float-a { top: 2%;  right: 22%; animation-delay: .2s; }





.hero-float-b { top: 26%; left: 2%;  animation-delay: .9s; }





.hero-float-c { bottom: 16%; right: 16%; animation-delay: 1.5s; }





.hero-float-d { bottom: 2%;  left: 4%;  animation-delay: 2.1s; }











/* ---------- 区块标题（用实心字 + 糖果下划线，描边字在这个字号会发虚） ---------- */





.sec-head {





  margin-bottom: clamp(20px, 3vw, 32px);





  display: grid;





  gap: 10px;





}





.sec-head .t-title {





  color: var(--ink);





  -webkit-text-stroke: 0;





  text-shadow: none;





  letter-spacing: .03em;





}





.sec-head .t-title::after {





  content: "";





  display: block;





  width: 56px;





  height: 7px;





  margin-top: 11px;





  border-radius: 4px;





  background: linear-gradient(90deg, var(--star), var(--han-main));





}











/* ---------- 玩法卡片网格 ---------- */





.game-grid {





  display: grid;





  gap: 16px;





  grid-template-columns: repeat(auto-fill, minmax(226px, 1fr));





}





.game-tile {





  display: flex;





  flex-direction: column;





  gap: 12px;





  background: rgba(255,255,255,.18);





  border: 2.5px solid var(--line-strong);





  border-radius: var(--r-lg);





  padding: 18px;





  box-shadow: var(--stk-1), var(--pop-sm);





  cursor: pointer;





  transition: transform .18s cubic-bezier(.2,.9,.3,1.25), box-shadow .18s ease;





  text-decoration: none;





  color: inherit;





}





.game-tile:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--stk-2), var(--pop); }





.game-tile:active { transform: translateY(-1px); }





.game-tile .g-emoji {





  width: 62px; height: 62px;





  border-radius: 19px;





  display: grid; place-items: center;





  font-size: 33px;





  border: 2.5px solid var(--ink);





  box-shadow: var(--stk-1);





  flex: none;





}





.game-tile .g-name {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 18.5px;





  line-height: 1.3;





}





.game-tile .g-desc {





  font-size: 13.5px;





  color: var(--ink-soft);





  line-height: 1.55;





  flex: 1;





}





.game-tile .g-foot {





  display: flex;





  align-items: center;





  justify-content: space-between;





  gap: 8px;





}





.game-tile .g-play {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 13.5px;





  padding: 6px 14px;





  border-radius: var(--r-pill);





  color: #fff;





}





.g-pin  .g-emoji  { background: var(--pin-soft); }





.g-pin  .g-play   { background: var(--pin-main); }





.g-han  .g-emoji  { background: var(--han-soft); }





.g-han  .g-play   { background: var(--han-main); }





.g-poem .g-emoji  { background: var(--poem-soft); }





.g-poem .g-play   { background: var(--poem-main); }











/* ---------- 今日任务 ---------- */





.task-card {





  display: flex;





  align-items: center;





  gap: 13px;





  padding: 15px;





  border-radius: var(--r-md);





  background: rgba(255,255,255,.18);





  border: 2.5px solid var(--line-strong);





  box-shadow: var(--stk-1);





}





.task-card.done { background: var(--ok); border-color: var(--ok-deep); color: #fff; }





.task-card.done .t-tiny { color: rgba(255,255,255,.85); }





.task-card .t-emoji {





  width: 52px; height: 52px;





  border-radius: 16px;





  display: grid; place-items: center;





  font-size: 27px;





  background: var(--paper-deep);





  border: 2px solid var(--line-strong);





  flex: none;





}





.task-card.done .t-emoji { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); }











/* ---------- 馆页头部 ---------- */





.hall-hero {





  padding: clamp(26px, 5vw, 52px) 0;





  position: relative;





  overflow: hidden;





}





.hall-hero .wrap {





  display: grid;





  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);





  gap: 26px;





  align-items: center;





}





@media (max-width: 860px) { .hall-hero .wrap { grid-template-columns: minmax(0, 1fr); } }





.hall-hero .hall-tag {





  display: inline-flex;





  align-items: center;





  gap: 8px;





  padding: 8px 18px;





  border-radius: var(--r-pill);





  font-weight: 800;





  font-size: 14px;





  border: 2.5px solid var(--ink);





  box-shadow: var(--stk-1);





  margin-bottom: 14px;





}





.hall-hero .hall-title { letter-spacing: .03em; }





.hall-hero .hall-lede {





  margin-top: 14px;





  font-size: clamp(16px, 2.1vw, 20px);





  line-height: 1.72;





  opacity: .88;





  max-width: 560px;





}





.hall-hero .hall-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }











.hall-hero-art {





  position: relative;





  display: grid;





  place-items: center;





  min-height: 250px;





}





.hall-hero-art .big-emoji {





  font-size: clamp(96px, 16vw, 168px);





  filter: drop-shadow(0 10px 0 rgba(74,55,40,.16));





  animation: float-y 4s ease-in-out infinite;





}





.hall-hero-art .ring {





  position: absolute;





  width: clamp(210px, 30vw, 300px);





  height: clamp(210px, 30vw, 300px);





  border-radius: 50%;





  border: 4px dashed rgba(74,55,40,.2);





  animation: spin-slow 34s linear infinite;





}











/* 馆页配色背景 */





.hero-bg-pin  { background: linear-gradient(165deg, var(--pin-tint),  var(--pin-soft)  70%, var(--paper)); }





.hero-bg-han  { background: linear-gradient(165deg, var(--han-tint),  var(--han-soft)  70%, var(--paper)); }





.hero-bg-poem { background: linear-gradient(165deg, var(--poem-tint), var(--poem-soft) 70%, var(--paper)); }











/* ---------- 学习地图 ---------- */





.map-track {





  display: grid;





  gap: 14px;





}





.map-node {





  display: flex;





  align-items: center;





  gap: 15px;





  padding: 16px 18px;





  background: rgba(255,255,255,.18);





  border: 2.5px solid var(--line-strong);





  border-radius: var(--r-lg);





  box-shadow: var(--stk-1);





  cursor: pointer;





  transition: transform .16s ease, box-shadow .16s ease;





}





.map-node:hover { transform: translateX(5px); box-shadow: var(--stk-2); }





.map-node .n-num {





  width: 46px; height: 46px;





  border-radius: 15px;





  display: grid; place-items: center;





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 19px;





  color: #fff;





  flex: none;





  border: 2.5px solid var(--ink);





  box-shadow: var(--stk-1);





}





.map-node .n-title { font-family: var(--font-display); font-weight: 800; font-size: 17.5px; }





.map-node .n-desc  { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; }





.map-node .n-go    { margin-left: auto; font-size: 22px; opacity: .55; flex: none; }











/* ---------- 内容卡片（字母/汉字/古诗） ---------- */





.char-grid {





  display: grid;





  gap: 12px;





  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));





}





.char-chip {





  aspect-ratio: 1;





  display: flex;





  flex-direction: column;





  align-items: center;





  justify-content: center;





  gap: 4px;





  background: rgba(255,255,255,.18);





  border: 2.5px solid var(--line-strong);





  border-radius: var(--r-md);





  box-shadow: var(--stk-1);





  cursor: pointer;





  transition: transform .14s ease, box-shadow .14s ease;





  padding: 8px;





  text-align: center;





}





.char-chip:hover { transform: translateY(-4px); box-shadow: var(--stk-2); }





.char-chip .c-main {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(26px, 3.6vw, 34px);





  line-height: 1.15;





}





.char-chip .c-py   { font-family: var(--font-pinyin); font-size: 12px; color: var(--ink-soft); font-weight: 700; font-synthesis: none; letter-spacing: .05em; }





.char-chip .c-emoji{ font-size: 22px; line-height: 1; }











/* 古诗卡 */





.poem-grid {





  display: grid;





  gap: 16px;





  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));





}





.poem-card {





  background: rgba(255,255,255,.18);





  border: 2.5px solid var(--poem-main);





  border-radius: var(--r-lg);





  box-shadow: var(--stk-1), var(--pop-sm);





  padding: 18px;





  cursor: pointer;





  transition: transform .16s ease, box-shadow .16s ease;





}





.poem-card:hover { transform: translateY(-5px); box-shadow: var(--stk-2), var(--pop); }





.poem-card .p-title {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 21px;





  display: flex;





  align-items: center;





  gap: 10px;





}





.poem-card .p-meta  { font-size: 13px; color: var(--ink); font-weight: 700; margin: 6px 0 10px; }





.poem-card .p-line  { font-family: var(--font-pinyin); font-size: 15px; color: var(--ink-soft); line-height: 1.85; letter-spacing: .06em; }











/* ---------- 详情弹层内容 ---------- */





.detail-hero {





  display: flex;





  align-items: center;





  gap: 18px;





  padding: 18px;





  border-radius: var(--r-lg);





  background: var(--paper-tint);





  border: 2.5px solid var(--line-strong);





  margin-bottom: 16px;





}





.detail-hero .d-emoji { font-size: 52px; line-height: 1; }





.detail-hero .d-py {





  font-family: var(--font-display);





  font-size: 26px;





  font-weight: 800;





  color: var(--ink);





  letter-spacing: .05em;





}





.word-chip {





  display: inline-flex;





  align-items: center;





  gap: 8px;





  padding: 9px 15px;





  background: rgba(255,255,255,.18);





  border: 2.5px solid var(--line-strong);





  border-radius: var(--r-pill);





  font-weight: 800;





  font-size: 15px;





  box-shadow: var(--stk-1);





  cursor: pointer;





}





.word-chip:hover { transform: translateY(-2px); }











/* ---------- 游戏页 ---------- */





.play-shell {





  padding: clamp(18px, 3vw, 30px) 0;





}





.play-head {





  display: flex;





  flex-wrap: wrap;





  align-items: center;





  gap: 12px;





  margin-bottom: 18px;





}





.play-head .back {





  display: inline-flex;





  align-items: center;





  gap: 7px;





  font-weight: 800;





  color: var(--ink-soft);





}





.play-head .back:hover { color: var(--ink); }





.play-head h1 {





  font-family: var(--font-display);





  font-size: clamp(21px, 3vw, 28px);





  font-weight: 800;





}





.score-chip {





  display: inline-flex;





  align-items: center;





  gap: 6px;





  padding: 8px 16px;





  border-radius: var(--r-pill);





  background: rgba(255,255,255,.18);





  border: 2.5px solid var(--line-strong);





  font-weight: 800;





  box-shadow: var(--stk-1);





}











/* 游戏结果面板 */





.result-panel {





  text-align: center;





  padding: 18px 8px 8px;





}





.result-panel .r-emoji {





  font-size: clamp(58px, 10vw, 88px);





  line-height: 1;





  animation: pop-in .5s cubic-bezier(.2,.9,.3,1.3) both;





}





.result-panel .r-title {





  font-family: var(--font-display);





  font-size: clamp(24px, 4vw, 34px);





  font-weight: 800;





  margin: 12px 0 8px;





}





.result-panel .r-sub { color: var(--ink-soft); font-size: 16px; }





.result-panel .r-actions {





  display: flex;





  flex-wrap: wrap;





  gap: 12px;





  justify-content: center;





  margin-top: 22px;





}











/* ---------- 我的成长 ---------- */





.me-hero {





  display: flex;





  flex-wrap: wrap;





  align-items: center;





  gap: 18px;





  padding: 24px;





  border-radius: var(--r-xl);





  background: linear-gradient(150deg, var(--grape), var(--poem-main));





  border: 3px solid var(--ink);





  box-shadow: var(--stk-2), var(--pop);





  color: #fff;





}





.me-hero .m-avatar {





  width: 78px; height: 78px;





  border-radius: 24px;





  background: rgba(255,255,255,.25);





  border: 3px solid rgba(255,255,255,.7);





  display: grid; place-items: center;





  font-size: 38px;





  flex: none;





}





.me-hero .m-name {





  font-family: var(--font-display);





  font-size: clamp(22px, 3.2vw, 30px);





  font-weight: 800;





}





.me-hero .m-sub { opacity: .9; margin-top: 4px; font-size: 15px; }











.day-grid {





  display: grid;





  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));





  gap: 9px;





}





.day-cell {





  aspect-ratio: 1;





  border-radius: 13px;





  display: grid;





  place-items: center;





  font-size: 13px;





  font-weight: 800;





  background: var(--paper-deep);





  border: 2px solid var(--line-strong);





  color: var(--ink-faint);





}





.day-cell.on {





  background: var(--ok);





  border-color: var(--ok-deep);





  color: #fff;





  box-shadow: var(--stk-1);





}











/* ---------- 打印预览 ---------- */





.print-sheet {





  background: #fff;





  border: 3px solid var(--ink);





  border-radius: var(--r-lg);





  box-shadow: var(--stk-2), var(--pop);





  padding: 22px;





}





.print-sheet .ps-head {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 18px;





  text-align: center;





  padding-bottom: 12px;





  border-bottom: 3px double var(--line-strong);





  margin-bottom: 16px;





  letter-spacing: .08em;





}











@media print {





  .site-head, .site-foot, .play-head, .no-print, .btn { display: none !important; }





  body { background: #fff; }





  .print-sheet { border: 0; box-shadow: none; padding: 0; }





}











/* ============================================================





   APP 式分屏外壳（一屏一条，顶栏返回 + 底部翻页）





   ============================================================ */





.app-body {





  display: flex;





  flex-direction: column;





  min-height: 100vh;





  min-height: 100dvh;





  overflow: hidden;





}











/* 顶栏 */





.app-bar {





  flex: none;





  display: flex;





  align-items: center;





  gap: 12px;





  padding: 12px clamp(14px, 3vw, 22px);





  padding-top: max(12px, env(safe-area-inset-top));





  background: rgba(255, 247, 236, .95);





  backdrop-filter: blur(12px);





  border-bottom: 3px solid var(--line-strong);





  z-index: 20;





}





.app-back {





  width: 46px;





  height: 46px;





  flex: none;





  border-radius: 15px;





  border: 2.5px solid var(--ink);





  background: #fff;





  font-size: 22px;





  font-weight: 800;





  color: var(--ink);





  cursor: pointer;





  box-shadow: var(--stk-1);





  transition: transform .12s ease, box-shadow .12s ease;





}





.app-back:hover { transform: translateY(-2px); box-shadow: var(--stk-2); }





.app-back:active { transform: translateY(2px); box-shadow: none; }











.app-title {





  flex: 1;





  min-width: 0;





  display: flex;





  align-items: baseline;





  gap: 10px;





}





.app-title > span:first-child {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(18px, 2.8vw, 23px);





  color: var(--ink);





  white-space: nowrap;





  overflow: hidden;





  text-overflow: ellipsis;





}





.app-count {





  flex: none;





  padding: 4px 13px;





  border-radius: var(--r-pill);





  background: var(--star);





  border: 2px solid var(--star-deep);





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 13.5px;





  color: var(--ink);





  letter-spacing: .03em;





}





.app-bar-btn {





  width: 46px;





  height: 46px;





  flex: none;





  border-radius: 15px;





  border: 2.5px solid var(--ink);





  background: var(--pin-soft);





  font-size: 21px;





  cursor: pointer;





  box-shadow: var(--stk-1);





}





.app-bar-btn:active { transform: translateY(2px); box-shadow: none; }











/* 主体：占满剩余高度，内部自己滚（但一屏设计应尽量不滚） */





.app-main {





  flex: 1 1 auto;





  min-height: 0;





  overflow-y: auto;





  -webkit-overflow-scrolling: touch;





  padding: clamp(14px, 2.6vw, 22px) clamp(14px, 3vw, 22px);





  display: flex;





  flex-direction: column;





}











/* 底部翻页条 */





.app-foot {





  flex: none;





  display: flex;





  gap: 12px;





  padding: 12px clamp(14px, 3vw, 22px);





  padding-bottom: max(12px, env(safe-area-inset-bottom));





  background: rgba(255, 247, 236, .96);





  backdrop-filter: blur(12px);





  border-top: 3px solid var(--line-strong);





}





.app-nav-btn {





  flex: 1;





  min-height: 62px;





  font-size: clamp(17px, 2.5vw, 21px);





}





.app-nav-btn:disabled { opacity: .38; }











/* 学习卡：一屏一条 */





.learn-card {





  flex: 1 1 auto;





  display: flex;





  flex-direction: column;





  gap: clamp(5px, 1vh, 9px);





  background: rgba(255,255,255,.18);





  border: 3px solid var(--ink);





  border-radius: var(--r-xl);





  box-shadow: var(--stk-2), var(--pop);





  padding: clamp(12px, 2.2vw, 20px);





  overflow-y: auto;





}





.learn-card.lc-pin  { background: rgba(255,255,255,.18);  border-color: rgba(74,55,40,.35); }





.learn-card.lc-han  { background: rgba(255,255,255,.18);  border-color: rgba(74,55,40,.35); }





.learn-card.lc-poem { background: rgba(255,255,255,.18); border-color: rgba(74,55,40,.35); }











/* 顶部大字 */





.learn-hero {





  display: flex;





  align-items: center;





  gap: clamp(14px, 3vw, 22px);





}





.learn-hero .lh-main {





  flex: none;





  width: clamp(112px, 22vw, 168px);





  height: clamp(112px, 22vw, 168px);





}





.learn-hero .lh-main .tian-char {





  font-size: clamp(52px, 11vw, 88px);





}





.learn-hero .lh-big {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(52px, 11vw, 96px);





  line-height: 1.1;





  letter-spacing: .04em;





}





.learn-hero .lh-info {





  flex: 1;





  min-width: 0;





  display: grid;





  gap: 8px;





}











/* 汉字学习页：田字格居中放大 + 醒目发音钮 */





.han-focus {





  display: grid;





  justify-items: center;





  gap: clamp(4px, 0.8vh, 8px);





}





.han-tian {





  width: clamp(330px, 72vmin, 680px);





  height: clamp(330px, 72vmin, 680px);





  border-width: 4px;





  border-radius: var(--r-md);





  box-shadow: var(--stk-2), var(--pop);





}





.han-tian .tian-char {





  font-size: clamp(232px, 50vmin, 470px);





}





.han-say {





  display: inline-flex;





  align-items: center;





  justify-content: center;





  gap: 10px;





  min-width: clamp(150px, 28vmin, 220px);





  min-height: 56px;





  padding: 14px 28px;





  border: 3px solid var(--ink);





  border-radius: var(--r-pill);





  background: var(--han-main);





  color: var(--ink);





  font-family: var(--font-display);





  font-weight: 900;





  font-size: clamp(18px, 3vw, 24px);





  letter-spacing: .06em;





  cursor: pointer;





  box-shadow: var(--stk-1, 0 4px 0 rgba(74,55,40,.16)), var(--pop-sm, 0 8px 20px rgba(74,55,40,.10));





  transition: transform .12s ease;





}





.han-say:hover { transform: translateY(-2px); }





.han-say:active { transform: translateY(1px); }





.han-say .say-ico { font-size: clamp(20px, 3.2vw, 28px); line-height: 1; }





.han-py {





  font-family: var(--font-pinyin);





  font-size: clamp(28px, 5vw, 44px);





  font-weight: 700;





  font-synthesis: none;





  color: var(--ink);





  letter-spacing: .08em;





  line-height: 1.35;





}











/* 例词条 */





.learn-words {





  display: flex;





  flex-wrap: wrap;





  gap: 8px;





}





.learn-words .word-chip {





  min-height: 52px;





  font-size: 15px;





  padding: 9px 18px;





  gap: 10px;





}





.learn-words .wc-word {





  font-family: var(--font-kai);





  font-size: 26px;





  font-weight: 800;





  line-height: 1.15;





  color: var(--ink);





}





.learn-words .wc-py {





  font-family: var(--font-pinyin);





  font-size: 18px;





  font-weight: 700;





  font-synthesis: none;





  color: var(--ink);





  letter-spacing: .06em;





  line-height: 1.3;





}











/* 句子块 */





.learn-sent {





  background: rgba(255, 255, 255, .72);





  border: 2.5px dashed var(--line-strong);





  border-radius: var(--r-md);





  padding: 8px 12px;





  font-family: var(--font-kai);





  font-size: clamp(19px, 2.6vw, 24px);





  font-weight: 700;





  line-height: 1.5;





  color: var(--ink);





}





.learn-sent.sent-row {





  display: flex;





  align-items: baseline;





  gap: 10px;





}





.sent-label {





  flex: none;





  font-family: var(--font-display);





  font-weight: 900;





  font-size: 14px;





  letter-spacing: .06em;





  color: var(--ink);





  background: var(--han-main);





  border: 2px solid var(--ink);





  border-radius: var(--r-pill);





  padding: 1px 11px;





  line-height: 1.5;





}





.sent-say {





  flex: none;





  align-self: center;





  width: 34px;





  height: 34px;





  padding: 0;





  border: 2px solid var(--ink);





  border-radius: 50%;





  background: var(--han-main);





  color: var(--ink);





  font-size: 15px;





  line-height: 1;





  cursor: pointer;





  box-shadow: var(--stk-1, 0 3px 0 rgba(74,55,40,.16));





  transition: transform .12s ease;





}





.sent-say:hover { transform: translateY(-2px); }





.sent-say:active { transform: translateY(1px); }





.sent-text { flex: 1; }











/* 古诗：书本式一页一首 */





.poem-page {





  display: grid;





  justify-items: center;





  gap: clamp(10px, 1.8vh, 18px);





  padding: clamp(4px, 1vw, 12px) 2px;





}





.poem-page.poem-has-bg {





  position: relative;





  border-radius: 22px;





  overflow: hidden;





  min-height: 72vh;





  align-content: start;





  padding: clamp(16px, 3vh, 28px) clamp(10px, 2vw, 20px);





}





.poem-page.poem-has-bg::before {





  content: '';





  position: absolute;





  inset: 0;





  background: rgba(255,247,236,.42);





  z-index: 0;





  pointer-events: none;





}





.poem-page.poem-has-bg > * {





  position: relative;





  z-index: 1;





}





.pm-title {





  display: flex;





  flex-wrap: wrap;





  justify-content: center;





  gap: clamp(6px, 1.1vw, 12px);





  cursor: pointer;





  padding: 4px 10px;





  border-radius: 18px;





  transition: background .16s ease;





  -webkit-tap-highlight-color: transparent;





}





.pm-title:hover { background: rgba(255, 255, 255, .5); }





.pm-tchar {





  font-family: var(--font-kai);





  font-size: clamp(46px, 8vw, 82px);





  font-weight: 400;





  font-synthesis: none;





  color: var(--ink);





  line-height: 1.15;





}





.pm-author {





  font-family: var(--font-kai);





  font-size: clamp(17px, 2.3vw, 23px);





  color: var(--ink);





  letter-spacing: .28em;





  opacity: .82;





}





.pm-body {





  display: grid;





  gap: clamp(8px, 1.6vh, 16px);





  width: 100%;





  max-width: 760px;





}





.pm-line {





  text-align: center;





  padding: clamp(5px, 1vh, 10px) 6px;





  border-radius: 16px;





  cursor: pointer;





  transition: background .16s ease;





  -webkit-tap-highlight-color: transparent;





}





.pm-line:hover { background: rgba(255, 255, 255, .5); }





.pm-line.is-read { background: rgba(255, 255, 255, .78); }





.pm-row {





  display: flex;





  flex-wrap: wrap;





  justify-content: center;





  gap: clamp(3px, .7vw, 7px);





}





.pm-cell {





  display: grid;





  justify-items: center;





  gap: 3px;





}





.pm-syll {





  font-family: var(--font-pinyin);





  font-size: clamp(17px, 2.5vw, 24px);





  font-weight: 700;





  font-synthesis: none;





  color: var(--ink);





  opacity: .82;





  letter-spacing: .06em;





  line-height: 1.35;





  white-space: nowrap;





}





.pm-syll-t {





  font-size: clamp(16px, 2.3vw, 22px);





  opacity: .86;





}





.pm-bchar {





  font-family: var(--font-kai);





  font-size: clamp(34px, 6.6vw, 62px);





  font-weight: 400;





  font-synthesis: none;





  color: var(--ink);





  line-height: 1.15;





  min-width: clamp(46px, 10vw, 88px);





}





.pm-tip {





  font-family: var(--font-body);





  font-size: clamp(18px, 2.6vw, 24px);





  color: var(--ink);





  font-weight: 700;





  opacity: .92;





  margin-top: 6px;





  letter-spacing: .02em;





  line-height: 1.5;





}





.pm-foot {





  display: flex;





  flex-wrap: wrap;





  align-items: center;





  justify-content: center;





  gap: 14px;





  margin-top: clamp(2px, .6vh, 8px);





}





.pm-hint {





  font-family: var(--font-kai);





  font-size: clamp(14px, 1.9vw, 18px);





  color: var(--ink);





  opacity: .58;





  letter-spacing: .08em;





}





.pm-all {





  display: inline-flex;





  align-items: center;





  gap: 7px;





  padding: 9px 20px;





  border: 2.5px solid var(--ink);





  border-radius: var(--r-pill);





  background: var(--poem-main);





  color: var(--ink);





  font-family: var(--font-display);





  font-weight: 900;





  font-size: clamp(15px, 2.1vw, 19px);





  letter-spacing: .05em;





  cursor: pointer;





  box-shadow: var(--stk-1, 0 4px 0 rgba(74,55,40,.16)), var(--pop-sm, 0 8px 20px rgba(74,55,40,.10));





  transition: transform .12s ease;





}





.pm-all:hover { transform: translateY(-2px); }





.pm-all:active { transform: translateY(1px); }

/* 默写按钮（与听全篇并排） */
.pm-dict {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border: 2.5px solid var(--ink);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(15px, 2.1vw, 19px);
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: var(--stk-1, 0 4px 0 rgba(74,55,40,.16)), var(--pop-sm, 0 8px 20px rgba(74,55,40,.10));
  transition: transform .12s ease, background .15s ease;
}
.pm-dict:hover { transform: translateY(-2px); }
.pm-dict:active { transform: translateY(1px); }
.pm-dict.is-on {
  background: var(--poem-main);
  border-color: var(--ink);
}

/* 默写模式：隐藏汉字、保留拼音，留出手写层 */
.pm-body { position: relative; }
.poem-page.is-dict .pm-bchar,
.poem-page.is-dict .pm-tchar {
  visibility: hidden;
}
.poem-page.is-dict .pm-line {
  cursor: default;
}
.dict-canvas {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  touch-action: none;
  cursor: crosshair;
}
.dict-clear {
  position: absolute;
  right: 6px;
  top: 6px;
  z-index: 6;
}
.dict-hint {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 6;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  opacity: .55;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .2s ease;
}
body.dict-on .pm-foot .pm-hint { opacity: .35; }











/* 分类小标签 */











/* 拼音四线三格 */





.py-stage {





  display: flex;





  justify-content: center;





  cursor: pointer;





  -webkit-tap-highlight-color: transparent;





}





.py-grid {





  width: min(100%, 640px);





  display: block;





}





.py-grid .py-mid { fill: var(--pin-soft); }





.py-grid .py-l {





  stroke: #E8A0A0;





  stroke-width: 2.5;





  stroke-linecap: round;





}





.py-grid .py-l23 { stroke: #D96B6B; stroke-width: 3; }





.py-grid .py-letter {





  font-family: var(--font-display);





  font-weight: 800;





  fill: var(--ink);





  letter-spacing: .04em;





}





.py-say {





  display: block;





  margin: 0 auto;





  min-height: 56px;





  padding: 13px 42px;





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(19px, 2.8vw, 24px);





  color: #fff;





  background: var(--pin-main);





  border: 3px solid var(--pin-deep);





  border-radius: 999px;





  box-shadow: var(--stk-1), var(--pop-sm);





  cursor: pointer;





}





.py-say:hover { transform: translateY(-3px); box-shadow: var(--stk-2), var(--pop); }





.py-say:active { transform: translateY(1px); }





.py-chant-tag {





  display: inline-block;





  margin-right: 10px;





  padding: 3px 12px;





  background: var(--pin-deep);





  color: #fff;





  border-radius: 999px;





  font-size: .72em;





  vertical-align: middle;





}





.wc-big {





  min-height: 78px;





  padding: 12px 20px;





  gap: 12px;





}





.wc-big .wc-emoji { font-size: 32px; line-height: 1; }





.wc-big .wc-text {





  display: flex;





  flex-direction: column;





  align-items: flex-start;





  gap: 2px;





}





.wc-big .wc-word {





  font-family: var(--font-kai);





  font-weight: 800;





  font-size: 22px;





  line-height: 1.2;





}





.wc-big .wc-py {





  font-family: var(--font-pinyin);





  font-size: 16px;





  font-weight: 700;





  font-synthesis: none;





  color: var(--ink);





  letter-spacing: .06em;





}.py-chant {





  text-align: center;





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(22px, 3.4vw, 32px);





  letter-spacing: .06em;





  color: var(--ink);





  background: var(--pin-soft);





  border: 2.5px dashed var(--pin-main);





  border-radius: var(--r-md);





  padding: 14px 18px;





}.learn-tagrow { display: flex; flex-wrap: wrap; gap: 8px; }











/* 大块入口（馆首页 / 菜单） */





.app-menu {





  display: grid;





  gap: 14px;





  flex: 1 1 auto;





  grid-auto-rows: 1fr;





}





.app-menu-item {





  display: flex;





  align-items: center;





  gap: 16px;





  padding: 18px 20px;





  min-height: 86px;





  position: relative;





  overflow: hidden;





  border: 3px solid rgba(74,55,40,.5);





  border-radius: var(--r-lg);





  box-shadow: var(--stk-2);





  cursor: pointer;





  transition: transform .16s cubic-bezier(.2,.9,.3,1.25), box-shadow .16s;





  text-decoration: none;





  color: var(--ink);





}





.app-menu-item::before {





  content: '';





  position: absolute;





  inset: 0;





  background: rgba(255,247,236,.42);





  z-index: 0;





  pointer-events: none;





}





/* 每张入口卡不同边框色 */





.app-body[data-nav="pinyin"] .app-menu-item:nth-child(1),





body.theme-pinyin .app-menu-item:nth-child(1) { border-color: rgba(52,199,174,.75); }





.app-body[data-nav="pinyin"] .app-menu-item:nth-child(2),





body.theme-pinyin .app-menu-item:nth-child(2) { border-color: rgba(72,140,220,.7); }





.app-body[data-nav="pinyin"] .app-menu-item:nth-child(3),





body.theme-pinyin .app-menu-item:nth-child(3) { border-color: rgba(40,180,130,.7); }





.app-body[data-nav="pinyin"] .app-menu-item:nth-child(4),





body.theme-pinyin .app-menu-item:nth-child(4) { border-color: rgba(150,110,210,.65); }











.app-body[data-nav="hanzi"] .app-menu-item:nth-child(1),





body.theme-hanzi .app-menu-item:nth-child(1) { border-color: rgba(196,90,60,.75); }





.app-body[data-nav="hanzi"] .app-menu-item:nth-child(2),





body.theme-hanzi .app-menu-item:nth-child(2) { border-color: rgba(170,70,80,.7); }





.app-body[data-nav="hanzi"] .app-menu-item:nth-child(3),





body.theme-hanzi .app-menu-item:nth-child(3) { border-color: rgba(150,110,60,.7); }





.app-body[data-nav="hanzi"] .app-menu-item:nth-child(4),





body.theme-hanzi .app-menu-item:nth-child(4) { border-color: rgba(180,90,50,.65); }











.app-body[data-nav="poem"] .app-menu-item:nth-child(1),





body.theme-poem .app-menu-item:nth-child(1) { border-color: rgba(255,120,150,.75); }





.app-body[data-nav="poem"] .app-menu-item:nth-child(2),





body.theme-poem .app-menu-item:nth-child(2) { border-color: rgba(230,90,180,.7); }





.app-body[data-nav="poem"] .app-menu-item:nth-child(3),





body.theme-poem .app-menu-item:nth-child(3) { border-color: rgba(170,100,220,.65); }





.app-body[data-nav="poem"] .app-menu-item:nth-child(4),





body.theme-poem .app-menu-item:nth-child(4) { border-color: rgba(255,160,130,.7); }





.app-menu-item > * {





  position: relative;





  z-index: 1;





}





.app-menu-item .mi-text { flex: 1; min-width: 0; }





.app-menu-item .mi-name {





  font-family: var(--font-kai);





  font-size: clamp(34px, 7.5vw, 48px);





  font-weight: 700;





  color: var(--ink);





  line-height: 1.25;





  margin-bottom: 6px;





  text-shadow: 0 0 12px rgba(255,255,255,1), 0 0 24px rgba(255,255,255,.9), 0 2px 4px rgba(255,255,255,.95);





}





.app-menu-item .mi-desc {





  font-family: var(--font-kai);





  font-size: clamp(18px, 4vw, 26px);





  color: var(--ink);





  opacity: .85;





  line-height: 1.4;





  text-shadow: 0 0 10px rgba(255,255,255,1), 0 0 20px rgba(255,255,255,.85), 0 1px 3px rgba(255,255,255,.9);





}





.app-menu-item .mi-arrow {





  font-size: clamp(38px, 8.5vw, 52px);





  color: var(--ink);





  opacity: .7;





  flex: none;





  text-shadow: 0 0 12px rgba(255,255,255,1), 0 0 24px rgba(255,255,255,.9);





}





/* 分类切换条：换行排布，不横拖 */





.cat-bar {





  flex: none;





  display: flex;





  flex-wrap: wrap;





  gap: 8px;





  padding-bottom: 8px;





  margin-bottom: 4px;





}





.cat-bar button {





  flex: none;





  padding: 10px 20px;





  border-radius: var(--r-pill);





  border: 2.5px solid var(--line-strong);





  background: rgba(255,255,255,.18);





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 15px;





  color: var(--ink-soft);





  cursor: pointer;





}





.cat-bar button.on {





  background: rgba(74,55,40,.85);





  border-color: rgba(74,55,40,.85);





  color: #fff;





}











/* 馆首页大块 */





.hall-panel {





  flex: none;





  display: flex;





  align-items: center;





  gap: clamp(14px, 3vw, 22px);





  padding: clamp(18px, 3.4vw, 26px);





  border: 3px solid var(--ink);





  border-radius: var(--r-xl);





  box-shadow: var(--stk-2), var(--pop);





  margin-bottom: clamp(14px, 2.6vw, 20px);





}





.hall-panel .hp-emoji {





  flex: none;





  width: clamp(74px, 13vw, 104px);





  height: clamp(74px, 13vw, 104px);





  display: grid;





  place-items: center;





  font-size: clamp(40px, 7vw, 58px);





  background: rgba(255, 255, 255, .62);





  border-radius: 24px;





  border: 2.5px solid var(--ink);





  box-shadow: var(--stk-1);





}





.hall-panel .hp-name {





  font-family: var(--font-display);





  font-size: clamp(26px, 4.4vw, 38px);





  font-weight: 800;





  letter-spacing: .03em;





}





.hall-panel .hp-desc {





  margin-top: 7px;





  font-size: clamp(14.5px, 2vw, 17px);





  line-height: 1.66;





  opacity: .84;





}





.hp-pin  { background: linear-gradient(150deg, var(--pin-soft),  var(--pin-main)  130%); }





.hp-han  { background: linear-gradient(150deg, var(--han-soft),  var(--han-main)  130%); }





.hp-poem { background: linear-gradient(150deg, var(--poem-soft), var(--poem-main) 130%); }











/* ============================================================





   首页（紧凑，尽量一屏）





   ============================================================ */





.home-sec { padding: clamp(16px, 2.6vw, 26px) 0; }





.home-h2 {





  font-family: var(--font-display);





  font-size: clamp(20px, 3vw, 26px);





  font-weight: 800;





  color: var(--ink);





  margin-bottom: 14px;





}





.home-h2::after {





  content: "";





  display: block;





  width: 52px;





  height: 7px;





  margin-top: 9px;





  border-radius: 4px;





  background: linear-gradient(90deg, var(--star), var(--han-main));





}











.hall-grid {





  display: grid;





  gap: clamp(8px, 1.4vw, 14px);





  grid-template-columns: repeat(3, minmax(0, 1fr));





}





.hall-grid .hall-card {





  min-height: clamp(272px, 42vh, 410px);





  padding: clamp(16px, 2.6vw, 34px) clamp(10px, 2vw, 26px) clamp(14px, 2.2vw, 26px);





  position: relative;





  overflow: hidden;





  border: 2.5px solid rgba(74,55,40,.4);





  border-radius: var(--r-md);





  box-shadow: var(--stk-1);





  display: flex;





  flex-direction: column;





  align-items: center;





  justify-content: flex-end;





  text-decoration: none;





  color: var(--ink);





  transition: transform .12s ease, box-shadow .12s ease;





}





.hall-grid .hall-card::before {





  content: '';





  position: absolute;





  inset: 0;





  background: linear-gradient(180deg, rgba(255,247,236,.15) 0%, rgba(255,247,236,.45) 100%);





  z-index: 0;





  pointer-events: none;





}





.hall-grid .hall-card > * {





  position: relative;





  z-index: 1;





}





.hall-grid .hall-card:hover {





  transform: translateY(-3px);





  box-shadow: var(--stk-2);





}





.hall-grid .hall-emoji { font-size: clamp(46px, 9vw, 92px); }





.hall-grid .hall-name { font-size: clamp(17px, 3.8vw, 34px); }





.hall-grid .hall-desc { font-size: clamp(11px, 2.6vw, 15px); line-height: 1.6; }





.hall-grid .hall-go { padding: 8px 14px; font-size: clamp(12px, 2.8vw, 15px); }











.home-quick {





  display: grid;





  gap: 12px;





  grid-template-columns: repeat(4, minmax(0, 1fr));





}





@media (max-width: 720px) { .home-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }





.quick-card {





  display: flex;





  flex-direction: column;





  align-items: center;





  gap: 6px;





  padding: 11px 10px;





  background: rgba(255,255,255,.18);





  border: 2.5px solid var(--line-strong);





  border-radius: var(--r-lg);





  box-shadow: var(--stk-1);





  text-decoration: none;





  color: inherit;





  transition: transform .16s cubic-bezier(.2,.9,.3,1.25), box-shadow .16s;





}





.quick-card:hover { transform: translateY(-4px); box-shadow: var(--stk-2), var(--pop); }





.quick-card .qc-icon {





  width: 46px; height: 46px;





  border-radius: 18px;





  display: grid; place-items: center;





  font-size: 23px;





  border: 2.5px solid var(--ink);





  box-shadow: var(--stk-1);





}





.quick-card .qc-name {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 15px;





}





.quick-card .qc-desc { font-size: 11.5px; color: var(--ink-soft); font-weight: 700; }











/* 我的成长 */





.me-stats {





  display: grid;





  gap: 11px;





  grid-template-columns: repeat(4, minmax(0, 1fr));





  margin-top: 16px;





}





@media (max-width: 560px) { .me-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }





.me-stat {





  display: flex;





  flex-direction: column;





  align-items: center;





  gap: 5px;





  padding: 15px 8px;





  background: rgba(255,255,255,.18);





  border: 2.5px solid var(--line-strong);





  border-radius: var(--r-lg);





  box-shadow: var(--stk-1);





}





.me-stat .ms-icon {





  width: 48px; height: 48px;





  border-radius: 15px;





  display: grid; place-items: center;





  font-size: 23px;





  border: 2px solid var(--line-strong);





}





.me-stat .ms-val {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 23px;





  line-height: 1;





  max-width: 100%;





  overflow: hidden;





  text-overflow: ellipsis;





  white-space: nowrap;





  font-variant-numeric: tabular-nums;





}





.me-stat .ms-label {





  font-size: 12.5px;





  color: var(--ink-soft);





  font-weight: 700;





  max-width: 100%;





  overflow: hidden;





  text-overflow: ellipsis;





  white-space: nowrap;





}





.me-stat { min-width: 0; overflow: hidden; }











.me-badges {





  display: grid;





  gap: 11px;





  grid-template-columns: repeat(4, minmax(0, 1fr));





}





@media (max-width: 720px) { .me-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }





.me-badge {





  display: flex;





  flex-direction: column;





  align-items: center;





  gap: 6px;





  padding: 15px 10px;





  background: rgba(255,255,255,.18);





  border: 2.5px solid var(--line-strong);





  border-radius: var(--r-lg);





  box-shadow: var(--stk-1);





  text-align: center;





}





.me-badge.locked { opacity: .45; filter: grayscale(1); }





.me-badge .mb-icon {





  width: 54px; height: 54px;





  border-radius: 17px;





  display: grid; place-items: center;





  font-size: 27px;





  background: var(--paper-deep);





}





.me-badge .mb-name {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 14px;





}





.me-badge .mb-desc { font-size: 11.5px; color: var(--ink-soft); line-height: 1.45; }











/* 成长页里的游戏列表用紧凑卡 */

















/* APP 式内页的紧凑法务条（备案 + 声明不能少） */





.app-legal {





  flex: none;





  padding: 12px clamp(14px, 3vw, 22px);





  padding-bottom: max(12px, env(safe-area-inset-bottom));





  background: var(--paper-deep);





  border-top: 2px solid var(--line-strong);





  color: var(--ink-soft);





  font-size: 11px;





  line-height: 1.75;





  text-align: center;





}





.app-legal a { text-decoration: underline; text-underline-offset: 2px; }
.app-legal .footer-home { font-weight: 700; }
.app-legal .footer-note { opacity: .9; }
.app-legal .gongan-badge { white-space: nowrap; }
.app-legal .beian-icon,
.app-legal .gongan-badge img {
  display: inline-block;
  height: 13px;
  width: auto;
  vertical-align: -2px;
  margin-right: 3px;
}











/* 楷体覆盖（优先级高于 .learn-hero .lh-big） */





.lh-big.kai,





.wc-big .wc-word,





.tian .tian-char { font-family: var(--font-kai); }











/* ---------- 三主题全页背景 ---------- */





.app-body[data-nav="pinyin"],





body.theme-pinyin {





  background-image: url('../assets/theme-bg/pinyin.webp');





  background-size: cover;





  background-position: center;





    background-repeat: no-repeat;





}





.app-body[data-nav="hanzi"],





body.theme-hanzi {





  background-image: url('../assets/theme-bg/hanzi.webp');





  background-size: cover;





  background-position: center;





    background-repeat: no-repeat;





}





.app-body[data-nav="poem"],





body.theme-poem {





  background-image: url('../assets/theme-bg/poem.webp');





  background-size: cover;





  background-position: center;





    background-repeat: no-repeat;





}





/* ---------- 玩法通用新交互 ---------- */





.floater-field {





  position: relative;





  width: 100%;





  min-height: clamp(260px, 42vh, 380px);





  border: 3px solid var(--ink);





  border-radius: var(--r-lg);





  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.2));





  overflow: hidden;





}





.floater {





  position: absolute;





  min-height: 56px;





  min-width: 56px;





  padding: 8px 12px;





  border-radius: var(--r-pill);





  border: 3px solid var(--ink);





  background: #fff;





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(16px, 2.4vw, 22px);





  cursor: pointer;





  box-shadow: var(--stk-1);





  z-index: 1;





  animation-name: float-drift;





  animation-timing-function: linear;





  animation-iteration-count: infinite;





  will-change: transform;





}





.floater:hover { transform: scale(1.06); z-index: 2; }





.floater.is-ok { background: var(--ok) !important; color: #fff !important; }





.floater.is-bad { background: var(--bad) !important; color: #fff !important; animation: shake .35s; }





.floater.is-caught { animation-play-state: paused; transform: scale(1.15); }





@keyframes float-drift {





  0%   { transform: translateY(0) translateX(0); }





  25%  { transform: translateY(-12px) translateX(8px); }





  50%  { transform: translateY(4px) translateX(-6px); }





  75%  { transform: translateY(-8px) translateX(4px); }





  100% { transform: translateY(0) translateX(0); }





}





@keyframes sink-up {





  from { transform: translateY(0); opacity: 1; }





  to   { transform: translateY(-40px); opacity: 0; }





}





.floater.is-sunk { animation: sink-up .5s ease-out forwards !important; pointer-events: none; }











/* 排序 / 投递 */





.sorter-items, .sorter-bins {





  display: flex;





  flex-wrap: wrap;





  gap: 10px;





}





.sorter-bins { margin-top: 8px; }





.sorter-item, .sorter-bin { flex: 1 1 120px; }





.sorter-item.is-picked { outline: 3px solid var(--grape); }











/* 迷宫格 */





.maze-grid {





  display: grid;





  gap: 8px;





  width: 100%;





  max-width: 480px;





  margin: 0 auto;





}





.maze-cell {





  aspect-ratio: 1;





  min-height: 56px;





  border-radius: var(--r-sm);





  border: 3px solid var(--ink);





  background: #fff;





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(16px, 2.6vw, 22px);





  cursor: pointer;





  display: grid;





  place-items: center;





  box-shadow: var(--stk-1);





  transition: transform .12s ease, background .15s ease;





}





.maze-cell:hover { transform: scale(1.04); }





.maze-cell.is-path { background: var(--star); border-color: var(--star-deep); }





.maze-cell.is-dead { background: var(--bad) !important; color: #fff !important; animation: shake .4s; }





.maze-cell.is-blocked { opacity: .35; pointer-events: none; }





.maze-cell.is-goal { background: var(--ok) !important; color: #fff !important; }











/* 天平 */





.scale-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }





.scale-beam {





  width: min(100%, 360px);





  height: 18px;





  background: var(--ink);





  border-radius: 999px;





  position: relative;





  transform-origin: center;





  transition: transform .45s cubic-bezier(.2,.8,.3,1.2);





  margin: 28px 0;





}





.scale-beam::before, .scale-beam::after {





  content: '';





  position: absolute;





  top: 50%;





  width: 44px; height: 44px;





  border-radius: 50%;





  border: 3px solid var(--ink);





  transform: translateY(-50%);





  background: var(--star);





  display: grid; place-items: center;





}





.scale-beam::before { left: -10px; }





.scale-beam::after { right: -10px; background: var(--grape); }





.scale-pan {





  font-size: clamp(36px, 6vw, 54px);





  line-height: 1;





}





.scale-pole {





  width: 10px; height: 70px;





  background: var(--ink);





  border-radius: 6px;





  margin-top: -10px;





}











/* 投篮 / 轨道条 */





.shoot-track {





  position: relative;





  height: 70px;





  border: 3px solid var(--ink);





  border-radius: var(--r-lg);





  background: rgba(255,255,255,.5);





  overflow: hidden;





  margin: 12px 0;





}





.shoot-marker {





  position: absolute;





  top: 8px;





  width: 54px; height: 54px;





  border-radius: 50%;





  background: var(--han-main);





  border: 3px solid var(--ink);





  display: grid; place-items: center;





  font-size: 28px;





  transform: translateX(-50%);





  box-shadow: var(--stk-1);





}





.shoot-zone {





  position: absolute;





  top: 0; bottom: 0;





  background: rgba(52, 199, 89, .35);





  border-left: 3px dashed var(--ok-deep);





  border-right: 3px dashed var(--ok-deep);





}











/* 火车车厢 */





.train-row {





  display: flex;





  flex-wrap: wrap;





  gap: 10px;





  align-items: flex-end;





  justify-content: center;





}





.train-car {





  min-width: 86px;





  min-height: 72px;





  border: 3px solid var(--ink);





  border-radius: 12px 12px 8px 8px;





  background: #fff;





  display: flex;





  flex-direction: column;





  align-items: center;





  justify-content: center;





  gap: 4px;





  font-family: var(--font-display);





  font-weight: 800;





  cursor: pointer;





  box-shadow: var(--stk-1);





  padding: 8px;





}





.train-car.is-ok { background: var(--ok) !important; color: #fff !important; }





.train-car.is-bad { background: var(--bad) !important; color: #fff !important; }





.train-car.is-active { outline: 3px solid var(--grape); }











/* 接龙路径 */





.chain-slots {





  display: flex;





  flex-wrap: wrap;





  gap: 8px;





  justify-content: center;





  margin-bottom: 12px;





}





.chain-slot {





  min-width: 72px;





  min-height: 56px;





  padding: 8px 12px;





  border: 3px dashed var(--line-strong);





  border-radius: var(--r-md);





  background: rgba(255,255,255,.55);





  display: grid;





  place-items: center;





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(15px, 2.2vw, 20px);





}





.chain-slot.filled {





  border-style: solid;





  border-color: var(--ok-deep);





  background: var(--ok);





  color: #fff;





}











/* 句子寻宝 */





.sentence-box {





  font-family: var(--font-kai), var(--font-display);





  font-size: clamp(26px, 4.5vw, 40px);





  font-weight: 700;





  line-height: 1.8;





  text-align: center;





  padding: 18px 12px;





}





.sentence-box .ch {





  display: inline-grid;





  place-items: center;





  min-width: 1.25em;





  min-height: 1.25em;





  padding: 2px 4px;





  margin: 2px;





  border-radius: 8px;





  cursor: pointer;





  border: 2px solid transparent;





  transition: background .15s, transform .12s;





}





.sentence-box .ch:hover { background: rgba(255,255,255,.7); transform: scale(1.08); }





.sentence-box .ch.is-ok { background: var(--ok) !important; color: #fff !important; }





.sentence-box .ch.is-bad { background: var(--bad) !important; color: #fff !important; animation: shake .35s; }





.sentence-box .ch.is-reveal { background: var(--star); border-color: var(--star-deep); }











/* 连连看连线感 */





.match-pick {





  outline: 3px solid var(--grape) !important;





  background: var(--grape) !important;





  color: #fff !important;





}











/* 大厅计数徽章 */





.hall-count {





  font-variant-numeric: tabular-nums;





  opacity: .85;





}











/* 背景上加一层半透明遮罩保证可读性 */





.app-body[data-nav="pinyin"]::before,





.app-body[data-nav="hanzi"]::before,





.app-body[data-nav="poem"]::before,





body.theme-pinyin::before,





body.theme-hanzi::before,





body.theme-poem::before {





  content: '';





  position: fixed;





  inset: 0;





  background: rgba(255,247,236,.32);





  z-index: -1;





  pointer-events: none;





}











/* ---------- 卡片墙缩略图 ---------- */





.browse-chip {





  display: flex;





  flex-direction: column;





  align-items: center;





  justify-content: center;





  gap: 8px;





  background: rgba(255,255,255,.55);





  border: 2.5px solid rgba(74,55,40,.5);





  border-radius: var(--r-md);





  box-shadow: var(--stk-1);





  cursor: pointer;





  transition: transform .12s ease, background .12s ease;





  padding: 12px 10px;





  text-align: center;





  min-height: 118px;





}





.browse-chip:hover { transform: translateY(-3px); background: rgba(255,255,255,.7); }





.browse-chip.is-done { border-color: rgba(52,199,174,.6); background: rgba(52,199,174,.12); }





.browse-chip .bc-main {





  font-family: var(--font-kai);





  font-weight: 700;





  font-synthesis: none;





  font-size: clamp(32px, 4.5vw, 46px);





  line-height: 1.2;





  letter-spacing: .06em;





  color: var(--ink);





}





.browse-chip .bc-py {





  font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;





  font-size: clamp(18px, 3vw, 24px);





  color: var(--ink);





  font-weight: 600;





  font-synthesis: none;





  letter-spacing: .02em;





  text-shadow: 0 0 8px rgba(255,255,255,1), 0 0 16px rgba(255,255,255,.85), 0 1px 3px rgba(255,255,255,.9);





}





.browse-chip .bc-tian {





  width: clamp(72px, 16vw, 100px);





  height: clamp(72px, 16vw, 100px);





  flex: none;





}





.browse-chip .bc-sgrid,





.browse-chip .py-grid {





  width: clamp(120px, 30vw, 200px) !important;





}





.browse-chip .bc-tian .tian-char {





  font-size: clamp(36px, 5vw, 48px);





  color: var(--ink);





}











/* ---------- 卡片墙网格 ---------- */





.browse-grid {





  display: grid;





  grid-template-columns: repeat(3, 1fr);





  gap: clamp(8px, 1.5vw, 14px);





  padding: clamp(8px, 2vw, 16px);





}





@media (max-width: 360px) {





  .browse-grid { grid-template-columns: repeat(2, 1fr); }





}

















/* ============================================================





   进阶学习馆 · 语文课本版式





   ============================================================ */





.adv-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); }





@media (max-width: 720px) { .adv-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }











.adv-hub {





  display: flex;





  flex-direction: column;





  gap: 12px;





  padding-bottom: 20px;





}





.adv-hero {





  display: flex;





  align-items: center;





  gap: 14px;





  padding: 18px 16px;





  border-radius: var(--r-xl);





  background: linear-gradient(135deg, var(--grape-soft, #f3e8ff), #fff);





  border: 3px solid var(--ink);





  box-shadow: var(--stk-1);





  margin-bottom: 6px;





}





.adv-hero-emoji { font-size: clamp(40px, 8vw, 56px); line-height: 1; }





.adv-hero-title {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(18px, 3.5vw, 24px);





}





.adv-hero-sub {





  font-size: 13px;





  color: var(--ink-soft);





  font-weight: 700;





  margin-top: 4px;





  line-height: 1.5;





}





.adv-entry {





  background-image: none !important;





  background: rgba(255,255,255,.35) !important;





}





.adv-entry .mi-icon {





  width: 56px; height: 56px;





  border-radius: 16px;





  display: grid; place-items: center;





  font-size: 28px;





  border: 2.5px solid var(--ink);





  box-shadow: var(--stk-1);





  flex: none;





}











/* ---------- 课本练习纸 tb-sheet ---------- */





.tb-sheet {





  max-width: 720px;





  margin: 0 auto;





  background:





    linear-gradient(180deg, #FFFEFB 0%, #FFF9F0 100%);





  border: 2.5px solid var(--ink);





  border-radius: 6px;





  box-shadow: var(--stk-1), 0 0 0 5px #fff, 0 0 0 7px var(--ink);





  padding: clamp(16px, 3vw, 28px) clamp(14px, 3vw, 32px) 20px;





  position: relative;





  min-height: 420px;





}





.tb-sheet-head {





  display: flex;





  flex-wrap: wrap;





  align-items: baseline;





  justify-content: space-between;





  gap: 8px;





  margin-bottom: 8px;





}





.tb-brand {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(16px, 2.8vw, 20px);





  color: var(--han-deep, #C47A00);





  letter-spacing: .08em;





}





.tb-progress {





  font-size: 13px;





  font-weight: 700;





  color: var(--ink-soft);





}





.tb-progress b { color: var(--han-deep, #C47A00); font-size: 16px; }





.tb-sheet-rule {





  height: 3px;





  background: linear-gradient(90deg, var(--han-main, #FFAF33), var(--star, #FFD25E) 50%, transparent);





  border-radius: 2px;





  margin-bottom: 16px;





}





.tb-sheet-foot {





  margin-top: 22px;





  padding-top: 10px;





  border-top: 1.5px dashed var(--ink-faint, #C4AC90);





  text-align: center;





  font-size: 11.5px;





  color: var(--ink-faint, #C4AC90);





  font-weight: 700;





  letter-spacing: .12em;





}











/* 习题头：一、我会组词 */





.tb-ex-head {





  display: flex;





  flex-wrap: wrap;





  align-items: baseline;





  gap: 8px 12px;





  margin-bottom: 16px;





}





.tb-ex-no {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(18px, 3vw, 22px);





  color: var(--han-deep, #C47A00);





}





.tb-ex-title {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(17px, 2.8vw, 21px);





  color: var(--ink);





  letter-spacing: .06em;





}





.tb-ex-tip {





  font-size: 13px;





  color: var(--ink-soft);





  font-weight: 700;





  width: 100%;





}











/* ---------- 组词：田字格 + 选项 ---------- */





.tb-word-stage {





  display: flex;





  flex-wrap: wrap;





  align-items: center;





  gap: clamp(14px, 3vw, 28px);





  margin-bottom: 20px;





  padding: 14px;





  background: rgba(255,255,255,.55);





  border: 2px solid var(--ink-faint, #C4AC90);





  border-radius: 8px;





}





.tb-tian-wrap {





  display: flex;





  flex-direction: column;





  align-items: center;





  gap: 8px;





  flex: none;





}





.tb-tian {





  width: clamp(110px, 26vw, 150px);





  height: clamp(110px, 26vw, 150px);





  cursor: pointer;





}





.tb-tian .tian-char { font-size: clamp(64px, 16vw, 96px); }





.tb-py-line {





  font-family: var(--font-pinyin, var(--font-body));





  font-size: clamp(16px, 2.8vw, 20px);





  font-weight: 700;





  color: var(--pin-deep, #1a7a4c);





  letter-spacing: .06em;





  cursor: pointer;





}





.tb-word-hint { flex: 1; min-width: 160px; }





.tb-word-label {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(16px, 2.8vw, 20px);





  margin-bottom: 8px;





}





.tb-sentence {





  font-size: clamp(15px, 2.6vw, 18px);





  color: var(--ink-soft);





  line-height: 1.6;





}











/* 课本选择题 A B C */





.tb-choices {





  display: flex;





  flex-direction: column;





  gap: 10px;





}





.tb-choices-inline {





  flex-direction: row;





  flex-wrap: wrap;





}





.tb-choice {





  display: flex;





  align-items: center;





  gap: 12px;





  width: 100%;





  min-height: 64px;





  padding: 10px 14px;





  background: #fff;





  border: 2.5px solid var(--ink);





  border-radius: 8px;





  box-shadow: 2px 2px 0 rgba(74,55,40,.12);





  cursor: pointer;





  font: inherit;





  color: inherit;





  text-align: left;





  transition: transform .1s ease, box-shadow .1s ease, background .15s;





}





.tb-choices-inline .tb-choice {





  width: auto;





  flex: 1 1 100px;





  min-width: 100px;





  justify-content: center;





}





.tb-choice:hover:not(:disabled) {





  transform: translateY(-2px);





  box-shadow: 3px 4px 0 rgba(74,55,40,.16);





}





.tb-choice:active:not(:disabled) { transform: translateY(1px); }





.tb-letter {





  flex: none;





  width: 36px; height: 36px;





  border-radius: 50%;





  background: var(--paper-deep, #FBEEDC);





  border: 2px solid var(--ink);





  display: grid; place-items: center;





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 15px;





}





.tb-choice-main {





  flex: 1;





  display: flex;





  flex-direction: column;





  gap: 2px;





  min-width: 0;





}





.tb-choice-word {





  font-size: clamp(20px, 3.5vw, 26px);





  font-weight: 700;





  line-height: 1.3;





}





.tb-choice-py {





  font-size: 13px;





  color: var(--ink-soft);





  font-weight: 700;





}





.tb-choice-emoji { font-size: 26px; flex: none; }





.tb-mark {





  flex: none;





  width: 28px;





  font-family: var(--font-display);





  font-weight: 900;





  font-size: 24px;





  text-align: center;





  line-height: 1;





}





.tb-choice.is-right {





  background: #E8F9EF !important;





  border-color: var(--ok-deep, #1E9B58) !important;





  box-shadow: 2px 2px 0 rgba(30,155,88,.25) !important;





}





.tb-choice.is-right .tb-letter {





  background: var(--ok, #45CE80);





  color: #fff;





  border-color: var(--ok-deep, #1E9B58);





}





.tb-choice.is-right .tb-mark { color: var(--ok-deep, #1E9B58); content: '√'; }





.tb-choice.is-right .tb-mark::before { content: '√'; }





.tb-choice.is-wrong {





  background: #FFF0F0 !important;





  border-color: var(--bad-deep, #D64545) !important;





  animation: shake .35s;





}





.tb-choice.is-wrong .tb-letter {





  background: var(--bad, #FF7E7E);





  color: #fff;





  border-color: var(--bad-deep, #D64545);





}





.tb-choice.is-wrong .tb-mark::before { content: '×'; color: var(--bad-deep, #D64545); }





.tb-choice.is-locked { cursor: default; opacity: .92; }





.tb-choice.is-locked:not(.is-right):not(.is-wrong) { opacity: .55; }











/* 反馈 */





.tb-feedback {





  min-height: 40px;





  margin-top: 14px;





  display: flex;





  flex-wrap: wrap;





  align-items: center;





  gap: 8px;





  justify-content: center;





  font-weight: 800;





}





.tb-ok {





  color: var(--ok-deep, #1E9B58);





  font-size: 17px;





  background: #E8F9EF;





  border: 2px solid var(--ok-deep, #1E9B58);





  border-radius: var(--r-pill);





  padding: 6px 16px;





}





.tb-no {





  display: inline-grid;





  place-items: center;





  width: 36px; height: 36px;





  border-radius: 50%;





  background: var(--bad, #FF7E7E);





  color: #fff;





  font-size: 22px;





  border: 2px solid var(--bad-deep, #D64545);





}





.tb-no-text {





  color: var(--ink);





  font-size: 15px;





}





.tb-no-text b { font-size: 22px; color: var(--han-deep, #C47A00); }











/* ---------- 古诗填空 ---------- */





.tb-poem-block {





  background: rgba(255,255,255,.6);





  border: 2px solid var(--ink-faint, #C4AC90);





  border-left: 6px solid var(--poem-main, #FF8CA2);





  border-radius: 6px;





  padding: clamp(14px, 3vw, 22px);





  margin-bottom: 18px;





  text-align: center;





}





.tb-poem-meta {





  display: flex;





  flex-wrap: wrap;





  justify-content: center;





  align-items: baseline;





  gap: 8px 14px;





  margin-bottom: 14px;





}





.tb-poem-title {





  font-size: clamp(18px, 3vw, 24px);





  font-weight: 700;





  letter-spacing: .1em;





}





.tb-poem-author {





  font-size: 13px;





  color: var(--ink-soft);





  font-weight: 700;





}





.tb-poem-line {





  font-size: clamp(26px, 5vw, 36px);





  font-weight: 700;





  line-height: 1.9;





  letter-spacing: .12em;





  display: flex;





  flex-wrap: wrap;





  justify-content: center;





  gap: 2px 4px;





}





/* 填空自绘格：上字/括号，下拼音（居中对齐） */





.tb-poem-line {





  display: flex;





  flex-wrap: wrap;





  justify-content: center;





  align-items: flex-end;





  gap: 6px 4px;





}





.tb-cell {





  display: inline-flex;





  flex-direction: column;





  align-items: center;





  justify-content: flex-end;





  min-width: 1.4em;





  line-height: 1.15;





}





.tb-cell-top {





  display: flex;





  align-items: center;





  justify-content: center;





  min-height: 1.3em;





  font-weight: 700;





  color: var(--ink);





  font-family: var(--font-kai);





}





.tb-cell-py {





  font-family: var(--font-pinyin, var(--font-body));





  font-size: clamp(12px, 2.2vw, 16px);





  font-weight: 600;





  color: var(--pin-deep, #1a7a4c);





  letter-spacing: .02em;





  text-align: center;





  white-space: nowrap;





  min-height: 1.1em;





}





.tb-blank-br {





  color: var(--poem-deep, #D64F6B);





  font-weight: 700;





  font-family: var(--font-kai);





  letter-spacing: .06em;





  padding: 0 .08em;





}





.tb-blank.filled .tb-blank-br,





.tb-blank.filled .tb-cell-top { color: var(--ok-deep, #1E9B58); }





.tb-blank.filled .tb-cell-py { color: var(--ok-deep, #1E9B58); }





.tb-fill-ch { display: inline-block; min-width: 1.15em; }





.tb-poem-pyline {





  margin-top: 4px;





  text-align: center;





  font-family: var(--font-kai);





  font-size: clamp(20px, 3.6vw, 28px);





  line-height: 1.9;





  letter-spacing: .04em;





  color: var(--ink);





}





.tb-poem-pyline .tb-ruby rt {





  font-size: 0.48em;





}





.tb-poem-py {





  margin-top: 10px;





  font-size: clamp(13px, 2.2vw, 15px);





  color: var(--pin-deep, #1a7a4c);





  font-weight: 700;





  letter-spacing: .04em;





}





.tb-poem-tip {





  margin-top: 8px;





  font-size: 13.5px;





  color: var(--ink-soft);





  font-weight: 600;





}





.tb-choice-char .tb-choice-word {





  font-size: clamp(28px, 5vw, 40px);





  line-height: 1;





}





.tb-choice-char {





  min-height: 72px;





}











/* ---------- 课文（拼音散文） ---------- */





.tb-lesson-title-block {





  text-align: center;





  margin-bottom: 18px;





  padding: 8px 0 4px;





}





.tb-lesson-emoji {





  font-size: clamp(40px, 8vw, 56px);





  line-height: 1;





  margin-bottom: 6px;





}





.tb-lesson-title {





  font-size: clamp(26px, 5vw, 36px);





  font-weight: 700;





  letter-spacing: .18em;





  margin: 0;





}





.tb-lesson-note {





  margin-top: 8px;





  font-size: clamp(14px, 2.4vw, 16px);





  color: var(--ink-soft);





  font-weight: 600;





  line-height: 1.55;





}











.tb-lesson-body {





  background: #fff;





  border: 2px solid var(--ink);





  border-radius: 4px;





  padding: clamp(16px, 3.5vw, 28px) clamp(14px, 3vw, 26px);





  margin-bottom: 16px;





  /* 课本横线格 */





  background-image: repeating-linear-gradient(





    180deg,





    transparent,





    transparent calc(clamp(48px, 9vw, 64px) - 1px),





    rgba(74,55,40,.08) calc(clamp(48px, 9vw, 64px) - 1px),





    rgba(74,55,40,.08) clamp(48px, 9vw, 64px)





  );





  background-position: 0 8px;





}





.tb-para {





  margin: 0 0 6px;





  padding: 6px 8px;





  border-radius: 6px;





  font-family: var(--font-kai);





  font-size: clamp(22px, 4vw, 28px);





  line-height: 1.95;





  letter-spacing: .04em;





  color: var(--ink);





  cursor: pointer;





  text-align: justify;





  text-align-last: left;





  transition: background .15s ease;





}





.tb-para:hover { background: rgba(255,255,255,.75); }





.tb-para.is-read {





  background: rgba(255, 226, 233, .55);





  box-shadow: inset 3px 0 0 var(--poem-main, #FF8CA2);





}





.tb-ruby {





  ruby-align: center;





  ruby-position: under;





  margin: 0 .5px;





  cursor: inherit;





}





.tb-ruby rt {





  font-family: var(--font-pinyin, var(--font-body));





  font-size: 0.46em;





  font-weight: 600;





  color: var(--pin-deep, #1a7a4c);





  letter-spacing: .02em;





}





.tb-punct { margin: 0 1px; }





.tb-ch { margin: 0 .5px; }











.tb-lesson-actions {





  display: flex;





  flex-wrap: wrap;





  gap: 10px;





  justify-content: center;





  margin-bottom: 4px;





}











/* ---------- 目录 ---------- */





.tb-toc {





  list-style: none;





  margin: 0;





  padding: 0;





  display: flex;





  flex-direction: column;





  gap: 8px;





}





.tb-toc-link {





  display: flex;





  align-items: center;





  gap: 12px;





  padding: 12px 14px;





  text-decoration: none;





  color: inherit;





  background: #fff;





  border: 2px solid var(--ink);





  border-radius: 6px;





  box-shadow: 2px 2px 0 rgba(74,55,40,.1);





  transition: transform .12s ease, box-shadow .12s ease;





}





.tb-toc-link:hover {





  transform: translateY(-2px);





  box-shadow: 3px 4px 0 rgba(74,55,40,.14);





  background: #FFFDF6;





}





.tb-toc-no {





  flex: none;





  width: 34px; height: 34px;





  border-radius: 50%;





  background: var(--pin-soft, #E8F4FF);





  border: 2px solid var(--pin-main, #34C7AE);





  color: var(--pin-deep, #0F8A72);





  display: grid; place-items: center;





  font-weight: 800;





  font-size: 15px;





}





.tb-toc-body {





  flex: 1;





  min-width: 0;





  display: flex;





  flex-direction: column;





  gap: 2px;





}





.tb-toc-title {





  font-size: clamp(17px, 3vw, 20px);





  font-weight: 700;





  letter-spacing: .08em;





}





.tb-toc-meta {





  font-size: 12.5px;





  color: var(--ink-soft);





  font-weight: 700;





}





.tb-toc-go {





  flex: none;





  font-size: 13px;





  font-weight: 800;





  color: var(--han-deep, #C47A00);





}











/* ---------- 结算 ---------- */





.tb-result-body {





  text-align: center;





  padding: 24px 8px 12px;





}





.tb-result-emoji { font-size: clamp(52px, 12vw, 72px); line-height: 1; }





.tb-result-title {





  font-family: var(--font-display);





  font-weight: 800;





  font-size: clamp(24px, 5vw, 32px);





  margin: 10px 0 6px;





}





.tb-result-score {





  font-size: 17px;





  font-weight: 700;





  color: var(--ink-soft);





}





.tb-result-score b {





  font-size: 32px;





  color: var(--han-deep, #C47A00);





  font-family: var(--font-display);





}





.tb-result-stars {





  margin: 14px 0 20px;





  font-size: clamp(22px, 4vw, 30px);





  letter-spacing: 4px;





  color: var(--ink-faint, #C4AC90);





}





.tb-result-stars .on { color: var(--star-deep, #E8A81C); }





.tb-result-actions {





  display: flex;





  flex-wrap: wrap;





  gap: 12px;





  justify-content: center;





}











@media (max-width: 520px) {





  .tb-word-stage { flex-direction: column; text-align: center; }





  .tb-word-hint { width: 100%; }





  .tb-choices-inline .tb-choice { flex: 1 1 30%; min-width: 88px; }





}





/* ---------- 散文目录（普通列表） ---------- */





.tb-toc {





  list-style: none;





  margin: 0 0 8px;





  padding: 0;





  display: flex;





  flex-direction: column;





  gap: 8px;





}





.tb-toc-row {





  display: flex;





  align-items: baseline;





  gap: 10px;





  padding: 12px 14px;





  background: #fff;





  border: 2px solid var(--ink);





  border-radius: 8px;





  box-shadow: 2px 2px 0 rgba(74,55,40,.08);





  text-decoration: none;





  color: inherit;





  transition: transform .12s ease, box-shadow .12s ease;





}





.tb-toc-row:hover {





  transform: translateY(-2px);





  box-shadow: 3px 4px 0 rgba(74,55,40,.12);





}





.tb-toc-idx {





  flex: none;





  min-width: 1.8em;





  font-family: var(--font-display);





  font-weight: 800;





  font-size: 15px;





  color: var(--han-deep, #C47A00);





  text-align: center;





}





.tb-toc-name {





  flex: 1;





  min-width: 0;





  font-family: var(--font-kai);





  font-size: clamp(18px, 3.2vw, 22px);





  font-weight: 700;





  letter-spacing: .06em;





  white-space: normal;





  word-break: break-word;





  line-height: 1.45;





}





.tb-toc-meta {





  flex: none;





  font-size: 12.5px;





  font-weight: 700;





  color: var(--ink-soft);





  white-space: nowrap;





}





.tb-toc-go {





  flex: none;





  font-size: 13px;





  font-weight: 800;





  color: var(--han-deep, #C47A00);





}





/* ---------- 组词练习整体放大 ---------- */





body.mode-word .tb-sheet {





  max-width: 880px;





  padding: clamp(20px, 4vw, 40px) clamp(18px, 4vw, 44px) 28px;





  min-height: 480px;





}





body.mode-word .tb-brand { font-size: clamp(18px, 3.2vw, 24px); }





body.mode-word .tb-progress { font-size: 15px; }





body.mode-word .tb-progress b { font-size: 20px; }





body.mode-word .tb-ex-no { font-size: clamp(22px, 3.6vw, 28px); }





body.mode-word .tb-ex-title { font-size: clamp(21px, 3.4vw, 27px); }





body.mode-word .tb-ex-tip { font-size: 15.5px; }





body.mode-word .tb-ex-head { margin-bottom: 22px; gap: 10px 16px; }











body.mode-word .tb-word-stage {





  gap: clamp(18px, 4vw, 40px);





  margin-bottom: 26px;





  padding: clamp(16px, 3vw, 28px);





  border-width: 3px;





}





body.mode-word .tb-tian-wrap { gap: 12px; }





body.mode-word .tb-tian {





  width: clamp(140px, 32vw, 210px);





  height: clamp(140px, 32vw, 210px);





  border-width: 3.5px;





}





body.mode-word .tb-tian .tian-char { font-size: clamp(84px, 22vw, 140px); }





body.mode-word .tb-py-line { font-size: clamp(20px, 3.4vw, 28px); }





body.mode-word .tb-word-label { font-size: clamp(20px, 3.4vw, 28px); margin-bottom: 12px; }





body.mode-word .tb-sentence { font-size: clamp(17px, 3vw, 22px); line-height: 1.7; }











body.mode-word .tb-choices { gap: 14px; }





body.mode-word .tb-choice {





  min-height: 84px;





  padding: 14px 20px;





  gap: 16px;





  border-width: 3px;





}





body.mode-word .tb-letter {





  width: 48px; height: 48px;





  font-size: 20px;





  border-width: 2.5px;





}





body.mode-word .tb-choice-word { font-size: clamp(26px, 4.5vw, 36px); }





body.mode-word .tb-choice-py { font-size: 16px; }





body.mode-word .tb-choice-emoji { font-size: 34px; }





body.mode-word .tb-mark { width: 36px; font-size: 30px; }





body.mode-word .tb-feedback { min-height: 48px; margin-top: 18px; }





body.mode-word .tb-ok { font-size: 19px; padding: 8px 20px; }





body.mode-word .tb-no { width: 44px; height: 44px; font-size: 26px; }





body.mode-word .tb-no-text { font-size: 17px; }





body.mode-word .tb-no-text b { font-size: 28px; }





body.mode-word .tb-sheet-foot { font-size: 13px; margin-top: 28px; }





/* ---------- 古诗填空整体放大 ---------- */





body.mode-fill .tb-sheet {





  max-width: 880px;





  padding: clamp(20px, 4vw, 40px) clamp(18px, 4vw, 44px) 28px;





  min-height: 480px;





}





body.mode-fill .tb-brand { font-size: clamp(18px, 3.2vw, 24px); }





body.mode-fill .tb-progress { font-size: 15px; }





body.mode-fill .tb-progress b { font-size: 20px; }





body.mode-fill .tb-ex-no { font-size: clamp(22px, 3.6vw, 28px); }





body.mode-fill .tb-ex-title { font-size: clamp(21px, 3.4vw, 27px); }





body.mode-fill .tb-ex-tip { font-size: 15.5px; }





body.mode-fill .tb-ex-head { margin-bottom: 22px; gap: 10px 16px; }











body.mode-fill .tb-poem-block {





  padding: clamp(18px, 3.5vw, 32px) clamp(16px, 3vw, 28px);





  margin-bottom: 24px;





  border-left-width: 8px;





}





body.mode-fill .tb-poem-title { font-size: clamp(22px, 4vw, 30px); }





body.mode-fill .tb-poem-author { font-size: 15px; }





body.mode-fill .tb-poem-meta { margin-bottom: 18px; }





body.mode-fill .tb-poem-line {





  font-size: clamp(32px, 6vw, 44px);





  line-height: 2;





  gap: 4px 8px;





}





body.mode-fill .tb-fill-ch { min-width: 1.2em; }





body.mode-fill .tb-blank { margin: 0 6px; font-size: 1em; }





body.mode-fill .tb-poem-pyline {





  font-size: clamp(26px, 4.8vw, 36px);





  line-height: 2;





  margin-top: 8px;





}





body.mode-fill .tb-poem-pyline .tb-ruby rt { font-size: 0.46em; }





body.mode-fill .tb-poem-tip { font-size: 16px; margin-top: 12px; }











body.mode-fill .tb-choices { gap: 14px; }





body.mode-fill .tb-choice {





  min-height: 84px;





  padding: 14px 20px;





  gap: 16px;





  border-width: 3px;





}





body.mode-fill .tb-letter {





  width: 48px; height: 48px;





  font-size: 20px;





  border-width: 2.5px;





}





body.mode-fill .tb-choice-char .tb-choice-word { font-size: clamp(36px, 7vw, 52px); }





body.mode-fill .tb-choice-char { min-height: 88px; }





body.mode-fill .tb-mark { width: 36px; font-size: 30px; }





body.mode-fill .tb-feedback { min-height: 48px; margin-top: 18px; }





body.mode-fill .tb-ok { font-size: 19px; padding: 8px 20px; }





body.mode-fill .tb-no { width: 44px; height: 44px; font-size: 26px; }





body.mode-fill .tb-no-text { font-size: 17px; }





body.mode-fill .tb-no-text b { font-size: 28px; }





body.mode-fill .tb-sheet-foot { font-size: 13px; margin-top: 28px; }





body.mode-fill .tb-cell-py { font-size: clamp(14px, 2.6vw, 20px); }





body.mode-fill .tb-cell { min-width: 1.5em; }





/* ---------- 拼音散文：目录 + 阅读页整体放大 ---------- */





body.mode-prose .tb-sheet {





  max-width: 900px;





  padding: clamp(20px, 4vw, 40px) clamp(18px, 4vw, 44px) 28px;





  min-height: 460px;





}





body.mode-prose .tb-brand { font-size: clamp(18px, 3.2vw, 24px); }





body.mode-prose .tb-progress { font-size: 15px; }





body.mode-prose .tb-ex-no { font-size: clamp(22px, 3.6vw, 28px); }





body.mode-prose .tb-ex-title { font-size: clamp(21px, 3.4vw, 27px); }





body.mode-prose .tb-ex-tip { font-size: 15.5px; }





body.mode-prose .tb-ex-head { margin-bottom: 22px; }











/* 目录条目 */





body.mode-prose .tb-toc {





  gap: 10px;





  margin-bottom: 12px;





  /* 目录两列 */





  display: grid;





  grid-template-columns: repeat(2, minmax(0, 1fr));





  align-items: start;





}





body.mode-prose .tb-toc > li { break-inside: avoid; }





@media (max-width: 640px) {





  body.mode-prose .tb-toc { grid-template-columns: 1fr; }





}





body.mode-prose .tb-toc-link,





body.mode-prose .tb-toc-row {





  padding: 16px 18px;





  gap: 14px;





  border-width: 3px;





  border-radius: 10px;





}





body.mode-prose .tb-toc-no,





body.mode-prose .tb-toc-idx {





  min-width: 40px; height: 40px;





  width: 40px;





  font-size: 18px;





  border-width: 2.5px;





}





body.mode-prose .tb-toc-title,





body.mode-prose .tb-toc-name {





  font-size: clamp(22px, 3.8vw, 28px);





  letter-spacing: .08em;





  white-space: normal;





  word-break: break-word;





  line-height: 1.4;





}





body.mode-prose .tb-toc-meta {





  font-size: 15px;





}





body.mode-prose .tb-toc-go {





  font-size: 16px;





}











/* 课文标题区 */





body.mode-prose .tb-lesson-emoji { font-size: clamp(48px, 10vw, 68px); }





body.mode-prose .tb-lesson-title {





  font-size: clamp(32px, 6vw, 44px);





  letter-spacing: .2em;





}





body.mode-prose .tb-lesson-note {





  font-size: clamp(16px, 2.8vw, 20px);





  margin-top: 12px;





}





body.mode-prose .tb-lesson-title-block { margin-bottom: 24px; }











/* 课文正文 */





body.mode-prose .tb-lesson-body {





  padding: clamp(20px, 4vw, 36px) clamp(16px, 3.5vw, 32px);





  margin-bottom: 20px;





}





body.mode-prose .tb-para {





  font-size: clamp(26px, 4.2vw, 34px);





  line-height: 2.1;





  margin-bottom: 10px;





  padding: 8px 10px;





}





body.mode-prose .tb-ruby rt {





  font-size: 0.48em;





}





body.mode-prose .tb-lesson-actions { gap: 14px; }





body.mode-prose .tb-lesson-actions .btn {





  min-height: 56px;





  font-size: 17px;





  padding: 12px 24px;





}





body.mode-prose .tb-sheet-foot { font-size: 13px; margin-top: 28px; }





body.mode-prose .tb-toc-row { padding: 14px 12px; gap: 10px; }





body.mode-prose .tb-toc-go { display: none; }





/* 古诗填空：诗句区带原诗配图背景 */





.tb-poem-block.poem-has-bg {





  position: relative;





  overflow: hidden;





  background-color: #fff;





  background-size: cover;





  background-position: center;





  border: 3px solid var(--ink);





  border-left-width: 8px;





  border-radius: 12px;





  min-height: 180px;





}





.tb-poem-block.poem-has-bg::before {





  content: '';





  position: absolute;





  inset: 0;





  background: linear-gradient(





    180deg,





    rgba(255,250,240,.72) 0%,





    rgba(255,247,236,.55) 45%,





    rgba(255,247,236,.68) 100%





  );





  z-index: 0;





  pointer-events: none;





}





.tb-poem-block.poem-has-bg > * {





  position: relative;





  z-index: 1;





}





body.mode-fill .tb-poem-block.poem-has-bg {





  min-height: 220px;





  box-shadow: var(--stk-1);





}





/* ---------- 主页整体背景壁纸 ---------- */





html:has(body.home-has-bg) {





  background: var(--paper, #FFF7EC) url('../assets/home-bg/home.webp') center center / cover fixed no-repeat;





}





body.home-has-bg {





  background-color: transparent;





  background-image: none;





  /* 不再叠过重蒙层，保证壁纸可见 */





}





body.home-has-bg::before {





  content: '';





  position: fixed;





  inset: 0;





  background: rgba(255, 247, 236, .28);





  z-index: 0;





  pointer-events: none;





}





/* 内容压在蒙层之上（不要覆盖 fixed 弹层） */





body.home-has-bg > *:not(.modal-mask):not(.toast) {





  position: relative;





  z-index: 1;





}





/* 登录等弹层必须相对视口居中 */





body.home-has-bg > .modal-mask,





.modal-mask {





  position: fixed !important;





  inset: 0 !important;





  z-index: 200 !important;





  display: grid;





  place-items: center;





  padding: 18px;





}





@media (max-width: 720px) {





  html:has(body.home-has-bg) {





    background-attachment: scroll;





  }





}











/* ---------- 进阶馆四入口：仅背景 + 居中汉字，图尽量完整 ---------- */





.adv-quick {





  grid-template-columns: repeat(4, minmax(0, 1fr));





}





@media (max-width: 720px) {





  .adv-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }





}





.qc-bg-word,





.qc-bg-fill,





.qc-bg-prose,





.qc-bg-me {





  min-height: 0;





  aspect-ratio: 1024 / 640;





  display: flex;





  flex-direction: column;





  align-items: center;





  justify-content: center;





  text-align: center;





  padding: 12px 10px;





  gap: 0;





  background-size: cover;





  background-position: center;





  background-repeat: no-repeat;





  position: relative;





  overflow: hidden;





  border-width: 3px;





}





/* 极轻蒙层，只保文字可读，不挡画面 */





.qc-bg-word::before,











.qc-bg-fill::before,





.qc-bg-prose::before,





.qc-bg-me::before {





  content: '';





  position: absolute;





  inset: 0;





  background: rgba(255, 252, 245, .22);





  pointer-events: none;





}





.qc-bg-word > *,





.qc-bg-fill > *,





.qc-bg-prose > *,





.qc-bg-me > * {





  position: relative;





  z-index: 1;





}





.qc-bg-word  { background-image: url('../assets/adv-bg/word.webp'); }





.qc-bg-fill  { background-image: url('../assets/adv-bg/fill.webp'); }





.qc-bg-prose { background-image: url('../assets/adv-bg/prose.webp'); }





.qc-bg-me    { background-image: url('../assets/adv-bg/me.webp'); }











/* 只留汉字，居中放大 */





.adv-quick .qc-icon { display: none !important; }





.adv-quick .qc-desc { display: none !important; }





.qc-bg-word .qc-name,





.qc-bg-fill .qc-name,





.qc-bg-prose .qc-name,





.qc-bg-me .qc-name {





  font-size: clamp(18px, 2.6vw, 24px);





  font-weight: 800;





  letter-spacing: .12em;





  color: var(--ink);





  text-shadow:





    0 0 10px rgba(255,255,255,.95),





    0 0 20px rgba(255,255,255,.8),





    0 1px 0 rgba(255,255,255,.9);





  line-height: 1.35;





}





.adv-quick .quick-card {





  gap: 0;





}


/* ---------- 拼音散文：目录页 + 阅读页壁纸 ---------- */


html:has(body.mode-prose) {


  background: var(--paper, #FFF7EC) url('../assets/prose-bg/prose.webp') center top / cover fixed no-repeat;


}


body.mode-prose {


  background-color: transparent;


  background-image: none;


}


body.mode-prose::before {


  content: '';


  position: fixed;


  inset: 0;


  background: rgba(255, 247, 236, .30);


  z-index: 0;


  pointer-events: none;


}


body.mode-prose > *:not(.modal-mask):not(.toast) {


  position: relative;


  z-index: 1;


}


body.mode-prose > .modal-mask {


  position: fixed !important;


  inset: 0 !important;


  z-index: 200 !important;


}


@media (max-width: 720px) {


  html:has(body.mode-prose) { background-attachment: scroll; }


}




/* ---------- 描红（空心虚线手写） ---------- */

.app-bar-actions {

  display: flex;

  align-items: center;

  gap: 6px;

}

.app-bar-btn { position: relative; }
.app-bar-btn.is-on {

  background: var(--han-main, #FFAF33);

  border-color: var(--ink);

  box-shadow: var(--stk-1);

}

.app-bar-btn.is-on::after {

  content: '';

  position: absolute;

  left: 6px; right: 6px; bottom: 4px;

  height: 3px;

  border-radius: 2px;

  background: var(--ink);

}



.py-stage,

.han-tian {

  position: relative;

}

.trace-hollow-svg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  z-index: 2;

  pointer-events: none;

}

.py-grid .py-letter.is-hollow {
  /* CSS fill 会盖掉 SVG 的 fill 属性，这里必须用 CSS 再关一次 */
  fill: none;
  stroke: rgba(74, 55, 40, .55);
  stroke-width: 2.4;
  stroke-dasharray: 5 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  font-weight: 700;
}

.trace-canvas {

  position: absolute;

  inset: 0;

  z-index: 5;

  touch-action: none;

  cursor: crosshair;

  border-radius: inherit;

}

.trace-clear {

  position: absolute;

  right: 8px;

  bottom: 8px;

  z-index: 6;

  min-height: 40px !important;

  padding: 6px 14px !important;

  font-size: 14px !important;

  background: rgba(255,255,255,.92) !important;

  border: 2px solid var(--ink) !important;

  color: var(--ink) !important;

  box-shadow: var(--stk-1);

}

.trace-hint {

  position: absolute;

  left: 50%;

  top: 10px;

  transform: translateX(-50%);

  z-index: 6;

  pointer-events: none;

  background: rgba(255,255,255,.88);

  border: 2px dashed var(--ink-faint, #C4AC90);

  border-radius: var(--r-pill);

  padding: 4px 14px;

  font-size: 13px;

  font-weight: 800;

  color: var(--ink-soft);

  transition: opacity .25s ease;

  white-space: nowrap;

}

body.trace-on .app-main {

  /* 描红时避免整页抢滑动 */

  touch-action: pan-y;

}
/* 描红：与「读一读」并排、整体居中（修 py-say 的 margin:auto 把描红挤到右边） */
.say-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
.say-row .py-say {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: auto;
  min-width: clamp(120px, 28vw, 188px);
}
.say-row .btn-trace {
  margin: 0;
  flex: none;
}
.btn-trace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: clamp(48px, 8vmin, 56px);
  min-width: clamp(120px, 20vmin, 168px);
  padding: 12px 24px;
  border: 3px solid var(--ink);
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(16px, 2.6vw, 22px);
  letter-spacing: .08em;
  cursor: pointer;
  box-shadow: var(--stk-1, 0 4px 0 rgba(74,55,40,.16));
  transition: transform .12s ease, background .15s ease;
}
.btn-trace:hover { transform: translateY(-2px); }
.btn-trace:active { transform: translateY(1px); }
.btn-trace.is-on {
  background: var(--star, #FFD25E);
  box-shadow: var(--stk-1, 0 4px 0 rgba(74,55,40,.16)), inset 0 0 0 2px rgba(255,255,255,.5);
}
.han-trace {
  /* 汉字页与蜜橘读一读呼应：默认淡橘描边底 */
  background: var(--han-soft, #FFF1DC);
}
.han-trace.is-on {
  background: var(--han-main, #FFAF33);
}