/* ============================ 3. HUD 状态栏 ============================ */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  gap: 1.4cqw;
  padding: 1.6cqw 1.8cqw;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.42), transparent);
}

.hud-card {
  background: rgba(10, 18, 12, 0.66);
  border: 1px solid rgba(203, 185, 148, 0.24);
  border-radius: 14px;
  padding: 0.9cqw 1.2cqw;
  backdrop-filter: blur(6px);
}

/* 生命值 */
#lives { display: flex; align-items: center; gap: 0.7cqw; }
#lives .lbl { font-size: clamp(9px, 1.1cqw, 12px); letter-spacing: 0.2em; color: var(--khaki); }
.hearts { display: flex; gap: 0.5cqw; }
.heart {
  width: clamp(16px, 2.5cqw, 30px);
  height: clamp(16px, 2.5cqw, 30px);
  display: grid;
  place-items: center;
  font-size: clamp(14px, 2.3cqw, 28px);
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}
.heart.dead { opacity: 0.28; filter: grayscale(1); transform: scale(0.86); }
.heart.hit { animation: heartHit 0.5s ease 1; }
@keyframes heartHit {
  0%   { transform: scale(1.5) rotate(12deg); filter: drop-shadow(0 0 16px #ff3b30) saturate(2); }
  100% { transform: scale(0.86); }
}

/* 积分 & 时间 */
#score-box { text-align: center; min-width: 13cqw; }
#score-val {
  font-size: clamp(20px, 3.6cqw, 44px);
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff, var(--gold) 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: transform 0.12s ease;
}
#score-val.bump { transform: scale(1.14); }
#score-box .lbl { font-size: clamp(9px, 1.1cqw, 12px); letter-spacing: 0.28em; color: var(--khaki); }
#combo-tag {
  display: inline-block;
  margin-top: 0.35cqw;
  font-size: clamp(9px, 1.2cqw, 13px);
  font-weight: 800;
  color: #16210f;
  background: linear-gradient(180deg, #b6f7c9, var(--ok));
  border-radius: 999px;
  padding: 0.12cqw 0.9cqw;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#combo-tag.on { opacity: 1; transform: translateY(0); }

#timer-box { text-align: center; min-width: 9cqw; }
#timer-val {
  font-size: clamp(14px, 2.2cqw, 26px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #eaf3e8;
}
#timer-box .lbl { font-size: clamp(9px, 1.1cqw, 12px); letter-spacing: 0.24em; color: var(--khaki); }

/* 体力条 */
#stamina-box { margin-left: auto; width: 24cqw; max-width: 300px; }
#stamina-box .row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: clamp(9px, 1.1cqw, 12px);
  letter-spacing: 0.18em;
  color: var(--khaki);
  margin-bottom: 0.5cqw;
}
#stamina-num { font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; letter-spacing: 0; }
.bar {
  position: relative;
  height: clamp(9px, 1.5cqw, 17px);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
#stamina-fill {
  position: absolute;
  inset: 1px auto 1px 1px;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4be08a, #7ef0a8 60%, #d6ff9b);
  transition: width 0.1s linear, background 0.3s ease;
  box-shadow: 0 0 12px rgba(94, 224, 138, 0.5) inset;
}
/* 体力低时变红闪烁 */
#stamina-box.low #stamina-fill {
  background: linear-gradient(90deg, #ff4d3d, #ff8a5c);
  box-shadow: 0 0 14px rgba(255, 77, 61, 0.7) inset;
  animation: lowBlink 0.55s ease-in-out infinite;
}
@keyframes lowBlink { 50% { opacity: 0.5; } }
/* 偷懒时体力条泛绿光，给玩家正反馈 */
#stamina-box.regen .bar { box-shadow: 0 0 0 2px rgba(94, 224, 138, 0.35); }
/* 偷懒"预热"中：还没开始回体力，用灰白光提示（对应 slackDelay 那段延迟） */
#stamina-box.winding .bar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45); }

/* 右上角按钮组 */
#tools {
  position: absolute;
  top: 1.6cqw; right: 1.8cqw;
  z-index: 31;
  display: flex; gap: 0.7cqw;
}
.icon-btn {
  width: clamp(28px, 3.6cqw, 44px);
  height: clamp(28px, 3.6cqw, 44px);
  display: grid; place-items: center;
  font-size: clamp(13px, 1.9cqw, 21px);
  background: rgba(10, 18, 12, 0.66);
  border: 1px solid rgba(203, 185, 148, 0.24);
  border-radius: 11px;
  color: #eaf3e8;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.18s ease, transform 0.12s ease;
}
.icon-btn:hover { background: rgba(30, 50, 34, 0.9); transform: translateY(-1px); }

