/* Layered on top of Pico. Keep this small — if it grows past ~150 lines,
   you've outgrown a classless base and should reconsider. */

:root {
  --vjm-accent: #6366f1;
  --vjm-accent-2: #06b6d4;
  --vjm-grad: linear-gradient(100deg, var(--vjm-accent), var(--vjm-accent-2));
}

/* Pico v2 declares its palette at :root:not([data-theme]) specificity.
   A plain :root override loses, so match it here and for each theme. */
:root:not([data-theme]),
[data-theme="light"] {
  --pico-primary: #4f46e5;
  --pico-primary-background: #4f46e5;
  --pico-primary-border: #4f46e5;
  --pico-primary-hover: #4338ca;
  --pico-primary-hover-background: #4338ca;
  --pico-primary-hover-border: #4338ca;
  --pico-primary-underline: rgba(79, 70, 229, .5);
  --pico-primary-focus: rgba(99, 102, 241, .3);
  --pico-primary-inverse: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --vjm-accent: #818cf8;
    --vjm-accent-2: #22d3ee;
    --pico-primary: #a5b4fc;
    --pico-primary-background: #4f46e5;
    --pico-primary-border: #4f46e5;
    --pico-primary-hover: #c7d2fe;
    --pico-primary-hover-background: #6366f1;
    --pico-primary-hover-border: #6366f1;
    --pico-primary-underline: rgba(165, 180, 252, .5);
    --pico-primary-focus: rgba(129, 140, 248, .3);
    --pico-primary-inverse: #fff;
  }
}

[data-theme="dark"] {
  --vjm-accent: #818cf8;
  --vjm-accent-2: #22d3ee;
  --pico-primary: #a5b4fc;
  --pico-primary-background: #4f46e5;
  --pico-primary-border: #4f46e5;
  --pico-primary-hover: #c7d2fe;
  --pico-primary-hover-background: #6366f1;
  --pico-primary-hover-border: #6366f1;
  --pico-primary-underline: rgba(165, 180, 252, .5);
  --pico-primary-focus: rgba(129, 140, 248, .3);
  --pico-primary-inverse: #fff;
}

section { margin-block: 3.5rem; }

.brand { text-decoration: none; }
.ext::after { content: " ↗"; font-size: .8em; opacity: .7; }
.muted { color: var(--pico-muted-color); }

/* Hero ------------------------------------------------------------------ */
.hero { margin-block: 3rem 2rem; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.15; margin-bottom: .75rem; }
.hero p { max-width: 60ch; font-size: 1.05rem; }

.grad {
  background: var(--vjm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.cta [role="button"] { margin: 0; width: auto; }

/* Stats ----------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}
.stats div { display: flex; flex-direction: column; gap: .15rem; }
.stats b {
  font-size: 1.6rem;
  background: var(--vjm-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stats span { font-size: .85rem; color: var(--pico-muted-color); }

/* Cards ----------------------------------------------------------------- */
.cards article {
  margin: 0;
  border-top: 3px solid transparent;
  border-image: var(--vjm-grad) 1;
  transition: transform .15s ease;
}
.cards article:hover { transform: translateY(-3px); }
.cards h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.cards p { font-size: .92rem; margin: 0; color: var(--pico-muted-color); }

/* Posts ----------------------------------------------------------------- */
.post {
  padding-inline: 0; background: none; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.post h3 { margin-bottom: .3rem; font-size: 1.15rem; }
.post h3 a { text-decoration: none; }
.post h3 a:hover { text-decoration: underline; }
.post footer { padding: 0; background: none; border: 0; }

/* Game ------------------------------------------------------------------ */
.game-shell {
  position: relative;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  overflow: hidden;
  background: var(--pico-card-background-color);
}
#runner { display: block; width: 100%; height: 190px; touch-action: manipulation; }
#runner-hud {
  position: absolute; top: .6rem; right: .8rem;
  font-variant-numeric: tabular-nums; font-size: .85rem;
  color: var(--pico-muted-color);
}
#runner-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--pico-card-background-color) 82%, transparent);
  text-align: center;
}
#runner-overlay[hidden] { display: none; }
#runner-overlay button { margin: 0; width: auto; }

@media (prefers-reduced-motion: reduce) {
  .cards article { transition: none; }
}