/* ============================================================
   PIXEL-RETRO.CSS
   An 8-bit retro stylesheet for personal websites.
   Class-based. No IDs, no element selectors beyond resets.
   ============================================================ */

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

/* ---------- Design Tokens ---------- */
:root {
  /* Palette — NES-inspired with a cool dusk twist */
  --pixel-bg:         #1a1c2c;
  --pixel-bg-alt:     #29366f;
  --pixel-ink:        #f4f4f4;
  --pixel-ink-dim:    #a7a7c4;
  --pixel-accent:     #ffcd75;   /* coin yellow   */
  --pixel-hot:        #ef476f;   /* power-up pink */
  --pixel-cool:       #41a6f6;   /* water blue    */
  --pixel-grass:      #8bc34a;   /* 1-up green    */
  --pixel-shadow:     #0f0f1b;
  --pixel-highlight:  #ffffff;

  /* Type */
  --pixel-font-display: 'Press Start 2P', 'Courier New', monospace;
  --pixel-font-body:    'VT323', 'Courier New', monospace;

  /* Pixel unit — use multiples for a consistent grid */
  --px: 4px;
}

/* ---------- Reset & Base ---------- */
.pixel-body {
  margin: 0;
  padding: calc(var(--px) * 8);
  background-color: var(--pixel-bg);
  background-image:
    linear-gradient(var(--pixel-bg-alt) 1px, transparent 1px),
    linear-gradient(90deg, var(--pixel-bg-alt) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--pixel-ink);
  font-family: var(--pixel-font-body);
  font-size: 22px;
  line-height: 1.5;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  min-height: 100vh;
}

/* Optional CRT scanline overlay — add to body or wrapper */
.pixel-crt {
  position: relative;
}
.pixel-crt::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.15) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  z-index: 9999;
}

/* ---------- Layout Containers ---------- */
.pixel-wrapper {
  max-width: 960px;
  margin: 0 auto;
  padding: calc(var(--px) * 4);
}

.pixel-stack > * + * {
  margin-top: calc(var(--px) * 6);
}

.pixel-row {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--px) * 4);
}

.pixel-grid {
  display: grid;
  gap: calc(var(--px) * 4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* ---------- Typography ---------- */
.pixel-title {
  font-family: var(--pixel-font-display);
  font-size: 28px;
  line-height: 1.4;
  color: var(--pixel-accent);
  margin: 0 0 calc(var(--px) * 4);
  text-shadow:
    var(--px) 0 0 var(--pixel-shadow),
    0 var(--px) 0 var(--pixel-shadow),
    var(--px) var(--px) 0 var(--pixel-shadow);
}

.pixel-subtitle {
  font-family: var(--pixel-font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--pixel-cool);
  margin: 0 0 calc(var(--px) * 3);
  text-shadow: var(--px) var(--px) 0 var(--pixel-shadow);
}

.pixel-heading {
  font-family: var(--pixel-font-display);
  font-size: 12px;
  line-height: 1.6;
  color: var(--pixel-ink);
  letter-spacing: 1px;
  margin: 0 0 calc(var(--px) * 2);
  text-transform: uppercase;
}

.pixel-text {
  font-family: var(--pixel-font-body);
  font-size: 22px;
  color: var(--pixel-ink);
  margin: 0 0 calc(var(--px) * 3);
}

.pixel-text-dim {
  color: var(--pixel-ink-dim);
}

.pixel-text-accent { color: var(--pixel-accent); }
.pixel-text-hot    { color: var(--pixel-hot); }
.pixel-text-cool   { color: var(--pixel-cool); }
.pixel-text-grass  { color: var(--pixel-grass); }

.pixel-blink {
  animation: pixel-blink 1s steps(2, start) infinite;
}

.pixel-cursor::after {
  content: '▮';
  margin-left: calc(var(--px));
  color: var(--pixel-accent);
  animation: pixel-blink 1s steps(2, start) infinite;
}

@keyframes pixel-blink {
  50% { opacity: 0; }
}

/* ---------- Card ---------- */
/* Chunky pixel border built from box-shadow (no SVGs, no images). */
.pixel-card {
  position: relative;
  background-color: var(--pixel-bg-alt);
  color: var(--pixel-ink);
  padding: calc(var(--px) * 6);
  font-family: var(--pixel-font-body);
  font-size: 22px;

  /* Pixel border: 4px offsets build the stepped corners */
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--pixel-ink),
    0 var(--px) 0 0 var(--pixel-ink),
    calc(var(--px) * -1) 0 0 0 var(--pixel-ink),
    var(--px) 0 0 0 var(--pixel-ink),
    /* outer drop shadow for depth */
    var(--px) var(--px) 0 var(--px) var(--pixel-shadow),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--px) var(--pixel-shadow);
}

.pixel-card-title {
  font-family: var(--pixel-font-display);
  font-size: 14px;
  color: var(--pixel-accent);
  margin: 0 0 calc(var(--px) * 3);
  line-height: 1.6;
}

