/* cartamental.css — Carta Mental por Cámara
   Cámara frontal con los 68 puntos siguiendo la cara en vivo
   mientras la app "lee las microrreacciones" y descarta cartas
   hasta nombrar la pensada. La carta la envías tú desde el
   control (reutiliza cards.js / card-render.js). Tema mentalismo. */

.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 ===================== */
.cm-screen { min-height:100svh; min-height:100vh; background:radial-gradient(120% 80% at 50% 0%, #17102e 0%, #0e0a1e 55%, #070510 100%); color:#e5dcff; }
.cm-screen .exit-btn { background:rgba(26,18,50,.9); color:#c3b0ff; border-color:#3a2c66; }
.cm-inner { width:100%; max-width:520px; margin:0 auto; min-height:100svh; min-height:100vh; padding:16px 12px 30px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.cm-title { font-size:16px; font-weight:800; letter-spacing:4px; margin:0; color:#b18cff; text-transform:uppercase; text-shadow:0 0 16px rgba(177,140,255,.45); }
.cm-conn { margin:0; min-height:16px; font-size:12px; color:#8a78b8; font-style:italic; }
.cm-conn.is-error { color:#f77; }

/* Activar cámara */
.cm-pre { flex:1; display:flex; align-items:center; justify-content:center; }
.cm-startcam { display:flex; flex-direction:column; align-items:center; gap:14px; padding:40px 24px; border:2px dashed #3a2c66; border-radius:18px; background:rgba(22,14,44,.5); color:#b18cff; cursor:pointer; max-width:340px; }
.cm-startcam .big { font-size:16px; font-weight:700; color:#e5dcff; }
.cm-startcam .dim { font-size:12px; color:#8a78b8; line-height:1.5; }

/* Cámara + puntos */
.cm-stage { position:relative; width:min(300px,74vw); aspect-ratio:3/4; border-radius:14px; overflow:hidden; border:1.5px solid #3a2c66; box-shadow:0 12px 34px rgba(0,0,0,.6), 0 0 24px rgba(177,140,255,.14); background:#050308; }
.cm-video, .cm-canvas { position:absolute; inset:0; width:100%; height:100%; }
.cm-video { object-fit:cover; transform:scaleX(-1); }
.cm-canvas { transform:scaleX(-1); pointer-events:none; }
.cm-hud { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:7px 9px; font-size:10px; letter-spacing:1.5px; color:#b18cff; background:linear-gradient(180deg, rgba(5,3,8,.75), rgba(5,3,8,0)); }
.cm-hud .dot { width:7px; height:7px; border-radius:50%; background:#ff4d4d; box-shadow:0 0 9px #ff4d4d; animation:cmRec 1.1s infinite; display:inline-block; margin-right:5px; }
@keyframes cmRec { 50% { opacity:.25; } }

.cm-read { margin:0; min-height:18px; font-size:13px; color:#c3b0ff; }

/* Carta */
.cm-cardwrap { perspective:1000px; width:min(190px,52vw); }
.cm-card { position:relative; width:100%; aspect-ratio:5/7; }
.cm-card svg { width:100%; height:100%; display:block; border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.55); }
.cm-card.flip { animation:cmFlip .5s ease; }
@keyframes cmFlip { 0%{ transform:rotateY(0);} 50%{ transform:rotateY(90deg);} 100%{ transform:rotateY(0);} }
.cm-card.reveal { animation:cmReveal .8s cubic-bezier(.2,.9,.2,1); }
@keyframes cmReveal { 0%{ transform:scale(.7) rotateY(180deg); opacity:0;} 60%{ opacity:1;} 100%{ transform:scale(1) rotateY(0); opacity:1;} }
.cm-card.win svg { box-shadow:0 0 0 3px #d8b46a, 0 0 34px rgba(216,180,106,.6); }

.cm-final { margin:2px 0 0; min-height:22px; font-size:16px; color:#e5dcff; }
.cm-final b { color:#d8b46a; font-size:20px; letter-spacing:1px; }
.cm-hint { margin:0; font-size:11.5px; color:#8a78b8; }

/* ===================== CONTROL ===================== */
.cmc-label { width:100%; text-align:left; font-size:12px; font-weight:700; color:var(--muted); }
.cmc-suits { width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.cmc-suit { padding:12px 4px; border-radius:11px; border:1px solid var(--line); background:#f4f1ff; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; font-weight:700; font-size:11px; color:#5a3fb0; }
.cmc-suit .sym { font-size:20px; line-height:1; }
.cmc-suit.red .sym { color:#d6213a; }
.cmc-suit.black .sym { color:#1f2330; }
.cmc-suit.active { background:#b18cff; color:#fff; border-color:#7c5cff; }
.cmc-values { width:100%; display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cmc-val { padding:10px 0; border-radius:9px; border:1px solid var(--line); background:#fff; cursor:pointer; font-weight:800; font-size:14px; color:#1f2330; }
.cmc-val.active { background:#b18cff; color:#fff; border-color:#7c5cff; }
.cmc-preview { width:120px; align-self:center; }
.cmc-preview svg { width:100%; height:auto; border-radius:10px; box-shadow:0 8px 20px rgba(0,0,0,.15); }
.cmc-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,#7c5cff,#5a3fb0); }
.cmc-send:disabled { opacity:.45; }
.cmc-send:active { transform:translateY(1px); }
.cmc-note { margin:0; font-size:12px; color:var(--muted); text-align:left; width:100%; }
.cmc-reset { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.cmc-reset:active { transform:translateY(1px); }