/* nt-app.css — v1.0.7
   Corrections UX par ordre de gravité :
   - Skeleton loader (UX-1)
   - Transitions entre écrans (UX-8)
   - Animation carte (UX-9)
   - Avatar initiales (UX-10)
   - Compteur joueurs lobby (UX-4)
   - Bouton copier code (UX-5)
   - Notification titre onglet (UX-15)
   - Hors-ligne overlay (UX-2)
*/

/* ============================================================
   BASE
   ============================================================ */
.ntc-app-root{
  max-width:420px;
  margin:0 auto;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ============================================================
   SKELETON LOADER — UX-1
   Affiché pendant le chargement initial du JS (remplace "Chargement…")
   ============================================================ */
.ntc-skeleton{
  background:var(--surface,#171220);
  border:1px solid var(--border-soft,rgba(255,255,255,.06));
  border-radius:18px;
  padding:28px;
}
.ntc-skeleton-line{
  border-radius:8px;
  background:linear-gradient(90deg,
    var(--border-soft,rgba(255,255,255,.06)) 25%,
    rgba(255,255,255,.10) 50%,
    var(--border-soft,rgba(255,255,255,.06)) 75%);
  background-size:200% 100%;
  animation:ntc-shimmer 1.4s infinite;
  margin-bottom:14px;
}
.ntc-skeleton-title { height:26px; width:55%; }
.ntc-skeleton-sub   { height:14px; width:80%; margin-bottom:20px; }
.ntc-skeleton-input { height:44px; width:100%; border-radius:10px; }
.ntc-skeleton-btn   { height:44px; width:100%; border-radius:22px; margin-bottom:0; }
@keyframes ntc-shimmer{
  0%   { background-position: 200% 0; }
  100% { background-position:-200% 0; }
}

/* ============================================================
   TRANSITIONS ENTRE ÉCRANS — UX-8
   Fade-in sur chaque nouveau rendu dans #ntc-app-root
   ============================================================ */
.ntc-card{
  background:var(--surface,#171220);
  border:1px solid var(--border-soft,rgba(255,255,255,.06));
  border-radius:18px;
  padding:28px;
  color:var(--text-primary,#F3EEF9);
  animation:ntc-fadein 0.22s ease;
}
@keyframes ntc-fadein{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
.ntc-card h3{
  margin-top:0;
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:400;
}

/* ============================================================
   ANIMATION CARTE — UX-9
   Flip CSS au tirage de carte
   ============================================================ */
.ntc-card-reveal{
  animation:ntc-card-flip 0.45s cubic-bezier(.4,0,.2,1) both;
}
@keyframes ntc-card-flip{
  0%  { opacity:0; transform:rotateY(-90deg) scale(.9); }
  60% { opacity:1; transform:rotateY(8deg) scale(1.02); }
  100%{ opacity:1; transform:rotateY(0) scale(1); }
}
.ntc-flip-card{ transform-style:preserve-3d; }

/* ============================================================
   INPUTS / FORMS
   ============================================================ */
.ntc-input{
  width:100%;
  box-sizing:border-box;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border-mid,rgba(255,255,255,.1));
  background:var(--bg,#0D0A13);
  color:var(--text-primary,#F3EEF9);
  margin-bottom:12px;
  font-size:14px;
  transition:border-color .15s;
}
.ntc-input:focus{
  outline:none;
  border-color:var(--brand,#B03FE8);
}

/* ============================================================
   TABS
   ============================================================ */
.ntc-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.ntc-tab{
  flex:1;
  padding:10px;
  border-radius:8px;
  border:1px solid var(--border-mid,rgba(255,255,255,.1));
  background:transparent;
  color:var(--text-secondary,#A79BB8);
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s;
}
.ntc-tab.active{
  color:#fff;
  background:var(--brand,#B03FE8);
  border-color:var(--brand,#B03FE8);
}

/* ============================================================
   MESSAGES
   ============================================================ */
.ntc-msg{ font-size:13px; color:var(--text-secondary,#A79BB8); margin-top:10px; }

/* ============================================================
   CARTE DE JEU
   ============================================================ */
.ntc-drawn-card{
  background:var(--brand,#B03FE8);
  color:#1B1330;
  padding:24px;
  border-radius:14px;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:18px;
  text-align:center;
}

/* ============================================================
   ROSTER — AVATARS INITIALES (UX-10) + COMPTEUR PRÊTS (UX-4)
   ============================================================ */
.ntc-roster{
  list-style:none;
  margin:0 0 14px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13.5px;
}
.ntc-roster li{
  background:var(--bg,#0D0A13);
  border-radius:8px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
/* Avatar initiales */
.ntc-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  color:#fff;
  flex-shrink:0;
  text-transform:uppercase;
}
/* Pulsation pour les joueurs en attente */
.ntc-avatar-waiting{
  animation:ntc-pulse 1.8s ease-in-out infinite;
}
@keyframes ntc-pulse{
  0%,100%{ opacity:1; }
  50%    { opacity:.45; }
}
/* Compteur de joueurs prêts */
.ntc-ready-counter{
  font-size:12px;
  color:var(--text-secondary,#A79BB8);
  margin-bottom:10px;
  text-align:center;
}
.ntc-ready-counter strong{ color:var(--brand,#B03FE8); }

/* ============================================================
   BOUTON COPIER CODE SALLE (UX-5)
   ============================================================ */
.ntc-code-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.ntc-code-display{
  font-size:22px;
  font-weight:800;
  letter-spacing:6px;
  color:#fff;
  font-family:Georgia,serif;
}
.ntc-copy-btn{
  background:transparent;
  border:1px solid var(--border-mid,rgba(255,255,255,.15));
  border-radius:8px;
  color:var(--text-secondary,#A79BB8);
  padding:4px 10px;
  font-size:12px;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.ntc-copy-btn:hover{ background:rgba(255,255,255,.06); color:#fff; }
.ntc-copy-btn.copied{ color:var(--brand,#B03FE8); border-color:var(--brand,#B03FE8); }

/* ============================================================
   OVERLAY HORS-LIGNE (UX-2)
   ============================================================ */
.ntc-offline-overlay{
  display:none;
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  background:#1e1230;
  border:1px solid var(--hot,#FF4C86);
  border-radius:12px;
  padding:12px 20px;
  font-size:13px;
  color:#fff;
  z-index:9999;
  text-align:center;
  max-width:340px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  animation:ntc-fadein .2s ease;
}
.ntc-offline-overlay.visible{ display:block; }

/* ============================================================
   RECONNEXION BANNER
   ============================================================ */
#ntc-reconnect-banner{
  display:none;
  background:#5c1a1a;
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  margin-bottom:14px;
  font-size:13px;
}

/* ============================================================
   BILLING
   ============================================================ */
.ntc-billing-warning{
  background:rgba(255,76,134,0.12);
  border:1px solid var(--hot,#FF4C86);
  border-radius:12px;
  padding:16px;
  margin-bottom:14px;
}
.ntc-billing-warning p{ margin:0 0 12px; font-size:13.5px; }

/* ============================================================
   STATS COMPTE
   ============================================================ */
.ntc-stats-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:18px;
}
.ntc-stat-box{
  background:var(--bg,#0D0A13);
  border-radius:12px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.ntc-stat-value{
  font-family:Georgia,serif;
  font-style:italic;
  font-size:22px;
  color:var(--brand,#B03FE8);
}
.ntc-stat-label{
  font-size:11px;
  color:var(--text-secondary,#A79BB8);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* ============================================================
   FIELDS / FORM GROUPS
   ============================================================ */
.ntc-app-root .field{ margin-bottom:16px; }
.ntc-app-root .field label{
  display:block;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.5px;
  color:var(--text-secondary,#A79BB8);
  margin-bottom:6px;
  font-weight:700;
}

/* ============================================================
   CHAT EN TEMPS RÉEL
   ============================================================ */
.ntc-chat-toggle{
  position:fixed; bottom:24px; right:24px; z-index:1000;
  width:52px; height:52px; border-radius:50%;
  background:var(--brand,#B03FE8); color:#fff;
  font-size:22px; border:none; cursor:pointer;
  box-shadow:0 4px 20px rgba(176,63,232,.4);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s;
}
.ntc-chat-toggle:hover{ transform:scale(1.08); }

.ntc-chat-badge{
  position:absolute; top:-4px; right:-4px;
  background:#E84F9A; color:#fff;
  font-size:10px; font-weight:700;
  min-width:18px; height:18px; border-radius:9px;
  align-items:center; justify-content:center;
  padding:0 4px;
}

.ntc-chat-panel{
  position:fixed; bottom:86px; right:24px; z-index:999;
  width:320px; max-width:calc(100vw - 32px);
  height:420px; max-height:60vh;
  background:var(--surface,#171220);
  border:1px solid var(--border-soft,rgba(255,255,255,.08));
  border-radius:18px;
  flex-direction:column;
  overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  animation:ntc-fadein .18s ease;
}

.ntc-chat-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--border-soft,rgba(255,255,255,.06));
  font-size:14px; font-weight:600; color:#fff;
}
.ntc-chat-close{
  background:none; border:none; color:var(--text-secondary,#A79BB8);
  font-size:16px; cursor:pointer; padding:0 4px;
}

.ntc-chat-feed{
  flex:1; overflow-y:auto; padding:12px;
  display:flex; flex-direction:column; gap:8px;
  scroll-behavior:smooth;
}
.ntc-chat-feed::-webkit-scrollbar{ width:4px; }
.ntc-chat-feed::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:2px; }

.ntc-bubble{
  max-width:78%; align-self:flex-start;
  display:flex; flex-direction:column; gap:2px;
}
.ntc-bubble-me{ align-self:flex-end; }
.ntc-bubble-author{
  font-size:11px; color:var(--brand,#B03FE8);
  font-weight:600; margin-bottom:2px;
}
.ntc-bubble-text{
  background:rgba(255,255,255,.06);
  border-radius:12px 12px 12px 4px;
  padding:8px 12px;
  font-size:14px; color:var(--text-primary,#F3EEF9);
  word-break:break-word; line-height:1.4;
}
.ntc-bubble-me .ntc-bubble-text{
  background:var(--brand,#B03FE8);
  border-radius:12px 12px 4px 12px;
  color:#fff;
}
.ntc-bubble-time{
  font-size:10px; color:var(--text-secondary,#A79BB8);
  align-self:flex-end; margin-top:2px;
}

.ntc-chat-input-row{
  display:flex; gap:8px; padding:10px 12px;
  border-top:1px solid var(--border-soft,rgba(255,255,255,.06));
}
.ntc-chat-input{
  flex:1; background:var(--bg,#0D0A13);
  border:1px solid var(--border-mid,rgba(255,255,255,.1));
  border-radius:20px; padding:8px 14px;
  color:var(--text-primary,#F3EEF9); font-size:14px;
  outline:none;
}
.ntc-chat-input:focus{ border-color:var(--brand,#B03FE8); }
.ntc-chat-send{
  width:36px; height:36px; border-radius:50%;
  background:var(--brand,#B03FE8); color:#fff;
  border:none; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:opacity .15s;
}
.ntc-chat-send:hover{ opacity:.85; }