/* ============================================================
   cxs-visitor.css — Page visiteur Codex Streamerspy
   Path: /codex/assets/css/cxs-visitor.css
   v1
   ============================================================ */

body.cx-spy-visitor {
  background: #0a0b0d;
  font-family: 'DM Mono', 'JetBrains Mono', monospace;
}

.cxs-v-container { max-width: 1100px; }

/* ===== DOSSIER BAR ===== */
.cxs-doss-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255,255,255,.28);
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cxs-doss-sep {
  width: 1px;
  height: 12px;
  background: rgba(255,255,255,.18);
}

/* ===== BANDEAU LIVE ===== */
.cxs-live-bar {
  background: rgba(255,60,110,.07);
  border: 1px solid rgba(255,60,110,.25);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-6);
}
.cxs-live-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.cxs-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  flex-shrink: 0;
  animation: cxs-blink 1.4s ease-in-out infinite;
}
@keyframes cxs-blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.cxs-live-label {
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--red);
  font-weight: 500;
}
.cxs-live-sep { color: rgba(255,255,255,.25); }
.cxs-live-clue {
  font-size: 15px;
  font-weight: 700;
  color: #d4ff3a;
  letter-spacing: 2px;
}
.cxs-live-count { color: #ffa726; }
.cxs-live-waiting { font-size: 12px; color: rgba(255,255,255,.35); font-weight: 400; }
.cxs-live-score {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-left: auto;
}
.cxs-live-blue { font-size: 20px; font-weight: 700; color: #4a9eff; }
.cxs-live-score-lbl { font-size: 11px; color: rgba(255,255,255,.38); letter-spacing: 1px; }
.cxs-live-pov-btn {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: rgba(255,255,255,.65);
  letter-spacing: 1px;
  transition: var(--transition);
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
}
.cxs-live-pov-btn:hover { border-color: var(--red); color: #fff; }

/* ===== MAIN ===== */
.cxs-v-main { display: flex; flex-direction: column; gap: var(--space-6); }

/* ===== SECTIONS ===== */
.cxs-v-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.cxs-v-section--last {
  background: linear-gradient(135deg, rgba(255,60,110,.05), rgba(168,85,247,.02));
  border-color: rgba(255,60,110,.18);
}
.cxs-v-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}
.cxs-v-step {
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: rgba(255,60,110,.35);
  line-height: 1;
  min-width: 34px;
}
.cxs-v-title {
  font-family: 'Syne', sans-serif;
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
}

/* ===== BODY ===== */
.cxs-v-body {
  color: rgba(255,255,255,.7);
  font-size: 14px;
  line-height: 1.75;
}
.cxs-v-body p { margin-bottom: var(--space-3); }
.cxs-v-body p:last-child { margin-bottom: 0; }
.cxs-v-body--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.cxs-v-body--rev { direction: rtl; }
.cxs-v-body--rev > * { direction: ltr; }

/* ===== LISTES ===== */
.cxs-v-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: var(--space-3) 0;
}
.cxs-v-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cxs-v-list--mt { margin-top: var(--space-4); }
.cxs-dot {
  width: 10px; height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  position: relative;
  top: 1px;
  display: inline-block;
}
.cxs-dot--blue    { background: #4a9eff; }
.cxs-dot--red     { background: #ff4757; }
.cxs-dot--neutral { background: #7a6050; }
.cxs-dot--black   { background: #111; border: 1px solid #ff4757; }

/* ===== NOTE ===== */
.cxs-v-note {
  font-size: 12px !important;
  color: rgba(255,255,255,.32) !important;
  border-left: 2px solid rgba(168,85,247,.35);
  padding-left: var(--space-3);
  margin-top: var(--space-4) !important;
}

/* ===== CODE ===== */
.cxs-code {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  padding: 1px 7px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: #d4ff3a;
}

/* ===== DANGER ===== */
.cxs-danger { color: #ff4757; }

/* ===== ILLUS ===== */
.cxs-v-illus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.cxs-v-illus-caption {
  font-size: 11px;
  color: rgba(255,255,255,.28);
  letter-spacing: 1px;
  text-align: center;
}

/* ===== MINI GRILLE ===== */
.cxs-mini-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  width: 100%;
  max-width: 290px;
}
.cxs-mc {
  position: relative;
  aspect-ratio: 1.6 / 1;
  border-radius: 3px;
  border: 1.5px solid #5e4831;
  background: #7a6050;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 2px 2px 2px;
  overflow: visible;
  margin-top: 4px;
}
.cxs-mc::before {
  content: '';
  position: absolute;
  top: -4px; right: 22%;
  width: 12px; height: 4px;
  border-radius: 1px 1px 0 0;
  border: 1px solid #5e4831;
  border-bottom: none;
  background: #7a6050;
}
.cxs-mc-num {
  position: absolute;
  top: 1px; left: 3px;
  font-size: 6px;
  font-weight: 900;
  color: rgba(255,255,255,.75);
  font-family: 'Syne', sans-serif;
  line-height: 1;
}
.cxs-mc-stamp {
  position: absolute;
  top: 3px; right: 2px;
  font-size: 3px;
  letter-spacing: .3px;
  border: .5px solid rgba(255,255,255,.35);
  padding: 1px 2px;
  transform: rotate(12deg);
  color: rgba(255,255,255,.45);
  pointer-events: none;
  font-family: 'DM Mono', monospace;
}
.cxs-mc-word {
  font-size: 6px;
  font-weight: 900;
  font-family: 'Syne', sans-serif;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  letter-spacing: .3px;
  line-height: 1;
  padding-bottom: 1px;
}
.cxs-mc-verdict {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4px;
  font-weight: 900;
  color: rgba(255,255,255,.85);
  transform: rotate(-8deg);
  font-family: 'Syne', sans-serif;
  letter-spacing: .3px;
  pointer-events: none;
}

/* Couleurs */
.cxs-mc--blue    { background: #4a9eff; border-color: #2a7dd6; }
.cxs-mc--blue::before { background: #3686e8; border-color: #2a7dd6; }
.cxs-mc--red     { background: #ff4757; border-color: #d12c3a; }
.cxs-mc--red::before  { background: #ea3242; border-color: #d12c3a; }
.cxs-mc--black   { background: #0a0a0a; border-color: #ff4757; }
.cxs-mc--black::before { background: #0a0a0a; border-color: #ff4757; }
.cxs-mc--neutral { background: #7a6050; border-color: #5e4831; }

/* Grande version */
.cxs-mc--lg {
  width: 115px; height: 72px;
  aspect-ratio: unset;
  border-radius: 5px;
  border-width: 2px;
  padding: 6px 5px 5px;
  margin-top: 6px;
  overflow: hidden;
}
.cxs-mc--lg::before { width: 18px; height: 6px; top: -6px; }
.cxs-mc--lg .cxs-mc-num { font-size: 13px; top: 3px; left: 5px; }
.cxs-mc--lg .cxs-mc-word { font-size: 11px; }
.cxs-mc--lg .cxs-mc-verdict { font-size: 9px; }
.cxs-mc-verdict--light  { color: rgba(255,255,255,.95); }
.cxs-mc-verdict--danger { color: #ff4757; }
.cxs-mc--black .cxs-mc-verdict--danger { text-shadow: 0 0 6px rgba(255,71,87,.6); }

/* ===== CLUE DISPLAY ===== */
.cxs-clue-display {
  background: #13151a;
  border: 1px solid #2a2d33;
  border-radius: 8px;
  padding: var(--space-5) var(--space-6);
  text-align: center;
  min-width: 200px;
}
.cxs-clue-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: #ff3c6e;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: 'DM Mono', monospace;
}
.cxs-clue-word {
  font-family: 'Syne', sans-serif;
  font-size: 24px;
  font-weight: 900;
  color: #d4ff3a;
  letter-spacing: 2px;
}
.cxs-clue-count { color: #ffa726; margin-left: 6px; }
.cxs-clue-sub {
  font-size: 11px;
  color: rgba(255,255,255,.3);
  letter-spacing: .5px;
  margin-top: 8px;
}

/* ===== VOTE EXAMPLES ===== */
.cxs-vote-examples {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: var(--space-4) 0;
}
.cxs-vote-ex {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}
.cxs-vote-ex span { color: rgba(255,255,255,.45); }

/* ===== TOP VOTES ===== */
.cxs-top-votes {
  background: #13151a;
  border: 1px solid #2a2d33;
  border-radius: 8px;
  padding: var(--space-4);
  min-width: 200px;
  width: 100%;
}
.cxs-tv-head {
  font-size: 9px;
  letter-spacing: 2px;
  color: #ff3c6e;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-family: 'DM Mono', monospace;
}
.cxs-tv-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,.03);
  border-left: 2px solid #ffa726;
  border-radius: 2px;
  margin-bottom: 4px;
  font-size: 11px;
}
.cxs-tv-rank { color: #ffa726; font-weight: 700; min-width: 12px; }
.cxs-tv-word { flex: 1; color: rgba(255,255,255,.75); letter-spacing: .5px; }
.cxs-tv-pct  { color: #ff3c6e; font-weight: 700; }

/* ===== RÉVÉLATIONS ===== */
.cxs-reveals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.cxs-reveal-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface-2);
  text-align: center;
}
.cxs-reveal-card--blue  { border-color: rgba(74,158,255,.3); }
.cxs-reveal-card--red   { border-color: rgba(255,71,87,.3); }
.cxs-reveal-card--black {
  border-color: rgba(255,71,87,.45);
  background: rgba(255,71,87,.04);
}
.cxs-reveal-label {
  font-family: 'Syne', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: .3px;
}
.cxs-reveal-desc {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
}

/* ===== RÉSUMÉ ===== */
.cxs-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.cxs-summary-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
}
.cxs-summary-item--danger {
  border-color: rgba(255,71,87,.3);
  background: rgba(255,71,87,.04);
}
.cxs-summary-num {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #4a9eff;
  line-height: 1;
  flex-shrink: 0;
  min-width: 32px;
}
.cxs-summary-cmd {
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: #d4ff3a;
  line-height: 1;
  flex-shrink: 0;
  min-width: 32px;
}
.cxs-summary-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  min-width: 32px;
}

/* ===== POV CTA ===== */
.cxs-v-pov-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-8) 0 var(--space-4);
  text-align: center;
}
.cxs-v-pov-hint {
  font-size: 12px;
  color: rgba(255,255,255,.3);
  letter-spacing: 1px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 760px) {
  .cxs-v-body--split { grid-template-columns: 1fr; gap: var(--space-6); }
  .cxs-v-body--rev   { direction: ltr; }
  .cxs-reveals-grid  { grid-template-columns: 1fr; }
  .cxs-summary-grid  { grid-template-columns: 1fr; }
  .cxs-live-score    { margin-left: 0; }
  .cxs-live-bar__inner { gap: var(--space-2); }
}