:root {
  --vh: 1vh;

  /* Colours */
  --dark-yellow: #e7a900;
  --light-blue: #d1feff;
  --light-purp: #dfb1ff;
  --hot-pink: #ff77df;
  --med-purp: #b19eff;
  --green: #63f863;
  --dark-grey: #120303;
  --black: #000000;

  --overlay-background: rgba(0, 0, 0, 0.8);

  /* Font settings */
  --font-main: "Courier New", monospace;
  --font-size-base: 0.9rem;
  --font-size-large: 1.3rem;

  /* Social card font styles */
  --font-game-over: bold calc(2 * var(--font-size-base)) var(--font-main);
  --font-reason: calc(1.5 * var(--font-size-base)) var(--font-main);
  --font-message: calc(1.5 * var(--font-size-base)) var(--font-main);
  --font-face: var(--font-size-large) var(--font-main);
  --font-score: calc(1.3 * var(--font-size-base)) var(--font-main);

  /* Social card text colours */
  --colour-game-over: var(--hot-pink);
  --colour-reason: var(--dark-yellow);
  --colour-message: var(--med-purp);
  --colour-face: var(--light-blue);
  --colour-score: var(--green);
}






* Prevent text selection */ * {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Ensure proper scaling on iOS */
@supports (-webkit-touch-callout: none) {
  #game-container {
    height: -webkit-fill-available;
  }
}

/* Reset base styles */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  box-sizing: border-box;
  font-family: "Courier New", monospace;
  color: var(--light-purp);
}