@font-face {
  font-family: Outfit;
  src: url('outfit.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url('manrope.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #07060f;
  --ink-deep: #05040c;
  --panel: rgba(18, 16, 34, 0.78);
  --primary: #494fdf;
  --primary-deep: #3036b8;
  --secondary: #ff4b8a;
  --accent: #3c8dff;
  --highlight: #e7c16a;
  --text: #f6f4ff;
  --muted: #b7b3cf;
  --success: #3ddc97;
  --danger: #ff5c7a;
  --line: rgba(255, 255, 255, 0.16);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --display: Outfit, sans-serif;
  --body: Manrope, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink-deep);
  color: var(--text);
  font-family: var(--body);
  font-weight: 560;
}

body {
  min-height: 100dvh;
}

button, input { font: inherit; color: inherit; }

button, a { -webkit-tap-highlight-color: transparent; }

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

h1, h2, h3, strong, .btn, .brand-name, .win-score, .node b, .piece b {
  font-family: var(--display);
  font-weight: 640;
  letter-spacing: -0.03em;
}

h1, h2, h3, p { margin: 0; }

p { line-height: 1.45; }

a { color: inherit; text-decoration: none; }

.ico {
  display: inline-grid;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.ico svg { width: 100%; height: 100%; }

.star-row .ico svg { fill: transparent; stroke: rgba(231, 193, 106, 0.45); }

.star-row .ico.is-on svg { fill: var(--highlight); stroke: #fff4cc; }