:root {
  --bg-dark: #0d0015;
  --bg-panel: #1a0a2e;
  --bg-panel-light: #2a1245;
  --pink: #ff2d78;
  --pink-light: #ff6ba6;
  --red: #ff1744;
  --gold: #ffd700;
  --purple: #9c27b0;
  --purple-light: #ce93d8;
  --cyan: #00e5ff;
  --text: #f0e6ff;
  --text-dim: #9988aa;
}

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

body {
  background: var(--bg-dark);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}

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

.rpg-border {
  border: 3px solid var(--pink);
  box-shadow: 0 0 10px rgba(255, 45, 120, 0.3), inset 0 0 10px rgba(255, 45, 120, 0.1);
  border-radius: 8px;
}

.rpg-border-gold {
  border: 3px solid var(--gold);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3), inset 0 0 10px rgba(255, 215, 0, 0.1);
  border-radius: 8px;
}

.heart-meter-bg {
  background: rgba(255, 45, 120, 0.15);
  border: 2px solid var(--pink);
  border-radius: 20px;
  overflow: hidden;
}

.heart-meter-fill {
  background: linear-gradient(90deg, var(--pink), var(--red));
  height: 100%;
  transition: width 0.5s ease;
  border-radius: 20px;
}

.cp-meter-bg {
  background: rgba(0, 229, 255, 0.15);
  border: 2px solid var(--cyan);
  border-radius: 20px;
  overflow: hidden;
}

.cp-meter-fill {
  background: linear-gradient(90deg, var(--cyan), #0088ff);
  height: 100%;
  transition: width 0.5s ease;
  border-radius: 20px;
}

.xp-meter-bg {
  background: rgba(255, 215, 0, 0.15);
  border: 2px solid var(--gold);
  border-radius: 20px;
  overflow: hidden;
}

.xp-meter-fill {
  background: linear-gradient(90deg, var(--gold), #ffaa00);
  height: 100%;
  transition: width 0.5s ease;
  border-radius: 20px;
}

@keyframes pulse-heart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes sparkle {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(180deg); }
  100% { opacity: 0; transform: scale(0) rotate(360deg); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes heartFloat {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-80px) scale(0.3); }
}

.animate-pulse-heart {
  animation: pulse-heart 1.2s ease-in-out infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}

.animate-sparkle {
  animation: sparkle 0.8s ease-out forwards;
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease-out forwards;
}

.animate-slideIn {
  animation: slideIn 0.3s ease-out forwards;
}

.animate-heartFloat {
  animation: heartFloat 1.5s ease-out forwards;
}

.btn-charm {
  background: linear-gradient(135deg, var(--bg-panel-light), var(--bg-panel));
  border: 2px solid var(--pink);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
}

.btn-charm:hover {
  background: linear-gradient(135deg, var(--pink), var(--red));
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(255, 45, 120, 0.4);
}

.btn-charm:active {
  transform: translateY(0);
}

.btn-charm:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), #ffaa00);
  border: 2px solid var(--gold);
  color: #1a0a2e;
  font-weight: 700;
}

.btn-gold:hover {
  background: linear-gradient(135deg, #ffe44d, var(--gold));
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
}

.game-panel {
  background: linear-gradient(180deg, rgba(26, 10, 46, 0.95), rgba(13, 0, 21, 0.98));
  backdrop-filter: blur(10px);
}

.monster-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.dialog-box {
  background: rgba(13, 0, 21, 0.92);
  border: 3px solid var(--purple-light);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(156, 39, 176, 0.2);
}

.shop-item:hover {
  background: rgba(255, 45, 120, 0.1);
  border-color: var(--pink);
}

.type-fire { color: #ff6b35; }
.type-water { color: #4fc3f7; }
.type-grass { color: #66bb6a; }
.type-electric { color: #ffd54f; }
.type-psychic { color: #f48fb1; }
.type-normal { color: #bdbdbd; }
.type-fairy { color: #f8bbd0; }
.type-dark { color: #8d6e63; }

.bg-type-fire { background: rgba(255, 107, 53, 0.15); border-color: #ff6b35; }
.bg-type-water { background: rgba(79, 195, 247, 0.15); border-color: #4fc3f7; }
.bg-type-grass { background: rgba(102, 187, 106, 0.15); border-color: #66bb6a; }
.bg-type-electric { background: rgba(255, 213, 79, 0.15); border-color: #ffd54f; }
.bg-type-psychic { background: rgba(244, 143, 177, 0.15); border-color: #f48fb1; }
.bg-type-normal { background: rgba(189, 189, 189, 0.15); border-color: #bdbdbd; }
.bg-type-fairy { background: rgba(248, 187, 208, 0.15); border-color: #f8bbd0; }
.bg-type-dark { background: rgba(141, 110, 99, 0.15); border-color: #8d6e63; }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: var(--bg-dark); }
.scrollbar-thin::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 3px; }

@media (max-width: 640px) {
  .pixel-font { font-size: 0.7em; }
}