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

/* 2. Base reset & light background */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #FFF0E5;       /* very light peach */
  color: #A35E00;                  /* dark burnt orange */
  font-family: 'Press Start 2P', monospace;
  overflow-y: auto;                /* allow scrolling */
  image-rendering: pixelated;
}

/* 3. Remove rounded corners & shadows */
*,
*::before,
*::after {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* 4. Subtle orange grid overlay */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,165,0,0.05) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg,  rgba(255,165,0,0.05) 0 1px, transparent 1px 16px);
  z-index: 9999;
}

/* 5. Header */
header {
  background: #F39C12 !important;  /* vivid orange */
  border-bottom: 4px solid #E67E22 !important;
}
header a, header .text-white {
  color: #FFF !important;
  text-shadow: 2px 2px 0 #A35E00;
  font-size: 1rem;
  font-family: 'Press Start 2P', monospace;
  text-transform: uppercase;
}

/* 6. Sidebar nav */
.nav-pills .nav-link {
  font-family: 'Press Start 2P', monospace;
  color: #A35E00 !important;
  background: transparent !important;
  border: 2px solid #E67E22;
  margin-bottom: .5rem;
  text-align: center;
  letter-spacing: 1px;
}
.nav-pills .nav-link.active {
  background: #E67E22 !important;
  color: #FFF !important;
}
.nav-pills .nav-link:hover {
  background: #F39C12 !important;
  color: #FFF !important;
}

/* 7. Dropdown toggle */
.dropdown-toggle {
  font-family: 'Press Start 2P', monospace;
  color: #A35E00 !important;
  border: 2px solid #E67E22;
  padding: .5rem 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.dropdown-menu {
  background: #FFF8F0 !important;
  border: 4px solid #E67E22 !important;
}
.dropdown-item {
  font-family: 'Press Start 2P', monospace;
  color: #A35E00 !important;
}
.dropdown-item:hover {
  background: #F39C12 !important;
  color: #FFF !important;
}

/* 8. Utility overrides for text & backgrounds */
.text-bg-dark {
  background-color: #FFF0E5 !important;
}
.text-secondary {
  color: #A35E00 !important;
}

/* 9. Pixelate all images & SVG (if any) */
img, svg {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}



/* 2. Stats Panel — inline within your grid, no extra top space */
.stats-container {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;  
  margin-top: 50px;             /* center in the column */
  padding: 5px;                   /* remove panel padding */
  background: #FFF8F0;          /* off-white card */
  box-sizing: border-box;
  border: solid 1px orange;
  font-family: 'Press Start 2P', monospace;
  image-rendering: pixelated;
}

/* 3. Each stat row */
.stats-container .stat-bar {
  margin-bottom: 0.75rem;       /* tighten vertical spacing */
}
.stats-container .stat-bar:last-child {
  margin-bottom: 0;
}

/* 4. Label above each bar */
.stats-container .bar-label {
  color: #E67E22;               /* burnt-orange text */
  font-size: 0.75rem;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

/* 5. Bar track */
.stats-container .bar-bg {
  width: 100%;
  height: 20px;
  background: #FFF;             /* white track */
  border: 2px solid #E67E22;    /* orange border */
  position: relative;
  image-rendering: pixelated;
}

/* 6. Bar fill — width controlled via the inline CSS var “--fill” */
.stats-container .bar-fill {
  height: 100%;
  width: var(--fill, 0%);       /* e.g. style="--fill:75%;" */
  background: #E67E22;          /* burnt-orange fill */
  image-rendering: pixelated;
}

.traits {
  background: blue !important;
}

/* 7. Remove any top margin on rows (so no extra gap) */
.row.mt-4 {
  margin-top: 0 !important;
}

/* ──────────────────────────────────────────────
   Show percentage text inside the fill bar
────────────────────────────────────────────── */

/* 1. Make the fill a flex container & positioning context */
.stats-container .bar-fill {
  position: relative;             /* for the ::before */
  display: flex;
  align-items: center;            /* vertical centering */
  justify-content: center;        /* horizontal centering */
  color: #000;                    /* text color */
  font-family: 'Press Start 2P', monospace;
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* 2. Inject the --fill value as content */
.stats-container .bar-fill::before {
  content: var(--fill);           /* e.g. “80%” */
  position: absolute;             /* sit on top of the fill */
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;           /* clicks go through */
}

#items-container {
  border: 1px solid orange;
}