/* ============================ 4. 游戏场景 ============================ */
#scene { position: absolute; inset: 0; }

/* 天空 */
.sky {
  position: absolute; inset: 0 0 40% 0;
  background: linear-gradient(180deg, #2e6ea8 0%, #61a7d8 45%, #a9d4ea 82%, #d9ecf3 100%);
}
.sun {
  position: absolute;
  top: 9%; right: 12%;
  width: 9cqw; height: 9cqw;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fffbe8, #ffe07a 55%, rgba(255, 214, 90, 0.12) 72%);
  box-shadow: 0 0 8cqw rgba(255, 226, 140, 0.55);
  animation: sunPulse 6s ease-in-out infinite;
}
@keyframes sunPulse { 50% { transform: scale(1.06); filter: brightness(1.08); } }

/* 云（纯 CSS 飘动） */
.cloud {
  position: absolute;
  height: 3.4cqw;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  filter: blur(0.35cqw);
  opacity: 0.85;
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: inherit; border-radius: 50%;
}
.cloud::before { width: 60%; height: 190%; left: 12%; top: -95%; }
.cloud::after  { width: 45%; height: 150%; right: 14%; top: -68%; }
.cloud.c1 { width: 16cqw; top: 15%; left: -20cqw; animation: drift 46s linear infinite; }
.cloud.c2 { width: 11cqw; top: 27%; left: -20cqw; animation: drift 64s linear infinite 8s; opacity: 0.6; }
.cloud.c3 { width: 20cqw; top: 7%;  left: -26cqw; animation: drift 82s linear infinite 16s; opacity: 0.5; }
@keyframes drift { to { transform: translateX(150cqw); } }

/* 远处教学楼 */
.buildings {
  position: absolute;
  left: 0; right: 0;
  bottom: 40%;
  height: 12cqw;
  display: flex; align-items: flex-end; gap: 1.4cqw;
  padding: 0 3cqw;
  opacity: 0.55;
}
.bld {
  flex: 1;
  background: linear-gradient(180deg, #b9c6cf, #8d9ba6);
  border-radius: 0.4cqw 0.4cqw 0 0;
  position: relative;
}
/* 用重复渐变画出一排排窗户 */
.bld::after {
  content: "";
  position: absolute; inset: 12% 10%;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.55) 0 0.5cqw, transparent 0.5cqw 1.3cqw),
                    repeating-linear-gradient(180deg, rgba(255,255,255,0.5) 0 0.5cqw, transparent 0.5cqw 1.4cqw);
  opacity: 0.6;
}
.bld.b1 { height: 100%; }
.bld.b2 { height: 66%; }
.bld.b3 { height: 84%; }
.bld.b4 { height: 52%; }

/* 操场地面 + 跑道 */
.ground {
  position: absolute; inset: 60% 0 0 0;
  background: linear-gradient(180deg, #9a8f6e 0%, #7f7a55 18%, #8b5f45 42%, #a2653f 100%);
}
.track {
  position: absolute;
  left: -4cqw; right: -4cqw;
  top: 14%;
  height: 40%;
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, 0.5) 0 0.25cqw,
      transparent 0.25cqw 3.2cqw),
    linear-gradient(180deg, #c4562f, #a8452a);
  border-top: 0.35cqw solid rgba(255, 255, 255, 0.55);
  border-bottom: 0.35cqw solid rgba(255, 255, 255, 0.45);
  transform: perspective(320px) rotateX(14deg);
  box-shadow: inset 0 0 6cqw rgba(0, 0, 0, 0.28);
}
.field {
  position: absolute;
  left: -4cqw; right: -4cqw;
  bottom: -2cqw;
  height: 46%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 6cqw, transparent 6cqw 12cqw),
    linear-gradient(180deg, #6f8f4a, #56763a 60%, #435c2d);
}
/* 操场上的白色标线，增强纵深 */
.field::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0.12) 0 0.18cqw, transparent 0.18cqw 2.6cqw);
  opacity: 0.5;
}

