/* reloj.css — Reloj mental (hora pensada, con minutos) */

/* 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 ===================== */
.rj-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 22%, #ece9ff 0%, #dee0f3 60%, #ced0ec 100%); color:#2a2550; }
.rj-inner { width:100%; max-width:520px; padding:24px 20px 36px; display:flex; flex-direction:column; align-items:center; gap:22px; text-align:center; }
.rj-title { font-size:22px; font-weight:800; margin:0; }
.rj-status { font-size:14px; color:#6b6790; margin:0; min-height:20px; transition:color .3s; }
.rj-status.is-ready { color:#5a3ec8; }
.rj-status.is-done  { color:#1f9d55; font-weight:700; }
.rj-status.is-error { color:#d6213a; }

.rj-clock { width:280px; height:280px; max-width:82vw; max-height:82vw; border-radius:50%; transition:filter .6s, box-shadow .6s; }
.rj-clock svg { width:100%; height:100%; display:block; }

/* Efecto "leyendo la mente": aura violeta pulsante */
.rj-clock.reading { animation:rjReading 1.6s ease-in-out infinite; }
@keyframes rjReading {
  0%,100% { box-shadow:0 0 0 4px rgba(108,92,231,.10), 0 0 24px rgba(108,92,231,.30); }
  50%     { box-shadow:0 0 0 9px rgba(108,92,231,.20), 0 0 48px rgba(108,92,231,.60); }
}

/* Parada final: brillo fijo */
.rj-clock.revealed { box-shadow:0 0 0 6px rgba(108,92,231,.15), 0 0 42px rgba(108,92,231,.45); filter:drop-shadow(0 0 8px rgba(108,92,231,.5)); }
.rj-clock.revealed .rj-hand-hour line { stroke:#4a2fc0; }

.rj-new { font-size:15px; font-weight:800; letter-spacing:.5px; padding:13px 36px; border-radius:14px; border:none; background:linear-gradient(135deg,#6c5ce7,#1a73e8); color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(108,92,231,.35); }
.rj-new:active { transform:translateY(1px); }
.rj-new:disabled { opacity:.5; cursor:default; box-shadow:none; }

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

.rj-min-row { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; }
.rj-min-label { font-size:14px; color:var(--muted); font-weight:600; }
.rj-min-input { width:90px; font-size:22px; font-weight:700; text-align:center; padding:8px 6px; border-radius:12px; border:1.5px solid var(--line); color:#3a3550; background:#fff; }
.rj-min-input:focus { outline:none; border-color:var(--brand1); box-shadow:0 0 0 3px rgba(108,92,231,.18); }

.rj-ctrl-preview { width:160px; height:160px; }
.rj-ctrl-preview svg { width:100%; height:100%; }