/* ============================================================
   CITY OF STONKS — terminal design system
   ------------------------------------------------------------
   Loaded after each page's own <style> block so it wins without
   a specificity fight. index.html and app.html already share an
   identical token set, so most of the conversion is a palette
   swap; stake.html's own token names are aliased below.

   The look: near-black ground, chartreuse accent used sparingly,
   dashed rules on every container, monospace throughout, boxy
   corners. Pixel-art cities sit better inside hard edges than
   inside rounded cards — the art is already a grid.
   ============================================================ */

:root {
  color-scheme: dark;

  /* shared by index.html + app.html */
  --bg: #060806;
  --card-bg: #0C0F0A;
  --card-bg-alt: #0A0D08;
  --border: #1F2A16;
  --border-strong: #7D9B14;
  --text: #D7E2CC;
  --text-muted: #93A187;
  --text-faint: #5F6B57;
  --accent: #CCFF00;
  --accent-dim: rgba(204, 255, 0, 0.09);
  --accent-ink: #0B1400;
  --danger: #FF5C4D;

  /* stake.html aliases */
  --panel: #0C0F0A;
  --line: #1F2A16;
  --dim: #93A187;
  --lime: #CCFF00;
}

/* ---- type: monospace everywhere ---- */
body,
button,
input,
select,
textarea {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

body {
  background: var(--bg);
  color: var(--text);
}

/* Headings become terminal labels: tight, uppercase, tracked out.
   Left as-is below a size threshold so body copy stays readable. */
h1,
h2,
h3,
.section-head,
.gallery-subhead {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
h1 { letter-spacing: 0.02em; }

.eyebrow,
.kpi-mini-label,
.summary-label,
.kpi-label,
.stat .k,
.row .k,
.mem-k,
.stamp-state,
.panel h2,
.soon-tag {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
}

/* ---- shape: boxy, dashed ---- */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

.feature-card,
.path-card,
.kpi-strip,
.gallery-grid > *,
.demo-stage,
.panel,
.kpi-card,
.summary-pill,
.stat,
.city,
.bar,
.empty,
.box {
  border: 1px dashed var(--border-strong) !important;
  background: var(--card-bg);
}

/* Interior dividers stay quiet so the dashed frames carry the rhythm. */
.holding-row,
.kv,
.unlocks > * {
  border-color: var(--border) !important;
}

/* ---- controls ---- */
/* The blanket rule below styles every <button> as a filled primary unless it
   opts out. The opt-outs sit inside :where(), which contributes NO
   specificity — so this whole selector weighs the same as a bare `button`
   (0,0,1) and any class rule anywhere beats it without asking permission.
   That is the point.

   It used to be a bare chain of :not() clauses, which weighed 0,6,1 and
   outranked essentially every page-level style. Three separate things were
   silently overridden by it in one day — the demo's frame labels, the
   allowlist lock button and the admin toggles — and each was "fixed" by
   appending another :not() to the list, which made the next collision more
   likely rather than less. A growing opt-out list is the symptom; the
   specificity was the disease.

   Add a new button style anywhere and it now simply wins. Nothing needs to
   be registered here. */
.btn-primary,
.nav-cta,
button:not(:where(.ghost, .stamp, .export-btn, .tab, .demo-label-item)) {
  background: var(--accent);
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.btn-primary:hover,
.nav-cta:hover,
button:not(:where(.ghost, .stamp, .export-btn, .tab, .demo-label-item)):hover {
  background: #E4FF4D;
}

/* Secondary controls stay quiet. The example-wallet chips and the export
   buttons are conveniences, not the primary action — leaving them solid
   lime put four equally-loud calls to action in one row and buried the
   one that matters. */
.btn-secondary,
.nav-cta-ghost,
button.ghost,
.examples button,
.export-btn,
.tab {
  background: transparent;
  color: var(--text);
  border: 1px dashed var(--border-strong);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.btn-secondary:hover,
.nav-cta-ghost:hover,
button.ghost:hover,
.examples button:hover,
.export-btn:hover,
.tab:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

input {
  background: #050703;
  border: 1px dashed var(--border) !important;
  color: var(--text);
}
input:focus {
  outline: none;
  border-color: var(--accent) !important;
  border-style: solid !important;
}

/* Keyboard users need to see where they are; the dashed borders alone
   are too quiet to double as a focus ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- accents ---- */
.accent,
.hero h1 .accent,
.kpi-mini-value,
.summary-value.accent,
.path-link,
a {
  color: var(--accent);
}

.soon-tag,
.eyebrow {
  background: var(--accent-dim);
  border: 1px dashed var(--border-strong);
}

/* A selected tab has to win against the quiet default above, or every tab
   on the leaderboard reads as active at once. */
.tab[aria-selected="true"] {
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-style: solid !important;
  border-color: var(--accent) !important;
  font-weight: 700;
}

/* The passport keeps its earned/unearned distinction: a solid frame
   reads as "stamped", dashed as "not yet". */
.stamp { border-style: dashed !important; }
.stamp.got { border-style: solid !important; border-color: var(--border-strong) !important; }
.stamp.here { border-color: var(--accent) !important; }

/* ---- a terminal caret after the wordmark ---- */
.nav-links + *,
.hero h1::after {
  content: "";
}
.hero h1::after {
  display: inline-block;
  width: 0.5em;
  height: 0.92em;
  margin-left: 0.16em;
  vertical-align: -0.1em;
  background: var(--accent);
  animation: city-blink 1.15s steps(1) infinite;
}
@keyframes city-blink {
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1::after { animation: none; }
}

/* ============================================================
   Terminal nav — a prompt, a command-key hint, and a dropdown.
   Fixed to the top of every page so navigation is in one place
   rather than a different row of links per page.
   ============================================================ */
.has-city-nav { padding-top: 58px !important; }

.city-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 18px; height: 46px;
  /* Pinned because index.html styles bare `nav` with a centred max-width,
     which would otherwise shrink this fixed bar to the content column. */
  max-width: none; margin: 0;
  background: #050703; border-bottom: 1px dashed var(--border-strong);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

.city-nav-brand {
  color: var(--text) !important; text-decoration: none;
  font-size: 12px; letter-spacing: .22em; font-weight: 700;
}
.city-caret { color: var(--accent); margin-right: 6px; }
/* The prompt blinks, which is the whole conceit — but not for anyone who
   has asked the OS to stop moving things. */
@keyframes city-nav-blink { 50% { opacity: .25; } }
.city-caret { animation: city-nav-blink 1.2s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .city-caret { animation: none; } }

.city-nav-trigger {
  display: flex; align-items: center; gap: 10px;
  background: transparent !important; color: var(--text) !important;
  border: 1px dashed var(--border-strong) !important;
  padding: 7px 12px; font: inherit; font-size: 10.5px;
  letter-spacing: .18em; cursor: pointer;
}
.city-nav-trigger:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.city-nav-trigger kbd {
  font: inherit; font-size: 9px; letter-spacing: .1em;
  color: var(--text-faint); border: 1px solid var(--rule); padding: 1px 4px;
}

.city-menu {
  position: absolute; top: 46px; right: 14px; width: min(320px, calc(100vw - 28px));
  background: #070A06; border: 1px dashed var(--accent);
  display: flex; flex-direction: column; padding: 6px;
}
/* `display: flex` above outranks the UA sheet's `[hidden] { display: none }`,
   so the closed state has to be reasserted or the menu is always open. */
.city-menu[hidden] { display: none; }
.city-menu-item {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 10px; text-decoration: none; color: var(--text-muted) !important;
  border: 1px dashed transparent;
}
.city-menu-item:hover, .city-menu-item:focus-visible {
  border-color: var(--border-strong); color: var(--text) !important; outline: none;
}
.city-menu-item.current { border-color: var(--accent); color: var(--text) !important; }
.city-menu-icon { color: var(--accent); font-size: 14px; text-align: center; }
.city-menu-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.city-menu-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.city-menu-hint { font-size: 9.5px; color: var(--text-faint); letter-spacing: .04em; }
/* Submenus open in place: a game stays one click away, it just stops
   sitting at the same level as the whole Arcade. */
.city-menu-row { display: flex; align-items: stretch; }
.city-menu-row .city-menu-item { flex: 1; min-width: 0; }
button.city-menu-toggle {
  flex: 0 0 34px; background: none; border: 1px solid transparent !important;
  color: var(--text-faint); padding: 0; min-width: 0; text-transform: none; letter-spacing: 0;
  cursor: pointer; font: inherit; font-size: 11px; line-height: 1;
  transition: transform .15s ease, color .15s ease;
}
button.city-menu-toggle:hover { color: var(--accent); }
.city-menu-row.open button.city-menu-toggle { transform: rotate(90deg); color: var(--accent); }

.city-submenu { display: flex; flex-direction: column; margin: 0 0 4px 30px; }
.city-submenu[hidden] { display: none; }
.city-subitem {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 6px 10px; text-decoration: none; color: var(--text-muted);
  border-left: 1px solid var(--border);
}
.city-subitem:hover { color: var(--accent); border-left-color: var(--accent); background: var(--accent-dim); }
.city-subitem.current { color: var(--text); border-left-color: var(--accent); }
.city-subitem-label { font-size: 11px; letter-spacing: .06em; }

/* A shut door, in the mint key's own colour. The key is the accent lime with
   a soft halo; this is the same lime turned down and un-lit — recognisably
   the same object, visibly not yet yours. Dimmed rather than hidden, because
   a door you cannot see is not a goal. */
.city-subitem.locked { color: var(--text-faint); cursor: not-allowed; opacity: .55; }
.city-subitem.locked:hover {
  background: none; border-left-color: var(--border); color: var(--text-faint);
}
.city-lock {
  display: inline-flex; align-items: center; opacity: .5; line-height: 1;
  filter: drop-shadow(0 0 3px rgba(204, 255, 0, .3));
}
.city-subitem:hover .city-lock { opacity: .7; }

/* A locked top-level door is still a destination — the locked page explains
   itself and offers the key check — so it stays clickable and only reads as
   shut. Submenu entries above go the other way: they lead nowhere on their
   own, so those are inert. */
.city-menu-item.locked .city-menu-label { color: var(--text-faint); }
.city-menu-item.locked .city-lock { margin-left: auto; }
.city-footer-col a.locked { color: var(--text-faint); }
.city-footer-col a.locked .city-lock { margin-left: 6px; vertical-align: -1px; }

/* ---------- footer ---------- */

.city-footer {
  border-top: 1px dashed var(--border); margin-top: 48px;
  padding: 28px 16px 36px; background: var(--card-bg-alt);
}
.city-footer-inner {
  max-width: 1100px; margin: 0 auto; display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.city-footer-col h3 {
  margin: 0 0 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}
.city-footer-col a {
  display: block; padding: 3px 0; font-size: 12px; color: var(--text-muted); text-decoration: none;
}
.city-footer-col a:hover { color: var(--accent); }
.city-footer-col a.current { color: var(--text); }
/* The single tell. Deliberately says nothing about what — no count, no names,
   no link. Centred and on its own line so it reads as a note rather than as a
   column heading nobody finished. */
.city-footer-tease {
  max-width: 1100px; margin: 28px auto 0; padding-top: 20px;
  border-top: 1px dashed var(--border);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-faint);
}
.city-footer-tease .city-lock { opacity: .75; }

.city-footer-affil { margin-top: 8px; opacity: .85; }
.city-footer-affil strong { color: var(--text-muted); }
.city-footer-note {
  max-width: 1100px; margin: 24px auto 0; font-size: 10.5px; color: var(--text-faint);
  letter-spacing: .04em;
}

.city-menu-now {
  font-size: 8.5px; letter-spacing: .16em; color: var(--accent);
  border: 1px dashed var(--accent); padding: 2px 5px;
}

/* ---------- legal pages ---------- */

.legal { max-width: 760px; margin: 0 auto; padding: 32px 16px 8px; }
.legal .updated { font-size: 11px; color: var(--text-faint); letter-spacing: .08em; text-transform: uppercase; }
.legal h2 {
  margin: 30px 0 10px; font-size: 13px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.legal h3 { margin: 18px 0 6px; font-size: 13px; color: var(--text); }
.legal p, .legal li { font-size: 13.5px; line-height: 1.75; color: var(--text-muted); }
.legal p { margin: 0 0 12px; max-width: 68ch; }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal li { margin-bottom: 6px; }
.legal strong { color: var(--text); }
.legal .callout {
  border: 1px dashed var(--border); border-left: 2px solid var(--accent);
  padding: 14px 16px; margin: 18px 0; background: var(--card-bg-alt);
}
.legal .callout p:last-child { margin-bottom: 0; }
.legal a { color: var(--accent); }


/* ---------- redactions ----------
   Withheld values across the site — drop terms, the clock, the arcade file.
   A scrambling block rather than a static bar: a bar reads as a broken asset,
   a moving one reads as something held back on purpose. */
.redact {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-ink, #0B1400);
  padding: 0 5px;
  letter-spacing: 0.06em;
  user-select: none;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- narrow screens ---------- */

/* The footer is appended to <body>, and every arcade cabinet styles its body
   as a flex column. A flex item defaults to min-width:auto, which means "never
   shrink below your content" — so the footer's four columns held the page
   ~990px wide on a phone and the whole site scrolled sideways. Stated
   explicitly here rather than in each game, because the footer is injected by
   city-nav.js on every page and the bug travelled with it. */
.city-footer {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  /* Two columns rather than auto-fit: at 140px minimum the grid would still
     try for four across and squeeze the link text to one word per line. */
  .city-footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .city-footer { padding: 22px 14px 28px; margin-top: 32px; }
  .city-nav { padding: 0 12px; gap: 10px; }
}