/* ============================================================
 * CyberStrike 3D — 基础主题样式（owner: US-003）
 * 职责：页面重置、CSS 变量（赛博朋克配色）、画布/节点层级、
 *       加载遮罩、致命错误提示、全局触摸与滚动行为约束。
 * 不负责：菜单/HUD 具体样式（css/ui.css）、触屏控件样式（css/touch.css）。
 * ============================================================ */

/* ---------- 设计变量：赛博朋克配色与尺寸 ---------- */
:root {
  /* 底色 */
  --bg: #05060a;                    /* 页面主背景（深色，赛博朋克基调） */
  --bg-void: var(--bg);
  --bg-deep: #0a0e18;
  --bg-panel: rgba(10, 16, 28, 0.82);
  --bg-panel-solid: #0b111f;

  /* 霓虹强调色（主强调 = 青，次强调 = 品红） */
  --neon-cyan: #00eaff;
  --neon-magenta: #ff2fd0;
  --neon-violet: #8a5cff;
  --neon-lime: #9dff2b;
  --neon-amber: #ffb020;
  --neon-red: #ff3355;

  /* 文本 */
  --text-primary: #e8f6ff;
  --text-muted: #7d8fa8;
  --text-dim: #4c5b70;

  /* 功能色 */
  --hp-full: #35e08a;
  --hp-mid: #ffb020;
  --hp-low: #ff3355;
  --armor: #43b6ff;
  --ammo: #ffd479;

  /* 结构 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --border-neon: 1px solid rgba(0, 234, 255, 0.45);
  --glow-cyan: 0 0 8px rgba(0, 234, 255, 0.65), 0 0 22px rgba(0, 234, 255, 0.25);
  --glow-magenta: 0 0 8px rgba(255, 47, 208, 0.6), 0 0 22px rgba(255, 47, 208, 0.22);

  /* 字体：system-ui 优先，保证各平台使用原生 UI 字体（含中文回退） */
  --font-ui: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  /* 触摸可用性：任何可点击元素最小 44x44px */
  --touch-target-min: 44px;

  /* 移动端安全区 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* 层级：画布 < HUD < 触屏控件 < 菜单 < 加载/错误 */
  --z-canvas: 0;
  --z-hud: 10;
  --z-touch: 20;
  --z-menu: 30;
  --z-overlay: 40;

  color-scheme: dark;
}

/* ---------- 重置 ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;                 /* 禁止页面滚动 */
  overscroll-behavior: none;        /* 禁止下拉刷新/橡皮筋 */
  touch-action: none;               /* 触摸手势全部交给游戏处理 */
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  position: fixed;
  inset: 0;
}

img,
canvas,
svg {
  display: block;
}

button,
input,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* 所有可交互元素（含触屏）满足最小点击区 */
button,
[role="button"],
.touch-btn,
.hud-btn {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  touch-action: manipulation;
  cursor: pointer;
}

input[type="text"],
input[type="number"] {
  user-select: text;
  -webkit-user-select: text;
  touch-action: auto;
}

/* ---------- 画布 ---------- */
#game-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-canvas);
  background: radial-gradient(circle at 50% 40%, #101a2e 0%, var(--bg-void) 70%);
  touch-action: none;
  display: block;
}

/* ---------- 层级容器 ---------- */
.hud-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-hud);
  pointer-events: none;             /* 默认穿透，具体控件自行开启 */
  overflow: hidden;
}

.menu-root {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: none;                    /* 由 ui.js 控制显示 */
}

.menu-root[data-state="menu"],
.menu-root[data-state="paused"],
.menu-root[data-state="matchEnd"] {
  display: block;
}

/* ---------- 加载遮罩 ---------- */
.loading {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    linear-gradient(180deg, rgba(5, 6, 10, 0.96), rgba(5, 6, 10, 0.99)),
    repeating-linear-gradient(0deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 3px);
  text-align: center;
  padding: 24px;
}

.loading[hidden] {
  display: none;
}

.loading__logo {
  font-size: clamp(22px, 6vw, 44px);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--neon-cyan);
  text-shadow: var(--glow-cyan);
}

.loading__logo span {
  color: var(--neon-magenta);
  text-shadow: var(--glow-magenta);
}

.loading__bar {
  width: min(320px, 70vw);
  height: 4px;
  background: rgba(0, 229, 255, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.loading__bar > i {
  display: block;
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-magenta), transparent);
  animation: cs-loading-scan 1.15s linear infinite;
}

@keyframes cs-loading-scan {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}

.loading__text {
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  font-family: var(--font-mono);
}

/* ---------- 致命错误提示 ---------- */
.fatal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px;
  background: rgba(5, 6, 10, 0.94);
  text-align: center;
}

.fatal[hidden] {
  display: none;
}

.fatal__title {
  font-size: 20px;
  letter-spacing: 0.12em;
  color: var(--neon-red);
  text-shadow: 0 0 10px rgba(255, 51, 85, 0.6);
}

.fatal__msg {
  max-width: 560px;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.7;
}

/* US-014：CDN / 初始化失败时的重试按钮（切到下一个 CDN 源后重载） */
.fatal__retry {
  margin-top: 6px;
  min-height: var(--touch-target-min);
  padding: 12px 26px;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--neon-cyan, #00eaff);
  background: rgba(0, 234, 255, 0.1);
  border: 1px solid rgba(0, 234, 255, 0.55);
  border-radius: 4px;
  cursor: pointer;
  touch-action: manipulation;
}

.fatal__retry:hover,
.fatal__retry:focus-visible {
  background: rgba(0, 234, 255, 0.22);
  outline: none;
}

.fatal__retry[hidden] {
  display: none;
}

/* ---------- 无障碍与降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  .loading__bar > i {
    animation-duration: 3s;
  }
}

/* 触屏设备：隐藏自定义光标；桌面端保留准星与光标策略 */
@media (hover: none) and (pointer: coarse) {
  html,
  body {
    cursor: default;
  }
}

/* ---------- 触摸设备基础规则（详细的触屏控件样式见 css/touch.css） ---------- */
@media (pointer: coarse) {
  :root {
    /* 触摸设备把最小点击区再放大一档，保证拇指可点 */
    --touch-target-min: 48px;
  }

  button,
  [role="button"],
  .touch-btn {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }

  /* 触摸下无 hover，用按压态作为反馈 */
  button:active,
  [role="button"]:active {
    filter: brightness(1.4);
  }
}