/* ===== 单词三角洲 · 卡通军事风样式系统 ===== */
:root {
  --green: #4A6B3A;        /* 主色 军绿 */
  --green-dark: #2E4A2E;   /* 深绿 */
  --green-light: #6B8F5A;
  --orange: #F5A623;       /* 强调 能量橙 */
  --orange-dark: #D98A0A;
  --correct: #2ECC71;      /* 命中 */
  --wrong: #E57373;        /* 失误 */
  --gold: #D4A017;         /* 徽章金 */
  --bg: #F4EFE6;           /* 沙色背景 */
  --card: #FFFDF5;         /* 米白卡片 */
  --ink: #33342E;          /* 主文字 */
  --ink-light: #7A7B6F;
  --radius: 18px;
  --shadow: 0 4px 14px rgba(46,74,46,.14);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: none;
}

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  position: relative;
  box-shadow: 0 0 24px rgba(0,0,0,.08);
}

/* ===== 顶栏 ===== */
#topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
}
.tb-rank { font-weight: 800; font-size: 16px; white-space: nowrap; }
.tb-mid { flex: 1; display: flex; align-items: center; gap: 8px; }
.exp-bar {
  flex: 1; height: 14px; border-radius: 7px;
  background: rgba(255,255,255,.22); overflow: hidden;
}
.exp-fill {
  height: 100%; width: 0%;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--orange), #FFD166);
  transition: width .5s ease;
}
.tb-exp-text { font-size: 12px; font-weight: 700; white-space: nowrap; }
.tb-right { display: flex; align-items: center; gap: 8px; }
.tb-streak { font-size: 15px; font-weight: 800; }
.tb-gear { font-size: 20px; cursor: pointer; padding: 2px 4px; }

/* ===== 主视图容器 ===== */
#view-root {
  flex: 1;
  padding: 14px;
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

/* ===== 底部导航 ===== */
#bottom-nav {
  position: fixed;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 520px;
  display: flex;
  background: var(--card);
  border-top: 2px solid rgba(74,107,58,.15);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  z-index: 60;
}
.nav-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  background: none; border: none;
  font-size: 20px; color: var(--ink-light);
  padding: 6px 0; cursor: pointer;
  border-radius: 12px;
  transition: transform .1s;
}
.nav-btn span { font-size: 12px; font-weight: 600; }
.nav-btn.active { color: var(--green-dark); background: rgba(74,107,58,.12); transform: translateY(-1px); }
.nav-btn:active { transform: scale(.94); }

/* ===== 通用组件 ===== */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  min-height: 52px;
  border: none; border-radius: 16px;
  font-size: 19px; font-weight: 800;
  cursor: pointer;
  transition: transform .1s, filter .15s;
  font-family: var(--font);
}
.btn:active { transform: scale(.96); }
.btn-primary { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); color: #fff; box-shadow: 0 4px 0 var(--orange-dark); }
.btn-green { background: linear-gradient(135deg, var(--green-light), var(--green)); color: #fff; box-shadow: 0 4px 0 var(--green-dark); }
.btn-ghost { background: var(--card); color: var(--green-dark); border: 2px solid rgba(74,107,58,.3); box-shadow: none; }
.btn-disabled { filter: grayscale(.7) opacity(.6); pointer-events: none; }
.btn-sm { min-height: 42px; font-size: 16px; border-radius: 12px; width: auto; padding: 0 18px; }

.section-title { font-size: 20px; font-weight: 800; color: var(--green-dark); margin: 6px 0 12px; display: flex; align-items: center; gap: 8px; }
.section-title .sub { font-size: 13px; font-weight: 600; color: var(--ink-light); }

.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(74,107,58,.12); color: var(--green-dark);
  font-size: 13px; font-weight: 700;
}

