/* emocion.css — Emociones Ocultas
   Detección REAL de emociones (face-api faceExpressionNet) con
   porcentajes, cold reading, y el NOMBRE detrás de la tristeza
   desde el control. Tema noche/rosa. */

.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 ===================== */
.em-screen { min-height:100svh; min-height:100vh; background:linear-gradient(180deg,#160a16 0%, #1f0f22 55%, #0d060f 100%); color:#f0dfe9; }
.em-screen .exit-btn { background:rgba(40,20,42,.88); color:#e6a7c6; border-color:#5a2c4e; }
.em-inner { width:100%; max-width:520px; margin:0 auto; min-height:100svh; min-height:100vh; padding:20px 14px 40px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.em-title { font-size:17px; font-weight:800; letter-spacing:4px; margin:0; color:#ff7bb0; text-transform:uppercase; text-shadow:0 0 16px rgba(255,123,176,.45); font-family:"Segoe UI", Arial, sans-serif; }
.em-conn { margin:0; min-height:18px; font-size:12.5px; color:#b07a96; font-style:italic; }
.em-conn.is-error { color:#f06; }

.em-upload { width:100%; flex:1; display:flex; align-items:center; justify-content:center; }
.em-drop { width:100%; max-width:340px; display:flex; flex-direction:column; align-items:center; gap:12px; padding:44px 22px; border:2px dashed #5a2c4e; border-radius:18px; color:#ff7bb0; cursor:pointer; background:rgba(31,15,34,.45); }
.em-drop:active { transform:translateY(1px); }
.em-drop .big { font-size:16px; font-weight:700; color:#f0dfe9; }
.em-drop .dim { font-size:12px; color:#b07a96; line-height:1.5; }

.em-lab { width:100%; display:flex; flex-direction:column; align-items:center; gap:14px; }
.em-photobox { position:relative; width:min(300px, 82vw); border-radius:14px; overflow:hidden; border:1.5px solid #5a2c4e; box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 24px rgba(255,123,176,.14); }
.em-photo { width:100%; display:block; }
.em-overlay { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

.em-startbtn { font-size:14px; font-weight:800; letter-spacing:2px; padding:13px 38px; border-radius:14px; border:1.5px solid #ff7bb0; background:rgba(255,123,176,.12); color:#ffb3d1; cursor:pointer; }
.em-startbtn:active { transform:translateY(1px); }

/* Tarjeta de emociones REALES */
.em-card { width:100%; text-align:left; padding:12px 14px; border-radius:12px; background:rgba(34,16,34,.78); border:1px solid #3a2036; opacity:0; transform:translateY(10px); transition:opacity .5s, transform .5s; }
.em-card.in { opacity:1; transform:none; }
.em-cardtitle { font-size:10.5px; font-weight:800; letter-spacing:2.5px; color:#ff7bb0; }
.em-cardbody { display:flex; flex-direction:column; gap:9px; margin-top:9px; }
.em-bar { display:grid; grid-template-columns:auto 1fr auto; gap:6px 10px; align-items:center; }
.em-bar .emoji { font-size:15px; }
.em-bar .lbl { font-size:12.5px; color:#d9b7c9; }
.em-bar .pct { font-size:12.5px; font-weight:700; color:#f0dfe9; font-variant-numeric:tabular-nums; }
.em-bar .track { grid-column:1 / -1; height:5px; border-radius:3px; background:#2a1626; overflow:hidden; }
.em-bar .fill { height:100%; width:0; border-radius:3px; background:linear-gradient(90deg,#8a466e,#ff7bb0); transition:width 1.3s cubic-bezier(.2,.8,.3,1); }
.em-bar.sad .fill { background:linear-gradient(90deg,#3f5a8a,#6ba4ff); }
.em-bar.dominant .lbl { color:#ffd9e8; font-weight:700; }

/* Cold reading + revelación */
.em-read { width:100%; display:flex; flex-direction:column; gap:8px; padding-bottom:20px; }
.em-read-tag { margin:12px 0 0; font-size:11px; font-weight:800; letter-spacing:2.5px; color:#6ba4ff; }
.em-read-line { margin:0; font-size:16px; line-height:1.5; color:#f0dfe9; }
.em-read-line b { color:#ff7bb0; }
.em-cursor { animation:emBlink 1s steps(1) infinite; color:#ff7bb0; }
@keyframes emBlink { 50% { opacity:0; } }
.em-name { margin:6px 0 0; font-size:40px; font-weight:800; letter-spacing:4px; color:#ff7bb0; text-shadow:0 0 26px rgba(255,123,176,.6); }

/* ===================== CONTROL ===================== */
.emc-send { width:100%; padding:14px; border-radius:13px; border:none; cursor:pointer; color:#fff; font-weight:800; font-size:15px; letter-spacing:1px; background:linear-gradient(135deg,#ff5c9d,#c23a72); }
.emc-send:active { transform:translateY(1px); }
.emc-note { margin:0; font-size:12px; color:var(--muted); text-align:left; width:100%; }
.emc-reset { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.emc-reset:active { transform:translateY(1px); }