/* Arkchemy site stylesheet -- dumbed down 2026-08-22 to just the two
   pieces of real functionality: the Contributors cards (the user's own
   hand-made HUD design) and the org repos list. Everything else (nav,
   hero, about/license page chrome, footer) got stripped -- the rest of
   the site is being rebuilt from scratch by hand. */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');

:root {
  --bg: #f6f7fb;
  --bg-alt: #ffffff;
  --fg: #0f172a;
  --fg-muted: #475569;
  --border: #e2e8f0;
  --nav-bg: #0b1f3a;
  --nav-fg: #f8fafc;
  --accent: #0ea5e9;
  --accent-fg: #04121f;
  --card-bg: #ffffff;
  --shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220;
    --bg-alt: #101a2c;
    --fg: #e2e8f0;
    --fg-muted: #94a3b8;
    --border: #1e293b;
    --nav-bg: #050b16;
    --nav-fg: #e2e8f0;
    --accent: #38bdf8;
    --accent-fg: #04121f;
    --card-bg: #101a2c;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

:root[data-theme="dark"] {
  --bg: #0b1220;
  --bg-alt: #101a2c;
  --fg: #e2e8f0;
  --fg-muted: #94a3b8;
  --border: #1e293b;
  --nav-bg: #050b16;
  --nav-fg: #e2e8f0;
  --accent: #38bdf8;
  --accent-fg: #04121f;
  --card-bg: #101a2c;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

a {
  color: var(--accent);
}

code {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.92em;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 16px 0;
}

/* Repos list (fetched by site.js from /api/github-repos) */
.repos-container {
  margin: 16px 0 32px;
}

.repos-container.open {
  display: block;
}

.repos-container:not(.open) {
  display: none;
}

.repo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.repo {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
}

.repo a {
  font-weight: 600;
  text-decoration: none;
}

.repo .desc {
  margin-top: 6px;
  color: var(--fg-muted);
  font-size: 0.92rem;
}

.repo .meta {
  margin-top: 10px;
  color: var(--fg-muted);
  font-size: 0.85rem;
}

.repo .lang {
  margin-left: 8px;
}

.loading, .error, .empty {
  color: var(--fg-muted);
  padding: 10px 0;
}

/* Contributors -- kept scoped to .contributor- and .hud- prefixed
   classes. The whole HUD graphic (rings, bars, banners) is the user's
   own hand-made Canva/PSD design. Rather than one flattened foreground
   image sitting above everything (which put every ring above both
   avatars regardless of the PSD's own real stacking), each ring is its
   own image now, interleaved with the dynamic content in the PSD's
   literal real layer order (bottom to top): bg -> PFP1 photo ->
   FrameOfPFP1 ring -> PFP2 photo -> FrameOfPFP2 ring -> element photo
   -> FrameOfElement ring -> text. That's what makes the mini badge's
   ring correctly sit on top of the main portrait where they overlap,
   without the main portrait's own ring bleeding over the mini badge.

   Positioning technique: .hud has `aspect-ratio: 317 / 188` (the PSD
   canvas's exact pixel size), and every child is positioned with
   left/width as a percentage of 317 and top/height as a percentage of
   188. As long as the container keeps that exact aspect ratio, both
   axes scale by the same real factor, so a circle stays a circle at
   any card size -- this is what makes the whole thing responsive
   without JS. Each percentage below is commented with the literal PSD
   layer name and pixel rect it came from, straight out of
   `magick identify -verbose` on the PSD. */
.contributor-list {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 20px;
  align-items: start;
}

/* Special Thanks reuses this exact same card component (see
   renderContributors in site.js -- it's the same function, called
   twice) -- this modifier is the only thing that makes it render
   smaller: a lower minmax() on the grid, tighter gap, and reduced
   role/link text sizes to match. */
.contributor-list-compact {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}

.contributor-list-compact .contributor-role {
  font-size: 0.62rem;
  margin: 6px 0 6px;
}

.contributor-list-compact .contributor-link {
  font-size: 0.68rem;
  padding: 3px 7px;
}

/* The in-HUD name slot is too small at compact scale to hold a full
   name without cramming it onto 2-3 tiny lines -- hidden here in favor
   of .contributor-name-below instead, which gets the card's full width
   underneath the graphic. */
.contributor-list-compact .hud-name {
  display: none;
}

.contributor-list-compact .contributor-name-below {
  display: block;
  font-size: 0.72rem;
}

/* clamp()'s vw component is relative to the viewport, not this card,
   so on a normal desktop it computed the same size here as in the big
   cards regardless of how small the compact grid actually made the
   box -- these numbers were overflowing their tiny boxes. Fixed rem
   sizes here instead, sized for the compact card's real width. */
.contributor-list-compact .hud-repo-count {
  font-size: 0.42rem;
}

.contributor-list-compact .hud-coin-count {
  font-size: 0.44rem;
}

.contributor-card {
  --elem-color: var(--accent);
  /* Lets .hud-name/.hud-repo-count/.hud-coin-count size themselves off
     this card's own real width (cqw) instead of the viewport (vw) --
     see their own comments for why that distinction matters here. */
  container-type: inline-size;
}

.hud {
  position: relative;
  width: 100%;
  aspect-ratio: 317 / 188;
}

.hud-bg,
.hud-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hud-bg {
  z-index: 0;
}

.hud-ring-pfp1 {
  z-index: 2;
}

.hud-ring-pfp2 {
  z-index: 4;
}

.hud-ring-element {
  z-index: 6;
}

/* FillMaskForPFP1: x=50 y=4 w=132 h=132 -- the big portrait (GitHub,
   preferred, since that's what the PSD's own layer name -- literally
   "PFP1ProbablyGithub" -- called for). */
.hud-avatar-main {
  position: absolute;
  left: 15.77%;
  top: 2.13%;
  width: 41.64%;
  height: 70.21%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  z-index: 1;
}

.hud-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nav-bg);
  color: var(--nav-fg);
  font-weight: 700;
  font-family: 'Luckiest Guy', 'Segoe UI', sans-serif;
}

