/* brujula.css — La Brújula Mística (la aguja obedece al mago) */

/* 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) ===================== */
.bj-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; }
.bj-screen .exit-btn { background:rgba(30,24,58,.85); color:#a89fd0; border-color:#3c3468; }
.bj-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; }
.bj-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); }
.bj-status { font-size:13.5px; color:#8d84b8; margin:0; min-height:20px; font-style:italic; transition:color .4s; }
.bj-status.is-ready { color:#c9a84c; }
.bj-status.is-error { color:#d66; }

/* Zona de la brújula */
.bj-stage { position:relative; width:100%; height:430px; display:flex; align-items:center; justify-content:center; }
.bj-case { position:relative; width:min(320px, 86vw); aspect-ratio:1/1; }
.bj-rose { width:100%; height:100%; display:block; filter:drop-shadow(0 10px 26px rgba(0,0,0,.6)); }
#bj-ticks line { stroke-linecap:round; }

/* Aguja (el JS le pone rotate()) */
.bj-needle { position:absolute; left:50%; top:50%; width:11%; height:74%; transform:translate(-50%,-50%); transform-origin:50% 50%; will-change:transform; }
.bj-needle svg { width:100%; height:100%; display:block; filter:drop-shadow(0 3px 6px rgba(0,0,0,.55)); }

/* Aura según el estado */
.bj-aura { position:absolute; left:50%; top:50%; width:min(380px,96vw); aspect-ratio:1/1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; opacity:0; transition:opacity .8s ease, background .8s ease; filter:blur(14px); }
.bj-stage.st-seek   .bj-aura { opacity:.85; background:radial-gradient(circle, rgba(140,120,255,.4) 0%, transparent 66%); }
.bj-stage.st-point  .bj-aura { opacity:.7;  background:radial-gradient(circle, rgba(255,196,86,.35) 0%, transparent 66%); }
.bj-stage.st-locked .bj-aura { opacity:.95; background:radial-gradient(circle, rgba(94,231,153,.45) 0%, transparent 66%); }

/* Leyenda */
.bj-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 */
.bj-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); }
.bj-new:active { transform:translateY(1px); }
.bj-new:disabled { opacity:.4; cursor:default; }

/* ===================== CONTROL ===================== */
/* Brújula de mando: se arrastra la aguja con el dedo */
.bj-dial { position:relative; width:min(240px, 72vw); aspect-ratio:1/1; margin:0 auto 12px; touch-action:none; cursor:grab; }
.bj-dial:active { cursor:grabbing; }
.bj-dial-rose { width:100%; height:100%; display:block; filter:drop-shadow(0 6px 16px rgba(20,12,50,.35)); pointer-events:none; }
#bj-dial-ticks line { stroke-linecap:round; }
.bj-dial-needle { position:absolute; left:50%; top:50%; width:11%; height:74%; transform:translate(-50%,-50%); transform-origin:50% 50%; will-change:transform; pointer-events:none; }
.bj-dial-needle svg { width:100%; height:100%; display:block; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.bj-send { width:100%; padding:12px; border-radius:13px; border:none; cursor:pointer; color:#fff; font-weight:800; letter-spacing:.5px; background:linear-gradient(135deg,#6c5ce7,#4834b8); }
.bj-send:active { transform:translateY(1px); }
.bj-send.sel { outline:3px solid rgba(108,92,231,.5); outline-offset:2px; }

.bj-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
.bj-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; }
.bj-act:active { transform:translateY(1px); }
.bj-act .big { font-size:15px; }
.bj-act .sub { font-size:10.5px; font-weight:600; opacity:.85; }
.bj-act.seek { background:linear-gradient(135deg,#8a6cf0,#5a3fd0); }
.bj-act.stop { background:#3a4150; }
.bj-act.sel  { outline:3px solid rgba(108,92,231,.5); outline-offset:2px; }