/* =========================================================================
   POTOS — Mode en ligne : pastille de reconnexion, indicateur « En ligne »,
   joueurs déconnectés, exclusion, ajout de bot, aperçu d'invitation.
   S'appuie sur les jetons de css/theme.css (« Soirée jeux ») et les composants de css/styles.css (.chip, .btn…).
   ========================================================================= */
@layer components {
  /* ---------- Pastille « 🔌 Reconnexion… » ---------- */
  .net-pill {
    position: fixed; z-index: 99; left: 50%; top: calc(10px + env(safe-area-inset-top)); translate: -50% 0;
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 12px;
    font-weight: 700; font-size: .85rem; color: var(--text);
    background: linear-gradient(90deg, rgb(var(--warn-rgb) / .18), rgb(var(--warn-rgb) / .06)), var(--glass-strong);
    border: 1px solid rgb(var(--warn-rgb) / .65); border-radius: 999px; box-shadow: 0 0 22px -4px rgb(var(--warn-rgb) / .6);
    animation: net-pill-in .4s var(--spring) both; pointer-events: none;
  }
  .net-pill[hidden] { display: none; }
  .net-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px var(--warn); animation: net-blink 1s ease-in-out infinite; }

  /* ---------- Indicateur « 🟢 En ligne » (remplace le bandeau / la puce démo) ---------- */
  .demo-banner.net-banner { display: flex; align-items: center; gap: 8px; color: var(--text); background: rgb(var(--ok-rgb) / .08); border-color: rgb(var(--ok-rgb) / .55); }
  .net-live { color: var(--text); border-color: rgb(var(--ok-rgb) / .55); background: rgb(var(--ok-rgb) / .08); }
  .net-live .live-dot, .net-banner .live-dot { flex: none; }

  /* ---------- Joueurs : déconnectés, spectateurs, départs ---------- */
  #players > li { position: relative; }
  .player-tile.is-off { background: var(--surface-2); border-style: dashed; border-color: var(--line-2); box-shadow: none; }
  .player-tile.is-off .pav { filter: grayscale(1) opacity(.5); }
  .player-tile.is-off .pname { opacity: .55; }
  .badge-off, .badge-spec {
    position: absolute; bottom: 30%; right: 8%; display: grid; place-items: center; width: 26px; height: 26px;
    font-size: 14px; border-radius: 50%; background: var(--bg-3); border: 1px solid var(--line-hi);
    box-shadow: 0 0 10px rgb(var(--accent-rgb) / .35); animation: join-pop .45s var(--spring) both;
  }
  .badge-off { animation: join-pop .45s var(--spring) both, net-snore 2.4s ease-in-out .5s infinite; }
  .badge-off[hidden], .badge-spec[hidden] { display: none; }
  .player-tile.is-leaving { pointer-events: none; animation: net-leave .45s cubic-bezier(.5, 0, .75, 0) forwards; }

  /* ---------- Exclure un joueur (hôte) ---------- */
  .kick-btn {
    position: absolute; z-index: 2; top: -9px; left: -7px; display: grid; place-items: center;
    width: 26px; height: 26px; font-size: 12px; font-weight: 900; line-height: 1; cursor: pointer;
    color: var(--on-neon); background: var(--danger); border: 2px solid var(--bg); border-radius: 50%;
    box-shadow: 0 0 12px rgb(var(--danger-rgb) / .8); opacity: .9; scale: .9;
    transition: scale .2s var(--spring), opacity .2s;
  }
  .kick-btn:hover, .kick-btn:focus-visible { opacity: 1; scale: 1.12; }
  @media (hover: hover) {
    .kick-btn { opacity: 0; scale: .6; }
    #players > li:hover .kick-btn, .kick-btn:focus-visible { opacity: 1; scale: 1; }
  }

  /* ---------- Place vide « 🤖 Ajouter un bot » (hôte) ---------- */
  .slot-empty.slot-bot { color: var(--muted); border-color: rgb(var(--accent-3-rgb) / .55); }
  .slot-empty.slot-bot:hover, .slot-empty.slot-bot:focus-visible { color: var(--text); border-color: var(--accent-3); background: rgb(var(--accent-3-rgb) / .08); }
  .slot-empty.slot-bot .plus { border-style: solid; font-size: 18px; animation: none; }

  /* Compte à rebours en ligne : seul l'hôte peut annuler (sûr même si Tailwind n'est pas chargé) */
  #countdown [data-action="cancel-start"][hidden] { display: none; }

  /* ---------- Bouton principal en attente de l'hôte (phase résultats) ---------- */
  #btn-start.is-waiting { cursor: default; animation: net-wait 2.4s ease-in-out infinite; }

  /* ---------- Aperçu d'invitation : chargement / salon introuvable ---------- */
  /* Squelette : aplat fixe + reflet sur un pseudo-élément déplacé par transform (composité, cf. docs/fluidite.md) */
  .invite-hero.is-loading #invite-title, .invite-hero.is-loading #invite-sub {
    position: relative; overflow: hidden; color: transparent; border-radius: 6px; background: var(--glass-3);
  }
  .invite-hero.is-loading #invite-title::after, .invite-hero.is-loading #invite-sub::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .2), transparent);
    transform: translateX(100%); animation: net-shimmer 1.2s linear infinite;
  }
  .invite-hero.is-lost { border-color: rgb(var(--danger-rgb) / .7); background: rgb(var(--danger-rgb) / .08); box-shadow: inset 0 0 22px rgb(var(--danger-rgb) / .1); }
  .invite-hero.is-lost .stack > * { background: var(--bg-3); font-size: 22px; }
  .invite-hero .net-emoji { display: grid; place-items: center; width: 44px; height: 44px; flex: none; font-size: 28px; }
}

@keyframes net-pill-in { from { opacity: 0; transform: translateY(-14px) scale(.9); } }
@keyframes net-blink { 50% { opacity: .25; } }
@keyframes net-leave { 0% { transform: none; opacity: 1; } 30% { transform: scale(1.06); } 100% { transform: scale(0, .05); opacity: 0; } }
@keyframes net-snore { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-3px) rotate(6deg); } }
@keyframes net-wait { 50% { opacity: .8; } } /* opacity : composité (un filtre animé repeindrait le bouton) */
@keyframes net-shimmer { to { transform: translateX(-100%); } }

@media (prefers-reduced-motion: reduce) {
  .net-pill-dot, .badge-off, #btn-start.is-waiting { animation: none !important; }
}