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

html, body {
  width:100%; height:100%; overflow:hidden;
  font-family: "Noto Serif SC", "PingFang SC", "Microsoft YaHei", serif;
  background:#0F0A14; color:#F5E6D3;
  user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
}

#gameContainer {
  position:relative; width:100vw; height:100vh;
}

#gameCanvas {
  position:absolute; top:0; left:0;
  touch-action:none;
}

/* ====== Overlay ====== */
.overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,5,15,0.85);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  z-index:10;
  opacity:0; pointer-events:none;
  transition:opacity 0.4s ease;
}
.overlay.active {
  opacity:1; pointer-events:all;
}

.overlay-panel {
  background:linear-gradient(135deg, rgba(40,20,35,0.95), rgba(25,12,28,0.95));
  border:1px solid rgba(212,165,116,0.35);
  border-radius:16px;
  padding:36px 44px;
  text-align:center;
  max-width:420px; width:90%;
  box-shadow:0 8px 40px rgba(0,0,0,0.6), inset 0 0 60px rgba(212,165,116,0.04);
}
.overlay-panel h1 {
  font-size:28px; margin-bottom:8px;
  color:#F5E6D3; text-shadow:0 0 20px rgba(255,215,0,0.2);
}
.overlay-panel .subtitle {
  font-size:14px; color:#B8A088; margin-bottom:24px;
}

.mode-buttons { display:flex; flex-direction:column; gap:10px; }