/* ===== 主页 ===== */
.hero {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  border-radius: var(--radius);
  color: #fff;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.hero h1 { font-size: 24px; font-weight: 900; letter-spacing: 1px; }
.hero p { margin-top: 6px; font-size: 14px; opacity: .9; }
.hero .hero-emoji { font-size: 44px; margin-bottom: 6px; }

.task-box { border-left: 6px solid var(--orange); }
.task-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px dashed rgba(74,107,58,.2);
  font-size: 15px;
}
.task-item:last-child { border-bottom: none; }
.task-item .task-count { font-size: 22px; font-weight: 900; color: var(--orange-dark); }

/* ===== 战役地图 ===== */
.camp-flag { display: inline-block; font-size: 15px; margin-right: 4px; }
.unit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.unit-card {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
  padding: 12px 6px; text-align: center; cursor: pointer;
  border: 2px solid transparent;
  transition: transform .1s;
}
.unit-card:active { transform: scale(.94); }
.unit-card.locked { filter: grayscale(.8) opacity(.55); pointer-events: none; }
.unit-card.done { border-color: var(--correct); }
.unit-card .u-emoji { font-size: 28px; }
.unit-card .u-name { font-size: 13px; font-weight: 700; margin-top: 4px; }
.unit-card .u-info { font-size: 11px; color: var(--ink-light); margin-top: 2px; }

