/* poligrafo.css — Detector de Mentiras 2.0 (en vivo)
   Cámara frontal con los 68 puntos siguiendo la cara del espectador
   EN TIEMPO REAL (face-api sobre el vídeo). Los puntos tiemblan de
   verdad con cada microgesto. El veredicto verdad/mentira lo dictas
   tú desde el control. Tema laboratorio verde/rojo. */

.exit-bar { position:fixed; top:10px; right:10px; display:flex; gap:8px; z-index:60; }
.exit-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.92); color:var(--muted); cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.08); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.exit-btn:active { transform:translateY(1px); }
.exit-btn.danger { color:var(--danger); border-color:#f3c9d2; }
#logout-btn { display:none; }

/* ===================== JUEGO ===================== */
.pg-screen { min-height:100svh; min-height:100vh; background:linear-gradient(180deg,#050b0a 0%, #08130f 60%, #04100c 100%); color:#c9f0e0; }
.pg-screen .exit-btn { background:rgba(10,26,20,.9); color:#7fd6b0; border-color:#1f4a3a; }
.pg-inner { width:100%; max-width:540px; margin:0 auto; min-height:100svh; min-height:100vh; padding:16px 12px 28px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.pg-title { font-size:16px; font-weight:800; letter-spacing:4px; margin:0; color:#2ee6a6; text-transform:uppercase; text-shadow:0 0 16px rgba(46,230,166,.45); font-family:"Segoe UI", Arial, sans-serif; }
.pg-conn { margin:0; min-height:16px; font-size:12px; color:#5f9d84; font-style:italic; }
.pg-conn.is-error { color:#f77; }

/* Arranque de cámara */
.pg-pre { width:100%; flex:1; display:flex; align-items:center; justify-content:center; }
.pg-startcam { display:flex; flex-direction:column; align-items:center; gap:14px; padding:40px 24px; border:2px dashed #1f4a3a; border-radius:18px; background:rgba(8,22,16,.5); color:#2ee6a6; cursor:pointer; max-width:340px; }
.pg-startcam .big { font-size:16px; font-weight:700; color:#c9f0e0; }
.pg-startcam .dim { font-size:12px; color:#5f9d84; line-height:1.5; }

/* Vídeo en vivo + puntos */
.pg-stage { position:relative; width:min(460px, 94vw); aspect-ratio:3/4; border-radius:16px; overflow:hidden; border:1.5px solid #1f4a3a; box-shadow:0 16px 44px rgba(0,0,0,.6), 0 0 30px rgba(46,230,166,.14); background:#020806; }
.pg-video, .pg-canvas { position:absolute; inset:0; width:100%; height:100%; }
.pg-video { object-fit:cover; transform:scaleX(-1); }
.pg-canvas { transform:scaleX(-1); pointer-events:none; }

/* HUD */
.pg-hud { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:8px 10px; font-size:10.5px; letter-spacing:1.5px; color:#2ee6a6; background:linear-gradient(180deg, rgba(2,8,6,.75), rgba(2,8,6,0)); }
.pg-hud .rec { display:flex; align-items:center; gap:6px; }
.pg-hud .dot { width:8px; height:8px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 10px #ff4d4d; animation:pgRec 1.1s infinite; }
@keyframes pgRec { 50% { opacity:.25; } }
.pg-hud .pts { color:#7fd6b0; font-variant-numeric:tabular-nums; }

/* Pregunta */
.pg-question { position:absolute; left:0; right:0; bottom:96px; padding:0 14px; }
.pg-question span { display:inline-block; padding:8px 14px; border-radius:10px; background:rgba(2,10,8,.72); color:#e6fff5; font-size:14px; line-height:1.4; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }

/* Onda tipo polígrafo */
.pg-wave { position:absolute; left:0; right:0; bottom:0; height:64px; }

/* Veredicto */
.pg-verdict { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; opacity:0; pointer-events:none; transition:opacity .25s; }
.pg-verdict.show { opacity:1; }
.pg-verdict .tag { font-size:12px; letter-spacing:4px; font-weight:700; color:#e6fff5; }
.pg-verdict .word { font-size:56px; font-weight:900; letter-spacing:4px; }
.pg-verdict.truth { background:radial-gradient(60% 50% at 50% 50%, rgba(16,80,54,.5), rgba(2,10,8,.55)); }
.pg-verdict.truth .word { color:#2ee6a6; text-shadow:0 0 30px rgba(46,230,166,.8); }
.pg-verdict.lie { background:radial-gradient(60% 50% at 50% 50%, rgba(90,18,18,.55), rgba(12,2,2,.55)); }
.pg-verdict.lie .word { color:#ff5252; text-shadow:0 0 30px rgba(255,82,82,.85); }
.pg-verdict.analyzing .word { font-size:30px; color:#ffcf5a; letter-spacing:3px; text-shadow:0 0 22px rgba(255,207,90,.6); }

.pg-hint { margin:2px 0 0; font-size:11.5px; color:#5f9d84; }

/* ===================== CONTROL ===================== */
.pgc-verdicts { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pgc-big { padding:22px 10px; border-radius:16px; border:none; cursor:pointer; font-weight:900; font-size:20px; letter-spacing:2px; color:#fff; }
.pgc-big:active { transform:translateY(1px); }
.pgc-truth { background:linear-gradient(135deg,#22c58b,#0f9d63); }
.pgc-lie { background:linear-gradient(135deg,#ff5a5a,#c22a2a); }
.pgc-row { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pgc-mid { padding:13px; border-radius:12px; border:none; cursor:pointer; font-weight:800; font-size:14px; color:#231708; }
.pgc-analyze { background:linear-gradient(135deg,#ffd35a,#e0a92e); }
.pgc-clear { background:#c9cfdd; color:#333; }
.pgc-send { width:100%; padding:13px; border-radius:12px; border:none; cursor:pointer; color:#fff; font-weight:800; font-size:14px; background:#2c7be5; }
.pgc-send:active { transform:translateY(1px); }
.pgc-note { margin:0; font-size:12px; color:var(--muted); text-align:left; width:100%; }
.pgc-reset { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.pgc-reset:active { transform:translateY(1px); }