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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #14161f 0%, #07080c 60%, #000 100%);
  font-family: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
  color: #cfd6e6;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#stage-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game {
  display: block;
  width: min(100vw, calc(100vh * 1024 / 576));
  height: min(100vh, calc(100vw * 576 / 1024));
  background: #05060a;
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(120, 150, 220, 0.35),
    0 0 60px rgba(70, 110, 220, 0.18),
    0 30px 70px rgba(0, 0, 0, 0.85);
  touch-action: none;
}

/* ---------- 启动遮罩 ---------- */
#boot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: #06070b;
  z-index: 10;
  transition: opacity 0.45s ease;
}

#boot.hide {
  opacity: 0;
  pointer-events: none;
}

.boot-title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 10px;
  color: #f2d489;
  text-shadow: 0 0 22px rgba(242, 212, 137, 0.45);
}

.boot-sub {
  font-size: 13px;
  letter-spacing: 8px;
  color: #5d6b8a;
}

.boot-tip {
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: 3px;
  color: #47516b;
  animation: blink 1.2s infinite;
}

@keyframes blink {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

/* =========================================================
 * 移动端触屏操作层（js/touch.js）
 * 只在触屏设备上套用 .show 后显示；尺寸随视口短边缩放，
 * 并让开刘海 / 圆角（env(safe-area-inset-*)）。
 * ========================================================= */
html, body { overscroll-behavior: none; }

#touch-ui {
  --btn: clamp(46px, 13.5vmin, 72px);
  --gap: clamp(5px, 1.4vmin, 11px);
  /* 圆环半径同时受视口高度限制：屏幕矮时按同一比例整体收拢，三圈不会叠在一起 */
  --r-max: calc(100vh - 22px - var(--btn) * 1.9);
  --r0: min(calc(var(--btn) * 1.45), calc(var(--r-max) * 0.51));   /* 跳跃：紧贴普攻 */
  --r1: min(calc(var(--btn) * 2.15), calc(var(--r-max) * 0.755));  /* 内圈：五个技能 */
  --r2: min(calc(var(--btn) * 2.85), var(--r-max));                /* 外圈：闪避 + 大招 */
  --sa-l: env(safe-area-inset-left, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  /* 画布在本层内的实际高度（控件层与画布同一套坐标系，画布居中留黑边）。
   * 横屏按 100vh 算；竖屏兜底时整体转过 90°，要改用交换过的单位，
   * 见文件末尾 @media (orientation: portrait)。 */
  --canvas-h: min(100vh, calc(100vw * 576 / 1024));
  position: fixed;
  inset: 0;
  z-index: 5;                 /* 在画布之上、启动遮罩(#boot, z:10)之下 */
  display: none;
  pointer-events: none;       /* 空白处的触摸穿透给画布，用于解锁音频 */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

#touch-ui.show { display: block; }
/* 结算页：整层仍然显示，但收起所有按键，只留两个按钮（见下方 .t-result） */
#touch-ui.result { display: block; }
#touch-ui.result .t-util,
#touch-ui.result .t-stick,
#touch-ui.result .t-stick-zone,
#touch-ui.result .t-arc { display: none; }

/* ---------- 按键 ---------- */
.t-btn {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--btn);
  height: var(--btn);
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  color: #dfe8ff;
  background: rgba(24, 30, 46, 0.46);
  border: 1.5px solid rgba(150, 180, 235, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.05s linear, background 0.05s linear;
}

.t-btn.on {
  background: rgba(255, 209, 102, 0.42);
  border-color: rgba(255, 220, 140, 0.9);
  color: #fff8e1;
  transform: scale(0.93);
}

.t-btn.lock { opacity: 0.40; }          /* 等级未解锁的技能 */

/* ---------- 技能冷却（touch.js 每 100ms 写一次 --cd） ---------- */
/* 扇形遮罩：从 12 点开始顺时针压暗，画法与画布那排技能栏一致 */
.t-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(rgba(6, 8, 14, 0.74) calc(var(--cd, 0) * 360deg), rgba(0, 0, 0, 0) 0);
}
.t-btn.cd::after { opacity: 1; }

/* 剩余秒数：直接压在按钮正中。
 * 冷却时把键位字母压暗，让数字成为这块按钮的主角 —— 手机上没有键盘，
 * 那个字母本来就只是装饰，技能名（下方小字）仍然留着。 */
.t-btn .t-cd {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #ffd166;
  font-size: calc(var(--btn) * 0.34);
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.95), 0 1px 2px rgba(0, 0, 0, 0.95);
}
.t-btn.s .t-cd { font-size: calc(var(--btn) * 0.27); }   /* 外圈小按钮 */
.t-btn.cd .t-cd { display: flex; }
.t-btn.cd .t-cd.hot { color: #ff9f9f; }                  /* 最后一秒 */
.t-btn.cd .t-key { opacity: 0.22; }

.t-btn .t-key {
  font-size: calc(var(--btn) * 0.40);
  font-weight: 800;
  line-height: 1;
}

.t-btn .t-sub {
  margin-top: calc(var(--btn) * 0.04);
  font-size: calc(var(--btn) * 0.185);
  line-height: 1;
  opacity: 0.72;
  white-space: nowrap;
}

.t-btn.s { width: calc(var(--btn) * 0.66); height: calc(var(--btn) * 0.66); }
.t-btn.s .t-key { font-size: calc(var(--btn) * 0.28); }
.t-btn.s .t-sub { font-size: calc(var(--btn) * 0.130); }
.t-btn.m { width: calc(var(--btn) * 0.78); height: calc(var(--btn) * 0.78); }
.t-btn.m .t-key { font-size: calc(var(--btn) * 0.33); }
.t-btn.l { width: calc(var(--btn) * 0.94); height: calc(var(--btn) * 0.94); }
.t-btn.xl { width: calc(var(--btn) * 1.42); height: calc(var(--btn) * 1.42); }
.t-btn.xl .t-key { font-size: calc(var(--btn) * 0.52); }

/* ---------- 左下：虚拟摇杆（轮盘） ---------- */
/* 扩大命中区：拇指落在左下这片就能抓住摇杆，不必精确点中圆盘 */
.t-stick-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44%;
  height: 58%;
  pointer-events: auto;
  touch-action: none;
}

