:root {
  /* Kinetix: graphite neutrals, one blue for actions, green for wins, red for losses */
  --bg: #0b0d12;
  --surface: #11141a;
  --surface-2: #171b22;
  --surface-3: #20252e;
  --border: #2b313c;
  --border-soft: #1d222b;
  --text: #eef1f6;
  --dim: #9ba4b3;
  --faint: #697282;

  --accent: #4d8bf7;
  --accent-ink: #050c1d;
  --accent-hi: #78a6fa;
  --brand: #4d8bf7;
  --cyan: #4d8bf7;
  --violet: #8b95e0;
  --pink: #e07aa0;
  --gold: #f5c542;
  --green: #3ecf8e;
  --red: #f0646f;
  --diamond: #4aedd9;

  /* a game card is an ordinary surface */
  --card: var(--surface);
  --card-2: var(--surface-2);
  --edge: transparent;

  /* kept as flat colours so older rules that still say gradient resolve to a single tone */
  --grad: #4d8bf7;
  --grad-gold: #f5c542;

  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --pixel: 'Jersey 15', 'Inter', system-ui, sans-serif;
  --display: var(--sans);
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --out: cubic-bezier(0.2, 0, 0, 1);
  --spring: cubic-bezier(0.2, 0, 0, 1);

  --r: 12px;
  --r-sm: 8px;
  --top: 64px;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 400 14px/1.5 var(--sans);
  font-feature-settings: 'cv11', 'ss03';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #262c37; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #343c4a; }

.ico { display: inline-grid; place-items: center; flex: none; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
.pixel { font-family: var(--pixel); font-weight: 400; letter-spacing: 0.02em; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.up { color: var(--green); }
.down { color: var(--red); }
.gold { color: var(--text); }
.grad-text, .gold-text { color: inherit; }

@keyframes pulse { 50% { opacity: 0.4; } }

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