/* The brand's tokens, copied from the products so this page cannot drift from
 * them: whowillwin-customer-ui-trader web/src/theme.css (:root) and app.css
 * (.grad, .brand-eyebrow), which in turn took them from whowillwin-ui
 * styles/base.css. The five --lg stops are sampled from the logo itself.
 * Anything on this site that wants to look like Who Will Win? reaches for
 * these rather than inventing another blue. */
:root {
  --bg: #0b0f1a;
  --bg-elev: #131a2b;
  --bg-elev-2: #1b2338;
  --line: #26304a;
  --text: #e8edf7;
  --text-dim: #9aa6c0;
  --accent: #4f8cff;
  --accent-soft: rgba(79, 140, 255, 0.14);
  --win: #37d67a;
  --win-soft: rgba(55, 214, 122, 0.14);
  --warn: #ffb020;
  --loss: #ff6b6b;
  --radius: 16px;

  --lg1: #35aafa;   /* azure highlight along the bolt */
  --lg2: #1a62e7;   /* the shield's blue */
  --lg3: #3721cc;   /* deep indigo, its largest mass */
  --lg4: #b03ff6;   /* violet */
  --lg5: #e756fc;   /* magenta at the edge */

  --panel-line: rgba(135, 165, 255, 0.28);
  --panel-line-soft: rgba(135, 165, 255, 0.18);
  --panel-top: #1a2448;
  --panel-bottom: #111726;
  --brand-rail: linear-gradient(90deg, #5b93ff, #a78bfa 45%, #67e8f9);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@property --ring-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.grad {
  background: linear-gradient(90deg, var(--lg1), var(--lg2) 34%, var(--lg4) 68%, var(--lg5));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.grad-cool {
  background: linear-gradient(90deg, #4f8cff, #a78bfa 55%, #67e8f9);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.w-white { color: #fff; }
.brand-eyebrow {
  font-size: 0.66rem; font-weight: 900; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--text-dim);
}

/* Line icons, drawn the way the products draw theirs (24x24, round caps and
   joins, the colour of the text they sit in) instead of text glyphs: a "✓" or
   an "→" is a different shape on every machine, and some render as emoji. */
.ico { display: inline-block; width: 1em; height: 1em; flex: none; background: currentColor; vertical-align: -0.14em;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico.arrow { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ico.down { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.ico.check { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ico.expand { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E"); }

/* Gradient text is painted only inside its own box, so an italic's overhang
   and a descender's tail were being cut at the box edge. The box is widened
   (and the layout given the width back), so every letter is whole. */
.grad, .grad-cool, .grad-hot { padding: 0.06em 0.16em 0.14em 0.04em; margin: -0.06em -0.16em -0.14em -0.04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }