/* ============================================================
   MYTHÉO — Kailash · écran ACCUEIL (le sélecteur de mondes).
   Catégorie `grid` du cadre unifié. Fond = NUIT ÉTOILÉE neutre
   (aucune illustration de mythe). Logo Mythéo + grandes cartes à
   couverture (langage RD .mousse-world-card) + footer léger.
   ============================================================ */

/* ---- Fond : nuit profonde + très légères lueurs chaudes (pas de nébuleuse froide) ---- */
.kailash-accueil .kailash-screen-bg {
  background:
    radial-gradient(110% 58% at 50% -12%, rgba(var(--lueur),.10), transparent 55%),
    radial-gradient(90% 50% at 50% 118%,  rgba(var(--lueur),.05), transparent 62%),
    radial-gradient(135% 100% at 50% -8%, var(--nuit-a), var(--nuit-b) 72%);
}

/* ---- Nuit étoilée : deux couches fines, tailles/opacités variées, scintillement DOUX ---- */
.kailash-accueil .kailash-screen-stars {
  background-image:
    radial-gradient(1.4px 1.4px at 9% 7%,   #fff8e6, transparent),
    radial-gradient(1px 1px   at 19% 15%,   rgba(var(--lueur),.7), transparent),
    radial-gradient(1.1px 1.1px at 28% 5%,  #fff, transparent),
    radial-gradient(.9px .9px at 38% 12%,   rgba(var(--lueur),.55), transparent),
    radial-gradient(1.3px 1.3px at 47% 6%,  #fff8e6, transparent),
    radial-gradient(1px 1px   at 57% 14%,   rgba(var(--lueur),.6), transparent),
    radial-gradient(.9px .9px at 66% 4%,    #fff, transparent),
    radial-gradient(1.2px 1.2px at 74% 11%, rgba(var(--lueur),.6), transparent),
    radial-gradient(1px 1px   at 84% 6%,    #fff, transparent),
    radial-gradient(1.4px 1.4px at 93% 13%, rgba(var(--lueur),.65), transparent),
    radial-gradient(1px 1px   at 13% 26%,   rgba(var(--lueur),.5), transparent),
    radial-gradient(.9px .9px at 34% 30%,   #fff, transparent),
    radial-gradient(1.1px 1.1px at 61% 27%, rgba(var(--lueur),.5), transparent),
    radial-gradient(1px 1px   at 88% 33%,   #fff, transparent);
  opacity: .9;
  animation: kailash-twinkle 6.5s ease-in-out infinite;
}
.kailash-accueil .kailash-screen-stars::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px    at 7% 44%,   rgba(var(--lueur),.5), transparent),
    radial-gradient(.9px .9px  at 22% 52%,  #fff, transparent),
    radial-gradient(1.2px 1.2px at 41% 47%, rgba(var(--lueur),.45), transparent),
    radial-gradient(1px 1px    at 58% 55%,  #fff, transparent),
    radial-gradient(.9px .9px  at 76% 49%,  rgba(var(--lueur),.5), transparent),
    radial-gradient(1.1px 1.1px at 91% 57%, #fff, transparent),
    radial-gradient(1px 1px    at 15% 66%,  rgba(var(--lueur),.45), transparent),
    radial-gradient(.9px .9px  at 45% 70%,  #fff, transparent),
    radial-gradient(1.1px 1.1px at 69% 64%, rgba(var(--lueur),.4), transparent),
    radial-gradient(1px 1px    at 86% 72%,  #fff, transparent);
  opacity: .65;
  animation: kailash-twinkle 9s ease-in-out infinite reverse;
}
@keyframes kailash-twinkle { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

/* ---- Entête : logo + marque + accroche (dans le slot titre fixe) ---- */
.kailash-accueil .kailash-screen-title { top: calc(var(--safe-t) + 24px); }
.kailash-accueil-logo { color: var(--or); }
.kailash-accueil-logo svg { width: 52px; height: 48px; display: inline-block; filter: drop-shadow(0 2px 16px rgba(var(--lueur),.4)); }
.kailash-accueil-brand {
  font-family: var(--disp); font-weight: 700; font-size: 30px; letter-spacing: .04em;
  color: #fbefc9; margin-top: 4px; text-shadow: 0 2px 22px rgba(var(--lueur),.4);
}
.kailash-accueil .kailash-screen-title .sub { font-style: italic; font-weight: 500; color: #cdbf9e; font-size: 14.5px; margin-top: 6px; }

/* Le corps `grid` démarre sous l'entête (logo + marque + accroche). */
.kailash-accueil .kailash-screen-body { top: calc(var(--safe-t) + 178px); }

/* ---- Grille de mondes : 1 colonne (mobile) → plusieurs (grand écran) ---- */
.kailash-worlds {
  display: grid; gap: 16px; margin: 0 auto; max-width: 1180px;
  grid-template-columns: 1fr;
}
@media (min-width: 680px)  { .kailash-worlds { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .kailash-worlds { grid-template-columns: repeat(3, 1fr); } }

/* ---- Carte-affiche d'un monde — langage RD (.mousse-world-card) ---- */
.kailash-world-card {
  position: relative; width: 100%; height: 150px; border-radius: 24px; overflow: hidden;
  cursor: pointer; border: none; padding: 0; text-align: left;
  background: var(--nuit-2); box-shadow: 0 14px 30px rgba(0,0,0,.5), inset 0 0 0 1px rgba(231,197,110,.18);
  transition: transform .12s, box-shadow .2s;
}
.kailash-world-card:active { transform: scale(.985); }
.kailash-world-card:hover { box-shadow: 0 18px 38px rgba(0,0,0,.55), inset 0 0 0 1px rgba(var(--lueur),.4); }
.kailash-wc-img  { position: absolute; inset: 0; background-size: cover; background-position: center 28%; }
.kailash-wc-grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,15,.9) 0%, rgba(8,10,15,.4) 55%, rgba(8,10,15,.1) 100%); }
.kailash-wc-txt  { position: absolute; left: 22px; top: 0; bottom: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.kailash-wc-glyph { font-family: var(--disp); font-size: 22px; color: var(--or); opacity: .85; }
.kailash-wc-name  { font-family: var(--disp); font-weight: 700; font-size: 26px; line-height: 1.02; color: var(--creme); max-width: 220px; }

/* Carte sans couverture (fallback ultime) : dégradé de la palette du monde + glyphe filigrane. */
.kailash-world-card--noimg .kailash-wc-img {
  background: radial-gradient(120% 120% at 78% 30%, rgba(var(--lueur),.28), transparent 60%),
              linear-gradient(120deg, var(--ciel-a), var(--nuit-b));
}
.kailash-world-card--noimg .kailash-wc-glyph { font-size: 30px; opacity: 1; }

/* ---- Footer léger : donne une base à la liste ---- */
.kailash-accueil-foot {
  margin: 24px auto 0; max-width: 1180px; padding-top: 18px;
  border-top: 1px solid rgba(231,197,110,.16); text-align: center;
}
.kailash-accueil-foot p { font-size: 12.5px; line-height: 1.5; color: var(--texte-doux); opacity: .7; letter-spacing: .02em; }