/* ═══════════════════════════════════════════════════════════════════════════
   ZADDR STUDIO
   ───────────────────────────────────────────────────────────────────────────
   The collection, the mint, the market. No wallet lives here.

   COLOUR. Near-black, white, one grey, one gold. That is the whole palette and
   the restraint is the point: a page with no accent has nothing to fight the
   artwork, and the artwork is 2,800 pixel faces that are themselves almost
   entirely greyscale. The ground is #111 rather than #000 so that pure black
   is still available underneath it -- a card can sit *below* the page instead
   of only above it, which is most of the depth on this site.

   Gold appears on exactly one thing at a time: the live number. Price while
   minting, the bid while trading, the shielding level while holding. If two
   gold things are on screen, one of them is wrong.

   TYPE. Three faces, three jobs, no overlap.

     Pixelify Sans   headings. The collection is pixel art; the headings are
                     drawn on the same grid. Used large and sparingly.
     Figtree         everything a person reads in sentences.
     JetBrains Mono  everything that is a value and not a word -- addresses,
                     transaction ids, block heights, prices, token numbers.
                     Tabular by default, because these are read in columns.

   Tracking is -0.025em globally. It is a small number that does most of the
   work of making a dark page look deliberate rather than default.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The three families, self-hosted as variable fonts. They used to come
   from Google, which cost every first paint a chain of three round trips to
   two other origins before a single word set in the right face. */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/Figtree.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url(/fonts/JetBrainsMono.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/PixelifySans.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root {
  /* Ground and everything on it. */
  --void:    #000000;   /* below the page */
  --bg:      #111111;   /* the page */
  --card:    #181818;   /* a thing on the page */
  --raised:  #202020;   /* a thing on a thing */
  --line:    #232323;
  --line-lit:#343434;

  --ink:     #ffffff;
  --dim:     #707070;
  --faint:   #3f3f3f;

  --gold:    #f4b728;   /* the one live number */
  --gold-dim:#6b5212;
  --good:    #4ad07f;
  --bad:     #ff5f56;

  --pad:     clamp(18px, 3.2vw, 56px);
  --max:     1440px;
  --r:       4px;       /* pixel art does not want round corners */

  --display: 'Pixelify Sans', 'Courier New', monospace;
  --body:    'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  color-scheme: dark;
}

/* A single visual world, deliberately. The artwork is lit for a dark ground
   and there is no light version of it that is not worse, so the page paints
   its own background and never borrows the host's. */

* { box-sizing: border-box; }

/* `hidden` has to win. Any rule that sets `display` -- and most components
   here set flex or grid -- beats the browser's own `[hidden] { display: none }`
   on specificity, so an element toggled with `el.hidden = true` stays on
   screen. This is the one place !important is the right answer. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: -0.025em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, canvas { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Type ──────────────────────────────────────────────────────────────── */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(38px, 7vw, 92px); }
h2 { font-size: clamp(22px, 3vw, 34px); }
h3 { font-size: 17px; letter-spacing: -0.02em; }

p { margin: 0 0 1em; max-width: 62ch; }

/* Values, not words. Always mono, always tabular -- these are read down a
   column and digits that shift width make a column impossible to scan. */
.v, .mono, code, kbd {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* A label above a value. Small, spaced, never louder than what it labels. */
.lab {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

.muted { color: var(--dim); }
.hint  { color: var(--dim); font-size: 13px; }

/* An address or a transaction id: long, never wrapped mid-character, and
   always selectable in one gesture. */
.addr {
  font-family: var(--mono);
  font-size: 12px;
  word-break: break-all;
  color: var(--dim);
  user-select: all;
}

/* ─── Layout ────────────────────────────────────────────────────────────── */

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }
.stack { display: flex; flex-direction: column; gap: 20px; }
.row   { display: flex; align-items: center; gap: 12px; }
.grow  { flex: 1 1 auto; min-width: 0; }
.spread{ display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Section heading: a title on the left, a count or control on the right,
   separated by a rule that stops where the text starts. */
.sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

/* ─── Chrome ────────────────────────────────────────────────────────────── */

header.top {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.top .bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 58px;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--pad);
}
.brand {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: 14px;
  white-space: nowrap;
}
.brand span { color: var(--dim); font-weight: 400; }
.brand:hover { color: var(--ink); }

nav.main { display: flex; gap: 2px; }
nav.main a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 8px 11px;
  border-radius: var(--r);
}
nav.main a:hover { color: var(--ink); background: var(--card); }
nav.main a[aria-current] { color: var(--ink); background: var(--raised); }

