/* ============================================================
   MYTHÉO — Kailash · écran MONDE (hub d'un mythe).
   Style porté du CODE RD (screens/monde.css), renommé .kailash-monde-*
   et consolidé sur les slots du cadre : le fond (figure centrale) vit
   dans .kailash-screen-bg, le titre dans le slot titre FIXE (le bon
   patron), la grille 3×3 dans .kailash-screen-body scrollable. La
   figure se révèle sous le titre ; la grille remonte par-dessus.
   ============================================================ */

/* ---- Fond : figure centrale, déborde sous les safe-areas (aucune bande) ---- */
.kailash-monde .kailash-screen-bg {
  inset: calc(-1 * var(--safe-t)) 0 calc(-1 * var(--safe-b)) 0;
  background-size: cover; background-position: center 12%; background-repeat: no-repeat;
}
.kailash-monde-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 26% at 50% 20%, rgba(11,15,22,0), rgba(11,15,22,.12) 70%),
    linear-gradient(rgba(8,10,15,.3), rgba(8,10,15,0) 22%, rgba(8,10,15,.14) 55%, rgba(8,10,15,.62) 100%);
}

/* ---- Entête (slot titre fixe du cadre) : « Mythologie / <Nom> » ---- */
.kailash-monde .kailash-screen-title h1 {
  font-size: 44px;
  text-shadow: 0 3px 24px rgba(var(--lueur),.45), 0 2px 10px rgba(0,0,0,.6);
}

/* ---- Corps scrollable : la grille remonte, révélant la figure au-dessus ---- */
.kailash-monde .kailash-screen-body { padding: 0 16px calc(var(--safe-b) + 26px); }
/* Grille 3×3 groupée au-dessus de la figure centrale (composition assumée).
   Respire un peu sur grand écran (les médaillons grandissent) sans s'éparpiller. */
.kailash-monde-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(12px, 3vw, 40px); row-gap: clamp(20px, 3.4vh, 34px);
  margin: 32vh auto 0; max-width: min(94vw, 680px);
}
/* Moins de tuiles (grades débutants) → 2 colonnes et médaillons AGRANDIS. */
.kailash-monde-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); max-width: min(88vw, 520px); }
.kailash-monde-grid[data-count="4"] .kailash-monde-disc { --k-med: clamp(128px, 26vw, 176px); }
.kailash-monde-grid[data-count="6"] { grid-template-columns: repeat(2, 1fr); max-width: min(90vw, 560px); }
.kailash-monde-grid[data-count="6"] .kailash-monde-disc { --k-med: clamp(110px, 20vw, 150px); }

/* ============================================================
   PUCE = MÉDAILLON ROND illustré (grammaire partagée de l'app :
   cf. .kailash-loc .kailash-em / .kailash-notions-orb / .kailash-playbtn).
   Structure : bouton [tuile] > disque rond [médaillon] + libellé dessous.
   - double anneau OR + NUIT + halo doux (box-shadow, comme la carte)
   - halo pulsé continu, discret (::after), désynchronisé via --b
   - flottement inactif (bob) porté par le BOUTON (translateY) tandis que
     le survol met le DISQUE à l'échelle → aucun conflit de transform
   - entrée en fondu échelonnée (kailash-fade-in partagé, via --d)
   ============================================================ */
.kailash-monde-tile {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: center;
  background: none; border: none; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation:
    kailash-monde-bob 4.6s ease-in-out var(--b, 0s) infinite,
    kailash-fade-in .5s ease var(--d, 0s) both;
}

/* Le disque = médaillon PARTAGÉ (.kailash-medallion) ; monde ne fait que
   poser sa taille (fluide) et son halo doux propre au hub. */
.kailash-monde-disc { --k-med: clamp(90px, 12vw, 118px); }
/* Halo doux pulsé, continu et discret (comme .kailash-playbtn::after). */
.kailash-monde-disc::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%; pointer-events: none;
  border: 1.5px solid rgba(var(--lueur),.36);
  animation: kailash-monde-halo 3.4s ease-out var(--b, 0s) infinite;
}
/* Survol / appui : le disque s'illumine et grossit ; l'anneau vire or clair. */
.kailash-monde-tile:hover .kailash-monde-disc {
  transform: scale(1.09);
  box-shadow:
    0 0 0 2.5px var(--or-clair), 0 0 0 4px rgba(10,14,20,.85),
    0 0 44px rgba(var(--lueur),.55), 0 8px 22px rgba(0,0,0,.55),
    inset 0 -10px 20px rgba(6,8,14,.4);
}
.kailash-monde-tile:active .kailash-monde-disc { transform: scale(.98); }

/* Libellé SOUS le médaillon (typos remontées pour la lisibilité « dès 7 ans »). */
.kailash-monde-lab {
  display: block; margin-top: 10px; text-align: center; max-width: 140px;
}
.kailash-monde-nm {
  display: block; font-family: var(--disp); font-weight: 700; font-size: 16.5px; line-height: 1.1;
  color: #fdf6e2; text-shadow: 0 2px 8px rgba(0,0,0,.9);
}
.kailash-monde-ct {
  display: block; font-family: var(--disp); font-weight: 600; font-size: 14px; color: var(--or-clair);
  margin-top: 4px; text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
/* Labels AGRANDIS quand les tuiles le sont (grades débutants). */
.kailash-monde-grid[data-count="4"] .kailash-monde-nm { font-size: 20px; }
.kailash-monde-grid[data-count="4"] .kailash-monde-ct { font-size: 15.5px; }
.kailash-monde-grid[data-count="6"] .kailash-monde-nm { font-size: 18px; }
.kailash-monde-grid[data-count="6"] .kailash-monde-ct { font-size: 15px; }

/* Flottement + halo (locaux à l'écran monde). */
@keyframes kailash-monde-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes kailash-monde-halo {
  0%   { transform: scale(.9);  opacity: .55; }
  100% { transform: scale(1.32); opacity: 0; }
}

/* Mouvement réduit : plus de flottement ni de halo pulsé (le cadre coupe déjà
   toutes les animations ; on l'explicite et on neutralise la mise à l'échelle). */
@media (prefers-reduced-motion: reduce) {
  .kailash-monde-tile,
  .kailash-monde-disc::after { animation: none; }
  .kailash-monde-disc { transition: none; }
}