/* pendulo.css — El Péndulo (responde sí / no / duda y cuenta números) */

/* 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 (escena) ===================== */
.pd-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 12%, #241d3f 0%, #171232 45%, #0b081c 80%, #060412 100%); color:#cfc8e8; overflow:hidden; }
.pd-screen .exit-btn { background:rgba(30,24,58,.85); color:#a89fd0; border-color:#3c3468; }
.pd-inner { position:relative; width:100%; max-width:520px; min-height:100svh; min-height:100vh; padding:22px 20px 40px; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.pd-title { font-family:Georgia, "Times New Roman", serif; font-size:19px; font-weight:700; letter-spacing:6px; margin:0; color:#b3a7e0; text-transform:uppercase; text-shadow:0 0 18px rgba(150,120,255,.35); }
.pd-status { font-size:13.5px; color:#8d84b8; margin:0; min-height:20px; font-style:italic; transition:color .4s; }
.pd-status.is-ready { color:#c9a84c; }
.pd-status.is-error { color:#d66; }

/* Zona del péndulo */
.pd-stage { position:relative; width:100%; height:430px; }

/* Soporte del techo */
.pd-mount { position:absolute; left:50%; top:0; width:56px; height:12px; margin-left:-28px; border-radius:0 0 8px 8px; background:linear-gradient(180deg,#5a4d8a,#2e2752); box-shadow:0 3px 8px rgba(0,0,0,.6); }
.pd-mount::after { content:""; position:absolute; left:50%; top:10px; width:10px; height:10px; margin-left:-5px; border-radius:50%; border:2.5px solid #8a7bc0; background:transparent; }

/* Brazo que gira (pivote arriba) — el JS le pone rotate() */
.pd-arm { position:absolute; left:50%; top:18px; width:0; height:0; transform-origin:50% 0; will-change:transform; }

/* Cadena */
.pd-chain { position:absolute; left:-1.5px; top:0; width:3px; height:250px; background:repeating-linear-gradient(180deg, #c9b45c 0 6px, #8a7a34 6px 9px, #b09c46 9px 12px); border-radius:2px; box-shadow:0 0 4px rgba(0,0,0,.6); }

/* Cristal (el JS puede darle translateY para el modo círculo) */
.pd-bob { position:absolute; left:0; top:250px; width:0; height:0; will-change:transform; }
.pd-gem { position:absolute; left:-27px; top:-6px; width:54px; height:82px; }
.pd-gem svg { width:100%; height:100%; display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); }

/* Aura del cristal según la respuesta */
.pd-aura { position:absolute; left:-46px; top:-22px; width:92px; height:112px; border-radius:50%; pointer-events:none; opacity:0; transition:opacity .8s ease, background .8s ease; filter:blur(10px); }
.pd-stage.ans-yes   .pd-aura { opacity:.9; background:radial-gradient(ellipse, rgba(94,231,153,.55) 0%, transparent 68%); }
.pd-stage.ans-no    .pd-aura { opacity:.9; background:radial-gradient(ellipse, rgba(255,90,110,.5) 0%, transparent 68%); }
.pd-stage.ans-maybe .pd-aura { opacity:.8; background:radial-gradient(ellipse, rgba(255,196,86,.5) 0%, transparent 68%); }
.pd-stage.ans-count .pd-aura { opacity:.9; background:radial-gradient(ellipse, rgba(140,120,255,.55) 0%, transparent 68%); }

/* Sombra en el suelo */
.pd-shadow { position:absolute; left:50%; bottom:26px; width:150px; height:16px; margin-left:-75px; border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,.55) 0%, transparent 70%); will-change:transform, opacity; }

/* Leyenda */
.pd-caption { position:absolute; left:0; right:0; bottom:0; font-family:Georgia, serif; font-size:12.5px; letter-spacing:2px; color:#6f668f; font-style:italic; }

/* Botón comenzar */
.pd-new { font-size:14px; font-weight:800; letter-spacing:2px; padding:13px 38px; border-radius:14px; border:1px solid #5a4d8a; background:linear-gradient(135deg,#2e2752,#171232); color:#cfc0f0; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.5); }
.pd-new:active { transform:translateY(1px); }
.pd-new:disabled { opacity:.4; cursor:default; }

/* ===================== CONTROL ===================== */
.pd-actions { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; width:100%; }
.pd-act { display:flex; flex-direction:column; align-items:center; gap:3px; padding:14px 4px; border-radius:13px; border:none; cursor:pointer; color:#fff; font-weight:800; }
.pd-act:active { transform:translateY(1px); }
.pd-act .big { font-size:15px; }
.pd-act .sub { font-size:10.5px; font-weight:600; opacity:.85; }
.pd-act.yes   { background:linear-gradient(135deg,#22c58b,#0f9d63); }
.pd-act.no    { background:linear-gradient(135deg,#ff5f6d,#c2102c); }
.pd-act.maybe { background:linear-gradient(135deg,#ffb02e,#e8590c); }
.pd-act.sel   { outline:3px solid rgba(108,92,231,.5); outline-offset:2px; }
.pd-stop { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#e6e9f2; font-weight:800; letter-spacing:.5px; background:#3a4150; }
.pd-stop:active { transform:translateY(1px); }

.pd-numgrid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:100%; }
.pd-num { aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; border-radius:12px; border:1.5px solid var(--line); background:#fff; color:#3a3550; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.pd-num:active { transform:translateY(1px); }
.pd-num.sel { border-color:var(--brand1); color:var(--brand1); box-shadow:0 0 0 3px rgba(108,92,231,.18); }