/* ===== 学习大冒险 全局样式 ===== */
:root{
  --c-primary:#ff9f1c;
  --c-primary-dark:#e8890b;
  --c-teal:#2ec4b6;
  --c-blue:#3a86ff;
  --c-pink:#ff5e5e;
  --c-purple:#9b5de5;
  --c-green:#57cc02;
  --c-bg:#fdf3e3;
  --c-card:#ffffff;
  --c-text:#4a3b2a;
  --c-text-light:#9a8a75;
  --radius:22px;
  --shadow:0 6px 0 rgba(0,0,0,.08), 0 10px 24px rgba(0,0,0,.10);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  font-family:"PingFang SC","Microsoft YaHei"," Hiragino Sans GB",system-ui,sans-serif;
  background:
    radial-gradient(circle at 12% 8%,rgba(255,191,105,.35),transparent 34%),
    radial-gradient(circle at 88% 20%,rgba(46,196,182,.22),transparent 30%),
    radial-gradient(circle at 80% 92%,rgba(155,93,229,.16),transparent 32%),
    var(--c-bg);
  color:var(--c-text);
  min-height:100vh;
  user-select:none;
}
#app{max-width:600px;margin:0 auto;padding:14px 14px calc(28px + env(safe-area-inset-bottom));}

/* ===== 顶部栏 ===== */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:10px;
  padding:10px 4px;margin-bottom:12px;
  background:rgba(253,243,227,.92);backdrop-filter:blur(6px);
  border-bottom:2px dashed rgba(0,0,0,.06);
}
.topbar .tb-title{font-size:20px;font-weight:800;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.btn-back{
  border:none;background:var(--c-card);border-radius:14px;width:42px;height:42px;
  font-size:20px;box-shadow:var(--shadow);cursor:pointer;color:var(--c-text);flex-shrink:0;
}
.tb-wallet{display:flex;flex-direction:column;gap:2px;align-items:flex-end;flex-shrink:0;}
.tb-wallet .chip{
  background:var(--c-card);border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700;
  box-shadow:0 3px 0 rgba(0,0,0,.07);display:flex;align-items:center;gap:4px;
}

/* ===== 首页 ===== */
.hero{
  background:linear-gradient(135deg,#ffd166,#ff9f1c);
  border-radius:var(--radius);padding:20px 18px;color:#fff;
  box-shadow:var(--shadow);position:relative;overflow:hidden;margin-bottom:14px;
}
.hero::after{content:"🌈";position:absolute;font-size:64px;right:-6px;top:-10px;opacity:.9;transform:rotate(12deg);}
.hero h1{margin:0 0 4px;font-size:26px;letter-spacing:1px;}
.hero p{margin:0;font-size:14px;opacity:.95;}

.module-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.module-card{
  background:var(--c-card);border-radius:var(--radius);padding:18px 14px;text-align:center;
  box-shadow:var(--shadow);cursor:pointer;border:none;font-family:inherit;color:var(--c-text);
  transition:transform .12s;position:relative;
}
.module-card:active{transform:scale(.96);}
.module-card .m-icon{font-size:44px;line-height:1;margin-bottom:8px;}
.module-card .m-name{font-size:17px;font-weight:800;}
.module-card .m-sub{font-size:12px;color:var(--c-text-light);margin-top:4px;}
.module-card.m-english{border-top:6px solid var(--c-primary);}
.module-card.m-chinese{border-top:6px solid var(--c-pink);}
.module-card.m-math{border-top:6px solid var(--c-teal);}
.module-card.m-think{border-top:6px solid var(--c-purple);}
.module-card .m-lock{
  position:absolute;inset:0;border-radius:var(--radius);
  background:rgba(255,255,255,.72);backdrop-filter:blur(2px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-weight:800;font-size:14px;color:var(--c-text-light);cursor:default;
}

/* 每日任务 */
.section-title{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:800;margin:20px 2px 10px;}
.task-card{background:var(--c-card);border-radius:18px;padding:12px 14px;box-shadow:var(--shadow);margin-bottom:10px;display:flex;align-items:center;gap:12px;}
.task-card .t-icon{font-size:28px;}
.task-card .t-body{flex:1;min-width:0;}
.task-card .t-name{font-weight:700;font-size:15px;}
.task-card .t-state{font-size:12px;color:var(--c-text-light);margin-top:2px;}
.task-card.done{background:linear-gradient(135deg,#e7f9e4,#d5f5cf);}
.task-card .t-check{font-size:24px;}
.task-card .t-reward{font-size:13px;font-weight:800;color:var(--c-primary-dark);white-space:nowrap;}

/* ===== 通用页面 ===== */
.card{background:var(--c-card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:12px;}
.page-desc{font-size:13px;color:var(--c-text-light);margin:0 2px 12px;line-height:1.6;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:none;border-radius:16px;font-family:inherit;font-weight:800;cursor:pointer;
  padding:14px 22px;font-size:17px;color:#fff;
  box-shadow:0 5px 0 rgba(0,0,0,.14);transition:transform .1s;
}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.14);}
.btn.primary{background:var(--c-primary);}
.btn.teal{background:var(--c-teal);}
.btn.blue{background:var(--c-blue);}
.btn.pink{background:var(--c-pink);}
.btn.purple{background:var(--c-purple);}
.btn.ghost{background:#fff;color:var(--c-text);box-shadow:0 4px 0 rgba(0,0,0,.08);}
.btn.big{width:100%;padding:17px;font-size:19px;border-radius:20px;}
.btn:disabled{opacity:.45;pointer-events:none;}

/* 单元列表 */
.unit-row{
  display:flex;align-items:center;gap:12px;background:var(--c-card);
  border-radius:18px;padding:14px;box-shadow:var(--shadow);cursor:pointer;
  border-left:8px solid var(--c-primary);margin-bottom:10px;transition:transform .1s;
}
.unit-row:active{transform:scale(.98);}
.unit-row .u-no{
  width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#ffe1a8,#ffc46b);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;flex-shrink:0;
}
.unit-row .u-info{flex:1;min-width:0;}
.unit-row .u-name{font-weight:800;font-size:16px;}
.unit-row .u-sub{font-size:12px;color:var(--c-text-light);margin-top:3px;}
.unit-row .u-stars{font-size:13px;white-space:nowrap;}

/* 玩法菜单 */
.game-menu{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.game-item{
  background:var(--c-card);border-radius:20px;padding:16px 10px;text-align:center;cursor:pointer;
  box-shadow:var(--shadow);border:none;font-family:inherit;color:var(--c-text);transition:transform .1s;
}
.game-item:active{transform:scale(.95);}
.game-item .g-icon{font-size:38px;margin-bottom:6px;}
.game-item .g-name{font-weight:800;font-size:15px;}
.game-item .g-sub{font-size:11px;color:var(--c-text-light);margin-top:3px;}
.game-item .g-star{font-size:12px;margin-top:5px;}

/* ===== 学习卡 ===== */
.flip-stage{perspective:1200px;margin:6px 0 16px;}
.flip-card{position:relative;width:100%;height:300px;cursor:pointer;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.4,.1,.2,1.2);}
.flip-card.flipped{transform:rotateY(180deg);}
.flip-face{
  position:absolute;inset:0;border-radius:26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  box-shadow:var(--shadow);padding:18px;
}
.flip-face.front{background:linear-gradient(150deg,#fff7e8,#ffe7bd);}
.flip-face.back{background:linear-gradient(150deg,#e8f7f5,#c9ece7);transform:rotateY(180deg);}
.flip-word{font-size:52px;font-weight:900;letter-spacing:1px;word-break:break-all;text-align:center;}
.flip-zh{font-size:34px;font-weight:800;color:var(--c-teal);}
.flip-tip{font-size:13px;color:var(--c-text-light);}
.speak-btn{
  border:none;width:54px;height:54px;border-radius:50%;background:var(--c-blue);color:#fff;
  font-size:24px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.15);
}
.speak-btn:active{transform:translateY(3px);}
.card-nav{display:flex;gap:12px;align-items:center;justify-content:center;margin-bottom:14px;}
.card-nav .nav-arrow{
  border:none;width:56px;height:56px;border-radius:18px;background:#fff;font-size:22px;
  box-shadow:var(--shadow);cursor:pointer;color:var(--c-text);
}
.card-nav .nav-arrow:disabled{opacity:.3;}
.card-dots{font-size:13px;color:var(--c-text-light);min-width:70px;text-align:center;font-weight:700;}

/* ===== 答题类通用 ===== */
.quiz-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-weight:800;font-size:15px;}
.quiz-top .q-progress{color:var(--c-text-light);}
.combo{color:var(--c-pink);}
.question-area{
  background:var(--c-card);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:26px 16px;text-align:center;margin-bottom:14px;min-height:150px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  position:relative;
}
.q-big{font-size:40px;font-weight:900;word-break:break-all;line-height:1.25;}
.q-medium{font-size:26px;font-weight:800;}
.q-hint{font-size:13px;color:var(--c-text-light);}
.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.opt-btn{
  border:none;border-radius:18px;padding:18px 10px;font-size:22px;font-weight:800;font-family:inherit;
  background:var(--c-card);box-shadow:var(--shadow);cursor:pointer;color:var(--c-text);transition:transform .1s;
}
.opt-btn:active{transform:scale(.96);}
.opt-btn.correct{background:linear-gradient(135deg,#8be28a,#57cc02);color:#fff;animation:pop .35s;}
.opt-btn.wrong{background:linear-gradient(135deg,#ff9a9a,#ff5e5e);color:#fff;animation:shake .4s;}
.opt-btn.small{font-size:17px;padding:15px 8px;}
.opt-btn.math-opt{font-size:34px;font-family:"Cambria Math",Georgia,serif;}

/* 拼写 */
.spell-slots{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;min-height:56px;}
.spell-slot{
  width:46px;height:56px;border-radius:12px;background:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);
  font-size:28px;font-weight:900;display:flex;align-items:center;justify-content:center;
  border:2px solid #eee;cursor:pointer;
}
.spell-slot.filled{border-color:var(--c-primary);background:#fff7e8;}
.spell-letters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.letter-btn{
  width:52px;height:52px;border:none;border-radius:14px;font-size:26px;font-weight:900;
  background:linear-gradient(180deg,#fff,#f1e7d6);box-shadow:0 4px 0 rgba(0,0,0,.13);cursor:pointer;
  font-family:inherit;color:var(--c-text);
}
.letter-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.13);}
.letter-btn.used{opacity:.18;pointer-events:none;}

/* 翻牌配对 */
.match-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.match-card{
  aspect-ratio:3/4;perspective:800px;cursor:pointer;
}
.match-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .4s;}
.match-card.open .match-inner,.match-card.matched .match-inner{transform:rotateY(180deg);}
.match-side{
  position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;align-items:center;justify-content:center;padding:6px;text-align:center;
  font-size:15px;font-weight:800;
}
.match-side.front{background:linear-gradient(150deg,#9b5de5,#7a3fd1);color:#fff;font-size:30px;}
.match-side.back{background:#fff;transform:rotateY(180deg);box-shadow:var(--shadow);word-break:break-all;line-height:1.3;}
.match-card.matched .match-side.back{background:linear-gradient(150deg,#d5f5cf,#a8e89f);animation:pop .4s;}

/* ===== 数学 ===== */
.math-question{font-size:clamp(34px,9vw,48px);font-weight:900;font-family:"Cambria Math",Georgia,"Times New Roman",serif;letter-spacing:2px;}
.answer-show{font-size:26px;font-weight:800;color:var(--c-green);min-height:34px;}
.answer-show.bad{color:var(--c-pink);}
.timer-bar{height:14px;border-radius:999px;background:#efe3cf;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.1);}
.timer-fill{height:100%;background:linear-gradient(90deg,#57cc02,#ffd166);border-radius:999px;transition:width .3s linear;}
.timer-fill.danger{background:linear-gradient(90deg,#ff5e5e,#ff9f1c);}

/* 数字键盘 */
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:340px;margin:0 auto;}
.key{
  border:none;border-radius:16px;height:58px;font-size:26px;font-weight:900;font-family:inherit;
  background:#fff;box-shadow:0 5px 0 rgba(0,0,0,.12);cursor:pointer;color:var(--c-text);
}
.key:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.12);}
.key.ok{background:var(--c-green);color:#fff;}
.key.del{background:#ffe3c2;font-size:20px;}
.answer-display{
  text-align:center;font-size:44px;font-weight:900;min-height:60px;letter-spacing:3px;
  font-family:"Cambria Math",Georgia,serif;color:var(--c-blue);
}

/* 比大小按钮 */
.compare-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}

/* 结算 */
.result-panel{text-align:center;padding:26px 16px;}
.result-panel .r-emoji{font-size:64px;animation:pop .5s;}
.result-panel .r-score{font-size:44px;font-weight:900;margin:8px 0;}
.result-stars{font-size:44px;letter-spacing:6px;margin:6px 0 14px;}
.result-actions{display:grid;gap:10px;margin-top:16px;}
.wrong-list{text-align:left;font-size:15px;line-height:2;}
.wrong-list .w-item{
  background:#fff5f5;border-radius:12px;padding:8px 12px;margin-bottom:8px;
  display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;
}
.wrong-list .w-right{color:var(--c-green);font-weight:800;}

/* ===== 动画 ===== */
@keyframes pop{0%{transform:scale(.4);opacity:0;}70%{transform:scale(1.15);}100%{transform:scale(1);opacity:1;}}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}
@keyframes floatStar{
  0%{transform:translateY(0) scale(1);opacity:1;}
  100%{transform:translateY(-120px) scale(1.6);opacity:0;}
}
.fly-star{position:fixed;font-size:30px;pointer-events:none;z-index:999;animation:floatStar .9s ease-out forwards;}

/* toast 提示 */
.toast{
  position:fixed;left:50%;bottom:12%;transform:translateX(-50%);
  background:rgba(58,59,68,.94);color:#fff;padding:12px 22px;border-radius:999px;
  font-size:15px;font-weight:700;z-index:999;animation:pop .3s;box-shadow:0 8px 24px rgba(0,0,0,.25);
  max-width:86%;text-align:center;
}

/* ===== 宠物系统 ===== */
.adopt-grid{display:grid;grid-template-columns:1fr;gap:14px;}
.adopt-card{
  background:var(--c-card);border-radius:24px;padding:22px 16px;text-align:center;cursor:pointer;
  box-shadow:var(--shadow);border:3px solid transparent;transition:transform .12s;
}
.adopt-card:active{transform:scale(.97);}
.adopt-card .adopt-emoji{font-size:64px;line-height:1.2;animation:bob 2.2s ease-in-out infinite;}
.adopt-card .adopt-name{font-size:20px;font-weight:900;margin-top:6px;}
.adopt-card .adopt-intro{font-size:13px;color:var(--c-text-light);margin-top:6px;line-height:1.7;}
@media (min-width:640px){ .adopt-grid{grid-template-columns:repeat(3,1fr);} }

.pet-strip{
  display:flex;align-items:center;gap:12px;background:var(--c-card);border-radius:18px;
  padding:10px 14px;box-shadow:var(--shadow);margin-bottom:12px;cursor:pointer;
}
.pet-strip-emoji{font-size:36px;line-height:1;animation:bob 2.4s ease-in-out infinite;}
.pet-strip-body{flex:1;min-width:0;}
.pet-strip-food{font-size:15px;font-weight:800;color:var(--c-primary-dark);}

.pet-stage-card{text-align:center;padding:26px 18px;}
.pet-big{font-size:110px;line-height:1.15;cursor:pointer;animation:bob 2.4s ease-in-out infinite;}
.pet-say{
  display:inline-block;background:#f2ecff;border-radius:16px 16px 16px 4px;padding:8px 14px;
  font-size:14px;color:#6b4fd8;margin-bottom:8px;
}
.exp-bar{height:14px;border-radius:999px;background:#efe3cf;overflow:hidden;margin-top:10px;box-shadow:inset 0 2px 4px rgba(0,0,0,.1);}
.exp-fill{height:100%;background:linear-gradient(90deg,#ff9f1c,#ffd166);border-radius:999px;transition:width .4s;}

@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* ===== 训练营关卡地图 ===== */
.level-row{
  display:flex;align-items:center;gap:12px;background:var(--c-card);
  border-radius:18px;padding:13px 14px;box-shadow:var(--shadow);cursor:pointer;
  border-left:8px solid var(--c-teal);margin-bottom:10px;transition:transform .1s;
}
.level-row:active{transform:scale(.98);}
.level-row.locked{opacity:.62;cursor:default;border-left-color:#c9beab;}
.level-row .lv-no{font-size:30px;width:44px;text-align:center;flex-shrink:0;}
.level-row .lv-body{flex:1;min-width:0;}
.level-row .lv-name{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.level-row .lv-name .stars{font-size:13px;}
.level-row .lv-sub{font-size:12px;color:var(--c-text-light);margin-top:3px;}
.level-row .lv-state{font-size:12px;color:var(--c-text-light);font-weight:700;white-space:nowrap;}

/* ===== v3 宠物系统新样式 ===== */
/* 宠物形象+装扮分层 */
.pet-look{position:relative;display:inline-block;line-height:1;}
.pl-body{display:inline-block;}
.pl-back{position:absolute;left:-30%;top:22%;font-size:.5em;transform:rotate(-15deg);}
.pl-head{position:absolute;top:-16%;right:-20%;font-size:.42em;}
.pl-face{position:absolute;top:34%;left:-24%;font-size:.4em;}
.pl-neck{position:absolute;bottom:-10%;right:-14%;font-size:.42em;}

.pet-badge{display:inline-block;background:var(--c-pink);color:#fff;font-size:12px;font-weight:900;border-radius:999px;padding:3px 12px;margin-bottom:6px;}

/* 蛋 */
.egg-big{font-size:110px;line-height:1.2;cursor:pointer;animation:bob 2.6s ease-in-out infinite;}
.egg-big.cracking{animation:eggShake .9s ease-in-out infinite;}
.egg-big.cracking::after{content:"💥";position:absolute;font-size:40px;transform:translate(46px,20px);}
.egg-big.ready{animation:eggShake .35s ease-in-out infinite;}
@keyframes eggShake{0%,100%{transform:rotate(0);}25%{transform:rotate(-8deg);}75%{transform:rotate(8deg);}}
.hatch-anim{font-size:110px;animation:hatchPop .8s cubic-bezier(.3,1.6,.5,1);}
@keyframes hatchPop{0%{transform:scale(0) rotate(-180deg);}70%{transform:scale(1.25) rotate(10deg);}100%{transform:scale(1) rotate(0);}}
.egg-strip .pet-strip-emoji{font-size:40px;}

/* 首页魔王/手册条 */
.boss-strip,.pass-strip{
  display:flex;align-items:center;gap:12px;background:#fff;border-radius:18px;
  padding:10px 14px;box-shadow:var(--shadow);margin-bottom:12px;cursor:pointer;
}
.boss-strip{background:linear-gradient(135deg,#fff0f0,#ffdcdc);}
.boss-strip .boss-emoji{font-size:36px;}
.boss-strip .boss-body,.pass-strip .boss-body{flex:1;min-width:0;}
.boss-hp{font-size:13px;letter-spacing:2px;margin-top:3px;}

/* 宠物墙 */
.pet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media(min-width:560px){.pet-grid{grid-template-columns:repeat(3,1fr);}}
.pet-card{
  background:var(--c-card);border-radius:20px;padding:14px 8px;text-align:center;
  box-shadow:var(--shadow);border-top:5px solid #ffd166;position:relative;cursor:pointer;
}
.pet-card.rare{border-top-color:var(--c-purple);}
.pet-card .e{font-size:46px;line-height:1.2;}
.pet-card .n{font-weight:900;font-size:15px;margin-top:4px;}
.pet-card .skill{font-size:12.5px;color:#6b5d49;line-height:1.6;margin-top:6px;background:#faf5ea;border-radius:10px;padding:6px;}
.pet-card .how{font-size:12px;margin-top:8px;font-weight:800;color:var(--c-teal);}
.pet-card.rare .how{color:var(--c-purple);}
.pet-card.ghost .skill{background:#f2ede4;}

/* 商店 */
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
@media(min-width:560px){.shop-grid{grid-template-columns:repeat(3,1fr);}}
.shop-item{
  background:var(--c-card);border-radius:16px;padding:14px 6px;text-align:center;box-shadow:var(--shadow);
}
.shop-item .e{font-size:40px;}
.shop-item .n{font-size:13px;font-weight:800;margin-top:4px;}
.shop-item .p{font-size:13px;color:#e8890b;font-weight:900;margin-top:3px;}

/* 商店分类 */
.cat-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px;}
.cat-tab{
  border:none;background:#fff;border-radius:999px;padding:10px 16px;font-family:inherit;
  font-weight:800;font-size:14px;box-shadow:0 3px 0 rgba(0,0,0,.08);cursor:pointer;
  color:var(--c-text);white-space:nowrap;
}
.cat-tab.on{background:var(--c-primary);color:#fff;}
.shop-item{cursor:pointer;}
.shop-item .e{font-size:40px;}
.wish-item{display:flex;align-items:center;gap:10px;}
.wish-item.wait{background:#fff7e0;}
.wish-item.done{background:#eafaf0;}

/* 装扮 */
.wear-row{display:flex;gap:10px;flex-wrap:wrap;}
.wear-item{
  border:2px solid #eee;background:#fff;border-radius:14px;padding:8px 12px;cursor:pointer;
  font-size:24px;font-family:inherit;box-shadow:0 3px 0 rgba(0,0,0,.07);
}
.wear-item small{display:block;font-size:11px;color:var(--c-text-light);margin-top:2px;}
.wear-item.on{border-color:var(--c-primary);background:#fff7e8;}

/* 冒险手册 */
.pass-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media(max-width:480px){.pass-grid{grid-template-columns:repeat(3,1fr);}}
.pass-cell{
  background:#fff;border-radius:14px;padding:10px 4px;text-align:center;box-shadow:var(--shadow);
  border:2px solid transparent;display:flex;flex-direction:column;gap:6px;
}
.pass-cell.can{border-color:var(--c-primary);animation:pop .4s;}
.pass-cell.claimed{opacity:.65;}
.pc-star{font-size:11px;color:var(--c-text-light);font-weight:800;}
.pc-reward{font-size:13px;font-weight:800;min-height:34px;}
.pc-btn{
  border:none;border-radius:10px;padding:6px 4px;font-size:11.5px;font-weight:900;
  font-family:inherit;background:#eee;color:var(--c-text-light);cursor:default;
}
.pass-cell.can .pc-btn{background:var(--c-primary);color:#fff;cursor:pointer;}
.pc-btn.ok{background:var(--c-green);color:#fff;}

/* 开箱 */
.loot-box{font-size:100px;cursor:pointer;animation:bob 1.6s ease-in-out infinite;display:inline-block;}
.loot-open{font-size:80px;animation:hatchPop .7s cubic-bezier(.3,1.6,.5,1);}

/* ===== v2.2 SVG 动画宠物 ===== */
.psvg{display:block;}
.psvg-idle{animation:psvgBreath 3.2s ease-in-out infinite;transform-origin:50% 90%;}
.psvg .e-o{animation:psvgBlink 4.6s infinite;transform-origin:center;transform-box:fill-box;}
.psvg-happy{animation:psvgHop 1.1s ease-in-out infinite;transform-origin:50% 100%;}
.psvg-cheer{animation:psvgHop .55s ease-in-out infinite;transform-origin:50% 100%;}
.psvg-sad{animation:psvgSad 2.4s ease-in-out infinite;transform-origin:50% 100%;}
.psvg .ear-l{animation:psvgEarL 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center;}
.psvg .ear-r{animation:psvgEarR 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center;}
.psvg .zzz{animation:psvgZ 1.8s ease-in-out infinite;}
.psvg .zzz.z2{animation-delay:.5s;}
.psvg .heart{animation:psvgHeart 1s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes psvgBreath{0%,100%{transform:scale(1);}50%{transform:scale(1.025,.985);}}
@keyframes psvgBlink{0%,93%,100%{transform:scaleY(1);}95.5%,97.5%{transform:scaleY(.08);}}
@keyframes psvgHop{0%,100%{transform:translateY(0);}30%{transform:translateY(-9%);}55%{transform:translateY(0) scale(1.04,.96);}}
@keyframes psvgSad{0%,100%{transform:translateY(0) rotate(0);}50%{transform:translateY(3%) rotate(-2deg);}}
@keyframes psvgEarL{0%,100%{transform:rotate(0);}50%{transform:rotate(-5deg);}}
@keyframes psvgEarR{0%,100%{transform:rotate(0);}50%{transform:rotate(5deg);}}
@keyframes psvgZ{0%,100%{opacity:.3;transform:translateY(0);}50%{opacity:1;transform:translateY(-4px);}}
@keyframes psvgHeart{0%,100%{transform:scale(1);opacity:.9;}50%{transform:scale(1.25);opacity:1;}}

/* 答题场景常驻宠物 */
.buddy-wrap{position:absolute;top:8px;right:10px;width:64px;height:64px;pointer-events:none;opacity:.96;}
.buddy{position:absolute;top:6px;right:10px;pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.12));}

/* 家园大宠物互动 */
.pet-svg-big{width:min(240px,64vw);margin:0 auto;cursor:pointer;}
.pet-svg-big:active{transform:scale(.97);}

/* ===== v2.3 皮肤系统 ===== */
.skin-wrap{position:relative;}
.skin-wrap .sk-deco{position:absolute;z-index:2;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));}
.skin-wrap .sk-head{top:-10%;right:-18%;}
.skin-wrap .sk-back{left:-26%;top:22%;transform:rotate(-14deg);}
.skin-wrap .sk-face{top:34%;left:-24%;}
.skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;}
.skin-card{
  background:#fff;border-radius:16px;padding:10px 4px;text-align:center;cursor:pointer;
  border:3px solid transparent;box-shadow:var(--shadow);transition:transform .1s;
}
.skin-card:active{transform:scale(.95);}
.skin-card.sel{border-color:var(--c-primary);background:#fff7e8;}
.skin-card .skin-thumb{height:64px;display:flex;align-items:center;justify-content:center;}
.skin-card .skin-name{font-size:12px;font-weight:800;margin-top:4px;}
.skin-card .skin-state{font-size:12px;margin-top:2px;font-weight:800;color:#e8890b;}
.cat-tab img{vertical-align:middle;}

/* 电脑端适配 */
@media (min-width:640px){
  .match-grid{grid-template-columns:repeat(4,1fr);}
  .options{gap:14px;}
  .skin-grid{grid-template-columns:repeat(4,1fr);}
}

/* ===== v18c 宠物家园场景 ===== */
.home-scene{position:relative;height:300px;border-radius:18px;overflow:hidden;margin-bottom:12px;
  background:linear-gradient(#8ecdf5 0%,#bfe4fb 46%,#cdeeb1 46.5%,#9ed67e 72%,#7cc35d 100%);}
.home-scene.night{background:linear-gradient(#28406e 0%,#3c5a8c 46%,#2e5c3a 46.5%,#26502f 72%,#1d4023 100%);}
/* 太阳/月亮 */
.hs-sun,.hs-moon{position:absolute;top:18px;right:26px;font-size:38px;line-height:1;filter:drop-shadow(0 0 10px rgba(255,200,60,.7));}
.hs-moon{filter:drop-shadow(0 0 8px rgba(220,230,255,.8));}
/* 云（缓慢飘动） */
.hs-cloud{position:absolute;font-size:34px;line-height:1;opacity:.9;animation:hs-drift 46s linear infinite;}
.hs-cloud.c2{font-size:24px;top:56px;animation-duration:64s;animation-delay:-28s;opacity:.7;}
.hs-cloud.c1{top:24px;left:-40px;}
.hs-cloud.c2{left:-60px;}
@keyframes hs-drift{from{transform:translateX(-60px);}to{transform:translateX(110vw);}}
/* 星星（夜晚） */
.hs-star{position:absolute;color:#fff;animation:hs-twinkle 2.4s ease-in-out infinite;}
@keyframes hs-twinkle{0%,100%{opacity:.25;}50%{opacity:1;}}
/* 小房子 */
.hs-house{position:absolute;left:14px;bottom:74px;font-size:0;line-height:0;text-align:center;}
.hs-house .roof{width:104px;height:52px;margin:0 auto;
  background:conic-gradient(from 135deg at 50% 100%,#c9563c 0 90deg,transparent 90deg) top/100% 100% no-repeat;
  clip-path:polygon(50% 0,100% 100%,0 100%);}
.hs-house .wall{width:88px;height:64px;margin:0 auto;background:#ffe9c4;border:3px solid #e8b04b;border-top:none;border-radius:0 0 6px 6px;position:relative;}
.hs-house .door{position:absolute;left:30px;bottom:0;width:26px;height:38px;background:#a9743d;border-radius:12px 12px 0 0;border:2px solid #8a5a2b;border-bottom:none;}
.hs-house .win{position:absolute;right:8px;top:10px;width:20px;height:20px;background:#bfe4fb;border:3px solid #8a5a2b;border-radius:4px;}
.hs-house .wall .painting-slot{position:absolute;left:6px;top:8px;font-size:16px;cursor:pointer;}
.night .hs-house .win{background:#ffe98f;box-shadow:0 0 12px rgba(255,233,120,.9);}
/* 草丛/花 */
.hs-grass{position:absolute;bottom:6px;font-size:18px;letter-spacing:6px;opacity:.85;white-space:nowrap;}
.hs-grass.g2{bottom:12px;opacity:.55;font-size:14px;}
/* 宠物（站在院子中） */
.hs-pet{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:5;}
/* 摆件槽位 */
.hs-item{position:absolute;z-index:6;font-size:34px;line-height:1;cursor:pointer;user-select:none;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));transition:transform .2s;}
.hs-item:active{transform:scale(1.18);}
.hs-item.bed{right:16px;bottom:36px;font-size:44px;}
.hs-item.ball{left:calc(50% + 64px);bottom:30px;font-size:30px;}
.hs-item.plant{left:132px;bottom:96px;font-size:32px;z-index:4;}
.hs-item.painting{display:none;} /* 名画挂在房子墙上（.painting-slot） */
.hs-empty{position:absolute;z-index:3;width:44px;height:44px;border:2px dashed rgba(255,255,255,.75);border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;background:rgba(255,255,255,.12);}
/* 球滚动动画 */
.hs-item.ball.rolling{animation:hs-roll 1.1s ease-in-out;}
@keyframes hs-roll{0%{transform:translateX(0) rotate(0);}40%{transform:translateX(38px) rotate(220deg);}100%{transform:translateX(0) rotate(360deg);}}
/* 宠物上床睡觉 */
.hs-pet.sleeping{transition:all .5s ease;left:auto;right:14px;bottom:56px;transform:scale(.55);}
/* 电脑端放大场景 */
@media (min-width:640px){
  .home-scene{height:360px;}
  .hs-house{left:24px;bottom:92px;}
  .hs-item.bed{right:28px;bottom:44px;}
  .hs-item.ball{left:calc(50% + 84px);bottom:36px;}
  .hs-item.plant{left:168px;bottom:118px;}
  .hs-pet{bottom:42px;}
}

/* ===== v19 四分区照护家园 ===== */
.hs-zone{position:absolute;z-index:7;text-align:center;cursor:pointer;user-select:none;transition:transform .15s;}
.hs-zone:active{transform:scale(1.12);}
.hs-zone .z-icon{font-size:30px;line-height:1;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25));}
.hs-zone .z-label{display:inline-block;margin-top:2px;font-size:10.5px;font-weight:800;color:#fff;
  background:rgba(60,90,60,.55);border-radius:9px;padding:1px 8px;}
.hs-zone.z-eat{left:14px;bottom:24px;}
.hs-zone.z-wash{right:14px;bottom:24px;}
.hs-zone.z-study{left:50%;top:10px;transform:translateX(-50%);}
.hs-zone.z-study:active{transform:translateX(-50%) scale(1.12);}
.hs-zone.z-sleep{right:16px;bottom:110px;}
.hs-zone .z-badge{position:absolute;top:-8px;right:-10px;font-size:15px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));}
.night .hs-zone .z-label{background:rgba(20,35,25,.6);}
/* 食盆（喂食目标） */
.hs-bowl{position:absolute;left:20px;bottom:12px;z-index:8;font-size:30px;line-height:1;cursor:pointer;}
.hs-bowl .bowl-food{position:absolute;left:2px;top:-8px;font-size:18px;}
/* 拖拽中的食物 */
.drag-food{position:fixed;z-index:999;font-size:34px;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));}
/* 洗澡场景覆盖层 */
.wash-overlay{position:fixed;inset:0;z-index:60;background:rgba(40,80,140,.45);display:flex;align-items:center;justify-content:center;}
.wash-box{width:min(92vw,420px);background:linear-gradient(180deg,#e8f6ff,#cfeaff);border-radius:20px;padding:18px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.3);}
.wash-tub{position:relative;height:190px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#b3e0fb,#8fd0f5);margin:8px 0;}
.wash-pet{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);}
.wash-pet.pleasure{animation:wash-bounce .5s ease infinite;}
@keyframes wash-bounce{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-8px);}}
.bubble{position:absolute;font-size:26px;cursor:pointer;animation:bubble-float 2.6s ease-in-out infinite;user-select:none;}
@keyframes bubble-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.bubble.pop{animation:bubble-pop .3s ease forwards;}
@keyframes bubble-pop{to{transform:scale(1.9);opacity:0;}}
.wash-tip{font-size:13px;font-weight:800;color:#2b6ea8;margin-top:6px;}
/* 宠物吃东西 */
.hs-pet.eating{animation:pet-eat .45s ease 3;}
@keyframes pet-eat{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-10px) rotate(-4deg);}}
/* 明信片墙 */
.card-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
.postcard{background:linear-gradient(160deg,#fffdf5,#fdf3d8);border:1px solid #e8d9a8;border-radius:10px;padding:8px 6px;text-align:center;position:relative;box-shadow:0 2px 6px rgba(0,0,0,.12);transform:rotate(-1.5deg);}
.postcard:nth-child(2n){transform:rotate(1.8deg);}
.postcard:nth-child(3n){transform:rotate(-.6deg);}
.postcard .pc-scene{font-size:30px;line-height:1.3;}
.postcard .pc-place{font-size:11px;font-weight:800;margin-top:3px;}
.postcard .pc-stamp{position:absolute;top:4px;right:5px;font-size:14px;opacity:.85;}
.postcard.new{animation:pc-in .8s ease;}
@keyframes pc-in{from{transform:scale(.3) rotate(-20deg);opacity:0;}to{transform:scale(1);}}