:root {
  --gold: #ffd700;
  --gold-dim: #c8a255;
  --gold-dark: #8b6914;
  --red: #ff3333;
  --blue: #3388ff;
  --green: #33dd33;
  --bg: #0a0a1a;
  --panel-bg: rgba(10, 10, 20, 0.95);
  --panel-border: rgba(200, 162, 85, 0.4);
  --text: #eee;
  --text-dim: #aaa;
  --shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0%, 100% { text-shadow: 0 0 10px rgba(255, 215, 0, 0.5); } 50% { text-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 40px rgba(255, 215, 0, 0.3); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes waveAnnounce { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes ripple { 0% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }
@keyframes heartbeat { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.7; } }
@keyframes kmBurst { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; } 30% { transform: translate(-50%, -50%) scale(0.95); } 45% { transform: translate(-50%, -50%) scale(1.05); } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@keyframes kmRing { 0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; } 100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }
@keyframes kmShake { 0%, 100% { transform: translate(-50%, -50%) rotate(0deg); } 10% { transform: translate(-52%, -50%) rotate(-2deg); } 20% { transform: translate(-48%, -50%) rotate(2deg); } 30% { transform: translate(-51%, -50%) rotate(-1deg); } 40% { transform: translate(-49%, -50%) rotate(1deg); } 50% { transform: translate(-50%, -50%) rotate(0deg); } }
@keyframes kmSub { 0% { opacity: 0; transform: translate(-50%, 10px) scale(0.8); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -10px) scale(0.9); } }

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

html, body {
  width: 100%;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  overflow: hidden;
  user-select: none;
}

#gameWrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, #151525 0%, #050510 100%);
  overflow: hidden;
}

#gameContainer {
  position: relative;
  width: 100%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
  border: 2px solid var(--gold-dark);
  border-radius: 6px;
  box-shadow: 0 0 40px rgba(200, 162, 85, 0.2), inset 0 0 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  background: #000;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  cursor: crosshair;
}

#vignette, #screenFlash, #lowHpWarning {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}

#vignette {
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.4) 100%);
}

#screenFlash {
  opacity: 0;
  transition: opacity 0.1s;
}

#lowHpWarning {
  opacity: 0;
  box-shadow: inset 0 0 0 0 transparent;
  transition: opacity 0.2s, box-shadow 0.2s;
}

#lowHpWarning.danger {
  opacity: 1;
  box-shadow: inset 0 0 60px 20px rgba(255, 0, 0, 0.5);
  animation: heartbeat 1s ease infinite;
}

#ui {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

.btn {
  padding: 14px 50px;
  font-size: 20px;
  background: linear-gradient(to bottom, var(--gold-dim), var(--gold-dark));
  border: 2px solid var(--gold);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 2px;
  transition: all 0.2s;
  box-shadow: 0 4px 15px rgba(200, 162, 85, 0.3);
}

.btn:hover {
  background: linear-gradient(to bottom, #e0b860, var(--gold-dim));
  box-shadow: 0 4px 25px rgba(200, 162, 85, 0.5);
  transform: translateY(-1px);
}

.btn:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(200, 162, 85, 0.3); }
.btn.small { padding: 8px 20px; font-size: 14px; }
.btn.secondary {
  background: linear-gradient(to bottom, #444, #222);
  border-color: #666;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.btn.secondary:hover { background: linear-gradient(to bottom, #555, #333); }

kbd {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #555;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.85em;
  font-family: monospace;
}

@media (max-width: 900px) {
  #gameContainer { border-radius: 0; border-width: 1px; }
}