:root{
  /* 马卡龙护眼色系 */
  --pinyin-bg:#FFF3E8; --pinyin-deep:#E8A87C; --pinyin-soft:#FFE0C8;
  --literacy-bg:#FFF8D8; --literacy-deep:#D4B44A; --literacy-soft:#FFF0B0;
  --reading-bg:#E8F5E8; --reading-deep:#6AAA6A; --reading-soft:#D0EDD0;
  --math-bg:#E0F0FA; --math-deep:#5A9FCB; --math-soft:#C8E4F5;
  --english-bg:#F5E0EC; --english-deep:#C97AAA; --english-soft:#EDD0E0;
  --game-bg:#E0F5DC; --game-deep:#6AAA4A; --game-soft:#D0EDC8;
  --sport-bg:#FFF0E0; --sport-deep:#E89A5A; --sport-soft:#FFE0C8;
  --shop-bg:#F0E8F8; --shop-deep:#9A7ACB; --shop-soft:#E2D5F0;

  --bg:#F8FAF8; --card:#FFFFFF;
  --text:#4A5A5A; --text-soft:#7A8A8A; --text-light:#AAB8B8;
  --nav-bg:#FFFCF5; --nav-item:#F5F0E8;
  --star:#FFC94A; --star-deep:#E8A82A;
  --green-ok:#7AC8A0; --green-soft:#D8F0E4;
  --shadow:0 6px 20px rgba(74,90,90,.08); --shadow-soft:0 3px 10px rgba(74,90,90,.05);
  --radius:20px; --radius-sm:14px; --radius-lg:28px;
  --nav-w:20%;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  font-family:"PingFang SC","Microsoft YaHei","Heiti SC","黑体",sans-serif;
  background:var(--bg);color:var(--text);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;user-select:none;
}

/* ============ 整体布局 ============ */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh}

/* 顶部栏 */
.topbar{
  height:64px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(74,90,90,.06);z-index:100;
}
.topbar-left{display:flex;align-items:center;gap:16px}
.date-box{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--text)}
.weather-icon{font-size:22px}
.cloud-bubble{
  display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#fff,#F8F4FF);
  padding:8px 18px;border-radius:24px;box-shadow:var(--shadow-soft);
  font-size:14px;font-weight:600;color:var(--text-soft);max-width:420px;cursor:pointer;
  border:1.5px solid rgba(201,122,170,.15);transition:all .2s;
}
.cloud-bubble:hover{transform:scale(1.02);border-color:var(--english-soft)}
.cloud-bubble .cb-icon{font-size:20px;flex-shrink:0}
.cloud-bubble .cb-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cloud-bubble .play-mini{font-size:16px;opacity:.6;margin-left:4px}
.topbar-right{display:flex;align-items:center;gap:16px}
.stars-badge{
  display:flex;align-items:center;gap:6px;background:linear-gradient(135deg,#FFE89A,#FFC94A);
  padding:8px 20px;border-radius:24px;font-weight:800;color:#7A5A00;font-size:18px;
  box-shadow:var(--shadow-soft);
}
.stars-badge .star-icon{font-size:20px}
.progress-mini{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-soft);font-weight:600}
.progress-bar-mini{width:80px;height:8px;background:#E8E8E8;border-radius:4px;overflow:hidden}
.progress-fill-mini{height:100%;background:linear-gradient(90deg,var(--star),var(--star-deep));border-radius:4px;transition:width .4s}

/* 主体双栏 */
.body-row{flex:1;display:flex;overflow:hidden}

/* 左侧导航 */
.sidebar{
  width:var(--nav-w);min-width:200px;max-width:240px;flex-shrink:0;
  background:var(--nav-bg);border-right:1px solid rgba(74,90,90,.05);
  display:flex;flex-direction:column;padding:16px 12px;overflow-y:auto;
}
.sidebar::-webkit-scrollbar{display:none}
.sidebar-logo{
  text-align:center;padding:12px 0 16px;font-size:18px;font-weight:800;color:var(--text);
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.sidebar-logo .sl-emoji{font-size:26px}
.nav-list{display:flex;flex-direction:column;gap:6px;flex:1}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--radius-sm);
  cursor:pointer;transition:all .2s;font-weight:700;font-size:15px;color:var(--text);
  background:transparent;position:relative;
}
.nav-item:hover{background:var(--nav-item)}
.nav-item.active{background:#fff;box-shadow:var(--shadow-soft);color:var(--text)}
.nav-item.active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:60%;border-radius:0 4px 4px 0;background:var(--star-deep);
}
.nav-item .ni-icon{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0;transition:all .2s;
}
.nav-item .ni-label{flex:1}
.nav-item .ni-star{
  width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;background:#F0F0F0;color:var(--text-light);
}
.nav-item .ni-star.done{background:var(--star);color:#7A5A00}
.nav-item .ni-star.done::after{content:"⭐"}
.nav-item .ni-star:not(.done)::after{content:"◦"}
.nav-footer{padding:12px 8px;text-align:center;font-size:11px;color:var(--text-light)}
.nav-footer .nf-streak{font-size:14px;font-weight:800;color:var(--sport-deep);margin-top:4px}

/* 右侧主内容 */
.main{flex:1;overflow-y:auto;overflow-x:hidden;position:relative}
.main::-webkit-scrollbar{width:6px}
.main::-webkit-scrollbar-thumb{background:rgba(74,90,90,.12);border-radius:3px}
.page{min-height:100%;padding:24px 32px 40px;max-width:1100px}

/* 页面标题 */
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.page-title{font-size:26px;font-weight:800;display:flex;align-items:center;gap:10px}
.page-title .pt-icon{font-size:30px}
.page-sub{font-size:14px;color:var(--text-soft);margin-top:4px}
.page-star-tag{
  display:flex;align-items:center;gap:6px;background:#fff;padding:8px 18px;border-radius:20px;
  box-shadow:var(--shadow-soft);font-size:15px;font-weight:700;
}
.page-star-tag .pst-star{font-size:18px}

/* 通用卡片 */
.card{background:var(--card);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);margin-bottom:20px}
.card-soft{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-soft);margin-bottom:16px}

