@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --bg-deep: #0f0f23;
  --bg-mid: #1a1a2e;
  --bg-light: #16213e;
  --p1-primary: #4488ff;
  --p1-mid: #2266dd;
  --p1-dark: #1144aa;
  --p2-primary: #ff4444;
  --p2-mid: #dd2222;
  --p2-dark: #aa1111;
  --crit-gold: #ffaa00;
  --crit-light: #ffcc33;
  --heal-green: #44ff44;
  --armor-gray: #888888;
  --dodge-cyan: #44ffff;
  --clutch-gold: #ffd700;
  --emerald: #00cc66;
}

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

body {
  background: var(--bg-deep);
  color: #e0e0e0;
  font-family: 'Courier New', monospace;
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 31px,
      rgba(255,255,255,0.015) 31px,
      rgba(255,255,255,0.015) 32px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 31px,
      rgba(255,255,255,0.015) 31px,
      rgba(255,255,255,0.015) 32px
    );
  pointer-events: none;
  z-index: 0;
}

.pixel-font {
  font-family: 'Press Start 2P', monospace;
}

.mono-font {
  font-family: 'Courier New', monospace;
}

/* Slider styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 12px;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  border: 2px solid #333;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border: 3px solid #fff;
  cursor: pointer;
  image-rendering: pixelated;
}

input[type="range"].p1-slider {
  background: linear-gradient(to right, var(--p1-dark), var(--p1-primary));
}
input[type="range"].p1-slider::-webkit-slider-thumb {
  background: var(--p1-primary);
}

input[type="range"].p2-slider {
  background: linear-gradient(to right, var(--p2-dark), var(--p2-primary));
}
input[type="range"].p2-slider::-webkit-slider-thumb {
  background: var(--p2-primary);
}

/* Health bar animations */
.health-bar-inner {
  transition: width 0.3s ease-out;
}

.health-bar-shake {
  animation: shake 0.3s ease-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.screen-shake {
  animation: screenShake 0.4s ease-out;
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-5px, -3px); }
  20% { transform: translate(5px, 3px); }
  30% { transform: translate(-4px, 2px); }
  40% { transform: translate(4px, -2px); }
  50% { transform: translate(-3px, 3px); }
  60% { transform: translate(3px, -1px); }
  70% { transform: translate(-2px, 1px); }
  80% { transform: translate(2px, -1px); }
  90% { transform: translate(-1px, 1px); }
}

/* Clutch pulse */
.clutch-pulse {
  animation: clutchGlow 0.8s ease-in-out infinite alternate;
}

@keyframes clutchGlow {
  0% { box-shadow: 0 0 5px var(--clutch-gold), 0 0 10px var(--clutch-gold); }
  100% { box-shadow: 0 0 15px var(--clutch-gold), 0 0 30px var(--clutch-gold), 0 0 45px rgba(255,215,0,0.3); }
}

/* Winner animation */
.winner-entrance {
  animation: winnerBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes winnerBounce {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

/* Pixel particles */
.pixel-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  image-rendering: pixelated;
  animation: particleFly 1.5s ease-out forwards;
}

@keyframes particleFly {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--px, 50px), var(--py, -80px)) rotate(720deg);
    opacity: 0;
  }
}

/* Combat log entry fade-in */
.log-entry {
  animation: fadeInUp 0.2s ease-out;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Button styles */
.mc-btn {
  font-family: 'Press Start 2P', monospace;
  border: 3px solid;
  border-color: #aaa #555 #555 #aaa;
  background: #777;
  color: #fff;
  padding: 8px 16px;
  cursor: pointer;
  text-shadow: 2px 2px 0 #333;
  transition: all 0.1s;
  image-rendering: pixelated;
}

.mc-btn:hover {
  background: #999;
  transform: scale(1.03);
  filter: brightness(1.1);
}

.mc-btn:active {
  border-color: #555 #aaa #aaa #555;
  transform: scale(0.97);
}

.mc-btn-green {
  background: #4a7a3a;
  border-color: #6ab04c #2d5a1e #2d5a1e #6ab04c;
}
.mc-btn-green:hover {
  background: #5a9a4a;
}

.mc-btn-red {
  background: #7a3a3a;
  border-color: #b04c4c #5a1e1e #5a1e1e #b04c4c;
}
.mc-btn-red:hover {
  background: #9a4a4a;
}

/* Heart & armor icons */
.heart-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #ff3333;
  clip-path: polygon(50% 100%, 0% 35%, 25% 0%, 50% 20%, 75% 0%, 100% 35%);
  image-rendering: pixelated;
}

.heart-icon.empty {
  background: #444;
}

.heart-icon.half {
  background: linear-gradient(to right, #ff3333 50%, #444 50%);
}

.armor-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #aaa;
  clip-path: polygon(15% 0%, 85% 0%, 100% 30%, 100% 100%, 50% 80%, 0% 100%, 0% 30%);
}

.armor-icon.empty {
  background: #333;
}

/* Scrollbar styling for combat log */
.combat-log::-webkit-scrollbar {
  width: 10px;
}
.combat-log::-webkit-scrollbar-track {
  background: #111;
  border: 2px solid #222;
}
.combat-log::-webkit-scrollbar-thumb {
  background: #444;
  border: 2px solid #333;
}

/* Tooltip */
.stat-tooltip {
  position: relative;
}
.stat-tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  background: #111;
  color: #ccc;
  font-size: 10px;
  font-family: 'Courier New', monospace;
  padding: 4px 8px;
  border: 2px solid #444;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 100;
  transition: opacity 0.2s;
  pointer-events: none;
}
.stat-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* VS text */
.vs-text {
  text-shadow: 0 0 20px rgba(255,170,0,0.5), 0 0 40px rgba(255,170,0,0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .pixel-font {
    font-size: 0.7em;
  }
  input[type="range"] {
    height: 16px;
  }
  input[type="range"]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }
}