/* 队列里的同学（后排背景，慢慢晃动） */
#squad {
  position: absolute;
  left: 0; right: 0;
  bottom: 21%;
  height: 22%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 3.4cqw;
  filter: blur(0.12cqw) brightness(0.72);
  opacity: 0.9;
}
.squadmate {
  width: 3.1cqw;
  height: 88%;
  position: relative;
  background: linear-gradient(180deg, #4d6b45, #35492f);
  border-radius: 1.4cqw 1.4cqw 0.5cqw 0.5cqw;
  transform-origin: 50% 100%;
  animation: sway 3.6s ease-in-out infinite;
}
/* 头 */
.squadmate::before {
  content: "";
  position: absolute;
  top: -1.5cqw; left: 50%;
  width: 2.1cqw; height: 2.1cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #d9b48d;
  box-shadow: inset 0 -0.5cqw 0 #3f5d3a; /* 迷彩帽 */
}
.squadmate:nth-child(2n) { animation-delay: -0.6s; height: 82%; }
.squadmate:nth-child(3n) { animation-delay: -1.4s; height: 92%; }
@keyframes sway {
  0%, 100% { transform: rotate(-0.8deg) translateY(0); }
  50%      { transform: rotate(0.8deg) translateY(-0.35cqw); }
}

/* 舞台层（主角与教官） */
#actors {
  position: absolute;
  inset: 0;
  z-index: 20;
}

/* ---------- 主角（大一新生） ---------- */
#player {
  position: absolute;
  left: 50%;
  bottom: 15%;
  width: 11cqw;
  height: 34cqw;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  transition: filter 0.25s ease;
}
/* 身体：迷彩训练服 */
#player .body {
  position: absolute;
  left: 50%; bottom: 0;
  width: 7.2cqw; height: 21cqw;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,0.14) 0 1.1cqw, transparent 1.1cqw 2.4cqw),
    repeating-linear-gradient(25deg, rgba(255,255,255,0.07) 0 0.9cqw, transparent 0.9cqw 2.2cqw),
    linear-gradient(180deg, #6d8f5c, #4f6f42 55%, #3d5734);
  border-radius: 2.4cqw 2.4cqw 0.8cqw 0.8cqw;
  box-shadow: inset -0.9cqw 0 1.1cqw rgba(0, 0, 0, 0.22), inset 0.7cqw 0 1cqw rgba(255, 255, 255, 0.08);
}
/* 腰带 */
#player .belt {
  position: absolute;
  left: 50%; bottom: 12.6cqw;
  width: 7.6cqw; height: 1.15cqw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #4a3a24, #2c2114);
  border-radius: 0.3cqw;
  box-shadow: 0 0.15cqw 0.3cqw rgba(0,0,0,0.5);
}
#player .belt::after {
  content: "";
  position: absolute; left: 50%; top: -0.22cqw;
  width: 1.5cqw; height: 1.6cqw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #d9c98a, #9c8a4e);
  border-radius: 0.24cqw;
}
/* 双臂：站军姿时紧贴裤缝 */
#player .arm {
  position: absolute;
  width: 1.75cqw; height: 17cqw;
  bottom: 1.2cqw;
  background: linear-gradient(180deg, #6d8f5c, #48653c);
  border-radius: 0.9cqw;
  transform-origin: 50% 3%;
  transition: transform 0.32s cubic-bezier(0.3, 1.3, 0.5, 1);
  box-shadow: inset -0.3cqw 0 0.5cqw rgba(0, 0, 0, 0.22);
}
#player .arm.l { left: 0.5cqw; }
#player .arm.r { right: 0.5cqw; }
/* 手掌 */
#player .arm::after {
  content: "";
  position: absolute; left: 50%; bottom: -0.95cqw;
  width: 1.5cqw; height: 1.5cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #d9b48d;
}
/* 头 + 迷彩帽 */
#player .head {
  position: absolute;
  left: 50%; bottom: 20.4cqw;
  width: 5.2cqw; height: 5.6cqw;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  border-radius: 46% 46% 42% 42%;
  background: linear-gradient(180deg, #edc9a1, #d3a878 70%, #b98d61);
  box-shadow: inset -0.6cqw -0.5cqw 0.9cqw rgba(0, 0, 0, 0.16);
}
#player .cap {
  position: absolute;
  left: 50%; bottom: 24.5cqw;
  width: 7.4cqw; height: 3.1cqw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #6f9159, #47633a);
  border-radius: 3.2cqw 3.2cqw 0.5cqw 0.5cqw;
  box-shadow: inset 0 0.5cqw 0 rgba(255, 255, 255, 0.12);
}
#player .cap::after { /* 帽檐 */
  content: "";
  position: absolute; left: 50%; bottom: -0.9cqw;
  width: 8.6cqw; height: 1.05cqw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #3f5a34, #2c4024);
  border-radius: 0 0 1cqw 1cqw;
  box-shadow: 0 0.4cqw 0.7cqw rgba(0, 0, 0, 0.35);
}
#player .cap::before { /* 帽徽 */
  content: "";
  position: absolute; left: 50%; bottom: 0.9cqw;
  width: 1.1cqw; height: 1.1cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff3b0, var(--gold) 60%, #b9860d);
  box-shadow: 0 0 0.6cqw rgba(255, 213, 74, 0.7);
}
/* 表情：眼睛 + 嘴 */
#player .eye {
  position: absolute;
  top: 2.1cqw;
  width: 0.62cqw; height: 0.62cqw;
  border-radius: 50%;
  background: #2b2216;
  transition: height 0.2s ease, border-radius 0.2s ease;
}
#player .eye.l { left: 1.35cqw; }
#player .eye.r { right: 1.35cqw; }
#player .mouth {
  position: absolute;
  left: 50%; bottom: 0.9cqw;
  width: 1.5cqw; height: 0.45cqw;
  transform: translateX(-50%);
  border-radius: 0 0 1cqw 1cqw;
  background: #7d4b3c;
  transition: all 0.2s ease;
}