/* On a phone the bar is one row: the brand, then the wallet button and a
   menu button, both solid. The six links live in a panel that drops from the
   bar when the menu button is pressed. */
.menu { display: none; }
@media (max-width: 720px) {
  .top .bar { height: 62px; gap: 8px; position: relative; }
  .brand { margin-right: auto; }
  .top .bar .grow { display: none; }
  .cbtn { padding: 12px 16px; border-radius: 12px; font-size: 12px; }
  .menu {
    display: grid; place-items: center;
    width: 46px; height: 46px; padding: 0; flex: none;
    background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 12px; cursor: pointer;
  }
  .menu i { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; transition: box-shadow 0.15s, transform 0.15s; }
  header.top.open .menu i { box-shadow: none; transform: rotate(45deg); }
  header.top.open .menu i::after { content: ''; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transform: rotate(90deg); }
  nav.main {
    display: none; flex-direction: column; gap: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 6px var(--pad) 14px;
  }
  header.top.open nav.main { display: flex; }
  nav.main a {
    font-size: 15px; letter-spacing: 0.08em; padding: 15px 2px; border-radius: 0;
    border-bottom: 1px solid var(--line); color: var(--ink);
  }
  nav.main a:last-child { border-bottom: 0; }
  nav.main a:hover { background: none; color: var(--gold); }
  nav.main a[aria-current] { background: none; color: var(--gold); }
  .spread { flex-wrap: wrap; }
}

/* ─── Controls ──────────────────────────────────────────────────────────── */

.btn {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--r);
  padding: 11px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
/* A link styled as a button is still an inline element, so it ignores width
   and lets neighbouring text run through it. Every "button" on this site that
   navigates rather than acts is an anchor, so this is not an edge case. */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
a.btn:hover { color: var(--void); }

.btn:hover { background: var(--gold); border-color: var(--gold); color: var(--void); }
.btn[disabled] { opacity: 0.35; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-lit); }
.btn.ghost:hover { background: var(--card); color: var(--gold); border-color: var(--gold); }
a.btn.ghost:hover { color: var(--gold); }

.btn.plain {
  background: transparent; color: var(--dim); border-color: transparent;
  padding-inline: 10px;
}
.btn.plain:hover { color: var(--ink); background: var(--card); }

input, select {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px 12px;
  letter-spacing: -0.01em;
}
input:focus, select:focus { border-color: var(--line-lit); outline: none; }
input::placeholder { color: var(--faint); }
select { cursor: pointer; }

/* ─── The face ──────────────────────────────────────────────────────────── */

/* Every face on this site is drawn, not fetched. The canvas is sized by CSS
   and the pixels are nearest-neighbour: a 96-cell grid blown up to 400px has
   to stay a grid, and a browser that smooths it has turned pixel art into a
   photograph of pixel art. */
