/* ============================================================================
 * screens.css —— 功能屏样式
 * 视觉规格对齐 iOS：StatTile 统计条、LevelCard 关卡卡、island 三岛渐变。
 * ========================================================================= */

/* ===================== 启动与致命错误 ===================== */
.boot {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-m);
  background: var(--grad-sky);
}
.boot-logo { font-size: 72px; animation: floatY 2.6s ease-in-out infinite; }
.boot-text { font-size: 17px; font-weight: 800; color: var(--footer-ink); opacity: 0.72; }
.fatal { padding: 40px 20px; }
.fatal h2 { margin: 0 0 8px; }
.fatal p { font-size: 15px; opacity: 0.78; }

/* ===================== Splash ===================== */
.splash {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-s);
  background: var(--grad-aurora); overflow: hidden;
}
.splash-stars { position: absolute; inset: 0; }
.splash-star { position: absolute; color: rgba(255,255,255,0.86); animation: breathe 2.6s ease-in-out infinite; }
.splash-planet { font-size: 92px; animation: floatY 3s ease-in-out infinite; position: relative; }
.splash-title { position: relative; margin: 0; font-size: 40px; color: #fff; letter-spacing: 3px; }
.splash-slogan { position: relative; margin: 0; font-size: 17px; color: #fff; opacity: 0.94; text-align: center; padding: 0 24px; }
.splash-foot { position: absolute; bottom: 40px; margin: 0; font-size: 13px; color: rgba(255,255,255,0.82); }

/* ===================== 星球地图 ===================== */
.map { padding-bottom: 90px; }
.map-hero { padding: var(--sp-l) var(--sp-m) var(--sp-m); text-align: center; }
.map-hero-planet { font-size: 62px; animation: floatY 3.4s ease-in-out infinite; }
.map-hero-title { margin: 6px 0 10px; font-size: 32px; }
.map-hero-caps { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

.map-stats { display: flex; gap: var(--sp-s); padding: 0 var(--sp-m) var(--sp-m); }
.stat {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: #fff; border-radius: var(--r-card); padding: var(--sp-s);
  box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
}
.stat-ico { font-size: 22px; }
.stat-num { font-size: 23px; font-weight: 900; color: var(--footer-ink); }
.stat-label { font-size: 12px; font-weight: 700; opacity: 0.62; }

.island { margin: 0 var(--sp-m) var(--sp-l); padding: var(--sp-m); border-radius: var(--r-panel); }
.island-head { display: flex; align-items: baseline; gap: var(--sp-s); margin-bottom: var(--sp-s); }
.island-title { margin: 0; font-size: 24px; color: #fff; }
.island-kw { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.9); }
.island-grid { display: grid; gap: var(--sp-s); grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.level-card {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left;
  padding: var(--sp-s) var(--sp-m); border: none; border-radius: var(--r-card);
  background: rgba(255,255,255,0.95); cursor: pointer; touch-action: manipulation;
  box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
  transition: transform var(--mo-tap) ease;
}
.level-card.is-pressed { transform: scale(0.95); }
.level-card.is-done { background: linear-gradient(160deg,#fffdf2,#fff6d8); }
.lc-no { font-size: 12px; font-weight: 900; opacity: 0.45; }
.lc-title { font-size: 16px; font-weight: 800; color: var(--footer-ink); }
.lc-layer { font-size: 11px; font-weight: 800; color: var(--nova-outfit); background: rgba(143,120,235,0.12); padding: 2px 8px; border-radius: 8px; }
.lc-stars { font-size: 13px; letter-spacing: 1px; }

.map-entries { display: flex; flex-direction: column; gap: var(--sp-s); padding: 0 var(--sp-m) var(--sp-l); }
.entry-card {
  display: flex; align-items: center; gap: var(--sp-m); text-align: left;
  padding: var(--sp-m); border: none; border-radius: var(--r-card);
  background: #fff; cursor: pointer; touch-action: manipulation;
  box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
}
.entry-card.is-pressed { transform: scale(0.98); }
.ec-ico { font-size: 32px; }
.ec-text { flex: 1; }
.ec-title { font-size: 17px; font-weight: 800; }
.ec-desc { font-size: 13px; opacity: 0.66; margin-top: 2px; }
.ec-arrow { font-size: 24px; opacity: 0.35; font-weight: 900; }
.map-foot { text-align: center; padding: var(--sp-l) var(--sp-m) var(--sp-xl); }
.map-foot p { margin: 4px 0; font-size: 12px; color: var(--footer-ink); opacity: 0.6; font-weight: 700; }

/* ===================== 通用页脚 ===================== */
.toast {
  position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%);
  z-index: 90; background: rgba(36,51,88,0.94); color: #fff;
  padding: 12px 22px; border-radius: var(--r-button);
  font-size: 15px; font-weight: 700; max-width: 82vw; text-align: center;
  animation: pop 0.24s cubic-bezier(.2,.9,.3,1.3) both;
}

/* ===================== 百宝袋 ===================== */
.tutor, .tutor-detail { padding-bottom: var(--sp-xl); }
.tutor-hero { padding: 0 var(--sp-m) var(--sp-s); font-size: 14px; font-weight: 700; opacity: 0.68; text-align: center; }
.tutor-tools { display: flex; gap: var(--sp-s); padding: 0 var(--sp-m) var(--sp-s); }
.tutor-search {
  flex: 1; min-height: 46px; padding: 0 var(--sp-m); border: 2px solid rgba(36,51,88,0.12);
  border-radius: var(--r-button); font-size: 15px; background: #fff; color: var(--footer-ink);
}
.tutor-search:focus { outline: none; border-color: var(--nova-outfit); }
.fav-toggle, .tc { cursor: pointer; border: none; }
.fav-toggle.is-on, .tc.is-on { background: var(--nova-outfit); color: #fff; }
.tutor-cats {
  display: flex; gap: 8px; padding: 0 var(--sp-m) var(--sp-s);
  overflow-x: auto; scrollbar-width: none;
}
.tutor-cats::-webkit-scrollbar { display: none; }
.tutor-count { padding: 0 var(--sp-m) var(--sp-s); font-size: 13px; font-weight: 800; opacity: 0.55; }
.tutor-note {
  margin: 0 var(--sp-m) var(--sp-s); padding: var(--sp-s) var(--sp-m);
  background: #fff8e1; border-left: 5px solid var(--star);
  border-radius: var(--r-card); font-size: 13px; font-weight: 700; color: #7a5a10; line-height: 1.5;
}
.tutor-grid { display: grid; gap: var(--sp-s); padding: 0 var(--sp-m); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tutor-card {
  position: relative; display: flex; align-items: center; gap: var(--sp-s); text-align: left;
  padding: var(--sp-s) var(--sp-m); border: none; border-radius: var(--r-card);
  background: #fff; cursor: pointer;
  box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
}
.tutor-card.is-pressed { transform: scale(0.97); }
.tc-ico { font-size: 26px; }
.tc-body { flex: 1; }
.tc-topic { font-size: 15px; font-weight: 800; color: var(--footer-ink); }
.tc-meta { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.tc-meta .chip { font-size: 11px; padding: 3px 9px; }
.tc-fav { position: absolute; top: 8px; right: 10px; color: var(--star); font-size: 16px; }
.tutor-empty { text-align: center; padding: var(--sp-xl); font-weight: 700; opacity: 0.6; }

.td-head { display: flex; align-items: flex-start; gap: var(--sp-m); padding: var(--sp-m); }
.td-ico { font-size: 44px; }
.td-titles { flex: 1; }
.td-topic { margin: 0 0 8px; font-size: 24px; }
.td-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.fav-btn { cursor: pointer; border: none; }
.fav-btn.is-on { background: var(--star); }
.tutor-template {
  margin: 0 var(--sp-m) var(--sp-m); padding: var(--sp-m);
  background: linear-gradient(160deg,#f6f1ff,#ece4ff);
  border-radius: var(--r-card); box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
}
.tpl-label { font-size: 13px; font-weight: 800; color: var(--nova-outfit); margin-bottom: 8px; }
.tpl-text { font-size: 16px; font-weight: 700; line-height: 1.65; margin-bottom: var(--sp-m); user-select: text; }
.td-section { padding: 0 var(--sp-m) var(--sp-m); }
.td-section h2 { font-size: 18px; margin: 0 0 var(--sp-s); }
.tutor-demo { display: flex; flex-direction: column; gap: var(--sp-s); }
.demo-row { display: flex; gap: var(--sp-s); align-items: flex-start; }
.demo-row--me { flex-direction: row-reverse; }
.demo-who {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff; background: var(--band-dataCity);
}
.demo-row--me .demo-who { background: var(--nova-outfit); }
.demo-bubble {
  max-width: 78%; padding: var(--sp-s) var(--sp-m); border-radius: var(--r-bubble);
  background: #fff; font-size: 15px; line-height: 1.6; font-weight: 600;
  box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
}
.td-tips { margin: 0; padding-left: 22px; }
.td-tips li { font-size: 15px; font-weight: 700; line-height: 1.9; }
.td-foot { padding: var(--sp-m); text-align: center; font-size: 12px; opacity: 0.58; font-weight: 700; }
.screen .explain { margin: 0 var(--sp-m) var(--sp-m); }

/* ===================== 工程师线 ===================== */
.eng { padding-bottom: var(--sp-xl); }
.eng-hero { display: flex; gap: var(--sp-m); padding: var(--sp-l) var(--sp-m); align-items: center; background: var(--grad-deepSpace); color: #fff; }
.eng-hero-ico { font-size: 52px; }
.eng-hero h1 { margin: 0 0 6px; font-size: 26px; color: #fff; }
.eng-hero p { margin: 0; font-size: 14px; color: var(--eng-accent); line-height: 1.6; }
.eng-list { display: flex; flex-direction: column; gap: var(--sp-s); padding: var(--sp-m); }
.eng-card {
  display: flex; align-items: center; gap: var(--sp-m); text-align: left;
  padding: var(--sp-m); border: none; border-radius: var(--r-card);
  background: var(--eng-panel); cursor: pointer;
}
.eng-card.is-pressed { transform: scale(0.98); }
.eng-card .ec-ico { font-size: 36px; }
.eng-card .ec-title { color: #fff; }
.eng-card .ec-desc { color: rgba(255,255,255,0.62); }
.ec-progress { font-size: 12px; font-weight: 800; color: var(--eng-accent-2); margin-top: 4px; }
.eng-foot { text-align: center; padding: var(--sp-m); font-size: 13px; font-weight: 700; opacity: 0.55; }

.eng-acts { display: flex; flex-direction: column; gap: var(--sp-s); padding: var(--sp-m); }
.eng-act {
  display: flex; align-items: center; gap: var(--sp-m); text-align: left;
  padding: var(--sp-m); border: none; border-radius: var(--r-card);
  background: var(--eng-panel); cursor: pointer;
}
.ea-ico { font-size: 32px; }
.ea-text { flex: 1; }
.ea-title { font-size: 17px; font-weight: 800; color: #fff; }
.ea-desc { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 3px; }
.ea-stars { font-size: 14px; }
.act-stage { padding: var(--sp-m); min-height: 320px; }

.math-stage, .viz { display: flex; flex-direction: column; align-items: center; gap: var(--sp-m); }
.math-emoji { font-size: 76px; }
.math-q { font-size: 20px; font-weight: 800; text-align: center; color: #fff; line-height: 1.6; }
.math-opts { display: flex; gap: var(--sp-m); flex-wrap: wrap; justify-content: center; }
.math-hint, .math-rate { font-size: 14px; font-weight: 700; color: var(--eng-accent); text-align: center; margin: 0; }
.coin-face { font-size: 66px; transition: transform 0.4s; }
.dirty-jars { display: flex; gap: var(--sp-m); }
.jar { background: var(--eng-panel); padding: var(--sp-m); border-radius: var(--r-card); text-align: center; }
.jar-ico { display: block; font-size: 22px; font-weight: 800; color: #fff; }
.jar-label { font-size: 12px; color: rgba(255,255,255,0.6); }

.blocks { display: flex; flex-direction: column; gap: var(--sp-s); align-items: center; }
.blocks-grid {
  display: grid; gap: 5px; width: 100%; max-width: 340px; aspect-ratio: 1;
  background: var(--eng-panel); padding: 8px; border-radius: var(--r-card);
}
.bc {
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.07); border-radius: 9px; font-size: 24px;
}
.bc.is-wall { background: rgba(255,255,255,0.22); }
.bc.is-bot { background: rgba(126,224,255,0.26); }
.blocks-hint { font-size: 14px; font-weight: 700; color: var(--eng-accent); text-align: center; }
.blocks-prog { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 40px; align-items: center; }
.bp { background: var(--eng-panel); padding: 5px 11px; border-radius: 9px; font-size: 13px; font-weight: 700; color: #fff; }
.blocks-empty { font-size: 13px; color: rgba(255,255,255,0.45); font-weight: 700; }
.blocks-bar { display: flex; gap: var(--sp-s); flex-wrap: wrap; justify-content: center; }
.btn--small { min-height: 42px; font-size: 14px; padding: 0 var(--sp-m); background: var(--eng-panel); }
.btn--go { background: var(--eng-accent); color: var(--eng-bg-1); }

.curve { width: 100%; max-width: 420px; }

/* ===================== 实操课 ===================== */
.practice { padding-bottom: var(--sp-xl); }
.pr-hero { text-align: center; padding: var(--sp-l) var(--sp-m) var(--sp-m); }
.pr-hero-ico { font-size: 58px; }
.pr-hero-title { margin: 6px 0 10px; font-size: 27px; }
.pr-hero-meta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.pr-warn {
  margin: 0 var(--sp-m) var(--sp-m); padding: var(--sp-s) var(--sp-m);
  background: #fff8e1; border-left: 5px solid var(--star);
  border-radius: var(--r-card); font-size: 14px; font-weight: 700; color: #7a5a10; line-height: 1.55;
}
.pr-steps { display: flex; flex-direction: column; gap: var(--sp-s); padding: 0 var(--sp-m); }
.pr-step {
  display: flex; gap: var(--sp-s); padding: var(--sp-m);
  background: #fff; border-radius: var(--r-card);
  box-shadow: 0 var(--el-rest-color) var(--el-rest-r) var(--el-rest-y);
}
.pr-step.is-done { background: #f2fdf5; }
.pr-no {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--nova-outfit); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800;
}
.pr-step.is-done .pr-no { background: var(--correct); }
.pr-t { font-size: 16px; font-weight: 800; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pr-parent { background: var(--star); font-size: 11px; }
.pr-d { font-size: 14px; line-height: 1.6; opacity: 0.74; margin-top: 5px; }
.pr-actions { display: flex; flex-direction: column; align-items: center; gap: var(--sp-s); padding: var(--sp-l) var(--sp-m); }
.pr-progress { font-size: 14px; font-weight: 800; opacity: 0.6; }
.pr-badge { font-size: 19px; font-weight: 900; color: var(--star); }

/* ===================== 反馈 / 关于 ===================== */
.feedback, .about { padding-bottom: var(--sp-xl); }
.feedback .card, .about .card { margin: var(--sp-m); }
.fb-h { margin: 0 0 var(--sp-s); font-size: 18px; }
.fb-note {
  margin: var(--sp-m); padding: var(--sp-s) var(--sp-m);
  background: #eef7ff; border-left: 5px solid var(--band-dataCity);
  border-radius: var(--r-card); font-size: 13px; font-weight: 700; color: #1a4a7a;
}
.fb-kinds { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-m); }
.fb-kind { cursor: pointer; border: none; }
.fb-kind.is-on { background: var(--k, var(--nova-outfit)); color: #fff; }
.fb-title, .fb-body {
  width: 100%; padding: var(--sp-s) var(--sp-m); margin-bottom: var(--sp-s);
  border: 2px solid rgba(36,51,88,0.12); border-radius: var(--r-card);
  font-size: 15px; font-family: inherit; color: var(--footer-ink); background: #fff;
  user-select: text;
}
.fb-title:focus, .fb-body:focus { outline: none; border-color: var(--nova-outfit); }
.fb-count { text-align: right; font-size: 12px; opacity: 0.5; margin-bottom: var(--sp-s); }
.fb-btns { display: flex; gap: var(--sp-s); }
.fb-btns .btn { flex: 1; }
.fb-item { display: flex; gap: var(--sp-s); padding: var(--sp-s) 0; border-bottom: 1px solid rgba(36,51,88,0.08); }
.fb-item-emoji { font-size: 24px; }
.fb-item-title { font-size: 15px; font-weight: 800; }
.fb-item-text { font-size: 14px; line-height: 1.55; margin-top: 3px; white-space: pre-wrap; user-select: text; }
.fb-item-time { font-size: 11px; opacity: 0.45; margin-top: 4px; }
.fb-empty { font-size: 14px; opacity: 0.5; text-align: center; padding: var(--sp-m); }
.about-p { font-size: 14px; line-height: 1.7; opacity: 0.78; margin: 0 0 8px; }
.about-hint { font-size: 12px; opacity: 0.55; margin-top: 8px; }

.gate {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(36,51,88,0.6); backdrop-filter: blur(6px);
}
.gate-card {
  background: #fff; border-radius: var(--r-panel); padding: var(--sp-l);
  width: min(340px, 86vw); text-align: center;
}
.gate-card h2 { margin: 0 0 var(--sp-m); font-size: 20px; }
.gate-q { font-size: 30px; font-weight: 900; margin: 0 0 var(--sp-m); }
.gate-input {
  width: 100%; min-height: 52px; text-align: center; font-size: 24px; font-weight: 800;
  border: 2px solid rgba(36,51,88,0.16); border-radius: var(--r-card);
  margin-bottom: var(--sp-m); color: var(--footer-ink);
}
.gate-btns { display: flex; gap: var(--sp-s); }
.gate-btns .btn { flex: 1; }

.notfound { display: flex; align-items: center; justify-content: center; padding: var(--sp-xl); }