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

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a1a;
  font-family: 'Courier New', monospace;
}

#game-root {
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

#screen-container {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  background: #0d0d2b;
  color: #e8e8f0;
}

:root {
  --fire: #e25822; --fire-light: #ff8c42; --fire-dark: #a83200;
  --water: #4fc3f7; --water-light: #87d7ff; --water-dark: #0086c3;
  --earth: #66bb6a; --earth-light: #98ee99; --earth-dark: #338a3e;
  --normal: #9c8bdc; --normal-light: #cebcff; --normal-dark: #6a5caa;
  --gold: #fbbf24; --gold-light: #fde68a;
  --inverted: #00e5ff; --inverted-dark: #0087a8;
  --bg-dark: #0d0d2b; --bg-panel: #1a1a3e; --bg-card: #22224a;
  --text-primary: #e8e8f0; --text-dim: #9090b0; --text-gold: #fbbf24;
  --border: #3a3a6a; --border-bright: #6060aa;
}

h1, h2, h3, h4, h5, h6, .btn, label, .title-font {
  font-family: 'Press Start 2P', monospace;
  text-rendering: optimizeSpeed;
}

.creature-sprite {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  object-fit: contain;
}

.variant-gold-fallback {
  filter: drop-shadow(0 0 8px #fbbf24) drop-shadow(0 0 18px #f59e0b) brightness(1.1) saturate(1.6);
}
.variant-gold-animated {
  animation: gold-shimmer 2s infinite ease-in-out;
}

.variant-inverted-fallback {
  filter: invert(1) hue-rotate(180deg) brightness(1.2) saturate(1.4);
}

.btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  padding: 12px 16px;
  border: 2px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
  transition: transform 0.1s, box-shadow 0.1s;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 2px 4px 0 #000, -1px -1px 0 #000;
  border-color: var(--border-bright);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 2px 2px 0 #000, -1px -1px 0 #000;
}

.btn-primary {
  border-color: var(--gold);
  color: var(--gold);
}

.btn-fire { background: var(--fire-dark); border-color: var(--fire); }
.btn-water { background: var(--water-dark); border-color: var(--water); }
.btn-earth { background: var(--earth-dark); border-color: var(--earth); }
.btn-normal { background: var(--normal-dark); border-color: var(--normal); }

.btn-move {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  font-size: 10px;
  gap: 8px;
}

.hp-bar-container {
  width: 100%;
}
.hp-bar {
  width: 100%;
  height: 10px;
  border-radius: 2px;
  background: #333;
  overflow: hidden;
  border: 1px solid #555;
  margin-top: 4px;
}
.hp-bar-fill {
  height: 100%;
  transition: width 0.5s ease, background-color 0.3s;
}
.hp-bar-fill.high { background: #4caf50; }
.hp-bar-fill.medium { background: #ff9800; }
.hp-bar-fill.low { background: #f44336; }
.hp-bar-fill.critical { background: #f44336; animation: hp-pulse 0.5s infinite alternate; }

@keyframes fire-flicker { 0%,100%{text-shadow:0 0 8px #ff4500,0 0 20px #ff0;} 50%{text-shadow:0 0 16px #ff6600,0 0 40px #ff4500;} }
@keyframes hp-pulse { from{opacity:1;} to{opacity:0.6;} }
@keyframes shake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
@keyframes frenzy-pulse { 0%,100%{box-shadow:inset 0 0 0 3px transparent;} 50%{box-shadow:inset 0 0 0 3px #ff2222, inset 0 0 20px #ff000033;} }
@keyframes slide-up { from{transform:translateY(20px);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes float-damage { 0%{transform:translateY(0);opacity:1;} 100%{transform:translateY(-40px);opacity:0;} }
@keyframes gold-shimmer { 0%,100%{filter:drop-shadow(0 0 8px #fbbf24) brightness(1.1);} 50%{filter:drop-shadow(0 0 20px #fde68a) drop-shadow(0 0 35px #f59e0b) brightness(1.2);} }
@keyframes particle-float { 0%{transform:translateY(0) scale(1);opacity:0.6;} 100%{transform:translateY(-100px) scale(0);opacity:0;} }

.battle-screen.frenzy-active { animation: frenzy-pulse 0.8s infinite; }
.damage-float { position:absolute; font-family:'Press Start 2P',monospace; font-size:14px; font-weight:bold; color:#fff; text-shadow:0 0 4px #000; animation: float-damage 1s forwards; pointer-events:none; z-index: 100; }
.battle-log { background:#0a0a18; border:2px solid var(--border); padding:12px; height:90px; overflow-y:auto; font-family:'Courier New',monospace; font-size:12px; line-height:1.6; scroll-behavior:smooth; margin-top: 10px; }

.creature-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.creature-card:hover {
  border-color: var(--border-bright);
  box-shadow: 0 0 10px rgba(96, 96, 170, 0.5);
}
.creature-card.caught-fire { border-color: var(--fire); }
.creature-card.caught-water { border-color: var(--water); }
.creature-card.caught-earth { border-color: var(--earth); }
.creature-card.caught-normal { border-color: var(--normal); }

.card-gold { animation: gold-shimmer 2s infinite; border-color: var(--gold); }
.card-inverted { border-color: var(--inverted); box-shadow: 0 0 8px var(--inverted); }

.modal-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.bestiary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px;
}

@media (min-width: 600px) {
  .bestiary-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.region-panel {
  background: linear-gradient(to bottom right, var(--bg-panel), var(--bg-dark));
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.status-badge {
  display: inline-block;
  padding: 4px 8px;
  font-size: 10px;
  border-radius: 4px;
  font-family: 'Press Start 2P', monospace;
  margin-right: 4px;
  margin-top: 4px;
}

.status-paralysis { background: #fbc02d; color: #000; }
.status-sleep { background: #7b1fa2; color: #fff; }
.status-freeze { background: #0288d1; color: #fff; }
.status-scorch { background: #e64a19; color: #fff; }
.status-confusion { background: #d81b60; color: #fff; }