.mode-btn {
  display:block; width:100%; padding:12px 20px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(212,165,116,0.3);
  border-radius:10px;
  color:#F5E6D3; font-size:16px; font-family:inherit;
  cursor:pointer; transition:all 0.25s;
}
.mode-btn:hover { background:rgba(212,165,116,0.15); border-color:#C9A96E; transform:translateY(-1px); }
.mode-btn:active { transform:scale(0.97); }

.diff-btn {
  padding:8px 18px; margin:0 5px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(212,165,116,0.25);
  border-radius:8px;
  color:#B8A088; font-size:14px; font-family:inherit;
  cursor:pointer; transition:all 0.2s;
}
.diff-btn.active { background:rgba(212,165,116,0.2); border-color:#C9A96E; color:#F5E6D3; }
.diff-btn:hover { background:rgba(212,165,116,0.12); }

.result-panel h1 { font-size:32px; }
#restartBtn { margin-top:8px; }

/* ====== 操作说明按钮 ====== */
.help-btn {
  display:block; width:100%; margin-top:10px; padding:10px 20px;
  background:rgba(212,165,116,0.08);
  border:1px solid rgba(212,165,116,0.25);
  border-radius:10px;
  color:#C9A96E; font-size:14px; font-family:inherit;
  cursor:pointer; transition:all 0.25s;
}
.help-btn:hover { background:rgba(212,165,116,0.18); border-color:#C9A96E; color:#F5E6D3; transform:translateY(-1px); }
.help-btn:active { transform:scale(0.97); }

/* ====== 操作说明弹窗 ====== */
.help-panel { max-width:480px; padding:28px 32px; text-align:left; }
.help-panel h1 { text-align:center; margin-bottom:18px; font-size:24px; }
.help-panel .mode-btn { margin-top:16px; text-align:center; }

.help-content { max-height:50vh; overflow-y:auto; padding-right:4px; }
.help-content::-webkit-scrollbar { width:4px; }
.help-content::-webkit-scrollbar-track { background:transparent; }
.help-content::-webkit-scrollbar-thumb { background:rgba(212,165,116,0.3); border-radius:2px; }

.help-section { margin-bottom:14px; }
.help-section h3 { font-size:15px; color:#E8D5B0; margin-bottom:5px; }
.help-section p { font-size:13px; color:#B8A088; line-height:1.6; }
.help-section strong { color:#F5E6D3; }

.help-tag { display:inline-block; padding:1px 9px; border-radius:4px; font-size:12px; font-weight:bold; margin-right:4px; }
.help-tag.light { background:rgba(76,175,80,0.2); color:#81C784; }
.help-tag.normal { background:rgba(255,193,7,0.2); color:#FFD54F; }
.help-tag.crit { background:rgba(239,83,80,0.2); color:#EF9A9A; }

/* ====== 回合提示 ====== */
#turnIndicator {
  position:fixed; top:48px; left:50%; transform:translateX(-50%);
  font-size:22px; font-weight:bold;
  color:#F5E6D3; text-shadow:0 0 16px rgba(255,215,0,0.3);
  z-index:5;
  pointer-events:none;
  opacity:0; transition:opacity 0.3s;
}
#turnIndicator.show { opacity:1; }

/* ====== 操作提示 ====== */
#actionHint {
  position:fixed; bottom:36px; left:50%; transform:translateX(-50%);
  font-size:15px; color:#B8A088;
  z-index:5;
  pointer-events:none;
  opacity:0; transition:opacity 0.3s;
  text-shadow:0 1px 4px rgba(0,0,0,0.6);
}
#actionHint.show { opacity:1; }

/* ====== 弹出文字 ====== */
.popup-text {
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.5);
  font-size:48px; font-weight:bold;
  color:#FFD700; text-shadow:0 0 30px rgba(255,215,0,0.6);
  z-index:8;
  pointer-events:none;
  opacity:0;
}
.popup-text.pop {
  animation: popAnim 0.8s ease-out forwards;
}
@keyframes popAnim {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.3); }
  25%  { opacity:1; transform:translate(-50%,-50%) scale(1.2); }
  50%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
  100% { opacity:0; transform:translate(-50%,-60%) scale(1.1); }
}

/* ====== 完美闪避文字 ====== */
.popup-text.perfect-dodge {
  color:#FFD700; font-size:54px;
  text-shadow:0 0 40px rgba(255,215,0,0.8), 0 0 80px rgba(255,180,0,0.4);
}
.popup-text.perfect-dodge.pop {
  animation: perfectPopAnim 1s ease-out forwards;
}
@keyframes perfectPopAnim {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(0.2) rotate(-10deg); }
  20%  { opacity:1; transform:translate(-50%,-50%) scale(1.3) rotate(5deg); }
  40%  { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg); }
  100% { opacity:0; transform:translate(-50%,-70%) scale(1.15); }
}

/* ====== 闪避按钮 ====== */
.dodge-btn {
  position:fixed; bottom:50%; left:50%; transform:translate(-50%,250px);
  padding:16px 48px;
  background:linear-gradient(135deg, rgba(80,140,255,0.35), rgba(60,100,220,0.25));
  border:2px solid rgba(100,180,255,0.6);
  border-radius:14px;
  color:#FFF; font-size:22px; font-weight:bold; font-family:inherit;
  cursor:pointer; z-index:9;
  opacity:0; pointer-events:none;
  text-shadow:0 0 12px rgba(100,180,255,0.6);
  box-shadow:0 0 30px rgba(80,140,255,0.3), inset 0 0 20px rgba(100,180,255,0.1);
  transition:opacity 0.15s ease, box-shadow 0.15s ease;
  animation:none;
}
.dodge-btn.show {
  opacity:1; pointer-events:all;
  animation:dodgePulse 0.5s ease-in-out infinite alternate;
}
.dodge-btn:active {
  background:linear-gradient(135deg, rgba(100,180,255,0.5), rgba(80,150,255,0.4));
  box-shadow:0 0 50px rgba(100,180,255,0.5), inset 0 0 30px rgba(150,210,255,0.2);
  transform:translate(-50%,248px) scale(0.95);
}
@keyframes dodgePulse {
  0%   { box-shadow:0 0 30px rgba(80,140,255,0.3); border-color:rgba(100,180,255,0.5); }
  100% { box-shadow:0 0 50px rgba(100,180,255,0.5); border-color:rgba(140,210,255,0.7); }
}

/* ====== 响应式 ====== */
@media (max-width:860px) {
  .overlay-panel { padding:28px 24px; }
  .overlay-panel h1 { font-size:24px; }
  .mode-btn { font-size:15px; padding:10px 16px; }
  #turnIndicator { font-size:18px; top:40px; }
  .popup-text { font-size:36px; }
  .dodge-btn { font-size:19px; padding:14px 36px; transform:translate(-50%,200px); }
  .dodge-btn:active { transform:translate(-50%,198px) scale(0.95); }
}

@media (max-width:500px) {
  .overlay-panel { padding:20px 18px; border-radius:12px; }
  .overlay-panel h1 { font-size:20px; }
  .overlay-panel .subtitle { font-size:12px; }
  .mode-btn { font-size:14px; padding:9px 14px; }
  .diff-btn { font-size:13px; padding:7px 14px; }
  #turnIndicator { font-size:16px; top:36px; }
  #actionHint { font-size:13px; bottom:24px; }
  .popup-text { font-size:28px; }
  .popup-text.perfect-dodge { font-size:38px; }
  .dodge-btn { font-size:17px; padding:12px 30px; transform:translate(-50%,160px); }
  .dodge-btn:active { transform:translate(-50%,158px) scale(0.95); }
}