.pixel-card-accent {
  background-color: var(--pixel-hot);
}
.pixel-card-accent .pixel-card-title { color: var(--pixel-ink); }

.pixel-card-cool  { 
  background-color: var(--pixel-cool); 
  
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--pixel-ink),
    0 var(--px) 0 0 var(--pixel-ink),
    calc(var(--px) * -1) 0 0 0 var(--pixel-ink),
    var(--px) 0 0 0 var(--pixel-ink),
    /* outer drop shadow for depth */
    var(--px) var(--px) 0 var(--px) var(--pixel-shadow),
    calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--px) var(--pixel-shadow);
  }
.pixel-card-grass { background-color: var(--pixel-grass); color: var(--pixel-shadow); }
.pixel-card-grass .pixel-card-title { color: var(--pixel-shadow); }

/* ---------- Dialog Box (classic JRPG text window) ---------- */
.pixel-dialog {
  position: relative;
  background-color: var(--pixel-shadow);
  color: var(--pixel-ink);
  padding: calc(var(--px) * 6) calc(var(--px) * 6) calc(var(--px) * 8);
  font-family: var(--pixel-font-body);
  font-size: 24px;
  line-height: 1.5;
  border: var(--px) solid var(--pixel-ink);
  box-shadow:
    inset 0 0 0 var(--px) var(--pixel-shadow),
    inset 0 0 0 calc(var(--px) * 2) var(--pixel-cool),
    var(--px) var(--px) 0 var(--px) var(--pixel-ink);
}

.pixel-dialog::after {
  content: '▼';
  position: absolute;
  right: calc(var(--px) * 4);
  bottom: calc(var(--px) * 2);
  color: var(--pixel-accent);
  font-size: 18px;
  animation: pixel-bounce 0.8s steps(2) infinite;
}

@keyframes pixel-bounce {
  50% { transform: translateY(calc(var(--px) * -1)); }
}

.pixel-speaker {
  display: inline-block;
  font-family: var(--pixel-font-display);
  font-size: 12px;
  color: var(--pixel-accent);
  background-color: var(--pixel-bg);
  padding: calc(var(--px)) calc(var(--px) * 2);
  margin-bottom: calc(var(--px) * 3);
  border: var(--px) solid var(--pixel-ink);
}

/* ---------- Buttons ---------- */
.pixel-button {
  display: inline-block;
  font-family: var(--pixel-font-display);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pixel-shadow);
  background-color: var(--pixel-accent);
  padding: calc(var(--px) * 3) calc(var(--px) * 5);
  border: none;
  cursor: pointer;
  position: relative;
  transition: transform 80ms steps(2);

  /* Stepped pixel border + shadow */
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--pixel-highlight),
    0 var(--px) 0 0 var(--pixel-shadow),
    calc(var(--px) * -1) 0 0 0 var(--pixel-highlight),
    var(--px) 0 0 0 var(--pixel-shadow),
    var(--px) var(--px) 0 var(--px) var(--pixel-shadow);
}

.pixel-button:hover {
  background-color: var(--pixel-highlight);
  color: var(--pixel-shadow);
}

.pixel-button:active {
  transform: translate(var(--px), var(--px));
  box-shadow:
    0 calc(var(--px) * -1) 0 0 var(--pixel-shadow),
    0 var(--px) 0 0 var(--pixel-highlight),
    calc(var(--px) * -1) 0 0 0 var(--pixel-shadow),
    var(--px) 0 0 0 var(--pixel-highlight);
}

.pixel-button-hot    { background-color: var(--pixel-hot);   color: var(--pixel-ink); }
.pixel-button-cool   { background-color: var(--pixel-cool);  color: var(--pixel-ink); }
.pixel-button-grass  { background-color: var(--pixel-grass); color: var(--pixel-shadow); }
.pixel-button-ghost  { background-color: transparent; color: var(--pixel-ink); }

/* ---------- Navigation ---------- */
.pixel-nav {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--px) * 3);
  padding: calc(var(--px) * 3) calc(var(--px) * 4);
  background-color: var(--pixel-shadow);
  border: var(--px) solid var(--pixel-ink);
  box-shadow: var(--px) var(--px) 0 var(--px) var(--pixel-ink);
}

.pixel-nav-link {
  font-family: var(--pixel-font-display);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--pixel-ink);
  padding: calc(var(--px)) calc(var(--px) * 2);
  transition: color 80ms steps(2), background-color 80ms steps(2);
}

.pixel-nav-link:hover,
.pixel-nav-link-active {
  color: var(--pixel-shadow);
  background-color: var(--pixel-accent);
}