.t-stick {
  position: absolute;
  left: calc(12px + var(--sa-l));
  bottom: calc(14px + var(--sa-b));
  /* 直径 = 键径 × 2.8（原先 4.2，缩小 1/3）。
   * 旋钮 43%、最大行程 28%（js/touch.js STICK_MAX）都是百分比，
   * 所以盘面、旋钮、推杆行程一起等比缩小，手感不变。 */
  width: calc(var(--btn) * 2.8);
  height: calc(var(--btn) * 2.8);
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(34, 44, 64, 0.34) 0%,
      rgba(18, 24, 38, 0.55) 62%,
      rgba(12, 16, 26, 0.30) 100%);
  border: 1.5px solid rgba(150, 180, 235, 0.30);
  box-shadow: inset 0 0 28px rgba(90, 130, 200, 0.16);
}

/* 十字刻度 */
.t-stick::before,
.t-stick::after {
  content: '';
  position: absolute;
  background: rgba(150, 180, 235, 0.14);
}
.t-stick::before { left: 50%; top: 13%; bottom: 13%; width: 1px; transform: translateX(-50%); }
.t-stick::after { top: 50%; left: 13%; right: 13%; height: 1px; transform: translateY(-50%); }

.t-stick-hint {
  position: absolute;
  font-size: calc(var(--btn) * 0.26);
  line-height: 1;
  color: rgba(190, 214, 255, 0.42);
}
.t-stick-hint.h-up { left: 50%; top: 4%; transform: translateX(-50%); }
.t-stick-hint.h-down { left: 50%; bottom: 4%; transform: translateX(-50%); }
.t-stick-hint.h-left { left: 4%; top: 50%; transform: translateY(-50%); }
.t-stick-hint.h-right { right: 4%; top: 50%; transform: translateY(-50%); }

