/* app/menus/accueil.css — l'accueil « Arène vivante » (app/menus/accueil.js) : la carte du moteur devient
   un écran entier, transparent, posé sur le décor où tourne la partie de démonstration ; le
   texte à gauche (en bas sur un téléphone debout), sur un voile qui s'efface vers la droite. */
/* .arena-root devant : plus précis que les règles du petit écran (app/menus/petit-ecran.css). */
.arena-root .arena-panel-wrap:has(.accueil){padding:0;}
/* Pas de voile sur l'accueil : celui qui est ouvert (pas une page préparée d'avance pour le glissé), ou
   celui qui arrive en glissant (.glisse-accueil, app/menus/glisser.js). */
.arena-root.dim:has(> .arena-panel-wrap:not(.arena-double) .accueil)::before,.arena-root.dim.glisse-accueil::before{opacity:0;}
.arena-root .arena-panel:has(> .accueil){position:absolute;inset:0;width:auto;max-width:none;height:100%;max-height:none;padding:0;border:0;border-radius:0;
 background:none;box-shadow:none;overflow:hidden;}
.arena-root .arena-panel:has(> .accueil)::before{display:none;}
.accueil{position:absolute;inset:0;}
.accueil-demo{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .6s;}
.accueil-demo[data-vivant]{opacity:1;}
.accueil-voile{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,rgba(4,3,12,.95) 0,rgba(4,3,12,.9) 52%,rgba(4,3,12,.55) 62%,rgba(4,3,12,0) 78%);} /* plein sous la colonne, puis fondu */
/* Peint par la démonstration dans son canevas (voileEnToile, app/menus/accueil.js) : un calque plein écran de moins. */
.accueil.voile-toile > .accueil-voile{visibility:hidden;}
.accueil-col{position:absolute;left:calc(5% + env(safe-area-inset-left,0px));top:0;bottom:calc(8px + env(safe-area-inset-bottom,0px));width:min(48%,460px);
 display:flex;flex-direction:column;justify-content:center;gap:12px;}

