/* moneda.css — La Moneda Elegida (auras estilo La Venda sobre 5 monedas) */

/* 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-bar.exit-bottom { top:auto; bottom:14px; right:50%; transform:translateX(50%); }
.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 ===================== */
.mo-screen { min-height:100svh; min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 22%, #2a2360 0%, #1a1442 52%, #0b0920 100%); color:#ece9ff; }
.mo-inner { width:100%; max-width:520px; padding:22px 18px 40px; display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }
.mo-title { font-size:22px; font-weight:800; letter-spacing:.5px; margin:0; }
.mo-status { font-size:14px; color:#b6ade8; margin:0; min-height:20px; transition:color .3s; }
.mo-status.is-scan { color:#c9b8ff; }
.mo-status.is-done { color:#9fffd6; font-weight:700; }
.mo-status.is-error{ color:#ff8a9c; }

/* Foto con las monedas */
.mo-photo { position:relative; width:100%; max-width:470px; margin:0 auto; border-radius:16px; overflow:hidden;
  background:#0d1117; box-shadow:0 12px 34px rgba(0,0,0,.4); border:1px solid rgba(150,130,255,.18); }
.mo-imgwrap { display:block; width:100%; }
.mo-imgwrap img, .mo-imgwrap svg { display:block; width:100%; height:auto; }
.mo-auras { position:absolute; inset:0; pointer-events:none; }

/* Aura (estilo La Venda Psicológica) sobre cada moneda */
.mo-aura { position:absolute; transform:translate(-50%,-50%); aspect-ratio:1; border-radius:50%; opacity:0;
  transition:opacity .45s ease, box-shadow .3s ease, border-color .3s ease;
  border:2px solid rgba(180,160,255,0);
  background:radial-gradient(circle at 50% 45%, rgba(124,109,230,.26), rgba(124,109,230,0) 72%); }
.mo-aura::before, .mo-aura::after { content:""; position:absolute; inset:-2px; border-radius:50%; border:2px solid rgba(185,165,255,.6); opacity:0; }
/* detectada: aro fino visible (sin glow fuerte) */
.mo-aura.found { opacity:.5; border-color:rgba(190,170,255,.78); box-shadow:inset 0 0 12px rgba(150,130,255,.22); }
/* activa/escaneando: glow + pulsos */
.mo-aura.on { opacity:.92; border-color:rgba(205,190,255,.9); box-shadow:inset 0 0 16px rgba(160,135,255,.4), 0 0 18px rgba(150,120,235,.4); }
.mo-aura.on::before { animation:moAura 1.5s ease-out infinite; opacity:1; }
.mo-aura.on::after  { animation:moAura 1.5s ease-out infinite .75s; opacity:1; }
@keyframes moAura { 0%{ transform:scale(.7); opacity:.9; } 100%{ transform:scale(1.35); opacity:0; } }
.mo-aura.scan { opacity:1; border-color:#d9ccff; box-shadow:inset 0 0 22px rgba(195,180,255,.6), 0 0 30px rgba(165,135,255,.6); }
.mo-aura.pick { opacity:1; border-color:#efe4ff; box-shadow:inset 0 0 26px rgba(212,197,255,.75), 0 0 46px rgba(180,145,255,.85); }
.mo-aura.pick::before, .mo-aura.pick::after { border-color:rgba(230,218,255,.95); }
/* destello al detectar cada moneda */
.mo-aura.flash { animation:moFlash .85s ease; }
@keyframes moFlash { 0%{ border-color:rgba(230,218,255,.2); box-shadow:0 0 0 rgba(200,185,255,0); } 40%{ border-color:#efe4ff; box-shadow:0 0 26px rgba(190,160,255,.7); } 100%{ border-color:rgba(190,170,255,.78); box-shadow:inset 0 0 12px rgba(150,130,255,.22); } }

/* Botones */
.mo-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.mo-btn { font-size:14px; font-weight:700; padding:12px 24px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(150,130,255,.4); background:rgba(124,109,230,.18); color:#ece9ff; transition:transform .1s, box-shadow .2s, opacity .2s; }
.mo-btn:hover { box-shadow:0 8px 22px rgba(108,92,231,.35); }
.mo-btn:active { transform:translateY(1px); }
.mo-btn[disabled] { opacity:.5; cursor:default; }
.mo-btn.primary { background:linear-gradient(135deg,#6c5ce7,#9a86ff); color:#160f36; border:none; }
.mo-btn.ghost { background:transparent; }

/* Hotspot secreto + aviso */
.mo-secret { position:fixed; left:0; bottom:0; width:64px; height:64px; z-index:55; background:transparent; border:none; }
.mo-hint { position:fixed; left:10px; bottom:12px; z-index:56; font-size:11px; color:rgba(201,184,255,.6); background:rgba(20,16,52,.65); border:1px solid rgba(150,130,255,.25); border-radius:8px; padding:3px 8px; opacity:0; transition:opacity .3s; pointer-events:none; }
.mo-hint.show { opacity:1; }

/* ===================== CONTROL ===================== */
.mo-force-note { width:100%; font-size:12px; color:var(--muted); background:#f3f0ff; border:1px solid #e6e0fb; border-radius:12px; padding:9px 12px; text-align:center; line-height:1.5; }
.mo-force-note b { color:var(--brand1); }
.mo-force-note .k { font-weight:700; color:var(--ink); }

.mo-ctrl-preview { width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px dashed var(--line); color:var(--muted); font-size:34px; font-weight:700; }
.mo-ctrl-preview svg { width:100%; height:100%; }
.mo-ctrl-preview.empty svg { display:none; }

.mo-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; width:100%; }
.mo-coin-btn { aspect-ratio:1/1; border-radius:50%; cursor:pointer; padding:4px; border:2px solid var(--line); background:#fff; transition:border-color .2s, box-shadow .2s, transform .1s; }
.mo-coin-btn svg { width:100%; height:100%; display:block; }
.mo-coin-btn.sel { border-color:var(--brand1); box-shadow:0 0 0 3px rgba(108,92,231,.18); }
.mo-coin-btn:active { transform:translateY(1px); }

@media (max-width:420px) { .mo-grid { gap:6px; } }