/* Design tokens, reset and typography. */

:root {
  /* Colour */
  --ink: #D9D1B0;
  --ink-hover: #EEE9D6;
  --ink-muted: #B9B6AF;
  --ink-faint: #8A877F;
  --rule: rgba(217, 209, 176, .55);
  --rule-dashed: rgba(217, 209, 176, .75);
  --page: #050505;
  --scorecard-page: #121212;
  --iau: #D07A5C;
  --you: #D9D1B0;
  --average: #8FA6AD;
  --tint: #a08a62;

  /* Type */
  --font-main: 'Space Mono', ui-monospace, monospace;
  --font-glitch: 'Nova Mono', monospace;
  --title-size: clamp(44px, 14vmin, 150px);
  --message-size: clamp(14px, calc(1.1vmin + 10px), 20px);
  --button-size: 14px;
  --skip-size: 10px;
  --label-size: 9px;
  --wide-tracking: .22em;

  /* Spacing */
  --screen-padding: 24px;
  --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);
  --message-bottom: 28px;
  --message-gap: 22px;
  --button-height: 64px;
  --narrow-screen: 600px; /* reference only: media queries can't read custom properties */

  /* Motion */
  --slide: transform 1.8s cubic-bezier(.65, 0, .35, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--page);
}

body {
  font-family: var(--font-main);
  color: var(--ink);
}

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

ul {
  padding: 0;
  list-style: none;
}

a {
  color: var(--ink);
}

a:hover {
  color: var(--ink-hover);
}

button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* About 30% of characters in messages and labels are swapped into Nova Mono. */
.glitch-glyph {
  font-family: var(--font-glitch);
}