/* ZHSFAL retro-HUD panel template.
 * Reusable across tip-chip, shop-card, landing page.
 * Palette: NES-adjacent, 6 colors, no gradients.
 * Fonts: Press Start 2P (titles/labels) + VT323 (body/status).
 */

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

:root {
  --bg-void:      #0A0A0F;
  --bg-panel:     #1A1033;
  --bg-panel-lit: #2A1B4F;
  --border-hi:    #F8F8F8;
  --border-lo:    #7070A0;
  --accent-sell:  #E60000;
  --accent-tip:   #00E640;
  --accent-amber: #FFC82E;
  --text:         #F8F8F8;
  --text-dim:     #9090A0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background: transparent;
  color: var(--text);
  font-family: 'VT323', monospace;
  font-size: 22px;
  line-height: 1.2;
  -webkit-font-smoothing: none;
  font-smooth: never;
  image-rendering: pixelated;
}

img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ------- base panel (reusable) ------- */

.retro-panel {
  background: var(--bg-panel);
  border: 4px solid var(--border-hi);
  box-shadow:
    inset -4px -4px 0 var(--border-lo),
    inset  4px  4px 0 var(--bg-panel-lit),
    6px 6px 0 rgba(0,0,0,0.6);
  padding: 16px;
  position: relative;
}

.retro-panel--tip   { border-color: var(--accent-tip); }
.retro-panel--sell  { border-color: var(--accent-sell); }
.retro-panel--amber { border-color: var(--accent-amber); }

/* Chunky label tab — NES menu header vibe */
.retro-label {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 10px;
  background: var(--border-hi);
  color: var(--bg-void);
  position: absolute;
  top: -14px;
  left: 16px;
}
.retro-label--sell  { background: var(--accent-sell); color: var(--text); }
.retro-label--tip   { background: var(--accent-tip);  color: var(--bg-void); }
.retro-label--amber { background: var(--accent-amber); color: var(--bg-void); }

/* Titles / headings */
.retro-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 1.4;
  color: var(--text);
  margin: 6px 0 12px;
}

.retro-title--sm {
  font-size: 11px;
  letter-spacing: 2px;
}

/* Arrow CTA */
.retro-cta {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--accent-amber);
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
}
.retro-cta::before { content: "\25B6  "; color: var(--text); }
.retro-cta:hover { color: var(--text); }

/* Big price tag */
.retro-price {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  color: var(--accent-amber);
  letter-spacing: 2px;
}

/* CRT scanlines overlay — subtle */
.scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.18) 3px
  );
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Blinking cursor */
.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Photo frame (CRT test-card placeholder when no image yet) */
.photo-frame {
  background:
    repeating-linear-gradient(
      to right,
      #fff 0 14%, #ff0 14% 28%, #0ff 28% 42%,
      #0f0 42% 56%, #f0f 56% 70%, #f00 70% 84%, #00f 84% 100%
    );
  border: 3px solid var(--border-hi);
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-void);
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* QR wrapper */
.qr {
  background: var(--bg-panel);
  padding: 4px;
  border: 2px solid var(--border-hi);
  display: inline-block;
  line-height: 0;
}
.qr img { width: 100%; height: auto; display: block; }

/* Status ticker strip */
.status-bar {
  background: var(--bg-void);
  border-top: 3px solid var(--border-hi);
  font-family: 'VT323', monospace;
  font-size: 22px;
  color: var(--accent-tip);
  padding: 8px 14px;
  letter-spacing: 1px;
}
.status-bar .tag {
  color: var(--accent-amber);
  margin-right: 10px;
}
.status-bar .dim { color: var(--text-dim); }

/* Utilities */
.row  { display: flex; gap: 16px; align-items: center; }
.col  { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; }
.dim  { color: var(--text-dim); }
.mono { font-family: 'VT323', monospace; font-size: 24px; }