@import "tailwindcss";

@font-face {
  font-family: 'Clear Sans';
  src: url('/fonts/ClearSans-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Clear Sans';
  src: url('/fonts/ClearSans-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

:root {
  --grid-gap: 15px;
  --grid-padding: 15px;
  --cell-size: 106.25px;
  --container-size: 500px;
  --title-size: 80px;
  --score-value-size: 25px;
  --overlay-msg-size: 60px;
  --tile-font-1: 55px;
  --tile-font-2: 45px;
  --tile-font-3: 35px;
  --tile-font-4: 25px;
  --tile-font-5: 15px;
}

@media (max-width: 520px) {
  :root {
    --grid-gap: 10px;
    --grid-padding: 10px;
    --cell-size: 57.5px;
    --container-size: 280px;
    --title-size: 45px;
    --score-value-size: 16px;
    --overlay-msg-size: 35px;
    --tile-font-1: 30px;
    --tile-font-2: 25px;
    --tile-font-3: 20px;
    --tile-font-4: 14px;
    --tile-font-5: 10px;
  }
}

body {
  background: #faf8ef;
  font-family: 'Clear Sans', 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
}

@keyframes tile-pop {
  0% { scale: 0; }
  100% { scale: 1; }
}

@keyframes overlay-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes score-float {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-30px); }
}

@keyframes tile-merge {
  0% { scale: 1; }
  50% { scale: 1.2; }
  100% { scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}