/* v2.2.0 — écran de chargement, erreurs réseau, reconnexion */

/* écran de chargement : écrit directement dans index.html, visible avant même que le JavaScript ne soit chargé */
.nsplash{min-height:100vh;min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:24px;color:var(--mu,#9fb8a8)}
.nsplash img{width:84px;height:84px;object-fit:contain;border-radius:22px;animation:nbreath 1.8s ease-in-out infinite}
.nbrand{font:800 1.1rem var(--disp,inherit);letter-spacing:.32em;color:var(--ac,#c6ff3d)}
.nspin{width:28px;height:28px;border-radius:50%;border:3px solid #ffffff26;border-top-color:var(--ac,#c6ff3d);animation:nspin .8s linear infinite}
.nsplash small{max-width:300px;opacity:0;animation:nshow .4s 8s forwards}
.nsplash small a{color:var(--ac,#c6ff3d);text-decoration:underline;cursor:pointer}
@keyframes nspin{to{transform:rotate(360deg)}}
@keyframes nbreath{50%{transform:scale(1.06)}}
@keyframes nshow{to{opacity:1}}

/* barre fine en haut pendant les requêtes lentes */
.nbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:6000;overflow:hidden;pointer-events:none;background:#ffffff14}
.nbar::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:38%;background:var(--ac,#c6ff3d);border-radius:3px;animation:nbar 1.1s ease-in-out infinite}
@keyframes nbar{to{left:100%}}

/* bandeaux : connexion perdue / retrouvée, adversaire déconnecté */
.nbn{position:fixed;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top,0px));z-index:5000;max-width:min(92vw,460px);box-sizing:border-box;padding:9px 16px;border-radius:99px;font-size:.84rem;font-weight:700;line-height:1.3;text-align:center;color:#fff;pointer-events:none;
  background:#10241aee;border:1px solid #ffffff2e;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 24px -8px #000a;animation:nbin .25s both}
.nbn.opp{top:calc(54px + env(safe-area-inset-top,0px))}
.nbn.k-down{background:#3b1c12ee;border-color:#ff9a6b66}
.nbn.k-ok{background:#0e3a1dee;border-color:#6bff8f66}
.nbn.k-warn{background:#3a2f10ee;border-color:#ffd36b66}
@keyframes nbin{from{opacity:0;transform:translate(-50%,-8px)}}

/* écran « serveur injoignable » */
.nfull{min-height:100vh;min-height:100dvh;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:24px}
.nfull .nic{font-size:3rem;line-height:1}
.nfull h2{margin:.1em 0}
.nfull .nmsg{max-width:340px;color:var(--mu,#9fb8a8);margin:0}
.nfull .nsub{margin:4px 0 8px;color:var(--mu,#9fb8a8);font-size:.9rem}

@media (prefers-reduced-motion:reduce){.nsplash img,.nspin,.nbar::after{animation-duration:3s}.nbn{animation:none}}
.nerr{display:grid;justify-items:center;gap:10px;padding:24px 8px}
.nerr p{margin:0;max-width:340px}