@import "tailwindcss";

@source "../public";

@theme {
  /* Vert Nantes — du plus profond au plus lumineux */
  --color-pitch-950: #02170f;
  --color-pitch-900: #04231a;
  --color-pitch-800: #063a28;
  --color-pitch-700: #0a5a3c;
  --color-pitch-600: #0d7a4f;
  --color-pitch-500: #12a463;
  --color-pitch-400: #2ecc80;
  --color-pitch-300: #6ee7a8;

  /* Jaune podium + noir */
  --color-gold-400: #ffd400;
  --color-gold-500: #f5c200;
  --color-ink: #0b0f0d;

  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --radius-card: 1.25rem;
}

@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    font-family: var(--font-display);
    background-color: var(--color-pitch-900);
    color: white;
    min-height: 100svh;
    overscroll-behavior-y: none;
  }

  /* Tabulation visible pour l'accessibilité clavier */
  :focus-visible {
    outline: 3px solid var(--color-gold-400);
    outline-offset: 3px;
  }
}

@layer components {
  /* Fond « terrain » : dégradé vert + lignes diagonales d'énergie */
  .field-bg {
    background-image:
      radial-gradient(120% 80% at 50% -10%, #0d7a4f 0%, transparent 60%),
      repeating-linear-gradient(
        115deg,
        rgb(255 255 255 / 0.035) 0px,
        rgb(255 255 255 / 0.035) 2px,
        transparent 2px,
        transparent 22px
      ),
      linear-gradient(180deg, #04231a 0%, #02170f 100%);
    background-attachment: fixed;
  }

  /* Bandeau incliné : signature « compétition » */
  .slant {
    transform: skewX(-8deg);
  }
  .slant > * {
    transform: skewX(8deg);
  }

  .card {
    border-radius: var(--radius-card);
    background: rgb(255 255 255 / 0.06);
    border: 1px solid rgb(255 255 255 / 0.12);
    backdrop-filter: blur(6px);
  }

  /* Gros bouton de réponse, pensé pour le pouce */
  .answer-btn {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-height: 4.25rem;
    padding: 1rem 1.125rem;
    border-radius: 1rem;
    background: white;
    color: var(--color-ink);
    font-weight: 700;
    font-size: 1.0625rem;
    line-height: 1.3;
    text-align: left;
    border: 2px solid transparent;
    transition: transform 0.08s ease, border-color 0.08s ease;
  }
  .answer-btn:active {
    transform: scale(0.985);
    border-color: var(--color-gold-400);
  }
  .answer-btn[disabled] {
    opacity: 0.55;
  }
  .answer-btn.is-picked {
    border-color: var(--color-gold-400);
    background: var(--color-gold-400);
  }

  .answer-key {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.625rem;
    background: var(--color-pitch-900);
    color: var(--color-gold-400);
    font-weight: 800;
    font-size: 1rem;
  }
  .answer-btn.is-picked .answer-key {
    background: var(--color-ink);
    color: var(--color-gold-400);
  }

  .cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.75rem;
    border-radius: 1rem;
    background: var(--color-gold-400);
    color: var(--color-ink);
    font-weight: 900;
    font-size: 1.125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: transform 0.08s ease, opacity 0.15s ease;
  }
  .cta:active {
    transform: scale(0.985);
  }
  .cta:disabled {
    opacity: 0.45;
  }

  .field {
    width: 100%;
    min-height: 3.5rem;
    border-radius: 0.875rem;
    background: rgb(255 255 255 / 0.08);
    border: 1.5px solid rgb(255 255 255 / 0.18);
    padding: 0 1rem;
    color: white;
    font-size: 1.0625rem;
  }
  .field::placeholder {
    color: rgb(255 255 255 / 0.45);
  }
  .field:focus {
    border-color: var(--color-pitch-300);
    background: rgb(255 255 255 / 0.12);
  }

  /* Chronomètre : chiffres de largeur fixe, pas de tremblement */
  .chrono {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
  }

  .label-xs {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
}

@layer components {
  .tab-btn {
    flex: none;
    padding: 0.6rem 0.95rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.6);
    white-space: nowrap;
  }
  .tab-btn:hover {
    background: rgb(255 255 255 / 0.08);
    color: white;
  }
  .tab-btn[aria-selected="true"] {
    background: var(--color-gold-400);
    color: var(--color-ink);
  }
}