/* crono.css — El Cronómetro del Destino (frena por inercia en el objetivo) */

/* 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 ===================== */
.cr-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 12%, #26203e 0%, #151030 50%, #090617 100%); color:#cfc8e8; overflow:hidden; }
.cr-screen .exit-btn { background:rgba(30,24,58,.85); color:#a89fd0; border-color:#3c3468; }
.cr-inner { position:relative; width:100%; max-width:480px; min-height:100svh; min-height:100vh; padding:26px 18px 40px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; text-align:center; }
.cr-conn { margin:0; min-height:18px; font-size:12.5px; font-style:italic; color:#8d84b8; }
.cr-conn.is-ready { color:#c9a84c; }
.cr-conn.is-error { color:#d66; }

/* Esfera */
.cr-dialwrap { position:relative; width:min(300px, 78vw); aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; }
.cr-ring { position:absolute; inset:0; border-radius:50%; background:conic-gradient(#e8d590 0deg, rgba(201,168,76,.15) 0deg); -webkit-mask:radial-gradient(circle, transparent 64%, #000 65.5%, #000 100%); mask:radial-gradient(circle, transparent 64%, #000 65.5%, #000 100%); transition:filter .4s; }
.cr-ring.landed { filter:drop-shadow(0 0 18px rgba(232,213,144,.8)); }
.cr-dial { position:absolute; inset:9%; border-radius:50%; background:radial-gradient(circle at 38% 30%, #262045 0%, #14102c 70%); border:1.5px solid rgba(201,168,76,.4); box-shadow:inset 0 0 34px rgba(0,0,0,.6), 0 12px 40px rgba(0,0,0,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.cr-time { margin:0; font-size:56px; font-weight:300; letter-spacing:1px; color:#f2eeff; font-variant-numeric:tabular-nums; font-family:"Segoe UI", Arial, sans-serif; }
.cr-time span { color:#c9a84c; font-weight:400; }
.cr-unit { margin:0; font-size:10px; letter-spacing:3.5px; color:#6f668f; }

/* Botón principal */
.cr-btn { width:112px; height:112px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; letter-spacing:1.5px; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.5); transition:background .25s; }
.cr-btn.start { background:radial-gradient(circle at 35% 30%, #2fdc9b, #0f9d63 75%); }
.cr-btn.stop  { background:radial-gradient(circle at 35% 30%, #ff7a68, #c2261d 75%); }
.cr-btn:active { transform:translateY(2px); }
.cr-btn:disabled { opacity:.75; cursor:default; }

.cr-hint { margin:0; font-family:Georgia, serif; font-size:13px; letter-spacing:1px; color:#8d84b8; font-style:italic; min-height:20px; }
.cr-resetlocal { font-size:12px; font-weight:600; letter-spacing:1px; padding:8px 22px; border-radius:99px; border:1px solid #3c3468; background:rgba(30,24,58,.6); color:#a89fd0; cursor:pointer; }
.cr-resetlocal:active { transform:translateY(1px); }

/* ===================== CONTROL ===================== */
.cr-save { 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); }
.cr-save:active { transform:translateY(1px); }
.cr-note { margin:0; font-size:12px; color:var(--muted); text-align:left; width:100%; }

.cr-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
.cr-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; }
.cr-act:active { transform:translateY(1px); }
.cr-act .big { font-size:14px; }
.cr-act .sub { font-size:10.5px; font-weight:600; opacity:.85; }
.cr-act.clear { background:linear-gradient(135deg,#8a6cf0,#5a3fd0); }
.cr-act.reset { background:#3a4150; }