/* ========================================================================
   Davo Portfolio — Pixel CRT design system
   ======================================================================== */

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

:root {
  /* Palette — lifted from Mines of White Label reference */
  --ink:           #1A1410;
  --ink-soft:      #3a2e26;
  --parchment:     #F4E4BC;
  --parchment-2:   #E8D098;
  --parchment-3:   #d4b87a;
  --grass:         #4A8B3A;
  --grass-deep:    #2D5A27;
  --grass-dark:    #1f3d1c;
  --river:         #4A90C2;
  --river-deep:    #2D6A8E;
  --path:          #A0673D;
  --path-deep:     #7a4a26;
  --wood:          #6B4423;
  --wood-deep:     #4a2e15;
  --heart:         #D63031;
  --heart-deep:    #8b1d1e;
  --gold:          #F4C430;
  --gold-deep:     #b08c1c;
  --pink:          #e88a9b;
  --shadow:        rgba(26, 20, 16, 0.45);

  --pixel: 4px;            /* base pixel size for scaled art */

  /* Typography */
  --font-pixel: 'Press Start 2P', 'Courier New', monospace;
  --font-crt:   'VT323', 'Courier New', monospace;
}

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

html, body {
  background: var(--grass-deep);
  color: var(--ink);
  font-family: var(--font-crt);
  font-size: 22px;
  line-height: 1.35;
  image-rendering: crisp-edges;
  -webkit-font-smoothing: none;
  font-smooth: never;
  overflow-x: hidden;
}

img, svg { image-rendering: crisp-edges; }