/* 主角状态：标准军姿（默认） */
#player.standing .body { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { transform: translateX(-50%) scaleY(1) translateY(0); }
  50%      { transform: translateX(-50%) scaleY(1.018) translateY(-0.18cqw); }
}
#player.standing .arm { transform: rotate(0deg); }

/* 主角状态：偷懒（塌腰、耸肩、手放下、眯眼） */
#player.slacking { transform: translateX(-50%) translateY(1.3cqw) rotate(-1.2deg); }
#player.slacking .body {
  height: 19.4cqw;
  border-radius: 2.6cqw 2.6cqw 1cqw 1cqw;
  animation: slump 1.5s ease-in-out infinite;
}
@keyframes slump {
  0%, 100% { transform: translateX(-50%) scaleY(1) skewX(0deg); }
  50%      { transform: translateX(-50%) scaleY(0.985) skewX(1.4deg); }
}
#player.slacking .arm.l { transform: rotate(19deg); }
#player.slacking .arm.r { transform: rotate(-19deg); }
#player.slacking .head { transform: translateX(-50%) rotate(5deg) translateY(0.5cqw); }
#player.slacking .cap  { transform: translateX(-50%) rotate(7deg) translateY(0.5cqw); }
#player.slacking .eye  { height: 0.2cqw; border-radius: 0.4cqw; }  /* 眯眼 */
#player.slacking .mouth { width: 1.9cqw; height: 0.9cqw; background: #8d4b3a; border-radius: 0 0 1.2cqw 1.2cqw; }

/* 主角状态：体力耗尽，瘫倒
   注意：倒地动画作用在 #player 元素本身，所以下面 .petrified 的抖动动画
   必须作用在内层 .body 上，否则两个 animation 会互相覆盖，
   导致"苍白的抖动"把"倒地"顶掉，角色卡在半空。 */
#player.exhausted { animation: collapse 0.85s cubic-bezier(0.6, 0.05, 0.9, 0.4) forwards; }
@keyframes collapse {
  0%   { transform: translateX(-50%) rotate(0deg) translateY(0); }
  35%  { transform: translateX(-50%) rotate(-9deg) translateY(0.6cqw); }
  100% { transform: translateX(-56%) rotate(-84deg) translateY(7.4cqw); }
}
#player.exhausted .eye { height: 0.16cqw; border-radius: 0.4cqw; }
#player.exhausted .mouth { width: 1.7cqw; height: 1.1cqw; border-radius: 50%; background: #6d3b2f; }

/* 主角状态：被教官盯上 / 被抓（苍白 + 发抖）
   抖动只加在内层元素上，避免与倒地的 animation 抢同一个元素；
   头部本身靠 translateX(-50%) 居中，所以它的关键帧必须带上这个位移，
   否则一抖就会跑偏。 */
#player.petrified { filter: saturate(0.4) brightness(1.08); }
#player.petrified .body { animation: tremblingBody 0.09s linear infinite; }
#player.petrified .head { animation: tremblingHead 0.11s linear infinite; }
#player.petrified .cap  { animation: tremblingHead 0.13s linear infinite; }
@keyframes tremblingBody {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-0.28cqw, 0.14cqw); }
  75%      { transform: translate(0.28cqw, -0.14cqw); }
}
@keyframes tremblingHead {
  0%, 100% { transform: translateX(-50%) translate(0, 0); }
  30%      { transform: translateX(-50%) translate(-0.3cqw, 0.1cqw); }
  70%      { transform: translateX(-50%) translate(0.3cqw, -0.1cqw); }
}

