/* felt.fyi — the player's own page.
   World: CHIP DRENCH, the same one the marketing site is drawn in — each section a
   full-bleed field in one chip colour, separated by chip-edge strips, poster-weight
   condensed display type, hard offset borders. See /BRAND.md.

   No JavaScript is served by this surface at all, so everything here has to hold on its
   own: focus states, the mobile table restack, the whole lot. */

@font-face {
  font-family: "Libre Franklin";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/libre-franklin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/big-shoulders-var.woff2") format("woff2");
}
@font-face {
  font-family: "Fragment Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/fragment-mono.woff2") format("woff2");
}

:root {
  /* Generated from @felt/design; run `bun run tokens` after changing it there. */
  /* @felt/design:begin me */
  --ink: #1a1611;
  --cream: #f6f1e6;
  --cream-deep: #eae2d0;
  --paper: #fffdf6;
  --red: #bc2f21;
  --red-deep: #9a2417;
  --green: #0f6b41;
  --green-deep: #0a4d2e;
  --gold: #e8a020;
  --gold-deep: #8a6013;
  --blue: #24549e;
  --blue-deep: #1a3f77;
  --black: #1b1917;
  --display: "Big Shoulders", "Libre Franklin", system-ui, sans-serif;
  --sans: "Libre Franklin", system-ui, sans-serif;
  --mono: "Fragment Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
/* @felt/design:end */

  --measure: 64ch;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--red);
}

/* ---------- fields: one chip colour owns each section ---------- */

.field { --fg: var(--ink); --bg: var(--cream); --accent: var(--red);
  background: var(--bg); color: var(--fg); }
/* Gold clears 3:1 on black and on blue, and on neither red nor green — so those two
   fields take cream accents. `packages/design/test/contrast.test.ts` is the authority. */
.field--red   { --bg: var(--red);   --fg: var(--cream); --accent: var(--cream); }
.field--green { --bg: var(--green); --fg: var(--cream); --accent: var(--cream); }
.field--blue  { --bg: var(--blue);  --fg: var(--cream); --accent: var(--gold); }
.field--black { --bg: var(--black); --fg: var(--cream); --accent: var(--gold); }
.field--cream { --bg: var(--cream); --fg: var(--ink);   --accent: var(--red); }

::selection { background: var(--ink); color: var(--cream); }
.field--black ::selection, .field--red ::selection,
.field--green ::selection, .field--blue ::selection { background: var(--cream); color: var(--ink); }

:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; border-radius: 2px; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 0.2em; text-decoration-color: var(--accent); }
a:hover { text-decoration-thickness: 3px; }