/* =============== Tile background — grass with path texture =============== */
.tile-bg {
  background-color: var(--grass);
  background-image:
    /* darker grass clumps */
    radial-gradient(circle at 20% 30%, var(--grass-deep) 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, var(--grass-deep) 2px, transparent 3px),
    radial-gradient(circle at 45% 80%, var(--grass-deep) 2px, transparent 3px),
    radial-gradient(circle at 85% 15%, var(--grass-deep) 2px, transparent 3px),
    radial-gradient(circle at 10% 70%, var(--grass-deep) 2px, transparent 3px),
    /* tiny lighter sparkles */
    radial-gradient(circle at 30% 50%, #5fa849 1px, transparent 2px),
    radial-gradient(circle at 60% 25%, #5fa849 1px, transparent 2px),
    radial-gradient(circle at 90% 85%, #5fa849 1px, transparent 2px);
  background-size: 64px 64px;
}

.dirt-bg {
  background-color: var(--path);
  background-image:
    radial-gradient(circle at 25% 30%, var(--path-deep) 2px, transparent 3px),
    radial-gradient(circle at 65% 70%, var(--path-deep) 2px, transparent 3px),
    radial-gradient(circle at 40% 85%, var(--path-deep) 2px, transparent 3px),
    radial-gradient(circle at 80% 25%, #8a542d 1px, transparent 2px);
  background-size: 48px 48px;
}

.stone-bg {
  background-color: #2a2a2e;
  background-image:
    radial-gradient(circle at 25% 30%, #1a1a1e 2px, transparent 3px),
    radial-gradient(circle at 65% 70%, #1a1a1e 2px, transparent 3px),
    radial-gradient(circle at 40% 85%, #3a3a40 2px, transparent 3px),
    radial-gradient(circle at 80% 25%, #3a3a40 1px, transparent 2px);
  background-size: 48px 48px;
}

.water-bg {
  background-color: var(--river);
  background-image:
    linear-gradient(180deg, var(--river-deep) 25%, transparent 25%, transparent 50%, var(--river-deep) 50%, var(--river-deep) 75%, transparent 75%);
  background-size: 16px 16px;
}

/* =============== Pixel Panel — the cream UI box =============== */
.pixel-panel {
  position: relative;
  background: var(--parchment);
  color: var(--ink);
  padding: 28px 32px;
  /* layered box-shadow gives the chunky pixel border */
  box-shadow:
    0 0 0 4px var(--ink),
    0 0 0 8px var(--parchment),
    0 0 0 12px var(--ink),
    8px 8px 0 12px var(--shadow);
  font-family: var(--font-crt);
}

.pixel-panel--tight {
  padding: 16px 20px;
}

.pixel-panel--simple {
  background: var(--parchment);
  color: var(--ink);
  padding: 20px 24px;
  box-shadow:
    0 0 0 4px var(--ink),
    8px 8px 0 4px var(--shadow);
}

.pixel-panel--dark {
  background: var(--ink);
  color: var(--parchment);
  padding: 24px 28px;
  box-shadow:
    0 0 0 4px var(--parchment),
    0 0 0 8px var(--ink),
    8px 8px 0 8px var(--shadow);
}

/* Inset "screen" inside dark panel — like a CRT window */
.pixel-screen {
  background: #0d1410;
  color: #7dff8a;
  padding: 20px 22px;
  box-shadow: inset 0 0 0 3px #1f3d2a, inset 0 0 24px rgba(0,0,0,0.6);
  font-family: var(--font-crt);
  font-size: 22px;
  line-height: 1.3;
  position: relative;
  overflow: hidden;
}
.pixel-screen::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.18) 0px, rgba(0,0,0,0.18) 1px,
    transparent 1px, transparent 3px
  );
  pointer-events: none;
}

/* =============== Pixel Button =============== */
.pixel-btn {
  display: inline-block;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-pixel);
  font-size: 12px;
  letter-spacing: 0.02em;
  padding: 14px 20px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-shadow:
    0 0 0 4px var(--ink),
    4px 4px 0 4px var(--shadow);
  transition: transform 0.06s steps(2), box-shadow 0.06s steps(2);
  user-select: none;
  text-transform: uppercase;
}
.pixel-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow:
    0 0 0 4px var(--ink),
    6px 6px 0 4px var(--shadow);
}
.pixel-btn:active {
  transform: translate(2px, 2px);
  box-shadow:
    0 0 0 4px var(--ink),
    1px 1px 0 4px var(--shadow);
}
.pixel-btn--primary { background: var(--gold); }
.pixel-btn--danger  { background: var(--heart); color: var(--parchment); }
.pixel-btn--ghost   { background: var(--ink); color: var(--parchment); box-shadow: 0 0 0 4px var(--parchment), 4px 4px 0 4px var(--shadow); }

/* =============== Section Title — chapter card =============== */
.chapter-tag {
  display: inline-block;
  background: var(--ink);
  color: var(--gold);
  font-family: var(--font-pixel);
  font-size: 10px;
  padding: 8px 12px;
  letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.chapter-title {
  font-family: var(--font-pixel);
  font-size: 28px;
  line-height: 1.4;
  color: var(--parchment);
  text-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 8px;
}
.chapter-sub {
  font-family: var(--font-crt);
  font-size: 26px;
  color: var(--parchment-2);
  max-width: 640px;
}

/* =============== Pixel font helpers =============== */
.px-font  { font-family: var(--font-pixel); }
.crt-font { font-family: var(--font-crt); }

.px-tiny    { font-family: var(--font-pixel); font-size: 8px;  letter-spacing: 0.1em; }
.px-xs      { font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.05em; }
.px-sm      { font-family: var(--font-pixel); font-size: 12px; letter-spacing: 0.02em; }
.px-md      { font-family: var(--font-pixel); font-size: 16px; line-height: 1.5; }
.px-lg      { font-family: var(--font-pixel); font-size: 22px; line-height: 1.4; }
.px-xl      { font-family: var(--font-pixel); font-size: 32px; line-height: 1.3; }

/* =============== Status badges =============== */
.badge {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: 10px;
  padding: 6px 8px;
  letter-spacing: 0.05em;
  box-shadow: 0 0 0 3px var(--ink);
  text-transform: uppercase;
}
.badge--shipped     { background: var(--grass); color: var(--parchment); }
.badge--maintained  { background: var(--gold); color: var(--ink); }
.badge--featured    { background: var(--heart); color: var(--parchment); }
.badge--archived    { background: var(--parchment-3); color: var(--ink); }
.badge--dev         { background: var(--river); color: var(--parchment); }

/* =============== Heart row =============== */
.heart-row { display: flex; gap: 4px; }
.heart {
  width: 24px; height: 22px;
  position: relative;
  background: var(--heart);
  /* CSS pixel heart via clip-path (simple, blocky) */
  clip-path: polygon(
    0% 25%, 25% 25%, 25% 0%, 75% 0%, 75% 25%, 100% 25%,
    100% 50%, 75% 75%, 50% 100%, 25% 75%, 0% 50%
  );
}
.heart--empty { background: var(--ink-soft); opacity: 0.4; }
.heart--half {
  background: linear-gradient(90deg, var(--heart) 50%, var(--ink-soft) 50%);
}

/* =============== Coin =============== */
.coin {
  display: inline-block;
  width: 18px; height: 18px;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: inset -3px -3px 0 var(--gold-deep), 0 0 0 2px var(--ink);
  vertical-align: middle;
}

/* =============== Sparkle / blink dot =============== */
.dot-blink {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--grass);
  box-shadow: 0 0 0 2px var(--ink);
  animation: blink 1.2s steps(2, end) infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

/* =============== Scanline overlay (optional toggle later) =============== */
.scanlines {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9999;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.08) 0px, rgba(0,0,0,0.08) 1px,
    transparent 1px, transparent 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* =============== Layout helpers =============== */
.wrap   { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.row    { display: flex; gap: 16px; }
.stack  { display: flex; flex-direction: column; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.cck-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.cck-image {
  transition: transform 0.3s ease;
}

.cck-image:hover {
  transform: scale(1.05);
}

@media (max-width: 1100px) {
  .cck-gallery { grid-template-columns: repeat(2, 1fr); }
  .cck-gallery > figure { grid-column: span 1 !important; }
}
@media (max-width: 600px) {
  .cck-gallery { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  body { font-size: 20px; }
  .chapter-title { font-size: 22px; }
}

/* Section spacing */
section { padding: 80px 0; position: relative; }
section + section { border-top: 4px solid var(--ink); }

/* =============== Anchor link target offset =============== */
:target { scroll-margin-top: 80px; }

/* =============== Minimap-style nav =============== */
.minimap-nav {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
  background: var(--parchment);
  padding: 12px 14px;
  box-shadow:
    0 0 0 3px var(--ink),
    4px 4px 0 3px var(--shadow);
  font-family: var(--font-pixel);
  font-size: 9px;
  letter-spacing: 0.05em;
}
.minimap-nav ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.minimap-nav a { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 8px; }
.minimap-nav a:hover { color: var(--heart); }
.minimap-nav .pin {
  width: 8px; height: 8px;
  background: var(--ink);
  display: inline-block;
}
.minimap-nav a:hover .pin { background: var(--heart); }
@media (max-width: 900px) { .minimap-nav { display: none; } }

/* =============== Small helpers =============== */
.divider {
  height: 4px;
  background: var(--ink);
  margin: 12px 0;
  width: 100%;
}
.divider--dashed {
  background-image: linear-gradient(90deg, var(--ink) 50%, transparent 50%);
  background-size: 12px 4px;
  background-color: transparent;
  height: 4px;
}

.ascii-art {
  font-family: var(--font-crt);
  font-size: 16px;
  line-height: 1;
  white-space: pre;
  color: var(--ink);
}