/* 汗水粒子（偷懒被盯上、体力低时出现） */
#sweat { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.drop {
  position: absolute;
  width: 0.5cqw; height: 0.8cqw;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, rgba(200, 240, 255, 0.95), rgba(120, 200, 240, 0.85));
  animation: drip 0.9s ease-in forwards;
}
@keyframes drip {
  0%   { opacity: 0; transform: translateY(0) scale(0.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(5.5cqw) scale(1); }
}

/* ---------- 教官（恶魔教官） ---------- */
#instructor {
  position: absolute;
  left: 18%;
  bottom: 15%;
  width: 12cqw;
  height: 36cqw;
  transform-origin: 50% 100%;
  transition: filter 0.3s ease;
}
#instructor .body {
  position: absolute;
  left: 50%; bottom: 0;
  width: 7.8cqw; height: 22.6cqw;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(115deg, rgba(0,0,0,0.2) 0 1.2cqw, transparent 1.2cqw 2.6cqw),
    linear-gradient(180deg, #55704a, #35492e 60%, #26351f);
  border-radius: 2.6cqw 2.6cqw 0.9cqw 0.9cqw;
  box-shadow: inset -1cqw 0 1.3cqw rgba(0, 0, 0, 0.35);
}
#instructor .belt {
  position: absolute;
  left: 50%; bottom: 13.4cqw;
  width: 8.2cqw; height: 1.2cqw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #3a2d1b, #1f170d);
  border-radius: 0.3cqw;
}
#instructor .arm {
  position: absolute;
  width: 1.9cqw; height: 18cqw;
  bottom: 1cqw;
  background: linear-gradient(180deg, #4e6a44, #2f4227);
  border-radius: 0.9cqw;
  transform-origin: 50% 4%;
  transition: transform 0.35s ease;
}
#instructor .arm.l { left: 0.3cqw; }
#instructor .arm.r { right: 0.3cqw; }
/* 教官经典的背手姿势 */
#instructor .arm.l { transform: rotate(-14deg); }
#instructor .arm.r { transform: rotate(14deg); }
#instructor .arm::after {
  content: "";
  position: absolute; left: 50%; bottom: -1cqw;
  width: 1.6cqw; height: 1.6cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #c99f76;
}
#instructor .head {
  position: absolute;
  left: 50%; bottom: 21.9cqw;
  width: 5.6cqw; height: 6cqw;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  border-radius: 44% 44% 40% 40%;
  background: linear-gradient(180deg, #d9ab7f, #b8855a 72%, #96683f);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
  box-shadow: inset -0.7cqw -0.5cqw 1cqw rgba(0, 0, 0, 0.25);
}
#instructor .cap {
  position: absolute;
  left: 50%; bottom: 26.2cqw;
  width: 8.2cqw; height: 3.3cqw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #4c663f, #26351c);
  border-radius: 3.4cqw 3.4cqw 0.5cqw 0.5cqw;
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
#instructor .cap::after { /* 大檐帽 */
  content: "";
  position: absolute; left: 50%; bottom: -1.25cqw;
  width: 10.4cqw; height: 1.4cqw;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #1f2b17, #0f160b);
  border-radius: 0 0 1.2cqw 1.2cqw;
  box-shadow: 0 0.55cqw 1cqw rgba(0, 0, 0, 0.5);
}
#instructor .cap::before { /* 帽徽 + 红边 */
  content: "";
  position: absolute; left: 50%; bottom: 1cqw;
  width: 1.4cqw; height: 1.4cqw;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #ffe9a8, #e8b41f 55%, #a1720a);
  box-shadow: 0 0 0.8cqw rgba(255, 200, 60, 0.8);
}
#instructor .eye {
  position: absolute;
  top: 2.3cqw;
  width: 0.75cqw; height: 0.75cqw;
  border-radius: 50%;
  background: #221a10;
  transition: all 0.18s ease;
}
#instructor .eye.l { left: 1.4cqw; }
#instructor .eye.r { right: 1.4cqw; }
#instructor .brow {
  position: absolute;
  top: 1.5cqw;
  width: 1.5cqw; height: 0.4cqw;
  border-radius: 0.3cqw;
  background: #1a130b;
  transition: transform 0.2s ease;
}
#instructor .brow.l { left: 1.15cqw; transform: rotate(-8deg); }
#instructor .brow.r { right: 1.15cqw; transform: rotate(8deg); }
#instructor .mouth {
  position: absolute;
  left: 50%; bottom: 1cqw;
  width: 1.7cqw; height: 0.55cqw;
  transform: translateX(-50%);
  border-radius: 0.3cqw;
  background: #6b3a2c;
  transition: all 0.18s ease;
}
/* 哨子 */
#instructor .whistle {
  position: absolute;
  left: 50%; bottom: 15.4cqw;
  width: 1.5cqw; height: 2.4cqw;
  transform: translateX(-50%) rotate(12deg);
  background: linear-gradient(180deg, #e8e8e8, #9aa0a6);
  border-radius: 0.35cqw 0.35cqw 0.7cqw 0.7cqw;
  box-shadow: 0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.35);
  opacity: 0.92;
}