h1, h2 {
  font-family: var(--display);
  font-weight: 850;
  text-transform: uppercase;
  line-height: 0.92;
  text-wrap: balance;
}
h1 { font-size: clamp(2.8rem, 8vw, 5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
h3 { font-weight: 800; font-size: 1.1rem; line-height: 1.3; }
.sub { font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.5rem; letter-spacing: 0.02em; margin-top: 2.4rem; margin-bottom: 0.9rem; }

p { max-width: var(--measure); }
p + p { margin-top: 0.8em; }
code { font-family: var(--mono); font-size: 0.92em; }
small { font-size: 0.82em; }
.quiet { opacity: 0.62; }
.optional { font-weight: 400; opacity: 0.65; font-size: 0.85em; }

.wrap { width: min(1080px, calc(100% - 2.5rem)); margin-inline: auto; }
.wrap.narrow, .narrow { width: min(640px, calc(100% - 2.5rem)); margin-inline: auto; }
.pad { padding-block: clamp(3rem, 7vw, 5.5rem); }
.pad--tight { padding-block: clamp(2.2rem, 5vw, 3.6rem); }
.lede { font-size: 1.15rem; margin-top: 1rem; }
.note { font-size: 0.9rem; opacity: 0.78; margin-top: 1.4rem; max-width: 60ch; }

.chip-edge {
  height: 20px;
  background: repeating-linear-gradient(90deg,
    var(--edge-a, var(--cream)) 0 56px,
    var(--edge-b, var(--red)) 56px 112px);
}

/* ---------- the bar ---------- */

.bar { background: var(--black); color: var(--cream); --bg: var(--black); --accent: var(--gold); }
.bar-in { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding-block: 1rem; }
.bar-nav { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; font-size: 0.95rem; }
.bar-nav form { display: inline; }
.bar-handle { font-family: var(--mono); font-size: 0.85rem; opacity: 0.85; }

.wordmark {
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid currentColor; border-radius: 999px;
  padding: 0.26em 0.85em 0.32em;
  font-weight: 800; font-size: 1rem; letter-spacing: 0.16em;
  text-decoration: none; color: inherit;
  box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3.5px currentColor;
}
a.wordmark:hover { text-decoration: none; }

.linkish {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em;
  text-decoration-color: var(--accent);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--fg); color: var(--bg);
  font-family: var(--sans); font-weight: 800; font-size: 1rem;
  padding: 0.7em 1.4em; border: 3px solid var(--fg); border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: transform 0.18s var(--ease);
}
.btn:hover { transform: rotate(-1deg); text-decoration: none; }
.btn--quiet { background: transparent; color: var(--fg); }
.btn--small { font-size: 0.9rem; padding: 0.5em 1.1em; }
.cta-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
.cta-note { font-size: 0.9rem; opacity: 0.85; }

/* ---------- the hero: who this is ---------- */

.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero--home { padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.hero-in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (max-width: 620px) { .hero-in { grid-template-columns: 1fr; } }

.face-img {
  display: grid; place-items: center;
  width: clamp(112px, 22vw, 200px); aspect-ratio: 1;
  border-radius: 999px; object-fit: cover;
  border: 4px solid var(--cream);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25);
  background: var(--cream);
}
.face-initials { font-family: var(--display); font-weight: 850; font-size: clamp(2.4rem, 7vw, 4.5rem);
  color: var(--red); line-height: 1; }
.face-img--small { width: 96px; border-width: 3px; box-shadow: 0 3px 0 rgba(0,0,0,0.2); }

.handle { font-family: var(--mono); font-size: 1rem; letter-spacing: 0.04em; opacity: 0.9; }
.bio { margin-top: 1rem; font-size: 1.1rem; }
.meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-top: 1rem; font-size: 0.9rem; opacity: 0.9; }
.meta span::before { content: "·"; margin-right: 1.2rem; opacity: 0.5; }
.meta span:first-child::before { content: none; margin: 0; }
.share { margin-top: 1.2rem; font-size: 0.85rem; }
.share-label { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.7rem; opacity: 0.75; margin-right: 0.5rem; }
.owner-note { margin-top: 1.4rem; font-size: 0.92rem; border-left: 3px solid var(--accent); padding-left: 1rem; }

.links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.links a { display: inline-block; border: 2px solid currentColor; border-radius: 999px;
  padding: 0.3em 0.9em; font-size: 0.85rem; text-decoration: none; }
.links a:hover { text-decoration: underline; }

/* the stamp: rotated, double-bordered, reserved for a claim worth certifying */
.stamp {
  display: inline-block; margin-top: 1rem;
  border: 3px solid var(--accent); border-radius: 6px; color: var(--accent);
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1rem; letter-spacing: 0.1em; padding: 0.28em 0.7em;
  transform: rotate(-4deg);
  box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 3.5px var(--accent);
}

/* ---------- earnings ---------- */

.earnings { list-style: none; display: grid; gap: 1.2rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.earnings li {
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 4px 0 var(--ink); padding: 1.3rem 1.5rem;
}
.figure { display: block; font-family: var(--display); font-weight: 850; line-height: 0.95;
  font-size: clamp(2.6rem, 7vw, 3.8rem); font-variant-numeric: tabular-nums; }
.figure-meta { display: block; margin-top: 0.6rem; font-size: 0.86rem; opacity: 0.8; }

.stats { display: grid; gap: 1px; margin-top: 2rem; background: currentColor;
  border: 3px solid currentColor; border-radius: 12px; overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(50%, 150px), 1fr)); }
.stats > div { background: var(--bg); padding: 1rem 1.1rem; }
.stats dt { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; opacity: 0.7; }
.stats dd { font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1.05;
  margin-top: 0.15rem; font-variant-numeric: tabular-nums; }

/* ---------- cards: next events, requests ---------- */

.cards, .requests { list-style: none; display: grid; gap: 1.1rem; margin-top: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.requests { grid-template-columns: 1fr; }
.card {
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink);
  padding: 1.2rem 1.4rem;
}
.card h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.35rem; margin-top: 0.2rem; }
.card-when { font-family: var(--mono); font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.1em; opacity: 0.75; }
.card-where { margin-top: 0.3rem; font-size: 0.95rem; }
.card-note { margin-top: 0.6rem; font-style: normal; opacity: 0.85; }
.card-tag { margin-top: 0.7rem; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.06em; opacity: 0.75; }
.card p + p { margin-top: 0.5rem; }
.card form { margin-top: 1rem; }
.requests--quiet .card { box-shadow: none; opacity: 0.75; }

