/* sincro.css — Sincronía (predicciones selladas + forzajes psicológicos) */

/* Barra de salida (igual que el resto de efectos) */
.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 ===================== */
.sy-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 24%, #3a2a4d 0%, #221733 55%, #120b1d 100%); color:#efe8f7; }
.sy-inner { width:100%; max-width:560px; padding:24px 18px 36px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.sy-title { font-size:21px; font-weight:800; letter-spacing:2px; text-transform:uppercase; margin:0; color:#d9b96a; text-shadow:0 1px 8px rgba(0,0,0,.5); }
.sy-sub { font-size:12.5px; color:#b49fd0; margin:-10px 0 0; }
.sy-status { font-size:14px; color:#c7b3e0; margin:0; min-height:20px; }
.sy-status.is-error { color:#ff8a9c; }

/* Rejilla de sobres sellados */
.sy-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; width:100%; max-width:440px; }
.sy-seal { position:relative; aspect-ratio:5/6; border-radius:14px; cursor:pointer; perspective:800px;
  -webkit-tap-highlight-color:transparent; }
.sy-card { position:absolute; inset:0; border-radius:14px; transform-style:preserve-3d; transition:transform .7s cubic-bezier(.4,.1,.2,1); }
.sy-seal.open .sy-card { transform:rotateY(180deg); }

/* Frente: sobre cerrado con lacre */
.sy-front, .sy-backface { position:absolute; inset:0; border-radius:14px; backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:12px; }
.sy-front { background:linear-gradient(160deg,#f4ead6 0%, #e8d9b8 60%, #dcc9a0 100%); color:#4a3a22;
  box-shadow:0 8px 20px rgba(0,0,0,.45), inset 0 0 0 1px rgba(120,90,42,.35); }
.sy-front::before { content:""; position:absolute; inset:9px; border:1px dashed rgba(120,90,42,.45); border-radius:9px; pointer-events:none; }
.sy-front .n { font-size:11px; letter-spacing:2px; text-transform:uppercase; color:#8a6a3a; font-weight:700; }
.sy-front .t { font-size:14.5px; font-weight:800; line-height:1.2; }
.sy-wax { width:44px; height:44px; border-radius:50%; margin-top:4px;
  background:radial-gradient(circle at 38% 32%, #d24a5e, #8f1f30 68%, #6d1422 100%);
  box-shadow:0 2px 6px rgba(0,0,0,.4), inset 0 1px 3px rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; color:#f4d9dd; font-size:17px; font-family:Georgia,serif; }
.sy-front .hint { font-size:10px; color:#9a7b4a; }

/* Reverso: la predicción */
.sy-backface { transform:rotateY(180deg); background:linear-gradient(160deg,#fffdf6, #f4ecd8);
  color:#2c2313; box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(120,90,42,.3); }
.sy-backface .k { font-size:10px; letter-spacing:2px; text-transform:uppercase; color:#9a7b4a; font-weight:700; }
.sy-backface .v { font-family:"Segoe Script","Bradley Hand",Georgia,cursive; font-size:19px; line-height:1.3; font-weight:700; color:#1f1505; }
.sy-seal.open .sy-backface .v { animation:syInk 1s ease .35s both; }
@keyframes syInk { from { opacity:0; filter:blur(4px); } to { opacity:1; filter:blur(0); } }

.sy-new { margin-top:4px; font-size:14px; font-weight:700; padding:11px 28px; border-radius:12px;
  border:1px solid rgba(217,185,106,.45); background:rgba(217,185,106,.14); color:#ecd9a8; cursor:pointer; }
.sy-new:active { transform:translateY(1px); }

/* ===================== CONTROL ===================== */
.syc-list { display:flex; flex-direction:column; gap:14px; width:100%; }
.syc-item { border:1.5px solid var(--line); border-radius:14px; padding:12px; text-align:left; background:#fff; }
.syc-head { display:flex; justify-content:space-between; align-items:center; gap:8px; }
.syc-title { font-size:13.5px; font-weight:800; color:#3a3550; }
.syc-state { font-size:11px; font-weight:700; padding:3px 9px; border-radius:10px; background:#e8f6ec; color:#1e8a4a; white-space:nowrap; }
.syc-state.override { background:#efeafd; color:#6c5ce7; }
.syc-q { font-size:12px; color:var(--muted); line-height:1.4; margin:6px 0 9px; font-style:italic; }
.syc-chips { display:flex; flex-wrap:wrap; gap:6px; }
.syc-chip { font-size:12px; font-weight:600; padding:7px 11px; border-radius:16px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff; color:#3a3550; }
.syc-chip.def { border-color:#bfe3cc; background:#f0faf3; color:#1e8a4a; font-weight:700; }
.syc-chip.sel { border-color:var(--brand1); background:var(--brand1); color:#fff; }
.syc-chip:active { transform:translateY(1px); }
.syc-freerow { display:flex; gap:6px; margin-top:8px; }
.syc-freerow input { flex:1; font-size:13px; padding:9px 11px; border:1.5px solid var(--line); border-radius:10px; outline:none; background:#fafafd; }
.syc-freerow input:focus { border-color:var(--brand1); background:#fff; }
.syc-freerow button { font-size:12px; font-weight:700; padding:0 14px; border-radius:10px; border:none; background:var(--brand1); color:#fff; cursor:pointer; }
.syc-freerow button:active { transform:translateY(1px); }