@import "tailwindcss";
/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
/* ----------------------------------------------------
   OLYMPIC THEME COLORS
   Based on the 5 Olympic rings:
   Blue, Yellow, Black, Green, Red
---------------------------------------------------- */
:root {
  --oly-blue:   #0973a8;
  --oly-gold: #cea811;
  --oly-yellow: #f4c300;
  --oly-black:  #000000;
  --oly-green:  #009f3d;
  --oly-red:    #df0024;
}

/* ----------------------------------------------------
   PAGE BACKGROUND (subtle Olympic gradient)
---------------------------------------------------- */
body {
  @apply min-h-screen flex flex-col items-center justify-start text-slate-800;
  background: radial-gradient(
      circle at top,
      var(--oly-blue) 0%,
      transparent 60%
    ),
    radial-gradient(
      circle at bottom left,
      var(--oly-yellow) 0%,
      transparent 70%
    ),
    radial-gradient(
      circle at bottom right,
      var(--oly-green) 0%,
      transparent 70%
    ),
    rgba(255, 255, 255, 0.7);
  background-blend-mode: screen;
}

/* Center wrapper */
body > div {
  @apply w-full max-w-6xl flex flex-col items-center px-4 pt-10 pb-12 sm:px-6 lg:px-8;
}

/* ----------------------------------------------------
   CARDS (points, competitors, results)
---------------------------------------------------- */
#points,
#competitors,
#results {
  @apply w-full rounded-2xl bg-white/90 shadow-lg ring-1 ring-slate-200 
         backdrop-blur text-center;
}

/* ----------------------------------------------------
   HEADER STYLING
---------------------------------------------------- */
h1 {
  @apply text-5xl font-extrabold text-black tracking-tight text-center drop-shadow-md;
}

/* Olympic underline bar under H1 */
h1::after {
  content: "";
  display: block;
  margin: 0.4rem auto 0;
  width: 200px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--oly-blue),
    var(--oly-yellow),
    var(--oly-black),
    var(--oly-green),
    var(--oly-red)
  );
}

h2 {
  @apply text-base font-bold text-black uppercase tracking-wide;
}

/* ----------------------------------------------------
   TABLES
---------------------------------------------------- */
#competitors table,
#results table {
  @apply mx-auto text-center min-w-[640px];
}

/* Table header with Olympic gradient */
/* #competitors thead tr,
#results thead tr {
  background: linear-gradient(
    to right,
    var(--oly-blue),
    var(--oly-yellow),
    var(--oly-black),
    var(--oly-green),
    var(--oly-red)
  );
} */

#competitors th,
#results th {
  @apply px-5 py-3 text-xs font-semibold uppercase tracking-wider text-white;
}

/* Table cells */
#competitors td,
#results td {
  @apply px-5 py-3 border-b border-slate-200 text-center;
}

/* Alternating row stripes */
#competitors tbody tr:nth-child(even),
#results tbody tr:nth-child(even) {
  background: rgba(0, 0, 0, 0.03);
}

/* Hover highlight */
#competitors tbody tr:hover,
#results tbody tr:hover {
  background: rgba(0, 133, 199, 0.12); /* Olympic blue tint */
  transition: background 0.2s ease;
}

/* ----------------------------------------------------
   SCORE DISPLAY (big number)
---------------------------------------------------- */
#currentPonts {
  @apply text-6xl font-extrabold tracking-tight drop-shadow-md;
  background: linear-gradient(
    90deg,
    var(--oly-blue),
    var(--oly-yellow),
    var(--oly-black),
    var(--oly-green),
    var(--oly-red)
  );
  -webkit-background-clip: text;
  color: transparent;
}

/* ----------------------------------------------------
   BADGES (±difference, points)
---------------------------------------------------- */
.badge {
  @apply inline-flex items-center justify-center rounded-full px-3 py-1 
         text-xs font-semibold ring-1 ring-inset;
}

/* Generic badge (blue by default) */
.badge-oly {
  background: var(--oly-blue);
  color: white;
  border-color: var(--oly-blue);
}

/* Gold for “best guess” */
.row-highlight {
  background: linear-gradient(135deg, #ffe17d, #ffcb3f);
  @apply ring-2 ring-yellow-400;
}

.rank-1 { color: var(--oly-gold); font-weight: 700; }
.rank-2 { color: #979797; font-weight: 700; } /* silver */
.rank-3 { color: #cd7f32; font-weight: 700; } /* bronze */
.rank-4 { color: #000000; font-weight: 500; } /* blech */