:root {
  --bg: #f4f2ee;
  --panel: #ffffff;
  --ink: #17161c;
  --muted: #5d5a66;
  --line: #dedad3;
  --chip: #ebe8e2;
  --brand: #5b4bff;
  --ok: #138a4a;
  --off: #b3322a;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(0 0 0 / 0.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #0d0c12;
    --panel: #17161f;
    --ink: #eeecf5;
    --muted: #a19eb0;
    --line: #2a2836;
    --chip: #222030;
    --brand: #8f84ff;
    --ok: #3ccf7e;
    --off: #ff6b5f;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4), 0 12px 32px rgb(0 0 0 / 0.35);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #0d0c12;
  --panel: #17161f;
  --ink: #eeecf5;
  --muted: #a19eb0;
  --line: #2a2836;
  --chip: #222030;
  --brand: #8f84ff;
  --ok: #3ccf7e;
  --off: #ff6b5f;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 'Space Grotesk', system-ui, sans-serif;
}
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Header */
.top {
  padding: 48px 0 32px;
  background:
    radial-gradient(600px 220px at 85% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    linear-gradient(transparent 0 calc(100% - 1px), var(--line) 0);
  background-color: var(--bg);
}
.brand { display: flex; align-items: center; gap: 10px; font: 600 15px 'JetBrains Mono', monospace; color: var(--muted); }
.brand b { color: var(--ink); }
h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin: 28px 0 10px; }
.lead { color: var(--muted); font-size: 18px; margin: 0; max-width: 46ch; }

/* Controls */
.controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; }
.search { flex: 1 1 260px; }
.search input {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.search input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tags { margin-top: 12px; }
.chip {
  border: 1px solid transparent;
  background: var(--chip);
  color: var(--ink);
  padding: 7px 12px;
  border-radius: 999px;
  font: 500 14px/1.4 'Space Grotesk', system-ui, sans-serif;
  cursor: pointer;
}
.tags .chip { font-size: 13px; padding: 4px 10px; color: var(--muted); }
.chip:hover { border-color: var(--line); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--bg); }
.chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.count { color: var(--muted); font-size: 14px; margin: 20px 0 12px; }

/* Grid and cards */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); }
.card:has(.hit:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.hit { position: absolute; inset: 0; z-index: 1; }
.cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cover.gen {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 28px),
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--accent) 85%, white), var(--accent) 45%, color-mix(in srgb, var(--accent) 35%, black));
}
.cover.gen span { font-size: 64px; color: rgb(255 255 255 / 0.92); text-shadow: 0 4px 24px rgb(0 0 0 / 0.35); }
.body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.meta { display: flex; flex-wrap: wrap; gap: 6px; }
.card h2 { font-size: 21px; margin: 6px 0 0; letter-spacing: -0.01em; }
.tagline { margin: 0; color: var(--accent); font-weight: 500; filter: saturate(1.1); }
.desc { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.tagrow { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 8px 0 0; }
.tagrow li { font: 12px 'JetBrains Mono', monospace; color: var(--muted); }
.tagrow li::before { content: '#'; opacity: 0.6; }
.card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 14px; font-size: 14px; color: var(--muted); }
.play { font-weight: 700; color: var(--ink); }
.card:hover .play { color: var(--accent); }

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 9px;
  border-radius: 999px;
  font: 600 12px 'JetBrains Mono', monospace;
  background: var(--chip);
  color: var(--muted);
}
.st-jugable { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.st-prototipo { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
.st-desarrollo { background: color-mix(in srgb, #d08a00 18%, transparent); color: #b77900; }
.pill.tunnel::before, .pill.online::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.6; }
.pill.online { color: var(--ok); }
.pill.up { color: var(--ok); }
.pill.up::before { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.pill.down { color: var(--off); }
.pill.down::before { opacity: 1; }

.pill.access::before { content: '🔒'; font-size: 10px; }

.empty { color: var(--muted); text-align: center; padding: 48px 0; }
.site-foot { color: var(--muted); font-size: 14px; padding: 48px 0 32px; }
.site-foot p { margin: 6px 0; }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}