@import "tailwindcss";

:root {
  --ink: #0a1b33;
  --ink-2: #0f2748;
  --marble: #f4ecd8;
  --marble-2: #e9dec2;
  --gold: #c9a227;
  --gold-bright: #e7c560;
  --oxblood: #a5342a;
  --sea: #2e6e7e;
  --olive: #5e6b3b;
  --silver: #c7cdd6;
  --bronze: #b08d57;
  --text-marble: #2a2116;
  --text-mut: #7a6a4c;

  --background: var(--ink);
  --foreground: var(--marble);
}

@theme inline {
  --color-ink: var(--ink);
  --color-ink-2: var(--ink-2);
  --color-marble: var(--marble);
  --color-marble-2: var(--marble-2);
  --color-gold: var(--gold);
  --color-gold-bright: var(--gold-bright);
  --color-oxblood: var(--oxblood);
  --color-sea: var(--sea);
  --color-olive: var(--olive);
  --color-silver: var(--silver);
  --color-bronze: var(--bronze);
  --color-text-marble: var(--text-marble);
  --color-text-mut: var(--text-mut);
  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --font-heading: var(--font-cinzel);
  --font-serif: var(--font-cormorant);
  --font-sans: var(--font-manrope);
}

/* Intensité du dégradé "mer" du fond, en pourcentage — enregistrée via
   @property pour qu'un navigateur qui la supporte anime une transition
   fluide entre les deux valeurs de ambient-glow (sinon dégradation sans
   casse : la valeur du keyframe s'applique quand même, juste sans lissage
   intermédiaire). */
@property --sea-glow {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 30%;
}

body {
  --sea-glow: 30%;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, color-mix(in srgb, var(--ink-2) 75%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 100% 110%, color-mix(in srgb, var(--sea) var(--sea-glow), transparent) 0%, transparent 65%),
    var(--ink);
  background-attachment: fixed;
  color: var(--foreground);
  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
}

*:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

/* Carte "marbre" : surface claire avec léger grain, bordure dorée fine. */
.marble-surface {
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--marble-2) 65%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 82% 88%, color-mix(in srgb, var(--marble-2) 55%, transparent) 0%, transparent 48%),
    linear-gradient(150deg, var(--marble) 0%, var(--marble) 55%, var(--marble-2) 100%);
  color: var(--text-marble);
}

/* Frise à méandre (motif grec), séparateur horizontal discret. */
.meander-divider {
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='10' viewBox='0 0 32 10'%3E%3Cpath d='M0 8 H6 V2 H16 V8 H22 V2 H32' fill='none' stroke='%23C9A227' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  background-size: 32px 10px;
  opacity: 0.45;
}

@keyframes points-flash {
  0% {
    background-color: color-mix(in srgb, var(--gold-bright) 55%, transparent);
  }
  100% {
    background-color: transparent;
  }
}

.animate-points-flash {
  animation: points-flash 900ms ease-out;
}

/* Chiffre romain "gravé" dans le socle du podium. */
.engraved {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35),
    0 -1px 1px rgba(0, 0, 0, 0.35);
}

/* Socle du podium : marbre veiné + arête lumineuse en haut. */
.pedestal-marble {
  position: relative;
  background:
    linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.12) 18%, transparent 32%),
    linear-gradient(80deg, transparent 55%, rgba(255, 255, 255, 0.08) 68%, transparent 80%),
    linear-gradient(180deg, color-mix(in srgb, var(--marble) 92%, white) 0%, var(--marble) 40%, var(--marble-2) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    0 10px 18px -6px rgba(10, 27, 51, 0.55);
}

.podium-glow {
  box-shadow: 0 0 30px 6px color-mix(in srgb, var(--gold-bright) 45%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  /* Mer de nuit qui respire très lentement, plutôt qu'un fond figé — reste
     imperceptible comme un vrai mouvement, juste une ambiance qui vit. */
  @keyframes ambient-glow {
    from {
      --sea-glow: 22%;
    }
    to {
      --sea-glow: 42%;
    }
  }

  body {
    animation: ambient-glow 40s ease-in-out infinite alternate;
  }

  /* Léger halo doré respirant sur les cartes marbre, façon lueur de
     torche — un outline (jamais box-shadow/border, déjà utilisés par les
     classes Tailwind de chaque carte) pour ne jamais entrer en conflit
     avec l'ombre/la bordure propres à chaque usage. N'affecte pas la mise
     en page (outline ne prend pas de place). */
  @keyframes card-flicker {
    0%,
    100% {
      outline-color: transparent;
    }
    50% {
      outline-color: color-mix(in srgb, var(--gold) 35%, transparent);
    }
  }

  .marble-surface {
    outline: 1px solid transparent;
    outline-offset: 2px;
    animation: card-flicker 7s ease-in-out infinite;
  }

  @keyframes podium-rise {
    0% {
      opacity: 0;
      transform: translateY(28px) scale(0.92);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  .animate-podium-rise {
    animation: podium-rise 600ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }

  @keyframes wreath-pop {
    0% {
      opacity: 0;
      transform: scale(0.5) translateY(6px);
    }
    70% {
      opacity: 1;
      transform: scale(1.08) translateY(0);
    }
    100% {
      transform: scale(1) translateY(0);
    }
  }

  .animate-wreath-pop {
    animation: wreath-pop 500ms cubic-bezier(0.2, 0.7, 0.3, 1) 500ms both;
  }

  @keyframes reveal-pop {
    0% {
      opacity: 0;
      transform: scale(0.82);
      box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold-bright) 0%, transparent);
    }
    60% {
      opacity: 1;
      transform: scale(1.04);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 40px 8px color-mix(in srgb, var(--gold-bright) 45%, transparent);
    }
  }

  .animate-reveal {
    animation: reveal-pop 700ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  }

  /* Simple fondu, sans mise à l'échelle — contrairement à reveal-pop,
     utilisé sur des pièces de La Corne d'Abondance dont la taille exacte
     doit être lisible dès la première frame (reveal-pop passe par 82% puis
     104% avant de se stabiliser à 100%, ce qui faisait paraître une pièce
     tout juste lâchée d'une taille différente de celle annoncée). */
  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .animate-fade-in {
    animation: fade-in 200ms ease-out both;
  }

  /* Avertissement de débordement (La Corne d'Abondance) : clignote sur les
     pièces qui dépassent la ligne de danger pendant le délai de grâce
     avant game over, pour signaler que le compte à rebours est en cours. */
  @keyframes danger-blink {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.25;
    }
  }

  .animate-danger-blink {
    animation: danger-blink 500ms ease-in-out infinite;
  }

  /* Confettis de fin de partie (Le Vol d'Icare) : chute + rotation + fondu,
     dérive latérale et vitesse propres à chaque confetti via variables CSS. */
  @keyframes confetti-fall {
    0% {
      transform: translate(0, -10%) rotate(0deg);
      opacity: 1;
    }
    100% {
      transform: translate(var(--confetti-drift, 0px), 340px) rotate(var(--confetti-spin, 360deg));
      opacity: 0;
    }
  }

  .animate-confetti-fall {
    animation: confetti-fall 1200ms ease-in both;
  }
}