/* Lego Aesthetic & Multi-Device Duel Styles */
:root {
  --color-lego-red: #E3000B;
  --color-lego-yellow: #F2CD37;
  --color-lego-blue: #0055BF;
  --color-lego-green: #28AA42;
  --font-display: 'Fredoka', cursive, system-ui, sans-serif;
  --font-body: 'Quicksand', system-ui, sans-serif;
}

body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
  background-color: #1b263b;
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
}

/* Accessible touch button resets */
button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Life Brick transition */
.life-brick {
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: inline-block;
}
.life-brick.lost {
  opacity: 0.2;
  filter: grayscale(1);
  transform: scale(0.75);
}

/* Milestone popup transition */
#milestone-toast.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Crisp rendering */
canvas {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}