.face {
  width: 100%;
  aspect-ratio: 1;
  background: var(--void);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* A dressed face says so on its tile: the level it has reached and how many
   epic elements it wears. Only dressed faces carry this. A face nobody has
   changed shows nothing, because how long it has been held is its holder's
   business until they choose to show it. */
.lvb {
  position: absolute; top: 7px; right: 7px;
  font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  padding: 3px 6px; border-radius: 2px;
  color: var(--gold); background: rgba(0,0,0,0.72); border: 1px solid var(--gold-dim);
  pointer-events: none;
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

/* One face in the gallery. Border, not shadow -- 2,800 shadows is a haze. */
.tile {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: border-color 0.12s, transform 0.12s;
  content-visibility: auto;
  contain-intrinsic-size: 260px;
}
.tile:hover { border-color: var(--line-lit); transform: translateY(-2px); color: inherit; }
.tile .meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px 10px;
  border-top: 1px solid var(--line);
}
.tile .id {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.tile .rank {
  font-family: var(--mono);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  letter-spacing: 0.04em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
}
@media (max-width: 560px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
}

/* ─── Traits ────────────────────────────────────────────────────────────── */

/* A trait is a name, a value and how many of the 2,800 share it. The count is
   the only reason anyone reads this panel, so it is never the thing that gets
   dropped when the row is tight. */
.trait {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.trait b { font-weight: 500; font-size: 14px; }
.trait .n {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--dim);
  white-space: nowrap;
}
.traits { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }

/* Rarity is a word, and words are cheaper to read than colour alone -- so the
   colour is a reinforcement of the label, never the only carrier. */
.tag {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}
.tag.common     { color: var(--dim);  border-color: var(--line-lit); }
.tag.rare       { color: #8fb8d9;     border-color: #2d4356; }
.tag.legendary  { color: var(--gold); border-color: var(--gold-dim); }
.tag.ultra_rare { color: #d98fd0;     border-color: #562d4f; }

/* ─── Filters ───────────────────────────────────────────────────────────── */

.filters { display: flex; flex-direction: column; gap: 4px; }
.filters details { border-bottom: 1px solid var(--line); }
.filters summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}
.filters summary::-webkit-details-marker { display: none; }
.filters summary:hover { color: var(--ink); }
.filters details[open] summary { color: var(--ink); }
.filters summary::after { content: '+'; font-size: 14px; color: var(--faint); }
.filters details[open] summary::after { content: '−'; }
.filters .opts { padding: 0 2px 14px; display: flex; flex-direction: column; gap: 1px; }

.opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 7px;
  border-radius: var(--r);
  cursor: pointer;
  font-size: 13px;
}
.opt:hover { background: var(--card); }
.opt input { appearance: none; width: 13px; height: 13px; padding: 0; flex: none; border-radius: 2px; border: 1px solid var(--line-lit); background: var(--card); }
.opt input:checked { background: var(--gold); border-color: var(--gold); }
.opt .n {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}
.opt input:checked ~ .n { color: var(--dim); }

/* Applied filters, each removable on its own. A filter you cannot see is a
   filter you will blame the results on. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 6px 5px 9px;
  background: var(--raised);
  border: 1px solid var(--line-lit);
  border-radius: var(--r);
  cursor: pointer;
  color: var(--ink);
}
.chip:hover { border-color: var(--gold); color: var(--gold); }
.chip b { font-weight: 400; color: var(--dim); }
.chip i { font-style: normal; color: var(--faint); font-size: 13px; line-height: 1; }

/* ─── Shielding ─────────────────────────────────────────────────────────── */

/* The one place gold is a bar rather than a number. Shielding is the only
   value on the site that moves on its own. */
.shield { display: flex; flex-direction: column; gap: 7px; }
.shield .track {
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.shield .fill { height: 100%; background: var(--gold); transition: width 0.4s ease; }

/* ─── Empty and busy ────────────────────────────────────────────────────── */

.empty {
  padding: 64px 20px;
  text-align: center;
  color: var(--dim);
  border: 1px dashed var(--line-lit);
  border-radius: var(--r);
}
.empty b { display: block; color: var(--ink); font-family: var(--display); font-size: 20px; margin-bottom: 6px; }

footer.foot {
  margin-top: 88px;
  padding: 34px 0 60px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 13px;
}
footer.foot .spread { flex-wrap: wrap; gap: 10px 20px; }
@media (max-width: 560px) {
  footer.foot { margin-top: 56px; padding: 26px 0 44px; }
  footer.foot .spread { flex-direction: column; align-items: flex-start; }
}