/* 教官：背对时（默认可偷懒）——帽子往下压一点，表示"没在看" */
#instructor.away .head { transform: translateX(-50%) rotate(-14deg) translateY(0.4cqw); }
#instructor.away .cap  { transform: translateX(-50%) rotate(-16deg) translateY(0.4cqw); }
#instructor.away .eye  { opacity: 0.15; }

/* 教官：怀疑中（警告阶段）—— 皱眉、挑眉、帽子抬起 */
#instructor.suspect .head { transform: translateX(-50%) rotate(9deg) scale(1.03); }
#instructor.suspect .cap  { transform: translateX(-50%) rotate(11deg); }
#instructor.suspect .brow.l { transform: rotate(-22deg) translateY(-0.3cqw); }
#instructor.suspect .brow.r { transform: rotate(22deg) translateY(-0.3cqw); }
#instructor.suspect .mouth { width: 1.3cqw; height: 1cqw; border-radius: 50%; background: #5a2c22; }
#instructor.suspect .whistle { animation: whistleShake 0.32s ease-in-out infinite; }
@keyframes whistleShake {
  0%, 100% { transform: translateX(-50%) rotate(12deg); }
  50%      { transform: translateX(-50%) rotate(-10deg) scale(1.08); }
}

/* 教官：已经转过来盯着你（检查阶段）—— 身体正对、瞪眼 */
#instructor.watching { filter: drop-shadow(0 0 2.4cqw rgba(255, 59, 48, 0.55)); }
#instructor.watching .body { animation: none; }
#instructor.watching .head { transform: translateX(-50%) rotate(0deg) scale(1.07); }
#instructor.watching .cap  { transform: translateX(-50%) rotate(0deg); }
#instructor.watching .eye  { width: 1.05cqw; height: 1.05cqw; background: #b3130a; box-shadow: 0 0 0.9cqw rgba(255, 59, 48, 0.9); }
#instructor.watching .brow.l { transform: rotate(-26deg) translate(-0.15cqw, -0.35cqw); }
#instructor.watching .brow.r { transform: rotate(26deg) translate(0.15cqw, -0.35cqw); }
#instructor.watching .mouth { width: 2.4cqw; height: 1.5cqw; border-radius: 0.4cqw; background: #3d1a13; }
#instructor.watching .arm.l { transform: rotate(-42deg); }
#instructor.watching .arm.r { transform: rotate(42deg); }

/* 教官：满意点头（你站得很标准） */
#instructor.pleased .head { animation: nod 0.5s ease-in-out 2; }
#instructor.pleased .mouth { width: 1.9cqw; height: 0.9cqw; border-radius: 0 0 1.2cqw 1.2cqw; background: #7d4030; }
@keyframes nod {
  0%, 100% { transform: translateX(-50%) rotate(0deg) translateY(0); }
  50%      { transform: translateX(-50%) rotate(3deg) translateY(0.7cqw); }
}

/* 教官：疑似回头（假动作）—— 脖子微微一抖、帽檐抬了一点点，
   幅度刻意做得比真转头小，就是让你拿不准他到底看没看见 */
#instructor.flicker .head { animation: feintTwitch 0.18s ease-in-out 2; }
#instructor.flicker .cap  { animation: feintTwitch 0.18s ease-in-out 2; }
#instructor.flicker .eye  { opacity: 0.75; width: 0.9cqw; height: 0.9cqw; }
#instructor.flicker .brow.l { transform: rotate(-14deg) translateY(-0.15cqw); }
#instructor.flicker .brow.r { transform: rotate(14deg) translateY(-0.15cqw); }
@keyframes feintTwitch {
  0%, 100% { transform: translateX(-50%) rotate(-14deg) translateY(0.4cqw); }
  50%      { transform: translateX(-50%) rotate(2deg) translateY(0); }
}

