@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .link {
    /* underline text-blue-500 hover:text-blue-800 */
    @apply underline text-blue-500 hover:text-blue-800;
  }

  .tag {
    @apply inline-flex items-center px-2 text-xs font-medium py-0.5 rounded lg:rounded-full;
  }

  .btn-primary {
    @apply shadow-xl text-center inline-flex justify-center items-center gap-2 rounded-lg bg-indigo-600 p-4 text-base font-semibold text-white hover:bg-indigo-700 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 active:text-white/70 transition-colors;
  }

  /* BGG-style rating colors */
  .bgg-rating-box {
    @apply inline-block px-3 py-2 rounded text-white font-bold text-center min-w-[4rem];
  }

  .has-rating-0 {
    background-color: #666e75 !important;
  }

  .has-rating-1,
  .has-rating-2 {
    background-color: #b2151f !important;
  }

  .has-rating-3,
  .has-rating-4 {
    background-color: #d71925 !important;
  }

  .has-rating-5,
  .has-rating-6 {
    background-color: #5369a2 !important;
  }

  .has-rating-7 {
    background-color: #1978b3 !important;
  }

  .has-rating-8 {
    background-color: #1d804c !important;
  }

  .has-rating-9,
  .has-rating-10 {
    background-color: #186b40 !important;
  }

  /* BGG-style weight colors */
  .bgg-weight-box {
    @apply inline-block px-3 py-2 rounded font-bold text-center min-w-[4rem];
  }

  .gameplay-weight-light {
    background-color: #19693f !important;
    color: white !important;
  }

  .gameplay-weight-medium {
    background-color: #b33900 !important;
    color: white !important;
  }

  .gameplay-weight-heavy {
    background-color: #ac141e !important;
    color: white !important;
  }
}