/* Chili Creator colours (app/src/styles.css) on top of Material */
:root {
  --md-primary-fg-color: #d62828;
  --md-primary-fg-color--light: #ff3b3b;
  --md-primary-fg-color--dark: #8e1018;
  --md-accent-fg-color: #ff6b35;
  --md-accent-fg-color--transparent: rgba(255, 107, 53, 0.1);
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0c0f14;
  --md-default-bg-color--light: #10131a;
  --md-default-bg-color--lighter: #171b24;
  --md-default-fg-color: #f4f1ea;
  --md-code-bg-color: #10131a;
  --md-footer-bg-color: #07080c;
  --md-primary-fg-color: #4c0710;
  --md-accent-fg-color: #7dffb3;
  --md-typeset-a-color: #ff8a65;
}

/* Screenshots: a frame so dark shots stand out on a dark page */
.md-typeset img.shot {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
}

/* Game screens are pixel art: keep them sharp when scaled */
.md-typeset img.pixel {
  image-rendering: pixelated;
  width: 256px;
  max-width: 100%;
  border-radius: 6px;
}

/* Phone screenshots sit side by side */
.md-typeset .phones {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.md-typeset .phones img {
  width: 220px;
  max-width: 45%;
}