/* Menú desplegable "Minijuegos" (ver shared/minigames.js). Colores propios para que
   funcione igual en todos los modos, cada uno con su hoja de estilos. */
.mg {
  position: relative;
  --mg-surface: #101314; --mg-surface-2: #161a1b; --mg-line: #22292a; --mg-line-2: #2f3839;
  --mg-text: #f3f6f4; --mg-text-2: #a4afab; --mg-text-3: #6d7874;
  --mg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.mg-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px 0 13px;
  border-radius: 12px; border: 1px solid var(--mg-line); background: var(--mg-surface);
  color: var(--mg-text); font-size: 0.88rem; font-weight: 650; line-height: 1;
  cursor: pointer; list-style: none; user-select: none; -webkit-user-select: none;
  transition: border-color 0.15s, background 0.15s;
}
.mg-btn::-webkit-details-marker { display: none; }
.mg-btn:hover, .mg[open] > .mg-btn { border-color: var(--mg-line-2); background: var(--mg-surface-2); }
.mg-btn:focus-visible { outline: 2px solid var(--mg-text-2); outline-offset: 2px; }
.mg-btn svg { width: 17px; height: 17px; flex: none; }
.mg-grid { color: var(--mg-text-2); }
.mg-chev { color: var(--mg-text-3); transition: transform 0.25s var(--mg-ease); }
.mg[open] .mg-chev { transform: rotate(180deg); }

.mg-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  width: min(330px, calc(100vw - 24px)); padding: 6px;
  background: rgba(16, 19, 20, 0.96); border: 1px solid var(--mg-line); border-radius: 18px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85);
  animation: mg-in 0.22s var(--mg-ease);
  transform-origin: top center;
}
.mg-menu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mg-item {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 13px;
  color: var(--mg-text); text-decoration: none; text-align: left;
  transition: background 0.15s;
}
.mg-item:hover, .mg-item:focus-visible { background: var(--mg-surface-2); outline: none; }
.mg-ico {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mg-item:hover .mg-ico { transform: rotate(-6deg) scale(1.06); }
.mg-ico svg { width: 21px; height: 21px; }
.mg-txt { flex: 1; min-width: 0; display: grid; gap: 1px; }
.mg-txt strong { font-size: 0.92rem; font-weight: 700; letter-spacing: -0.01em; }
.mg-txt small { font-size: 0.78rem; color: var(--mg-text-2); line-height: 1.35; }
.mg-go { width: 16px; height: 16px; flex: none; color: var(--mg-text-3); transition: transform 0.2s var(--mg-ease), color 0.15s; }
.mg-item:hover .mg-go { transform: translateX(3px); color: var(--c); }
.mg-here {
  flex: none; padding: 3px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent);
}
.mg-item[aria-current="page"] { background: color-mix(in srgb, var(--c) 6%, transparent); }

@keyframes mg-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .mg-lbl { display: none; }
  .mg-btn { padding: 0 9px; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .mg-menu { animation: none; }
  .mg-chev, .mg-ico, .mg-go { transition: none; }
}