/* ==========================================================================
   军训模拟器 · 站军姿生存战
   单文件网页游戏：HTML + CSS + 原生 JavaScript，无任何外部依赖，双击即玩。

   结构说明：
     1. 变量与基础样式
     2. 开始页 / 结算页（覆盖层）
     3. HUD 状态栏（生命 / 积分 / 体力 / 时间）
     4. 游戏场景（天空、操场、队列同学、主角、教官）
     5. 角色动画（站军姿呼吸、偷懒、教官转头、突脸）
     6. 屏幕特效（危险红光、被抓红闪、震屏、飘字）
     7. 底部操作提示
     8. JavaScript 游戏逻辑
   ========================================================================== */

/* ============================ 1. 变量与基础样式 ============================ */
:root {
  /* 军旅配色：迷彩绿 + 军黄 + 危险红 */
  --army-dark:  #1d2b1f;
  --army:       #3f5d3a;
  --army-light: #6b8f5e;
  --khaki:      #cbb994;
  --khaki-dark: #a8935f;
  --danger:     #ff3b30;
  --danger-2:   #ff6b4a;
  --gold:       #ffd54a;
  --ok:         #5ddc8f;
  --ink:        #101a12;
  --panel:      rgba(12, 20, 14, 0.82);
  --radius:     16px;
  --font: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC",
          system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #0b1410;
  font-family: var(--font);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* 整个游戏固定在一个 16:9 的舞台里，等比缩放适配任何屏幕 */
#app {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 10px;
}

#stage {
  position: relative;
  width: min(100%, calc((100vh - 20px) * 16 / 9));
  height: min(calc(100vw * 9 / 16), calc(100vh - 20px));
  min-height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  background: #78b7e8;
  container-type: size; /* 供内部字号按容器缩放（cqw） */
}

/* ======================= 2. 开始页 / 结算页（覆盖层） ======================= */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  justify-items: center;
  align-content: safe center; /* 内容比屏幕高时从顶部开始，避免标题被裁掉 */
  padding: 4cqw;
  background: radial-gradient(120% 100% at 50% 0%, rgba(20, 40, 25, 0.86), rgba(4, 10, 6, 0.96));
  backdrop-filter: blur(3px);
  animation: fadeIn 0.35s ease both;
  overflow-y: auto;
}
.overlay[hidden] { display: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  0%   { opacity: 0; transform: translateY(18px) scale(0.94); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.panel {
  width: min(760px, 100%);
  background: var(--panel);
  border: 1px solid rgba(203, 185, 148, 0.28);
  border-radius: 22px;
  padding: 3.2cqw 3.6cqw;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: popIn 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
  text-align: center;
}

.title-cn {
  font-size: clamp(22px, 4.6cqw, 46px);
  font-weight: 900;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #fff5cf, var(--gold) 55%, #d59b1b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35));
  line-height: 1.2;
}
.title-sub {
  margin-top: 0.6cqw;
  font-size: clamp(11px, 1.5cqw, 16px);
  letter-spacing: 0.36em;
  color: var(--khaki);
  text-transform: uppercase;
}

.story {
  margin: 2.4cqw auto 0;
  max-width: 62ch;
  font-size: clamp(12px, 1.62cqw, 17px);
  line-height: 1.9;
  color: #d8e6d6;
  text-align: left;
  background: rgba(0, 0, 0, 0.28);
  border-left: 3px solid var(--khaki-dark);
  border-radius: 10px;
  padding: 1.6cqw 2cqw;
}
.story b { color: var(--gold); }
.story .warn { color: var(--danger-2); }

.rules {
  margin-top: 2.2cqw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.2cqw;
  text-align: left;
}
.rule {
  display: flex;
  gap: 0.9cqw;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 1.1cqw 1.3cqw;
  font-size: clamp(11px, 1.36cqw, 14px);
  line-height: 1.6;
  color: #cfe0cd;
}
.rule .ico { font-size: clamp(15px, 2cqw, 22px); line-height: 1.2; }
.rule b { color: #fff; }

.btn {
  font-family: inherit;
  font-size: clamp(14px, 2cqw, 21px);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #16210f;
  background: linear-gradient(180deg, #ffe999, var(--gold) 48%, #e0a51a);
  border: none;
  border-radius: 999px;
  padding: 1.5cqw 4.4cqw;
  margin-top: 2.6cqw;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(255, 213, 74, 0.32), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.14s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255, 213, 74, 0.45); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn.ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #e8f2e6;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: none;
}
.btn.ghost:hover { background: rgba(255, 255, 255, 0.15); box-shadow: none; }
.btn-row { display: flex; gap: 1.4cqw; justify-content: center; flex-wrap: wrap; }

/* ---------- 结算页 ---------- */
.gameover-title {
  font-size: clamp(24px, 4.2cqw, 44px);
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--danger);
  text-shadow: 0 0 22px rgba(255, 59, 48, 0.6), 0 3px 0 rgba(0, 0, 0, 0.4);
  animation: shakeTitle 0.6s ease 1;
}
@keyframes shakeTitle {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px) rotate(-1deg); }
  40% { transform: translateX(7px) rotate(1deg); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.gameover-reason {
  margin-top: 1cqw;
  font-size: clamp(12px, 1.6cqw, 17px);
  color: #ffd9d5;
}
.rank-badge {
  display: inline-block;
  margin-top: 1.6cqw;
  font-size: clamp(15px, 2.4cqw, 26px);
  font-weight: 900;
  letter-spacing: 0.14em;
  padding: 0.7cqw 2.6cqw;
  border-radius: 999px;
  border: 2px solid var(--gold);
  color: var(--gold);
  background: rgba(255, 213, 74, 0.08);
  box-shadow: 0 0 26px rgba(255, 213, 74, 0.25) inset;
}
.score-big {
  margin-top: 1.8cqw;
  font-size: clamp(34px, 8cqw, 86px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff, #ffd54a 60%, #e79a12);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 16px rgba(255, 213, 74, 0.35));
}
.score-label { font-size: clamp(10px, 1.3cqw, 14px); letter-spacing: 0.32em; color: var(--khaki); }

.stat-grid {
  margin-top: 2.2cqw;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1cqw;
}
.stat {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 12px;
  padding: 1.2cqw 0.8cqw;
}
.stat .v {
  font-size: clamp(16px, 2.6cqw, 30px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.stat .k { font-size: clamp(10px, 1.24cqw, 13px); color: #9fb39c; margin-top: 0.3cqw; }