/* radar.css
   ====================================================================
   Efecto "Radar detector" (pantalla de control + pantalla de juego).
   El giro del barrido y el parpadeo del punto se controlan por JS
   (requestAnimationFrame) para que el punto solo aparezca cuando la
   línea del radar pasa por encima.
   Reutiliza los tokens de styles.css (--brand1/--brand2/--line/--ink...).
   ==================================================================== */

:root { --radar-green:#22ff99; }

/* ---------- CONTROL: botones de dirección ---------- */
.dir-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; }
.dir-btn {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:22px 10px; border:1.6px solid var(--line); border-radius:16px; background:#fbfbfd;
  cursor:pointer; color:var(--ink); font-size:15px; font-weight:700;
  transition:border-color .12s, box-shadow .12s, background .12s, transform .06s, color .12s;
}
.dir-btn svg { width:46px; height:46px; }
.dir-btn:active { transform:translateY(1px); }
.dir-btn.sel { border-color:var(--brand1); background:#fff; color:var(--brand1); box-shadow:0 0 0 4px rgba(108,92,231,.16); }
.dir-hint { font-size:13px; color:var(--muted); min-height:16px; }

/* ---------- JUEGO: pantalla del radar ---------- */
.radar-screen {
  min-height:100vh; display:flex; align-items:flex-start; justify-content:center;
  padding:28px 18px 40px; background:linear-gradient(135deg,#eef1ff 0%,#f6f8fc 45%,#eafff5 100%);
}
.radar-inner { width:100%; max-width:420px; display:flex; flex-direction:column; align-items:center; gap:20px; }
.radar-title { font-size:22px; font-weight:700; color:var(--ink); }

.radar-wrap { width:100%; display:flex; justify-content:center; }
.radar {
  width:100%; max-width:300px; aspect-ratio:1; display:block; border-radius:50%;
  filter:drop-shadow(0 12px 28px rgba(7,58,40,.45));
}

/* El barrido: su rotación la fija el JS (atributo transform). Aquí solo visibilidad. */
.radar-sweep { opacity:0; }
.radar.searching .radar-sweep, .radar.found .radar-sweep { opacity:1; }

/* El punto: su opacidad la controla el JS (parpadea al pasar la línea). */
.radar-blip { opacity:0; }

.radar-status { font-size:14px; font-weight:600; color:var(--muted); min-height:20px; text-align:center; }
.radar-status.is-search { color:var(--brand2); }
.radar-status.is-found  { color:var(--ok); }

.radar-result { display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; color:var(--ink); min-height:32px; opacity:0; transition:opacity .35s ease; }
.radar-result.show { opacity:1; }
.radar-result svg { width:34px; height:34px; }

.radar-actions { display:flex; gap:12px; width:100%; max-width:320px; }
.radar-btn {
  flex:1; padding:15px; border:none; border-radius:13px; font-size:15px; font-weight:700; letter-spacing:.3px;
  color:#fff; cursor:pointer; background:linear-gradient(135deg,var(--brand1),var(--brand2));
  box-shadow:0 10px 22px rgba(108,92,231,.32); transition:transform .08s, box-shadow .15s, opacity .15s;
}
.radar-btn:active { transform:translateY(1px); }
.radar-btn[disabled] { opacity:.5; cursor:default; }
.radar-btn.ghost { background:#fff; color:var(--ink); border:1.5px solid var(--line); box-shadow:none; }

/* Botón para silenciar/activar el sonido del radar */
.radar-sound { background:none; border:none; color:var(--muted); font-size:13px; font-weight:600; cursor:pointer; text-decoration:underline; padding:4px 8px; }
.radar-sound.is-off { color:var(--danger); }

/* Botones discretos: volver al inicio / salir completamente */
.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; }
/* Oculta el viejo botón de salir del panel de control (lo reemplaza la barra) */
#logout-btn { display:none; }

/* ---- Radar + Carta: botón y overlay de "Mostrar revelación" ---- */
.reveal-cta { width: 100%; max-width: 320px; }
.reveal-overlay { position: fixed; inset: 0; background: rgba(8,20,16,.82); display: flex; align-items: center; justify-content: center; z-index: 80; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 20px; }
.reveal-box { display: flex; flex-direction: column; align-items: center; gap: 18px; animation: reveal-pop .35s cubic-bezier(.2,.8,.2,1); }
.reveal-card { width: 210px; max-width: 70vw; aspect-ratio: 5 / 7; }
.reveal-card svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 18px 44px rgba(0,0,0,.5)); }
@keyframes reveal-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }