/*
 * Dédale Obscur — identité visuelle de la page d'accueil.
 *
 * Tout ce qui est commun aux jeux (hero-flex, cartes de modes, FAQ, blog) vient
 * du CSS partagé, chargé juste avant celui-ci. Ce fichier ne contient QUE la
 * couleur locale : la pierre froide, l'ambre des torches et le bleu de la
 * sortie. Ne jamais y redéfinir .hero-flex ni .hero-visual — la mise en page du
 * hero est partagée, et la surcharger fait retomber l'image sous le texte.
 *
 * Contraintes de performance (Firefox) : aucun backdrop-filter sur un conteneur
 * permanent, aucune box-shadow animée en boucle, aucun décor en position fixed.
 * Les animations ne touchent que transform et opacity.
 */

.hero-dedale {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 26px 22px 30px;
  margin-bottom: 26px;
  background:
    radial-gradient(110% 85% at 18% 0%, rgba(245, 158, 11, 0.16), transparent 62%),
    radial-gradient(85% 70% at 88% 25%, rgba(125, 211, 252, 0.10), transparent 66%),
    linear-gradient(170deg, #2a2119 0%, #17130f 55%, #0a0a0c 100%);
  border: 1px solid rgba(245, 158, 11, 0.22);
}

/* Un appareil de pierre en haut du hero : deux dégradés répétés suffisent à
 * poser le donjon, sans une seule image à charger. */
.hero-dedale::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 52px;
  background:
    repeating-linear-gradient(90deg, rgba(120, 105, 84, 0.45) 0 34px, rgba(74, 64, 52, 0.45) 34px 68px);
  opacity: 0.55;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events: none;
}

.hero-flammes {
  position: absolute;
  top: 14px;
  right: 18px;
  display: flex;
  gap: 16px;
  pointer-events: none;
}

/* La déco du hero porte le même nom de classe que celle du banner des pages
 * internes, mais elle est redéfinie ICI en entier : l'accueil ne charge pas
 * css/banner.css, qui ne sert qu'aux pages internes. Sans cette définition
 * complète, les flammes du hero seraient des rectangles invisibles. */
.hero-flammes .flamme-deco {
  position: static;
  width: 17px;
  height: 25px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: linear-gradient(180deg, #fff2c4 0%, #fbbf24 42%, #ea580c 78%, #7c2d12 100%);
  opacity: 0.85;
  animation: flamme-hero 2.8s ease-in-out infinite;
}

.hero-flammes .flamme-2 { animation-delay: 0.7s; }
.hero-flammes .flamme-3 { animation-delay: 1.5s; }

@keyframes flamme-hero {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.72; }
  35%      { transform: translateY(-4px) scaleY(1.16); opacity: 1; }
  70%      { transform: translateY(-1px) scaleY(0.93); opacity: 0.84; }
}

.hero-dedale .hero-title {
  color: #fde68a;
  text-shadow: 0 2px 12px rgba(245, 158, 11, 0.35);
}

.hero-dedale .hero-h1 { color: #d6cbb8; }

/* Cartes de modes : chacune prend la teinte de ce qu'elle promet. */
.mode-card .mode-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.badge-solo   { background: rgba(245, 158, 11, 0.18); color: #fcd34d; }
.badge-defi   { background: rgba(125, 211, 252, 0.18); color: #7dd3fc; }
.badge-action { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }

.modes-header {
  text-align: center;
  font-weight: 700;
  color: #a8a094;
  margin: 6px 0 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

/* Les cartes de modes sont des liens : leur rendre l'apparence d'une carte. */
a.mode-card { text-decoration: none; display: block; }
a.mode-card h2 { margin: 6px 0 4px; }

.rules h2 { color: #f59e0b; }
.rules strong { color: #fde68a; }

@media (prefers-reduced-motion: reduce) {
  .hero-flammes .flamme-deco { animation: none; }
}