/* ===== 英语新手村 设计系统 (像素风 / 黑底荧光绿亮橙) ===== */
:root{
  --bg:#000000;
  --green:#00FF41;
  --orange:#FF6B1A;
  --white:#FFFFFF;
  --gray:#888888;
  --red:#FF0000;
  --blue:#3399FF;
  --yellow:#FFFF00;
  --panel:#0a0a0a;
  --panel2:#111111;
  --panel3:#1a1a1a;
  --line:#2a2a2a;
  /* 底部导航总高：桌面/平板 2 行 × 52px + 2px 上边框（手机端在断点内改为 98px）。
     内容区底部留白必须 ≥ 该值，否则页面最后一行会被固定导航盖住而“显示不完整”。 */
  --nav-h:106px;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--white);
  font-family:'Segoe UI','Microsoft YaHei',sans-serif;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
.pixel{font-family:'Courier New',Courier,monospace;letter-spacing:1px;text-shadow:0 0 6px rgba(0,255,65,.4)}
.green{color:var(--green)}
.orange{color:var(--orange)}
.hidden{display:none!important}
button{font-family:inherit}

/* ===== 布局 ===== */
#app{min-height:100vh;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:8px 12px;background:rgba(0,0,0,.92);
  border-bottom:2px solid var(--green);backdrop-filter:blur(4px);
  flex-wrap:wrap;                 /* 手机端放不下时换行，避免右侧金币/发音按钮被裁掉 */
}
.topbar .brand{font-size:18px;color:var(--green);font-weight:bold;white-space:nowrap}
.topbar .stat{display:flex;gap:10px;align-items:center;font-size:13px;flex-wrap:wrap;justify-content:flex-end;row-gap:6px;min-width:0}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--white);font-size:12px;white-space:nowrap}
.chip b{color:var(--green)}
/* 顶栏里的 EXP 八段台阶必须给显式宽度：
   .chip 是 flex item（shrink-to-fit），而 .seg{flex:1} 的 flex-basis 为 0，
   不给宽度时整条台阶会塌缩成 0px 而完全看不见。 */
.topbar .expbar{width:64px}
.topbar .expbar .seg{height:12px}

