body { font-family: 'Press Start 2P', cursive; }
.shadow-title { text-shadow: 2px 2px 0 #000, 4px 4px 0 #5b2100; }

/* Dominant 8-bit parallax background */
#pixel-bg { position: fixed; inset: 0; z-index: -10; overflow: hidden; }
#pixel-bg .bg-layer { position: absolute; inset: 0; image-rendering: pixelated; will-change: background-position; }
#pixel-bg .sky { background: linear-gradient(#0b1020 0%, #0d1322 40%, #0b1326 100%); }
#pixel-bg .clouds {
  background-size: 320px 160px; background-repeat: repeat;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='320' height='160'>\
  <rect width='320' height='160' fill='transparent'/>\
  <g fill='%238aa1c7' opacity='0.45'>\
  <rect x='20' y='24' width='24' height='8'/><rect x='40' y='24' width='24' height='8'/>\
  <rect x='56' y='32' width='24' height='8'/><rect x='200' y='50' width='20' height='8'/>\
  <rect x='216' y='58' width='20' height='8'/><rect x='232' y='50' width='20' height='8'/>\
  </g></svg>");
  animation: clouds-move 70s linear infinite; opacity: 0.6;
}
#pixel-bg .hills {
  background-repeat: repeat; background-size: 400px 240px; background-position: 0 70%;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='400' height='240'>\
  <rect width='400' height='240' fill='transparent'/>\
  <path d='M0 200 L40 160 L80 190 L120 150 L160 195 L200 165 L240 188 L280 168 L320 186 L360 170 L400 180 V240 H0 Z' fill='%2310192a'/>\
  </svg>");
  animation: hills-move 45s linear infinite; opacity: 0.9;
}
#pixel-bg .forest {
  background-repeat: repeat; background-size: 320px 260px; background-position: 0 85%;
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='320' height='260'>\
  <rect width='320' height='260' fill='transparent'/>\
  <g fill='%23365514'>\
  <path d='M20 220 l18 -36 l18 36 h-8 v26 h-20 v-26 z'/>\
  <path d='M90 226 l16 -32 l16 32 h-7 v20 h-18 v-20 z'/>\
  <path d='M160 216 l22 -44 l22 44 h-10 v30 h-24 v-30 z'/>\
  <path d='M240 224 l18 -36 l18 36 h-8 v26 h-20 v-26 z'/>\
  </g><rect x='0' y='240' width='320' height='20' fill='%232a3b0f'/>\
  </svg>");
  animation: forest-move 22s linear infinite;
}
@keyframes clouds-move { from { background-position: 0 15%; } to { background-position: -1600px 15%; } }
@keyframes hills-move  { from { background-position: 0 70%; } to { background-position: -1600px 70%; } }
@keyframes forest-move { from { background-position: 0 85%; } to { background-position: -1600px 85%; } }

/* Mute button */
.mute-btn {
  position: fixed; right: 16px; top: 16px; z-index: 20;
  font-size: 20px; line-height: 1; padding: 10px 12px;
  border: 4px solid #fff; background: rgba(0,0,0,0.6); color: #fff;
  border-radius: 10px; box-shadow: 0 4px 0 #000; image-rendering: pixelated;
}