/* ---------- the ledger ---------- */

.scroller { overflow-x: auto; margin-top: 1.4rem; }
.ledger { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ledger th, .ledger td { text-align: left; padding: 0.7rem 0.8rem;
  border-bottom: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); }
.ledger thead th { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.12em; opacity: 0.75; border-bottom-width: 3px; }
.ledger .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
.ledger tbody tr.won { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.ledger tbody tr:last-child td { border-bottom: 3px solid currentColor; }

@media (max-width: 720px) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ledger tr { display: block; padding: 0.7rem 0;
    border-bottom: 1.5px solid color-mix(in srgb, currentColor 30%, transparent); }
  .ledger td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 0.2rem 0; }
  .ledger td::before { content: attr(data-label); font-family: var(--mono); font-size: 0.68rem;
    text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; }
  .ledger .num { text-align: right; }
}

/* ---------- forms ---------- */

.form { margin-top: 1.8rem; }
.form label, .form legend { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.35rem; }
.form input[type="text"], .form input[type="email"], .form input[type="url"],
.form input:not([type]), .form textarea, .prefixed input {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 0.65em 0.8em; margin-bottom: 1.1rem;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); border-radius: 10px;
}
.form textarea { resize: vertical; }
.form input[type="file"] { font-size: 0.9rem; margin-bottom: 0.9rem; }
.form fieldset { border: 0; margin-bottom: 1.4rem; }
.form legend { margin-bottom: 0.7rem; }
.form--inline { margin-top: 0; display: flex; gap: 0.7rem; align-items: center; flex-wrap: wrap; }
.form--inline label { margin: 0; }
.form-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; margin-top: 0.4rem; }

.prefixed { display: flex; align-items: stretch; gap: 0; }
.prefixed span { display: grid; place-items: center; font-family: var(--mono); font-size: 1.1rem;
  padding-inline: 0.7em; border: 3px solid var(--ink); border-right: 0;
  border-radius: 10px 0 0 10px; background: var(--cream-deep); margin-bottom: 1.1rem; }
.prefixed input { border-radius: 0 10px 10px 0; }

.link-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0.7rem; }
@media (max-width: 560px) { .link-row { grid-template-columns: 1fr; gap: 0; } }

.choice { display: flex; gap: 0.7rem; align-items: start; font-weight: 400; margin-bottom: 0.8rem; }
.choice input { margin-top: 0.35rem; width: 1.1rem; height: 1.1rem; accent-color: var(--red); }
.choice small { opacity: 0.78; }

.alert, .notice { border: 3px solid; border-radius: 10px; padding: 0.9rem 1.1rem; margin-top: 1.4rem;
  font-size: 0.95rem; max-width: none; }
.alert { border-color: var(--red-deep); color: var(--red-deep); background: var(--paper); }
.notice { border-color: var(--green-deep); color: var(--green-deep); background: var(--paper); }
.field-error { color: var(--red-deep); font-size: 0.85rem; margin-top: -0.8rem; margin-bottom: 1.1rem; }

.panel { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 3px solid var(--ink); }
.picture-row { display: flex; gap: 1.4rem; align-items: start; flex-wrap: wrap; margin-top: 1rem; }

.roster { list-style: none; margin-top: 1.1rem; display: grid; gap: 0.6rem; }
.roster li { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline;
  border: 3px solid var(--ink); border-radius: 999px; padding: 0.7rem 1.3rem; background: var(--paper); }
.roster li .quiet { margin-left: auto; font-size: 0.85rem; }

/* ---------- home page ---------- */

.steps { list-style: none; counter-reset: step; display: grid; gap: 1.4rem; margin-top: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.steps li { counter-increment: step; border-top: 3px solid var(--ink); padding-top: 1rem; }
.steps li::before { content: counter(step); font-family: var(--display); font-weight: 850;
  font-size: 2.4rem; line-height: 1; color: var(--red); display: block; }
.steps h3 { font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.3rem; margin: 0.3rem 0 0.4rem; }
.steps p { font-size: 0.95rem; }

.plain { list-style: none; margin-top: 1.4rem; display: grid; gap: 0.8rem; max-width: var(--measure); }
.plain li { padding-left: 1.6rem; position: relative; }
.plain li::before { content: "—"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }
.example { margin-top: 1.6rem; font-size: 0.95rem; opacity: 0.9; }

.foot { padding-block: 2.4rem; font-size: 0.92rem; }