/* ============================================================
   style.css — 引擎 UI (HUD / 对话 / 开始界面)
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%;
  background: #0c0c10;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #eee;
  overflow: hidden;
}
#stage {
  position: relative;
  width: 960px; max-width: 100vw;
  margin: 0 auto;
}
#game {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 600;
  background: #1a1a1e;
  outline: none;
  image-rendering: pixelated;
  cursor: crosshair;
}

/* ---- 顶部 HUD ---- */
#hud-top {
  position: absolute; top: 10px; left: 10px;
  display: flex; gap: 10px; pointer-events: none;
}
.hud-box {
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 6px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600;
}
.hud-label { color: #ff5b6e; }
.bar {
  width: 110px; height: 12px;
  background: #3a1417; border-radius: 6px; overflow: hidden;
}
.bar-fill {
  height: 100%; width: 100%;
  background: linear-gradient(90deg,#ff5b6e,#ff8a3d);
  transition: width 0.15s;
}
#hud-money { color: #ffd54a; }
.ammo { color: #9ad; font-weight: 400; font-size: 12px; }
.ammo b { color: #fff; font-size: 14px; }

/* 通缉星 */
.hud-box.wanted { letter-spacing: 2px; color: #6a6a72; font-size: 15px; }
.hud-box.wanted.hot { color: #ffcf33; text-shadow: 0 0 8px rgba(255,80,40,0.8); animation: pulse 0.8s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* 任务目标条 */
#hud-mission {
  position: absolute; top: 52px; left: 10px; display: none;
  background: rgba(0,0,0,0.6); border-left: 3px solid #ffd54a;
  padding: 6px 12px; font-size: 13px; font-weight: 600; color: #ffe9a8;
  border-radius: 0 8px 8px 0; pointer-events: none; max-width: 70%;
}
/* 车速表 */
#hud-vehicle {
  position: absolute; bottom: 84px; right: 12px; display: none;
  background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; padding: 6px 12px; font-size: 14px; font-weight: 700;
  color: #8fd; pointer-events: none;
}

/* ---- 武器槽 ---- */
#hud-slots {
  position: absolute; bottom: 46px; left: 10px;
  display: flex; gap: 6px; pointer-events: none;
}
.slot {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 6px; padding: 5px 9px; font-size: 13px;
}
.slot.active {
  border-color: #ffd54a; background: rgba(255,213,74,0.18);
  box-shadow: 0 0 8px rgba(255,213,74,0.4);
}

/* ---- 调试 ---- */
#hud-debug {
  position: absolute; top: 10px; right: 10px;
  font-size: 12px; color: #6f6; pointer-events: none;
}

/* ---- 操作说明 ---- */
#controls {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.6);
  font-size: 12px; padding: 6px 12px; text-align: center;
  color: #cfcfcf;
}
#controls b { color: #ffd54a; }

/* ---- 对话 / 商店面板 ---- */
#dialogue {
  position: absolute; left: 50%; bottom: 70px;
  transform: translateX(-50%) translateY(20px);
  width: 460px; max-width: 90%;
  background: rgba(16,16,22,0.96);
  border: 2px solid #ffd54a; border-radius: 12px;
  padding: 14px 18px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
}
#dialogue.show {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#dlg-name { color: #ffd54a; font-weight: 700; font-size: 15px; margin-bottom: 6px; }
#dlg-text { font-size: 14px; line-height: 1.5; margin-bottom: 12px; color: #ddd; }
#dlg-options { display: flex; flex-direction: column; gap: 7px; }
.dlg-btn {
  text-align: left;
  background: #23232c; color: #eee;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; cursor: pointer;
  transition: background 0.1s;
}
.dlg-btn:hover:not(:disabled) { background: #33333f; border-color: #ffd54a; }
.dlg-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- 手机触屏操作(默认隐藏, 仅触屏设备显示) ---- */
#tc-joystick, #tc-actions { display: none; }
body.touch-device #tc-joystick,
body.touch-device #tc-actions { display: block; }
body.touch-device #game { cursor: default; }
#tc-joystick, #tc-actions, .tc-btn { touch-action: none; -webkit-user-select: none; user-select: none; }

#tc-joystick {
  position: absolute; left: 18px; bottom: 24px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.22);
  z-index: 40; touch-action: none;
}
#tc-knob {
  position: absolute; left: 50%; top: 50%;
  width: 56px; height: 56px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,213,74,0.55);
  border: 2px solid rgba(255,213,74,0.9);
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