/* Hearts + HP bars (3 HP) */
.hearts { display: flex; gap: 8px; justify-content: center; align-items: center; }
.heart { width: 24px; height: 24px; image-rendering: pixelated;
  background-image: url('https://emoji.aranja.com/static/emoji-data/img-apple-160/2764.png');
  background-size: cover; filter: drop-shadow(0 2px 0 #000);
}
.heart.empty { filter: grayscale(100%) brightness(50%) drop-shadow(0 2px 0 #000); }

.hpbar {
  width: 260px; height: 20px; border: 4px solid #fff; border-radius: 8px;
  background: #0b0f1a; box-shadow: 0 4px 0 #000; overflow: hidden;
}
.hpbar-inner {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, #3b82f6, #60a5fa);
  image-rendering: pixelated; transition: width 140ms steps(3, end);
}
.pink ~ .mt-3 .hpbar .hpbar-inner { background: linear-gradient(90deg, #e11d48, #fb7185); }

/* Fighter cards */
.fighter-card {
  position: relative; width: 280px; height: 90px;
  border: 4px solid #fff; border-radius: 10px;
  background: rgba(0,0,0,0.75);
  display: grid; place-items: center;
  box-shadow: 0 4px 0 #000; image-rendering: pixelated;
  text-shadow: 1px 1px 0 #000;
}
.fighter-card.blue { outline: 4px solid #3B82F6; }
.fighter-card.pink { outline: 4px solid #E11D48; }
.fighter-icon { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); font-size: 36px; filter: drop-shadow(0 2px 0 #000); }
.fighter-label { font-size: 18px; letter-spacing: 1px; }
.fighter-card.hit { animation: hit-card 0.25s linear; }
@keyframes hit-card { 0%{transform:translateX(0)}25%{transform:translateX(-8px)}50%{transform:translateX(8px)}100%{transform:translateX(0)} }

/* Dialogue */
.dialogue-box {
  background: rgba(0, 0, 0, 0.85);
  border: 4px solid #fff;
  padding: 1rem; color: white;
  max-width: 80%; margin: 1rem auto;
  text-transform: uppercase; image-rendering: pixelated;
}

/* Sticky input bar + rules */
.chat-inputbar {
  position: sticky; bottom: 0; display: grid;
  grid-template-columns: 1fr 160px; gap: 10px; align-items: center;
  background: rgba(0,0,0,0.7); border: 4px solid #fff;
  padding: 10px; margin-top: 12px; z-index: 5; image-rendering: pixelated;
}
.rules-box {
  border: 4px solid #fff; background: rgba(0,0,0,0.65);
  padding: 12px; border-radius: 10px; box-shadow: 0 4px 0 #000;
  font-size: 12px; line-height: 18px; image-rendering: pixelated;
}
.input-8bit { width: 100%; padding: 1rem; border-radius: 10px; background: #111827; border: 3px solid #374151; color: #fff; font-size: 1rem; outline: none; }
.input-8bit:focus { border-color: #facc15; }
.btn-8bit-yellow, .btn-8bit-red, .btn-8bit-green {
  width: 100%; margin-top: 0; padding: 1rem; font-weight: 700;
  border-radius: 10px; transition: 0.1s; box-shadow: 0 4px 0 #000; image-rendering: pixelated;
}
.btn-8bit-yellow { background:#facc15; color:#111; } .btn-8bit-yellow:hover { transform: translateY(-2px); }
.btn-8bit-red { background:#dc2626; color:#fff; } .btn-8bit-red:hover { transform: translateY(-2px); }
.btn-8bit-green { background:#22c55e; color:#111; } .btn-8bit-green:hover { transform: translateY(-2px); }
/* Violent 8-bit explosion (extended to 5s) */
.explosion { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 50; }
.boom {
  width: 360px; height: 360px;
  background: radial-gradient(#ffd166 0 38%, #ef4444 39% 58%, transparent 59%);
  filter: contrast(230%) saturate(180%) drop-shadow(0 0 18px #ffa500);
  image-rendering: pixelated; 
  animation: boom-long 5s steps(12) forwards; /* 5 seconds */
}
.boom.short-boom {
  animation: boom-short 1s steps(8) forwards;
}
@keyframes boom-long {
  0% { transform: scale(0.2); opacity: 0; }
  20% { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(1.0); opacity: 0; }
}

@keyframes boom-short {
  0% { transform: scale(0.2); opacity: 0; }
  20% { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0.8); opacity: 0; }
}

/* Particles (money + dinos) with per-particle CSS variables */
#particles { position: absolute; inset: 0; }
.particle {
  position: absolute; left: 50%; top: 55%;
  width: 48px; height: 48px; image-rendering: pixelated;
  opacity: 0;
  transform: translate(-50%, -50%) scale(var(--scale,1));
  filter: drop-shadow(0 4px 0 #000);
  animation-name: blast, spin;
  animation-duration: var(--dur, 4800ms);
  animation-timing-function: ease-out, linear;
  animation-fill-mode: forwards;
}
.particle.money { background-image: url('https://placehold.co/48x48/22c55e/ffffff?text=$'); background-size: cover; }
.particle.dino  { background-image: url('https://placehold.co/48x48/ef4444/ffffff?text=🦕'); background-size: cover; }

@keyframes blast {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  6% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -300px)))
               scale(var(--endScale,1.6))
               rotate(var(--rot, 1080deg));
  }
}
@keyframes spin { from { rotate: 0deg; } to { rotate: var(--rot, 1080deg); } }