/* ---------- Avatar / Portrait ---------- */
.pixel-avatar {
  width: calc(var(--px) * 24);
  height: calc(var(--px) * 24);
  background-color: var(--pixel-bg-alt);
  border: var(--px) solid var(--pixel-ink);
  box-shadow:
    var(--px) var(--px) 0 var(--px) var(--pixel-shadow),
    inset 0 0 0 var(--px) var(--pixel-shadow);
  image-rendering: pixelated;
  object-fit: cover;
  display: block;
}

.pixel-avatar-sm {
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 12);
}

/* ---------- Tag / Badge ---------- */
.pixel-tag {
  display: inline-block;
  font-family: var(--pixel-font-display);
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: calc(var(--px)) calc(var(--px) * 2);
  background-color: var(--pixel-cool);
  color: var(--pixel-ink);
  border: var(--px) solid var(--pixel-shadow);
  margin: 0 calc(var(--px)) calc(var(--px)) 0;
}

.pixel-tag-hot    { background-color: var(--pixel-hot); }
.pixel-tag-grass  { background-color: var(--pixel-grass); color: var(--pixel-shadow); }
.pixel-tag-accent { background-color: var(--pixel-accent); color: var(--pixel-shadow); }

/* ---------- Progress / HP Bar ---------- */
.pixel-hp-bar {
  position: relative;
  height: calc(var(--px) * 4);
  background-color: var(--pixel-shadow);
  border: var(--px) solid var(--pixel-ink);
  padding: var(--px);
  margin: calc(var(--px) * 2) 0;
}

.pixel-hp-fill {
  height: 100%;
  background-color: var(--pixel-grass);
  background-image: repeating-linear-gradient(
    90deg,
    var(--pixel-grass) 0,
    var(--pixel-grass) 6px,
    rgba(0,0,0,0.2) 6px,
    rgba(0,0,0,0.2) 8px
  );
  transition: width 200ms steps(10);
}

.pixel-hp-fill-hot  { background-color: var(--pixel-hot); background-image: none; }
.pixel-hp-fill-cool { background-color: var(--pixel-cool); background-image: none; }

/* ---------- Divider ---------- */
.pixel-divider {
  height: var(--px);
  background-image: repeating-linear-gradient(
    90deg,
    var(--pixel-ink) 0,
    var(--pixel-ink) 8px,
    transparent 8px,
    transparent 16px
  );
  border: none;
  margin: calc(var(--px) * 6) 0;
}

/* ---------- List ---------- */
.pixel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--pixel-font-body);
  font-size: 22px;
}

.pixel-list-item {
  padding: calc(var(--px) * 2) 0 calc(var(--px) * 2) calc(var(--px) * 6);
  position: relative;
  border-bottom: var(--px) dashed var(--pixel-bg-alt);
}

.pixel-list-item::before {
  content: '►';
  position: absolute;
  left: 0;
  top: calc(var(--px) * 2);
  color: var(--pixel-accent);
  font-size: 18px;
}

/* ---------- Input / Form ---------- */
.pixel-input,
.pixel-textarea {
  display: block;
  width: 100%;
  font-family: var(--pixel-font-body);
  font-size: 22px;
  color: var(--pixel-ink);
  background-color: var(--pixel-shadow);
  border: var(--px) solid var(--pixel-ink);
  padding: calc(var(--px) * 2) calc(var(--px) * 3);
  box-sizing: border-box;
  outline: none;
  box-shadow: inset var(--px) var(--px) 0 0 var(--pixel-bg-alt);
}

.pixel-input:focus,
.pixel-textarea:focus {
  border-color: var(--pixel-accent);
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--pixel-bg-alt),
    0 0 0 var(--px) var(--pixel-accent);
}

.pixel-label {
  display: block;
  font-family: var(--pixel-font-display);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--pixel-ink-dim);
  margin-bottom: calc(var(--px) * 2);
  text-transform: uppercase;
}

/* ---------- Link ---------- */
.pixel-link {
  color: var(--pixel-accent);
  text-decoration: none;
  border-bottom: var(--px) dashed var(--pixel-accent);
  transition: color 80ms steps(2);
}

.pixel-link:hover {
  color: var(--pixel-hot);
  border-bottom-color: var(--pixel-hot);
}

/* ---------- Footer ---------- */
.pixel-footer {
  margin-top: calc(var(--px) * 12);
  padding: calc(var(--px) * 4);
  text-align: center;
  font-family: var(--pixel-font-display);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--pixel-ink-dim);
  border-top: var(--px) dashed var(--pixel-bg-alt);
}

/* ---------- Utility ---------- */
.pixel-center    { text-align: center; }
.pixel-right     { text-align: right; }
.pixel-shake:hover { animation: pixel-shake 0.3s steps(4) infinite; }

@keyframes pixel-shake {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-2px, 1px); }
  50%      { transform: translate(2px, -1px); }
  75%      { transform: translate(-1px, -1px); }
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .pixel-title    { font-size: 20px; }
  .pixel-subtitle { font-size: 12px; }
  .pixel-body     { font-size: 20px; padding: calc(var(--px) * 4); }
}