#tc-actions {
  position: absolute; right: 16px; bottom: 20px;
  width: 168px; height: 168px; z-index: 40;
}
.tc-btn {
  position: absolute; width: 60px; height: 60px; border-radius: 50%;
  background: rgba(0,0,0,0.45); border: 2px solid rgba(255,255,255,0.25);
  color: #fff; font-size: 24px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
.tc-btn.on { background: rgba(255,213,74,0.35); border-color: #ffd54a; }
.tc-btn.tc-big { width: 84px; height: 84px; font-size: 34px;
  background: rgba(229,57,53,0.45); border-color: rgba(255,120,110,0.9); }
/* 右下布局: 开火居中大键, 其余环绕 */
#tc-fire { right: 8px;   bottom: 8px; }
#tc-car  { right: 100px; bottom: 16px; }
#tc-act  { right: 30px;  bottom: 100px; }
#tc-wpn  { right: 112px; bottom: 92px; width: 48px; height: 48px; font-size: 20px; }

/* ---- 开始界面 ---- */
#start-overlay {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 30%, #1e2030, #07070b);
  display: flex; align-items: center; justify-content: center;
  z-index: 50; transition: opacity 0.4s;
}
#start-overlay.hidden { opacity: 0; pointer-events: none; }
.start-card { text-align: center; max-width: 420px; padding: 20px; }
.start-card h1 { font-size: 30px; margin-bottom: 10px; }
.start-card .sub { color: #aab; font-size: 14px; margin-bottom: 18px; line-height: 1.5; }
/* 地图选择 */
#map-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.map-btn {
  background: #23232c; color: #eee; border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; padding: 12px 16px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.map-btn:hover { background: #33333f; border-color: #ffd54a; }
#new-map-btn {
  background: rgba(255,213,74,0.15); color: #ffd54a; border: 1px dashed #ffd54a;
  border-radius: 10px; padding: 9px 14px; font-size: 13px; cursor: pointer; margin-bottom: 16px;
}
#new-map-btn:hover { background: rgba(255,213,74,0.28); }
.menu-link { display:block; text-align:center; text-decoration:none; }
#go3d-btn { background: linear-gradient(180deg,#3a4a86,#1b2450); color:#cfe0ff; border:1px solid #6a8cff;
  border-radius:10px; padding:10px 14px; font-size:14px; font-weight:700; cursor:pointer; margin-bottom:16px; font-family: var(--jp-font); }
#go3d-btn:hover { background: linear-gradient(180deg,#4a5aa6,#26306a); }
#story-btn { background: linear-gradient(180deg,#5a3a6a,#2a1a3a); color:#f0d8ff; border:1px solid #c792ff;
  border-radius:10px; padding:10px 14px; font-size:14px; font-weight:700; cursor:pointer; margin-bottom:16px; font-family: var(--jp-font); }
#story-btn:hover { background: linear-gradient(180deg,#6a4a86,#3a2a52); }
#soccer-btn { background: linear-gradient(180deg,#2a6840,#163d28); color:#caffd8; border:1px solid #6ad08a;
  border-radius:10px; padding:10px 14px; font-size:14px; font-weight:700; cursor:pointer; margin-bottom:16px; font-family: var(--jp-font); }
#soccer-btn:hover { background: linear-gradient(180deg,#357a4e,#1d4d33); }
#tokyo-rain-btn { background: linear-gradient(180deg,#074052,#061826); color:#bffaff; border:1px solid #20f6ff;
  border-radius:10px; padding:10px 14px; font-size:14px; font-weight:700; cursor:pointer; margin-bottom:16px; font-family: var(--jp-font); }
#tokyo-rain-btn:hover { background: linear-gradient(180deg,#0b5870,#082236); }
/* HUD 返回菜单按钮 */
#hud-menu { cursor: pointer; color: #cfd; font-weight: 600; pointer-events: auto; }
#hud-menu:hover { border-color: #ffd54a; color: #ffd54a; }

