/* ====== CSS Variables & Reset ====== */
:root {
  --c1:#ff6b6b; --c2:#3dd6c8; --c3:#ffd43b; --c4:#a29bfe; --c5:#fd79a8; --c6:#20c997;
  --bg:#fff5f0; --card:#fff; --text:#2d3436; --sub:#636e72; --radius:20px; --shadow:0 4px 20px rgba(0,0,0,.06);
  --transition:0.25s;
}
*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'PingFang SC','Noto Sans SC','Microsoft YaHei',sans-serif;
  background:var(--bg);min-height:100vh;color:var(--text);
  background-image:radial-gradient(circle at 20% 20%,rgba(255,107,107,.04) 0%,transparent 50%),
    radial-gradient(circle at 80% 80%,rgba(253,121,168,.04) 0%,transparent 50%),
    radial-gradient(circle at 50% 50%,rgba(254,202,87,.03) 0%,transparent 50%);
}

/* ====== Top Bar ====== */
.topbar,.topbar .back-btn,.topbar .stat-item,.stage-tab,.btn,.topic-card,.item-chip,.slider-grp label,.diff-badge,.achieve-popup{user-select:none;-webkit-user-select:none}
.topbar{
  background:linear-gradient(135deg,#ff6b6b,#fd79a8);color:#fff;padding:14px 20px;
  display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:50;
  box-shadow:0 2px 16px rgba(255,107,107,.25);
}
.topbar h1{font-size:21px;flex:1}
.topbar .back-btn{
  background:rgba(255,255,255,.25);border:none;color:#fff;width:38px;height:38px;
  border-radius:50%;font-size:20px;cursor:pointer;display:none;align-items:center;justify-content:center;
}
.topbar .back-btn.show{display:flex}
.topbar .back-btn:hover{background:rgba(255,255,255,.4)}
.topbar .stars-total{font-size:14px;opacity:.9}
.topbar .top-stats{display:flex;gap:14px;align-items:center}
.topbar .stat-item{font-size:13px;opacity:.9;color:#fff;cursor:default}

/* ====== Main Container ====== */
.container{max-width:960px;margin:0 auto;padding:20px}

/* ====== Menu Grid ====== */
.grade-section {
  background: rgba(255,255,255,.55);
  border-radius: 24px;
  padding: 20px 16px 16px;
  margin-bottom: 20px;
  backdrop-filter: blur(4px);
}
.grade-section h3 {
  font-size: 19px;
  margin: 0 0 14px;
  color: var(--sub);
  display: flex;
  align-items: center;
  gap: 10px;
}
.grade-section h3 .grade-emoji { font-size: 26px; }
.grade-section h3 .grade-name { font-weight: 800; }
.grade-section h3 .grade-desc {
  font-size: 12px;
  color: #adb5bd;
  font-weight: 500;
  margin-left: 4px;
}

.section-title{font-size:19px;margin:24px 0 12px;color:var(--sub);display:flex;align-items:center;gap:8px}
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-bottom:8px}
.topic-card{
  background:var(--card);border-radius:24px;padding:22px 14px;text-align:center;
  cursor:pointer;transition:all var(--transition);box-shadow:var(--shadow);position:relative;overflow:hidden;
  border:2.5px solid transparent;
}
.topic-card:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 12px 40px rgba(255,107,107,.18);border-color:var(--c1)}
.topic-card .icon{font-size:42px;display:block;margin-bottom:6px;transition:transform .3s}
.topic-card:hover .icon{transform:scale(1.1)}
.topic-card .name{font-size:15px;font-weight:700;color:var(--text)}
.topic-card .stars{font-size:12px;color:#feca57;margin-top:4px}

/* ====== Menu View Animation ====== */
.menu-view { animation: fadeIn .3s ease; }
.game-view.active { animation: fadeIn .3s ease; }

/* ====== Star Display (CSS stars, cross-platform consistent) ====== */
.star-display { display: inline-flex; gap: 2px; vertical-align: middle; align-items: center; }
.star-display .star {
  width: 14px; height: 14px;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: #dee2e6;
  transition: background .2s;
}
.star-display .star.filled { background: #feca57; }

/* ====== Badges ====== */
.done-badge {
  display: inline-block;
  background: #00b894;
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  margin-left: 4px;
  vertical-align: middle;
}
.progress-badge {
  display: inline-block;
  background: linear-gradient(135deg, #feca57, #ffd43b);
  color: #495057;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 8px;
  margin-left: 4px;
  font-weight: 700;
  vertical-align: middle;
}

/* ====== Game View ====== */
.game-view{display:none;flex-direction:column;gap:16px}
.game-view.active{display:flex}
.game-header{text-align:center}
.game-header h2{font-size:24px}
.game-header .desc{font-size:14px;color:var(--sub);margin-top:4px}

/* Stage tabs */
.stage-tabs{display:flex;gap:0;background:#e9ecef;border-radius:30px;padding:3px;align-self:center}
.stage-tab{
  padding:10px 24px;border:none;background:none;border-radius:28px;font-size:14px;font-weight:700;
  cursor:pointer;color:#868e96;transition:all .3s;font-family:inherit;
}
.stage-tab.active{background:#fff;color:var(--c1);box-shadow:0 2px 8px rgba(0,0,0,.1)}

.stage-content{
  min-height:300px;background:var(--card);border-radius:var(--radius);padding:24px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:16px;
}
.stage-panel{display:none;flex-direction:column;align-items:center;gap:14px;width:100%}
.stage-panel.active{display:flex}

/* ====== Shared Components ====== */
.btn{
  padding:12px 28px;border:none;border-radius:26px;font-size:16px;font-weight:700;cursor:pointer;
  transition:all var(--transition);font-family:inherit;
}
.btn-p{background:linear-gradient(135deg,var(--c1),#ff8787);color:#fff;box-shadow:0 3px 12px rgba(255,107,107,.25)}
.btn-p:hover{opacity:.9;transform:translateY(-2px);box-shadow:0 5px 18px rgba(255,107,107,.35)}
.btn-s{background:linear-gradient(135deg,var(--c2),#63e6be);color:#fff;box-shadow:0 3px 12px rgba(61,214,200,.25)}
.btn-s:hover{opacity:.9;transform:translateY(-2px)}
.btn-o{background:#fff;color:var(--c1);border:2px solid var(--c1)}
.btn-o:hover{background:#fff5f5;transform:translateY(-1px)}
.btn:disabled{opacity:.4;pointer-events:none}

.feedback{font-size:15px;min-height:24px;text-align:center;font-weight:700}
.feedback.ok{color:#20c997}
.feedback.err{color:var(--c1)}

.answer-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;font-size:17px}
.answer-input{
  width:80px;padding:12px;text-align:center;border:2.5px solid #dee2e6;border-radius:14px;
  font-size:20px;font-weight:700;font-family:inherit;transition:all .3s;
}
.answer-input:focus{outline:none;border-color:var(--c2);box-shadow:0 0 0 3px rgba(61,214,200,.15)}
.answer-input.ok{border-color:#20c997;background:#f0fff4}
.answer-input.err{border-color:var(--c1);background:#fff5f5;animation:shake .4s}

/* ====== Scale / Balance ====== */
.scale-wrap{position:relative;width:100%;max-width:400px;height:240px;margin:0 auto}
.scale-wrap svg{width:100%;height:100%}
.scale-items{position:absolute;display:flex;gap:2px;flex-wrap:wrap;justify-content:center;align-items:flex-end;pointer-events:none}
.scale-left{left:10%;bottom:22%;width:26%}
.scale-right{right:10%;bottom:22%;width:26%}
.scale-item{font-size:26px;pointer-events:auto;cursor:pointer;transition:all .3s;line-height:1}
.scale-item:hover{transform:scale(1.2)}
.scale-item.removing{opacity:0;transform:scale(0)}

/* ====== Bar Model ====== */
.bar-wrap{width:100%;max-width:440px}
.bar-row{display:flex;align-items:center;gap:6px;margin:6px 0}
.bar-lbl{font-weight:700;font-size:15px;min-width:40px;text-align:center}
.bar-track{flex:1;height:36px;background:#f1f3f5;border-radius:10px;position:relative;overflow:visible}
.bar-fill{height:100%;border-radius:10px;transition:width .5s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;min-width:36px}
.bar-fill.a{background:linear-gradient(90deg,#ff6b6b,#ff8787)}
.bar-fill.b{background:linear-gradient(90deg,#4ecdc4,#63e6be)}
.bar-fill.d{background:linear-gradient(90deg,#feca57,#ffd43b);color:#495057}
.bar-seg{display:flex;width:100%;height:100%;gap:2px}
.bar-seg span{flex:1;background:rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:11px;color:#fff;border-radius:4px}
.bar-seg span.hl{background:rgba(255,255,255,.55)}

/* ====== Slider ====== */
.slider-grp{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:6px}
.slider-grp label{font-weight:700;font-size:14px}
.slider-val{font-size:22px;font-weight:700;color:var(--c1);background:#fff5f5;padding:4px 16px;border-radius:16px}
input[type=range]{-webkit-appearance:none;width:100%;height:10px;border-radius:10px;background:linear-gradient(90deg,#ffe0e0,#e9ecef);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--c1),#ff8787);cursor:pointer;box-shadow:0 3px 10px rgba(255,107,107,.35)}

/* ====== Venn ====== */
.venn-wrap{position:relative;width:300px;height:220px;margin:0 auto}
.venn-wrap svg{width:100%;height:100%}
.venn-wrap .region{cursor:pointer;transition:opacity .3s}
.venn-wrap .region:hover{opacity:.7}

/* ====== Grid items ====== */
.item-grid{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.item-chip{
  background:#f8f9fa;border:2.5px solid #dee2e6;border-radius:14px;padding:10px 18px;
  font-size:17px;cursor:pointer;transition:all var(--transition);font-weight:700;
}
.item-chip:hover{border-color:var(--c2);background:#e6fffa;transform:translateY(-1px)}
.item-chip.selected{background:linear-gradient(135deg,var(--c2),#63e6be);color:#fff;border-color:var(--c2);box-shadow:0 3px 12px rgba(61,214,200,.25)}
.item-chip.wrong{background:linear-gradient(135deg,var(--c1),#ff8787);color:#fff;border-color:var(--c1);animation:shake .4s}

/* ====== Character Animation ====== */
.anim-track{position:relative;width:100%;max-width:500px;height:80px;background:#f8f9fa;border-radius:16px;overflow:hidden}
.anim-char{position:absolute;font-size:36px;transition:left .1s linear;bottom:8px}
.anim-home{position:absolute;bottom:4px;font-size:11px;color:var(--sub);font-weight:600}

/* ====== Celebration ====== */
.cele{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:200}
@keyframes celePopIn{from{transform:translate(-50%,-50%) scale(0);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes celeFadeOut{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-60%) scale(.8)}}
@keyframes celeBounce{0%{transform:scale(0)}50%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ====== Achievement Popup ====== */
.achieve-popup{
  position:fixed;top:80px;right:20px;background:#fff;border-radius:16px;padding:14px 20px;
  box-shadow:0 8px 32px rgba(0,0,0,.18);z-index:300;display:flex;align-items:center;gap:12px;
  animation:slideInRight .4s cubic-bezier(.34,1.56,.64,1),fadeOut .3s 2.5s forwards;
  max-width:280px;border:2px solid #feca57;
}
.achieve-icon{font-size:36px}
@keyframes slideInRight{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes fadeOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(30px)}}

/* ====== Timer Bar ====== */
.timer-wrap{
  width:100%;max-width:400px;display:flex;align-items:center;gap:10px;padding:8px 0;
}
.timer-bar-track{flex:1;height:10px;background:#f1f3f5;border-radius:10px;overflow:hidden}
.timer-bar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,var(--c2),#20c997);transition:width .3s}
.timer-bar-fill.warn{background:linear-gradient(90deg,var(--c3),#ff9f43)}
.timer-bar-fill.urgent{background:linear-gradient(90deg,#ff6b6b,#ee5a24);animation:pulse .5s infinite}
.timer-text{font-size:15px;font-weight:700;min-width:36px;text-align:center}
.timer-text.urgent{color:#ff6b6b}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ====== Difficulty Badge ====== */
.diff-badge{padding:3px 12px;border-radius:12px;font-size:12px;font-weight:700}
.diff-badge.easy{background:#d3f9d8;color:#2b8a3e}
.diff-badge.medium{background:#fff3bf;color:#e67700}
.diff-badge.hard{background:#ffe3e3;color:#c92a2a}

/* ====== Trees on path ====== */
.tree-row{display:flex;gap:0;align-items:center;flex-wrap:wrap;justify-content:center}
.tree{font-size:32px;transition:all .3s}
.tree-spacer{width:30px;height:4px;background:#e9ecef;transition:width .3s}

/* ====== Step-by-step explainer (Stage 1) ====== */
.explain-box{
  background:linear-gradient(135deg,#fff9f0,#fff5f5);border-left:5px solid var(--c1);border-radius:12px;
  padding:14px 18px;margin:8px 0;font-size:15px;line-height:2;text-align:left;
  width:100%;max-width:540px;
}
.explain-box .step{display:flex;gap:10px;align-items:flex-start;margin:6px 0}
.explain-box .step-num{
  background:linear-gradient(135deg,var(--c1),#ff8787);color:#fff;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;
  box-shadow:0 2px 6px rgba(255,107,107,.25);
}
.explain-box .highlight{color:var(--c1);font-weight:700}
.formula-box{
  background:linear-gradient(135deg,#fff9db,#ffe8cc);border:2.5px dashed var(--c3);
  border-radius:14px;padding:12px 24px;text-align:center;font-weight:700;font-size:16px;
  margin:8px 0;box-shadow:0 2px 12px rgba(255,212,59,.15);
}
.concept-svg{max-width:520px;width:100%;margin:0 auto}
.concept-svg.anim-ready{animation:fadeIn .5s}

/* ── Stage 1 Animation: step-by-step reveal ── */
.explain-box .step{opacity:0;transform:translateX(-20px)}
.explain-box .step.anim-reveal{animation:stepReveal .5s cubic-bezier(.34,1.56,.64,1) forwards}
.explain-box .step-num.anim-pop{animation:stepNumPop .3s cubic-bezier(.34,1.56,.64,1) forwards}
.explain-box .highlight.anim-glow{animation:highlightGlow .6s ease-in-out}

.formula-box.anim-ready{opacity:0;animation:formulaBounce .6s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes stepReveal{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes stepNumPop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes highlightGlow{0%,100%{color:var(--c1)}50%{color:#ff8787;transform:scale(1.05)}}
@keyframes formulaBounce{0%{opacity:0;transform:scale(.8) translateY(12px)}60%{transform:scale(1.04) translateY(-2px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* ====== Keyframe Animations ====== */
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@keyframes pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.textbook-source{font-size:11px;color:#adb5bd;text-align:center;margin-top:12px;padding:4px 0;border-top:1px solid #f1f3f5;letter-spacing:.5px}

/* ====== Stat Pop Animation ====== */
.stat-pop {
  animation: statPop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes statPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ====== Scroll to Top Button ====== */
.scroll-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c1), #ff8787);
  color: #fff;
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,107,107,.3);
  opacity: 0;
  transform: translateY(20px);
  transition: all .3s;
  z-index: 100;
  pointer-events: none;
}
.scroll-top-btn.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 24px rgba(255,107,107,.4);
}

/* ====== Page Footer ====== */
.page-footer {
  text-align: center;
  padding: 32px 20px 24px;
  color: #adb5bd;
  font-size: 13px;
  border-top: 1px solid #f1f3f5;
  margin-top: 24px;
}
.page-footer p { margin: 4px 0; }
.page-footer .footer-sub { font-size: 11px; color: #ced4da; }

/* ====== Responsive ====== */
@media(max-width:1024px){
  .container{ max-width:720px; }
  .topic-grid{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
}
@media(max-width:768px){
  .container{ padding:16px; }
  .topic-grid{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:12px; }
  .grade-section{ padding:16px 12px 12px; }
  .topbar h1{ font-size:18px; }
  .topbar .stat-item{ font-size:12px; }
  .achieve-popup{ right:10px; max-width:240px; }
}
@media(max-width:600px){
  .topic-grid{ grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
  .topic-card{ padding:14px 8px; border-radius:16px; }
  .topic-card .icon{ font-size:30px; }
  .topic-card .name{ font-size:12px; }
  .topbar{ padding:10px 14px; gap:8px; }
  .topbar h1{ font-size:15px; }
  .container{ padding:10px; }
  .stage-content{ padding:12px; }
  .scale-wrap{ height:180px; }
  .scale-item{ font-size:20px; }
  .grade-section{ padding:12px 8px 8px; border-radius:16px; }
  .scroll-top-btn{ bottom:16px; right:16px; width:40px; height:40px; font-size:18px; }
  /* Mobile: achievement popup at bottom center */
  .achieve-popup {
    top: auto;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%);
    animation: slideInUp .4s cubic-bezier(.34,1.56,.64,1), fadeOut .3s 2.5s forwards;
    max-width: 90vw;
  }
}

@keyframes slideInUp { from { transform: translateX(-50%) translateY(100%); opacity:0; } to { transform: translateX(-50%) translateY(0); opacity:1; } }