/* ===== 战斗 ===== */
.battle-wrap { display: flex; flex-direction: column; min-height: calc(100vh - 200px); }
.brief {
  background: linear-gradient(135deg, var(--green-dark), var(--green));
  color: #fff; border-radius: var(--radius); padding: 18px;
  text-align: center; margin-bottom: 14px;
}
.brief h2 { font-size: 22px; margin-bottom: 8px; }
.brief .targets { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.brief .target-chip { background: rgba(255,255,255,.2); padding: 6px 14px; border-radius: 999px; font-size: 15px; font-weight: 700; }

.q-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.q-progress { font-size: 14px; font-weight: 800; color: var(--green-dark); }
.q-hearts { font-size: 16px; letter-spacing: 2px; }

.q-prompt {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 16px; text-align: center; margin-bottom: 18px;
}
.q-prompt .q-en { font-size: 34px; font-weight: 900; color: var(--green-dark); letter-spacing: 1px; word-break: break-word; }
.q-prompt .q-zh { font-size: 28px; font-weight: 800; color: var(--ink); }
.q-prompt .q-hint { font-size: 14px; color: var(--ink-light); margin-top: 8px; }
.q-prompt .q-sound-btn { margin-top: 12px; font-size: 30px; background: rgba(74,107,58,.1); border: none; border-radius: 50%; width: 64px; height: 64px; cursor: pointer; }

.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q-opt {
  min-height: 74px;
  background: var(--card); border: 3px solid rgba(74,107,58,.25); border-radius: 16px;
  font-size: 22px; font-weight: 800; color: var(--ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 8px;
  transition: transform .1s, background .15s;
  font-family: var(--font);
}
.q-opt:active { transform: scale(.95); }
.q-opt.correct { background: var(--correct); color: #fff; border-color: var(--correct); animation: pop .3s; }
.q-opt.wrong { background: var(--wrong); color: #fff; border-color: var(--wrong); animation: shake .35s; }

/* 装弹模式 */
.ammo-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 16px; }
.ammo {
  width: 54px; height: 54px; border-radius: 12px;
  background: var(--card); border: 3px solid rgba(74,107,58,.3);
  font-size: 26px; font-weight: 900; color: var(--green-dark);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .1s;
}
.ammo:active { transform: scale(.9); }
.ammo.used { opacity: .25; pointer-events: none; }
.ammo-slot {
  width: 46px; height: 52px; border-radius: 10px;
  border: 3px dashed rgba(74,107,58,.4);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: var(--green-dark);
  margin: 0 3px;
}
.ammo-slot.filled { border-style: solid; border-color: var(--green); background: rgba(74,107,58,.08); }

/* ===== 反馈特效 ===== */
#kill-banner {
  position: fixed; top: 22%; left: 50%; transform: translateX(-50%) scale(.5);
  z-index: 200; pointer-events: none; opacity: 0;
  font-size: 44px; font-weight: 900; color: var(--orange);
  text-shadow: 0 2px 0 #fff, 0 0 20px rgba(245,166,35,.7);
  white-space: nowrap; letter-spacing: 2px;
}
#kill-banner.show { animation: bannerIn 1.4s ease forwards; }

#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 150; overflow: hidden; }
.fx-hit {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, #FFD166, var(--orange) 60%, transparent);
  animation: hitExpand .5s ease-out forwards;
}
.fx-cross {
  position: absolute; font-size: 46px; color: var(--correct);
  animation: crossPop .4s ease-out forwards; text-shadow: 0 0 12px rgba(46,204,113,.9);
}

#toast {
  position: fixed; bottom: 110px; left: 50%; transform: translateX(-50%);
  background: rgba(46,74,46,.92); color: #fff;
  padding: 10px 22px; border-radius: 999px; font-size: 15px; font-weight: 700;
  z-index: 300; opacity: 0; pointer-events: none; transition: opacity .25s;
  max-width: 90%; text-align: center;
}
#toast.show { opacity: 1; }

/* ===== 结算页 ===== */
.result-box { text-align: center; padding: 24px 16px; }
.result-emoji { font-size: 60px; }
.result-title { font-size: 26px; font-weight: 900; color: var(--green-dark); margin: 10px 0 4px; }
.result-sub { font-size: 15px; color: var(--ink-light); }
.stat-row { display: flex; justify-content: space-around; margin: 18px 0; }
.stat { text-align: center; }
.stat .num { font-size: 28px; font-weight: 900; color: var(--orange-dark); }
.stat .label { font-size: 13px; color: var(--ink-light); }
.exp-gain { font-size: 18px; font-weight: 800; color: var(--green); margin: 10px 0; }

/* 补给箱 */
.loot-box { text-align: center; padding: 24px 16px; }
.loot-box .crate { font-size: 72px; cursor: pointer; animation: bob 1.2s ease-in-out infinite; }
.loot-box .loot-item { font-size: 40px; margin: 10px 0; }
.loot-name { font-size: 22px; font-weight: 900; color: var(--orange-dark); margin: 8px 0; }

/* ===== 靶场 ===== */
.range-word {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;
}
.range-word .rw-word { font-size: 20px; font-weight: 800; color: var(--green-dark); }
.range-word .rw-zh { font-size: 14px; color: var(--ink-light); }
.range-word .rw-status { font-size: 13px; font-weight: 700; }
.rw-due { color: var(--orange-dark); }
.rw-ok { color: var(--correct); }

/* ===== 徽章（原军械库） ===== */
.badge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.badge {
  background: var(--card); border-radius: 14px; box-shadow: var(--shadow);
  padding: 12px 4px; text-align: center; cursor: pointer;
  transition: transform .15s ease;
}
.badge:active { transform: scale(.94); }
.badge .b-emoji { font-size: 30px; }
.badge .b-name { font-size: 11px; font-weight: 700; margin-top: 4px; color: var(--green-dark); }
.badge.locked { filter: grayscale(1) opacity(.4); }
/* 已解锁（颜色正常） */
.badge.unlocked { border: 2px solid var(--gold, #d4a017); }
.badge.unlocked .b-emoji { filter: none; }
/* 需要第一次强化（颜色变浅） */
.badge.fading1 { border: 2px dashed var(--gold, #d4a017); opacity: .72; }
/* 需要第二次强化（颜色更浅） */
.badge.fading2 { border: 2px dashed var(--gold, #d4a017); opacity: .45; }
/* 两次强化完成（颜色恒定，永久点亮） */
.badge.complete {
  border: 2px solid var(--gold, #d4a017);
  background: linear-gradient(135deg, #fff8e1, #ffe082);
  box-shadow: 0 0 12px rgba(212,160,23,.45);
}
.badge.complete .b-emoji { filter: none; }

/* 徽章规则说明 */
.badge-rule {
  background: linear-gradient(135deg, rgba(212,160,23,.14), rgba(74,107,58,.10));
  border: 1px dashed var(--gold, #d4a017);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
  font-size: 13px; line-height: 1.7; color: var(--green-dark);
}
.badge-rule b { color: var(--orange-dark); }

/* ===== 结算错词提示（考核/强化） ===== */
.result-wrong {
  background: rgba(255,87,34,.10); border: 1px solid rgba(255,87,34,.35);
  border-radius: 12px; padding: 12px 14px; margin: 10px 0;
  text-align: left;
}
.wrong-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wrong-chip {
  background: var(--card); border: 1px solid var(--wrong, #e53935);
  border-radius: 999px; padding: 4px 10px; font-size: 12px; font-weight: 700; color: var(--wrong, #e53935);
}

/* ===== 家长面板 ===== */
.pstat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pstat { background: var(--card); border-radius: 14px; box-shadow: var(--shadow); padding: 14px; text-align: center; }
.pstat .num { font-size: 26px; font-weight: 900; color: var(--green-dark); }
.pstat .label { font-size: 12px; color: var(--ink-light); margin-top: 2px; }
.wrong-list { max-height: 300px; overflow-y: auto; }
.wrong-item { display: flex; justify-content: space-between; padding: 8px 2px; border-bottom: 1px dashed rgba(74,107,58,.2); font-size: 14px; }

/* ===== 弹窗 ===== */
.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 250;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  width: 100%; max-width: 420px; padding: 20px;
}
.modal h3 { font-size: 20px; font-weight: 800; color: var(--green-dark); margin-bottom: 12px; text-align: center; }
.modal .row { margin-bottom: 12px; }
.modal label { font-size: 14px; font-weight: 700; color: var(--ink-light); display: block; margin-bottom: 4px; }
.modal input, .modal select {
  width: 100%; min-height: 44px; border-radius: 10px; border: 2px solid rgba(74,107,58,.3);
  font-size: 17px; padding: 0 12px; font-family: var(--font); background: #fff;
}

/* ===== 动画 ===== */
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
@keyframes bannerIn {
  0% { opacity: 0; transform: translateX(-50%) scale(.4); }
  15% { opacity: 1; transform: translateX(-50%) scale(1.15); }
  30% { transform: translateX(-50%) scale(1); }
  80% { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.4); }
}
@keyframes hitExpand { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes crossPop { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.3) rotate(5deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.slide-up { animation: slideUp .3s ease; }

/* 页面切换 */
.view { display: none; animation: slideUp .25s ease; }
.view.active { display: block; }

/* ============================================================
   三角洲射击场景
   ============================================================ */
.shoot-stage { display: flex; flex-direction: column; min-height: calc(100vh - 200px); }

/* 顶部 HUD */
.shoot-hud {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; margin-bottom: 8px;
  background: linear-gradient(180deg, rgba(46,74,46,.25), transparent);
  font-size: 13px; font-weight: 800; color: var(--green-dark);
}
.hud-mission { letter-spacing: 1px; }
.hud-type {
  background: var(--green-dark); color: #FFD166; border-radius: 999px;
  padding: 2px 12px; font-size: 12px; letter-spacing: 2px;
}
.hud-hearts { font-size: 14px; letter-spacing: 1px; }

/* 战斗区（深色战区） */
.battle-field {
  position: relative; flex: 1;
  min-height: 420px; border-radius: 18px; overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(120,160,90,.18), transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(90,120,70,.15), transparent 50%),
    linear-gradient(160deg, #2C3E2A 0%, #1F2D1D 45%, #15200F 100%);
  border: 2px solid rgba(255,255,255,.08);
  box-shadow: inset 0 0 60px rgba(0,0,0,.6);
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M2 12h19a3 3 0 0 1 3 3v1a3 3 0 0 1-3 3h-2l-4 7h-5l4-7h-4l-4 7H4l4-7H2z' fill='%233a3a3a' stroke='%23111' stroke-width='1.2'/%3E%3Crect x='24' y='12' width='4' height='7' rx='1' fill='%23555' stroke='%23111' stroke-width='1'/%3E%3Ccircle cx='3' cy='15' r='1.5' fill='%23FFD166'/%3E%3C/svg%3E") 3 15, crosshair;
}
/* 战场网格线 */
.battle-field::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 44px);
}
/* 暗角 */
.field-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* 底部烟尘 */
.field-mist {
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.35));
}

/* ===== 徽章试炼场 · 专属战场（金色殿堂风，区别于训练墨绿战区） ===== */
.badge-stage .shoot-hud {
  background: linear-gradient(180deg, rgba(154,116,24,.22), transparent);
  color: #6B4E12;
}
.badge-stage .hud-type { background: #9A7418; }
.badge-stage .battle-field {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,224,130,.20), transparent 55%),
    radial-gradient(ellipse at 80% 75%, rgba(200,160,70,.16), transparent 50%),
    linear-gradient(160deg, #4A3A14 0%, #33280F 45%, #201A08 100%);
  border-color: rgba(255,224,130,.22);
  box-shadow: inset 0 0 60px rgba(0,0,0,.6), 0 0 30px rgba(255,209,102,.08);
}
.badge-stage .battle-field::before {
  background:
    repeating-linear-gradient(0deg, rgba(255,224,130,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(255,224,130,.05) 0 1px, transparent 1px 44px);
}
.badge-stage .mission-tag {
  background: rgba(46,34,8,.82);
  border-color: rgba(255,224,130,.55);
  box-shadow: 0 0 24px rgba(255,209,102,.18), inset 0 0 20px rgba(0,0,0,.4);
}
.badge-stage .mission-zh { color: #FFE082; }
.badge-stage .mission-ipa { color: #E8D5A0; }
/* 试炼场目标牌：金色边框、更大更醒目 */
.badge-stage .target-card {
  background: linear-gradient(165deg, rgba(90,70,25,.94), rgba(60,46,16,.96));
  border-color: rgba(255,224,130,.6);
  box-shadow: 0 4px 16px rgba(0,0,0,.55), inset 0 0 18px rgba(255,209,102,.10);
  width: 36%;
}
.badge-stage .target-card .tgt-word { font-size: 24px; color: #FFF3C4; }
.badge-stage .target-card .tgt-zh { font-size: 26px; color: #FFF3C4; }
.badge-stage .target-card .tgt-ipa { color: #E8D5A0; }
.badge-stage .target-card .tgt-icon { opacity: .75; }
.badge-stage .ft-ammo { color: #9A7418; }
.badge-stage .ft-tip { color: #B08A2E; }

/* 顶部任务条（避开四角目标牌，防止遮挡选项） */
.mission-tag {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  z-index: 5; text-align: center; pointer-events: auto;
  background: rgba(12,20,10,.78); border: 2px solid rgba(255,209,102,.4);
  border-radius: 18px; padding: 12px 18px; min-width: 46%; max-width: 90%;
  box-shadow: 0 0 24px rgba(255,209,102,.12), inset 0 0 20px rgba(0,0,0,.4);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.mission-zh { font-size: 28px; font-weight: 900; color: #FFD166; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.mission-en { font-size: 26px; font-weight: 900; color: #fff; letter-spacing: 1px; text-shadow: 0 2px 8px rgba(0,0,0,.7); }
.mission-ipa { font-size: 15px; color: #9FB98F; margin-top: 4px; font-family: "Menlo","SF Mono",monospace; }
.mission-hint { font-size: 12px; color: rgba(255,255,255,.65); margin-top: 6px; letter-spacing: 1px; }
.mission-tag .q-sound-btn { margin-top: 4px; font-size: 26px; background: rgba(255,209,102,.15); border: 2px solid rgba(255,209,102,.5); border-radius: 50%; width: 54px; height: 54px; cursor: pointer; }

/* 目标牌（敌人目标） */
.target-card {
  position: absolute; z-index: 4;
  width: 34%; min-height: 118px;
  background: linear-gradient(165deg, rgba(52,66,44,.92), rgba(28,38,24,.95));
  border: 2px solid rgba(255,209,102,.35);
  border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 6px; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), inset 0 0 16px rgba(0,0,0,.35);
  animation: targetFloat 3.2s ease-in-out infinite;
  transition: transform .1s, border-color .15s;
  touch-action: manipulation; font-family: var(--font);
}
.target-card:nth-child(even) { animation-delay: -1.6s; }
.target-card:active { transform: scale(.94); }
.target-card .tgt-icon {
  position: absolute; left: 8px; top: 6px;
  width: 17px; height: 17px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c2.5 0 4.5 2 4.5 4.5S14.5 11 12 11 7.5 9 7.5 6.5 9.5 2 12 2zM12 13c4.4 0 8 2.2 8 5v3H4v-3c0-2.8 3.6-5 8-5z' fill='%23E5484D'/%3E%3C/svg%3E") no-repeat center / contain;
  filter: drop-shadow(0 0 6px rgba(255,90,78,.7));
}
.target-card .tgt-word { font-size: 21px; font-weight: 900; color: #fff; letter-spacing: .5px; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.target-card .tgt-zh { font-size: 24px; }
.target-card .tgt-ipa { font-size: 14px; color: #A8C896; font-family: "Menlo","SF Mono",monospace; letter-spacing: .5px; }
.target-card .tgt-ring {
  position: absolute; inset: -3px; border-radius: 18px; pointer-events: none;
  border: 2px solid transparent; opacity: 0;
}
@keyframes targetFloat {
  0%,100% { transform: translateY(0) rotate(-.6deg); }
  50% { transform: translateY(-9px) rotate(.6deg); }
}

/* 目标牌状态 */
.target-card.hit { border-color: #FFD166; background: linear-gradient(165deg, rgba(255,209,102,.5), rgba(217,138,10,.6)); animation: hitFlash .28s ease-out; }
@keyframes hitFlash { 0% { transform: scale(1.12); filter: brightness(1.8); } 100% { transform: scale(1); } }
.target-card.destroyed {
  border-color: transparent;
  background: radial-gradient(circle at 50% 50%, rgba(255,180,60,.9), rgba(217,90,10,.6) 45%, transparent 70%);
  animation: targetBoom .5s ease-out forwards;
}
@keyframes targetBoom {
  0% { transform: scale(1); opacity: 1; }
  30% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
.target-card.missed { border-color: #E57373; animation: shake .35s, wrongFlash .6s; }
@keyframes wrongFlash { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }
.target-card.revealed {
  border-color: #2ECC71; background: linear-gradient(165deg, rgba(46,204,113,.35), rgba(28,120,70,.5));
  animation: revealPulse 1s ease-in-out infinite;
}
@keyframes revealPulse { 0%,100% { box-shadow: 0 0 10px rgba(46,204,113,.5); } 50% { box-shadow: 0 0 26px rgba(46,204,113,.95); } }

/* 准星 */
.crosshair {
  position: absolute; width: 34px; height: 34px; z-index: 20;
  pointer-events: none; opacity: 0; transform: translate(-50%, -50%);
  transition: opacity .2s;
}
.crosshair::before, .crosshair::after {
  content: ''; position: absolute; background: rgba(255,209,102,.95);
  box-shadow: 0 0 3px rgba(0,0,0,.8);
}
.crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }
.crosshair .ch-dot { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #FF5A4E; transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(255,90,78,.9); }

/* 底部弹药栏 */
.shoot-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; margin-top: 8px;
  background: linear-gradient(180deg, transparent, rgba(46,74,46,.2));
  font-size: 12px; color: var(--ink-light); font-weight: 600;
}
.ft-ammo { font-size: 13px; color: var(--green-dark); }
.ft-ammo b { color: var(--orange-dark); }

/* 「不知道」按钮（深绿：文字 + 线框） */
.btn-dk {
  background: rgba(46,204,113,.12); border: 2px solid #1B7A3D;
  color: #1B7A3D; font-weight: 800; font-size: 14px;
  border-radius: 999px; padding: 6px 16px; cursor: pointer;
  font-family: var(--font); line-height: 1.3;
  transition: transform .1s, background .15s;
  touch-action: manipulation; white-space: nowrap;
}
.btn-dk:active { transform: scale(.94); background: rgba(46,204,113,.28); }

/* 答案卡「🎤 跟我读」按钮（fx-layer 内需手动恢复点击） */
.btn-follow {
  pointer-events: auto;
  display: inline-block; margin-top: 10px;
  background: rgba(46,204,113,.14); border: 2px solid #2ECC71;
  color: #1B7A3D; font-weight: 800; font-size: 13px;
  border-radius: 999px; padding: 5px 14px; cursor: pointer;
  font-family: var(--font); line-height: 1.3;
  transition: transform .1s, background .15s;
  touch-action: manipulation;
}
.btn-follow:active { transform: scale(.94); background: rgba(46,204,113,.32); }
.btn-follow.done { background: #2ECC71; color: #fff; border-color: #2ECC71; }

/* 收音能量条（跟读时显示麦克风实时音量） */
.mic-meter {
  margin-top: 10px; width: 100%; text-align: center;
}
.mic-meter[hidden] { display: none; }
.mm-bar {
  height: 10px; background: rgba(0,0,0,.25); border-radius: 999px;
  overflow: hidden; border: 1px solid rgba(46,204,113,.35);
}
.mm-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #2ECC71, #F1C40F, #E74C3C);
  border-radius: 999px; transition: width .06s linear;
}
.mm-label {
  font-size: 11px; color: var(--ink-light); margin-top: 4px;
  font-weight: 700; letter-spacing: .5px;
}

/* 答错/不知道：正确答案揭示卡（绿色） */
.reveal-card {
  border-color: #2ECC71;
  box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 6px rgba(46,204,113,.3);
}
.reveal-card .rc-tag {
  display: inline-block; font-size: 13px; font-weight: 800; color: #fff;
  background: #2ECC71; border-radius: 999px; padding: 3px 12px; margin-bottom: 10px;
  letter-spacing: 1px;
}

/* 屏幕震动 */
.battle-field.shake { animation: fieldShake .32s linear; }
@keyframes fieldShake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-5px,3px); }
  40% { transform: translate(4px,-3px); }
  60% { transform: translate(-3px,-2px); }
  80% { transform: translate(3px,2px); }
}

/* 枪口火光 */
.fx-muzzle {
  position: absolute; width: 64px; height: 64px; border-radius: 50%; z-index: 160;
  background: radial-gradient(circle, #FFF8D6 0%, #FFD166 30%, rgba(245,166,35,.5) 60%, transparent 75%);
  animation: muzzleFlash .28s ease-out forwards;
  pointer-events: none;
}
@keyframes muzzleFlash { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* 弹孔 */
.fx-bullet-hole {
  position: absolute; width: 10px; height: 10px; z-index: 155;
  border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #111 30%, transparent 70%);
  box-shadow: inset 0 0 2px #000, 0 0 3px rgba(255,255,255,.5);
  animation: holeFade 1.2s ease-out forwards;
  pointer-events: none;
}
@keyframes holeFade { 0% { opacity: 1; } 80% { opacity: .8; } 100% { opacity: 0; } }

/* 击碎后物体图像卡 */
.kill-card {
  position: fixed; z-index: 210; width: 200px;
  transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0;
  text-align: center; pointer-events: none;
  background: linear-gradient(165deg, #FFFDF5, #F7EFD8);
  border: 3px solid var(--orange); border-radius: 20px;
  padding: 16px 12px 12px;
  box-shadow: 0 10px 34px rgba(0,0,0,.5), 0 0 0 6px rgba(245,166,35,.25);
  transition: transform .3s cubic-bezier(.2,1.6,.4,1), opacity .25s;
}
.kill-card.in { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
.kill-card.out { transform: translate(-50%, -50%) scale(.5) rotate(6deg); opacity: 0; }
.kill-card .kc-emoji { font-size: 74px; line-height: 1.1; text-shadow: 0 4px 12px rgba(0,0,0,.15); }
.kill-card .kc-word { font-size: 26px; font-weight: 900; color: var(--green-dark); margin-top: 4px; letter-spacing: 1px; }
.kill-card .kc-ipa { font-size: 17px; color: var(--orange-dark); font-family: "Menlo","SF Mono",monospace; margin-top: 2px; }
.kill-card .kc-zh { font-size: 15px; color: var(--ink-light); margin-top: 2px; }

/* 音标音节（逐音节变色） */
.ipa-syl { transition: color .15s, text-shadow .15s, background .15s; border-radius: 4px; padding: 0 1px; }
.ipa-syl.hl {
  color: #FFD166; background: rgba(255,209,102,.18);
  text-shadow: 0 0 10px rgba(255,209,102,.9);
}

/* 装弹模式（军事弹匣） */
.spell-slots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.ammo-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.ammo {
  width: 54px; height: 54px; border-radius: 12px;
  background: var(--card); border: 3px solid rgba(74,107,58,.3);
  font-size: 26px; font-weight: 900; color: var(--green-dark);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform .1s; font-family: var(--font);
}
.ammo:active { transform: scale(.9); }
.ammo.used { opacity: .25; pointer-events: none; }
.ammo-slot {
  width: 46px; height: 52px; border-radius: 10px;
  border: 3px dashed rgba(74,107,58,.4);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 900; color: var(--green-dark);
  margin: 0 3px;
}
.ammo-slot.filled { border-style: solid; border-color: var(--green); background: rgba(74,107,58,.08); }

/* 任务简报军事化 */
.brief-ops { position: relative; overflow: hidden; }
.brief-ops .ops-icon { font-size: 46px; margin-bottom: 4px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.brief-ops .ops-codename {
  font-size: 14px; color: #FFD166; letter-spacing: 2px; font-weight: 800;
  margin-bottom: 8px; text-transform: uppercase;
}
.brief-ops::after {
  content: '▲▲▲'; position: absolute; right: 12px; top: 12px;
  color: rgba(255,255,255,.14); font-size: 12px; letter-spacing: 4px;
}

/* 徽章试炼场 · 简报（紧凑，不把整单元几十个词全平铺） */
.brief-badge { background: linear-gradient(135deg, #6B4E12, #9A7418); }
.brief-badge .ops-icon { filter: drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.badge-targets { margin-top: 12px; }
.bt-count { font-size: 15px; font-weight: 800; color: #FFF3C4; margin-bottom: 8px; }
.bt-count b { color: #FFE082; font-size: 19px; }
.badge-targets .targets,
.badge-targets .bt-preview { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.badge-targets .target-chip { font-size: 13px; padding: 4px 11px; background: rgba(255,255,255,.18); }
.bt-more { font-size: 12px; color: #FFF3C4; align-self: center; font-weight: 700; }

/* 空状态 */
.empty { text-align: center; padding: 40px 16px; color: var(--ink-light); font-size: 15px; }
.empty .e-emoji { font-size: 44px; margin-bottom: 8px; }

/* 战役选择 */
.book-section { margin-bottom: 18px; }
.book-sec-title {
  font-size: 15px; font-weight: 800; color: var(--green);
  margin-bottom: 8px; letter-spacing: .5px;
}
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.book-card {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: #fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px 14px; text-align: center; cursor: pointer;
  transition: transform .1s;
}
.book-card:active { transform: scale(.95); }
.book-card .bc-title { font-size: 20px; font-weight: 900; }
.book-card .bc-sub { font-size: 13px; opacity: .85; margin-top: 4px; }
.book-card.done { background: linear-gradient(135deg, var(--correct), #1FA55B); }

/* HTTPS 提示条 */
.https-warn {
  background: #3a2a12;
  border: 1px solid #d9a13b;
  color: #ffd479;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.6;
}
.https-warn b { color: #fff; }