.feat { list-style: none; text-align: left; display: inline-block; margin-bottom: 20px; }
.feat li { font-size: 13px; color: #cdd; padding: 4px 0; }
#start-btn {
  background: linear-gradient(90deg,#ffd54a,#ff8a3d);
  color: #1a1a1e; font-weight: 800; font-size: 18px;
  border: none; border-radius: 10px; padding: 12px 40px; cursor: pointer;
  box-shadow: 0 6px 20px rgba(255,160,60,0.4);
}
#start-btn:hover { filter: brightness(1.08); }
.tip { margin-top: 14px; font-size: 12px; color: #889; }

/* ============================================================
   🎌 JRPG 皮肤覆盖 (放最后, 优先级最高) — 日式 2D RPG 观感
   ============================================================ */
:root { --jp-font: 'DotGothic16','PingFang SC','Microsoft YaHei',sans-serif; }
body { background: #0a0a12; }

/* HUD 面板: 圆角深色玻璃 + 细金边 */
.hud-box {
  background: linear-gradient(180deg, rgba(28,30,48,0.82), rgba(16,18,32,0.82));
  border: 1px solid rgba(255,210,120,0.35);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  font-family: var(--jp-font);
}
.bar { background: #2a1417; border: 1px solid rgba(0,0,0,0.4); }
.bar-fill { background: linear-gradient(90deg,#ff5b6e,#ffac3d); }
#hud-slots .slot {
  background: linear-gradient(180deg, rgba(28,30,48,0.8), rgba(16,18,32,0.8));
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.14);
}
#hud-slots .slot.active { border-color: #ffd54a; box-shadow: 0 0 10px rgba(255,213,74,0.5); }
.hud-box.wanted.hot { color: #ffcf33; }

/* 任务条 / 车速表 / 操作说明 */
#hud-mission, #hud-vehicle { font-family: var(--jp-font); border-radius: 10px; }
#hud-mission { background: linear-gradient(180deg,rgba(28,30,48,0.85),rgba(16,18,32,0.85)); border:1px solid rgba(255,210,120,0.4); border-left:3px solid #ffd54a; }
#controls { background: rgba(8,8,16,0.72); font-family: var(--jp-font); letter-spacing: .3px; border-top: 1px solid rgba(255,210,120,0.2); }

/* 💬 JRPG 对话框: 深蓝渐变 + 双金边 + 圆角 + 头像位 */
#dialogue {
  width: 560px; max-width: 94%;
  background: linear-gradient(180deg, #1b2450 0%, #131a38 100%);
  border: 2px solid #ffd98a;
  border-radius: 16px;
  padding: 16px 20px 16px 84px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), inset 0 0 0 2px rgba(255,255,255,0.06);
  font-family: var(--jp-font);
}
/* 头像圆 */
#dialogue::before {
  content: '💬';
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px; border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, #3a4a86, #1b2450);
  border: 2px solid #ffd98a; display: flex; align-items: center; justify-content: center;
  font-size: 28px; line-height: 56px; text-align: center;
}
#dlg-name {
  color: #1b2450; background: #ffd98a; display: inline-block;
  padding: 2px 12px; border-radius: 8px; font-weight: 700; font-size: 14px;
  margin-bottom: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
#dlg-text { color: #eaf0ff; font-size: 15px; line-height: 1.6; }
.dlg-btn {
  background: linear-gradient(180deg, #2a3568, #1b2450);
  border: 1px solid #ffd98a; color: #fff; border-radius: 10px; font-family: var(--jp-font);
}
.dlg-btn:hover:not(:disabled) { background: linear-gradient(180deg,#3a4a86,#26306a); border-color:#fff; }

/* 主菜单卡: 日式标题屏 */
#start-overlay { background: radial-gradient(circle at 50% 25%, #20294f, #070710 70%); }
.start-card h1 { font-family: var(--jp-font); text-shadow: 0 3px 0 rgba(0,0,0,0.4), 0 0 18px rgba(255,200,90,0.4); }
.map-btn {
  background: linear-gradient(180deg, #2a3568, #1b2450);
  border: 1px solid #ffd98a; border-radius: 12px; font-family: var(--jp-font);
  box-shadow: 0 3px 0 rgba(0,0,0,0.35);
}
.map-btn:hover { background: linear-gradient(180deg,#3a4a86,#26306a); transform: translateY(-1px); }
#new-map-btn { font-family: var(--jp-font); }
.start-card .sub, .feat li, .tip { font-family: var(--jp-font); }

/* 触屏按钮: 圆润玻璃质感 */
.tc-btn { backdrop-filter: blur(2px); box-shadow: 0 3px 10px rgba(0,0,0,0.4); }
#tc-joystick { background: rgba(20,24,44,0.45); border-color: rgba(255,210,120,0.4); }
#tc-knob { background: radial-gradient(circle at 40% 35%, #ffe7a0, #f0b73d); }