/* 设计令牌 / 基础布局 / 受击反馈
   拆分自 index.html（原第 8~68 行）· 修改后请勿跨文件重复定义同名选择器 */
/* ============================================================
   设计令牌 Design Tokens
   ============================================================ */
:root{
  /* 底色：深渊 → 石墙 */
  --bg0:#05080d; --bg1:#0a0f16; --bg2:#0f151e;
  --panel:#121a24; --panel2:#1a2431; --panel3:#232f3f;
  --line:#26323f; --line2:#33445a; --line3:#4a6280;
  /* 文本四级 */
  --text:#e9f1fa; --text2:#bccadb; --muted:#8d9db0; --dim:#6a7a8d;
  /* 主色 */
  --gold:#f5c451; --gold2:#c9971f;
  --blood:#ff5c52; --blood2:#c22e28;
  --azure:#5aa9ff; --azure2:#2563d8;
  --jade:#43d17c; --violet:#c39bff; --ember:#ff9a4d;
  /* 兼容别名 */
  --hp:var(--blood); --blue:var(--azure); --green:var(--jade);
  --purple:var(--violet); --orange:var(--ember);
  /* 字体 */
  --font-ui:"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-num:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  /* 形状与光影 */
  --r-s:8px; --r-m:12px; --r-l:18px;
  --sh1:0 1px 2px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.28);
  --sh2:0 6px 22px rgba(0,0,0,.45);
  --sh3:0 22px 60px rgba(0,0,0,.62);
  --glass:linear-gradient(180deg,rgba(30,42,57,.94),rgba(12,18,26,.96));
}

*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ width:100%; height:100%; overflow:hidden; background:var(--bg0); }
body{
  position:relative;
  font-family:var(--font-ui); color:var(--text); user-select:none; touch-action:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* 用 body 盒子而非 100vh，避免移动端地址栏导致的视口抖动 */
#wrap{
  position:absolute; inset:0; overflow:hidden;
  background:radial-gradient(125% 90% at 50% 0%, #0c1622 0%, #05080d 62%);
}
canvas{ display:block; width:100%; height:100%; }
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:.2px; }
:focus-visible{ outline:2px solid var(--azure); outline-offset:2px; }

/* ============================================================
   受击反馈层
   ============================================================ */
#hurtFlash{
  position:absolute; inset:0; pointer-events:none; z-index:6; opacity:0;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,92,82,0) 33%, rgba(255,60,50,.34) 72%, rgba(186,18,18,.82) 100%);
}
#hurtFlash.flash{ animation:hurtFlash .42s cubic-bezier(.2,.6,.3,1); }
@keyframes hurtFlash{ 0%{opacity:1;} 55%{opacity:.5;} 100%{opacity:0;} }
#lowHp{
  position:absolute; inset:0; pointer-events:none; z-index:5; opacity:0; transition:opacity .4s;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,60,50,0) 50%, rgba(255,60,50,.16) 82%, rgba(140,10,10,.5) 100%);
}
#lowHp.on{ opacity:1; animation:lowPulse 1.7s ease-in-out infinite; }
@keyframes lowPulse{ 0%,100%{opacity:.22;} 50%{opacity:.5;} }