/* 大按钮 */
.big-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:56px;padding:14px 36px;border:none;border-radius:var(--radius-sm);
  font-size:18px;font-weight:800;font-family:inherit;cursor:pointer;
  transition:all .2s;color:#fff;box-shadow:var(--shadow-soft);
}
.big-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.big-btn:active{transform:translateY(0)}
.big-btn.green{background:linear-gradient(135deg,#8DD9A8,#5FAA78)}
.big-btn.blue{background:linear-gradient(135deg,#8DCEEA,#5A9FCB)}
.big-btn.orange{background:linear-gradient(135deg,#F5C499,#E8A87C)}
.big-btn.purple{background:linear-gradient(135deg,#C6B0E8,#9A7ACB)}
.big-btn.pink{background:linear-gradient(135deg,#E8C6D8,#C97AAA)}
.big-btn.yellow{background:linear-gradient(135deg,#FFE08A,#D4B44A);color:#5A4A00}
.big-btn.gray{background:#E0E4E4;color:var(--text-soft)}
.big-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

/* 模块主题色背景 */
.theme-pinyin .page-head .page-title{color:var(--pinyin-deep)}
.theme-pinyin{background:linear-gradient(180deg,var(--pinyin-bg) 0%,#fff 400px)}
.theme-literacy .page-head .page-title{color:var(--literacy-deep)}
.theme-literacy{background:linear-gradient(180deg,var(--literacy-bg) 0%,#fff 400px)}
.theme-reading .page-head .page-title{color:var(--reading-deep)}
.theme-reading{background:linear-gradient(180deg,var(--reading-bg) 0%,#fff 400px)}
.theme-math .page-head .page-title{color:var(--math-deep)}
.theme-math{background:linear-gradient(180deg,var(--math-bg) 0%,#fff 400px)}
.theme-english .page-head .page-title{color:var(--english-deep)}
.theme-english{background:linear-gradient(180deg,var(--english-bg) 0%,#fff 400px)}
.theme-game .page-head .page-title{color:var(--game-deep)}
.theme-game{background:linear-gradient(180deg,var(--game-bg) 0%,#fff 400px)}
.theme-sport .page-head .page-title{color:var(--sport-deep)}
.theme-sport{background:linear-gradient(180deg,var(--sport-bg) 0%,#fff 400px)}
.theme-shop .page-head .page-title{color:var(--shop-deep)}
.theme-shop{background:linear-gradient(180deg,var(--shop-bg) 0%,#fff 400px)}
.theme-stats .page-head .page-title{color:var(--sport-deep)}
.theme-stats{background:linear-gradient(180deg,var(--sport-bg) 0%,#fff 400px)}

/* 星星进度条 */
.star-progress{display:flex;align-items:center;gap:6px;margin:16px 0}
.sp-star{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:18px;background:#F0F0F0;transition:all .4s;
}
.sp-star.done{background:var(--star);box-shadow:0 2px 8px rgba(255,201,74,.4);animation:starPop .4s}
.sp-star.done::after{content:"⭐"}
.sp-star:not(.done)::after{content:"✩";color:#C8C8C8}
.sp-line{flex:1;height:3px;background:#E8E8E8;border-radius:2px}
.sp-line.done{background:var(--star)}
@keyframes starPop{0%{transform:scale(.5)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* 欢迎弹窗 */
.welcome-mask{position:fixed;inset:0;background:rgba(255,255,255,.5);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .3s}
.welcome-card{
  background:linear-gradient(135deg,#FFF8E8,#FFFAF5);border-radius:32px;padding:40px 48px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.1);animation:bounceIn .5s;max-width:400px;
  border:2px solid rgba(232,168,124,.2);
}
.welcome-emoji{font-size:60px;margin-bottom:12px}
.welcome-title{font-size:24px;font-weight:800;color:var(--text);margin-bottom:8px}
.welcome-text{font-size:15px;color:var(--text-soft);line-height:1.8}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes bounceIn{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.05);opacity:1}100%{transform:scale(1)}}
.welcome-out{animation:fadeOut .4s forwards}
@keyframes fadeOut{to{opacity:0;transform:scale(.9)}}

/* 撒花 */
.confetti{position:fixed;width:10px;height:10px;z-index:3000;pointer-events:none;border-radius:2px}
@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(400px) rotate(720deg);opacity:0}}

/* 星星飞入 */
.fly-star{position:fixed;font-size:28px;z-index:3000;pointer-events:none;animation:flyToCorner 1s ease-in forwards}
@keyframes flyToCorner{0%{transform:scale(1);opacity:1}100%{transform:translate(var(--dx),var(--dy)) scale(.3);opacity:.3}}

/* Toast */
.toast{position:fixed;top:80px;left:50%;transform:translateX(-50%);background:#fff;padding:12px 28px;border-radius:24px;font-size:15px;font-weight:700;color:var(--text);z-index:2500;box-shadow:var(--shadow);animation:slideDown .3s;display:flex;align-items:center;gap:8px}
.toast.success{border:2px solid var(--green-ok)}
.toast.warn{border:2px solid var(--star-deep)}
@keyframes slideDown{from{transform:translate(-50%,-30px);opacity:0}to{transform:translate(-50%,0);opacity:1}}

/* 模态框 */
.modal-mask{position:fixed;inset:0;background:rgba(74,90,90,.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}
.modal{background:#fff;border-radius:24px;padding:28px;max-width:460px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15);animation:pop .25s}
@keyframes pop{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.modal h3{font-size:20px;font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.modal-close{float:right;font-size:24px;cursor:pointer;color:var(--text-light);background:none;border:none;line-height:1}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions button{flex:1;min-height:50px}

/* ===== 拼音模块 ===== */
.pinyin-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.py-tab{padding:10px 20px;border-radius:22px;border:2px solid transparent;background:#fff;font-size:14px;font-weight:700;cursor:pointer;color:var(--text-soft);box-shadow:var(--shadow-soft);transition:all .15s;font-family:inherit}
.py-tab.active{background:var(--pinyin-deep);color:#fff}
.pinyin-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0}
.pinyin-card{
  background:linear-gradient(135deg,#fff,var(--pinyin-soft));border-radius:20px;padding:24px 12px;
  text-align:center;cursor:pointer;transition:all .2s;border:2px solid transparent;
  box-shadow:var(--shadow-soft);position:relative;
}
.pinyin-card:hover{transform:translateY(-4px);border-color:var(--pinyin-deep)}
.pinyin-card.played{border-color:var(--green-ok);background:linear-gradient(135deg,#fff,var(--green-soft))}
.pinyin-card.played .pc-check{opacity:1}
.pc-check{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:var(--green-ok);color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.pc-char{font-size:42px;font-weight:800;color:var(--text);line-height:1.2}
.pc-pinyin{font-size:14px;color:var(--pinyin-deep);font-weight:700;margin-top:6px}
.pc-tone{font-size:28px;margin-top:8px}

/* ===== 识字模块 ===== */
.hanzi-carousel{position:relative;overflow:hidden;border-radius:20px}
.hanzi-track{display:flex;transition:transform .35s ease}
.hanzi-card{min-width:100%;text-align:center;padding:20px 0}
.hc-emoji{font-size:48px;margin-bottom:8px}
.hc-char{font-size:100px;font-weight:800;color:var(--text);font-family:"Kaiti SC","STKaiti","楷体",serif;line-height:1.2}
.hc-pinyin{font-size:22px;color:var(--literacy-deep);font-weight:700;margin:8px 0}
.hc-word{font-size:14px;color:var(--text-soft)}
.hanzi-nav{display:flex;justify-content:center;gap:16px;margin-top:12px}
.hanzi-dot{width:10px;height:10px;border-radius:50%;background:#E0D8C8;cursor:pointer;transition:all .2s}
.hanzi-dot.active{background:var(--literacy-deep);width:28px;border-radius:5px}
.hanzi-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#fff;border:none;font-size:20px;cursor:pointer;box-shadow:var(--shadow-soft);z-index:5;color:var(--text);display:flex;align-items:center;justify-content:center}
.hanzi-arrow.left{left:8px}
.hanzi-arrow.right{right:8px}
.hanzi-counter{position:absolute;top:12px;right:16px;background:rgba(255,255,255,.8);padding:4px 14px;border-radius:16px;font-size:13px;font-weight:700;color:var(--text-soft)}

/* ===== 阅读模块 ===== */
.read-tabs{display:flex;gap:10px;margin-bottom:18px}
.read-tab{padding:12px 24px;border-radius:22px;border:2px solid transparent;background:#fff;font-size:15px;font-weight:700;cursor:pointer;color:var(--text-soft);box-shadow:var(--shadow-soft);transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:6px}
.read-tab.active{background:var(--reading-deep);color:#fff}
.poem-card{background:linear-gradient(135deg,#fff,var(--reading-soft));border-radius:20px;padding:28px;text-align:center;border:2px solid rgba(106,170,106,.15)}
.poem-title{font-size:24px;font-weight:800;margin-bottom:6px}
.poem-author{font-size:13px;color:var(--text-light);margin-bottom:16px}
.poem-lines{font-size:22px;line-height:2.4;font-family:"Kaiti SC","STKaiti","楷体",serif;color:var(--text)}
.poem-pinyin{font-size:13px;color:var(--reading-deep);line-height:1.8;margin-bottom:10px}
.poem-meaning{font-size:14px;color:var(--text-soft);padding:14px;background:rgba(255,255,255,.6);border-radius:14px;margin-top:14px;line-height:1.8}
.story-card{background:linear-gradient(135deg,#fff,var(--reading-soft));border-radius:20px;padding:24px;border:2px solid rgba(106,170,106,.15)}
.story-illustration{font-size:56px;text-align:center;margin-bottom:12px}
.story-title{font-size:20px;font-weight:800;text-align:center;margin-bottom:14px}
.story-text{font-size:15px;line-height:2;color:var(--text)}
/* 拼音注音格式：拼音在汉字上方 */
.ruby-text{display:inline-flex;flex-direction:column;align-items:center;margin:0 1px;vertical-align:top}
.rt{font-size:11px;color:var(--reading-deep);line-height:1.3;height:14px;margin-bottom:1px;font-family:monospace;white-space:nowrap}
.rc{font-size:17px;line-height:1.5}
/* 标点：占位一个空拼音行，使标点与汉字底部对齐 */
.rc-punct{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top;margin:0 1px}
.rc-punct .rt-empty{font-size:11px;height:14px;line-height:1.3;margin-bottom:1px;visibility:hidden}
.rc-punct .rc-punct-char{font-size:17px;line-height:1.5}
.idiom-card{background:linear-gradient(135deg,#fff,var(--reading-soft));border-radius:20px;padding:24px;border:2px solid rgba(106,170,106,.15)}
.idiom-title{font-size:26px;font-weight:800;text-align:center;color:var(--reading-deep);margin-bottom:6px}
.idiom-meaning{font-size:14px;color:var(--text-soft);text-align:center;margin-bottom:14px}

/* ===== 算术模块 ===== */
.hourglass-wrap{display:flex;align-items:center;gap:8px;background:var(--math-soft);padding:8px 18px;border-radius:22px}
.hourglass{font-size:24px;animation:rotateSand 2s infinite linear}
@keyframes rotateSand{0%{transform:rotate(0)}50%{transform:rotate(0)}100%{transform:rotate(180deg)}}
.hourglass-time{font-size:20px;font-weight:800;color:var(--math-deep);font-family:monospace;min-width:50px}
.math-q-area{text-align:center;padding:20px 0}
.math-q-num{font-size:14px;color:var(--text-light);font-weight:700;margin-bottom:12px}
.math-expr{font-size:48px;font-weight:800;color:var(--text);margin:16px 0;font-family:monospace}
.math-options{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.math-opt{
  min-width:90px;min-height:64px;padding:16px 24px;border-radius:18px;border:3px solid var(--math-soft);
  background:#fff;font-size:26px;font-weight:800;cursor:pointer;transition:all .15s;color:var(--text);font-family:monospace;
}
.math-opt:hover{border-color:var(--math-deep);transform:scale(1.06)}
.math-opt.correct{background:linear-gradient(135deg,#8DD9A8,#5FAA78);color:#fff;border-color:var(--green-ok)}
.math-opt.wrong{background:#F5C8C8;color:#C05050;border-color:#E0A0A0;animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.math-stats-row{display:flex;justify-content:center;gap:24px;margin:16px 0}
.math-stat{text-align:center}
.math-stat .ms-icon{font-size:24px}
.math-stat .ms-val{font-size:22px;font-weight:800;color:var(--text)}
.math-stat .ms-label{font-size:12px;color:var(--text-soft)}
.math-progress-dots{display:flex;gap:5px;justify-content:center;margin:10px 0}
.mp-dot{width:12px;height:12px;border-radius:50%;background:#E0E8E8;transition:all .2s}
.mp-dot.done{background:var(--green-ok)}
.mp-dot.wrong{background:#F5C8C8}
.mp-dot.cur{background:var(--math-deep);transform:scale(1.3)}

/* ===== 英语模块 ===== */
.eng-words{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.eng-word-card{
  background:linear-gradient(135deg,#fff,var(--english-soft));border-radius:18px;padding:20px 12px;text-align:center;
  cursor:pointer;transition:all .2s;border:2px solid transparent;box-shadow:var(--shadow-soft);position:relative;
}
.eng-word-card:hover{transform:translateY(-3px);border-color:var(--english-deep)}
.eng-word-card.played{border-color:var(--green-ok);background:linear-gradient(135deg,#fff,var(--green-soft))}
.ew-emoji{font-size:36px;margin-bottom:6px}
.ew-word{font-size:22px;font-weight:800;color:var(--text)}
.ew-trans{font-size:13px;color:var(--english-deep);font-weight:600;margin-top:4px}
.eng-sentence-card{background:linear-gradient(135deg,#fff,var(--english-soft));border-radius:18px;padding:24px;text-align:center;margin:16px 0;border:2px solid rgba(201,122,170,.15)}
.es-emoji{font-size:40px;margin-bottom:8px}
.es-en{font-size:24px;font-weight:800;color:var(--text);margin-bottom:6px}
.es-zh{font-size:15px;color:var(--english-deep);font-weight:600}
.eng-dialog-area{background:linear-gradient(135deg,#fff,var(--english-soft));border-radius:18px;padding:20px;margin:16px 0;border:2px solid rgba(201,122,170,.15)}
.dialog-q{font-size:16px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.dialog-emoji{font-size:32px}
.dialog-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:12px 0}
.dialog-img{
  background:#fff;border-radius:14px;padding:16px 8px;text-align:center;cursor:pointer;transition:all .15s;
  border:3px solid transparent;box-shadow:var(--shadow-soft);
}
.dialog-img:hover{border-color:var(--english-deep);transform:scale(1.04)}
.dialog-img.selected{border-color:var(--english-deep);background:var(--english-soft)}
.dialog-img .di-emoji{font-size:36px}
.dialog-img .di-text{font-size:13px;font-weight:600;margin-top:4px;color:var(--text)}

/* ===== 思维游戏 ===== */
.game-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:16px 0}
.game-tile{
  background:#fff;border-radius:20px;padding:24px;text-align:center;cursor:pointer;transition:all .2s;
  box-shadow:var(--shadow-soft);border:2px solid transparent;
}
.game-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--game-deep)}
.gt-icon{font-size:48px;margin-bottom:8px}
.gt-name{font-size:17px;font-weight:800}
.gt-desc{font-size:13px;color:var(--text-soft);margin-top:4px}

/* 记忆翻牌 */
.memo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:360px;margin:0 auto}
.memo-card{aspect-ratio:1;perspective:600px;cursor:pointer}
.memo-inner{width:100%;height:100%;position:relative;transition:transform .4s;transform-style:preserve-3d}
.memo-card.flip .memo-inner{transform:rotateY(180deg)}
.memo-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800}
.memo-front{background:linear-gradient(135deg,var(--game-soft),var(--game-deep));color:#fff;font-size:30px}
.memo-back{background:#fff;border:2px solid var(--game-deep);transform:rotateY(180deg);font-size:20px;color:var(--text);padding:4px;text-align:center}

/* 找不同 */
.spot-area{position:relative;max-width:420px;margin:0 auto}
.spot-img{width:100%;border-radius:16px;background:linear-gradient(135deg,#E8F5E8,#D0EDD0);aspect-ratio:4/3;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:12px;border-radius:16px}
.spot-cell{display:flex;align-items:center;justify-content:center;font-size:28px;border-radius:8px;cursor:pointer;transition:all .15s}
.spot-cell:hover{background:rgba(106,170,74,.1)}
.spot-cell.found{background:rgba(122,200,160,.3);animation:foundPulse .3s}
@keyframes foundPulse{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}

/* 物品分类 */
.sort-area{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.sort-bin{background:var(--game-soft);border-radius:16px;padding:16px;min-height:120px;text-align:center}
.sort-bin-title{font-size:14px;font-weight:700;color:var(--game-deep);margin-bottom:8px}
.sort-items{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.sort-item{font-size:32px;cursor:pointer;padding:8px;border-radius:12px;background:#fff;box-shadow:var(--shadow-soft);transition:all .15s}
.sort-item:hover{transform:scale(1.1)}
.sort-item.dragging{opacity:.5}

/* 时钟认读 */
.clock-area{text-align:center;padding:20px}
.clock-face{width:220px;height:220px;border-radius:50%;background:#fff;border:8px solid var(--game-deep);margin:16px auto;position:relative;box-shadow:var(--shadow)}
.clock-num{position:absolute;font-size:18px;font-weight:800;color:var(--text)}
.clock-hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:4px}
.clock-hand.hour{width:6px;height:55px;background:var(--text);margin-left:-3px}
.clock-hand.minute{width:4px;height:80px;background:var(--game-deep);margin-left:-2px}
.clock-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:16px;height:16px;border-radius:50%;background:var(--game-deep);z-index:5}
.clock-options{display:flex;gap:10px;justify-content:center;margin:16px 0;flex-wrap:wrap}
.clock-opt{padding:14px 24px;border-radius:16px;border:3px solid var(--game-soft);background:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:all .15s;font-family:inherit}
.clock-opt:hover{border-color:var(--game-deep)}
.clock-opt.correct{background:var(--green-soft);border-color:var(--green-ok);color:var(--green-ok)}
.clock-opt.wrong{background:#F5C8C8;border-color:#E0A0A0}

/* ===== 运动模块 ===== */
.sport-list{display:flex;flex-direction:column;gap:12px}
.sport-item{
  display:flex;align-items:center;gap:16px;background:#fff;border-radius:16px;padding:16px 20px;
  box-shadow:var(--shadow-soft);cursor:pointer;transition:all .15s;border:2px solid transparent;
}
.sport-item:hover{border-color:var(--sport-deep)}
.sport-item.done{background:var(--green-soft);border-color:var(--green-ok)}
.sport-check{
  width:40px;height:40px;border-radius:50%;border:3px solid var(--sport-deep);display:flex;
  align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:all .2s;
}
.sport-item.done .sport-check{background:var(--green-ok);border-color:var(--green-ok);color:#fff}
.sport-info{flex:1}
.sport-name{font-size:17px;font-weight:700}
.sport-desc{font-size:13px;color:var(--text-soft)}
.sport-emoji{font-size:32px}

/* ===== 奖励商店 ===== */
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.shop-card{
  background:#fff;border-radius:20px;padding:20px;text-align:center;box-shadow:var(--shadow-soft);
  transition:all .2s;border:2px solid transparent;cursor:pointer;
}
.shop-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--shop-deep)}
.shop-card.locked{opacity:.6}
.sc-icon{font-size:44px;margin-bottom:8px}
.sc-name{font-size:16px;font-weight:800}
.sc-desc{font-size:12px;color:var(--text-soft);margin:4px 0}
.sc-cost{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,#FFE89A,#FFC94A);color:#7A5A00;padding:6px 16px;border-radius:16px;font-weight:800;font-size:15px;margin-top:8px}
.sc-cost .sc-star{font-size:14px}

/* ===== 数据统计 ===== */
.stats-hero{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:16px 0}
.stat-card{background:#fff;border-radius:18px;padding:18px;text-align:center;box-shadow:var(--shadow-soft)}
.stat-icon{font-size:28px;margin-bottom:6px}
.stat-num{font-size:28px;font-weight:800;color:var(--text)}
.stat-label{font-size:12px;color:var(--text-soft)}
.stats-subjects{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.stats-subject{background:#fff;border-radius:18px;padding:16px;text-align:center;box-shadow:var(--shadow-soft)}
.stats-subject .ss-icon{font-size:28px}
.stats-subject .ss-num{font-size:22px;font-weight:800;color:var(--text)}
.stats-subject .ss-label{font-size:12px;color:var(--text-soft)}
.cal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:16px 0}
.cal-day-cell{aspect-ratio:1;background:#fff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:13px;font-weight:700;box-shadow:var(--shadow-soft);position:relative}
.cal-day-cell.done{background:linear-gradient(135deg,var(--green-soft),var(--green-ok));color:#fff}
.cal-day-cell.miss{background:#F0E8E8;color:#C0A0A0}
.cal-day-cell.today{outline:3px solid var(--star-deep)}
.cal-day-cell .cd-label{font-size:10px;opacity:.7}
.cal-month{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:16px 0;max-width:560px}
.cal-m-cell{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#fff;box-shadow:var(--shadow-soft)}
.cal-m-cell.done{background:var(--green-soft);color:var(--green-ok)}
.cal-m-cell.miss{background:#F0E8E8;color:#C0A0A0}
.cal-m-cell.empty{background:transparent;box-shadow:none}
.cal-m-cell.today{outline:2px solid var(--star-deep)}

/* 完成状态遮罩 */
.complete-overlay{text-align:center;padding:30px}
.complete-emoji{font-size:60px;margin-bottom:12px;animation:bounce 1s infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* 响应式（手机端兼容） */
@media(max-width:900px){
  .sidebar{min-width:64px;max-width:64px;width:64px}
  .sidebar-logo .sl-text{display:none}
  .nav-item .ni-label{display:none}
  .nav-item .ni-star{display:none}
  .nav-item{justify-content:center;padding:12px 4px}
  .nav-item .ni-icon{width:36px;height:36px;font-size:20px}
  .nav-footer{display:none}
  .page{padding:16px}
  .pinyin-cards{grid-template-columns:repeat(2,1fr)}
  .eng-words{grid-template-columns:1fr}
  .game-grid{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr}
  .stats-hero{grid-template-columns:repeat(2,1fr)}
  .stats-subjects{grid-template-columns:1fr}
  .cloud-bubble{max-width:180px;font-size:12px}
  .topbar{padding:0 12px}
  .date-box{font-size:13px}
  .stars-badge{font-size:15px;padding:6px 14px}
  .progress-mini{display:none}
  .page-title{font-size:20px}
  .math-expr{font-size:36px}
  .hc-char{font-size:72px}
}