/* 8-Bit Theme CSS for Chad Battles */

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

/* Global 8-bit styling */
body.pixel-theme {
  font-family: 'Press Start 2P', cursive;
  line-height: 2.0;
  image-rendering: pixelated;
  color: #ffffff;
  background-color: #121212;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC');
  background-repeat: repeat;
}

/* Typography */
.pixel-theme h1,
.pixel-theme h2,
.pixel-theme h3,
.pixel-theme h4,
.pixel-theme h5,
.pixel-theme h6 {
  font-family: 'Press Start 2P', cursive;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1.5rem;
  color: #00ff00;
  text-shadow: 3px 3px 0px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
  line-height: 1.6;
}

.pixel-theme p, .pixel-theme li, .pixel-theme div {
  text-shadow: 2px 2px 0px rgba(0,0,0,0.8);
  letter-spacing: 0.05em;
  font-size: 1.0rem;
}

.pixel-theme .navbar-brand {
  font-family: 'Press Start 2P', cursive !important;
  font-size: 1rem;
  color: #00ff00 !important;
  text-shadow: 2px 2px 0px #000;
}

/* Main title */
.pixel-theme .main-title {
  font-size: 2.5rem;
  color: #00ff00;
  text-shadow: 4px 4px 0px #000;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pixel-theme .lead {
  font-size: 1.2rem;
  color: #ffffff;
  text-shadow: 2px 2px 0px #000;
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* 8-bit Buttons */
.pixel-theme .btn {
  font-family: 'Press Start 2P', cursive;
  border: 3px solid #000;
  border-radius: 0;
  color: #000;
  background-color: #aaa;
  box-shadow: 4px 4px 0px #000;
  padding: 0.8rem 1.2rem;
  margin: 0.5rem 0;
  transition: all 0.1s ease;
  font-size: 0.9rem;
  position: relative;
  text-transform: uppercase;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(255,255,255,0.5);
}

.pixel-theme .btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #000;
}

.pixel-theme .btn:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0px #000;
}

.pixel-theme .btn-primary {
  background-color: #00aaff;
  color: white;
  text-shadow: 1px 1px 0px #000;
}

.pixel-theme .btn-success {
  background-color: #00aa00;
  color: white;
  text-shadow: 1px 1px 0px #000;
}

.pixel-theme .btn-danger {
  background-color: #ff0000;
  color: white;
  text-shadow: 1px 1px 0px #000;
}

.pixel-theme .btn-warning {
  background-color: #ffaa00;
  color: black;
}

/* Cards */
.pixel-theme .card {
  border: 4px solid #000;
  border-radius: 0;
  background-color: #333;
  box-shadow: 8px 8px 0px #000;
  margin-bottom: 1.5rem;
  overflow: hidden;
}

.pixel-theme .card-header {
  background-color: #222;
  border-bottom: 4px solid #000;
  padding: 1rem;
  font-weight: bold;
  color: #00ff00;
  text-transform: uppercase;
}

.pixel-theme .card-body {
  padding: 1.5rem;
  background-color: #2a2a2a;
}

.pixel-theme .card-footer {
  background-color: #222;
  border-top: 4px solid #000;
  color: #aaa;
}

/* Navbar */
.pixel-theme .navbar {
  background-color: #000 !important;
  border-bottom: none;
  margin-bottom: 2rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.pixel-theme .navbar-dark .navbar-nav .nav-link {
  color: #f8f8f8;
  font-size: 0.7rem;
  padding: 0.8rem 1rem;
  text-shadow: 1px 1px 0px #000;
}

.pixel-theme .navbar-dark .navbar-nav .nav-link:hover {
  color: #00ff00;
}

.pixel-theme .navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.pixel-theme .navbar .d-flex {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}

.pixel-theme .navbar .btn {
  margin: 0 0.3rem;
}

@media (max-width: 992px) {
  .pixel-theme .navbar-collapse {
    /* Ensures the collapsed menu looks okay */
    background-color: #000;
    padding: 1rem;
    border: var(--pixel-border);
    margin-top: 0.5rem;
  }

  .pixel-theme .navbar-collapse .navbar-nav {
    /* Ensure links stack properly in collapsed menu */
    flex-direction: column;
  }

  .pixel-theme .navbar-collapse .d-flex {
    margin-top: 1rem;
    justify-content: flex-start;
    flex-direction: row !important; /* Keep buttons in a row */
    flex-wrap: wrap; /* Allow wrapping if needed */
    gap: 0.5rem;
  }

  .pixel-theme .navbar-collapse .btn {
    flex-grow: 1; /* Allow buttons to share space */
    min-width: 120px; /* Prevent buttons from becoming too small */
  }
}

/* Forms */
.pixel-theme form .form-control {
  background-color: #000;
  border: 3px solid #00ff00;
  border-radius: 0;
  color: #00ff00;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.9rem;
  padding: 0.8rem;
}

.pixel-theme form .form-control:focus {
  box-shadow: none;
  border-color: #00aaff;
  color: #00aaff;
}

/* Make sure form styles don't affect other elements */
.pixel-theme div:not(form) > .form-control {
  /* Reset any unwanted form styles here if necessary, */
  /* but scoping to forms should prevent most issues. */
  border: initial;
  background-color: initial;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  padding: initial;
  box-shadow: none;
  border-radius: initial;
}

/* Game specific elements */
.pixel-theme .stat-bar {
  height: 24px;
  border: 3px solid #000;
  background-color: #111;
  margin-bottom: 15px;
  position: relative;
}

.pixel-theme .stat-bar-inner {
  height: 14px;
  background-color: #00ff00;
  transition: width 0.3s ease;
}

.pixel-theme .stat-clout {
  background-color: #ff5252;
}

.pixel-theme .stat-roast {
  background-color: #ffb142;
}

.pixel-theme .stat-cringe {
  background-color: #2ed573;
}

.pixel-theme .stat-drip {
  background-color: #70a1ff;
}

/* Health bars in battles */
.pixel-theme .progress {
  height: 20px;
  border: 3px solid #000;
  border-radius: 0;
  background-color: #111;
  margin-bottom: 15px;
}

.pixel-theme .progress-bar {
  background-image: linear-gradient(
    to right,
    #ff0000,
    #ff0000 5px,
    #cc0000 5px,
    #cc0000 10px
  );
  background-size: 10px 20px;
}

/* Battle arena */
.pixel-theme .battle-arena {
  border: 4px solid #000;
  background-color: #0a0a0a;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVQYlWNgYGD4j4Y/MIwKBgMAEQgNz/qGGQAAAABJRU5ErkJggg==');
  background-repeat: repeat;
  padding: 2rem;
  position: relative;
  margin-bottom: 2rem;
}

/* Character sprites */
.pixel-theme .character-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transition: all 0.2s ease;
}