.t-stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 43%;
  height: 43%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 32%,
    rgba(198, 220, 255, 0.60), rgba(58, 82, 128, 0.78));
  border: 1.5px solid rgba(190, 215, 255, 0.55);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
  will-change: transform;
  transition: none;              /* 拖动时必须零延迟，不能有过渡 */
}
/* 松手回中才做一小段缓动，避免旋钮「啪」地跳回中心 */
.t-stick.back .t-stick-knob {
  transition: transform 0.13s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.t-stick.on .t-stick-knob {
  border-color: rgba(255, 220, 140, 0.90);
  background: radial-gradient(circle at 38% 32%,
    rgba(255, 235, 180, 0.70), rgba(120, 92, 40, 0.80));
}

/* ---------- 左上：功能键 ---------- */
/* 画布左上角是角色面板（头像 / 名字 / 血条 / 蓝条 / 装备槽，约占画布高度 16%），
 * 所以这排键不能贴视口顶边，要按画布坐标系挪到面板下方：
 * 先补上画布的居中偏移（上下黑边），再加画布高度的 20%，留出一点间隙。 */
.t-util {
  position: absolute;
  left: calc(12px + var(--sa-l));
  top: calc((100% - var(--canvas-h)) / 2 + var(--canvas-h) * 0.2 + var(--sa-t));
  display: flex;
  gap: calc(var(--gap) * 0.7);
}

/* ---------- 右下：以普攻为圆心的技能圆环 ----------
 * 容器是个 0×0 的点，它的位置就是「普攻按钮的圆心」；
 * 圆环上的按钮由 JS 按极坐标写入 left / top。 */
.t-arc {
  position: absolute;
  right: calc(14px + var(--sa-r) + var(--btn) * 0.71);
  bottom: calc(14px + var(--sa-b) + var(--btn) * 0.71);
  width: 0;
  height: 0;
}
.t-arc .t-btn { position: absolute; }
.t-arc .t-core {
  left: 0;
  top: 0;
  border-width: 2px;
  border-color: rgba(255, 209, 102, 0.55);
}

/* ---------- 结算页：继续挑战 / 重新开始 ---------- */
.t-result {
  position: absolute;
  left: 50%;
  bottom: calc(26px + var(--sa-b));
  transform: translateX(-50%);
  display: none;
  gap: calc(var(--btn) * 0.24);
  pointer-events: auto;
}
#touch-ui.result .t-result { display: flex; }

.t-result-btn {
  min-width: calc(var(--btn) * 2.7);
  padding: calc(var(--btn) * 0.27) calc(var(--btn) * 0.42);
  border-radius: 999px;
  text-align: center;
  white-space: nowrap;
  font-size: calc(var(--btn) * 0.32);
  font-weight: 800;
  color: #fff2cf;
  background: linear-gradient(#2b3752, #141b2c);
  border: 1.5px solid rgba(255, 209, 102, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  touch-action: none;
  transition: transform 0.05s linear, background 0.05s linear;
}
.t-result-btn.on {
  transform: scale(0.95);
  background: linear-gradient(#3d4d72, #1c2438);
  color: #fff8e1;
}

/* ---------- 竖屏兜底：整体旋转 90°，横持手机即得横屏 ----------
 * 优先走 requestFullscreen + screen.orientation.lock('landscape')；
 * 该 API 在 iOS Safari 上完全不可用、在部分安卓浏览器也会被拒绝。
 * 所以只要视口仍是竖屏，就把画布 / 控件 / 启动遮罩一起旋转 90° 并铺满屏幕，
 * 玩家横持手机即可正常游玩 —— 不依赖任何浏览器特性。 */
@media (orientation: portrait) {
  html.touch-on #stage-wrap,
  html.touch-on #boot {
    position: fixed;
  }
  html.touch-on #stage-wrap,
  html.touch-on #boot,
  html.touch-on #touch-ui {
    inset: auto;
    left: 50%;
    top: 50%;
    width: 100vh;
    height: 100vw;
    transform: translate(-50%, -50%) rotate(90deg);
  }
  /* 旋转后画布要按「交换过的 vw / vh」算尺寸 */
  html.touch-on #game {
    width: min(100vh, calc(100vw * 1024 / 576));
    height: min(100vw, calc(100vh * 576 / 1024));
  }
  /* 同理，画布高度（用于把左上功能键排到角色面板下方）也要换成交换后的单位 */
  html.touch-on #touch-ui {
    --canvas-h: min(100vw, calc(100vh * 576 / 1024));
  }
}

/* 桌面端窗口被拉成竖向时也会命中 orientation: portrait，
 * 但没有 touch-on 标记，因此完全不受影响。 */