/* 海拉鲁小学堂 - 移动优先样式 */
:root{
  --green:#1e7a4c; --green-d:#145c38; --gold:#f5c542; --gold-d:#d9a821;
  --parchment:#fff9ea; --ink:#3a2e1f; --sky1:#bfe8ff; --sky2:#e8f9e8;
  --red:#e05555; --blue:#3f8efc;
  --radius:18px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{font-size:18px;}
body{
  margin:0; font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  color:var(--ink); background:linear-gradient(180deg,var(--sky1),var(--sky2) 60%,#dff5d8);
  min-height:100vh; padding-bottom:92px; user-select:none; -webkit-user-select:none;
}
#app{max-width:760px; margin:0 auto; min-height:100vh; position:relative;}

/* 顶栏 */
header.topbar{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; background:linear-gradient(180deg,var(--green),var(--green-d));
  color:#fff; box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.topbar .title{font-size:1.25rem; font-weight:800; letter-spacing:1px;}
.topbar .pills{display:flex; gap:8px; align-items:center;}
.pill{background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.5); color:#fff;
  border-radius:999px; padding:6px 12px; font-size:.95rem; font-weight:700;}
.pill.gold{background:var(--gold); border-color:var(--gold-d); color:#5a3d00;}
.iconbtn{background:rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.5); color:#fff;
  border-radius:12px; font-size:1.2rem; width:46px; height:46px; cursor:pointer;}

/* 视图 */
.view{display:none; padding:14px 14px 20px; animation:fadein .25s;}
.view.active{display:block;}
@keyframes fadein{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
@keyframes pop{0%{transform:scale(.6); opacity:0;} 60%{transform:scale(1.12);} 100%{transform:scale(1); opacity:1;}}
@keyframes floatUp{from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(-60px);}}
@keyframes wiggle{0%,100%{transform:rotate(-3deg);} 50%{transform:rotate(3deg);}}

/* 大地图 */
.map-hero{text-align:center; padding:8px 0 4px;}
.map-hero h1{margin:.2em 0 .1em; font-size:1.7rem; color:var(--green-d); text-shadow:0 2px 0 #fff;}
.map-hero p{margin:.2em 0 1em; color:#5b7a63; font-size:1rem;}
.region-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.region-card{
  background:var(--parchment); border:3px solid var(--gold-d); border-radius:var(--radius);
  padding:16px 10px; text-align:center; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.12);
  transition:transform .12s; position:relative; min-height:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.region-card:active{transform:scale(.96);}
.region-card .ric{font-size:2.6rem;}
.region-card .rname{font-size:1.15rem; font-weight:800; color:var(--green-d);}
.region-card .rdesc{font-size:.82rem; color:#7a6a52;}
.region-card.locked{filter:grayscale(.9); opacity:.75; border-color:#bbb;}
.region-card.locked::after{content:"🔒 即将开放"; position:absolute; bottom:8px; font-size:.8rem;
  background:#666; color:#fff; border-radius:999px; padding:2px 10px;}
.region-card .progress{font-size:.8rem; color:#8a6d2f; background:#fdf0c8; border-radius:999px; padding:2px 10px;}

/* 通用卡片与按钮 */
.card{background:var(--parchment); border:3px solid #e8d9ae; border-radius:var(--radius);
  padding:16px; margin-bottom:14px; box-shadow:0 3px 0 rgba(0,0,0,.08);}
.card h2{margin:.1em 0 .5em; color:var(--green-d); font-size:1.3rem;}
.card h3{margin:.4em 0; color:var(--green-d);}
.btn{
  display:block; width:100%; min-height:60px; margin:10px 0; padding:12px 16px;
  font-size:1.15rem; font-weight:800; color:#5a3d00; cursor:pointer;
  background:linear-gradient(180deg,#ffe27a,var(--gold)); border:3px solid var(--gold-d);
  border-radius:16px; box-shadow:0 4px 0 var(--gold-d); font-family:inherit;
}
.btn:active{transform:translateY(3px); box-shadow:0 1px 0 var(--gold-d);}
.btn.green{background:linear-gradient(180deg,#4fc07f,#2f9e5f); border-color:var(--green-d); color:#fff; box-shadow:0 4px 0 var(--green-d);}
.btn.green:active{box-shadow:0 1px 0 var(--green-d);}
.btn.blue{background:linear-gradient(180deg,#8fc0ff,var(--blue)); border-color:#2b6fd6; color:#fff; box-shadow:0 4px 0 #2b6fd6;}
.btn.gray{background:#e8e4da; border-color:#c9c2b2; color:#6b6252; box-shadow:0 4px 0 #c9c2b2;}
.btn.small{min-height:48px; font-size:1rem;}
.btnrow{display:flex; gap:10px;} .btnrow .btn{margin:6px 0;}
.backlink{background:none; border:none; color:var(--green-d); font-size:1.05rem; font-weight:700;
  padding:8px 4px; cursor:pointer; font-family:inherit;}

/* 难度选择 */
.tier-row{display:flex; gap:10px; margin:10px 0;}
.tier{
  flex:1; border:3px solid #d9c793; background:#fffdf4; border-radius:16px; padding:12px 6px;
  text-align:center; cursor:pointer; font-weight:800; font-size:1rem; color:var(--ink);
}
.tier .pts{display:block; font-size:.85rem; color:#a07d1c; margin-top:4px;}
.tier.locked{filter:grayscale(1); opacity:.55;}
.tier.sel{border-color:var(--green); background:#e7f7ec; box-shadow:0 0 0 3px #bfe6cb;}
.sub-block{margin-bottom:6px;}
.sub-label{font-weight:800; font-size:1.05rem; margin:12px 2px 4px; color:#6b5320;}

/* 答题 */
.quiz-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-weight:800;}
.quiz-bar{height:14px; background:#e5dcc3; border-radius:999px; overflow:hidden; margin-bottom:12px;}
.quiz-bar i{display:block; height:100%; background:linear-gradient(90deg,var(--gold),#ff9d3c); width:0%; transition:width .3s;}
.qcard{background:#fffdf4; border:3px solid var(--gold-d); border-radius:var(--radius); padding:18px; margin-bottom:12px;}
.qcard .qq{font-size:1.3rem; font-weight:800; line-height:1.5; margin-bottom:6px;}
.opt{
  display:block; width:100%; text-align:left; margin:10px 0; padding:14px 16px; font-size:1.15rem;
  background:#fff; border:3px solid #d9c793; border-radius:14px; cursor:pointer; font-family:inherit; color:var(--ink);
  min-height:58px;
}
.opt:active{transform:scale(.98);}
.opt.correct{background:#d9f5e2; border-color:var(--green); animation:pop .3s;}
.opt.wrong{background:#ffe1e1; border-color:var(--red);}
.opt:disabled{opacity:1;}
.feedback{
  position:fixed; left:0; right:0; bottom:0; z-index:80; padding:18px 18px 26px;
  background:var(--parchment); border-top:4px solid var(--gold-d); border-radius:22px 22px 0 0;
  box-shadow:0 -6px 24px rgba(0,0,0,.2); animation:fadein .2s; max-width:760px; margin:0 auto;
}
.feedback .emo{font-size:2.4rem;}
.feedback .ftext{font-size:1.15rem; font-weight:800; margin:6px 0;}
.feedback .fexp{font-size:1rem; color:#6b5f45; line-height:1.5;}
.feedback.good{border-top-color:var(--green);}
.feedback.bad{border-top-color:var(--red);}
.float-pts{position:fixed; z-index:99; font-size:1.6rem; font-weight:900; color:#c98a00;
  text-shadow:0 2px 0 #fff; animation:floatUp 1.1s forwards; pointer-events:none;}

/* 结算 */
.result-hero{text-align:center; padding:10px;}
.result-hero .big{font-size:3.4rem; animation:pop .4s;}
.result-hero h2{color:var(--green-d); margin:.3em 0;}
.stat-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:12px 0;}
.stat{background:#fffdf4; border:2px solid #e8d9ae; border-radius:14px; padding:10px 4px; text-align:center;}
.stat b{display:block; font-size:1.5rem; color:var(--green-d);}
.stat span{font-size:.85rem; color:#7a6a52;}
.unlock-banner{background:linear-gradient(135deg,#fff3c4,#ffe27a); border:3px solid var(--gold-d);
  border-radius:16px; padding:14px; text-align:center; font-weight:800; color:#7a5410;
  animation:wiggle .6s; margin:12px 0; font-size:1.1rem;}

/* 古诗 */
.poem-line{font-size:1.35rem; line-height:2.1; text-align:center; font-weight:700;}
.poem-line.active-line{background:#fff3c4; border-radius:10px;}
.poem-list .poem-item{display:flex; justify-content:space-between; align-items:center;
  background:#fffdf4; border:2px solid #e8d9ae; border-radius:14px; padding:12px 14px; margin:8px 0; cursor:pointer;}
.poem-list .poem-item b{font-size:1.1rem;}
.poem-list .poem-item small{color:#7a6a52;}
.recited-tag{background:var(--green); color:#fff; border-radius:999px; font-size:.8rem; padding:2px 10px;}

/* 我的 */
.level-bar{height:18px; background:#e5dcc3; border-radius:999px; overflow:hidden; margin:8px 0;}
.level-bar i{display:block; height:100%; background:linear-gradient(90deg,#7be3a0,var(--green)); transition:width .4s;}
.badge-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.badge{background:#fffdf4; border:2px solid #e8d9ae; border-radius:14px; padding:10px 4px; text-align:center; font-size:.85rem;}
.badge .bi{font-size:2rem; display:block;}
.badge.locked{filter:grayscale(1); opacity:.5;}
.gift{display:flex; align-items:center; gap:12px; background:#fffdf4; border:2px solid #e8d9ae;
  border-radius:14px; padding:10px 12px; margin:8px 0;}
.gift .gi{font-size:2.2rem;}
.gift .ginfo{flex:1;} .gift .ginfo b{font-size:1.05rem;} .gift .ginfo small{color:#a07d1c; font-weight:800;}
.gift button{flex-shrink:0;}
.task{display:flex; align-items:center; gap:10px; background:#fffdf4; border:2px solid #e8d9ae;
  border-radius:14px; padding:10px 12px; margin:8px 0;}
.task.done{border-color:var(--green); background:#e9f8ee;}
.task .tk{flex:1;} .task b{font-size:1rem;}

/* 家长 */
.pinpad{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; max-width:320px; margin:12px auto;}
.pinpad button{min-height:60px; font-size:1.4rem; border-radius:14px; border:2px solid #d9c793; background:#fff; cursor:pointer; font-family:inherit;}
.pindots{text-align:center; font-size:2rem; letter-spacing:.5em; margin:10px;}
.ptabs{display:flex; gap:8px; margin-bottom:12px;}
.ptabs button{flex:1; padding:10px 4px; border-radius:12px; border:2px solid #d9c793; background:#fffdf4; font-weight:800; font-size:.95rem; cursor:pointer; font-family:inherit; color:var(--ink);}
.ptabs button.sel{background:var(--green); color:#fff; border-color:var(--green-d);}
.report-bar{height:16px; background:#e5dcc3; border-radius:999px; overflow:hidden; margin:4px 0 10px;}
.report-bar i{display:block; height:100%; background:var(--green);}
input.txt, select.txt{width:100%; padding:12px; font-size:1.05rem; border:2px solid #d9c793; border-radius:12px; margin:6px 0; font-family:inherit;}
label.f{display:block; font-weight:800; margin-top:10px; color:#6b5320;}

/* 底部导航 */
nav.bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:50; max-width:760px; margin:0 auto;
  display:flex; background:var(--parchment); border-top:3px solid var(--gold-d);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
nav.bottomnav button{flex:1; background:none; border:none; font-size:.95rem; font-weight:800; color:#8a7a5c;
  padding:8px 2px; cursor:pointer; font-family:inherit;}
nav.bottomnav button .ni{display:block; font-size:1.5rem;}
nav.bottomnav button.sel{color:var(--green-d);}

/* 锁定/弹窗 */
.overlay{position:fixed; inset:0; z-index:100; background:rgba(30,40,30,.82); display:flex;
  align-items:center; justify-content:center; padding:20px;}
.overlay .box{background:var(--parchment); border-radius:20px; padding:24px; max-width:420px; width:100%; text-align:center; border:4px solid var(--gold-d);}
.hidden{display:none !important;}
.small{font-size:.88rem; color:#7a6a52;}
.center{text-align:center;}
.mt{margin-top:12px;}