.pixel-theme .character-sprite:hover {
  transform: scale(1.05);
}

/* Custom Alert Styles */
.pixel-theme .alert {
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: 4px 4px 0px #000;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.8rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.pixel-theme .alert-success {
  background-color: #00aa00;
  color: white;
  text-shadow: 1px 1px 0px #000;
}

.pixel-theme .alert-danger {
  background-color: #aa0000;
  color: white;
  text-shadow: 1px 1px 0px #000;
}

.pixel-theme .alert-warning {
  background-color: #aaaa00;
  color: black;
}

/* List group */
.pixel-theme .list-group-item {
  background-color: #1a1a1a;
  color: #ffffff;
  border-color: #000;
}

.pixel-theme code {
  background-color: #000;
  color: #00ff00;
  padding: 0.2rem 0.4rem;
  border-radius: 0;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.8rem;
}

/* Footer */
.pixel-theme .footer {
  background-color: #000 !important;
  border-top: 4px solid #00ff00;
  color: #f8f8f8;
  font-size: 0.7rem;
  line-height: 1.8;
  padding: 2rem 0;
}

.pixel-theme .footer h5 {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  color: #00ff00;
}

.pixel-theme .footer a {
  color: #00aaff !important;
  text-decoration: none;
}

.pixel-theme .footer a:hover {
  color: #00ff00 !important;
}

/* Badges */
.pixel-theme .badge {
  font-family: 'Press Start 2P', cursive;
  border: 2px solid #000;
  border-radius: 0;
  padding: 0.4rem 0.6rem;
  font-size: 0.6rem;
}

/* Animations */
@keyframes pixel-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pixel-theme .pulse {
  animation: pixel-pulse 1s infinite;
}

/* Hero section */
.pixel-theme .hero-section {
  padding: 3rem 0;
  background-color: #222;
  border: 4px solid #000;
  box-shadow: 8px 8px 0px #000;
}

.pixel-theme .hero-title {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.pixel-theme .hero-subtitle {
  font-size: 1rem;
  margin-bottom: 2rem;
  color: #ffffff;
}

/* Media Queries */
@media (max-width: 768px) {
  .pixel-theme h1 {
    font-size: 1.8rem;
  }

  .pixel-theme h2 {
    font-size: 1.5rem;
  }

  .pixel-theme h3 {
    font-size: 1.2rem;
  }

  .pixel-theme .navbar-brand {
    font-size: 0.8rem;
  }

  .pixel-theme .btn {
    font-size: 0.7rem;
    padding: 0.6rem 0.9rem;
  }
}

/* Core stats section styling */
.pixel-theme .section-title {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: #00ff00;
  text-shadow: 3px 3px 0px #000;
}

.pixel-theme .stat-header {
  font-size: 1.2rem;
  padding: 0.8rem;
  margin-bottom: 0.5rem;
  text-shadow: 2px 2px 0px #000;
}

.pixel-theme .stat-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  text-shadow: 1px 1px 0px #000;
  margin-top: 0.5rem;
  color: #ffffff;
}

.pixel-theme .stat-block {
  background-color: rgba(20, 20, 20, 0.8);
  border: 4px solid #000;
  box-shadow: 6px 6px 0px #000;
  padding: 1rem;
  margin-bottom: 1.5rem;
}