/* 教官：暴怒突脸（Game Over 演出） */
#instructor.rage {
  animation: rageZoom 0.75s cubic-bezier(0.5, -0.4, 0.9, 0.6) forwards;
  filter: drop-shadow(0 0 4cqw rgba(255, 40, 30, 0.9)) saturate(1.4) contrast(1.1);
  z-index: 45;
}
@keyframes rageZoom {
  0%   { transform: translateX(0) scale(1); }
  28%  { transform: translateX(4cqw) scale(1.28) rotate(-2deg); }
  100% { transform: translateX(26cqw) scale(3.5) rotate(1deg); }
}
#instructor.rage .eye {
  width: 1.5cqw; height: 1.5cqw; background: #ff1a0d;
  box-shadow: 0 0 1.6cqw rgba(255, 26, 13, 1);
}
#instructor.rage .mouth {
  width: 4cqw; height: 4.4cqw; border-radius: 50%;
  background: #26090a;
  box-shadow: inset 0 0 1.6cqw rgba(255, 60, 40, 0.8);
}
#instructor.rage .brow.l { transform: rotate(-34deg) translate(-0.4cqw, -0.6cqw) scaleY(1.6); }
#instructor.rage .brow.r { transform: rotate(34deg) translate(0.4cqw, -0.6cqw) scaleY(1.6); }

/* 教官头顶：警告标记（❕ / 👁） */
#alert-mark {
  position: absolute;
  left: 50%; bottom: 30cqw;
  transform: translateX(-50%) scale(0);
  font-size: clamp(20px, 3.6cqw, 46px);
  font-weight: 900;
  color: var(--danger);
  text-shadow: 0 0 1.4cqw rgba(255, 59, 48, 0.9), 0 0.2cqw 0 rgba(0, 0, 0, 0.5);
  transition: transform 0.16s cubic-bezier(0.2, 1.8, 0.4, 1);
  pointer-events: none;
}
#alert-mark.on { transform: translateX(-50%) scale(1); animation: alertPulse 0.42s ease-in-out infinite; }
@keyframes alertPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.22); }
}

/* 视线：教官看你时的一道扫描光 */
#gaze {
  position: absolute;
  left: 18%;
  bottom: 15%;
  width: 40cqw;
  height: 30cqw;
  transform-origin: 0 20%;
  background: linear-gradient(100deg, rgba(255, 60, 40, 0.34), rgba(255, 60, 40, 0.02) 62%, transparent);
  clip-path: polygon(0 46%, 100% 0, 100% 100%);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: 19;
}
#gaze.on { opacity: 1; animation: gazeScan 1.5s ease-in-out infinite; }
@keyframes gazeScan {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}

/* ============================ 6. 屏幕特效 ============================ */
/* 危险红光（教官转过来时） */
#vignette {
  position: absolute; inset: 0;
  z-index: 35;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  background: radial-gradient(120% 90% at 50% 50%, transparent 42%, rgba(255, 30, 20, 0.42) 100%);
}
#vignette.warn { opacity: 0.75; animation: vignettePulse 0.62s ease-in-out infinite; }
#vignette.caught { opacity: 1; background: radial-gradient(120% 90% at 50% 50%, rgba(150, 0, 0, 0.3) 20%, rgba(210, 0, 0, 0.75) 100%); }
@keyframes vignettePulse { 50% { opacity: 0.42; } }

/* 被抓瞬间的白色闪光 */
#flash {
  position: absolute; inset: 0;
  z-index: 40;
  pointer-events: none;
  background: #fff;
  opacity: 0;
}
#flash.fire { animation: flashFire 0.45s ease-out 1; }
@keyframes flashFire {
  0%   { opacity: 0.92; }
  100% { opacity: 0; }
}

/* 震屏：作用在场景容器上 */
#stage.shake { animation: shakeHard 0.55s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1; }
@keyframes shakeHard {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-1.1cqw, 0.5cqw) rotate(-0.6deg); }
  25% { transform: translate(0.9cqw, -0.6cqw) rotate(0.5deg); }
  40% { transform: translate(-0.8cqw, -0.4cqw) rotate(-0.4deg); }
  55% { transform: translate(0.7cqw, 0.6cqw) rotate(0.35deg); }
  70% { transform: translate(-0.5cqw, 0.3cqw) rotate(-0.25deg); }
  85% { transform: translate(0.3cqw, -0.2cqw) rotate(0.15deg); }
}
/* 小震动：教官正盯着你时的紧张感（整个舞台轻微抖） */
#stage.trembling { animation: stageShiver 0.28s linear infinite; }
@keyframes stageShiver {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(0.16cqw, -0.12cqw); }
}