/* Le titre et le compteur de cristaux sur une ligne (le compteur à droite, comme ailleurs). */
.accueil-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;}
.accueil-tete .aerg-compteur{flex:none;}
/* Nom du jeu et sous-titre « Survival Arena » en petites capitales espacées, sous le titre. */
.accueil-nom{min-width:0;}
.accueil-sous-titre{margin-top:6px;font-size:clamp(12px,2.1vw,19px);font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#7fefff;text-shadow:0 0 12px rgba(0,224,255,.45);white-space:nowrap;}
/* « ReziHord » en petites capitales : tout en majuscules, R et H plus grands (Tris, 28/10) ; les copies du glitch suivent. */
/* Titre qui « glitche » : deux copies décalées, cyan et rose, qui sautent de temps en temps. Isolé
   (isolation) : le mélange « screen » des copies ne lit que le titre, au lieu de faire recomposer tout
   l'accueil hors écran à chaque image (A16, 24/10 : le menu tombait à 39-47 i/s). */
.arena-title.accueil-titre{position:relative;isolation:isolate;margin:0;text-transform:none;font-variant-caps:small-caps;font-size:clamp(34px,7vw,72px);line-height:.92;color:#fff;background:none;
 -webkit-text-fill-color:#fff;text-shadow:0 0 24px rgba(0,224,255,.35);}
/* Les copies sans le halo du titre : coupé net par leur découpe, il dessinait un rectangle derrière le nom (Tris, 31/10). */
.accueil-titre::before,.accueil-titre::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;text-shadow:none;}
.accueil-titre::before{-webkit-text-fill-color:#00e0ff;clip-path:inset(0 0 55% 0);animation:accueilGlitch 2.4s steps(2) infinite;}
.accueil-titre::after{-webkit-text-fill-color:#ff2fd0;clip-path:inset(55% 0 0 0);animation:accueilGlitch 1.9s steps(2) infinite reverse;}
/* Sur téléphone, la règle des titres du petit écran (22-24 px) l'emportait : le nom du jeu a ses
   propres tailles, plus grandes (Tris, 28/10) ; le sous-titre se serre en hauteur pour ne rien pousser. */
html.petit-ecran .arena-title.accueil-titre{margin:0;font-size:36px;}
html.petit-ecran .accueil-sous-titre{margin-top:4px;font-size:14px;line-height:1.1;}
@media (orientation:landscape){
 html.petit-ecran .arena-title.accueil-titre{font-size:31px;}
 html.petit-ecran .accueil-sous-titre{margin-top:2px;font-size:17px;line-height:1;}
}
@media (orientation:landscape) and (max-height:380px){
 html.petit-ecran .arena-title.accueil-titre{font-size:29px;}
 html.petit-ecran .accueil-sous-titre{font-size:16px;}
}
@keyframes accueilGlitch{0%,84%{translate:0 0;}87%{translate:-5px 1px;}91%{translate:4px -1px;}95%{translate:-2px 0;}}

/* Le départ : votre perso (portrait, nom, niveau, appuis ; le toucher ouvre le choix) et « Déployer »,
   qui part avec lui, côte à côte, sous le pouce droit. */
.accueil-depart{display:flex;gap:8px;align-items:stretch;}
.accueil-perso{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:12px;cursor:pointer;text-align:left;
 font:inherit;color:#e7e9ee;background:rgba(18,16,36,.92);border:1px solid rgba(0,224,255,.3);}
.accueil-perso:focus-visible{border-color:#00e0ff;background:linear-gradient(rgba(0,224,255,.1),rgba(0,224,255,.1)),rgba(18,16,36,.92);outline:none;}@media (hover:hover){:where(html:not(.doigt)) .accueil-perso:hover{border-color:#00e0ff;background:linear-gradient(rgba(0,224,255,.1),rgba(0,224,255,.1)),rgba(18,16,36,.92);outline:none;}}
.accueil-portrait{flex:none;width:52px;height:52px;border-radius:10px;background:radial-gradient(circle at 50% 45%,rgba(0,224,255,.16),rgba(5,6,12,.9) 70%);}
.accueil-perso-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;}
.accueil-perso-txt b{font-size:15px;font-weight:800;color:#7ff3ff;white-space:nowrap;}
.accueil-perso-txt small{font-size:11.5px;line-height:1.2;color:#9ea6bd;}
.accueil-changer{flex:none;font-size:11px;font-weight:800;color:#7ff3ff;letter-spacing:.02em;}
.accueil-changer::after{content:" ›";}
.arena-btn.primary.accueil-jouer{flex:0 0 36%;height:auto;min-height:62px;padding:0 10px;font-size:18px;letter-spacing:.14em;} /* 36 % : la tuile Multijoueur à sa droite (app/multi/multijoueur.css) */
/* Bandeau qui défile en bas : retiré (BANDEAU_DEFILANT, app/menus/accueil.js), styles gardés de côté. */
.accueil-bandeau{position:absolute;left:0;right:0;bottom:0;height:28px;overflow:hidden;white-space:nowrap;pointer-events:none;
 font:600 12px/28px system-ui,sans-serif;color:#e8ecf5;background:rgba(0,224,255,.08);border-top:1px solid rgba(0,224,255,.3);}
/* Défilement en transform (animé hors du fil principal par Firefox comme par Chrome), calque
   préparé d'avance ; la démo derrière est en images cuites (app/menus/accueil.js) pour ne pas lui voler
   d'images. */
.accueil-bandeau div{display:inline-block;padding-left:100%;animation:accueilDefile 40s linear infinite;will-change:transform;}
.accueil-bandeau b{color:#7ff3ff;font-weight:800;}
@keyframes accueilDefile{from{transform:translate3d(0,0,0);}to{transform:translate3d(-100%,0,0);}}

/* Les règles du jeu : un volet pleine page, par-dessus l'accueil (ouvert depuis les paramètres) ; son contenu, des
   pages sans défilement, est dessiné par app/menus/regles.css. */
.accueil-volet{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;background:linear-gradient(180deg,#0e0c1e,#080712);}
.accueil-volet[hidden]{display:none;}

/* Téléphone debout : le texte en bas, le voile monte du bas. Le départ s'empile : votre perso sur
   toute la largeur (son nom entier), « Déployer » dessous. */
@media (orientation:portrait){
 .accueil-voile{background:linear-gradient(0deg,rgba(4,3,12,.95) 0,rgba(4,3,12,.8) 45%,rgba(4,3,12,0) 75%);}
 .accueil-col{left:16px;right:16px;width:auto;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));justify-content:flex-end;}
 .accueil-depart{flex-direction:column;}
 .accueil-perso-txt b{font-size:16px;}
 .arena-btn.primary.accueil-jouer{flex:none;min-height:58px;}
}
/* Téléphone couché, peu de hauteur : plus serré. */
@media (orientation:landscape) and (max-height:430px){
 .accueil-col{gap:9px;bottom:6px;}
 .arena-title.accueil-titre{font-size:clamp(28px,5.6vw,46px);}
}
@media (prefers-reduced-motion:reduce){.accueil-titre::before,.accueil-titre::after,.accueil-bandeau div{animation:none;}}
html.econome .accueil-titre::before,html.econome .accueil-titre::after{animation:none;}
/* Hors partie (accueil, persos, atelier…), le canevas du jeu est vide : caché, la carte graphique n'a
   plus à le composer à chaque image (A16, 24/10). L'écran de fin garde la partie figée derrière. */
html:not(.arene-fin) .arena-root:not(.playing) > .arena-canvas{visibility:hidden;} /* arene-fin : marquerRacine, app/main.js */