.nav{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:rgba(0,0,0,.95);border-top:2px solid var(--green);
}
.nav{padding-bottom:env(safe-area-inset-bottom,0px)}   /* 全面屏底部手势条留白 */
.nav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;padding:7px 2px;text-decoration:none;color:var(--gray);font-size:10px;
  border-right:1px solid var(--line);position:relative;min-height:52px;
  min-width:0;
}
.nav a .ic{font-size:20px;line-height:1}
.nav a .lb{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.nav a.active{color:var(--green);background:linear-gradient(180deg,transparent,rgba(0,255,65,.12))}
.nav a .badge{position:absolute;top:4px;right:8px;background:var(--orange);color:#000;font-size:9px;border-radius:8px;padding:0 4px;min-width:14px;text-align:center}
/* 底部留白 = 导航实际高度 + 呼吸间距；缺了它页面最后一行会被固定导航永久遮住 */
.content{flex:1;padding:12px 12px 120px;max-width:1200px;margin:0 auto;width:100%}
.content{padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 14px)}
.page-title{font-size:20px;color:var(--green);margin:6px 0 14px;text-shadow:0 0 8px rgba(0,255,65,.4)}
.muted{color:var(--gray)}
.center{text-align:center}

/* ===== 卡片/面板 ===== */
.card{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px}
.card.glow{border-color:var(--green);box-shadow:0 0 10px rgba(0,255,65,.25)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.wrap{flex-wrap:wrap}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;min-width:44px;padding:10px 16px;border-radius:8px;
  border:2px solid var(--green);background:transparent;color:var(--green);
  font-size:15px;cursor:pointer;transition:transform .08s,background .15s;
}
.btn:active{transform:scale(.95)}
.btn.primary{background:var(--green);color:#000;font-weight:bold}
.btn.orange{border-color:var(--orange);color:var(--orange)}
.btn.orange.primary{background:var(--orange);color:#000}
.btn.ghost{border-color:var(--line);color:var(--gray)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.block{width:100%}
.btn.sm{min-height:34px;font-size:13px;padding:6px 10px}

/* ===== EXP 八段像素台阶 ===== */
.expbar{display:flex;gap:2px}
.expbar .seg{height:14px;flex:1;background:#222;border:1px solid #333}
.expbar .seg.on{background:var(--green);box-shadow:0 0 5px var(--green)}

/* ===== 网格 ===== */
.grid{display:grid;gap:10px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}

/* ===== 词卡 ===== */
.wcard{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;transition:transform .08s,border-color .15s;position:relative}
.wcard:active{transform:scale(.97)}
.wcard.q-white{border-left:4px solid #ddd}
.wcard.q-bronze{border-left:4px solid #cd7f32}
.wcard.q-purple{border-left:4px solid #a855f7}
.wcard.q-orange{border-left:4px solid #FF6B1A}
.wcard.locked{opacity:.5;filter:grayscale(1)}
.modal .wbig{font-size:clamp(20px,6.2vw,30px);font-weight:800;color:#fff;text-shadow:0 0 8px rgba(0,255,65,.55);letter-spacing:.5px;word-break:break-word;overflow-wrap:anywhere}
.wcard .w{
  /* 手机 2 列时卡片内宽仅 ~107px，固定 30px 会把 contemporary(12 字符) 挤出容器被裁掉；
     改用随视口收缩的字号，并允许超长词断行兜底 */
  font-size:clamp(16px,4.5vw,30px);font-weight:800;line-height:1.15;color:#fff;
  text-shadow:0 0 8px rgba(0,255,65,.55);letter-spacing:.5px;
  word-break:break-word;overflow-wrap:anywhere;min-width:0;
}
.wcard .row{gap:6px;min-width:0}
.wcard .p{color:var(--green);font-size:13px;margin-top:4px;font-weight:600}
.wcard .d{font-size:13px;margin-top:3px}
.tag{display:inline-block;font-size:11px;padding:1px 6px;border-radius:6px;border:1px solid var(--line);margin:2px 3px 0 0}
.tag.known{background:rgba(0,255,65,.15);color:var(--green);border-color:var(--green)}
.tag.broken{background:rgba(255,0,0,.15);color:#ff6060;border-color:#ff6060}
.tag.grade{background:rgba(255,107,26,.16);color:#FF6B1A;border-color:#FF6B1A;font-weight:700}
.lock-msg{margin-top:6px;font-size:12px;color:#FF6B1A;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ===== 词根碎片 / 速记影像 ===== */
.etym-formula{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.mchip{display:inline-flex;flex-direction:column;line-height:1.25;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:var(--panel2)}
.mchip b{font-size:15px;color:var(--green);letter-spacing:.5px}
.mchip span{font-size:11px;color:var(--gray)}
.mchip.pre{border-color:#4aa8ff}.mchip.pre b{color:#4aa8ff}
.mchip.suf{border-color:#ffd166}.mchip.suf b{color:#ffd166}
.mchip.rt{border-color:#b98cff}.mchip.rt b{color:#b98cff}
.mplus{color:var(--gray);font-weight:700;margin:0 2px}
.mtag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;border:1px solid var(--green);color:var(--green);background:rgba(0,255,65,.12);font-weight:700}

/* ===== Tabs ===== */
/* flex-wrap：手机上标签行必须换行。
   原先是 overflow-x:auto，右侧标签被硬切一半（「自然环…」）且没有任何可滑动提示，
   用户看到的就是「显示不完整」。换行后所有筛选项完整可见。 */
.tabs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:2px;margin-bottom:10px}
.tab{flex:0 0 auto;padding:8px 12px;border:1px solid var(--line);border-radius:20px;font-size:13px;color:var(--gray);background:var(--panel2);cursor:pointer;white-space:nowrap}
.tab.active{color:#000;background:var(--green);border-color:var(--green);font-weight:bold}

/* ===== Modal ===== */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;overscroll-behavior:contain}
.modal{background:var(--panel);border:2px solid var(--green);border-radius:14px;max-width:560px;width:100%;max-height:90vh;max-height:88dvh;overflow:auto;padding:18px;box-shadow:0 0 30px rgba(0,255,65,.3);margin:auto;position:relative;box-sizing:border-box;-webkit-overflow-scrolling:touch}
.modal h3{color:var(--green);margin-bottom:10px;padding-right:26px}
/* .close 必须锚定在弹窗自身（而不是遮罩），否则桌面端会飘到屏幕右上角、移动端会跑到弹窗外 */
.modal .close{position:absolute;top:8px;right:10px;cursor:pointer;font-size:22px;color:var(--gray);line-height:1;background:var(--panel);z-index:3}

/* ===== 飘字 ===== */
.floatup{position:fixed;z-index:200;pointer-events:none;font-weight:bold;font-size:18px;animation:floatup 1s ease-out forwards}
@keyframes floatup{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-60px) scale(1.1)}}

/* ===== 血条对战 ===== */
.boss-stage{background:radial-gradient(circle at 50% 30%,#1a0a00,#000);border:2px solid var(--orange);border-radius:14px;padding:16px;margin-bottom:14px;position:relative;overflow:hidden}
.boss-sprite{font-size:64px;text-align:center;animation:bossbob 2s ease-in-out infinite}
@keyframes bossbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.boss-sprite.hit{animation:hit .3s}
@keyframes hit{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px);filter:brightness(3)}75%{transform:translateX(10px);filter:brightness(3)}}
.hpbar{height:20px;background:#330000;border:2px solid #550; border-radius:10px;overflow:hidden;margin:6px 0}
.hpbar .fill{height:100%;background:linear-gradient(90deg,#ff0000,#ff6b1a);transition:width .3s}
.hpbar.green .fill{background:linear-gradient(90deg,#00ff41,#7CFC00)}
.combo-float{position:absolute;top:10px;right:14px;color:var(--yellow);font-weight:bold;font-size:22px;animation:pop .4s}
@keyframes pop{0%{transform:scale(0)}60%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ===== 拼词试炼 ===== */
.spell-input{width:100%;font-size:22px;padding:12px;border:2px solid var(--green);background:#000;color:var(--green);border-radius:8px;letter-spacing:3px;text-align:center;text-transform:lowercase}
/* 手机号等普通输入：沿用 .spell-input 的边框手感，但恢复常规字号与对齐（11 位数字居中很怪） */
.phone-input{font-size:16px;letter-spacing:1px;text-align:left;padding:10px 12px}
.letter{display:inline-block;min-width:18px;text-align:center;font-size:22px;border-bottom:3px solid #333;margin:0 1px}
.letter.ok{color:var(--green);border-color:var(--green)}
.letter.bad{color:var(--red);border-color:var(--red)}

/* ===== 单题作答反馈（提交后锁定，自动进入下一题） ===== */
.qfb{margin-top:10px;padding:8px 10px;border-radius:8px;font-size:14px;border:1px dashed #333}
.qfb.ok{color:var(--green);border-color:var(--green);background:rgba(0,255,65,.08)}
.qfb.no{color:var(--red);border-color:var(--red);background:rgba(255,60,60,.08)}
.qfb b{color:inherit}
.btn.opt-right,.btn.opt-right:disabled{opacity:1;color:#000;background:var(--green);border-color:var(--green)}
.btn.opt-wrong,.btn.opt-wrong:disabled{opacity:1;color:#fff;background:#a11;border-color:#a11}
.spell-input.opt-right{border-color:var(--green);background:rgba(0,255,65,.08)}
.spell-input.opt-wrong{border-color:var(--red);background:rgba(255,60,60,.08)}
.spell-input:disabled{opacity:.75}

/* ===== 进度/统计 ===== */
.bar{height:10px;background:#222;border-radius:6px;overflow:hidden}
.bar>div{height:100%;background:var(--green)}
.bar.orange>div{background:var(--orange)}
/* 细进度条（设置中心「今日进度」用）：比 .bar 更细，适合文字行之间 */
.mini{height:7px;background:#1a1a1a;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.mini i{display:block;height:100%;background:var(--green);transition:width .3s}
.heat{display:grid;grid-template-columns:repeat(13,1fr);gap:3px}
.heat .cell{aspect-ratio:1;border-radius:3px;background:#1a1a1a}
.heat .c1{background:#0a3d18}.heat .c2{background:#0f6b2a}.heat .c3{background:#13a03f}.heat .c4{background:var(--green)}

/* ===== 村庄俯瞰 ===== */
.village-map{position:relative;width:100%;aspect-ratio:3/2;background:linear-gradient(180deg,#001a0a,#000);border:2px solid var(--green);border-radius:14px;overflow:hidden;margin-bottom:14px}
.bldg{position:absolute;width:20%;text-align:center;font-size:11px;color:var(--gray);transform:translate(-50%,-50%)}
.bldg .icon{font-size:40px;filter:grayscale(1) brightness(.5)}
.bldg.on .icon{filter:none;animation:pop .4s}
.bldg.on{color:var(--green)}

/* ===== 成就 ===== */
.ach{display:flex;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px}
.ach.locked{opacity:.45}
.ach .medal{font-size:32px}
.ach .meta{flex:1}
.ach .meta .t{font-weight:bold}
.ach .meta .c{font-size:12px;color:var(--gray)}

/* ===== 提示条 ===== */
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:var(--panel3);border:1px solid var(--green);color:var(--green);padding:10px 18px;border-radius:24px;z-index:300;font-size:14px;animation:pop .3s;max-width:90%}
.warnbar{background:var(--red);color:#fff;padding:6px 12px;font-size:13px;text-align:center}
/* 建议型提示条（橙色，用于「建议绑定手机号备份进度」这类非错误提醒） */
.note{background:rgba(255,107,26,.14);border:1px solid var(--orange);color:var(--orange);padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.55;margin-bottom:8px}

/* ===== 响应式断点 ===== */
@media (max-width:768px){
  .grid.c4{grid-template-columns:repeat(2,1fr)}
  .grid.c3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1366px){
  .content{max-width:1280px}
  .grid.c4{grid-template-columns:repeat(4,1fr)}
  .grid.c3{grid-template-columns:repeat(3,1fr)}
}

/* ===== 手机端专项修正（≤767px，对应需求文档 13.1「小/中屏手机 → 单列布局」）=====
   装备库在手机上出现「显示不完整」的根因：
   ① 词卡网格仍是 2 列，卡片内宽仅 ~107px，而单词字号固定 30px（12 字符需 222px）→ 单词被裁；
   ② .content 底部留白 70px < 固定导航实际高度 106px → 最后一行永远被导航盖住；
   ③ 顶栏不换行，内容 ~490px 远超 360px 视口 → 右侧金币/发音按钮被裁；
   ④ 顶栏 EXP 台阶因 flex-basis:0 塌缩为 0 宽；
   ⑤ 弹窗 max-height:90vh（大视口）+ 居中，在带地址栏的手机上底部超出可见区，
      「装备此词」按钮够不到。 */
@media (max-width:767px){
  :root{--nav-h:98px}                       /* 导航行高 52→48px，2 行 + 2px 边框 */

  /* 底部导航：压缩行高，文字不换行溢出 */
  .nav a{min-height:48px;padding:5px 2px}
  .nav a .ic{font-size:18px}
  .nav a .lb{font-size:9px}

  /* 顶栏：换行 + 收紧，保证每枚 chip 都完整可见 */
  .topbar{padding:6px 8px;gap:6px}
  .topbar .brand{font-size:14px}
  .topbar .stat{gap:6px;row-gap:4px;font-size:12px}
  .topbar .expbar{width:56px}
  .chip{font-size:11px;padding:2px 6px}

  /* 内容区：左右收紧，底部留白跟着导航高度走 */
  .content{padding:10px 10px;padding-bottom:calc(var(--nav-h) + 12px)}
  .page-title{font-size:17px;margin:4px 0 10px}
  .card{padding:11px;margin-bottom:10px}

  /* 单词列表：手机端单列全宽，长单词不再被裁 */
  .grid.c2.wgrid{grid-template-columns:1fr}
  .wcard{padding:10px}

  /* 弹窗：顶部对齐 + 遮罩自身滚动，键盘弹出/长内容时底部按钮可达 */
  .modal-mask{align-items:flex-start;padding:8px}
  .modal{max-height:none;overflow:visible;padding:14px;border-radius:12px;margin:0 auto}
  .modal .wbig{font-size:clamp(20px,7vw,26px)}
  .spell-input{font-size:19px;letter-spacing:1px}
  /* 筛选标签：手机端收紧尺寸，配合 flex-wrap 让 5 个品阶 / 7 个场景都完整显示 */
  .tabs{gap:5px;margin-bottom:8px}
  .tab{font-size:11px;padding:6px 9px}
}

/* 触摸热区保证 >=44px */
a,button,.wcard,.tab,.btn{min-height:44px}
/* 底部导航按钮保持压缩后的行高（覆盖上一条通用热区规则，仍 ≥44px 可点） */
@media (max-width:767px){.nav a{min-height:48px}}