:root {
  --bg: #0e0f13;
  --card: #16181f;
  --text: #e8e8ec;
  --muted: #9a9cab;
  --mono: ui-monospace, "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 10% -10%, #1c2030 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #241a2a 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.top { max-width: 1200px; margin: 0 auto; padding: 56px 24px 24px; }
.top h1 { margin: 0; font: 700 clamp(2rem, 5vw, 3.2rem)/1.1 var(--mono); letter-spacing: -.02em; }
.top .dim { color: var(--muted); font-weight: 400; }
.top p { margin: 8px 0 0; color: var(--muted); }

.grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 24px 48px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 0 24px 40px; }

/* ---------- card ---------- */

.card {
  --accent: #888;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid #ffffff12;
  border-radius: 14px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover, .card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 12px 40px -12px var(--accent);
  outline: none;
}

.art {
  position: relative;
  height: 140px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border-bottom: 2px solid var(--accent);
}
.art svg { width: 100%; height: 100%; display: block; }

.body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.body h2 { margin: 0; font-size: 1.2rem; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.body h2 small { font: 500 .75rem var(--mono); color: var(--accent); }
.body p { margin: 0; color: var(--muted); font-size: .92rem; flex: 1; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tags span {
  font: .72rem var(--mono);
  padding: 2px 8px;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  color: color-mix(in srgb, var(--accent) 80%, white);
}

/* ---------- ascii ---------- */

.ascii { --accent: #ffb347; }
.ascii .art { background: radial-gradient(circle at 52% 58%, #4a3214 0%, #120d07 55%, #050403 100%); }
.ascii pre { margin: 0; font: 13px/1.25 var(--mono); color: #6d5a42; }
.ascii pre b { color: #ff5d8f; font-weight: 400; }
.ascii pre i { color: #7bd88f; font-style: normal; }
.ascii pre em { color: #ffd84a; font-style: normal; }
.ascii pre s { color: #8ad7ff; text-decoration: none; text-shadow: 0 0 8px #8ad7ff; }
.ascii pre u { color: #fff; text-decoration: none; text-shadow: 0 0 10px #ffb347, 0 0 20px #ffb347; animation: flicker 2.4s infinite; }

/* ---------- gambit ---------- */

.gambit { --accent: #b78cff; }
.gambit .art { background: linear-gradient(160deg, #2b1d46, #140e22); }
.board {
  display: grid;
  grid-template-columns: repeat(6, 22px);
  grid-auto-rows: 22px;
  border: 2px solid #e2c27a;
  transform: perspective(300px) rotateX(28deg);
}
.board span { display: grid; place-items: center; font-size: 14px; background: #3a2a5c; }
.board span:nth-child(12n+1), .board span:nth-child(12n+3), .board span:nth-child(12n+5),
.board span:nth-child(12n+8), .board span:nth-child(12n+10), .board span:nth-child(12n+12) { background: #d9c8ff; }

/* ---------- meadow ---------- */

.meadow { --accent: #7ed67a; }
.meadow .art { background: linear-gradient(#8fd3ff, #d5f1ff 70%); }
.meadow .spark { animation: twinkle 1.6s ease-in-out infinite; }

/* ---------- mud ---------- */

.mud { --accent: #6fe0d0; }
.mud .art { background: radial-gradient(circle at 30% 20%, #18303a, #071014 70%); }
.term { font: 13px/1.6 var(--mono); color: #b9c6c9; padding: 0 18px; width: 100%; }
.term p { margin: 0; }
.term .cmd { color: var(--accent); margin-top: 6px; }
.term .caret { animation: blink 1s steps(1) infinite; }
.term .fire { color: #ff9a3c; text-shadow: 0 0 6px #ff5a1f; animation: flicker 1.8s infinite; }
.term .ghost { color: #c9b8ff; animation: ghost 3s ease-in-out infinite; }
.term .frost { color: #9be7ff; text-shadow: 0 0 6px #4cc4ff; }

/* ---------- numbers ---------- */

.numbers { --accent: #e8e8ec; }
.numbers .art { background: #f4f1ea; }
.count { display: flex; align-items: center; gap: 14px; font: 300 2.4rem var(--mono); color: #222; font-variant-numeric: tabular-nums; }
.count button {
  font: 400 1.4rem var(--mono);
  width: 44px; height: 44px;
  border: 1.5px solid #222; border-radius: 8px;
  background: transparent; color: #222;
  pointer-events: none;
}

/* ---------- rift ---------- */

.rift { --accent: #d23cff; }
.rift .art { background: #0b1418; }
.rift .pulse { animation: pulse 3s ease-in-out infinite; transform-origin: 220px 70px; }

/* ---------- rift-poc ---------- */

.riftpoc { --accent: #4fd1ff; }
.riftpoc .art { background: #0a121c; padding: 12px; }
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; height: 100%; }
.quad > div {
  border: 1px solid #4fd1ff44;
  border-radius: 8px;
  background: #102033;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 11px/1.3 var(--mono); color: #9fdcff;
}
.quad b { font-weight: 400; letter-spacing: .2em; }
.quad i { font-style: normal; font-size: 16px; }
.quad em { font-style: normal; opacity: .8; }

/* ---------- surv ---------- */

.surv { --accent: #ff7a2a; }
.surv .art { background: radial-gradient(circle at 50% 85%, #2a1206 0%, #050302 65%); }
.campfire { position: absolute; left: 50%; bottom: 18px; width: 0; }
.campfire .glow {
  position: absolute; left: -90px; bottom: -40px; width: 180px; height: 120px;
  background: radial-gradient(ellipse at 50% 70%, #ff7a2a66, transparent 65%);
  animation: flicker 2.2s infinite;
}
.campfire .flame {
  position: absolute; left: -12px; bottom: 6px; width: 24px; height: 34px;
  background: radial-gradient(ellipse at 50% 80%, #fff3b0, #ffb347 35%, #ff5a1f 65%, transparent 72%);
  border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
  animation: sway 1.4s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.campfire .log { position: absolute; left: -24px; bottom: 0; width: 48px; height: 8px; background: #3b2414; border-radius: 4px; transform: rotate(-8deg); }
.embers { position: absolute; inset: 0; }
.embers i {
  position: absolute; bottom: 40px; left: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: #ffb347; box-shadow: 0 0 6px #ff7a2a;
  animation: rise 3s linear infinite;
  opacity: 0;
}
.embers i:nth-child(1) { --dx: -30px; animation-delay: 0s; }
.embers i:nth-child(2) { --dx: 20px; animation-delay: .5s; }
.embers i:nth-child(3) { --dx: -10px; animation-delay: 1s; }
.embers i:nth-child(4) { --dx: 36px; animation-delay: 1.6s; }
.embers i:nth-child(5) { --dx: -44px; animation-delay: 2.1s; }
.embers i:nth-child(6) { --dx: 8px; animation-delay: 2.6s; }

/* ---------- motion ---------- */

@keyframes flicker { 0%, 100% { opacity: 1; } 40% { opacity: .8; } 60% { opacity: .95; } 75% { opacity: .75; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes ghost { 0%, 100% { opacity: .45; filter: blur(.4px); } 50% { opacity: 1; filter: none; } }
@keyframes twinkle { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes pulse { 0%, 100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes sway { 0%, 100% { transform: scaleY(1) skewX(0); } 33% { transform: scaleY(1.12) skewX(4deg); } 66% { transform: scaleY(.94) skewX(-4deg); } }
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  100% { transform: translate(var(--dx), -100px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}