/* 屏幕四周的"危险边缘"闪烁（warning 阶段） */
#danger-edge {
  position: absolute; inset: 0;
  z-index: 36;
  pointer-events: none;
  opacity: 0;
  box-shadow: inset 0 0 8cqw rgba(255, 40, 30, 0.75);
  transition: opacity 0.2s ease;
}
#danger-edge.on { opacity: 1; animation: edgePulse 0.5s ease-in-out infinite; }
@keyframes edgePulse { 50% { opacity: 0.35; } }

/* 飘分文字 */
#floaters { position: absolute; inset: 0; z-index: 38; pointer-events: none; overflow: hidden; }
.floater {
  position: absolute;
  font-size: clamp(13px, 2.1cqw, 26px);
  font-weight: 900;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.65);
  animation: floatUp 1.25s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 12px) scale(0.7); }
  18%  { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -62px) scale(1); }
}
.floater.good { color: var(--ok); }
.floater.bad  { color: var(--danger-2); }
.floater.gold { color: var(--gold); }

/* 大字提示（如 "教官转身了！"） */
#shout {
  position: absolute;
  left: 50%; top: 26%;
  z-index: 39;
  transform: translate(-50%, -50%) scale(0.6);
  font-size: clamp(20px, 4.2cqw, 52px);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 0 0 2.2cqw rgba(255, 40, 30, 0.95), 0 4px 0 rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
#shout.show { animation: shoutIn 0.95s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
@keyframes shoutIn {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.55) rotate(-3deg); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(1.5deg); }
  38%  { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -90%) scale(1.02); }
}

/* 暂停 */
#pause-hint {
  position: absolute; inset: 0;
  z-index: 55;
  display: grid; place-items: center;
  background: rgba(6, 12, 8, 0.55);
  backdrop-filter: blur(2px);
  font-size: clamp(16px, 2.6cqw, 30px);
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--khaki);
}
#pause-hint[hidden] { display: none; }
#pause-hint small { display: block; margin-top: 1.2cqw; font-size: 0.5em; letter-spacing: 0.1em; color: #9fb39c; }

/* ============================ 7. 底部操作提示 ============================ */
#controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 32;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4cqw;
  padding: 1.4cqw 1.8cqw calc(1.4cqw + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
}

/* 姿势状态牌 */
#posture-badge {
  position: absolute;
  left: 1.8cqw;
  display: flex; align-items: center; gap: 0.6cqw;
  font-size: clamp(11px, 1.5cqw, 16px);
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 0.7cqw 1.3cqw;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: all 0.22s ease;
}
#posture-badge .dot {
  width: 0.8cqw; height: 0.8cqw; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0.8cqw currentColor;
}
#posture-badge.standing { color: var(--ok); background: rgba(93, 220, 143, 0.12); border-color: rgba(93, 220, 143, 0.4); }
#posture-badge.slacking { color: var(--gold); background: rgba(255, 213, 74, 0.14); border-color: rgba(255, 213, 74, 0.45); }
#posture-badge.exhausted { color: var(--danger-2); background: rgba(255, 107, 74, 0.14); border-color: rgba(255, 107, 74, 0.5); }

/* 偷懒按钮 */
#slack-btn {
  position: relative;
  font-family: inherit;
  font-size: clamp(13px, 1.9cqw, 22px);
  font-weight: 900;
  letter-spacing: 0.14em;
  color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  border: 2px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 1.3cqw 4.4cqw;
  cursor: pointer;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.1s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.2s ease;
  touch-action: none;
}
#slack-btn:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1)); }
#slack-btn.active {
  background: linear-gradient(180deg, rgba(255, 213, 74, 0.42), rgba(224, 165, 26, 0.28));
  border-color: var(--gold);
  box-shadow: 0 0 26px rgba(255, 213, 74, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: scale(0.97);
}
#slack-btn:disabled { opacity: 0.45; cursor: not-allowed; }
#slack-btn .key {
  display: inline-block;
  margin-left: 0.6cqw;
  font-size: 0.72em;
  opacity: 0.75;
  letter-spacing: 0;
}

#controls .tip {
  position: absolute;
  right: 1.8cqw;
  font-size: clamp(10px, 1.25cqw, 14px);
  color: #d6e4d4;
  text-align: right;
  line-height: 1.5;
  opacity: 0.85;
}
#controls .tip b { color: var(--gold); }

/* 窄屏（手机竖屏）时把 HUD 排布压紧 */
@media (max-aspect-ratio: 1/1) {
  #stage { width: 100%; height: min(100%, calc(100vw * 16 / 9)); }
  #stamina-box { width: 34cqw; }
  #instructor { left: 10%; }
  #squad { gap: 2.2cqw; }
}