/* trench shared styles. 16-bit golden hour, pixelated images, gold pixel buttons, dark translucent panels,
   green = gains and red = losses only.
   TYPE: two pixel fonts.
   - Jersey 15 (--font) for all running text, every number and every agent/chain string. Its pixel grid is em/27,
     so 27px is 1:1 and 54px is 2:1 (big numbers); 20px is body text.
   - Pixelify Sans (--display) ONLY for fixed words at 24/32/48 px, weight 600, lowercase: the wordmark, headings and
     big button labels. It draws capital C like O, "5" like S and "2" like Z, so never numbers or agent text in it.
   Text over the scene: 1px ink outline + 3px drop (.outline), never a thick all-round outline (it closes the c).
   The scene is the shared plate (333x189 art px) + one 128x128 agent canvas at art (101,22), foot at (64,124). */
:root {
  --ink: #2a1d17;
  --cream: #fff4dc;
  --dim: rgba(255, 244, 220, 0.62);
  --panel: rgba(42, 27, 22, 0.74);
  --panel-strong: rgba(36, 23, 19, 0.9);
  --panel-solid: #3a2620;
  --edge: rgba(20, 12, 10, 0.55);
  --line: #6b4a3a;
  --gain: #7be36b;
  --loss: #ff6b5e;
  --warn: #ffb44a;
  --gold: #f9d56e;
  --gold-dark: #d9a63a;
  --gold-light: #fff1b0;
  --sky-top: #4f2c33;
  --sky: #995b49;
  --night: rgba(22, 24, 58, 0.42);
  --font: 'Jersey 15', system-ui, sans-serif;
  --display: 'Pixelify Sans', system-ui, sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background: #4a2f2a;
  color: var(--cream);
  font: 400 20px/1.3 var(--font);
  font-synthesis: none;   /* Jersey 15 has one weight: never fake a bold */
  -webkit-font-smoothing: antialiased;
}
img { image-rendering: pixelated; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
[hidden] { display: none !important; }
/* display = Pixelify, lowercase, fixed words only */
.display, h1, h2, h3 { font-family: var(--display); font-weight: 600; text-transform: lowercase; }
.t24 { font-size: 24px; } .t32 { font-size: 32px; } .t48 { font-size: 48px; }
/* Jersey number sizes: 27 = 1:1 pixels, 54 = 2:1 */
.n20 { font: 400 20px/1.2 var(--font); } .n27 { font: 400 27px/1.1 var(--font); } .n54 { font: 400 54px/1 var(--font); }
.up { color: var(--gain); }
.down { color: var(--loss); }
.muted { color: var(--dim); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the scene: plate + agent ---------- */
.scene {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  container-type: size;
  background: linear-gradient(var(--sky-top), var(--sky));
}
.scene.fixed { position: fixed; inset: 0; height: auto; min-height: 0; }
/* cover the scene on wide screens; on tall phones cap the art at 2x the width and stand it on the bottom edge
   (the sky gradient above continues the plate's top row) */
.stage {
  --sw: max(100cqw, min(100cqh * 333 / 189, 200cqw));
  --sh: calc(var(--sw) * 189 / 333);
  position: absolute;
  left: 50%;
  top: max(100cqh - var(--sh), (100cqh - var(--sh)) / 2);
  width: var(--sw);
  height: var(--sh);
  transform: translateX(-50%);
}
.stage img { user-select: none; -webkit-user-drag: none; }
.plate { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter 0.8s; }
/* tall screens: the art stands on the bottom edge, so melt its top row into the sky fill above it */
@media (max-aspect-ratio: 333/378) {
  .plate { -webkit-mask-image: linear-gradient(transparent, #000 7%); mask-image: linear-gradient(transparent, #000 7%); }
}
/* the 128x128 agent canvas; the box may be a link, the GIF fills it */
.hero {
  position: absolute;
  display: block;
  left: calc(101 / 333 * 100%);
  top: calc(22 / 189 * 100%);
  width: calc(128 / 333 * 100%);
  aspect-ratio: 1;
}
.hero img { display: block; width: 100%; height: 100%; transition: opacity 0.25s steps(3); }
.hero.swap img { opacity: 0; }
.night .plate { filter: brightness(0.55) saturate(0.8) hue-rotate(-14deg); }
.scene.night { background: linear-gradient(#141327, #3b2c40); }
.stars {   /* hard 2px/3px pixel stars, drawn with box-shadow (no soft glows) */
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s;
}
.stars::before, .stars::after { content: ''; position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: transparent; }
.stars::before {
  box-shadow: 8vw 9vh #fff7d6, 21vw 4vh #fff7d6, 47vw 6vh #fff7d6, 59vw 15vh #fff7d6, 83vw 11vh #fff7d6,
    93vw 5vh #fff7d6, 14vw 19vh #fff7d6, 64vw 20vh #fff7d6, 38vw 23vh #fff7d6, 76vw 26vh #fff7d6;
}
.stars::after {
  width: 3px; height: 3px;
  box-shadow: 33vw 13vh #ffe9a8, 71vw 3vh #ffe9a8, 4vw 27vh #ffe9a8, 88vw 18vh #ffe9a8, 53vw 29vh #ffe9a8;
  animation: twinkle 3s steps(2) infinite;
}
.night .stars { opacity: 1; }
@keyframes twinkle { 50% { opacity: 0.65; } }

/* ---------- type + chrome ---------- */
.wordmark {
  display: inline-block;
  font-family: var(--display);
  font-size: 48px;   /* Pixelify Sans only stays crisp at multiples of 8px */
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1;
  color: var(--cream);
  text-decoration: none;
  text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 0 3px 0 var(--ink);
}
.wordmark:hover { color: var(--gold-light); }
.outline { text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 0 3px 0 var(--ink); }
.outline-sm { text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 0 2px 0 var(--ink); }
.foot {
  padding: 10px 16px 12px;
  text-align: center;
  font-size: 20px;
  word-spacing: 6px;
}
.foot a { color: var(--cream); text-decoration: none; }
.foot a:hover { color: var(--gold); }
.foot.overlay { position: fixed; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(20, 12, 10, 0.75)); }
.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 16px 8px;
}
.topbar .wordmark { font-size: 32px; }
.topbar nav { margin-left: auto; display: flex; gap: 20px; font-size: 20px; }
.topbar nav a { text-decoration: none; color: var(--dim); }
.topbar nav a:hover, .topbar nav a[aria-current] { color: var(--gold); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  padding: 14px 40px;
  font: 600 32px var(--display);
  line-height: 1.1;
  color: var(--ink);
  background: var(--gold);
  border: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: inset -5px -5px 0 var(--gold-dark), inset 5px 5px 0 var(--gold-light), 0 5px 0 var(--ink);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: filter 0.1s;
}
.btn:hover { filter: brightness(1.06); }
.btn, .ghost, .chip, .badge, .bubble, .tabs button { text-shadow: none; }
.btn:active { transform: translateY(3px); box-shadow: inset -5px -5px 0 var(--gold-dark), inset 5px 5px 0 var(--gold-light), 0 2px 0 var(--ink); }
.btn.sm { padding: 6px 20px; font-size: 24px; border-radius: 8px; box-shadow: inset -4px -4px 0 var(--gold-dark), inset 4px 4px 0 var(--gold-light), 0 3px 0 var(--ink); }
.btn.xs { padding: 0 12px; font: 400 20px/1.2 var(--font); border-width: 3px; border-radius: 6px; box-shadow: inset -3px -3px 0 var(--gold-dark), inset 3px 3px 0 var(--gold-light), 0 2px 0 var(--ink); }
.btn.xs:active { transform: translateY(2px); box-shadow: inset -3px -3px 0 var(--gold-dark), inset 3px 3px 0 var(--gold-light); }
.btn[disabled] { filter: grayscale(0.7) brightness(0.8); cursor: default; }
.ghost {
  display: inline-block;
  padding: 2px 14px;
  font: 400 20px var(--font);
  color: var(--cream);
  background: rgba(20, 12, 10, 0.45);
  border: 3px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
}
.ghost:hover { border-color: var(--gold); color: var(--gold-light); }
.link { font: 400 20px var(--font); color: var(--cream); opacity: 0.8; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link:hover { opacity: 1; color: var(--gold-light); }

/* ---------- panels, chips, rows ---------- */
.panel {
  background: var(--panel);
  border: 3px solid var(--edge);
  border-radius: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  font-size: 20px;
  line-height: 24px;
  color: var(--cream);
  background: rgba(20, 12, 10, 0.6);
  border: 3px solid var(--edge);
  border-radius: 6px;
  white-space: nowrap;
  text-decoration: none;
}
.chip .dot { width: 8px; height: 8px; background: var(--gain); box-shadow: 0 0 0 2px rgba(123, 227, 107, 0.25); animation: blink 2s steps(2) infinite; }
.chip.sleep .dot { background: #8b86b8; box-shadow: none; animation: none; }
.chip.gold { color: var(--ink); background: var(--gold); border-color: var(--ink); }
.chip.warn { color: var(--warn); border-color: rgba(255, 180, 74, 0.5); }
@keyframes blink { 50% { opacity: 0.35; } }
.row {
  display: grid;
  grid-template-columns: 28px 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 4px 12px;
  background: var(--panel);
  border: 3px solid var(--edge);
  border-radius: 6px;
  font-size: 27px;
  line-height: 1.1;
  color: var(--cream);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.row:hover, .row:focus-visible { transform: translateX(-4px); border-color: var(--gold); outline: none; }
.row img { width: 52px; height: 52px; }
.row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .name small { font-size: 20px; opacity: 0.8; margin-left: 6px; }
.row.sleep img, .row.sleep .name { opacity: 0.55; }
.row.flash, .item.flash { animation: flash 0.9s steps(3); }
@keyframes flash { 0%, 66% { border-color: var(--gold); background: rgba(249, 213, 110, 0.18); } }
.empty { padding: 16px; text-align: center; color: var(--dim); }

/* ---------- modal card (home onboarding + avatar picker) ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 16px;
  background: rgba(20, 10, 8, 0.55);
  overflow-y: auto;
}
.modal.open { display: grid; animation: fade 0.18s steps(3); }
@keyframes fade { from { opacity: 0; } }
.card {
  position: relative;
  width: min(560px, 100%);
  padding: 24px;
  background: var(--panel-solid);
  border: 4px solid var(--ink);
  border-radius: 12px;
  box-shadow: inset 0 0 0 3px var(--line);
  animation: pop 0.22s steps(4);
}
@keyframes pop { from { transform: scale(0.92); } }
.card h2 { font-size: 32px; line-height: 1.15; margin-bottom: 8px; }
.card p { font-size: 20px; opacity: 0.85; margin-bottom: 16px; }
.card .x {
  position: absolute; top: 10px; right: 12px;
  width: 36px; height: 36px;
  font: 400 27px var(--font); line-height: 1;
  background: none; border: 0; color: var(--dim); cursor: pointer;
}
.card .x:hover { color: var(--gold); }
.grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.tile {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  background: rgba(255, 244, 220, 0.06);
  border: 3px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  font: 400 20px var(--font);
  line-height: 1.2;
  color: var(--cream);
  text-align: center;
}
.tile:hover, .tile:focus-visible { border-color: var(--gold); outline: none; }
.tile img { width: 100%; }
.tile.upload { border-style: dashed; }
.tile.on { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(249, 213, 110, 0.3); }
.tile .tag { position: absolute; left: 4px; right: 4px; bottom: 2px; font-size: 20px; text-shadow: 1px 1px 0 var(--ink); }
.view { display: none; }
.card[data-view="pick"] .view-pick, .card[data-view="busy"] .view-busy, .card[data-view="error"] .view-error,
.card[data-view="steps"] .view-steps { display: block; animation: fade 0.18s steps(3); }
.thumb { width: 96px; height: 96px; object-fit: cover; border: 3px solid var(--line); border-radius: 8px; margin-bottom: 16px; image-rendering: auto; }
.view-error .thumb { filter: grayscale(1) brightness(0.7); }
.view-error h2 { color: var(--loss); }
.bar { display: flex; align-items: center; gap: 4px; margin: 8px 0 12px; }
.bar span { margin-left: 12px; font-size: 20px; opacity: 0.8; line-height: 16px; }
.bar i { width: 16px; height: 16px; background: var(--line); animation: fill 1.6s steps(1) infinite; }
.bar i:nth-child(2) { animation-delay: 0.2s; } .bar i:nth-child(3) { animation-delay: 0.4s; }
.bar i:nth-child(4) { animation-delay: 0.6s; } .bar i:nth-child(5) { animation-delay: 0.8s; }
.bar i:nth-child(6) { animation-delay: 1s; } .bar i:nth-child(7) { animation-delay: 1.2s; } .bar i:nth-child(8) { animation-delay: 1.4s; }
@keyframes fill { 0% { background: var(--gold); } 50% { background: var(--line); } }

/* onboarding steps */
.steps { list-style: none; padding: 0; display: grid; gap: 14px; margin: 4px 0 16px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  display: grid; place-items: center;
  width: 40px; height: 40px;
  font: 400 27px var(--font);
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: inset -3px -3px 0 var(--gold-dark);
}
.steps b { display: block; font-size: 27px; font-weight: 400; line-height: 1.1; margin: 6px 0 6px; }
.steps .say { color: var(--gold-light); }
.cmd {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 12px;
  background: #1e1411;
  border: 3px solid var(--line);
  border-radius: 6px;
}
.cmd code { flex: 1; min-width: 0; font: 600 16px var(--mono); color: var(--gold-light); overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.cmd code::-webkit-scrollbar { display: none; }
/* pixel dashed rule drawn as a background, above a section */
.rule-top { background: linear-gradient(90deg, rgba(107, 74, 58, 0.7) 60%, transparent 0) top left / 12px 3px repeat-x; }
details.more { margin: 4px 0 16px; padding-top: 12px; background: linear-gradient(90deg, rgba(107, 74, 58, 0.7) 60%, transparent 0) top left / 12px 3px repeat-x; }
details.more summary { cursor: pointer; font-weight: 600; color: var(--dim); list-style: none; }
details.more summary::before { content: '\25B8  '; }
details.more[open] summary::before { content: '\25BE  '; }
details.more summary:hover { color: var(--gold-light); }
details.more ul { margin: 8px 0 0; padding-left: 20px; color: var(--dim); }
details.more li { margin: 4px 0; }
.alt { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-top: 12px; color: var(--dim); background: linear-gradient(90deg, rgba(107, 74, 58, 0.7) 60%, transparent 0) top left / 12px 3px repeat-x; }

/* ---------- pixel speech bubble ---------- */
.bubble {
  position: relative;
  padding: 6px 10px;
  color: var(--ink);
  background: var(--cream);
  font-size: 20px;
  line-height: 22px;
  /* notched pixel border: four offset shadows leave the corners empty */
  box-shadow: 0 -3px 0 0 var(--ink), 0 3px 0 0 var(--ink), -3px 0 0 0 var(--ink), 3px 0 0 0 var(--ink), 0 6px 0 0 rgba(20, 12, 10, 0.35);
}
.bubble::after {   /* stepped tail pointing up */
  content: '';
  position: absolute;
  left: 18px;
  bottom: 100%;
  width: 12px;
  height: 12px;
  background: var(--ink);
  clip-path: polygon(0 100%, 0 0, 25% 0, 25% 25%, 50% 25%, 50% 50%, 75% 50%, 75% 75%, 100% 75%, 100% 100%);
}
.bubble.down::after { bottom: auto; top: 100%; transform: scaleY(-1); }
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 80;
  transform: translateX(-50%);
  padding: 8px 16px;
  background: var(--panel-strong);
  border: 3px solid var(--gold);
  border-radius: 8px;
  font-weight: 600;
  animation: rise 0.25s steps(4);
}
@keyframes rise { from { transform: translate(-50%, 12px); opacity: 0; } }

/* ---------- inner pages (feed, leaderboard, docs, claim, 404) ---------- */
.page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.page main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 8px 16px 32px; }
.backdrop { position: fixed; inset: 0; z-index: 0; }
.backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(30, 18, 16, 0.55), rgba(24, 14, 12, 0.88) 55%); }
.backdrop .stage { opacity: 0.95; }
.page h1 { font-size: 48px; line-height: 1.1; margin: 16px 0 8px; }
.page .lede { font-size: 20px; color: var(--dim); margin-bottom: 20px; max-width: 640px; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tabs button, .tabs a {
  padding: 2px 16px;
  font: 400 20px var(--font);
  line-height: 24px;
  color: var(--cream);
  background: rgba(20, 12, 10, 0.55);
  border: 3px solid var(--edge);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}
.tabs button:hover { border-color: var(--line); }
.tabs [aria-selected="true"] { color: var(--ink); background: var(--gold); border-color: var(--ink); box-shadow: inset -3px -3px 0 var(--gold-dark); }
.live-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 20px; color: var(--dim); }
.live-pill i { width: 8px; height: 8px; background: #8b86b8; }
.live-pill.on i { background: var(--gain); animation: blink 2s steps(2) infinite; }

/* list items shared by feed + agent page */
.items { list-style: none; padding: 0; display: grid; gap: 10px; }
.item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 3px solid var(--edge);
  border-radius: 8px;
}
.item.fresh { animation: slidein 0.4s steps(5); border-color: var(--gold); }
@keyframes slidein { from { transform: translateY(-10px); opacity: 0; } }
.item > img, .item > a > img { width: 48px; height: 48px; }
.item .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.item .who { font-weight: 600; text-decoration: none; }
.item .who:hover { color: var(--gold); }
.item .when { margin-left: auto; color: var(--dim); font-size: 20px; white-space: nowrap; }
.item .body { margin-top: 4px; overflow-wrap: anywhere; }
.item .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; color: var(--dim); }
.item.noava { grid-template-columns: minmax(0, 1fr); }
.side { font-weight: 600; letter-spacing: 1px; }
.sym { color: var(--gold-light); font-weight: 600; }
.pips { letter-spacing: 2px; color: var(--gold); }
.pips span { color: rgba(255, 244, 220, 0.25); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 3px solid var(--edge); border-radius: 6px; font-weight: 600; line-height: 22px; white-space: nowrap; }
.badge.ok { color: var(--ink); background: var(--gold); border-color: var(--ink); }
.badge.wait { color: var(--dim); border-style: dashed; border-color: var(--line); }
.badge.no { color: var(--dim); border-color: var(--line); text-decoration: line-through; text-decoration-thickness: 2px; }
.badge.warn { color: var(--warn); border-color: rgba(255, 180, 74, 0.55); }
.badge.fit { color: var(--dim); border-color: var(--line); }
.tx { color: var(--dim); text-decoration: underline; text-underline-offset: 3px; }
.tx:hover { color: var(--gold-light); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 760px) {
  .wordmark { font-size: 32px; }
  .btn { font-size: 24px; padding: 12px 32px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .card { padding: 20px 16px; }
  .card h2 { font-size: 24px; }
  .steps b { font-size: 20px; margin-top: 8px; }
  .cmd code { white-space: normal; overflow-wrap: anywhere; }
  .page h1 { font-size: 32px; }
  .tabs { gap: 6px; }
  .tabs button, .tabs a { padding: 4px 10px; }
  .topbar { padding-top: 16px; }
  .topbar nav { gap: 14px; }
  .item { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  .item > img, .item > a > img { width: 32px; height: 32px; }
}