:root {
  --night: #1d1b3a;
  --night-2: #2a2752;
  --card: #2b2856;
  --card-hi: #4a4590;
  --card-lo: #15132c;
  --frame: #0c0b1d;
  --slot: #3a3670;
  --gold: #ffcf4a;
  --gold-hi: #fff0a8;
  --gold-lo: #b8820f;
  --text: #f2f0ff;
  --muted: #b4afe0;
  --legendary: #ffcf4a;
  --epic: #d58bff;
  --rare: #6cc8ff;
  --uncommon: #79e48a;
  --pixel: "Silkscreen", ui-monospace, monospace;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font: 17px/1.5 var(--body);
  /* Pixel stars on a night sky. */
  background:
    radial-gradient(circle at 20% 30%, #fff 0 1.5px, transparent 2px) 0 0 / 140px 120px,
    radial-gradient(circle at 70% 60%, #cfd0ff 0 1px, transparent 1.5px) 0 0 / 90px 110px,
    linear-gradient(var(--night), var(--night-2)) fixed;
}
a { color: inherit; }

.wrap { max-width: 920px; margin: 0 auto; padding: 56px 20px 48px; }

/* ---------- Hero ---------- */
.hero { display: grid; justify-items: center; gap: 22px; margin-bottom: 44px; text-align: center; }
.name { margin: 0; display: grid; font: 700 64px/1 var(--pixel); color: var(--gold); }
.name.blocks .name-text { display: none; }
.name i {
  width: var(--b); height: var(--b);
  background: var(--gold);
  box-shadow: inset 3px 3px 0 var(--gold-hi), inset -3px -3px 0 var(--gold-lo);
  animation: drop 0.5s cubic-bezier(.3, 1.6, .6, 1) both;
  animation-delay: calc(var(--d) * 18ms);
}
.name.still i { animation: none; }
@keyframes drop { from { transform: translateY(-40px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .name i { animation: none; } }
.intro { margin: 0; max-width: 36ch; color: var(--muted); font-size: 19px; }

/* ---------- Project cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.card {
  display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start;
  height: 100%; padding: 20px; text-decoration: none; color: var(--text);
  background: var(--card);
  /* Beveled block: light top-left, dark bottom-right, dark outer frame. */
  box-shadow: 0 0 0 4px var(--frame), inset 4px 4px 0 var(--card-hi), inset -4px -4px 0 var(--card-lo);
  transition: transform 0.12s ease;
}
.card:hover { transform: translateY(-3px); }
.card:focus-visible { outline: 4px solid var(--r); outline-offset: 6px; }
.slot {
  position: relative; width: 72px; height: 72px; display: grid; place-items: center;
  background: var(--slot);
  box-shadow: inset 4px 4px 0 var(--card-lo), inset -4px -4px 0 var(--card-hi);
}
.slot .px-icon { width: 46px; height: 46px; }
.slot .key { position: absolute; top: 4px; left: 7px; font: 10px var(--pixel); color: var(--muted); }
.card h2 { margin: 0; font: 700 21px/1.15 var(--pixel); color: var(--r); }
.rarity { margin: 2px 0 10px; font: 12px var(--pixel); color: var(--r); opacity: 0.85; }
.card p { margin: 0; color: var(--muted); }
.stats { margin: 12px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.stats b { color: var(--text); }

/* The legendary card shimmers twice on load, like an enchanted item. */
.legendary h2 {
  background: linear-gradient(100deg, var(--r) 40%, #fff 50%, var(--r) 60%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 2.4s ease 0.8s 2 both;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .legendary h2 { animation: none; } .card { transition: none; } }

.foot { margin-top: 44px; text-align: center; color: var(--muted); }
.foot a { color: var(--text); font-weight: 700; text-underline-offset: 3px; }
.foot a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

@media (max-width: 640px) {
  .wrap { padding-top: 40px; }
  .cards { grid-template-columns: 1fr; gap: 18px; }
  .card { grid-template-columns: 60px 1fr; padding: 16px; }
  .slot { width: 60px; height: 60px; }
  .slot .px-icon { width: 38px; height: 38px; }
  .card h2 { font-size: 18px; }
}