/* ================================================
   COMPONENTS — Caméras, Jeux, Overlay, Messages
   ================================================ */

/* ────────────────────────────────
   Caméras
──────────────────────────────── */

.camera-grid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  width: 100%;
}

.cam {
  height: 100%;
  aspect-ratio: 16 / 9;
  max-width: calc((100% - 18px) / 4);
  min-width: 0;
  flex-shrink: 1;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border-cam);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  /* glow or intérieur subtil */
  box-shadow:
    inset 0 0 20px rgba(201, 168, 76, 0.04),
    0 0 0 0.5px rgba(201, 168, 76, 0.10);
  transition: border-color 0.3s, box-shadow 0.3s;
  contain: layout paint;
}

/* coin accent or en haut à gauche de chaque cam */
.cam::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 1px;
  background: var(--gold);
  opacity: 0.6;
}
.cam::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 16px;
  background: var(--gold);
  opacity: 0.6;
}

.cam-label {
  position: absolute;
  bottom: 5px;
  left: 6px;
  font-family: var(--font-display);
  font-size: clamp(6px, 1.6vw, 9px);
  color: var(--color-cam-label);
  letter-spacing: 2px;
  text-transform: uppercase;
  pointer-events: none;
}

.cam-icon {
  font-size: clamp(12px, 3vw, 18px);
  color: var(--color-cam-icon);
  user-select: none;
}

/* Mode Solo Match : 1 seule caméra, ratio 16/9 respecté */
.camera-grid--solo .cam:not(:first-child) {
  display: none;
}
.camera-grid--solo .cam:first-child {
  flex: 0 0 auto;
  height: 100%;
  width: auto;
  max-width: 100%;
  aspect-ratio: 16 / 9;
}

/* — Multi-joueurs : masque les cams inutilisées et ajuste la largeur max — */
.camera-grid--players-2 .cam:nth-child(n+3) { display: none; }
.camera-grid--players-3 .cam:nth-child(n+4) { display: none; }

.camera-grid--players-2 .cam { max-width: calc((100% - 6px)  / 2); }
.camera-grid--players-3 .cam { max-width: calc((100% - 12px) / 3); }
.camera-grid--players-4 .cam { max-width: calc((100% - 18px) / 4); }

/* ────────────────────────────────
   Jeux
──────────────────────────────── */
.game-placeholder {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid rgba(201, 168, 76, 0.12);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-game-text);
  font-family: var(--font-display);
  font-size: clamp(11px, 2vw, 14px);
  letter-spacing: 6px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}

/* ligne de scan horizontale subtle */
.game-placeholder::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(201, 168, 76, 0.15) 30%,
    rgba(201, 168, 76, 0.15) 70%,
    transparent
  );
  top: 50%;
}

/* ────────────────────────────────
   Overlay
──────────────────────────────── */
.overlay-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 90%;
  padding: 0;
}

.overlay-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: clamp(3px, 0.8vw, 6px) clamp(10px, 2vw, 18px);
  font-family: var(--font-display);
  font-size: clamp(9px, 1.8vw, 12px);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-overlay-text);
  white-space: nowrap;
  position: relative;
  /* barre or à gauche + fond très subtil */
  border-left: 2px solid var(--gold);
  background: linear-gradient(
    to right,
    rgba(201, 168, 76, 0.08),
    transparent
  );
  border-radius: 0 3px 3px 0;
}

/* ────────────────────────────────
   Messages TikTok
──────────────────────────────── */
.tiktok-logo {
  position: absolute;
  top: 6px;
  right: 14px;
  font-family: var(--font-display);
  font-size: clamp(8px, 1.8vw, 11px);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--color-tiktok-accent);
  pointer-events: none;
  /* glow rose */
  text-shadow: 0 0 10px rgba(255, 77, 106, 0.50);
}

.messages-list {
  margin-top: 4px;
  padding: 4px 14px 6px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(2px, 0.8vh, 5px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
}

.message {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(10px, 2vw, 12px);
  line-height: 1.4;
  padding: 3px 0;
  /* séparateur fin */
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.message .username {
  font-family: var(--font-display);
  font-size: clamp(9px, 1.8vw, 11px);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--color-tiktok-accent);
  white-space: nowrap;
  min-width: clamp(55px, 16vw, 85px);
  flex-shrink: 0;
  text-shadow: 0 0 8px rgba(255, 77, 106, 0.35);
}

.message .text {
  color: var(--color-msg-text);
  word-break: break-word;
  font-family: var(--font-main);
}

/* ── Messages typés ── */
.msg-gift {
  background: rgba(201, 168, 76, 0.08);
  border-left: 2px solid var(--gold);
  padding-left: 6px !important;
  border-radius: 2px;
}
.msg-gift .gift-user { color: var(--gold) !important; text-shadow: 0 0 8px rgba(201,168,76,0.4) !important; }
.msg-gift .diamonds  { color: var(--gold); font-size: 0.85em; opacity: 0.8; }

.msg-follow {
  background: rgba(255, 77, 106, 0.07);
  border-left: 2px solid var(--color-tiktok-accent);
  padding-left: 6px !important;
  border-radius: 2px;
}

.msg-share  { opacity: 0.75; }

.msg-system {
  opacity: 0.6;
  font-style: italic;
  font-size: 0.88em !important;
}
.msg-system .sys { color: var(--text-muted, #7a7090); }

/* ── Statut live dans le header zone TikTok ── */
.tiktok-logo.live {
  color: #ff4d6a;
  animation: pulse-live 2s ease-in-out infinite;
}
@keyframes pulse-live {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}