/* FACEOFF foundation: vendored faces, palette, and the shared ground.
   Loaded by every page. The palette is sampled from the artwork in
   tools/brand/source/; tools/brand/PALETTE.md carries the working. */

@font-face {
  font-family: "Archivo Expanded";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/archivo-expanded-800.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-700.woff2") format("woff2");
}

:root {
  /* FACEOFF palette, sampled from tools/brand/source/faceoff-wordmark.png.
     Working, sample sizes, and contrast table: tools/brand/PALETTE.md. */

  /* surfaces */
  --night: #000714;          /* ground */
  --banner: #011135;         /* raised surface */
  --banner-lit: #01153E;     /* raised surface, hover and pressed */
  --ice: #B9D0E6;            /* light surface: the rink */

  /* line */
  --keyline: #1A407C;        /* hairline */

  /* ink */
  --rink: #F4F8F9;           /* primary type */
  --steel: #8290AC;          /* secondary type */
  --chrome: #C2C4CF;         /* the mark, flat */
  --puck: #01010D;           /* ink on ice; inset and shadow */

  /* accent */
  --gold: #CAA371;           /* accent, keyline, focus */
  --gold-lit: #FFF9DF;       /* accent hover; bevel highlight */
  --gold-shade: #745B3D;     /* bevel shadow. never type */

  /* state */
  --aurora: #75E1BD;         /* live, confirmed, settled */
  --alert: #E8555F;          /* failed, at risk */

  /* The chrome ramp the letterforms carry, silver to deep blue over the cap
     height. Display only: below its 60 percent stop it fails on navy. */
  --chrome-ramp: linear-gradient(180deg, #D6D6DE 0%, #C2C4CF 18%, #8290AC 52%, #052A66 100%);
  /* The same ramp stopped at 60 percent, which is as far as it stays legible
     on the ground. This is the one that goes on type. */
  --chrome-type: linear-gradient(180deg, #D6D6DE 0%, #C2C4CF 20%, #A6B0C6 46%, #8290AC 72%, #5E749D 100%);

  /* The banner's bevel: light along the top edge, dark along the bottom. Every
     raised surface on the site carries it, at the weight the wordmark uses. */
  --bevel: inset 0 1px 0 rgba(244, 248, 249, .09), inset 0 -1px 0 rgba(1, 1, 13, .55);
  --bevel-lit: inset 0 1px 0 rgba(244, 248, 249, .16), inset 0 -1px 0 rgba(1, 1, 13, .55);

  /* superseded names, kept so existing markup resolves */
  --feed: var(--night);
  --board: var(--banner);
  --glass: var(--steel);
  --sync: var(--gold);
  --tally: var(--alert);
  --hair: var(--keyline);

  --display: "Archivo Expanded", "Archivo", Impact, sans-serif;
  --text: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1280px;
}

* { box-sizing: border-box }

body {
  margin: 0;
  /* The ground is the banner's own navy taken two steps darker, lit the way the
     artwork is lit: aurora off the top right, rink light off the top left. */
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(117, 225, 189, .07), transparent 62%),
    radial-gradient(900px 460px at 6% -6%, rgba(26, 64, 124, .38), transparent 64%),
    var(--night);
  background-attachment: fixed;
  color: var(--rink);
  font: 400 15px/23px var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none }
img, canvas, svg { display: block; max-width: 100% }

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

/* Display type in the letterforms' own finish: the chrome ramp through the
   glyph with the bevel's silver keyline around it. Nothing under 32px takes
   this — the ramp needs the size, and small type belongs in --rink.
   A headline built from line spans takes the ramp per line, because in the
   artwork every letter runs silver to blue over its own height, not over the
   height of the block it sits in. */
.chrome, .chrome span {
  background: var(--chrome-type);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(244, 248, 249, .5);
}
/* The shadow the banner casts under its letters. On the outer element only, or
   a headline set in line spans would cast it twice. */
.chrome { filter: drop-shadow(0 2px 0 rgba(1, 1, 13, .55)) }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .chrome { color: var(--rink); -webkit-text-stroke: 0 }
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

select {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--keyline, #1A407C);
  border-radius: 0;
  background-color: var(--banner, #011135);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--chrome, #C2C4CF) 50%),
    linear-gradient(135deg, var(--chrome, #C2C4CF) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-repeat: no-repeat;
  background-size: 6px 6px;
  box-shadow: var(--bevel);
  color: var(--rink, #F4F8F9);
  font: 400 15px/22px var(--mono, ui-monospace, Menlo, monospace);
  font-variant-numeric: tabular-nums;
  padding: 12px 44px 12px 14px;
}

select:hover { background-color: var(--banner-lit, #01153E); border-color: var(--gold, #CAA371) }
select:focus-visible { outline: 2px solid var(--gold, #CAA371); outline-offset: 2px }
select:disabled { cursor: not-allowed; color: var(--steel, #8290AC); box-shadow: none }
select::-ms-expand { display: none }

button, [role="button"], summary { cursor: pointer }

/* documents: rules, terms, privacy */
.doc {
  width: min(820px, calc(100% - 40px));
  margin: 48px auto 96px;
  background: var(--banner);
  border: 1px solid var(--keyline);
  border-top: 1px solid var(--gold);
  box-shadow: var(--bevel);
  padding: 48px;
}
.doc h1, .doc h2 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.doc h1 { margin: 0; font-size: clamp(28px, 4.4vw, 40px); line-height: 1 }
.doc h2 { margin: 40px 0 12px; font-size: 24px; line-height: 26px }
.doc p, .doc li { color: var(--steel) }
.doc p { margin: 16px 0 0 }
.doc strong { color: var(--rink); font-weight: 600 }
.doc a { color: var(--gold) }
.doc a:hover { color: var(--gold-lit) }
.doc ul { margin: 16px 0 0; padding-left: 20px }
.doc li + li { margin-top: 10px }
.doc .back {
  display: inline-block;
  margin-bottom: 32px;
  font: 400 12px/16px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
}
.doc .date {
  margin: 16px 0 0;
  font: 400 12px/16px var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--steel);
}
@media (max-width: 600px) { .doc { padding: 24px 20px; margin: 24px auto 64px } }

/* The settled receipt on the paid page carries the result as a sentence: who won, what the
   escrow paid, and the link to the transaction beside it. The row it sits in is set in small
   uppercase for state words, which is not how a sentence reads. */
#receipt.outcome {
  align-items: baseline;
  flex-wrap: wrap;
  text-transform: none;
}
#receipt.outcome p {
  margin: 0;
  color: var(--rink);
  font: 400 15px/22px var(--mono);
}
#receipt.outcome a {
  flex: none;
  letter-spacing: .06em;
  text-transform: uppercase;
}