/* ─── startupMenu.css — écran de démarrage + carrousel de fond ──────────────
   Extrait de multiplayerUi.js le 2026-07-11 (découpage sans risque, cf. CONTEXT.md §21) :
   CSS injecté via template literal JS (ensureMenuBackgroundStyles), ~140 lignes,
   aucune closure — anti-pattern déjà corrigé une fois sur eda.css (ex-debugLightUi.js).
   Chargé statiquement via @import dans css/style.css, plus aucune injection JS au runtime. */

.mode-screen--with-background {
  overflow: visible;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 15%, rgba(115, 190, 255, 0.16), transparent 34%),
    linear-gradient(135deg, #071019 0%, #111827 46%, #05070b 100%);
}

.mode-background-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(22, 38, 56, 0.36), rgba(2, 5, 9, 0.44));
}

.mode-background-carousel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.24) 76%),
    linear-gradient(180deg, rgba(2, 6, 12, 0.04), rgba(2, 6, 12, 0.22));
  backdrop-filter: blur(0.18px);
}

.mode-background-slide {
  position: absolute;
  inset: -3%;
  z-index: 1;
  opacity: 0;
  transform: scale(1.0);
  filter: saturate(1.18) contrast(1.07) brightness(1.03);
  transition:
    opacity 1100ms ease;
  will-change: opacity;
}

.mode-background-slide.is-active {
  z-index: 2;
  opacity: 1;
}

.mode-background-slide canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* 2026-07-17 — layout partagé uniquement ; fond/bordure/ombre déportés dans
   [data-theme="bleu"]/[data-theme="ancien"] (css/multiplayerUi.css, cf.
   CONTEXT.md §32) — .mode-panel étant thémé là-bas, seule la géométrie
   (position, marges) reste ici. */
.mode-screen--with-background .mode-panel {
  position: relative;
  z-index: 4;
  /* 2026-08-01 — CORRECTIF (demande explicite, 3e round) : le 1er essai
     ("safe center" + scroll sur .mode-screen) avait fait passer le menu
     AU-DESSUS du cadre décoratif — corrigé en revenant au schéma "ascenseur
     dans le parchemin" (cf. bloc de commentaire détaillé plus bas + règle
     [data-theme="ancien"] plus bas dans ce fichier). Le 2e essai (celui-ci
     remplacé) restait malgré tout tronqué SOUS le cadre en médiéval, sans
     aucune marge : le calcul de max-height oubliait 2 choses — (1) le
     `border: 50px solid` du parchemin médiéval (box-sizing:content-box,
     donc ces 100px s'AJOUTENT au-dessus de max-height, jamais inclus dedans)
     et (2) le fait que `margin-top` n'est PAS un plancher fixe de 120px
     comme supposé : `@media (max-height:760px)` plus bas dans ce fichier le
     fait chuter à 112px pile — une valeur non répercutée dans le calcul
     d'origine. Résultat mesuré en direct (1280×600) : le budget déclaré
     manquait 100+8=108px, et `.mode-screen` étant centré (align-items:
     center, JAMAIS "safe" — cf. raison plus haut) sans être scrollable
     lui-même, l'excédent débordait de façon invisible et imprévisible au
     lieu d'être proprement réservé en bas.
     Fix structurel : `--mp-margin-top` (custom property) porte la valeur de
     margin-top UNE SEULE FOIS ; la règle médiéval plus bas (multiplayerUi.css)
     LIT cette même variable pour son propre calcul de max-height — impossible
     que les 2 valeurs divergent à nouveau, quel que soit le breakpoint de
     margin-top actif. */
  --mp-margin-top: clamp(120px, 18vh, 180px);
  --mp-margin-bottom: 24px;
  margin-top: var(--mp-margin-top);
  margin-bottom: var(--mp-margin-bottom);
  /* IMPORTANT (piège déjà rencontré ailleurs) : `.internal-parchment` (son
     enfant unique, cf. javascript/startupMenu.js) est `display:contents` en
     thème BLEU (css/themes/bleu.css — wrapper "transparent" sans boîte
     propre, ne sert qu'au bleed du parchemin médiéval) — un `overflow-y:auto`
     posé dessus n'aurait donc AUCUN effet en bleu. Le scroll réel vit donc
     ICI par défaut (couvre le bleu). Le thème médiéval (.internal-parchment
     génère une vraie boîte avec bordure 9-slice + marge négative de bleed)
     inverse ce choix : cf. [data-theme="ancien"] .mode-screen--with-background
     .mode-panel (multiplayerUi.css), qui repasse overflow à visible ICI et
     déplace le scroll réel sur `.mode-panel > .internal-parchment` — même
     schéma que #scorePanel/.internal-parchment (base.css).
     Budget bleu : marge haute(var) + padding(28×2=56) + bordure(1×2=2) +
     marge basse(24) retranchés de 100vh. */
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--mp-margin-top) - var(--mp-margin-bottom) - 58px);
}

[data-theme="bleu"] .mode-screen--with-background .mode-panel {
  background:
    linear-gradient(160deg, rgba(8, 16, 26, 0.46), rgba(4, 8, 14, 0.28)),
    rgba(5, 10, 18, 0.24);
  border: 1px solid rgba(220, 240, 255, 0.28);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 44px rgba(120, 180, 255, 0.045);
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
}

[data-theme="bleu"] .mode-screen--with-background .mode-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.11), transparent 34%),
    radial-gradient(circle at 100% 100%, rgba(95, 170, 255, 0.08), transparent 40%);
  pointer-events: none;
}

/* Ancien : pas de glow décoratif façon verre dépoli sur le parchemin — le
   ::before (thème bleu) n'est pas repris ici, la texture de manuscrit-1.png
   (css/multiplayerUi.css) suffit à porter l'identité visuelle. */

/* 2026-07-17 — 2e fix : le passage en `top` positif laissait le logo en
   `position:absolute` bien contenu dans .mode-panel, mais toujours SORTI du
   flux normal — il se superposait donc au texte suivant (.mode-copy) au lieu
   de le pousser vers le bas, quel que soit le `top` choisi. Simplifié : le
   logo redevient un enfant normal du flux (plus de position/top/left/
   transform/z-index, plus de réservation d'espace via padding-top sur
   .mode-panel) — il prend sa place naturelle en haut de la carte et pousse
   .mode-copy en dessous via `margin-bottom`, comme n'importe quelle image de
   contenu. Taille réduite de 25% (demande explicite). */
.mode-logo {
  display: block;
  width: min(273px, 41vw);
  max-height: none;
  margin: 0 auto 14px;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, 0.52));
}

@media (max-height: 1080px) {
  .mode-logo {
    width: min(200px, 31.5vw);
  }
}

@media (max-height: 760px) {
  .mode-screen--with-background .mode-panel {
    /* 2026-08-01 — passe par la custom property (cf. règle de base plus
       haut) plutôt que margin-top directement : la règle médiéval
       (multiplayerUi.css) lit --mp-margin-top pour son propre budget de
       max-height, elle doit donc toujours voir la valeur réellement en
       vigueur, y compris sous ce breakpoint. */
    --mp-margin-top: 112px;
    margin-top: var(--mp-margin-top);
  }

  .mode-logo {
    width: min(231px, 38.9vw);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-theme="bleu"] .mode-screen--with-background .mode-panel {
    background: rgba(5, 10, 18, 0.62);
  }
}