/* 基础样式，移动端优先 */
:root{--bg:#0f1220;--panel:#171a2b;--text:#e8ebff;--muted:#9aa3c7;--pri:#5b8cff;--ok:#25d366;--warn:#ffcf5b;--err:#ff6b6b;--btn:#232645;--accent:#ff77c8}
/* 粉萌主题 */
.theme--pink{--bg:#291528;--panel:#3a1d39;--text:#ffeef9;--muted:#f3bada;--pri:#ff77c8;--ok:#ff93d3;--btn:#4a2041}
/* 方块(我的世界风格) */
.theme--block{--bg:#0d1410;--panel:#172118;--text:#e8ffe8;--muted:#9bd09b;--pri:#55aa55;--ok:#79ff79;--btn:#1a2a1a}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:"Noto Sans SC",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;background:linear-gradient(180deg,#0b0e1a,#121528 40%,#0b0e1a);color:var(--text)}
.app{min-height:100%;display:flex;flex-direction:column}

/* 动态画布与吉祥物 */
.fx-canvas{position:fixed;inset:0;pointer-events:none;z-index:0}
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:2}
.mascot{position:fixed;right:8px;bottom:96px;width:88px;height:88px;border-radius:20px;background:radial-gradient(120% 120% at 20% 20%,rgba(255,255,255,.25),rgba(255,255,255,.05) 40%,transparent),var(--panel);border:2px solid #2b3053;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;z-index:2;animation:catFloat 4s ease-in-out infinite}
.mascot__face{position:relative;width:58px;height:58px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.08));}
.eye{position:absolute;top:18px;width:10px;height:10px;border-radius:50%;background:#0a0c18;animation:blink 3s infinite}
.eye--l{left:14px}
.eye--r{right:14px}
.mouth{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;width:22px;height:10px;border-radius:0 0 14px 14px;background:#0a0c18}

/* 小猫咪精灵效果 */
.cat-ears{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:60px;height:20px}
.ear{position:absolute;width:16px;height:16px;background:var(--panel);border:2px solid #2b3053;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;transform-origin:bottom center}
.ear--l{left:8px;transform:rotate(-15deg)}
.ear--r{right:8px;transform:rotate(15deg)}
.ear::before{content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%);width:8px;height:8px;background:var(--pri);border-radius:50%}

.cat-tail{position:absolute;right:-15px;bottom:20px;width:20px;height:40px;background:var(--panel);border:2px solid #2b3053;border-radius:20px 0 0 20px;transform-origin:left center;animation:tailWag 2s ease-in-out infinite}

@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(0.1)}}
@keyframes catFloat{0%,100%{transform:translateY(0px) rotate(0deg)}50%{transform:translateY(-8px) rotate(1deg)}}
@keyframes tailWag{0%,100%{transform:rotate(0deg)}25%{transform:rotate(15deg)}75%{transform:rotate(-10deg)}}

.app__header,.app__footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(0,0,0,.2);backdrop-filter:saturate(150%) blur(8px);position:sticky;z-index:10}
.app__header{top:0}
.app__footer{bottom:0}
.app__title{font-weight:700;letter-spacing:.5px}
.app__actions{display:flex;gap:8px}

.app__main{flex:1;display:flex;flex-direction:column;gap:16px;padding:16px}

/* 游戏区域 */
.game-section{background:var(--panel);border:1px solid #2b3053;border-radius:16px;padding:16px;margin-bottom:16px}
.learning-section{background:var(--panel);border:1px solid #2b3053;border-radius:16px;padding:16px}
.section-title{font-size:18px;font-weight:700;color:var(--text);margin-bottom:12px;text-align:center}

/* 学习标签页 */
.learning-tabs{display:flex;gap:8px;margin-bottom:16px;justify-content:center}
.tab-btn{background:var(--btn);color:var(--text);border:none;border-radius:8px;padding:8px 16px;font-size:14px;cursor:pointer;transition:all 0.2s}
.tab-btn.active{background:var(--pri);color:#fff}
.tab-btn:hover{background:var(--pri);opacity:0.8}

.tab-content{display:none}
.tab-content.active{display:block}

/* 声母韵母网格 */
.phonetic-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(60px, 1fr));gap:6px;max-height:none;overflow:visible}
.phonetic-item{background:var(--btn);color:var(--text);border:1px solid #2d3357;border-radius:6px;padding:8px 6px;text-align:center;cursor:pointer;transition:all 0.2s;font-size:14px;font-weight:600;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:50px}
.phonetic-item:hover{background:var(--pri);color:#fff;transform:scale(1.05)}
.phonetic-item:active{transform:scale(0.95)}
.phonetic-pinyin{font-size:16px;font-weight:700;margin-bottom:2px}
.phonetic-word{font-size:12px;opacity:0.8}

/* 背景漂浮元素 */
.bg-floating{position:fixed;inset:0;pointer-events:none;z-index:1}
.bg-floating::before,.bg-floating::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);opacity:.18;animation:float 12s ease-in-out infinite}
.bg-floating::before{width:220px;height:220px;background:var(--pri);left:-40px;top:20%}
.bg-floating::after{width:280px;height:280px;background:var(--accent);right:-60px;bottom:10%}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

.hud{display:flex;gap:8px}
.hud__item{flex:1;background:var(--panel);border-radius:12px;padding:8px 10px;display:flex;align-items:center;justify-content:space-between;color:var(--muted)}
.hud__item b{color:var(--text)}

.card{margin-top:8px;background:linear-gradient(180deg,#171a2b,#0e1020);border:1px solid #22253b;border-radius:16px;padding:18px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card__pinyin{font-size:48px;font-weight:700;letter-spacing:1px}
.card__pinyin-upper{font-size:16px;color:#cfd6ff;opacity:.9;margin-top:4px}
.card__hanzi{font-size:36px;margin-top:12px;color:#d9e1ff}
.card__hint{margin-top:8px;color:var(--muted);font-size:14px}

.controls{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:10px}
.btn{flex:1;background:var(--btn);color:var(--text);border:none;border-radius:12px;padding:12px 14px;font-size:16px;box-shadow:0 4px 14px rgba(0,0,0,.25);transition:transform .06s ease,opacity .2s}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.5}
.btn--primary{background:linear-gradient(180deg,#5b8cff,#4a75ff)}
.btn--success{background:linear-gradient(180deg,#25d366,#1fb856)}
.btn--ghost{flex:0 0 auto;background:transparent;border:1px solid #2d3357}

/* 主题卡通化点缀 */
.theme--pink .mascot{border-color:#7d2a61}
.theme--pink .eye,.theme--pink .mouth{background:#2b0f27}
.theme--pink .bg-floating::before{background:#ff77c8}
.theme--pink .bg-floating::after{background:#ffa3da}
.theme--pink .ear{border-color:#7d2a61}
.theme--pink .cat-tail{border-color:#7d2a61}
.theme--block .mascot{border-color:#2a4b2a;background-image:linear-gradient(90deg,rgba(255,255,255,.06) 50%,transparent 50%),linear-gradient(0deg,rgba(255,255,255,.06) 50%,transparent 50%);background-size:10px 10px,10px 10px}
.theme--block .eye,.theme--block .mouth{background:#0b1a0b}
.theme--block .bg-floating::before{background:#55aa55}
.theme--block .bg-floating::after{background:#7bd17b}
.theme--block .ear{border-color:#2a4b2a}
.theme--block .cat-tail{border-color:#2a4b2a}

/* 吉祥物表情状态 */
.mascot--happy .mouth{height:12px;border-radius:14px;background:conic-gradient(from 180deg,#0a0c18 0 280deg,transparent 0),#0a0c18}
.mascot--sad .mouth{height:6px;bottom:18px;border-radius:14px 14px 0 0}
.mascot--wow .mouth{width:14px;height:14px;border-radius:50%}

.reward{min-height:64px;display:flex;align-items:center;justify-content:center;font-size:28px}
.reward__emoji{font-size:40px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4));animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1)}}

/* 过关动画 */
.pass-banner{margin:8px auto;padding:10px 12px;max-width:520px;border-radius:14px;text-align:center;background:linear-gradient(90deg,rgba(255,255,255,.06),transparent,rgba(255,255,255,.06));border:1px solid #2d3357;animation:shine 1.2s ease}
@keyframes shine{0%{opacity:0;transform:translateY(8px)}100%{opacity:1;transform:translateY(0)}}

.level-list{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;margin-top:4px;max-height:120px;overflow-y:auto}
.level-list__item{background:var(--panel);border:1px solid #232645;border-radius:8px;padding:6px;text-align:center;color:var(--muted);font-size:10px;min-height:24px;display:flex;align-items:center;justify-content:center}
.level-list__item--active{border-color:var(--pri);color:#cfe0ff}
.level-list__item--done{background:linear-gradient(180deg,#1a213e,#0f1531);color:#a4ffc9;border-color:#2d6b46}
.level-list__item::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor;opacity:0.3}
.level-list__item--active::before{opacity:1;background:var(--pri)}
.level-list__item--done::before{opacity:1;background:#a4ffc9}

/* 贴纸面板 */
.stickers{margin-top:12px;background:var(--panel);border:1px solid #2b3053;border-radius:14px;padding:10px}
.stickers__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#cfe0ff}
.stickers__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-height:0;overflow:hidden;transition:max-height .3s ease}
.stickers--open .stickers__grid{max-height:240px}
.sticker{aspect-ratio:1/1;background:#101326;border:1px solid #242a47;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;filter:grayscale(1) opacity(.6);transition:filter .2s}
.sticker--owned{filter:none}

/* 宝箱动画 */
.chest{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);width:120px;height:90px;z-index:3;pointer-events:none;opacity:0;transition:opacity .2s}
.chest__body{position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,#7a4b00,#553300);border:2px solid #2b1a00;border-radius:8px}
.chest__lid{position:absolute;left:0;right:0;bottom:56px;height:40px;background:linear-gradient(180deg,#a56b00,#7a4b00);border:2px solid #2b1a00;border-radius:8px;transform-origin:bottom center;transform:rotateX(0deg)}
.chest--show{opacity:1}
.chest--open .chest__lid{animation:openLid .9s ease forwards}
@keyframes openLid{0%{transform:rotateX(0deg)}60%{transform:rotateX(-70deg)}100%{transform:rotateX(-62deg)}}

.dialog{border:none;padding:0;background:transparent}
.dialog::backdrop{background:rgba(0,0,0,.55)}
.dialog__panel{background:var(--panel);border:1px solid #2b3053;border-radius:16px;padding:16px;color:var(--text)}
.dialog__menu{display:flex;justify-content:flex-end;margin-top:12px}

.toggle{display:flex;align-items:center;gap:8px;color:#cfd6ff}
.divider{height:1px;background:#2b3053;margin:12px 0}
.theme-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.theme-buttons{display:flex;gap:8px}

/* 诊断面板 */
.diagnostics{margin-top:10px;background:var(--panel);border:1px solid #2b3053;border-radius:12px;padding:12px}
.diag__title{font-weight:600;margin-bottom:8px;color:#cfe0ff}
.diag__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.diag__item{background:#101326;border:1px solid #242a47;border-radius:10px;padding:8px;color:var(--muted);display:flex;align-items:center;justify-content:space-between}
.diag__controls{display:flex;gap:8px;margin-top:10px}
.diag__log{margin-top:8px;color:#cfd6ff;font-size:12px;min-height:18px}

/* 彩带粒子层的通用样式（由脚本控制绘制） */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:3}
.emoji-drop{will-change:transform,opacity}

/* 移动端优化 */
@media (max-width: 768px){
  .mascot{right:4px;bottom:80px;width:70px;height:70px}
  .mascot__face{width:46px;height:46px}
  .eye{top:14px;width:8px;height:8px}
  .eye--l{left:11px}
  .eye--r{right:11px}
  .mouth{bottom:11px;width:18px;height:8px}
  .cat-ears{top:-6px;width:48px;height:16px}
  .ear{width:12px;height:12px}
  .ear--l{left:6px}
  .ear--r{right:6px}
  .ear::before{width:6px;height:6px}
  .cat-tail{right:-12px;bottom:16px;width:16px;height:32px}
  .phonetic-grid{grid-template-columns:repeat(auto-fit, minmax(50px, 1fr));gap:4px}
  .phonetic-item{min-height:40px;padding:6px 4px}
  .phonetic-pinyin{font-size:14px}
  .phonetic-word{font-size:10px}
}

@media (min-width: 640px){
  .app__main{max-width:520px;margin:0 auto}
}

/* 防止移动端横向滚动 */
html,body{overflow-x:hidden}
.app{min-height:100vh;overflow-x:hidden}