.hud-avatar-main.hud-avatar-fallback {
  font-size: 2.2rem;
}

/* FillMaskForPFP2: x=162 y=80 w=40 h=40 -- the mini badge (Discord,
   per "PFP2ProbablyDiscord"). z-index:3, above FrameOfPFP1's ring (2)
   and the main avatar (1) -- matches the PSD's own real stacking order,
   so the mini badge's photo genuinely sits on top where it overlaps
   the main portrait's ring, and FrameOfPFP2 (z:4) then frames this
   badge specifically without bleeding onto the main portrait. Real
   second photo when a contributor has one; otherwise a Battle Class
   symbol fallback (see .hud-avatar-battleclass below) so this slot is
   never empty. */
.hud-avatar-mini {
  position: absolute;
  left: 51.10%;
  top: 42.55%;
  width: 12.62%;
  height: 21.28%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg);
  z-index: 3;
}

/* Fallback for contributors without a second avatar identity: a
   deterministically-picked Battle Class symbol (self-hosted, recolored
   gold to match the frame -- see battleClassFor in site.js) on a solid
   dark-blue fill, rather than leaving the badge empty. */
.hud-avatar-battleclass {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #141851;
}

.hud-avatar-battleclass img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

/* FillMaskForElement: x=7 y=129 w=52 h=52. z-index:5, below its own
   FrameOfElement ring (6) but above everything else -- doesn't spatially
   overlap the PFP1/PFP2 group at all, so this mostly just needs to sit
   under its own ring. */
.hud-element {
  position: absolute;
  left: 2.21%;
  top: 68.62%;
  width: 16.40%;
  height: 27.66%;
  border-radius: 50%;
  object-fit: contain;
  z-index: 5;
}

/* Name: x=205 y=113 w=107 h=13 in the PSD, but that box is too short
   for Luckiest Guy's actual glyph metrics at any real font-size --
   ascenders were getting clipped at the top by overflow:hidden. Height
   bumped up and the top edge nudged up to compensate, `overflow:
   visible` so nothing clips, and a smaller base clamp() (further
   reduced per-name in JS for long names -- see fitHudNames in
   renderContributors) so long names shrink to fit this fairly narrow
   column instead of overflowing it. Left-aligned throughout (no
   justify-content override -- flex's own default is flex-start). */
.hud-name {
  position: absolute;
  left: 64.67%;
  top: 56.5%;
  width: 33.75%;
  height: 11%;
  margin: 0;
  display: flex;
  align-items: center;
  overflow: visible;
  font-family: 'Luckiest Guy', 'Segoe UI', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  /* Was clamp(0.5rem, 2.6vw, 0.85rem) -- same bug already diagnosed and
     fixed for the compact grid below (see its own comment): vw is
     relative to the viewport, not this card, and this grid's
     minmax(160px, 1fr) lets a card render far wider than a
     viewport-relative unit accounts for whenever there aren't enough
     contributors to fill a row, so the name capped out small
     regardless of how big the card actually was. cqw (needs
     .contributor-card's own container-type: inline-size, set above)
     scales off the card's real rendered width instead. */
  font-size: clamp(0.65rem, 6cqw, 1.25rem);
  line-height: 1.1;
  text-transform: uppercase;
  color: #ffd54a;
  text-shadow:
    0 2px 0 #6b4400,
    0 1px 2px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  z-index: 7;
}

/* AmountOfReposContributingTo: x=68 y=159 w=20 h=16. */
.hud-repo-count {
  position: absolute;
  left: 21.45%;
  top: 84.57%;
  width: 6.31%;
  height: 8.51%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Luckiest Guy', 'Segoe UI', sans-serif;
  /* Same vw->cqw fix as .hud-name above, same reason. */
  font-size: clamp(0.6rem, 5.5cqw, 1.05rem);
  color: #7be0ff;
  text-shadow: 0 1px 0 #04121f, 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 7;
}

/* GoldCoinCount: x=229 y=160 w=49 h=19. */
.hud-coin-count {
  position: absolute;
  left: 72.24%;
  top: 85.11%;
  width: 15.46%;
  height: 10.11%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Luckiest Guy', 'Segoe UI', sans-serif;
  /* Same vw->cqw fix as .hud-name above, same reason. */
  font-size: clamp(0.65rem, 6cqw, 1.15rem);
  color: #ffd54a;
  text-shadow: 0 1px 0 #6b4400, 0 1px 2px rgba(0, 0, 0, 0.6);
  z-index: 7;
}

/* Hidden by default -- the main Contributors cards are big enough that
   the name fits fine inside the HUD itself. Special Thanks turns this
   on (and hides .hud-name instead) since its narrow compact column
   crams a name onto 2-3 tiny lines otherwise. */
.contributor-name-below {
  display: none;
  margin: 8px 0 0;
  font-family: 'Luckiest Guy', 'Segoe UI', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 0.85rem;
  line-height: 1.15;
  color: var(--fg);
  overflow-wrap: anywhere;
}

.contributor-role {
  margin: 10px 0 10px;
  color: var(--fg-muted);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.contributor-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contributor-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.contributor-link:hover {
  border-color: var(--elem-color);
  transform: translateY(-1px);
}

.contributor-icon {
  flex-shrink: 0;
}

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