/* ChoreQuest - 8-Bit Pixel Styles & Typography */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&family=VT323&display=swap');

:root {
  --bg-deep: #11111b;
  --bg-card: #181825;
  --bg-card-hover: #1e1e2e;
  --bg-modal: #1e1e2e;
  
  --text-main: #f1f5f9;
  --text-dim: #94a3b8;
  --text-bright: #ffffff;
  
  --alex-color: #ef4444;
  --alex-dark: #991b1b;
  --alex-light: #fca5a5;
  --alex-bg: rgba(239, 68, 68, 0.16);
  
  --briana-color: #14b8a6;
  --briana-dark: #0f766e;
  --briana-light: #5eead4;
  --briana-bg: rgba(20, 184, 166, 0.16);
  
  --gold-xp: #facc15;
  --gold-dark: #ca8a04;
  --gold-bg: rgba(250, 204, 21, 0.15);
  
  --emerald: #34d399;
  --emerald-dark: #059669;
  --ruby: #f87171;
  --purple: #a78bfa;
  
  --pixel-border-color: #313244;
  --pixel-border-gold: #facc15;
  --pixel-border-alex: var(--alex-color);
  --pixel-border-briana: var(--briana-color);
}

/* Retro Fonts */
.font-pixel-title {
  font-family: 'Press Start 2P', monospace;
  letter-spacing: -0.5px;
}

.font-pixel {
  font-family: 'Press Start 2P', monospace;
  letter-spacing: 0px;
}

.font-retro-read {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.65rem;
  line-height: 1.6;
}

/* Authentic Pixel Box Shadows & Borders */
.pixel-box {
  background-color: var(--bg-card);
  border: 3px solid #000;
  box-shadow: 
    3px 3px 0px 0px rgba(0,0,0,0.8),
    inset 2px 2px 0px 0px rgba(255,255,255,0.12),
    inset -2px -2px 0px 0px rgba(0,0,0,0.4);
  image-rendering: pixelated;
  position: relative;
}

.pixel-box-gold {
  border-color: #000;
  box-shadow: 
    4px 4px 0px 0px #854d0e,
    inset 2px 2px 0px 0px #fef08a,
    inset -2px -2px 0px 0px #a16207;
}

.pixel-box-alex {
  border-color: #000;
  box-shadow: 
    4px 4px 0px 0px var(--alex-dark),
    inset 2px 2px 0px 0px var(--alex-light),
    inset -2px -2px 0px 0px var(--alex-dark);
}

.pixel-box-briana {
  border-color: #000;
  box-shadow: 
    4px 4px 0px 0px var(--briana-dark),
    inset 2px 2px 0px 0px var(--briana-light),
    inset -2px -2px 0px 0px var(--briana-dark);
}

/* Pixel Buttons */
.pixel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  border: 3px solid #000;
  background-color: #313244;
  color: #fff;
  padding: 8px 14px;
  box-shadow: 
    3px 3px 0px #000,
    inset 2px 2px 0px rgba(255,255,255,0.25),
    inset -2px -2px 0px rgba(0,0,0,0.4);
  text-transform: uppercase;
  transition: transform 0.05s ease, box-shadow 0.05s ease;
  user-select: none;
}

.pixel-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 
    1px 1px 0px #000,
    inset 2px 2px 0px rgba(0,0,0,0.4),
    inset -2px -2px 0px rgba(255,255,255,0.1);
}

.pixel-btn-gold {
  background-color: #eab308;
  color: #000;
  box-shadow: 
    3px 3px 0px #713f12,
    inset 2px 2px 0px #fef08a,
    inset -2px -2px 0px #a16207;
}

.pixel-btn-alex {
  background-color: var(--alex-color);
  color: #fff;
  box-shadow: 
    3px 3px 0px var(--alex-dark),
    inset 2px 2px 0px var(--alex-light),
    inset -2px -2px 0px var(--alex-dark);
}

.pixel-btn-briana {
  background-color: var(--briana-color);
  color: #fff;
  box-shadow: 
    3px 3px 0px var(--briana-dark),
    inset 2px 2px 0px var(--briana-light),
    inset -2px -2px 0px var(--briana-dark);
}

.pixel-btn-green {
  background-color: #059669;
  color: #fff;
  box-shadow: 
    3px 3px 0px #022c22,
    inset 2px 2px 0px #6ee7b7,
    inset -2px -2px 0px #047857;
}

.pixel-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem;
  padding: 3px 7px;
  border: 2px solid #000;
  background-color: #1e1e2e;
  color: #f1f5f9;
  box-shadow: 2px 2px 0px #000;
}


/* Pixel Progress Bar */
.pixel-bar-track {
  height: 20px;
  background-color: #11111b;
  border: 2px solid #000;
  box-shadow: inset 2px 2px 0px #000, 2px 2px 0px rgba(255,255,255,0.1);
  position: relative;
  overflow: hidden;
}

.pixel-bar-fill {
  height: 100%;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.pixel-bar-fill::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 40%;
  background: rgba(255, 255, 255, 0.35);
}