/* Tema visual opcional: fondo animado + glassmorphism */

:root{
  --bg-light: #f0f4f8;
  --ink-light: #0f172a;
  --panel-light: #ffffff;
  --muted-light: #475569;

  --bg-dark: #0b0f1a;
  --ink-dark: #e5e7eb;
  --panel-dark: rgba(255,255,255,0.06);
  --muted-dark: #9ca3af;

  --brand: #6d5efc;
  --brand-2: #22c55e;
}

/* Fondo animado sutil */
body::before{
  content:""; position: fixed; inset: 0; z-index: -2;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(109,94,252,.25), transparent 60%),
              radial-gradient(1000px 500px at 90% 30%, rgba(34,197,94,.2), transparent 60%),
              radial-gradient(900px 600px at 50% 90%, rgba(59,130,246,.18), transparent 60%),
              var(--bg-light);
  filter: saturate(120%);
}

.theme-dark body::before{
  background: radial-gradient(1200px 600px at 10% 10%, rgba(109,94,252,.2), transparent 60%),
              radial-gradient(1000px 500px at 90% 30%, rgba(34,197,94,.16), transparent 60%),
              radial-gradient(900px 600px at 50% 90%, rgba(59,130,246,.14), transparent 60%),
              var(--bg-dark);
}

/* Sutil movimiento */
@keyframes floatAura { 0%{transform:translateY(0)} 50%{transform:translateY(-12px)} 100%{transform:translateY(0)} }
body::after{
  content:""; position: fixed; inset: -10%; z-index: -3; opacity:.35; pointer-events:none;
  background: radial-gradient(50% 40% at 30% 20%, rgba(255,255,255,.08), transparent 60%),
              radial-gradient(50% 40% at 70% 80%, rgba(255,255,255,.06), transparent 60%);
  animation: floatAura 14s ease-in-out infinite;
}

/* Tarjetas con efecto vidrio en modo oscuro */
.theme-dark .game-card{
  background: var(--panel-dark) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.06);
  color: var(--ink-dark);
}

/* Tipografía y colores generales */
.theme-dark body{ color: var(--ink-dark); }

/* Botones de navegación estilo píldora con glow activo */
header .nav-btn{
  background: rgba(15,23,42,0.06) !important;
  color: #334155 !important;
  border: 1px solid rgba(15,23,42,0.08);
  padding: 6px 10px !important;
  border-radius: 9999px;
  font-size: .9rem;
  display: inline-flex; align-items: center; gap: 6px;
}
.theme-dark header .nav-btn{
  background: rgba(255,255,255,0.06) !important;
  color: var(--ink-dark) !important;
  border: 1px solid rgba(255,255,255,0.08);
}
header .nav-btn.active{
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: white !important;
  box-shadow: 0 8px 22px -6px rgba(109,94,252,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Botones primarios */
.btn{
  box-shadow: 0 6px 16px -6px rgba(37,99,235,.4);
}
.theme-dark .btn{ box-shadow: 0 6px 16px -6px rgba(109,94,252,.4); }

/* Inputs con borde suave */
.theme-dark .input-field{
  background: rgba(255,255,255,0.04);
  color: var(--ink-dark);
  border-color: rgba(255,255,255,0.12);
}

/* Ajuste emojis de memoria según tamaño del grid */
#memory-grid .memory-card .content{ font-size: clamp(1.3rem, 4.2vw, 2.6rem); }

/* Footer sutil (si lo hubiera) */
.soft-footer{ opacity:.7; font-size:.85rem; }

/* Share modal */
#share-overlay{ position: fixed; inset:0; display:none; z-index: 60; }
#share-overlay.show{ display:block; }
#share-overlay .share-backdrop{ position:absolute; inset:0; background: rgba(15,23,42,.5); backdrop-filter: blur(2px); }
#share-overlay .share-modal{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(560px, 92vw); background: #fff; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,.25); overflow:hidden; }
.theme-dark #share-overlay .share-modal{ background: rgba(255,255,255,0.06); color: var(--ink-dark); border:1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); }
#share-overlay .share-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(0,0,0,.06); }
.theme-dark #share-overlay .share-header{ border-bottom-color: rgba(255,255,255,.08); }
#share-overlay .share-title{ font-weight:700; }
#share-overlay .share-close{ background: transparent; border:0; font-size: 1.1rem; cursor:pointer; color: inherit; }
#share-overlay .share-body{ padding:14px; display:grid; gap:12px; }
#share-overlay .share-text{ width:100%; min-height: 96px; resize: none; padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.1); background:#f8fafc; }
.theme-dark #share-overlay .share-text{ background: rgba(255,255,255,.06); color: var(--ink-dark); border-color: rgba(255,255,255,.12); }
#share-overlay .share-actions{ display:flex; gap:10px; flex-wrap:wrap; }
#share-overlay .share-btn{ padding:8px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.1); text-decoration:none; color:inherit; cursor:pointer; }
.theme-dark #share-overlay .share-btn{ border-color: rgba(255,255,255,.12); }
#share-overlay .share-btn.tw{ background:#1da1f2; color:#fff; border-color: transparent; }
#share-overlay .share-btn.wa{ background:#25d366; color:#fff; border-color: transparent; }
#share-overlay .share-btn.fb{ background:#1877f2; color:#fff; border-color: transparent; }
#share-overlay .share-btn.tg{ background:#229ED9; color:#fff; border-color: transparent; }
/* Forzar color de fondo base neutral: el fondo real es ::before */
body{ background: transparent !important; }