/* app/accueil.css — l'accueil « Arène vivante » (app/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/petit-ecran.css). */
.arena-root .arena-panel-wrap:has(.accueil){padding:0;}
.arena-root.dim:has(.accueil)::before{background:transparent;}
.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%;}
.accueil-voile{position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(90deg,rgba(4,3,12,.94) 0,rgba(4,3,12,.78) 38%,rgba(4,3,12,0) 70%);}
.accueil-col{position:absolute;left:calc(5% + env(safe-area-inset-left,0px));top:0;bottom:30px;width:min(48%,460px);
 display:flex;flex-direction:column;justify-content:center;gap:12px;}

/* Titre qui « glitche » : deux copies décalées, cyan et rose, qui sautent de temps en temps. */
.arena-title.accueil-titre{position:relative;margin:0;font-size:clamp(30px,6.4vw,62px);line-height:.92;color:#fff;background:none;
 -webkit-text-fill-color:#fff;text-shadow:0 0 24px rgba(0,224,255,.35);}
.accueil-titre::before,.accueil-titre::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;}
.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;}
@keyframes accueilGlitch{0%,84%{translate:0 0;}87%{translate:-5px 1px;}91%{translate:4px -1px;}95%{translate:-2px 0;}}

.accueil-stats{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12.5px;color:#9ea6bd;}
.accueil-stats b{display:block;font:900 22px/1.1 system-ui,sans-serif;color:#fff;font-variant-numeric:tabular-nums;}
.accueil-col .accueil-accroche{margin:0;font-size:14px;color:#c9cfe0;}
.arena-btn.primary.accueil-jouer{flex:none;align-self:flex-start;height:auto;padding:15px 48px 15px 44px;font-size:18px;letter-spacing:.16em;}
.accueil-icones{display:flex;gap:8px;}
.accueil-ico{display:flex;flex-direction:column;align-items:center;gap:1px;width:66px;padding:7px 0 6px;border-radius:12px;cursor:pointer;
 font:600 11px system-ui,sans-serif;color:#cfd5e4;background:rgba(255,255,255,.06);border:1px solid rgba(0,224,255,.18);}
.accueil-ico:hover,.accueil-ico:focus-visible{border-color:rgba(0,224,255,.55);background:rgba(0,224,255,.1);outline:none;}
.accueil-ico span{font-size:19px;line-height:1.2;}
.accueil-col .arena-keys{margin:2px 0 0;}

/* Bandeau qui défile en bas. */
.accueil-bandeau{position:absolute;left:0;right:0;bottom:0;height:28px;overflow:hidden;white-space:nowrap;pointer-events:none;
 font:700 12px/28px system-ui,sans-serif;color:#7ff3ff;background:rgba(0,224,255,.08);border-top:1px solid rgba(0,224,255,.3);}
.accueil-bandeau div{display:inline-block;padding-left:100%;animation:accueilDefile 26s linear infinite;}
@keyframes accueilDefile{to{translate:-100% 0;}}

/* Volet des règles, par-dessus, à droite. */
.accueil-volet{position:absolute;top:0;right:0;bottom:0;width:min(680px,100%);box-sizing:border-box;overflow:auto;padding:18px 20px 24px;
 background:rgba(8,7,18,.97);border-left:1px solid rgba(0,224,255,.25);box-shadow:-20px 0 60px rgba(0,0,0,.6);touch-action:pan-y;overscroll-behavior:contain;}
.accueil-volet[hidden]{display:none;}
.accueil-volet h3{margin:0 0 8px;font:900 18px/1.2 'Arial Black',system-ui,sans-serif;text-transform:uppercase;color:#7ff3ff;}
.accueil-fermer{position:sticky;top:0;float:right;z-index:1;width:36px;height:36px;border-radius:50%;cursor:pointer;
 font:700 20px/1 system-ui;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(0,224,255,.3);}

/* Téléphone debout : le texte en bas, le voile monte du bas. */
@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:44px;justify-content:flex-end;}
}
/* Téléphone couché, peu de hauteur : plus serré. */
@media (orientation:landscape) and (max-height:430px){
 .accueil-col{gap:9px;bottom:28px;}
 .arena-title.accueil-titre{font-size:clamp(28px,5.6vw,46px);}
 .accueil-stats b{font-size:18px;}
 .arena-btn.primary.accueil-jouer{padding:12px 40px;font-size:16px;}
 .accueil-ico{width:58px;padding:5px 0 4px;}
 .accueil-ico span{font-size:16px;}
}
@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;}